PDF de programación - Microformatos en Drupal

Microformatos en
Drupal

quiron
Projecte Ictineo



Microformatos en Drupal - DrupalCamp Sevilla 2011

Presentación

¿Quién soy?

Julià Mestieri Ferrer
(aka quiron)
Desarrollador en la
Cooperativa Projecte Ictineo
Hacemos desarrollos a medida y
formaciones, especializados en Drupal



Microformatos en Drupal - DrupalCamp Sevilla 2011

Presentación

Objetivos e índice de la charla
Objetivos:
● Conocer los Microformatos
● Ver la facilidad de integración con Drupal
● Transmitir nuestra experiencia
● Devolver a la comunidad
No objetivos:
● Explicar el detalle de las especificaciones de Microformatos
● Dar soluciones globales a la implementación de Microformatos
Índice:
● Introducción a la web semàntica y a los Microformatos
● Descripción de algunos Microformatos (hcard, hcalendar y rel-tag)
● Ejemplos prácticos de implementación



Microformatos en Drupal - DrupalCamp Sevilla 2011

Introducción

La Web Semántica

Se basa en la idea de añadir metadatos semánticos y ontológicos a la
World Wide Web. Esas informaciones adicionales —que describen el contenido, el
significado y la relación de los datos— se deben proporcionar de manera formal,
para que así sea posible evaluarlas automáticamente por máquinas de
procesamiento. El objetivo es mejorar Internet ampliando la interoperabilidad
entre los sistemas informáticos usando "agentes inteligentes".
http://es.wikipedia.org/wiki/Web_sem%C3%A1ntica

En Drupal 7 existe una potente herramienta de semantización de
contenido, mediante el módulo RDF incorporado en el core.
Para poder usar la semantización via RDF es necesario conocer
las ontologías pertinentes (FOAF, SIOC, …) que pueden ser
complicadas y difíciles de usar.



Microformatos en Drupal - DrupalCamp Sevilla 2011

Introducción

Los Microformatos

Idea: “Son una forma muy sencilla de semantización”
Consisten en pequeños patrones HTML
(KISS) que representan metainformación
de los contenidos web mas habituales:
gente, eventos, etiquetas...

Puede decirse que los Microformatos forman parte de las
herramientas que permiten semantizar la web. Aun así los
microformatos no pretenden construir La Web Semántica, sino
generar pequeñas utilidades de base semántica.

http://microformats.org/wiki/what-are-microformats



Microformatos en Drupal - DrupalCamp Sevilla 2011

Introducción

¿Por qué Microformatos?

Hay muchos motivos para incorporar Microformatos
en nuestros proyectos, algunos de ellos son:
● Construir la web semántica
● Permiten la extracción de datos (p.e. agregación de
contactos a la agenda)
● Mejoran el SEO (por ahora...)
● Los Microformatos molan y se pueden editar con :)



Microformatos en Drupal - DrupalCamp Sevilla 2011

Introducción

¿Quién usa Microformatos?

● Facebook: usa hcard y hcalendar para los eventos
● Google: anuncia que tiene en cuenta el hrecipe
● Wordpress: usa rel-tag para las etiquetas
¡Dentro de poco vosotros también!



Microformatos en Drupal - DrupalCamp Sevilla 2011

Introducción

Firefox Plugin: Operator

Permite visualizar, explorar y exportar contenido semántico de
las paginas visitadas, incluido microformatos

https://addons.mozilla.org/en-US/firefox/addon/operator/



Microformatos en Drupal - DrupalCamp Sevilla 2011

Introducción

¿Qué Microformatos hay?

Existe una amplia variedad de microformatos, la mayoria en fase de
Draft:


hCalendar
hCard
rel-license
rel-nofollow
rel-tag
VoteLinks
XFN
XMDP
XOXO

adr
geo
Hatom
hAudio
hListing
hMedia
hNews
hProduct
hRecipe
hResume
hReview
rel-directory
rel-enclosure
rel-home
rel-payment
xFolk



Microformatos en Drupal - DrupalCamp Sevilla 2011

Introducción

Microformato: rel-tag

Indica que la página de destino del enlace (href) es un tag designado
por el autor para la pagina actual

<a href="http://projecteictineo.com/tag/drupal" rel="tag">drupal</a>

http://microformats.org/wiki/rel-tag



Microformatos en Drupal - DrupalCamp Sevilla 2011

Introducción

Microformato: hCard

Permite representar personas, empresas y organizaciones.
Puede ser muy simple:
<div class="vcard">
<a class="url fn" href="http://projecteictineo.com">Cooperativa
Projecte ictineo</a>
</div>
O más elaborado:
<div class="vcard">
<a class="fn org url" href="http://www.commerce.net/">CommerceNet</a>
<div class="adr">
<span class="type">Work</span>:
<div class="street-address">169 University Avenue</div>
<span class="locality">Palo Alto</span>,
<abbr class="region" title="California">CA</abbr>&nbsp;&nbsp;
<span class="postal-code">94301</span>
<div class="country-name">USA</div>
</div>
<div class="tel">
<span class="type">Work</span> +1-650-289-4040
</div>
<div class="tel">
<span class="type">Fax</span> +1-650-289-4041
</div>
<div>Email:
<span class="email">[email protected]</span>
</div>
</div>

http://microformats.org/wiki/hcard



Microformatos en Drupal - DrupalCamp Sevilla 2011

Introducción

