KendoUI: Mas Allá de jQuery

"Página principal del proyecto (Porqué esa tendencia de mezclar programación con artes marciales?)"

El día de hoy me entero del lanzamiento del framework denominado KendoUI el cual sale del beta privado para estar disponible al público con su doble licencia tanto comercial con soporte incluído y GPLv3.

Tal como menciono en el título de este post, KendoUI está construído sobre la base de jQuery pero lo extiende de tal manera que me recuerda mucho al framework Dojo con una sintaxis muy ordenada y complejos controles enriquecidos para la interfaz de usuario facilitando (o mas bien dicho, automatizando) las tareas de vincular estos controles con eventos y asociándoles repositorios de datos haciendo uso de HTML5 pero manteniendo la compatibilidad con los navegadores que aun no soportan esta versión del lenguaje de marcado.

"Showcase con los controles incluídos en el framework"

El día de hoy además fue presentado de manera extensiva mediante un webinar (link al vídeo en youtube) en el que el programador Todd Anglin explica en detalle las características de este nuevo framework.

"ThemeBuilder para colorear los controles en base a nuestra propia paleta de colores"

Como todo framework decente, posee su propio Showcase listando cada uno de los controles que posee este framework junto con la descripción de sus propiedades, eventos y código de ejemplo, además de un ThemeBuilder con el cual adecuar una paleta de colores como tema para dichos controles.

En mi opinión es un framework que desde que estaba en su beta cerrado me ha llamado la atención y espero poder utilizarlo en mi próximo proyecto que se me ocurra, media vez este cumpla con la licencia GPLv3 bajo la cual ha sido liberado el framework.

NinjaUI - Componentes UI Prefabricados con jQuery

"Página principal de Ninja UI. Un muy prometedor proyecto basado en jQuery"

Recientemente me doy cuenta del lanzamiento de este pequeño set de componentes javascript basados en jQuery que prometen ahorrarnos trabajo al momento de construir interfaces de usuario html/css/javascript. Para aquellos que ya han trabajado con anterioridad con el framework jQuery, este les parecerá muy similar a como lo hacemos hoy en día con jquery-ui.

En la página de ejemplos podrán notar todo lo que podemos construir haciendo uso de estos componentes. En lo personal los he estado probando un rato y me han parecido bastante buenos dado que a penas se encuentran en su primer fase beta. Hasta el momento no he observado en el sitio ningún tutorial pero podemos apreciar su uso examinando el código fuente de la página de ejemplos utilizando, por ejemplo, firebug desde firefox y según mis observaciones nada más consiste en crear un par de divs/spans y asignarle las respectivas clases css según el componente que querramos construir, lo cual me parece bastante bueno ya que están utilizando el javascript de manera no intrusiva.

"Examinando el código fuente de NinjaUI desde Firefox con Firebug"

Pueden descargar la versión Beta 1.0 (la ás reciente al momento de escribir este post) directamente desde la página principal o haciendo click aquí.

Mis expectativas para su próxima versión consisten en la posibilidad de venir con diferentes temas prefabricados y añadir aún más componentes como calendarios, popups modales y quizá explotar un poco mas los features de jQuery como draggable y animate.

Démosle una oportunidad y algo de tiempo y veamos hasta donde logra llegar este proyecto.

Visto en Kabytes.

Propósito de Año Nuevo: Un Nuevo Lenguaje de Programación.

Llegó el año nuevo y muchos suelen establecer propósitos que intentarán cumplir durante el nuevo año. Unos pueden proponerse hacer más ejercicio, conseguir un nuevo trabajo, procrastinar menos, etc. En esta ocasión les propongo como propósito aprender un nuevo lenguaje de programación.

Posiblemente seas ya un master en .Net, ya conozcas todo lo que se debe saber sobre los foundation y hasta tengas tu certificación. Quizá tengas años de experiencia trabajando con java y sus stacks, quizá spring, faces, ejbs. Quizá seas uno de los mejores con Python o Ruby o quizá tengas un enorme portafolio de sitios elaborados con PHP en tu currículum. Es muy importante escoger un lenguaje de programación, aferrarnos a el y conocerlo a fondo pero no debemos quedarnos hasta ahí. Es importante seguir avanzando y no necesariamente en la misma rama que ya dominamos porque llegará un momento en el que nuestro lenguaje ya no sea el más popular o el mejor pagado en el mercado y sea hora de migrar a uno nuevo.

