microformatos en acción Luis Villa (The Cocktail) Manuel González Noriega (Simplelógica) The Cocktail. 25 Octubre, 2006
Qué son los microformatos Un ejemplo práctico Un poco de historia ¿Semántica? ¿Dónde? Tipos de microformatos Creación, con...
¿qué son los microformatos?
http ://www.flickr.com/photos/kurafire/238260497/
http://www.flickr.com/photos/ryansking/113794534/
http://www.flickr.com/photos/phae_/191880011/
http://www.flickr.com/photos/maidelba/268377699/
http://www.flickr.com/photos/tantek/240900176/
http://www.flickr.com/photos/tantek/127195162/
http://flickr.com/photos/tantek/130196203/
http://www.flickr.com/photos/kitta/143563971/
¿una marca femenina de camisetas?
¡¡NO!!
<ul><li>Los microformatos facilitan  publicar y compartir  información de más alta fidelidad en la Web. </li></ul><ul><li>...
la web semántica con minúsculas
volvemos al ejemplo...
<div  class=&quot;contacto&quot; > <p> <a  class=&quot;web&quot;  href=&quot; http://grancomo.com &quot;> <span  class=&qu...
Aprovechando el  XHTML existente  en la web y elementos como los  atributos “class” , los microformatos permiten que las p...
<div  class=&quot;vcard&quot; > <p> <a  class=&quot;url fn n&quot;  href=&quot; http://simplelogica.net/logicola &quot;> <...
Diseñados primero para  humanos  y segundo para máquinas, los microformatos son un grupo de  formatos  de datos  sencillos...
¿De dónde sale “la clase”? vCard BEGIN:VCARD VERSION:3.0  N: González Noriega;Manuel FN: Manuel González Noriega URL: http...
markup con actitud
¿qué NO son los microformatos?
<ul><li>Un  nuevo lenguaje </li></ul><ul><li>Infinitamente  extensibles y cerrados </li></ul><ul><li>Un intento de que tod...
no es la Web Semántica... ¡nada que ver!
Un poco de historia http://www.flickr.com/photos/maguisso/106307607/
¿markup?
<ul><li>HTML: inicio  estructural </li></ul><ul><li>Con la  Guerra de los Navegadores , HTML se vuelve “presentacional” </...
dos corrientes...
<ul><li>Ingenieros y programadores </li></ul><ul><ul><li>XML como una estructura rígida </li></ul></ul><ul><ul><li>Prohibi...
 
<ul><li>Diseñadores </li></ul><ul><ul><li>Separación presentación </li></ul></ul><ul><ul><li>Marcado “semántico” </li></ul...
Fuente:CSS Zengarden
<ul><li>Explosión de  esquemas </li></ul><ul><li>Batallas  etiquetas vs. atributos </li></ul><ul><li>Ratoneras de  abstrac...
<ul><li>Código “ popular ” </li></ul><ul><li>Las  implementaciones  varían </li></ul><ul><li>Diseñadores visuales:  presen...
¿hay punto medio?
<ul><li>XHTML = XML </li></ul><ul><li>Procesable, modular </li></ul><ul><li>Soporta CSS </li></ul><ul><li>Todos tienen un ...
¿y la semántica?
Fuente: Webstandards Project
Yo hago “marcado semántico”
¿seguro?
1 billón de páginas  Veamos...
 
