31 Ene

Agrega gráficas interactivas a tu sitio web con Highcharts [Javascript]

La tecnología Flash está en pleno declive en Internet después de que los gigantes del mundo de la informática y los propios usuarios le dieran la espalda. Empresas como Apple, Google, Facebook y Microsoft han decidido darle soporte al estándar HTML5 y al lenguaje Javascript como las nuevas tecnologías predominantes de Internet.

Hasta hace algunos años Flash era muy utilizado en sitios web para mostrar gráficas de barra o de pastel. Había cientos de plugins que hacían muy sencilla la labor de colocar estas gráficas para los desarrolladores web, además incluían animaciones que daban un mejor aspecto.

Si eres desarrollador (especialmente si eres desarrollador web) seguramente te interesará utilizar las últimas tecnologías disponibles y sobre todo utilizar los estándares. Así que para el caso de las gráficas, presento como referencia una librería de Javascript llamada HighCharts.

HighCharts te permite añadir gráficas animadas a tu sitio web en una gran variedad de formatos. El plugin está hecho en Javascript por lo que es sumamente sencillo agregarlo a tu sitio web. La alimentación de información se hace a través del formato JSON.

Personalmente he utilizado esta librería en varios proyectos y siempre me ha dado excelentes resultados. Lo mejor de todo es que es compatible con cualquier navegador que soporte Javascript. Es decir, funciona con Windows, Linux, Mac, Android, iOS, Windows Phone, Firefox, Chrome, Safari, Internet Explorer, en una PC, en un Smartphone, en una Tablet, etc. Algo con lo que Flash no puede competir.

Librería: Highcharts
Demos: Highcharts Demos

31 Ago

Aprende Javascript de forma fácil e interactiva

Si deseas aprender Javascript CodeAcademy te permite lograrlo de una forma completamente interactiva. No es necesario que seas un gurú de la programación para usar el servicio pues los cursos están orientados para personas que van iniciando en la materia.

Lo más destacable de este sitio web es la manera en la que se enseña a programar a los usuarios. Básicamente se trabaja dentro de una consola de Javascript mientras se reciben instrucciones para continuar avanzando e ir aprendiendo las operaciones básicas del lenguaje.

Code AcademyLos cursos están disponibles de manera gratuita e incluso hay un indicador que te permite conocer en que nivel te encuentras.

Code Academy

Así que si deseas conocer uno de los lenguajes de programación más importantes y con una gran perspectiva a futuro. CodeAcademy es una gran opción para iniciar.

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.

17 May

Emulador de PC ejecutando Linux hecho en Javascript

Quedé sorprendido con este emulador de PC escrito enteramente en Javascript y que incluso ejecuta una versión especialmente compilada de Linux. Para accesar al mismo pueden hacer clic en la siguiente imagen y ya en la consola pueden probar algunos de los comandos más comunes de la shell de Linux.

El hardware emulado es el siguiente:

  • Un CPU 32 bit x86.
  • Un controlador de interrupciones programable 8259.
  • Un temporizador de interrupción programable 8254.
  • UART 16450.

En cuanto a la distribución de Linux, el creador del emulador compiló la versión 2.6.20 del Kernel y por si fuera poco agregó un compilador de C desarrollado por él mismo.

Página oficial del emulador: Bellard.org/jslinux
Especificaciones del emulador: Bellard.org/jslinux/tech.html
Visto en Twitter: @AlbertEin

03 May

66 sorprendentes aplicaciones hechas en HTML 5

Anteriormente les platiqué acerca de la sustitución en la web de Flash Player (un formato propietario) por HTML 5 (la siguiente versión del lenguaje básico de Internet). Es muy pronto para decir que Flash ya no es necesario en Internet pues muchos sitios webs todavía tienen sus bases hechas con esta tecnología, sin embargo en los últimos días se han estado presentando muchos ejemplos de las capacidades resultantes de combinar  Javascript, HTML 5 y SVG.

En PHP Gurú han hecho una recopilación con 66 ejemplos de aplicaciones en HTML 5 que sin duda son impresionantes. Para poder ver los ejemplos correctamente es necesario utilizar navegadores compatibles como Firefox, Safari y Google Chrome.

Les recomiendo principalmente:

¿Qué les parecen?, como desarrollador web creo que va siendo hora de comenzar a aprender estas técnicas si no me quiero quedar atrasado. =)

Saludos.