microformatos
                     juntado as peças do puzzle
                                       Codebits / 13 Novembr...
microformatos juntando as peças do puzzle




                  Antes de mais...
microformatos juntando as peças do puzzle


Olá!
microformatos juntando as peças do puzzle


As minhas tags!


       CSS Javascript XHTML HTML PHP
        Microformatos O...
microformatos juntando as peças do puzzle
microformatos juntando as peças do puzzle




Dan Cederholm
http://simplebits.com
microformatos juntando as peças do puzzle




                     Introdução
                     Como usar?
            ...
microformatos juntando as peças do puzzle




                       Introdução
microformatos juntando as peças do puzzle                                                              Introdução




    ...
microformatos juntando as peças do puzzle   Introdução




                 Documentos




      bitzcelt
No principio, um...
microformatos juntando as peças do puzzle   Introdução




                                             Dados




        ...
microformatos juntando as peças do puzzle   Introdução




                                                 Dados




font...
microformatos juntando as peças do puzzle                   Introdução



    A evolução da Web
             1999
        ...
microformatos juntando as peças do puzzle                   Introdução



    A evolução da Web
             1999         ...
microformatos juntando as peças do puzzle                       Introdução




         “ Estão a ver todas aquelas coisas...
microformatos juntando as peças do puzzle                                 Introdução




        Semântica
        Estudo ...
microformatos juntando as peças do puzzle                            Introdução



        Web Semântica                  ...
microformatos juntando as peças do puzzle                            Introdução



        Web Semântica                  ...
microformatos juntando as peças do puzzle                                        Introdução



        Web Semântica      ...
microformatos juntando as peças do puzzle                                        Introdução



        Web Semântica      ...
microformatos juntando as peças do puzzle               Introdução



Linguagens

semântica
                              ...
microformatos juntando as peças do puzzle               Introdução


    Princípios

      1. Resolver um problema
      2...
microformatos juntando as peças do puzzle      Introdução



Que formatos existem?
Especificações (7)


     hCard        ...
microformatos juntando as peças do puzzle         Introdução



Que formatos existem?
“Drafts” (9)


     hAtom           ...
microformatos juntando as peças do puzzle   Introdução




                           “ Show! Me! The money!”
microformatos juntando as peças do puzzle   Introdução



    Antes


    <p>
    <a
    href=”http://andr3.net”>André Luí...
microformatos juntando as peças do puzzle         Introdução



           Depois


          <p class=”vcard”>
          ...
microformatos juntando as peças do puzzle                         Introdução


Imaginemos...


                           ...
microformatos juntando as peças do puzzle               Introdução


Imaginemos...



                                    ...
microformatos juntando as peças do puzzle                      Introdução


     Mais vantagens...
      Simplicidade
    ...
microformatos juntando as peças do puzzle                 Introdução


     Beneficiários?


            Páginas Públicas  ...
microformatos juntando as peças do puzzle   Introdução



                              Quem Publica?




                ...
microformatos juntando as peças do puzzle   Introdução




         searchmonkeyid:com.yahoo.uf.<format>
