Caderno Webstandards Web

w w w. u e b a d e s i g n .
c o m
Ueba
Design
rio de janeiro rj
Web Standards
Afinal de contas, o que é isso?
fal e c om @ ue bade s ig n . c om
t e l : 2 1 2 5 4 7 5 0 3 4 c e l : 7 6 1 8 9 3 5 3
rua doming os ferreira 63/408. rio de janeiro rj
cep 22050-010
w w w. u e b a d e s i g n . c o m
rio de janeiro rj
Ueba
Design
Porque utilizar tabelas para layout

é estupidez:
problemas definidos, soluções oferecidas
Tabelas existem no HTML por um motivo: Exibir dados

tabulados. Mas a utilização de border=”0” possibili-
tou que os designers criassem uma grade para exibir
imagens e textos. Esta é, ainda, a forma predominante
como alguns designers projetam seus sites, porém, hoje
o uso de tabelas está, de fato, interferindo na constru-
ção de sites melhores, mais acessíveis, flexíveis e funcionais. Descubra a origem destes
problemas, e encontre soluções para criar sites transitivos, ou completamente sem tabe-
las (tableless).
rio de janeiro rj
Ueba
Design
Convença seu chefe
Há algum chefe de vocês aqui na Seybold, assistindo

outras palestras nesse exato momento? Vá chamá-
los!. Eles são as pessoas que precisam saber como os
padrões Web podem salvar o dinheiro de suas empre-
sas.
rio de janeiro rj
Ueba
Design
Visão Geral: O que há de bom

para mim?
Vamos lhe dar alguns motivos para trabalhar com

os padrões Web:
• suas páginas carregarão mais rápido;

• os custos de hospedagem serão reduzi-
dos;
• os redesigns dos seus sites serão mais
eficientes e mais baratos;
• será mais fácil manter a consistência visu-
al entre todos seus sites;

· melhores resultados das ferramentas de busca;
· o seu site se tornará mais acessível para todos os visualizadores e browsers;
· e lhe proporcionará mais competitividade (isto é, estabilidade no mercado) en-
quanto todo o Mundo começa a usar os padrões.
Nos próximos capítulos demonstraremos que formatar seu site utilizando CSS requer
uma forma de pensar um pouco diferente que a qual você provavelmente está acostu-
mado.
rio de janeiro rj
Ueba
Design
Assassinos de sites: tabelas aninha-

das e GIFs de espaçamento
No princípio, a internet era principalmente um meio

em que os acadêmicos, investigadores e o exército
compartilhavam informações. Entretanto, não demo-
rou muito para que os visionários empresariais perce-
becem que este era um excelente meio para se vender
qualquer coisa, de produtos frescos e cachorros quen-
tes até carros usados e equipamentos esportivos.
porém, como qualquer mídia “jovem”, a internet es-

tava esteticamente cru (e por isso não atraía os con-
sumidores), até david siegel publicar seu livro, um
marco, que ofereceu algumas formas de trabalhar as limitações dos browsers existentes
e as especificações do w3c, aproximadamente 1997. (estamos falando de netscape 2 e
3, pessoal.)
Na realidade, estas formas de trabalho eram tão brilhantes, que prevalecem até hoje
como o método mais utilizado para se leiautar páginas para a web.
rio de janeiro rj
Ueba
Design
O problema com o uso de tabelas:
• misturam o conteúdo da formatação:

• esta mistura deixa os arquivos de seu site
desnecessariamente grandes , uma vez
que os usuários têm que descarregar estes dados
a cada página que visitam;
• banda de transferência (quantidade de bytes
requisitados do servidor) não é grátis.
• elas fazem o redesign de sites de conteúdo
extenso ser um trabalho intenso (e caro);
• também tornam extremamente difícil
(logo caro) manter a consistência visual
do site;
• páginas baseadas em tabelas são também muito menos acessíveis para usuários
com deficiências e para aqueles que usam celulares e PDAs.
rio de janeiro rj
Ueba
Design
A salvação está à mão
Browsers modernos são muito melhores para

renderizar os padrões web, por isso não
precisamos mais utilizar estes métodos
arcaicos.
No lugar de aninhar tabelas dentro de

tabelas, e encher celulas vazias com gifs
transparentes, nós podemos usar simples
marcações HTML e CSS para formatar belos
sites, que são rápidos para carregar, fáceis
de redesenhar, e muito mais acessíveis para
todos.
rio de janeiro rj
Ueba
Design
A solução: CSS e marcação estruturada
Usando marcação estruturada e Cascading Sty-

le Sheets em nossas páginas, podemos manter o
conteúdo separado da formatação.
Com isto temos várias vantagens sobre o uso de

