Entretelones del desarrollo de la nueva versión del sitio

Pensaba ése mismo jueves publicar algo más sobre lo que significó el desarrollo de Begin 5.0, pero entre el nerviosismo y la excitación, los hits y en general la masiva respuesta que tuvo el lanzamiento, terminé atornillado respondiendo mails, comentando por aquí y por allá, y obviamente, preocupado de que el servidor y la aplicación no se dejaran vencer por uno u otro bugcito, de esos que les da por aparecerse en el peor momento, como la más inoportuna de las moscas en la sopa.

(A eso se sumó una agotadora mudanza la semana siguiente, que hasta el día de hoy me tiene con la espalda y los brazos hechos un charquicán!)

Pero el matamoscas ya está de vuelta en su lugar, y bueno, ahora que las cosas están más tranquilas puedo contarles más en detalle lo que hay detrás de esta nueva versión de Begin. Me imagino que a estas alturas — y al igual que yo en mi nuevo vecindario–, ya se hicieron su primera impresión del sitio, y están más o menos familiarizados con algunos de los trucos nuevos que se trajo entre manos.

Producto de eso trataré de evitar lo obvio y voy a centrarme más en los detalles más jugosos de los entretelones, pero más importante aún, lo que he sacado en limpio de la reacción del querido público ante la nueva versión. Usted como buen lector que es, sabrá que no me refiero a otra cosa que al camino que tiene ahora en frente esta guagua llamada Begin.

Aunque a decir verdad, ¡guagua dejó de ser rato ya!

El desarrollo

Ok, partamos con lo obvio: no cabe duda que Begin 5 es el remake más grande que ha tenido el proyecto desde sus inicios (y no me refiero precisamente al diseño), razón por la cual hay un lote de código nuevo, partiendo por la reescritura del núcleo de la aplicación. Esto porque Begin ahora está compuesto en base a un sistema de módulos, y por lo mismo quise que la arquitectura de la aplicación mantuviera el “kernel” por un lado y los módulos en otra, para que a futuro fuera fácil agregar o eliminarlos sin tener que meter mano en los confines más oscuros de la aplicación.

Tengo que decirles que el desarrollo duro del sitio fue bien agotador, ya que si bien a nivel conceptual el nuevo Begin empezó a gestarse a principios de año, todo lo que es código empezó menos de un mes antes de que viera la luz. Pero si el proceso fue agotador fue sólo por tontera mía de anunciar públicamente una fecha de lanzamiento habiendo usado sólo la guata y no la cabeza para evaluar el tiempo que me tomaría dejar listos todos los ítemes pendientes.

A eso súmenle los imperdonables imponderables, y tienen a un noctámbulo de los peores y a punto de estallar.

¡Si hasta el conserje de mi edificio me decía “el vampiro”!

O sea, como recomendación: si quieren avanzar rápido con su proyecto, pónganse fechas. Probablemente los días “antes de” se la van a sufrir, pero una vez que terminen van a amanecer al día siguiente con una sonrisa de oreja a oreja, por la tranquilidad de saber que si bien no todo quedó tal cual como lo tenían en mente, al menos cumplieron la meta (”lo óptimo es enemigo de lo bueno”, dicen por ahí).

Aunque ojo, esa paz sólo les va a durar el tiempo que se demoren en conectarse al computador y abrir el mail, porque ahí se van a dar cuenta de la cantidad de detalles que se les pasaron!

La interfaz

Ok, volviendo al tema. En cuanto a la interfaz de Begin en sí, bueno, es claramente el primer gran cambio que se ve a primera vista. Sólo para que se hagan una idea, aquí va un pantallazo comparativo entre Begin 4 y 5. ¡Encuentre las diferencias!

(Ah, a propósito: los inputs que se ven negros son por el skin GTK que uso en Ubuntu!).

Bueno, si se fijan, de la estructura de contenedores horizontales, Begin pasó a una de columnas verticales, agregando una tercera para poder incluir más contenido en el mismo espacio, especialmente en lo que se presenta en el primer vistazo de la página. Los bloques de Noticias y de Blogs se integraron en uno sólo, para meter ahí en el medio un bloque de contenido destacado, compuesto por un listado de los posts más visitados y los más votados.

Por cierto, ahora Begin sindica varios de los blogs nuevos que estaban en la cola de revisión… ¡a lo dicho, hecho!

Además de esto cambió el logo y se renovaron los colores, por una paleta más “liviana y fresca” (las comillas las puse porque al parecer no todo el mundo piensa lo mismo!). Se eliminó el bloque de links de abajo y en vez de eso agregué un listado con los links justos y precisos para el común de los mortales (esto luego de haberlo estudiado harto tiempo).

Por último, todo lo que era la sección de Podcasts ahora pasó a integrar el nuevo módulo de Escucha que les comento en un segundito si me lo permiten.

Los módulos

Si me tildaron de “vampiro” no fue por Massú sino por estos señores llamados los módulos. Porque aunque yo pensaba que me iba a ser “una cosa poca” al final resultaron ser más complicados que lo que pensaba, en especial por el de Facebook que fue un verdadero parto, básicamente porque la documentación de la API parece receta de abuela como una vez comenté en Twitter.

