S3 2016 taller-javascript-v2
-
Upload
manuel-gertrudix -
Category
Education
-
view
438 -
download
5
Transcript of S3 2016 taller-javascript-v2
![Page 1: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/1.jpg)
Taller de fundamentos aplicados de JAVASCRIPT3Manuel Gértrudix – Sergio Álvarez
![Page 2: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/2.jpg)
1. JSON2. Librerías y APIs
¿Qué vamos a aprender?
Mapas•Google Maps•CartoDB•MapBox
Datos•Google Charts y derivados•Highcharts.js•Otros (Morris, Chart.js)
Imágenes•Pictográficas•Chartist.js•Librerías 3D
Animación•Animate.css
3. Otras aplicaciones• VIS• ArcGIS• Tools knight lab
![Page 3: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/3.jpg)
Para qué sirve Qué es JSON
Sintaxis básica
JSON
![Page 4: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/4.jpg)
¿Qué es?JSON
JSON es el acrónimo de JavaScript Object Notation Es un lenguaje independiente con una sintaxis basada
en Javascript para • Almacenamiento e intercambio de datos
Se utiliza en aplicaciones AJAX Es una alternativa a XML más sencilla de usar
JSON
XML
![Page 5: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/5.jpg)
¿Por qué es importante?JSON
JSON resulta relevante por: Es la respuesta de datos que devuelven la mayoría de las APIs web Muchos portales de datos abiertos ofrecen la información en este
formato Porque facilita la integración y visualización de información
![Page 6: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/6.jpg)
Un ejemplo mediante una visualizaciónJSON - HighChart
Todos los países
![Page 7: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/7.jpg)
SintaxisJSON
El formato JSON es idéntico al que se utiliza en JS para crear objetos
Los datos son convertidos y tratados como objetos, por lo que:• Se le aplican métodos, se crean variables, etc.
• Es más sencillo que XML ya que:• Es más corto
• No requiere etiquetas de cierre
• Puede usar arrays de datos
• Puede ser “parseado” con una función JS estándar
![Page 8: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/8.jpg)
SintaxisJSON
Reglas• Los datos se cargan en el par nombre/valor
• Los datos se separan con comas ,• Los objetos se agrupan con llaves { }
• Los arrays de datos se agrupan con corchetes [ ]
![Page 9: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/9.jpg)
SintaxisJSON
Carga de datos con el objeto JSON http Request• Habitualmente JSON carga los datos desde un servidor
web y muestra estos en una página web Pasos cargando desde un fichero:
• Se crea un array de objetos, y se crea una función que muestra el contenido en el html
• Se guarda el array: • en un fichero externo (txt, cvs…)
• En una BBDD (vg. MySQL) mediante PHP
• Mediante el método XMLHttpRequest se lee el fichero y se escribe en la web para mostrar los datos
![Page 10: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/10.jpg)
VisorJSON
Los visores JSON permiten cargar directamente en el navegador un fichero JSON para visualizar su contenido:
Jsonviewer.stack.hu nos permite cargar un fichero o ver un enlace desde la web
http://jsonviewer.stack.hu/
![Page 11: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/11.jpg)
Qué es una librería Qué es una API Para qué sirven
Cuáles son interesantes
Librerías y APIs
![Page 12: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/12.jpg)
Resumiendo mucho Se trata de colecciones de funciones JS disponibles en un único fichero
compartido
Para qué nos sirven Ahorran tiempo de programación JS Permiten reutilizar el código (incluso la carga) Son ligeras (4-8 Kb)
¿Qué es una librería JS?
![Page 13: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/13.jpg)
Una API (Aplication Programation Interface) es una especificación que permite comunicar componentes de software• Comprende el conjunto de funciones, procedimientos
y objetos que contiene una librería o biblioteca.• Dichos elementos pueden ser invocados desde otros
componentes software para acceder a servicios y realizar procesos.
• Es un método para mejorar la abstracción en programación
¿Qué es una API?
![Page 14: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/14.jpg)
Mapas• Google Maps• CartoDB• MapBox
Animación• Animate.css• ScrollReveal
Aplicaciones• Angular.js• Modernizr
DOM• JQuery• Prototype
Imágenes• Three.js• Chartist.js• Pictográficas
Datos• Chart.js• Highcharts.ks
Tipos de librerías
Comparativa
![Page 15: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/15.jpg)
Google Maps CartoDB
Librerías para mapas
![Page 16: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/16.jpg)
Librerías para mapas interactivosGeoJSON
GeoJSON es un formato de datos, basado en la sintásis de JSON, que intercambia datos con servicios y tecnologías GIS (Sistemas de Información Geográfica)
Leaflet es una librería especializada para la creación de mapas interactivos
http://leafletjs.com/examples.html
![Page 17: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/17.jpg)
Google Maps APICarga en el head
![Page 18: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/18.jpg)
Pasos para crear un mapa
1. Se carga la API
2. Se crea una función para iniciar el mapa
3. A través de una variable, se crea un objeto para definir las propiedades del mapa
LocalizaciónNivel de zoom
Tipo de mapa
![Page 19: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/19.jpg)
Pasos para crear un mapa
4. Se crea el contenedor del mapa
5. Se crea el objeto mapa
6. Por último, se coloca un evento Listener para cargar el mapa
Se pasan las propiedades del objeto mapa
![Page 20: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/20.jpg)
Google API Key
• Google API Key• Si el número de llamadas que van a hacer nuestros
mapas es muy alto, debido al tráfico de la página, debe utilizarse una Google API Key
• Para dar de alta el proyecto debes acceder, con tu cuenta de Google, al Google Developers Console
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_KEY"></script>
![Page 22: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/22.jpg)
Overlays sobre mapas
• Los overlays son capas superpuestas al mapa.• Pueden ser:
• Marcadores (marker)• Líneas (polyline)• Polígonos (polygon)• Círculos y rectángulos (circle – rectangle)• Ventanas de información (info windows)• Capas customizadas (custom overlays)
1 marcador varios Animado + imagen
![Page 23: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/23.jpg)
Aplicaciones útiles
0 Para localizar las coordenadas del lugar que necesitas Google Maps utiliza GD (Grados decimales) Coordenadas-GPS
0Datos cartográficos Bancos de ficheros de shapefiles: KML, vectoriales… Global Administrative Areas
![Page 24: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/24.jpg)
InicioCartoDB
• CartoDB es una aplicación para mapear datos.
• Carga datos en diferentes formatos
• Permite un alto nivel de edición y personalización
• Dispone de una API abierta
![Page 25: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/25.jpg)
VisualizaciónCartoDB• Pasos:
1. Darse de alta en CartoDB2. Descargar los
datos de FOGASA3. Crear un nuevo Dataset
en CartoDB importando el CSV
4. Descargar el fichero kmz de España de nivel 2
5. Abrir el dataset con los datos de FOGASA y unir con los de las provincias de España (provincia – name)
6. Realizar los ajustes en el mapa
Vamos a crear un mapa con datos de FOGASA
![Page 26: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/26.jpg)
PreparaciónCartoDB
• CartoDB ofrece, además del entorno gráfico para crear visualizaciones, una librería denominada CartoDB.js
• Esta librería nos permite interactuar con el servicio:• Conectando con las visualizaciones que ya tenemos• Creando nuevas visualizaciones• Customizando la visualización• Accediendo o consultando los datos desde el
navegador
![Page 28: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/28.jpg)
PreparaciónCartoDB
http://cadenaser.com/especiales/seccion/espana/2014/sonidos-11m/
Un ejemplo elaborado
![Page 29: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/29.jpg)
PreparaciónMapbox
https://www.mapbox.com
![Page 31: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/31.jpg)
Librería Mapbox.jsEfectos
https://www.mapbox.com/mapbox.js/api/v2.2.4/
• Zooming• Animación• Vídeo Tooltips
![Page 32: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/32.jpg)
Google Chart Chart.js
Highcharts morris.js
…
Librerías para datos (Dataviz)
![Page 33: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/33.jpg)
PreparaciónGoogle Charts
https://developers.google.com/chart/
![Page 34: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/34.jpg)
¿Cómo funciona?Google Charts
Google JSAPI API
Librería de visualización de Google
Librería del Chart
concretoVisualización
![Page 35: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/35.jpg)
Charts – Pasos para crear una visualización1. Cargando las librerías
El primer paso es cargar en el <head> las librerías de Google
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script><script type="text/javascript"> google.charts.load('current', {packages: ['corechart']}); google.charts.setOnLoadCallback(drawChart);</script>
El script hace una llamada a la API de Google para cargar sus funcionalidades
Ahora le indica al Google Loader que cargue la visualización
correspondiente
Corechart carga:bar, column, line, area, stepped area, bubble, pie, donut, combo, candlestick, histogram, scatter
![Page 36: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/36.jpg)
Charts – Pasos para crear una visualización2. Preparando los datos
La creación de Chart requiere que los datos sean incluidos mediante una clase de JavaScript: google.visualization.DataTable
La clase está definida en la librería de visualización de Google
La tabla de datos corresponde a una tabla similar a esta
![Page 37: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/37.jpg)
Se crea la tabla y el array de datos
Se crea la variable
Se definen las columnas
Se cargan datos en celdas
Charts – Pasos para crear una visualización2. Preparando los datos
![Page 38: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/38.jpg)
Se definen las opciones del chart
Charts – Pasos para crear una visualización3. Personalizando el Chart
![Page 39: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/39.jpg)
Para cada Chart podemos personalizar diferentes elementos como: Título, Color, grosor de línea, relleno de fondo, etc. Incluir elementos: títulos de los ejes, etc.
Las opciones se presentan como pares name.valueLas opciones pasan los valores al chart mediante el
método draw()Cada chart posee los pares adecuados para la
customización de ese tipo de visualización
Charts – Pasos para crear una visualización3. Personalizando el Chart
![Page 40: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/40.jpg)
Pie hole Exploding Slide
Charts – Pasos para crear una visualización3. Personalizando el Chart
![Page 41: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/41.jpg)
Uso de HTML en Tooltips Charts dentro de Tooltips
Charts – Pasos para crear una visualización3. Personalizando el Chart
![Page 42: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/42.jpg)
Charts – Pasos para crear una visualización4. Dibujando el Chart
Con los datos y las opciones, se instancia el chart
Cada tipo de Chart posee su propia clase para instanciar la figura correspondiente: PieChart usa la clase: google.visualization.PieChart BarChart usa la clase: google.visualization.BarChart
![Page 43: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/43.jpg)
Por último, se dibuja el resultado final en el body
Charts – Pasos para crear una visualización4. Dibujando el Chart
<body>//Div that will hold the pie chart <div id="chart_div" style="width:400; height:300"></div> </body>
![Page 44: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/44.jpg)
ChartsTipología
https://developers.google.com/chart/interactive/docs/gallery
![Page 45: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/45.jpg)
PreparaciónFusion Tables
• Ejemplos: https://sites.google.com/site/fusiontablestalks/stories
• Búsqueda de tablas públicas: http://research.google.com/tables
![Page 46: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/46.jpg)
Creación de tablas fusionadas 1Fusion Tables
Vamos a crear un mapa de de intensidad con límites personalizados:• Abre el mapa de los distritos de elección de congresistas de los
Estados Unidos, y haz una copia para poder editar• Abre la hoja de cálculo de las estadísticas de calefacción de
hogares, y haz una copia• Combina las dos tablas en una sola:
• En la tabla Household Heating statistics haz clic en File > Merge. • Copia la URL del fichero Congressional boundaries table y pégala en el
cuadro "Or paste a web address here. Haz clic en Next.• Especifica la columna que ambas tablas tienen en común. En este caso:
• En la izquierda selecciona: "Two-digit District"• En la derecha: "id”
• Haz clic para mezclar ambas tablas.
![Page 47: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/47.jpg)
Creación de tablas fusionadas 2Fusion Tables
Ahora vamos a personalizar el mapa:• Selecciona la opción “Map of shape”• Pulsa en Tools>Change map• En Feature map>Change feature styles, selecciona la opción “Fill
color>Buckets”• Selecciona la opción: “Divide into x buckets” y selecciona 4, por
ejemplo. Ajusta los elementos de color.• Ajusta cualquier otro elemento.
• Publica tu tabla.
![Page 48: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/48.jpg)
PreparaciónGoogle Public Data Explorer
DataSets públicos También es posible cargar set de datos propios en GPDE
![Page 49: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/49.jpg)
Dataset Publishing LanguageDSPL
DSPL es un formato de datos y metadatos diseñado para crear visualizaciones interactivas en Google Public Data Explorer, a partir de datasets.
Características:• Usa datos existentes en ficheros XML o CSV.• Mapeable• Abierto• Multi-lenguaje
• Tutorial
![Page 50: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/50.jpg)
TareaGPDE
Vamos a utilizar nuestros propios datos:1. Accede a los dataset de ejemplo en DSLP2. Descarga un paquete ZIP de datos3. Accede al administrador de Dataset de GPDE y
sube el zip4. Carga los datos y crea una visualización a partir de
ellos.
![Page 51: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/51.jpg)
PreparaciónCloud Highcharts
http://cloud.highcharts.com/
![Page 52: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/52.jpg)
TareaCloud Highcharts
http://cloud.highcharts.com/
0Vamos a trabajar con Highcharts Cloud1. Accede a http://cloud.highcharts.com/2. Date de alta en el servicio web3. Crea un nuevo gráfico
• Selecciona uno de la librería• Prueba con los datos de ejemplo
4. Recupera una tabla de datos e impórtala vía csv o mediante Google Spreadsheet
5. Comprueba las opciones de personalización6. Expórtala y comprueba el resultado.
![Page 53: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/53.jpg)
PreparaciónHighcharts
http://www.highcharts.com/
![Page 54: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/54.jpg)
TareaHighcharts
http://cloud.highcharts.com/
Vamos a trabajar ahora con la librería Highcharts 1. Accede a http://www.highcharts.com/demo/2. Selecciona un gráfico y ábrelo en jsFiddle3. Modifica los datos4. Prueba a cargar los diferentes temas:
<script src="http://www.highcharts.com/js/themes/gray.js"></script> <script
src="http://www.highcharts.com/js/themes/dark-blue.js"></script> <script src="http://www.highcharts.com/js/themes/dark-green.js"> </script><script src="http://www.highcharts.com/js/themes/grid.js"> </script><script
src="http://www.highcharts.com/js/themes/skies.js"></script> Podrías ajustar los temas editando los ficheros js
![Page 55: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/55.jpg)
TareaHighcharts
Veamos ahora cómo crear un Highchart desde cero:
1. Carga la librería highcharts.js y alguna librería como jQuery, MooTools o Prototype.
2. Añade un div en el body de la página
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="width:100%; height:400px;"></div>
…/…
![Page 56: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/56.jpg)
TareaHighcharts…/…
3. Inicializa el chart añadiendo el script.
$(function () { $('#container').highcharts({ chart: { type: 'bar' }, title: { text: 'Fruit Consumption' }, xAxis: { categories: ['Apples', 'Bananas', 'Oranges'] }, yAxis: { title: { text: 'Fruit eaten' } }, series: [{ name: 'Jane', data: [1, 0, 4] }, { name: 'John', data: [5, 7, 3] }] });});
Ejemplo simple
Ejemplo con opciones
![Page 57: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/57.jpg)
TareaHighcharts…/…
4. Añadiendo estilos. • Podemos adaptar los estilos mediante Highcharts.setOptions
$(function() { Highcharts.setOptions({ chart: { backgroundColor: { linearGradient: [0, 0, 500, 500], stops: [ [0, 'rgb(255, 255, 255)'], [1, 'rgb(240, 240, 255)'] ] }, borderWidth: 2, plotBackgroundColor: 'rgba(255, 255, 255, .9)', plotShadow: true, plotBorderWidth: 1 } });
Ejemplo paraModificar estilos
![Page 58: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/58.jpg)
TareaHighcharts…/…
5. Añadiendo temas. • Highchart tiene predefinidos unos temas que se
pueden cargar mediante un script. • Deben estar subidos en nuestra web.• Y podemos crear nuestros propios temas.
<script src="http://comunicaciondigital.esy.es/files/highchart/js/themes/dark-blue.js"></script>
Ejemplo paraprobar los temas
![Page 59: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/59.jpg)
Qué es• Librería JS que permite
crear gráficos asociada con jQuery y Raphael
Para qué se utiliza• Creación de gráficos
estándarDemos• Line & Area Charts | Bar Chart |
Donuts Charts
Morris.js
http://morrisjs.github.io/morris.js/
![Page 60: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/60.jpg)
TareaMorris.js
Vamos a practicar con Morris.js1. Accede a http://morrisjs.github.io/morris.js/ 2. Crea un fichero html3. Enlaza los js y css4. Crea el div para cargar el gráfico5. Adjunta el script6. Comprueba las opciones de parametrización7. Prueba con el resto de gráficas
![Page 61: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/61.jpg)
TareaMorris.js
Line
Área
Line con parámetros
Barras
Donuts
![Page 62: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/62.jpg)
LibreríaChartist.JS
0Chartist.JS es una librería para crear Chart
0Altamente customizable0Con gráficos
responsivos 0Librería de ejemplos
• Avanced Smil Animations
• Animating Donut
https://gionkunz.github.io/chartist-js/getting-started.html
![Page 63: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/63.jpg)
LibreríaAnyChart.JS
0AnyChart.JS es una completa librería para el desarrollo de: Charts Stocks Maps Gantt
http://www.anychart.com/
![Page 64: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/64.jpg)
LibreríaAnyChart.JS
PlayGround
![Page 65: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/65.jpg)
Qué es• Librería JS para
manipular documentos basados en datos.
Para qué se utiliza• Visualizaciones complej
asEjemplos visualizaciones• China manufacture• Similar song Networks
D3.js
http://d3js.org/
![Page 66: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/66.jpg)
Para qué sirve y qué haceD3.js
Permite obtener datos de cualquier elemento del DOM y aplicarle transformaciones en el documento.
Sobre un mismo conjunto de datos permite realizar varias transformaciones. Por ejemplo, sobre un array podemos:
• Crear una tabla
• Generar un gráfico interactivo en SVG Y de una manera muy flexible y rápida.
![Page 67: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/67.jpg)
Para qué sirve y qué haceD3.js
Utiliza una sintaxis simplificada de JS para acceder a los selectores del DOM: W3C Selectors API
JS
D3.js
![Page 68: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/68.jpg)
TareaD3.js
Vamos a practicar con D3.js
![Page 69: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/69.jpg)
TareaD3.js
Ejemplos interesantes
![Page 70: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/70.jpg)
Qué es• Librería JS que permite
crear seis tipos de gráficos
Para qué se utiliza• Creación de gráficos
vectorialesDemos• Ejemplos
Chart.js
http://www.chartjs.org/
![Page 71: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/71.jpg)
LibreríaSigma.JS
0Sigma.JS es una librería para crear dibujo gráfico
0Especializado en creación de gráficos de redes
http://sigmajs.org/
![Page 72: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/72.jpg)
Pictográficas Three.js
Chartis.js
Librerías para Imágenes
![Page 73: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/73.jpg)
Librerías pictográficasQué son
Librerías pictográficas• Las librerías pictográficas web son colecciones de iconos
que pueden cargarse vía web en nuestro proyecto mediante un enlace.
• Las tres principales son:
• Font Awesome Icons
• Bootstrap Icons
• Google Icons
![Page 74: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/74.jpg)
Librerías pictográficasFont Awesome
Font Awesome• Es una colección libre de más de 600 iconos.
• Permite control CSS, sin manejo de JS
![Page 75: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/75.jpg)
Qué es• Librería JS que permite
crear gráficos vectoriales (SVG) basado en el uso de canvas
Para qué se utiliza• Creación de gráficos
vectoriales: mapasDemos• http://raphaeljs.com/
Raphael.js
http://raphaeljs.com/
![Page 76: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/76.jpg)
Qué es• Librería JS que codifica
gestos en interfaces multitáctiles
Para qué se utiliza• Mejora de UX para
tabletas, móviles…Ejemplos visualizaciones• Reshaping New YorkFuncionamiento• Event logger | Carousel
Hammer.js
http://eightmedia.github.io/hammer.js/
![Page 77: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/77.jpg)
Es una especificación que permite mostrar gráficos 3D en navegadores web.• Sin plugins (requiere que la plataforma soporte OpenGL 2.0
Los navegadores más actuales)• Es una API para Javascript • Trabaja directamente con el GPU (Graficos
acelerados por harware), por lo que requiere librerías para agilizar su implementación• Tree.js es la más popular
0 Ver presentación
WebGL
![Page 78: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/78.jpg)
WebGL
http://www.zolabo.com/projects/hdi/
WebGL Chrome Experiments
![Page 79: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/79.jpg)
Tree.js
http://threejs.org/ Ejemplos
![Page 80: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/80.jpg)
Philo GL
http://www.senchalabs.org/philogl/demos.html
![Page 81: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/81.jpg)
Es una comunidad de desarrolladores 3D Ejemplos interesantes utilizables
Sketchfab
https://sketchfab.com
![Page 82: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/82.jpg)
Immersive Journalism
http://www.immersivejournalism.com/
![Page 83: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/83.jpg)
Por si fuera poco…
https://www.javascripting.com
![Page 84: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/84.jpg)
Animate.css ScrollReveal
Librerías para animaciones
![Page 85: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/85.jpg)
Animación con CSSAnimate.css
Animate.css es una sencilla colección de estilos en CSS3 de animación
Vemos un ejemplo Y cambiamos el
modelo de animación
http://daneden.github.io/animate.css/
![Page 86: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/86.jpg)
ArcGIS: Storymap Tools Knightlab
Otras aplicaciones
![Page 87: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/87.jpg)
Visual Investigative ScenariosVIS
0VIS es una herramienta online, apoyada por el International Press Institute, que permite crear mapas visuales de investigación en los que se pueden relacionan los diferentes sujetos, entidades, empresas, etc.
0Facilita una forma sencilla de ir organizando las relaciones, con indicaciones de localización geográfica, entre las entidades que se van incluyendo, de forma que se va generando un mapa de relaciones que permita descubrir cuestiones interesantes entre ellas.
0Demo
https://vis.occrp.org/
![Page 88: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/88.jpg)
ArcGISPresentación
http://www.arcgis.com/home/index.html
![Page 89: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/89.jpg)
ArcGISStory Maps
Story Maps es una aplicación de ArcGIS que permite crear potentes visualizaciones basadas en mapas narrativizados.
1. Piensa tu historia 2. Integra el contenido 3. Construye tu mapa
4. Configura tu relato 5. Ajústalo 6. Publica tu historia
![Page 90: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/90.jpg)
ArcGISStory Maps
Story Maps permite crear tres tipos de Storytelling Apps
Recorridos secuenciales• Crear un Mapa
Tour• Ver ejemplos
Puntos de interés
Comparar dos mapas
Ayuda y Tutoriales
![Page 91: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/91.jpg)
ArcGISStory Maps
Story Maps permite crear tres tipos de Storytelling Apps
Recorridos secuenciales• Crear un Mapa
Tour• Ver ejemplos
Puntos de interés
Comparar dos mapas
![Page 92: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/92.jpg)
TareaArcGIS
http://storymaps.arcgis.com/es/app-list/
![Page 93: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/93.jpg)
Tools Knightlab
http://projects.knightlab.com/
![Page 95: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/95.jpg)
ParametrizaciónTimelineJS Knightlab
Se pueden cambiar algunos elementos básicos. Su modificación cambia los parámetros en el iframe.
![Page 96: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/96.jpg)
ParametrizaciónTimelineJS Knightlab
Pero, además, podemos ajustar cualquier parámetro de la presentación de los elementos, directamente en la hoja de cálculo, introduciendo código html y css
0<div style="font-family:'Trebuchet MS'; font-size:48px; font-weight: bold; color:red">HTTP</div>
![Page 97: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/97.jpg)
TareaTimeline
Vamos a crear una línea de tiempo y a personalizarla:
1. Accede a TimelineJS2. Crea tus datos en un Google Spreadsheet.3. Impórtalos a TimelineJS.4. Configura las opciones de presentación en
Timeline.5. Configura las opciones de presentación mediante
código html y css en las celdas de Google Spreadsheet.
![Page 99: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/99.jpg)
Otros recursos
![Page 101: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/101.jpg)
Localizar coordenadas
http://www.maps.pixelis.es/
![Page 102: S3 2016 taller-javascript-v2](https://reader037.fdocuments.in/reader037/viewer/2022102704/5879107d1a28ab6f658b6bb1/html5/thumbnails/102.jpg)
Taller de fundamentos aplicados de JAVASCRIPT3Manuel Gértrudix – Sergio Álvarez