Microformatos - 2009 - Juntando as Peças do Puzzle

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. microformatos juntando as peças do puzzle Wednesday, June 3, 2009

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

4. microformatos juntando as peças do puzzle Introdução Como usar? Como publicar? Como consumir? Wednesday, June 3, 2009

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

6. microformatos juntando as peças do puzzle Introdução World Wide Web pixelydixel Wednesday, June 3, 2009

7. microformatos juntando as peças do puzzle Introdução Documentos bitzcelt Wednesday, June 3, 2009

8. microformatos juntando as peças do puzzle Introdução Dados fonte: cnn.com Wednesday, June 3, 2009

9. microformatos juntando as peças do puzzle Introdução Dados fonte: everyblock.com Wednesday, June 3, 2009

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. microformatos juntando as peças do puzzle Introdução “ Show! Me! The money!” Wednesday, June 3, 2009

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. 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. 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. 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. 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. 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. microformatos juntando as peças do puzzle Introdução Quem Publica? ...etc. Wednesday, June 3, 2009

30. microformatos juntando as peças do puzzle Introdução Quem Consome? Wednesday, June 3, 2009

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

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. microformatos juntando as peças do puzzle Introdução E mais... RDFa Wednesday, June 3, 2009

34. microformatos juntando as peças do puzzle Introdução Google Rich Snippets http://whit.me/googleufs Wednesday, June 3, 2009

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. 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 ﬁnd 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. microformatos juntando as peças do puzzle Introdução Google Rich Snippets http://whit.me/googleufs + RDFa Wednesday, June 3, 2009

38. microformatos juntando as peças do puzzle Introdução Utilizador: “Como é que eu uso isso?” Wednesday, June 3, 2009

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. microformatos juntando as peças do puzzle Como usar? Portabilidade dos Dados dopplr.com Wednesday, June 3, 2009

55. microformatos juntando as peças do puzzle Como usar? Recuperação de Dados (Funny story...) http://workshop.andr3.net/de.ﬁbrillator/ 1. Google Feeds Archive 2. Microformatos (xfolk) bookmarks.html RSS JSON Wednesday, June 3, 2009

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. microformatos juntando as peças do puzzle Como publicar? Wednesday, June 3, 2009

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. microformatos juntando as peças do puzzle Como publicar? Design Patterns rel abbr datetime class grdloizaga Wednesday, June 3, 2009

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. microformatos juntando as peças do puzzle Como publicar? hCard Wednesday, June 3, 2009

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. 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;perﬁlamigo.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. 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;perﬁlamigo.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. microformatos pequenas peças do puzzle Como publicar? hCalendar pyrii Wednesday, June 3, 2009

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. microformatos pequenas peças do puzzle Como publicar? rel-tag peskymac Wednesday, June 3, 2009

82. microformatos pequenas peças do puzzle Sujar as mãos links para “tags” Wednesday, June 3, 2009

83. microformatos pequenas peças do puzzle Sujar as mãos Exemplo <a href=”/tag/microformatos”> microformatos </a> Wednesday, June 3, 2009

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. 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. microformatos pequenas peças do puzzle Sujar as mãos Exemplo /tag/microformatos?tag=banana#split esta é a tag Wednesday, June 3, 2009

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

88. microformatos juntando as peças do puzzle Como consumir? HTML Scraping? Wednesday, June 3, 2009

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. 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. 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. 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. 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. 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

Microformatos - 2009 - Juntando as Peças do Puzzle