Mozilla Glow (Lanzamiento Mozilla Firefox 4)

Hoy es el lanzamiento oficial de Firefox 4, y para añadirle aun más relevancia al lanzamiento, la gente de Mozilla nos presenta glow.mozilla.org, que es un sitio web que le lleva la pista a todas las descargas de la nueva versión del popular navegador.

http://glow.mozilla.com/

Cada punto en el mapa representa a alguien que esta descargando Firefox (con algunos segundos de retraso), y el contador en la parte superior muestra el numero total de descargas desde 22 de Marzo de 2011 (lanzamiento oficial de Firefox 4).

Descarga Firefox 4 dando clic acá http://www.mozilla.com/es-ES/firefox/
Y tú, ¿ya descargaste Firefox 4?

The Letter-heads (Mozilla Demo)

The Letter-heads es una demostración de animación para Firefox 4 realizado por el diseñador "@Simurai". The Letter-heads te muestra una variedad de personajes que resultan de las animaciones con CSS3 y JavaScript de letras presentes en el demo. Este es un genial ejemplo con el que es su obligación interactuar, y sirve de ejemplo perfecto de las capacidades de la nueva versión de Firefox 4, que probablemente sale para el 22 de Marzo de 2011 (en Chrome corre igual de bien).

Vínculo para ver The Letter-heads:

https://mozillademos.org/demos/shadows/demo.html

Y el código fuente en GitHub:

https://github.com/simurai/shadows/

Espero que les guste, ¡saludos!

Aprendiendo a usar Canvas en HTML5

HTML5, la nueva versión del lenguaje de marcado para crear páginas web está ya soportado por los últimos navegadores. Esta nueva versión trae muchas novedades a la web y características especiales que antes solo era posible llevarlas a cabo usando Flash. Entre los tags más mencionados son el tag Vídeo, para incrustar y reproducir vídeos nativamente sin necesidad de Flash y el tag Canvas que permite crear y animar gráficos 2D y hasta 3D de forma nativa.

En este artículo demostraremos el uso del tag Canvas, realizando dibujos y un mini paint utilizando CSS y Javascript.

Antes de empezar, cabe mencionar que por el momento no todos los navegadores soportan todas las características de HTML5. Por ejemplo, Internet Explorer es de los que aún no soportan el tag Canvas y por lo tanto no podrán apreciar el demo de canvas que hemos publicado en este post. A continuación una tabla comparativa mostrando las características de HTML5 que soporta cada navegador a la fecha:

"Tabla comparativa mostrando las características de HTML5 soportadas por cada navegador"

Primeramente, debemos crear nuestra página HTML con su respectivo body dentro del cual debemos ubicar nuestro tag Canvas. Este tag no requiere atributos especiales mas que su height y width. Entre la apertura y cierre del tag Canvas puedes incluir cualquier otro contenido HTML el cual le será mostrado al usuario si este utiliza un navegador que no soporte el tag. Esto puede servir como un espacio para mostrar un mensaje indicando la falta de soporte por falta del navegador. También es útil asignarle un ID a dicho tag, para luego poder identificarlo al momento de manipularlo desde Javascript:

"Código HTML mostrando el tag Canvas y algunos de sus atributos"

Una vez que tienes el tag, es hora de manipularlo desde Javascript! empecemos por obtener el Context, el cual es el objeto que posee los métodos para dibujar dentro del canvas. Entre estos métodos se encuentran fillFect(), arc(), moveTo(), stroke(), etc. Este objeto Context además tiene una propiedad llamada fillStyle con la cual puedes definirle el color en formato rgb o rgba con el cual se realizarán los trazos.

"Código Javascript obteniendo el objeto Context asociado al objeto DOM Canvas para luego establecer un color vía RGB y pintar un rectángulo"

A continuación mostramos dos ejemplos un poco más elaborados. En el primero, mostramos cómo dibujar una cara feliz y en el segundo cómo asociar los eventos del ratón para pintar sobre el canvas por medio del click. Para ello utilizamos la aplicación web jsFiddle que te permite incrustar HTML, CSS y Javascript al mismo tiempo que se puede apreciar el resultado de dicho código. Además se hace uso de jQuery para simplificar el acceso al objeto DOM Canvas:

"Código HTML, CSS y Javascript para dibujar una cara feliz en el Canvas. Clic en el tab Result para ver el resultado"

