comparte el articulo 

Herramientas para un desarrollo web más sencillo (Parte I)

Actualizado el 10/10/2013 < > 3 Cometarios

A lo largo de la vida de un proyecto de desarrollo de Software, el programador puede utilizar un severo número de herramientas auxiliares, las cuales muchas veces son impuestas por nuestros supervisores, recomendadas por amigos o compartidas por expertos. Muchos dicen tener la solución para todo lo que necesitamos, sin embargo son pocos los que nos ofrecen servicios únicos y realmente útiles para hacer páginas web. En este artículo trataré de plasmar todas aquellas herramientas web que me han ayudado para llevar un desarrollo Web adecuado, profesional y que me han otorgado grandes resultados.

Clasificando las herramientas web

Si pudiéramos clasificar todas las herramientas web que existen actualmente en línea tendríamos un basto catálogo de donde escoger, podríamos agruparlas por ramo al que van dedicadas, lenguajes a los que se enfocan, tipos de aplicación, barras, software e incluso por la página que nos las proporciona. Sería muy abrumador escribir y exponer todas las herramientas dentro de un solo y grande grupo, así que trataré de hacer una clasificación propia para que ustedes lectores puedan escoger las que más se apeguen a sus gustos.

Herramientas del propio navegador web

Primero que nada tenemos las herramientas para aprender mientras navegamos, en los primeros días del desarrollo web lo más común para ir conociendo como se hacían las estructuras y las funciones del lado cliente era recurrir al famoso proceso Ver->Código Fuente. Este proceso nos muestra el código final de nuestra aplicación, exponiendo básicamente una serie de etiquetas HTML con algún llamado a JavaScript, ya sea embebido o si por alguna razón lo incluimos en el mismo archivo (recuerden que es recomendable tener los scripts en archivos separados).

De la misma manera podíamos revisar hojas de estilo (css) y scripts (js) para irnos dando una idea de cómo realizar algo que nos llamó la atención, aunque claro nunca podía faltar quienes se robaban el código tal cual y lo ponían en su sitio para que hiciera lo mismo, desde el principio han existido esta clase de “desarrolladores” y dudo mucho que se acaben dentro de poco, por lo mismo muchos han tratado de proteger sus trabajos de diferentes maneras, aunque hay que decir que esto también afecta a la auto educación.

Al principio analizar el código fuente que se nos abría en un archivo de texto en bloc de notas era algo tedioso, después este mismo proceso fue evolucionando y se agregaron buscadores y colores a ciertas etiquetas e incluso subrayado en algunos navegadores, lo cual benefició al programador para llegar a la parte que necesitaba, pero aún así se necesitaba algo más interactivo. Es por ello que surgieron estas herramientas, dentro de las cuales encontramos al ya famoso firebug y a la web developer toolbar.

Un gran amigo de los desarrolladores web, Firebug

Si has navegado últimamente por tutoriales o cursos en Internet de seguro has leído u oído hablar de firebug, esto se debe a que actualmente este complemento para Firefox se ha convertido en el mejor amigo de muchos programadores web al permitir editar, analizar y depurar nuestras hojas de estilo CSS,  el código HTML y los archivos Javascript en tiempo real, admitiéndonos observar cada componente de una página web, la que queramos, y estudiar la manera en que se realizan los procesos.

Firebug ofrece una consola que complementa la ya conocida “consola de errores” (Ctrl+Shift+J) , nos muestra errores de Javascript, XML, XMLHttpRequest, CSS, nos permite agregar código en nuestro Javascript que se muestre únicamente en la consola para analizar resultados y que no afecten directamente al funcionamiento del blog.

En su parte de HTML nos ofrece una forma sencilla y rápida de navegar a través del código usando un sistema de árbol para mostrarnos a grandes rasgos las etiquetas principales y a partir de ahí ir desplegando el resto del código. Permite modificar dicho código al dar clic en el botón de “Editar” exponiéndolo de una forma un poco más minimalista, nos muestra la maquetación del sitio y de las partes que seleccionamos en forma de un diagrama donde sabremos qué medidas tiene, su borde, margen, padding, etc., y finalmente nos permite observar los elementos del DOM de nuestro sitio, describiendo su estructura, esto resulta muy útil si estás trabajando con sitios grandes.

Así mismo, nos despliega todas las hojas de estilo del sitio en forma de menú en la parte superior de su ventana. A veces resulta tediosa la labor de identificar en que hoja de estilo se encuentra el efecto o el diseño que nos interesa, firebug nos ofrece en su ventana una pestaña para cada hoja de estilo que se utilice en la página, así podemos navegar entre ellas sin necesidad de averiguar la URL de cada una, además de que podemos modificar propiedades y deshabilitar alguna regla que no queramos para ver como quedaría en la web original.