Ian Hickson (Google) &quot;A billion documents and no semantics anywhere&quot;
¿navegación? Ian Hickson (Google) &quot;A billion documents and no semantics anywhere&quot;
¿contenido? Ian Hickson (Google) &quot;A billion documents and no semantics anywhere&quot;
¿precios? Ian Hickson (Google) &quot;A billion documents and no semantics anywhere&quot;
¿pie de página? Ian Hickson (Google) &quot;A billion documents and no semantics anywhere&quot;
¡¡No hay semántica por ningún lado!!
<ul><ul><li>¿qué hacemos? </li></ul></ul>
http://www.flickr.com/photos/jillwatson/148574631/ Una nueva web sobre la web actual
Un “toque de clase”
http://www.flickr.com/photos/ptg/170710934/ Tantek Çelik Yo lo hago “con clase”
Tantek Çelik Veerle Pieters Jeremy Keith Drew MacLellan http://www.flickr.com/photos/meyerweb/168554174/ Lo hacemos “con c...
 
 
Quién hCard, XFN, hResume Qué XOXO, rel-tag, hAtom, rel-license, hListing Dónde geo, addr Cuándo hCal Cómo hReview, VoteLi...
XFN - redes sociales distribuidas blo.gs, WordPress, Rubhub rel-license - licencias CC Creator, Yahoo CC search, Google Se...
hResume Creación de un microformato compuesto a partir de la combinación de otros microformatos. Ejemplo Datos de contacto...
<ul><li>Resuelven un problema específico </li></ul><ul><li>Tan sencillo como sea posible </li></ul><ul><ul><li>Mejoras evo...
¿porqué me enlazas?
XFN redes sociales distribuidas
Las personas son URLs
 
 
XHTMLFriends.net
rel-license licencias
<a  rel=&quot;license&quot; href=&quot; http://creativecommons.org/licenses/by/2.5/ &quot;> Algunos derechos reservados. C...
Yahoo CC Search rel-license
rel-tag etiquetas/folksonomías
<a  rel=&quot;tag&quot;  href=&quot; http://technorati.com/tag/microformatos &quot;> la web semántica para torpes </a>
hReview críticas de productos y servicios
<div  class=&quot;hreview&quot; > <h2  class=&quot;summary&quot; >Revelador</h2> <abbr  class=&quot;dtreviewed&quot;  titl...
hAtom la sindicación en el front
<div  class=&quot;hentry&quot;  id=&quot;post-452&quot;> <h3  class=&quot;entry-title&quot; ><a href=&quot;http://www.gran...
actitud creación + agregación + consumo
Yahoo 2001
BBC
 
“ Una actitud no una Tecnología” Long tail Datos como “Intel Inside” *Hackabilidad* Beta Perpetua Software mejora cuanto m...
Technorati
¿de quién son “tus” datos?
Yahoo Tech Upcomming Blog Blog Blog Blog Eventful Edgeio Blog
 
 
¿más ejemplos?
Cork’d hCard hReview rel-tag VoteLinks
hCard geo Flickr
SimplyHired hResume
Edgeio hListing
Yahoo Tech hReview
¿por dónde empiezo?
¿tienes acceso a tu código front?
<ul><li>Crea tus microformatos </li></ul><ul><ul><li>hCard y hCal  en tu blog (hCard, hCal creator) </li></ul></ul><ul><ul...
mFutbol VoteLinks
microformats.org
Luis Villa del Campo  (The Cocktail) work >  www.the-cocktail.com Blog >  www.grancomo.com Mail >  [email_address] Manuel ...
Microformats.org www.microformats.org   www.microformats.org /wiki S tructured Blogging www.structuredblogging.org Tantek ...
Upcoming SlideShare
Loading in …5
×

Microformatos en accion

9,566 views

Published on

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

Published in: Technology
3 Comments
14 Likes
Statistics
Notes
No Downloads
Views
Total views
9,566
On SlideShare
0
From Embeds
0
Number of Embeds
153
Actions
Shares
0
Downloads
0
Comments
3
Likes
14
Embeds 0
No embeds

No notes for slide

