O documento discute o desenvolvimento para web com padrões, incluindo tableless, webstandards e usabilidade. Aborda conceitos como arquitetura da informação, sistemas de organização, rotulação, navegação e pesquisa. Também discute usabilidade, legibilidade, cores, fontes e introduz CSS.
3. Desenvolvimento para Web com Padrões
OA
Avanço d W b
da Web
Percebe-se o aumento exagerado de
informações disponibilizadas em
ambientes digitais
digitais.
E muitas vezes apresentadas de forma
vezes,
desorganizada.
10. Desenvolvimento para Web com Padrões
Arquitetura d Informação
i da f ã
Foi criada por Saul Wurman em 1976 com o objetivo de
1976,
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
informação.
11. Desenvolvimento para Web com Padrões
Si
istemas d Arquitetura d Informação
da i da f ã
A Arquitetura da Informação possui 4 sistemas e quando
sistemas,
reunidas servem para organizar o ambiente informacional
digital(website). Rosenfeld e Morville (
g ( ) (2006).
)
Esses sistemas são:
E i ã
12. Desenvolvimento para Web com Padrões
Sistema d O
Si t de Organização: Maneira de categorizar e organizar a
i ã
informação.
1
Esquema de Organização
Alfabética
Esquema de
Organização por
Tempo
2 Esquema de
Organização
3
por Assunto
13. Desenvolvimento para Web com Padrões
Sistema d R t l ã
Si t de Rotulação:
Define a forma de representar a
informação.
São l
Sã elementos f d
t fundamentais que
t i
antecipam o que virá a seguir logo
após efetuar o clique em um link.
15. Desenvolvimento para Web com Padrões
Sistema d P
Si t de Pesquisa:
i
Estabelece as dú id
dúvidas
(perguntas) executadas em uma
consulta de pesquisa e como elas
serão respondidas.
(Exemplo de busca de fácil compreensão)
17. Desenvolvimento para Web com Padrões
Usabilidade:
U bilid d
Possui
Poss i componentes múltiplos e é radicionalmente associada
com estes cinco atributos:
• Ser fácil de APRENDER;
• Ser eficiente na utilização;
• Ser fácil de ser recordado;
• Ter poucos erros;
• Ser subjetivamente agradável.
(Nilsen, 1993)
19. Desenvolvimento para Web com Padrões
Usabilidade:
U bilid d
Fácil de navegar
Visitantes não devem
perder tempo pensando e
tentando descobrir:
- Onde está?
- Onde posso ir?
p
- Por onde devo começar?
- Quais são as coisas mais
importantes nesta página? Poste com dezenas
de setas para todos lados
20. Desenvolvimento 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
21. Desenvolvimento para Web com Padrões
Usabilidade: F t l í i para web
Fontes legíveis b
Nome da Fonte Característica
Arial Moderna, limpa, básica.
Fonte
F t com serifa projetada para l it
if j t d leitura on-line.
li
Georgia 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)
22. Desenvolvimento para Web com Padrões
Usabilidade: Legibilidade, textos existem para serem lidos.
Fonte serifada
Exemplo:
para título
í l
Curiosidade, inovação e descoberta
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 instante.
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 sem serifa
para texto
23. Desenvolvimento para Web com Padrões
COMBINAÇÃO DE CORES NÍVEL DE LEITURA
Texto preto com fundo branco Valor mais alto de contraste
T l
Texto azul contra f d b
fundo branco Dif ti lt t t l
Diferença perceptiva alta, contanto que se use azul escuro.
Diferença perceptiva média e alta dependendo das combinações de
Texto preto com fundo cinza
cores e do nível de saturação.
Difícil de ler, pois o fundo escuro é percebido mais intensamente que
Texto branco com fundo azul
o texto branco.
Texto cinza com fundo branco. Baixo valor de contraste, diferença perceptível baixa.
Texto branco com fundo cinza
cinza. Baixo valor de contraste, diferença perceptível baixa.
Diferença perceptível muito baixa, combinações de cores escuras
Texto vermelho com fundo azul
criam um efeito vibrante, cansando os olhos.
,
Diferença perceptível muito baixa, combinações de cores escuras
Texto vermelho contra fundo preto.
criam um efeito vibrante, cansando os olhos.
26. Desenvolvimento 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)
27. Desenvolvimento 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;
Independência entre layout e conteúdo;
Manutenção simplificada;
Padrões Reaproveitáveis.
(Ferreira, 2005)
28. Desenvolvimento para Web com Padrões
Padrões Web (Webstandards)
Boa posição nas ferramentas de busca
SEO – Search Engine Optimization:
SEO S h E i O ti i ti
A estratégia de divulgação é peça fundamental para o sucesso de
qualquer negócio online.
l ó i li
Saiba mais: http://www.maujor.com/
30. Desenvolvimento para Web com Padrões
Padrões Web ‐ Introdução ao CSS
Sintaxe:
seletor {propriedade: valor;}
31. Desenvolvimento 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.
32. Desenvolvimento para Web com Padrões
Padrões Web ‐ Introdução ao CSS
CSS Externo: (mais produtivo)
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;seuarquivo.cssquot; />
33. Desenvolvimento para Web com Padrões
Padrões Web ‐ Introdução ao CSS
A ib id:
Atributo
O nome do id deve ser único. Não pode haver mais de um id com
p
mesmo nome em uma página.
O uso do ID é especificado assim:
#nome { color:black;}
<div id=quot;nomequot;>conteúdo</div>
34. Desenvolvimento para Web com Padrões
Padrões Web ‐ Introdução ao CSS
A ib class:
Atributo
Ela serve para criar um grupo de elemento que terão características
p g p q
iguais 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=quot;destaques“> Aqui vai o texto do destaque</div>
35. Desenvolvimento para Web com Padrões
Arquivo externo estilo.css
Olá mundo:
<!DOCTYPE html PUBLIC quot;‐//W3C//DTD XHTML 1.0 Transitional//ENquot;
3 #principal{ width: 250px;}
quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1‐transitional.dtdquot;>
<html xmlns=quot;http://www.w3.org/1999/xhtmlquot;> .destaque {
<head>
<meta http‐equiv=quot;Content‐Typequot; content=quot;text/html; charset=iso‐8859‐1quot; />
p q yp 59 background‐color:black;
<link rel=quot;stylesheetquot; href=quot;estilo.cssquot; media=quot;screenquot; type=quot;text/cssquot;/> color: #ededed;
<title>Exemplo 1</title> font‐family: Verdana;
</head>
}
<body>
<div id=quot;principalquot; class=quot;destaquequot;>
Olá mundo tableless!
</div>
</body>
</html>
36. Desenvolvimento para Web com Padrões
Arquivo externo estilo.css
Exemplo 2:
*{
margin:0px;
<div id=quot;geralquot;> padding:0px;
list-style:none;
text-decoration:none;
}
#geral {
# l
</div> margin: 0 auto;
width: 960px;
position: relative;
}
37. Desenvolvimento para Web com Padrões
Exemplo 3: #topo {
font-family: Arial, Helvetica, sans-serif;
font-size: 36px;
color: #FF0000;
<h1 id=quot;topoquot;> background-color: #000000;
Logo – topo
g display: block;
float: left;
</h1> height: 70px;
width: 400px;
padding: 30 0 0 25
ddi 30px 25px;
}
38. Desenvolvimento para Web com Padrões
Exemplo 4.1:
<div id=quot;menuquot;>
<ul>
<li><a href=quot;#quot;>Menu 1</a></li>
li h f quot;#quot; M / /li
<li><a href=quot;#quot;>Menu 2</a></li>
<li><a href= # >Menu 3</a></li>
<li><a href=quot;#quot;>Menu 3</a></li>
<li><a href=quot;#quot;>Menu 4</a></li>
<li><a href=quot;#quot; class=quot;menu5quot;>Menu 5</a></li>
</ul>
</div>
39. Desenvolvimento para Web com Padrões
Exemplo 4.2:
#menu li a{
font: 16px Verdana Arial Helvetica sans-serif;
Verdana, Arial, Helvetica, sans serif;
#menu ul { color: #FFFFFF;
background:#000000; float: left;
width: 500px; margin: 45px 20px 0 20px;
height: 100px; _margin: 45px 10px 0 20px;
float: left; }
padding: 0 0 0 35px;
} #menu li a:hover {
text-decoration:underline;
#men l li{
#menu ul color: #ccc;
display:inline; }
list‐style: none;
} #menu li.menu5 a { margin: 45px 0 0 20px;}
40. Desenvolvimento para Web com Padrões
Exemplo 5:
#condeudo {
float:left;
<div id=quot;conteudoquot;> width:910px;
border-color:#000;
border-style:none
border style:none solid solid;
border-width:10px;
</div> padding:10px 15px;
}
41. Desenvolvimento 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
xyz #condeudo p {
</p> font: 16px/28px Arial, Helvetica, sans-serif;
width: 450px;
margin: 0 20 0 0
i 20px 0;
display: block;
float:left;
}
42. Desenvolvimento para Web com Padrões
Exemplo 7.1:
<div id=quot;col2quot;> #col2 {
float:left;
</div>
/div width: 200px;
p ;
display:block;
}
43. Desenvolvimento para Web com Padrões
Exemplo 7.2:
<h1> #col2 h1 a{
<a href=quot;#quot;>Meu 1º.........</a> background: #000;
</h1>
/h1 border: solid 10px #999;
p ;
width: 400px;
<h1> height: 75px;
<a href= # >Exemplo...... </a> float: left;
<a href=quot;#quot;>Exemplo </a>
</h1> font: bold 60px Georgia, quot;Times New Romanquot;,
Times, serif;
<h1>
<h > color: #FFFFFF;
<a href=quot;#quot;>Tableless!....</a> padding: 15px 10px;
</h1> margin: 0 0 20px 0;
}
46. Desenvolvimento para Web com Padrões
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. Designing ith
ZELDMAN J D i i with web standards. N P bli hi I di li IN 2003.
Riders Publishing: Indianapolis, IN, 2003
b t d d New Rid