Lenguajes de programación hay muchos allá afuera, unos más populares que otros, unos más fáciles que otros, con mayor o menor soporte, con su única manera de abstraer el mundo real y expresarlo mediante su sintaxis y frameworks. Cada lenguaje tiene su especialidad y principal enfoque y pueda que nos sea una ventaja conocerlo en algún momento.

Para todo aquel programador Java que a veces siente que le hace falta un poco de scripting language pero no quiere soltar las bondades del JDK es un buen momento para animarse a aprender Groovy. Un lenguaje que te permite experimentar esa agilidad del "write less, do more" haciendo uso de las ya conocidas bondades del JDK de java.

Posiblemente seas un programador de backends y siempre te ha impresionado la calidad de las interfaces gráficas que se pueden desarrollar hoy en día mediante CSS y Javascript. Puede ser un buen momento de pasarse al lado de los frontends y aprender un poco de jQuery, Scriptaculous o Motools y sacarle provecho a lo que estos frameworks pueden hacer con el DOM y el CSS de tus sitios.

En lo personal, siempre me he sentido esa apatía por el SQL y he sufrido mucho cuando he tenido que realizar grandes consultas
con SELECT anidados, JOINs y CASEs pero a la vez he podido comprobar la ventaja de utilizar procedimientos almacenados escritos con PL/SQL por lo que espero poder aprender y poner en práctica este lenguaje en este año.

En conclusión, un nuevo lenguaje de programación te abre la mente a una nueva forma de abstraer el mundo, resolver tus problemas/necesidades de información y escribir su lógica mediante una sintaxis diferente. Además, agregas una nueva habilidad a tu currículum por lo que te vuelves un profesional más valioso y con un horizonte más amplio de oportunidades de empleo. Documentación existe de sobra en la red por lo que esto nunca será una excusa mucho menos un obstáculo para aprender. Además, los programadores tendemos a tomar esa buena costumbre de volvernos autodidactas por lo que en la mayoía de las veces no es necesario pagar por cursos presenciales para aprender.

Qué nuevo lenguaje de programación les interesaría aprender este año?

Internacionalización en tus Sitios Web con jQuery

"Si esperas recibir usuarios de países con otros idiomas, es una buena recomendación poder mostrar el contenido de tu sitio en diferentes idiomas, tal como lo hace last.fm"

Internacionalización o i18n es la característica de los sistemas que les permite adaptar su contenido a diferentes idiomas según las regiones donde se desee mostrar. Muchas veces no solamente te permiten traducir el idioma del contenido sino también monedas, fechas y ajustes de zonas horarias. Dependiendo del lenguaje de programación usado, pueda que este ya brinde soluciones para poder permitir la internacionalización de tu sitio web. Java EE por ejemplo ofrece los Message Bundles combinados con tags JSP para llevar a cabo este fin.

Así como es posible hacerlo desde server side, en esta ocasión les traigo un ejemplo realizado desde client side, usando el muy popular framework de javascript conocido como jQuery, al cual le he agregado un plugin denominado jQuery.i18n.properties el cual me permite implementar la internacionalización en un sitio web de una forma muy similar a como se realiza en java.

La ventaja de usar una solucion client side? me permite cambiar el idioma del contenido del sitio sin necesidad de salirme (logout) y volver a entrar(login), ni siquiera es necesario refrescar la pagina! todo se realiza en tiempo real a la velocidad de un Ajax Callback.

Para demostrarles lo mencionado anteriormente he desarrollado un ejemplo utilizando jquery, jquery.i18n.properties, un pequeño script de javascript y un par de servlets de java. Todo esto dentro de un proyecto web en eclipse y además no pueden faltar los Message Bundles. Los Message Bundles son archivos de texto con extensión .properties que contienen propiedades de tipo clave=valor en los cuales se almacenan los mensajes que se mostrarán en pantalla de acuerdo al idioma seleccionado. De tal manera que existe un archivo llamado locale_es.properties para los mensajes en español, otro llamado locale_en.properties para los mensajes en inglés y otro más denominado locale_fr.properties para los mensajes en francés.

"En el panel izquierdo pueden ver los archivos utilizados en este proyecto. Servlets, javascripts, css, html y Message Bundles. En el panel principal a la derecha pueden ver parte del código HTML escrito."

