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

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.

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

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

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 .

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)

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 .

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.

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