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.

11 Oct

Los 150 mejores efectos con jQuery

Si eres desarrollador web seguro que conoces jQuery y el inmenso potencial que ofrece para desarrollar aplicaciones web complejas con gran facilidad. Dentro del gran abanico de utilidades de jQuery están los efectos o animaciones; que en lo particular me parecen extremadamente útiles pues además de hacer más agradables a la vista los elementos de una página web, permiten que el usuario pueda captar fácilmente las respuestas a su interacción en una página.

Pues bien, en WebDesignShock se dieron a la tarea de recopilar los que consideraron los 150 mejores efectos hechos con jQuery y solo les puedo decir que si se les gusta el desarrollo web TIENEN QUE VER ESTA LISTA haciendo click en la siguiente imagen.

Algunos de los efectos son simplemente espectaculares y demuestran que cada vez es más fácil prescindir de Flash. De entre todos los efectos listados sin duda AviaSlider es de los más impresionantes.

Saludos. =)

10 May

Colección de galerías y deslizadores hechos en jQuery

jQuery se está convirtiendo en un estándar de facto entre los desarrolladores web por su rapidez, facilidad de uso y sobre todo por la sintaxis tan interesante (y curiosa) que maneja este framework. Pues bien, alguien se tomo la libertad de recopilar los mejores scripts para galerías y/o deslizadores de imágenes hechos con jQuery; seguramente a más de uno le serán de utilizad al momento de hacer páginas o sistemas web.

Saludos. =)