Se ha escrito una pequeña página de login. Para internacionalizar los elementos les he colocado la clase "i18n" y como id el nombre de la clave que en el Message Bundle contiene el mensaje a mostrar. Se han agregado tres links en la parte superior que invocan a la función javascript para cambiar de idioma. Esto llama al plugin i18n.properties quien mediante un ajax callback obtiene el Message Bundle según el idioma deseado y lo carga en un mapa con los datos en forma de clave=valor.

"Las funciones principales del archivo core.js con las cuales se lleva a cabo la internacionalización"

Luego de tener el mapa, se asignan los valores a cada elemento con la clase "i18n" y la clave según el ID del elemento. Luego de ello se escribió un Fake login test que devuelve respuestas random de manera que se prueben tanto mensajes de error como mensajes de éxito, ambos internacionalizados.

A continuación unas capturas de pantalla del sitio web en funcionamiento:

"Sitio web mostrando mensaje de error en el login, todo en idioma inglés"

"Sitio web mostrando mensaje de error en el login, todo en idioma español"

"Sitio web mostrando mensaje de éxito en el login, todo en francés"

En este link pueden descargar el código fuente del proyecto.

Internacionalización en tus Sitios Web con jQuery

"Si esperas recibir usuarios de países con otros idiomas, es una buena recomendación poder mostrar el contenido de tu sitio en diferentes idiomas, tal como lo hace last.fm"

Internacionalización o i18n es la característica de los sistemas que les permite adaptar su contenido a diferentes idiomas según las regiones donde se desee mostrar. Muchas veces no solamente te permiten traducir el idioma del contenido sino también monedas, fechas y ajustes de zonas horarias. Dependiendo del lenguaje de programación usado, pueda que este ya brinde soluciones para poder permitir la internacionalización de tu sitio web. Java EE por ejemplo ofrece los Message Bundles combinados con tags JSP para llevar a cabo este fin.

Así como es posible hacerlo desde server side, en esta ocasión les traigo un ejemplo realizado desde client side, usando el muy popular framework de javascript conocido como jQuery, al cual le he agregado un plugin denominado jQuery.i18n.properties el cual me permite implementar la internacionalización en un sitio web de una forma muy similar a como se realiza en java.

La ventaja de usar una solucion client side? me permite cambiar el idioma del contenido del sitio sin necesidad de salirme (logout) y volver a entrar(login), ni siquiera es necesario refrescar la pagina! todo se realiza en tiempo real a la velocidad de un Ajax Callback.

Para demostrarles lo mencionado anteriormente he desarrollado un ejemplo utilizando jquery, jquery.i18n.properties, un pequeño script de javascript y un par de servlets de java. Todo esto dentro de un proyecto web en eclipse y además no pueden faltar los Message Bundles. Los Message Bundles son archivos de texto con extensión .properties que contienen propiedades de tipo clave=valor en los cuales se almacenan los mensajes que se mostrarán en pantalla de acuerdo al idioma seleccionado. De tal manera que existe un archivo llamado locale_es.properties para los mensajes en español, otro llamado locale_en.properties para los mensajes en inglés y otro más denominado locale_fr.properties para los mensajes en francés.

"En el panel izquierdo pueden ver los archivos utilizados en este proyecto. Servlets, javascripts, css, html y Message Bundles. En el panel principal a la derecha pueden ver parte del código HTML escrito."

Se ha escrito una pequeña página de login. Para internacionalizar los elementos les he colocado la clase "i18n" y como id el nombre de la clave que en el Message Bundle contiene el mensaje a mostrar. Se han agregado tres links en la parte superior que invocan a la función javascript para cambiar de idioma. Esto llama al plugin i18n.properties quien mediante un ajax callback obtiene el Message Bundle según el idioma deseado y lo carga en un mapa con los datos en forma de clave=valor.

"Las funciones principales del archivo core.js con las cuales se lleva a cabo la internacionalización"

Luego de tener el mapa, se asignan los valores a cada elemento con la clase "i18n" y la clave según el ID del elemento. Luego de ello se escribió un Fake login test que devuelve respuestas random de manera que se prueben tanto mensajes de error como mensajes de éxito, ambos internacionalizados.

A continuación unas capturas de pantalla del sitio web en funcionamiento:

"Sitio web mostrando mensaje de error en el login, todo en idioma inglés"

"Sitio web mostrando mensaje de error en el login, todo en idioma español"

"Sitio web mostrando mensaje de éxito en el login, todo en francés"

En este link pueden descargar el código fuente del proyecto.

jQuery Mobile Al Fin!

