A Semntica do HTML5

  • Published on
    05-Dec-2014

  • View
    11.275

  • Download
    4

DESCRIPTION

Palestra ministrada no dia 28 de janeiro de 2010 na Campus Party Brasil."Como a Web Semntica (Web 3.0) vem se tornando cada vez mais realidade com a chegada do HTML5; O que essa nova verso da linguagem de marcao tem de diferente das anteriores, e quais vantagens nos trazem; HTML5 na prtica: Cases com exemplos de utilizao da nova verso."

Transcript

  • 1. O que so os Padres W eb? es, Padres Web so um conjunto de normas, diretriz de recomenda es, notas, artigos, tutoriais e afins . carter tcnico, produzidos pelo W3C destinado a orientar fabricantes, desenvolvedores e projetistas para o uso de prticas que possibilitem a dos. criao de uma Web acessvel a to
  • 2. A Web sem padres... Cdigo e Dificudade d Incompreensve l Desen volvimento Para mquinas o E Manuten Excesso de cdigo Sem signi ficado e tao s Forma junta a Estrutur
  • 3. Div iso em Camadas... Javascript XHTML CSS CSS CSS
  • 4. Anotem isso... Trabalhar com Web Standards no uma questo de trocar tabelas por div's, um a questo de Semntica!
  • 5. Tableless Vs Web Stand ards r no Tableless um termo que ficou muito popula Bras il, e que acaba por confundir muita gente. Tableless sig nifica um site desenvolvido sem o uso do da s tabelas para organizar o layout, e sim usan CSS. ja Cr iar um site Tableless no significa que este m de se guindo os Padres Web, que vo muito al um cdigo vlido, e tem preocupaes maiores como a Semntica e a Acessibilidade
  • 6. Caso Mike Davidson foi o responsvel pelo Rede sign do site da ESPN, seguindo os Padres Web Mdia de reduo de 50Kb por pgina Com isso, a economia de banda foi de: 2 Terabytes/dia 61 Terabytes/ms 730 Terabytes/ano
  • 7. Caso uzidos Um dos primeiros sites acessveis prod por uma empresa comercial ra Todo o Rede sign foi baseado nas Diretivas pa da W3C a acessi bilidade de contedo da Web, Com isso, as taxas de converso aumentaram 300%, l custos de manuten o caram 66%, listagem natura nas buscas aumentou 50 %, e o tempo de carregamento da pgina caiu 75%
  • 8. Estrutura... informao, como Uma estrutura de M L, deve conter documento s escritos em HT rcaes com devido apenas ma marcaes sem signifi cado. Adicionar e ser comparado a od significa do em um site p b ranco a um livro adicionar div ersas pginas em
  • 9. Um cdigo Semntico. .. Semntica refere-se ao estudo do significado. Quando utilizamos cada marcao para o que ela realmente foi criada, estamos construindo um Cdigo Semntico Parar de pensar em isso vem aqui, isso vai ali... e pensar na Estrutura da Informao Criar uma Marcao com Significado
  • 10. Compreensivel para humanos e mquinas Isso possibilitaria que informaes teis em diferentes sistemas fossem integradas para facilitar a vida das pessoas. Interoperabilidade
  • 11. Marcao Semntica res Usar apenas para dados tabula Usar at para ttulos Usar para Listas Ordenadas e para Listas No Ordenadas, seguidos do elemento Usar para Enfase, e para Enfase Forte Usar para identificar campos em formulrios
  • 12. Mas no o suficiente
  • 13. HTML5 Ian Hickson o editor do HTML5 Desde 2008 vm sendo apresentados rascunhos (Working Draft) Espera-se que essa nova verso seja liberada ainda em 2010 A previso para que se torne uma recomendao para 2012 J compreendido pelas verses mais recentes dos Browsers
  • 14. HTML5 Browser como o Google Chrome, Firefox 3.5, Internet Explorer 8 e Safari 4 j do suporte ao HTML5, e com isso algumas pginas j vo aderindo a nova verso
  • 15. HTML5 API's para a criao de Grficos 2D, controle de contedo multimdia, melhor depurao de erros e aprimoramento do uso offline so algumas das novidades da nova verso
  • 16. HTML5 Novos elementos para identificar melhor os contedos, como e para cabealho e rodap, para sesses de uma pgina ou para identificar um artigo ou um post.
  • 17. HTML5 Para definir onde ser o cabealho da pgina Para definir onde ser o rodap da pgina ou da sesso
  • 18. HTML5 Informaes relativas ao contedo principal, como um menu ou campo de busca Ser usada para descrever dialogos, usando tags de termos de definio
  • 19. HTML5 Para a insero de imagens com legenda Legenda da Imagem
  • 20. HTML5 Exibe qualquer elemento de streaming de udio, com atributos para exibio de controles ou execuo automatica. Seu Navegador no suporta esse recurso
  • 21. HTML5 Exibe vdeos na pgina, com exibio de controles e de uma imagem enquanto o vdeo carregado. Seu navegador no suporta esse recurso
  • 22. HTML5 Sesso de navegao, para links 'lado a lado'. Home Anterior Prximo
  • 23. HTML5
    • Serve para gerar um menu, com o auxlio da marcao
    • .
      • Vermelho
      • Azul
    • 24. Para referncia sobre todas as tag's http://www.w3schools.com/html5/html5_reference.asp Recomendo a leitura de Refletindo sobre Semntica http://tinyurl.com/beervb Acesso aos canais de participao dos grupos de trabalho http://www.whatwg.org/
    • 25. Muito Obrigado :) os de Agni diretor de arte online, trabalha com projet in terface, web standards e criao. www.twitter.com/eduagni www.formspring.me/eduagni www.a gni.art.br