Otro Blog Geek

Edito (15 de junio de 2008 – 11:52 ): He añadido un par de modificaciones que hay que hacer a la configuración de apache.
Edito (16 de junio de 2008 – 12:10): Otra corrección necesaria en la configuración de apache.

Symfony es un framework para desarrollar aplicaciones web basándonos en el patrón MVC. Me estoy peleando a fondo con él por que lo estoy usando para mi proyecto fin de carrera y me viene genial por que me evita pelearme con muchas cosas a la hora de desarrollar la parte de mi proyecto que es una aplicación web.

La instalación es bastante cómoda y se puede realizar a través de PEAR o mediante un paquete .deb. Yo he elegido la opción de PEAR por que me ha parecido más cómoda y así evito tener que añadir otro repositorio a Ubuntu. El proceso es muy simple:

1. Instalamos Apache. Yo tengo la mala costumbre de usar para ello un método bastante “cutre” que consiste en instalar phpmyadmin, ya que así se resuelven todas las dependencias necesarias para Apache y PHP

   1.  
   2. sudo aptitude install phpmyadmin
   3.  

2. Instalamos pear:

   1.  
   2. sudo aptitude install php-pear
   3.  

3. Añadimos el canal de Symfony:

   1.  
   2. sudo pear channel-discover pear.symfony-project.com
   3.  

4. Instalamos Symfony mediante PEAR:

   1.  
   2. sudo pear install symfony/symfony
   3.  

Por último solo nos resta configurar Apache. Para mi proyecto he configurado un host virtual con un log separado, así podré testear y depurar cómodamente. Configurarlo en Ubuntu es muy sencillo, solo es necesario añadir una entrada a /etc/hosts y crear el archivo de configuracion del host virtual. Veamos como hacerlo por pasos.

1. Añadimos la entrada con el dominio que queramos a /etc/hosts. Yo he elegido dominio.com para el ejemplo, pero se puede elegir otro

   1.  
   2. echo "127.0.0.1 dominio.com" >> /etc/hosts
   3.  

2. Ahora creamos una entrada en /etc/apache2/sites-available/dominio.com con el siguiente contenido

   1.  
   2. NameVirtualHost *
   3. <virtualHost *>
   4.         ServerName dominio.com
   5.         ServerAdmin webmaster@dominio.com
   6.  
   7.         DocumentRoot /var/www/src/web
   8.         DirectoryIndex index.php
   9.  
   10.         ## Cambiamos esta ruta por la que nos convenga
   11.         ErrorLog /ruta/al/fichero/de/log/archivo.log
   12.  
   13.         # Possible values include: debug, info, notice, warn, error, crit,
   14.         # alert, emerg.
   15.         ## Podemos cambiar también el nivel de log por el que más nos convenga
   16.         LogLevel warn
   17.  
   18.         CustomLog /ruta/al/fichero/de/log/archivo.log combined
   19.         ServerSignature On
   20.  
   21. #Configuracion de symfony
   22.  
   23.     Alias /sf /usr/share/php/data/symfony/web/sf
   24.  
   25.     <directory "/usr/share/php/data/symfony/web/sf">
   26.         AllowOverride All
   27.         Allow from All
   28.     </directory>
   29.  
   30.  
   31.     <directory "/var/www/src/web">
   32.         AllowOverride All
   33.         Allow from All
   34.     </directory>
   35.  
   36. </virtualHost>
   37.  

3. Por último activamos el host virtual, mod_rewrite y reiniciamos apache

   1.  
   2. sudo a2ensite dominio.com
   3. sudo a2enmod rewrite
   4. sudo /etc/init.d/apache2/reload
   5.  

Solo falta editar el archivo /etc/php5/apache2/php.ini y cambiar la linea magic_quotes_gpc = On por magic_quotes_gpc = On

