Web Standards

Desenvolvimento Web com o Uso de Padrões:

Tecnologias e Tendências

Monografia Final de CursoMonografia Final de Curso

Ciência da Computação - UFJFCiência da Computação - UFJFRenata Tibiriçá dos ReisRenata Tibiriçá dos Reis

AgendaDefiniçãoIntrodução

O ConsórcioGuerra dos NavegadoresThe Web Standards ProjectMudança de Paradigma

Porque utilizar padrões WebCaracterísticas e VantagensDificuldadesTableless vs Web

Standards

Desenvolvimento com padrõesHTML SemânticoXHTMLCSSComportamentoPadrões e os navegadores

AcessibilidadeAplicações e Exemplos

Estudo de CasoOutros exemplos de sucesso

ConclusãoTrabalhos Futuros

Definiçã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 e destinados a orientar fabricantes, desenvolvedores e projetistas para o uso de práticas que possibilitem

a criação de uma Web acessível a todos, independentemente dos dispositivos usados ou de

suas necessidades especiais.”W3C

Introdução

19901990

Criação da World Wide Web, para aperfeiçoar a comunicação no

CERN.

Berners-Lee criou o HTML para formatar os documentos que seriam distribuídos em rede.

Tim Berners-LeeTim Berners-LeeCriador da WebCriador da Web

Introdução

Idéia original da WebIdéia original da Web

A existência de um ambiente onde pessoas conseguissem

trocar informações livremente, e que essas informações

pudessem ser acessadas de diversos dispositivos.

O Consórcio

Organização destinada a desenvolver e padronizar tecnologias para a construção de websites, de forma

que a comunicação seja feita de forma compreensível.

A Guerra dos Navegadores

• Guerra dos NavegadoresGuerra dos Navegadores• Necessidade de tornar as páginas HTML visualmente mais atrativas

ao usuário. – Tabelas para organizar visualmente uma página– textos em movimento– gifs animados– sons embutidos– efeitos com JavaScript e Flash

XX

Web Standards Project

Jeffrey Zeldman

Web Standards Project

Mudança de Paradigma

<div id="container"> <div id="header" title="sitename"> <div id="skipmenu"><a href="#content" title="skipmenu">Ir para Conteúdo</a></div> <h1>Nome do Site</h1> </div> <div id="mainnav"> <ul> <li><a href="#" accesskey="1" title="Help shortcut key = alt + 1">Seção 1</a></li> <li><a href="#" accesskey="2" title="Help shortcut key = alt + 2">Seção 2</a></li> <li><a href="#" accesskey="3" title="Help shortcut key = alt + 3">Seção 3</a></li> <li><a href="#" accesskey="4" title="Help shortcut key = alt + 4">Seção 4</a></li> </ul> </div> <div id="menu"> <h2>Seção 1</h2> <ul> <li><a href="#">Sub-seção a</a></li> <li><a href="#">Sub-seção b</a></li> <li><a href="#">Sub-seção c</a></li> <li><a href="#">Sub-seção d</a></li> <li><a href="#">Sub-seção e</a></li> </ul> <h3>Tamanho do texto</h3> <ul> <li><a href="javascript:changeFontsize('','5');" >Aumentar</a></li> <li><a href="javascript:changeFontsize('','-5')">Diminuir</a></li> </ul> </div> <div id="contents"> <a name="content"></a><h2>Cabeçalhos</h2> <p> <img class="imagefloat" src="flower.jpg" alt="Orange flower" /> Lorem ipsum dolor sit amet, consectetuer... </p> <p> Lorem ipsum dolor sit amet, consectetuer... </p> </div> <div id="footer"> Copyright © 2007 </div></div>

Por que utilizar padrões Web

« Torna-se isso »

HTMLCSS

SCRIPTS

MARCAÇÃOAPRESENTAÇÃOCOMPORTAMENTO

Separação de conteúdo e apresentação, para tornar o código limpo e correto


Maior velocidade no carregamento da página


Compatibilidade com as leis e diretrizes de acessibilidade


Funcionais em vários navegadores e plataformas, sem a dificuldade e a despesa de criar versões separadas


Melhor posicionamento em mecanismos de busca

O maior cliente cego do mundo:O maior cliente cego do mundo:

Dificuldades na utilização

Editores WYSIWYGEditores WYSIWYG

AprendizadoAprendizado

NavegadoresNavegadores

Tableless vs Web Standards

Tableless (“sem tabelas”)

Termo em oposição a visão de desenvolvimento que utiliza tabelastabelas ao invés de CSSCSS para controlar o

leiaute. Nome muito popular no BrasilBrasil.

Não é sinônimoNão é sinônimo de seguir os padrões Web.

Tableless vs Web Standards

Web Standards

Termo mais amplo que se refere aos padrões Web como um padrões Web como um todotodo e não somente às linguagens de marcação e CSS.

Envolve a utilização das diferentes tecnologias que constituem a Web, garantindo a interoperabilidadeinteroperabilidade da própria Web como um todo (XML, HTML, XHTML, CSS, WAI, RDF,

HTTP, MWI).

ApresentaçãoOnde são tratados os aspectos aspectos

visuaisvisuais que não podem ser considerados informação textual

CSSCSS

Comportamento Criação de comportamentos e efeitos efeitos sofisticadossofisticados que funcionem através

de várias plataformas e navegadoresScriptsScripts

EstruturaPartes principais do

documento, semânticasemântica e tagsHTML, XHTMLHTML, XHTML

Desenvolvimento com Padrões Web

Estrutura - HTML Semântico

Semântica: estudo do significado das palavras e de sua relação de significação nos sinais lingüísticos.

Relacionado à padrões Web: estudo dos sinais (tags), sua relação uns com os outros e sua aplicabilidade.

Estrutura - HTML Semântico

Erros comuns:Erros comuns:• tag <table> para layout;• tag <br /> para simular parágrafos ao invés de <p>; • Não utilizar headings (h1, h2, h3 etc.) para títulos; • outra tag qualquer para listas, ao invés de <ul> (lista sem ordem)

ou <ol> (lista ordenada) seguido de <li> (lista);• Não usar <label> (rótulo) para declarar o nome do campo em

formulários de inserção de dados;• Utilizar elementos de estilização como <i> e <b>, ao invés de

elementos de expressão como <em> e <strong> para texto enfático (itálico) e texto fortemente enfático (negrito).

Estrutura - XHTML

XHTML 1.0: reformulação do HTML 4 em XML 1.0

Desenvolvido para substituir o HTML

Estrutura - XHTML

• Documentos XHTML começam com elementos que informam aos navegadores como interpretá-los e aos serviços de validação como testá-los

1. DOCTYPE (“Document Type”):

• Transitional<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

• Strict<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

• Frameset<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Estrutura - XHTML

2. Declaração de namespace XHTML:<html xmlns=http://www.w3.org/1999/xhtml xml:lang="pt-br" lang="pt-br">

3. Tag META Content: <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />

4. Meta tags:<meta name="description" content="Portal da UFJF" />

<meta name="keywords" content="universidade, universidade federal, universidade federal de juiz de fora, juiz de fora, jf, web standards" />

<meta name="author" content="Renata Tibiriçá, Crystiam Pereira, Leandro Neumann, Tarcísio Lima " />

Estrutura - XHTML

• XHTML x HTML– Todos os elementos devem ser escritos em letras

minúsculas e estar convenientemente aninhados;– Os documentos devem ser bem formados (devem estar

corretamente aninhados dentro do elemento raiz <html>);– O uso de tags de fechamento é obrigatório;– Elementos vazios devem ser fechados;– Os atributos também devem ser escritos em minúscula e

seus valores devem estar entre "aspas";

Apresentação - CSS

““Um mecanismo simples para Um mecanismo simples para

acrescentar estilo a documentos Web”acrescentar estilo a documentos Web”

(W3C, 1999)(W3C, 1999)


• Declarações de estilo podem ser incluídas ao documento XHTML de 4 formas:– Inline:

<div style="background:#FFF; color:#000;">Exemplo</div>

– Incorporado:<head>

<style type="text/css">



</style>

</head>


– Externo:<head>

<link rel="stylesheet" href="estilo.css" type="text/css" media="screen" />

</head>

– Importado:<style type="text=css">



</style>


• Declarações inline e embutidas devem ser evitadas ao máximo– Retiram as vantagens da flexibilidade do CSS e da

separação entre conteúdo e apresentação.

• Recomendado que a apresentação seja definida via arquivos externos– Manutenção e alterações futuras ficam facilitadas– Possibilita a utilização do mecanismo de cache do navegador


CSS também permite que seja definido o tipo de mídia onde as regras

serão aplicadas (media types)

<link rel="stylesheet" href="nav.css" type="text/css" media="screen" />

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

<link rel="stylesheet" href="handheld.css" type="text/css" media="handheld" />


• Vantagens:– Menor tempo de download da página; – Redução da largura de banda do servidor: economia de

dinheiro;– Redução do tempo de design e desenvolvimento;– Aumento da interoperabilidade aderindo aos padrões Web;– Aumento da acessibilidade removendo alguns, vários ou

todos os elementos de apresentação da marcação.

Comportamento

• DOM: interface independente de navegador e plataforma, que permite que programas e scripts acessem e atualizem dinamicamente o conteúdo, a estrutura e o estilo de documentos.

• O W3C recomenda que aspectos de tratamento de eventos e ações automáticas devem ser incluídas através do JavaScriptJavaScript.