+MIL MILHOES
[ 36...
microformatos juntando as peças do puzzle   Introdução


       Números (21 de Outubro de 2008)




            1. hCard  ...
microformatos juntando as peças do puzzle   Introdução




         Utilizador: “Como é que eu uso isso?”
microformatos juntando as peças do puzzle




         Como usar?
    Como usar no dia-a-dia?
   Como usar nos nossos site...
microformatos juntando as peças do puzzle             Como usar?

Addon para Firefox: Operator
https://addons.mozilla.org/...
microformatos juntando as peças do puzzle                        Como usar?

Addon para Firefox: Operator
https://addons.m...
microformatos juntando as peças do puzzle                         Como usar?

Addon para Firefox: Operator
https://addons....
microformatos juntando as peças do puzzle             Como usar?

   Addon para Firefox: Operator
   https://addons.mozill...
microformatos juntando as peças do puzzle              Como usar?

Addon para Firefox: Operator
https://addons.mozilla.org...
microformatos juntando as peças do puzzle                        Como usar?

X2V (Brian Suda)
http://suda.co.uk/projects/X...
microformatos juntando as peças do puzzle                         Como usar?

X2V (Brian Suda)
http://suda.co.uk/projects/...
microformatos juntando as peças do puzzle                         Como usar?

X2V (Brian Suda)
http://suda.co.uk/projects/...
microformatos juntando as peças do puzzle                         Como usar?

X2V (Brian Suda)
http://suda.co.uk/projects/...
microformatos juntando as peças do puzzle                        Como usar?

X2V (Brian Suda)
http://suda.co.uk/projects/X...
microformatos juntando as peças do puzzle                                        Como usar?

    X2V (Brian Suda)
    http...
microformatos juntando as peças do puzzle         Como usar?


     Interligação de perfis

                               ...
microformatos juntando as peças do puzzle        Como usar?


     Interligação de perfis




               XFN Explorer
 ...
microformatos juntando as peças do puzzle     Como usar?


Portabilidade dos Dados




                                 do...
microformatos juntando as peças do puzzle           Como usar?


Portabilidade dos Dados

                                ...
microformatos juntando as peças do puzzle




                  Como publicar?
microformatos juntando as peças do puzzle              Como publicar?


                                         POSH
    ...
microformatos juntando as peças do puzzle        Como publicar?


    Design Patterns


                           rel    ...
microformatos juntando as peças do puzzle                                 Como publicar?


       Padrão class


         ...
microformatos juntando as peças do puzzle   Como publicar?


Padrão class



    <p class=”vcard”>
    <a class=”url fn”
 ...
microformatos juntando as peças do puzzle    Como publicar?


Padrão rel


 This attribute describes the relationship from...
microformatos juntando as peças do puzzle   Como publicar?


Padrão rel



    <p class=”vcard”>
    <a class=”fn url” rel...
microformatos juntando as peças do puzzle   Como publicar?


Padrão abbr


 The content of the ABBR and ACRONYM elements
 ...
microformatos juntando as peças do puzzle   Como publicar?


Padrão abbr

    <p class=”vcard”>
    <a class=”url” rel=”me...
microformatos juntando as peças do puzzle              Como publicar?


     Padrão datetime

         <p class=”vevent”><...
microformatos juntando as peças do puzzle                      Como publicar?


      Padrão datetime

           <abbr cl...
microformatos juntando as peças do puzzle                      Como publicar?


      Padrão datetime

           <abbr cl...
microformatos juntando as peças do puzzle                                 Como publicar?


                               ...
microformatos juntando as peças do puzzle                Como publicar?


     Atenção


      <div class=”vevent”>
      ...
microformatos juntando as peças do puzzle                Como publicar?


     Atenção


      <div class=”vevent”>
      ...
microformatos juntando as peças do puzzle   Como publicar?




         hCard
microformatos juntando as peças do puzzle                   Sujar as mãos


     Propriedades

     raíz:             obri...
microformatos juntando as peças do puzzle                 Sujar as mãos


     Exemplo


              <div class=quot;out...
microformatos juntando as peças do puzzle                 Sujar as mãos


     Exemplo


              <div class=quot;out...
microformatos juntando as peças do puzzle




                Como consumir?
microformatos juntando as peças do puzzle                                        Como consumir?




                      ...
microformatos juntando as peças do puzzle                                        Como consumir?


           Parsers/Scrap...
microformatos juntando as peças do puzzle                                        Como consumir?




              WS Optim...
microformatos juntando as peças do puzzle                                        Como consumir?




              WS Optim...
microformatos juntando as peças do puzzle                                        Como consumir?




              WS Optim...
microformatos juntando as peças do puzzle                                        Como consumir?




                      ...
microformatos juntando as peças do puzzle


     That’s all, Folks!

     Obrigado.

       <p class=”vcard”>
       <a cl...
microformatos juntando as peças do puzzle

Créditos
  Teia - http://www.flickr.com/photos/bitzcelt/2903751010/
  Tim Berne...
Upcoming SlideShare
Loading in...5
×

Microformatos - juntando as peças do puzzle

3,037

Published on

Apresentação dada no Codebits 2008. Focada no que são, como usá-los, como publicá-los e como os consumir... para permitir muitas hacks no concurso.

A presentation I gave at Codebits 2008, focused on what they are, how to use them, publish them and consume them... to enable hacking at the contest.

Published in: Technology
1 Comment
6 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,037
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
34
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

Microformatos - juntando as peças do puzzle

  1. 1. microformatos juntado as peças do puzzle Codebits / 13 Novembro 2008 creative commons André Luís attribution http://andr3.net non-commercial me@andr3.net share-alike 3.0 http://creativecommons.org/licenses/by-nc-sa/3.0/
  2. 2. microformatos juntando as peças do puzzle Antes de mais...
  3. 3. microformatos juntando as peças do puzzle Olá!
  4. 4. microformatos juntando as peças do puzzle As minhas tags! CSS Javascript XHTML HTML PHP Microformatos OpenID Mobile
  5. 5. microformatos juntando as peças do puzzle
  6. 6. microformatos juntando as peças do puzzle Dan Cederholm http://simplebits.com
  7. 7. microformatos juntando as peças do puzzle Introdução Como usar? Como publicar? Como consumir?
  8. 8. microformatos juntando as peças do puzzle Introdução
  9. 9. microformatos juntando as peças do puzzle Introdução World Wide Web pixelydixel TUDO COMEÇOU... “Em 6 de agosto de 1991, ele colocou um resumo[5] no newsgroup alt.hypertext. Essa data marca a estreia da Web como um serviço publicado na Internet.” TBL @ Campus Party Valencia 2008
  10. 10. microformatos juntando as peças do puzzle Introdução Documentos bitzcelt No principio, uma teia de documentos.
  11. 11. microformatos juntando as peças do puzzle Introdução Dados fonte: cnn.com
  12. 12. microformatos juntando as peças do puzzle Introdução Dados fonte: everyblock.com
  13. 13. microformatos juntando as peças do puzzle Introdução A evolução da Web 1999 RDF 2008 HTML (tabelas) Webstandards 1998 2003 Zeldman: Designing with webstandards POSH RDF: resource description framework STANDARDS EXISTEM HÁ MAIS TEMPO: html4(1999), xhtml1.0 (2000), css2.0(1998)
  14. 14. microformatos juntando as peças do puzzle Introdução A evolução da Web 1999 2005 RDF microformatos 2008 HTML (tabelas) Webstandards 1998 2003 Zeldman: Designing with webstandards POSH RDF: resource description framework STANDARDS EXISTEM HÁ MAIS TEMPO: html4(1999), xhtml1.0 (2000), css2.0(1998)
  15. 15. microformatos juntando as peças do puzzle Introdução “ Estão a ver todas aquelas coisas que vocês já têm nos vossos sites? Os microformatos apenas dizem aos computadores o que essas coisas na realidade são. ” por Toby Inkster http://microformats.org/wiki/what-are-microformats Toby Inkster, developer do Cognition
  16. 16. microformatos juntando as peças do puzzle Introdução Semântica Estudo da linguagem humana do ponto de vista do significado das palavras e dos enunciados; = humanos conseguem compreender a igualdade. computadores não conseguem... a menos que ajudemos. definição: estudo da linguagem humana do ponto de vista do significado das palavras e dos enunciados;
  17. 17. microformatos juntando as peças do puzzle Introdução Web Semântica vs. web semântica RDF microformatos DDL OWL, FOAF, etc. hcard, hcalendar, etc. RDF: circa 1999 G R 2005 2007 Gleaning Resource Descriptions from Dialects of Languages to glean: 1. To gather after a reaper; to collect in scattered or fragmentary parcels, as the grain left by a reaper 2. To gather from (a field or vineyard) what is left. 3. To collect with patient and minute labor; to pick out; to obtain.
  18. 18. microformatos juntando as peças do puzzle Introdução Web Semântica vs. web semântica infinitos namespaces RDF microformatos DDL OWL, FOAF, etc. hcard, hcalendar, etc. RDF: circa 1999 G R 2005 2007 Gleaning Resource Descriptions from Dialects of Languages to glean: 1. To gather after a reaper; to collect in scattered or fragmentary parcels, as the grain left by a reaper 2. To gather from (a field or vineyard) what is left. 3. To collect with patient and minute labor; to pick out; to obtain.
  19. 19. microformatos juntando as peças do puzzle Introdução Web Semântica vs. web semântica infinitos namespaces número de formatos: < 20 RDF microformatos DDL OWL, FOAF, etc. hcard, hcalendar, etc. RDF: circa 1999 G R 2005 2007 Gleaning Resource Descriptions from Dialects of Languages to glean: 1. To gather after a reaper; to collect in scattered or fragmentary parcels, as the grain left by a reaper 2. To gather from (a field or vineyard) what is left. 3. To collect with patient and minute labor; to pick out; to obtain.
  20. 20. microformatos juntando as peças do puzzle Introdução Web Semântica vs. web semântica infinitos namespaces número de formatos: < 20 RDF microformatos DDL OWL, FOAF, etc. hcard, hcalendar, etc. RDF: circa 1999 G R 2005 2007 Gleaning Resource Descriptions from Dialects of Languages to glean: 1. To gather after a reaper; to collect in scattered or fragmentary parcels, as the grain left by a reaper 2. To gather from (a field or vineyard) what is left. 3. To collect with patient and minute labor; to pick out; to obtain.
  21. 21. microformatos juntando as peças do puzzle Introdução Linguagens semântica RDF RDFa/eRDF xhtml* µf html&xhtml dados POSH documentos HTML complexidade
  22. 22. microformatos juntando as peças do puzzle Introdução Princípios 1. Resolver um problema 2. Partir do mais simples possível 3. Pensados primeiro para humanos e só depois para as máquinas 4. Reutilizar formatos amplamente adoptados 5. Modulares e para serem embebidos 6. Permitir e encorajar desenvolvimento, conteúdo e serviços descentralizados falar do “The Process”. -----------25%---------
  23. 23. microformatos juntando as peças do puzzle Introdução Que formatos existem? Especificações (7) hCard rel-tag VoteLinks hCalendar rel-license XFN rel-nofollow
  24. 24. microformatos juntando as peças do puzzle Introdução Que formatos existem? “Drafts” (9) hAtom rel-directory xfolk hResume rel-enclosure adr hReview rel-home geo hAudio rel-payment
  25. 25. microformatos juntando as peças do puzzle Introdução “ Show! Me! The money!”
  26. 26. microformatos juntando as peças do puzzle Introdução Antes <p> <a href=”http://andr3.net”>André Luís</a> </p>
  27. 27. microformatos juntando as peças do puzzle Introdução Depois <p class=”vcard”> <a class=”fn url” href=”http://andr3.net”>André Luís</a> </p> Já temos um hCard! More on this later. :)
  28. 28. microformatos juntando as peças do puzzle Introdução Imaginemos... Windows Contacts + 2 cliques Address Book http://www.blueflavor.com/people/keith-robinson/ Telefones
  29. 29. microformatos juntando as peças do puzzle Introdução Imaginemos... Outlook + 2 cliques iCal http://shift.pt/page/schedule/ Telefones
  30. 30. microformatos juntando as peças do puzzle Introdução Mais vantagens... Simplicidade DRY - Não duplicação Baixo esforço de implementação Portabilidade de conteúdos (dados) Aumento da utilidade dos serviços! Efeitos secundários Uniformização do HTML produzido entre projectos Permite uniformização visual (via folhas de estilo) SIMPLES é possível publicar sem ter conhecimentos de semântica (ontologias, namespaces, rdf, etc.) DRY
  31. 31. microformatos juntando as peças do puzzle Introdução Beneficiários? Páginas Públicas Páginas Privadas c/ login Utilizadores ou Visitantes Serviços Externos quem beneficia? Serviços Externos = APIs com fácil deployment
  32. 32. microformatos juntando as peças do puzzle Introdução Quem Publica? ...etc. SPOT (hcards), Blogs (tags)
  33. 33. microformatos juntando as peças do puzzle Introdução searchmonkeyid:com.yahoo.uf.<format> +MIL MILHOES [ 366, 277, 48, 53 ] milhoes
  34. 34. microformatos juntando as peças do puzzle Introdução Números (21 de Outubro de 2008) 1. hCard 1,390,000,000 páginas (!!!!!) 2. hAtom 366,000,000 páginas 3. XFN 277,000,000 páginas 4. hCalendar 48,900,000 páginas 5. hReview 53,900,000 páginas searchmonkeyid:com.yahoo.uf.<format> +MIL MILHOES [ 366, 277, 48, 53 ] milhoes
  35. 35. microformatos juntando as peças do puzzle Introdução Utilizador: “Como é que eu uso isso?”
  36. 36. microformatos juntando as peças do puzzle Como usar? Como usar no dia-a-dia? Como usar nos nossos sites?
  37. 37. microformatos juntando as peças do puzzle Como usar? Addon para Firefox: Operator https://addons.mozilla.org/en-US/firefox/addon/4106
  38. 38. microformatos juntando as peças do puzzle Como usar? Addon para Firefox: Operator https://addons.mozilla.org/en-US/firefox/addon/4106 Bookmarklet: Firefox, Opera, Safari, IE6, IE7 http://leftlogic.com/lounge/articles/microformats_bookmarklet/
  39. 39. microformatos juntando as peças do puzzle Como usar? Addon para Firefox: Operator https://addons.mozilla.org/en-US/firefox/addon/4106 Bookmarklet: Firefox, Opera, Safari, IE6, IE7 http://leftlogic.com/lounge/articles/microformats_bookmarklet/ Oomph! - Microformats toolkit (Microsoft/MIX online) http://visitmix.com/Lab/Oomph Plugin ie7+8 .js em jQuery Temas em css Windows Live Writer http://rhizohm.net/contact.html
  40. 40. microformatos juntando as peças do puzzle Como usar? Addon para Firefox: Operator https://addons.mozilla.org/en-US/firefox/addon/4106 Bookmarklet: Firefox, Opera, Safari, IE6, IE7 https://addons.mozilla.org/en-US/firefox/addon/4106 Oomph! - Microformats toolkit (Microsoft/MIX online) http://visitmix.com/Lab/Oomph IE8 - Webslices/hAtom http://microsoft.com/windows/internet-explorer/beta/ -----------50%---------
  41. 41. microformatos juntando as peças do puzzle Como usar? Addon para Firefox: Operator https://addons.mozilla.org/en-US/firefox/addon/4106 Bookmarklet: Firefox, Opera, Safari, IE6, IE7 https://addons.mozilla.org/en-US/firefox/addon/4106 Oomph! - Microformats toolkit (Microsoft/MIX online) http://visitmix.com/Lab/Oomph IE8 - Webslices/hAtom http://microsoft.com/windows/internet-explorer/beta/ Mas não só.
  42. 42. microformatos juntando as peças do puzzle Como usar? X2V (Brian Suda) http://suda.co.uk/projects/X2V/ link X2V http://suda.co.uk/projects/microformats/hcalendar/get-cal.php?uri=<endereço web>
  43. 43. microformatos juntando as peças do puzzle Como usar? X2V (Brian Suda) http://suda.co.uk/projects/X2V/ Magia tidy+xsl link X2V http://suda.co.uk/projects/microformats/hcalendar/get-cal.php?uri=<endereço web>
  44. 44. microformatos juntando as peças do puzzle Como usar? X2V (Brian Suda) http://suda.co.uk/projects/X2V/ Magia tidy+xsl link X2V iCal (.ics) http://suda.co.uk/projects/microformats/hcalendar/get-cal.php?uri=<endereço web>
  45. 45. microformatos juntando as peças do puzzle Como usar? X2V (Brian Suda) http://suda.co.uk/projects/X2V/ Magia tidy+xsl link X2V iCal (.ics) http://suda.co.uk/projects/microformats/hcalendar/get-cal.php?uri=<endereço web>
  46. 46. microformatos juntando as peças do puzzle Como usar? X2V (Brian Suda) http://suda.co.uk/projects/X2V/ Análogo para hCards. http://suda.co.uk/projects/microformats/hcard/get-contact.php?uri=<endereço web> hCard(s) vCards (.vcf)
  47. 47. microformatos juntando as peças do puzzle Como usar? X2V (Brian Suda) http://suda.co.uk/projects/X2V/ http://suda.co.uk/projects/microformats/hcalendar/get-cal.php?uri=http://shift.pt/page/schedule webcal://suda.co.uk/projects/microformats/... QR Code http://reader.kaywa.com Ajudamos o resto dos utilizadores com links para ficheiros transformados. Apenas se altera o HTML.
  48. 48. microformatos juntando as peças do puzzle Como usar? Interligação de perfis blog Google Social Graph API code.google.com/apis/socialgraph/ quem beneficia? Serviços Externos = APIs com fácil deployment
  49. 49. microformatos juntando as peças do puzzle Como usar? Interligação de perfis XFN Explorer http://workshop.andr3.net/xfnexplorer quem beneficia? Serviços Externos = APIs com fácil deployment
  50. 50. microformatos juntando as peças do puzzle Como usar? Portabilidade dos Dados dopplr.com
  51. 51. microformatos juntando as peças do puzzle Como usar? Portabilidade dos Dados 7 de Setembro de 2008 O Fim dos utilizadores tabula rasa? http://slideshare.net/andr3/
  52. 52. microformatos juntando as peças do puzzle Como publicar?
  53. 53. microformatos juntando as peças do puzzle Como publicar? POSH Plain Old Semantic HTML 1. Código Validado http://validator.w3.org 4. Remover links anorécticos <a name=”noticia”></a> 2. Deixar de usar tabelas por 5. Usar classes com valor motivos de apresentação, GIFs semântico transparentes e HTML de apresentação. 3. Corrigir <B>ed & <BR>eakfast
  54. 54. microformatos juntando as peças do puzzle Como publicar? Design Patterns rel abbr datetime class grdloizaga class - o mais usual rel - usando no xfn, rel-* abbr, que engloba o polémico datetime include, não vamos abordar
  55. 55. microformatos juntando as peças do puzzle Como publicar? Padrão class This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters. (HTML 4) Este atributo estipula um ou mais nomes para a classe de um elemento. A mesma classe pode exisitir em mais que um elemento e cada elemento pode ter mais do que uma classe, separadas por espaços.
  56. 56. microformatos juntando as peças do puzzle Como publicar? Padrão class <p class=”vcard”> <a class=”url fn” href=”http://andr3.net”>André Luís</a> </p>
  57. 57. microformatos juntando as peças do puzzle Como publicar? Padrão rel This attribute describes the relationship from the current document to the anchor specified by the href attribute. The value of this attribute is a space-separated list of link types. (HTML 4) <a> <link>
  58. 58. microformatos juntando as peças do puzzle Como publicar? Padrão rel <p class=”vcard”> <a class=”fn url” rel=”me” href=”http://andr3.net”>André Luís</a> </p>
  59. 59. microformatos juntando as peças do puzzle Como publicar? Padrão abbr The content of the ABBR and ACRONYM elements specifies the abbreviated expression itself, as it would normally appear in running text. The title attribute of these elements may be used to provide the full or expanded form of the expression. (HTML4)
  60. 60. microformatos juntando as peças do puzzle Como publicar? Padrão abbr <p class=”vcard”> <a class=”url” rel=”me” href=”http://andr3.net”> <abbr class=”fn” title=”André Luís”>André</abbr> </p>
  61. 61. microformatos juntando as peças do puzzle Como publicar? Padrão datetime <p class=”vevent”><span class=”fn”>SHiFT</span> <abbr class=”dtstart” title=”2008-10-15”>15 de Outubro </abbr> </p> data em formato ISO 8601 exemplos 2008-10-15 20081015 2008-10-15T10:00 2008-10-15T10:00+05 2008-10-15T10:00Z hatom, hcalendar, hcard e hreview overview: http://www.cl.cam.ac.uk/~mgk25/iso-time.html +5 => GMT+5 Z => Zero Meridian = UTC (Coordinated Universal Time/Temps Universel Coordonné)
  62. 62. microformatos juntando as peças do puzzle Como publicar? Padrão datetime <abbr class=”dtstart” title=”20070312T1700-06”>12 de Março de 2007, a partir das17h </abbr> 20 070 312 T 1700 - 06 “ Twenty million seventy-thousand three-hundred ” twelve tee seventeen-hundred dash zero six. Jaws 8 + IE 7 fonte: hAccessibility @ Webstandards.org http://www.webstandards.org/2007/04/27/haccessibility/ hatom, hcalendar, hcard e hreview (NÃO ESQUECER: click! para ouvir mp3) problema existe também no email type=”work” e duração do hAudio.
  63. 63. microformatos juntando as peças do puzzle Como publicar? Padrão datetime <abbr class=”dtstart” title=”20070312T1700-06”>12 de Março de 2007, a partir das17h </abbr> 20 070 312 T 1700 - 06 “ Twenty million seventy-thousand three-hundred ” twelve tee seventeen-hundred dash zero six. Jaws 8 + IE 7 fonte: hAccessibility @ Webstandards.org http://www.webstandards.org/2007/04/27/haccessibility/ hatom, hcalendar, hcard e hreview (NÃO ESQUECER: click! para ouvir mp3) problema existe também no email type=”work” e duração do hAudio.
  64. 64. microformatos juntando as peças do puzzle Como publicar? BBC http://www.bbc.co.uk/blogs/radiolabs/2008/06/removing_microformats_from_bbc.shtml
  65. 65. microformatos juntando as peças do puzzle Como publicar? Atenção <div class=”vevent”> <h3 class=”category”>Brasileira</h3> <h1> <a class=”summary” href=quot;/detalhe_evento.aspx?id=48568quot;> Adriana Calcanhotto - «Maré» </a></h1> <h2><a class=”location” href=quot;detalhe_local.aspx?id=146quot;> Coliseu do Porto</a></h2> <h3><abbr class=”dtstart” title=”2008-05-29”>29-05-2008</abbr> a <abbr class=”dtend” title=”2008-05-31”>30-05-2008</abbr></h3> </div> ! From SAPO Cultura dtend é exclusivo, isto é, o evento acaba imediatamente ANTES do dtend. Sem hora, assume 0:00.
  66. 66. microformatos juntando as peças do puzzle Como publicar? Atenção <div class=”vevent”> <h3 class=”category”>Brasileira</h3> <h1> <a class=”summary” href=quot;/detalhe_evento.aspx?id=48568quot;> Adriana Calcanhotto - «Maré» </a></h1> <h2><a class=”location” href=quot;detalhe_local.aspx?id=146quot;> Coliseu do Porto</a></h2> <h3><abbr class=”dtstart” title=”2008-05-29T21:00+01”>29-05-2008</abbr> a <abbr class=”dtend” title=”2008-05-30T21:00:+01”>30-05-2008</abbr></h3> </div>  From SAPO Cultura dtend é exclusivo, isto é, o evento acaba imediatamente ANTES do dtend. Sem hora, assume 0:00.
  67. 67. microformatos juntando as peças do puzzle Como publicar? hCard
  68. 68. microformatos juntando as peças do puzzle Sujar as mãos Propriedades raíz: obrigatórias facultativas vcard fn nickname title url role n* email org adr category geo note photo class logo key sound ... bday n (family-name, given-name, additional-name, honorific-prefix, honorific-suffix) * Ver n-optimization na wiki oficial. n pode ser deixado de fora. valor de fn for 2 palavras separadas por um espaço: - 1st word: given-name - last word: family-name - se 1st word acabar com “,”, então inverte.
  69. 69. microformatos juntando as peças do puzzle Sujar as mãos Exemplo <div class=quot;outLinequot;> <div class=quot;inBoxUtilizadorquot;> <div class=quot;topoUtilizadorquot;><strong>andr3</strong></div> <div class=quot;infoquot;> <div id=quot;infopicsquot;><a href=quot;perfilamigo.html?uid=75quot;> <img src=quot;http://social.imgs.sapo.pt/8a/0b/df/75/ pro_n733982142_189405_9522.jpgquot; border=quot;0quot; /> </a></div> ... from SAPO Spot
  70. 70. microformatos juntando as peças do puzzle Sujar as mãos Exemplo <div class=quot;outLine vcardquot;> <div class=quot;inBoxUtilizadorquot;> <div class=quot;topoUtilizador fn nicknamequot;><strong>andr3</strong></div> <div class=quot;infoquot;> <div id=quot;infopicsquot;><a class= quot;urlquot; href=quot;perfilamigo.html?uid=75quot;> <img class=quot;photoquot; src=quot;http://social.imgs.sapo.pt/8a/0b/df/75/ pro_n733982142_189405_9522.jpgquot; border=quot;0quot; /> </a></div> ... from SAPO Spot
  71. 71. microformatos juntando as peças do puzzle Como consumir?
  72. 72. microformatos juntando as peças do puzzle Como consumir? HTML Scraping? retornam objectos extraídos das páginas hkit - jan 2008 - hcard+xfn cognition - adr, geo, hatom, haudio, hcalendar, hcard, hrecipe, hresume, hreview, rel-enclosure, rel-license,rel-tag, xfn, xfolk, ... + RDFa, eRDF, GRDDL, RDF. Também html title meta e link tags, figure, doc outline of html5, xoxo, xhtml @role. Output em: turtle, rdf/xml, rdf/json, trix, vcard, jcard, icalendar, atom, kml, m3u, recipebook xml, Optimus: xml, json, json-p, rss. hcal, hentry, hreview, haudio, adr, xfn, rel-nofollow, rel-license, hcard, hresume, hlisting, xfolkentry, geo, votelinks, rel-tag
  73. 73. microformatos juntando as peças do puzzle Como consumir? Parsers/Scrapers Perl Cognition http://buzzword.org.uk/cognition/ Toby Inkster (adr, geo, hatom, haudio, hcalendar, hcard, hrecipe, hresume, hreview, measure, rel-enclosure, rel-license, rel-tag, species, xfn, xfolk) + RDFa, eRDF, GRDDL, RDF/XML... WS Optimus http://microformatique.com/optimus/ Dmitry Baranovskiy (hcard, hcalendar, hreview, hatom, hresume, xfolk, geo, adr, xfn, vote-links, hlisting, haudio, rel-nofollow, rel-license, rel-tag) Ruby mofo http://mofo.rubyforge.org/ Chris Wanstrath (hcard, hcalendar, hreview, hatom, hresume, geo, adr, xfn) retornam objectos extraídos das páginas hkit - jan 2008 - hcard+xfn cognition - adr, geo, hatom, haudio, hcalendar, hcard, hrecipe, hresume, hreview, rel-enclosure, rel-license,rel-tag, xfn, xfolk, ... + RDFa, eRDF, GRDDL, RDF. Também html title meta e link tags, figure, doc outline of html5, xoxo, xhtml @role. Output em: turtle, rdf/xml, rdf/json, trix, vcard, jcard, icalendar, atom, kml, m3u, recipebook xml, Optimus: xml, json, json-p, rss. hcal, hentry, hreview, haudio, adr, xfn, rel-nofollow, rel-license, hcard, hresume, hlisting, xfolkentry, geo, votelinks, rel-tag
  74. 74. microformatos juntando as peças do puzzle Como consumir? WS Optimus http://microformatique.com/optimus/ Dmitry Baranovskiy (hcard, hcalendar, hreview, hatom, hresume, xfolk, geo, adr, xfn, vote-links, hlisting, haudio, rel-nofollow, rel-license, rel-tag) retornam objectos extraídos das páginas hkit - jan 2008 - hcard+xfn cognition - adr, geo, hatom, haudio, hcalendar, hcard, hrecipe, hresume, hreview, rel-enclosure, rel-license,rel-tag, xfn, xfolk, ... + RDFa, eRDF, GRDDL, RDF. Também html title meta e link tags, figure, doc outline of html5, xoxo, xhtml @role. Output em: turtle, rdf/xml, rdf/json, trix, vcard, jcard, icalendar, atom, kml, m3u, recipebook xml, Optimus: xml, json, json-p, rss. hcal, hentry, hreview, haudio, adr, xfn, rel-nofollow, rel-license, hcard, hresume, hlisting, xfolkentry, geo, votelinks, rel-tag
  75. 75. microformatos juntando as peças do puzzle Como consumir? WS Optimus http://microformatique.com/optimus/ Dmitry Baranovskiy (hcard, hcalendar, hreview, hatom, hresume, xfolk, geo, adr, xfn, vote-links, hlisting, haudio, rel-nofollow, rel-license, rel-tag) retornam objectos extraídos das páginas hkit - jan 2008 - hcard+xfn cognition - adr, geo, hatom, haudio, hcalendar, hcard, hrecipe, hresume, hreview, rel-enclosure, rel-license,rel-tag, xfn, xfolk, ... + RDFa, eRDF, GRDDL, RDF. Também html title meta e link tags, figure, doc outline of html5, xoxo, xhtml @role. Output em: turtle, rdf/xml, rdf/json, trix, vcard, jcard, icalendar, atom, kml, m3u, recipebook xml, Optimus: xml, json, json-p, rss. hcal, hentry, hreview, haudio, adr, xfn, rel-nofollow, rel-license, hcard, hresume, hlisting, xfolkentry, geo, votelinks, rel-tag
  76. 76. microformatos juntando as peças do puzzle Como consumir? WS Optimus http://microformatique.com/optimus/ Dmitry Baranovskiy (hcard, hcalendar, hreview, hatom, hresume, xfolk, geo, adr, xfn, vote-links, hlisting, haudio, rel-nofollow, rel-license, rel-tag) retornam objectos extraídos das páginas hkit - jan 2008 - hcard+xfn cognition - adr, geo, hatom, haudio, hcalendar, hcard, hrecipe, hresume, hreview, rel-enclosure, rel-license,rel-tag, xfn, xfolk, ... + RDFa, eRDF, GRDDL, RDF. Também html title meta e link tags, figure, doc outline of html5, xoxo, xhtml @role. Output em: turtle, rdf/xml, rdf/json, trix, vcard, jcard, icalendar, atom, kml, m3u, recipebook xml, Optimus: xml, json, json-p, rss. hcal, hentry, hreview, haudio, adr, xfn, rel-nofollow, rel-license, hcard, hresume, hlisting, xfolkentry, geo, votelinks, rel-tag
  77. 77. microformatos juntando as peças do puzzle Como consumir? Got Cache? http://workshop.andr3.net/cache/?url=<target-url> http://workshop.andr3.net/cache/?url=<target-url>&ttl=<time-to-live> http://workshop.andr3.net/ufs/ http://workshop.andr3.net/ufs/?uri=http%3A%2F%2Fworkshop.andr3.net%2Fcache%2F%3Furl %3Dhttp%3A%2F%2Ftwitter.com%2Fandr3%26ttl%3D60&format=json&function=&filter=xfn retornam objectos extraídos das páginas hkit - jan 2008 - hcard+xfn cognition - adr, geo, hatom, haudio, hcalendar, hcard, hrecipe, hresume, hreview, rel-enclosure, rel-license,rel-tag, xfn, xfolk, ... + RDFa, eRDF, GRDDL, RDF. Também html title meta e link tags, figure, doc outline of html5, xoxo, xhtml @role. Output em: turtle, rdf/xml, rdf/json, trix, vcard, jcard, icalendar, atom, kml, m3u, recipebook xml, Optimus: xml, json, json-p, rss. hcal, hentry, hreview, haudio, adr, xfn, rel-nofollow, rel-license, hcard, hresume, hlisting, xfolkentry, geo, votelinks, rel-tag
  78. 78. microformatos juntando as peças do puzzle That’s all, Folks! Obrigado. <p class=”vcard”> <a class=”fn url” href=”http://andr3.net”>André Luís</a> <a class=”email” href=”mailto:me@andr3.net”> me@andr3.net</a> </p> http://microformats.org/wiki/ http://talks.andr3.net/2008/ufs_codebits.pdf creative commons http://slideshare.net/andr3 attribution non-commercial share-alike 3.0 http://creativecommons.org/licenses/by-nc-sa/2.5/pt/
  79. 79. microformatos juntando as peças do puzzle Créditos Teia - http://www.flickr.com/photos/bitzcelt/2903751010/ Tim Berners-Lee - http://www.flickr.com/photos/pixelydixel/2712988953/ Lego - http://flickr.com/photos/grdloizaga/817443503/ Calendário - http://flickr.com/photos/pyrii/2400515074/ Etiqueta - http://flickr.com/photos/peskymac/1217139213/
  1. A particular slide catching your eye?

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

×