Algunas aclaraciones. En mi caso el código fuente de la aplicación va en una carpeta de mi directorio de usuario y la carpeta /var/www/src es un enlace simbólico a esa carpeta. Este directorio también queda a vuestra elección, pero hay que tener en cuenta que suele ser necesario hacer cambios en el directorio con el código, por lo que es conveniente tener acceso de escritura y también que hay que hacer los cambios pertinentes en el fichero del host virtual de Apache.

Para comenzar a desarrollar podemos acudir a la página de Symfony y seguir su increíble “tutorial” escrito en forma de libro o en librosweb si preferís el libro en español.

La gente de Spread Firefox está intentando batir el record Guinness de descargas en 24h. Para ello, piden la colaboración de los usuarios.

Que ilusión me haría levantarme una mañana y descubrir que apenas recibo visitas en el blog ni en ninguna otra página desde Internet Explorer… sería casi un sueño hecho realidad…

¿Y tú? ¿Vas a descargar Firefox 3?

NOTA: Ya no es necesario este procedimiento. Han publicado una nueva versión alpha de Firebug 1.2 que corrige estos problemas con Firefox 3b5.

Hace unos días actualicé mi máquina a Ubuntu 8.04 (Hardy Heron). El caso es que esta versión incluye de serie Firefox 3 y eso supone un problema al no funcionar la versión estable de Firebug con esta versión del navegador. La versión beta (1.1) tampoco me dio buenos resultados, por lo que en un ejercicio de locura mental absoluta decidí que si una versión estable y una beta no funcionaban, seguramente lo haría una versión alpha. Así que sin más instalé la versión alpha de Firebug. Pero tampoco funcionó.

Después de investigar un par de días en el grupo de noticias de Firebug conseguí llegar a un hilo en el que se estaban intentando solucionar los problemas con esta versión. El caso es que en la revisión 562 de su repositorio de subversion, parece que han conseguido solucionar casi todos los problemas y Firebug funciona correctamente, con la única pega de que se abre en una ventana aparte en lugar de abrirse en un panel sobre el navegador.

Para instalar esta versión en nuestro Firefox 3 haremos lo siguiente.

1. Instalamos subversion si no está ya instalado en nuestra máquina:
   1. sudo aptitude install subversion
2. Instalamos ant, que es la herramienta que necesitaremos para empaquetar la extensión desde el código fuente.
   1. sudo aptitude install ant
3. Obtenemos la revisión que necesitamos del repositorio de subversion
   1. svn -r 562 checkout http://fbug.googlecode.com/svn/branches/firebug1.2/
4. Empaquetamos la extensión y la dejamos lista para instalarla en el navegador.
   1. cd firebug1.2
   2. ant

Tras el último paso, ant creará el archivo .xpi dentro de la carpeta dist. Ese es el archivo que tenemos que instalar.

Desde hace unos días se habla por todos lados de la beta 1 de Internet Explorer 8. Como siempre lo primero es descargarlo e instalarlo.

Después de la típica instalación, aceptar la licencia, etc. al intentar arrancar el programa me encuentro con un problemita: La Internet Explorer Developer Toolbar no funciona, sin embargo al arrancar el navegador nos permite buscar una actualización y nos lleva a una página donde nos explica como solucionar parcialmente el problema.

La primera en la frente, Google maps no funciona usando el famoso modo “Super Standar”. Aunque sí funciona usando el modo de compatibilidad con Internet Explorer 7. El problema es que para activar ese modo hace falta cerrar todas las ventanas del navegador, lo cual puede resultar algo incómodo ya que Internet Explorer no parece tener ningún sistema de almacenamiento de sesiones parecido al de Opera o Firefox.

Otro problema del navegador es que Flash tampoco parece funcionar demasiado bien. El navegador falla al intentar instalar Flash, de hecho la página de adobe no se muestra correctamente usando el modo “Super estandar”.

Algo que me parece nuevo y que me ha sorprendido gratamente es que cuando una pestaña se bloquea, el navegador se encarga de recargarla después de cerrarla.