"Código HTML, CSS y Javascript para crear una superficie de dibujo en la cual se pinta un cuadro negro por cada clic del ratón. Clic en el tab Result para ver e interactuar con el resultado"

En este link pueden probar Sketchpad, un ejemplo mucho más elaborado de una aplicación web simulando las características de paint.

También en el Mozilla Developer Center pueden encontrar más información y tutoriales sobre el tag canvas y el resto de características HTML5 actualmente soportadas por Mozilla Firefox.

En mi opinión personal, HTML5 permitirá sustituir Flash en un futuro no muy lejano por lo menos en las características que antes solían verse en páginas web como animaciones, reproducción de medios y videojuegos en línea. Es importante aprender desde ya lo que se puede hacer con él y así estar preparados para un futuro en el que este estándar sea utilizado por la mayoría de sitios y la crezca demanda de programadores con dichos conocimientos.

Aprendiendo a usar Canvas en HTML5

HTML5, la nueva versión del lenguaje de marcado para crear páginas web está ya soportado por los últimos navegadores. Esta nueva versión trae muchas novedades a la web y características especiales que antes solo era posible llevarlas a cabo usando Flash. Entre los tags más mencionados son el tag Vídeo, para incrustar y reproducir vídeos nativamente sin necesidad de Flash y el tag Canvas que permite crear y animar gráficos 2D y hasta 3D de forma nativa.

En este artículo demostraremos el uso del tag Canvas, realizando dibujos y un mini paint utilizando CSS y Javascript.

Antes de empezar, cabe mencionar que por el momento no todos los navegadores soportan todas las características de HTML5. Por ejemplo, Internet Explorer es de los que aún no soportan el tag Canvas y por lo tanto no podrán apreciar el demo de canvas que hemos publicado en este post. A continuación una tabla comparativa mostrando las características de HTML5 que soporta cada navegador a la fecha:

"Tabla comparativa mostrando las características de HTML5 soportadas por cada navegador"

Primeramente, debemos crear nuestra página HTML con su respectivo body dentro del cual debemos ubicar nuestro tag Canvas. Este tag no requiere atributos especiales mas que su height y width. Entre la apertura y cierre del tag Canvas puedes incluir cualquier otro contenido HTML el cual le será mostrado al usuario si este utiliza un navegador que no soporte el tag. Esto puede servir como un espacio para mostrar un mensaje indicando la falta de soporte por falta del navegador. También es útil asignarle un ID a dicho tag, para luego poder identificarlo al momento de manipularlo desde Javascript:

"Código HTML mostrando el tag Canvas y algunos de sus atributos"

Una vez que tienes el tag, es hora de manipularlo desde Javascript! empecemos por obtener el Context, el cual es el objeto que posee los métodos para dibujar dentro del canvas. Entre estos métodos se encuentran fillFect(), arc(), moveTo(), stroke(), etc. Este objeto Context además tiene una propiedad llamada fillStyle con la cual puedes definirle el color en formato rgb o rgba con el cual se realizarán los trazos.

"Código Javascript obteniendo el objeto Context asociado al objeto DOM Canvas para luego establecer un color vía RGB y pintar un rectángulo"

A continuación mostramos dos ejemplos un poco más elaborados. En el primero, mostramos cómo dibujar una cara feliz y en el segundo cómo asociar los eventos del ratón para pintar sobre el canvas por medio del click. Para ello utilizamos la aplicación web jsFiddle que te permite incrustar HTML, CSS y Javascript al mismo tiempo que se puede apreciar el resultado de dicho código. Además se hace uso de jQuery para simplificar el acceso al objeto DOM Canvas:

"Código HTML, CSS y Javascript para dibujar una cara feliz en el Canvas. Clic en el tab Result para ver el resultado"

"Código HTML, CSS y Javascript para crear una superficie de dibujo en la cual se pinta un cuadro negro por cada clic del ratón. Clic en el tab Result para ver e interactuar con el resultado"

En este link pueden probar Sketchpad, un ejemplo mucho más elaborado de una aplicación web simulando las características de paint.

También en el Mozilla Developer Center pueden encontrar más información y tutoriales sobre el tag canvas y el resto de características HTML5 actualmente soportadas por Mozilla Firefox.

