Herramientas de desarrollo y optimización (I)

Más que una gran explicación vamos a intentar recoger en unas cuantas entradas diversas herramientas útiles para el desarrollo y optimización de paginas web y ver como se pueden utilizar para “mejorar” una web.

En mi opinión hay tres herramientas imprescindibles:

• Web Developer Toolbar: (extensión del Firefox). Añade una barra de herramienta en el FF con distintas utilidades para poder “analizar” una página. Algunas de las cosas más útiles en mi opinión son:
  • Dado un punto cualquiera de una pagina te dice su jerarquía. Outline Current Element
  • Ver / modificar los datos de un formulario.
  • Edición “en caliente” del html y del CSS.
  • Permite mostrar multitud de información encima de los propios componentes de una página.
• Firebug: (extensión del Firefox). Gran extensión que a su vez tiene otras extensiones… en algunas funcionalidades es similar a Web Developer Toolbar
  • Dado un elemento de la pagina puedes deshabilitar los estilos que se le aplican, de una forma muy gráfica
• YSlow:  (extensión del Firebug : Herramienta desarrollada por la gente de Yahoo que permite analizar el rendimiento de una web. Nosotros la hemos utilizado y hemos corregido dos cosas de DorsumiNews
  • Hemos añadido fecha de expiración a todas las imágenes. Por lo tanto el navegador las guarda en la cache. No eramos conscientes de ello, y esta herramienta nos lo advirtió.  Para hacer esto tenéis que manipular el fichero .htaccess
  • Hemos “reducido” todas la imagenes. Aunque ya eran bastante pequeñas, la herramienta Smush It las reduce automáticamente sin “”"perdida de calidad”"”. Realmente es muy cómoda de utilizar… Le indicas la URL, el te indica cuanto ha podido reducir cada imagen, y te permite descargar un zip con toda la estructura de directorios de tu web con las correspondientes imagenes. Así, es muy fácil reemplazar la imagenes del servidor.

Nos queda una similar a YSlow, pero esta vez de la gente de Google. Personalmente no la he utilizado mucho pero también es interessante.

• Page Speed i Page Speed Activity de google. (otra extensión del firebug) Permiten ver todo lo que tiene que hacer un navegador para visualizar una web, permite ver donde “se encalla” y cosas similares.

Para mi estas son imprescindibles, si conocéis alguna mas indicadlo en los comentarios, a ver si entre todos descubrimos alguna cosa interesante.