Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS
Code

HTML5 Microdata: Bienvenido a la Máquina

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called HTML5 and You.
Rethinking Forms in HTML5
Getting Offline Access with HTML5 Application

Spanish (Español) translation by Rodney Martinez (you can also view the original English article)

No creo que sea una hipérbole decir que HTML5 cambiará la forma de cómo usted piensa acerca del desarrollo web. Le doy la bienvenida a muchos de los cambios, como por el desarrollo más fácil y la experiencia de usuario más rica. Con cualquier cambio, aunque, existe una cierta expectativa a tener un poco de temor y controversia. Además que, sin duda, no es sin su controversia que es la especificación Microdata, pero creo que los beneficios de éste sencilla especificación va a cambiar la forma en cómo usted ve su markup en el futuro cercano.


Introducción y Alcance: Contexto para Máquinas

Cabe mencionar que me estoy enfocando en las especificaciones Microdata en este tutorial. Usted necesita entender que las especificaciones no son sólidas por el momento, ni tampoco es muy adoptada. De hecho, durante el momento en que escribía, la especificación cambió. Es decir, Microdata ha sido adoptado por Google como otra forma de ofrecer resultados de búsqueda de vuelta a los usuarios. Además de ser una especificación inmadura, hay un poco de controversia alrededor de Microdata.

Para entender la controversia, usted necesita entender que Microdata es un subconjunto de hacer que un documento tenga significado para las máquinas, tal y como lo tiene para un lector del documento. Con sentido, me refiero a ofrecer los meta datos en tal forma que pueden ser utilizados por una máquina lectora de documentos y permitir que los datos sean procesados. Esto es controversial porque hay otros formatos y especificaciones que, también, tiene el mismo objetivo final en mente. RDFa y Microformats son dos de éstos otros formatos con los cuales usted podría familiarizarse, y que se pueden ser usados muy bien hoy en día.

En un mundo perfecto, no estarían compitiendo con las especificaciones que tendríamos que estar conscientes, pero, por desgracia, hay problemas más grandes por lo que preocuparse. Asimismo, cada formato tiene su desventaja, en términos de uso. Durante todo éste artículo, nos quedaremos pegado al lado positivo y aprenderemos que nos traen las especificaciones, así como también que podemos utilizar hoy para añadir un poco más de significado a nuestros documentos.

Una nota antes de comenzar: independientemente del formato que usted prefiera, nunca debería de tener un conjunto de marcado para que sus usuarios lo vean y otro conjunto para que la máquina lo vea. Muchas veces cuando usted necesita ofrecer un meta dato específico a la máquina, pero el uso debería ser la excepción y no la regla. El propósito de estos formatos es proporcionar contexto, no tratar de engañar al motor de búsqueda u otra aplicación en leer más en una página que, de hecho, está ahí. Usted se lamentará de usar trucos usando atributos ocultos o display: none,  cuando definitivamente deberían ser desaprobado.

"Microdata es un subconjunto para hacer que un documento tenga sentido para las máquinas, tal y como lo tiene para el lector un documento. Con sentido, me refiero a ofrecer los meta datos en tal forma que pueden ser utilizados por una máquina lectora de documentos y permitir que los datos sean procesados".


Microdata en Teoría: La Imagen Grande

Suponga que está coleccionando libro de historietas. Apuesto a que una persona que colecciona historietas no solamente lee los temas por venir sino que también explora la web para completar su colección de historietas así como también sus conocimiento de las historias en las que está interesado. La exploración podría ser tan simple como pasar tiempo en Google escribiendo una consulta tras otras sobre lo que le interesa. Algunas páginas serán de éxito otras no, como podrían mencionar Superman, aunque no necesariamente en el contexto de que lo usted está buscando. Sería estupendo si Google tuviera el contexto de las páginas que han indexado para atender a sus resultados de búsqueda correcta. Que proporciona una mejor experiencia para el usuario, y le conecta con las personas que valoran su sitio web. Es un ganar / ganar.

Vamos a llevar eso un paso hacia atrás en los resultados de búsqueda. Digamos que usted escribe una aplicación que une sitios web afines para combinar su conocimiento sobre los libros de historietas. Obviamente, podríamos redactar una leyenda, pero en realidad no tenemos el contexto, aunque probablemente ninguno de los sitios web están usando el mismo formato para mostrar sus resultados. Podríamos tener que escribir varios formatos de leyendas solamente para conseguir información básica. En lugar de eso, podemos definir un nuevo formato de especificación y con la ayuda de Microdata y los cinco atributos que facilitarán este problema.


Microdata en Teoría: Nuevos Atributos Globales

Microdata introduce cinco atributos globales sencillos (disponibles para que cualquier elemento lo use) que dan contexto a las máquinas acerca de los datos. Estos cinco nuevos atributos son: itemid, itemprop, itemref, itemscope y itemtype. Microdata es, básicamente, un grupo de elementos de valores pares y los atributos le dan sentido a nuestros elementos. Vamos a verlos todos en detalle.

El atributo itemscope es un atributo booleano que le dice a la máquina que está leyendo nuestro documento y hay Microdata en está página y esto es donde ésta empieza. Usted está creando el item con el uso de itemscope. Cualquier elemento con un itemscope puede, además, tener el atributo itemtype. El itemtype es una URL válida que define el item y ofrece el contexto de las propiedades. Además, usted podría tener un itemid, el cual es el vocabulario que el item type usa, así que estamos haciendo descripciones en el formato adecuado de la definición.

Usando el ejemplo de la especificación:

Tenemos un item identificado por nuestro itemscope. La definición de item puede ser encontrada en http://vocab.example.net/book, y el significado exacto del item puede ser encontrado usando el vocabulario de itemid. En este caso, estamos identificando un libro con el ISBN de 0-330-34032-8.

