Microformatos en accion

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

Slide 2: microformatos en acción 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

Slide 3: ¿qué son los microformatos?

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

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

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

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

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

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

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

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

Slide 12: ¿una marca femenina de camisetas?

Slide 13: ¡¡NO!!

Slide 14: ๏ Los microformatos facilitan publicar y compartir información de más alta fidelidad en la Web. ๏ Permiten construir bloques que facilitan a los usuarios poseer, controlar, mover y compartir sus datos en la Web. ๏ Pequeños bloques de (X)HTML que identifican tipos de datos como personas, organizaciones y eventos en las páginas web. ๏ La manera más rápida y sencilla de poner un API en tu sitio web.

Slide 15: la web semántica con minúsculas

Slide 16: volvemos al ejemplo...

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

Slide 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”

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

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

Slide 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)

Slide 22: markup con actitud

Slide 23: ¿qué NO son los microformatos?

Slide 24: ๏ Un nuevo lenguaje ๏ Infinitamente extensibles y cerrados ๏ Un intento de que todo el mundo cambie sus hábitos y herramientas de publicación ๏ Una nueva aproximación que desecha todo lo que funciona hoy en día ๏ La panacea para todas las taxonomías, ontologías y otras abstracciones -- Microformats: Evolving the Web. Tantek Çelik

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

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

Slide 27: ¿markup?

Slide 28: HTML. Orígenes ๏ HTML: inicio estructural ๏ Con la Guerra de los Navegadores, HTML se vuelve “presentacional” ๏ Abuso de tablas, fonts y gifs espaciadores (pixel invisible) El “desastre”...

Slide 29: dos corrientes...

Slide 30: Estructura (XML) ๏ Ingenieros y programadores ๏ XML como una estructura rígida ๏ Prohibición de presentación ๏ Control estricto de errores ๏ Esquemas propios

Slide 32: Presentación (CSS) ๏ Diseñadores ๏ Separación presentación ๏ Marcado “semántico” ๏ Independencia del contenido ๏ Gana adopción (CSS Zengarden)

Slide 33: Fuente:CSS Zengarden

Slide 34: Los problemas de XML ๏ Explosión de esquemas ๏ Batallas etiquetas vs. atributos ๏ Ratoneras de abstracción: ontologías ๏ No legible por humanos ๏ Costoso de implementar ๏ No funciona en “la Web actual”

Slide 35: Los problemas de CSS ๏ Código “popular” ๏ Las implementaciones varían ๏ Diseñadores visuales: presentación como estructura ๏ Hacks. Se necesitan cambios de estructura para solucionar problemas en navegadores

Slide 36: ¿hay punto medio?

Slide 37: Solución: XHTML ๏ XHTML = XML ๏ Procesable, modular ๏ Soporta CSS ๏ Todos tienen un visor (navegador) ๏ Se le pueden hacer consultas

Slide 38: ¿y la semántica?

Slide 39: Fuente: W ebstandards Project

Slide 40: Yo hago “marcado semántico”

Slide 41: ¿seguro?

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

Slide 44: Ian Hickson (Google) "A billion documents and no semantics anywhere"

Slide 45: ¿navegación? Ian Hickson (Google) "A billion documents and no semantics anywhere"

Slide 46: ¿contenido? Ian Hickson (Google) "A billion documents and no semantics anywhere"

Slide 47: ¿precios? Ian Hickson (Google) "A billion documents and no semantics anywhere"

Slide 48: ¿pie de página? Ian Hickson (Google) "A billion documents and no semantics anywhere"

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

Slide 50: ¿qué hacemos?

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

Slide 52: Un “toque de clase”

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

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

Slide 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

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

Slide 59: Cómo nace un microformato 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)

Slide 60: Principios ๏ Resuelven un problema específico ๏ Tan sencillo como sea posible ๏ Mejoras evolutivas ๏ Humanos primero, máquinas despues ๏ Presentables y “parseables” ๏ Adaptado a comportamientos existentes ๏ Reutilización desde estándares ampliamente aceptados ๏ (X)HTML semántico, esquemas de RFCs interoperables ๏ Modularidad / “incrustabilidad” ๏ Desarrollo descentralizado, contenido, servicios ๏ Alientan explícitamente el "espíritu de la Web"

Slide 61: ¿porqué me enlazas?

Slide 62: XFN redes sociales distribuidas

Slide 63: Las personas son URLs