Microformatos en accion

  1. 1. microformatos en acción Luis Villa (The Cocktail) Manuel González Noriega (Simplelógica) The Cocktail. 25 Octubre, 2006
  2. 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. 3. ¿qué son los microformatos?
  4. 4. http ://www.flickr.com/photos/kurafire/238260497/
  5. 5. http://www.flickr.com/photos/ryansking/113794534/
  6. 6. http://www.flickr.com/photos/phae_/191880011/
  7. 7. http://www.flickr.com/photos/maidelba/268377699/
  8. 8. http://www.flickr.com/photos/tantek/240900176/
  9. 9. http://www.flickr.com/photos/tantek/127195162/
  10. 10. http://flickr.com/photos/tantek/130196203/
  11. 11. http://www.flickr.com/photos/kitta/143563971/
  12. 12. ¿una marca femenina de camisetas?
  13. 13. ¡¡NO!!
  14. 14. <ul><li>Los microformatos facilitan publicar y compartir información de más alta fidelidad en la Web. </li></ul><ul><li>Permiten construir bloques que facilitan a los usuarios poseer, controlar, mover y compartir sus datos en la Web. </li></ul><ul><li>Pequeños bloques de (X)HTML que identifican tipos de datos como personas, organizaciones y eventos en las páginas web. </li></ul><ul><li>La manera más rápida y sencilla de poner un API en tu sitio web . </li></ul>
  15. 15. la web semántica con minúsculas
  16. 16. volvemos al ejemplo...
  17. 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. 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. 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. 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. 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. 22. markup con actitud
  23. 23. ¿qué NO son los microformatos?
  24. 24. <ul><li>Un nuevo lenguaje </li></ul><ul><li>Infinitamente extensibles y cerrados </li></ul><ul><li>Un intento de que todo el mundo cambie sus hábitos y herramientas de publicación </li></ul><ul><li>Una nueva aproximación que desecha todo lo que funciona hoy en día </li></ul><ul><li>La panacea para todas las taxonomías, ontologías y otras abstracciones </li></ul><ul><li>-- Microformats: Evolving the Web. Tantek Çelik </li></ul>
  25. 25. no es la Web Semántica... ¡nada que ver!
  26. 26. Un poco de historia http://www.flickr.com/photos/maguisso/106307607/
  27. 27. ¿markup?
  28. 28. <ul><li>HTML: inicio estructural </li></ul><ul><li>Con la Guerra de los Navegadores , HTML se vuelve “presentacional” </li></ul><ul><li>Abuso de tablas, fonts y gifs espaciadores (pixel invisible) </li></ul>HTML. Orígenes El “desastre”...
  29. 29. dos corrientes...
  30. 30. <ul><li>Ingenieros y programadores </li></ul><ul><ul><li>XML como una estructura rígida </li></ul></ul><ul><ul><li>Prohibición de presentación </li></ul></ul><ul><ul><li>Control estricto de errores </li></ul></ul><ul><ul><li>Esquemas propios </li></ul></ul>Estructura (XML)
  31. 32. <ul><li>Diseñadores </li></ul><ul><ul><li>Separación presentación </li></ul></ul><ul><ul><li>Marcado “semántico” </li></ul></ul><ul><ul><li>Independencia del contenido </li></ul></ul><ul><ul><li>Gana adopción (CSS Zengarden) </li></ul></ul>Presentación (CSS)
  32. 33. Fuente:CSS Zengarden
  33. 34. <ul><li>Explosión de esquemas </li></ul><ul><li>Batallas etiquetas vs. atributos </li></ul><ul><li>Ratoneras de abstracción : ontologías </li></ul><ul><li>No legible por humanos </li></ul><ul><li>Costoso de implementar </li></ul><ul><li>No funciona en “la Web actual” </li></ul>Los problemas de XML
  34. 35. <ul><li>Código “ popular ” </li></ul><ul><li>Las implementaciones varían </li></ul><ul><li>Diseñadores visuales: presentación como estructura </li></ul><ul><li>Hacks . Se necesitan cambios de estructura para solucionar problemas en navegadores </li></ul>Los problemas de CSS
  35. 36. ¿hay punto medio?
  36. 37. <ul><li>XHTML = XML </li></ul><ul><li>Procesable, modular </li></ul><ul><li>Soporta CSS </li></ul><ul><li>Todos tienen un visor (navegador) </li></ul><ul><li>Se le pueden hacer consultas </li></ul>Solución: XHTML
  37. 38. ¿y la semántica?
  38. 39. Fuente: Webstandards Project
  39. 40. Yo hago “marcado semántico”
  40. 41. ¿seguro?
  41. 42. 1 billón de páginas Veamos...
  42. 44. Ian Hickson (Google) &quot;A billion documents and no semantics anywhere&quot;
  43. 45. ¿navegación? Ian Hickson (Google) &quot;A billion documents and no semantics anywhere&quot;
  44. 46. ¿contenido? Ian Hickson (Google) &quot;A billion documents and no semantics anywhere&quot;
  45. 47. ¿precios? Ian Hickson (Google) &quot;A billion documents and no semantics anywhere&quot;
  46. 48. ¿pie de página? Ian Hickson (Google) &quot;A billion documents and no semantics anywhere&quot;
  47. 49. ¡¡No hay semántica por ningún lado!!
  48. 50. <ul><ul><li>¿qué hacemos? </li></ul></ul>
  49. 51. http://www.flickr.com/photos/jillwatson/148574631/ Una nueva web sobre la web actual
  50. 52. Un “toque de clase”
  51. 53. http://www.flickr.com/photos/ptg/170710934/ Tantek Çelik Yo lo hago “con clase”
  52. 54. Tantek Çelik Veerle Pieters Jeremy Keith Drew MacLellan http://www.flickr.com/photos/meyerweb/168554174/ Lo hacemos “con clase”
  53. 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
  54. 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...
  55. 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
  56. 60. <ul><li>Resuelven un problema específico </li></ul><ul><li>Tan sencillo como sea posible </li></ul><ul><ul><li>Mejoras evolutivas </li></ul></ul><ul><li>Humanos primero, máquinas despues </li></ul><ul><ul><li>Presentables y “parseables” </li></ul></ul><ul><ul><li>Adaptado a comportamientos existentes </li></ul></ul><ul><li>Reutilización desde estándares ampliamente aceptados </li></ul><ul><ul><li>(X)HTML semántico, esquemas de RFCs interoperables </li></ul></ul><ul><li>Modularidad / “incrustabilidad” </li></ul><ul><li>Desarrollo descentralizado, contenido, servicios </li></ul><ul><ul><li>Alientan explícitamente el &quot;espíritu de la Web&quot; </li></ul></ul>Principios
  57. 61. ¿porqué me enlazas?
  58. 62. XFN redes sociales distribuidas
  59. 63. Las personas son URLs
  60. 66. XHTMLFriends.net
  61. 67. rel-license licencias
  62. 68. <a rel=&quot;license&quot; href=&quot; http://creativecommons.org/licenses/by/2.5/ &quot;> Algunos derechos reservados. CC by-2.5. </a>
  63. 69. Yahoo CC Search rel-license
  64. 70. rel-tag etiquetas/folksonomías
  65. 71. <a rel=&quot;tag&quot; href=&quot; http://technorati.com/tag/microformatos &quot;> la web semántica para torpes </a>
  66. 72. hReview críticas de productos y servicios
  67. 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>
  68. 74. hAtom la sindicación en el front
  69. 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=’vote-for’</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… </p> <p>Agarro el balón, avanzo… </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>
  70. 76. actitud creación + agregación + consumo
  71. 77. Yahoo 2001
  72. 78. BBC
  73. 80. “ Una actitud no una Tecnología” Long tail Datos como “Intel Inside” *Hackabilidad* Beta Perpetua Software mejora cuanto más gente lo usa Remezcla “ Algunos derechos reservados” Emergente. Comportamiento de los usuarios no predeterminado Juega Granular (contenidos) Experiencias Ricas de Uso Web como componentes Confía en tus usuarios <ul><li>Posicionamiento estratégico </li></ul><ul><li>Web como plataforma </li></ul><ul><li>Posicionamiento de usuarios </li></ul><ul><li>Tú controlas tus datos </li></ul><ul><li>Competencias </li></ul><ul><li>Servicios, no software </li></ul><ul><li>Arquitectura de Participación </li></ul><ul><li>Escalabilidad a coste razonable </li></ul><ul><li>Remezcla de fuentes de datos y transformación de datos </li></ul><ul><li>Software por encima del nivel de dispositivos </li></ul><ul><li>Inteligencia colectiva </li></ul>microformatos y web 2.0 Flickr Yahoo Tech Upcoming Technorati Wordpress Edgeio blo.gs cork’d Tim O’Reilly Adaptado. Luis Villa
  74. 81. Technorati
  75. 82. ¿de quién son “tus” datos?
  76. 83. Yahoo Tech Upcomming Blog Blog Blog Blog Eventful Edgeio Blog
  77. 86. ¿más ejemplos?
  78. 87. Cork’d hCard hReview rel-tag VoteLinks
  79. 88. hCard geo Flickr
  80. 89. SimplyHired hResume
  81. 90. Edgeio hListing
  82. 91. Yahoo Tech hReview
  83. 92. ¿por dónde empiezo?
  84. 93. ¿tienes acceso a tu código front?
  85. 94. <ul><li>Crea tus microformatos </li></ul><ul><ul><li>hCard y hCal en tu blog (hCard, hCal creator) </li></ul></ul><ul><ul><li>hAtom. Adaptar el marcado de tu weblog </li></ul></ul><ul><ul><li>Enviar notificaciones (Pings) a Pingerati </li></ul></ul><ul><li>Consumir microformatos </li></ul><ul><ul><li>Firefox Tails Extension (importar datos a Outlook, iCal...) </li></ul></ul><ul><ul><li>Technorati. Extractor de microformatos </li></ul></ul><ul><ul><li>Buscadores de microformatos (Technorati Kitchen) </li></ul></ul>
  86. 95. mFutbol VoteLinks
  87. 96. microformats.org
  88. 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
  89. 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

×