Mini curso desenvolvimento web padrões

mini-curso
mini-
DESENVOLVIMENTO
para web com padrões
(Tableless, Webstandards e Usabilidade)
Tableless,

Danilo Rosisca Pereira
Especialista em Sistemas para Internet

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.


A NOVA GERAÇÃO DA WEB
exige uma mudança
e um repensar no
processo de desenvolvimento de
ambientes informacionais
digitais.
d g ta s.


A Web 2.0 é A NOVA
GERAÇÃO DA WEB, que
traz novas regras e
serviços baseados
na Web como
plataforma.


A Web 2.0 busca
interação
ai t ã entre
t
usuários, com a
criação e o
compartilhamento de
conteúdo.


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.


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 ã


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


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.


Sistema d N
Si t de Navegação: Determina o modo de navegar ou mover
ã
no espaço Informacional (e hipertextual).


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)


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)


U bilid d
Usabilidade:

Tempo de do nload mínimo
download

Dez segundos é o limite para
manter a atenção do usuário.

(Jacob Nielsen)


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


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


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)


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


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.


Usabilidade: Portanto um website...
U bilid d P b i

Bicicleta Convergente de Jacques Carelman.

Deve ser fácil de usar; Com simplicidade, OBJETIVIDADE e
foco na experiência
do usuário
usuário.


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)



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)



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/

Agora

Chega de conversa
conversa...


Padrões Web ‐ Introdução ao CSS

Sintaxe:

seletor {propriedade: valor;}



Inserindo CSS na página:

Existem 3 formas para aplicar CSS em páginas:

CSS Inline,
CSS Interno, e
,
CSS Externo.



CSS Externo: (mais produtivo)

<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;seuarquivo.cssquot; />



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>



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>


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>


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;
}


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;
}


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= # >Menu 3</a></li>
<li><a href=quot;#quot; class=quot;menu5quot;>Menu 5</a></li>
</ul>
</div>


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;}


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;
}


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;
}


Exemplo 7.1:

<div id=quot;col2quot;> #col2 {
float:left;
</div>
/div width: 200px;
p ;
display:block;
}


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;
}


Exemplo 8:
#rodape{
<div id=quot;rodapequot;>
font: 10px Verdana, Arial, Helvetica, sans-serif;
Copyright © 2008.
color: #999;
Todos os direitos reservados.
margin: 20p 0 0 0;
20px
</div>
width: 910px;
height: 20px;
float:left;
}


Muito
Obrigado!
danilo@sitedodanilo.com.br


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

Mini curso desenvolvimento web padrões

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Mini curso desenvolvimento web padrões

Semelhante a Mini curso desenvolvimento web padrões (20)

Mini curso desenvolvimento web padrões