Si existe alguna acción o script que desees editar, omitiendo la consola, puedes ir a la sección de “Script” de firebug, y finalmente si lo que deseas es analizar el tiempo que tarda en cargar tu página puedes usar la sección de “Red” donde se muestra un diagrama con los tiempos que le lleva a cada parte cargarse.

Existen también complementos para hacer más funcional nuestro firebug, entre los mejores se encuentran FirePHP que nos permite introducir código de consola (advertencias, errores, accesos, información) en lenguaje PHP. También encontramos YSlow, desarrollado por Yahoo!, el cual es un complemento que nos da una serie de consejos para mejorar y optimizar la velocidad de carga de nuestro sitio, basándose en test de cargas. Esto es bueno para optimizar al máximo los recursos que nos ofrece nuestra empresa de hosting.

La desventaja, si se le puede llamar así, que tiene firebug es que actualmente el complemento, con total funcionalidad, únicamente está disponible para Firefox, pero esto se puede “remediar” utilizando Firebug Lite que añade ciertas funcionalidades de este complemento a navegadores como Internet Explorer y Safari. Como alternativas para Firebug tenemos programas como Web Inspector para Google Chrome o la IE Developer Toolbar.

En la actualidad Internet Explorer sigue siendo el navegador mayoritario, y aunque no nos agrade mucho la idea y lo odiemos cuando falla alguna de nuestras aplicaciones en él por el hecho de que este no cumple con los estándares, debemos seguir diseñando y desarrollando también para él para que nuestra página sea vista de la manera que queramos en este navegador y el usuario no quede con una mala imagen del sitio.

Una herramienta para Internet Explorer

Como vimos firebug es una gran ayuda al momento de navegar con Firefox, pero para poder trabajar con IE de manera productiva y sencilla podemos usar la herramienta alternativa IE Developer Toolbar, la cual nos ofrece tareas muy similares a las de Firebug de Firefox, aunque con claras carencias en comparación con éste último.

Esta barra que se agrega en la parte inferior de nuestro navegador nos permite estudiar la estructura del DOM, identificar los elementos del sitio, las hojas de estilo que influyen en el diseño, borrar las cookies, entre otras cosas.

Esta barra, valga aclarar, es recomendable si tú sigues utilizando Internet Explorer 7 o 6, puesto que Internet Explorer 8 ya cuenta con una herramienta de desarrollo integrada a la cual podemos acceder pulsando la tecla F12. En ella podemos encontrar básicamente lo mismo que tenemos en firebug y la web toolbar, aunque de forma más austera.

La web developer toolbar es otro complemento para Firefox que se puede utilizar para mejorar lo que firebug ya nos da, con ella se pueden deshabilitar scripts, deshabilitar las hojas de estilo, adaptar y cambiar la resolución del navegador para observar cómo se vería nuestra página en un monitor de 800*600 o 1024*768.

Entre otras principales funciones de esta barra, está el permitirnos “colorear” y resaltar los distintos elementos de la estructura,  manipular los formularios que se encuentran en un sitio, quitándole restricciones o validaciones, así como validar el código de cada página que visitemos y por su puesto el de la nuestra.

Como pueden ver con un simple par de herramientas nuestra experiencia de desarrollar puede cambiar bastante, firebug y la web developer toolbar son dos complementos que nos harán la vida más fácil y nos ahorrarán unos cuantos dolores de cabeza al querer descifrar el cómo y cuándo en las páginas web.

Recomendado: Leer segunda parte de herramientas para un desarrollo web má sencillo.

Publicado el 06/04/2010, última actualización 10/10/2013.

Licencia: Eres libre de distribuir este artículo siempre que mantengas los enlaces dentro del mismo intactos y des los créditos al autor.

Autor: Verónica Milán

URL: lawebera.es/cursos/curso-maquetacion-web

Añadir Comentario (Subir al texto)

3 Cometarios

  1. Herramientas para un desarrollo web más sencillo (Parte II)

    […] la anterior entrega de esta serie de artículos, hablábamos de la variedad de herramientas que existen actualmente en […]

    Jueves, 15 de abril 2010

  2. Web Developer Toolbar de Mozilla Firefox: Casi un editor Wysiwyg (primera parte)

    […] no comerciales. Una de las extensiones más útiles para los desarrolladores de páginas web es Web Developer Toolbar (Barra de Herramientas para Desarrolladores Web), que incorpora una gran cantidad de funciones […]

    Miércoles, 28 de abril 2010

  3. webmix

    BUEN ARTICULO, PERO MU GUSTARIA QUE HABLARAN MAS SOBRE FIREBUG, QUE ES UNA EXCELENTE HERRAMIENTA PARA TODOS NOSOTROS LOS DESARROLLADORES WEB

    SALUDOS…

    Martes, 24 de agosto 2010

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras