Contenido

input type=”camera” para integrar la webcam a la web

25 Sep

+ 7

Ajaxian nos muestra una propuesta que Brad Lassey ha montado para Fenec o  Firefox Mobile. Se trata de un type para el elemento <input /> que nos permitiría incrustar la webcam como elemento de insercción de datos para nuestros formularios.

inputcamera

<input type="camera" />

Pese a no estar contemplado en HTML5, me parece una funcionalidad más que interesante que podrían apresurarse a incorporar. Por poner un ejemplo de uso, este sistema podría hacer que los actuales sistemas de login desaparecieran y dieran paso a sistemas de lectura de iris o reconocimiento facial,…. muy interesante :D

Web Forms 2.0, el futuro de nuestros formularios(I)

17 Sep

+ 9

Con la llegada de HTML5, que parece estar planificada … ¿para 2022?. Traerá muchísimas novedades, como para no traerlas con el tiempo que queda.

Una de las que más me ha llamado la atención ha sido este borrador de Web Forms 2.0, que pretende ser una muestra de lo que serán los formularios del futuro, ya que los actuales comienzan a quedarse cortos y se ha de abusar de javascript para paliar ciertas carencias que podrían estar incluidas en el navegador.

Hay muchas modificaciones, pero especialmente me ha gustado las extensiones que van a sufrir los elementos <input />, los más importantes de nuestros formularios.

Nuevos tipos

Para ampliar las capacidades de estos elementos se han planteado una serie de tipos que describimos a continuación:

  • datetime
  • datetime-local
  • date
  • month
  • week
  • time
  • number
  • range
  • email
  • url

Con estos nuevos tipos de elementos, sumados a los actuales (submit, file, button, radio,…) podemos hacer cosas como estas con únicamente 2 líneas.

<p>
  <label for="time1"> Preferred delivery time: </label>
  <input id="time1" name="time1" type="time" min="08:00" max="17:00" value="08:00" /> —
  <input id="time2" name="time2" type="time" min="08:00" max="17:00" value="17:00" />
 </p>

De esta forma, estamos indicando que se trata de 2 elementos de tipo tiempo y que los rangos entre los que nos permiten definir sus valores van desde las 8:00 a las 17:00… se acabó el Javascript necesario para controlar los valores que introducimos.

Al ser el navegador el que se encarga de dicho control, podemos dedicar nuestros esfuerzos a otros menesteres más interesantes.

Nuevos atributos

Mediante la incorporación de una serie de atributos nuevos podremos realizar interesantes combinaciones, enriqueciendo nuestras aplicaciones sin necesidad de hacer que nuestro código crezca.

  • min
  • max
  • step
  • pattern
  • required
  • form
  • autocomplete
  • autofocus
<input type="date" min="1900-01-07" step="7" name="sunday" >

Sin duda el atributo más interesante, o por lo menos uno de los que más van a dar de sí es pattern, ya que nos permitirá definir una expresión regular y el <input /> validará que el valor que introduzcamos no se salga de dicho patrón.

<label> Credit Card Number:
 <input type="text" pattern="[0-9]{13,16}" name="cc" />
</label>

Con required haremos que un elemento sea imprescindible para que nuestro formulario pueda ser procesado. Algo que hasta ahora hacíamos con Javascript.

<li><label> Name: <input type="text" name="name" required="required" /></label></li>

Con la inclusión del atributo form, podremos indicar a que formulario (o formularios) obedece un elemento <input />, quizás este punto es un poco delicado ya que creo que podría romper la semántica del código informando un elemento <input /> en un lugar distante del formulario, haciendo perder la idea de la estructura actual.

<form id="edit1">
<input form="edit2" type="text" name="value"/>
<input form="edit1" type="submit" name="Edit"/>
</form>
...
<form id="edit2">
...
</form>

En definitiva, una gran cantidad de cambios que de aquí al 2022 podremos ir viendo :D

Implementando <video /> de HTML5 con Javascript

28 May

+ 0

Hasta que aparezca HTML5 y se consolide como un estandar firme <ironía type=”sarcasmo”>puede haber terminado la vida en la faz de la tierra</ironía>, pero mientras tanto ya podemos hacer uso del tag <video /> destinado para futuros contenidos multimedias en cualquier navegador (recordemos que WebKit ya lo integra) gracias a Javascript y SWFObject JavaScript Library. [Demo][Via]Gracias Jesús.

Webkit a punto de superar el Acid3 Test

22 Mar

+ 5

Los chicos de Webkit siempre han ido por delante a otros navegadores en cuanto a estandares, pero es que ahora están a años luz de ellos. Tras conseguir un 95/100 del famoso Acid3 solo les queda superarlo y atribuirse otra medalla que pesará a otros navegadores.

Ogg Vorbis/Theora ha sido eliminado de la especificación de HTML5

12 Feb

+ 4

Malas noticias para el HTML5, que al parecer han decidido que Ogg Vorbis/Theora no es necesario para formar parte del estandar de HTML5. Recordemos que Vorbis, o Ogg Vorbis, (Theora es su análogo en video) se trata de un codec de audio LIBRE de compresión con pérdida, (más info).

Esta decisión se ha visto influenciada por la presión ejercida por Nokia y Apple que apuestan por una internet móvil cargada de multimedia y de la que ya tienen los codecs cubiertos, una estrategia para elimiar el único codec libre, dejando el camino libre al MPEG. El problema es que estos formatos están patentados y en cualquier momento la empresa que poseé la patente puede pedir los derechos de dicho uso y extorsionar a cualquier aplicación web para que page por usarlos, al igual que podría ocurrir con las imagenes JPEG.