tabelas...
rio de janeiro rj
Ueba
Design
Redesigns são mais fáceis e mais

baratos
Removendo os dados de formatação de

nossas páginas, refazê-las se torna um
trabalho muito menos intenso (e
mais barato). Para mudar o layout do
site, tudo o que você precisa fazer é alterar a
folha de estilo (CSS); você não precisa editar todas as páginas do site novamente.
(1)
Se quer exemplos, veja o CSS Zen Garden , ou a troca de estilos do site de Eric
(2) (3)
Meyer . Para aprender mais, veja Alternative Style por Paul Sowden.
(1) http://www.csszengarden.com/
(2) http://www.meyerweb.com/
(3) http://www.alistapart.com/stories/alternate/
rio de janeiro rj
Ueba
Design
Banda de transferência não é de graça
Utilizar padrões Web reduz o tamanho das

suas páginas, pois os usuários não precisarão bai-
xar os dados de formatação a cada página visita-
da. O CSS que controla o layout fica no cache de
seus browsers.
Arquivos menores implicam carregamento

mais rápido e menos custo de hospeda-
gem.
rio de janeiro rj
Ueba
Design
Ei, todas estas páginas estão parecidas!
Utilizando os padrões Web torna-se extremamente

fácil manter a consistência visual de um site.
Todas as páginas usam o mesmo arquivo CSS que
configura cores, tamanhos e posições para os textos
e demais objetos, deixando-as formatadas da mesma
maneira.
Isto fortalece sua marca e deixa o seu site muito mais usável.
rio de janeiro rj
Ueba
Design
Escreva uma vez, use em qualquer lu-

gar, para qualquer pessoa
Os padrões Web tornam nossas páginas muito

mais acessíveis para usuários com deficiências e
para browsers de celulares e PDAs que acessam a
Web.
Visitantes que utilizam leitores de tela (e visitantes

com conexões lentas) não têm que navegar por
incontáveis células de tabelas e espaços para che-
gar ao conteúdo real de nossas páginas.
Em outras palavras, separar o conteúdo da formatação deixa o seu site acessível inde-
pendente do dispositivo utilizado.
rio de janeiro rj
Ueba
Design
O Google é cego
Falando de acessibilidade: minimizar a código e usar

corretamente as tags de cabeçalho (h1, h2 etc) são méto-
dos que ajudam a melhorar o seu ranking em ferramen-
tas de busca.
Reduzir a proporção do código em relação ao conte-

údo, usar palavras-chave em suas tags de cabeçalho,
e substituir GIFs por texto normal é uma grande ajuda para que o seu site apareça
melhor nos resultados das pesquisas.
rio de janeiro rj
Ueba
Design
Você ainda pode utilizar tabelas se pre-

cisar, apenas não utilize tantas
Isto dará aos usuários (e chefes), insistentes e deter-

minados em utilizar a versão 4 dos browsers até a
morte, uma aproximação aceitável do que o resto
do mundo está vendo.
rio de janeiro rj
Ueba
Design
Uma tabela bastante agradável de se ver
Lorem ipsum Sed diam nonummy nibh euis-

dolor sit amet, mod tincidunt ut laoreet dolore
consectetuer magna aliquam erat volutpat. Ut
adipiscing elit. wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper.
Suscipit lo- Duis autem vel eum iriure dolor
bortis nisl ut in hendrerit in vulputate velit esse
aliquip ex ea molestie consequat, vel illum do-
commodo lore eu feugiat nulla facilisis.
consequat. • At vero eros et accumsan et ius-
to odio dignissim qui blandit
• Praesent luptatum zzril delenit
augue duis dolore te feugait nulla
facilisi.
Qui blandit Diam nonummy nibh euismod
praesent lup- tincidunt ut laoreet dolore magna
tatum zzril aliquam erat volutpat.
delenit augue • Epsum factorial non deposit
duis dolore te quid pro quo hic escorol.
feugait nulla • Olypian quantels et gomilla
facilisi. congolium sic ad nauseum. Sou-
vlaki ignitus carborundum e pluri-
bus unum. Defacto lingo est igpay
atinlay.
rio de janeiro rj
Ueba
Design
Dê só um uma olhada embaixo da

superfície
O código que mostra a estrutura da tabela:
table { margin: 3px; padding: 2px; border: solid 2px blue }
td { padding: 2px; border-style: solid; border-width: 1px;

border-color: gray gray silver silver }
rio de janeiro rj
Ueba
Design
Você ainda pode utilizar tabelas se pre-

cisar, apenas não utilize tantas
muito melhor Advinhe quanto de código há

