Web Standards

Eduardo SantosEduardo Santos

www.agni.art.br

20/01/2009 www.agni.art.br Eduardo Santos

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

http://www.agni.art.br/


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

No início de tudo...



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 limitação do HTML...



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 criado World Wide Web Consortium (W3C), ainda

criavam seus próprios padrões, aumentando a bagunça.

A Guerra dos Browsers...



"O que você vê é o que você tem", ou em inglês

"What You See Is What You Get" (WYSIWYG) 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.

Editores WYSIWYG...



Cursos e Profissionais Desatualizados



Com tudo isso, as páginas...

Cada arquivos de um site acaba sendo umincompreensível emaranhado de Tags

com tabelas, formatações, scripts...Tudo muito maior que o necessário.

Dessa forma, para que seja feita algumaalteração no site, é necessário

alterar todos os arquivos...

um a um!



O resultado de tudo isso...

<table>

spacer.gif

Código sujo eincompreensível

Formatação e

Estrutura juntas

Falta depadrão

Dificudade de

Desenvolvimento

E Manutenção



Padrões Web são um conjunto de normas, diretrizes,

recomendações, notas, artigos, tutoriais e afins de

caráter técnico, produzidos pelo W3C.

É destinado a orientar fabricantes, desenvolvedores e

projetistas para o uso de práticas que possibilitem a

criação de uma Web acessível a todos.

O que são os Padrões Web?



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

Consórcio World Wide Web (W3C)


W3C: A evolução da Web para seu potencial máximo...


O Web Standards Project (WaSP) é 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.

Web Standards Project



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

Mudança de Conceito...



Divisão em Camadas...

XHTML

Javascript

CSSCSS

CSS



✗ Extensão da Mídia Impressa

✗ Layout baseado em Tabelas

✗ Conteúdo, Apresentação e Comportamento “aninhados”

✗ Código Incompreensível

Sem padrões | Com padrões

✔Acessível de qualquer dispositivo

✔Layout baseadoem CSS

✔Separação entre Conteúdo, Apresentação e Comportamento

✔CódigoAcessível



Um “menu” a moda antiga...

Item 1 Item 2 Item 3 Item 4

<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><TD VALIGN=MIDDLE ALIGN=CENTER BGCOLOR=#006600 WIDTH=100><FONT FACE=VERDANA SIZE=1><B><A HREF=item5.html>Item 5</A></B></FONT></TD></TR></TBODY></TABLE>



Um “menu” seguindo os padrões...

Item 1 Item 2 Item 3 Item 4

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



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”

Um código Semântico...



Marcação Semântica

Usar <table></table> apenas para dados tabulares

Usar <h1></h1> até <h6></h6> para títulos

Usar <ol></ol> para Listas Ordenadas e <ul></ul> para

Listas Não Ordenadas, seguidos do elemento <li></li>

Usar <em></em> para Enfase,

e <strong></strong> para Enfase Forte

Usar <label></label> para identificar campos em formulários



● 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

Vantagens da adoção dos padrões...



Páginas com menos código,

consequentemente com menos Kbytes

Estando a Apresentação (CSS) e o Comportamento

(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: Carregamento mais rápido...



Páginas com menos Kbytes, além de mais leves para o usuário,ocupam menor espaço no servidor,

e com isso se reduz aLargura de Banda

utilizada

Vantagem: Menores custos de hospedagem...



Caso

Mike Davidson foi o responsável pelo Redesigndo 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ês730 Terabytes/ano


http://www.mikeindustries.com/blog/


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 PDAs,

fornecer versões para impressão, etc

Páginas mais leves facilitam o acesso de conexões

mais lentas (Dial Up)



Conhecendo os Padrões



Criada por Tim Berners-Lee, baseada no SGML (Standard Generalized Markup Language)

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: HyperText Markup Language

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 especificadafoi o HTML 4.1

Existe atualmente um grupo de trabalho desenvolvendo o HTML 5

HTML: HyperText Markup Language



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: eXtensible Markup Language



O desenvolvedor tem a possibilidade decriar 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)

XML: eXtensible Markup Language



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>



Uma reformulação da linguagem demarcaçã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

XHTML: eXtensible HyperText Markup Language



● 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.

HTML vs XHTML: Principais diferenças




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 corretamenteaninhados 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>



XHTML: Recomendações

Um menu nada mais édo que uma lista de opções...

Então, use as marcações deLista 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>

● Link 1

● Link 2

● Link 3

● Link 4

● Link 5



CSS: Cascading Style Sheets

Cascading Style Sheets (ou simplesmente 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 PDAs,

Impressoras, etc) apenas criando

folhas de estilo alternativas.



CSS: Cascading Style Sheets

Podemos 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

(ligação) 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;}



O Zen Garden tem como alvo entusiasmar, inspirar

e encorajar a separação do Conteúdo (HTML) da

Apresentação (CSS)

Mostrar as enormes possibilidades de se obter

belos Layouts através do CSS

Como exemplo, podemos Acessar os links e

visualizar diversos Layouts diferentes. O código

HTML permanece o mesmo, a única coisa que

muda é o arquivo CSS externo.

Caso: CSS Zen Garden www.csszengarden.com


http://www.csszengarden.com/


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),

pesoas 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 Assistiva

● 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

Sistema Operacional DOSVOXImpressora BrailePonteira de cabeça



Decreto n° 5.296 de 2 de dezembro de 2004

Art. 47. No prazo de até doze meses a contar da data de

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.



Um dos primeiros sites acessíveis produzidos

por uma empresa comercial

Todo o Redesign foi baseado nas Diretivas para

a 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%

Caso



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.

DTD: Document Type Definition



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 XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">



Validadores

Validador de HTML, XHTML, XML e outras linguagens de marcaçãohttp://validator.w3.org

Validador de Folhas de Estilo CSShttp://jigsaw.w3.org/css-validator/

Validador de Acessibilidadehttp://www.dasilva.org.br/

Outros validadores e ferramentashttp://www.w3.org/QA/Tools/


http://validator.w3.org/

http://jigsaw.w3.org/css-validator/

http://www.dasilva.org.br/

http://www.w3.org/QA/Tools/


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 AcessibilidadeParticipe de comunidades e listas:

Discuta, aprenda e ensine



www.w3.org - site oficial da W3C – Inglês

www.w3c.br - site do escritório no Brasil

www.webstandards.org - Inglês

www.webstandardsgroup.org - Inglês

www.maujor.com

www.revolucao.etc.br

www.brunotorres.net

www.tableless.com.br

Referências...


http://www.w3.org/

http://www.w3c.br/

http://www.webstandards.org/

http://www.webstandardsgroup.org/

http://www.maujor.com/

http://www.revolucao.etc.br/

http://www.brunotorres.net/

http://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 - Lista

+ Referências...


http://www.bengalalegal.com/

http://www.serpro.gov.br/acessibilidade/

http://www.acessibilidadelegal.com/

http://www.acessobrasil.org.br/

http://pt.wikipedia.org/wiki/XHTML

http://pt.wikipedia.org/wiki/Cascading_Style_Sheets

http://www.plasmadesign.com.br/stupidtables/index.html

http://br.groups.yahoo.com/group/webstandards-br


Muuuuito obrigado!

Eduardo Santos

[email protected]/edu_agniCel: 11 7309-7303


mailto:[email protected]

http://www.twitter.com.br/edu_agni

Web Standards

Design

Transcript of Web Standards