Firebug es una magnífica extensión para Mozilla Firefox que todos los que se dedican al desarrollo web tienen sin duda instalada en su navegador.

Pero como no todo puede ser positivo, debemos decir que Firebug puede reducir la velocidad de nuestro navegador debido al gran número de operaciones que esta extensión lleva a cabo.

¿Dónde está el problema?

Firebug está continuamente monitorizando las llamadas a 'XMLHttpRequest' lo que en muchas páginas lleba a ralentizar el uso de nuestro navegador, el caso más famoso se da con Gmail, antes esta situación Google nos advierte en la parte superior con un mensaje que dice "Se sabe que Firebug reduce la velocidad del navegador si no está configurado correctamente".

La solución

Usuarios de Windows o Linux

Para inhabilitar Firebug:

1. Haz clic en el icono verde o rojo situado en la esquina inferior derecha de la ventana del navegador para abrir Firebug.
2. Haz clic en el icono de error en la esquina superior izquierda de Firebug y selecciona "Inhabilitar Firebug para mail.google.com".

Si deseas mantener Firebug en funcionamiento, puedes mejorar el rendimiento de Gmail siguiendo estos pasos:

1. Haz clic en el icono verde o rojo situado en la esquina inferior derecha de la ventana del navegador para abrir Firebug.
2. Haz clic en la pestaña Console (Consola).
3. Selecciona Options (Opciones).
4. Desmarca Show XMLHttpRequests (Mostrar SolicitudesXMLHttp).
5. Haz clic en la pestaña Net (Red).
6. Selecciona Options (Opciones).
7. Desmarca Disable Network Monitoring (Inhabilitar supervisión de red).

Firebug es una magnífica extensión para Mozilla Firefox que agradecerán sobre todo los que se dediquen al desarrollo de sitios web y que sin duda una vez la has utilizado se convierte en un complemento indespinsable.

Con ella podremos editar y depurar código, además de monitorizar el sitio sobre el que trabajemos.

Funcionalidades de Firebug

• Edición de HTML en tiempo real
• Edición online de hojas de estilos
• Monitorea el tiempo de carga de las páginas
• Depurador de Javascript
• Gestor de errores en Javascript, CSS y XML
• Explorador del DOM

Puedes utilizar Firebug para aprovecharte de alguna de estas funcionalidades pero si tuviéramos que destacar alguna la que se lo merece es el genial Depurador de Javascript.

Debido a sus grandes posibilidades para conseguir un buen dominio de la aplicación necesitaremos un buen periodo de aprendizaje.

Consola de Firebug

La consola de Firebug es la herramienta que necesita cualquier desarrollador web para hacer de su aplicación una aplicación de calidad, esto se debe a que gracias a ella podrás eliminar de tu aplicación los molestos alert().

La consola de Firebug tiene 6 apartados:

1. Console
2. HTML
3. CSS
4. Script
5. DOM
6. NET

Console

La consola es uno de sus puntos fuertes, muestra las peticiones AJAX (GET o POST) que realiza la página, headers, variables enviadas y la respuesta del servidor.

También nos muestra los errores Javascript que se producen en la página junto a un enlace dónde podemos ver la línea de código errónea.

Por último disponemos de una API muy interesante, Firebug añade una vaiable global llamada "console" a todas las webs cargadas en Firefox, este objeto contiene muchos métodos que nos permiten mostrar información en la consola de un modo transparente y sin necesidad de recurrir a los molestos "alert()".

HTML

Mediante esta funcionalidad Firebug nos editar el html en tiempo real y encima nos da muchas facilidades para ello, especialmente interesante es el "Inspector de HTML" que nos permite detectar los elementos deseados únicamente pasando el ratón por encima, una vez tenemos localizado el elemento lo podremos editar en tiempo real.

• Ver código fuente generado
• Resaltar cambios
• Editar HTML en tiempo real
• Encontrar elementos con el ratón
• Inspeccionar un elemento y recargarlo sin perderlo
• Copiar el HTML

CSS

En esta pestaña podrás acceder fácilmente a la edición de estilos de la página, es muy intuitivo y tremendamente útil ya que todos los cambios se realizan en tiempo real.

A menudo los pequeños retoques de hojas de estilo se convierten en una tarea nada agradable para el desarrollador ya que su comportamiento en cada navegador es en numerosas ocasiones diferente, esta herramienta es ideal para principiantes que necesitan de muchas pruebas para encontrar los errores en su hoja de estilos, el famoso método de "Try & Error".

• Previsualizar colores e imágenes
• Inspeccionar la hoja de estilos
• Editar estilos y ver los cambios en tiempo real
• Ayuda en línea y corrector de errores tipográficos