¡Incluso hay páginas que se contradicen!

Bueno, los módulos para revisar el correo no fueron nada del otro mundo, aunque el de Hotmail MSN Live significó mover un par de perillas extra, ya que Microsoft no provee ninguna API que permita revisarlo de manera fácil. O sea hubo que emular el proceso completo de logueo en el sistema para finalmente llegar a la bandeja de entrada y ahí obtener el número y listado de los correos sin leer.

En cuanto al módulo de Escucha, fue una de las cosas que más me habían pedido para el nuevo Begin: la posibilidad de poder escuchar música directamente desde el sitio. Por eso aproveché de meter ahí mismo el listado de Radios Online que solía estar en el bloque de links de abajo, así como el listado de los últimos Podcasts, obtenidos desde el sitio de nuestros grandes amigos de Podcaster.

Pero probablemente el módulo que más satisfecho me dejó fue el de Twitter, que no sólo permite ver qué hay de nuevo en Twitter, sino también postear a través de la API, y mi funcionalidad favorita, que es poder clickear en un nombre de usuario y obtener vía AJAX su linea de tiempo (timeline) de un suácate.

El gran problema con que tiene que lidiar Begin es que Twitter suele caerse más de lo humanamente entendible — ustedes ya conocen la historia –, y además de eso, su API impone un límite al número de requests que puede hacer un usuario (dicen que es por hora, pero me he dado cuenta que es en períodos más cortos de tiempo, quizás de 10 o 15 minutos).

Pero bueno, independiente de esto, en general el módulo de Twitter en Begin funciona bastante bien, de hecho con el uso de AJAX permite usar Twitter incluso más rápido que con el propio sitio de ellos!

La funcionalidad

Desde el día que surgió la idea de hacer una página de inicio como Begin, por allá en la época en que se inventó el papel, o quizás un poco antes, he creído que lo más importante es mantener una buena experiencia de uso de la aplicación, o sea que el sitio corra y corra bien, es decir ultra-mega-hiper rápido y que haga lo que tiene que hacer sin complicar ni mucho menos molestar al usuario.

(Ése último comentario va dirigido con especial cariño a todos los sitios nacinonales que les encanta llenarnos con publicidad invasiva, abusiva y totalmente obstrusiva… en buena, pero en serio).

Bueno, en éste contexto, una de las funcionalidades que más quería para el nuevo Begin era la búsqueda en Google integrada al sitio, a través del AJAX Search que lanzaron hace un tiempo. Lo bueno es que esto no sólo permitió hacer las búsquedas dentro de Begin, sino además hacerlo simultáneamente — y con un sólo llamado — en Google News, Blogsearch, Images y Videos, lo que permitió eliminarlos del selector superior arriba del input de búsquedas.

Ahí fue donde cayó de cajón el agregar la posibilidad de buscar directamente en Wikipedia y en un tracker de torrents, dos pedidos que tenía desde hace tiempo en la cola de espera. La idea inicial con los torrents era hacer algo similar al nuevo buscador de Google, para buscar simultáneamente en más de un tracker (incluso con el link directo hacia el torrent), pero lamentablemente la hora me pasó la cuenta y no alcancé a tenerlo listo para esta versión… ¡por ahora tendrá que bastar con Mininova! :)

Otro detalle interesante es cómo funcionan las galerías de Flickr ahora. En vez de mostrar un tooltip con la imagen en tamaño mediano como antes, ahora se generan slideshows en base al listado de imágenes que aparecen según la búsqueda que hiciste (échale un vistazo si aún no lo haces!). Cada foto se precarga antes de que la veas, por lo que el aparato funciona bien rápido. Los videos de YouTube funcionan igual que antes, aunque con el nuevo diseño que tienen todos los elementos de overlay en el sitio.

A esto se suman un par de nuevas optimizaciones tanto a nivel de backend como de frontend, partiendo por el Javascript que ahora funciona en base a Delegación de Eventos (¿así se dice en español?) como estrategia para amarrarle eventos a los elementos del DOM. Esto básicamente significa no asignar los “listeners” a cada elemento que quieres pescar, sino hacerlo a nivel de los contenedores para reducirle la carga al navegador del cliente.

Si quieren leer más sobre el tema, hay varios artículos que lo explican mucho mejor que un ignorante como yo.

A nivel de servidor también la cosa estuvo entretenida. Para partir, me mudé de un viejo hosting compartido (sí, lo sé) a un VPS en Slicehost con cuál otro iba a ser, Debian. Eso me permitió tener más control sobre la máquina, y dentro de otras cosas instalar el gran servidor web Nginx (ahora amor de mis amores), que ahora viene con un módulo de cacheo estático en Gzip que es casi-casi mejor que el pan con mantequilla. A eso se suma el uso del compresor YUI para achicar el tamaño total de los JS y CSS.

Para que se hagan una idea, así dicen los números de uno de los JS’s de Begin:

JS original: 10.077 bytes
JS empaquetado: 6211 bytes
JS empaquetado y gzipeado: 2612 bytes!