En mi opinión personal, HTML5 permitirá sustituir Flash en un futuro no muy lejano por lo menos en las características que antes solían verse en páginas web como animaciones, reproducción de medios y videojuegos en línea. Es importante aprender desde ya lo que se puede hacer con él y así estar preparados para un futuro en el que este estándar sea utilizado por la mayoría de sitios y la crezca demanda de programadores con dichos conocimientos.

En Búsqueda del Reproductor Ideal

Una de las cosas que más hacemos al estar en nuestra computadora es escuchar música. Quizá es de los primeros programas que instalamos si es que acabamos de obtenerla o la hemos formateado ya que nos permite dejarla sonando mientras realizamos otras actividades típicas como chatear, navegar en Internet, hacer tareas, etc.

Hay algunos que lo único que les interesa es escuchar la música, les bastaría nada más tener un reproductor cuya única interfaz sea un botón de Play y que empiece a sonar aleatoriamente alguna lista de archivos seleccionada de una carpeta o la librería completa de música. En cambio, habemos otros un poco más exigentes a la hora de escuchar música y deseamos que nuestro reproductor haga muchas otras cosas aparte de reproducir audio por lo que, a manera personal, les muestro una lista del top de reproductores de audio y las características por las que han sido seleccionados.

"Interfaz de AeroTrax, reproductor minimalista y quiza el ideal de muchos"

Entre las características que considero debe cumplir un reproductor decente, se encuentran las siguientes:

• Multiplataforma: Algunos de nosotros utilizamos mas de un mismo sistema operativo. No es mucho pedir poder usar el mismo reproductor tanto en uno como en otro.
• Listas de reproducción inteligentes: Para no tener que agregar cada track por separado.
• Capacidad de minimizarse al área de notificación: Y además de ello, poder usar los controles básicos (play-pause-next-previous-stop-exit-restore) desde el doble clic.
• Audioscrobbling con Last.fm: De manera que last.fm no pierda el rastro de la música que más escucho y asi sepa hacerme buenas recomendaciones.
• Notificaciones por OSD: OSD, siglas de On Screen Display son las que te aparecen cuando has cambiado de track, mostrándote en un pequeño recuadro el artista-album-nombre de la canción correspondiente.
• Teclas de acceso globales: De manera que no tenga que abrir la ventana del reproductor cuando quiera cambiar de pista o pausar la reproducción.
• Personalizable: Mediante la adición de add-ons, de manera que puedas agregar funciones como visualizaciones, skins, lyrics, etc.
• Reproducción de Radios y Podcasts en línea: Cuando llega a aburrir la librería de música, es bueno tener a la mano alguna estación de radio o podcast.
• Gratuito: No le encuentro sentido a pagar por un reproductor de música.

Quiza no exista un único reproducto que cumpla con todas estas características pero hay varios que cumplen con la mayoría. Entre los que he tenido la oportunidad de probar y han sido de mi agrado estan:

Songbird: (link) Basado en xul(la interfaz gráfica de Firefox) y respaldado por Mozilla, lo que permite que, al igual que el navegador, existan versiones para distintas plataformas. También aprovecha de su interfaz el hecho de venir con un navegador web integrado el cual permite agregar add-ons similares a los de firefox y extenderlo hasta convertirlo en algo más que un simple reproductor de música.



Amarok: (link) Uno de los reproductores más completos y populares que existen para Linux, con la capacidad de ser portado a Windows junto con la paquetería de KDE. Basado en Qt y XMMS. Cumple con la gran mayoría de las características listadas arriba.



aTunes: (link) Reproductor Open Source basado en Java (lo cual lo vuelve multiplataforma) y surge como una alternativa al iTunes de Apple.




MPD: (link) Este no es un reproductor de música en si, sino mas bien es un servidor (o demonio) de reproducción de audio, el cual es controlado mediante cualquiera de las aplicaciones cliente que existen para el. Estas van desde una basada en comandos de la consola (mpc), applets para el gnome-panel, screenlets para el escritorio o sino uno de mis clientes favoritos, sonata.

WinAmp: (link) Quiza el reproductor más popular que existe para Windows, capaz de ser portado a Linux mediante wine. Con la capacidad de competir con los demás listados anteriormente aunque su intefaz no sea tan intuitiva o tan normal como la del resto de reproductores. Aun así es posible cambiarla mediante skins.


