Web Standards

  • 1,491 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,491
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
93
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 10.  
  • 11.  
  • 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.
  • 51.  
  • 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;
  • 58.  
  • 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;
  • 62.  
  • 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