feed twitter facebook LinkedIn facebook

HTML5 » Microdata para una geolocalización con HTML5

octubre 17, 2012 por Víctor Cuervo . 8528 visitas Sin Comentarios Imprimir Imprimir

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.

Visualizar el Codigo
Visualiza el artículo
Descargar el Codigo
Descargar el código
Error en el Codigo
Error en el código
Foro sobre HTML5
Foro sobre HTML5
tags: , , , , , , ,

Artículos relacionados:

No Comments yet »

RSS feed para los comentarios de esta entrada.TrackBack URI

Deja un comentario

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*