La Curacao: Innova tu forma de comprar

El pasado martes 8 de noviembre de 2011, se realizó el lanzamiento oficial del nuevo sitio web de la cadena de almacenes La Curacao.

El sitio web presenta al usuario un nuevo diseño no solamente a nivel visual, sino en la mecánica para realizar las compras a través de internet. Otro aspecto muy interesante es que el sitio web se integra con las redes sociales con mayor número de usuarios en la actualidad: Twitter y Facebook. Además, La Curacao proporciona contenido multimedia a través de su canal oficial en YouTube. Un ejemplo más de la importancia que las redes sociales han adquirido en las estrategias de marketing utilizadas por las empresas.

A continuación un vídeo con imágenes del evento de lanzamiento:

Imágenes del evento de lanzamiento, cortesía de La Prensa Gráfica.

Para finalizar, les invito a que visiten el nuevo sitio web de La Curacao a través del siguiente enlace: http://www.lacuracaonline.com/

Cambios en Google Chrome 15

En Google Chrome Blog, publica una entrada en la que menciona que en la última versión estable de Chrome (versión 15 ), se ha rediseñado por completo la página de "nueva pestaña". Este diseño esta orientado al acceso sencillo de las "chrome apps". Este es el video de las nuevas características:


Los cambios son interesantes, y hasta "naturales", las aplicaciones y extensiones se presentan en un "muro de imágenes" que se actualiza cada vez que el usuario visita la Chrome Web Store, lo que permite que el usuario encuentre aplicaciones interesantes para probar con solo un vistazo general. Además, las aplicaciones y las extensiones son más fáciles de instalar, bastan con poner el cursor sobre una imagen y luego hacer clic en "Añadir a Google Chrome."

"Nuevo look del Chrome Web Store"

Creo que son cambios sencillos pero acertados, en los que Google mejora la experiencia del usuario, y borra la linea entre la "instalación" y el uso de las web apps.
¿Qué les parecen los cambios? esperamos sus comentarios, saludos.

fuente: http://chrome.blogspot.com/

