algo de programación para interactuar con mapas …...html5 + css3 + js + jquery •plantilla con...
TRANSCRIPT
![Page 1: Algo de programación para interactuar con mapas …...HTML5 + CSS3 + JS + JQUERY •Plantilla con controles •(SESION 2) API GeoEuskadi, Open Layers, Leaflet, Google Maps… Objetivo](https://reader030.vdocuments.site/reader030/viewer/2022040416/5f36ec55afcd5c044c45baa3/html5/thumbnails/1.jpg)
Algo de programación para interactuar con mapas en la web. (HTML y JavaScript)
Belén Sáez
![Page 2: Algo de programación para interactuar con mapas …...HTML5 + CSS3 + JS + JQUERY •Plantilla con controles •(SESION 2) API GeoEuskadi, Open Layers, Leaflet, Google Maps… Objetivo](https://reader030.vdocuments.site/reader030/viewer/2022040416/5f36ec55afcd5c044c45baa3/html5/thumbnails/2.jpg)
Belén
• Desarrolladora web GIS desde 2008
• Gamma Ltd y Clevermaps
• Mail: [email protected]
• Twitter: https://twitter.com/besaez
• LinkedIn: https://es.linkedin.com/in/belensaez
• Blog: http://belensaez.com/
03/09/2015 2
![Page 3: Algo de programación para interactuar con mapas …...HTML5 + CSS3 + JS + JQUERY •Plantilla con controles •(SESION 2) API GeoEuskadi, Open Layers, Leaflet, Google Maps… Objetivo](https://reader030.vdocuments.site/reader030/viewer/2022040416/5f36ec55afcd5c044c45baa3/html5/thumbnails/3.jpg)
Metodología/Objetivos
03/09/2015 3
HTML5
•HTML Base
•Plantilla HTML
HTML5 + CSS3
•HTML Base con CSS
•Plantilla con CSS
•Visor iframe GeoEuskadi
HTML5 + CSS3 + JS
•Visor api GeoEuskadi
HTML5 + CSS3 + JS + JQUERY
•Plantilla con controles
•(SESION 2) API GeoEuskadi, Open Layers, Leaflet, Google Maps…
Objetivo S1: Diseño Web base para la
siguiente sesión y ejemplos de inserción de un
visor de GeoEuskadi
Objetivo S2: Añadir a la página base de la
primera sesión los controles ofrecidos por los
diversos proveedores y carga de capas de
Open Data Euskadi y GeoEuskadi
![Page 4: Algo de programación para interactuar con mapas …...HTML5 + CSS3 + JS + JQUERY •Plantilla con controles •(SESION 2) API GeoEuskadi, Open Layers, Leaflet, Google Maps… Objetivo](https://reader030.vdocuments.site/reader030/viewer/2022040416/5f36ec55afcd5c044c45baa3/html5/thumbnails/4.jpg)
Materiales
Web Curso Código comentado
03/09/2015 4
![Page 5: Algo de programación para interactuar con mapas …...HTML5 + CSS3 + JS + JQUERY •Plantilla con controles •(SESION 2) API GeoEuskadi, Open Layers, Leaflet, Google Maps… Objetivo](https://reader030.vdocuments.site/reader030/viewer/2022040416/5f36ec55afcd5c044c45baa3/html5/thumbnails/5.jpg)
Herramientas
• Editor de texto:• Sublime Text
• Notepad++
• Otras opciones: Dreamweaver, Eclipse, Visual Studio…
• Navegador + herramientas:• Chrome (F12)
• Mozilla (F12)
03/09/2015 5
![Page 6: Algo de programación para interactuar con mapas …...HTML5 + CSS3 + JS + JQUERY •Plantilla con controles •(SESION 2) API GeoEuskadi, Open Layers, Leaflet, Google Maps… Objetivo](https://reader030.vdocuments.site/reader030/viewer/2022040416/5f36ec55afcd5c044c45baa3/html5/thumbnails/6.jpg)
Contenidos Sesión
• Objetivo: Diseño Web base para la siguiente sesión y ejemplos de inserción de un visor de GeoEuskadi.
• Contenidos• HTML
• HTML5 - Estructura• CSS3 - Estilos
• JAVASCRIPT• JAVASCRIPT - Interacción• JQUERY – Javascript mejorado• JSON – Intercambio datos
• PRIMEROS MAPAS:• Inserción Visor GeoEuskadi
• Web curso: http://upv.s3.amazonaws.com/GeoEuskadiDemo/Index.html
03/09/2015 6
![Page 7: Algo de programación para interactuar con mapas …...HTML5 + CSS3 + JS + JQUERY •Plantilla con controles •(SESION 2) API GeoEuskadi, Open Layers, Leaflet, Google Maps… Objetivo](https://reader030.vdocuments.site/reader030/viewer/2022040416/5f36ec55afcd5c044c45baa3/html5/thumbnails/7.jpg)
HTML5
• Lenguaje con el que se definen las páginas web
• Por medio de etiquetas (“tags”) - palabras clave
• Estándar a cargo de la W3C
• V5: adaptación a la web actual• Significado semántico:
<header>,<footer>…• Nuevos elementos: <video>
03/09/2015 7
![Page 8: Algo de programación para interactuar con mapas …...HTML5 + CSS3 + JS + JQUERY •Plantilla con controles •(SESION 2) API GeoEuskadi, Open Layers, Leaflet, Google Maps… Objetivo](https://reader030.vdocuments.site/reader030/viewer/2022040416/5f36ec55afcd5c044c45baa3/html5/thumbnails/8.jpg)
Ejemplos HTML
Base Plantilla
03/09/2015 8
![Page 9: Algo de programación para interactuar con mapas …...HTML5 + CSS3 + JS + JQUERY •Plantilla con controles •(SESION 2) API GeoEuskadi, Open Layers, Leaflet, Google Maps… Objetivo](https://reader030.vdocuments.site/reader030/viewer/2022040416/5f36ec55afcd5c044c45baa3/html5/thumbnails/9.jpg)
• Demos:http://upv.s3.amazonaws.com/GeoEuskadiDemo/HTML_base.html
http://upv.s3.amazonaws.com/GeoEuskadiDemo/Mapa_Esqueleto.html
• Chuletas: http://upv.s3.amazonaws.com/GeoEuskadiDemo/documentacion/html5-cheat-sheet.pdf
http://overapi.com/html/
• Tutorial:http://www.w3schools.com/html/default.asp
03/09/2015 9
Demo y recursos – HTML5
![Page 10: Algo de programación para interactuar con mapas …...HTML5 + CSS3 + JS + JQUERY •Plantilla con controles •(SESION 2) API GeoEuskadi, Open Layers, Leaflet, Google Maps… Objetivo](https://reader030.vdocuments.site/reader030/viewer/2022040416/5f36ec55afcd5c044c45baa3/html5/thumbnails/10.jpg)
Resumen
03/09/2015 10
HTML5
•HTML Base
•Plantilla HTML
HTML5 + CSS3
•HTML Base con CSS
•Plantilla con CSS
•Visor iframe GeoEuskadi
HTML5 + CSS3 + JS
•Visor api GeoEuskadi
HTML5 + CSS3 + JS + JQUERY
•Plantilla con controles
•(SESION 2) API GeoEuskadi, Open Layers, Leaflet, Google Maps…
Estructura creada (HTML5)
![Page 11: Algo de programación para interactuar con mapas …...HTML5 + CSS3 + JS + JQUERY •Plantilla con controles •(SESION 2) API GeoEuskadi, Open Layers, Leaflet, Google Maps… Objetivo](https://reader030.vdocuments.site/reader030/viewer/2022040416/5f36ec55afcd5c044c45baa3/html5/thumbnails/11.jpg)
Objetivo (+CSS3)
03/09/2015 11
![Page 12: Algo de programación para interactuar con mapas …...HTML5 + CSS3 + JS + JQUERY •Plantilla con controles •(SESION 2) API GeoEuskadi, Open Layers, Leaflet, Google Maps… Objetivo](https://reader030.vdocuments.site/reader030/viewer/2022040416/5f36ec55afcd5c044c45baa3/html5/thumbnails/12.jpg)
CSS3
• Lenguaje utilizado en la presentación de documentos HTML
• Nos permite dotar de estilos a la página
• Estándar a cargo de la W3C
• V3: adaptación a la web actual (esquinas redondeadas, fuentes web,…)
03/09/2015 12
![Page 13: Algo de programación para interactuar con mapas …...HTML5 + CSS3 + JS + JQUERY •Plantilla con controles •(SESION 2) API GeoEuskadi, Open Layers, Leaflet, Google Maps… Objetivo](https://reader030.vdocuments.site/reader030/viewer/2022040416/5f36ec55afcd5c044c45baa3/html5/thumbnails/13.jpg)
Ejemplo 1 (incrustado)
Sin CSS Con CSS
03/09/2015 13
http://upv.s3.amazonaws.com/GeoEuskadiDemo/HTML_base_CSS.htmlhttp://upv.s3.amazonaws.com/GeoEuskadiDemo/HTML_base.html
![Page 14: Algo de programación para interactuar con mapas …...HTML5 + CSS3 + JS + JQUERY •Plantilla con controles •(SESION 2) API GeoEuskadi, Open Layers, Leaflet, Google Maps… Objetivo](https://reader030.vdocuments.site/reader030/viewer/2022040416/5f36ec55afcd5c044c45baa3/html5/thumbnails/14.jpg)
Ejemplo 2 (archivo .css)
Sin CSS Con CSS
03/09/2015 14
http://upv.s3.amazonaws.com/GeoEuskadiDemo/Mapa_EsqueletoCSS.htmlhttp://upv.s3.amazonaws.com/GeoEuskadiDemo/Mapa_Esqueleto.html
![Page 15: Algo de programación para interactuar con mapas …...HTML5 + CSS3 + JS + JQUERY •Plantilla con controles •(SESION 2) API GeoEuskadi, Open Layers, Leaflet, Google Maps… Objetivo](https://reader030.vdocuments.site/reader030/viewer/2022040416/5f36ec55afcd5c044c45baa3/html5/thumbnails/15.jpg)
• Demo:http://upv.s3.amazonaws.com/GeoEuskadiDemo/HTML_base_CSS.html
http://upv.s3.amazonaws.com/GeoEuskadiDemo/Mapa_EsqueletoCSS.html
• Chuleta:http://upv.s3.amazonaws.com/GeoEuskadiDemo/documentacion/css3-hojas-referencia-rapida.pdf
http://overapi.com/css/
• Tutorial:http://www.w3schools.com/css/default.asp
03/09/2015 15
Demo y recursos – CSS3
![Page 16: Algo de programación para interactuar con mapas …...HTML5 + CSS3 + JS + JQUERY •Plantilla con controles •(SESION 2) API GeoEuskadi, Open Layers, Leaflet, Google Maps… Objetivo](https://reader030.vdocuments.site/reader030/viewer/2022040416/5f36ec55afcd5c044c45baa3/html5/thumbnails/16.jpg)
Visor - iframe
• Método más sencillo para incluir datos de GeoEuskadi en cualquier web
• Sólo HTML • Iframe: incrustamos una web
dentro de otra (SRC)
03/09/2015 16
![Page 17: Algo de programación para interactuar con mapas …...HTML5 + CSS3 + JS + JQUERY •Plantilla con controles •(SESION 2) API GeoEuskadi, Open Layers, Leaflet, Google Maps… Objetivo](https://reader030.vdocuments.site/reader030/viewer/2022040416/5f36ec55afcd5c044c45baa3/html5/thumbnails/17.jpg)
• Demo:http://upv.s3.amazonaws.com/GeoEuskadiDemo/Mapa_GeoEuskadiVisorIframe.html
• Visor:http://www.geo.euskadi.net/s69-bisorea/es/x72aGeoeuskadiWAR/index.jsp
03/09/2015 17
Demo y recursos: Visor - iframe
![Page 18: Algo de programación para interactuar con mapas …...HTML5 + CSS3 + JS + JQUERY •Plantilla con controles •(SESION 2) API GeoEuskadi, Open Layers, Leaflet, Google Maps… Objetivo](https://reader030.vdocuments.site/reader030/viewer/2022040416/5f36ec55afcd5c044c45baa3/html5/thumbnails/18.jpg)
Resumen
03/09/2015 18
HTML5
•HTML Base
•Plantilla HTML
HTML5 + CSS3
•HTML Base con CSS
•Plantilla con CSS
•Visor iframe GeoEuskadi
HTML5 + CSS3 + JS
•Visor api GeoEuskadi
HTML5 + CSS3 + JS + JQUERY
•Plantilla con controles
•(SESION 2) API GeoEuskadi, Open Layers, Leaflet, Google Maps…
Primer Mapa creado (HTML5 + CSS3)
![Page 19: Algo de programación para interactuar con mapas …...HTML5 + CSS3 + JS + JQUERY •Plantilla con controles •(SESION 2) API GeoEuskadi, Open Layers, Leaflet, Google Maps… Objetivo](https://reader030.vdocuments.site/reader030/viewer/2022040416/5f36ec55afcd5c044c45baa3/html5/thumbnails/19.jpg)
Javascript
• Lenguaje que permite interactuar con la página
• Interpretado y orientado a objetos
• Estándar a cargo de ECMA International
• Tag HMTL: <script></script>
03/09/2015 19
![Page 20: Algo de programación para interactuar con mapas …...HTML5 + CSS3 + JS + JQUERY •Plantilla con controles •(SESION 2) API GeoEuskadi, Open Layers, Leaflet, Google Maps… Objetivo](https://reader030.vdocuments.site/reader030/viewer/2022040416/5f36ec55afcd5c044c45baa3/html5/thumbnails/20.jpg)
• Demos:
http://upv.s3.amazonaws.com/GeoEuskadiDemo/Mapa_GeoEuskadiVisorHTML.html
• Chuletas: http://upv.s3.amazonaws.com/GeoEuskadiDemo/documentacion/javascript-Cheat-Sheet.pdf
http://overapi.com/javascript/
• Tutorial:http://www.w3schools.com/js/default.asp
03/09/2015 20
Demo y recursos: Javascript
![Page 21: Algo de programación para interactuar con mapas …...HTML5 + CSS3 + JS + JQUERY •Plantilla con controles •(SESION 2) API GeoEuskadi, Open Layers, Leaflet, Google Maps… Objetivo](https://reader030.vdocuments.site/reader030/viewer/2022040416/5f36ec55afcd5c044c45baa3/html5/thumbnails/21.jpg)
Visor – API Geoeuskadi
• Útil de base para luego enriquecerlo (sesión 2)
• HTML + javascript• Html: div + referencias (js +
css)
• Javascript: Manejo control mapa
03/09/2015 21
![Page 22: Algo de programación para interactuar con mapas …...HTML5 + CSS3 + JS + JQUERY •Plantilla con controles •(SESION 2) API GeoEuskadi, Open Layers, Leaflet, Google Maps… Objetivo](https://reader030.vdocuments.site/reader030/viewer/2022040416/5f36ec55afcd5c044c45baa3/html5/thumbnails/22.jpg)
• Demo:http://upv.s3.amazonaws.com/GeoEuskadiDemo/Mapa_GeoEuskadiVisorHTML.html
• Visor:http://www.geo.euskadi.net/s69-bisorea/es/x72aGeoeuskadiWAR/index.jsp
03/09/2015 22
Demo y recursos: Visor – API Geoeuskadi
![Page 23: Algo de programación para interactuar con mapas …...HTML5 + CSS3 + JS + JQUERY •Plantilla con controles •(SESION 2) API GeoEuskadi, Open Layers, Leaflet, Google Maps… Objetivo](https://reader030.vdocuments.site/reader030/viewer/2022040416/5f36ec55afcd5c044c45baa3/html5/thumbnails/23.jpg)
Visor GeoEuskadi: iframe vs API
Iframe API GeoEuskadi
03/09/2015 23
• Sólo HTML (iframe)
• Todos las capas están en el visor
• Sin manejo de capas
• Html (div) + javascript(control) + referencias (js + css)
• Capas de otras fuentes
• Controles GeoEuskadi
• Manejo de capas:• Visibilidad
• Opacidad
• Eliminar
![Page 24: Algo de programación para interactuar con mapas …...HTML5 + CSS3 + JS + JQUERY •Plantilla con controles •(SESION 2) API GeoEuskadi, Open Layers, Leaflet, Google Maps… Objetivo](https://reader030.vdocuments.site/reader030/viewer/2022040416/5f36ec55afcd5c044c45baa3/html5/thumbnails/24.jpg)
Resumen
03/09/2015 24
HTML5
•HTML Base
•Plantilla HTML
HTML5 + CSS3
•HTML Base con CSS
•Plantilla con CSS
•Visor iframe GeoEuskadi
HTML5 + CSS3 + JS
•Visor api GeoEuskadi
HTML5 + CSS3 + JS + JQUERY
•Plantilla con controles
•(SESION 2) API GeoEuskadi, Open Layers, Leaflet, Google Maps…
Segundo Mapa creado (HTML5 + CSS3 + JS)
![Page 25: Algo de programación para interactuar con mapas …...HTML5 + CSS3 + JS + JQUERY •Plantilla con controles •(SESION 2) API GeoEuskadi, Open Layers, Leaflet, Google Maps… Objetivo](https://reader030.vdocuments.site/reader030/viewer/2022040416/5f36ec55afcd5c044c45baa3/html5/thumbnails/25.jpg)
JSON
• Formato ligero para el intercambio de datos
• Capas disponibles para nuetros controles:
_configuracion.Capas
• GeoJSON: formato JSON extendido con atributos espaciales como “geometry”
03/09/2015 25
![Page 26: Algo de programación para interactuar con mapas …...HTML5 + CSS3 + JS + JQUERY •Plantilla con controles •(SESION 2) API GeoEuskadi, Open Layers, Leaflet, Google Maps… Objetivo](https://reader030.vdocuments.site/reader030/viewer/2022040416/5f36ec55afcd5c044c45baa3/html5/thumbnails/26.jpg)
• Demo:http://upv.s3.amazonaws.com/GeoEuskadiDemo/js/capas/capas.js
• Tutorial:http://www.w3schools.com/js/js_json.asp
• Validador: https://www.jsoneditoronline.org/
03/09/2015 26
Demo y recursos: JSON
![Page 27: Algo de programación para interactuar con mapas …...HTML5 + CSS3 + JS + JQUERY •Plantilla con controles •(SESION 2) API GeoEuskadi, Open Layers, Leaflet, Google Maps… Objetivo](https://reader030.vdocuments.site/reader030/viewer/2022040416/5f36ec55afcd5c044c45baa3/html5/thumbnails/27.jpg)
jQuery
• Biblioteca ligera Javascript: “Write less, do more”
• Libre y open source: “los usuarios pueden estudiar, modificar y mejorar su diseño”
• jQuery UI: https://jqueryui.com/
03/09/2015 27
![Page 28: Algo de programación para interactuar con mapas …...HTML5 + CSS3 + JS + JQUERY •Plantilla con controles •(SESION 2) API GeoEuskadi, Open Layers, Leaflet, Google Maps… Objetivo](https://reader030.vdocuments.site/reader030/viewer/2022040416/5f36ec55afcd5c044c45baa3/html5/thumbnails/28.jpg)
Conceptos principales
• Script<head><script src="jquery-1.11.3.min.js"></script></head>
• Sintaxis• Sintaxis básica: $(selector).action()
$ definir/accede a jQuery
(selector) para encontrar elementos del HTML
action() para realizer una acción sobre un elemento HMTL
• Ejemplos:$("p").hide() – oculta todos los elementos <p>
$(".test").hide() - oculta todos los elementos con class="test".
$("#test").hide() - oculta el element con id="test“
$(this).hide() – oculta el elemento actual
03/09/2015 28
![Page 29: Algo de programación para interactuar con mapas …...HTML5 + CSS3 + JS + JQUERY •Plantilla con controles •(SESION 2) API GeoEuskadi, Open Layers, Leaflet, Google Maps… Objetivo](https://reader030.vdocuments.site/reader030/viewer/2022040416/5f36ec55afcd5c044c45baa3/html5/thumbnails/29.jpg)
Javascript vs jQuery
Javascript jQuery
03/09/2015 29
document.body.style.background = '#ccc'; $('body').css('background', '#ccc');
var c = document.getElementById("container");
c.parentNode.removeChild(c);
$("#container").remove();
Ejemplo 1: Cambiamos el color del fondo del <body>
Ejemplo 2: Eliminamos un elemento dinámicamente
Javascript jQuery
![Page 30: Algo de programación para interactuar con mapas …...HTML5 + CSS3 + JS + JQUERY •Plantilla con controles •(SESION 2) API GeoEuskadi, Open Layers, Leaflet, Google Maps… Objetivo](https://reader030.vdocuments.site/reader030/viewer/2022040416/5f36ec55afcd5c044c45baa3/html5/thumbnails/30.jpg)
Ejemplo - Controles
HTML5 Javascript/jQuery
03/09/2015 30
http://upv.s3.amazonaws.com/GeoEuskadiDemo/js/mapa_controles.jshttp://upv.s3.amazonaws.com/GeoEuskadiDemo/Mapa_Controles.html
![Page 31: Algo de programación para interactuar con mapas …...HTML5 + CSS3 + JS + JQUERY •Plantilla con controles •(SESION 2) API GeoEuskadi, Open Layers, Leaflet, Google Maps… Objetivo](https://reader030.vdocuments.site/reader030/viewer/2022040416/5f36ec55afcd5c044c45baa3/html5/thumbnails/31.jpg)
• Demo:http://upv.s3.amazonaws.com/GeoEuskadiDemo/Mapa_Controles.html
• Chuletas: http://upv.s3.amazonaws.com/GeoEuskadiDemo/documentacion/jQuery-Cheat-Sheet.pdf
http://overapi.com/jquery/
• Tutorial:http://www.w3schools.com/jquery/default.asp
03/09/2015 31
Demo y recursos: jQuery
![Page 32: Algo de programación para interactuar con mapas …...HTML5 + CSS3 + JS + JQUERY •Plantilla con controles •(SESION 2) API GeoEuskadi, Open Layers, Leaflet, Google Maps… Objetivo](https://reader030.vdocuments.site/reader030/viewer/2022040416/5f36ec55afcd5c044c45baa3/html5/thumbnails/32.jpg)
Resumen
03/09/2015 32
HTML5
•HTML Base
•Plantilla HTML
HTML5 + CSS3
•HTML Base con CSS
•Plantilla con CSS
•Visor iframe GeoEuskadi
HTML5 + CSS3 + JS
•Visor api GeoEuskadi
HTML5 + CSS3 + JS + JQUERY
•Plantilla con controles
•(SESION 2) API GeoEuskadi, Open Layers, Leaflet, Google Maps…
Plantilla creada (HTML5 + CSS3 + JS+ jQuery)