Haga que los microdatos HTML5 sean útiles, Parte 1: Usando encima de los microdatos jQuery

Cree un mapa interactivo con el plug-in jQuery UI Map y sus microdatos

La especificación de microdatos lista dos razones por las cuales usted querría usar microdatos: para permitir que scripts genéricos proporciones servicios que están personalizados para la página o para permitir que contenido de una variedad de autores cooperativos, sea procesado por un solo script de manera consistente. En esta serie de dos partes, aprenda cómo usar microdatos de estas dos formas, comenzando con scripts genéricos encima de microdatos. En este artículo, usted escribirá un fragmento de HTML para tener un mapa de eventos interactivo y p ara permitir que Google, Bing y Yahoo muestren mejor su página en resultados de búsqueda con Rich Snippets.

Lin Clark, Drupal Developer, Digital Enterprise Research Institute, NUI Galway

Author photoLin Clark es desarrolladora Drupal especializada en Linked Data. Ella es quien mantiene múltiples módulos Drupal, como Vistas Microdata y SPARQL, y es participante activa de la HTML Data Task Force de la W3C, y de la iniciativa HTML5 de Drupal. Asistió a la Universidad Carnegie Mellon y está terminando una maestría en investigación en el Digital Enterprise Research Institute en NUI Galway. Hay más información disponible en lin-clark.com.



16-02-2012

Introducción

Bibliotecas como jQuery han revolucionado la forma en que los desarrolladores crean sitios, incitando al desarrollo de una gran colección de scripts listos para usar que usted simplemente añade a páginas HTML. Los microdatos tienen el potencial para llevar esta revolución un paso más adelante, facilitando la creación de scripts que funcionan sin problemas en cualquier sitio, independientemente de las variaciones en las plantillas HTML.

Acrónimos de uso frecuente

  • CSV: Valor separado por comas
  • JSON: JavaScript Object Notation
  • RDF: Resource Description Framework
  • RDFa: RDF en atributos
  • SEO: Optimización de motor de búsqueda

Por ejemplo, para mostrar eventos planeados en un mapa, los plug-in jQuery se integran con los mapas de Google y facilitan la creación de un mapa interactivo en su sitio. El único esfuerzo requerido de parte suya es la creación de un archivo en un formato estructurado, como JSON o CSV, que contenga las ubicaciones. Aunque tener estos datos en un formato separado y estructurado puede ser un problema si usted también desea mostrar la información en HTML en la página. Para mantener el contenido en el archivo HTML y en el de datos, usted debe escribir un script que traduzca entre el HTML de la página y el archivo de datos, o debe duplicar su esfuerzo. Este enfoque puede conducir a que los archivos HTML y los de datos pierdan su sincronización con bastante rapidez.

Mantener los datos en sincronización es una ventaja principal de usar formatos de datos como microdatos y RDFa—usted puede escribir HTML como lo haría normalmente y luego añadir algunos atributos en la etiquetas HTML para que sea el doble de su espacio de almacenamiento. Como estos formatos de datos HTML son estándares web desarrollados y sancionados por WHATWG y W3C, las personas ya crean herramientas que entienden cómo extraer datos del HTML y usted puede reutilizar fácilmente estas herramientas en su sitio.

Como los microdatos hasta ahora han comenzado a tomar impulso recientemente, solo algunos plug-in han sido publicados con soporte. Un ejemplo es el plug-in jQuery UI Map, el cual proporciona el tipo de mapa descrito arriba.


Creando un mapa de eventos listo para Rich Snippet

Usted puede usar un segmento pequeño de HTML para obtener un mapa de evento interactivo y mejor SEO.

Como se describió en un artículo anterior, (vea Recursos donde encontrará un enlace), los microdatos pueden ser usados pueden ser usados con términos del vocabulario Schema.org para ayudar a los motores de búsqueda a entender mejor su contenido. Este enfoque permite a los motores de búsqueda mostrar Rich Snippets, los cuales incluyen la información más importante sobre la página en el resultado de búsqueda mismo.

