Los que me conocéis sabéis que desde hace tiempo he sido un seguidos de los microformatos, y una de las mejoras que descubrí al hacer la serie de artículos de HTML 5 fue la incorporación «oficial» de lo que antiguamente se denominaba microformatos en lo que actualmente pasan a ser los midrodatos (microdata en inglés) y que vienen de la antigua implementación denominada RDFa.
Pero ¿qué son los microdatos? Pues básicamente son pequeñas mejoras del HTML que, en apariencia no han de modificar nada, pero que hacen que las máquinas (buscadores, navegadores, aplicaciones…) sean capaces de interpretar y mejorar semánticamente el significado de parte de la información que se muestra por pantalla.
Hasta ahora los microformatos eran bastante complejos de integrar ya que no existía un sistema estándar, algo que con los microdatos se acaba consiguiendo. Algunos ejemplos muy básicos podrían ser estos:
<div itemscope>
<p>My name is <span itemprop="name">Elizabeth</span>.</p>
</div>
o este:
<div itemscope>
<p>My name is <span itemprop="name">Neil</span>.</p>
<p>My band is called <span itemprop="band">Four Parts Water</span>.</p>
<p>I am <span itemprop="nationality">British</span>.</p>
</div>
o este:
<div itemscope>
<img itemprop="image" src="google-logo.png" alt="Google">
</div>
Hasta aquí no hay mucho que decir… aunque estos ejemplos son tan sencillos como, casi, me atrevería a decir que inútiles, ya que no se especifica ningún sistema identificativo para que se pudieran interpretar de forma semántica.
Los microdatos pueden anidarse entre sí, lo que los convierte en una herramienta escalable, además de poderse agrupar por distintos elementos:
<div itemscope id="amanda" itemref="a b"></div>
<p id="a">Name: <span itemprop="name">Amanda</span></p>
<div id="b" itemprop="band" itemscope itemref="c"></div>
<div id="c">
<p>Band: <span itemprop="name">Jazz Band</span></p>
<p>Size: <span itemprop="size">12</span> players</p>
</div>
Como decía, hasta ahora los ejemplos son «inútiles» ya que no siguen un estándar… para ello se integra la posibilidad de informar de un «tipo». Los tipo se darán en referencia a una dirección URL en la que se informa de la estructura de cada elemento.
<section itemscope itemtype="http://example.org/animals#cat">
<h1 itemprop="name">Hedral</h1>
<p itemprop="desc">Hedral is a male american domestic shorthair, with a fluffy black fur with white paws and belly.</p>
<img itemprop="img" src="hedral.jpeg" alt="" title="Hedral, age 18 months">
</section>
¿Y qué elementos son los que han de incorporar los microdatos?
- itemscope
- itemtype
- itemid
- itemref
- itemprop
itemscope
Este será el indicador de que el bloque, ese elemento, será el contenedor de información importante. Es un elemento booleano, es decir, se pone o no se pone… y ya está.
itemtype
Al indicar un itemscope podemos querer indicar qué tipo de información vamos a encontrar, que diccionario, que vocabulario vamos a utilizar. Para ello indicaremos este atributo que contendrá una dirección URL donde encontrar la información correspondiente.
itemid
Este atributo puede dar información sobre un elemento común que encontremos en el resto de Internet. Viene a ser como crear una ficha única (o no) que contenga la información que queremos dar.
itemref
Si dentro del contenido queremos hacer referencia a varios elementos, podemos asignarles como un nombre a cada uno de ellos. Para eso usaremos el itemref, que será el que haga referencia a los distintos elementos.
itemprop
Es la propiedad y el valor en sí que queremos indicar. Simple y llanamente.
Y, como último ejemplo:
<!DOCTYPE HTML>
<html>
<head>
<title>Photo gallery</title>
</head>
<body>
<h1>My photos</h1>
<figure itemscope itemtype="http://n.whatwg.org/work" itemref="licenses">
<img itemprop="work" src="images/house.jpeg" alt="A white house, boarded up, sits in a forest.">
<figcaption itemprop="title">The house I found.</figcaption>
</figure>
<figure itemscope itemtype="http://n.whatwg.org/work" itemref="licenses">
<img itemprop="work" src="images/mailbox.jpeg" alt="Outside the house is a mailbox. It has a leaflet inside.">
<figcaption itemprop="title">The mailbox.</figcaption>
</figure>
<footer>
<p id="licenses">All images licensed under the <a itemprop="license" href="http://www.opensource.org/licenses/mit-license.php">MIT license</a>.</p>
</footer>
</body>
</html>
El resultado de este ejemplo es que, según la información que encontremos en esta URL: http://n.whatwg.org/work tenemos que:
- work: images/house.jpeg
- title: The house I found.
- license: http://www.opensource.org/licenses/mit-license.php
y
- work: images/mailbox.jpeg
- title: The mailbox.
- license: http://www.opensource.org/licenses/mit-license.php
Y esto es todo… y a lo largo de los próximos días os pondré ejemplos de elementos que ya han sido creados para un objetivo claro, y que los buscadores podrían ya utilizar para extraer información.
Deja una respuesta