Artículos relacionados:

• 4 de septiembre, 2008 -- Firefox 3 y Exponentcms

Debemos fijarnos siempre, y tener en cuenta, que nuestra meta, como ya repetí en el artículo anterior, es que debemos conseguir un tiempo de carga mínimo. Esto no significa que debamos cambiar nada de nuestra capa de presentación de la página. Hace referencia a la carga de las imágenes, a la carga de nuestras librerías javascript, al número de llamadas AJAX, a nuestros SWFs.

Yo, personalmente y a la hora de hacer webs, hago bastante uso de AJAX (Asynchronous JavaScript And XML, http://es.wikipedia.org/wiki/AJAX). Esto abre un abanico de posibilidades increíble para ahorrar ancho de banda, hacer menos largas las esperas de nuestros visitantes, y dar un dinamismo a la página que hace unos pocos años esto era impensable. Y la pregunta que nos podremos hacer en este punto puede ser… ¿por qué estamos ahora hablando de AJAX? Precisamente porque firebug nos ayuda a ‘depurar’ nuestras llamadas asíncronas al servidor. La pestaña de consola nos muestra todas las llamadas que se hacen asincrónicamente desde que se carga la página. Además no sólo eso sino que va un poco más alla: muestra todos los parámetros usados (de GET o POST) para la llamada y la respuesta del servidor a la misma.

En esta misma consola podremos ejecutar funciones javascript que estén ‘presentes’ en la página que se está cargando en ese momento de la ejecución. Esto nos lleva a un control total del comportamiento de nuestras funciones, ya que podremos usar esta característica para depurar y optimizar dicho comportamiento para que sea el deseado por el programador.

La pestaña HTML nos muestra el lenguaje de marcas que está interpretando el navegador. Además no solo lo muestra como si fuera texto plano, sino que nos resalta en la página las partes en las cuales coloquemos el cursor del ratón encima. Por ejemplo si colocamos el cursor encima de:

<input type="submit" value="Buscar con Google" name="btnG"/>

La página nos aparecerá de la siguiente forma:

Además firebug dispone de un botón inspeccionar para ir con el ratón por los diferentes objetos de la página y él te resalta el códgio HTML al que hace referencia. Todo esto nos viene genial para posicionamiento de los objetos dentro del espacio web del navegador firefox. Además podremos modificar como queremos dicho código, viendo su resultado inmediatamente. Podemos cambiar, por ejemplo, in situ el estilo de un label, o de un botón.

Otra pestaña interesante es la que nos resume todas las hojas de estilo que están involucradas en la decoración de la página que actualmente se está viendo. Podemos, como en el caso anterior, modificar in situ cualquier estilo viendo su resultado inmediatamente. Por ejemplo podemos cambiar la propiedad color de texto de negro (#000000) a blanco (#FFFFFF) para ver qué color de letra nos gusta más. Esto evita que tengamos que salir del navegador, ir a nuestro programa de edición web cambiar el color y actualizar nuestra página en el navegador. Además podremos añadir propiedades de estilo nuevas.

La pestaña Script (o Guión si es la versión castellano) sirve para controlar nuestros scripts de cliente. Podremos añadir puntos de ruptura en una instrucción, ver el contenido de nuestras variables y comprobar, en el fondo, si hace lo que nosotros habíamos diseñado. Veremos además que existen teclas de función para ir instrucción por instrucción recorriendo todo el flujo de ejecución o simplemente recorriendo las instrucciones de una función sin meterse en las que métodos hijos de esta última. Esta pestaña es de solo lectura.

Existe una parte de este plugin que es llamado DOM (Document Object Model, quién no sepa lo que es que se de una vuelta por Wikipedia). En el podemos ver todos los elementos existentes en la página, con sus propiedades. Esto nos puede servir (es el mayor uso que le hago) para localizar determinado objeto por medio de javascript y modificar sus propiedades. Por ejemplo, trabajar con anchos de objeto para posicionar otros de forma que no se superponga ninguno. Esto lo podemos hacer con el DOM y esta herramienta del plugin.

Por último existe el network, o red en castellano, que nos muestra todos los ficheros externos a nuestro HTML que se usan para darle funcionalidad y acabado a la página, como son swf, jpgs, javascripts, llamadas Ajax, etc. Se muestra el tiempo de carga de cada elemento y su tamaño. Esta información es vital para esforzarnos en mejorar el tiempo de carga reduciéndolo al mínimo (reduciendo imágenes o swf, comprimiendo cabeceras HTML, minimizando el código javascript, etc.

Esto es todo. Me he dejado detalles pero son poco importantes creo. De todas formas si teneis alguna duda poned algún comentario a este artículo y yo responderé con gusto. Ah! Se me olvidaba, un plugin de este plugin llamado YSlow de yahoo es muy útil también para reducir el tiempo de carga de una web ya que te dice en qué elementos podremos reducir el peso de la web.

Artículos relacionados:

• 16 de febrero, 2009 -- Firebug, el arte de hacer webs (Parte 1)
• 4 de noviembre, 2009 -- 2 monitores en el mismo equipo (escritorio extendido – “Twin View”) con xrandr
• 3 de julio, 2009 -- Trabajar con doble monitor

Es una herramienta de desarrollo web con la que podemos editar, debugear javascript o html así como modificar los estilos de una página. Además nos ayudará a analizar el peso que tiene nuestro HTML (monitorizar todas las peticiones que se hagan al servidor: imágenes, librerías javascript, etc) por lo que podremos siempre optimizar el rendimiento del mismo de forma que consigamos una velocidad de carga óptima. La rapidez en la carga de una página, que es consecuencia directamente de la velocidad de respuesta del servidor donde está alojada la misma, es una característica que se debe perseguir siempre en el desarrollo web, es una meta que hay que alcanzar para que nuestro sitio web sea ágil y dinámico y no sea causa de un desinterés por parte de nuestros visitantes.

Cuando reinicias tu firefox después de habértelo instalado aparece un ‘bichillo’ (insecto que es parecido a una cucaracha) en la esquina inferior derecha de nuestro navegador, consecuencia de que podemos empezar a trabajar con él. Haciendo click en ese insecto o presionando la tecla F12 aparecerá el espacio de trabajo del nuestro recién llegado.

En esta primera parte del post voy a describir las características del plugin, lo que nos permite hacer este a la web que se está mostrando en ese momento en el navegador mozilla.

* Inspeccionar y editar el HTML. Hace muy sencillo el análisis y la edición del texto HTML. Podremos modificar el HTML al vuelo y ver los resultados directamente en el navegador. Si cambiamos dese firebug la etiqueta title de nuestra página veremos que inmediatamente después a aceptar los cambios el título ha cambiado.
* Controlar todas las hojas de estilo: hay una pestaña dentro del espacio de trabajo que nos muestra todos los estilos que están involucrados en el diseño de nuestra web.Esta característica actúa de la misma forma que la anterior cualquier cambio que hagamos de los estilos se verán instantáneamente. Podremos modificar cualquier valor de cualquier estilo, y, además, añadir más etiquetas.
* Resalta las partes de la web que nosotros queramos: firebug nos puede resaltar con distintos colores por ejemplo divs, botones, cajas de texto. Esto nos puede venir bien para posicionar elementos dentro de la página.
* Monitorizar la carga. La carga de una página implica pedir al servidor determinados recursos tales como imágenes, ficheros de código javascript, peticiones de funciones de servidor (php, python, ajax). Todas estas peticiones son mostradas y captadas por este plugin, aportando, además, por cada petición, información muy valiosa como por ejemplo, el tiempo de respuesta del servidor para un recurso determinado. Todo esto enfocado siempre a la velocidad de carga, ya que podremos ver qué parte (imagen, librería javascript, etc) de nuestro sitio es la que más pesa y por tanto la que más ancho de banda consume, siendo ahí donde deberemos esforzarnos en reducirlo. Véase la siguiente imagen:

* Debug de javascript: posee un debugger indispensable para nuestra programación javascript. Actúa como cualquier otro debugger: podremos colocar puntos de interrupción donde queramos e ir instrucción por instrucción analizando el valor de nuestras variables.
* Errores en la carga de la página: existe una página ‘consola’ que nos informa de todos los posibles errores que han podido surgir en la carga de una página, generalmente errores en la programación. En esta misma consola podremos ejecutar instrucciones javascript.

De momento eso es todo, seguramente que me deje muchas cosas en el tintero, pero lo que he expuesto es lo más básico de este gran plugin. Personalmente creo que es una herramienta muy útil para el desarrollo

Cuando tenga un poco más de tiempo explicaré cada una de las características un poco más en profundidad. Asimismo, en próximas publicaciones hablaré de otro plugin que trabaja directamente con este llamado YSlow, incidiendo un poco más en la velocidad de carga de una página.

Artículos relacionados:

• 21 de febrero, 2009 -- Firebug, el arte de hacer webs (Parte 2)
• 4 de noviembre, 2009 -- 2 monitores en el mismo equipo (escritorio extendido – “Twin View”) con xrandr
• 3 de julio, 2009 -- Trabajar con doble monitor

Actualmente, llevo todo el verano trabajando con firefox y ya parece ser más estable, a excepción de cuando estoy editando páginas con exponentcms. Tengo ya comprobado, que de vez en cuando, pero siempre teniendo abierto el FCKeditor (editor de texto utilizado en exponent), firefox casca y se cierra de golpe. No se muy bien si se debe a exponent, o se debe al FCKeditor o se debe a firefox. Lo que si se muy bien, es que antes con la versión anterior de firefox, esto no sucedía nunca.

Artículos relacionados:

• 29 de septiembre, 2008 -- Migrar exponentcms 0.96 a 0.97
• 5 de julio, 2009 -- Despediré a Firefox…cuando salga Chrome
• 8 de mayo, 2009 -- Gestores documentales I. Webshare
• 6 de febrero, 2009 -- Error FCKEditor: FCKConfig.CoreStyles['Font Face']
• 19 de octubre, 2008 -- Caso de éxito: ExponentCMS y posicionamiento SEO