LIÇÕES PRÁTICAS                         DESEMÂNTICA                        COMH T M L 55HT    LHTML5pt.org                ...
OH HAI!   @andr3                        http://id.andr3.net   me@andr3.net   andre-filipe-luis@telecom.pt   andr3.net   dai...
OH HAI!   @andr3                    http://id.andr3.net   Departamento de   Qualidade & Usabilidade   do SAPO   http://ux....
OH HAI!
OH HAI!
OH HAI!          mais em http://slideshare.net/andr3          Atalho: http://33om.sl.pt
Agenda
Agenda1   Semântica: O que é e porque é    importante?2   A web semântica nos tempos    de “antigamente”3   No admirável m...
AgendaSemântica
AgendaSemântica
Semântica:O que é & porque é importante?
Semântica: O que é & porque é importante? Semântica subst. fem. Estudo do significado das palavras.
Semântica: O que é & porque é importante? Web Semântica?
Semântica: O que é & porque é importante? Web Semântica?                  http://id.sapo.pt/andr3
Semântica: O que é & porque é importante? Web Semântica?                  http://id.sapo.pt/andr3
Semântica: O que é & porque é importante? Web Semântica?                  http://id.sapo.pt/andr3
Semântica: O que é & porque é importante?    Web Semântica?                    http://id.sapo.pt/andr3Uma pessoa!
Semântica: O que é & porque é importante?    Web Semântica?                    http://id.sapo.pt/andr3Uma pessoa!
Semântica: O que é & porque é importante?    Web Semântica?                                              1x <div>,        ...
Semântica: O que é & porque é importante?    Web Semântica?                                              1x <div>,        ...
Semântica: O que é & porque é importante?    Web Semântica?                                              1x <div>,        ...
Semântica: O que é & porque é importante?    Web Semântica?                                              1x <div>,        ...
Semântica: O que é & porque é importante?    Web Semântica?                    http://id.sapo.pt/andr3Uma pessoa!         ...
Semântica: O que é & porque é importante?    Web Semântica?                                              1x Pessoa!       ...
A web semântica nostempos de antigamente?
A web semântica nos tempos de antigamente?HTML 4                        XHTML 1.0
A web semântica nos tempos de antigamente?HTML 4                        XHTML 1.0Desenhados para documentos hipertexto.
A web semântica nos tempos de antigamente?   HTML 4                        XHTML 1.0   Desenhados para documentos hipertex...
A web semântica nos tempos de antigamente?   HTML 4                        XHTML 1.0   Desenhados para documentos hipertex...
A web semântica nos tempos de antigamente?                  CIRCA     2004               index.html                       ...
A web semântica nos tempos de antigamente?                  CIRCA     2004               index.html                       ...
A web semântica nos tempos de antigamente?                  CIRCA     2004               index.html                       ...
A web semântica nos tempos de antigamente?                  CIRCA     2004               index.html                       ...
A web semântica nos tempos de antigamente?      http://microformats.org
A web semântica nos tempos de antigamente?      http://microformats.org<div>  <h1>André Luís</h1>  <p>Lisboa, Portugal</p>...
A web semântica nos tempos de antigamente?      http://microformats.org<div class=“vcard”>  <h1 class=“fn”>André Luís</h1>...
A web semântica nos tempos de antigamente?      http://microformats.org<div class=“vcard”>  <h1 class=“fn”>André Luís</h1>...
A web semântica nos tempos de antigamente?      http://microformats.orgNúmero de formatos limitado, são criadospela comuni...
A web semântica nos tempos de antigamente?     RDFa     RDF-in-attributes     http://www.w3.org/TR/xhtml-rdfa-primer/
A web semântica nos tempos de antigamente?        RDFa        RDF-in-attributes        http://www.w3.org/TR/xhtml-rdfa-pri...
A web semântica nos tempos de antigamente?     RDFa     RDF-in-attributes     http://www.w3.org/TR/xhtml-rdfa-primer/<div ...
A web semântica nos tempos de antigamente?     RDFa     RDF-in-attributes     http://www.w3.org/TR/xhtml-rdfa-primer/<div ...
A web semântica nos tempos de antigamente?      RDFa      RDF-in-attributes      http://www.w3.org/TR/xhtml-rdfa-primer/In...
88mph
Copyright © 2000-2011 Berlin Wallpaper, Inc.   The Jetsons are ©, ® & ™ by Hanna-Barbera Productions, Inc.
No admirável                            mundo novo do HTML5!Copyright © 2000-2011 Berlin Wallpaper, Inc.   The Jetsons are...
No admirável mundo novo do HTML5! Semântica no HTML5 Novos elementos estruturais     article    aside    audio     canvas ...
Lição nº1   Elementosnomes!            Chamar as coisas pelos                                   estruturais
<section>Serve paraagruparconteúdo eelementos deum mesmotema.
<article>Identificaporções deartigosindependentes,items deconteúdoportável.Também deveser aplicado emwidgets.
<nav>Demarcainformação denavegação.Listas de linkspara secções deconteúdoimportante sãoclaros membrosde uma <nav>.Nem toda...
<time> vs. <data>Esta semana oIan Hicksonmudou aespecificação eremoveu oelemento <time>e o atributo@pubdate nos<article>.I...
<time> vs. <data>                                        Esta semana o                                        Ian Hickson<...
<aside>, <figure>Conteúdo à parte do principal. Notas, referências, conteúdorelacionado são bons candidatos.<figure> aplica...
<aside>, <figure>Conteúdo à parte do principal. Notas, referências, conteúdorelacionado são bons candidatos.<figure> aplica...
<mark>, <b>, <i>, <u>, <s>Elementos de UI sem qualquer valor semântico.mark: keyword pesquisa. b: negrito. i: voz alternat...
<mark>, <b>, <i>, <u>, <s>Elementos de UI sem qualquer valor semântico.mark: keyword pesquisa. b: negrito. i: voz alternat...
<mark>, <b>, <i>, <u>, <s>Elementos de UI sem qualquer valor semântico.mark: keyword pesquisa. b: negrito. i: voz alternat...
Lição nº2   Acesso com browsers antigos            Compatibilidade                            universal            Aplicar...
Lição nº2   Acesso com browsers antigos                          Compatibilidade                                          ...
Lição nº2   Acesso com browsers antigos                          Compatibilidade                                          ...
Lição nº2   Acesso com browsers antigos                          Compatibilidade                                          ...
No admirável mundo novo do HTML5! Semântica no HTML5 Distinguir semântica de dados auxiliares.               data-_____
No admirável mundo novo do HTML5! Semântica no HTML5 Distinguir semântica de dados auxiliares.            <p data-_____   ...
No admirável mundo novo do HTML5! Semântica no HTML5 Distinguir semântica de dados auxiliares.              <p data-_____ ...
No admirável mundo novo do HTML5! Semântica no HTML5 Distinguir semântica de dados auxiliares.              <p data-_____ ...
No admirável mundo novo do HTML5! Semântica no HTML5 Distinguir semântica de dados auxiliares.                <p data-____...
Lição nº3   Aproveitarmulti-facetada!            A sua utilidade é sempre                                     os metadados...
Bookmarklet de debug
Então e os dados quepodem interessar a outros?
article aside audio canvas data datalist detailseventsource figcaption figure footer headermark meter nav progress section...
Em janeiro de 2009...
John Allsopp
“We don’t need to addspecific terms to thevocabulary of HTML, weneed to add a mechanismthat allows semanticrichness to be ...
“Nósdon’tprecisamos de adicionar“We não need to addtermos específicos ao vocabuláriospecific terms to thedo HTML, nósHTML,...
mMICRODATA         m
No admirável mundo novo do HTML5! Microdata Mecanismo que permite embeber dados legíveis                                  ...
Microdata: Passo-a-passoLição nº4   É fixar e pronto!
Microdata: Passo-a-passo              Lição nº4   É fixar e pronto!1 Demarcar o item com itemscope.  <div itemscope> ...
Microdata: Passo-a-passo              Lição nº4   É fixar e pronto!1 Demarcar o item com itemscope.2 Declarar o tipo (URL)...
Microdata: Passo-a-passo              Lição nº4   É fixar e pronto!1 Demarcar o item com itemscope.2 Declarar o tipo (URL)...
No admirável mundo novo do HTML5!Microdatahttp://www.w3.org/TR/microdata/<div itemscope      itemtype=“http://data-vocabul...
Qualquer um pode criare estender um vocabulário...
...mas quais possoou devo usar?
No admirável mundo novo do HTML5! Microdata: Quais usar?                                                    Livros, filmes...
No admirável mundo novo do HTML5! Microdata: Quais usar?                                                      Livros, film...
No admirável mundo novo do HTML5! Microdata: Quais usar?                                                   1. Microdata   ...
No admirável mundo novo do HTML5! Microdata: Quais usar?                                                   1. Microdata   ...
No admirável mundo novo do HTML5!     Microdata: Quais usar?http://www.google.com/support/webmasters/bin/answer.py?hl=en&a...
No admirável mundo novo do HTML5!     Microdata: Quais usar?http://www.google.com/support/webmasters/bin/answer.py?hl=en&a...
Lição nº5   Escolher o formato ideal            Purismo fica à porta.            Microdata vs microformatos vs RDFa       ...
Para finalizar...
No admirável mundo novo do HTML5!semântica           Microdata                                RDFa       RDFa             ...
Obrigado.QUESTÕES?
LIÇÕES PRÁTICASFIM                            DE                    SEMÂNTICA                              COM            ...
Créditos & TipografiaGotham                        American TypewriterGotham Rounded                Chaparral ProGotham Co...
Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT
Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT
Upcoming SlideShare
Loading in...5
×

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