Slide 66: XHTMLFriends.net

Slide 67: rel-license licencias

Slide 69: Yahoo CC Search rel-license

Slide 70: rel-tag etiquetas/folksonomías

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

Slide 72: hReview críticas de productos y servicios

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

Slide 74: hAtom la sindicación en el front

Slide 75: <div class="hentry" id="post-452"> <h3 class="entry-title"><a href="http://www.grancomo.com/2006/10/24/revvote-for/" rel="bookmark">rev=’vote-for’</a></h3> <p class="meta">Categoría: <a href="http://www.grancomo.com/category/general/" title="View all posts in general" rel="category tag">general</a>, <a href="http://www.grancomo.com/category/web-semantica/" title="View all posts in web semántica" rel="category tag">web semántica</a>, <a href="http://www.grancomo.com/category/social-media/" title="View all posts in social media" rel="category tag">social media</a>, <a href="http://www.grancomo.com/category/weblogs/" title="View all posts in weblogs" rel="category tag">weblogs</a>, <a href="http://www.grancomo.com/category/tendencias/" title="View all posts in tendencias" rel="category tag">tendencias</a>, <a href="http://www.grancomo.com/category/broma/" title="View all posts in broma" rel="category tag">broma</a></p> <div class="entry-content"> <p>Esto es un experimento para el <a href="http://www.grancomo.com/2006/10/17/taller- de-microformatos/">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="border:3px solid #ccc; padding:10px; background:#eee; width:300px; margin: 1em auto; text-align: center; "> <p><a style="color:#222; text-decoration:none; cursor:default; font-size:1.3em" rev="vote-for" href="http://fcbarcelona.com">Soy el 9 del Barça</a></p> <p><a title="Pincha para hacer tu jugada" href="http://simplelogica.net/mfutbol/arbitro.php">¡y marco contra el Madrid!</a></p> </div> <p><a href="http://simplelogica.net/mfutbol/participa.php">¿Quieres saber más?</a></p> </div> </div>

Slide 76: actitud creación + agregación + consumo

Slide 77: Yahoo 2001

Slide 78: BBC

Slide 80: microformatos y web 2.0 cork’d Upcoming Wordpress blo.gs Flickr Yahoo Tech Technorati Edgeio Posicionamiento estratégico • Web como plataforma Posicionamiento de usuarios • Tú controlas tus datos Confía en tus Competencias “Una actitud no • Servicios, no software usuarios una Tecnología” • Arquitectura de Participación • Escalabilidad a coste razonable • Remezcla de fuentes de datos y transformación de datos Web como Long tail • Software por encima del nivel de dispositivos componentes • Inteligencia colectiva Datos como “Intel Experiencias Ricas Software mejora Juega Inside” de Uso Beta Perpetua cuanto más gente lo usa Granular Emergente. Remezcla (contenidos) Comportamiento *Hackabilidad* “Algunos derechos de los usuarios no reservados” predeterminado Tim O’Reilly Adaptado. Luis Villa

Slide 81: Technorati

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

Slide 83: Upcomming Yahoo Tech Blog Blog Blog Blog Edgeio Eventful Blog

Slide 86: ¿más ejemplos?

Slide 87: Cork’d hCard hReview rel-tag VoteLinks

Slide 88: Flickr hCard geo

Slide 89: SimplyHired hResume

Slide 90: Edgeio hListing

Slide 91: Yahoo Tech hReview

Slide 92: ¿por dónde empiezo?

Slide 93: ¿tienes acceso a tu código front?

Slide 94: ๏ Crea tus microformatos ๏ hCard y hCal en tu blog (hCard, hCal creator) ๏ hAtom. Adaptar el marcado de tu weblog ๏ Enviar notificaciones (Pings) a Pingerati ๏ Consumir microformatos ๏ Firefox Tails Extension (importar datos a Outlook, iCal...) ๏ Technorati. Extractor de microformatos ๏ Buscadores de microformatos (Technorati Kitchen)

Slide 95: mFutbol VoteLinks

Slide 96: microformats.org

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

Slide 98: Créditos de esta presentación Microformats.org www.microformats.org www.microformats.org/wiki Structured Blogging www.structuredblogging.org Tantek Çelik. Presentaciones sobre microformatos www.tantek.com/presentations/2006/03/microformats-sxsw/ www.tantek.com/presentations/2005/12/syndicate-microformats/ www.tantek.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/potential.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/

Slideshare.net (beta)