Top 5: Las herramientas gratuitas más útiles para desarrollar un sitio web

Muchos de nosotros tenemos nuestras páginas personales, blogs, fotologs u otros medios de publicación en Internet, y más de alguno se ha encontrado con la necesidad de modificar el aspecto de sus sitios – que suelen estar construidos de fábrica con una pinta estándar – pero siempre nos topamos con millones de limitaciones que, finalmente, nos hacen desistir o producir un resultado inesperado o defectuoso.

En este pequeño artículo, mencionaremos cinco herramientas gratuitas para mejorar tu experiencia de desarrollo amateur de páginas web, ayudando a realizar un trabajo tedioso de una forma más llevadera.

A continuación del salto, comenzaremos con nuestro listado.

5. Notepad ++ (Sitio Oficial)

Notepad ++ (Plus Plus) o Block de Notas ++, es un editor de texto pensado no solo en reemplazar al precario editor de Windows, sino que también ha sido desarrollado pensando en la edición de código, ya sea php, html, css u otros tantos lenguajes comúnmente utilizados hoy.

La gracia de Notepad ++ en el desarrollo web es precisamente su habilidad de resaltar el código con distintos colores, de esta forma, si se nos olvida cerrar unas comillas o un tag dentro del código, el editor nos avisará elocuentemente cambiando el color de todas las lineas contiguas a aquella que contiene el error.

Además de las muy útiles cualidades para resaltar código (que ya están presentes en muchos editores), Notepad ++ posee un estructura que puede ser potenciada por plugins, con lo cual puedes extender las posibilidades de uso del programa. Mejor aún, puedes abrir todos los scripts que quieras en una sola ventana gracias a la utilización de pestañas para la administración de cada script.

Estas y muchas otras excelentes cualidades, hacen de Notepad ++ uno de los mejores editores de código gratuitos disponibles hoy por hoy.

4. Web Deveolper, Extensión para Firefox 2.x y 3.x. (Sitio Oficial)

Si bien Firefox es un excelente navegador, algunos complementos son casi obligación para poder obtener una experiencia de navegación más completa. Web Developer no es una de ellas, pero si es una de esas herramientas sin la cual un desarrollador web no puede vivir en paz.

La extensión agrega una serie de menús contextuales a Firefox desde los cuales puedes ejecutar útiles acciones, como por ejemplo, destacar la información de ordenamiento de los «div», las clases CSS, la posición de los elementos, y por otro lado, podrás redimencionar la ventana del navegador para ver que tal luce tu página en distintas resoluciones de pantalla.

Web Developer, te permite además validar código CSS, HTML, ejecutar un inspector DOM y muchas otras apreciadas funciones a la hora de analizar el desarrollo de tu sitio web.

Web Developer posee una gran cantidad de funciones útiles y con relativa facilidad de acceso por lo que se convierte en una herramienta ideal para el desarrollo profesional o amateur de un sitio web.

3. GIMP, Editor de Imágenes (Sitio Oficial)

GIMP es la avreviatura de GNU Image Manipulation Program, o algo así como Editor de Imágenes GNU. Es un equivalente a Adobe Photoshop pero gratuito, siendo una herramienta espectacular para el tratamiento de imágenes a cualquier escala.

El programa es bastante completo y siendo creado por una comunidad de programadores, está en constante evolución y mejora.

Para aquellos que no desean incurrir en los elevados costos de licencia de un software como Photoshop, GIMP es una alternativa tan buena como el programa de Adobe, incluso haciéndose natural su manejo si ya tienes un poco de práctica con Photoshop y lo mejor aún, es que se encuentra disponible para Mac OSX, Windows y su plataforma nativa: Linux.

Con GIMP podrás hacer todos tus gráficos para el sitio sin requerir mayores conocimientos que una pequeña base en el manejo de programas para el tratamiento de imágenes, la relación costo-calidad es espectacular al ser gratuito y rendir como una aplicación de pago profesional.

2. HTML Validator, Extensión para Firefox (Sitio Oficial)

Nombramos nuevamente otra extensión de Mozilla Firefox como parte de este listado, se trata de HTML Validator que, tal como su nombre lo indica, presta la funcionalidad de validar el código html de un sitio a través de la vista de su código fuente.

Con HTML validator, deberás abrir el fuente de tu sitio (Control + U) y en ese instante la aplicación lsitará todos los errores de código que tenga el sitio, señalando la linea en la que ocurre y una sugerencia sobre como solucionar los problemas.

La aplicación está al día con los últimos estándares de programación HTML y CSS, por lo que te será de suma utilidad para detectar aquellos esquivos errores que se transforman en grandes problemas a la hora de visualizar tu sitio, como por ejemplo, el típico «div» fuera de lugar, o algún tag que no cerraste y que causa problemas de desajuste en el sitio.

1. BrowserShots.org, Fotos de Navegadores en Linea (Sitio Web)

Este listado es justamente eso, un listado, no pretendo hacer un ranking de importancia ni utilidad, pero a modo personal, Browsershots.org es un sitio sin el cual no puedo desarrollar un sitio web de forma exitosa (o al menos lo intento).

El sitio nos presenta la posibilidad de visualizar nuestra página web en todos los navegadores, con todos los sistemas operativos, con todas las resoluciones de pantalla y con cualquier característica habilitada o deshabilitada (Flash, Javascript, etc.).

Browsershots te permite seleccionar que navegador, que versión del mismo, sistema operativo y resolución quieres que se utilice para mostrar tu sitio, luego de eso, tarda al rededor de 30 a 50 minutos en comenzar a mostrar la totalidad de las fotos del sitio en las distintas pruebas.

El sistema se basa en una red de computadores en varias partes del mundo que se han prestado para estas labores, por lo que el sitio requiere recopilar las screenshots de forma remota lo cual toma su tiempo pero, debido a su gran utilidad, es absolutamente soportable.

Aún así, browsershots comienza a mostrar la primera foto a los 2 o 3 minutos de iniciada la secuencia, por lo que nos podemos mantener entretenidos por bastante rato. Para evitar las solicitudes de «flood», el sistema tiene un timer de 30 minutos que necesitas resetear manualmente para poder seguir esperando tus fotos, de lo contrario, las perderás.

Además del servicio gratuito, puedes pagar U$D 30 por obtener algunos privilegios como la eliminación del timer o prioridad en la obtención de las fotos, pero el componente gratuito es tan potente como el de pago, por lo que se convierte en una herramienta sumamente importante ya que, de no existir, tendríamos que pasarnos dos días molestando a nuestros amigos y familiares para que nos cuenten que tal se ve nuestro sitio en sus navegadores para asegurar la máxima compatibilidad.

Con este espectacular sitio, terminamos nuestro conteo de las TOP 5 Herramientas gratuitas más útiles para el desarrollo web, de todas formas, esto es solo un listado que sale de nuestra opinión y trabajo y nos gustaría leer tus comentarios si tienes algún otro programilla por ahí que pueda contribuir o reemplazar a alguno de los que ya hemos señalados.

Felices Fiestas!! Happy Development!