\u00bfA qu\u00e9 nos referimos con un script?<\/h2>\n\n\n\n![\"\"](\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/guion-movies-1024x768.jpeg\")
<\/a><\/figure>\n\n\n\nCuando hablamos de un script<\/strong>, un guion o una secuencia de comandos es un peque\u00f1o (a veces no tanto) programa<\/strong> que sirve para \u00abrutinizar\u00bb o automatizar ciertas tareas, habitualmente repetitivas, que se precisan para que funcione un proyecto m\u00e1s complejo.<\/p>\n\n\n\nEn nuestro \u00e1mbito, nos interesan los scripts que permiten, como veremos, dotar de interactividad a visualizaciones de informaci\u00f3n o gestionar datos asociados a estas.<\/p>\n\n\n\n
<\/p>\n\n\n\n
\u00bfCon qu\u00e9 lenguajes programamos scripts?<\/h2>\n<\/div>\n\n\n\n
Existen numerosos lenguajes de script, tanto de lado cliente como del lado servidor (C, C++, Python, Java, Go…)<\/p>\n\n\n\n
En el lado cliente<\/b>, Javascript es el lenguaje de script nativo de la web. <\/p>\n\n\n\n![\"\"\/](\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/779d2-js115338903-1545655782-45.png\")
<\/figure>\n\n\n\nSu aprendizaje supone introducirse en un lenguaje de programaci\u00f3n, y aunque pueda parecer complicado de entrada, conocerlo un poco nos permite saber c\u00f3mo modificar c\u00f3digo ya escrito o realizar visualizaciones muy atractivas mediante el uso de librer\u00edas y APIs que se basan en Javascript.<\/p>\n\n\n\n![\"\"\/](\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/a6a38-js315338907-1545655833-90.png\")
<\/figure>\n\n\n\n\u00bfPara qu\u00e9 nos puede servir los lenguajes de script, y concretamente Javascript, en un proyecto period\u00edstico?<\/b><\/p>\n\n\n\n- Para tener unas nociones generales sobre la programaci\u00f3n con scripts.\n<\/li>
- Para saber c\u00f3mo funciona, de forma global, la interactividad en la manipulaci\u00f3n de datos y de las visualizaciones.\n<\/li>
- Para comprender el c\u00f3digo resultante de los sistemas de datos y visualizaci\u00f3n, y saber manipular determinados par\u00e1metros.\n<\/li>
- Para adentrarnos en la creaci\u00f3n de visualizaciones basadas en librer\u00edas JS como jQuery\n<\/li>
- Para hacer scraping de datos con Javascript (Jquery) o, como vais a ver posteriormente, con Phyton \n<\/li><\/ul>\n\n\n\n
En los ejemplos que vamos a ir viendo utilizaremos un editor de c\u00f3digo online, JsFiddle.net<\/a>. Podr\u00e1s acceder a los ejemplos de forma directa a trav\u00e9s de objetos embebidos como este, en el que podr\u00e1s trabajar en las diferentes partes del c\u00f3digo accediendo a las diferentes pesta\u00f1as disponibles.<\/p>\n\n\n\n<\/div>\n\n\n\nLas cuestiones que vamos a tratar en esta sesi\u00f3n de introducci\u00f3n son conceptos generales que, aunque se ejemplifican con Javascript, son generales que nos sirven para la mayor\u00eda de los lenguajes de script y nos introducen en la siguiente sesi\u00f3n en la que empezar\u00e9is a trabajar con Phyton.<\/b><\/p><\/blockquote><\/figure>\n\n\n\n\nNociones b\u00e1sicas de JS<\/h2>\n<\/div>\n\n\n\n\n\u00bfQu\u00e9 es?<\/span>\n<\/h2>\n\n\n\nUn lenguaje<\/b> de programaci\u00f3n interpretado<\/b> por los navegadores en tiempo real.<\/p>\n\n\n\n
Ejercicio<\/b><\/p>\n\n\n\n- \nAbre el editor de c\u00f3digo en JSFiddle<\/a> con el ejercicio<\/a>.<\/i>\n<\/li>
- \nRevisa el c\u00f3digo html. F\u00edjate que el c\u00f3digo JS aparece en el fichero HTML. Prueba el resultado que produce el bot\u00f3n. \u00bfC\u00f3mo crees que funciona revisando el c\u00f3digo?<\/i>\n<\/li><\/ul>\n\n\n\n<\/div>\n\n\n\n
\u00bfPara qu\u00e9 sirve?<\/h2>\n\n\n\n
Es un lenguaje que permite dotar de interactividad<\/b> a las p\u00e1ginas web. Algunas de las tareas b\u00e1sicas que puede realizar son:<\/p>\n\n\n\n\n- Escribir en HTML\n<\/li>\n
- Reaccionar a eventos\n<\/li>\n
- Modificar elementos HTML\n<\/li>\n
- Validar entrada de datos\n<\/li>\n
- Cambiar o modificar atributos\n<\/li>\n<\/ol>\n\n\n\n
Adem\u00e1s, mediante la API JS de HTML5 <\/a>podemos acceder a recursos adicionales: c\u00e1mara, almacenamiento de datos, creaci\u00f3n de gr\u00e1ficos, flujo de datos con servidores\u2026)<\/p>\n\n\n\nPermite acceder a informaci\u00f3n en internet: por ejemplo, buscar y obtener las palabras m\u00e1s populares en Twitter de un tema, o para hacer scraping de web utilizando soluciones como Node.js<\/a>, Artoo.js<\/a> o pjscrape<\/a>)<\/p>\n\n\n\nTambi\u00e9n permite organizar y presentar datos como, por ejemplo, automatizar el trabajo de las hojas de c\u00e1lculo; o la visualizaci\u00f3n de datos.<\/p>\n\n\n\n
Ejercicio<\/b><\/p>\n\n\n\n
Veamos c\u00f3mo JS aporta interactividad a una web,<\/p>\n\n\n\n
\n- Accede a la web de Espa\u00f1a en Llamas<\/a>. Navega por el mapa, usa los filtros, etc.\n<\/li>\n
- Ahora deshabilita Javascript desde las opciones del navegador<\/a> o usando alguna herramienta como WebDevelopper Toolbar<\/a>. Comprueba qu\u00e9 sucede. \u00bfPuedes navegar el mapa? \u00bfCompartir en redes sociales?\n<\/li>\n<\/ol>\n\n\n\n
Veamos ahora un ejemplo del uso de javascript para cambiar o modificar atributos<\/b> de html. Aqu\u00ed las posibilidades son muy amplias, dado que podemos modificar los valores de cualquier atributo, desde el color de un texto, el tipo de fuente, etc.<\/p>\n\n\n\n
En este ejemplo generamos un efecto de sustituci\u00f3n modificando el atributo src de una imagen.<\/p>\n\n\n\n
<\/div>\n\n\n\nTipos de datos<\/h2>\n\n\n\n
Javascript puede almacenar los siguientes tipos de datos<\/b>:<\/p>\n\n\n\n- string (cadenas)\n<\/li>
- number (n\u00fameros)\n<\/li>
- boolean (booleanos)\n<\/li>
- function (funciones)\n<\/li>
- array (arreglo)\n<\/li>
- object (objetos)\n<\/li><\/ul>\n\n\n\n
![\"\"\/](\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/d9cb9-js271533939-1545670552-13.png\")
<\/figure>\n\n\n\n![\"\"\/](\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/f7ddb-js281533939-1545670566-69.png\")
<\/figure>\n\n\n\nVariables<\/h2>\n\n\n\n\u00bfQu\u00e9 es una variable?<\/h3>\n\n\n\n
Una variable es un elemento que contiene informaci\u00f3n <\/b>(datos) que puede ser ejecutada por el c\u00f3digo.<\/p>\n\n\n\n
Las variables sirven para guardar<\/b> informaci\u00f3n que ser\u00e1 utilizada posteriormente.<\/p>\n\n\n\n
En este ejemplo<\/a> x se define como una variable. Luego, asignamos a x el valor de 6:<\/p>\n\n\n\n<\/div>\n\n\n\nConceptos de POO<\/h2>\n\n\n\n
La POO (Programaci\u00f3n Orientada a Objetos)<\/b> es un paradigma de programaci\u00f3n que permite optimizar los procesos de programaci\u00f3n y los resultados que se obtienen con ellos. Permite pre-dise\u00f1ar objetos que son almacenados en librer\u00edas o bibliotecas para que puedan ser reutilizados por los programas sin necesidad de tener que volver a escribir las funciones necesarias cada vez que se quiere hacer uso de ellas.<\/p>\n\n\n\n
Los elementos fundamentales de la POO incorporan un n\u00famero amplio de componentes (clase, herencia, objeto, m\u00e9todo..), pero nos centraremos solo en los que resultan fundamentales para manejarnos en el entorno de trabajo de un proyecto period\u00edstico<\/p>\n\n\n\n
- Objetos\n<\/li>
- Eventos\n<\/li>
- Funciones\n<\/li>
- M\u00e9todos\n<\/li><\/ul>\n\n\n\n
Objetos<\/h3>\n\n\n\n![\"\"\/](\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/d150f-js401533999-1545670778-26.png\")
<\/figure>\n\n\n\n![\"\"\/](\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/ee556-js411533999-1545670794-86.png\")
<\/figure>\n\n\n\nEventos<\/b><\/p>\n\n\n\n
Los eventos son sucesos<\/b>, producidos normalmente por una acci\u00f3n del usuario, que producen alg\u00fan efecto<\/b>. Por ejemplo, cuando un usuario pulsa un bot\u00f3n o hace clic sobre un enlace.<\/p>\n\n\n\n
Algunos de los eventos DOM m\u00e1s habituales son:<\/p>\n\n\n\n![\"\"\/](\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/fae74-js421534000-1545670832-3.png\")
<\/figure>\n\n\n\nFunciones<\/b><\/p>\n\n\n\n
Todo evento lleva asociado, normalmente, una funci\u00f3n<\/b>.<\/p>\n\n\n\n
Una funci\u00f3n es un bloque de c\u00f3digo que puede ser ejecutado<\/b> cuando es llamada por un evento<\/p>\n\n\n\n
Son muy \u00fatiles porque es muy habitual reutilizar c\u00f3digo con diferentes argumentos a lo largo de un programa, por lo que podemos utilizar la funci\u00f3n sin tener que escribir de nuevo el c\u00f3digo, s\u00f3lo invoc\u00e1ndola.<\/b><\/p>\n\n\n\n
Para llamar a una funci\u00f3n<\/b> hay que invocarla en cualquier parte de la p\u00e1gina web.<\/p>\n\n\n\n
Cuando se invoca una funci\u00f3n, todo el c\u00f3digo que contenga entre llaves {} <\/b>se ejecuta<\/p>\n\n\n\n
Para invocarla, basta con escribir su nombre seguido de par\u00e9ntesis<\/p>\n\n\n\n
Ejemplo con Google Maps<\/a><\/i><\/b>. En este caso, se utiliza la API de Google Maps para crear un mapa que agrupa (cluster) marcadores en funci\u00f3n del nivel de zoom.<\/p>\n\n\n\n![\"\"\/](\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/96056-screenshot2-1615149992-45.png\")
<\/figure>\n\n\n\nNota: Ver documentaci\u00f3n<\/a><\/p>\n\n\n\n\nLibrer\u00edas y APIs<\/h2>\n<\/div>\n\n\n\n
Estos dos conceptos est\u00e1n directamente vinculados.<\/p>\n\n\n\n
T\u00e9cnicamente una librer\u00eda o biblioteca<\/b><\/a> (library) es una colecci\u00f3n de implementaciones de comportamiento, pero lo entenderemos mejor si decimos que es una larga lista de c\u00f3digo de programaci\u00f3n que incluye un amplio n\u00famero de funciones que podemos utilizar desde nuestro programa con un esfuerzo limitado.<\/p>\n\n\n\nPor su parte, una API<\/a> (Aplication Programming Interface<\/i>)<\/b> es una especificaci\u00f3n formal que permite comunicar componentes de software de dos sistemas distintos. Para entendernos, es una especie de \u201csubcontrataci\u00f3n\u201d de funciones.<\/p>\n\n\n\nUna API es el libro de instrucciones que nos permite conocer c\u00f3mo trabajar con el conjunto de funciones<\/b>, procedimientos y objetos contenidos en la librer\u00eda o biblioteca con la que vamos a trabajar.<\/p>\n\n\n\n
Como se\u00f1ala de forma gr\u00e1fica Diego Ceballos<\/a>, en un ejemplo cotidiano, una cafetera Nespresso ser\u00eda una librer\u00eda para hacer caf\u00e9 de forma r\u00e1pida, y su libro de instrucciones ser\u00eda la API.<\/p>\n\n\n\nAPI Keys<\/b><\/p>\n\n\n\n
Para usar una API normalmente se requiere una API Key de autenticaci\u00f3n para conectarse con el servicio. Ello permite establecer los l\u00edmites de cuota por Key y no por IP. Adem\u00e1s, esto permite comunicar al servicio con la aplicaci\u00f3n solicitante.<\/p>\n\n\n\n![\"\"\/](\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/d157d-js511534010-1545671187-21.png\")
<\/figure>\n\n\n\nTipos de Librer\u00edas y APIs<\/h2>\n\n\n\n
Podemos clasificar las APIs en base a la funcionalidad que aportan. Siguiendo este criterio podemos considerar, desde el punto de vista de la utilidad en proyectos period\u00edsticos, las siguientes:<\/p>\n\n\n\n
- Para crear mapas\n<\/li>
- Parar incorporar animaciones\n<\/li>
- Para desarrollar aplicaciones\n<\/li>
- Para acceder y manipular los elementos del DOM de forma sencilla\n<\/li>
- Para trabajar con im\u00e1genes y gr\u00e1ficos\n<\/li>
- Para visualizar datos\n<\/li><\/ul>\n\n\n\n
![\"\"\/](\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/1aced-js52b153401-1545671231-47.jpg\")
<\/figure>\n\n\n\nEn este enlace puede verse una amplia comparativa de librer\u00edas<\/a>.<\/p>\n\n\n\n\nGoogle Maps API<\/h2>\n<\/div>\n\n\n\nGoogle Maps API<\/h2>\n\n\n\n
Vamos a adentrarnos en el uso de funciones. Para ello, vamos a trabajar con la API de Google Maps<\/a> que es una amplia librer\u00eda dirigida a la creaci\u00f3n de complejas aplicaciones de mapas.<\/p>\n\n\n\n![\"\"\/](\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/f8059-js531534011-1545671419-4.jpg\")
<\/figure>\n\n\n\nCrear un mapa simple incluyendo un marcador<\/h2>\n\n\n\n
La elaboraci\u00f3n de este mapa nos permitir\u00e1 comprender mejor c\u00f3mo operan las funciones.<\/p>\n\n\n\n
Vamos a elaborar un mapa sencillo en el que incluiremos un marcador<\/b><\/a>:<\/p>\n\n\n\n\n- \nCreamos el c\u00f3digo html<\/b>. F\u00edjate que en el head se hace la llamada a la API. El par\u00e1metro callback ejecuta la funci\u00f3n initMap cuando se ha cargado la API. Los atributos async y defer permiten que se siga renderizando la p\u00e1gina mientras se carga la API. La key hace la llamada mediante la API Key para acceder al servicio.\n<\/li>\n
- \nDibujamos el mapa y el marcador en el fichero JS<\/b>. Creamos una funci\u00f3n que inicializa y a\u00f1ade el mapa, con los siguientes elementos: a) Una variable que inicializamos con las coordenadas que centrar\u00e1n el mapa. b) Una variable que crea el objeto mapa, utiliza el m\u00e9todo getElemenById y le pasa dos propiedades: center y zoom (escala: cuanto m\u00e1s bajo, m\u00e1s general). Creamos una variable para incluir el marcador, inicializ\u00e1ndola con el objeto marcador, y dos propiedades: position y map\n<\/li>\n<\/ol>\n\n\n\n
En este enlace puedes ver el detalle explicado de todo el procedimiento<\/a>.<\/p>\n\n\n\n<\/div>\n\n\n\nFunciones avanzadas<\/h2>\n\n\n\n
Ya hemos visto muchas de las posibilidades que ofrece Google Maps API<\/a>.<\/p>\n\n\n\nEn este apartado, veremos algunas caracter\u00edsticas que nos pueden resultar \u00fatiles para la configuraci\u00f3n de nuestros mapas.<\/p>\n\n\n\n
Query Places<\/h3>\n\n\n\n![\"\"\/](\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/01e1e-js93-1534324999-95-1.jpg\")
<\/figure><\/div>\n\n\n\nQuery Places nos permite hacer una b\u00fasqueda automatizada de lugares. <\/p>\n\n\n\n
Con la librer\u00eda places podemos ubicar de forma autom\u00e1tica lugares en un mapa.<\/p>\n\n\n\n
A trav\u00e9s de los par\u00e1metros de b\u00fasqueda del m\u00e9todo nearbySearch<\/a><\/i> podemos modificar la query<\/i> que hace sobre los datos de places.<\/p>\n\n\n\nVeamos un ejemplo<\/a>:<\/p>\n\n\n\n- Se declaran las variables map e infowindow\n<\/li>
- Se inicializa el mapa mediante la funci\u00f3n\n<\/li>
- Se define el valor del infowindow a trav\u00e9s de la clase google.maps.InfoWindow\n<\/li>
- Se carga la biblioteca de sitios \u201cplaces\u201d, para el subconjunto PlacesService\n<\/li>
- Con el m\u00e9todo nearbySearch se localizan aquellos servicios que cumplan los requisitos indicados en los par\u00e1metros de la b\u00fasqueda\n<\/li><\/ul>\n\n\n\n<\/div>\n\n\n\n
Y aqu\u00ed otro ejemplo ampliando la informaci\u00f3n<\/a> del infowindow: <\/p>\n\n\n\n<\/div>\n\n\n\nGmaps.js<\/h2>\n\n\n\n
Si trabajar directamente con la API de Google Maps te resulta complejo, Gmaps.js<\/a> es una librer\u00eda desarrollada para simplificar el trabajo con la API.<\/p>\n\n\n\n\nJSON y GeoJSON<\/h2>\n<\/div>\n\n\n\n
JSON es el acr\u00f3nimo de J<\/b>avaScript O<\/b>bject N<\/b>otation.<\/p>\n\n\n\n
Es un lenguaje independiente con una sintaxis basada en Javascript para almacenamiento e intercambio de datos.<\/i><\/p>\n\n\n\n
Se utiliza en aplicaciones AJAX y es una alternativa a XML m\u00e1s sencilla<\/b> de usar.<\/p>\n\n\n\n![\"\"\/](\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/3876d-js761534177-1545671802-32.jpg\")
<\/figure>\n\n\n\n\u00bfPor qu\u00e9 nos interesa JSON?<\/h2>\n\n\n\n
JSON resulta relevante por:<\/p>\n\n\n\n
- Es la respuesta de datos que devuelven la mayor\u00eda de las APIs web \n<\/li>
- Muchos portales de datos abiertos ofrecen la informaci\u00f3n en este formato\n<\/li>
- Porque facilita la integraci\u00f3n y visualizaci\u00f3n de informaci\u00f3n\n<\/li><\/ul>\n\n\n\n
![\"\"\/](\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/872b6-js791534177-1545671837-68.jpg\")
<\/figure>\n\n\n\nEn este ejemplo<\/a> vemos c\u00f3mo creamos un objeto JSON en Javascript.<\/p>\n\n\n\n<\/div>\n\n\n\nGeoJSON<\/h2>\n\n\n\n
GeoJSON<\/a> es un formato para el intercambio de datos geoespaciales<\/b> basado en JSON<\/i>.<\/p>\n\n\n\nPermite informar diferentes tipos de geometr\u00edas<\/b>: puntos, multipuntos, l\u00edneas, multil\u00edneas, pol\u00edgonos, m\u00faltiples pol\u00edgonos, y colecciones de geometr\u00edas <\/p>\n\n\n\n
Uso de GeoJSON para cargar datos masivos<\/b><\/p>\n\n\n\n
Vamos a trabajar con ejemplo de un mapa creado con la API de Google Maps. Vamos a cargar ficheros GeoJSON <\/b>con miles de datos <\/b>y customizar los resultados del mapa convirtiendo los marcadores en c\u00edrculos.<\/p>\n\n\n\n
Los datos los obtenemos, para este ejemplo, del sistema de feeds del USGS que ofrece datos en varios formatos, entre ellos GeoJSON, sobre diferentes sucesos naturales, en este caso, terremotos<\/a>.<\/p>\n\n\n\nComo su sistema no permite directamente hacer llamadas de manera gratuita, tenemos que descargarnos el fichero que queramos y ubicarlo en servidor propio<\/a>.<\/p>\n\n\n\nUna vez que tenemos el fichero en nuestro servidor, con una URL p\u00fablica, podemos cargarlo y customizar el mapa<\/a> obteniendo este resultado<\/a>.<\/p>\n\n\n\n![\"\"\/](\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/06895-screenshot2-1615157292-46.png\")
<\/figure>\n\n\n\nUso de JSON para personalizar mapas<\/h2>\n\n\n\n![\"\"\/](\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/06a5c-js831534196-1545672020-68.jpg\")
<\/figure><\/div>\n\n\n\nOtra de las utilidades de JSON es la personalizaci\u00f3n de estilos. La API de Google Maps facilita un completo sistema de estilos para customizar<\/a> el mapa a voluntad, algo que con otras soluciones de Google como Mymaps es m\u00e1s limitada<\/p>\n\n\n\nAsistente de mapa de Google Maps<\/b><\/p>\n\n\n\n
En todo caso, configurar estilos complejos creando escribiendo directamente el c\u00f3digo de los estilos lleva tiempo. As\u00ed que muchas veces lo m\u00e1s eficaz es usar el asistente de estilos de mapa<\/b><\/a> de la API de Google Maps.<\/p>\n\n\n\nLos pasos para hacerlo<\/a> son:<\/p>\n\n\n\n\n- \nAccedemos al asistente<\/a>.\u00a0 \u00a0\n<\/li>\n
- Configuramos el estilo bien con las features b\u00e1sicas, bien con las avanzadas que nos permiten modificar y acceder a cualquiera de las funciones y par\u00e1metros de estilo.\n<\/li>\n
- Finalizamos el estilo y copiamos el codigo JSON del array de estilos (ser\u00e1 muy largo)\n<\/li>\n
- Vamos en el mapa al objeto google.maps.StyledMapType y copiamos el array con todo el contenido entre [ ] incluidos estos.\n<\/li>\n<\/ol>\n\n\n\n<\/div>\n\n\n\n\n
LeafLeft<\/h2>\n<\/div>\n\n\n\n
Leaflet<\/a> es una librer\u00eda especializada para la creaci\u00f3n de mapas interactivos.<\/b><\/p>\n\n\n\nTiene una amplia documentaci\u00f3n<\/a> y una galer\u00eda de estilos de mapa<\/a> (basados en Mapbox) para comenzar a trabajar r\u00e1pidamente con ella.<\/p>\n\n\n\nComo toda librer\u00eda basada en JS, utiliza la base de este, pero simplifica la sintaxis para hacer m\u00e1s sencillo y \u00e1gil el desarrollo de los mapas.<\/p>\n\n\n\n![\"\"\/](\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/3ec3d-js94-1534325590-81-1.jpg\")
<\/figure>\n\n\n\nVamos a crear un mapa b\u00e1sico con LeafleftJs<\/a>:<\/p>\n\n\n\n\n- En el head de html, enlazamos la hoja de estilo de Leaftletjs y, detr\u00e1s, ponemos despu\u00e9s el enlace al js de Leaftletjs. <\/li>\n
- En css Le damos un alto al div que contiene el mapa a trav\u00e9s del id <\/li>\n
- En Js creamos el mapa y le asignamos las coordenadas decimales y el nivel de zoom <\/li>\n
- Cargamos una capa de mapa (tile layer) desde Mapbox. Necesitaremos incluir el accessToken de mapbox. Si no tenemos uno, tendremos que crearlo (En id podemos incluir cualquiera de los estilos de mapa base disponibles en Mapxbox<\/a>) <\/li>\n
- Creamos un marcador <\/li>\n
- Creamos un c\u00edrculo <\/li>\n
- Creamos dos popup sobre el marcador y el c\u00edrculo <\/li>\n
- Creamos una funci\u00f3n\n<\/li>\n<\/ol>\n\n\n\n<\/div>\n\n\n\n
En este otro mapa<\/a>, sobre la base del anterior hemos incorporado un marcador personalizado usando las opciones que LeafLeft<\/a> tiene para ello.<\/p>\n\n\n\n<\/div>\n\n\n\n\nMapbox<\/h2>\n<\/div>\n\n\n\n
Mapbox<\/a> es otra estupenda librer\u00eda para crear mapas. De hecho, tiene su propio sistema de mapas que es usado por otras librer\u00edas como base, tal como sucede como LeafLeft. <\/p>\n\n\n\nOfrece una documentaci\u00f3n muy amplia<\/a> lo que facilita trabajar con ella.<\/p>\n\n\n\nDe manera similar a lo que sucede con Google Maps, existe la posibilidad de trabajar directamente con la API<\/a> o hacerlo mediante el editor de mapas (studio)<\/a>. Esto \u00faltimo simplifica a\u00fan m\u00e1s el desarrollo dado que, adem\u00e1s, luego podremos customizar o personalizar elementos accediendo al c\u00f3digo resultante.<\/p>\n\n\n\n![\"\"\/](\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/c5f6e-js95-1534326229-4-1.jpg\")
<\/figure>\n\n\n\nUna de las aportaciones interesantes de esta librer\u00eda es que dispone de numerosos efectos que pueden darle un aspecto diferente a nuestras visualizaciones en mapas. La documentaci\u00f3n de la API incluye muchas, pero destacaremos aqu\u00ed algunas de ellas:<\/p>\n\n\n\n
Ejemplos de mapas que podemos crear<\/h3>\n\n\n\n
En este apartado de la documentaci\u00f3n<\/a> podemos revisar todas las posibilidades que ofrece esta librer\u00eda.<\/p>\n\n\n\n![\"\"\/](\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/13c5f-screenshot2-1615159923-41.png\")
<\/figure>\n\n\n\n\nArcGIS online<\/h2>\n<\/div>\n\n\n\n
ArcGIS online es una completa suite de aplicaciones y APIs. Dispone de un Gestor web<\/a> y de numerosas APIs <\/a>para interactuar y adaptar los resultados.<\/p>\n\n\n\nEn este enlace puedes acceder a un tutorial b\u00e1sico para empezar a crear mapas<\/a> 2D.<\/p>\n\n\n\n![\"\"\/](\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/95254-js96-1534326756-87-1.jpg\")
<\/figure>\n\n\n\nUn aspecto diferencial de esta soluci\u00f3n, es que ofrece un editor de escenas<\/b>. Esto facilita un modo de crear escenas 3D sobre la representaci\u00f3n de la esfera terrestre, como en este ejemplo:<\/p>\n\n\n\n<\/div>\n\n\n\nO sobre zonas concretas en las que pueden incluirse capas como edificios, etc:<\/p>\n\n\n\n
<\/div>\n\n\n\n\nGoogle Chart<\/h2>\n<\/div>\n\n\n\n
Google Chart<\/a><\/b> es una librer\u00eda orientada a la creaci\u00f3n de una amplia variedad de gr\u00e1ficos din\u00e1micos<\/a>.<\/p>\n\n\n\n![\"\"\/](\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/d8dec-js101-1534329572-30-1.jpg\")
<\/figure><\/div>\n\n\n\nCreaci\u00f3n de Chart b\u00e1sicos<\/h2>\n\n\n\n![\"\"\/](\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/241ad-js99-1534327681-91-1.png\")
<\/figure><\/div>\n\n\n\nLa creaci\u00f3n de Chart requiere que los datos sean incluidos mediante una clase de JavaScript: google.visualization.DataTable<\/i> <\/p>\n\n\n\n
La clase est\u00e1 definida en la librer\u00eda de visualizaci\u00f3n de Google.<\/p>\n\n\n\n
La tabla de datos corresponde a una tabla similar a esta.<\/p>\n\n\n\n
Veamos los pasos para crear nuestro primer ejemplo<\/a>:<\/p>\n\n\n\n\n- Cargamos la API de visualizaci\u00f3n del paquete que nos interesa, en este caso \u201ccorechart\u201d\n<\/li>\n
- Establecemos el callback para que se ejecute la funci\u00f3n cuando se haya cargado la API de visualizaci\u00f3n de Google y no antes\n<\/li>\n
- La devoluci\u00f3n de llamada que crea y rellena una tabla de datos, crea una instancia del gr\u00e1fico circular, pasa los datos y los dibuja.\n<\/li>\n
- Creamos la tabla de datos\n<\/li>\n
- Configuramos las opciones del chart\n<\/li>\n
- Instanciamos y dibujamos el chart pas\u00e1ndole la configuraci\u00f3n de las opciones\n<\/li>\n<\/ol>\n\n\n\n<\/div>\n\n\n\n
Personalizaci\u00f3n del Chart<\/h2>\n\n\n\n
Para cada Chart podemos personalizar<\/a> diferentes elementos como: <\/p>\n\n\n\n- T\u00edtulo, Color, grosor de l\u00ednea, relleno de fondo, etc.\n<\/li>
- Incluir elementos: t\u00edtulos de los ejes, etc.\n<\/li><\/ul>\n\n\n\n
Las opciones se presentan como pares name.value<\/b><\/i> <\/p>\n\n\n\n![\"\"\/](\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/1dc76-js100-1534327964-91-1.jpg\")
<\/figure><\/div>\n\n\n\n- Las opciones pasan los valores al chart mediante el m\u00e9todo draw()<\/i> <\/li>
- Cada chart posee los pares adecuados para la customizaci\u00f3n de ese tipo de visualizaci\u00f3n\n<\/li><\/ul>\n\n\n\n\n\n\n
En este ejemplo vemos un Pie Chart en el que se han establecido las siguientes opciones: Ancho y alto \u2022T\u00edtulo \u2022Colores con un array de hexadecimales \u2022is3D, para dar el aspecto 3D <\/p>\n<\/div>\n\n\n\n
Las opciones de customizaci\u00f3n son muy variadas<\/a>, lo que permite, y esta es su principal ventaja, adaptar los gr\u00e1ficos al estilo visual de nuestro proyecto.<\/p>\n\n\n\n\n\n\nEn este se modifican los atributos color, pieHole<\/p>\n<\/div>\n\n\n\n
\n\n\nY en este otro: slices, pieHole, is3D…<\/p>\n<\/div>\n\n\n\n
Otra de las opciones es incluir HTML en los tootilps:<\/p>\n\n\n\n
<\/div>\n\n\n\nO incluir otros Charts dentro de los tooltips:<\/p>\n\n\n\n
<\/div>\n\n\n\nCombo Charts<\/h3>\n\n\n\n
Podemos tambi\u00e9n crear charts agrupados, lo que se conoce como Combo Charts. En este caso, vemos dos ejemplos: en el primero los resultados de dos procesos electorales sin customizar, y el segundo, en el que e incluyen los resultados de unas terceras elecciones, y se customizan algunos elementos.<\/p>\n\n\n\n
<\/div>\n\n\n\n<\/div>\n\n\n\nGoogle Public Data Explorer<\/h2>\n\n\n\n
Aunque no pertenece a la API de Google Chart, Google Public Data Explorer<\/a> es una interesante herramienta de Google que permite elaborar gr\u00e1ficos sencillos de forma r\u00e1pida, utilizando los datos p\u00fablicos abiertos ya cargados por las principales entidades internacionales (Eurostat, US. Census Bureau, Data.gob.uk, Banco Mundial…) o nacionales (INE…)<\/p>\n\n\n\nMediante un sistema de filtros se pueden crear visualizaciones tanto para realizar an\u00e1lisis como para crear gr\u00e1ficos que se vayan a insertar posteriormente en nuestro reportaje o web.<\/p>\n\n\n\n
Tambi\u00e9n es posible cargar set de datos<\/a> propios en formato GPDE.<\/p>\n\n\n\nEn este ejemplo, se usan datos del Banco Mundial para comparar la evoluci\u00f3n de la ratio de ni\u00f1os y ni\u00f1as fuera de la escuela<\/a> por regiones mundiales:<\/p>\n\n\n\n\n[googlemaps https:\/\/www.google.com\/publicdata\/embed?ds=d5bncppjof8f9_&ctype=l&strail=false&bcs=d&nselm=h&met_y=children_out_of_school&fdim_y=education_level:2&scale_y=lin&ind_y=false&rdim=region&idim=region:EAS:ECS:LCN:MEA:SSF:SAS:NAC&ifdim=region&hl=en_US&dl=en_US&ind=false&w=100%&h=450]\n<\/div>\n\n\n\n\nLibrer\u00edas DataViz (Datos)<\/h2>\n<\/div>\n\n\n\n
Existen muchas alternativas actualmente para la visualizaci\u00f3n de datos. Muchas de las librer\u00edas tienen su propia sintaxis, basada o derivada de JS. La ventaja de disponer de esta variedad es que podemos tener un cat\u00e1logo muy amplio de soluciones que permitan elegir la mejor opci\u00f3n para cada caso e ir introduciendo cierta variedad en nuestros proyectos.<\/p>\n\n\n\n
Revisamos, a continuaci\u00f3n, algunas de las soluciones disponibles. Aunque no se entra en su detalle, permite hacerse una idea de las numerosas posibilidades existentes para continuar explorando por nuestra cuenta.<\/p>\n\n\n\n
D3.js<\/h2>\n\n\n\n
D3.js<\/a> es una librer\u00eda JS para manipular documentos basados en datos. Se utiliza para realizar visualizaciones complejas<\/a>. Cuenta con una amplia galer\u00eda de visualizaciones<\/a>.<\/p>\n\n\n\nAlgunos ejemplos interesantes aplicados de esta librer\u00eda:<\/p>\n\n\n\n
- \nChina manufacture<\/a> <\/li>
- \nSimilar song Networks<\/a>\n<\/li><\/ul>\n\n\n\n
En este enlace puedes seguir un tutorial de esta librer\u00eda D3.js<\/a><\/p>\n\n\n\nFuncionalidad<\/h3>\n\n\n\n![\"\"\/](\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/4fa31-js102-1534330105-37-1.jpg\")
<\/figure><\/div>\n\n\n\nPermite obtener datos de cualquier elemento del DOM y aplicarle transformaciones en el documento. <\/p>\n\n\n\n
Sobre un mismo conjunto de datos permite realizar varias transformaciones. Por ejemplo, sobre un array podemos: <\/p>\n\n\n\n
- Crear una tabla <\/li>
- Generar un gr\u00e1fico interactivo en SVG\n<\/li><\/ul>\n\n\n\n
Y de una manera muy flexible y r\u00e1pida. <\/p>\n\n\n\n
Sintaxis<\/b><\/p>\n\n\n\n
Utiliza una sintaxis simplificada de JS para acceder a los selectores del DOM: W3C Selectors API <\/a><\/p>\n\n\n\n![\"\"\/](\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/b8387-js103-1534330184-87-1.jpg\")
<\/figure>\n\n\n\nEjemplos<\/b><\/p>\n\n\n\n
En este primer ejemplo vemos un Diagrama de acorde, documentado en DJ3 (podemos reutilizar el c\u00f3digo<\/a>). En este caso, hemos reutizado el c\u00f3digo y lo hemos adaptado para crear esta versi\u00f3n sobre el flujo de deuda entre pa\u00edses<\/a>:<\/p>\n\n\n\n
![\"\"](\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/guion-movies.jpeg\")
<\/a><\/figure>\n\n\n\nCuando hablamos de un script<\/strong>, un guion o una secuencia de comandos es un peque\u00f1o (a veces no tanto) programa<\/strong> que sirve para \u00abrutinizar\u00bb o automatizar ciertas tareas, habitualmente repetitivas, que se precisan para que funcione un proyecto m\u00e1s complejo.<\/p>\n\n\n\n En nuestro \u00e1mbito, nos interesan los scripts que permiten, como veremos, dotar de interactividad a visualizaciones de informaci\u00f3n o gestionar datos asociados a estas.<\/p>\n\n\n\n <\/p>\n\n\n\n Existen numerosos lenguajes de script, tanto de lado cliente como del lado servidor (C, C++, Python, Java, Go…)<\/p>\n\n\n\n En el lado cliente<\/b>, Javascript es el lenguaje de script nativo de la web. <\/p>\n\n\n\n Su aprendizaje supone introducirse en un lenguaje de programaci\u00f3n, y aunque pueda parecer complicado de entrada, conocerlo un poco nos permite saber c\u00f3mo modificar c\u00f3digo ya escrito o realizar visualizaciones muy atractivas mediante el uso de librer\u00edas y APIs que se basan en Javascript.<\/p>\n\n\n\n \u00bfPara qu\u00e9 nos puede servir los lenguajes de script, y concretamente Javascript, en un proyecto period\u00edstico?<\/b><\/p>\n\n\n\n En los ejemplos que vamos a ir viendo utilizaremos un editor de c\u00f3digo online, JsFiddle.net<\/a>. Podr\u00e1s acceder a los ejemplos de forma directa a trav\u00e9s de objetos embebidos como este, en el que podr\u00e1s trabajar en las diferentes partes del c\u00f3digo accediendo a las diferentes pesta\u00f1as disponibles.<\/p>\n\n\n\n Las cuestiones que vamos a tratar en esta sesi\u00f3n de introducci\u00f3n son conceptos generales que, aunque se ejemplifican con Javascript, son generales que nos sirven para la mayor\u00eda de los lenguajes de script y nos introducen en la siguiente sesi\u00f3n en la que empezar\u00e9is a trabajar con Phyton.<\/b><\/p><\/blockquote><\/figure>\n\n\n\n Un lenguaje<\/b> de programaci\u00f3n interpretado<\/b> por los navegadores en tiempo real.<\/p>\n\n\n\n Ejercicio<\/b><\/p>\n\n\n\n Es un lenguaje que permite dotar de interactividad<\/b> a las p\u00e1ginas web. Algunas de las tareas b\u00e1sicas que puede realizar son:<\/p>\n\n\n\n Adem\u00e1s, mediante la API JS de HTML5 <\/a>podemos acceder a recursos adicionales: c\u00e1mara, almacenamiento de datos, creaci\u00f3n de gr\u00e1ficos, flujo de datos con servidores\u2026)<\/p>\n\n\n\n Permite acceder a informaci\u00f3n en internet: por ejemplo, buscar y obtener las palabras m\u00e1s populares en Twitter de un tema, o para hacer scraping de web utilizando soluciones como Node.js<\/a>, Artoo.js<\/a> o pjscrape<\/a>)<\/p>\n\n\n\n Tambi\u00e9n permite organizar y presentar datos como, por ejemplo, automatizar el trabajo de las hojas de c\u00e1lculo; o la visualizaci\u00f3n de datos.<\/p>\n\n\n\n Ejercicio<\/b><\/p>\n\n\n\n Veamos c\u00f3mo JS aporta interactividad a una web,<\/p>\n\n\n\n Veamos ahora un ejemplo del uso de javascript para cambiar o modificar atributos<\/b> de html. Aqu\u00ed las posibilidades son muy amplias, dado que podemos modificar los valores de cualquier atributo, desde el color de un texto, el tipo de fuente, etc.<\/p>\n\n\n\n En este ejemplo generamos un efecto de sustituci\u00f3n modificando el atributo src de una imagen.<\/p>\n\n\n\n Javascript puede almacenar los siguientes tipos de datos<\/b>:<\/p>\n\n\n\n Una variable es un elemento que contiene informaci\u00f3n <\/b>(datos) que puede ser ejecutada por el c\u00f3digo.<\/p>\n\n\n\n Las variables sirven para guardar<\/b> informaci\u00f3n que ser\u00e1 utilizada posteriormente.<\/p>\n\n\n\n En este ejemplo<\/a> x se define como una variable. Luego, asignamos a x el valor de 6:<\/p>\n\n\n\n La POO (Programaci\u00f3n Orientada a Objetos)<\/b> es un paradigma de programaci\u00f3n que permite optimizar los procesos de programaci\u00f3n y los resultados que se obtienen con ellos. Permite pre-dise\u00f1ar objetos que son almacenados en librer\u00edas o bibliotecas para que puedan ser reutilizados por los programas sin necesidad de tener que volver a escribir las funciones necesarias cada vez que se quiere hacer uso de ellas.<\/p>\n\n\n\n Los elementos fundamentales de la POO incorporan un n\u00famero amplio de componentes (clase, herencia, objeto, m\u00e9todo..), pero nos centraremos solo en los que resultan fundamentales para manejarnos en el entorno de trabajo de un proyecto period\u00edstico<\/p>\n\n\n\n Eventos<\/b><\/p>\n\n\n\n Los eventos son sucesos<\/b>, producidos normalmente por una acci\u00f3n del usuario, que producen alg\u00fan efecto<\/b>. Por ejemplo, cuando un usuario pulsa un bot\u00f3n o hace clic sobre un enlace.<\/p>\n\n\n\n Algunos de los eventos DOM m\u00e1s habituales son:<\/p>\n\n\n\n Funciones<\/b><\/p>\n\n\n\n Todo evento lleva asociado, normalmente, una funci\u00f3n<\/b>.<\/p>\n\n\n\n Una funci\u00f3n es un bloque de c\u00f3digo que puede ser ejecutado<\/b> cuando es llamada por un evento<\/p>\n\n\n\n Son muy \u00fatiles porque es muy habitual reutilizar c\u00f3digo con diferentes argumentos a lo largo de un programa, por lo que podemos utilizar la funci\u00f3n sin tener que escribir de nuevo el c\u00f3digo, s\u00f3lo invoc\u00e1ndola.<\/b><\/p>\n\n\n\n Para llamar a una funci\u00f3n<\/b> hay que invocarla en cualquier parte de la p\u00e1gina web.<\/p>\n\n\n\n Cuando se invoca una funci\u00f3n, todo el c\u00f3digo que contenga entre llaves {} <\/b>se ejecuta<\/p>\n\n\n\n Para invocarla, basta con escribir su nombre seguido de par\u00e9ntesis<\/p>\n\n\n\n Ejemplo con Google Maps<\/a><\/i><\/b>. En este caso, se utiliza la API de Google Maps para crear un mapa que agrupa (cluster) marcadores en funci\u00f3n del nivel de zoom.<\/p>\n\n\n\n Nota: Ver documentaci\u00f3n<\/a><\/p>\n\n\n\n Estos dos conceptos est\u00e1n directamente vinculados.<\/p>\n\n\n\n T\u00e9cnicamente una librer\u00eda o biblioteca<\/b><\/a> (library) es una colecci\u00f3n de implementaciones de comportamiento, pero lo entenderemos mejor si decimos que es una larga lista de c\u00f3digo de programaci\u00f3n que incluye un amplio n\u00famero de funciones que podemos utilizar desde nuestro programa con un esfuerzo limitado.<\/p>\n\n\n\n Por su parte, una API<\/a> (Aplication Programming Interface<\/i>)<\/b> es una especificaci\u00f3n formal que permite comunicar componentes de software de dos sistemas distintos. Para entendernos, es una especie de \u201csubcontrataci\u00f3n\u201d de funciones.<\/p>\n\n\n\n Una API es el libro de instrucciones que nos permite conocer c\u00f3mo trabajar con el conjunto de funciones<\/b>, procedimientos y objetos contenidos en la librer\u00eda o biblioteca con la que vamos a trabajar.<\/p>\n\n\n\n Como se\u00f1ala de forma gr\u00e1fica Diego Ceballos<\/a>, en un ejemplo cotidiano, una cafetera Nespresso ser\u00eda una librer\u00eda para hacer caf\u00e9 de forma r\u00e1pida, y su libro de instrucciones ser\u00eda la API.<\/p>\n\n\n\n API Keys<\/b><\/p>\n\n\n\n Para usar una API normalmente se requiere una API Key de autenticaci\u00f3n para conectarse con el servicio. Ello permite establecer los l\u00edmites de cuota por Key y no por IP. Adem\u00e1s, esto permite comunicar al servicio con la aplicaci\u00f3n solicitante.<\/p>\n\n\n\n Podemos clasificar las APIs en base a la funcionalidad que aportan. Siguiendo este criterio podemos considerar, desde el punto de vista de la utilidad en proyectos period\u00edsticos, las siguientes:<\/p>\n\n\n\n En este enlace puede verse una amplia comparativa de librer\u00edas<\/a>.<\/p>\n\n\n\n Vamos a adentrarnos en el uso de funciones. Para ello, vamos a trabajar con la API de Google Maps<\/a> que es una amplia librer\u00eda dirigida a la creaci\u00f3n de complejas aplicaciones de mapas.<\/p>\n\n\n\n La elaboraci\u00f3n de este mapa nos permitir\u00e1 comprender mejor c\u00f3mo operan las funciones.<\/p>\n\n\n\n Vamos a elaborar un mapa sencillo en el que incluiremos un marcador<\/b><\/a>:<\/p>\n\n\n\n En este enlace puedes ver el detalle explicado de todo el procedimiento<\/a>.<\/p>\n\n\n\n Ya hemos visto muchas de las posibilidades que ofrece Google Maps API<\/a>.<\/p>\n\n\n\n En este apartado, veremos algunas caracter\u00edsticas que nos pueden resultar \u00fatiles para la configuraci\u00f3n de nuestros mapas.<\/p>\n\n\n\n Query Places nos permite hacer una b\u00fasqueda automatizada de lugares. <\/p>\n\n\n\n Con la librer\u00eda places podemos ubicar de forma autom\u00e1tica lugares en un mapa.<\/p>\n\n\n\n A trav\u00e9s de los par\u00e1metros de b\u00fasqueda del m\u00e9todo nearbySearch<\/a><\/i> podemos modificar la query<\/i> que hace sobre los datos de places.<\/p>\n\n\n\n Veamos un ejemplo<\/a>:<\/p>\n\n\n\n Y aqu\u00ed otro ejemplo ampliando la informaci\u00f3n<\/a> del infowindow: <\/p>\n\n\n\n Si trabajar directamente con la API de Google Maps te resulta complejo, Gmaps.js<\/a> es una librer\u00eda desarrollada para simplificar el trabajo con la API.<\/p>\n\n\n\n JSON es el acr\u00f3nimo de J<\/b>avaScript O<\/b>bject N<\/b>otation.<\/p>\n\n\n\n Es un lenguaje independiente con una sintaxis basada en Javascript para almacenamiento e intercambio de datos.<\/i><\/p>\n\n\n\n Se utiliza en aplicaciones AJAX y es una alternativa a XML m\u00e1s sencilla<\/b> de usar.<\/p>\n\n\n\n JSON resulta relevante por:<\/p>\n\n\n\n En este ejemplo<\/a> vemos c\u00f3mo creamos un objeto JSON en Javascript.<\/p>\n\n\n\n GeoJSON<\/a> es un formato para el intercambio de datos geoespaciales<\/b> basado en JSON<\/i>.<\/p>\n\n\n\n Permite informar diferentes tipos de geometr\u00edas<\/b>: puntos, multipuntos, l\u00edneas, multil\u00edneas, pol\u00edgonos, m\u00faltiples pol\u00edgonos, y colecciones de geometr\u00edas <\/p>\n\n\n\n Uso de GeoJSON para cargar datos masivos<\/b><\/p>\n\n\n\n Vamos a trabajar con ejemplo de un mapa creado con la API de Google Maps. Vamos a cargar ficheros GeoJSON <\/b>con miles de datos <\/b>y customizar los resultados del mapa convirtiendo los marcadores en c\u00edrculos.<\/p>\n\n\n\n Los datos los obtenemos, para este ejemplo, del sistema de feeds del USGS que ofrece datos en varios formatos, entre ellos GeoJSON, sobre diferentes sucesos naturales, en este caso, terremotos<\/a>.<\/p>\n\n\n\n Como su sistema no permite directamente hacer llamadas de manera gratuita, tenemos que descargarnos el fichero que queramos y ubicarlo en servidor propio<\/a>.<\/p>\n\n\n\n Una vez que tenemos el fichero en nuestro servidor, con una URL p\u00fablica, podemos cargarlo y customizar el mapa<\/a> obteniendo este resultado<\/a>.<\/p>\n\n\n\n Otra de las utilidades de JSON es la personalizaci\u00f3n de estilos. La API de Google Maps facilita un completo sistema de estilos para customizar<\/a> el mapa a voluntad, algo que con otras soluciones de Google como Mymaps es m\u00e1s limitada<\/p>\n\n\n\n Asistente de mapa de Google Maps<\/b><\/p>\n\n\n\n En todo caso, configurar estilos complejos creando escribiendo directamente el c\u00f3digo de los estilos lleva tiempo. As\u00ed que muchas veces lo m\u00e1s eficaz es usar el asistente de estilos de mapa<\/b><\/a> de la API de Google Maps.<\/p>\n\n\n\n Los pasos para hacerlo<\/a> son:<\/p>\n\n\n\n Leaflet<\/a> es una librer\u00eda especializada para la creaci\u00f3n de mapas interactivos.<\/b><\/p>\n\n\n\n Tiene una amplia documentaci\u00f3n<\/a> y una galer\u00eda de estilos de mapa<\/a> (basados en Mapbox) para comenzar a trabajar r\u00e1pidamente con ella.<\/p>\n\n\n\n Como toda librer\u00eda basada en JS, utiliza la base de este, pero simplifica la sintaxis para hacer m\u00e1s sencillo y \u00e1gil el desarrollo de los mapas.<\/p>\n\n\n\n Vamos a crear un mapa b\u00e1sico con LeafleftJs<\/a>:<\/p>\n\n\n\n En este otro mapa<\/a>, sobre la base del anterior hemos incorporado un marcador personalizado usando las opciones que LeafLeft<\/a> tiene para ello.<\/p>\n\n\n\n Mapbox<\/a> es otra estupenda librer\u00eda para crear mapas. De hecho, tiene su propio sistema de mapas que es usado por otras librer\u00edas como base, tal como sucede como LeafLeft. <\/p>\n\n\n\n Ofrece una documentaci\u00f3n muy amplia<\/a> lo que facilita trabajar con ella.<\/p>\n\n\n\n De manera similar a lo que sucede con Google Maps, existe la posibilidad de trabajar directamente con la API<\/a> o hacerlo mediante el editor de mapas (studio)<\/a>. Esto \u00faltimo simplifica a\u00fan m\u00e1s el desarrollo dado que, adem\u00e1s, luego podremos customizar o personalizar elementos accediendo al c\u00f3digo resultante.<\/p>\n\n\n\n Una de las aportaciones interesantes de esta librer\u00eda es que dispone de numerosos efectos que pueden darle un aspecto diferente a nuestras visualizaciones en mapas. La documentaci\u00f3n de la API incluye muchas, pero destacaremos aqu\u00ed algunas de ellas:<\/p>\n\n\n\n En este apartado de la documentaci\u00f3n<\/a> podemos revisar todas las posibilidades que ofrece esta librer\u00eda.<\/p>\n\n\n\n ArcGIS online es una completa suite de aplicaciones y APIs. Dispone de un Gestor web<\/a> y de numerosas APIs <\/a>para interactuar y adaptar los resultados.<\/p>\n\n\n\n En este enlace puedes acceder a un tutorial b\u00e1sico para empezar a crear mapas<\/a> 2D.<\/p>\n\n\n\n Un aspecto diferencial de esta soluci\u00f3n, es que ofrece un editor de escenas<\/b>. Esto facilita un modo de crear escenas 3D sobre la representaci\u00f3n de la esfera terrestre, como en este ejemplo:<\/p>\n\n\n\n O sobre zonas concretas en las que pueden incluirse capas como edificios, etc:<\/p>\n\n\n\n Google Chart<\/a><\/b> es una librer\u00eda orientada a la creaci\u00f3n de una amplia variedad de gr\u00e1ficos din\u00e1micos<\/a>.<\/p>\n\n\n\n La creaci\u00f3n de Chart requiere que los datos sean incluidos mediante una clase de JavaScript: google.visualization.DataTable<\/i> <\/p>\n\n\n\n La clase est\u00e1 definida en la librer\u00eda de visualizaci\u00f3n de Google.<\/p>\n\n\n\n La tabla de datos corresponde a una tabla similar a esta.<\/p>\n\n\n\n Veamos los pasos para crear nuestro primer ejemplo<\/a>:<\/p>\n\n\n\n Para cada Chart podemos personalizar<\/a> diferentes elementos como: <\/p>\n\n\n\n Las opciones se presentan como pares name.value<\/b><\/i> <\/p>\n\n\n\n En este ejemplo vemos un Pie Chart en el que se han establecido las siguientes opciones: Ancho y alto \u2022T\u00edtulo \u2022Colores con un array de hexadecimales \u2022is3D, para dar el aspecto 3D <\/p>\n<\/div>\n\n\n\n Las opciones de customizaci\u00f3n son muy variadas<\/a>, lo que permite, y esta es su principal ventaja, adaptar los gr\u00e1ficos al estilo visual de nuestro proyecto.<\/p>\n\n\n\n En este se modifican los atributos color, pieHole<\/p>\n<\/div>\n\n\n\n Y en este otro: slices, pieHole, is3D…<\/p>\n<\/div>\n\n\n\n Otra de las opciones es incluir HTML en los tootilps:<\/p>\n\n\n\n O incluir otros Charts dentro de los tooltips:<\/p>\n\n\n\n Podemos tambi\u00e9n crear charts agrupados, lo que se conoce como Combo Charts. En este caso, vemos dos ejemplos: en el primero los resultados de dos procesos electorales sin customizar, y el segundo, en el que e incluyen los resultados de unas terceras elecciones, y se customizan algunos elementos.<\/p>\n\n\n\n Aunque no pertenece a la API de Google Chart, Google Public Data Explorer<\/a> es una interesante herramienta de Google que permite elaborar gr\u00e1ficos sencillos de forma r\u00e1pida, utilizando los datos p\u00fablicos abiertos ya cargados por las principales entidades internacionales (Eurostat, US. Census Bureau, Data.gob.uk, Banco Mundial…) o nacionales (INE…)<\/p>\n\n\n\n Mediante un sistema de filtros se pueden crear visualizaciones tanto para realizar an\u00e1lisis como para crear gr\u00e1ficos que se vayan a insertar posteriormente en nuestro reportaje o web.<\/p>\n\n\n\n Tambi\u00e9n es posible cargar set de datos<\/a> propios en formato GPDE.<\/p>\n\n\n\n En este ejemplo, se usan datos del Banco Mundial para comparar la evoluci\u00f3n de la ratio de ni\u00f1os y ni\u00f1as fuera de la escuela<\/a> por regiones mundiales:<\/p>\n\n\n\n Existen muchas alternativas actualmente para la visualizaci\u00f3n de datos. Muchas de las librer\u00edas tienen su propia sintaxis, basada o derivada de JS. La ventaja de disponer de esta variedad es que podemos tener un cat\u00e1logo muy amplio de soluciones que permitan elegir la mejor opci\u00f3n para cada caso e ir introduciendo cierta variedad en nuestros proyectos.<\/p>\n\n\n\n Revisamos, a continuaci\u00f3n, algunas de las soluciones disponibles. Aunque no se entra en su detalle, permite hacerse una idea de las numerosas posibilidades existentes para continuar explorando por nuestra cuenta.<\/p>\n\n\n\n D3.js<\/a> es una librer\u00eda JS para manipular documentos basados en datos. Se utiliza para realizar visualizaciones complejas<\/a>. Cuenta con una amplia galer\u00eda de visualizaciones<\/a>.<\/p>\n\n\n\n Algunos ejemplos interesantes aplicados de esta librer\u00eda:<\/p>\n\n\n\n En este enlace puedes seguir un tutorial de esta librer\u00eda D3.js<\/a><\/p>\n\n\n\n Permite obtener datos de cualquier elemento del DOM y aplicarle transformaciones en el documento. <\/p>\n\n\n\n Sobre un mismo conjunto de datos permite realizar varias transformaciones. Por ejemplo, sobre un array podemos: <\/p>\n\n\n\n Y de una manera muy flexible y r\u00e1pida. <\/p>\n\n\n\n Sintaxis<\/b><\/p>\n\n\n\n Utiliza una sintaxis simplificada de JS para acceder a los selectores del DOM: W3C Selectors API <\/a><\/p>\n\n\n\n Ejemplos<\/b><\/p>\n\n\n\n En este primer ejemplo vemos un Diagrama de acorde, documentado en DJ3 (podemos reutilizar el c\u00f3digo<\/a>). En este caso, hemos reutizado el c\u00f3digo y lo hemos adaptado para crear esta versi\u00f3n sobre el flujo de deuda entre pa\u00edses<\/a>:<\/p>\n\n\n\n\u00bfCon qu\u00e9 lenguajes programamos scripts?<\/h2>\n<\/div>\n\n\n\n
<\/figure>\n\n\n\n<\/figure>\n\n\n\nNociones b\u00e1sicas de JS<\/h2>\n<\/div>\n\n\n\n
\n\u00bfQu\u00e9 es?<\/span>\n<\/h2>\n\n\n\n
\u00bfPara qu\u00e9 sirve?<\/h2>\n\n\n\n
\n
\n
Tipos de datos<\/h2>\n\n\n\n
<\/figure>\n\n\n\n<\/figure>\n\n\n\nVariables<\/h2>\n\n\n\n
\u00bfQu\u00e9 es una variable?<\/h3>\n\n\n\n
Conceptos de POO<\/h2>\n\n\n\n
Objetos<\/h3>\n\n\n\n
<\/figure>\n\n\n\n<\/figure>\n\n\n\n<\/figure>\n\n\n\n<\/figure>\n\n\n\nLibrer\u00edas y APIs<\/h2>\n<\/div>\n\n\n\n
<\/figure>\n\n\n\nTipos de Librer\u00edas y APIs<\/h2>\n\n\n\n
<\/figure>\n\n\n\nGoogle Maps API<\/h2>\n<\/div>\n\n\n\n
Google Maps API<\/h2>\n\n\n\n
<\/figure>\n\n\n\nCrear un mapa simple incluyendo un marcador<\/h2>\n\n\n\n
\n
Funciones avanzadas<\/h2>\n\n\n\n
Query Places<\/h3>\n\n\n\n
<\/figure><\/div>\n\n\n\nGmaps.js<\/h2>\n\n\n\n
JSON y GeoJSON<\/h2>\n<\/div>\n\n\n\n
<\/figure>\n\n\n\n\u00bfPor qu\u00e9 nos interesa JSON?<\/h2>\n\n\n\n
<\/figure>\n\n\n\nGeoJSON<\/h2>\n\n\n\n
<\/figure>\n\n\n\nUso de JSON para personalizar mapas<\/h2>\n\n\n\n
<\/figure><\/div>\n\n\n\n\n
LeafLeft<\/h2>\n<\/div>\n\n\n\n
<\/figure>\n\n\n\n\n
Mapbox<\/h2>\n<\/div>\n\n\n\n
<\/figure>\n\n\n\nEjemplos de mapas que podemos crear<\/h3>\n\n\n\n
<\/figure>\n\n\n\nArcGIS online<\/h2>\n<\/div>\n\n\n\n
<\/figure>\n\n\n\nGoogle Chart<\/h2>\n<\/div>\n\n\n\n
<\/figure><\/div>\n\n\n\nCreaci\u00f3n de Chart b\u00e1sicos<\/h2>\n\n\n\n
<\/figure><\/div>\n\n\n\n\n
Personalizaci\u00f3n del Chart<\/h2>\n\n\n\n
<\/figure><\/div>\n\n\n\nCombo Charts<\/h3>\n\n\n\n
Google Public Data Explorer<\/h2>\n\n\n\n
Librer\u00edas DataViz (Datos)<\/h2>\n<\/div>\n\n\n\n
D3.js<\/h2>\n\n\n\n
Funcionalidad<\/h3>\n\n\n\n
<\/figure><\/div>\n\n\n\n<\/figure>\n\n\n\n