aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Se está hablando mucho de HTML5, y no es para menos. Va a suponer un antes y un despues en la forma de mostrar nuestras páginas web a Internet. El tag <video /> es sin duda el atractivo más visual de este nuevo estandar y es que su llegada puede revolucionar el mundo multimeda en Internet.

Antes (ahora)

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" />
<param name="allowfullscreen" value="true" />
<embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true">
</embed>
</object>

La forma de visualizar un video en una página web, actualmente es similar a la que muestro en este código. Pasa por el elemento <object /> que nos permite especificar otro <embed /> que nos permite incrustar una película flash en nuestro página.

Semánticamente, estamos hablando de un objeto (<object />) embebido en la página (<embed />), pero no nos dice que se trata de un video ya que este código, sirve para incrustar juegos flash, galerías,….

Con HTML5

<video width="640"  height="360" src="http://www.youtube.com/demo/google_main.mp4"  controls autobuffer>
<p> Try this page in Safari  4! Or you can <a  href="http://www.youtube.com/demo/google_main.mp4">download the  video</a> instead.</p>
</video>

Con HTML5, además de quedar más claro que este contenido es un contenido de formato video nos permite informar una alternativa a los usuarios que no estén visualizando la aplicación con un navegador con esta capacidad.  Posibilitando descargar el video para que el usuario lo descargue y lo visualize con su reproductor predeterminado.

Conclusiones

Aún nos queda mucho tiempo para poder disfrutar de un potencial real, por el momento tendremos que seguir lidiando con las diferentes versiones de HTML para ofrecer las nuevas características a los navegadores más modernos sin dejar a los navegadores antiguos olvidados.

<video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp4" autobuffer controls poster="whale.png">
<object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="640"height="360" codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param value="http://www.youtube.com/demo/google_main.mp4">
<param value="true">
<param value="false">
<embed src="http://www.youtube.com/demo/google_main.mp4" width="640"height="360" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/">
</embed>
</object>
</video>

Si no quieres usar el tag <video />, para que las páginas validen por la W3C, siempre puedes usar la forma válida de incrustar videos flash en tus páginas.

<object width="460" height="265" data="http://vimeo.com/moogaloop.swf?clip_id=5072163" type="application/x-shockwave-flash">
<param value="http://vimeo.com/moogaloop.swf?clip_id=5072163"></param>
<param name="allowFullScreen" value="true"></param>
<param value="always"></param>
</object>

Via

Mucho se está hablando últimamente de HTML5 y las mejoras multimedia que incorpora a los nuevos navegadores. El nuevo tag <video /> harás las delicias de más de uno y otros estarán pensando en si este nuevo estandar ofrecerá la misma cálidad que los formatos existentes. De ahí que via hacks.mozilla.org descubra una comparativa [Traducción parcial] de el nuevo formato Ogg Theora+Vorbis(MP3), un estandar abierto y disponible para todo aquel que quiera ayudar al proyecto con nuevas implementaciones y que rivaliza con el formato HD de Youtube que hasta el momento está usando una compresión H264.

Para desmentir alguna falsas ideas que algunos tienen sobre los estándares abiertos:

Si [youtube] fuera a cambiar a theora y mantener apenas la calidad actual que posee, tomaría casi todo el ancho de banda de Internet.

Realizan una serie de pruebas con los dos formatos y demuestran que:

Ogg Theora+Vorbis	Youtube h264
(Ver Imagen)	(Ver Imagen)

• Theora+Vorbis es sustancialmente mejor que el de YouTube a 327 kbit/seg.
• Vorbis es mucho mejor que el mp3.

Estas nuevas funcionalidades vienen para quedarse, y lo vamos a notar, eso está claro

Hacía tiempo que no se hablaba tanto de HTML5 como en los últimos 2 días. Es normal, por que el gigante de la red lo ha estornudado y nos ha salpicado a todos, pero ¿realmente entendemos que es lo que significa el paso de HTML4 a HTML5?

(Ver Imagen) (Flickr)

Esta imagen, que descubro gracias a @joanballester via Twitter, ilustra muy claramente la diferencia que implica el paso a esta nueva revisión del estandar HTML. No solo nos va a ayudar a mejorar nuestras aplicaciones con contenidos multimédia, sinó que vamos a poder llamar a cada cosa por su nombre. Lo que hará que nuestra información sea mucho más clara para las arañas de los navegadores.

Safari4 (y WebKit evidentemente) se han convertido en los primeros navegadores que incorporan una versión nativa de un <input type=”file” /> que permite subir multiples ficheros a la vez. Hasta el momento hay soluciones Javascript para conseguir esta funcionalidad, pero ahora simplemente tendremos que indicar el atributo multiple para indicar que se trata de un selector múltiple y desde nuestro servidor podremos tratar esta variable como un array de ficheros que tratar desde nuestro servidor.

