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)

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