El API de geolocalización en HTML5

Aunque la geolocalización no forme parte de la especificación original de HTML5 (al menos según dice el manual de Remy Sharp, que es el que en un primer momento fue manual de referencia), su funcionalidad es una de las más atractivas e interesantes de dicho lenguaje, sobre todo en un contexto de web cada vez más orientada a dispositivos móviles (tablet, smartphone).

En fin, el API de geolocalización de HMTL5 permite que el navegador acceda a los datos de la posición del dispositivo desde el que se está accediendo a la web, ya sea por triangulación usando el GPS, o el GSM del teléfono; o a través de la posición de tu dirección IP.

El API posee tres métodos básicos:

  • getCurrentPosition(): Recoge la posición del dispositivo una vez.
  • watchPosition(): Recupera y actualiza la posición conforme va cambiando.
  • clearWatch(): Detiene la actualización de la posición.

En caso de éxito, getCurrentPosition() y watchPosition() devuelven un objeto Position, formado a su vez por un objeto coords (con todas las coordenadas) y un timestamp. El objeto coords tiene varias propiedades, algunas reconocidas por todos los navegadores y otras no:

  • latitude: un número flotante de sólo lectura que indica la latitud.
  • longitude: un número flotante de sólo lectura que indica la longitud.
  • accuracy: un número flotante de sólo lectura que indica la precisión de la longitud y la latitud en metros.
  • altitude: un número flotante de sólo lectura que indica la altura. No todos los dispositivos los permiten, en esos casos viene a nulo
  • altitudeAccuracy: un número flotante de sólo lectura que indica la precisión de la altura en metros. No todos los dispositivos los permiten, en esos casos viene a nulo
  • heading: un número flotante de sólo lectura que indica la dirección y el recorrido, expresada en grados. No todos los dispositivos los permiten, en esos casos viene a nulo
  • speed: un número flotante de sólo lectura que indica la velocidad de desplazamiento, expresada en metros por segundo. No todos los dispositivos los permiten, en esos casos viene a nulo

Ahora que te has leído la teoría, lo mejor es un ejemplo práctico, similar al que aparece en el manual de Lawson y Sharp (Introducing HTML5):

