Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Lições de Semântica com HTML5

André Luís
November 04, 2011

Lições de Semântica com HTML5

Apresentado no 2o evento da comunidade HTML5pt.org.
(Portuguese only, for now. Available to give this in English, however. Get in touch)

André Luís

November 04, 2011
Tweet

More Decks by André Luís

Other Decks in Technology

Transcript

  1. LIÇÕES PRÁTICAS SEMÂNTICA H T M L 5 André Luís

    DE COM c b HTML5pt.org 3 novembro 2011 H T M L 5 d @andr3 andre-filipe-luis@telecom.pt
  2. OH HAI! http://id.andr3.net @andr3 me@andr3.net andre-filipe-luis@telecom.pt mobifeeds.net igive.sapo.pt dailyphotowall.net andr3.net

  3. OH HAI! http://id.andr3.net @andr3 Departamento de Qualidade & Usabilidade do

    SAPO http:/ /ux.sapo.pt
  4. OH HAI!

  5. OH HAI!

  6. OH HAI! mais em http:/ /slideshare.net/andr3 Atalho: http:/ /33om.sl.pt

  7. Agenda

  8. Agenda Semântica: O que é e porque é importante? A

    web semântica nos tempos de “antigamente” No admirável mundo novo do HTML5 1 2 3
  9. Agenda Semântica

  10. Agenda Semântica

  11. Semântica: O que é & porque é importante?

  12. Semântica: O que é & porque é importante? Semântica subst.

    fem. Estudo do significado das palavras.
  13. Semântica: O que é & porque é importante? Web Semântica?

  14. Web Semântica? Semântica: O que é & porque é importante?

    http://id.sapo.pt/andr3
  15. Web Semântica? Semântica: O que é & porque é importante?

    http://id.sapo.pt/andr3
  16. Web Semântica? Semântica: O que é & porque é importante?

    http://id.sapo.pt/andr3
  17. Web Semântica? Semântica: O que é & porque é importante?

    Uma pessoa! http://id.sapo.pt/andr3
  18. Semântica: O que é & porque é importante? Uma pessoa!

    http://id.sapo.pt/andr3 Web Semântica?
  19. Web Semântica? Semântica: O que é & porque é importante?

    Uma pessoa! 1x <div>, 1x <h1>, 3x <p>, 1x <a>... http://id.sapo.pt/andr3
  20. Web Semântica? Semântica: O que é & porque é importante?

    1x <div>, 1x <h1>, 3x <p>, 1x <a>... Uma pessoa! http://id.sapo.pt/andr3
  21. Web Semântica? Semântica: O que é & porque é importante?

    1x <div>, 1x <h1>, 3x <p>, 1x <a>... Uma pessoa! http://id.sapo.pt/andr3
  22. Web Semântica? Semântica: O que é & porque é importante?

    1x <div>, 1x <h1>, 3x <p>, 1x <a>... Uma pessoa! http://id.sapo.pt/andr3
  23. Web Semântica? Semântica: O que é & porque é importante?

    Try again... Uma pessoa! http://id.sapo.pt/andr3
  24. Web Semântica? Semântica: O que é & porque é importante?

    1x Pessoa! Uma pessoa! http://id.sapo.pt/andr3
  25. A web semântica nos tempos de antigamente?

  26. A web semântica nos tempos de antigamente? HTML 4 XHTML

    1.0
  27. A web semântica nos tempos de antigamente? HTML 4 XHTML

    1.0 Desenhados para documentos hipertexto.
  28. A web semântica nos tempos de antigamente? HTML 4 XHTML

    1.0 Desenhados para documentos hipertexto. abbr acronym address applet area b base basefont do big blockquote body br button caption center cite ode col colgroup dd del dfn dir div dl dt em fieldset nt form frame frameset h1 h2 h3 h4 h5 h6 head hr ml i iframe img input ins isindex kbd label legend l link map menu meta noframes noscript object ol
  29. A web semântica nos tempos de antigamente? HTML 4 XHTML

    1.0 Desenhados para documentos hipertexto. abbr acronym address applet area b base basefont do big blockquote body br button caption center cite ode col colgroup dd del dfn dir div dl dt em fieldset nt form frame frameset h1 h2 h3 h4 h5 h6 head hr ml i iframe img input ins isindex kbd label legend l link map menu meta noframes noscript object ol abbr acronym address applet area b base basefont do big blockquote body br button caption center cite ode col colgroup dd del dfn dir div dl dt em fieldset nt form frame frameset h1 h2 h3 h4 h5 h6 head hr ml i iframe img input ins isindex kbd label legend l link map menu meta noframes noscript object ol
  30. A web semântica nos tempos de antigamente? index.html model.xml (RDF)

    2004 CIRCA
  31. A web semântica nos tempos de antigamente? index.html model.xml (RDF)

    2004 2005 index.html CIRCA CIRCA
  32. A web semântica nos tempos de antigamente? index.html model.xml (RDF)

    2004 2005 index.html CIRCA CIRCA
  33. A web semântica nos tempos de antigamente? index.html model.xml (RDF)

    2004 RDFa RDF-in-attributes 2005 index.html CIRCA CIRCA
  34. http:/ /microformats.org A web semântica nos tempos de antigamente?

  35. A web semântica nos tempos de antigamente? <div> <h1>André Luís</h1>

    <p>Lisboa, Portugal</p> <p> <a href=“mailto:me@andr3.net”> me@andr3.net </a> </p> <p>web nerd.</p> </div> http:/ /microformats.org
  36. A web semântica nos tempos de antigamente? <div class=“vcard”> <h1

    class=“fn”>André Luís</h1> <p class=“adr”>Lisboa, Portugal</p> <p> <a class=“email” href=“mailto:me@andr3.net”> me@andr3.net </a> </p> <p class=“note”>web nerd.</p> </div> http:/ /microformats.org
  37. A web semântica nos tempos de antigamente? <div class=“vcard”> <h1

    class=“fn”>André Luís</h1> <p class=“adr”>Lisboa, Portugal</p> <p> <a class=“email” href=“mailto:me@andr3.net”> me@andr3.net </a> </p> <p class=“note”>web nerd.</p> </div> http:/ /microformats.org
  38. A web semântica nos tempos de antigamente? Número de formatos

    limitado, são criados pela comunidade. Usados por motores de busca & plugins de browsers para melhorar a experiência. Baseiam-se em atributos omnipresentes. Fáceis de publicar, fácil de consumir. http:/ /microformats.org
  39. RDFa RDF-in-attributes A web semântica nos tempos de antigamente? http:/

    /www.w3.org/TR/xhtml-rdfa-primer/
  40. A web semântica nos tempos de antigamente? <div> <h1>André Luís</h1>

    <p>Lisboa, Portugal</p> <p> <a href=“mailto:me@andr3.net”> me@andr3.net </a> </p> <p>web nerd.</p> </div> RDFa RDF-in-attributes http:/ /www.w3.org/TR/xhtml-rdfa-primer/
  41. A web semântica nos tempos de antigamente? <div xmlns:v="http://www.w3.org/2001/vcard-rdf/3.0#" about=“http://id.sapo.pt/andr3”

    typeof=“v:VCard”> <h1 property=“v:FN”>André Luís</h1> <p role=“v:ADR”>Lisboa, Portugal</p> <p> <a rel=“v:EMAIL” href=“mailto:me@andr3.net”> me@andr3.net </a> </p> <p property=“v:NOTE”>web nerd.</p> </div> RDFa RDF-in-attributes http:/ /www.w3.org/TR/xhtml-rdfa-primer/
  42. A web semântica nos tempos de antigamente? <div xmlns:v="http://www.w3.org/2001/vcard-rdf/3.0#" about=“http://id.sapo.pt/andr3”

    typeof=“v:VCard”> <h1 property=“v:FN”>André Luís</h1> <p role=“v:ADR”>Lisboa, Portugal</p> <p> <a rel=“v:EMAIL” href=“mailto:me@andr3.net”> me@andr3.net </a> </p> <p property=“v:NOTE”>web nerd.</p> </div> RDFa RDF-in-attributes http:/ /www.w3.org/TR/xhtml-rdfa-primer/
  43. A web semântica nos tempos de antigamente? RDFa RDF-in-attributes Infinitos

    formatos... qualquer um pode escrever um vocabulário (ex: OpenGraph do Facebook). Usados por motores de busca & plugins de browsers para melhorar a experiência. Baseiam-se em novos atributos: namespaces em XHTML, novos DTD para HTML. Mais complexos de publicar & consumir. http://www.alistapart.com/articles/introduction-to-rdfa/ http:/ /www.w3.org/TR/xhtml-rdfa-primer/
  44. 88mph

  45. Copyright © 2000-2011 Berlin Wallpaper, Inc. The Jetsons are ©,

    ® & ™ by Hanna-Barbera Productions, Inc.
  46. Copyright © 2000-2011 Berlin Wallpaper, Inc. The Jetsons are ©,

    ® & ™ by Hanna-Barbera Productions, Inc. No admirável mundo novo do HTML5!
  47. No admirável mundo novo do HTML5! Semântica no HTML5 Novos

    elementos estruturais article aside audio canvas data datalist details eventsource figcaption figure footer header mark meter nav progress section source time track video
  48. Elementos estruturais Lição nº1 Chamar as coisas pelos nomes!

  49. None
  50. <section> Serve para agrupar conteúdo e elementos de um mesmo

    tema.
  51. <article> Identifica porções de artigos independentes, items de conteúdo portável.

    Também deve ser aplicado em widgets.
  52. <nav> Demarca informação de navegação. Listas de links para secções

    de conteúdo importante são claros membros de uma <nav>. Nem todas as listas de links justificam uma <nav>.
  53. <time> vs. <data> Esta semana o Ian Hickson mudou a

    especificação e removeu o elemento <time> e o atributo @pubdate nos <article>. Introduziu um <data value=“...”>.
  54. <time> vs. <data> Esta semana o Ian Hickson mudou a

    especificação e removeu o elemento <time> e o atributo @pubdate nos <article>. Introduziu um <data value=“...”>. <time datetime="2011-11-03T18:55:42"> 3 de novembro 18:55 </time>
  55. <aside>, <figure> Conteúdo à parte do principal. Notas, referências, conteúdo

    relacionado são bons candidatos. <figure> aplica-se, por ex., às imagens usadas na wikipedia. <mark>, <b>, <i>, <u>, <s> Elementos de UI sem qualquer valor semântico. mark: keyword pesquisa. b: negrito. i: voz alternativa. u: anotação,. s: irrelevante.
  56. <header>, <footer>, <small> <header> & <footer> referem-se à importância da

    informação no seu contexto. footer pode até estar antes do <header>. <small> mudou de significado para “letra pequena” (contratos). <aside>, <figure> Conteúdo à parte do principal. Notas, referências, conteúdo relacionado são bons candidatos. <figure> aplica-se, por ex., às imagens usadas na wikipedia. <mark>, <b>, <i>, <u>, <s> Elementos de UI sem qualquer valor semântico. mark: keyword pesquisa. b: negrito. i: voz alternativa. u: anotação,. s: irrelevante.
  57. <header>, <footer>, <small> <header> & <footer> referem-se à importância da

    informação no seu contexto. footer pode até estar antes do <header>. <small> mudou de significado para “letra pequena” (contratos). <mark>, <b>, <i>, <u>, <s> Elementos de UI sem qualquer valor semântico. mark: keyword pesquisa. b: negrito. i: voz alternativa. u: anotação,. s: irrelevante.
  58. <header>, <footer>, <small> <header> & <footer> referem-se à importância da

    informação no seu contexto. footer pode até estar antes do <header>. <small> mudou de significado para “letra pequena” (contratos). <mark>, <b>, <i>, <u>, <s> Elementos de UI sem qualquer valor semântico. mark: keyword pesquisa. b: negrito. i: voz alternativa. u: anotação,. s: irrelevante.
  59. <header>, <footer>, <small> <header> & <footer> referem-se à importância da

    informação no seu contexto. footer pode até estar antes do <header>. <small> mudou de significado para “letra pequena” (contratos). <mark>, <b>, <i>, <u>, <s> Elementos de UI sem qualquer valor semântico. mark: keyword pesquisa. b: negrito. i: voz alternativa. u: anotação,. s: irrelevante. Livro “HTML5 for Web Designers” do Jeremy Keith em versão HTML http:/ /html5forwebdesigners.com Documento W3C com diferenças entre o HTML4 & HTML5 pelo Anne & Simon Pieters: http:/ /www.w3.org/TR/html5-diff/#new-elements Leitura recomendada
  60. Acesso universal Lição nº2 Compatibilidade com browsers antigos <section class=“noticias”></section>

    Aplicar estilo a elementos novos:
  61. Acesso universal Lição nº2 Compatibilidade com browsers antigos section.noticias {

    ... } IE 6, 7 & 8 Falha em <section class=“noticias”></section> Aplicar estilo a elementos novos:
  62. Acesso universal Lição nº2 Compatibilidade com browsers antigos section.noticias {

    ... } IE 6, 7 & 8 Falha em <section class=“noticias”></section> Aplicar estilo a elementos novos: IE 6, 7 & 8 sem javascript HTML5 shiv do Remy Sharp (@rem) http:/ /code.google.com/p/html5shiv/
  63. Acesso universal Lição nº2 Compatibilidade com browsers antigos section.noticias {

    ... } IE 6, 7 & 8 Falha em <section class=“noticias”></section> Aplicar estilo a elementos novos: IE 6, 7 & 8 sem javascript HTML5 shiv do Remy Sharp (@rem) http:/ /code.google.com/p/html5shiv/ <div class=“html5-section”> <section> </section> </div> .html5-section { ... } nenhum
  64. data-_____ No admirável mundo novo do HTML5! Semântica no HTML5

    Distinguir semântica de dados auxiliares.
  65. data-_____ No admirável mundo novo do HTML5! Semântica no HTML5

    Distinguir semântica de dados auxiliares. <p data-zone=“logotipo”> ...
  66. data-_____ No admirável mundo novo do HTML5! Semântica no HTML5

    Distinguir semântica de dados auxiliares. <p data-zone=“logotipo”> ... Interessa a alguém para além de nós?
  67. data-_____ No admirável mundo novo do HTML5! Semântica no HTML5

    Distinguir semântica de dados auxiliares. <p data-zone=“logotipo”> ... Interessa a alguém para além de nós? Meh! Não...
  68. data-_____ No admirável mundo novo do HTML5! Semântica no HTML5

    Distinguir semântica de dados auxiliares. <p data-zone=“logotipo”> ... Interessa a alguém para além de nós? Meh! Não... Então são dados auxiliares... data-*!
  69. Aproveitar os metadados Lição nº3 A sua utilidade é sempre

    multi-facetada! Aproveitem os metadados como ganchos para o estilo do vosso site. [data-zone] { border: 1px solid green; } [data-zone]:before { content: “Zona ” attr(data-zone); }
  70. Bookmarklet de debug

  71. Então e os dados que podem interessar a outros?

  72. Então e os dados que podem interessar a outros? article

    aside audio canvas data datalist details eventsource figcaption figure footer header mark meter nav progress section source time track video a abbr acronym address applet area b base basefont bdo big blockquote body br button caption center cite code col colgroup dd del dfn dir div dl dt em fieldset font form frame frameset h1 h2 h3 h4 h5 h6 head hr html i iframe img input ins isindex kbd label legend li link map menu meta noframes noscript object ol optgroup option p param pre q s samp script select small span strike strong style sub sup table tbody td textarea tfoot th thead title tr tt u ul var
  73. Em janeiro de 2009...

  74. None
  75. John Allsopp

  76. John Allsopp “We don’t need to add specific terms to

    the vocabulary of HTML, we need to add a mechanism that allows semantic richness to be added to a document as required.” in http://www.alistapart.com/articles/semanticsinhtml5
  77. John Allsopp “We don’t need to add specific terms to

    the vocabulary of HTML, we need to add a mechanism that allows semantic richness to be added to a document as required.” in http://www.alistapart.com/articles/semanticsinhtml5 “Nós não precisamos de adicionar termos específicos ao vocabulário do HTML, nós precisamos de adicionar um mecanismo que permita que riqueza semântica seja adicionada ao documento conforme seja precisa.”
  78. mMICRODATA m

  79. Microdata Mecanismo que permite embeber dados legíveis por máquinas em

    documentos de HTML5. Extensível por natureza e um pouco mais simples que o RDFa. Pares chave = “valor”. No admirável mundo novo do HTML5! RDFa RDF-in-attributes
  80. Lição nº4 Microdata: Passo-a-passo É fixar e pronto!

  81. <div itemscope> ... Demarcar o item com itemscope. 1 Lição

    nº4 Microdata: Passo-a-passo É fixar e pronto!
  82. Demarcar o item com itemscope. 1 Declarar o tipo (URL)

    com itemtype. 2 <div itemscope itemtype=“http://data-vocabulary.org/Person”> ... Lição nº4 Microdata: Passo-a-passo É fixar e pronto!
  83. Microdata: Passo-a-passo <div itemscope> ... Demarcar o item com itemscope.

    1 Declarar o tipo (URL) com itemtype. 2 <div itemscope itemtype=“http://data-vocabulary.org/Person”> ... <div itemscope itemtype=“http://data-vocabulary.org/Person”> <h1 itemprop=“name”>André Luís</h1> <p><a itemprop=“url” href=“http://id.andr3.net/”>Site pessoal</a></p>... Identificar os valores de cada chave com itemprop. 3 Lição nº4 É fixar e pronto!
  84. <div itemscope itemtype=“http://data-vocabulary.org/Person”> <h1 itemprop=“name”>André Luís</h1> <p><a itemprop=“email” href=“mailto:me@andr3.net”> me@andr3.net

    </a> </p> <p itemprop=“note” >web nerd.</p> </div> No admirável mundo novo do HTML5! Microdata http:/ /www.w3.org/TR/microdata/
  85. Qualquer um pode criar e estender um vocabulário...

  86. ...mas quais posso ou devo usar?

  87. Microdata: Quais usar? No admirável mundo novo do HTML5! Google,

    Microsoft & Yahoo! lançaram o Schema.org http:/ /schema.org/ Livros, filmes, receitas, Prog. de TV, Eventos, Organizações, Pessoas, Lugares, etc.
  88. Microdata: Quais usar? No admirável mundo novo do HTML5! Google,

    Microsoft & Yahoo! lançaram o Schema.org http:/ /schema.org/ Livros, filmes, receitas, Prog. de TV, Eventos, Organizações, Pessoas, Lugares, etc. Um ajudante para nos facilitar a vida... (pela empresa Sitening LLC) http:/ /schema-creator.org/
  89. Microdata: Quais usar? No admirável mundo novo do HTML5! http:/

    /www.google.com/webmasters/tools/richsnippets 1. Microdata 2. Microformatos 3. RDFa
  90. Microdata: Quais usar? No admirável mundo novo do HTML5! http:/

    /www.google.com/webmasters/tools/richsnippets 1. Microdata 2. Microformatos 3. RDFa
  91. Microdata: Quais usar? No admirável mundo novo do HTML5! itemprop

    http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=146646
  92. Microdata: Quais usar? No admirável mundo novo do HTML5! http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=146646

  93. Escolher o formato ideal Lição nº5 Purismo fica à porta.

    Microdata vs microformatos vs RDFa Um formato pode ser mais correto mas o que conta é a sua utilização no dia-a-dia.
  94. Para finalizar...

  95. No admirável mundo novo do HTML5! semântica dificuldade RDFa HTML

    microformatos dados documentos RDFa 1.1 Microdata
  96. Obrigado. QUESTÕES?

  97. André Luís c b @andr3 andre-filipe-luis@telecom.pt HTML5pt.org 3 novembro 2011

    d FIM Download PDF Download Keynote (mac) http:/ /talks.andr3.net/2011/html5pt/semantics.pdf http:/ /talks.andr3.net/2011/html5pt/semantics.key LIÇÕES PRÁTICAS SEMÂNTICA H T M L 5 DE COM
  98. Créditos & Tipografia Gotham Gotham Rounded Gotham Condensed American Typewriter

    Chaparral Pro Fundação Calouste-Gulbenkian (biblarte no Flickr) http:/ /www.flickr.com/photos/biblarte/2709389469/ @ 2000-2011 All rights reserved to Berlin Wallpaper, Inc. http:/ /www.berlinwallpaper.com/PrissPrints/Jetsons-Giant-Wall-Decal.htm Used excerpt without permission. Drew McLellan (drewm no Flickr) http:/ /www.flickr.com/photos/drewm/4732738890/ C C Katie Harries (kharied no Flickr) http:/ /www.flickr.com/photos/kharied/4177969736/ C