Miniconferencia sobre microformatos en The Cocktail Academy a cargo de Manuel Gonzalez Noriega y Luis Villa del Campo.

1. microformatos en acción Luis Villa (The Cocktail) Manuel González Noriega (Simplelógica) The Cocktail. 25 Octubre, 2006

2. Qué son los microformatos Un ejemplo práctico Un poco de historia ¿Semántica? ¿Dónde? Tipos de microformatos Creación, consumo y agregación Ejemplos prácticos mFutbol microformatos en acción

3. ¿qué son los microformatos?

4. http ://www.flickr.com/photos/kurafire/238260497/

5. http://www.flickr.com/photos/ryansking/113794534/

6. http://www.flickr.com/photos/phae_/191880011/

7. http://www.flickr.com/photos/maidelba/268377699/

8. http://www.flickr.com/photos/tantek/240900176/

9. http://www.flickr.com/photos/tantek/127195162/

10. http://flickr.com/photos/tantek/130196203/

11. http://www.flickr.com/photos/kitta/143563971/

12. ¿una marca femenina de camisetas?

13. ¡¡NO!!

15. la web semántica con minúsculas

16. volvemos al ejemplo...

17. <div class=&quot;contacto&quot; > <p> <a class=&quot;web&quot; href=&quot; http://grancomo.com &quot;> <span class=&quot;nombre&quot; >Luis Villa</span> </a> </p> <p>Es <span class=&quot;cargo&quot; >User Experience</span> en <a class=&quot;empresa&quot; href=&quot;http://the-cocktail .com/&quot;>The Cocktail</a> </p> <p class=&quot;direccion&quot; > <span class=&quot;ciudad&quot; >Madrid</span> </p> </div> Luis NO tiene hCard

18. Aprovechando el XHTML existente en la web y elementos como los atributos “class” , los microformatos permiten que las páginas web existentes sean reciclables en nuevos servicios y aplicaciones . Un “toque de clase”

19. <div class=&quot;vcard&quot; > <p> <a class=&quot;url fn n&quot; href=&quot; http://simplelogica.net/logicola &quot;> <span class=&quot;given-name&quot; >Manuel</span> <span class=&quot;family-name&quot; >González Noriega</span> </a> </p> <p>Es <span class=&quot;title&quot; >Web Total</span> en <a class=&quot;org&quot; href=&quot;http://simplelogica.net/&quot;>Simplelogica</a> </p> <p class=&quot;adr&quot; > Ciudad: <span class=&quot;locality&quot; >Oviedo</span> </p> </div> Manu SI tiene hCard

20. Diseñados primero para humanos y segundo para máquinas, los microformatos son un grupo de formatos de datos sencillos y abiertos construidos sobre estándares actuales ampliamente adoptados .

21. ¿De dónde sale “la clase”? vCard BEGIN:VCARD VERSION:3.0 N: González Noriega;Manuel FN: Manuel González Noriega URL: http://www.simplelogica.net /logicola ORG: Simplelógica END:VCARD Estándar (RFC2426)

22. markup con actitud

23. ¿qué NO son los microformatos?

25. no es la Web Semántica... ¡nada que ver!

26. Un poco de historia http://www.flickr.com/photos/maguisso/106307607/

27. ¿markup?

29. dos corrientes...

33. Fuente:CSS Zengarden

36. ¿hay punto medio?

38. ¿y la semántica?

39. Fuente: Webstandards Project

40. Yo hago “marcado semántico”

41. ¿seguro?

42. 1 billón de páginas Veamos...

44. Ian Hickson (Google) &quot;A billion documents and no semantics anywhere&quot;

45. ¿navegación? Ian Hickson (Google) &quot;A billion documents and no semantics anywhere&quot;

46. ¿contenido? Ian Hickson (Google) &quot;A billion documents and no semantics anywhere&quot;

47. ¿precios? Ian Hickson (Google) &quot;A billion documents and no semantics anywhere&quot;

48. ¿pie de página? Ian Hickson (Google) &quot;A billion documents and no semantics anywhere&quot;

49. ¡¡No hay semántica por ningún lado!!

51. http://www.flickr.com/photos/jillwatson/148574631/ Una nueva web sobre la web actual

52. Un “toque de clase”

53. http://www.flickr.com/photos/ptg/170710934/ Tantek Çelik Yo lo hago “con clase”

54. Tantek Çelik Veerle Pieters Jeremy Keith Drew MacLellan http://www.flickr.com/photos/meyerweb/168554174/ Lo hacemos “con clase”

57. Quién hCard, XFN, hResume Qué XOXO, rel-tag, hAtom, rel-license, hListing Dónde geo, addr Cuándo hCal Cómo hReview, VoteLinks

58. XFN - redes sociales distribuidas blo.gs, WordPress, Rubhub rel-license - licencias CC Creator, Yahoo CC search, Google Search XOXO - listados y esquemas WordPress, Technorati VoteLinks - for/against/abstain (votos a favor, en contra, abstenciones) Technorati, mFutbol hCalendar - eventos Yahoo Upcoming.org, Eventful.com hCard - personas y organizaciones Flickr.com, Avon.com, Eventful.com rel-tag - etiquetado de contenidos Technorati, Ice Rocket... adr & geo - lugares Flickr hAtom - sindicación hListing - anuncios por palabras, clasificados Edgeio, Oodle, WordPress plugin hResume - currículums Linkedin y SimplyHired hReview - críticas JudysBook, Reevoo... rel-directory - inclusión en directorios Technorati Blog Finder rel-payment - donativos xFolk - link tagging microformatos continuarán...