Que reproductor agregarías tu a las lista?

addon amarok apple complementos firefox last.fm linux musica podcast screenlet streaming java winamp atunes songbird mozilla mpd

En Búsqueda del Reproductor Ideal

Una de las cosas que más hacemos al estar en nuestra computadora es escuchar música. Quizá es de los primeros programas que instalamos si es que acabamos de obtenerla o la hemos formateado ya que nos permite dejarla sonando mientras realizamos otras actividades típicas como chatear, navegar en Internet, hacer tareas, etc.

Hay algunos que lo único que les interesa es escuchar la música, les bastaría nada más tener un reproductor cuya única interfaz sea un botón de Play y que empiece a sonar aleatoriamente alguna lista de archivos seleccionada de una carpeta o la librería completa de música. En cambio, habemos otros un poco más exigentes a la hora de escuchar música y deseamos que nuestro reproductor haga muchas otras cosas aparte de reproducir audio por lo que, a manera personal, les muestro una lista del top de reproductores de audio y las características por las que han sido seleccionados.

"Interfaz de AeroTrax, reproductor minimalista y quiza el ideal de muchos"

Entre las características que considero debe cumplir un reproductor decente, se encuentran las siguientes:

• Multiplataforma: Algunos de nosotros utilizamos mas de un mismo sistema operativo. No es mucho pedir poder usar el mismo reproductor tanto en uno como en otro.
• Listas de reproducción inteligentes: Para no tener que agregar cada track por separado.
• Capacidad de minimizarse al área de notificación: Y además de ello, poder usar los controles básicos (play-pause-next-previous-stop-exit-restore) desde el doble clic.
• Audioscrobbling con Last.fm: De manera que last.fm no pierda el rastro de la música que más escucho y asi sepa hacerme buenas recomendaciones.
• Notificaciones por OSD: OSD, siglas de On Screen Display son las que te aparecen cuando has cambiado de track, mostrándote en un pequeño recuadro el artista-album-nombre de la canción correspondiente.
• Teclas de acceso globales: De manera que no tenga que abrir la ventana del reproductor cuando quiera cambiar de pista o pausar la reproducción.
• Personalizable: Mediante la adición de add-ons, de manera que puedas agregar funciones como visualizaciones, skins, lyrics, etc.
• Reproducción de Radios y Podcasts en línea: Cuando llega a aburrir la librería de música, es bueno tener a la mano alguna estación de radio o podcast.
• Gratuito: No le encuentro sentido a pagar por un reproductor de música.

Quiza no exista un único reproducto que cumpla con todas estas características pero hay varios que cumplen con la mayoría. Entre los que he tenido la oportunidad de probar y han sido de mi agrado estan:

Songbird: (link) Basado en xul(la interfaz gráfica de Firefox) y respaldado por Mozilla, lo que permite que, al igual que el navegador, existan versiones para distintas plataformas. También aprovecha de su interfaz el hecho de venir con un navegador web integrado el cual permite agregar add-ons similares a los de firefox y extenderlo hasta convertirlo en algo más que un simple reproductor de música.



Amarok: (link) Uno de los reproductores más completos y populares que existen para Linux, con la capacidad de ser portado a Windows junto con la paquetería de KDE. Basado en Qt y XMMS. Cumple con la gran mayoría de las características listadas arriba.



aTunes: (link) Reproductor Open Source basado en Java (lo cual lo vuelve multiplataforma) y surge como una alternativa al iTunes de Apple.




MPD: (link) Este no es un reproductor de música en si, sino mas bien es un servidor (o demonio) de reproducción de audio, el cual es controlado mediante cualquiera de las aplicaciones cliente que existen para el. Estas van desde una basada en comandos de la consola (mpc), applets para el gnome-panel, screenlets para el escritorio o sino uno de mis clientes favoritos, sonata.

WinAmp: (link) Quiza el reproductor más popular que existe para Windows, capaz de ser portado a Linux mediante wine. Con la capacidad de competir con los demás listados anteriormente aunque su intefaz no sea tan intuitiva o tan normal como la del resto de reproductores. Aun así es posible cambiarla mediante skins.


Que reproductor agregarías tu a las lista?

addon amarok apple complementos firefox last.fm linux musica podcast screenlet streaming java winamp atunes songbird mozilla mpd