En conclusión, sólo se trata de una beta de la nueva versión del navegador, pero me parece tan mal producto como las anteriores. El modo super estandar no consigue lo que promete y la estabilidad deja que desear, aunque esto es totalmente comprensible al tratarse de una beta.

Se está hablando últimamente de algunas actualizaciones en google reader. Un par de atajos de teclado nuevos, etc. Sin embargo parece que nadie se ha dado cuenta de que cuando das a marcar como leídos un número importante de posts Google Reader te pregunta si estás seguro… algo que no hacía antes. Una captura para demostrarlo

Edito: Parece que Mashable.com si que se ha dado cuenta de este detalle y además incluye un enlace bastante interesante con un montón de atajos para algunos servicios web 2.0.

Llevo bastante tiempo buscando una solución más o menos usable para sincronizar un proyectos de eclipse con el contenido de un servidor FTP o al menos alguna solución que permitiera descargar el contenido de alguna carpeta del servidor en un proyecto de eclipse y viceversa. Después de mucho buscar he acabado encontrando dos soluciones en forma de plugins para Eclipse:

• Aptana
• Plugin de FTP y WebDAV

Después de trastear un poco con el plugin de FTP y WebDAV descubrí que lleva un buen tiempo sin ser desarrollado, así que al final he optado por Aptana, que además dispone de algunas otras herramientas bastante útiles.

Instalando Aptana en Eclipse

Lo primero es instalar el plugin, para ello seguimos estas instrucciones. Una vez instalado lo ejecutamos y activamos la vista correspondiente. Si al activar la vista de Aptana Eclipse se cierra con un error parecido a:

java: xcb_xlib.c:82: xcb_xlib_unlock: La declaración `c->xlib.lock’ no se cumple.

No hace falta que nos volvamos locos, aquí una solución para los usuarios de Gentoo. Para los usuarios de otras distribuciones de GNU/Linux simplemente googlead un poco, buscando esta misma solución he encontrado soluciones para otras distribuciones como Ubuntu.

Para solucionarlo seguimos los siguientes pasos:

1. Activamos el use xcb
2. Recompilamos x11-libs/libX11
3. Instalamos x11-libs/libxcb-1.1

Diciendole a Eclipse donde está nuestro FTP

Creamos un nuevo proyecto y posteriormente pasamos a la pesaña “file” de la vista de Aptana. Una vez aquí pulsamos con el botón derecho sobre “FTP” y seleccionamos “Add new FTP site”.

Tras esto se abrirá un diálogo para configurar la conexion: Los datos importantes son server y remote path. El primero es simplemente la dirección el servidor, por ejemplo ftp.midominio.com. El segundo se refiere a la ruta desde la raiz del FTP a la carpeta que queremos sincronizar, por ejemplo /public_html/miblog/wordpress/wp-content/themes/tema. Configuramos también el nombre de usuario y la contraseña y pulsamos en test para comprobar que todo está bien. Cuando funcione pulsamos en ok y listo, ahora a sincronizar el proyecto.

Sincronizando con el FTP

Volvemos a la pestaña “Project” de la vista de Aptana y pulsamos con el botón derecho sobre el proyecto y seleccionamos “Synchronize->Create new Syncrhonize conection”

Se abrirá un cuadro de diálogo en el que solamente tendremos que seleccionar la conexión que hemos creado anteriormente en “Remote”. Ahora ya podemos pulsar en “Synchronize->Synchronize…”.

Esto abrirá un cuadro que nos preguntará si queremos descargar, subir al servidor o mantener sincronizado el proyecto con el servidor. La experiencia me dice que es bastante más cómodo mantener la sincronización “a mano”, es decir, descargar primero os archivos y mantenerlos “sincronizados” subiéndolos cuando los modifiquemos.

Nota importante

Esta solución no es ni mucho menos la más elegante ni la mejor para editar código en un servidor remoto. Sin embargo a veces no queda más remedio y usar FTP es la única solución posible. De todas maneras recomiendo encarecidamente que si tenéis posibilidad uséis otras soluciones, a ser posible encriptadas y aseguradas de alguna forma. Como sFTP o SCP.

Subversion es un software de control de versiones diseñado como un reemplazo de CVS. Este tipo de software permite entre otras cosas:

• Llevar un historial de los cambios realizados sobre un conjunto de archivos.
• Desplazarnos sobre dicho historial permitiéndonos hacer que dichos archivos recuperen el estado que tenían tiempo atrás.
• Mantener diferentes versiones de nuestro código en distintas “ramas” que podremos unir cuando lo necesitemos
• Facilita la colaboración entre desarrolladores.

El objetivo de este HOWTO es instalar y configurar un servidor de Subversion en nuestra máquina local con Gentoo para que nos facilite el control de versiones del software que desarrollamos. No prepararemos el servidor para que permita el uso por parte de varios usuarios esto lo dejaremos para algún HOWTO posterior.

Para ello me basaré en este HOWTO del wiki de Gentoo, sin embargo suprimiré buena parte de su contenido para hacerlo más corto y simple. Cuando terminemos dispondremos de un repositorio local de Subversion.

NOTA: No explicaré los detalles de uso de Subversion, si quieres aprender más acerca de este sistema de control de versiones te recomiendo que le eches un vistazo al libro “Control de versiones con Subversion”

Instalando

Para instalarlo en Gentoo solo necesitamos hacer:

Cuando termine la instalación tendremos Subversion instalado en nuestra máquina.

Creando un repositorio e importando nuestro código

El respositorio es el lugar donde se almacenan nuestro código, el historial de cambios que realizamos sobre él y la configuración.

En nuestro ejemplo crearemos un repositorio local en nuestra carpeta de usuario. Para ello ejecutaremos en consola como usuario normal:

Podemos crear el repositorio en cualquier carpeta, en mi caso la carpeta es ~/trabajo/svn. Existen diferentes esquemas con los que podemos trabajar, un repositorio para cada proyecto o un único repositorio para todos los proyectos. Para facilitar el mantenimiento y por una simple cuestión de economía de escala usaremos el segundo esquema.

El resto de la organización del respositorio es una cuestión personal pero por comodidad lo mejor es organizarlo como se explica aquí.

/proyecto1/trunk
/proyecto1/branches
/proyecto1/tags
/proyecto2/trunk
/proyecto2/branches
/proyecto2/tags


• trunk es el directorio en el que se llevará a cabo el desarrollo principal del proyecto
• branches es un directorio que contendrá ramas diferentes de la principal
• tags constiene diferentes snapshots del repositorio a lo largo del tiempo, que además tendrán un nombre determinado. Esto puede servir, por ejemplo para recordar que la versión 1.0 de nuestro proyecto corresponde con la revisión 157.

De esta forma el directorio trunk de nuestro proyecto contendrá el código que queremos añadir al repositorio y los otros 2 directorios estarán vacios. Ahora, para añadir el directorio al repositorio ejecutamos:

Ahora ya tenemos nuestro código en la carpeta proyecto1 de nuestro repositorio. Podemos comprobar su contenido con el comando:

Listo, ahora “let’s code!”

Ya tenemos el código en el repositorio, ahora solo tenemos que usar Subversion con nuestro cliente favorito. Como Kdesvn o Subclipse.

Hoy me he quedado un poco sorprendido al visitar Google Analytics al darme cuenta de que había unas cuantas funcionalidades nuevas. A simple vista lo primero que nos encontramos es la posibilidad de usar 2 variables diferentes para graficarlas y compararlas de forma sencilla. Muy útil para comparar por ejemplo las visitas desde buscadores frente a las visitas totales, etc.

Una pequeña visita al blog de Google Analytics me ha dejado ver, que además de esa han añadido nuevas funcionalidades, a saber:

• Seis nuevos idiomas.
• Un nuevo código para llevar a cabo las estadísticas que sustituirá al actual en alrededor de un año.

Según el blog de Analytics el nuevo código viene cargado de nuevas características y si queremos cambiarnos ponen a nuestra disposición un documento pdf de 22 páginas en el que explican como hacerlo además de una página con la documentación necesaria para el uso de su API.

Está de más decir que todas estas funcionalidades son, como todo en es web 2.0 que nos rodea, beta, así que es posible que den algún que otro disgustillo a los usuarios.

Enlace: Announcing new graphing tools, ga.js tracking, and six new languages – Google Analytics Blog
Bia: Digg

Para que luego digan que Internet Explorer es seguro.

El primer gráfico muestra el número de errores frente al tiempo. El segundo gráfico muestra el número de errores graves frente al tiempo. Venga… ahora una pregunta para nota… a ver si adivináis cual es el navegador con más errores sin leer la leyenda de colores.

Los gráficos no provienen de un estudio de la fundación Mozilla, ni de Opera, y por supuesto no es de Microsoft. El estudio ha sido realizado por Web Devout una web que intenta promover las buenas prácticas en la web y los datos usados son de Secunia, una empresa de monitoreo de seguridad de software.

Echándole un ojo al estudio detenidamente se deduce lo que ya todos sabíamos, que Internet Explorer tiene más agujeros que un colador y que los demás navegadores también tienen errores de seguridad… pero no son tantos ni tan grandes.

Enlace: El estudio
Via: Genbeta

Me encantaría poder explicarle esto a algunos clientes, pero nada, ellos insisten en que lo mejor es PDF y no hay quien los haga entrar en razón… da igual que te paguen para que les aconsejes y que supuestamente tu seas “el que sabe de esas cosas”. Al final ellos hacen lo que les da la gana.

Menos mal que no hacía falta posicionar la web ni nada por el estilo…

¿Por qué otra librería que hace lo mismo?

Hace poco tuve que terminar de darle forma a un proyecto con Joomla! una de las cosas que más trabajo cuesta es darle estilo a un formulario usando CSS. Probé un par de soluciones como FancyForm y CRIR pero ninguna se adaptaba al código generado por Joomla, así que no me quedó más remedio que escribir mi propio script que hiciera lo propio.

Como funciona.

mooSmartForms está inspirado en otras librerías como CRIR y FancyForm, por lo tanto usa el mismo mecanismo. Mediante Javascript oculta los controles del formulario y añade un estilo para el control desactivado y otro para el control activado a la etiqueta asociada al control.

La librería permite aplicar una clase CSS a los elementos. Hace uso de mootools, de ahí el “moo” del nombre. Para que nuestro código sea “estilizable” tiene que tener las siguientes características.

• Cada checkbox o radio input necesita tener un elemento label asociado a su id.

Listo no hay más requisitos. A continuación un ejemplo de como sería ese código “estilizable”.

Para que el script haga su trabajo hay que insertarlo en la página y además necesitamos mootools.

Un pequeño ejemplo del aspecto que podemos conseguir con la librería. Ejemplo de mooSmartForms

Aquí tenéis mooSmartForms para descargarlo y usarlo como queráis. Tiene una licencia MIT, así que podéis hacerle todas las “perrerías” que os apetezca. Si queréis personalizar el estilo solo tenéis que editar el fichero mooSmartForms.css

Soporte.

He probado mooSmartForms con los siguiente navegadores:

• Internet Explorer 6 y 7
• Firefox 2
• Konqueror
• Safari 3 ( gracias a Álvaro por el testeo )
• Opera

Si conseguís que funcione en otro navegador agradecería que me lo hicierais saber . Aunque también se agradece un aviso con cualquier error que encontréis o con problemas que se me hayan pasado.

Para futuras versiones.

• Estilos para el resto de elementos de los formularios.
• Posibilidad para discriminar los elementos que queremos “estilizar”.
• Capacidad para añadir efectos a las transicciones entre los estados de los elementos.
• Posibilidad de elegir el nombre que queremos darle a las clases CSS de los elementos.

Para terminar.

Si encontráis algún error o algún problema podéis dejar un comentario en el post. Sin necesitáis añadir código al post, por favor, utilizad esta web.

Créditos.

Las imágenes que se usan para el estilo de ejemplo pertenecen al tema de iconos silk icons que tiene licencia Creative Commons.

Estos días me he tenido que pelear bastante en serio con Google Maps y Google Local Search. Necesitaba un mapa que permitiese buscar una dirección y que pudiera, una vez encontrada la dirección, guardarla en una base de datos.

Por suerte Google Maps permite hacer cosas así con poco código aunque de todas maneras me tocó pelearme durante un par de días con su API hasta que conseguí encontrar lo que quería. Casi todo lo necesario se encuentra en la documentación de su API, el único problema es que necesitas saber exactamente lo que buscas antes de poder encontrar algo. En este enlace está la ayuda de Local Search, que aunque no es demasiado extensa tiene algunos ejemplos interesantes.

Mis requsitos exactos eran los siguientes:

• Un mapa con un cuadro de búsqueda
• Un sistema para poder moverse por los resultados de la búsqueda de forma sencilla para el usuario

En este caso particular solo necesitaba las coordenadas del centro del mapa una vez que el usuario ha encontrado lo que buscaba. Este dato se copiará en un campo oculto de un formulario para poder guardarlo en una base de datos. En el ejemplo se mostrarán las coordenadas en un DIV junto al mapa.

Una vez que sabemos lo que necesitamos nos ponemos manos a la obra. Vamos a repasar las herramientas que vamos a usar:

• Lo primero que necesitamos es una key para acceder al API. Para ello visitamos esta dirección. Lo único necesario para conseguirla es una cuenta en Google, sirve la que se usa para acceder a GMail.
• Como vamos a hacer un uso intensivo de Javascript es una buena idea buscarse un ayudante. En mi caso he echado mano a la librería mootools 1.11 por que es con la que mejor me llevo, pero imagino que sirven otras librerías del mismo estilo como jQuery o prototype. El motivo para usar este tipo de librerías es que permiten moverse libremente por el árbol DOM del documento HTML y capturar eventos que ocurren en él de forma sencilla. Dos tareas que vamos a necesitar para nuestro ejemplo.
• Por último no nos puede faltar nuestra navaja suiza para el desarrollo web: Firebug ya que nos permitirá depurar y testear nuestro Javascript de forma sencilla.

Aquí podéis encontrar el ejemplo terminado y aquí os lo podéis descargar. Tiene una licencia MIT, así que podéis hacer lo que queráis con él, aunque agradecería un aviso si lo usáis para cualquier cosa, simple curiosidad

Por último unas cuantas aclaraciones. He intentado comentar el código lo más claramente posible, si tenéis cualquier duda podéis preguntar en los comentarios e intentaré responder. Si tenéis que añadir el código al post, por favor, hacedlo aquí (aquí tenéis una ayuda por si no sabéis usarlo) y añadid un enlace en el post.

He comentado el codigo linea por linea para los que, como yo, no tengan ni idea de Javascript, mootools o Google Maps. Espero que a ellos les pueda servir como ejemplo de lo que se puede hacer con estas 3 tecnologías juntas.

Hace unos días necesité una lista los más extensa posible de provincias españolas, con sus poblaciones y códigos postales correspondientes. El caso es que después de buscar durante un buen rato encontré esto.

La lista está en tres formatos: XML, texto plano y MySQL. Al final yo no conseguí averiguar como subir la base de datos en MySQL a mi servidor… así que tuve que optar por escribir un script en php para extraer la información que necesitaba del archivo de texto. Al final, como soy un poco descuidado lo perdí. Pero para los que necesiten escribir uno nuevo un par de pistas.

Hace falta usar las funciones: fopen, strtok y fgets.

Por motivos de trabajo llevo una temporada trabajando y destripando Joomla 1.5. Es el principal culpable de que últimamente postee con cuentagotas.

Este CMS es uno de los más usados del mercado y en esta nueva versión han mejorado bastante. Su licencia es GPL 2 y está programado en PHP.

Ya había usado las versiones 1.0.X con anterioridad y me sorprendían enormemente su facilidad de uso y la cantidad de extensiones, plugins y módulos que se podían encontrar para él. Aunque administrar una página web no es una tarea trivial Joomla facilita enormemente la tarea. Dispone de herramientas para administrar usuarios, artículos (en forma de weblog), contactos, enlaces, etc. y además su API para la creación de plugins y componentes es bastante extensa y soporta el patrón MVC.

Hasta ahora nunca había tenido que programar un componente para Joomla, sin embargo la tarea no es imposible. En la página web de Joomla podemos encontrar una ayuda bastante buena para esta tarea: un API bastante completo (aunque algo caótico) y algunos ejemplos de código además de un foro con bastante actividad.

El principal problema es que la documentación de la versión 1.5 aún no está completa y claro, tarde o temprano tienes que acabar buceando en el código de los componentes que forma el núcleo de Joomla a los cuales, dicho sea de paso, les falta un poquito de documentación. Esa es la única pega que le veo, aunque quizá sea por que estoy muy acostumbrado a Java y la documentación que incluye de serie me resultaba muy cómoda.

Por cierto en Leandono’s Blog se puede encontrar la primera parte de un tutorial bastante prometedor para la creación de plantillas de Joomla.

Por último recomendaros algo de bibliografía sobre el tema: Learning Joomla 1.5 Extension Development de Packt publishing esta muy bien y además de incluir muchos ejemplos de código avanza paso a paso en el desarrollo de una web completa con Joomla y explica muchas cosas acerca del API de Joomla que no son fáciles de averiguar.

Si el trabajo me deja un poco de tiempo intentaré postear algún ejemplo “tonto” de un componente muy básico.

Ya dije en la entrada “Extensiones útiles para Firefox ( mis favoritas )” que algunas de las extensiones que uso son bastante específicas para el diseño web. Intentaré hacer una pequeña serie de posts hablando de ellas y dando algunos consejos para su uso.

Aunque hay bastantes extensiones que pueden resultar muy útiles para el diseño y desarrollo de páginas web yo uso principalmente dos, que son las siguientes ( en orden de importancia según el uso que les doy ):

1. Firebug
2. Webdeveloper Toolbar

Sin lugar a dudas para mí la estrella es Firebug. En este primer post voy a centrarme en ella y poco a poco veremos como usarla para que nos asista en el desarrollo.

Firebug: Instalación

Para instalar la extensión nos vamos a su web y pulsamos en el botón grande y naranja que dice “INSTALL FIREBUG 1.0 FOR FIREFOX”. Esta es la parte fácil del tutorial

Lo más básico.

Mediante firebug podemos acceder al árbol DOM de la web y editarla “on the fly”, además es perfecto para darle esos últimos retoques a las hojas de estilos que se nos resisten. También podemos usarlo para optimizar el tiempo de carga de la página, averiguar si hay algún elemento que no carga bien, depurar nuestro javascript, y muchas otras cosas que yo todavía no he descubierto. Para nuestro ejemplo usaremos un pequeño fichero HTML que contiene 2 div y una hoja de estilos bastante rudimentaria.

Como podéis ver es algo bastante rudimentario lo primero que vamos a hacer es inspeccionarlo y ver lo que lleva por dentro. Para ello abrimos la web de ejemplo y abrimos firebug con ella abierta. Para abrir podemos abrir Firebug por las siguientes vías.

• Herramientas > Firebug > Open Firebug
• Pulsando en el botón correspondiente en la barra de estado del navegador

(más…)