Your SlideShare is downloading. ×
0
SAPO Sessions3 Junho 2009



                          microformatos
                          juntando as peças do puzzle...
microformatos juntando as peças do puzzle




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle




Dan Cederholm
http://simplebits.com
Wednesday, June 3, 2009
microformatos juntando as peças do puzzle




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




                                  Introdução




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle   Introdução




                 World Wide Web




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




                          Documentos




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




                                                       Dados


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




                                                       Dados


...
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
                          199...
microformatos juntando as peças do puzzle                    Introdução




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




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



            Web Semântica                 vs.        ...
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 pr...
microformatos juntando as peças do puzzle      Introdução



          Que formatos existem?
         Especificações (7)

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



          Que formatos existem?
         “Drafts” (9)


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




                                    “ Show! Me! The money!”

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



                  Antes


                  <p>
                ...
microformatos juntando as peças do puzzle        Introdução



                  Depois


                  <p class=”vcar...
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á...
microformatos juntando as peças do puzzle   Introdução



                                  Quem Publica?




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



                                  Quem Consome?




Wednesday, J...
microformatos juntando as peças do puzzle   Introdução




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle       Introdução


              Números (3 de Junho de 2009)




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


              E mais... RDFa




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle   Introdução


          Google Rich Snippets




           http://whit.me/goog...
microformatos juntando as peças do puzzle                  Introdução


          Google Rich Snippets                    ...
microformatos juntando as peças do puzzle                     Introdução


          Google Rich Snippets




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


          Google Rich Snippets




           http://whit.me/goog...
microformatos juntando as peças do puzzle         Introdução




                          Utilizador: “Como é que eu uso ...
microformatos juntando as peças do puzzle




                           Como usar?
                     Como usar no dia-...
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
       htt...
