Galería de Tablas con Estilo CSS

Recientemente estaba en la tarea de diseñar un par de tablas para mostrar información semi-estática por lo que su poco esfuerzo no ameritaba utilizar librerías más elaboradas como flexigrid, jqgrid o componentes faces así que me dediqué a la tarea de empezar a escribir los respectivos tags <table>, <tbody>, <tr>, <td> y los demás necesarios.

Terminado el HTML me dispuse a pensar en la forma más eficiente de darle estilo a mi tabla para que se acoplara a los colores y formas del resto del sitio y buscando en internet me encontré con esta fuente de inspiración y recursos denominada CSS Table Gallery.

 "El sitio en cuestión, mostrando aplicado uno de los estilos sobre la tabla de estilos"

Cuenta con una tabla HTML con 67 diferentes estilos CSS aplicables los cuales no son tan increíbles que digamos pero son suficientes para escoger una idea de estilo o una paleta de colores para tu tabla.

Estos pueden ser aplicados a la misma tabla que muestra dichos diseños (a la inception) de manera que dando click a cada uno de ellos es posible previsualizarlo al instante y contiene su respectivo link para descargar un demo conteniendo el CSS. Los desarrolladores que ya conocen Firebug saben que sin necesidad de descargar el fuente pueden visualizar las reglas y estilos aplicados directamente en el sitio mientras se ríen como Yao Ming.

Aunque se ha deshabilitado la opción para aportar nuevos diseños, los existentes son lo suficientemente variados para buscar y encontrar uno adecuado para nuestro sitio. Como bien lo describen aquí, es como el CSS Zen Garden de las tablas. Espero les sea de utilidad cuando tengan que crear y estilizar tablas a mano.

Maqetta, Nuevo IDE en la Nube

IBM presentó recientemente un nuevo IDE de desarrollo web con el cual pretende facilitarnos la vida al momento de diseñar el layout de nuestras aplicaciones y al mismo tiempo acercarnos a las nuevas bondades que el W3C nos ha traído con HTML5. Su nombre es Maqetta.

Lo mejor de todo es que, además de permitirte agregar y editar controles HTML de forma WYSIWYG, también incorpora controles visuales de librerías javascript populares como jQueryUI, Dijit (de Dojo) y YahooUI. Cuenta además con el reciente framework conocido como Dojox Mobile orientado, como su nombre lo indica, a los browsers de los dispositivos móviles.

"IDE Maqetta mostrando controles Dijit tanto en su forma WYSIWYG así como también en su versión código HTML" en paneles divididos horizontalmente"

Otras características importantes? El IDE está alojado en la nube lo cual nos evita tener que descargar muchos megabytes para contar con él lo cual también significa que nos consumirá una gran parte de la memoria RAM del equipo desde el navegador. Está construido haciendo uso del framework Dojo por lo cual la apariencia del IDE se les hará familiar para los que ya hayan ocupado este framework javascript. El proyecto está liberado bajo una licencia open source, la misma que posee el framework Dojo y pueden descargar su fuente de este link de github por si desean montar una copia local del IDE en sus equipos o en un server local.

Por el momento el proyecto aún se encuentra en una etapa bastante inicial por lo que no se asusten si se topan con uno que otro bug mientras lo prueban por lo que aun no es material para uso en los desarrollos de la vida diaria pero con un par de meses esperamos ver un producto un poco más usable.

Hay que tomar en cuenta que estamos hablando de un logro bastante ambicioso el que quieren alcanzar con este proyecto ya que como lo veo es básicamente lo que debió haber hecho Dreamweaver desde hace muchos años ya: incorporar para su diseño visual los controles javascript de las librerías más populares en la actualidad y la incursión de las novedades que vienen con HTML5 y CSS3.

"Demostración de las diferentes siluetas que se pueden utilizar para previsualizar las páginas web y la adaptación automática en la vista WYSIWYG"

Mas información en la página oficial del proyecto: maqetta.org

Puedes probar directamente el uso del IDE en este link.

