1) O documento discute os padrões web, incluindo HTML semântico, CSS e JavaScript para separar conteúdo, apresentação e comportamento. 2) As vantagens de usar padrões web incluem compatibilidade, velocidade e acessibilidade. 3) Embora os navegadores tenham melhorado o suporte aos padrões, nem todos possuem o nível de suporte necessário ainda.

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

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

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

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

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

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

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

8. Web Standards Project Jeffrey Zeldman Web Standards Project

9. Mudança de Paradigma

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

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

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

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

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

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

18. Dificuldades na utilização Editores WYSIWYG Aprendizado Navegadores

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

20. 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).

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

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

23. 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).

24. Estrutura - XHTML XHTML 1.0 : reformulação do HTML 4 em XML 1.0 Desenvolvido para substituir o HTML

25. 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 &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> Strict <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> Frameset <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Frameset//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd&quot;>

26. Estrutura - XHTML Declaração de namespace XHTML: <html xmlns=http://www.w3.org/1999/xhtml xml:lang=&quot;pt-br&quot; lang=&quot;pt-br&quot;> Tag META Content: <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html;charset=iso-8859-1&quot; /> Meta tags: <meta name=&quot;description&quot; content=&quot;Portal da UFJF&quot; /> <meta name=&quot;keywords&quot; content=&quot;universidade, universidade federal, universidade federal de juiz de fora, juiz de fora, jf, web standards&quot; /> <meta name=&quot;author&quot; content=&quot;Renata Tibiriçá, Crystiam Pereira, Leandro Neumann, Tarcísio Lima &quot; />

27. 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 &quot;aspas&quot;;

28. Apresentação - CSS “ Um mecanismo simples para acrescentar estilo a documentos Web” (W3C, 1999)

29. Apresentação - CSS Declarações de estilo podem ser incluídas ao documento XHTML de 4 formas: Inline: <div style=&quot;background:#FFF; color:#000;&quot;>Exemplo</div> Incorporado: <head> <style type=&quot;text/css&quot;> <!-- div { background: #FFF; color: #000; } --> </style> </head>

30. Apresentação - CSS Externo: <head> <link rel=&quot;stylesheet&quot; href=&quot;estilo.css&quot; type=&quot;text/css&quot; media=&quot;screen&quot; /> </head> Importado: <style type=&quot;text=css&quot;> <!-- @import url(estilo_importado.css); --> </style>

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

32. 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=&quot;stylesheet&quot; href=&quot;nav.css&quot; type=&quot;text/css&quot; media=&quot;screen&quot; /> <link rel=&quot;stylesheet&quot; href=&quot;print.css&quot; type=&quot;text/css&quot; media=&quot;print&quot; /> <link rel=&quot;stylesheet&quot; href=&quot;handheld.css&quot; type=&quot;text/css&quot; media=&quot;handheld&quot; />

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

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

35. 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 ).

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

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

38. 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)

39. 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”).

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

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

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

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

44. 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 )

45. 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)

46. Construindo uma Web acessível Imagens: Sempre utilizar conteúdo alternativo através do atributo “ alt ”. Links Textuais: <a href=&quot;link.htm&quot; title=&quot;Descrição do Link&quot; >Link</a> Identificação do campos dos formulários: <label for=&quot;Nome&quot;>Nome: </label><input type=&quot;Text&quot; name=&quot;Nome&quot;>

47. Construindo uma Web acessível 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.

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

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

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

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

53. 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é .

54. Estudo de Caso: projetando o conteúdo 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;

55. Estudo de Caso: projetando o conteúdo Princípios seguidos para não se perder a semântica: Títulos e subtítulos: <h1>, <h2> etc; Menus: listas não-ordenadas.

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

57. Estudo de Caso: apresentação visual CSS Media Types: Screen : para navegadores comuns; Print : para impressão;

59. 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 ).

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

61. Avaliando os resultados 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;

63. Avaliando os resultados 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.

64. Avaliando os resultados 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.

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

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

67. 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 ).

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