S3 2016 taller-javascript-v2
102
Taller de fundamentos aplicados de JAVASCRIPT 3 Manuel Gértrudix – Sergio Álvarez
-
Upload
manuel-gertrudix -
Category
Education
-
view
440 -
download
5
Transcript of S3 2016 taller-javascript-v2
Taller de fundamentos aplicados de JAVASCRIPT3Manuel Gértrudix – Sergio Álvarez
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
Para qué sirve Qué es JSON
Sintaxis básica
JSON
¿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
¿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
Un ejemplo mediante una visualizaciónJSON - HighChart
Todos los países
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
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 [ ]
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
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/
Qué es una librería Qué es una API Para qué sirven
Cuáles son interesantes
Librerías y APIs
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?
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?
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
Google Maps CartoDB
Librerías para mapas
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
Google Maps APICarga en el head
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
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
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>
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
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
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
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
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
PreparaciónCartoDB
http://cadenaser.com/especiales/seccion/espana/2014/sonidos-11m/
Un ejemplo elaborado
PreparaciónMapbox
https://www.mapbox.com
Librería Mapbox.jsEfectos
https://www.mapbox.com/mapbox.js/api/v2.2.4/
• Zooming• Animación• Vídeo Tooltips
Google Chart Chart.js
Highcharts morris.js
…
Librerías para datos (Dataviz)
PreparaciónGoogle Charts
https://developers.google.com/chart/
¿Cómo funciona?Google Charts
Google JSAPI API
Librería de visualización de Google
Librería del Chart
concretoVisualización
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
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
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
Se definen las opciones del chart
Charts – Pasos para crear una visualización3. Personalizando el Chart
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
Pie hole Exploding Slide
Charts – Pasos para crear una visualización3. Personalizando el Chart
Uso de HTML en Tooltips Charts dentro de Tooltips
Charts – Pasos para crear una visualización3. Personalizando el Chart
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
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>
ChartsTipología
https://developers.google.com/chart/interactive/docs/gallery
PreparaciónFusion Tables
• Ejemplos: https://sites.google.com/site/fusiontablestalks/stories
• Búsqueda de tablas públicas: http://research.google.com/tables
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.
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.
PreparaciónGoogle Public Data Explorer
DataSets públicos También es posible cargar set de datos propios en GPDE
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
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.
PreparaciónCloud Highcharts
http://cloud.highcharts.com/
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.
PreparaciónHighcharts
http://www.highcharts.com/
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
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>
…/…
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
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
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
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/
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
TareaMorris.js
Line
Área
Line con parámetros
Barras
Donuts
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
LibreríaAnyChart.JS
0AnyChart.JS es una completa librería para el desarrollo de: Charts Stocks Maps Gantt
http://www.anychart.com/
LibreríaAnyChart.JS
PlayGround
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/
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.
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
TareaD3.js
Vamos a practicar con D3.js
TareaD3.js
Ejemplos interesantes
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/
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/
Pictográficas Three.js
Chartis.js
Librerías para Imágenes
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
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
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/
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/
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
WebGL
http://www.zolabo.com/projects/hdi/
WebGL Chrome Experiments
Tree.js
http://threejs.org/ Ejemplos
Philo GL
http://www.senchalabs.org/philogl/demos.html
Es una comunidad de desarrolladores 3D Ejemplos interesantes utilizables
Sketchfab
https://sketchfab.com
Immersive Journalism
http://www.immersivejournalism.com/
Por si fuera poco…
https://www.javascripting.com
Animate.css ScrollReveal
Librerías para animaciones
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/
ArcGIS: Storymap Tools Knightlab
Otras aplicaciones
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/
ArcGISPresentación
http://www.arcgis.com/home/index.html
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
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
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
TareaArcGIS
http://storymaps.arcgis.com/es/app-list/
Tools Knightlab
http://projects.knightlab.com/
ParametrizaciónTimelineJS Knightlab
Se pueden cambiar algunos elementos básicos. Su modificación cambia los parámetros en el iframe.
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>
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.
Otros recursos
Localizar coordenadas
http://www.maps.pixelis.es/
Taller de fundamentos aplicados de JAVASCRIPT3Manuel Gértrudix – Sergio Álvarez