"jQuery Mobile desde mi iPod Touch"

Llegó el momento de la verdad con el tan esperado release de jQuery para Móviles.

http://jquerymobile.com/

Por el momento aún se encuentra en versión Alpha1 por lo que no es nada más para que los interesados puedan empezar a jugar con el y mediante el feedback brindado, logren reparar los bugs, agregar features deseados y luego lanzar el release estable.

En la web existen actualmente varias librerías para desarrollar aplicaciones basadas en móviles, la mayoría emulando la bien elaborada interfaz del iOS pero sin lograrlo completamente. El que mas convencía era jQtouch, un plugin para jQuery que transforma elementos HTML en componentes de UI para móviles, pero este plugin aún se queda corto en cuanto a features y documentación por lo que este proyecto de jQuery Mobile ha sido esperado con ansias por muchos de nosotros.

En este link podemos encontrar un demo navegable desde un dispositivo móvil y en este otro link podemos contribuir en forma de donaciones, feedback o aportes al código fuente. Recuerden que esa es la ventaja de los proyectos open source, que es elaborado de forma libre por comunidades, para comunidades.

jQuery Mobile Al Fin!

"jQuery Mobile desde mi iPod Touch"

Llegó el momento de la verdad con el tan esperado release de jQuery para Móviles.

http://jquerymobile.com/

Por el momento aún se encuentra en versión Alpha1 por lo que no es nada más para que los interesados puedan empezar a jugar con el y mediante el feedback brindado, logren reparar los bugs, agregar features deseados y luego lanzar el release estable.

En la web existen actualmente varias librerías para desarrollar aplicaciones basadas en móviles, la mayoría emulando la bien elaborada interfaz del iOS pero sin lograrlo completamente. El que mas convencía era jQtouch, un plugin para jQuery que transforma elementos HTML en componentes de UI para móviles, pero este plugin aún se queda corto en cuanto a features y documentación por lo que este proyecto de jQuery Mobile ha sido esperado con ansias por muchos de nosotros.

En este link podemos encontrar un demo navegable desde un dispositivo móvil y en este otro link podemos contribuir en forma de donaciones, feedback o aportes al código fuente. Recuerden que esa es la ventaja de los proyectos open source, que es elaborado de forma libre por comunidades, para comunidades.

jQuery para Móviles a la Vuelta de la Esquina

"jQuery ahora en nuestros smartphones y tablets. Yuju! :D"

Recientemente me entero que la comunidad de desarrolladores de jQuery trae entre manos un prometedor proyecto que pretende llevar este popular framework a los browsers de los dispositivos móviles y sus hermanos mayores, las tablets. Este proyecto es denominado jQuery Mobile.

En el web existen pocos frameworks de javascript capaces de considerarse cross-browser y cross-device, especialmente cuando hablamos de dispositivos móviles. El equipo de jQuery tiene un gran reto en sus manos si quiere llevar a cabo este objetivo especialmente si consideramos que jquery no sobresale por su performance pero sí por su popularidad, su robustez en sus widgets de jquery-ui y por la gran cantidad de plugins que existen para extenderlo.

En este sitio ellos han publicado la lista de los browsers que actualmente existen para dispositivos móviles, clasificados según sus capacidades de ejecutar javascript y su compatibilidad con los estándares del W3C. jQuery planea soportar los browsers clase A y B, conformados por los smartphones de alta gama como iPhone, Blackberry, Dispositivos con Android, La serie N de Nokia, entre otros.

Los diseños que están planeando para el nuevo tema de jquery-ui para móviles se me hace muy similar a la interfaz y los controles del iOS en smartphones y al look and feel del MacOS y no era de esperar, ya que estas son en lo que a mi respecta las interfaces de usuario más amigables que existen a la fecha.

"Así lucirán los widgets de jQuery UI adaptados para smartphones"

Lo que distinguirá a este framework de los demás es que desde ya va pensado no solamente para smartphones sino también para tablets. Actualmente no conozco ningún framework para desarrollo web o aplicaciones nativas pensadas exclusivamente en el diseño y las capacidades de una tablet por lo que jQuery sería el pionero y la base para el futuro mercado de tablets que en un futuro no muy lejano pasarán a competir con el iPad.

Por el momento este proyecto aún se encuentra en fase de desarrollo y prometen liberarlo a finales del presente año por lo que habrá que estar pendiente de los avances de este prometedor proyecto de jQuery. Pueden seguir todos los avances en el blog del proyecto, en la cuenta de twitter de jQuery y en la wiki de jQuery Mobile, donde además pueden aportar ideas al proyecto.

