Justo despues de volver de Canada, estuve en un evento en Madrid en el que se presentaba en España la red social Facebook de la mano de Fon. El evento fue a finales de febrero y durante el mismo, un equipo de Simyo se subió al estrado para dar a conocer el concurso de desarrollo para facebook de Simyo. El objetivo era crear una aplicación que sirviera para promover Simyo dentro de las redes sociales como un canal complementario a sus campañas de marketing.

Después de un mes de trabajo duro, aprendiendo a programar aplicaciones en facebook y despues de montar la infraestructura necesaria, gané el concurso con la aplicación 'Llama gratis con Simyo'. (Sigue el enlace para ver unos videos de la aplicación, no te asustes por el inglés)

De qué va la aplicación
Llama gratis con Simyo es una aplicación web construida sobre la red social Facebook que permite hacer llamadas gratuitas con los móviles que ya llevamos siempre encima y sin necesidad de usar un ordenador, independientemente de la operadora que uses y solamente a cambio de escuchar una cuña publicitaria de Simyo.

Qué tiene de especial
Existen aplicaciones similares pero su enfoque es diferente. Por ejemplo, Movistar tiene la aplicación Movistar Contacta pero sólamente deja usarla entre usuarios de movistar y un número limitado de veces al día.

Por qué ahora
Yo comparto la creencia generalizada en la industria de que en el futuro cercano los servicios de voz en telefonía movil serán gratuitos. Sólamente se discute cómo financiar el servicio. Mi visión es que la gente no tenga que pagar por las llamadas si no que se usen cuñas publicitarias perfectamente enfocadas para cada uno de los usuarios para financiar las llamadas.

Si te gusta el cine, escucharás anuncios de los estrenos, si te gustan los videojuegos, escucharás anuncios de los nuevos títulos. Si te gustan los coches, escucharás anuncios de los nuevos modelos. Si te gustan las revistas del corazón, escucharás los nuevos cotilleos. La fusión de las redes sociales con la telefonía permite hacer realidad todo esto.

La aplicación presentada en el concurso de Simyo es un ejemplo vivo de esta visión. El fuerte interés generado desde que presenté mi candidatura me ha dejado claro que la gente demanda el servicio y ahora estoy trabajando duro en terminar la aplicación para abrirla al público cuanto antes.

En resumen, muchas gracias a Simyo por confiar en mi y ayudarme a hacer realidad una idea que ronda en mi cabeza desde hace años. El premio me permitirá centrarme en mejorar la aplicación, construyendo un motor seguro, sólido y abierto que se convertirá en la base de un sistema que acercará la telefonía gratuita a la gente.

Algo más de un año después de los últimos cambios he terminado con el rediseño de la web. Las novedades más importantes son:

• Nuevas cabeceras. La cabecera que había antes siempre fue provisional pero hasta ahora no he encontrado tiempo ni ganas de terminarla. Ahora tiene una apariencia mucho mejor y rota junto con el esquema de colores del resto de la web. Las fotos que salen son recortes de fotos hechas durante los viajes de los últimos años.
• Limpieza general de los textos fijos El faq, la sección de contacto, y la de información sobre la web
• Nuevo soporte de comentarios. Mediante el plugin de blosxom feedback. El nuevo sistema soporta moderación de comentarios y usa el sistema antispam de wordpress akismet. Por ahora lo tengo en fase de pruebas a ver que tal se comporta.
• Compatibilidad con navegadores. La web se ve correctamente en Firefox2, Opera9, Konqueror3, Safari y Internet Explorer 7. Con Internet Explorer 6 hay errores que probablemente nunca llegue a corregir.

Cosas que he aprendido:

• Safari ya soporta las etiquetas de transparencia (opacity) de CSS3 así que los únicos navegadores importantes que no lo soportan son Konqueror (Quizá en su versión 4 lo soporte) y toda la familia de Internet Explorer (No, Internet Explorer 7 no lo soporta tampoco)
• Pese a que el Internet Explorer 7 ya tiene unos cuantos meses de vida y que se actualiza prácticamente sólo, el Internet Explorer 6 sigue teniendo mucha importancia. Recibo un montón de visitas con este navegador a pesar de ser en el que peor se veía la página antes y con el único con el que se ve mal ahora.
• Vim esta dejando de ser mi editor favorito HTML/CSS en favor de Quanta

¿Qué opináis? Acepto sugerencias para mejorar :)

Me lié al calcular los porcentajes el otro día en el post sobre la compresión javascript. Pablo me ha mandado un email en el que descubre el problema y aporta luz sobre el tema. ¡Muchas gracias Pablo!

Date: Thu, 3 May 2007 12:20:42 +0200
From: Pablo Cristóbal del Río 
Subject: porcentajes
To: David Grajal

Hola
Cuidado cuando dices:
"Hemos reducido 3 peticiones a una sola y hemos reducido 
el peso de los scripts en un 550%."
Si una cosa la reduces un 550%  quiere decir que pasas 
de X a X * (1 - 5,5) = -4.5*X (negativo)

Pasar de 88 a 16 es reducirlo al 18,18%,  o bajarlo un 
81,82 %. Además, pasar de 16 a 88 es subirlo un 450%, no 
un 550%, por la misma razón que pasar de 100 a 100 es 
subirlo un 0%, o quedarse con el 100% de 100.

