Web Standards no Campus Party
Nesta segunda edição brasileira do Campus Party, que acontecerá entre os dias 19 e 22 de janeiro, estarei na área de Design para dia 24/01 ministrar a oficina sobre HTML e CSS para Designers (não programadores), e para já no primeiro dia de atividades (20/01) puxar a discussão sobre as Web Standards, os Padrões de Desenvolvimento Web criados e mantidos pela W3C (World Wide Web Consortium).
O horário da palestra está previsto para as 15h00, com 2h00 de duração, onde terei como objetivo contextualizar os participantes (com um pouco da história) sobre o “porque” precisamos desses padrões de desenvolvimento, e qual a importância dos mesmos. Pretendo apresentar também as vantagens que podem nos favorecer na adoção das Web Standards, tanto em termos de acessibilidade, quanto tecnológicos, práticos e (inclusive) financeiros. A palestra também buscará esclarecer os participantes sobre os principais padrões e sobre as questões de Acessibilidade.
Confesso que dá um certo frio na barriga falar sobre Web Standards num evento que conta com a presença de ninguém mais ninguém menos que Tim Berners-Lee…mas “vamo que vamo!”
Slides da Palestra “Web Standards”
Ver mais Slides de Agni no SlideShare.
Alternativa textual para os Slides
Palestra sobre Web Standards – Campus Party Brasil 2009
Porque falar de Padrões Web?
- A maior parte da Web e dos profissionais ainda é obsoleta
- Necessidade de acompanhar a evolução da Web
- Necessidade de interoperabilidade
- Necessidade de otimização dos sites
- Necessidade (ainda) de esclarecimentos a respeito
No início de tudo
A Web é criada em 1989, para ser um padrão de publicação e distribuição de textos científicos e acadêmicos
- Localizador Uniforme de Recursos (URL)
- Linguagem de Marcação de Hipertexto (HTML)
- Protocolo de Transferência de Hipertexto (HTTP)
Tecnologia aberta e gratuita
A limitação do HTML
A Web cresce comercialmente, e veem a necessidade de publicação de conteúdo diagramado, como em revistas e jornais (algo para o qual o HTML não possuia recursos)
Há então a adaptação da linguagem de forma equivocada, com uma preocupação unicamente visual, esquecendo da qualidade do código
A Guerra dos Browsers
Aproximadamente entre 1995 e 1999 houve a chamada “Guerra dos Browsers”, onde a Netscape (e seu Browsers de mesmo nome) e a Microsoft
(com o seu Internet Explorer) disputavam o mercado de navegadores.
Além de não darem suporte aos padrões do recém criada W3C, ainda criavam seus próprios padrões, aumentando a bagunça.
Editores WYSIWYG
“O que você vê é o que você tem”, ou em inglês “What You See Is What You Get” são programas que lhe permitem ter a visualização final de um documento, enquanto o mesmo ainda é editado. Editores HTML WYSIWYG como Go Live, Front Page e Dreamweaver surgiram por volta de 1996, e são conhecidos por gerar um código sujo e muito maior que o necessário.
Cursos e Profissionais Desatualizados
Com tudo isso, as páginas…
Cada arquivos de um site acaba sendo um incompreensível emaranhado de Tags com tabelas, formatações, scripts… Tudo muito maior que o necessário.
Dessa forma, para que seja feita alguma alteração no site, é necessário alterar todos os arquivos… um a um!
O resultado de tudo isso
- Código sujo e incompreensível
- Dificudade de Desenvolvimento e Manutenção
- Falta de padrão
- spacer.gif
- Formação junto da Estrutura
- Páginas feitas com tabelas
O que são os Padrões Web?
Padrões Web são um conjunto de normas, diretrizes, recomendações, notas, artigos, tutoriais e afins de caráter técnico, produzidos pela W3C.
É destinado a orientar fabricantes, desenvolvedores, projetistas para o uso de práticas que possibilitem a criação de uma Web acessível a todos
Consórcio W3C
- Fundada por Tim Berners-Lee em 1994
- Desenvolve Recomendações abertas, até agora mais de 80 padrões
- Engajado em educação, expansão e desenvolvimento de orientações
- Um fórum neutro para construir consenso em torno de padrões web
W3C: A evolução da Web para seu potencial máximo.
Web Standards Project
O Web Standards Project é um grupo formado em 1998 com o objetivo de promover os Padrões Web, assegurando desse modo um acesso simples e com menos custos para todos.
Vem encorajando e persuadindo os fabricantes de Browsers a fornecerem suporte aos padrões, como o XHTML, CSS, ECMAScript (a versão standard do JavaScript) e o DOM.
Mudança de Conceito
A Web é dividida em três camadas:
- Conteúdo (XHTML)
- Apresentação (CSS)
- Comportamento (Javascript)
Devem ser desenvolvidas de forma independente, porém uma complementa a outra
Sites sem padrões
- Extensão da Mídia Impressa
- Layout baseado em Tabelas
- Conteúdo, Apresentação e Comportamento “aninhados”
- Código Incompreensível
Com padrões
- Acessível de qualquer dispositivo
- Layout baseado em CSS
- Separação entre Conteúdo, Apresentação e Comportamento
- Código Acessível
Um “menu” a moda antiga
<TABLE CELLSPACING=1 CELLPADDING=1 BORDER=0 WIDTH=400> <TBODY> <TR> <TD VALIGN=MIDDLE ALIGN=CENTER BGCOLOR=#006600 WIDTH=100> <FONT FACE=VERDANA SIZE=1><B><A HREF=item1.html>Item 1</A></B></FONT> </TD> <TD VALIGN=MIDDLE ALIGN=CENTER BGCOLOR=#006600 WIDTH=100> <FONT FACE=VERDANA SIZE=1><B><A HREF=item2.html>Item 2</A></B></FONT> </TD> <TD VALIGN=MIDDLE ALIGN=CENTER BGCOLOR=#006600 WIDTH=100> <FONT FACE=VERDANA SIZE=1><B><A HREF=item3.html>Item 3</A></B></FONT> </TD> <TD VALIGN=MIDDLE ALIGN=CENTER BGCOLOR=#006600 WIDTH=100> <FONT FACE=VERDANA SIZE=1><B><A HREF=item4.html>Item 4</A></B></FONT> </TD> </TR> </TBODY> </table>
Um “menu” seguindo os padrões
<ul> <li><a href="item1.html" title="Página 1">Item 1</a></li> <li><a href="item2.html" title="Página 2">Item 2</a></li> <li><a href="item3.html" title="Página 3">Item 3</a></li> <li><a href="item4.html" title="Página 4">Item 4</a></li> </ul>
Um código Semântico
Semântica refere-se ao estudo do significado.
Quando utilizamos cada marcação para o que ela realmente foi criada, estamos construindo um “Código Semântico”
Parar de pensar em “isso vem aqui, isso vai ali…” e pensar na “Estrutura da Informação” Criar uma “Marcação com Significado”
Marcação Semântica
- Usar tabelas apenas para dados tabulares
<table> <tr> <th>Produto</th> <th>Quantidade</th> <th>Valor</th> </tr> <tr> <td>Maçã</td> <td>2 Quilos</td> <td>R$4,30</td> </tr> <tr> <td>Laranja</td> <td>1 Duzia</td> <td>R$2,50</td> </tr> </table>
- Usar Marcações corretas para títulos
<h1>Título da página</h1>
- Usar marcações para Listas Ordenadas e Listas Não Ordenadas
<ol> <li>Lista Ordenada 1<li> <li>Lista Ordenada 2<li> <li>Lista Ordenada 3<li> </ol> <ul> <li>Lista Não Ordenada 1<li> <li>Lista Não Ordenada 2<li> <li>Lista Não Ordenada 3<li> </ul>
- Usar marcações corretas para Ênfase Itálica e Ênfase Forte
<em>Ênfase Itálica</em> e <strong>Ênfase Forte</strong>
- Usar rôtulos para identificar campos de formulários
<label for="nome">Nome</label> <input id="nome" type"text" />
- Usar tabelas apenas para dados tabulares
Vantagens da adoção dos padrões
- Carregamento mais rápido
- Menores custos com hospedagem
- Melhor Consistência Visual
- Redesign mais barato e eficiênte
- Melhores resultados nos Mecanismos de Buscas
- Maior acessibilidade e interoperabilidade
Vantagem: Carregamento mais rápido
Páginas com menos código, consequentemente com menos Kb
Estando a Apresentação (CSS) e o Comportamentorão (Javascript) em arquivos separados, eles serão carregados apenas uma vez. A cada página acessada, esses arquivos já estarão no Cachê do Navegador, e não precisarão ser carregados novamente.
Vantagem: Menores custos de hospedagem
Páginas com menos Kb, além de mais leves para o usuário, ocupam menor espaço no servidor, e com isso se reduz a Largura de Banda utilizada
Caso ESPN
Mike Davidson foi o responsável pelo Redesenho do site da ESPN, seguindo os Padrões Web
Média de redução de 50Kb por página.
Com isso, a economia de banda foi de:
- 2 Terabytes/dia
- 61 Terabytes/mês
- 730 Terabytes/ano
Melhores resultados nas buscas
Um dos fatores considerados pelos Mecanismos de Busca para a ordenação dos resultados é a Relevância das páginas encontradas com relação as palavras-chave buscadas
Usar corretamente as marcações, como por exemplo <h1></h1> até <h6></h6> para títulos e <strong></strong> para Ênfase Forte, pode aumentar a relevância dos seus documentos na Web e melhorar o posicionamento nas buscas.
Maior Acessibilidade
A Camada de Conteúdo (HTML) bem estruturada e ordenada, possibilita o acesso através de Leitores de Tela.
Criando Camadas de Apresentação separadas, podemos fornecer acesso ao site através de TVs, Celulares e PDA’s, fornecer versões para impressão, etc
Páginas mais leves facilitam o acesso de conexões mais lentas (Dial Up)
HTML
- Criada por Tim Berners-Lee, baseada no SGML
- Primeira especificação formal publicada em 1993, como uma aplicação formal para SGML
- Desde 1996 tem suas especificações mantidas pela W3C
- Apesar de ser uma “Linguagem de Marcação”, possui algumas Tags para formatação
- Não possui uma sintaxe rigorosa.
HTML
O HTML sofreu várias mudanças em suas diferentes versões, com o objetivo de estender a linguagem para que pudesse acompanhar a evolução da Web e das tecnologias nela inseridas.
A última versão especificada foi o HTML 4.1
Existe atualmente um grupo de trabalho desenvolvendo o HTML 5
XML
- Criada para suprir a falta de flexibilidade do HTML
- Separação do conteúdo da formatação
- Simplicidade e Legibilidade, para humanos e computadores
- Criação de arquivos para validação de estrutura (DTD, posteriormente também o padrão Schema)
- Interligação de bancos de dados distintos
- Concentração na estrutura da informação
XML
O desenvolvedor tem a possibilidade de criar suas próprias marcações
Isso dá a ele flexibilidade e liberdade na hora da implementação do documento. Por outro lado, fica a cargo do desenvolvedor a tarefa de definir o significado dos elementos que ele utiliza (através de DTDs ou Schemas)
- Exemplo:
<?xml version="1.0" encoding="UTF-8"?> <agenda-telefonica> <contato tipo="pessoa"> <nome>João Aurélio</nome> <endereco>Rua XV de Novembro, 1234</endereco> <telefone>1234-5678</telefone> </contato> <contato tipo="pessoa"> <nome>Ana Maria</nome> <endereco>Avenida São João, 111</endereco> <telefone>4321-8765</telefone> </contato> <agenda-telefonica>
XHTML
Uma reformulação da linguagem de marcação HTML baseada em XML
Pode ser interpretado por qualquer dispositivo, independentemente da plataforma utilizada, pois as marcações possuem sentido semântico para as máquinas. XHTML deverá ser o sucessor do HTML
HTML vs XHTML: Principais diferenças
- As marcações devem ser escritas em letras minúsculas
- As marcações devem estar corretamente aninhadas
- Os documentos devem ser bem formados
- Marcações de fechamento são obrigatórias
- Elementos orfãos devem ser fechados
- Diferenças para os atributos.
As marcações devem ser escritas em letras minúsculas
Exemplo errado:
<P>Meu texto vem aqui!</P>
Exemplo correto:
<p>Meu texto vem aqui!</p>
As marcações devem estar corretamente aninhadas
Exemplo errado:
<p>Meu texto vem <strong>aqui!</p></strong>
Exemplo correto:
<p>Meu texto vem <strong>aqui!</strong></p>
Os documentos devem ser bem formados
Todos os elementos XHTML devem estar corretamente aninhados seguindo a estrutura básica conforme abaixo:
<html> <head> ... </head> <body> ... </body> </html>
Marcações de fechamento são obrigatórias
Exemplo errado:
<p>Um parágrafo.<p>Outro parágrafo.
Exemplo correto:
<p>Um parágrafo.</p><p>Outro parágrafo.</p>
Elementos orfãos devem ser fechados
Exemplo errado:
<br> <img src="imagem.gif" alt="minha imagem">
Exemplo correto:
<br /> <img src="imagem.gif" alt="minhaimagem" />
XHTML: Recomendações
Aplicamos “Itálico” em um texto para dar ênfase. Ao invés da marcação <i></i>, use <em></em>, ou então <cite></cite> se for uma citação (de um livro, por exemplo)
Para uma ênfase forte, ao invés de <b></b>, use a marcação <strong></strong>
Um menu nada mais é do que uma lista de opções. Então, use as marcações de Lista não-ordenada
<ul> <li><a href="pagina1.html" title="Página 1">Link 1</a></li> <li><a href="pagina1.html" title="Página 1">Link 1</a></li> <li><a href="pagina1.html" title="Página 1">Link 1</a></li> <li><a href="pagina1.html" title="Página 1">Link 1</a></li> <li><a href="pagina1.html" title="Página 1">Link 1</a></li> </ul>
CSS
CSS é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML.
Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento.
Pode-se definir apresentações especificas para diferentes dispositivos (TVs, Celulares e PDA’s, Impressoras, etc) apenas criando folhas de estilo alternativas.
CSS
Pode mos inserir código CSS diretamente dentro de uma marcação (inline) ou entre as marcações <head></head> (Interno).
Porém, a forma mais correta é criar um link para uma página que contém os estilos, procedendo de forma idêntica para todas as páginas do site.
<link href="estilo.css" rel="stylesheet" type="text/css" />
Exemplo da Sintaxe CSS
seletor { propriedade: valor; }- seletor
- Marcação HTML ou identificador
- propriedade
- O que será alterado
- valor
- O valor de alteração
body { font-family: Arial, Verdana, sans-serif; background-color: #FFF; margin: 5px 10px; }Caso: CSS Zen Garden
O CSS Zen Garden tem como alvo entusiasmar, inspirar e encorajar a sep aração do Conteúdo (HTML) da Apresentação (CSS). Mostrar as enormes possibilidades de se obter belos Layout’s através do CSS. Como exemplo, podemos acessar os link’s e visualizar diversos Layout’s diferentes. O código HTML permanece o mesmo, a única coisa que muda é o arquivo CSS externo.
Web Content Accessibility Guidelines
Acessibilidade à Web significa que pessoas portadoras de necessidades especiais (incluindo as visuais, auditivas, físicas, de fala, cognitivas e neurológicas) pessoas idosas, usuários de diferentes Sistemas Operacionais, browsers antigos ou conexões lentas sejam capazes de usar a Web.
Como guia de desenvolvimento acessível, a W3C fornece as “Diretivas para a acessibilidade de conteúdo da Web”
Algumas Recomendações de Acessibilidade
Fornecer conteúdo textual para imagens
<img src ="imagem.png" alt="descrição da imagem" />
Fornecer equivalente textual para Scripts
<noscript>Equivalente textual</noscript>
Links com título, tecla de atalho e ordem de navegação
<a href="pagina.html" title="titulo informativo" accesskey="m" tabindex="1">Página de destino</a>
Associar cada controle do formulário ao rótulo
<label for="nome">Nome:</label> <input type="text" value="Entre com o nome" id="nome" />
Exemplos de Tecnologia Assistivas
- Dispositivos apontadores alternativos
- Teclados alternativos
- Ponteiras de cabeça
- Sistema para entrada de voz
- Ampliadores de telas
- Leitores de tela com síntese de voz
- Linhas braile
- Impressoras braile
Decreto n° 5.296 de 2 de dezembro de 2004
Art. 47 . No prazo de até doze meses a contar da data publicação deste Decreto, será obrigatória a acessibilidade nos portais e sítios eletrônicos da administração pública na Rede mundial de computadores (internet), para o uso das pessoas portadoras de deficiência visual, garantindo-lhes o pleno acesso às informações disponíveis.
Art. 8 – II – d. Barreiras nas comunicações e informações: qualquer entrave ou obstáculo que dificulte ou impossibilite a expressão ou o recebimento de mensagens por intermédio dos dispositivos, meios ou sistemas de comunicação, sejam ou não de massa, bem como aqueles que dificultem ou impossibilitem o acesso à informação.
Caso Legal & General
Um dos primeiros sites acessíveis produzidos por uma empresa comercial
Todo o Redesenho foi baseado nas “Diretivas para acessibilidade de conteúdo da Web”, da W3C. Com isso, as taxas de conversão aumentaram 300%, custos de manutenção caíram 66%, listagem natural nas buscas aumentou 50%, e o tempo de carregamento da página caiu 75%.
DTD
Um padrão que define as partes de um documento, e descrevem como eles podem ou não ser usados, o que pode ser colocado em seus interiores, e se são ou não elementos obrigatórios do documento.
As diversas declarações de componentes determinam como o documento será estruturado.
XHTML 1.0 – Exemplo de DOCTYPE:
Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Frameset (fuja disso!)
<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Validadores
- http://validator.w3.org
- Validador de HTML, XHTML, XML e outras linguagens de marcação
- http://jigsaw.w3.org/CSS-validator/
- Validador de Folhas de Estilo CSS
- http://www.dasilva.org.br/
- Validador de Acessibilidade
- http://www.w3.org/QA/Tools/
- Outros validadores e ferramentas
Tableless Vs Web Standards
Tableless é um termo que ficou muito popular no Brasil, e que acaba por confundir muita gente.
Tableless significa (resumidamente) um site desenvolvido sem o antiquado uso das tabelas para organizar o layout, e sim usando CSS.
Criar um site Tableless não significa que esteja seguindo os Padrões Web, que vão muito além de um código válido, e tem preocupações maiores como a Semântica e a Acessibilidade.
Então, daqui por diante…
- Estude, estude e estude…e depois disso, estude mais um pouco
- Utilize os padrões XHTML e CSS
- Separe as camadas de Conteúdo, Apresentação e Comportamento
- Valide seu código
- Se preocupe com a Semântica e a Acessibilidade
- Participe de comunidades e listas: Discuta, aprenda e ensine
Referências
- www.w3.org
- www.w3c.br
- www.webstandards.org
- www.webstandardsgroup.org
- www.maujor.com
- www.revolucao.etc.br
- www.brunotorres.net
- www.tableless.com.br
- www.bengalalegal.com
- www.serpro.gov.br/acessibilidade/
- www.acessibilidadelegal.com
- www.acessobrasil.org.br/
- pt.wikipedia.org/wiki/XHTML
- pt.wikipedia.org/wiki/Cascading_Style_Sheets
- www.plasmadesign.com.br/stupidtables/index.html
- br.groups.yahoo.com/group/webstandards-br