Las accesibilidad

Antigumente solía haber una “versión accesible” de la portada de Begin, que era básicamente lo mismo de la portada pero sin los handlers para los llamados AJAX y sin las secciones que populaban su contenido dinámicamente (Flickr, Podcasts, Videos).

Ahora la portada de Begin es accesible en sí, o sea lo único que se llena de contenido vía AJAX son los módulos que no están cacheados (por razones obvias), es decir, la portada misma se puede usar perfectamente con Javascript desactivado y todo funciona como debería, ya que todos los links apuntan al lugar que les corresponde. Por ejemplo, los links de las categorías para filtrar los posts llevan efectivamente a las páginas internas de Begin, que muy posiblemente nunca hayas visto en la historia jamás del mundo (la de la derecha es una de ellas).

Otra de estas páginas que probablemente tampoco has visto son las páginas internas de los propios posts, que por primera vez en la historia del calendaro maya tienen permalinks propios — nada malo con mejorar el SEO del sitio, no? La URI de cada post está debajo del link que dice “Compartir” en el bloque de Lo último en Llegar, que en casos normales con Javascript activado abre un overlay (¿cómo se dice eso en castellano?) que te permite enviar el link a uno o más amigos vía email, o bien compartirlo por Facebook, Twitter, Del.Icio.Us, Menéame, bueno, la misma ensalada de siempre.

Ah, y para terminar, sí señor, el sitio ahora valida al cento per cento! :)

El futuro

Muy bien, llegamos a la mejor parte.

Como ya saben, hay varias cosas que quedaron fuera de esta versión por razones netamente temporales. Pero a modo de resumen, lo más importante que quedó pendiente para la próxima actualización es:

• Primero, agregar la posibilidad de filtrar las búsquedas en Begin por idioma y por país, como estaba antes. Lamentablemente el AJAX Search de Google en este momento no entrega una forma de hacerlo fácilmente, así que tendré que decifrar la forma de hacerlo por mi cuenta… maldita sea!
• Segundo, el cambiador de colores. Por ahí sugirieron una versión de Begin en negro, que no estaría nada de mal! (Además ahorraría energía y batería para la gente que se mete desde un iPhone (a todo esto, pillé justo-justo a un usuario metiéndose desde uno, miren este pantallazo de los logs del servidor).
• Tercero, la posibilidad de mover los módulos y/o de achicarlos. Lo más probable es que no sea tooodo movible o configurable, pero sí lo suficiente como para tener lo más importante para cada uno en el primer pantallazo de Begin.
• Y cuarto, por supuesto: una versión de Begin específicamente para móviles. :)

Obviamente, a esto se suman varios detalles menores, como por ejemplo que el slideshow de Flickr muestre el título de cada foto (como con los videos de YouTube) o detalles de ese tipo.

Ahora, un punto importante que algunos me han comentado es que Begin podría ser más personalizable, por ejemplo para poder agregar feeds propios de blogs o para configurar (agregar/eliminar) los distintos módulos de contenido. Incluso por ahí alguien sugirió que Begin tuviera cuentas de usuario para poder recordar los datos, como los colores o la información de acceso a los distintos servicios.

Bueno, para serles sincero hasta ahora he sido bien enemigo de tener cuentas de usuario en Begin, por la simple razón de que me gusta la idea de que Begin sea un sitio que tenga lo justo y necesario y no haya que “configurarlo” para que sea funcional. En el fondo, el asunto es que Begin no pretende convertirse en otro Netvibes o otro iGoogle, justamente porque le encuentro poco sentido a hacer lo mismo que otros sitios que ya existen (y que no lo hacen mal, en mi opinión).

Esto no quita que sea una posibilidad a futuro, ya que eventualmente el número de módulos va a empezar a crecer, y obviamente es impracticable tener que agregar la información para uno-y-otro-y-otro-y-otro-servicio-más de los que usas. En todo caso, como argumento en contra está el hecho de que la gran mayoría de la gente se conecta a la red desde uno o a lo más dos computadores distintos al día. Es decir, por lo general los datos se agregan una vez y chao.

Pero bueno, son cosas que el mismo tiempo se encargará de definir, en base a la evolución que vaya teniendo el sitio. Sólo quería que tuvieran presente que no es por mero capricho que no le digo “sí” a todas las funcionalidades que me piden, sino porque creo que todas las decisiones deberían respetar el norte y los objetivos que tiene Begin como proyecto, nada más.

“Strategy is about saying no”, recuerdo haber escuchado en el viaje a Silicon Valley. Muy cierto.

Para cerrar, me gustaría agradecerles por enésima vez a todos por el feedback que me han dado durante estos días, ya que me ha servido mucho para corregir fallas y afinar la dirección del timón. Si el proyecto vive es únicamente gracias a ustedes y sinceramente espero que la travesía siga por mucho tiempo más.

Begin está de vuelta y hay para rato, y bueno, ya que estoy en éstas, aprovecho de contarles que muy probablemente tendremos en poco tiempo Begin no sólo para Chile sino también para el resto de latinoamérica.

Ya estaba bueno ya, ¿no?