Comportamento

• Algumas observações na inclusão de scripts:

– O JavaScript deve ser tratado como um incrementoincremento, não como uma funcionalidade segura.

– Evitar incluir JavaScript diretamente nas tags do XHTML, o mantendo separado em arquivos externos a serem referenciados pela página (scripts não-obstrutivosscripts não-obstrutivos).

Padrões Web e os navegadores

Suporte dos navegadores aos padrões Web: grande avanço com o fim da Guerra dos Navegadores.

Porém nem todos em uso atualmente possuem o nível de suporte necessário.

Padrões Web e os navegadores

• Navegadores com melhor suporte à CSS:– Firefox (e outros baseados em Gecko, como Mozilla, Camino,

Netscape6+)– Opera– Safari (e outros baseados em WebCore).

http://www.webdevout.net/browser-support

http://www.webdevout.net/browser-support

Acessibilidade na Web

O que é acessibilidade? Quem precisa?O que é acessibilidade? Quem precisa?

Uma Web projetada de modo que pessoas portadoras de necessidades especiais possam perceber, entender, navegar e interagir de uma maneira

efetiva com a Web, bem como criar e contribuir com conteúdos para a Web. (W3C, 2005)


• Deficiências visuais, físicas, auditivas, de fala, cognitivas e neurológicas;

• Usuários impossibilitados de usar o mouse ou o teclado, com dificuldades de leitura e/ou interpretação de textos;

• Navegadores antigos, sem suporte a cor, de texto, sem suporte a CSS ou scripts, ou com estes recursos desabilitados;

• Diversidade de sistemas operacionais; • Dispositivos de navegação portáteis ou com limitações de memória

e/ou processamento; • Diversidade de resoluções de tela • Conexões lentas; • Mecanismos de Busca (“usuários cegos”).


Acessibilidade e padrões Ambos asseguram que o trabalho será útil e disponível ao

maior número possível de usuários, seja qual for a necessidade.

WAI (Web Accessibility Initiative): padrão internacional desenvolvido pelo W3C com o objetivo de ajudar os

construtores Web em estratégias para alcançar a acessibilidade.

Acessibilidade – leis e diretrizes

WAI

Dois eixos: assegurar uma transformação harmoniosa e tornar o conteúdo

compreensível e navegável

Três níveis de prioridade com base no respectivo impacto em termos de

acessibilidade.

Acessibilidade – leis e diretrizes

Outras leis:

U.S. Section 508 (EUA)Lei Federal de Acessibilidade (Brasil)

Algumas dessas leis nacionais obedecem à Prioridade 1 da WAI.

Acessibilidade – componentes

• A acessibilidade na Web depende:– do relacionamento entre diferentes componentes– do aperfeiçoamento de componentes específicos

Acessibilidade – componentes

• O W3C-WAI desenvolve guias e diretrizes para estes componentes:– ATAG (Authoring Tool Accessibility Guidelines )– UAAG (User Agent Accessibility Guidelines )– WCAG (Web Content Accessibility Guidelines )

Construindo uma Web acessível

• Adaptar sites existentes pode demandar trabalho e esforço.

• Alguns fatores essenciais para esta adaptação são:– Conhecer o tipo de conteúdo– Seguir os padrões Web– Seguir as diretrizes WCAG– Escrever texto preciso e conciso (escrever da forma mais

simples possível)


• Imagens:– Sempre utilizar conteúdo alternativo através do atributo

“alt”.

– Links Textuais:<a href="link.htm" title="Descrição do Link">Link</a>

• Identificação do campos dos formulários:<label for="Nome">Nome: </label><input type="Text" name="Nome">

http://www.ine.pt/


• Testar CSS desabilitado;• Testar em vários navegadores;• Garantir que os links funcionem mesmo quando o

JavaScript estiver desabilitado;• Tabelas somente para dados, identificando os

cabeçalhos.

Avaliando a acessibilidade

Técnicas simples, tais como alterar as 'setagens' do navegador (resolução, tamanhos de fontes etc.)

podem determinar conformidades com alguns itens de acessibilidade.

A validação da acessibilidade também deve ser feita por meio de ferramentas automáticas e da revisão

direta.

Avaliando a acessibilidade

Os métodos automáticos são geralmente rápidos, mas não são capazes de identificar todas as

nuances da acessibilidade.

A avaliação humana pode ajudar a garantir a clareza da linguagem e a facilidade da navegação.

Estudo de Caso

Protótipo do novo portal da UFJF

Objetivos a serem alcançadosTorná-lo não somente mais acessível e vantajoso a

todo tipo de usuário, como também mais interativo.

Estudo de Caso

Objetivos do desenvolvimento• Conteúdo, funções básicas e leiaute devem estar disponíveis

