1.1. La Web y el HTML
La World Wide Web, que se abrevia WWW y se conoce también como la Web, es un sistema de páginas enlazadas mediante el concepto de hipertexto. El hipertexto es un texto que refiere a otro texto al que el lector puede tener acceso inmediato. El lenguaje tradicional y predominante sobre el que se sustenta la Web y que tiene capacidades de hipertexto es el HTML (HyperText Markup
Language, ‘lenguaje de marcas de hipertexto’).
Language, ‘lenguaje de marcas de hipertexto’).
Hasta hace relativamente poco era necesario conocer el lenguaje HTML para poder publicar una página web en Internet. Si bien el HTML es un lenguaje muy directo, en el que buena parte del código es el contenido propiamente dicho del documento, como contrapartida es engorroso de escribir. Así, por ejemplo, para mostrar una palabra en negrita, es necesario intercalar en el texto
más de media docena de caracteres extras.
1.2. Elementos y etiquetas
El lenguaje HTML se utiliza para describir la estructura y el contenido de un documento, así como para complementar el texto con objetos (por ejemplo, mapas) e imágenes.
Un típico código HTML está formado por elementos que configuran las distintas partes del documento. Generalmente, estos elementos están delimitados por una etiqueta de inicio y otra de fin, que se escriben siempre entre corchetes angulares ("<" y ">").
Por ejemplo, la línea siguiente:
<p>La WWW nació en el CERN.</p>
define un elemento (párrafo) cuyo contenido es “La WWW nació en el CERN.”. Como podemos ver, las etiquetas de inicio y fin (<p> y </p> respectivamente) delimitan el contenido del párrafo. Además, la etiqueta de fin es igual que la de inicio pero precedida por una barra (“/”).
1.3. Estructura mínima de un documento HTML
Un documento HTML bien formado debe presentar siempre la siguiente estructura mínima:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="es">
<head>
<title>Título del documento</title>
</head>
<body>
Contenido del documento.
</body>
</html>
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="es">
<head>
<title>Título del documento</title>
</head>
<body>
Contenido del documento.
</body>
</html>
Como podemos observar, la estructura mínima de un documento HTML está formada por cinco elementos:
• DOCTYPE. Especifica la versión del lenguaje HTML que obedece el documento (en el ejemplo, la 4.01).
• HTML. Es el elemento raíz, el que define el documento HTML en sí. Contiene obligatoriamente los elementos head y body. Como puede apreciarse en el ejemplo, el elemento html puede contener el atributo lang, que define el idioma del documento (“es” de español).
• DOCTYPE. Especifica la versión del lenguaje HTML que obedece el documento (en el ejemplo, la 4.01).
• HTML. Es el elemento raíz, el que define el documento HTML en sí. Contiene obligatoriamente los elementos head y body. Como puede apreciarse en el ejemplo, el elemento html puede contener el atributo lang, que define el idioma del documento (“es” de español).
• HEAD. Define la cabecera del documento, cuyo cometido es alojar información
sobre el mismo. El título, las palabras clave y otros datos que no se consideran parte del contenido del documento irán dentro de este elemento.
• TITLE. Define el título del documento.
• BODY. Define el contenido del documento. Este elemento contendrá otros que definirán el contenido del documento
sobre el mismo. El título, las palabras clave y otros datos que no se consideran parte del contenido del documento irán dentro de este elemento.
• TITLE. Define el título del documento.
• BODY. Define el contenido del documento. Este elemento contendrá otros que definirán el contenido del documento
1.4. Definición del contenido
El contenido de un documento HTML puede definirse mediante tres tipos de elementos:
• Estructurales. Son aquellos que describen la estructura del texto. En HTML tenemos elementos estructurales para definir títulos, párrafos, tablas, enumeraciones, etc. Normalmente, los navegadores aplican diferentes estilos de presentación a cada elemento.
• De presentación. Son aquellos que describen el aspecto del texto, independientemente de su función. Los elementos que definen negritas, cursivas, texto enfatizado, etc. son elementos de presentación.
• De hipertexto. Son aquellos que permiten enlazar con otros documentos mediante la creación de hipervínculos. Son los más importantes dada la naturaleza hipertextual de la Web.
• Estructurales. Son aquellos que describen la estructura del texto. En HTML tenemos elementos estructurales para definir títulos, párrafos, tablas, enumeraciones, etc. Normalmente, los navegadores aplican diferentes estilos de presentación a cada elemento.
• De presentación. Son aquellos que describen el aspecto del texto, independientemente de su función. Los elementos que definen negritas, cursivas, texto enfatizado, etc. son elementos de presentación.
• De hipertexto. Son aquellos que permiten enlazar con otros documentos mediante la creación de hipervínculos. Son los más importantes dada la naturaleza hipertextual de la Web.
2. Google Maps
Google Maps es la herramienta SIG en línea de Google. Permite explorar mapas en 2D de casi cualquier parte del mundo. La popularidad de la que goza Google Maps en la actualidad se debe principalmente a su buen rendimiento, su vasta cartografía y la posibilidad de incorporar toda esta tecnología a cualquier sitio web mediante el uso de la API* (de Application Programming Interface,
‘interfaz de programa de aplicación’) de Google Maps. En los apartados siguientes, veremos cómo incorporar un mapa a nuestra página y cómo hacer uso de la API para trabajar sobre él.
‘interfaz de programa de aplicación’) de Google Maps. En los apartados siguientes, veremos cómo incorporar un mapa a nuestra página y cómo hacer uso de la API para trabajar sobre él.
2.1. Incorporar un mapa en una página
La forma más sencilla de incorporar un mapa en nuestra página es utilizando el web de Google Maps y, una vez seleccionada la ubicación que deseamos mostrar, incorporar el código HTML que nos proporciona Google a nuestra página.
Veámoslo paso a paso. En primer lugar, debemos seleccionar una ubicación en maps.google.es. Esto se puede hacer mediante la caja de búsqueda o navegando por el mapa.
En segundo lugar, hemos de seleccionar la opción Enlazar y copiar el código HTML que aparece en la caja “Pegar HTML para insertar en sitio web”.
El tercer y último paso será incorporar este código en nuestra página HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Nationaal Park De Hoge Veluwe</title>
</head>
<body>
<p>El <em>Nationaal Park De Hoge Veluwe</em> (el Parque
Nacional <em>De Hoge Veluwe</em> es un parque nacional
neerlandés situado en la provincia de Gelderland, cerca
de las ciudades de Ede, Arnhem y Apeldoorn.</p>
<iframe width="425" height="350" frameborder="0"
scrolling="no" marginheight="0" marginwidth="0"
src="http://maps.google.com/?hl=es&ie=UTF8
&ll=52.075286,5.889359&spn=0.261235,0.698318
&z=11&output=embed">
</iframe><br />
<small><a href="http://maps.google.com/?hl=es
&ie=UTF8&ll=52.075286,5.889359
&spn=0.261235,0.698318&z=11&source=embed"
style="color:#0000FF;text-align:left">Ver mapa más
grande</a></small>
</body>
</html>
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Nationaal Park De Hoge Veluwe</title>
</head>
<body>
<p>El <em>Nationaal Park De Hoge Veluwe</em> (el Parque
Nacional <em>De Hoge Veluwe</em> es un parque nacional
neerlandés situado en la provincia de Gelderland, cerca
de las ciudades de Ede, Arnhem y Apeldoorn.</p>
<iframe width="425" height="350" frameborder="0"
scrolling="no" marginheight="0" marginwidth="0"
src="http://maps.google.com/?hl=es&ie=UTF8
&ll=52.075286,5.889359&spn=0.261235,0.698318
&z=11&output=embed">
</iframe><br />
<small><a href="http://maps.google.com/?hl=es
&ie=UTF8&ll=52.075286,5.889359
&spn=0.261235,0.698318&z=11&source=embed"
style="color:#0000FF;text-align:left">Ver mapa más
grande</a></small>
</body>
</html>
2.2. La API de Google Maps
Afortunadamente, Google Maps nos ofrece muchas más posibilidades que las que hemos visto hasta ahora. Sin embargo, éstas se obtienen a costa de la facilidad de uso, pues se requieren unos mínimos conocimientos de programación para poder sacarles partido.
A esta funcionalidad adicional se accede por medio de la API de Google Maps, mediante un conjunto de tecnologías agrupadas bajo la denominación AJAX (Asynchronous JAvascript and XML, ‘JavaScript asíncrono y XML’). Como su nombre indica, AJAX está compuesto por dos tecnologías:
A esta funcionalidad adicional se accede por medio de la API de Google Maps, mediante un conjunto de tecnologías agrupadas bajo la denominación AJAX (Asynchronous JAvascript and XML, ‘JavaScript asíncrono y XML’). Como su nombre indica, AJAX está compuesto por dos tecnologías:
• JavaScript. Es un lenguaje muy parecido a Java que se usa para alterar documentos HTML de forma dinámica. Es importante remarcar que no es Java; sólo está basado en él.
• XML. Es un lenguaje usado para el intercambio de datos (sigla de eXtensible Markup Language, ‘lenguaje de marcas extensible’). Es una forma genérica de escribir documentos maximizando su simplicidad, su generalidad y su usabilidad.
Ambas tecnologías, integradas en un documento HTML, permiten obtener mapas y datos de los servidores de Google Maps y mostrarlos en la página.
Ambas tecnologías, integradas en un documento HTML, permiten obtener mapas y datos de los servidores de Google Maps y mostrarlos en la página.
2.2.1. Crear un mapa
La función más elemental que nos ofrece la API de Google Maps es crear un mapa. El mapa se mostrará de forma muy parecida a cuando se copia el código HTML del sitio de Google Maps: centrado en un punto y con un nivel de zoom determinado. Además, se mostrarán una serie de controles mínimos que nos permitirán desplazarnos por el mapa, variar su ampliación y seleccionar el tipo de mapa mostrado.
La función más elemental que nos ofrece la API de Google Maps es crear un mapa. El mapa se mostrará de forma muy parecida a cuando se copia el código HTML del sitio de Google Maps: centrado en un punto y con un nivel de zoom determinado. Además, se mostrarán una serie de controles mínimos que nos permitirán desplazarnos por el mapa, variar su ampliación y seleccionar el tipo de mapa mostrado.
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type"
content="text/html; charset=utf-8"/>
<title>Universitat Oberta de Catalunya</title>
<script src="http://maps.google.com/maps?file=api
&v=2&key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
type="text/javascript"></script>
<script type="text/javascript">
function InicializarMapa() {
var mapa;
var centro;
if (GBrowserIsCompatible()) {
mapa = new GMap2(
document.getElementById("elemento_mapa"));
centro = new GLatLng(41.414829, 2.133003);
mapa.setCenter(centro, 17);
mapa.setUIToDefault();
}
}
</script>
</head>
<body onload="InicializarMapa()" onunload="GUnload()">
<div id="elemento_mapa"
style="width: 500px; height: 300px"></div>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type"
content="text/html; charset=utf-8"/>
<title>Universitat Oberta de Catalunya</title>
<script src="http://maps.google.com/maps?file=api
&v=2&key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
type="text/javascript"></script>
<script type="text/javascript">
function InicializarMapa() {
var mapa;
var centro;
if (GBrowserIsCompatible()) {
mapa = new GMap2(
document.getElementById("elemento_mapa"));
centro = new GLatLng(41.414829, 2.133003);
mapa.setCenter(centro, 17);
mapa.setUIToDefault();
}
}
</script>
</head>
<body onload="InicializarMapa()" onunload="GUnload()">
<div id="elemento_mapa"
style="width: 500px; height: 300px"></div>
</body>
</html>
Como podemos observar, el código es una mezcla entre HTML y JavaScript. El código JavaScript (que hemos resaltado convenientemente mediante recuadros) se incluye mediante el elemento script y siempre va situado en la cabecera del documento (head). Observad el uso del atributo “type” (‘tipo’) delelemento script, que identifica el código como JavaScript.
También es importante observar las similitudes entre Java y JavaScript. Quizá la diferencia más notable sea la ausencia de tipos. Todas las variables son del mismo tipo, aunque como ya veremos, internamente puedan tener atributos distintos. Consecuentemente, las variables se declaran usando la fórmula var nombre_variable y las funciones, function nombre_función.
Veamos los pasos que hay que seguir para mostrar un mapa en nuestra página: en primer lugar, es necesario crear un elemento HTML que albergue el mapa. Aunque en la práctica hay diversos elementos que pueden desempeñar esta función, es recomendable utilizar div, porque es el elemento más neutro. Al elemento utilizado debemos darle un nombre mediante el atributo “id” (de identifier, ‘identificador’) y, adicionalmente, un tamaño, que especificaremos mediante los atributos estilísticos width (ancho) y height (alto), y que será el tamaño del mapa medido en píxeles. En el ejemplo, se ha creado el elemento mediante el código siguiente:
<div id="elemento_mapa"
style="width: 500px; height: 300px"></div>
style="width: 500px; height: 300px"></div>
Como se puede observar, al elemento se le ha llamado “elemento_mapa”, y se le han atribuido las dimensiones iniciales de 500 por 300 píxeles.
Una vez creado el elemento que albergará el mapa, debemos escribir el código JavaScript que se encargará de inicializarlo y mostrarlo. Para llevar a cabo esta tarea, hemos de realizar tres acciones:
• incluir el código de la API de Google Maps,
• escribir una función que se encargue de inicializar el mapa, y
• llamar a la función de inicialización cuando el navegador termine de dibujar la página.
• llamar a la función de inicialización cuando el navegador termine de dibujar la página.
Veámoslas una a una:
Incluir el código de la API de Google Maps
Mediante la primera acción, damos acceso a nuestro código a la API de Google Maps. Esta acción se realiza en el primer bloque de código JavaScript:
Mediante la primera acción, damos acceso a nuestro código a la API de Google Maps. Esta acción se realiza en el primer bloque de código JavaScript:
<script src="http://maps.google.com/maps?file=api
&v=2&key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
type="text/javascript"></script>
&v=2&key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
type="text/javascript"></script>
Por regla general, este código siempre será el mismo. Su única peculiaridad es el valor “key” (que en el ejemplo ha sido reemplazado por varias equis), que variará de un lugar web a otro y que se debe obtener de Google mediante un proceso de registro gratuito*. Una vez hecho esto, el código JavaScript de nuestra página podrá acceder a las funciones de la API de Google Maps
Escribir una función que se encargue de inicializar el mapa
La segunda acción crea el mapa sobre el elemento HTML seleccionado y lo inicializa, estableciendo el centro y el nivel de zoom iniciales. En el ejemplo, esta acción la lleva a cabo la función InicializarMapa en el segundo bloque de código JavaScript:
<script type="text/javascript">
function InicializarMapa() {
var mapa;
var centro;
if (GBrowserIsCompatible()) {
mapa = new GMap2(
document.getElementById("elemento_mapa"));
centro = new GLatLng(41.414829, 2.133003);
mapa.setCenter(centro, 17);
mapa.setUIToDefault();
}
}
</script>
function InicializarMapa() {
var mapa;
var centro;
if (GBrowserIsCompatible()) {
mapa = new GMap2(
document.getElementById("elemento_mapa"));
centro = new GLatLng(41.414829, 2.133003);
mapa.setCenter(centro, 17);
mapa.setUIToDefault();
}
}
</script>
Como se puede observar, en primer lugar instanciamos un objeto “GMap2”, que es el mapa en sí, ubicándolo en el elemento HTML “elemento_mapa”, que es el que hemos creado al principio con este objetivo. Después, establecemos el centro y el nivel de zoom iniciales del mapa, mediante la función setCenter de la clase “GMap2”. Como primer argumento, esta función requiere un objeto
“GLatLng”, que no es más que una coordenada geográfica expresada en función de su latitud y su longitud (según el sistema de coordenadas WGS84). El segundo elemento es un entero, que puede variar entre 0 y 19, por los niveles de zoom mínimo y máximo respectivamente.
“GLatLng”, que no es más que una coordenada geográfica expresada en función de su latitud y su longitud (según el sistema de coordenadas WGS84). El segundo elemento es un entero, que puede variar entre 0 y 19, por los niveles de zoom mínimo y máximo respectivamente.
La llamada a la función GBrowserIsCompatible evita la ejecución del código en caso de que se detecte que el navegador utilizado no es compatible con Google Maps.
Llamar a la función de inicialización cuando el navegador termine de dibujar la página
Finalmente, sólo queda indicar al navegador cuándo se debe inicializar el mapa o, lo que es lo mismo, cuándo debe ejecutarse la función InicializarMapa.
Mientras un navegador carga una página HTML y la construye, se obtienen, a la vez, imágenes externas y otros scripts que puedan formar parte de la página. Durante este proceso de carga, el entorno puede no ser lo bastante estable para Google Maps, y ello podría conducir a un comportamiento errático de la aplicación. Google recomienda inicializar el mapa sólo cuando la página haya sido cargada completamente.
Para ello, utilizaremos el atributo “onload” del elemento HTML body. En él podemos introducir código JavaScript que se ejecutará cuando la página haya sido cargada completamente. En nuestro caso, pondremos una llamada a la función InicializarMapa:
<body onload="InicializarMapa()" onunload="GUnload()">
De la misma forma, cuando se descarga la página, cosa que sucede cuando se cambia a otra, llamaremos a la función GUnload de la API de Google Maps para liberar correctamente los recursos que haya consumido el mapa. El resultado será el siguiente:
Bibliografía
Oracle, "The Java(tm) Tutorials", http://download.oracle.com/javase/tutorial/.
Oracle,
"Java(tm) 2
Platform Standard Edition 5.0 API Specification", http:// download.oracle.com/javase/1.5.0/docs/api/.
Personalización SIG, Albert Gavarró Rodríguez
, Universidad Oberta de Catalunya, España 2011