Herramientas Online de Formato e Indentación de Código

Mas de alguna vez nos ha tocado revisar algún mensaje XML o JSON fuera de la oficina, donde no tenemos nuestras herramientas de desarrollo que tan agradablemente se encargan de formatear e indentar nuestros archivos para que podamos leerlos, analizarlos y encontrar posibles fallas en ellos. En estas ocasiones nos ha tocado manualmente estar partiendo el archivo en diferentes líneas y agregando sangrías para darle el formato adecuado y se nos vuelva más fácil su análisis

Si de casualidad nos encontramos en estas circunstancias pero tienen la bondad de contar con una conexión a Internet, pueden aprovechar algunas herramientas online que se encargan de formatear, colorear e indentar nuestros archivos de código fuente.

Hay muchos otros que no he listado acá por el hecho de que solamente colorean el código y considero mas útiles aquellos que además del syntax highlight también te agregan los respectivos espacios de tabulación.

XML:

• http://xmlindent.com/
• http://x01.co.uk/tools/online-xml-formatter

"Captura de pantalla de xmlindent.com, formateando un xml de ejemplo (click para agrandar)"

JSON:

• http://jsoneditor.appspot.com/
• http://jsoneditor.net/

"Captura de pantalla de jsoneditor.net, quien te forma la estructura jerárquica de tu mensaje JSON"

Múltiples lenguajes de programación:

• http://infohound.net/tidy/ (HTML)
• http://www.prettyprinter.de/ (PHP, Java, C++, C, Perl, Javascript, CSS)
• http://www.dpriver.com/pp/sqlformat.htm (SQL, PL/SQL)
• http://jsbeautifier.org/ (Javascript)
• http://tools.arantius.com/tabifier (html/css)

Cabe resaltar algunas características especiales que poseen algunas de estas herramientas como por ejemplo jsbeautifier además de formatear el código, también te lo desempaqueta cuando este ha sido generado mediante la herramienta packer, o la herramienta sqlformat que te genera un output de SQL no solamente formateado y con sintaxis coloreada sino que también te puede generar un output de SQL que generalmente colocamos en una variable String dentro de nuestro lenguaje de programación, así como lo ilustra la siguiente imagen:

"Sqlformat, indentando correctamente un procedimiento almacenado generando un output a manera de StringBuffer para ser utilizado en una clase Java (Click para agrandar)"

Algún otro que ustedes utilicen para formatear su código fuente en línea?

Herramientas Online de Formato e Indentación de Código

Mas de alguna vez nos ha tocado revisar algún mensaje XML o JSON fuera de la oficina, donde no tenemos nuestras herramientas de desarrollo que tan agradablemente se encargan de formatear e indentar nuestros archivos para que podamos leerlos, analizarlos y encontrar posibles fallas en ellos. En estas ocasiones nos ha tocado manualmente estar partiendo el archivo en diferentes líneas y agregando sangrías para darle el formato adecuado y se nos vuelva más fácil su análisis

Si de casualidad nos encontramos en estas circunstancias pero tienen la bondad de contar con una conexión a Internet, pueden aprovechar algunas herramientas online que se encargan de formatear, colorear e indentar nuestros archivos de código fuente.

Hay muchos otros que no he listado acá por el hecho de que solamente colorean el código y considero mas útiles aquellos que además del syntax highlight también te agregan los respectivos espacios de tabulación.

XML:

• http://xmlindent.com/
• http://x01.co.uk/tools/online-xml-formatter

"Captura de pantalla de xmlindent.com, formateando un xml de ejemplo (click para agrandar)"

JSON:

• http://jsoneditor.appspot.com/
• http://jsoneditor.net/

"Captura de pantalla de jsoneditor.net, quien te forma la estructura jerárquica de tu mensaje JSON"

Múltiples lenguajes de programación:

• http://infohound.net/tidy/ (HTML)
• http://www.prettyprinter.de/ (PHP, Java, C++, C, Perl, Javascript, CSS)
• http://www.dpriver.com/pp/sqlformat.htm (SQL, PL/SQL)
• http://jsbeautifier.org/ (Javascript)
• http://tools.arantius.com/tabifier (html/css)

