pon css en tu vida!

Aunque no creo que existan datos oficiales, creo que si no todo el mundo, el 95% de los que nos dedicamos al mundo web utilizamos Firebug.
Personalmente, ¡no soy capaz de imaginar cómo maquetar una web sin utilizarlo!

Una de las funcionalidades que echo en falta es poder ver el CSS en formato plano. Me explico:
Cuando durante la maquetación modificas propiedades de 4 o 5 elementos, después me resulta muy engorroso tener que acordarme de qué he hecho, y dónde.
Y, ¿a que viene todo esto?

Ayer descubrí una extensión para firefox, que si bien no está destinada a reemplazar a firebug, puede ser un gran complemento.

Phoenix permite editar el código CSS y Javascript de cualquier web, y ejecutar esas modificaciones para observar los resultados. También podremos ver el código HTML, tanto el original como el generado después de ejecutar el javascript. Eso sí, no podemos hacer modificaciones en el HTML.

Pero eso no es todo, Phoenix nos muestra los archivos CSS y js que se cargan en la página y su tamaño. Su editor de código, que colorea la sintaxis, es capaz de comprimir y minificar cualquier CSS o javascript, y también hacerlo a la inversa. Cualquier script de javascript comprimido (con packer ) o minificado (minify), Phoenix es capaz de descomprimirlo para que sea perfectamente legible.

Podremos ver en vivo los cambios que realicemos, tanto en CSS como en javascript. No tan “en vivo” como con Firebug, pero sí después de activarlo a través de “Execute CSS” o “Execute JS”.

Por último, Phoenix también permite guardar en nuestro ordenador los archivos.

Recordad que Phoenix está todavía en versión experimiental, por lo que, dicho finamente, tiene licencia para pegar todos los petardazos que quiera Sin embargo, a mí todavía no me ha fallado en los días que llevo utilizándola.

Eso sí, aún tiene un problema con la codificación de caracteres, al menos en los CSS: > que convierte en > , etc…

Sin embargo, es una extensión totalmente recomendable, con la que se pueden hacer grandes cosas si se acompaña con firebug, y alguna que otro add-on interesante.

Animaos a probarla, y contadme que os ha parecido.

Web del proyecto Phoenix.

Descarga la extensión para Firefox Phoenix.

Vía @vladocar

Todo desarrollador/maquetador web que se precie, conoce y usa Firebug.  Una de las mejores cualidades que tiene, es que se pueden “extender” sus características a través de otras extensiones, que se integran a la perfección con él.

Ya vimos el ejemplo de Google Page Speed, y ahora le toca el turno a FireRainbow.

FireRainbow es una extensión para Firefox que se encarga de colorear la sintaxis de Javascript que muestra su “hermano” Firebug. Tras instalarlo, tan solo debemos ir a la pestaña Script de Firebug para ver los resultados.

FireRainbow dispone además, de casi 30 temas diferentes para visualizar nuestro código, que además son fácilmente editables y muy sencillos de crear.

Descarga FireRainbow

Listado de temas para FireRainbow

Google Page Speed es una extensión para Firefox, creada por Google, que nos permitirá optimizar nuestras páginas para que carguen y se muestren más rápido, mejorando así la experiencia de usuario en nuestra web.

Utilizada desde hace tiempo por Google para mejorar el rendimiento de sus aplicaciones (Google Reader, GMail, etc.), ahora ha sido liberada para que todos podamos disfrutar de ella.

Page Speed se integra con Firebug, y recopila información de tu web para sugerirte que puedes modificar para mejorar el rendimiento (reducir el peso de las imágenes, tamaño de los CSS, comprimir tu código javascript…), basandose en un documento de buenas prácticas que se implementan tanto en Google como en otros muchos sitios web.

Pero Page Speed no se queda ahí, y avanza un paso más ofreciendo soluciones para los problemas que detecta. Por ejemplo, te ofrece una versión más optimizada de tus imágenes, comprime directamente el código javascript (mostrando el porcentaje de reducción, para que veas si vale o no la pena modificarlo) y te avisa del código CSS que no se está utilizando el la página en ese momento, por si puede ser interesante eliminarlo.

Con todas estas cualidades, se situa un paso por delante de YSlow de Yahoo!, y se convierte en una herramienta casi indispensable a la hora de desarrollar cualquier proyecto web.

Más información sobre Google Page Speed

Descargar Google Page Speed