Script

Como anteriormente hemos resaltado posee un potente debugger de Javascript que nos permite manejar a nuestro antojo la ejecución de los códigos javascript, con un poquito de paciencia se puede llegar a conseguir un buen aumento del rendimiento de nuestro código.

• Encuentra cualquier Script fácilmente
• Ejecución paso a paso
• Detección de errores y puntos de ruptura
• Ver el valor de las variables en tiempo real
• Saltos fáciles a cualquier línea del código
• Modo "Profile" que muestra un completo análisis de los tiempo de carga y ejecución que ha provocado tu navegación por la página.

DOM

Como no Firebug también nos ayuda a encontrar los objetos DOM de una manera relativamente sencilla y editarlos al vuelo, para aquellos que anden un poco despistados con la traducción de DOM pordríamos decir que es algo así como el "Modelo en Objetos para la representación de Documentos" y por lo tanto se trata de la interfaz a través de la cual los programas y scripts pueden acceder y modificar dinámicamente el contenido, estructura y estilo de los documentos HTML.

• Resumen de objetos
• Muestra el árbol DOM de la página
• Edición en tiempo real
• Navegación por el código Javascript

NET

¿Tu web va algo lenta?, la solución la puedes encontrar con esta útil herramienta puedes comprobar dónde se pierde el tiempo de la carga de tu web gracias a su genial línea de tiempo, entre sus características más destacadas está la diferenciación entre la carga de caché del servidor y la que no se encuentra cacheada.

• Línea de tiempo
• Filtros por tipos de archivos
• Ver que datos se sirven en caché
• Examina las cabeceras
• Monitoriza el XMLHttpRequest

Ayer escribíamos una entrada que comentaba lo útil que puede lleagr a ser Timeplot de SIMILE Project.

Cómo ya comentamos SIMILE se trata de un proyecto de MIT Libraries y MIT CSAIL que se centra en el desarrollo de robustas herramientas (Open Source) basadas en la Web Semántica.

En concreto Timeplot tiene a mi parecer un enorme potencial, en este caso vamos a ver como podríamos hacer una aplicación que nos sirva como lector y visualizador de estadísticas de páginas, el resultado como se puede ver en el ejemplo es extraordinario ya que conseguiremos generar una gráfica muy parecida a las ofrecidas por Google Analytics.

Visualizador de gráficas estadísticas con Timeplot

Crear gráficas personalizadas con Timeplot

Lo primero será leernos la documentación necesaria para crear un ejemplo de gráfica con Timeplot.

En estos enlaces puedes encontrar la documentación necesaria para crear un simple ejemplo con TimePlot:

• ¿Cómo crear una gráfica en TimePlot paso a paso?
• Wiki de TimePlot
• JSDocs: Documentación sobre el código Javascript de Timeplot
• Repositorio del código

Visualizador de gráficas con Timeplot

Para hacer un visualizador de gráficas necesitaremos una fuente de datos, en nuestro caso utilizamos las estadísticas obtenidas gracias a Statcounter de estos dos últimos años.

Archivo de texto con estadisticas
Visualizador de estadísticas con Timeplot

Como fuente de datos vale con que tengamos un fichero de datos que separe los campos por comas y el único requisito indespensable es que el primer campo sea el dato fecha.

2006-11-27,9572,7227,6487,2740
2006-11-28,5697,4527,4170,2357
2006-11-29,5070,3974,3643,2331
2006-11-30,5234,3907,3568,2339
2006-12-01,5011,3702,3399,2303
2006-12-02,4171,3263,3059,2204
2006-12-03,3754,3098,2931,2167
2006-12-04,13329,9757,7844,3913

Una vez tenemos los datos y como se puede ver en la documentación podremos cambiar bastante el aspecto de las gráficas.

Hace ya un tiempo escribíamos una entrada que comentaba algunos datos interesantes de SIMILE Project, y no hace demasiado también hablabamos de Timeplot.

Cómo ya comentamos SIMILE se trata de un proyecto de MIT Libraries y MIT CSAIL que se centra en el desarrollo de robustas herramientas (Open Source) basadas en la Web Semántica.

De la lista de proyectos que podeis encontrar en la página de SIMILE Project uno de los más nuevos es el de TimePlot que se trata de un estupendo sistema de gráficas y que permite sobreimpresionar los diferentes eventos utilizando los mismos formatos de datos que utilizaba TimeLine.

Este sistema tiene un enorme potencial y se me ocurren muchísimas aplicaciones a las que poder aplicar sus funcionalidades, como por ejemplo un lector y visualizador de estadísticas de páginas.

Documentación TimePlot

En estos enlaces puedes encontrar la documentación necesaria para crear un simple ejemplo con TimePlot:

