Hoy 10 de noviembre de 2016, hemos realizado un mini taller de desarrollo con Javascript para crear sitios de divulgación científica, tomando como base un ejemplo de nuestro compañero @jmadrigalolmo.

Este tutorial fue publicado originalmente en:

https://github.com/inia-es/semanaCiencia16_iiff

Un ejemplo de la herramienta final se encuentra en:

https://github.com/inia-es/semanaCiencia16_iiff_src

Explicaciones explorables

Explicaciones explorables es un término acuñado por el ingeniero y diseñador Bret Victor para referirse a un documento interactivo, de carácter científico-técnico, que explica determinado concepto dando la oportunidad al lector de explorar los cambios que ocurren en el sistema o proceso cuando se modifican algunas de las variables que lo controlan.

Las páginas web y las aplicaciones para móvil o para tablet son el lugar ideal para estas Explicaciones Explorables, pero no significa que sea el único medio en el que se pueden construir. Una alternativa podrían ser los libros interactivos, con mecanismos simples de papel.

En este taller vamos a ver como podemos construir una sencilla web que nos ayude a explicar la relación que hay en un incendio forestal entre el material inflamado, la velocidad de propagación del fuego, el tamaño de la llama, y los medios de extinción más adecuados en cada caso.

Para ello construiremos progresivamente una página web interactiva con Javascript.

Estructura básica de una página web

Como algunos sabréis las páginas web están escritas en lenguaje HTML. La estructura más básica que podemos construir es:

Antes de seguir creemos un fichero llamado en una carpeta adecuada de nuestro ordenador, y copiemos o mejor, escribamos en él, el código de ejemplo. Después podemos abrir dicho fichero con nuestro navegador, y podremos ver el resultado de la página web.

HTML es un lenguaje de etiquetas. Cada sección del documento está comprendida entre una etiqueta de apertura y su correspondiente etiqueta de cierre .

Las etiquetas y limitan el princpio y el final del documento. También podemos ver que el documento se divide en dos secciones principales, una limitada por la etiqueta donde se indican aspectos de configuración de la página web; y otra limitada por la etiqueta donde está el contenido de la página propiamente dicho.

En este taller pasaremos de puntillas sobre muchos aspectos de HTML. Los interesados en profundizar en esta materia pueden seguir la documentación de MDN (Mozilla Developer Network): https://developer.mozilla.org/es/docs/Learn/HTML

Introducción a Javascript

Desde que el navegador Netscape incluyera por primera vez la posibilidad de ejecutar código Javascript en 1995, este lenguaje se han convertido en el estándar para desarrollo en el lado del cliente de la web.

Javascript tiene una sintáxis de la familia de C, similar a la de muchos lenguajes populares como C, C++, Java o PHP. Para incluir código Javascript en nuestra página web hacemos uso de la etiqueta .

La etiqueta puede ser incluida tanto en la sección como en la sección . Puesto que los ficheros HTML se ejecutan conforme son leídos, colocar el bloque al final de la sección , da ciertas garantías que el contenido completo de la página web ha sido cargado antes de ejecutar el código.

Este ejemplo ejecuta la función que indica al navegador que queremos mostrar un aviso, que requiere la aprobación ('Aceptar') del usuario antes de continuar.

Busquemos un aliado: Firebug

Firebug es un plugin de Firefox que facilita el desarrollo de páginas web y aplicaciones. Se instala fácilmente desde el gestor de complementos de Firefox. Una vez instalado, Firebug aparece con el icono de un pequeño insecto en la barra de herramientas del navegador.

La suite de Firebug tiene distintas herramientas que nos facilitan el trabajo de desarrollo: Consola, HTML, CSS, Script, DOM, Red y Cookies.

La herramienta Console nos mostrará los mensajes de error que genere nuestro código Javascript, pero también podemos acceder a ella haciendo uso del comando .

También es posible escribir código Javascript directamente en la consola, lo que la hace una manera ideal de realizar pruebas y aprender interactivamente.

Un viaje rápido por Javascript

Este taller, por su brevedad, solo pretende mostrar algunas características generales de Javascript, y unos pocos de los detalles que lo diferencian de otros lenguajes de programación.

Podemos hacer el siguiente recorrido directamente en la consola que abrimos en la sección anterior:

Javascript tiene detalles bastante avanzados. Si os habéis fijado, las funciones son objetos que tienen algunas funciones incluídas por defecto, como . Por ejemplo, podéis hacer también . Estas características hacen que sea un lenguaje realmente muy flexible.

Una Explicación Explorable

Vamos a crear una sencilla página web, que muestre la fórmula de Byram y permita explorar su evolución con algunos valores para la velocidad de propagación y los materiales del incendio.

En primer lugar creamos una sencilla web con las fórmulas, los datos y un ejemplo de la parte explorable.

Hemos introducido un par de etiquetas nuevas, como