jQuery para Móviles a la Vuelta de la Esquina

"jQuery ahora en nuestros smartphones y tablets. Yuju! :D"

Recientemente me entero que la comunidad de desarrolladores de jQuery trae entre manos un prometedor proyecto que pretende llevar este popular framework a los browsers de los dispositivos móviles y sus hermanos mayores, las tablets. Este proyecto es denominado jQuery Mobile.

En el web existen pocos frameworks de javascript capaces de considerarse cross-browser y cross-device, especialmente cuando hablamos de dispositivos móviles. El equipo de jQuery tiene un gran reto en sus manos si quiere llevar a cabo este objetivo especialmente si consideramos que jquery no sobresale por su performance pero sí por su popularidad, su robustez en sus widgets de jquery-ui y por la gran cantidad de plugins que existen para extenderlo.

En este sitio ellos han publicado la lista de los browsers que actualmente existen para dispositivos móviles, clasificados según sus capacidades de ejecutar javascript y su compatibilidad con los estándares del W3C. jQuery planea soportar los browsers clase A y B, conformados por los smartphones de alta gama como iPhone, Blackberry, Dispositivos con Android, La serie N de Nokia, entre otros.

Los diseños que están planeando para el nuevo tema de jquery-ui para móviles se me hace muy similar a la interfaz y los controles del iOS en smartphones y al look and feel del MacOS y no era de esperar, ya que estas son en lo que a mi respecta las interfaces de usuario más amigables que existen a la fecha.

"Así lucirán los widgets de jQuery UI adaptados para smartphones"

Lo que distinguirá a este framework de los demás es que desde ya va pensado no solamente para smartphones sino también para tablets. Actualmente no conozco ningún framework para desarrollo web o aplicaciones nativas pensadas exclusivamente en el diseño y las capacidades de una tablet por lo que jQuery sería el pionero y la base para el futuro mercado de tablets que en un futuro no muy lejano pasarán a competir con el iPad.

Por el momento este proyecto aún se encuentra en fase de desarrollo y prometen liberarlo a finales del presente año por lo que habrá que estar pendiente de los avances de este prometedor proyecto de jQuery. Pueden seguir todos los avances en el blog del proyecto, en la cuenta de twitter de jQuery y en la wiki de jQuery Mobile, donde además pueden aportar ideas al proyecto.

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.

JQuery Cumple 4 Años y lo Celebran con Muchos Releases

"Entre las novedades de jQuery presentan 14 días de releases continuos"

El día de ayer, 15 de Enero, jQuery celebró su cuarto cumpleaños de haber sido liberado y desde entonces los desarrolladores de este popular framework lo están celebrando a lo grande con la liberación de la verisón 1.4, un nuevo sitiopara la API, mejoras en el performance, QA en vivo, etc. En total serán 14 días durante los cuales tendremos nuevas sorpresas y releases relacionados con este framework, los cuales pueden consultar día a día en el sitio jquery14.com.

jQuery es un framework javascript open source que te ayuda principalmente a interactuar con el DOM de una página web de una forma muy práctica y con muy pocas líneas de código fuente. Además simplifica la comunicación vía ajax, el manejo de eventos, la creación y manipulación de controles para crear interfaces gráficas ricas, entre otras cosas.

Su gran popularidad y su capacidad de extensión mediante plugins ha permitido que muchos programadores lo hayan enriquecido con controles muy útiles como el datagrids, lightboxes, gráficos, skins, color pickers, por mencionar unos cuantos entre otros cientos de plugins que existen por ahí en la web.

"El plugin Flexigrid es de los más complejos y útiles que he utilizado con jQuery"

Lo que mas me encanta de usar jQuery es su facilidad para manipular el DOM. Como ejemplo, podemos ver el siguiente código fuente que utiliza sintaxis JSON de la nueva versión 1.4 para crear un DIV con id, propiedades CSS y una función para manejar su evento click para luego agregar este div al body de la página, todo de una sola vez:

 jQuery("<div/>", {
id: "foo",
css: {
  height: "50px",
  width: "50px",
  color: "blue",
  backgroundColor: "#ccc"
},
click: function() {
  $(this).css("backgroundColor", "red");
}
}).appendTo("body");

