Dudas

Alterntiva para usar .length en Objetos

    var objeto = {}
    objeto.propiedad1 = 1;
    objeto.propiedad2 = "dos";
    objeto.propiedad3 = "más cosas"

    Object.getOwnPropertyNames(objeto).length;

Trabajando con APIs

CRUD

Create:
- Method (POST):
  - Respuesta 200 - OK
  - Respuesta 204 - Sin contenido
  - Respuesta 404 - No encontrado
  - Respuesta 409 - Conflicto, ya existe
Read:
- Method (GET):
  - Respuesta 200 - OK
  - Respuesta 404 - No encontrado
Update:
- Method (PUT):
  - Respuesta 200 - OK
  - Respuesta 204 - Sin contenido
  - Respuesta 404 - No encontrado
Delete:
- Method (DELETE):
  - Respuesta 200 - OK
  - Respuesta 404 - No encontrado

Por tipología:
- 1xx Informativas
- 2xx Peticiones Correctas
- 3xx Redirecciones
- 4xx Errores Cliente
- 5xx Errores Servidor
Lista de respuestas HTTP
Especificación

AJAX

Con Jquery

    function peticionJqueryAjax (url) {

	    $.ajax({
	        dataType: "json",
	        url: url,
	    })
	     .done(function( data, textStatus, jqXHR ) {
	         if ( console && console.log ) {
	             console.log( "La solicitud se ha completado correctamente." );
	             console.log( data );
	         }
	     })
	     .fail(function( jqXHR, textStatus, errorThrown ) {
	         if ( console && console.log ) {
	             console.log( "La solicitud a fallado: " +  textStatus);
	         }
	    });
	
	}
	
	peticionJqueryAjax ("<---URL---->");

Vainilla JS

readyState:
- 0 es uninitialized
- 1 es loading
- 2 es loaded
- 3 es interactive
- 4 es complete

    function peticionAjax(url) {
        var xmlHttp = new XMLHttpRequest();

        xmlHttp.onreadystatechange = function() {

            if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
                console.info(JSON.parse(xmlHttp.responseText));
            } else if (xmlHttp.readyState === 4 && xmlHttp.status === 404) {
                console.error("ERROR! 404");
                console.info(JSON.parse(xmlHttp.responseText));
            }
        };
        xmlHttp.open("GET", url, true);
        xmlHttp.send();
    }

    peticionAjax("<---URL---->");

Ejercicios

1 - Sacar en el html la respuesta de OMDB para la pelicula Hackers

		Tu solución aquí

2 - Sacar en el html el tiempo meteorológico de Madrid, Barcelona y Valencia. Nota: http://openweathermap.org te será de gran ayuda, busca la solución al error 401

		Tu solución aquí

3 - Jugando con datos abiertos, saquemos los detalles de todos los cuadros eléctricos de Gijón por consola.

		Tu solución aquí

4 - Desarrolla una versión mejorada de MovieFire (JS puro) incluyendo llamadas AJAX a la base de datos de IMBD para enriquecer los datos, usando OMDb API.

		Tu solución aquí

HTML5 API

Geolocalización

Precisión:
- Wi-fi (MAC)
- Ethernet (IP)
- Triangulación (3G y 4G)
- GPS (máxima precisión, pero tardará más en cargar)

Métodos de geolocation

getCurrentPosition():

    // Posición Actual
    navigator.geolocation.getCurrentPosition();

watchPosition():

    // Seguimiento como un GPS 
    navigator.geolocation.watchPosition();

clearWatch():

    // Para el seguimiento
    navigator.geolocation.clearWatch();

Propiedades de geolocation

Latitud (en base 10):

    console.info(position.coords.latitude);

Longitud (en base 10):

    console.info(position.coords.longitude);

Precisión en posicionamiento:

    console.info(position.coords.accuracy);

Altitud (metros por encima del nivel del mar):

    console.info(position.coords.altitude);

Precisión de altitud:

    console.info(position.coords.altitudeAccuracy);

Rumbo (Grados respectos al norte):

    console.info(position.coords.heading);

Velocidad (m/s):

    console.info(position.coords.speed);

Timestamp:

    console.info(position.timestamp);

Ajustes de geolocation
- enableHighAccuracy:
  - Mejora los datos para conexiones no GPS, pero aumenta drásticamente el consumo de batería del dispositivo.
  - False por defecto
- timeout:
  - Tiempo (ms) de espera antes de lanzar el error.
  - 0 por defecto
- maximumAge:
  - Tiempo (ms) para el almacenamiento en memoria cache de la posición actual
  - 0 por defecto
- Ejemplo:
```
    var opciones = {
        enableHighAccuracy: true,
        maximumAge: 1000, // 1s
        timeout: 2000 // 2s
    }
```

Trabajando con geolocation

Comprobando la compatibildiad de geolocation

    if ("geolocation" in navigator) {
      console.info("Podemos usar Geolocation! :-) ");
    } else {
      console.warn("Geolocation no soportado :-( ");
    }

