[PDF] SESIÓN 1 3 sept 2015 HTML5 + CSS3. •

View - Download SESIÓN 1

Previous PDF

Next PDF

Algo de programación para interactuar con

mapas en la web. (HTML y JavaScript)

Belén Sáez

belen.saez@gamma.ie

Belén

Desarrolladora web GIS desde 2008

Gamma Ltdy Clevermaps

Mail: belen.saez@gamma.ie

Twitter: https://twitter.com/besaez

LinkedIn: https://es.linkedin.com/in/belensaez

Blog: http://belensaez.com/

03/09/20152

Metodología/Objetivos

03/09/20153

HTML5

‡HTML Base

‡Plantilla HTML

HTML5 + CSS3

‡HTML Base con CSS

‡Plantilla con CSS

‡Visor iframeGeoEuskadi

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

Materiales

Web CursoCódigo comentado

03/09/20154

Herramientas

Editor de texto:

Sublime Text

Notepad++

2PUMV RSŃLRQHV GUHMPRHMYHU (ŃOLSVH 9LVXMO 6PXGLR"

Navegador + herramientas:

Chrome(F12)

Mozilla (F12)

03/09/20155

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

JSON ²Intercambio datos

PRIMEROS MAPAS:

Inserción Visor GeoEuskadi

Web curso: http://upv.s3.amazonaws.com/GeoEuskadiDemo/Index.html

03/09/20156

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óna la web actual

Significado semántico:

,

Nuevos elementos:

03/09/20157

Ejemplos HTML

BasePlantilla

03/09/20158

Demos:

o.html

Chuletas:

n/html5-cheat-sheet.pdf http://overapi.com/html/

Tutorial:

03/09/20159

Demo y recursos ²HTML5

Resumen

03/09/201510

HTML5

‡HTML Base

‡Plantilla HTML

HTML5 + CSS3

‡HTML Base con CSS

‡Plantilla con CSS

‡Visor iframeGeoEuskadi

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)

Objetivo (+CSS3)

03/09/201511

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

03/09/201512

Ejemplo 1 (incrustado)

Sin CSSCon CSS

03/09/201513

Ejemplo 2 (archivo .css)

Sin CSSCon CSS

03/09/201514

Demo: .html oCSS.html

Chuleta:

n/css3-hojas-referencia-rapida.pdf http://overapi.com/css/

Tutorial:

http://www.w3schools.com/css/default.asp

03/09/201515

Demo y recursos ²CSS3

Visor -iframe

Método más sencillo para

incluir datos de

GeoEuskadien cualquier

web

Sólo HTML

Iframe: incrustamos una web

dentro de otra (SRC)

03/09/201516

Demo: adiVisorIframe.html

Visor:

http://www.geo.euskadi.net/s69- bisorea/es/x72aGeoeuskadiWAR/index.jsp

03/09/201517

Demo y recursos: Visor -iframe

Resumen

03/09/201518

HTML5

‡HTML Base

‡Plantilla HTML

HTML5 + CSS3

‡HTML Base con CSS

‡Plantilla con CSS

‡Visor iframeGeoEuskadi

HTML5 + CSS3

+ JS

‡Visor api GeoEuskadi

HTML5 + CSS3

+ JS + JQUERY

‡Plantilla con controles

‡(SESION 2) API GeoEuskadi, Open Layers, Leaflet, Google Maps"

Primer Mapacreado (HTML5 + CSS3)

Javascript

Lenguaje que permite

interactuar con la página

Interpretado y orientado a

objetos

Estándar a cargo de ECMA

International

TagHMTL:

03/09/201519

Demos:

adiVisorHTML.html

Chuletas:

n/javascript-Cheat-Sheet.pdf http://overapi.com/javascript/

Tutorial:

http://www.w3schools.com/js/default.asp

03/09/201520

Demo y recursos: Javascript

Visor ²API Geoeuskadi

enriquecerlo (sesión 2)

HTML + javascript

Html: div + referencias (js+

css)