Como muchos proyectos open source, jQuery sobrevive gracias a las donaciones altruistas hechas por los usuarios. Como parte de las sorpresas que los desarrolladores de jQuery nos han traido, también tienes la oportunidad de recibir un e-book gratuito por tu donación al proyecto.

JQuery Cumple 4 Años y lo Celebran con Muchos Releases

"Entre las novedades de jQuery presentan 14 días de releases continuos"

El día de ayer, 15 de Enero, jQuery celebró su cuarto cumpleaños de haber sido liberado y desde entonces los desarrolladores de este popular framework lo están celebrando a lo grande con la liberación de la verisón 1.4, un nuevo sitiopara la API, mejoras en el performance, QA en vivo, etc. En total serán 14 días durante los cuales tendremos nuevas sorpresas y releases relacionados con este framework, los cuales pueden consultar día a día en el sitio jquery14.com.

jQuery es un framework javascript open source que te ayuda principalmente a interactuar con el DOM de una página web de una forma muy práctica y con muy pocas líneas de código fuente. Además simplifica la comunicación vía ajax, el manejo de eventos, la creación y manipulación de controles para crear interfaces gráficas ricas, entre otras cosas.

Su gran popularidad y su capacidad de extensión mediante plugins ha permitido que muchos programadores lo hayan enriquecido con controles muy útiles como el datagrids, lightboxes, gráficos, skins, color pickers, por mencionar unos cuantos entre otros cientos de plugins que existen por ahí en la web.

"El plugin Flexigrid es de los más complejos y útiles que he utilizado con jQuery"

Lo que mas me encanta de usar jQuery es su facilidad para manipular el DOM. Como ejemplo, podemos ver el siguiente código fuente que utiliza sintaxis JSON de la nueva versión 1.4 para crear un DIV con id, propiedades CSS y una función para manejar su evento click para luego agregar este div al body de la página, todo de una sola vez:

 jQuery("<div/>", {
id: "foo",
css: {
  height: "50px",
  width: "50px",
  color: "blue",
  backgroundColor: "#ccc"
},
click: function() {
  $(this).css("backgroundColor", "red");
}
}).appendTo("body");

Como muchos proyectos open source, jQuery sobrevive gracias a las donaciones altruistas hechas por los usuarios. Como parte de las sorpresas que los desarrolladores de jQuery nos han traido, también tienes la oportunidad de recibir un e-book gratuito por tu donación al proyecto.

Los 5 recursos que me salvaron la vida en 2009

El 2009, fue un año difícil, pero no solo lo fue a nivel de "crisis económica global", o enfermedades, etc, fue un reto a nivel personal, un año de crecimiento... egresar, trabajar, cumplir con requerimientos, hacer y defender la tesis. Si bien, el apoyo de la familia y la fe en Dios te saca adelante, tampoco podemos negar la ayuda de ciertas herramientas digitales, que te facilitan la vida, y este articulo es sobre algunas de ellas...

Google Code:
Desde que aprendimos a usar "Code Versioning" (allá por el final de 2007), simplemente ya no dejar de usarlo, y cuando descubrimos Google Code... fue la panacea de todos nuestros males. Al menos siete proyectos Universitarios están alojados en Google Code, incluyendo la tesis y el documento de la misma. Y para nuestras necesidades, la quota de espacio que Google Code da, es más que suficiente para alojar los proyectos del estudiante promedio.
Puedo decir, sin temor a equivocarme, que un buen porcentaje de estudiantes de sistemas tienen acceso a Internet en casa (y por ende computadora personal), así, que si eres estudiante, y te gusta trabajar desde tu casa y no quieres complicarte la vida pegando código de tus compañeros, comienza a usar una herramienta de control de versiones gratuita, y un sitio que te ofrezca alojamiento para tu código como SourceForge, GitHub y Google Code, a nosotros, el ultimo nos ayudo muchísimo en la tesis. Acá les dejo una "Guia Visual para Control de Versiones" para los que quiera una explicación visual del tema de control de versiones.