Cabe resaltar algunas características especiales que poseen algunas de estas herramientas como por ejemplo jsbeautifier además de formatear el código, también te lo desempaqueta cuando este ha sido generado mediante la herramienta packer, o la herramienta sqlformat que te genera un output de SQL no solamente formateado y con sintaxis coloreada sino que también te puede generar un output de SQL que generalmente colocamos en una variable String dentro de nuestro lenguaje de programación, así como lo ilustra la siguiente imagen:

"Sqlformat, indentando correctamente un procedimiento almacenado generando un output a manera de StringBuffer para ser utilizado en una clase Java (Click para agrandar)"

Algún otro que ustedes utilicen para formatear su código fuente en línea?

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.

Porque no hay (y no habrá) Flash para el iPhone?

"Este es el mensaje que te aparece al navegar al sitio get.adobe.com/flashplayer informándote que no existe una plugin disponible para tu dispositivo"

Leyendo el articulo de GadgetLab me he dado cuenta de muchas razones sólidas por las cuales Apple no permite que se puedan ejecutar aplicaciones Flash en su navegador Safari para el iPhone ni mucho menos como aplicaciones nativas del iPhone/iPod Touch. En si, estas razones se pueden resumir de la siguiente manera:

• Pérdida de la exclusividad, calidad en el diseño y usabilidad de las aplicaciones
• No mas necesidad de una App Store centralizada y amarrada a iTunes
• No mas restricciones ni espera por aprobacion de aplicaciones
• Baja significativa en el rendimiento y duracion de la bateria
• Posibles vulnerabilidades del player de Adobe que pudieran servir para hackear el aparato.

Esto demuestra que la falta de Flash no fue nada mas algo que Apple pasó por alto sino que fue una decisión premeditada. Ellos diseñaron el browser del aparato para que no fuera capaz de ejecutar este plugin y sus razones son sólidas. Esto y las últimas declaraciones de Steve Jobs nos indican que no debemos esperar que Apple esté trabajando en un próximo lanzamiento de Flash para el iPhone.

Adobe Flash es actualmente utilizado en tres areas principales del web: reproductores de video, juegos online y sitios web con interfaces ricas. Estas caracteristicas se estan volviendo cada vez menos necesarias con el avance de otras tecnologias alternas que se estan volvieno un estandar en la web, por lo cual la necesidad de Flash decrece con el tiempo. Veamos algunos ejemplos:

Reproductores de Video: Con la llegada de HTML5 y sus implementaciones nativas de tags como [canvas] y [video], pueda que en un futuro ya no sea necesario utilizar Flash para realizar streamings de multimedia o para juegos online. Tanto la gente de Youtube como los de Vimeo han lanzado ya sus versiones de video players usando tags [video] para browsers que ya poseen soporte para este nuevo standard del HTML.

Asumo que Apple optará en un futuro cercano por agregar soporte completo a las features de HTML5 en el mobile Safari mientras que los sitios que actualmente poseen aplicaciones Flash, las portarán a este nuevo standard, dejándolo de lado.

"Código fuente de un vídeo de Youtube mostrando el tag [video]"

Juegos online: Aceptémoslo. El iPhone y el iPod Touch se estan convirtiendo en una plataforma de juegos capaz de competir con el PSP y el Nintendo DSi, quiza no tanto en calidad y complejidad pero sí en popularidad. De hecho, al momento de escribir este post, leo un artículo que indica que el iPhone se esta volviendo mas popular entre los desarrolladores de videojuegos por encima del Sony PSP y el Nintendo DSi. Es un fenómeno similar al que ocurrió entre el Nintendo Wii y el Sony PS3 en el cual, aunque el segundo tuviera mucho mejor hardware, el primero se volvió mas popular gracias a su simplicidad.

"NFS Undercover para iPhone. Uno de los juegos que mejor demuestra la capacidad que tiene este dispositivo como consola de videojuegos"