• ¿Cómo crear una gráfica en TimePlot paso a paso?
• Wiki de TimePlot
• JSDocs: Documentación sobre el código Javascript de Timeplot
• Repositorio del código

Un curioso y divertido truco para rotar letras visto en este foro, se trata de una función Javascript que sustituye las letras dadas por los caracteres que más se le parecen al rotar las letras del texto 180º.

Girar Texto

Tras esta breve presentación de Unicode pasemos a ver el truco Javascript para rotar las letras de un texto. Para probarlo introduce una cadena de texto en el campo "Original" y pulsa el botón "Girar Texto".

En la gran mayoria de los caracteres se utilizan caracteres unicode pero tambien hay algunos caso en los que para representar una letra del alfabeto invertida se utiliza otra letra del alfabeto para representarla:

b -> q
d -> p
g -> b
l -> 1
n -> u
o -> o
p -> d
s -> s
q -> b
x -> x
z -> z

Yahoo Developer Network ofrece a los desarrolladores una variedad de características, como acceso a las API, ejemplos de código fuente, grupos de discusión, listas de correo y secciones es las que se pueden previsualizar herramientas creadas por Yahoo.

Esta serie de herramientas pretende dar solución a los problemas de diseño e interfaz que aparecen en cualquier portal web: autocompletado, pestañas de navegación, Drag & Drop, paginación y calificación.

Se pueden encontrar ejemplos en JavaScript y PHP para infinidad de aplicaciones, desde elementos de interface de usuario hasta cómo parsear las respuestas XML de los Yahoo! Web Services. Es una genial reocopilación de recursos de programación para poder construir nuestro propio portal con numerosas de funcionalidad Ajax para implementar.

Bueno despues de buscar durante un tiempo y con unos pequeños scripts con los que he podido parsear contenido de alguna página que otra he conseguido una lista decente de provincias y municipios de España.

Es increíble ver lo difícil que es encontrar este tipo de información en Internet con un formato apropiado para crear las listas (xls, csv o en BBDD).

Aquí os dejo un pequeño combo dinámico bastante simple y con un código Javascript un tanto rústico, estoy seguro que más de uno lo agradecerá.

Ver / Descargar código fuente
Ver ejemplo

Esta lista como comento no es muy completa, si lo que necesitas es un listado con un mayor número de ciudades podemos encontrarlos en esta entrada de la Wikipedia (Lista de Provincias de España), es un poco difícil de parsear pero con un poco de esfuerzo se puede conseguir y es sin duda la más completas de las que se pueden encontrar por Internet.

Hoy en día proliferan en la red los sitios "tipo iGoogle", este tipo de diseños son muy prácticos a la hora de tener un portal con capas móviles y que se puedan reposicionar al estilo de los portales citados (Netvibes, iGoogle).

Prototype Portal Class es una librería Javascript muy interesante para facilitarnos el desarrollo de este tipo de aplicaciones.

Esta demo está testeada para funcionar en Safari, Firefox, Opera e IE 6/7, como cabe esperar esta librería se basa en el uso de la potente Prototype, más en concreto en la versión Prototype 1.5.1.1. Si alguien todavía no sabe ¿Qué es Prototype?... es un framework basado en JavaScript que se orienta al desarrollo sencillo y dinámico de aplicaciones web con el uso de técnicas Ajax.

Portal de prueba

Protoype Portal Class

Para crear y personalizar "nuestro Portal" tendremos que seguir unos sencillos pasos:

• Crear el HTML
• Crear las capas
• Definir el funcionamiento de las capas
• Personalizar el portal

Crear el HTML | "index.html"

Para el correcto funcionamiento del portal necesitaremos hacer las llamadas para incluir las librerías necesarias, estos archivos se incluyen en la cabecera de nuestro HTML.

<link rel="stylesheet" href="page.css" 
type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="default.css" 
type="text/css" media="screen" charset="utf-8" />  
<script type="text/javascript" src="prototype.js"></script> 
<script type="text/javascript" src="effects.js"></script> 
<script type="text/javascript" src="builder.js"></script> 
<script type="text/javascript" src="dragdrop.js"></script> 
<script type="text/javascript" src="portal.js"></script>  

Crear las capas | "index.html"

Una vez cargadas las librerías necesarias tenemos que crear las capas que usarán las funciones de las librerías y que compondrán la estructura básica de nuestro portal. Estas capas como se puede ver en el ejemplo se pueden reposicionar dentro de la página.

Tendremos una capa principal con tres columnas:

<div id="page">
<div id="widget_col_0"></div>
<div id="widget_col_1"></div>
<div id="widget_col_2"></div>
</div>