Contenido

Firefox 3 acercandose al HTML5

26 dic

+ 1

Cuando hablamos de estandares, no podemos evitar asociar a WebKit con el nuevo HTML 5, y es que la verdad están haciendo un gran trabajo desarrollando las nuevas mejoras. Pero Firefox 3, está pasando algo más desapercibido por el tema, aunque tambien ha dado un paso considerable hacia el futuro estandar web.

Gestión de protocolos 

Una de las opciones que integra, es la opción de registrar protocolos personalizados,  o lo que es lo mismo, nos permite definir para ciertos tipos de protocolos, unas acciones personalizadas. Imaginemos que tenemos una aplicación en nuestra web que envia faxes, ¿por que delegar el envio de faxes a las aplicaciones del cliente?.

De esta forma, nos evitamos sorpresas y no dependemos de lo que el usuario tiene instalado en su máquina. Actualmente, un PC por defecto al pulsar sobre una dirección de correo, esta le asocia a la aplicación de correo instalada en su máquina, en Windows Outlook, en MacOS Mail,…

Pues con esta nueva gestión de protocolos, podremos dar una opción más al usuario haciendo nuestra aplicación sea 100% accesible, independientemente del dispositivo que estemos usando.

Ejemplo de uso

El método registerProtocolHandler(), formará parte del objeto navigator, y hará referencia al navegador.

navigator.registerProtocolHandler("mailto",
                                 "https://mail.google.com/mail?view=cm&tf=0&to=%s",
                                 "Google Mail");

Eventos Online y Offline

Otra opción que el nuevo estandard nos acerca y Firefox 3 nos permite comenzar a usar, es la posibilidad de conocer si estamos en modo online o offline, permitiendonos actuar de una forma u otra dependiendo del estado de nuestra conexión. La integración de almacenamiento DOM, nos permite alojar datos en una base de datos local, haciendo posible que, por ejemplo, almacenemos en dicha base de datos los datos que serán enviadas en cuanto volvamos a disponer de conexión.

Para ello usaremos el flag onLine del objeto navegator.

Ejemplo

var estado = navigator.onLine ? "ONLINE" : "OFFLINE";

Gestión del foco

Una funcionalidad realmente interesante es la relacionada con el foco de los elementos, con la nueva especificación, podemos conocer si un elemento es el activo en ese momento y tratarlo de una forma diferente a si no lo és. Usando la propiedad activeElement, de los elementos HTML podremos conocer el estado de dicho elemento. Por otro lado, tambien podemos conocer si el elemento activo (o inactivo) dispone del foco, para ello usaremos la propiedad hasFocus.

Firefox 3, ahora ya integra estas dos propiedades para ayudarnos a hacer aplicaciones más complejas.

Eventos Drag & Drop

Firefox 3 integra dos nuevos eventos para determinar si estamos haciendo uso del famoso drag&drop sobre los elementos de nuestra página. Permitiendonos delegar al navegador la tarea de crear dichos elementos movibles.

Para ello, el estandar nos ofrece una gran cantidad de eventos para tener el control en todo momento de nuestros elementos. 

Ejemplo

  var elem = document.getElementById("elem");
  elem.addEventListener("dragstart", startDrag, false);
  elem.addEventListener("drag", eventReceived, false);
  elem.addEventListener("dragend", eventReceived, false);

  var target = document.getElementById("target");
  target.addEventListener("dragenter", eventReceived, false);
  target.addEventListener("dragleave", eventReceived, false);
  target.addEventListener("dragover", eventReceived, false);
  target.addEventListener("drop", dodrop, false);

[Demo (Requiere Firefox 3)]

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.