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) }

);