Successfully reported this slideshow.
Your SlideShare is downloading. ×

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

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
HTML5
HTML5
Loading in …3
×

Check these out next

1 of 98 Ad
Advertisement

More Related Content

Slideshows for you (20)

Similar to Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT (20)

Advertisement

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

  1. 1. LIÇÕES PRÁTICAS DE SEMÂNTICA COM H T M L 55 HT L HTML5pt.org d 3 novembro 2011 André Luís c @andr3 andre-filipe-luis@telecom.pt b
  2. 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. 3. OH HAI! @andr3 http://id.andr3.net Departamento de Qualidade & Usabilidade do SAPO http://ux.sapo.pt
  4. 4. OH HAI!
  5. 5. OH HAI!
  6. 6. OH HAI! mais em http://slideshare.net/andr3 Atalho: http://33om.sl.pt
  7. 7. Agenda
  8. 8. Agenda 1 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. 9. Agenda Semântica
  10. 10. Agenda Semântica
  11. 11. Semântica: O que é & porque é importante?
  12. 12. Semântica: O que é & porque é importante? Semântica subst. fem. Estudo do significado das palavras.
  13. 13. Semântica: O que é & porque é importante? Web Semântica?
  14. 14. Semântica: O que é & porque é importante? Web Semântica? http://id.sapo.pt/andr3
  15. 15. Semântica: O que é & porque é importante? Web Semântica? http://id.sapo.pt/andr3
  16. 16. Semântica: O que é & porque é importante? Web Semântica? http://id.sapo.pt/andr3
  17. 17. Semântica: O que é & porque é importante? Web Semântica? http://id.sapo.pt/andr3 Uma pessoa!
  18. 18. Semântica: O que é & porque é importante? Web Semântica? http://id.sapo.pt/andr3 Uma pessoa!
  19. 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. 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. 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. 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. 23. Semântica: O que é & porque é importante? Web Semântica? http://id.sapo.pt/andr3 Uma pessoa! Try again...
  24. 24. Semântica: O que é & porque é importante? Web Semântica? 1x Pessoa! http://id.sapo.pt/andr3 Uma pessoa!
  25. 25. A web semântica nos tempos de antigamente?
  26. 26. A web semântica nos tempos de antigamente? HTML 4 XHTML 1.0
  27. 27. A web semântica nos tempos de antigamente? HTML 4 XHTML 1.0 Desenhados para documentos hipertexto.
  28. 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. 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
  30. 30. A web semântica nos tempos de antigamente? CIRCA 2004 index.html model.xml (RDF)
  31. 31. A web semântica nos tempos de antigamente? CIRCA 2004 index.html model.xml (RDF) CIRCA 2005 index.html
  32. 32. A web semântica nos tempos de antigamente? CIRCA 2004 index.html model.xml (RDF) CIRCA 2005 index.html
  33. 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. 34. A web semântica nos tempos de antigamente? http://microformats.org
  35. 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. 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. 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. 38. A web semântica nos tempos de antigamente? http://microformats.org 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.
  39. 39. A web semântica nos tempos de antigamente? RDFa RDF-in-attributes http://www.w3.org/TR/xhtml-rdfa-primer/
  40. 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. 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. 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. 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 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/
  44. 44. 88mph
  45. 45. Copyright © 2000-2011 Berlin Wallpaper, Inc. The Jetsons are ©, ® & ™ by Hanna-Barbera Productions, Inc.
  46. 46. No admirável mundo novo do HTML5! Copyright © 2000-2011 Berlin Wallpaper, Inc. The Jetsons are ©, ® & ™ by Hanna-Barbera Productions, Inc.
  47. 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. 48. Lição nº1 Elementosnomes! Chamar as coisas pelos estruturais
  49. 49. <section> Serve para agrupar conteúdo e elementos de um mesmo tema.
  50. 50. <article> Identifica porções de artigos independentes, items de conteúdo portável. Também deve ser aplicado em widgets.
  51. 51. <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>.
  52. 52. <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=“...”>.
  53. 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. 54. <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.
  55. 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. <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).
  56. 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 no seu contexto. footer pode até estar antes do <header>. <small> mudou de significado para “letra pequena” (contratos).
  57. 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 no seu contexto. footer pode até estar antes do <header>. <small> mudou de significado para “letra pequena” (contratos).
  58. 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 no Livro “HTML5 for Web Designers” do Jeremy Keith em versão HTML seu 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 & HTML5 pelo Anne & Simon Pieters: http://www.w3.org/TR/html5-diff/#new-elements
  59. 59. Lição nº2 Acesso com browsers antigos Compatibilidade universal Aplicar estilo a elementos novos: <section class=“noticias”></section>
  60. 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. 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. 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. 63. No admirável mundo novo do HTML5! Semântica no HTML5 Distinguir semântica de dados auxiliares. data-_____
  64. 64. No admirável mundo novo do HTML5! Semântica no HTML5 Distinguir semântica de dados auxiliares. <p data-_____ data-zone=“logotipo”> ...
  65. 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. 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. 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. 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. 69. Bookmarklet de debug
  70. 70. Então e os dados que podem interessar a outros?
  71. 71. 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 Então e os dados que basefont podem interessar a outros? button bdo big blockquote body br 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
  72. 72. Em janeiro de 2009...
  73. 73. John Allsopp
  74. 74. “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.” John Allsopp in http://www.alistapart.com/articles/semanticsinhtml5
  75. 75. “Nósdon’tprecisamos de adicionar “We não need to add termos específicos ao vocabulário specific terms to the do HTML, nósHTML, we de vocabulary of precisamos adicionar um mecanismo que need to add a mechanism permita quesemanticsemântica seja that allows riqueza adicionada ao documento richness to be added to a conforme seja precisa.” document as required.” John Allsopp in http://www.alistapart.com/articles/semanticsinhtml5
  76. 76. mMICRODATA m
  77. 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. 78. Microdata: Passo-a-passo Lição nº4 É fixar e pronto!
  79. 79. Microdata: Passo-a-passo Lição nº4 É fixar e pronto! 1 Demarcar o item com itemscope. <div itemscope> ...
  80. 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. 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. 82. No admirável mundo novo do HTML5! Microdata http://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. 83. Qualquer um pode criar e estender um vocabulário...
  84. 84. ...mas quais posso ou devo usar?
  85. 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. 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. 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. 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. 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. 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. 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. 92. Para finalizar...
  93. 93. No admirável mundo novo do HTML5! semântica Microdata RDFa RDFa 1.1 microformatos dados documentos HTML dificuldade
  94. 94. Obrigado. QUESTÕES?
  95. 95. LIÇÕES PRÁTICAS FIM 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. 96. Créditos & Tipografia Gotham American Typewriter Gotham Rounded Chaparral Pro Gotham Condensed Fundaçã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.htm Used excerpt without permission. Drew McLellan (drewm no Flickr) http://www.flickr.com/photos/drewm/4732738890/ C Katie Harries (kharied no Flickr) http://www.flickr.com/photos/kharied/4177969736/ C

×