nessa minúscula tabela? 2.1k. Há
4 linhas e 2 colunas nessa coisa.
E nenhum GIF de espaçamento.
correto E todas estas bordas pontilhadas
são determinadas pelo CSS e são
perfeitamente válidas.
• Isto é um item de lista agora
• Como deve ser
Tudo isto foi Sério. 8 celulas e 4 classes, é
feito com uma tudo que precisa.
tabela de 8 ce- • Um viva para as listas de
lulas e 4 clas- marcadores
E aqui está o código CSS usado para nos livrar daquele ses no CSS. • Por que não fazer sua lista
código inútil:
de marcadores como uma lista
table { border-bottom: 1px dotted fuchsia; border-left: 1px deve ser e deixar a CSS fazer o
dotted fuchsia }
resto?
td { padding: 11px 20px 20px 11px; border-top: 1px >Você precisa É isso aí. Quando tiver isso, você
dotted fuchsia; border-right: 1px dotted fuchsia }
de uma clas- tá feito.
ul { margin-top: 10px; margin-bottom: 10px; margin-left: se para a tag • Eu simplesmente amo listas
0; padding-left: 1em } <table>, uma de marcadores.
li { margin-bottom: 10px } para a <td>, • Excelente! O último falso
uma para a marcador.
<ul> e uma
para a <li>.
rio de janeiro rj
Ueba
Design
Recapitulando os designs transitivos
Use margin e padding no lugar de células

extras e GIFs de espaçamento.
Use link e @import para os estilos. O primei-

ro para browsers antigos e o segundo para os
modernos.
<link href=”basic.css” rel=”stylesheet” type=”text/css”>
<style type=”text/css” media=”screen”></style>
Exemplos reais:
(1)
• Santa Cruz Montessori School
(2)
• k10k
(3)
• Fox Searchlight Pictures
Mas espere, há mais:
Para mais informação sobre designs de transição, veja o

(4)
capítulo 1 do Eric Meyer on CSS e também parte
(5)
do Designing with Web Standards por Jeffrey
Zeldman.
(2) http://www.meyerweb.com/
(4) http://www.amazon.com/exec/obidos/ASIN/073571245X/
(5) http://www.amazon.com/exec/obidos/ASIN/0735712018/
rio de janeiro rj
Ueba
Design
Layouts com CSS: o futuro está aqui
A grande maioria dos usuários de internet de

hoje utilizam browsers que têm bom suporte às
CSS. Eles têm suas picuinhas, mas depois que
você se acostumar, poderá se virar bem.
Codificar em CSS é fácil. Até mesmo para um

garoto como eu que acha que javascript se pare-
ce com praguejar.
if(links[x].length > 0);{

for (y=0; y<links[x].length; y++) {
Toda regra em CSS tem um seletor e uma declaração. A declaração é composta de uma
propriedade e um valor. As propriedades geralmente são duas palavras separadas por um
hífen.
body {margin:0; padding:0}
.related {float:right; width: 15em; margin-left:1em; margin-bottom: 1em; color:blue}
#footer {color: gray; font-size: 0.6em; line-height: 1.2em; background-color: white; margin: 0}
rio de janeiro rj
Ueba
Design
Marcação estrutural: o que você diz

com o seu código e o que ele diz
Enquanto que escrever CSS é simples,

utilizá-la para formatar seus sites requer
uma forma de pensar um pouco diferen-
te da que já vinhamos utilizando.
No lugar de pensar coisas como “isto

vai aqui, e isto vai ali” quando esta-
mos trabalhando o layout de uma pá-
gina, nós precisamos pensar sobre o tipo
de informação dentro da nossa página
ea estrutura desta informação.
Nós daremos para a manchete a tag <h1>; sub-
títulos serão marcados com a tag <h2> etc; e parágrafos
serão parágrafos.
Isto é conhecido como marcação “estruturada”, ou marcação

“semântica”.
Ao invés de colocar o seu conteúdo dentro de tabelas, envolva o seu

conteúdo dentro de elementos div. Dê a seu elemento div um id (iden-
tificador) ou uma class que descreverá o seu conteúdo e/ou função, no
lugar de sua aparência.
rio de janeiro rj
Ueba
Design
Evite <b>ed e <br>eakfast markup1
Quando você quer que algo apareça de certa

forma, o que quer dizer com isso? Sua marcação
pode e deve carregar significado, até para al-
guém que não verá a sua página. Marcação se-
mântica traz mais acessibilidade para todos, incluin-
do ferramentas de busca.
Quando você quer escrever algo em itálico, é por

que você quer enfatizar (emphasize) isto, <em>, ou
por que é o título de um livro, <cite>?
Se alguma coisa está em negrito deve ser marca-

do com um <strong>.
Se você quer uma quebra de linha após alguma coisa, provavelmente ela se trata de título.
Caso contrário, é bem provável que ele faça parte de uma classe que ocorre ao longo do
site. Se for este o caso, então utilize CSS no lugar de <br>:
.foo {display:block}
Para aprender mais, veja Bed and BReakfast markup (B&BR) por Tantek Çelik.
(1) Mnemônico cunhado por Tantek Çelik, para ilustrar as tags que devem ser evitadas no uso cotidiano. (N.T.)
(2) http://tantek.com/log/2002/10.html#L20021022t1432
(3) http://tantek.com/log/
rio de janeiro rj
Ueba
Design
O que são barras de navegação?
Reflita: sua navegação (seu menu) é uma lista de links

desordenados.
Use-os dentro de tags <ul>.
• link1
• link2
• link3
• link4
• link5
Barras de navegação horizontais
Nós podemos utilizar CSS para controlar como estas listas serão exibidas em nossas
páginas.
Usando display:inline podemos criare barras de navegação horizontais.
Barras de navegação horizontais
Nós podemos utilizar CSS para controlar como estas listas serão exibidas em nossas
páginas.
Usando display:inline podemos criare barras de navegação horizontais.

rio de janeiro rj
Ueba
Design
Aqui está o código usando para esse exemplo ao lado:
#nav1{
margin-top: 1em;
margin-bottom: 0.5em;
}
#nav1 ul {
background-color: silver;
text-align: center;
margin-left: 0;
padding-left: 0;
border-bottom: 1px solid gray
}
#nav1 li {
list-style-type: none;
padding: 0.25em 1em;
border-left: 1px solid white;
display: inline
}
#nav1 li:first-child {
border: none;
}
Barras de navegação verticais