<input type="file" name="ficheros[]" multiple >

Con Safari4 (y WebKit) ya podemos usar esta propiedad que tanto va a alegrar los amantes de las galerías de imagenes, simplemente cuando se abra el panel de selección de ficheros, seleccionamos más de uno usando las teclas CTRL o SHIFT. Tenemos un ejemplo aquí.

Via

Via Ajaxian descubro When can I use…, una web que recoge, de forma muy gráfica, cuando podremos hacer uso de algunas de las características que hemos ido viendo en el blog. Desde los elementos <video /> a las CSS Animations, pasando por los @font-face y el CSS3.

Visualmente podremos saber desde que versión, estará soportada esa nueva característica que estamos deseando usar. Al final de la página, nos muestra un nivel de aceptación de estándares.

Esperemos que a lo largo de estos 2 años, estas cifras suban considerablemente.

Ajaxian nos alegra esta mañana anunciando que el iphone será el primer dispositivo móvil que dispondrá de algunas de las maravillas del HTML5 en su navegador web.

Almacenamiento DOM

Concretamente, la versión 2.1 del nuevo iPhone dispondrá de una base de datos para almacenamiento DOM de nuestras aplicaciones.

try {
    if (!window.openDatabase) {
        alert('not supported');
    } else {
        var shortName = 'mydatabase';
        var version = '1.0';
        var displayName = 'My Important Database';
        var maxSize = 65536; // in bytes
        var mydb = openDatabase(shortName, version, displayName, maxSize);

 	// Creamos las tablas
 	createTables(mydb);

 	// Ejecutamos UPDATE
 	updateRow('jdoe', 'fuschia');
    }
} catch(e) {
    // Error handling code goes here.
    if (e == INVALID_STATE_ERR) {
        // Version number mismatch.
        alert("Invalid database version.");
    } else {
        alert("Unknown error "+e+".");
    }
    return;
}

function createTables(db)
{
    db.transaction(
        function (transaction) {

            /* CREAMOS LA TABLA SI NO EXISTE . */
            transaction.executeSql('CREATE TABLE people(id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL DEFAULT "John Doe", shirt TEXT NOT NULL DEFAULT "Purple");', [], nullDataHandler, errorHandler);

            /* AÑADIMOS DATOS. */
            transaction.executeSql('insert into people (name, shirt) VALUES ("Joe", "Green");', [], nullDataHandler, errorHandler);
            transaction.executeSql('insert into people (name, shirt) VALUES ("Mark", "Blue");', [], nullDataHandler, errorHandler);
            transaction.executeSql('insert into people (name, shirt) VALUES ("Phil", "Orange");', [], nullDataHandler, errorHandler);
            transaction.executeSql('insert into people (name, shirt) VALUES ("jdoe", "Purple");', [], nullDataHandler, errorHandler);
        }
    );
}

function updateRow(name, shirt) {
	db.transaction(
    function (transaction) {
        transaction.executeSql("UPDATE people set shirt=? where name=?;",
            [ shirt, name ]); // array of values for the ? placeholders
    }
	);
}

Disponemos de una documentación bastante detallada que nos permitirá hacer uso de esta fantástica propiedad.

Caché HTML5 de Aplicaciones

Cuando seleccionemos guardar nuestra aplicación en el Home Screen, esta automáticamente se guardará en caché, siempre y cuando lo especifiquemos mediante el tipo MIME correspondiente. Una forma de hacer más rápidas las aplicaciones para los clientes.

Esta capacidad será exclusiva de Safari Mobile y no aparecerá en ninguna otra versión de WebKit.

Desde que vimos que WebKit integraba nativamente soporte para los controles multimedia especificados en el HTML 5, podíamos dar por hecho que los demás navegadores iba a seguir sus pasos, y que “pronto” podremos disfrutar de estas maravillas en nuestras aplicaciones.

<video autoplay>
  <source src="foo.ogg" type="video/ogg"></source>
  <source src="foo.mov"></source>
  Your browser does not support the <code>video</code> element.
</video>

El uso de los tags <video /> y <audio /> desde la salida de Firefox 3.1 no será únicamente cosa de los usuarios de WebKit (y Safari). Para los más impacientes decir que aún no está completamente soportado, y os recuerdo que vimos como implementarlos mediante el uso de Javascript.

Via

Actualización

punkesito nos avisa que Opera no iba a ser menos y que nos deleitará con una implementación propia para la próxima versión del navegador.

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.

<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