IceFaces:
IceFaces es el Framework que hizo que dejara de preocuparme por la compatibilidad entre navegadores y de escribir código JavaScript. Es un framework que "simplemente funciona", lo usamos también en la tesis, y después de un par de días de aprender a usarlo, la combinación de este (de IceFaces) con Oracle TopLink, Tomcat 6 y MySQL es una "gloria digital".
Con IceFaces aprendimos a preocuparnos por la lógica del negocio, y por hacer las cosas lo mejor posible, y no preocuparnos porque la GUI no se muestra bien en Internet Explorer 7+. Es un framework que recomiendo mucho, que mejora constantemente, y que ya esta en su versión 2.0, y posee soporte para las empresas. Si lo usan, se darán cuenta de que si diseñan bien la logica de su software, hacer proyectos con IceFaces es un paseo por el campo. Quizás el único inconveniente reciente, es que no hay plugin de IceFaces para Netbeans 6.8, solo para la versión 6.7.5.

jQuery:

Si bien no me gustaba JavaScript, cuando conocí JQuery la cosa cambio, y cuando comencé a usarlo todos los días en el trabajo, se volvió el mejor amigo para no caer en la locura y demencia de estar en un proyecto que: no usa persistencia (JPA), ni patrones de diseño, ni MVC, ni framework alguno... es bastante traumatico, pero bien, gracias a Dios tengo trabajo ¿no? :)
Al menos, yo prefiero jQuery por cinco excelentes razones: Selectores, Atributos, Ajax, Documentación, y jQuery UI. Si no están usando un framework de JavaScript, háganse un favor y aprendan uno de tantos, yo recomiendo jQuery, pero también les puede interesar MooTools y Dojo (entre otros tantos más).

Delicious Bookmarks:
Muchos de ustedes cuando navegan en el trabajo, les filtran el contenido porque a alguien se le ocurrió poner un proxy... si, y yo también me uno a su sufrimiento hermanos y hermanas. Asi que en el trabajo no tengo libre acceso a Internet. Sumemos a eso la necesidad de moverme constantemente entre Santa Ana y San Salvador... así que al momento de navegar y "sincronizar" algo tan simple como "mis favoritos", necesito una herramienta que utilice protocolo "https", se integre perfectamente con FireFox y ademas no tenga un "limite aparente" o de espacio. Esta milagrosa herramienta la utilizo desde hace al menos dos años, y con casi 3,000 favoritos, es el recurso que más me ha permitido mantener sincronizados los favoritos entre los equipos que utilizo :) Otras alternativas son Xmarks (antes conocido como FoxMarks) y ... bueno, solo ese vale la pena... creo yo. Pero aun asi, yo les recomiendo que descarguen y usen Delicious: complemento de Delicious para FireFox.

Twitter + Google Reader + Gmail + FaceBook:
Trabajar, viajar y llevar la tesis, no es tarea fácil, es una locura que no se la recomiendo a nadie. El principal problema con ese ajetreo... es la vida social, que caduca poco a poco hasta hace un par de meses. Reactivarla, sin salir del trabajo, solo fue posible gracias a Twitter (porque tambien soportar también el protocolo https) para medio "platicar", a Gmail para concretar salidas y mantener la comunicación tradicional y FaceBook para recordarme de cumpleaños, eventos y salidas.

"La productividad de estos servicios digitales, esta a la orden de: como y para que los usas, simplemente no hay que olvidar que son "la herramienta o el medio", no el propósito"

Ah si, y Google Reader... es solo para mantenerme informado de los temas que más me interesan.


Como pueden ver, no es nada fuera de este mundo, son cosas sencillas y accesibles que creo que cualquier diseñador web, programador, administrador de sistemas o usuario común pueden llegar a utilizar.

Espero que esta lista de recursos que para mi fue indispensable, les ayude tanto como a mi. ¡Feliz 2010!

Los 5 recursos que me salvaron la vida en 2009

El 2009, fue un año difícil, pero no solo lo fue a nivel de "crisis económica global", o enfermedades, etc, fue un reto a nivel personal, un año de crecimiento... egresar, trabajar, cumplir con requerimientos, hacer y defender la tesis. Si bien, el apoyo de la familia y la fe en Dios te saca adelante, tampoco podemos negar la ayuda de ciertas herramientas digitales, que te facilitan la vida, y este articulo es sobre algunas de ellas...