Los dos atributos finales para la Microdata son itemprop y itemref. Itemprop define una propiedad del item. Recuerde, Microdata es básicamente pares de valores de item, aquí significa el valor para ésta propiedad. Por lo tanto, el itemprop está dando el contexto de nuestro item. Finalmente, tenemos itemref, que nos permite mantener el fluido de nuestros documentos para nuestros usuarios. Recuerde que estamos dando un contexto a nuestro documento HTML, no estamos tratando de construir un documento nuevo para una aplicación o para un motor de búsqueda. Veamos otra vez nuestro ejemplo, esta vez apartado un poco del ejemplo proporcionado de la especificación:

En nuestro ejemplo, ahora tenemos propiedades con valores. Además, conservamos el flujo del documento, haciendo referencia a un ID de la información del autor. Entonces una máquina sería capaz de entender esto analizando nuestro item, y obteniendo éste contexto, y si pensamos en un conjunto de formatos:

Ahora, nuestro conjunto de datos puede ser traducido por una máquina o cambiado a otros formatos tales como JSON, N-Triples, o a cualquier otro formato interno que una aplicación podría tener.

Esta es la razón por la cual me gusta Microdata, porque es fácil de entender y fácil de ejecutar. Veamos algunos ejemplos de que hoy podemos usar, en particular en cómo podemos proporcionar algo de texto en Google y cómo podría usar ese contexto. Conservaré el formato tan parecido al ejemplo de Google como pueda, sin embargo, cambie el producto, las personas a diferentes ejemplos del mundo real.


Microdata en Práctica: Personas y Negocios.

Si alguna vez a busca a alguien en los resultados de LinkedIn, entonces es probable que usted haya visto algo como esto:

My LinkedIn Result

Google procesará tres formatos actualmente. Ellos son RDFa, Microformats y, lo adivinó; Microdata. Ahora podemos proporcionar contexto desde nuestro HTML para dar mejores resultados de búsqueda. Si bien LinkedIn usa Microformats, veamos si podemos conseguir un resultado familiar usando Microdata:

A pesar de que éste pequeño fragmento produce algo que parezca como sin formatear:

Ugly Picture

Cuando probé qué es lo que los resultados de Google mostrarían sobre mí, conseguí esto: 

Microdata Rich Snippet

Aunque el código es interesante, observe el contexto extra que Google tiene sobre mí:

Microdata Information

Cuándo más contexto proporciono, cuánto más contexto que Google o cualquier otra aplicación que lee mi página, tendrá sobre mí.

Vamos a ir un poco más hacia adelante y veremos un negocio u organización, y veamos si no podemos darle un poco más de contexto para una máquina. En este ejemplo, usaré Nettuts+.

Lamentablemente, Google, todavía no tiene un código mejorado para organizaciones, pero vamos a ver los datos que ellos ven.

Nettuts Organization Data

Nuevamente, estamos proporcionando contexto de vuelta a una máquina, que puede ser utilizada en varias maneras, tales como graficar nuestra organización en un mapa con relativa facilidad.


Microdata en Práctica: Productos y Revisiones

Otro uso práctico para Microdata es dar más contexto acerca de los productos que vendemos, ya sea si es sobre el producto o quizás cómo las personas califican el producto. Primero, vamos a echar un vistazo a la información del producto.

Una vez más, Google no tiene un fragmento de código mejor para un producto, sin embargo, podemos ver el contexto que ellos ven cuando analizan nuestra página:

Product Snippet

Ellos tiene un código mejor para revisiones, y es hacía esa dirección que nos dirigiremos. Digamos que nos permite hacer calificaciones sobre nuestros productos:

Con tan sólo éste marcado adicional, podemos dar contexto a nuestra revisión para máquinas. Google mostraría una revisión así:

Microdata Review

Todo es cuestión de dar contexto a través de cinco atributos globales sencillos. Ahora podemos proporcionar un método consistente de ese contexto dado, ya sea si estamos revisando neumáticos, sitios web o juegos.


Microdata en Práctica: Eventos

El ejemplo final del que tenemos que hablar es la habilidad para darle algo de contexto a los próximos eventos a través de Microdata. Los eventos son item buscados comúnmente. Bien, usted puede estar trabajando en un sitio web que tiene un horario de eventos, el cual usted quiere mostrar. Vamos a dar un poco más de contexto para máquinas y ver como podría ser utilizado:

Cual producirá una entrada como esta:

Microdata event

Ahora que tenemos nuestro evento registrado en nuestros resultados de búsqueda, además, para nuestro propio sitio web. Nuevamente, estamos dándole contexto a nuestros datos en una forma que puede ser fácil reconocer por otras aplicaciones.


Conclusión

Es importante destacar otra vez que la especificación Microdata es nueva, y está atravesando una serie de cambios. Además, es igual de importante entender que mientras me enfoque en los resultados de búsqueda de Google, hay muchas otras aplicaciones. Para mi propósito, Google me presento con la mejor forma de mostrar Microdata en acción, lo cual fue un poco desafiante para mí. Las otras alternativas de formatos son mucho más maduras y, además, han estado en uso por algún tiempo. Además, otra consideración importante es que Google es, en la actualidad, la ayuda para revisión con mejores fragmentos de códigos:

Hand Review Process

Microdata es muy fácil de usar e implementar. Mientras que las especificaciones no son particularmente claras para las definiciones de los atributos, espero haber ayudado con algo de luz. No se necesita mucho para ser un experto con Microdata, al menos hasta que la especificación cambie (otra vez). Por favor, comparta sus comentarios y experiencias con éste reciente formato HTML5 en la sección de comentarios.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.