getSelector y getSelectorAll ya en WebKit

8 Feb

+ 1

La gente de WebKit no para de incorporar nuevas funcionalidades a su navegador. Esta vez ha sido el API de selectores que la W3C publicó hace unos meses. Estos selectores nos permitirán completar las posibilidades de las que ahora disponemos para seleccionar uno o más elementos de nuestro DOM. 

Actualmente disponemos de métodos como getElementById, getElementByTagName y el recien integrado en el core, getElementByClassName (de forma nativa) con lo que ya podemos manejarnos perfectamente, pero, ¿nos vamos a contentar con solo estos métodos?. Está claro que no, debemos facilitarnos la vida con querySelector() y querySelectorAll(), podemos conseguirlo. Veamos un ejemplo de su uso.

Ejemplo

document.querySelectorAll(".hot"); // Seleccionar todos los elementos con clase hot

document.querySelector(":hover"); // Seleccionamos el elemento que esté en modo :hover (el ratón sobre él).

document.querySelectorAll("#large:nth-child(even)"); // Ejemplo de como conseguir elementos intercalados (por ejemplo para tablas zebra)

Tests

Desde la propia página de WebKit nos facilitan un test, basado en SlickSpeed de MooTools, en el que podemos testear el funcionamiento de estas funciones nativas (únicamente desde Webkit última versión). 

slickspeed.jpg

Viendo los tiempos obtenidos por la versión nativa (columna de la derecha), frente a los frameworks testeados (Ext 2.0, Prototype y jQuery) notamos la diferencia y la mejoría (y necesidad) de que estos métodos se incluyan en el navegador y no tengamos que implementarlos nosotros.

Descargar

Nuevos tipos de enlaces para el HTML5

8 Ene

+ 10

El gran pegamento que une esta red llamada Internet son los enlaces, con ellos podemos pasar horas frente al ordenador simplemente siguiendolos. Los robots encargados de obtener datos para los buscadores hacen exactamente lo mismo y se recorren las webs y todos sus enlaces para catalogar estratégicamente todo el contenido que se vaya encontrado por el camino y siguiendo los enlaces que haya dentro de él.

Por ese motivo, el nuevo HTML tendrá que ser un poco más descriptivo a la hora de definir el tipo de enlace que estamos enlazando. Para ello usaremos el atributo rel="" de nuestros enlaces que como hasta ahora veníamos haciendo para definir tags, alternate,…

La nueva especificación, aporta una serie de tipos definidos que nos ayudarán a marcar con un tipo definido al enlace que estamos marcando. De esta forma los robots encargados de catalogar la información tendrán algo más de información sobre los enlaces, perfeccionando las futuras busquedas y mejorando los futuros resultados.

Tipos de enlaces HTML5

alternate
Informamos de una forma alternativa de ver el contenido
archives
Enlace a una colección de articulos, documentos o otro tipo de material histórico
author
Enlace al autor del documento
bookmark
Enlace que se relaciona con la sección anterior más cercana.
contact
Enlace hacia una forma de contacto sobre el documento actual.
external
Indica que el enlace referencia una documento externo a nuestro servidor.
feed
Enlace del feed de sindicación del documento
first
Indica el primer documento de una serie de ellos.
help
Enlace hacia un sistema de ayuda sobre el documento.
icon
Importa un icono para representar el documento actual
index
Enlace que nos lleva a la tabla de contenidos o un listado de páginas de nuestro documento
last
Indica el último documento de una serie de ellos.
license
Enlace hacia la descripción de la licencia usada en nuestro documento.
next
Indica el siguiente document de una serie de ellos.
nofollow
Indica que el documento enlazado no es relevante referente al documento actual.
noreferrer
Requiere que el agente de usuario no envie una petición HTTP Referer si el usuario sigue el enlace.
pingback
Enlace de un pingback
prefetch
Indica que el destino debería ser cacheado previamente.(Gracias Martin por la traducción)
prev
Indica el documento anterior de una serie de ellos.
search
Indica que el enlace permite realizar una busqueda.
stylesheet
Importa una hoja de estilos
sidebar
Especifica que el documento enlace está previsto ser mostrado en sidebar del navegador (si este lo tiene)
tag
Indica que se trata de una palabra clave del documento
up
Indica el padre del documento actual.

Firefox 3 acercandose al HTML5

26 Dic

+ 0

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

Más sobre el contenido multimedia, HTML5 y WebKit

9 Dic

+ 0

Hace unas semanas hablabamos de la implementación de la especificación del contenido multimedia (audio/video), por parte del equipo de desarrollo de WebKit. Ahora tenemos más noticias acerca de esta integración.

HTML5 video en WebKit

Las imagenes y el video muestran lo que podemos hacer con esta implementación.

Un preview al HTML5

4 Dic

+ 17

Los chicos de A List Apart, nos deleítan con un artículo sobre el nuevo HTML y los cambios que vamos a notar al llegar a nuestros editores de código.

Ya se ha comentado mucho de las diferencias con la versión anterior, y tambien de las polémicas con su principal competidor, pero el HTML5 es una realidad y tendremos que ir haciendonos a la idea.

Ahora (HTML 4/xHTML 1.0)

Estructura DIV

El futuro HTML5 

Estructura HMTL5