Javascript - Módulo 9: Geolocalización en HTML5, Google maps, y SVG
564 views
23 slides
Mar 10, 2017
Slide 1 of 23
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
About This Presentation
Javascript - Módulo 9: Geolocalización en HTML5, Google maps, y SVG
Slide Content
© Juan Quemada, DIT, UPM Geolocalización en HTML5
1Juan Quemada, DIT, UPM
1Juan Quemada, DIT, UPM
© Juan Quemada, DIT, UPM HTML5 puede soportar geolocalización
nEn todo tipo de clientes
wPCs, móviles tabletas, .....
El interfaz de geolocaclización
nda acceso tambien a otros sensores
wBrujula, acelerometro, .....
Geolocalización y Sensores
2Juan Quemada, DIT, UPM
nEn todo tipo de clientes
wPCs, móviles tabletas, .....
El interfaz de geolocaclización
nda acceso tambien a otros sensores
wBrujula, acelerometro, .....
Geolocalización y Sensores
2Juan Quemada, DIT, UPM
© Juan Quemada, DIT, UPM La geolocalización se realiza siguiendo jerarquia de consultas
nGPS -> antena WIFI -> antena GSM o 3G -> IP fija -> .....
wSe devuelve la respuesta más precisa
La geolocalización está accesible en del objeto navigator.geolocation
ncon método getCurrentPosition(successFunction, errorFunction)
wPermite conocer
nLatitud y longitud en formato decimal
nAltitud y precisión de la altitud
nDirección y velocidad
Norma y tutoriales
nhttp://dev.w3.org/geo/api/spec-source.html
nhttp://dev.opera.com/articles/view/how-to-use-the-w3c-geolocation-api/
nhttp://code.google.com/apis/maps/index.html
OJO! Geolocalización puede no funcionar por restricciones de seguridad
nUsar el navegador Firefox para probar los ejemplos geolocalizados en local
Geolocalización
3Juan Quemada, DIT, UPM
nGPS -> antena WIFI -> antena GSM o 3G -> IP fija -> .....
wSe devuelve la respuesta más precisa
La geolocalización está accesible en del objeto navigator.geolocation
ncon método getCurrentPosition(successFunction, errorFunction)
wPermite conocer
nLatitud y longitud en formato decimal
nAltitud y precisión de la altitud
nDirección y velocidad
Norma y tutoriales
nhttp://dev.w3.org/geo/api/spec-source.html
nhttp://dev.opera.com/articles/view/how-to-use-the-w3c-geolocation-api/
nhttp://code.google.com/apis/maps/index.html
OJO! Geolocalización puede no funcionar por restricciones de seguridad
nUsar el navegador Firefox para probar los ejemplos geolocalizados en local
Geolocalización
3Juan Quemada, DIT, UPM
<!DOCTYPE html>
<html>
<head>
<title>Example of W3C Geolocation API</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
if (navigator.geolocation) { //Check if browser supports W3C Geolocation API
navigator.geolocation.getCurrentPosition (successFunction, errorFunction);
} else { alert('Geolocation is not supported in this browser.'); }
function successFunction(position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
alert('Your latitude is :'+lat+' and longitude is '+long);
}
function errorFunction(position) { alert('Error!'); }
</script>
</head>
<body>
<p>If your browser supports Geolocation, you should get an alert with your coordinates.</p>
<p>Read the <a href="http://dev.opera.com">Dev.Opera</a> article <a
href="http://dev.opera.com/articles/view/how-to-use-the-w3c-geolocation-api/">"How
to use the W3C Geolocation API"</a>.
</body>
</html> © Juan Quemada, DIT, UPM
Ejemplo
Geolocation
4Juan Quemada, DIT, UPM
<html>
<head>
<title>Example of W3C Geolocation API</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
if (navigator.geolocation) { //Check if browser supports W3C Geolocation API
navigator.geolocation.getCurrentPosition (successFunction, errorFunction);
} else { alert('Geolocation is not supported in this browser.'); }
function successFunction(position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
alert('Your latitude is :'+lat+' and longitude is '+long);
}
function errorFunction(position) { alert('Error!'); }
</script>
</head>
<body>
<p>If your browser supports Geolocation, you should get an alert with your coordinates.</p>
<p>Read the <a href="http://dev.opera.com">Dev.Opera</a> article <a
href="http://dev.opera.com/articles/view/how-to-use-the-w3c-geolocation-api/">"How
to use the W3C Geolocation API"</a>.
</body>
</html> © Juan Quemada, DIT, UPM
Ejemplo
Geolocation
4Juan Quemada, DIT, UPM
© Juan Quemada, DIT, UPM Aplicación HTML5 geolocalizada en
Google Maps
5Juan Quemada, DIT, UPM
Google Maps
5Juan Quemada, DIT, UPM
© Juan Quemada, DIT, UPM Geolocalización con gmaps.js
Aplicacion de geolocalización
nCarga un mapa centrado en nuestra posición
wque se indica con un marcador
Usamos librería gmaps.js para acceso a Google Maps
nlibrería muy potente y sencilla de utilizar
whttp://hpneo.github.io/gmaps/
nSe recomienda consultar documentación y ejemplos
nLa librería de Google es bastante mas compleja
Se añade al mapa un manejador de eventos click/tap
nque calcula la ruta hasta el punto indicado
6Juan Quemada, DIT, UPM
Aplicacion de geolocalización
nCarga un mapa centrado en nuestra posición
wque se indica con un marcador
Usamos librería gmaps.js para acceso a Google Maps
nlibrería muy potente y sencilla de utilizar
whttp://hpneo.github.io/gmaps/
nSe recomienda consultar documentación y ejemplos
nLa librería de Google es bastante mas compleja
Se añade al mapa un manejador de eventos click/tap
nque calcula la ruta hasta el punto indicado
6Juan Quemada, DIT, UPM
© Juan Quemada, DIT, UPM Geo-mapa
7Juan Quemada, DIT, UPM
7Juan Quemada, DIT, UPM
© Juan Quemada, DIT, UPM Geo-mapa
8Juan Quemada, DIT, UPM
8Juan Quemada, DIT, UPM
© Juan Quemada, DIT, UPM Geo-mapa
9Juan Quemada, DIT, UPM
9Juan Quemada, DIT, UPM
© Juan Quemada, DIT, UPM 10Juan Quemada, DIT, UPM
Estilo CSS multi-terminal
Estilo CSS multi-terminal
© Juan Quemada, DIT, UPM HTML5 SVG: Scalable Vector
Graphics
11Juan Quemada, DIT, UPM
Graphics
11Juan Quemada, DIT, UPM
Formato de representación de gráficos vectoriales
nPueden cambiar de tamaño sin perdida de calidad
Recursos
nGaleria Wikimedia: http://commons.wikimedia.org/wiki/Category:SVGs_by_subject
nEditor SVG: http://svg-edit.googlecode.com/svn/branches/2.5.1/editor/svg-editor.html
nTutorial: https://developer.mozilla.org/en-US/docs/Web/SVG
nTutorial: http://www.w3schools.com/svg/
SVG: Scalable Vector Graphics
http://commons.wikimedia.org/wiki/File:Compass.svg
http://commons.wikimedia.org/wiki/SVG_examples
12© Juan Quemada, DIT, UPM Juan Quemada, DIT, UPM
nPueden cambiar de tamaño sin perdida de calidad
Recursos
nGaleria Wikimedia: http://commons.wikimedia.org/wiki/Category:SVGs_by_subject
nEditor SVG: http://svg-edit.googlecode.com/svn/branches/2.5.1/editor/svg-editor.html
nTutorial: https://developer.mozilla.org/en-US/docs/Web/SVG
nTutorial: http://www.w3schools.com/svg/
SVG: Scalable Vector Graphics
http://commons.wikimedia.org/wiki/File:Compass.svg
http://commons.wikimedia.org/wiki/SVG_examples
12© Juan Quemada, DIT, UPM Juan Quemada, DIT, UPM
© Juan Quemada, DIT, UPM Ejemplo “Ajuste SVG”
“Ajuste SVG” ilustra como reescalar una imagen SVG
nLas imagenes en SVG reescalan sin perder calidad
wporque son gráficos vectoriales
wtutorial: http://www.w3schools.com/svg/
nLas imágenes GIT, JPEG o PNG no reescalan bien
wporque tienen una resolución determinada
Esta WebApp tiene 2 botones: “+” y “-”
Cada vez que pulsamos uno de estos botones
nel tamaño de la imagen debe aumentar o disminuir un 10%
wsegún pulsemos “+” y “-”
13Juan Quemada, DIT, UPM
“Ajuste SVG” ilustra como reescalar una imagen SVG
nLas imagenes en SVG reescalan sin perder calidad
wporque son gráficos vectoriales
wtutorial: http://www.w3schools.com/svg/
nLas imágenes GIT, JPEG o PNG no reescalan bien
wporque tienen una resolución determinada
Esta WebApp tiene 2 botones: “+” y “-”
Cada vez que pulsamos uno de estos botones
nel tamaño de la imagen debe aumentar o disminuir un 10%
wsegún pulsemos “+” y “-”
13Juan Quemada, DIT, UPM
© Juan Quemada, DIT, UPM Ejemplo SVG
14Juan Quemada, DIT, UPM
14Juan Quemada, DIT, UPM
© Juan Quemada, DIT, UPM Ejempo “Reloj SVG”
“Reloj SVG” genera un reloj sencillo con SVG
nEl reloj se compone de
wUn círculo negro
wTres lineas para las manecillas del reloj
SVG puede animarse con javaScript
nmodificando la representación DOM del reloj
wVersión 1: las manecillas se mueven con transform
whttps://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform
wVersion 2: Calcula las coordenadas de las manecillas
Se añade estilo CSS
nMejora el aspecto y adapta al tamaño de la pantalla
15Juan Quemada, DIT, UPM
“Reloj SVG” genera un reloj sencillo con SVG
nEl reloj se compone de
wUn círculo negro
wTres lineas para las manecillas del reloj
SVG puede animarse con javaScript
nmodificando la representación DOM del reloj
wVersión 1: las manecillas se mueven con transform
whttps://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform
wVersion 2: Calcula las coordenadas de las manecillas
Se añade estilo CSS
nMejora el aspecto y adapta al tamaño de la pantalla
15Juan Quemada, DIT, UPM
© Juan Quemada, DIT, UPM Reloj SVG
16Juan Quemada, DIT, UPM
16Juan Quemada, DIT, UPM
© Juan Quemada, DIT, UPM SVG: Reloj animado
con “transform”Juan Quemada, DIT, UPM
17
con “transform”Juan Quemada, DIT, UPM
17
© Juan Quemada, DIT, UPM Animar manecillas con coordenadas
Para animar las manecillas del reloj
nse incluye un script que cada segundo
wrecalcula las coordenadas exteriores
nde las manecillas del reloj
nEl secundero tiene una longitud de 50 pixels
nEl minutero tiene una longitud de 40 pixels
nLa manecilla horaria de 30 pixels
Las coordenadas x2, y2 de las manecillas de horas,
minutos y segundos se calculan con las funciones
nx2(tiempo, unidades_por_vuelta, x1, radio)
ny2(tiempo, unidades_por_vuelta, y1, radio)
18Juan Quemada, DIT, UPM
Para animar las manecillas del reloj
nse incluye un script que cada segundo
wrecalcula las coordenadas exteriores
nde las manecillas del reloj
nEl secundero tiene una longitud de 50 pixels
nEl minutero tiene una longitud de 40 pixels
nLa manecilla horaria de 30 pixels
Las coordenadas x2, y2 de las manecillas de horas,
minutos y segundos se calculan con las funciones
nx2(tiempo, unidades_por_vuelta, x1, radio)
ny2(tiempo, unidades_por_vuelta, y1, radio)
18Juan Quemada, DIT, UPM
© Juan Quemada, DIT, UPM SVG: Reloj animado
con coordenadas
19Juan Quemada, DIT, UPM
con coordenadas
19Juan Quemada, DIT, UPM
© Juan Quemada, DIT, UPM Relojes con “estilo”
Usando CSS e imágenes se pueden diseñar
nLas capturas muestran pequeños cambios de diseño
wque cambian muy significativamente la apariencia del
reloj
nHacer clic en estos URLs para verlos
whttps://googledrive.com/host/0B48KCWfVwCIEMjFhUHM4d3FnSTg/09-clock_CSS.htm
whttps://googledrive.com/host/0B48KCWfVwCIEMjFhUHM4d3FnSTg/10_clock_CSS_a.html
whttps://googledrive.com/host/0B48KCWfVwCIEMjFhUHM4d3FnSTg/10_clock_CSS_b.htm
whttps://googledrive.com/host/0B48KCWfVwCIEMjFhUHM4d3FnSTg/10_clock_CSS_c.htm
whttps://googledrive.com/host/0B48KCWfVwCIEMjFhUHM4d3FnSTg/10_clock_CSS_d.htm
20Juan Quemada, DIT, UPM
Usando CSS e imágenes se pueden diseñar
nLas capturas muestran pequeños cambios de diseño
wque cambian muy significativamente la apariencia del
reloj
nHacer clic en estos URLs para verlos
whttps://googledrive.com/host/0B48KCWfVwCIEMjFhUHM4d3FnSTg/09-clock_CSS.htm
whttps://googledrive.com/host/0B48KCWfVwCIEMjFhUHM4d3FnSTg/10_clock_CSS_a.html
whttps://googledrive.com/host/0B48KCWfVwCIEMjFhUHM4d3FnSTg/10_clock_CSS_b.htm
whttps://googledrive.com/host/0B48KCWfVwCIEMjFhUHM4d3FnSTg/10_clock_CSS_c.htm
whttps://googledrive.com/host/0B48KCWfVwCIEMjFhUHM4d3FnSTg/10_clock_CSS_d.htm
20Juan Quemada, DIT, UPM
© Juan Quemada, DIT, UPM SVG: Reloj con estilo CSS
21Juan Quemada, DIT, UPM
21Juan Quemada, DIT, UPM
Los objetos SVG se pueden definir también como objetos externos en XML
nPara importarlos con:
w <img>, <object>, <embed>, <iframe>
nTutorial: http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Use.html
Objetos SVG
22© Juan Quemada, DIT, UPM Juan Quemada, DIT, UPM
nPara importarlos con:
w <img>, <object>, <embed>, <iframe>
nTutorial: http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Use.html
Objetos SVG
22© Juan Quemada, DIT, UPM Juan Quemada, DIT, UPM
© Juan Quemada, DIT, UPM Final del tema
Muchas gracias!
23Juan Quemada, DIT, UPM
Muchas gracias!
23Juan Quemada, DIT, UPM
Tags
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 564
- Slides 23
- Favorites 1
- Age 3193 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
33 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
36 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
33 views
14
Fertility awareness methods for women in the society
Isaiah47
30 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
29 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
30 views