para construir la tabla de datos, o para dar enfásis. Además hemos creado añadido las ecuaciones en forma de gráficos GIF (usando la herramienta online https://www.codecogs.com/latex/eqneditor.php).

 

Para añadir las imágenes podéis descargarlas del sitio web (https://github.com/inia-es/semanaCiencia16_iiff_src/tree/gh-pages/img). Este sitio web tiene todo el código de este ejemplo, pero si lo descargáis ahora arruinareis parte de la diversión.

Haciendo un sitio interactivo

Para esta parte del tutorial vamos a hacer uso de la librería Tangle. Podemos descargar los ficheros en http://worrydream.com/Tangle/download.html, y ponerlo en una carpeta de nuestro proyecto.

Ahora lo añadimos a nuestra web añadiendo:

a la sección de nuestra página web.

Ahora vamos a identificar la velocidad de propagación como un parámetro de entrada. Para ello vamos a modificar el texto por el siguiente código.

Y en la sección incializamos dicha variable:

# Generando valores de salida

Ahora vamos a hacer que el valor de longitud de la llama varie con la velocidad. Primero, identificamos la longitud de la llama como una variable del modelo, sustituimos por algo como:

Añadimos una función que calcule el valor de la llama. Vamos a usar una función de prueba, que nos permite probar el sistema interactivo. En el siguiente bloque usaremos la fórmula de Byram correctamente.

Y usamos esa función para actualizar el valor de en el modelo de Tangle:

Matemáticas en Javascript

Vamos a crear una función en Javascript para la fórmula de Byram. Es más fácil de lo que parece:

Ahora usaremos esta fórmula en nuestra función

Mejora estética

Vamos a mejorar un poco el aspecto de nuestro proyecto. En primer vamos a mejorar el aspecto de nuestra interfaz. Añadiremos parámetros a nuestro modelo para que admita decimales en la entrada y podamos darle un rango mínimo y máximo de valores, lo haremos con las etiquetas , y :

En segundo lugar vamos a dar formato a la salida, para poder ignorar los decimales que no necesitemos. Lo haremos con la etiqueta . Esta etiqueta formatea la salida haciendo uso de la descripción de formatos de la librería estándar de C (, , ...). Ver http://www.manpages.info/linux/sprintf.3.html

También vamos a mejorar el aspecto del sitio con Bootsrap (getbootstrap.com). Bootstrap es un framework CSS muy sencillo de utilizar para aquellos que no sabemos mucho de CSS, o no tenemos buena coordinación estética.

Guardamos los ficheros en la carpeta y luego los añadimos a la sección de nuestro HTML:

Para que Bootstrap dé una mejor estructura a nuestro contenido debemos poner todo el contenido entre las etiquetas:

Algunas etiquetas para mejorar el aspecto de nuestra tabla de datos:

Y un retoque (, , ) para mejorar el aspecto de nuestros resultados:

Para terminar la mejora añadimos la clase a las imágenes con las fórmulas:

Pocos dan tanto con tan poco esfuero.

Sofisticando el modelo

Hasta ahora hemos trabajado siempre con el mismo tipo de incendio, uno de pasto. Vamos a introducir ahora los otros tipos de incencios: matorral bajo y matorral alto.

Modificaremos para que sea una variable de entrada:

funciona como un selector horizontal como el que usamos para la velocidad. muestra solo uno de los valores contenidos según el valor que adopte la variable .

Ahora añadiremos la información de biomasa a Javascript, para poder usarla en la fórmula. Para ello usaremos un array:

Ahora solo nos queda introducirlo en la fórmula de Byram:

¡¡Enhorabuena!!, habéis construido vuestra primera Explicación Explorable.

Explicaciones visuales

Ahora vamos a añadir un elemento visual para mejorar la explicación.

Creamos una estructura haciendo uso de la capacidad de Bootstrap, para crear columnas. En cada uno vamos a insertar una imagen que explique el tamaño del incendio:

Cambiaremos el tamaño del incendio en función de la longitud calculada de la llama.

Vamos a añadir un identificador a la imagen que queremos modificar:

Para poder modificar su tamaño, creamos una referencia a este elemento en el código Javascript.

Calcularemos el tamaño del gráfico de la llama de manera proporcional al valor de longitud de la llama.

La longitud máxima de la llama en nuestro ejemplo es 24.07m. Como en cada navegador el tamaño del gráfico va a ser distinto, necesitamos averiguarlo en el código.

Ahora solo nos queda modificar la altura del fuego en la función update:

Hemos conseguido un tamaño de la llama interactivo, pero no es muy satisfactorio. Para hacer que las llamas crezcan hacia arriba, vamos a introducir un margen variable:

Para modificar la imagen de la recomendación, usaremos una estrategia parecida a la que hemos usado para modificar la llama, pero en lugar de modificar la propiedad mdificaremos la propiedad :

Y en Javascript creamos una función que seleccione la imagen para los distintos valores de longitud de la llama, y la aplicamos en nuestro update:

Buenas prácticas

Una vez que hemos llegado hasta aquí tenemos una aplicación interactiva que hemos intentado hacer atractiva para el público en general. Terminamos el tutorial con una pequeña mejora que no tiene repercusión funcional ni estética, pero mejora el diseño de la aplicación.

Vamos a evitar replicar los valores de biomasa en el código y en el HTML. Para ello tomaremos los valores de la tabla como origen de datos, y los utilizaremos en Javascript.

En primer lugar anotaremos los valores de la tabla con microdatos. Los microdatos describen más precisamente la información de una web, y permiten que sea explorada por buscadores con más información o utilizada por aplicaciones de terceros.

Usar microdatos es muy sencillo:

Para acceder a los valores usaremos la función que nos devuelve un elemento HTML. Para acceder a su contenido usamos su propiedad . Por último creamos una función que elimina la unidad de kg y nos devuelve un valor numérico.