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 datos LocalStorage y SessionStorage

localStorage.setItem("nombre",'pepe'); var dato= localStorage.getItem("dato"); localStorage.removeItem("dato"); 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

sessionStorage Trabaja de la misma manera que el localStorage sessionStorage.setItem("nombre",'pepe') var dato=sessionStorage.getItem("dato"); sessionStorage.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).

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

Geolocation Obteniendo 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() var geo = navigator.geolocation; geo.getCurrentPosition(fn_ok,fn_error); function fn_ok(respuesta){ /* ...ACCIONES... */ } function fn_error( respuesta ){ 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.

Función OK La función tiene entre paréntesis una variable. 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 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 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; 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

GOOGLE MAPS Geolocation + 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 - DV http://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. 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 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 ).

El Marker (A.K.A Chinche) var config = { position: coordenadas, map: gmap, title: 'aca estoy' } chinche = new google.maps.Marker(config) 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)

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

Chinche clickeable Al hacerle click se puede mostrar texto HTML. info = new google.maps.InfoWindow({ content: '<div>Soy una ventana de info!!</div>' }); google.maps.event.addListener( chinche, 'click', function(){ info.open(gmap,chinche) } ); 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( ).