TALLER DE HTML5. Clase 03 – Prof. Germán RODRÍGUEZ.
-
Upload
edelmira-pan -
Category
Documents
-
view
119 -
download
0
Transcript of TALLER DE HTML5. Clase 03 – Prof. Germán RODRÍGUEZ.
TALLER DE HTML5.Clase 03 – Prof. Germán RODRÍGUEZ
De la clase 02• ¿Cómo se hacía para decirle a Javascript que
queremos obtener un elemento IMG que tiene el ID ‘principal’?
• Cómo hago para que esa imagen que tenemos guardada en una variable se le modifique el atributo SRC o ALT?
Almacenamiento de datosLocalStorage y SessionStorage
localStorage• Permite almacenar valores de variables en la
PC del usuario.
• Por cada dominio se pueden guardar 5mb.
• No es un reemplazo de una base de datos (ni a palos).
• A diferencia de las cookies, no se mandan al servidor en cada petición HTTP.
• Se desprenden del objeto localStorage
localStorage.setItem("nombre",'pepe');
var dato= localStorage.getItem("dato");
localStorage.removeItem("dato");
sessionStorage• Trabaja de la misma manera que el
localStorage
• Su única diferencia radica en que las variables se borrar al terminar la sesión (cerrar el browser, por ejemplo).
sessionStorage.setItem("nombre",'pepe')
var dato=sessionStorage.getItem("dato");
sessionStorage.removeItem("dato");
localStorage + contentEditable
• Cualquier etiqueta se puede editar con el atributo contentEditable
• Cuando se hace click en otro lugar, podemos leer el contenido de la etiqueta (con la propiedad innerHTML)
• Ese contenido lo podemos guardar en un localStorage y cada vez que carga la página mostrarlo.
Entremos en calor:• Maqueten la siguiente
interfaz.
• Una vez terminada, ponganle al listado de tareas le ponen display: none;
Usando JAVASCRIPT• Cuando el usuario clickea “nueva cuenta”
levantar los valores de los dos input y guardarlos en el localStorage.
• Cuando el usuario clickea entrar, levantar los valores de los dos input y compararlos contra el localStorage usuario y clave.
• Si está bien: ocultar el form y mostrar la lista.
• Guardar en sessionStorage que está logueado
• Ayuda: En javascript el CSS se modifica como elemento.style.propiedad = ‘valor’;
GeolocationObteniendo la ubicación del usuario
Detección• Existen 4 métodos para detectar la ubicación
geográfica de un dispositivo.
– IP: En base a la información ofrecida por el ISP.
– WIRELESS: Determinada por los Access point.
– A-GPS: Triangulación entre las torres de celulares.
– GPS: La mayor precisión, consume demasiada batería.
• La detección es 'transparente'. La API no identifica cuál de los 4 métodos fue usado.
• Requiere la autorización del usuario.
Precisión• La precisión puede variar según el método
empleado.
• Y a veces puede fallar.
navigator.geolocation• El objeto navigator identifica al browser.
• Ahora posee el objeto geolocation, encargado de obtener las coordenadas.
• navigator.geolocation tiene tres métodos:
– getCurrentPosition( ) – Posición actual, la solicitud se realiza una sola vez.
– watchPosition( ) – Sirve para trackear, escucha constantemente el cambio de coordenadas.
– clearWatch( ) – Detiene al watchPosition( ).
geolocation.getCurrentPosition()
• Obtiene, mediante el método que le sea posible las coordenadas de Latitud y Longitud.
• Es una función asincrónica (no detiene el funcionamiento del script).
• Recibe dos argumentos:
– Una función si la detección es exitosa,
– Otra función si la detección falla.
– Las dos funciones reciben una variable entre paréntesis que es la respuesta del geolocation.
var geo = navigator.geolocation;
geo.getCurrentPosition(fn_ok,fn_error);
function fn_ok(respuesta){
/* ...ACCIONES... */
}
function fn_error( respuesta ){
/* ...ACCIONES... */
}
Función OK• La función tiene entre paréntesis una variable.
• Esa variable tiene el objeto coords (coordenadas).
• Adentro del objeto coords, están las propiedades latitude y longitude.
– Variable.coords.latitude;
– Variable.coords.longitude;
var geo = navigator.geolocation;geo.getCurrentPosition(fn_ok, fn_error);
function fn_ok(rta){ var la = rta.coords.latitude;var lo = rta.coords.longitude;
}
Función ERROR• La función también tiene entre paréntesis una
variable con la respuesta del geolocation.
• Esa variable tiene la propiedad code.
• El argumento.code es un número del 0 al 3:
– 0: Error desconocido
– 1: Permiso denegado
– 2: Ubicación no disponible (error en la respuesta del proveedor)
– 3: Timed out
var geo = navigator.geolocation;geo.getCurrentPosition( fn_ok, fn_error );
function fn_ok(rta){ var latitud = rta.coords.latitude;var longitud = rta.coords.longitude;
}
function fn_error(error){ switch( error.code ){case 0: alert('error desconocido'); break;case 1: alert('no me autorizaste'); break;case 2: alert('no pude ubicarte'); break;case 3: alert('se acabó el tiempo'); break;
}}
GOOGLE MAPSGeolocation + API propietaria de GOOGLE
Disclaimer• Google Maps no es parte de la especificación
HTML5, sino una API de terceros.
• Hay dos mapas:
– StaticMap, básicamente es una imagen con los markers de ubicación2
– GoogleMaps V3, el mapa con zoom, desplazamiento, información adicional, etc.
Static Map• No es interactivo, es una etiqueta IMG.
• El src es http://maps.google.com/maps/api/staticmap
• Recibe variables de configuración por Get.
– center: Latitud y longitud del centro del mapa.
– zoom: Nivel de acercamiento del mapa.
– marker: Cada ubicación (latitud/longitud) de los globos a poner en el mapa, separados por | (pipe).
– size: AnchoxAlto (tamaño de la imagen).
– sensor: Si usa algún tipo de sensor (tipo GPS).
http://gmaps-samples.googlecode.com/svn/trunk/simplewizard/makestaticmap.html
Static Map - DVhttp://maps.google.com/maps/api/staticmap?
center=-34.604420,-58.395849
&zoom=13
&markers=color:blue|label:A|37.392255,-122.109776|-34.607921,-58.400574
&size=500x300
&sensor=false
Google Map V3• Requiere insertar un script con el framework de
Google: http://maps.google.com/maps/api/js?sensor=false
• Está formado por 3 elementos:
– El mapa en sí (con su ubicación y zoom)
– La chinche que indica la ubicación (por coords)
– El texto que aparece cuando hago click en la chinche.
• La mayoría de los elementos usan como parámetro objetos OBJECT como preferencias.
• Todos descienden del namespace google.maps
El MAPA• Requiere un Div y 3 objetos de Google.
• Las coordenadas donde se centrará el mapa:– Es un objeto google.maps.LatLng( latitud, longitud );
• Un OBJECT con las preferencias el mapa.– zoom: Número, Acercamiento del mapa.
– center: objeto creado como coordenada.
– mapTypeId: tipo de mapa a mostrar. Puede ser ROADMAP (calles), SATELLITE (google earth), HYBRID (mezcla de road y satellite) o TERRAIN (geográfico)
• Un objeto google.maps.Map( DIV, SETTINGS ).
var la = rta.coords.latitude;var lo = rta.coords.longitude;
mapa = document.getElementById('mapa');coord = new google.maps.LatLng(la,lo);
setting = {zoom: 15,center: coordenadas,mapTypeId: google.maps.MapTypeId.TERRAIN}gmap =new google.maps.Map(mapa,setting);
El Marker (A.K.A Chinche)
• Primero debe existir el Mapa, luego la chinche recibe el dato del mapa a insertarse.
• Es un google.maps.Maker( configuración ).
• Configuración es un OBJECT con las siguientes propiedades:– position: ubicación del globo (el objeto coordenadas)
– map: objeto creado con el google.maps.Map
– title: título de la chinche.
– icon: permite usar una imagen como chinche (lo explico en la próxima diapositiva)
var config = { position: coordenadas, map: gmap, title: 'aca estoy'
}
chinche = new google.maps.Marker(config)
Chinche versión Icon• Se debe crear un elemento
google.maps.MarkerImage( ).
• Recibe como argumento principal la ruta a la imagen a mostrar en lugar del globo.
• Puede recibir como optativo el ancho y alto de la imagen.
• Se usa un new google.maps.Size(ancho,alto)– Si es más grande, se amplia el área de click.
– Si es más chico, se recorta la imagen.
– Si no se usa, es el tamaño real de la foto.
icon = new google.maps.MarkerImage( 'icon.jpg', new google.maps.Size(150,100)
);
chinche = new google.maps.Marker( {position: coordenadas, map: gmap, icon: icon,title: 'aca estoy'
} )
Chinche clickeable• Al hacerle click se puede mostrar texto HTML.
• Crear un objeto google.maps.InfoWindow( ).– Recibe un objeto OBJECT con el atributo content.
– Ese content es el código HTML a mostrar.
• La chinche necesita un "escuchador de eventos"
• Eso es un google.maps.event.addListener( ).
• Recibe como argumentos:– El objeto chinche.
– Un string que representa el evento (Ejemplo 'click').
– La función que debe hacer el open del InfoWindow( ).
info = new google.maps.InfoWindow({content: '<div>Soy una ventana de
info!!</div>' });
google.maps.event.addListener( chinche, 'click', function(){ info.open(gmap,chinche) }
);