para qualquer navegador ou dispositivo;• Marcação validada em “XHTML 1.0 Transitional”;• Separação entre estrutura e apresentação e XHML semântico;• CSS validado, compacto e logicamente organizado;• Website uniformemente acessível (testado em relação à WCAG

1.0 – Prioridades 1 e 2);• Aparência leve e amigável, sem desperdiçar visitantes e largura

de banda em marcações grandes, scripts complexos ou imagens desnecessárias.

Estudo de Caso: projetando o conteúdo

1. Cabeçalho do documento XHTML, contendo o doctype, o título e as meta-tags.

2. Divisão da estrutura em blocos de significância:• topo, menu, barra de busca e tempo, barra de acesso aos

hotsites da instituição, conteúdo central (coluna de notícias e coluna de destaques e editais) e rodapé.


• Princípios seguidos para não se perder a semântica:– Imagens relevantes: <img> ;

– Imagens que fazem parte da estruturavisual: via CSS por Image-replacement;


• Princípios seguidos para não se perder a semântica:– Títulos e subtítulos: <h1>, <h2> etc;

– Menus: listas não-ordenadas.

Estudo de Caso: apresentação visual

• Feita por folhas de estilo CSS externas

• Divisão da apresentação:– Estrutura do leiaute: barra institucional do governo, topo,

centro com 3 colunas (menu, notícias e barra de hotlinks) e rodapé;

– Posicionamentos (margens, espaçamentos e alinhamentos);– Estilização do texto (fontes, cores, tamanhos, links) e do painel

rotativo de notícias.

Estudo de Caso: apresentação visual

• CSS Media Types:– Screen: para navegadores comuns;– Print: para impressão;

Estudo de Caso: comportamento

• Desenvolvimento de um módulo de avaliação do protótipo;

• Para possibilitar esta interação sem perder a acessibilidade e a usabilidade, foi utilizada a biblioteca JavaScript Greybox (leve e que utiliza CSS e JavaScript não-obstrutivo).

Avaliando os resultados

• Testes executados:– Resolução de tela:

• Resultado: adotado padrão de 800x600 pixels de forma a evitar barra horizontal

– Testes de navegadores: • Navegadores: IE6 e 7, Firefox 1.5 e 2.0, Safari 3, Opera 9.• Resultado: poucas diferenças foram apresentadas.• Problemas: de posicionamento com a barra da previsão do

tempo no Internet Explorer 6. • Solução: mudanças no projeto original de leiaute.


– Navegadores textuais e sem suporte à CSS: • Navegador textual utilizado: Lynx 2.8.5• Resultados: em ambos os casos, a organização da página

foi mantida, com todas as seções e imagens indicadas de forma acessível;


– Testes de validação: • Marcação: “Valid XHTML 1.0 Transitional”• CSS: 3 erros, devido à presença de hacks CSS para uma

correta apresentação do leiaute no IE6.• Acessibilidade: 2 erros retornados pelo validador DaSilva

nas prioridades 1 e 2 da WAI, devido somente à presença de falhas neste validador.


– Teste comparativo de desempenho: • Website atual da UFJF e protótipo do novo portal.• Resultado: velocidade de carregamento do portal um pouco

maior e tamanho das páginas aproximadamente 50% menor.

Outros exemplos

• Globo.com• Terra• UOL• iMasters: redução de mais de 50% de gasto de

largura de banda do servidor • ESPN: redução de 61 terabytes por mês na largura

de banda

Conclusão

Padrões Web: não uma alternativa e sim uma necessidade.

Produzir websites acessíveis, com menor tempo de carregamento, maior facilidade de manutenção e maior

visibilidade por parte dos mecanismos de busca, e permitir que o usuário navegue sem restrições de ferramentas,

tecnologia, plataforma, navegador ou outro fator limitador qualquer, possibilita uma melhor experiência tanto para

usuários quanto para desenvolvedores.

Conclusão

Seguir os padrões Web é colaborar com uma Web Seguir os padrões Web é colaborar com uma Web mais mais semânticasemântica. É garantir acesso universal e . É garantir acesso universal e irrestrito ao seu conteúdo, contribuindo para a irrestrito ao seu conteúdo, contribuindo para a

evolução da Web atual para uma Web da segunda evolução da Web atual para uma Web da segunda geração (geração (Web 2.0 e Web SemânticaWeb 2.0 e Web Semântica).).

Trabalhos Futuros

Usabilidade e Acessibilidade na WebUsabilidade e Acessibilidade na Web

Web 2.0 e Web Semântica: Web 2.0 e Web Semântica: qual o verdadeiro futuro da Webqual o verdadeiro futuro da Web

MicroformatosMicroformatos

Padrões Web e os dispositivos móveisPadrões Web e os dispositivos móveis

Technology

Web Standards