Web Standards

Desenvolvimento Web com o Uso de Padrões: Tecnologias e Tendências Monografia Final de Curso Ciência da Computação - UFJF Renata Tibiriçá dos Reis

Agenda

Definição

Introdução

O Consórcio

Guerra dos Navegadores

The Web Standards Project

Mudança de Paradigma

Porque utilizar padrões Web

Características e Vantagens

Dificuldades

Tableless vs Web Standards

Desenvolvimento com padrões HTML Semântico XHTML CSS Comportamento Padrões e os navegadores Acessibilidade Aplicações e Exemplos Estudo de Caso Outros exemplos de sucesso Conclusão Trabalhos 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

1990

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-Lee Criador da Web

Introdução

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

X

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 » HTML CSS SCRIPTS MARCAÇÃO APRESENTAÇÃO COMPORTAMENTO Separação de conteúdo e apresentação, para tornar o código limpo e correto

Por que utilizar padrões Web Maior velocidade no carregamento da página

Por que utilizar padrões Web Compatibilidade com as leis e diretrizes de acessibilidade

Por que utilizar padrões Web Funcionais em vários navegadores e plataformas, sem a dificuldade e a despesa de criar versões separadas

Por que utilizar padrões Web Melhor posicionamento em mecanismos de busca O maior cliente cego do mundo:

Dificuldades na utilização Editores WYSIWYG Aprendizado Navegadores

Tableless vs Web Standards Tableless (“sem tabelas”) Termo em oposição a visão de desenvolvimento que utiliza tabelas ao invés de CSS para controlar o leiaute. Nome muito popular no Brasil . Nã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 todo e não somente às linguagens de marcação e CSS. Envolve a utilização das diferentes tecnologias que constituem a Web, garantindo a interoperabilidade da própria Web como um todo (XML, HTML, XHTML, CSS, WAI, RDF, HTTP, MWI).

Desenvolvimento com Padrões Web Apresentação Onde são tratados os aspectos visuais que não podem ser considerados informação textual CSS Comportamento Criação de comportamentos e efeitos sofisticados que funcionem através de várias plataformas e navegadores Scripts Estrutura Partes principais do documento, semântica e tags HTML, XHTML

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:

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

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

Declaração de namespace XHTML:

<html xmlns=http://www.w3.org/1999/xhtml xml:lang="pt-br" lang="pt-br">

Tag META Content:

<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />

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 acrescentar estilo a documentos Web” (W3C, 1999)

Apresentação - CSS

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

<!-- div {

background: #FFF;

color: #000;

}

-->

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

Apresentação - CSS 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 JavaScript .

Comportamento

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

O JavaScript deve ser tratado como um incremento , 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-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

Acessibilidade na Web 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)

Acessibilidade na Web

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

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

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çados Torná-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

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

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 estrutura visual: 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 mais semântica . É garantir acesso universal e irrestrito ao seu conteúdo, contribuindo para a evolução da Web atual para uma Web da segunda geração ( Web 2.0 e Web Semântica ).

Trabalhos Futuros Usabilidade e Acessibilidade na Web Web 2.0 e Web Semântica: qual o verdadeiro futuro da Web Microformatos Padrões Web e os dispositivos móveis