Sitios web con interfaces ricas: Antes Flash era la única alternativa para crear sitios web vistosos, con controles ricos y animaciones presentando una agradable experiencia de usuario con un framework bastante fácil de usar para los desarrolladores y diseñadores, permitiendo integrar la capacidad de Flash para crear animaciones basadas en fotogramas y lineas de tiempo, la galeria de controles ricos y el lenguaje de programación ActionScript. Hoy en día hoteles, restaurantes, sitios que promueven peliculas de cine y artistas musicales aun siguen usando Flash para darle vistosidad a sus sitios pero cada vez son mas los que prefieren optar por realizar estos mismos efectos usando nada mas que frameworks Javascript y todas las facilidades que ofrecen los web browsers modernos permitiendo una mejor integración de sus interfaces con servicios del lado del servidor y gastando mucho menos recursos en el cliente, ya que los sitios Flash tienen la caracteristica de consumir gran cantidad de ancho de banda y memoria además de no estar apegado a los estandares del W3C.

Hoy en día vemos que es mucho más conveniente hacer uso de librerías Javascript como Scriptaculous, jQuery o Dojo para interfaces ricas y animadas en lugar de Flash y aun más sabiendo lo que podremos hacer en un futuro cuando HTML5 sea un estandar popular en el web.

Debido a esto, la necesidad de un usuario por tener Flash en su navegador va desapareciendo segun va avanzando el desarrollo de las tecnologías alternas como HTML5 y las iPhone Apps, que como vimos, pueden reemplazar a Flash para las tareas en las cuales usualmente hacíamos uso de este. Por ello concluimos que esta es la razón por la cual los de Apple han decidido no incluir un plugin Flash en su navegador Safari y en su lugar, esperará que su App Store siga creciendo, ofreciendo una gran variedad de videojuegos a sus usuarios, así como también esperan que los desarrolladores se decidan de una vez por todas a reemplazar a Flash por animaciones e interfaces hechas con frameworks Javascript para así desaparecer casi por completo la necesidad de Flash.

iphone flash ipod html javascript

Porque no hay (y no habrá) Flash para el iPhone?

"Este es el mensaje que te aparece al navegar al sitio get.adobe.com/flashplayer informándote que no existe una plugin disponible para tu dispositivo"

Leyendo el articulo de GadgetLab me he dado cuenta de muchas razones sólidas por las cuales Apple no permite que se puedan ejecutar aplicaciones Flash en su navegador Safari para el iPhone ni mucho menos como aplicaciones nativas del iPhone/iPod Touch. En si, estas razones se pueden resumir de la siguiente manera:

• Pérdida de la exclusividad, calidad en el diseño y usabilidad de las aplicaciones
• No mas necesidad de una App Store centralizada y amarrada a iTunes
• No mas restricciones ni espera por aprobacion de aplicaciones
• Baja significativa en el rendimiento y duracion de la bateria
• Posibles vulnerabilidades del player de Adobe que pudieran servir para hackear el aparato.

Esto demuestra que la falta de Flash no fue nada mas algo que Apple pasó por alto sino que fue una decisión premeditada. Ellos diseñaron el browser del aparato para que no fuera capaz de ejecutar este plugin y sus razones son sólidas. Esto y las últimas declaraciones de Steve Jobs nos indican que no debemos esperar que Apple esté trabajando en un próximo lanzamiento de Flash para el iPhone.

Adobe Flash es actualmente utilizado en tres areas principales del web: reproductores de video, juegos online y sitios web con interfaces ricas. Estas caracteristicas se estan volviendo cada vez menos necesarias con el avance de otras tecnologias alternas que se estan volvieno un estandar en la web, por lo cual la necesidad de Flash decrece con el tiempo. Veamos algunos ejemplos:

Reproductores de Video: Con la llegada de HTML5 y sus implementaciones nativas de tags como [canvas] y [video], pueda que en un futuro ya no sea necesario utilizar Flash para realizar streamings de multimedia o para juegos online. Tanto la gente de Youtube como los de Vimeo han lanzado ya sus versiones de video players usando tags [video] para browsers que ya poseen soporte para este nuevo standard del HTML.

