Lições de Semântica com HTML5

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 [email protected]

2. OH HAI! http://id.andr3.net @andr3 [email protected] andre-fi[email protected] 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:[email protected]”> [email protected] </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:[email protected]”> [email protected] </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:[email protected]”> [email protected] </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:[email protected]”> [email protected] </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:[email protected]”> [email protected] </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:[email protected]”> [email protected] </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:[email protected]”> [email protected]

    </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 [email protected] 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