E aqui o código desta: #nav2 li {
margin: 0;
#nav2 { padding: 0.25em 0.5em 0.25em 1em;
background-color: silver; border-top: 1px solid gray;
border: solid 1px gray; width: 100%;
width: 8em display: block
} }
#nav2 ul { html>body #nav2 li {

list-style-type: none; width: auto;
margin: 0; }
padding: 0;
border: none #nav2 li:first-child {
} border: none
}
(1)
Para mais informações, leia o artigo de Mark Newhouse, Taming lists , no
(2)
site A List Apart, e “Styling lists” no wiki CSS-Discuss.
(1) http://www.alistapart.com/stories/taminglists/
(2) http://css-discuss.incutio.com/
rio de janeiro rj
Ueba
Design
Coisas que tabelas fazem melhor do

que CSS
Há certas coisas que CSS não faz tão bem como as

tabelas.
Por exemplo, digamos que você tem uma navbar late-

ral preta, que você quer que se extenda verticalmente
acompanhando o conteúdo. Com um layout feito em
tabelas, é mais simples que roubar doce de criança:
apenas use um fundo preto dentro da tag <td>.
Nós podemos fazer isto utilizando CSS, mas isto re-

quer uma forma diferente de pensar.
Se dermos à nossa nav div um fundo preto, este fun-
do irá se extender somente até o fim do menu. Em muitas páginas, o conteúdo é mais
longo que a barra de navegação, entao isto não vai ficar muito bonito.
Nós poderiamos também ladrilhar um fundo preto na nossa div de conteúdo, e dar a
esta div bastante padding à esquerda, mas se nossa navegação for maior que o conte-
údo, isto não vai funcionar a contento.
Outro caminho para se fazer isto seria utilizar um GIF preto como plano de fundo de
nosso <body>, o que funciona bem, a menos que você queira utilizar outra imagem para
o background de seu <body>.
Ou, nós podemos envolver nosso conteúdo em uma div e ladrilhar a imagem nesta
div. Entretanto, estaríamos acrescentando marcação não semântica desnecessária ao
nosso código.
rio de janeiro rj
Ueba
Design
E, claro, utilizar imagens de fundo não funcionnrá se você quiser que a barra de navegação
seja fluida (ajustada na largura conforme o texto e resolução do usuário).
Como nós dissemos, existem coisas que tabelas fazem melhor que CSS. Mas no fim você
precisa se questionar se toda esta bagagem que vem o uso de tabelas vale realmente a
pena.
rio de janeiro rj
Ueba
Design
Migrando de tabelas para Padrões

Web: O grande momento
Primeiramente, você precisa

decidir uma estratégia de mi-
gração. Você vai migrar o site in-
teiro de uma vez, ou você vai fazer
a migração seção por seção?
Identifique as seções e páginas em que a conversão

