3.6. Jugando con páginas web dinámicas

Introducción

Las páginas HTML son estáticas, aunque podemos incluir imágenes animadas, como GIFs animados.

Para incluir dinamicidad, tenemos que hacer uso de elementos ajenos a HTML que permiten introducir interactividad. La manera más común de hacerlo es con la inclusión de instrucciones en un lenguaje de programación que se llama JavaScript.

En esta actividad, optativa, vamos a adentrarnos un poco en cómo se pueden incluir elementos dinámicos con JavaScript. Para ello, vamos a crear una página web que contenga un mapa de Google Maps.

En la página web con el Mapa sencillo de Google Maps, podrás ver las instrucciones para incluir un mapa en tu página web en la pestaña "Javascript". Por ahora, no entremos en ellas, porque si te fijas, hay otra pestaña "Javascript + HTML" donde se puede ver la página web completa. Verás que se trata de una página web, con muchos de los elementos que ya conocemos... y alguno nuevo.

En particular, el elemento nuevo que nos interesa es <script>. Verás que se utiliza una vez con el atributo src para cargar las funcionalidad y otra vez con varias líneas con instrucciones para configurarlo.

Ve a Mozilla Thimble, la herramienta que utilizamos en el bloque anterior para realizar nuestra primera web y copia y pega esta página allí. Verás que en la vista preliminar aparece un mapa, centrado en la ciudad australiana de Sidney.

Podemos tocar el código fuente (tanto el HTML como el código Javascript) en la parte derecha, y como podrás comprobar, en la izquierda nos salen los cambios "al vuelo". ¡Juguemos un poco con nuestro mapa!:

  1. Cambia el valor de zoom. El que viene es 8. ¿Qué pasa si pongo 10? ¿Y si pongo 12? ¿Y 6? ¿Y 4?
  2. Busca las coordenadas de tu lugar de trabajo (puedes para eso utilizar Google Maps buscando por el lugar y luego pulsando con el botón derecho del ratón y seleccionando "¿Qué hay aquí?" - Verás que al pulsar sale, además de la dirección, las coordenadas del lugar). Introdúcelas en "center: new google.maps.LatLng(-34.397, 150.644)", que es donde centraremos el mapa.

Asimismo, puedes añadir marcadores en los mapas con este código:

var marker = new google.maps.Marker({

  position: new google.maps.LatLng(-25.363882,131.044922),

  map: map,

  title: '¡Hola mundo!'

});

En el ejemplo anterior, verás un marcador en medio del continente australiano.

Actividad a entregar

En esta actividad se pide:

  1. Crear una página web con Mozilla Thimble
  2. Que incluya título de la página web y texto introductorio (ver bloque 2, HTML)
  3. Un mapa de Google maps centrado en tu lugar de trabajo
  4. Con un zoom suficientemente grande para que se pueda ver tu provincia
  5. Una marca en el centro de la ciudad/puebo donde residas

Para la entrega, se guardará y publicará la página web (como se hizo en el ejercicio de "página web simple" del bloque 2) y se indicará la URL resultante en el formulario de entrega. Opcionalmente, puedes tuitear la página web creada.