Javascript: Manejo control

mapa

03/09/201521

Demo: adiVisorHTML.html

Visor:

http://www.geo.euskadi.net/s69- bisorea/es/x72aGeoeuskadiWAR/index.jsp

03/09/201522

Demo y recursos: Visor ²API Geoeuskadi

Visor GeoEuskadi: iframevs API

IframeAPI GeoEuskadi

03/09/201523

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

Resumen

03/09/201524

HTML5

‡HTML Base

‡Plantilla HTML

HTML5 + CSS3

‡HTML Base con CSS

‡Plantilla con CSS

‡Visor iframeGeoEuskadi

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)

JSON

Formato ligero para el

intercambio de datos

Capas disponibles para

nuetroscontroles: _configuracion.Capas

GeoJSON: formato JSON

extendido con atributos espaciales como

´JHRPHPU\µ

03/09/201525

Demo: .js

Tutorial:

http://www.w3schools.com/js/js_json.asp

Validador:

https://www.jsoneditoronline.org/

03/09/201526

Demo y recursos: JSON

jQuery

Biblioteca ligera

Javascript: ´Writeless, do

PRUHµ

Libre y open source ´ORV

usuarios pueden estudiar, modificar y mejorar su

GLVHxRµ

jQueryUI: https://jqueryui.com/

03/09/201527

Conceptos principales

Script

Sintaxis

Sintaxisbásica:$(selector).action()

$ definir/accede a jQuery (selector) para encontrarelementosdel HTML action() para realizer unaacciónsobreun elementoHMTL

Ejemplos:

$("p").hide() ²ocultatodosloselementos

$(".test").hide() -ocultatodosloselementoscon class="test". $("#test").hide() -ocultaHO HOHPHQP ŃRQ LG PHVP´ $(this).hide() ²ocultael elementoactual

03/09/201528

Javascriptvs jQuery

JavascriptjQuery

03/09/201529

document.body.style.background= '#ccc';$('body').css('background', '#ccc'); varc = document.getElementById("container"); c.parentNode.removeChild(c); $("#container").remove(); Ejemplo 1: Cambiamos el color del fondo del Ejemplo 2: Eliminamos un elemento dinámicamente

JavascriptjQuery

Ejemplo -Controles

HTML5Javascript/jQuery

03/09/201530

Demo: s.html

Chuletas:

n/jQuery-Cheat-Sheet.pdf http://overapi.com/jquery/

Tutorial:

03/09/201531

Demo y recursos: jQuery

Resumen

03/09/201532

HTML5

‡HTML Base

‡Plantilla HTML

HTML5 + CSS3

‡HTML Base con CSS

‡Plantilla con CSS

‡Visor iframeGeoEuskadi

HTML5 + CSS3

+ JS

‡Visor api GeoEuskadi

HTML5 + CSS3

+ JS + JQUERY

‡Plantilla con controles

‡(SESION 2) API GeoEuskadi, Open Layers, Leaflet, Google Maps"

Plantillacreada (HTML5 + CSS3 + JS+ jQuery)

Gracias

Belén Sáez -belen.saez@gamma.ie

03/09/201533

quotesdbs_dbs10.pdfusesText_16

[PDF] html5 and css3 developers phrasebook pdf

[PDF] html5 and css3 for beginners

[PDF] html5 and css3 for dummies

[PDF] html5 and css3 for the real world pdf

[PDF] html5 and css3 illustrated complete 2nd edition pdf download

[PDF] html5 and css3 illustrated complete pdf

[PDF] html5 cheat sheet pdf

[PDF] html5 css javascript tutorial

[PDF] html5 css3 javascript jquery tutorial pdf

[PDF] html5 css3 javascript tutorial pdf

[PDF] html5 for dummies

[PDF] html5 for dummies 2019 pdf

[PDF] html5 video downloader

[PDF] http assets uscannenberg org docs inclusion in the directors chair 2019 pdf

[PDF] http bit ly walmart