Con el aumento de la popularidad de los componentes web y las bibliotecas compatibles, como Polymer, los elementos personalizados se convierten en una forma atractiva de compilar funciones de la IU. El encapsulamiento predeterminado de los elementos personalizados los hace especialmente útiles para crear widgets independientes.
Si bien algunos widgets son independientes, muchos de ellos se basan en datos externos para presentar el contenido al usuario; p.ej., el pronóstico actual de un widget del clima o la dirección de una empresa para un widget de mapa.
En Polymer, los elementos personalizados son declarativos, lo que significa que, una vez que se importan a un proyecto, es muy fácil incluirlos y configurarlos en HTML, p.ej., pasando los datos para propagar el widget a través de un atributo.
Sería genial si pudiéramos evitar repeticiones y asegurar la coherencia de los datos reutilizando los mismos fragmentos de datos para propagar distintos widgets, además de informar a los motores de búsqueda y a otros consumidores sobre el contenido de nuestra página. Para ello, podemos usar el estándar schema.org y el formato JSON-LD para nuestros datos.
Completa los componentes con datos estructurados
Por lo general, JSON es una forma conveniente de insertar datos en un widget en particular. Con la creciente compatibilidad con JSON-LD, podemos reutilizar las mismas estructuras de datos para informar el significado exacto del contenido de la página, así como para los motores de búsqueda y otros consumidores de datos estructurados.
Cuando combinamos componentes web con JSON-LD, creamos una arquitectura bien definida para una aplicación:
- schema.org y JSON-LD representan la capa de datos, en la que schema.org proporciona el vocabulario para los datos y JSON-LD constituye el formato y el transporte de los datos.
- Los elementos personalizados representan la capa de presentación, que se puede configurar y separar de los datos.
Ejemplo
Consideremos el siguiente ejemplo: una página que enumera algunas ubicaciones de oficinas de Google: https://github.com/googlearchive/structured-data-web-components/tree/master/demo
Contiene dos widgets: un mapa con un pin para cada oficina y un menú desplegable con la lista de ubicaciones. Es importante que ambos widgets presenten los mismos datos al usuario y que la página sea legible para los motores de búsqueda.
En esta demostración, usamos entidades LocalBusiness para expresar el significado de nuestros datos, que es la ubicación geográfica de algunas de las oficinas de Google.
La mejor manera de comprobar cómo Google lee e indexa esta página es a través de la nueva Herramienta de prueba de datos estructurados mejorada. Envía la URL de la demostración en la sección Recuperar URL y haz clic en Recuperar y validar. En la sección de la derecha, se mostrarán los datos analizados recuperados de la página junto con los errores que puedan ocurrir. Es una forma muy conveniente de verificar si tu lenguaje de marcado JSON-LD es correcto y si Google puede procesarlo.
Puedes obtener más información sobre la herramienta y las mejoras que introdujo en la entrada de blog de la Central para webmasters.
Vincula componentes a una fuente de datos estructurada
El código de la demostración y de los componentes web que se usaron para compilarla se encuentra en GitHub. Veamos el código fuente de la página combined-demo.html.
Como primer paso, incorporamos los datos en la página usando una secuencia de comandos JSON-LD:
<script type="application/ld+json">
{...}
</script>
De esta manera, nos aseguramos de que otros consumidores que admitan el estándar de schema.org y el formato JSON-LD, p.ej., los motores de búsqueda, puedan acceder fácilmente a los datos.
Como segundo paso, usamos dos componentes web para mostrar los datos:
- address-dropdown-jsonld: Este elemento crea un menú desplegable con todas las ubicaciones que se pasan en un atributo "jsonld".
- google-map-jsonld: Este elemento crea un mapa de Google Maps con un marcador por cada ubicación que se pasa en un atributo "jsonld".
Para ello, los importamos a nuestra página con importaciones de HTML.
<link rel="import" href="bower_components/google-map-jsonld/google-map-jsonld.html">
<link rel="import" href="bower_components/address-dropdown-jsonld/address-dropdown-jsonld.html">
Una vez que se importen, podremos usarlos en nuestra página:
<address-dropdown-jsonld jsonld=""></address-dropdown-jsonld>
<google-map-jsonld jsonld=""></google-map-jsonld>
Por último, vinculamos los datos JSON-LD y los elementos. Lo hacemos en una devolución de llamada lista para Polymer (es un evento que se activa cuando los componentes están listos para usarse). Debido a que los elementos se pueden configurar mediante atributos, basta con asignar nuestros datos JSON-LD al atributo adecuado del componente:
document.addEventListener('polymer-ready', function() {
var jsonld = JSON.parse(
document.querySelector(
'script[type="application/ld+json"]').innerText);
document.querySelector('google-map-jsonld').jsonld = jsonld['@graph'];
document.querySelector('address-dropdown-jsonld').jsonld = jsonld['@graph'];
});
JSON-LD, el poderoso hermano de JSON
Como probablemente hayas notado, esto funciona de manera muy similar a usar JSON simple para pasar datos. Sin embargo, JSON-LD tiene algunas ventajas que se derivan directamente de su compatibilidad con schema.org:
- Los datos se estructuran de una manera inequívoca con el estándar de schema.org. Es una ventaja importante, ya que garantiza que puedas proporcionar una entrada significativa y coherente a cualquier componente web habilitado para JSON-LD.
- Los motores de búsqueda pueden consumir los datos de manera eficiente, lo que mejora la indexación de la página y puede generar fragmentos enriquecidos que se muestran en los resultados de la búsqueda.
- Si escribes componentes web de esta manera, no es necesario que aprendas ni crees una estructura (y documentación) nueva para los datos que esperan los componentes. schema.org ya hace todo el trabajo pesado y la creación de consenso por ti. También facilita la compilación de todo un ecosistema de componentes compatibles.
En resumen, JSON-LD y schema.org, combinados con la tecnología de componentes web, permiten crear elementos de IU reutilizables y encapsulados que son compatibles con los desarrolladores y los motores de búsqueda.
Crea tus propios componentes
Puedes probar los ejemplos en GitHub o leer la guía de Polymer sobre cómo crear componentes reutilizables para comenzar a escribir los tuyos. Consulta la documentación de datos estructurados en developers.google.com para obtener información sobre las diversas entidades que puedes marcar con JSON-LD.
No dudes en enviarnos un mensaje a @polymer para mostrarnos los elementos personalizados que creaste.