Asumo que Apple optará en un futuro cercano por agregar soporte completo a las features de HTML5 en el mobile Safari mientras que los sitios que actualmente poseen aplicaciones Flash, las portarán a este nuevo standard, dejándolo de lado.

"Código fuente de un vídeo de Youtube mostrando el tag [video]"

Juegos online: Aceptémoslo. El iPhone y el iPod Touch se estan convirtiendo en una plataforma de juegos capaz de competir con el PSP y el Nintendo DSi, quiza no tanto en calidad y complejidad pero sí en popularidad. De hecho, al momento de escribir este post, leo un artículo que indica que el iPhone se esta volviendo mas popular entre los desarrolladores de videojuegos por encima del Sony PSP y el Nintendo DSi. Es un fenómeno similar al que ocurrió entre el Nintendo Wii y el Sony PS3 en el cual, aunque el segundo tuviera mucho mejor hardware, el primero se volvió mas popular gracias a su simplicidad.

"NFS Undercover para iPhone. Uno de los juegos que mejor demuestra la capacidad que tiene este dispositivo como consola de videojuegos"

Sitios web con interfaces ricas: Antes Flash era la única alternativa para crear sitios web vistosos, con controles ricos y animaciones presentando una agradable experiencia de usuario con un framework bastante fácil de usar para los desarrolladores y diseñadores, permitiendo integrar la capacidad de Flash para crear animaciones basadas en fotogramas y lineas de tiempo, la galeria de controles ricos y el lenguaje de programación ActionScript. Hoy en día hoteles, restaurantes, sitios que promueven peliculas de cine y artistas musicales aun siguen usando Flash para darle vistosidad a sus sitios pero cada vez son mas los que prefieren optar por realizar estos mismos efectos usando nada mas que frameworks Javascript y todas las facilidades que ofrecen los web browsers modernos permitiendo una mejor integración de sus interfaces con servicios del lado del servidor y gastando mucho menos recursos en el cliente, ya que los sitios Flash tienen la caracteristica de consumir gran cantidad de ancho de banda y memoria además de no estar apegado a los estandares del W3C.

Hoy en día vemos que es mucho más conveniente hacer uso de librerías Javascript como Scriptaculous, jQuery o Dojo para interfaces ricas y animadas en lugar de Flash y aun más sabiendo lo que podremos hacer en un futuro cuando HTML5 sea un estandar popular en el web.

Debido a esto, la necesidad de un usuario por tener Flash en su navegador va desapareciendo segun va avanzando el desarrollo de las tecnologías alternas como HTML5 y las iPhone Apps, que como vimos, pueden reemplazar a Flash para las tareas en las cuales usualmente hacíamos uso de este. Por ello concluimos que esta es la razón por la cual los de Apple han decidido no incluir un plugin Flash en su navegador Safari y en su lugar, esperará que su App Store siga creciendo, ofreciendo una gran variedad de videojuegos a sus usuarios, así como también esperan que los desarrolladores se decidan de una vez por todas a reemplazar a Flash por animaciones e interfaces hechas con frameworks Javascript para así desaparecer casi por completo la necesidad de Flash.

iphone flash ipod html javascript

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.

Zen Coding: Una Forma Rápida de Escribir Código HTML

"Libérate del Stress de escribir páginas HTML a mano"

Todo desarrollador web alguna vez tuvo que ensuciarse las manos escribiendo código HTML y se habrá dado cuenta de lo inmenso y engorroso que este puede volverse y de la poca eficiencia de los IDEs con capacidades WYSIWYG existentes. Aún teniendo frameworks como GWT que nos generan automáticamente todo el HTML y Javascript de nuestro sitio, en muchas ocasiones estos no resuelven nuestras necesidades específicas o "no forman parte del estándar de soluciones viables en nuestra empresa".

