Microformatos en accion

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, consumo y agregación Ejemplos prácticos mFutbol microformatos en acción

¿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!!

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 .

la web semántica con minúsculas

volvemos al ejemplo...

<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> Luis NO tiene hCard

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”

<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> Manu SI tiene hCard

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 .

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

markup con actitud

¿qué NO son los microformatos?

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

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

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

¿markup?

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

dos corrientes...

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

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

Fuente:CSS Zengarden

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”
Los problemas de XML

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
Los problemas de CSS

¿hay punto medio?

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

¿y la semántica?

Fuente: Webstandards Project

Yo hago “marcado semántico”

¿seguro?

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

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

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

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

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

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

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

¿qué hacemos?

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

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

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

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

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"
Principios

¿porqué me enlazas?

XFN redes sociales distribuidas

Las personas son URLs

XHTMLFriends.net

rel-license licencias

Yahoo CC Search rel-license

rel-tag etiquetas/folksonomías

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

hReview críticas de productos y servicios

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

hAtom la sindicación en el front

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

actitud creación + agregación + consumo

Yahoo 2001

“ 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
Posicionamiento estratégico
Web como plataforma
Posicionamiento de usuarios
Tú controlas tus datos
Competencias
Servicios, no software
Arquitectura de Participación
Escalabilidad a coste razonable
Remezcla de fuentes de datos y transformación de datos
Software por encima del nivel de dispositivos
Inteligencia colectiva
microformatos y web 2.0 Flickr Yahoo Tech Upcoming Technorati Wordpress Edgeio blo.gs cork’d Tim O’Reilly Adaptado. Luis Villa

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?

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)

mFutbol VoteLinks

microformats.org

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

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

http://www.ojomicroformatos.com	151
http://www.grancomo.com	120
http://www.jesuscarrera.info	22
http://macropsia.com.ar	19
http://miwebdoscero.blogspot.com	16
http://www.torresburriel.com	13
http://www.hojaenblanco.es	7
http://www.miguelangelivarsmas.com	5
http://miguelangelivarsmas.com	4
http://uvirtual.lasalle.edu.co	4
http://www.idumm.org	3
http://www.slideshare.net	1
http://static.slideshare.net	1
http://64.233.183.104	1
http://tecnoin1.blogspot.com	1
http://feeds.feedburner.com	1
http://simplelogica.net	1
http://www.ojobuscador.com	1

Microformatos en accion

by Luis Villa on Nov 01, 2006

Accessibility

Categories

Tags

Upload Details

Usage Rights

18 Embeds 371

Statistics

Microformatos en accion — Presentation Transcript