Desde la aparición en la escena del concepto de la web2.0, las páginas web han trasladado una parte de lógica importante al navegador para construir la interfaz de usuario. Mucha de esta lógica hace uso de pesadas librerías javascript de muchos kilobytes. Para asegurarnos de que la experiencia es tan agradable al visitante como pretendemos es necesario optimizar la página. Optimizarla significa tener un servidor eficiente (en software y hardware) y tener unos recursos ligeros que hagan que la página se descargue rápido.

En mi página no necesito preocuparme demasiado ya que recibo una cantidad irrisoria de visitas, pero el año pasado tuve problemas con el tamaño y el número de las peticiones de las librerías javascript. En las últimas obras añadí el script lightbox para mostrar con una animación superpuesta las fotos de este sitio web. No soy muy amigo de las chorraditas que se mueven pero este es un script estupendo porque es muy cómodo y porque no es nada invasivo¹. El script requiere del uso de dos archivos de la librería scriptaculous. Esto suponía tres peticiones independientes al servidor web de ficheros fuente bastante pesados.

Al tener varios ficheros pesados aumenta la latencia ya que se tarda más en bajarse los elementos que componen la página y el resultado es que nuestro visitante se desespera y se larga. En mi caso concreto, se tardaba unos cuantos segundos más en cargar la web de los que consideraba aceptable.

A continuación explicaré el proceso de limpieza de código que se realizó en esta web. Mostraré las instrucciones usadas para Linux pero deberían funcionar en MacOS. Antes de nada decir que es un método sencillo, rápido, eficiente y sobre todo seguro pero no es el que más nos optimiza el resultado. Esto lo aclararé al final del post.

1. Paso primero: Empaquetado de ficheros
Primero juntamos todos los ficheros de script en un único fichero. De esta manera optimizamos la descarga y disminuimos el número de peticiones al servidor web.

cat scriptaculous/prototype.js > all_js.js
cat scriptaculous/effects.js >> all_js.js
cat lightbox.js >> all_js.js

2. Entra en escena JSmin

Limpiamos el código con JSMIN. Nos quitará los comentarios, los espacios en blanco, los saltos de linea y los tabuladores innecesarios. Cuidado con el programa, por defecto nos sobreescribirá el fichero que le introducimos por parámetro así que recuerda tener el fichero original a buen recaudo por lo que pueda pasar.

En su página web puedes descargarte el binario para ms-dos y también te puedes bajar el código fuente en C. También se encuentra disponible para descarga como código fuente en C#, Java, Javascript, Perl, PHP, Python y Ruby. En nuestro caso usaremos el código fuente para crear un ejecutable con el que procesar nuestros ficheros.

Compilamos jsmin

gcc jsmin.c -o jsmin.out

Y lo usamos atacando nuestro fichero all_js.js y poniendo el resultado en all_js_min.js

 ./jsmin.out < all_js.js  > all_js_min.js

3. Compresión
Por último comprimimos el fichero resultante.

  gzip -9 -c all_js_min.js > all_js_min.js.gz

Resultados

• 88 Kilobytes all_js.js - Fichero fuente con todo el javascript de la página web
• 64 Kilobytes all_js_min.js - Fichero fuente pasado por jsmin para limpiarlo
• 16 Kilobytes all_js_min.js.gz - Fichero comprimido

Hemos reducido 3 peticiones a una sola y hemos reducido el peso de los scripts en un 550%.

¿Cómo incluir el nuevo fichero en la página?
No tiene nada especial, tan solo tener en cuenta la nueva extensión incorporada por gzip.
Para incluir nuestro nuevo fichero podríamos usar una linea como la siguiente dentro del head.

‹script src="/css/js/all_js_min.js.gz" 
type="text/javascript"›‹/script›

Otras opciones
Existen otros métodos que suelen comprimir mejor el código pero tienen algunas pegas. Por un lado, algunas propuestas están basadas en un motor en javascript integrado en una página web con lo cual se nos complica hacer actualizaciones frecuentes. Por otro lado, la mayoría intentan rizar el rizo y ofuscar el código fuente acortando los nombres de funciones y variables. Esto es estupendo porque reduce significativamente el peso de los archivos (y protege un poco el código) pero puede traernos problemas si el proceso no lo hace tan bien como debiera y nuestro programa deja de funcionar.

• Memtronic - En javascript. No me parece muy fiable
• ShrinkSafe - Hace un proceso similar al aqui explicado pero ademas ofusca (De forma light y segura) y lo hace con su propio interprete javascript así seguramente sea el método más sofisticado existente. Además te puedes bajar un programa ejecutable java.
• CSS & JavaScript Compressor - En javascript
• Packer - En javascript. Ofusca mediante expresiones regulares así que supongo que no es tan seguro como ShrinkSafe.

Ventajas de comprimir el javascript de nuestras páginas:

• Menos peticiones y más ligeras. Menor tiempo de descarga
• Contra otras opciones este método tiene la ventaja de que el proceso se puede automatizar mediante un script y es muy rápido y seguro.

Decir que algunos frameworks ya incorporan la compresión javascript de serie (Dojo) y que entonces no seria necesario seguir estos pasos. En cualquier caso, si algún lector ha usado alguno de los otros métodos que no dude en ponerse en contacto conmigo para comentarme su experiencia.

¹ ¡Ojo, intrusivo no es una palabra presente en nuestro diccionarío!