if(navigator.geolocation){
    navigator.geolocation.getCurrentPosition(function (position{
        var coordenadas = position.coords;
        showMap(coordenadas.latitude, coordenadas.longitude, coordenadas.accuracy);
    });
}else{
    window.alert("El navegador no soporta el API de geolocalización");
}

Plantéate que sería un código que llame a una función que genere un mapa recibiendo las coordenadas (como las API de GoogleMaps o OpenStreetMap). Primero comprueba que el navegador soporte el API, luego almacena las coordenadas conseguidas con getCurrentPosition en una variable objeto y finalmente las envía a la función que genera el mapa.

En fin, un API con muchas posibilidades en las nuevas aplicaciones web para dispositivos móviles.

Validación nativa de formularios en HTML5

Seguimos con las virtudes de HTML5, y el como en principio este nuevo standar nos facilitará la vida a los programadores web. Porque una de las evoluciones más potentes que incorpora es la validación de formularios de forma nativa, sin necesidad de Javascript (da la impresión de que a largo plazo la idea es cargarse este lenguaje cliente).

Como ya sabéis, tenéis varios tipos de input, que paso a listar debajo:

  • search: Para cajas de búsqueda
  • number: Para añadir o restar números mediante botones.
  • range: Para seleccionar valores dentor de un rango.
  • color: Para seleccionar un color.
  • tel: Para números de teléfono.
  • url: Para direcciones web.
  • email: Para direcciones de correo electrónico.
  • month: Para meses.
  • date: Para fechas.
  • week: Para semanas.
  • time: Para horas.
  • datetime: Para una fecha exacta, absoluta y con hora
  • datetime-local: Para fechas locales y frecuencia

Al definir el tipo de campo la validación de formato ya se realiza de forma nativa sin necesidad de tener que recurrir a una expresión regular. Pero si queréis una validación más compleja (por ejemplo, que el teléfono sólo pueda empezar por 6, 9 u 8, que son las tres posibilidades en España) podéis recurrir al atributo pattern, que nos permite insertar un patrón, con el estilo de una expresión regular, para validar el contenido. Y eso no es todo, si queréis que el campo sea obligatorio basta con añadir el atributo required, y ya de forma nativa se comprueba que haya datos. Con el atributo title podéis introducir el texto que queréis que se muestre en el tool tip que saldrá para informaros del error. Podéis ver varios ejemplos:

<input type="email" title="Use el siguiente formato: direccion@mail.com" required/><!--Esto validaría un correo electrónico de forma nativa-->
<input class="hiddenSpellError" type="text" />type="text" pattern="^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$" name="email" required/> <!-- Esto validaría un correo electrónico con una expresión regular -->
<input class="hiddenSpellError" type="text" />type="date" /> <!--Esto nos sacaría un "datepicker" para seleccionar una fecha (varía según navegador)-->

Ya lo veis, la validación es fácil. Pero además, resaltar los campos erróneos se facilita también con CSS3, ya que aparece una nueva pseudo-clase: invalid. Esto nos ahorra tener que andar jugando con javascript para marcarlos. Con la pseudoclase, basta con una sencilla regla CSS para conseguirlo, sin tener que capturar ningún evento:

input:invalid{
  border: 1px solid red;
  color: red;
}

Sólo con ese código los campos inválidos ya se pondrán automáticamente en rojo, quedando resaltados.

De momento no todos los navegadores dan soporte a la validación nativa en HTML5, pero es evidente el potencial de esta característica, que proveerá de gran productividad y comodidad al programador.

Vídeo en HTML5 (básico)

Utilizando HTML siempre nos encontramos con el problema de tener que depender de QuickTime y AdobeFlash para insertar audio o vídeo. HTML5 nos da las etiquetas AUDIO y VIDEO que nos permiten, con mayor facilidad, insertar este tipo de recursos multimedia en nuestra página.

En esta ocasión nos centraremos en la etiqueta VIDEO, que como habréis podido deducir nos permite insertar vídeos en nuestra página. El uso de esta etiqueta es tan simple como lo que podéis ver en el siguiente ejemplo:

<video src="example.mp4" width="600" height="320" controls preload></video>

Ya ves que no es complejo, aunque requiere una cierta explicación. Estos son los atributos que tienes a tu disposición:

  • SRC: Enlaza con el archivo de video que queremos reproducir
  • WIDTH: El ancho del video en pixeles.
  • HEIGHT: El alto del video en pixeles.
  • CONTROLS: Nos permite incluir los controles del reproductor del navegador como el botón de play o el volumen.
  • AUTOPLAY: Permite especificar si el archivo de video se reproduce desde que se carga la pagina.
  • PRELOAD: Carga un poco el archivo de video en el buffer antes de iniciar la reproducción, para que no se trabe mientras se reproduce.

Todo parecía muy fácil hasta aquí, pero, mi querido programador web, ya sabes que NUNCA es tan fácil. Si los problemas para conseguir la compatibilidad de tu maquetación en CSS en todos los navegadores te ha hecho envejecer prematuramente varios años ya sabes lo que viene ahora: Los distintos navegadores dan soporte a distintos formatos de vídeo (seguro que no te sorprende, seguro que te lo venías oliendo). Las compatibilidade de los motores de los navegadores con los codecs de vídeo son:

  • H.264 :: Soportado por Safari, Google Chrome e Internet Explorer 9. Se trata de un codec propietario
  • OGG Theora :Soportado por Firefox, Opera y Google Chrome. Es libre, pero menos eficiente que H.264, ya que ofrece menor calidad y mayor tamaño de los archivos.
  • WebM : Soportado por Google Chrome, Firefox y Opera, aunque Google también ha creado un plugin para que funcione en IE9, y en Safari debería funcionar ya que usa como base QuickTime para reproducir vídeo. Es libre, ofrece una calidad similar a H.264 pero además consigue una mejor compresión, creando archivos más ligeros. Incluso el FlashPlayer de Adobe soportará este formato.

Todo esto provocado por el enfrentamiento entre los consorcios WHATWGs (apoyado mayoritariamente por Google, Mozilla y varias empresas del campo de software libre) y MPEG-LA (este apoyado por el eje del mal: Apple/Microsoft). Tal cual está el tema de las licencias a día de hoy, en 2016 el codec H.264 podría pasar a ser de pago, así que habrá que tener ojo con eso.

Entonces ¿cómo consigo la compatibilidad entre varios navegadores? Tampoco es difícil. Lo que tienes que hacer es no poner el atributo src dentro de la etiqueta VIDEO. En su lugar, tienes que crear etiquetas SOURCE con los distintos src y especificando en cada uno el codec, y ponerlas entre la apertura y el cierre de VIDEO, como en el siguiente ejemplo:

<video width="600" height="320" controls preload></video>
  <source src="ejemplo.ogv" type='video/ogg; codecs="theora,vorbis"' />
  <source src="ejemplo.mp4" type='video/mp4; codecs="avc1,mp4a"' />
  <source src="ejemplo.webm" type='video/webm; codecs="vp8,vorbis"' />
 </video>

Como ves, la etiqueta SOURCE tiene como argumentos el src y type, donde definís el tipo de vídeo y el codec a reproducir.

En fin, el futuro próximo de la web está aquí, en HTML5. Haciendo uso de CSS además podréis lograr un reproductor más personalizado, más “bonito” y visible. Id pegándole un ojo.

Ventanas modales con jQueryUI

Como soy masoquista, tras un duro día desarrollando en PHP/Javascript creo que voy a hacer una entrada sobre informática en mi blog… por seguir esta racha.

Hoy he tenido mi primera experiencia con jQueryUI, una biblioteca para el framework jQuery. Lo he utilizado para crear un formulario de correo en una ventana modal y… oye, qué fácil, qué productividad reporta esta librería. En este enlace tenéis a vuestra disposición dicha librería, con muchas demos y documentación.

Para el caso de las ventanas modales tendremos que recurrir al widget “dialog”, que nos permitirá hacer desde una suerte de alert más sofisticado hasta introducir todo un formulario (como era mi caso).

El uso de dialog() puede resumirse con facilidad en el siguiente ejemplo:

<html>
    <head>
        <link rel="stylesheet" href="css/darkness/jquery-ui-1.8.18.custom.css">
        <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
        <script>
            $(function(){
                $("#ventanaModal").dialog({
                   title:"Título a elegir",
                   modal: true
                });
            })
        </script>
    </head>
    <body>
        <div id="ventanaModal"></div>
            <p>Aquí metes lo que quieras</p>
        </div>
    </body>
</html>

Con esto tenéis lo mínimo para tener una ventana modal: un div con el contenido al que aplicáis el método dialog pasándole como parámetros el título y el parámetro modal como true (si no le pasárais modal: true se abriría también, pero no bloquería los elementos del fondo, como debe hacer una ventana modal). Pero esto queda muy soso, así que vamos a ir haciendo cosillas.

Lo primero es meter algo más de contenido, para que veas las posibilidades. Por ejemplo, una pregunta que requiera confirmación (como en un window.confirm de los de antaño):

<div id="ventanaModal">
<span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
    ¿Acepta usted las condiciones de uso y que le espiemos impunemente?
</div>

Ahora ya tenemos un aviso de seguridad, vamos con lo siguiente, meterle algún efectillo a la página para que quede chulo cuando se despliega en pantalla:

               $("#ventanaModal").dialog({
                   title:"Título a elegir",
                   modal: true,
                   show: "slide",
                   hide: "explode"
                });

Con esto aparecerá deslizándose y desaparecerá explotando en mil pedazos (bueno, realmente en nueve pedazos). En cualquier caso te habrás fijado en que no hay botones dentro del div. ¿Por qué? Porque los creó la desde javascript definiendo la propiedad buttons, que recibe como parámetro un objeto json con la información y con su función:

           buttons: {
            "Sí": function(){
                alert("has aceptado, tu alma es nuestra");
            },

            "No": function(){
                alert("no has aceptado, te jodes y te quedas sin servicio");
            }
        }

Como resumen entonces el javascript completo quedaría tal que así:

$("#ventanaModal").dialog({
   title:"Título a elegir",
   modal: true,
   show: "slide",
   hide: "explode",
   buttons: {
            "Sí": function(){
                alert("has aceptado, tu alma es nuestra");
            },

            "No": function(){
                alert("no has aceptado, te jodes y te quedas sin servicio");
            }
        }
});

En este caso son dos alerts chorras, pero sirve para que te hagas una idea del potencial que tiene este widget si ya has trabajado antes con javascript.

Nos queda añadir un botón, mismamente, en el html que llame a la ventana y la abra (es decir, el botón en el marcado y el script con la acción). Algo tipo:

<input type="button" name="accept" id="accept" value="Aceptar"/>
<script>
    $("#accept").button().click(function() {
	$("#ventanaModal").dialog("open");
    });
</script>

Y con esto y un bizcocho… se acabó el ejemplo. Ahora te recomiendo que te pelees un rato con esta librería, porque parece que puede dar muchas alegrías.