08 Ago

Hoja de trucos para HTML5

Como desarrollador es importante conocer las últimas tecnologías y tendencias pues en algún punto del tiempo es probable que necesitemos hacer uso de algún lenguaje o técnica en particular. Además por lo general las nuevas tecnologías incluyen mejoras que nos permiten realizar las tareas de forma más rápida evitando complejidad innecesaria.

Para un desarrollador web debe ser prioritario comenzar a conocer elestándar HTML5 ya que incluye novedades más que interesantes y al mismo tiempo elimina algunas características de HTML4 (como ejemplo las etiquetas <font>, <center> y <frame> entre otras). Por otro lado, sistemas operativos como el próximo Windows 8 ofrecerán soporte nativo para desarrollar aplicaciones utilizando este lenguaje de marcado.

Y ya hablando del tema, hace tiempo me encontré esta interesante “hoja de trucos” de HTML5 con la cuál es bastante sencillo conocer lo nuevo, lo que no cambia y lo que se ha eliminado de HTML4 en este nuevo estándar. Haciendo clic en la imagen pueden llegar a la imagen original y moverse a través de ella utilizando la función de arrastrar y soltar.

Leyenda de la imagen:

Espero les sea de utilidad, saludos.

Fuente: Woork
Imagen original en alta resolución: Flickr

20 Jun

jPlayer: reproductor de audio en Javascript y HTML5

Con el auge del estándar HTML5 los esfuerzos de muchas organizaciones están dirigidos a lograr desarrollar un lenguaje de Internet libre del control de empresas privadas. Personalmente me identifico con la ideología de que Internet es actualmente el único medio de expresión libre que tiene la sociedad, por lo tanto es deseable que todos los componentes que forman Internet sean también libres.  Como un sencillo ejemplo este blog es 100% compatible con el estándar XHTML de la W3C, lo que significa que forma parte de una web semántica y no depende de ningún software de terceros (además del navegador) para funcionar. Aún así, la reproducción de audio y video en Internet todavía depende de tecnologías atadas a empresas como Adobe (con Flash), Google, Microsoft, Apple (las 3 en el tema de los codecs), entre muchas otras.

Pues bien, para solucionar este último problema comienzan a aparecer alternativas como jPlayer, un reproductor de audio y video escrito en javascript que aprovecha las nuevas características multimedia de HTML5. El reproductor tiene un peso de tan solo 8Kb y es multiplaforma, multinavegador y además soporta múltiples codecs de audio y video. El diseño del reproductor se puede personalizar fácilmente utilizando estilos CSS. Les recomiendo encarecidamente visitar la sección de demostración de la página oficial del reproductor.

Los codecs de audio y video que jPlayer soporta son:

  • HTML5: mp3, mp4 (AAC/H.264), ogg (Vorbis/Theora), webm (Vorbis/VP8), wav
  • Flash: mp3, mp4 (AAC/H.264)

Los sistemas operativos y navegadores soportados son los siguientes:

  • Windows: Firefox, Chrome, Opera, Safari, IE6, IE7, IE8, IE9
  • OSX: Safari, Firefox, Chrome, Opera
  • iOS: Mobile Safari: iPad, iPhone, iPod Touch
  • Android: Android 2.3

Para utilizarlo en tu sitio web tan solo es necesario enlazar la librería jQuery y enlazar el archivo javascript de jPlayer. Posteriormente se debe crear el código HTML en el cual se quiere mostrar el reproductor:

[cc lang=”html4strict”]

[/cc]

Agregamos las siguientes líneas de código javascript y vualá, tendrás un reproductor de audio o video en tu sitio web que funcionará con el estándar HTML5 cuando esté disponible y en su defecto utilizará Flash (de forma oculta al usuario final).

[cc lang=”javascript”]$(document).ready(function(){
$(“#jquery_jplayer_1”).jPlayer({
ready: function () {
$(this).jPlayer(“setMedia”, {
m4a: “/media/mysound.mp4”,
oga: “/media/mysound.ogg”
});
},
swfPath: “/js”,
supplied: “m4a, oga”
});
});;[/cc]

Al ser jPlayer un proyecto de código abierto, me encontré con el siguiente fork del reproductor que incluye una interfaz personalizada con CSS3 y soporta gestos de arrastrar y soltar para avanzar o reproducir el audio. Hagan la prueba presionando el botón a continuación.

Si eres desarrollador web sin duda jPlayer te será de utilidad para tus proyectos.

22 Sep

Un comic hecho en HTML 5

Cada día aparecen más ejemplos de las ventajas y posibilidades que vendrán con HTML 5 (la nueva versión del lenguaje bajo el cual funciona la web). En esta ocasión me encontré con un comic interactivo muy impresionante en el cuál te desplazas colocando el puntero del mouse a la derecha del comic.

Curiosamente esta demo tiene un mal desempeño en Google Chrome, funciona de forma regular en la última versión estable de Firefox y funciona bastante bien en Internet Explorer 9 beta (aunque al parecer el creador de este comic trabajó con este último navegador).

07 Jun

Partículas líquidas con HTML 5

Antes de que digan algo, ya consulté con mi médico de cabecera e inicié un tratamiento contra el fetichismo de HTML 5, no se preocupen estaré bien. Mientras tanto aquí les traigo otra demostración de lo que se puede hacer con esta nueva revisión del lenguaje de la web, esta vez se trata de un ejemplo de partículas que responden a la interacción con el mouse.

Increíble.

02 Jun

Increíble demo sobre las capacidades de HTML 5

¿Todavía tienes dudas sobre las posibilidades que HTML 5 le traerá a la web?, no te preocupes pues me encontré con este excelente grupo de “diapositivas” donde se explica con ejemplos reales (es decir, ejemplos hechos con HTML 5) la gran mayoría de las características que este nuevo lenguaje traerá a las páginas de internet del futuro.

Si te gusta el desarrollo web te recomiendo particularmente que veas las diapositivas pues todas las aplicaciones web venideras utilizarán las mejoras que ahí se explican.

Para ver esta presentación correctamente es necesario utilizar un navegador basado en el motor WebKit (ej. Google Chrome y Safari). Haz click en la siguiente imagen o en el link para acceder:

http://apirocks.com/html5/html5.html

No tengo duda en que la nombrada “Web 2.0” parecerá un chiste cuando se compare con la web basada en HTML 5, practicamente las posibilidades se multiplicarán.

Saludos. 🙂