2,023

Published on

Apresentado no 2o evento da comunidade HTML5pt.org

0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,023
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
64
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide

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

  1. 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. 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. 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. 9. AgendaSemântica
  10. 10. AgendaSemâ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/andr3Uma pessoa!
  18. 18. Semântica: O que é & porque é importante? Web Semântica? http://id.sapo.pt/andr3Uma 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/andr3Uma pessoa! Try again...
  24. 24. Semântica: O que é & porque é importante? Web Semântica? 1x Pessoa! http://id.sapo.pt/andr3Uma pessoa!
  25. 25. A web semântica nostempos 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.0Desenhados 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 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. 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. 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.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. 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 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. 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 paraagruparconteúdo eelementos deum mesmotema.
  50. 50. <article>Identificaporções deartigosindependentes,items deconteúdoportável.Também deveser aplicado emwidgets.
  51. 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. 52. <time> vs. <data>Esta semana oIan Hicksonmudou aespecificação eremoveu oelemento <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ú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. 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. 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. 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. 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. 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 quepodem interessar a outros?
  71. 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. 72. Em janeiro de 2009...
  73. 73. John Allsopp
  74. 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. 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. 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-passoLiçã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!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. 83. Qualquer um pode criare estender um vocabulário...
  84. 84. ...mas quais possoou 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Á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. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×