trará mais benefícios. Home pages, páginas de novida-
des em produtos e similares são um lugar natural para
se começar.
Identifique o tipo de conteúdo/informação de seu site como um todo
• Informações de produtos
• Informações de preços
• Informações da empresa
• Portfólio
• Serviços oferecidos
• Informações de investidores
• Carrinho de compras
• Fóruns de usuários
• E assim por diante
rio de janeiro rj
Ueba
Design
Quebrando suas páginas em

pedacinhos
Com o esquema dos tipos de conteúdo do site

em mãos, está na hora de analizar as páginas
existentes para uma divisão lógica do conteúdo.
• Navegação Principal
• Subnavegação
• Cabeçalhos e rodapés
• Conteúdo
• Informações relacionadas
• Outros
Analise sua estrutura em busca de tabelas ani-

nhadas e espaços vazios e bordas de células.
(Nós queremos substituir tudo isto com tags div
ou com uma estrutura de tabelas mais simples.)
rio de janeiro rj
Ueba
Design
Olhe para o seu código
Depois de analizar a estrutura de sua página, vamos

dar uma olhada no seu html existente e analizar o que
pode ser substituído por marcação estruturada.
• Pelo amor de tudo que é puro e bom, livre-se das

tags <font> e GIFs transparentes!
• Da mersma forma, dispense as marcações <b> e
<br> .
• Retire as marcações de exibição de dados (bgcolor,
background, e similares).
• Substituia a CSS puramente descritiva (como isto: <span class=”header”>) por marca-
(1)
ção estrutural apropiada. (Tantek Çelik traz mais detalhes no seu post, A Touch of
(2)
Class .)
(1) http://tantek.com/log/
(2) http://tantek.com/log/2002/12.html#L20021216
rio de janeiro rj
Ueba
Design
Substitua as tags meramente descritivas

com marcação estrutural
Você pode utilizar os recursos de localizar

e substituir (e expressões regulares), mas a
forma mais fácil de se fazer isto é abrir sua
página existente em um browser, e copiar o
seu texto colando-o dentro de um editor de
HTML.
Lembre-se sobre a estrutura do documen-

to! Substituir puramente as tags <b> por
<strong> não é suficiente.
Qual o título mais importante? Marque-o

com uma tag <h1>. Marque seus subtítulos
com <h2>e assim por diante. Marque os
parágrafos com <p>. Marque sua navegação como listas desordenadas.
Escolha um DOCTYPE e o utilize. (Nós recomendamos XHTML transitional, a menos que

você seja bem experiente, neste caso, utilize XHTML strict.)
rio de janeiro rj
Ueba
Design
Divida sua página em divs lógicos
Coloque seu menu principal dentro de um div

com um id mainnav (ou menuPrincipal); coloque
seu submenu dentro de um div com um id ou
class subnav, coloque seu rodapé (footer) com
um id <div id=”footer”>, e envolva o con-
teúdo (content) dentro um div como este <div
id=”content”>.
Parece estranho agora, mas depois que você come-

çar a adicionar regras (classes e id’s) para seu CSS,
as coisas irão melhorar rapidamente.
rio de janeiro rj
Ueba
Design
Está na hora de escrever sua CSS
Para começar, dê para cada tag div uma bor-

da. Por exemplo, div
{
border: 1px dotted gray;
padding: .5em
}
Isto irá te ajudar a ver onde a div começa e
termina, e também se tem ou não uma div
dentro de outra.
Escreva seu CSS para elementos de seleção

(selectors) primeiro (<html>, <body>, <p>, <h1>,
<h2>, <ul>, <li>, etc.)
Use seletores contextuais ou descendentes

sempre que possível. Assim você manterá sua
marcação mais limpa. Por exemplo,
#subnav li {
border: 1px solid black;
padding: .5em;
display: inline
}
irá afetar somente a lista de itens que está dentro da subnav div.
Teste no máximo de browsers que você puder, e peça aos seus amigos que testem em seus
browsers.
rio de janeiro rj
Ueba
Design
Exemplos de sites leiautados com CSS
(1)
• CSS Zen Garden
(2)
• Adobe Studio
(3)
• Wired News
(4)
• ESPN
(5)
• Quark
(6)
• Inc.com
(7)
• PGA Open Championship
(8)
• phish.com
(9)
• CSS Edge
(2) http://studio.adobe.com/
(3) http://www.wired.com/
(4) http://espn.go.com/
(5) http://www.quark.com/
(6) http://www.inc.com/home/
(7) http://www.pga.com/openchampionship/
(8) http://www.phish.com/
(9) http://www.meyerweb.com/eric/css/edge/
rio de janeiro rj
Ueba
Design
Leia tudo sobre isto
Obviamente, nós não poderíamos cobrir

