📚 Introducción al desarrollo web: HTML y CSS (2/2)

🗂️ Cómo se logra que una página web tenga éxito

🎥⏱️ 4m 52s

📖 La Web semántica (3)

⭐ Aspectos clave

Debes ver el vídeo La web semántica (3), en el que se explica el uso de Schema.org, se muestra un ejemplo de uso del tipo Recipe para recetas de cocina.

📝 Transcripción

Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a explicar brevemente en qué consiste la web semántica.

En los vídeos anteriores hemos visto que los tres grandes buscadores, Google, Bing y Yahoo, se unieron en junio de 2011 para definir un conjunto de vocabularios comunes para etiquetar los datos de las páginas web. Esta iniciativa se conoce con el nombre de Schema.org. En la actualidad, Schema.org está compuesta por 571 tipos que incluyen 832 propiedades, pero estos números van en aumento.

Uno de estos tipos es Recipe, que se emplea para etiquetar la información asociada a una receta de cocina. El tipo Recipe hereda del tipo CreativeWork. Recipe añade propiedades nuevas como cookTime, el tiempo de cocción; preTime, el tiempo de preparación; o recipeCuisine, para identificar el origen de la receta, como por ejemplo francesa o etíope. Al final de la explicación de cada tipo de Schema.org se pueden encontrar ejemplos de uso. Los ejemplos incluyen el código de etiquetado en diferentes formatos: microdato, RDFa y JSON for Linked Data.

Vamos a ver un ejemplo de uso. Para ello, en Google busco «recipe of paella», receta de paella en inglés. Obtengo esta página de resultado con un montón de recetas. En los dos primeros resultados reconozco ya el empleo del tipo Recipe de Schema.org. Vamos a analizar el primer resultado, que podemos ver que pertenece a un dominio llamado jamieolivier.com. Jamie Oliver es un famoso cocinero inglés, pero como veremos a continuación, Jamie Oliver no tiene mucha idea de cómo se hace una paella de marisco en España.

Si seleccionamos su página web, navegamos hasta la página que muestra la receta de la paella de marisco junto con una fotografía muy apetitosa. Vamos a ver la información que aparecía en el resultado de la búsqueda y de dónde sale de la página de Jamie Oliver.

En primer lugar, el título. El título, por supuesto, procede del título de la página, de la etiqueta title. La descripción que aparece en el resultado de la búsqueda procede de la etiqueta meta con el valor description, tal como podemos ver en la imagen. La valoración con las estrellas procede de esta parte de la página, el número de votos de esta otra parte, y la duración del tiempo de cocinado está definida aquí. Todo lo que estamos viendo está definido realmente en el código HTML mediante propiedades de Schema.org, como podemos ver en este fragmento de código en el que se ha empleado la propiedad totalTime para definir el tiempo total de preparación. Y el número de calorías está definido aquí.

Por último, como curiosidad, la «seafood paella», la paella de marisco auténtica, no lleva ni pollo, ni chorizo, ni panceta o beicon, ni caldo de pollo, tal como propone Jamie Oliver. Sí que hay platos españoles que llevan chorizo, como la fantástica fabada o las alubias con chorizo, pero esto de paella de mariscos con chorizo no es muy típico en España. Existen muchas recetas de paella de marisco, pero ninguna de ellas lleva chorizo.

Como vemos, gracias a la web semántica, el funcionamiento de los buscadores puede mejorar mucho. Ahora falta que mejore el funcionamiento de algunos cocineros.

Por último, en la web para desarrolladores de Google se puede encontrar mucha información sobre el uso de los datos estructurados, y por supuesto, sobre el uso de Schema.org para etiquetar recetas de cocina. Ya para terminar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo: a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora.

Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.

Muchas gracias por tu atención.