Microformato: hCalendar

Permite describir eventos de un calendario:

<span class="vevent">
<span class="summary">Drupal Camp 2011 Sevilla</span>
el <span class="dtstart">2011-10-01</span> en la <span
class="location">ETSII</span>.
</span>

http://microformats.org/wiki/hcalendar



Microformatos en Drupal - DrupalCamp Sevilla 2011

Ejemplos

Ejemplos

Veamos algunos ejemplos reales en los que
hemos implementado Microformatos

La incorporación de Microformatos tiene que
valorarse en cada caso y no hay soluciones
universales y exportables, por eso intentamos
dar ideas :)



Microformatos en Drupal - DrupalCamp Sevilla 2011

Ejemplos

Ejemplo 0: Rel-tag el módulo
tagadelic



Microformatos en Drupal - DrupalCamp Sevilla 2011

Ejemplos

Ejemplo 1: Rel-tag en el theme
Bartik

function bartik_field__taxonomy_term_reference($variables) {
// Render the items.
$output .= ($variables['element']['#label_display'] == 'inline') ?
'<ul class="links inline">' : '<ul class="links">';
foreach ($variables['items'] as $delta => $item) {
$item['#options']['attributes']['rel'] = "tag"; // <---
$output .= '<li class="taxonomy-term-reference-' . $delta . '"' .
}
}

$variables['item_attributes'][$delta] . '>' . drupal_render($item) . '</li>';



Microformatos en Drupal - DrupalCamp Sevilla 2011

Ejemplos

Ejemplo 2: Rel-tag en el theme
Sky

sky/templates/field—taxonomy-term-reference.tpl.php
<span class="field-items"<?php print $content_attributes; ?>>
<?php $num_fields = count($items); ?>
<?php $i = 1; ?>
<?php foreach ($items as $delta => $item) : ?>
<?php $item['#options']['attributes']['rel'] = "tag" ?> // <----
<?php print drupal_render($item); ?><?php $i != $num_fields ? print ', ' : ''; ?>
<?php $i++; ?>
<?php endforeach; ?>
</span>

http://drupal.org/node/1107820



Microformatos en Drupal - DrupalCamp Sevilla 2011

Ejemplos

Ejemplo 3: Rel-tag caso
genérico

Ante una línea que genera la lista de tags:
$vars['formatted_tags'] = "<div class='node-tags'><span class='article-Label-
Tags'>".mb_strtoupper(t('Tags')).': </span>'.theme('item_list', $iTerms, NULL, 'ul',
array("class" => "formatted-tags")."</div>";
Introducimos la siguiente modificación:
$vars['formatted_tags'] = "<div class='node-tags'><span class='article-Label-
Tags'>".mb_strtoupper(t('Tags')).': </span>'.theme('item_list', $iTerms, NULL, 'ul',
array("class" => "formatted-tags", "rel" => "tag"))."</div>";



Microformatos en Drupal - DrupalCamp Sevilla 2011

Ejemplos

Ejemplo 4: hCalendar

En la clásica implementación CCK + Views + Date + Calendar,
junto con beautytips y calendar_tooltips podemos usar la view
por defecto para incorporar hCalendar en los eventos que se
muestran en el bloque lateral
Podemos reescribir la salida de la view, dando, por ejemplo, el
siguiente formato:
<div class="bt_hidden vevent">
<h3 class="summary">[title_1]</h3>
<span class="dtstart">[field_data_esdev_value]</span>
<span class="location">[field_lloc_value]</span>
<p class="description">[body]</p>
[view_node]
</div>



Microformatos en Drupal - DrupalCamp Sevilla 2011

Ejemplos

Ejemplo 5: hCard del site

Podemos definir una hCard del elemento/empresa la web del cual
estamos construyendo. Para eso podemos usar el logo y el site-name.
Veamos un ejemplo con un template de Zen, en el archivo
zen/templates/page.tpl.php encontramos:
<div id="site-name"><strong>
<a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>"
rel="home"><span><?php print $site_name; ?></span></a>
</strong></div>
Y así podemos añadir:
<div id="site-name" class=”vcard”><strong>
<a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>"
rel="home url"><span class=”fn org”><?php print $site_name; ?
></span></a>
</strong></div>



Microformatos en Drupal - DrupalCamp Sevilla 2011

Ejemplos

Ejemplo 6: hCard en la firma

Cuando como desarrollador@s firmamos un web, con una nota
de copyleft del tipo “Desarrollado por Projecte Ictineo”,
podemos añadir un poco de magia:
<span class="vcard">
<span class="title">Desarrollo web</span> por <a
href="http://www.projecteictineo.com" rel="bookmark"
class="fn url org">Projecte Ictineo</a>
</span>



Microformatos en Drupal - DrupalCamp Sevilla 2011

Conclusión

Conclusiones

Microformatos no son el “no va más” de la semantización
Son exageradamente fáciles de implementar
Son funcionales y mejoran tus webs
Son útiles para el SEO
Para semantizar el contenido de nuestro Drupal no
podemos olvidar el modulo RDF



Microformatos en Drupal - DrupalCamp Sevilla 2011

Conclusión

Gracias por vuestra atención

¿Preguntas?



Microformatos en Drupal - DrupalCamp Sevilla 2011

Microformatos en Drupal
by Cooperativa Projecte Ictineo is licensed
under a Creative Commons
Reconocimiento NoComercial CompartirIgual
3.0