Lima, Mozilla y Add-ons
Todavía recuerdo aquella tarde de octubre en Santiago cuando nos preguntábamos cuáles eran nuestros objetivos para el año que se venía. Mi objetivo ya lo tenía preparado desde hacía tiempo: Eventos para Desarrolladores.
Tenía muchas ganas de poder tener en Latinoamérica algún evento como los que tienen en Europa, o Estados Unidos, en donde el centro de la cuestión sea el código fuente. Un evento en el cual poder hablar en nuestra lengua natal, el querido Español, sobre temas en los que casi siempre hay que conversar en Inglés. Un evento en el cual conocer gente con intereses similares y hacer nuevas amistades. Un evento para desarrolladores.
Esa meta parecía tan distante... Hasta que a principio de este año, una tarde reviso el correo y veo una noticia que me alegró el resto del día. Una propuesta para realizar el primer mozilla addons workshop en Latinoamérica. Realmente no lo podía creer, era como un sueño hecho realidad. Y así comenzó la aventura, el sueño se había cumplido, ahora había que vivirlo!
Prácticamente ya tenía las valijas listas para salir hacia mi entrenamiento como Jetpack Ambassador en las oficinas de Mozilla en Mountain View (sobre lo que ya escribiré!), y ahora tenía una invitación para mi primer evento como Jetpack Ambassador. La emoción era enorme... y también lo era la responsabilidad. Está claro que la responsabilidad de asistir a un workshop no es ni remotamente parecida a la de dar el workshop, pero a veces hay que hacer pequeños sacrificios para lograr lo que se quiere. Como decía mi abuela: el que quiere celeste, que le cueste.
Así que luego de concluido mi entrenamiento en Mozilla, empecé a darle forma a las secciones que me correspondían en el MAOW de Lima. Decidí que lo mejor era primero dar una introducción a Jetpack, dado que probablemente nadie supiera siquiera de la existencia del mismo. Luego presentaría un taller, con cosas simples para que la audiencia no se perdiera tanto. Y por suerte resultó, y a los asistentes les entusiasmó.
La experiencia del taller fue magnífica, y como las sesiones de Jetpack vinieron después de las extensiones normales, los resultados fueron muy gratificantes. Ver cómo la gente se sorprendía con la simplicidad de Jetpack, y que pensaran que con algo así sí podrían crear una extensión, me pareció un gran éxito para la plataforma. Los asistentes por lo general habían tenido alguna experiencia programando páginas web, pero no todos eran gurús del cyberespacio. Justamente el publico al que Jetpack apunta!
Antes de finalizar el MOAW, hicimos una pequeña competencia a ver quién lograba modificar una extensión base para agregarle un poco de comportamiento, y así regalábamos algunos premios 
. De nuevo fue sorprendente que las primeras personas en lograrlo lo hayan hecho en menos de 10 minutos. ¡Entendían lo que estaban haciendo pese a que nunca habían programado una extensión! Eso es en mi opinión una excelente primera impresión.
Las personas que se acreditaron premios fueron las siguientes, en orden de llegada:
- Davis (@davis_laban)
- Cristian (@criso)
- Ulises (@ulisescab)
- Yannick (@ywarnier)
Estoy muy agradecido de todos los asistentes al taller, de sus críticas y comentarios que nos vienen súper útiles para los próximos MAOWs que seguramente realizaremos 
. Ya he visto por ahí en Twitter que algunos están probando Jetpack, creo que no puedo estar más satisfecho y espero que algún día logren superar al maestro!
Antes de despedirme quiero agradecer a Percy Cabello, Daniel Yucra y Mozilla Perú por haber hecho realidad este evento. También a mi compañero Jorge Villalobos, que me acompañó en el taller dando la parte de Extensiones Tradicionales. Y a todos los demás encargados de que el taller saliera a la perfección y casi sin contratiempos!
Mis 5 objetivos para el 2010 de la comunidad Mozilla
Continuando el meme de Nukeador acerca de "reflejar los 5 objetivos o deseos que quiero ver cumplidos en 2010 para la comunidad de Mozilla en español", paso a comentar los míos. Por adelantado les aviso que la mayoría son del lado de los desarrolladores, que aunque parezca mentira somos muy pocos!
- Conocer a más desarrolladores de productos de Mozilla que sean hipanoparlantes
- Difundir las tecnologías de Mozilla en Latino América, ¡qué el mundo nos oiga!
- Hacerme de tiempo para dedicarle a la seccion de Labs de Mozilla Hispano
- Difundir Jetpack.
- Organizar el MozDay para Desarrolladores!!
Copia y pega este mensaje, cambia los cinco puntos por los tuyos y publícalo en tu blog
Firebug y Jetpack, juntos otra vez
Ultimamente estuve jugando bastante con un nuevo proyecto de Mozilla Labs: Jetpack. Lo voy a describir brevemente para aquellos que no saben de qué se trata este maravillos nuevo proyecto, pero deberías revisar el sitio de Jetpack si querés aprender más acerca del mismo.
Si alguna vez te preguntaste cómo están hechos todos esos complementos de Firefox, probablemente hayas descubierto (quizás con alguna decepción) que no son tan fáciles de programar. Tenés que aprender un lenguaje llamado XUL para la UI, asimilar un montón de nuevos términos como Overlays, XPI, XPCom... Pero che, no estoy diciendo que todo esto es imposible de aprender (de hecho hay un montón de documentación y tutoriales disponibles), sino que simplemente hay que aprender algo nuevo.
Así que Mozilla pensó sobre esto por un tiempo, y salieron con una idea bastante piola: lo más probable es que vos ya conozcas JavaScript, CSS y HTML. Por qué deberías tener que aprender algo nuevo? Y así nació Jetpack, una nueva forma de programar complementos, en tan sólo un archivo y completamente programados en JavaScript, CSS y HTML.
Firebug y Jetpack
Y qué relación tiene Jetpack con Firebug? Bueno, bastante. Como dicen en el sitio de Jetpack, "para no reinventar la rueda" usaron Firebug para depurar y loguear. Hasta ahora todo perfecto: una manera simple para desarrollar complementos, un lindo depurador... qué más se podría pedir?
Quizás que ambos funcionen juntos ni bien los instalamos?
Como algunos se han dado cuenta, las últimas versiones de Firebug y de Jetpack no funcionan bien juntas de entrada. Esto es porque la versión actual de Jetpack (0.6.2) usa una vieja llamada a la API para comunicarse con Firebug, que cambió en la versión 1.4.3. Al parecer desarrollaron toda la interacción con Firebug usando Firebug 1.4.2, con lo cual nunca se enteraron del cambio en la API de Firebug. Pero a no desesperar! Hay una solución para esto, y es tan simple como cambiar una sóla palabra en una sóla linea de código.
Haciendo que ambos vuelvan a llevarse bien
Nota importante:
Al momento de escribir este artículo el bug abierto para este problema ya está en "Verified and Fixed", lo cual siginifica que el arreglo estará disponible en la próxima versión de Jetpack. Mientras tanto, vas a tener que hacer la siguiente modificación a mano para poder usar Jetpack con un Firebug 1.4.3 o posterior.
Primero que nada, vas a tener que ubicar tu perfil de Firefox. Esto depende de tu sistema, pero acá están algunas de las ubicaciones más comunes:
- Linux:
~/.mozilla/firefox/<profile folder>
- Mac OS X:
~/Library/Mozilla/Firefox/Profiles/<profile folder>
Ó
~/Library/Application Support/Firefox/Profiles/<profile folder>
- Windows XP:
C:\Documents and Settings\<Windows login/user name>\Application Data\Mozilla\Firefox\Profiles\<profile folder>
- Windows 7:
C:\Users\<Windows login/user name>\AppData\Roaming\Mozilla\Firefox\Profiles\<profile folder>
Si estás usando Firefox 3.6, podés ir a la URL "about:support" y ahí hay un botón que te lleva a la carpeta con tu perfil.
Una vez encontrada la carpeta de tu perfil, vas a tener que ir a esta carpeta que se encuentra dentro del mismo:
extensions/jetpack@labs.mozilla.com/content/js/xul
y editar el siguiente archivo:
firebug-extension.js
Cambiando la línea 19 de:
Firebug.URLSelector.watchBrowser(browser);
A:
Firebug.Activation.watchBrowser(browser);
Guarda el archivo, reinicia Firefox, y voilà, ahora Firebug y Jetpack deberían estar trabajando juntos!
Probando si Firebug está funcionando
Si querés saber si Firebug está funcionando como lo esperado, copiá el siguiente código en la parte de "Develop" en Jetpack:
jetpack.future.import("menu");jetpack.menu.context.page.add({ label: "LoguearEsto!", command: function(){ console.log("Firebug está Andando OK"); } });
Ahora apretá el botón "Try out this code", habilitá Firebug y actualizá la página. Si todo salio bien, ahora debería haber una nueva entrada en el menú de contexto de la página, llamada "LoguearEsto!". Si hacés click en la misma, y en la consola aparece el texto "Firebug está andando OK", entonces Firebug está andando correctamente.
Eventbug (alfa) Liberado
Esta es una traducción de un post realizado por Jan "Honza" Odvarko, uno de los desarrolladores principales de Firebug y padre del panel de Red. El artículo original se encuentra aquí.Hemos hecho un gran avance con John J. Barton en una nueva extensión para Firebug llamada Eventbug. Un agradecimiento enorme a Olli Pettay (smaug) por arreglar los bugs #448602 + #506961 y por brindar la nuevas API de Firebug que permiten enumerar los event listeners en una página web!
Tengan en cuenta que estas APIs están disponibles en Firefox 3.7a1pre (espero que puedan lograr entrar en Firefox 3.6) y también van a necesitar Firebug 1.5 para poder hacer las pruebas.
Esta extensión trae un nuevo panel de Eventos que lista todos los manejadores de eventos de una página, agrupados por tipo de evento. El panel también se integra de una manera prolija con otros paneles de Firebug, y permite buscar rápidamente que elemento HTML está asociado con un event listener específico o ver su código fuente JavaScript.
Así que, veámoslo en acción!
Panel de Eventos
La captura de abajo muestra el contenido del panel de Eventos y los tres paneles de costado (click para ver la imagen en tamaño original).
Los paneles de costado son sincronizados con el listener que haya sido seleccionado en el área principal de contenido.
- Targets Muestra la lista de targets de eventos que serían usados como DOMEvent.currentTarget cuando el evento burbujee (bubblee). Todos los targets son clickeables y dirijen al usuario al panel de HTML
- Script Muestra el código fuente del listener seleccionado.
- HTML Muestra el código HTML del elemento que está asociado con el listener seleccionado.
Panel HTML
La extensión también registra un nuevo panel de costado para Eventos en el panel de HTML.
En este caso, el panel lateral de Eventos muestra todos los event listeners registrados para el elemento HTML seleccionado.
Configuración Recomendada
Firefox 3.7a1pre
Firebug 1.5b1
Eventbug 0.1a2
Errores Conocidos
Eventbug todavía está en una etapa alfa, y hay algunos errores conocidos..
- El panel no es actualizado si los listeners son agregados o eliminados dinámicamente dependiendo de acciones del usuario. Tu tienes que hacer click manualmente en el botón de Actualizar (Refresh, en la barra de herramientas). esto va a ser arreglado tan pronto como se solucione el bug #524674 (gracias Smaug!
) - Si un listener es definido usando un atributo HTML (i.e.
click="alert('Hola Mundo!')") el código fuente no es compilado hasta que el listener es efectivamente ejecutado (es una optimización de Firefox). La UI de Eventbug no indica esto, y puede pasar que el link que lleva al código fuente de un listener no funcione. El link debería ser deshabilitado si el objeto script no está disponible. - El panel lateral de Script todavía no deja crear puntos de interrupción.
Y por cierto, como es usual, si tienes cualquier idea acerca de cómo mejorar esta característica, háznoslo saber dejando un comentario aquí o en el grupo oficial (en inglés). Si encontrás un bug, por favor reportalo.
Gracias!
Encuesta Sobre Características de Firebug ~ Parte 2
Lo siguiente es una traducción de un post de Rob Campbell (Aquí está el original), uno de los desarrolladores de Firebug.
Esta es la segunda parte de la Encuesta sobre Características de Firebug (acá está la primer parte). Esta vez, enfocándome en las respuestas a la pregunta: ¿Cual es la característica de Firebug que menos te gusta? ¿Y la que nunca usás? No se si la pregunta estaba mal formulada o si la gente tenía ganas de expresarse, pero muchos de los encuestados no se limitaron a sólo una cosa. Como resultado, tuve que modificar un poco mi para nada científica metodología y contar las características mencionadas como votos, en vez de sólo clasificarlas en categorías.
Como en la encuesta anterior, agregué una columna de "Basura" para las respuestas que realmente no tenían sentido. Es muy bueno escuchar "Yo <3 Firebug!" (y Firebug te <3 a vos también!) pero no ayudaba mucho en los objetivos de esta encuesta. Complementando esta columna, creé otra categoría para las respuestas lamentándose por la estabilidad de Firebug o la ausencia de ciertas características específicas. Esta categoría empató en el primer puesto, con la mayor cantidad de votos.
Los Ganadores
Tercer puesto – Empate!
• La Búsqueda
• Consola. Me sorprende que haya algunas personas a las que no les gusta la consola, pero dos de ustedes piensan de esa manera. Una persona mencionó que aparecen un montón de excepciones provenientes del navegador, degradando la calidad de la información. Estas excepciones por lo general pueden reducirse de-seleccionando la opción "Mostrar Errores de Chrome" y las opciones de mensajes en el mini-menu del panel de Consola.
Segundo puesto – Empate!
Estos tienen la sospechosa distinción de tener la misma cantidad de respuestas que la columna de Basura (Junk).
• Panel CSS
• Panel DOM
• Perfilador
Primer Puesto
• Panel de Script — Las respuestas variaron desde "No se cómo utilizar las interrupciones" hasta usuarios que prefieren usar la consola para hacer depurado interactivo al estilo del printf. Otros encuestados demandaron que el panel de script era demasiado defectuoso.
advertencia: Creo que es probable que exista más de un tipo de usuario de Firebug. Alguno de ellos pueden no estar usando Twitter y esta encuesta no les habrá llegado. Los tipos de usuarios que respondieron y dijeron que su característica favorita era el Inspeccionador de HRML y la edición en vivo de CSS son probablemente el mismo grupo de personas que no hacen un uso extensivo del depurador de Scripts. Si sos un arduo depurador, por favor exprésalo en los comentarios.
Menciones Honorables
• Editor de nodos HTML – Si haces doble click en un tag en la vista HTML, verás un editor de nodos. Haciendo click en el boton "Editar" o usando la tecla Escape te sacarán de ahí.
• Registración de Eventos – haz click derecho en un nodo en el panel HTML y selecciona "Registrar Eventos". Ahora cada mousemove, click y keytroke en ese nodo será registrado en la Consola. Cómo puedes no amar eso?
No hubo ningun voto(!) para el panel de Red, así que claramente todo el mundo lo ama y piensa que es alucinante.
Conclusiones
• Necesitamos trabajar más duro en arreglar errores y problemas de estabilidad. Emplear un montón de esfuerzo en estabilidad y usabilidad probablemente sea una muy buena manera de hacer de Firebug una mejor y más placentera pieza de software.
• Las pestañas de CSS y DOM no son muy queridos. Agregar una mejor navegación a la página de DOM, o rehacerla por completo puede ser útil. Deshacerse por completo de él y el panel de CSS puede ser otra opción, pero no una que queramos considerar sin ver una fuerte devolución desde la comunidad.
• El Perfilador va bastante bien con el panel de Script. Si no estas haciendo una fuerte depuración de JavaScript, puede que no necesites el perfilador. Es una herramienta de un uso bastante específico para medir la performance del JavaScript de una página.
• La Búsqueda fue casi una sorpresa, pero la estamos mejorando para la versión 1.5 así con un poco de suerte se vuelve más sencilla de usar.
Al igual que antes, por favor déjanos tus comentarios si piensas que algo se nos pasó por alto.
Encuesta sobre Características de Firebug ~ parte 1
Lo siguente es una traducción de un post de Rob Campbell (Aquí está el original), uno de los desarrolladores de Firebug. Espero que les resulte tan interesante como a mí.
La semana pasada hice una encuesta un poco informal mediante Twitter y Rypple, preguntandole a los usuarios cuales eran las características de Firebug que más querían y cuales menos. Yo voy a ser la primer persona en admitir que esta encuesta no es exactamente de una rigurosidad científica, dado que sólo tuvimos un numero limitado de encuestados de un espacio muestral posiblemente limitado (más que nada usuarios de Twitter de habla inglesa, a lo sumo conectados a mi con sólo unos pocos niveles de indirección). De todos modos los resultados fueron interesantes, dado que confirmaron lo que sospechaba acerca de la mayoría de la gente usando Firebug. Espero completamente que haya otros tipos de usuarios que graviten más fuertemente hacia otras características.
El desglose de los datos de esta torta 3D muestra que el 55% de los usuarios llaman por lejos al Inspeccionador su característica favorita. En realidad, esto es probablemente cercano al 73% si lo combinas con el 18% que indicó al tab HTML como su favorito. Cuando que la mayoría de la gente piensa "inspeccionar" o "html", la siguiente característica que describen es "ser capaz de modificar el CSS o ver la maquetación de tal nodo en el panel HTML".
La siguiente característica favotira es un empate entre el Panel de Red y la Consola. Es posible que desde que recolecté las respuestas ese empate se haya roto, pero ciertamente no por mucho, y probablemente no dentro de un apropiado margen de error. El restante 9% de las respuestas era ruido incompresible de la internet. La estática cósmica de fondo tomando consciencia propia.
Cómo ayuda esto? Bueno, desde luego que nos dice donde necesitamos enfocar nuestros esfuerzos. Hemos visto unos cuantos errores en el Inspeccionador durante el último par de años y creemos que en la versión 1.5 vamos a tener a la mayoría de ellos arreglados. El molesto resaltado desfasado y los raros errores con el z-index deberían ser cosa del pasado gracias al trabajo del colaborador Mike Ratcliffe, que llego a nosotros a través del poryecto Firebug Lite.
Pienso continuar un poco más tarde con los resultados de pregunta acerca de "la característica ménos querida". Esos son un poco más de difíciles de encontrarle el sentido, dado que las respuestas no fueron tan obviamente claras. Por favor haznos saber si este gráfico de torta coincide ( o no ) con lo que tu piensas es tu categoría favorita. Éste no es el fin de la cuestion, recién estamos empezando.