minimini--cursocurso
DESENVOLVIMENTODESENVOLVIMENTODESENVOLVIMENTODESENVOLVIMENTOpara web com padrões para web com padrões para web com padrões para web com padrões ((TablelessTableless, , WebstandardsWebstandards e Usabilidade)e Usabilidade)
Danilo Rosisca PereiraEspecialista em Sistemas para Internet
Desenvolvimento para Web com Padrões
O A d W b
Desenvolvimento para Web com Padrões
O Avanço da Web
Percebe-se o aumento exagerado de informações disponibilizadas em ambientes digitaisambientes digitais.
E muitas vezes apresentadas de forma E muitas vezes, apresentadas de forma desorganizada.
Desenvolvimento para Web com PadrõesDesenvolvimento para Web com Padrões
AA NOVA GERAÇÃO DA WEB
exige uma mudançaexige uma mudançae um repensar noprocesso de desenvolvimento de processo de desenvolvimento de ambientes informacionais digitais.d g ta s.
Desenvolvimento para Web com PadrõesDesenvolvimento para Web com Padrões
AA Web 2.0 é A NOVA GERAÇÃO DA WEB, que
traz novas regras e
serviços baseados serviços baseados na Web como plataforma.
Desenvolvimento para Web com PadrõesDesenvolvimento para Web com Padrões
AA Web 2.0 busca
i t ã t a interação entre usuários, com a criação e o compartilhamento de
conteúdoconteúdo.
Arquitetura daInformação
Desenvolvimento para Web com PadrõesDesenvolvimento para Web com Padrões
A i d I f ãArquitetura da Informação
Foi criada por Saul Wurman em 1976 com o objetivo de Foi criada por Saul Wurman em 1976, com o objetivo de organizar a informação, para:
• tornar simples o que é complexo;
• buscar um balanceamento entre usuário-conteúdo-contexto;
• facilitar para as pessoas o acesso a informação• facilitar para as pessoas o acesso a informação.
Desenvolvimento para Web com PadrõesDesenvolvimento para Web com Padrões
Si d A i d I f ãSistemas da Arquitetura da Informação
A Arquitetura da Informação possui 4 sistemas e quando A Arquitetura da Informação possui 4 sistemas, e quando reunidas servem para organizar o ambiente informacional digital(website). Rosenfeld e Morville (2006). g ( ) ( )
E i ãEsses sistemas são:
Desenvolvimento para Web com PadrõesDesenvolvimento para Web com Padrões
Si t d O i ã Sistema de Organização: Maneira de categorizar e organizar a informação.
1
Esquema de Organização Esquema de Organização
1
Esquema de Organização Alfabética
Esquema de Organização Alfabética
Esquema de Organização por
Tempo
Esquema de Organização por
TempoTempoTempo
Esquema de Organização por Assunto
Esquema de Organização por Assunto
23
Desenvolvimento para Web com PadrõesDesenvolvimento para Web com Padrões
Si t d R t l ã Sistema de Rotulação:
Define a forma de representar a Define a forma de representar a informação.
Sã l t f d t i São elementos fundamentais que antecipam o que virá a seguir logo após efetuar o clique em um link.
Desenvolvimento para Web com PadrõesDesenvolvimento para Web com Padrões
Si t d N ã Sistema de Navegação: Determina o modo de navegar ou mover no espaço Informacional (e hipertextual).
Desenvolvimento para Web com PadrõesDesenvolvimento para Web com Padrões
Si t d P i Sistema de Pesquisa:
dú id Estabelece as dúvidas (perguntas) executadas em uma consulta de pesquisa e como elas consulta de pesquisa e como elas serão respondidas.
(Exemplo de busca de fácil compreensão)
UsabilidadeUsabilidade
Desenvolvimento para Web com PadrõesDesenvolvimento para Web com Padrões
U bilid dUsabilidade:
Poss i componentes múltiplos e é radicionalmente associada Possui componentes múltiplos e é radicionalmente associada com estes cinco atributos:
• Ser fácil de APRENDER;
• Ser eficiente na utilização;Ser eficiente na utilização;
• Ser fácil de ser recordado;
• Ter poucos erros;• Ter poucos erros;
• Ser subjetivamente agradável.
(Nilsen, 1993)
Desenvolvimento para Web com PadrõesDesenvolvimento para Web com Padrões
U bilid dUsabilidade:
Tempo de do nload mínimoTempo de download mínimo
Dez segundos é o limite para Dez segundos é o limite para manter a atenção do usuário.
(Jacob Nielsen)
Desenvolvimento para Web com PadrõesDesenvolvimento para Web com Padrões
U bilid dUsabilidade:
Fácil de navegarFácil de navegarVisitantes não devemperder tempo pensando e tentando descobrir:
- Onde está?
- Onde posso ir?p
- Por onde devo começar?- Quais são as coisas mais - Quais são as coisas mais importantes nesta página? PostePoste com com dezenasdezenas
de de setassetas parapara todostodos ladoslados
Desenvolvimento para Web com PadrõesDesenvolvimento para Web com Padrões
Usabilidade: Tipografia
As fontes tipográficas (ou apenas fontes) são classificadas em 4 grupos básicos: as com serifas, as ,sem serifas, as cursivas e as fontes dingbats.g
Fonte: DigitalPaperWeb.com.br Acessado em: 01 julho 2008
Desenvolvimento para Web com Padrões
Usabilidade: F t l í i b
Desenvolvimento para Web com Padrões
Usabilidade: Fontes legíveis para web
Nome da Fonte Característica
Arial Moderna, limpa, básica.
F t if j t d l it liGeorgia
Fonte com serifa projetada para leitura on-line.Aparência Tradicional, visual mais moderno que Times News Roman.
Trebuchet MS Moderna, simples.
Verdana Fonte on-line mais legivel, mesmo em texto pequeno
Todas com 10 pontos ou acima.(Nielsen e Loranger, 2007)
Desenvolvimento para Web com PadrõesDesenvolvimento para Web com Padrões
Usabilidade: Legibilidade, textos existem para serem lidos.
Exemplo:Fonte serifadaFonte serifada
í l í lFonte serifadaFonte serifada
í l í lExemplo:
Curiosidade, inovação e descoberta
para títulopara títulopara títulopara título
A World Wide Web abriu fronteiras inacreditáveis: pela primeira vez os profissionais de layout e artes gráficas têm acesso a um público enorme, que pode ver seus trabalhos a qualquer instantequalquer instante.
Alguns dizem que o conjunto das tais “páginas pessoais” é a maior exposição pública de arte da história.
Sob alguns aspectos, esse público é até maior que o dos publicitários, pois não tem restrições de tempo.
Fonte Fonte semsem serifaserifapara para textotexto
Fonte Fonte semsem serifaserifapara para textotexto
Desenvolvimento para Web com PadrõesDesenvolvimento para Web com Padrões
COMBINAÇÃO DE CORESCOMBINAÇÃO DE CORES NÍVEL DE LEITURANÍVEL DE LEITURACOMBINAÇÃO DE CORESCOMBINAÇÃO DE CORES NÍVEL DE LEITURANÍVEL DE LEITURA
Texto preto com fundo branco Valor mais alto de contraste
T l f d b Dif ti lt t t l Texto azul contra fundo branco Diferença perceptiva alta, contanto que se use azul escuro.
Texto preto com fundo cinzaDiferença perceptiva média e alta dependendo das combinações de cores e do nível de saturação.cores e do nível de saturação.
Texto branco com fundo azulDifícil de ler, pois o fundo escuro é percebido mais intensamente que o texto branco.
Texto cinza com fundo branco. Baixo valor de contraste, diferença perceptível baixa.
Texto branco com fundo cinza Baixo valor de contraste, diferença perceptível baixa. Texto branco com fundo cinza. Baixo valor de contraste, diferença perceptível baixa.
Texto vermelho com fundo azulDiferença perceptível muito baixa, combinações de cores escuras criam um efeito vibrante, cansando os olhos. ,
Texto vermelho contra fundo preto.Diferença perceptível muito baixa, combinações de cores escuras criam um efeito vibrante, cansando os olhos.
Desenvolvimento para Web com Padrões
U bilid d P b i
Desenvolvimento para Web com Padrões
Usabilidade: Portanto um website...
Bicicleta Convergente de Jacques Carelman.
Deve ser fácil de usar; Com simplicidade, OBJETIVIDADE e
foco na experiência foco na experiência do usuáriousuário.
WebstandardsWebstandards
Desenvolvimento para Web com PadrõesDesenvolvimento para Web com Padrões
Padrões Web (Webstandards)
Criados pelo W3C (World Wide Web Consortium), eles separam o conteúdo em HTML da apresentação em CSS, mantendo a compatibilidade e portabilidade com navegadores dispositivos a compatibilidade e portabilidade com navegadores, dispositivos...
(Ferreira, 2005, p. 12)
Desenvolvimento para Web com PadrõesDesenvolvimento para Web com Padrões
Padrões Web (Webstandards)
Os Padrões Web tornam o desenvolvimento mais simples e produtivo, resultando em:
Montagem Rápida do Layout;Desenvolvimento simplificado;Desenvolvimento simplificado;Independência entre layout e conteúdo;Manutenção simplificada;Padrões Reaproveitáveis.
(Ferreira, 2005)
Desenvolvimento para Web com PadrõesDesenvolvimento para Web com Padrões
Padrões Web (Webstandards)
Boa posição nas ferramentas de busca
SEO S h E i O ti i tiSEO – Search Engine Optimization:
A estratégia de divulgação é peça fundamental para o sucesso de l ó i liqualquer negócio online.
Saiba mais: http://www.maujor.com/
AgoraAgora
Chega de conversaChega de conversa...
Desenvolvimento para Web com PadrõesDesenvolvimento para Web com Padrões
Padrões Web ‐ Introdução ao CSS
Sintaxe:
seletor {propriedade: valor;}
Desenvolvimento para Web com PadrõesDesenvolvimento para Web com Padrões
Padrões Web ‐ Introdução ao CSS
Inserindo CSS na página:
Existem 3 formas para aplicar CSS em páginas:
CSS Inline,
CSS Interno, e,
CSS Externo.
Desenvolvimento para Web com PadrõesDesenvolvimento para Web com Padrões
Padrões Web ‐ Introdução ao CSS
CSS Externo: (mais produtivo)
<link rel="stylesheet" type="text/css" href="seuarquivo.css" />
Desenvolvimento para Web com PadrõesDesenvolvimento para Web com Padrões
Padrões Web ‐ Introdução ao CSS
A ib idAtributo id:
O nome do id deve ser único. Não pode haver mais de um id com pmesmo nome em uma página.
O uso do ID é especificado assim:O uso do ID é especificado assim:
#nome { color:black;}
<div id="nome">conteúdo</div>
Desenvolvimento para Web com PadrõesDesenvolvimento para Web com Padrões
Padrões Web ‐ Introdução ao CSS
A ib classAtributo class:Ela serve para criar um grupo de elemento que terão características p g p qiguais e pode ser usado o mesmo nome varias vezes em uma página.O uso da class é especificado assim:
.destaques {background‐color:black;color:white;font‐family: Verdana;
}}<div class="destaques“> Aqui vai o texto do destaque</div>
Desenvolvimento para Web com PadrõesDesenvolvimento para Web com Padrões
Olá mundo:<!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Transitional//EN"
Arquivo externo estilo.css
#principal{ width: 250px;}3"http://www.w3.org/TR/xhtml1/DTD/xhtml1‐transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http‐equiv="Content‐Type" content="text/html; charset=iso‐8859‐1" />
.destaque {background‐color:black;p q yp 59
<link rel="stylesheet" href="estilo.css" media="screen" type="text/css"/><title>Exemplo 1</title></head>
color: #ededed;font‐family: Verdana;}
<body>
<div id="principal" class="destaque">Olá mundo tableless!
</div></div>
</body></html>
Desenvolvimento para Web com PadrõesDesenvolvimento para Web com Padrões
Exemplo 2: Arquivo externo estilo.css
* {
<div id="geral"> margin:0px;padding:0px;list-style:none;text-decoration:none;}
# l {</div> #geral {margin: 0 auto;width: 960px;position: relative;position: relative;}
Desenvolvimento para Web com PadrõesDesenvolvimento para Web com Padrões
Exemplo 3: #topo {font-family: Arial, Helvetica, sans-serif;font-size: 36px;
<h1 id="topo">Logo – topo
color: #FF0000;background-color: #000000;display: block;g
</h1> float: left;height: 70px;width: 400px;
ddi 30 0 0 25padding: 30px 0 0 25px;}
Desenvolvimento para Web com PadrõesDesenvolvimento para Web com Padrões
Exemplo 4.1:
<div id="menu"><ul>
li h f "#" M / /li<li><a href="#">Menu 1</a></li><li><a href="#">Menu 2</a></li><li><a href="#">Menu 3</a></li><li><a href= # >Menu 3</a></li><li><a href="#">Menu 4</a></li><li><a href="#" class="menu5">Menu 5</a></li>
</ul></div>
Desenvolvimento para Web com PadrõesDesenvolvimento para Web com Padrões
Exemplo 4.2:#menu li a{font: 16px Verdana Arial Helvetica sans-serif;
#menu ul {background:#000000;width: 500px;
font: 16px Verdana, Arial, Helvetica, sans serif;color: #FFFFFF;float: left;margin: 45px 20px 0 20px;width: 500px;
height: 100px;float: left;padding: 0 0 0 35px;
margin: 45px 20px 0 20px;_margin: 45px 10px 0 20px;}
padding: 0 0 0 35px;}
#men l li{
#menu li a:hover {text-decoration:underline;
#menu ul li{ display:inline;list‐style: none;
color: #ccc;}
} #menu li.menu5 a { margin: 45px 0 0 20px;}
Desenvolvimento para Web com PadrõesDesenvolvimento para Web com Padrões
Exemplo 5:#condeudo {float:left;
<div id="conteudo">float:left;width:910px;border-color:#000;border style:none solid solid;
</div>
border-style:none solid solid;border-width:10px;padding:10px 15px;}}
Desenvolvimento para Web com PadrõesDesenvolvimento para Web com Padrões
Exemplo 6: #condeudo h2 {font: bold 28px Arial, Helvetica, sans-serif;margin: 15px 0;
<h2>Web Standards</h2><p>Texto xyz – Baixar texto
margin: 15px 0;}
#condeudo p {Texto xyz Baixar texto</p>
#condeudo p {font: 16px/28px Arial, Helvetica, sans-serif;width: 450px;
i 0 20 0 0margin: 0 20px 0 0;display: block;float:left;}
Desenvolvimento para Web com PadrõesDesenvolvimento para Web com Padrões
Exemplo 7.1:
<div id="col2">
</div>
#col2 {float:left;width: 200px;/div p ;display:block;}
Desenvolvimento para Web com PadrõesDesenvolvimento para Web com Padrões
Exemplo 7.2:
<h1><a href="#">Meu 1º.........</a></h1>
#col2 h1 a{background: #000;border: solid 10px #999;/h1
<h1><a href="#">Exemplo </a>
p ;width: 400px;height: 75px;float: left;<a href= # >Exemplo...... </a>
</h1>
<h >
float: left;font: bold 60px Georgia, "Times New Roman", Times, serif;color: #FFFFFF;<h1>
<a href="#">Tableless!....</a></h1>
color: #FFFFFF;padding: 15px 10px;margin: 0 0 20px 0;}}
Desenvolvimento para Web com PadrõesDesenvolvimento para Web com Padrões
Exemplo 8:
#rodape{<div id="rodape">Copyright © 2008. Todos os direitos reservados.
#rodape{font: 10px Verdana, Arial, Helvetica, sans-serif;color: #999;margin: 20p 0 0 0;Todos os direitos reservados.
</div>margin: 20px 0 0 0;width: 910px;height: 20px;float:left;}
Desenvolvimento para Web com PadrõesDesenvolvimento para Web com Padrões
REFERÊNCIAS BIBLIOGRÁFICAS REFERÊNCIAS BIBLIOGRÁFICAS
FERREIRA, E. Produtividade Web 2.0. São Paulo: Visie, 2005.
ÓMEMÓRIA, F. Design para Internet: projetando a experiência perfeita. Rio de Janeiro: Elsevier, 2005.
NIELSEN, J. Usabiliy Engineering. San Francisco: Academic Press, 1993. 361 p.
NIELSEN, J.; LORANGER, H. Usabilidade na web. Rio de Janeiro: Elsevier, 2007.
ROSENFELD, L.; MORVILLE, P. Information Architecture for the Word Wide Web. 2ed. Sebastopol: O'Reilly, 2006.
SHEA, D.; HOLZSCHLAG, M.. The zen of css design: visual enlightenment for the web. Peachpit Press: Berkeley/CA, 2005.
ZELDMAN J D i i ith b t d d N Rid P bli hi I di li IN 2003ZELDMAN, J. Designing with web standards. New Riders Publishing: Indianapolis, IN, 2003.
Recommended
