Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT

  • 1,862 views
Uploaded on

Apresentado no 2o evento da comunidade HTML5pt.org

Apresentado no 2o evento da comunidade HTML5pt.org

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,862
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
58
Comments
0
Likes
12

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. LIÇÕES PRÁTICAS DESEMÂNTICA COMH T M L 55HT LHTML5pt.org d 3 novembro 2011André Luís c@andr3 andre-filipe-luis@telecom.pt b
  • 2. OH HAI! @andr3 http://id.andr3.net me@andr3.net andre-filipe-luis@telecom.pt andr3.net dailyphotowall.net igive.sapo.pt mobifeeds.net
  • 3. OH HAI! @andr3 http://id.andr3.net 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. Agenda1 Semântica: O que é e porque é importante?2 A web semântica nos tempos de “antigamente”3 No admirável mundo novo do HTML5
  • 9. AgendaSemântica
  • 10. AgendaSemâ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. Semântica: O que é & porque é importante? Web Semântica? http://id.sapo.pt/andr3
  • 15. Semântica: O que é & porque é importante? Web Semântica? http://id.sapo.pt/andr3
  • 16. Semântica: O que é & porque é importante? Web Semântica? http://id.sapo.pt/andr3
  • 17. Semântica: O que é & porque é importante? Web Semântica? http://id.sapo.pt/andr3Uma pessoa!
  • 18. Semântica: O que é & porque é importante? Web Semântica? http://id.sapo.pt/andr3Uma pessoa!
  • 19. Semântica: O que é & porque é importante? Web Semântica? 1x <div>, 1x <h1>, http://id.sapo.pt/andr3 3x <p>, 1x <a>...Uma pessoa!
  • 20. Semântica: O que é & porque é importante? Web Semântica? 1x <div>, 1x <h1>, http://id.sapo.pt/andr3 3x <p>, 1x <a>...Uma pessoa!
  • 21. Semântica: O que é & porque é importante? Web Semântica? 1x <div>, 1x <h1>, http://id.sapo.pt/andr3 3x <p>, 1x <a>...Uma pessoa!
  • 22. Semântica: O que é & porque é importante? Web Semântica? 1x <div>, 1x <h1>, http://id.sapo.pt/andr3 3x <p>, 1x <a>...Uma pessoa!
  • 23. Semântica: O que é & porque é importante? Web Semântica? http://id.sapo.pt/andr3Uma pessoa! Try again...
  • 24. Semântica: O que é & porque é importante? Web Semântica? 1x Pessoa! http://id.sapo.pt/andr3Uma pessoa!
  • 25. A web semântica nostempos 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.0Desenhados 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 basefontdo 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 basefontdo 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? CIRCA 2004 index.html model.xml (RDF)
  • 31. A web semântica nos tempos de antigamente? CIRCA 2004 index.html model.xml (RDF) CIRCA 2005 index.html
  • 32. A web semântica nos tempos de antigamente? CIRCA 2004 index.html model.xml (RDF) CIRCA 2005 index.html
  • 33. A web semântica nos tempos de antigamente? CIRCA 2004 index.html model.xml (RDF) CIRCA 2005 RDFa index.html RDF-in-attributes
  • 34. A web semântica nos tempos de antigamente? http://microformats.org
  • 35. A web semântica nos tempos de antigamente? http://microformats.org<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>
  • 36. A web semântica nos tempos de antigamente? http://microformats.org<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>
  • 37. A web semântica nos tempos de antigamente? http://microformats.org<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>
  • 38. A web semântica nos tempos de antigamente? http://microformats.orgNúmero de formatos limitado, são criadospela 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.
  • 39. A web semântica nos tempos de antigamente? RDFa RDF-in-attributes http://www.w3.org/TR/xhtml-rdfa-primer/
  • 40. A web semântica nos tempos de antigamente? RDFa RDF-in-attributes http://www.w3.org/TR/xhtml-rdfa-primer/<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>
  • 41. A web semântica nos tempos de antigamente? RDFa RDF-in-attributes http://www.w3.org/TR/xhtml-rdfa-primer/<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>
  • 42. A web semântica nos tempos de antigamente? RDFa RDF-in-attributes http://www.w3.org/TR/xhtml-rdfa-primer/<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>
  • 43. A web semântica nos tempos de antigamente? RDFa RDF-in-attributes http://www.w3.org/TR/xhtml-rdfa-primer/Infinitos formatos... qualquer um pode escrever umvocabulá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/
  • 44. 88mph
  • 45. Copyright © 2000-2011 Berlin Wallpaper, Inc. The Jetsons are ©, ® & ™ by Hanna-Barbera Productions, Inc.
  • 46. No admirável mundo novo do HTML5!Copyright © 2000-2011 Berlin Wallpaper, Inc. The Jetsons are ©, ® & ™ by Hanna-Barbera Productions, Inc.
  • 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. Lição nº1 Elementosnomes! Chamar as coisas pelos estruturais
  • 49. <section>Serve paraagruparconteúdo eelementos deum mesmotema.
  • 50. <article>Identificaporções deartigosindependentes,items deconteúdoportável.Também deveser aplicado emwidgets.
  • 51. <nav>Demarcainformação denavegação.Listas de linkspara secções deconteúdoimportante sãoclaros membrosde uma <nav>.Nem todas aslistas de linksjustificam uma<nav>.
  • 52. <time> vs. <data>Esta semana oIan Hicksonmudou aespecificação eremoveu oelemento <time>e o atributo@pubdate nos<article>.Introduziu um<data value=“...”>.
  • 53. <time> vs. <data> Esta semana o Ian Hickson<time datetime="2011-11-03T18:55:42"> mudou a 3 de novembro 18:55 especificação e removeu o</time> elemento <time> e o atributo @pubdate nos <article>. Introduziu um <data value=“...”>.
  • 54. <aside>, <figure>Conteúdo à parte do principal. Notas, referências, conteúdorelacionado 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.
  • 55. <aside>, <figure>Conteúdo à parte do principal. Notas, referências, conteúdorelacionado 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.<header>, <footer>, <small><header> & <footer> referem-se à importância da informação noseu contexto. footer pode até estar antes do <header>.<small> mudou de significado para “letra pequena” (contratos).
  • 56. <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.<header>, <footer>, <small><header> & <footer> referem-se à importância da informação noseu contexto. footer pode até estar antes do <header>.<small> mudou de significado para “letra pequena” (contratos).
  • 57. <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.<header>, <footer>, <small><header> & <footer> referem-se à importância da informação noseu contexto. footer pode até estar antes do <header>.<small> mudou de significado para “letra pequena” (contratos).
  • 58. <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.<header>, <footer>, <small>Leitura recomendada<header> & <footer> referem-se à importância da informação noLivro “HTML5 for Web Designers” do Jeremy Keith em versão HTMLseu contexto. footer pode até estar antes do <header>.http://html5forwebdesigners.com<small> mudou de significado para “letra pequena” (contratos).Documento W3C com diferenças entre o HTML4 & HTML5pelo Anne & Simon Pieters:http://www.w3.org/TR/html5-diff/#new-elements
  • 59. Lição nº2 Acesso com browsers antigos Compatibilidade universal Aplicar estilo a elementos novos: <section class=“noticias”></section>
  • 60. Lição nº2 Acesso com browsers antigos Compatibilidade universal Aplicar estilo a elementos novos:Falha em <section class=“noticias”></section>IE 6, 7 & 8 section.noticias { ... }
  • 61. Lição nº2 Acesso com browsers antigos Compatibilidade universal Aplicar estilo a elementos novos:Falha em <section class=“noticias”></section>IE 6, 7 & 8 section.noticias { ... }IE 6, 7 & 8 HTML5 shiv do Remy Sharp (@rem)sem javascript http://code.google.com/p/html5shiv/
  • 62. Lição nº2 Acesso com browsers antigos Compatibilidade universal Aplicar estilo a elementos novos:Falha em <section class=“noticias”></section>IE 6, 7 & 8 section.noticias { ... }IE 6, 7 & 8 HTML5 shiv do Remy Sharp (@rem)sem javascript http://code.google.com/p/html5shiv/nenhum <div class=“html5-section”> <section> </section> </div> .html5-section { ... }
  • 63. No admirável mundo novo do HTML5! Semântica no HTML5 Distinguir semântica de dados auxiliares. data-_____
  • 64. No admirável mundo novo do HTML5! Semântica no HTML5 Distinguir semântica de dados auxiliares. <p data-_____ data-zone=“logotipo”> ...
  • 65. No admirável mundo novo do HTML5! Semântica no HTML5 Distinguir semântica de dados auxiliares. <p data-_____ data-zone=“logotipo”> ... Interessa a alguém para além de nós?
  • 66. No admirável mundo novo do HTML5! Semântica no HTML5 Distinguir semântica de dados auxiliares. <p data-_____ data-zone=“logotipo”> ... Interessa a alguém para Meh! Não... além de nós?
  • 67. No admirável mundo novo do HTML5! Semântica no HTML5 Distinguir semântica de dados auxiliares. <p data-_____ data-zone=“logotipo”> ... Interessa a Então são dados Meh! Não... alguém para auxiliares... data-*! além de nós?
  • 68. Lição nº3 Aproveitarmulti-facetada! A sua utilidade é sempre os metadados 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); }
  • 69. Bookmarklet de debug
  • 70. Então e os dados quepodem interessar a outros?
  • 71. article aside audio canvas data datalist detailseventsource figcaption figure footer headermark meter nav progress section source timetrack videoa abbr acronym address applet area b base Então e os dados quebasefont podem interessar a outros? button bdo big blockquote body brcaption center cite code col colgroup dd deldfn dir div dl dt em fieldset font form frameframeset h1 h2 h3 h4 h5 h6 head hr html iiframe img input ins isindex kbd labellegend li link map menu meta noframesnoscript object ol optgroup option p parampre q s samp script select small span strikestrong style sub sup table tbody td textareatfoot th thead title tr tt u ul var
  • 72. Em janeiro de 2009...
  • 73. John Allsopp
  • 74. “We don’t need to addspecific terms to thevocabulary of HTML, weneed to add a mechanismthat allows semanticrichness to be added to adocument as required.”John Allsoppin http://www.alistapart.com/articles/semanticsinhtml5
  • 75. “Nósdon’tprecisamos de adicionar“We não need to addtermos específicos ao vocabuláriospecific terms to thedo HTML, nósHTML, we devocabulary of precisamosadicionar um mecanismo queneed to add a mechanismpermita quesemanticsemântica sejathat allows riquezaadicionada ao documentorichness to be added to aconforme seja precisa.”document as required.”John Allsoppin http://www.alistapart.com/articles/semanticsinhtml5
  • 76. mMICRODATA m
  • 77. No admirável mundo novo do HTML5! Microdata Mecanismo que permite embeber dados legíveis tes ibu por máquinas em attr documentos de HTML5. Fa n- F-i RD RD Extensível por natureza e um pouco mais simples que o RDFa. Pares chave = “valor”.
  • 78. Microdata: Passo-a-passoLição nº4 É fixar e pronto!
  • 79. Microdata: Passo-a-passo Lição nº4 É fixar e pronto!1 Demarcar o item com itemscope. <div itemscope> ...
  • 80. Microdata: Passo-a-passo Lição nº4 É fixar e pronto!1 Demarcar o item com itemscope.2 Declarar o tipo (URL) com itemtype. <div itemscope itemtype=“http://data-vocabulary.org/Person”> ...
  • 81. Microdata: Passo-a-passo Lição nº4 É fixar e pronto!1 Demarcar o item com itemscope.2 Declarar o tipo (URL) com itemtype.3 Identificar os valores de cada chave com itemprop. itemscope> ... <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>...
  • 82. No admirável mundo novo do HTML5!Microdatahttp://www.w3.org/TR/microdata/<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>
  • 83. Qualquer um pode criare estender um vocabulário...
  • 84. ...mas quais possoou devo usar?
  • 85. No admirável mundo novo do HTML5! Microdata: Quais usar? Livros, filmes, receitas, Prog. de TV, Eventos, Organizações, Pessoas, Lugares, etc. Google, Microsoft & Yahoo! lançaram o Schema.org http://schema.org/
  • 86. No admirável mundo novo do HTML5! Microdata: Quais usar? Livros, filmes, receitas, Prog. de TV, Eventos, Organizações, Pessoas, Lugares, etc. Google, Microsoft & Yahoo! lançaram o Schema.org http://schema.org/ Um ajudante para nos facilitar a vida... (pela empresa Sitening LLC) http://schema-creator.org/
  • 87. No admirável mundo novo do HTML5! Microdata: Quais usar? 1. Microdata 2. Microformatos 3. RDFa http://www.google.com/webmasters/tools/richsnippets
  • 88. No admirável mundo novo do HTML5! Microdata: Quais usar? 1. Microdata 2. Microformatos 3. RDFa http://www.google.com/webmasters/tools/richsnippets
  • 89. No admirável mundo novo do HTML5! Microdata: Quais usar?http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=146646 item pro p
  • 90. No admirável mundo novo do HTML5! Microdata: Quais usar?http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=146646
  • 91. Lição nº5 Escolher o formato ideal 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.
  • 92. Para finalizar...
  • 93. No admirável mundo novo do HTML5!semântica Microdata RDFa RDFa 1.1 microformatos dados documentos HTML dificuldade
  • 94. Obrigado.QUESTÕES?
  • 95. LIÇÕES PRÁTICASFIM DE SEMÂNTICA COM HTML5 Download PDF http://talks.andr3.net/2011/html5pt/semantics.pdf Download Keynote (mac) http://talks.andr3.net/2011/html5pt/semantics.key HTML5pt.org d 3 novembro 2011 André Luís c @andr3 andre-filipe-luis@telecom.pt b
  • 96. Créditos & TipografiaGotham American TypewriterGotham Rounded Chaparral ProGotham CondensedFundação Calouste-Gulbenkian (biblarte no Flickr)http://www.flickr.com/photos/biblarte/2709389469/C@ 2000-2011 All rights reserved to Berlin Wallpaper, Inc.http:/ /www.berlinwallpaper.com/PrissPrints/Jetsons-Giant-Wall-Decal.htmUsed excerpt without permission.Drew McLellan (drewm no Flickr)http://www.flickr.com/photos/drewm/4732738890/CKatie Harries (kharied no Flickr)http://www.flickr.com/photos/kharied/4177969736/C