Google Code:
Desde que aprendimos a usar "Code Versioning" (allá por el final de 2007), simplemente ya no dejar de usarlo, y cuando descubrimos Google Code... fue la panacea de todos nuestros males. Al menos siete proyectos Universitarios están alojados en Google Code, incluyendo la tesis y el documento de la misma. Y para nuestras necesidades, la quota de espacio que Google Code da, es más que suficiente para alojar los proyectos del estudiante promedio.
Puedo decir, sin temor a equivocarme, que un buen porcentaje de estudiantes de sistemas tienen acceso a Internet en casa (y por ende computadora personal), así, que si eres estudiante, y te gusta trabajar desde tu casa y no quieres complicarte la vida pegando código de tus compañeros, comienza a usar una herramienta de control de versiones gratuita, y un sitio que te ofrezca alojamiento para tu código como SourceForge, GitHub y Google Code, a nosotros, el ultimo nos ayudo muchísimo en la tesis. Acá les dejo una "Guia Visual para Control de Versiones" para los que quiera una explicación visual del tema de control de versiones.

IceFaces:
IceFaces es el Framework que hizo que dejara de preocuparme por la compatibilidad entre navegadores y de escribir código JavaScript. Es un framework que "simplemente funciona", lo usamos también en la tesis, y después de un par de días de aprender a usarlo, la combinación de este (de IceFaces) con Oracle TopLink, Tomcat 6 y MySQL es una "gloria digital".
Con IceFaces aprendimos a preocuparnos por la lógica del negocio, y por hacer las cosas lo mejor posible, y no preocuparnos porque la GUI no se muestra bien en Internet Explorer 7+. Es un framework que recomiendo mucho, que mejora constantemente, y que ya esta en su versión 2.0, y posee soporte para las empresas. Si lo usan, se darán cuenta de que si diseñan bien la logica de su software, hacer proyectos con IceFaces es un paseo por el campo. Quizás el único inconveniente reciente, es que no hay plugin de IceFaces para Netbeans 6.8, solo para la versión 6.7.5.

jQuery:

Si bien no me gustaba JavaScript, cuando conocí JQuery la cosa cambio, y cuando comencé a usarlo todos los días en el trabajo, se volvió el mejor amigo para no caer en la locura y demencia de estar en un proyecto que: no usa persistencia (JPA), ni patrones de diseño, ni MVC, ni framework alguno... es bastante traumatico, pero bien, gracias a Dios tengo trabajo ¿no? :)
Al menos, yo prefiero jQuery por cinco excelentes razones: Selectores, Atributos, Ajax, Documentación, y jQuery UI. Si no están usando un framework de JavaScript, háganse un favor y aprendan uno de tantos, yo recomiendo jQuery, pero también les puede interesar MooTools y Dojo (entre otros tantos más).

Delicious Bookmarks:
Muchos de ustedes cuando navegan en el trabajo, les filtran el contenido porque a alguien se le ocurrió poner un proxy... si, y yo también me uno a su sufrimiento hermanos y hermanas. Asi que en el trabajo no tengo libre acceso a Internet. Sumemos a eso la necesidad de moverme constantemente entre Santa Ana y San Salvador... así que al momento de navegar y "sincronizar" algo tan simple como "mis favoritos", necesito una herramienta que utilice protocolo "https", se integre perfectamente con FireFox y ademas no tenga un "limite aparente" o de espacio. Esta milagrosa herramienta la utilizo desde hace al menos dos años, y con casi 3,000 favoritos, es el recurso que más me ha permitido mantener sincronizados los favoritos entre los equipos que utilizo :) Otras alternativas son Xmarks (antes conocido como FoxMarks) y ... bueno, solo ese vale la pena... creo yo. Pero aun asi, yo les recomiendo que descarguen y usen Delicious: complemento de Delicious para FireFox.

Twitter + Google Reader + Gmail + FaceBook:
Trabajar, viajar y llevar la tesis, no es tarea fácil, es una locura que no se la recomiendo a nadie. El principal problema con ese ajetreo... es la vida social, que caduca poco a poco hasta hace un par de meses. Reactivarla, sin salir del trabajo, solo fue posible gracias a Twitter (porque tambien soportar también el protocolo https) para medio "platicar", a Gmail para concretar salidas y mantener la comunicación tradicional y FaceBook para recordarme de cumpleaños, eventos y salidas.

"La productividad de estos servicios digitales, esta a la orden de: como y para que los usas, simplemente no hay que olvidar que son "la herramienta o el medio", no el propósito"

Ah si, y Google Reader... es solo para mantenerme informado de los temas que más me interesan.


Como pueden ver, no es nada fuera de este mundo, son cosas sencillas y accesibles que creo que cualquier diseñador web, programador, administrador de sistemas o usuario común pueden llegar a utilizar.

Espero que esta lista de recursos que para mi fue indispensable, les ayude tanto como a mi. ¡Feliz 2010!