Sitio de ARENA atacado (#OPJusticiaSV)

Hace unos minutos, el sitio web del partido político "ARENA", fue atacado por un grupo que se identifica con los ideales de Anonymous. El ataque se realizo con una redirección al sitio web anonarg.com.ar y con ingreso de contenido por parte de los atacantes al CMS de ARENA.

anonarg.com.ar

 El fin del ataque es el de difundir un video en el que se insta a las autoridades a poner un alto a la escalada de violencia y corrupción, y además prometen acciones para el próximo 5 de noviembre, fecha en que se conmemora el Primer Grito de Independencia y también conmemora el Guy Fawkes Night.

Clic para ver más grande

Les dejo el video con el mensaje en cuestión:



Si les interesa la noticia, y como se va desarrollando estén pendientes del hashtag #OPJusticiaSV en twitter. En lo personal, no apoyo ese tipo de mensajes para llamar la atención, y el momento en el que liberan el mensaje tampoco es el más adecuando (es más importante atender primero la emergencia nacional y ayudar a los hermanos Salvadoreños en necesidad), sin embargo no deja de parecerme curiosa la iniciativa y creo que muchos otros tampoco la apoyan, pero igual quieren "ver que pasa".

¿Creen que este tipo de iniciativas pueden funcionar?
 Esperamos sus comentarios. ¡Saludos!

Otras fuentes: laprensagrafica y hunna.

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.

"La evolución de la red"

"La evolución de la red" (The Evolution of the Web) es una webapp que muestra una linea de tiempo para ocho navegadores, con versiones, introducción de características y tecnologías web (como Flash, AJAX, etc). Por cierto, las bandas de color de fondo representan la interacción entre las tecnologías web y navegadores.

"The Evolution of the Web"

No me atrevo a escribir más, ya la funcionalidad de la aplicación habla por si sola, así que los invito a utilizarla:

http://evolutionofweb.appspot.com/

Como recurso educativo e histórico, esta aplicación la tienen que tener a la mano, ojalá que le den seguimiento.
¡Saludos!

WebConf Latino 2011 - Honduras y Panamá

Honduras y Panamá serán los anfitriones del WebConf Latino para la edición correspondiente al año 2011. Los organizadores describen al WebConf  como "una conferencia internacional enfocada en dar a conocer y promover las nuevas tecnologías de Web en los negocios". 

Si eres un entusiasta de tecnologías y programación para la Web seguramente este es el evento indicado para tí. No obstante en eventos anteriores también han asistido:

"gerentes de mercadeo, relaciones públicas y recursos humanos, interesados en aplicar los conocimientos adquiridos en sus empresas"

... lo cual demuestra que el único requisito para asistir es motivación e interés para aprender sobre la Web.

El primero de los dos eventos se realizará el 28 de abril de 2011 en el Hotel Intercontinental Miramar localizado en Panamá. Puedes encontrar información detallada del evento en el siguiente enlace. Para finalizar comparto con ustedes un reportaje del WebConf Latino realizado en Tegucigalpa, Honduras en el año 2009.

Let's Crate, comparte archivos fácil y rápido.

"Let's Crate" es sitio web que se denomina como el servicio "ridículamente fácil para compartir archivos". Y vaya que tienen razón. Usando características que brinda HTML5, Let's Crate permite a los usuarios hacer "drag and drop" de uno o varios archivos que quieran compartir:

Drag and Drop de archivos

Una vez almacenados estos archivos en la nube, podremos compartir el "crate" o la caja en donde se almacenaron los archivos:

URL de archivos listo para compartirlo

Let's Crate se puede usar de forma anónima, con algunas limitantes, una de las cuales es la de tiempo de expiración de 30 minutos, por crate creado. Let's Crate permite crear cuentas gratuitas en donde se pueden mantener hasta 6 crates creadas, y un espacio total de 200 MB de almacenamiento y también pueden comprar la versión "Pro", que les permite crear crates infinitos, sin limite de tamaño para archivos individuales y tener un espacio total de 10 GB.

La interfaz y facilidad de uso de Let's Crate, hacen que el servicio se vuelva parte de los servicios y aplicaciones web que todo geek debe tener como "As bajo la manga":

http://www.letscrate.com/

Espero les sirva, ¡saludos!

Aplicaciones web de 10K

"10K Apart Challenge" es un concurso con una premisa sencilla: ¿Se puede construir una aplicación web completa en tan solo 10 Kilobytes? ¡Claro que si!

Mini aplicaciones Web

Quizás una de las cosas que mas impactan al revisar las entradas participantes, es como muchas de ellas no se ven como sitios web. Usando tecnologías web "recientes" (para IE al menos) como Canvas, SVG, CSS3 y muuuuucho JavaScript, los concursantes fueron capaces de crear aplicaciones web que bien pueden pasar por aplicaciones nativas, flash o de iPhone.

La creatividad y la energía demostrada en este concurso, recuerda al DemoScene, cuando habilidosos programadores competían para hacer los mejores "demos" para Amiga y Commodore 64. Solo que en este caso, en vez de apuntar a una sola plataforma, estas pequeñas obras de arte web, se ejecutan en cualquier SO y navegador (decente). Algunas de las entradas mas relevantes son:

Sinuous

Sinious fue el gran ganador, un pequeño juego casual y entretenido.

Graph10k

Gráfica ecuaciones de ejemplo o digita las tuyas.

Racer 10K

¿No te recuerda V.R. o Mario Kart (SNES)?

The Smallest 3D Maker

No será la competencia de Blender, pero esta pequeña aplicación te permite dibujar curvas de Bézier y convertirlas a objetos 3D que podes "explorar".

Como ven, son cosas "sencillas", pero con gran potencial y ejecutandoce en 10 miserables Kilobytes. Bien dicen que la necesidad hace al artista. El concurso "10K Apart" esta para quedarse, visitenlo y a ver quien se anima para participar en la proxima:

http://10k.aneventapart.com

Aplicaciones web de 10K

"10K Apart Challenge" es un concurso con una premisa sencilla: ¿Se puede construir una aplicación web completa en tan solo 10 Kilobytes? ¡Claro que si!

Mini aplicaciones Web

Quizás una de las cosas que mas impactan al revisar las entradas participantes, es como muchas de ellas no se ven como sitios web. Usando tecnologías web "recientes" (para IE al menos) como Canvas, SVG, CSS3 y muuuuucho JavaScript, los concursantes fueron capaces de crear aplicaciones web que bien pueden pasar por aplicaciones nativas, flash o de iPhone.

La creatividad y la energía demostrada en este concurso, recuerda al DemoScene, cuando habilidosos programadores competían para hacer los mejores "demos" para Amiga y Commodore 64. Solo que en este caso, en vez de apuntar a una sola plataforma, estas pequeñas obras de arte web, se ejecutan en cualquier SO y navegador (decente). Algunas de las entradas mas relevantes son:

Sinuous

Sinious fue el gran ganador, un pequeño juego casual y entretenido.

Graph10k

Gráfica ecuaciones de ejemplo o digita las tuyas.

Racer 10K

¿No te recuerda V.R. o Mario Kart (SNES)?

The Smallest 3D Maker

No será la competencia de Blender, pero esta pequeña aplicación te permite dibujar curvas de Bézier y convertirlas a objetos 3D que podes "explorar".

Como ven, son cosas "sencillas", pero con gran potencial y ejecutandoce en 10 miserables Kilobytes. Bien dicen que la necesidad hace al artista. El concurso "10K Apart" esta para quedarse, visitenlo y a ver quien se anima para participar en la proxima:

http://10k.aneventapart.com

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.

Seguridad vs. Usabilidad

"La imagen de la discordia, origen y razón de ser de este post"

Recientemente por casualidades del destino me ví en la necesidad de ingresar al sitio en línea del banco agrícola. Tenía meses de no entrar a dicho sitio y al ingresar en esta ocasión me doy cuenta de un cambio significativo que han aplicado en la forma como escribes tu usuario, clave y token para ingresar al sistema. Resulta que ahora ya no puedes digitar de forma directa estos datos sino que debes hacer uso de un teclado virtual que te aparece en pantalla. Tal como se aprecia en la imagen inicial de este post.

Quizá la característica más particular que he encontrado junto con otros usuarios que pasaron por la misma experiencia de tratar de hacer login en dicha página, ha sido la que las teclas no se encuentran en un orden aparente sino mas bien ordenadas aleatoriamente. De hecho, por cada vez que refrescas la página (ej. en un intento fallido), dichas teclas vuelven a cambiar de posición y nuevamente de manera aleatoria.

"A ver... hoy donde quedó la A? y la L? la Ñ? OMG!"

Es cierto que hoy en día las instituciones bancarias sufren ataques de todo tipo en sus sitios web, el phishing y el cross site scripting por ejemplo, con el cual cualquier otro intenta vulnerar los sistemas web para tener acceso a las cuentas de sus clientes y sus datos privados están en juego. Es cierto que es deber de cada empresa en general proteger los datos de sus usuarios especialmente en el mayor punto débil de todos los sistemas seguros: sus pantallas de ingreso.

Todo esto es necesario para asegurarnos que los sitios a los que ingresamos se encuentren seguros de cualquier ataque pero no por ello se debe dejar de lado la usabilidad del sitio y la experiencia del usuario. Es posible mantener un balance entre seguridad y usabilidad?

La respuesta es SI.

Asumiendo que la inclusión de este terrible teclado virtual con teclas aleatorias que les mencionaba al principio se incluyó para prevenir que se intente ingresar por medio de un programa y no mediante la interacción con un usuario, existen alternativas mucho más usables para lograr este fin. Menciono las dos más comunes y útiles:

CAPTCHA

Captcha es un sistema ideado con la intención de diferenciar si la interacción con un sitio web la está realizando un humano o un programa de computadora. Para ello, muestran una imagen la cual contiene una palabra con el texto un tanto distorsionado o difuso, de manera que solamente un humano pueda leer e interpretar el texto, para luego escribirlo en un campo al final del formulario. No es 100% infalible ya que hoy en día existen programas para la interpretación de texto difuso pero sí es bastante confiable, ya que tanto Google, Facebook y otros sitios importantes hacen uso del mismo. Uno de los CAPTCHAs más populares es reCAPTCHA de Google, el cual es usado en la mayoría de formularios de login de Google cuando deseas crear una cuenta o cuando te has equivocado más de tres veces en tu login:

"Ejemplo de un cuadro de reCAPTCHA. Consiste en escribir el texto difuso en la caja de texto. En caso de no distinguirlo, click en el botón con forma de bocina para escuchar su pronunciación"

En este link puedes obtener plugins para blogs y el código fuente para hacer uso de reCAPTCHA en tu sitio.

Slide to Unlock

Este es un muy ingenioso sistema de ingreso que originalmente viene en los iPhone/iPod Touch, el cual se puede usar también en los sitios web para asegurarse que es un humano quien hace clic sobre el botón y lo desliza de izquierda a derecha. Esta interacción sería muy difícil (mas no imposible) de llevarse a cabo mediante un programa que intentara llenar automáticamente un formulario de login por lo que se podría considerar efectivo y fácil de usar.

"Ejemplo del mecanismo de submit 'Slide to Submit' similar al 'Slide to Unlock' del iPhone/iPod Touch"

En este link puedes encontrar el código fuente para incluir un botón de tipo "Slide to submit" mediante código Javascript.

Para mi punto de vista, usando alguna de las técnicas aquí presentadas, sumándole el uso de conexiones seguras por HTTPS, tokens, certificados digitales y mecanismos de prevención del XSS, un sitio podría considerarse lo suficientemente seguro como para no tener la necesidad de molestar más al usuario con pasos extra o peticiones para llevar a cabo su ingreso al sitio en cuestión.

Alguna otra técnica o sugerencia para crear sitios web tanto seguros como usables?

Bonus: Talvez estos 91 ejemplos de cajas de login te puedan inspirar para crear una página completamente usable y agradable a la vista de tus usuarios.

Bonus No. 2: Me entero en twitter que @hkadejo desarrolló un muy útil bookmarklet para desactivar las cajas de texto y poder escribir de forma manual el usuario y clave en la página del Banco Agrícola. Pueden encontrarlo en este link.

Seguridad vs. Usabilidad

"La imagen de la discordia, origen y razón de ser de este post"

Recientemente por casualidades del destino me ví en la necesidad de ingresar al sitio en línea del banco agrícola. Tenía meses de no entrar a dicho sitio y al ingresar en esta ocasión me doy cuenta de un cambio significativo que han aplicado en la forma como escribes tu usuario, clave y token para ingresar al sistema. Resulta que ahora ya no puedes digitar de forma directa estos datos sino que debes hacer uso de un teclado virtual que te aparece en pantalla. Tal como se aprecia en la imagen inicial de este post.

Quizá la característica más particular que he encontrado junto con otros usuarios que pasaron por la misma experiencia de tratar de hacer login en dicha página, ha sido la que las teclas no se encuentran en un orden aparente sino mas bien ordenadas aleatoriamente. De hecho, por cada vez que refrescas la página (ej. en un intento fallido), dichas teclas vuelven a cambiar de posición y nuevamente de manera aleatoria.

"A ver... hoy donde quedó la A? y la L? la Ñ? OMG!"

Es cierto que hoy en día las instituciones bancarias sufren ataques de todo tipo en sus sitios web, el phishing y el cross site scripting por ejemplo, con el cual cualquier otro intenta vulnerar los sistemas web para tener acceso a las cuentas de sus clientes y sus datos privados están en juego. Es cierto que es deber de cada empresa en general proteger los datos de sus usuarios especialmente en el mayor punto débil de todos los sistemas seguros: sus pantallas de ingreso.

Todo esto es necesario para asegurarnos que los sitios a los que ingresamos se encuentren seguros de cualquier ataque pero no por ello se debe dejar de lado la usabilidad del sitio y la experiencia del usuario. Es posible mantener un balance entre seguridad y usabilidad?

La respuesta es SI.

Asumiendo que la inclusión de este terrible teclado virtual con teclas aleatorias que les mencionaba al principio se incluyó para prevenir que se intente ingresar por medio de un programa y no mediante la interacción con un usuario, existen alternativas mucho más usables para lograr este fin. Menciono las dos más comunes y útiles:

CAPTCHA

Captcha es un sistema ideado con la intención de diferenciar si la interacción con un sitio web la está realizando un humano o un programa de computadora. Para ello, muestran una imagen la cual contiene una palabra con el texto un tanto distorsionado o difuso, de manera que solamente un humano pueda leer e interpretar el texto, para luego escribirlo en un campo al final del formulario. No es 100% infalible ya que hoy en día existen programas para la interpretación de texto difuso pero sí es bastante confiable, ya que tanto Google, Facebook y otros sitios importantes hacen uso del mismo. Uno de los CAPTCHAs más populares es reCAPTCHA de Google, el cual es usado en la mayoría de formularios de login de Google cuando deseas crear una cuenta o cuando te has equivocado más de tres veces en tu login:

"Ejemplo de un cuadro de reCAPTCHA. Consiste en escribir el texto difuso en la caja de texto. En caso de no distinguirlo, click en el botón con forma de bocina para escuchar su pronunciación"

En este link puedes obtener plugins para blogs y el código fuente para hacer uso de reCAPTCHA en tu sitio.

Slide to Unlock

Este es un muy ingenioso sistema de ingreso que originalmente viene en los iPhone/iPod Touch, el cual se puede usar también en los sitios web para asegurarse que es un humano quien hace clic sobre el botón y lo desliza de izquierda a derecha. Esta interacción sería muy difícil (mas no imposible) de llevarse a cabo mediante un programa que intentara llenar automáticamente un formulario de login por lo que se podría considerar efectivo y fácil de usar.

"Ejemplo del mecanismo de submit 'Slide to Submit' similar al 'Slide to Unlock' del iPhone/iPod Touch"

En este link puedes encontrar el código fuente para incluir un botón de tipo "Slide to submit" mediante código Javascript.

Para mi punto de vista, usando alguna de las técnicas aquí presentadas, sumándole el uso de conexiones seguras por HTTPS, tokens, certificados digitales y mecanismos de prevención del XSS, un sitio podría considerarse lo suficientemente seguro como para no tener la necesidad de molestar más al usuario con pasos extra o peticiones para llevar a cabo su ingreso al sitio en cuestión.

Alguna otra técnica o sugerencia para crear sitios web tanto seguros como usables?

Bonus: Talvez estos 91 ejemplos de cajas de login te puedan inspirar para crear una página completamente usable y agradable a la vista de tus usuarios.

Bonus No. 2: Me entero en twitter que @hkadejo desarrolló un muy útil bookmarklet para desactivar las cajas de texto y poder escribir de forma manual el usuario y clave en la página del Banco Agrícola. Pueden encontrarlo en este link.

Adaptando tu Sitio Para Móviles - Parte 2

Esta es la segunda parte del post anterior de Adaptando tu Sitio Para Moviles - Parte 1, en el cual hablaba de los servicios que tea automatizan este proceso. Ahora explicaremos algunas librerías utiles para crear nuestros sitios móviles por nuestra cuenta.

Para crear una versión de tu sitio orientada a un dispositivo móvil debes considerar ciertas características de la navegación en móviles:

Ancho de banda: Entre estas, el hecho de que estos dispositivos se conectan por WiFi o 3g y el ancho de banda disponible puede ser mucho menor al de una computadora personal, por lo cual tendrás que evitar cargar las páginas con muchas imágenes y mucho contenido.

Contenido no soportado: Debes considerar también que no todos los dispositivos móviles soportan contenido rico como Flash (ehem, iPhones, iPods e iPads) así como tampoco no todos soportan Java, Silverlight, Active X o Adobe Air, entre otros. Hay muchos sitios basados en Flash que ni siquiera con la versión Lite, incluida en algunos móviles, pueden renderizar las animaciones de tu sitio. Especialmente porque, a diferencia de las imagenes y el contenido HTML habitual, las películas de Flash no se ajustan automáticamente al tamaño de la pantalla de tu dispositivo. Los que tienden a utilizar Flash para darle una gran vistosidad a su sitio como por ejemplo restaurantes, hoteles o páginas de artistas podrían considerar realizar estas mismas animaciones usando librerías Javascript como jQuery, Motools o Dojo y aun así no es recomendable colmar la página de tanto adorno y animación.

Procesamiento: El procesador de los dispositivos también te impedirá ejecutar mucho Javascript en tus páginas, es mejor dejar la mayor parte del procesamiento de información en el servidor web. Recuerda que en la actualidad los smartphones más avanzados poseen un procesador de no mas de 1Gz y la verdad es que en mi opinión, no necesitan mas de eso ya que tu smartphone no es una herramienta de trabajo que tendrá que realizar muchos cálculos en tu sitio. Su uso primordial es consumir/producir información, no procesarla.

Dimensiones de la pantalla: Las dimensiones de las pantallas en los dispositivos móviles, si bien hoy en día abarcan toda la superficie de los mismos, es mucho más reducida que la de un monitor de una PC(480x320px en un iPhone, 800x480 en un Nokia N900, 360x480 en un Blackberry Storm y 800x480 en un Google Nexus One). Esto te obligará a distribuir el contenido de tu sitio en un espacio más reducido quizá dividiéndolo en diferentes páginas o eliminándolo si no es tan necesario. En un blog, por ejemplo, ya no se deben incluir los típicos widgets contadores de visitas, shoutboxes, secciones de últimos comentarios, etc. Si se desea hacerlo, podria utilizarse una pagina aparte que sirva como "About".

Interacción con el usuario: Un usuario comunmente interactua con un Smartphone haciendo uso de sus dedos o un Stylus, haciendo "taps" en lugar de clics para abrir vínculos y haciendo "swipe" para mover las scrollbars y visualizar más contenido. Hay ciertos eventos que no se podrán producir desde un Smartphone, por ejemplo el drag&drop (basado en el evento mouseover), combinaciones de teclas con Ctrl-Shift-Alt, scrolling, etc. En esta tabla pueden encontrar una completa referencia sobre los eventos, tags HTML y atributos CSS soportados por la mayoria de navegadores web para móviles.

Librerías

En mi opinión personal, el dispositivo que más ha popularizado su sistema operativo, el cual además revolucionó las interfaces gráficas para dispositivos móviles es hasta la fecha el iPhone. Si deseas que tu aplicación web tenga la apariencia y animaciones similares a las de este dispositivo puedes hacer uso de la libreria jQTouch, la cual es en realidad un plugin para el popular framework de javascript jQuery que simula la apariencia y animaciones propias de las interfaces de un iPhone OS.

Acá puedes ver un demo de las caracteristicas de jQTouch (visualizarlo desde un smartphone) y a continuación puedes ver un vídeo de las features principales de dicha libreria:

"Features generales de jQTouch"

Segun comentan en su sitio, la YUI Library también funciona perfectamente en lo que ellos denominan browsers Grado A.

Otra buena libreria de javascript especializada en el desarrollo de sitios web para móviles es WebAppNet. Esta es otra libreria que simula la UI y animaciones del iPhone OS. Puedes ver un demo de sus features (desde un móvil preferiblemente) en este sitio. A continuación un preview de este demo, visualizado desde un iPod Touch:

"Aplicación Demo que muestra la apariencia y features de la libreria WebAppNet, visualizada desde un iPod Touch"

Por último los invito a leer el siguiente post recomendado para desarrolladores de sitios web para iPhone y otros móviles, con muchas otras ideas a tomar en cuenta a la hora de realizar nuestros sitios. En este otro sitio tambien pueden encontrar documentacion, patrones de diseño y guias para crear sitios para móviles. Además, no te olvides de comprobar la compatibilidad de tu sitio mediante este test del w3c especifíco para sitios web orientados a smartphones.

"Resultados de Mobile Safari en el Test de Compatibilidad de Browsers para Móviles, del w3c"

Si necesitas ofrecerle a tus usuarios algo mas que contenido y los navegadores para móviles no te lo permiten, siempre puedes optar por programar una aplicación específica para smartphones haciendo uso de los SDKs que provee cada productor de smartphones.

movil navegador javascript framework programacion web

Adaptando tu Sitio Para Móviles - Parte 2

Esta es la segunda parte del post anterior de Adaptando tu Sitio Para Moviles - Parte 1, en el cual hablaba de los servicios que tea automatizan este proceso. Ahora explicaremos algunas librerías utiles para crear nuestros sitios móviles por nuestra cuenta.

Para crear una versión de tu sitio orientada a un dispositivo móvil debes considerar ciertas características de la navegación en móviles:

Ancho de banda: Entre estas, el hecho de que estos dispositivos se conectan por WiFi o 3g y el ancho de banda disponible puede ser mucho menor al de una computadora personal, por lo cual tendrás que evitar cargar las páginas con muchas imágenes y mucho contenido.

Contenido no soportado: Debes considerar también que no todos los dispositivos móviles soportan contenido rico como Flash (ehem, iPhones, iPods e iPads) así como tampoco no todos soportan Java, Silverlight, Active X o Adobe Air, entre otros. Hay muchos sitios basados en Flash que ni siquiera con la versión Lite, incluida en algunos móviles, pueden renderizar las animaciones de tu sitio. Especialmente porque, a diferencia de las imagenes y el contenido HTML habitual, las películas de Flash no se ajustan automáticamente al tamaño de la pantalla de tu dispositivo. Los que tienden a utilizar Flash para darle una gran vistosidad a su sitio como por ejemplo restaurantes, hoteles o páginas de artistas podrían considerar realizar estas mismas animaciones usando librerías Javascript como jQuery, Motools o Dojo y aun así no es recomendable colmar la página de tanto adorno y animación.

Procesamiento: El procesador de los dispositivos también te impedirá ejecutar mucho Javascript en tus páginas, es mejor dejar la mayor parte del procesamiento de información en el servidor web. Recuerda que en la actualidad los smartphones más avanzados poseen un procesador de no mas de 1Gz y la verdad es que en mi opinión, no necesitan mas de eso ya que tu smartphone no es una herramienta de trabajo que tendrá que realizar muchos cálculos en tu sitio. Su uso primordial es consumir/producir información, no procesarla.

Dimensiones de la pantalla: Las dimensiones de las pantallas en los dispositivos móviles, si bien hoy en día abarcan toda la superficie de los mismos, es mucho más reducida que la de un monitor de una PC(480x320px en un iPhone, 800x480 en un Nokia N900, 360x480 en un Blackberry Storm y 800x480 en un Google Nexus One). Esto te obligará a distribuir el contenido de tu sitio en un espacio más reducido quizá dividiéndolo en diferentes páginas o eliminándolo si no es tan necesario. En un blog, por ejemplo, ya no se deben incluir los típicos widgets contadores de visitas, shoutboxes, secciones de últimos comentarios, etc. Si se desea hacerlo, podria utilizarse una pagina aparte que sirva como "About".

Interacción con el usuario: Un usuario comunmente interactua con un Smartphone haciendo uso de sus dedos o un Stylus, haciendo "taps" en lugar de clics para abrir vínculos y haciendo "swipe" para mover las scrollbars y visualizar más contenido. Hay ciertos eventos que no se podrán producir desde un Smartphone, por ejemplo el drag&drop (basado en el evento mouseover), combinaciones de teclas con Ctrl-Shift-Alt, scrolling, etc. En esta tabla pueden encontrar una completa referencia sobre los eventos, tags HTML y atributos CSS soportados por la mayoria de navegadores web para móviles.

Librerías

En mi opinión personal, el dispositivo que más ha popularizado su sistema operativo, el cual además revolucionó las interfaces gráficas para dispositivos móviles es hasta la fecha el iPhone. Si deseas que tu aplicación web tenga la apariencia y animaciones similares a las de este dispositivo puedes hacer uso de la libreria jQTouch, la cual es en realidad un plugin para el popular framework de javascript jQuery que simula la apariencia y animaciones propias de las interfaces de un iPhone OS.

Acá puedes ver un demo de las caracteristicas de jQTouch (visualizarlo desde un smartphone) y a continuación puedes ver un vídeo de las features principales de dicha libreria:

"Features generales de jQTouch"

Segun comentan en su sitio, la YUI Library también funciona perfectamente en lo que ellos denominan browsers Grado A.

Otra buena libreria de javascript especializada en el desarrollo de sitios web para móviles es WebAppNet. Esta es otra libreria que simula la UI y animaciones del iPhone OS. Puedes ver un demo de sus features (desde un móvil preferiblemente) en este sitio. A continuación un preview de este demo, visualizado desde un iPod Touch:

"Aplicación Demo que muestra la apariencia y features de la libreria WebAppNet, visualizada desde un iPod Touch"

Por último los invito a leer el siguiente post recomendado para desarrolladores de sitios web para iPhone y otros móviles, con muchas otras ideas a tomar en cuenta a la hora de realizar nuestros sitios. En este otro sitio tambien pueden encontrar documentacion, patrones de diseño y guias para crear sitios para móviles. Además, no te olvides de comprobar la compatibilidad de tu sitio mediante este test del w3c especifíco para sitios web orientados a smartphones.

"Resultados de Mobile Safari en el Test de Compatibilidad de Browsers para Móviles, del w3c"

Si necesitas ofrecerle a tus usuarios algo mas que contenido y los navegadores para móviles no te lo permiten, siempre puedes optar por programar una aplicación específica para smartphones haciendo uso de los SDKs que provee cada productor de smartphones.

movil navegador javascript framework programacion web

Adaptando tu Sitio Para Móviles - Parte 1

Para nadie es sorpresa que cada vez son más las personas que poseen un smartphone o un dispositivo (no necesariamente un celular) con capacidades de navegación por la World Wide Web como por ejemplo un iPhone o un iPod touch. Estos dispositivos son muy prácticos para cuando deseas revisar tu correo electrónico, los feeds de tus blogs o simplemente entretenerte navegando en el mar de páginas web que se pueden encontrar hoy en día y de casualidad te encuentras fuera de tu casa, en alguna cafetería o centro comercial donde encontraste una red WiFi disponible.

Sabiendo esto, las empresas y organizaciones deben tomar en cuenta que muchos de sus clientes / usuarios ahora tienen la alternativa de acceder desde un dispositivo móvil a los servicios web (o simplemente el contenido web) que estos ofrecen pero existe un inconveniente: Dichos sitios web fueron diseñados para ser vistos desde una computadora con una resolución como mínimo de 1024x768. Esto significa que cuando intentas ver uno de estos sitios en tu dispositivo móvil, puede lucir como en la siguiente imagen:

"Google Code - Uno de los sitios de Google que a diferencia de GMail, GReader y Google Calendar, aun no tiene una version para móviles. Screenshot tomado desde un iPod touch (izquierda) y desde un móvil con Android (derecha). Captura de pantalla desde el Android cortesia de @jainux"

Como puedes notar, el sitio no está adecuado para ser visualizado desde un dispositivo móvil. Esto dificulta la navegación en el mismo, teniendo que hacer zoom in para poder leer el texto y también zoom out para luego ver la página completa y dirigirse a otras secciones de esta.


El primer framework que conocí, el cual realmente es un plugin para Wordpress, fué WPTouch. Al agregar este plugin a tu blog de Wordpress, este identifica automáticamente cuando estás visitando el blog desde un iPhone o iPod touch y modifica la plantilla adaptándolo a las dimensiones y paleta de colores de dicho dispositivo para que la lectura del blog sea lo más adecuada.

"Soda Caustica, blog de Virginia Lemus. Uno de los primeros blogs donde observe el uso del plugin WPTouch para blogs de Wordpress."

Existen servicios que te automatizan la tarea de crear una versión móvil de tu sitio, adaptando las dimensiones de la plantilla y eliminando contenido que posiblemente no funcionará en tu dispositivo o retrasará innecesariamente la carga del mismo. Entre estos sitios se encuentran MoFuse, dotMobi y mobifyMe.

MoFuse (link) Este es el más sencillo de todos los servicios. Te permite crear una versión móvil en tan solo un par de clicks con un mínimo de personalización del mismo pero ofreciéndote a cambio un dominio .mofuse.com para tu sitio creado el cual luego puedes asociar con tu propio dominio. Ofrece diferentes planes de pago y entre ellos, un plan gratuito orientado a blogs. Para empezar, debes escribir la URL de tu blog o de los feeds generados a partir de tu blog.

DotMobi (link) Es en forma general, un conjunto de servicios orientados a promover los sitios móviles y la movilización de sitios actuales, así como todo lo relacionado con sitios web para móviles, ofreciéndote muy valiosas herramientas, documentación y referencias. Entre estas herramientas posee una denominada Instant Mobilizer, la cual genera casi automáticamente una versión móvil de tu sitio web. Las features que más llaman la atencion son Click to call que agrega un vínculo con el número telefónico de tu empresa y Google Map Autogeneration que agrega un vínculo de Google Maps apuntando a la dirección de tu empresa. La desventaja es que no posee un dominio propio para asignarle a tus sitios sino que tienes que conseguir un dominio con uno de sus partners.

MobifyMe (link) También te permite crear una versión móvil de tu sitio pero a diferencia de DotMobi y MoFuse, este no te lo hace de forma instantánea generando una plantilla automáticamente. Sacrificas esta feature obteniendo un mayor control sobre el contenido de tu nuevo sitio permitiéndote seleccionar los elementos que deseas mostrar tomándolos directamente de tu sitio original y adaptándolos a las dimensiones de un dispositivo móvil usando además hojas de estilo personalizadas.

"Editando el layout una página de ejemplo en mobify.me"

Estos tres servicios te generan un sitio con su propio hosting y un domain customizable (también asociable a tu propio dominio) además de ofrecerte plugins y scripts para autodetección de tipos de dispositivos, el cual, al agregarlo a tu sitio original, puedes hacer que te redireccione automáticamente a tu versión móvil cuando este detecta que el usuario está navegando desde uno de estos dispositivos. Aunque parezca que este no es tan sencillo como los otros dos, este es el más profesional de todos y el que más opciones te ofrece para la personalización de tu nuevo sitio móvil. Además, entre los planes de pago te ofrece un plan gratuito con el que puedes hacer más que suficiente para montar la versión móvil de un sitio sencillo o un blog.

Acá puedes ver una versión del sr byte generada com MoFuse y acá una generada con MobifyMe. Esta última es la que mejor me ha parecido así que esperamos pronto se convertirá en la versión oficial del Sr Byte para móviles. Pronto habilitaremos su respectivo subdominio y la redirección automática.

Debido a la gran cantidad de contenido que deseaba postear sobre este tema, he dividido el post en dos partes. En el siguiente post continuaré con la segunda parte: "Adaptando tu Sitio Para Móviles - Parte 2: Do It Yourself"

iphone ipod navegador movil web wifi

Adaptando tu Sitio Para Móviles - Parte 1

Para nadie es sorpresa que cada vez son más las personas que poseen un smartphone o un dispositivo (no necesariamente un celular) con capacidades de navegación por la World Wide Web como por ejemplo un iPhone o un iPod touch. Estos dispositivos son muy prácticos para cuando deseas revisar tu correo electrónico, los feeds de tus blogs o simplemente entretenerte navegando en el mar de páginas web que se pueden encontrar hoy en día y de casualidad te encuentras fuera de tu casa, en alguna cafetería o centro comercial donde encontraste una red WiFi disponible.

Sabiendo esto, las empresas y organizaciones deben tomar en cuenta que muchos de sus clientes / usuarios ahora tienen la alternativa de acceder desde un dispositivo móvil a los servicios web (o simplemente el contenido web) que estos ofrecen pero existe un inconveniente: Dichos sitios web fueron diseñados para ser vistos desde una computadora con una resolución como mínimo de 1024x768. Esto significa que cuando intentas ver uno de estos sitios en tu dispositivo móvil, puede lucir como en la siguiente imagen:

"Google Code - Uno de los sitios de Google que a diferencia de GMail, GReader y Google Calendar, aun no tiene una version para móviles. Screenshot tomado desde un iPod touch (izquierda) y desde un móvil con Android (derecha). Captura de pantalla desde el Android cortesia de @jainux"

Como puedes notar, el sitio no está adecuado para ser visualizado desde un dispositivo móvil. Esto dificulta la navegación en el mismo, teniendo que hacer zoom in para poder leer el texto y también zoom out para luego ver la página completa y dirigirse a otras secciones de esta.


El primer framework que conocí, el cual realmente es un plugin para Wordpress, fué WPTouch. Al agregar este plugin a tu blog de Wordpress, este identifica automáticamente cuando estás visitando el blog desde un iPhone o iPod touch y modifica la plantilla adaptándolo a las dimensiones y paleta de colores de dicho dispositivo para que la lectura del blog sea lo más adecuada.

"Soda Caustica, blog de Virginia Lemus. Uno de los primeros blogs donde observe el uso del plugin WPTouch para blogs de Wordpress."

Existen servicios que te automatizan la tarea de crear una versión móvil de tu sitio, adaptando las dimensiones de la plantilla y eliminando contenido que posiblemente no funcionará en tu dispositivo o retrasará innecesariamente la carga del mismo. Entre estos sitios se encuentran MoFuse, dotMobi y mobifyMe.

MoFuse (link) Este es el más sencillo de todos los servicios. Te permite crear una versión móvil en tan solo un par de clicks con un mínimo de personalización del mismo pero ofreciéndote a cambio un dominio .mofuse.com para tu sitio creado el cual luego puedes asociar con tu propio dominio. Ofrece diferentes planes de pago y entre ellos, un plan gratuito orientado a blogs. Para empezar, debes escribir la URL de tu blog o de los feeds generados a partir de tu blog.

DotMobi (link) Es en forma general, un conjunto de servicios orientados a promover los sitios móviles y la movilización de sitios actuales, así como todo lo relacionado con sitios web para móviles, ofreciéndote muy valiosas herramientas, documentación y referencias. Entre estas herramientas posee una denominada Instant Mobilizer, la cual genera casi automáticamente una versión móvil de tu sitio web. Las features que más llaman la atencion son Click to call que agrega un vínculo con el número telefónico de tu empresa y Google Map Autogeneration que agrega un vínculo de Google Maps apuntando a la dirección de tu empresa. La desventaja es que no posee un dominio propio para asignarle a tus sitios sino que tienes que conseguir un dominio con uno de sus partners.

MobifyMe (link) También te permite crear una versión móvil de tu sitio pero a diferencia de DotMobi y MoFuse, este no te lo hace de forma instantánea generando una plantilla automáticamente. Sacrificas esta feature obteniendo un mayor control sobre el contenido de tu nuevo sitio permitiéndote seleccionar los elementos que deseas mostrar tomándolos directamente de tu sitio original y adaptándolos a las dimensiones de un dispositivo móvil usando además hojas de estilo personalizadas.

"Editando el layout una página de ejemplo en mobify.me"

Estos tres servicios te generan un sitio con su propio hosting y un domain customizable (también asociable a tu propio dominio) además de ofrecerte plugins y scripts para autodetección de tipos de dispositivos, el cual, al agregarlo a tu sitio original, puedes hacer que te redireccione automáticamente a tu versión móvil cuando este detecta que el usuario está navegando desde uno de estos dispositivos. Aunque parezca que este no es tan sencillo como los otros dos, este es el más profesional de todos y el que más opciones te ofrece para la personalización de tu nuevo sitio móvil. Además, entre los planes de pago te ofrece un plan gratuito con el que puedes hacer más que suficiente para montar la versión móvil de un sitio sencillo o un blog.

Acá puedes ver una versión del sr byte generada com MoFuse y acá una generada con MobifyMe. Esta última es la que mejor me ha parecido así que esperamos pronto se convertirá en la versión oficial del Sr Byte para móviles. Pronto habilitaremos su respectivo subdominio y la redirección automática.

Debido a la gran cantidad de contenido que deseaba postear sobre este tema, he dividido el post en dos partes. En el siguiente post continuaré con la segunda parte: "Adaptando tu Sitio Para Móviles - Parte 2: Do It Yourself"

iphone ipod navegador movil web wifi

Explotando la Web Developer Toolbar

"Una de las características que destacan a Firefox de los demás navegadores es su gran cantidad de útiles add-ons que se pueden instalar en el"

Firefox Addons

Como ya se nos esta haciendo costumbre acá en el Sr Byte, les traemos un conjunto de add-ons para Firefox que durante nuestras experiencias hemos descubierto como bastante útiles para trabajar con HTML, CSS y Javascript, especialmente porque los IDEs de desarrollo a veces no cuentan con las herramientas suficientes para editar visualmente las páginas web de modo que puedas saber con gran exactitud cómo se verá tu sitio en un navegador desde el momento en que lo estás diseñando.

Rodrigo anteriormente había publicado una colección de add-ons directamente en el sitio de addons de Firefox, a los cuales yo agregaré unos cuantos mas en este post y en otros posteriores los cuales considero un MUST para desarrolladores y diseñadores web.

Web developer toolbar (link)

Este es uno de los addons que no pueden faltar en el browser de todo desarrollador web. Contiene tantas opciones que en sí sustituye a muchos otros addons actualmente disponibles para desarrolladores web en el sitio de Mozilla. A continuación listaremos algunas de las opciones mas útiles de esta barra de herramientas para todo desarrollador web:

Miscellaneous -> Display line guides: Esta opción sirve para comprobar la alineación diferentes elementos HTML de un sitio web. Sustituye al add-on gridfox.

"En este ejemplo podemos ver como usamos las líneas guía del Web Developer Toolbar para detectar una porción desalineada en las secciones de la Wikipedia, la cual se ha remarcado con una flecha."

Miscellaneous -> Display ruler: Con esta opción puedes dibujar un rectángulo remarcando elementos HTML o cualquier sección dentro de una página web y este te dirá la posición X/Y, longitud y anchura de estos elementos en pixeles. Una vez dibujado el rectángulo este puede moverse y redimensionarse para remarcar exactamente el elemento del cual se desea saber su posición y tamaño dentro de la página. Sustituye al addon measureit.

"La caja de texto de búsqueda de Google mide exactamente 568 pixeles de ancho y 25 de largo"

Information -> Display Element Information: Esta opción convertirá tu puntero en una cruz con la cual podrás remarcar y seleciconar un elemento HTML dentro de un sitio web y al darle clic, WebDeveloper te mostrará un recuadro con los atributos, clases, posición, ancestros, etc. de dicho elemento. Además, debajo de la WebDeveloper toolbar te mostrará la ubicación en formato XPath de dicho elemento.

"Información del elemento HTML caja de búsqueda del sitio twitter.com"

Outline -> Outline Custom Elements: La cual te permite remarcar elementos HTML de una página mediante su id, clase o tag, permitiéndonos además remarcar 5 elementos a la vez y elegir el color con el que queremos que cada uno de ellos sea remarcado. Una forma de búsqueda de elementos similar a como lo realiza el addon FireFinder.

"WebDeveloper nos remarca los elementos HTML dentro de la página de Javaword que poseen la clase CSS llamada byline"

Cookies -> View Cookie Information: Esta opción nos abrirá una nueva pestaña de Firefox en la cual nos listará todas las cookies que los sitios visitados han guardado en nuestro sistema, además de poder editarlas y eliminarlas. Desde la opción Cookies también podemos agregar nuevas cookies a nuestro sistema operativo por si algún sitio la requiere. Funciona de manera similar al addon firecookie

"WebDeveloper me muestra las cookies que el sitio osum.sun.com ha guardado en mi computadora"

Information -> View Color Information: Opción con la cual podremos obtener la paleta de colores que se está usando en un sitio web, con sus respectivos valores en RGB hexadecimal. Esta nos la visualiza en una nueva pestaña de Firefox.

"WebDeveloper mostrando la paleta de colores que compone el sitio deviantart.com"

Tools -> Validate HTML: La cual nos lleva a la página de validación del w3c.org en el cual revisan la validez del código HTML con el cual está construido el sitio que estábamos visitando. En dicho sitio se nos lista detalladamente cada uno de los errores HTML que posee el sitio anteriormente visitado. Existe una opción extra, Tools -> Display page validation la cual te muestra una barra de herramientas debajo de la WebDeveloper la cual nos aplica una validación básica del HTML y CSS de nuestro sitio.

"Al validar el sitio stackoverflow.com desde la opción del WebDeveloper podemos ver que según el w3c validator este posee unos cuantos errores. Sin embargo la validación básica que aparece en la barra de herramientas bajo la WebDeveloper nos dice que el HTML es válido."

Próximamente hablaremos de otro add-on de Firefox que merece un post completo debido a su gran complejidad y al hecho que es un add-on que soporta más add-ons. Estén pendientes.