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

¿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

¿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

Tipos de mapas

• Tipos de mapas:• Roadmap• Satellite• Hybrid• Terrain

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

PreparaciónMapbox

Crear un mapa desde el editor

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

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

Pie hole Exploding Slide

Uso de HTML en Tooltips Charts dentro de Tooltips

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

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

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:

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

…/…

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

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

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.

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 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

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

TareaD3.js

Vamos a practicar con D3.js

TareaD3.js

Ejemplos interesantes

crear seis tipos 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

crear gráficos vectoriales (SVG) basado en el uso de canvas

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

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.

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/

PreparaciónTimelineJS Knightlab

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.

PageOneX

http://pageonex.com/

Otros recursos

Rss mapper

http://www.rssmapper.com/

Localizar coordenadas

http://www.maps.pixelis.es/

Taller de fundamentos aplicados de JAVASCRIPT3Manuel Gértrudix – Sergio Álvarez

s3 2016 taller-javascript-v2

Education

formato para taller 9230-fp-f-322 v2 actividad física

javascript cmpt 281. outline introduction to javascript...

suplemento taller ferretero - cemaco febrero 2012 (v2)

taller design thinking v2

javascript cheatsheet v2 - feb. 2020 - paradigmadigital ·...

essential javascript -- a javascript tutorial

taller docentes panec 2015 v2

javascript javascript introduction. q. what is javascript?...

measuring javascript performance, javascript games

taller capacitacion eng v2 -...

taller de seguridad v2

taller de design thinking v2 20140308

citroen berlingo - manual de taller v2

dress taller ebook v2

manual taller javascript

citroen berlingo - manual de taller v2.pdf

taller dsw v2

taller internacional de administración y capacitación...

wtp unit 4 javascript and dhtml. javascript: – client side...

chapter 1: javascript primer · color: javascript...