microformatos juntando as peças do puzzle                       Como usar?

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

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

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

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

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

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

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

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

        X2V (Brian Suda)
   ...
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




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


          Consolidação de perfis




             Identify (by Gl...
microformatos juntando as peças do puzzle     Como usar?


          Portabilidade dos Dados




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


          Recuperação de Dados (Funny story...)




 http://...
microformatos juntando as peças do puzzle         Como usar?


          Portabilidade dos Dados

                        ...
microformatos juntando as peças do puzzle




                            Como publicar?




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle             Como publicar?


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


          Design Patterns


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


          Padrão class


             This attribute assigns ...
microformatos juntando as peças do puzzle   Como publicar?


          Padrão class



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


          Padrão rel


             This attribute describe...
microformatos juntando as peças do puzzle   Como publicar?


          Padrão rel



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


          Padrão abbr


             The content of the ABB...
microformatos juntando as peças do puzzle   Como publicar?


          Padrão abbr

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


          Padrão datetime

                  <p class=”v...
microformatos juntando as peças do puzzle           Como publicar?
            <div class=”vevent”>
            
   <h3 cl...
microformatos juntando as peças do puzzle          Como publicar?
            <div class=”vevent”>
            
   <h3 cla...
microformatos juntando as peças do puzzle                 Como publicar?


          Padrão datetime

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


          Padrão datetime

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


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


          Padrão value class                            (expe...
microformatos juntando as peças do puzzle   Como publicar?


          Padrão value class                            (expe...
microformatos juntando as peças do puzzle   Como publicar?


          Padrão value class                            (expe...
microformatos juntando as peças do puzzle   Como publicar?




                          hCard


Wednesday, June 3, 2009
microformatos juntando as peças do puzzle              Sujar as mãos


          Propriedades

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


          Exemplo


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


          Exemplo


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




                      hCalendar

            pyrii
Wednesday, ...
microformatos pequenas peças do puzzle          Sujar as mãos


          Propriedades

          raíz:               obri...
microformatos pequenas peças do puzzle   Como publicar?




                          rel-tag

            peskymac
Wednes...
microformatos pequenas peças do puzzle      Sujar as mãos




                                 links para “tags”




Wedne...
microformatos pequenas peças do puzzle   Sujar as mãos



           Exemplo



         <a href=”/tag/microformatos”>
   ...
microformatos pequenas peças do puzzle   Sujar as mãos



           Exemplo



         <a rel=”tag” href=”/tag/microform...
microformatos pequenas peças do puzzle     Como publicar?



           Exemplo



         <a rel=”tag” href=”/tag/microf...
microformatos pequenas peças do puzzle   Sujar as mãos



           Exemplo




         /tag/microformatos?tag=banana#sp...
microformatos juntando as peças do puzzle




                           Como consumir?




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle   Como consumir?




                                 HTML Scraping?




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


              Parsers/Scrapers

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


              Parsers/Scrapers

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




                  WS Optimus http:/...
microformatos juntando as peças do puzzle                           Como consumir?




                  WS Optimus http:/...
microformatos juntando as peças do puzzle                           Como consumir?




                  WS Optimus http:/...
microformatos pequenas peças do puzzle           Sujar as mãos


              Transformadores



                  hCard+...
microformatos juntando as peças do puzzle


          That’s all, Folks!

         Obrigado.

               <p class=”vca...
microformatos juntando as peças do puzzle

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

Microformatos - 2009 - Juntando as Peças do Puzzle

5,712

Published on

Apresentação introdutória sobre Microformatos na SAPO Sessions de 4 de Junho de 2009.

Baseada na apresentação feita no Codebits, actualizada com exemplos e novidades. (novas ferramentas, novos design-patterns, etc.)

Transcript of "Microformatos - 2009 - Juntando as Peças do Puzzle"

  1. 1. SAPO Sessions3 Junho 2009 microformatos juntando as peças do puzzle creative commons André Luís attribution http://andr3.net non-commercial aluis@co.sapo.pt share-alike 3.0 Wednesday, June 3, 2009
  2. 2. microformatos juntando as peças do puzzle Wednesday, June 3, 2009
  3. 3. microformatos juntando as peças do puzzle Dan Cederholm http://simplebits.com Wednesday, June 3, 2009
  4. 4. microformatos juntando as peças do puzzle Introdução Como usar? Como publicar? Como consumir? Wednesday, June 3, 2009
  5. 5. microformatos juntando as peças do puzzle Introdução Wednesday, June 3, 2009
  6. 6. microformatos juntando as peças do puzzle Introdução World Wide Web pixelydixel Wednesday, June 3, 2009
  7. 7. microformatos juntando as peças do puzzle Introdução Documentos bitzcelt Wednesday, June 3, 2009
  8. 8. microformatos juntando as peças do puzzle Introdução Dados fonte: cnn.com Wednesday, June 3, 2009
  9. 9. microformatos juntando as peças do puzzle Introdução Dados fonte: everyblock.com Wednesday, June 3, 2009
  10. 10. microformatos juntando as peças do puzzle Introdução A evolução da Web 1999 RDF 2008 HTML (tabelas) Webstandards 1998 2003 Wednesday, June 3, 2009
  11. 11. microformatos juntando as peças do puzzle Introdução A evolução da Web 1999 2005 RDF microformatos 2008 HTML (tabelas) Webstandards 1998 2003 Wednesday, June 3, 2009
  12. 12. 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 Wednesday, June 3, 2009
  13. 13. 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; = Wednesday, June 3, 2009
  14. 14. 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 Wednesday, June 3, 2009
  15. 15. 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 GR 2005 2007 Wednesday, June 3, 2009
  16. 16. 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 GR 2005 2007 Wednesday, June 3, 2009
  17. 17. 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 GR 2005 2007 Wednesday, June 3, 2009
  18. 18. microformatos juntando as peças do puzzle Introdução Linguagens semântica RDF RDFa/eRDF xhtml* µf html&xhtml dados POSH documentos HTML complexidade Wednesday, June 3, 2009
  19. 19. 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 Wednesday, June 3, 2009
  20. 20. 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 Wednesday, June 3, 2009
  21. 21. 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 Wednesday, June 3, 2009
  22. 22. microformatos juntando as peças do puzzle Introdução “ Show! Me! The money!” Wednesday, June 3, 2009
  23. 23. microformatos juntando as peças do puzzle Introdução Antes <p> <a href=”http://andr3.net”>André Luís</a> </p> Wednesday, June 3, 2009
  24. 24. 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 cartão de visita! (hcard) Wednesday, June 3, 2009
  25. 25. microformatos juntando as peças do puzzle Introdução Imaginemos... Windows Contacts + 2 cliques Address Book http://www.blueflavor.com/people/keith-robinson/ Telefones Wednesday, June 3, 2009
  26. 26. microformatos juntando as peças do puzzle Introdução Imaginemos... Outlook + 2 cliques iCal http://shift.pt/page/schedule/ Telefones Wednesday, June 3, 2009
  27. 27. 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) Wednesday, June 3, 2009
  28. 28. 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 Wednesday, June 3, 2009
  29. 29. microformatos juntando as peças do puzzle Introdução Quem Publica? ...etc. Wednesday, June 3, 2009
  30. 30. microformatos juntando as peças do puzzle Introdução Quem Consome? Wednesday, June 3, 2009
  31. 31. microformatos juntando as peças do puzzle Introdução Wednesday, June 3, 2009
  32. 32. microformatos juntando as peças do puzzle Introdução Números (3 de Junho de 2009) 1. hCard 1,390,000,000 páginas (!!!!!) 2. hAtom 614,000,000 páginas 3. XFN 398,000,000 páginas 4. hCalendar 72,100,000 páginas 5. hReview 36,400,000 páginas searchmonkeyid:com.yahoo.page.uf.<format> Wednesday, June 3, 2009
  33. 33. microformatos juntando as peças do puzzle Introdução E mais... RDFa Wednesday, June 3, 2009
  34. 34. microformatos juntando as peças do puzzle Introdução Google Rich Snippets http://whit.me/googleufs Wednesday, June 3, 2009
  35. 35. microformatos juntando as peças do puzzle Introdução Google Rich Snippets HE RE BE DR AG ONS http://whit.me/googleufs ! Wednesday, June 3, 2009
  36. 36. microformatos juntando as peças do puzzle Introdução Google Rich Snippets http://whit.me/googleufs Rich Snippets give users convenient summary information about their search results at a glance. We are currently supporting data about reviews and people. When searching for a product or service, users can easily see reviews and ratings, and when searching for a person, they’ll get help distinguishing between people with the same name. It’s a simple change to the display of search results, yet our experiments have shown that users find the new data valuable—if they see useful and relevant information from the page, they are more likely to click through. Wednesday, June 3, 2009
  37. 37. microformatos juntando as peças do puzzle Introdução Google Rich Snippets http://whit.me/googleufs + RDFa Wednesday, June 3, 2009
  38. 38. microformatos juntando as peças do puzzle Introdução Utilizador: “Como é que eu uso isso?” Wednesday, June 3, 2009
  39. 39. microformatos juntando as peças do puzzle Como usar? Como usar no dia-a-dia? Como usar nos nossos sites? Wednesday, June 3, 2009
  40. 40. microformatos juntando as peças do puzzle Como usar? Addon para Firefox: Operator https://addons.mozilla.org/en-US/firefox/addon/4106 Wednesday, June 3, 2009
  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 http://leftlogic.com/lounge/articles/microformats_bookmarklet/ Wednesday, June 3, 2009
  42. 42. 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 Wednesday, June 3, 2009
  43. 43. 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/ Wednesday, June 3, 2009
  44. 44. 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ó. Wednesday, June 3, 2009
  45. 45. 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> Wednesday, June 3, 2009
  46. 46. 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> Wednesday, June 3, 2009
  47. 47. 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> Wednesday, June 3, 2009
  48. 48. 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> Wednesday, June 3, 2009
  49. 49. 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) Wednesday, June 3, 2009
  50. 50. 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 Wednesday, June 3, 2009
  51. 51. microformatos juntando as peças do puzzle Como usar? Interligação de perfis blog Google Social Graph API code.google.com/apis/socialgraph/ Wednesday, June 3, 2009
  52. 52. microformatos juntando as peças do puzzle Como usar? Interligação de perfis XFN Explorer http://workshop.andr3.net/xfnexplorer Wednesday, June 3, 2009
  53. 53. microformatos juntando as peças do puzzle Como usar? Consolidação de perfis Identify (by Glenn Jones) http://lab.madgex.com/identify Wednesday, June 3, 2009
  54. 54. microformatos juntando as peças do puzzle Como usar? Portabilidade dos Dados dopplr.com Wednesday, June 3, 2009
  55. 55. microformatos juntando as peças do puzzle Como usar? Recuperação de Dados (Funny story...) http://workshop.andr3.net/de.fibrillator/ 1. Google Feeds Archive 2. Microformatos (xfolk) bookmarks.html RSS JSON Wednesday, June 3, 2009
  56. 56. 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/ Wednesday, June 3, 2009
  57. 57. microformatos juntando as peças do puzzle Como publicar? Wednesday, June 3, 2009
  58. 58. 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 Wednesday, June 3, 2009
  59. 59. microformatos juntando as peças do puzzle Como publicar? Design Patterns rel abbr datetime class grdloizaga Wednesday, June 3, 2009
  60. 60. 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) Wednesday, June 3, 2009
  61. 61. 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> Wednesday, June 3, 2009
  62. 62. 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> Wednesday, June 3, 2009
  63. 63. 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> Wednesday, June 3, 2009
  64. 64. 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) Wednesday, June 3, 2009
  65. 65. 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> Wednesday, June 3, 2009
  66. 66. 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 Wednesday, June 3, 2009
  67. 67. microformatos juntando as peças do puzzle Como publicar? <div class=”vevent”> <h3 class=”category”>Brasileira</h3> <h1> <a class=”summary” href=quot;/detalhe_evento.aspx?id=48568quot;> Atenção 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> ! Wednesday, June 3, 2009
  68. 68. microformatos juntando as peças do puzzle Como publicar? <div class=”vevent”> <h3 class=”category”>Brasileira</h3> <h1> <a class=”summary” href=quot;/detalhe_evento.aspx?id=48568quot;> Atenção 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>  Wednesday, June 3, 2009
  69. 69. 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/ Wednesday, June 3, 2009
  70. 70. 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/ Wednesday, June 3, 2009
  71. 71. microformatos juntando as peças do puzzle Como publicar? BBC http://www.bbc.co.uk/blogs/radiolabs/2008/06/removing_microformats_from_bbc.shtml Wednesday, June 3, 2009
  72. 72. microformatos juntando as peças do puzzle Como publicar? Padrão value class (experimental) http://tr.im/valueclass <span class=quot;telquot;> <span class=quot;typequot;>Home</span>: <span class=quot;valuequot;>+44.415.555.122</span> </span> Wednesday, June 3, 2009
  73. 73. microformatos juntando as peças do puzzle Como publicar? Padrão value class (experimental) http://tr.im/valueclass <span class=quot;telquot;> <span class=quot;typequot;>Home</span>: <span class=quot;valuequot;>+44.</span> (0) <span class=”value”>415.555.122</span> </span> Wednesday, June 3, 2009
  74. 74. microformatos juntando as peças do puzzle Como publicar? Padrão value class (experimental) http://tr.im/valueclass <span class=quot;dtstartquot;> <span class=quot;value-titlequot; title=”2009-06-03”> yesterday</span> Wednesday, June 3, 2009
  75. 75. microformatos juntando as peças do puzzle Como publicar? hCard Wednesday, June 3, 2009
  76. 76. 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 Wednesday, June 3, 2009
  77. 77. 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> ... Wednesday, June 3, 2009
  78. 78. 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> ... Wednesday, June 3, 2009
  79. 79. microformatos pequenas peças do puzzle Como publicar? hCalendar pyrii Wednesday, June 3, 2009
  80. 80. microformatos pequenas peças do puzzle Sujar as mãos Propriedades raíz: obrigatórias facultativas vcalendar* summary dtend duration vevent dtstart description category url location rrule rdate uid geo (latitude, longitude) ... Wednesday, June 3, 2009
  81. 81. microformatos pequenas peças do puzzle Como publicar? rel-tag peskymac Wednesday, June 3, 2009
  82. 82. microformatos pequenas peças do puzzle Sujar as mãos links para “tags” Wednesday, June 3, 2009
  83. 83. microformatos pequenas peças do puzzle Sujar as mãos Exemplo <a href=”/tag/microformatos”> microformatos </a> Wednesday, June 3, 2009
  84. 84. microformatos pequenas peças do puzzle Sujar as mãos Exemplo <a rel=”tag” href=”/tag/microformatos”> microformatos </a> Wednesday, June 3, 2009
  85. 85. microformatos pequenas peças do puzzle Como publicar? Exemplo <a rel=”tag” href=”/tag/microformatos”> microformatos </a> não esta esta é a tag Wednesday, June 3, 2009
  86. 86. microformatos pequenas peças do puzzle Sujar as mãos Exemplo /tag/microformatos?tag=banana#split esta é a tag Wednesday, June 3, 2009
  87. 87. microformatos juntando as peças do puzzle Como consumir? Wednesday, June 3, 2009
  88. 88. microformatos juntando as peças do puzzle Como consumir? HTML Scraping? Wednesday, June 3, 2009
  89. 89. 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) Wednesday, June 3, 2009
  90. 90. microformatos juntando as peças do puzzle Como consumir? Parsers/Scrapers WS Yahoo! Query Language http://developer.yahoo.com/yql/ Yahoo! select * from microformats where url = ‘http://social.sapo.pt/’; JS Sumo http://e.xu.sl.pt Dan Webb Wednesday, June 3, 2009
  91. 91. 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) Wednesday, June 3, 2009
  92. 92. 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) Wednesday, June 3, 2009
  93. 93. 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) Wednesday, June 3, 2009
  94. 94. microformatos pequenas peças do puzzle Sujar as mãos Transformadores hCard+hCal X2V http://suda.co.uk/projects/X2V/ Brian Suda (disponibiliza .xsl’s) vários + RDF TransFormr http://transformr.co.uk/ Martin McEvoy (com download para PHP) Wednesday, June 3, 2009
  95. 95. 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:aluis@co.sapo.pt”> aluis@co.sapo.pt</a> </p> http://microformats.org/wiki/ http://talks.andr3.net/2009/ufs_sessions.pdf creative commons http://slideshare.net/andr3 attribution non-commercial share-alike 3.0 Wednesday, June 3, 2009
  96. 96. 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/ Wednesday, June 3, 2009
  1. A particular slide catching your eye?

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

×