Probando la geolocalización:

    if ("geolocation" in navigator) {
        navigator.geolocation.getCurrentPosition(function(position) {
            // Consola
            console.info("Latitud: " + position.coords.latitude + "\nLongitud: "+ position.coords.longitude);
            // HTML
            var datos = "<h1>Te pille!</h1>"
            datos += "Latitud: " + position.coords.latitude.toFixed(4) + "<br>"
            datos += "Longitud: "+ position.coords.longitude.toFixed(4)
            document.body.innerHTML = datos;
        });
    } else {
      console.warn("Geolocation no soportado :-( ");
    }

Mostrar la localización en una imagen estatica usando Gogole Maps:

    if ("geolocation" in navigator) {
        navigator.geolocation.getCurrentPosition(function(position) {

            var latlon = position.coords.latitude + "," + position.coords.longitude;
        
            var img_url = "http://maps.googleapis.com/maps/api/staticmap?center="+latlon+"&zoom=14&size=400x300&sensor=false";
        
            document.body.innerHTML = "<img src='"+img_url+"'>";
        });
    } else {
      console.warn("Geolocation no soportado :-( ");
    }

Gestionar los Errores y rechazos:

navigator.geolocation.getCurrentPosition(geo_success, geo_error);

function geo_success(position) {
  console.info(position.coords.latitude+","+ position.coords.longitude);
}

function geo_error(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            document.body.innerHTML = "El usuario ha rechazado la petición.";
            console.warn(error);
            break;
        case error.POSITION_UNAVAILABLE:
            document.body.innerHTML = "La posición de usuario no es correcta.";
            console.warn(error);
            break;
        case error.TIMEOUT:
            document.body.innerHTML = "No hay respuesta en el tiempo limite previsto.";
            console.warn(error);
            break;
        case error.UNKNOWN_ERROR:
            document.body.innerHTML = "Error Desconocido";
            console.warn(error);
            break;
    }
}

Trabajando con ajustes personalizados:

navigator.geolocation.getCurrentPosition(geo_exito, geo_error, opciones);

var opciones = {
    enableHighAccuracy: true,
    maximumAge: 1000, // 1s
    timeout: 2000 // 2s
}

function geo_exito(position) {
    console.info(position.coords.latitude+","+ position.coords.longitude);
}

function geo_error(error) {
    console.warn("Error! - "+error);
}

Convirtiendo las coordenadas a hexadecimal:

/**
 * From Isabel Castillo
 * http://isabelcastillo.com/convert-latitude-longitude-decimal-degrees
 * Convert longitude/latitude decimal degrees to degrees and minutes
 * DDD to DMS, no seconds
 * @param lat, latitude degrees decimal
 * @param lng, longitude degrees decimal
 */
        
function convertDMS( lat, lng ) {
 
        var convertLat = Math.abs(lat);
        var LatDeg = Math.floor(convertLat);
        var LatSec = (Math.floor((convertLat - LatDeg) * 60));
        var LatCardinal = ((lat > 0) ? "n" : "s");
         
        var convertLng = Math.abs(lng);
        var LngDeg = Math.floor(convertLng);
        var LngSec = (Math.floor((convertLng - LngDeg) * 60));
        var LngCardinal = ((lng > 0) ? "e" : "w");
         
        return LatDeg + LatCardinal + LatSec  + "<br />" + LngDeg + LngCardinal + LngSec;
}

Sigue a un usuario:

    navigator.geolocation.watchPosition(geo_exito, geo_error);

    function geo_exito(position) {
        console.info(position.coords.latitude +", "+ position.coords.longitude);
    }
    
    function geo_error(error) {
        console.warn("Error! - "+error);
    }

Más información:
- Conversion de Decimal a Hexadecimal por Isabel Castillo
Documentación:
- querySelector en MDN
- HTML5 Geolocation en w3Schools
Espeficicación
Compatibildiad

Ejercicios:

Notas sobre GMaps:

1 - Utiliza Google Maps para posicionar al usuario.

	 //	Tu solución aquí

2 - Utiliza Google Maps para posicionar al usuario en movimiento.

	 //	Tu solución aquí

3 - Utiliza Ajax para posicionar al usuario y las estaciones de BiciMad en un mapa:

API:
- BiciMad Cercania
- BiciMad Localizaciones

	 //	Tu solución aquí

4 - Utiliza esta librería para posicionar al usuario, los cascos de StarWars con sus característicos iconos y la distancia estimada

Nota: Función para calcular la distancia entres dos puntos usando coordenadas

	 //	Tu solución aquí

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

dia8.md

dia8.md

Dudas

Trabajando con APIs

AJAX

HTML5 API

Geolocalización

Files

dia8.md

Latest commit

History

dia8.md

File metadata and controls

Dudas

Trabajando con APIs

AJAX

HTML5 API

Geolocalización