tudo que você precisa saber sobre CSS
em uma hora, mas estes livros poderão
ajudar você no uso de Padrões Web
(Web standards) a fazer suas páginas
mais leves, limpas e rápidas.
• Eric Meyer on CSS: Mastering the

Language of Web Design; Eric Meyer;
(1)
New Riders; 2002
• Designing with Web Standards;
(2)
Jeffrey Zeldman; New Riders; 2003
• Cascading Style Sheets: Separating Content fom Presentation; Owen Bri-

(3)
ggs, Steven Champeon, Eric Costello, e Matt Patterson; glasshaus; 2002
(4)
• SAMS Teach Yourself CSS in 24 Hours; Kynn Bartlett; SAMS; 2002
• Cascading Style Sheets: Designing for the Web; Hakon Wium Lee and Bert
(5)
Bos; Addison-Wesley Pub Co; 1999
• Cascading Style Sheets: The Definitive Guide; Eric Meyer; O’Reilly & Associa-
(6)
tes; 2000
(7)
• Em nosso site temos outras sugestões, atualizadas constantemente.
(1) http://www.amazon.com/exec/obidos/ASIN/073571245X/
(2) http://www.livrosdeinternet.com.br/livros_template.asp?Codigo_Produto=4504
(3) http://www.livrosdeinternet.com.br/defaultlivros.asp
(5) http://www.amazon.com/exec/obidos/tg/detail/-/0201596253
(7) http://www.uebadesign.com/livros_web/products/
rio de janeiro rj
Ueba
Design
Papel? Nós não precisamos de nenhum

papel fedorento: Recursos Online
(1)
Discussões sobre CSS:
(2)
• arqHP: Excelente lista de discussão brasileira (N.T.).
(3)
• mailing list: Muito ativa, muita ajuda.
• Wiki: “Entre outras coisas, o wiki serve como uma me-
móra a longo prazo de tudo que acontece na lista”. Quer
dar ao Internet Explorer (Windows) algo que ele entenda,
mas dar aos melhores browsers “a coisa certa”? Você
(4)
saberá como fazê-lo e muito mais.
• Archives: Está com um problema na CSS que está
te deixando louco? Não se preocupe, alguém já passou por isto (e recebeu ajuda) sobre o
(5)
mesmo problema. Encontre a resposta aqui.
zeldman.com The Daily Report: Criterioso, questionador, conteúdo bem-escrito e links

(6)
servidos regularmente
(7)
A List Apart Por pessoas que fazem Web Sites
• Taming lists, Mark Newhouse. Informação indispensável para ajudar a você com
(8)
navegação semântica.
• CSS: Going to Print, Eric Meyer. Você nunca mais precisará criar uma versão para
(9)
impressão novamente.
• Alternative Style: Working With Alternate Style Sheets, Paul Sowden. Dei-
(10)
xem seus visitantes decidirem como querem ver sua página.
• Using XHTML and CSS for an effective Search Engine Optimization Cam-
paign, Brandon Olejniczak. Marcação estruturada irá te ajudar a obter melhores resulta-
rio de janeiro rj
Ueba
Design
(11)
dos de ferramentas de busca, também.
(12)
The Web Standards project Abençoe estas pessoas.
(13)
CSS: A guide for the unglued Uma grande página.
CSS Layout Techniques: for Fun and Profit Layouts que você pode utilizar nos seus
(14)
projetos por Eric Costello. Recursos e tutoriais também.
(15)
Real World Style CSS layouts, dicas, truques, e técnicas de Mark Newhouse.
DevEdge Netscape Sidebar Tabs Links incríveis para especificações do W3C para
(16)
CSS, HTML, e o DOM.
New York Public Library Style Guide Um recurso à mão para obter o básico de
(17)
XHTML e CSS.
The Business Benefits of Web Standards Boas notícias para homens de negócios. O
(18)
evangelho do padrão web presente em termos que um MBA pode apreciar.
(1) http://www.css-discuss.org/
(2) http://lists.topica.com/lists/arqhp/
(3) http://www.css-discuss.org/
(4) http://css-discuss.incutio.com/
(5) http://archivist.incutio.com/viewlist/css-discuss/
(6) http://www.zeldman.com/
(7) http://www.alistapart.com/stories/indexCSS.html
(8) http://www.alistapart.com/stories/taminglists/
(9) http://www.alistapart.com/stories/goingtoprint/
(11) http://www.alistapart.com/stories/seo/
(12) http://www.webstandards.org/
(13) http://www.thenoodleincident.com/tutorials/css/
(14) http://www.glish.com/css/
(15) http://realworldstyle.com/
(16) http://devedge.netscape.com/toolbox/sidebars/
(17) http://www.nypl.org/styleguide/
(18) http://devedge.netscape.com/viewsource/2003/why-web-standards/
rio de janeiro rj
Ueba
Design
Obrigado. Alguma pergunta?
Esse documento é uma modificação do site:

http://www.plasmadesign.com.br/stu-
pidtables/index.html, pequenas modifica-
ções foram feitas e irei acrescentar mais infor-
mações conforme for achando-as.
O documento original em inglês pode ser
acessado em: http://www.hotdesign.
com/seybold/.
rio de janeiro rj
Ueba
Design
Equipe de trabalho:
(1) (2)
Bill Merikallio ; Scott Design, Inc .
(3) (4)
Adam Pratt ; Adobe Systems Incorporated
(5)
Sérgio Lima Jardim ; Plasma Design (tradução)
(6)
Danival A. Souza ; Max Revenda (tradução)
(1) mailto:bill@hotdesign.com?subject=stupid tables!

(2) http://www.hotdesign.com/
(3) mailto:apratt@adobe.com?subject=stupid tables!
(4) http://www.adobe.com/
(5) http://www.plasmadesign.com.br/
(6) http://www.maxrevenda.com.br/
Licenciado sob uma Licença Creative Commons.
http://creativecommons.org/licenses/by-nc-sa/1.0/
rio de janeiro rj
Ueba
Design
Este é uma documento foi retirado do site Marco Moura, em http://marcomoura.wor-

dpress.com/2006/10/31/boss-por-que-fazer-o-redesign-de-um-site-usan-
do-tableless/. É uma sugestão de proposta interna para redesign do site da empresa
utilizando as técnicas dos padrões web. No endereço acima podem encontrar o original,
aqui vou fazer adaptações ao original segundo minha experiência e sobre o que eu acho
que deve constar nesse tipo de material
“Redesign de um site usando tableless”.

Atualização, organização e otimização.
Atualmente o site possui o layout feito com ‘tabelas’, há por volta de XXX linhas de html, css
e e código (javascript) em um único arquivo. Também existem vários erros de aninhamento
de tags na página.
Ao substituir tabelas por layout conhecido como Padrões Web e corrigir o aninhamento
diminuiremos o tempo de carregamento da página para o cliente, e por diminuir o consu-
mo de banda teremos uma melhora na performace do servidor, diminuição nos gastos com
excedente de banda consumida e melhoria nas posições nos mecanismos de busca.
Dividiremos o desenvolvimento em 3 arquivos: conteúdo (XHTML), layout (CSS) e compor-

tamento (JS), organizando e facilitando a manutenção. O aspecto visual não será mudado,
será adaptado para reduzir ao máximo mudanças no padrão existente.
O custo deste projeto é o mesmo de um projeto com tabelas, também estaremos sujeitos a
empecilhos e imprevistos. Uma outra questão, em alguns sites que utilizam tabelas para o
layout ainda existe diferenças de aspecto visual entre diferentes browsers, problemas com
alinhamento de boxes e alinhamento de blocos de texto. Podemos solucionar estes proble-
mas como também pode vir a ocorrer outros que certamente poderemos solucionar.
Possíveis problemas
• Conhecimento de CSS para atualizar.
• Alterações futuras precisam ser feitas com cuidado para não prejudicar o projeto e
trazer de volta a estrutura desorganizada e ultrapassada.
• Talvez alguma área do layout precise ser alterada no alinhamento e/ou no tamanho,
existem algumas diferenças entre tabelas e CSS.
Um prazo estipulado em 3 à 4 semanas. Calculo que seja feito em menor período, mas o
prazo adjacente seria para imprevistos que possam aparecer no desenvolvimento do proje-
rio de janeiro rj
Ueba
Design
to.
Benefícios:
• Diminuir o tamanho do arquivo (estimado em até 20% a 30%), diminuir tempo de
donwload, diminua consumo de banda do servidor, diminua o tempo de renderização da
página no navegador.
• O usuário precisará baixar o estilo em CSS uma única vez, o css fica em cache, acele-
rando o acesso a páginas já acessadas e páginas novas.
• Melhorar a semântica, melhorar a acessibilidade, melhorar a indexação dos engines
de busca.
• Melhorar o acesso a diversos dispositivos (leitores de telas, mobile).
• Facilitar o redesign, diminuir o numero de linhas, separar as camadas (conteúdo,
layout, comportamento) em arquivos.
• Substituição de metodologia de desenvolvimento web ultrapassada por uma metodolo-
gia atual.
A pagina atual:
• A pagina possui layout a base de ‘tabelas’, aumentando o tamanho do arquivo e o
tempo de renderização.
• Possui vários erros de aninhamento de tags pela página, aumentando o tempo de ren-
der no navegador.
• A alguns CSS embutidos no arquivo HTML, impossibilitando o cachê para arquivo css
e o rápido download das páginas.
• Um arquivo, com uma mistura de HTML, CSS, JAVASCRIPT; com xxx linhas.
A pagina após o redesign:

• Estrutura compatível com as técnicas conhecidas como Padrões Web, seria feito a re-
moção das tabelas para formatar o layout e sua substituição por tags html apropriadas.
• Correto animanhento das tags (diminuindo o tempo de renderização no navegador).
• Arquivo CSS externo (o usuário faz o donwload uma única vez ou quando houver atua-
lização no CSS), isto colabora para diminuir o total de bytes transferidos, diminuindo custos
de várias formas.
• Diminuir o numero de linhas no arquivo e organizar as camadas, facilitando o acesso
do navegador ao código da página e das ferramentas de buscas as informações.
• O uso correto das tags de cabeçalho do documento, para facilitar o acesso das ferra-
mentas de busca ao conteúdo de cada página.
• Restruturação do conteúdo através das modernas redação de documentos online.
Qualquer sugestão para melhorar o discurso será bem recebida.

Caderno Webstandards Web

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Caderno Webstandards Web

Enviado por

Direitos autorais:

Formatos disponíveis

w w w. u e b a d e s i g n .

Porque utilizar tabelas para layout

problemas definidos, soluções oferecidas

Tabelas existem no HTML por um motivo: Exibir dados

Convença seu chefe

Há algum chefe de vocês aqui na Seybold, assistindo

Visão Geral: O que há de bom

Vamos lhe dar alguns motivos para trabalhar com

• suas páginas carregarão mais rápido;

al entre todos seus sites;

Assassinos de sites: tabelas aninha-

No princípio, a internet era principalmente um meio

porém, como qualquer mídia “jovem”, a internet es-

O problema com o uso de tabelas:

• misturam o conteúdo da formatação:

A salvação está à mão

Browsers modernos são muito melhores para

No lugar de aninhar tabelas dentro de

A solução: CSS e marcação estruturada

Usando marcação estruturada e Cascading Sty-

Com isto temos várias vantagens sobre o uso de

Redesigns são mais fáceis e mais

Removendo os dados de formatação de

Banda de transferência não é de graça

Utilizar padrões Web reduz o tamanho das

Arquivos menores implicam carregamento

Ei, todas estas páginas estão parecidas!

Utilizando os padrões Web torna-se extremamente

Escreva uma vez, use em qualquer lu-

Os padrões Web tornam nossas páginas muito

Visitantes que utilizam leitores de tela (e visitantes

Falando de acessibilidade: minimizar a código e usar

Reduzir a proporção do código em relação ao conte-

Você ainda pode utilizar tabelas se pre-

Isto dará aos usuários (e chefes), insistentes e deter-

Uma tabela bastante agradável de se ver

Lorem ipsum Sed diam nonummy nibh euis-

Dê só um uma olhada embaixo da

O código que mostra a estrutura da tabela:

table { margin: 3px; padding: 2px; border: solid 2px blue }

td { padding: 2px; border-style: solid; border-width: 1px;

Você ainda pode utilizar tabelas se pre-

muito melhor Advinhe quanto de código há

Recapitulando os designs transitivos

Use margin e padding no lugar de células

Use link e @import para os estilos. O primei-

<link href=”basic.css” rel=”stylesheet” type=”text/css”>

<style type=”text/css” media=”screen”><!--

Mas espere, há mais:

Para mais informação sobre designs de transição, veja o

Layouts com CSS: o futuro está aqui

A grande maioria dos usuários de internet de

Codificar em CSS é fácil. Até mesmo para um

if(links[x].length > 0);{

body {margin:0; padding:0}

.related {float:right; width: 15em; margin-left:1em; margin-bottom: 1em; color:blue}

Marcação estrutural: o que você diz

Enquanto que escrever CSS é simples,

No lugar de pensar coisas como “isto

Isto é conhecido como marcação “estruturada”, ou marcação

Ao invés de colocar o seu conteúdo dentro de tabelas, envolva o seu

Evite <b>ed e <br>eakfast markup1

Quando você quer que algo apareça de certa