Las anotaciones que usted añade para obtener Rich Snippets pueden representar doble trabajo. Además de mejores trabajos de búsqueda, usted también puede usarlos en su propia página para proporcionar una mejor presentación.

Para hacer esto usted usará el plug-in jQuery. En el código de ejemplo incluyo loa archivos relevantes descargar, el cual incluye una versión ligeramente modificada del plug-in.


El listado de evento básico

Vamos a crear el listado de eventos DrupalCamp en todo el mundo. Para comenzar, cree una página HTML con dos eventos como en el Listado 1.

Listado 1. HTML básico listando dos eventos
<!DOCTYPE html>
  <head>
    <title>Upcoming DrupalCamps</title>
  </head>
  <body id="doc">
    <h1>Upcoming DrupalCamps</h1>

    <!-- Event 1: DrupalCamp Toulouse -->
    <div>
      <h2><a href="http://example.com/drupalcamp_fr">DrupalCamp Toulouse 2011</a></h2>
      <img src='images/drupalicon_fr.png' />
      <p>Vous l&rsquo;attendiez tous, le DrupalCamp Toulouse aura bien lieu, 
r&#233;uni avec 2 autres &#233;v&#233;nements sous la bannière 
"Capitole du Libre": le DrupalCamp, une Ubuntu Party, une Akademy 
(&#233;v&#232;nement KDE).</p>
      <div>
        ENSEEIHT, Toulouse, Haute-Garonne, FR
      </div>
      <div>
        <time datetime="2011-11-26T09:00:00+01:00">November 26, 10:00am</time> &ndash;
        <time datetime="2011-11-27T17:00:00+01:00">November 27, 6:00pm</time>
      </div>
    </div>

    <!-- Event 2: DrupalCamp Ohio -->
    <div>
      <h2><a href="http://example.com/drupalcampohio">Drupalcamp Ohio 2011</a></h2>
      <img src='images/drupalicon_oh.png' />
      <p>The Central Ohio Drupal User Group (CODUG) is proud to announce 
Ohio&rsquo;s first Drupalcamp. On Saturday, December 3rd, we&rsquo;ll hold an 
all-day camp with keynote speaker, breakout sessions and Birds of Feather groups at The 
Ohio State University&rsquo;s Nationwide and Ohio Farm Bureau 4-H Center.</p>
      <div>
        The Ohio State University, Columbus, Ohio, US
      </div>
      <div>
        <time datetime="2011-12-03T09:00:00-05:00">December 3, 9:00am</time> &ndash;
        <time datetime="2011-12-03T17:00:00-05:00">5:00pm</time>
      </div>
    </div>

  </body>
</html>

Observe que usted marcó las fechas con un elemento especial. Este elemento es el nuevo elemento tiempo, que es parte del HTML5 esencial estándar. Este le permite añadir horas exactas a las páginas de manera que puedan ser analizadas fácilmente por las aplicaciones. En este ejemplo, Google usa estos elementos de tiempo para seleccionar los siguientes tres eventos de la página para mostrar en Rich Snippets. Observe que en el momento de la publicación hay una discusión sobre si cambiar el elemento de tiempo por un elemento de datos más genérico. Si esto sucede, "time" será reemplazado por "data" y "datetime" será reemplazado por "value" en el código que hay abajo.

El datetime está conformado comenzando con la fecha en formato AAAA-MM-DD. Luego, una "T" separa la fecha de la hora, la cual está en formato HH:MM:SS. Luego se incluye la compensación con respecto a la Hora Universal Coordinada (UTC). Por ejemplo, en el invierno Francia está una hora más delante de UTC, por lo que la primera compensación añade '+01:00' al final de la cadena de caracteres datetime. Ohio está 5 antes del UTC en el invierno, por lo que la compensación añade '-05:00' al final de la secuencia datetime. Esta adición da como resultado el valor legible por máquina "2011-12-03T09:00:00-05:00" de las 9am Horario Central Estándar el 3 de diciembre del 2011.

Guarde el archivo en el directorio jquery-ui-map/demos en su servidor web y cárguelo en su navegador. La Figura 1 muestra los detalles de ambos eventos descritos en el Listado 1.

Figura 1. Página básica listando dos eventos
Página básica listando dos eventos

Haciendo a los eventos listos para Rich Snippet

La máquina con el elemento de tiempo incluye un poco de información que la máquina comprende. Ahora vea si esta adición ha cambiado la forma en que Google presenta los resultados. Vaya a la Rich Snippets Testing Tool de Google e ingrese el URL para su página web (vea la Figura 2). En lugar de detalles de eventos, usted ve errores de generación de vistas previas que dicen que la página no tiene marcación de autor, marcación de rich snippet ni información de autor.

Figura 2. No hay resultados para HTML básico en la herramienta de pruebas Rich Snippets
No hay resultados para HTML básico en la herramienta de pruebas Rich Snippets

Incluso aunque Google sabe que su página lista horas, esta no sabe que esas horas son de inicio y terminación de eventos. Para ayudar a Google a que entienda esto, usted necesita añadir algunos términos Schema.org (vea el Listado 2). Publicar la marcación Schema.org con microdatos se trata en detalle en un artículo anterior (vea Recursos donde encontrará un enlace).

Listado 2. Convierta el <div> de cada evento en un elemento Event
<!-- Event 1: DrupalCamp Toulouse -->
<div itemscope itemtype="http://schema.org/Event">
  ...
</div>

<!-- Event 2: DrupalCamp Ohio -->
<div itemscope itemtype="http://schema.org/Event">
  ...
</div>

Luego añada el url y las propiedades de nombre al evento. Observe que usted añade un <span> en torno al nombre para tener lugar para añadir el atributo itemprop . Usted también añade la propiedad de imagen. Para este Rich Snippet usted no necesita la imagen, pero la utilizará más adelante.

Listado 3. Añada el url y las propiedades de nombre al evento
<!-- Event 1: DrupalCamp Toulouse -->
<div itemscope itemtype="http://schema.org/Event">
  <h2><a href="http://example.com/drupalcamp_fr" itemprop="url"><span 
itemprop="name">DrupalCamp Toulouse 2011</span></a></h2>
  <img itemprop="image" src='images/drupalicon_fr.png' />
  ...
</div>

<!-- Event 2: DrupalCamp Ohio -->
<div itemscope itemtype="http://schema.org/Event">
  <h2><a href="http://example.com/drupalcampohio" itemprop="url"><span 
itemprop="name">Drupalcamp Ohio 2011</span></a></h2>
  <img itemprop="image" src='images/drupalicon_oh.png' />
  ...
</div>

Ahora usted puede añadir hora de inicio y (opcionalmente) una hora de terminación. Como usted usó el elemento de tiempo, ya cuenta con un valor legible por máquina para las horas de inicio y de terminación. Usted solo necesita añadir los términos Schema.org para permitir que Google sepa cuál es cual (vea el Listado 4).

Listado 4. Añada las propiedades startDate y endDate sobre los elementos de tiempo
<!-- Event 1: DrupalCamp Toulouse -->
<div itemscope itemtype="http://schema.org/Event">
  ...
  <div>
    <time itemprop="startDate" datetime="2011-11-26T09:00:00+01:00">November 26, 
10:00am</time> &ndash;
    <time itemprop="endDate" datetime="2011-11-27T17:00:00+01:00">November 27, 
6:00pm</time>
  </div>
</div>

<!-- Event 2: DrupalCamp Ohio -->
<div itemscope itemtype="http://schema.org/Event">
  ...
  <div>
    <time itemprop="startDate" datetime="2011-12-03T09:00:00-05:00">December 3, 
9:00am</time> &ndash;
    <time itemprop="endDate" 
datetime="2011-12-03T17:00:00-05:00">5:00pm</time>
  </div>
</div>

Pruebe la página en la Testing Tool. Como los URL apuntan a un dominio diferente al URL base, usted usa advertencias para evitar que aparezca Rich Snippet (Figura 3).

Figura 3. Advertencia que evita que aparezca el Rich Snippet
Advertencia que evita que aparezca el Rich Snippet

Google requiere que los enlaces hacia los eventos apunten hacia páginas dentro del mismo dominio. Este requerimiento está diseñado para evitar prácticas de spam. Si usted busca y reemplaza example.com con su dominio y prueba de nuevo, deberá ver el Rich Snippet en pantalla como en la Figura 4.

Figura 4. Rich Snippet mostrando ambos eventos con sus fechas de inicio
Rich Snippet mostrando ambos eventos con sus fechas de inicio

Observe que incluso si la herramienta de prueba le muestra un Rich Snippet, no se le garantiza que vaya a tener visualizaciones de Rich Snippet en resultados de búsqueda reales. Usted debe aplicar a Google para que su sitio sea revisado antes de que Google active el resultado de Rich Snippet para sus páginas en resultados de búsqueda. Para más información sobre esto, consulte las Preguntas Frecuentes.


Añadiendo el mapa jQuery UI

Como los DrupalCamps están sucediendo en todo el mundo, sus visitantes querrán un mapa que muestre cuáles eventos están dentro de una distancia de viaje razonable. Para obtener un mapa, simplemente añada algunas piezas de información adicionales.

Primero, configure el mapa para visualización. Añada un <div> en el documento para poner el mapa debajo del encabezado de página y por encima del listado de eventos (Listado 5).

Listado 5. Añadiendo el mapa <div>.
<body id="doc">
  <h1>Upcoming DrupalCamps</h1>

  <div>
    <div id="map_canvas"></div>
  </div>

 <!-- Event 1: DrupalCamp Toulouse -->

Usted necesita añadir algunos archivos JavaScript para convertir este <div> en un mapa interactivo. Añada también algunos archivos CSS, lo cual le da altura al #map_canvas <div> para que usted pueda verlo. Los archivos locales están incluidos en el código fuente (vea Descargas).

Listado 6. Añadiendo el CSS externo, las bibliotecas JavaScript y el jQuery incorporado
<head>
  <title>Upcoming DrupalCamps</title>

  <!-- External Stylesheets -->
  <link rel="stylesheet" type="text/css" 
href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css" />
  <link rel="stylesheet" type="text/css" 
href="http://yui.yahooapis.com/3.2.0/build/cssbase/base-min.css" />
  <link rel="stylesheet" type="text/css" 
href="http://yui.yahooapis.com/3.2.0/build/cssfonts/fonts-min.css" />
  <link rel="stylesheet" type="text/css" href="css/main.css" />

  <!-- Google Maps API and jQuery, served by Google -->
  <script type="text/javascript" 
src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
  <!-- jQuery UI Maps files for placing markers and for parsing Microdata -->
  <script type="text/javascript" src="../web/jquery.fn.gmap.js"></script>
  <script type="text/javascript" 
src="../ui/jquery.ui.map.services.js"></script>
  <script type="text/javascript" 
src="../ui/jquery.ui.map.microdata.js"></script>
  ...

Luego añada un bloque de jQuery, el cual obtiene el #map_canvas div cuando la página se inicializa y lo convierte en un mapa (vea el Listado 7). Usted añadirá más a esta función más adelante.

Listado 7. Inicializando el mapa
...
  <!-- Grab the #map_canvas div and turn it into a map -->
  <script type="text/javascript">
    $(function() {
      map = $('#map_canvas');

      map.gmap().bind('init', function () {
      });
    });
  </script>
</head>

Cuando usted recarga la página, necesitará el mapa (en la Figura 5). Este todavía no tiene ningún evento marcado; usted todavía necesita añadir un poco más de información para los que aparezcan.

Figura 5. Un mapa básico sin ningún marcador
Un mapa básico sin ningún marcador

Añadiendo las ubicaciones en microdatos

Usted necesita añadir las ubicaciones de los eventos en microdatos antes de poder añadir los marcadores al mapa. Por ahora, trate cada dirección como una cadena individual. No obstante las direcciones tienen múltiples partes diferentes y usted desea expresar esta estructura en los microdatos para obtener los valores correctos de manera fácil y consistente, incluso si usted cambia la estructura HTML después.

Primero, añada la propiedad de ubicación, la cual toma un Place como su valor (vea el Listado 8).

Listado 8. Añadiendo la propiedad de ubicación al evento
<!-- Event 1: DrupalCamp Toulouse -->
<div itemscope itemtype="http://schema.org/Event">
  ...
  <div itemprop="location" itemscope itemtype="http://schema.org/Place">
    ENSEEIHT, Toulouse, Haute-Garonne, FR
  </div>
  ...
</div>

El Place puede tener un nombre y una dirección postal. Una dirección postal es un elemento con sus propias propiedades, como la dirección de la calle (addressLocality), el estado (addressRegion) y addressCountry, que serían las dos letras del código de país ISO 3166-1 alpha-2. El Listado 9 descompone estas propiedades usando etiquetas span.

Listado 9. Usando etiquetas span
<!-- Event 1: DrupalCamp Toulouse -->
<div itemscope itemtype="http://schema.org/Event">
  ...
  <div itemprop="location" itemscope itemtype="http://schema.org/Place">
    <span itemprop="name">ENSEEIHT</span><br /> 
    <span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
      <span itemprop="streetAddress">Rue Sylvain Dauriac</span><br />
      <span itemprop="addressLocality">Toulouse</span>,
      <span itemprop="addressRegion">Haute-Garonne</span>,
      <span itemprop="addressCountry">FR</span>
    </span>
  </div>
  ...
</div>

Usted puede dar formato a la dirección para el otro evento de la misma forma.


Poniendo las ubicaciones en el mapa

Usted está listo para añadir los marcadores al mapa. Primero, analice los microdatos en la página hacia un objeto que usted pueda usar. Para hacer esto, especifique cuál tipo de elemento de nivel superior es la fuente de los datos que usted desea. Los elementos de nivel superior en los microdatos pueden verse como elementos raíz; son elementos que no son propiedad de ningún otro elemento pero tienen sus propiedades. Especifique http://schema.org/Event. Esto retorna un objeto para cada uno de los Eventos (vea el Listado 10).

Listado 10. Analizando los datos hacia un objeto
<script type="text/javascript">
    $(function() {
      map = $('#map_canvas');

      map.gmap().bind('init', function () {
        // Process the microdata for each Event into an object.
        map.gmap('microdata', 'http://schema.org/Event', function(result, item, index) {
          window.console.log(result);
        });
      });
    });
</script>

Usted puede ver el objeto que es creado desde los microdatos en la consola JavaScript en navegadores como Firefox yChrome. Cada elemento en microdatos es traducido hacia un objeto con su propio objeto de propiedades, el cual contiene cualquiera de los valores itemprop de ese elemento. Como las propiedades en los microdatos pueden tener múltiples valores, los valores itemprop son manejados como arreglos (vea la Figura 6).

Figura 6. Examinando el objeto en la consola JavaScript de Chrome
Examinando el objeto en la consola JavaScript de Chrome

Este objeto tiene todas las propiedades que usted necesita para obtener las coordenadas geográficas de la ubicación, las cuales usted necesita para poner el marcador para un evento. Para obtener esta información, extraiga las partes de la dirección del objeto y combínelas en una cadena de caracteres de dirección que Google pueda entender. Luego usted puede usar el Geocoder de Google para obtener las coordenadas para esta dirección. La biblioteca jQuery UI Map proporciona una función de empaquetador que usted puede usar para ejecutar la solicitud Geocoder.

Observe que si usted obtiene un error indefinido, revisa dos veces para asegurarse de contar con todas las propiedades requeridas en todos los Eventos que están listados (vea el Listado 11).

Listado 11. Ejecutando la solicitud Geocoder para la dirección
<script type="text/javascript">
    $(function() {
      map = $('#map_canvas');

      map.gmap().bind('init', function () {
        // Process the Microdata for each Event into an object.
        map.gmap('microdata', 'http://schema.org/Event', function(result, item, index) {
          // Traverse from the Event to the Place and from the Place to the
          // Address to get the properties.
          var placeName = result.properties.location[0].properties.name[0];
          var streetAddress = 
result.properties.location[0].properties.address[0].properties.streetAddress[0];
          var city = 
result.properties.location[0].properties.address[0].properties.addressLocality[0];
          var state = 
result.properties.location[0].properties.address[0].properties.addressRegion[0];
          var country = 
result.properties.location[0].properties.address[0].properties.addressCountry[0];

          // Join the address parts into a comma-separated string.
          var address = [placeName, city, state, country].join(', ')

          // Run the Geocoder request for the address.
          map.gmap('search', {'address': address } , function(result, status) {
            window.console.log(result);
            // We will place the marker here.
          });
        });
      });
    });
</script>

Si usted observa el resultado en la consola, verá que el servicio ha retornado una o más ubicaciones que coinciden con su dirección. Usted usará el primero, dado que es el mejor resultado. El objeto tiene una propiedad geométrica que contiene la información de coordenadas geográficas que usted necesita (vea el Listado 12).

Listado 12. Ubicando el marcador
<script type="text/javascript">
    $(function() {
      map = $('#map_canvas');
      map.gmap().bind('init', function () {
        // Process the Microdata for each Event into an object.
        map.gmap('microdata', 'http://schema.org/Event', function(result, item, index) {
          // Traverse from the Event to the Place and from the Place to the
          // Address to get the properties.
          var placeName = result.properties.location[0].properties.name[0];
          var streetAddress =
result.properties.location[0].properties.address[0].properties.streetAddress[0];
          var city = 
result.properties.location[0].properties.address[0].properties.addressLocality[0];
          var state = 
result.properties.location[0].properties.address[0].properties.addressRegion[0];
          var country = 
result.properties.location[0].properties.address[0].properties.addressCountry[0];

          // Join the address parts into a comma-separated string.
          var address = [placeName, city, state, country].join(', ')

          // Run the Geocoder request for the address.
          map.gmap('search', {'address': address } , function(result, status) {
            if (status == google.maps.GeocoderStatus.OK) {
              // Create a LatLng object.
              var lat = result[0].geometry.location.lat();
              var lng = result[0].geometry.location.lng();
              var latlng = new google.maps.LatLng(lat, lng);
  
              // Place the marker.
              var markerOptions = { 
                'bounds':true,
                'position': latlng
              };
              map.gmap('addMarker', markerOptions);
            } else {
              alert("Geocode was not successful for the following reason: " + status);
            }
          });
        });
      });
    });
</script>

Cuando vuelva a cargar la página, deberá ver marcadores de ubicación como en la Figura 7.

Figura 7. Marcadores ubicados en el mapa
Marcadores ubicados en el mapa

Haciendo al mapa interactivo

El mapa es incluso más útil si los usuarios pueden hacer clic en el marcador para obtener incluso más detalles, como la fecha y un enlace hacia el evento. Añadir esta funcionalidad no es difícil.

Primero, extraiga la información adicional que usted desea sobre el evento, de los microdatos analizados (vea el Listado 13).

Listado 13. Obteniendo la información suplementaria
<script type="text/javascript">
    $(function() {
      map = $('#map_canvas');
      map.gmap().bind('init', function () {
        // Process the Microdata for each Event into an object.
        map.gmap('microdata', 'http://schema.org/Event', function(result, item, index) {
          var eventName = result.properties.name[0];
          var logo = result.properties.image[0];
          var url = result.properties.url[0];
          var start = result.properties.startDate[0];

          ...
      });
    });
</script>

Antes de que usted añada el marcador al mapa, cree un bloque de HTML con los detalles del evento (vea el Listado 14).

Listado 14. Creando el HTML para la ventana de información
            // Run the Geocoder request for the address.
            map.gmap('search', {'address': address } , function(result, status) {
              if (status == google.maps.GeocoderStatus.OK) {
                // Create a LatLng object.
                var lat = result[0].geometry.location.lat();
                var lng = result[0].geometry.location.lng();
                var latlng = new google.maps.LatLng(lat, lng);
    
                var eventDetails = '';
                eventDetails += '<div class="iw">';
                eventDetails += '<img src="'+logo+'"></img>';
                eventDetails += '<h2><a href="'+url+'">'+eventName+'</a></h2>';
                eventDetails += new Date(start).toDateString();
                eventDetails += '</div>';
    
                // Place the marker.
                ...

Luego añada los detalles de evento al marcador que está creando. Use .click de jQuery para decir cuál función ejecutar cuando alguien haga clic en el marcador. En la función, use la función de ayuda openInfoWindow proporcionada por la biblioteca jQuery UI Maps para construir la nueva ventana y simplemente pase su HTML como el contenido para esa ventana (vea el Listado 15).

Listado 15. Añadiendo la ventana Info Window como un evento de clic
            // Place the marker.
            ...
            map.gmap('addMarker', markerOptions).click( function() {
              map.gmap('openInfoWindow', { 'content': eventDetails }, this ); 
            });

Recargue esto después de que se haya realizado esta tarea y luego haga clic en el marcador. Usted verá la ventana emergente con los detalles de evento (vea Figura 8).

Figura 8. Evento de clic en el marcador
Evento de clic en el marcador

Para mejorar la apariencia, añada algunas reglas CSS. Yo añadí estas en el código de muestra descargable (vea Descarga). Finalmente, su mapa debe verse como la Figura 9.

Figura 9. Mapa final
Mapa final

Conclusión

Los microdatos facilitan bastante el uso de datos en su página de formas dinámicas, como con Google Maps, usando plug-ins jQuery. La especificación de microdatos habla sobre los scripts genéricos que usted puede usar como plug-in en diferentes sitios no relacionados. Los microdatos facilitan combinar datos desde múltiples sitios diferentes para crear nuevas aplicaciones. En el siguiente artículo, demostraré cómo puede usted usar Drupal para crear tal aplicación.


Descargar

DescripciónNombretamaño
Article source codejquerymicrodatapt1_source.zip464KB

Recursos

Aprender

Obtener los productos y tecnologías

Comentar

Comentarios

developerWorks: Ingrese

Los campos obligatorios están marcados con un asterisco (*).


¿Necesita un IBM ID?
¿Olvidó su IBM ID?


¿Olvidó su Password?
Cambie su Password

Al hacer clic en Enviar, usted está de acuerdo con los términos y condiciones de developerWorks.

 


La primera vez que inicie sesión en developerWorks, se creará un perfil para usted. La información en su propio perfil (nombre, país/región y nombre de la empresa) se muestra al público y acompañará a cualquier contenido que publique, a menos que opte por la opción de ocultar el nombre de su empresa. Puede actualizar su cuenta de IBM en cualquier momento.

Toda la información enviada es segura.

Elija su nombre para mostrar



La primera vez que inicia sesión en developerWorks se crea un perfil para usted, teniendo que elegir un nombre para mostrar en el mismo. Este nombre acompañará el contenido que usted publique en developerWorks.

Por favor elija un nombre de 3 - 31 caracteres. Su nombre de usuario debe ser único en la comunidad developerWorks y debe ser distinto a su dirección de email por motivos de privacidad.

Los campos obligatorios están marcados con un asterisco (*).

(Por favor elija un nombre de 3 - 31 caracteres.)

Al hacer clic en Enviar, usted está de acuerdo con los términos y condiciones de developerWorks.

 


Toda la información enviada es segura.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=90
Zone=
ArticleID=793891
ArticleTitle=Haga que los microdatos HTML5 sean útiles, Parte 1: Usando encima de los microdatos jQuery
publish-date=02162012