Afortunadamente para mi, leyendo este post de Smashing Magazine me doy cuenta de la reciente existencia de Zen Coding, un framework que te permite escribir código HTML de una manera bastante rápida y sencilla usando selectores similares a los ya usados en otros frameworks como prototype y jquery quienes los usan para hacer búsquedas de elementos HTML pero en este caso, el framework de Zen Coding los utiliza para generar nuestro código HTML reduciendo a su mínima expresion la cantidad de código a escribir para generarlo.

Una vez que te familiarizas con los selectores utilizados, notarás la diferencia de tiempo al momento de crear y editar el código HTML. A continuación un ejemplo de un selector de Zen Coding:

 html:xt>div#header>h1#logo+ul#nav>li.item-$*5>a

y el código HTML que este genera:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<body>
<div id="header">
  <h1 id="logo"></h1>
  <ul id="nav">
    <li class="item-1"><a href=""></a></li>
    <li class="item-2"><a href=""></a></li>
    <li class="item-3"><a href=""></a></li>
    <li class="item-4"><a href=""></a></li>
    <li class="item-5"><a href=""></a></li>
  </ul>
</div>
</body>
</html>

Este framework puede ser incrustado en diferentes IDEs por medio de plugins como por ejemplo Netbeans, Eclipse (y sus derivados), Textmate (mac), WebIDE, Aptana Studio, entre otros. Todos ellos se pueden descargar desde la página oficial de Zen Coding en Google Code.

En ese link puedes probar un demo versión web, por si no deseas descargar ninguna de sus versiones asociadas a estos IDEs de desarrollo.

"Video demostrativo del funcionamiento del framework Zen Coding"

html, programacion, zen, aptana, wysiwyg

Zen Coding: Una Forma Rápida de Escribir Código HTML

"Libérate del Stress de escribir páginas HTML a mano"

Todo desarrollador web alguna vez tuvo que ensuciarse las manos escribiendo código HTML y se habrá dado cuenta de lo inmenso y engorroso que este puede volverse y de la poca eficiencia de los IDEs con capacidades WYSIWYG existentes. Aún teniendo frameworks como GWT que nos generan automáticamente todo el HTML y Javascript de nuestro sitio, en muchas ocasiones estos no resuelven nuestras necesidades específicas o "no forman parte del estándar de soluciones viables en nuestra empresa".

Afortunadamente para mi, leyendo este post de Smashing Magazine me doy cuenta de la reciente existencia de Zen Coding, un framework que te permite escribir código HTML de una manera bastante rápida y sencilla usando selectores similares a los ya usados en otros frameworks como prototype y jquery quienes los usan para hacer búsquedas de elementos HTML pero en este caso, el framework de Zen Coding los utiliza para generar nuestro código HTML reduciendo a su mínima expresion la cantidad de código a escribir para generarlo.

Una vez que te familiarizas con los selectores utilizados, notarás la diferencia de tiempo al momento de crear y editar el código HTML. A continuación un ejemplo de un selector de Zen Coding:

 html:xt>div#header>h1#logo+ul#nav>li.item-$*5>a

y el código HTML que este genera:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<body>
<div id="header">
  <h1 id="logo"></h1>
  <ul id="nav">
    <li class="item-1"><a href=""></a></li>
    <li class="item-2"><a href=""></a></li>
    <li class="item-3"><a href=""></a></li>
    <li class="item-4"><a href=""></a></li>
    <li class="item-5"><a href=""></a></li>
  </ul>
</div>
</body>
</html>

Este framework puede ser incrustado en diferentes IDEs por medio de plugins como por ejemplo Netbeans, Eclipse (y sus derivados), Textmate (mac), WebIDE, Aptana Studio, entre otros. Todos ellos se pueden descargar desde la página oficial de Zen Coding en Google Code.

En ese link puedes probar un demo versión web, por si no deseas descargar ninguna de sus versiones asociadas a estos IDEs de desarrollo.

"Video demostrativo del funcionamiento del framework Zen Coding"

html, programacion, zen, aptana, wysiwyg