Microdata para una geolocalización con HTML5

17/Oct/2012 HTML5 , 3 Comentarios

Seguimos con más ejemplos sobre microdata en HTML5 para aprender a definir nuevas entidades semánticas dentro de nuestros documentos HTML5.

En este caso vamos a ver como definir un microdata para una geolocalización. Algo muy útil cuándo estemos trabajando con mapas -seguro que ya has probado todos nuestros ejemplos del API de Google Maps-.

Lo que tenemos que saber es que una geolocalización se define por una latitud y una longitud. Por ejemplo la ciudad de Ávila está en la latitud 40.65599461 y la longitud -4.69373720. Así Schema.org nos define la entidad GeoCoordinates en http://schema.org/GeoCoordinates.

Así, que lo primero que tenemos para hacer es definir el ámbito de nuestra entidad mediante el atributo itemscope e indicar dónde está defina la entidad mediante el atributo itemtype.

  1. <div itemscope itemtype="http://schema.org/GeoCoordinates"></div>

Dentro de la entidad GeoCoordinates tenemos principalmente los atributos:

  • latitude, para especificar la latitud.
  • longitude, para especificar la longitud.

Así que asignaremos dichos nombres mediante los atributos itemprop. En este caso volvemos a utilizar un elemento span para dar la información.

  1. ¿Cual es la latitud/longitud de Ávila, España?
  2. <div itemscope itemtype="http://schema.org/GeoCoordinates">
  3. (<span itemprop="latitude">40.65599461</span>,<span itemprop="longitude">-4.69373720</span>)
  4. </div>

De una forma sencilla hemos dotado de semántica a la información de geolocalización de nuestra página HTML5.

3 comentarios en “Microdata para una geolocalización con HTML5”

Víctor Cuervo

VerdeMagenta

muy buen articulo, muy fácil de implementar

Víctor Cuervo

Víctor Cuervo

Cierto, fácil de implementar y muy útil. Saludos.

Víctor Cuervo

Cristopher Inostroza - Paginas Web

Magnífico. Este es un recurso que no sabía implementar bien.

Saludos.

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*