59. hResume Creación de un microformato compuesto a partir de la combinación de otros microformatos. Ejemplo Datos de contacto hCard Experiencia profesional hCard para organización o empresa hCalendar para periodo de trabajo (fecha de inicio y final) Educación hCard para institución hCalendar para periodo de formación (fecha de inicio y final) Cómo nace un microformato

61. ¿porqué me enlazas?

62. XFN redes sociales distribuidas

63. Las personas son URLs

66. XHTMLFriends.net

67. rel-license licencias

68. <a rel=&quot;license&quot; href=&quot; http://creativecommons.org/licenses/by/2.5/ &quot;> Algunos derechos reservados. CC by-2.5. </a>

69. Yahoo CC Search rel-license

70. rel-tag etiquetas/folksonomías

71. <a rel=&quot;tag&quot; href=&quot; http://technorati.com/tag/microformatos &quot;> la web semántica para torpes </a>

72. hReview críticas de productos y servicios

73. <div class=&quot;hreview&quot; > <h2 class=&quot;summary&quot; >Revelador</h2> <abbr class=&quot;dtreviewed&quot; title=&quot;20061026T1618-0200&quot;> 26 de Octubre</abbr> por <span class=&quot;reviewer fn&quot; >Manuel García</span> <span class=&quot;type&quot; >event</span> <a href=&quot; http://the-cocktail.com /&quot; class=&quot;item url&quot; > Microformats in action</a> <span class=&quot;rating&quot; >5</span> </div>

74. hAtom la sindicación en el front

75. <div class=&quot;hentry&quot; id=&quot;post-452&quot;> <h3 class=&quot;entry-title&quot; ><a href=&quot;http://www.grancomo.com/2006/10/24/revvote-for/&quot; rel=&quot;bookmark&quot;>rev=&#8217;vote-for&#8217;</a></h3> <p class=&quot;meta&quot;>Categoría: <a href=&quot;http://www.grancomo.com/category/general/&quot; title=&quot;View all posts in general&quot; rel=&quot;category tag&quot;>general</a>, <a href=&quot;http://www.grancomo.com/category/web-semantica/&quot; title=&quot;View all posts in web semántica&quot; rel=&quot;category tag&quot;>web semántica</a>, <a href=&quot;http://www.grancomo.com/category/social-media/&quot; title=&quot;View all posts in social media&quot; rel=&quot;category tag&quot;>social media</a>, <a href=&quot;http://www.grancomo.com/category/weblogs/&quot; title=&quot;View all posts in weblogs&quot; rel=&quot;category tag&quot;>weblogs</a>, <a href=&quot;http://www.grancomo.com/category/tendencias/&quot; title=&quot;View all posts in tendencias&quot; rel=&quot;category tag&quot;>tendencias</a>, <a href=&quot;http://www.grancomo.com/category/broma/&quot; title=&quot;View all posts in broma&quot; rel=&quot;category tag&quot;>broma</a></p> <div class=&quot;entry-content&quot; > <p>Esto es un experimento para el <a href=&quot;http://www.grancomo.com/2006/10/17/taller-de-microformatos/&quot;>taller de microformatos</a> que se celebra mañana en The Cocktail Academy. Un partido de <em>futblog</em> a base de posts, pings y microformatos&#8230; </p> <p>Agarro el balón, avanzo&#8230; </p> <div style=&quot;border:3px solid #ccc; padding:10px; background:#eee; width:300px; margin: 1em auto; text-align: center; &quot;> <p><a style=&quot;color:#222; text-decoration:none; cursor:default; font-size:1.3em&quot; rev=&quot;vote-for&quot; href=&quot;http://fcbarcelona.com&quot;>Soy el 9 del Barça</a></p> <p><a title=&quot;Pincha para hacer tu jugada&quot; href=&quot;http://simplelogica.net/mfutbol/arbitro.php&quot;>¡y marco contra el Madrid!</a></p> </div> <p><a href=&quot;http://simplelogica.net/mfutbol/participa.php&quot;>¿Quieres saber más?</a></p> </div> </div>

76. actitud creación + agregación + consumo

77. Yahoo 2001

78. BBC

81. Technorati

82. ¿de quién son “tus” datos?

83. Yahoo Tech Upcomming Blog Blog Blog Blog Eventful Edgeio Blog

86. ¿más ejemplos?

87. Cork’d hCard hReview rel-tag VoteLinks

88. hCard geo Flickr

89. SimplyHired hResume

90. Edgeio hListing

91. Yahoo Tech hReview

92. ¿por dónde empiezo?

93. ¿tienes acceso a tu código front?

95. mFutbol VoteLinks

96. microformats.org

97. Luis Villa del Campo (The Cocktail) work > www.the-cocktail.com Blog > www.grancomo.com Mail > [email_address] Manuel González Noriega (Simplelógica) work > www.simplelogica.net Blog > www.simplelogica.net/logicola Mail > [email_address] Gracias

98. Microformats.org www.microformats.org www.microformats.org /wiki S tructured Blogging www.structuredblogging.org Tantek Çelik. Presentaciones sobre microformatos www.tantek.com/presentations/2006/03/microformats-sxsw/ www.tantek.co m/presentations/2005/12/syndicate-microformats/ www.tan tek.com/presentations/2006/09/microformats-practices/ www. tantek.com/presentations/2005/03/elementsofxhtml/ www.tantek .com/presentations/20040928sdforumws/semantic-xhtml.html Eric Meyer www.complexspiral.com/events/archive/2005/www2005/po tential.html www.complexspiral.com/events/archive/2005/sxsw/ Convertidores hCard a vCard suda.co.uk/projects/X2V/ feeds.technorati. com/contacts/ hCalendar a iCal feeds.technorati.com/events tools.microformatic .com/help/xhtml/hatom/ Créditos de esta presentación