La evolución de la web a traído consigo muchos cambios en la forma en que los usuarios navegan a través de la web.
Desde el apogeo de la “web 2.0″ e inclusive desde muy antes de que este movimiento estuviera de moda. el usuario, no solamente se conformaba con ver información publicada en un html estático, sino, que poco a poco se fue acostumbrando a que su pagina web favorita fuera cada vez más personalizada. Por ejemplo que presentara un “Bienvenido Fulanito”, luego que esta le ofreciera la hora oficial, el clima y hasta el tipo de cambio en su pais.
Esto dio paso a lo que hoy conocemos como “web 2.0″. Que, en realidad es solo un bonito nombre que le dieron a todo un paquete de aplicaciones web que facilitarían la vida de todos los usuarios de internet(redes sociales, herramientas online, sharing sites etc). Estas aplicaciones web cada vez se han tornado aún más complejas con el paso del tiempo (y de las necesidades del usuario). Tanto asi, que es casi imposible para un web developer/designer visualizar una de estas aplicaciones web de forma local (como lo hacia uno en los viejos tiempos con el preview de dreamweaver) sin estar bajo un servidor o una consola que corra los servicios virtualmente.
Es por eso que inspeccionar “en caliente” o inclusive modificar codigo y diseño en caliente ha sido la mejor solución para muchos web developers/designers que necesitan una solución rápida y eficáz sin tener que estar subiendo los archivos a un servidor para ver reflejado un cambio.
Cómo y Porqué?
El cómo es una respuesta muy fácil. Firefox es la clave; Y el porqué también se responde fácilmente. Porque Firefox a contrario de otros navegadores, presenta flexibilidad en la forma en que se puede utilizar y esto se consigue gracias a su sistema de plugins, los cuales permiten extender (por miles) el uso de Firefox casi que dejando de lado a cualquier programa para edición de paginas web.
5 Herramientas esenciales para Firefox
Mediante el sistema de plugins de Firefox es que podemos lograr inspeccionar en caliente los web sites. A continuación esta es una lista de los mejores y mas importantes plugins para Firefox, son totalmente gratuitos y estan en constante actualización al igual que firefox:
Firebug:
Es sin lugar a duda, el mejor invento después de firefox. Tiene tantas herramientas y posibilidades que vuelve completamente obsoleto cualquier programa para web.
Sus principales usos son:
-Inspeccionar y editar HTML y CSS
-Monitorear todas las llamadas que hace la pagina al servidor
-Debugear Javascript y DOM
instalar Firebug
Screengrab:
Muchas veces hemos necesitado un screenshot de la página completa por diversos motivos. pero el Print Screen de la computadora solo se limita a sacar un screenshot de la parte visible, en cambio screengrab permite capturar completamente la pagina con un solo click. Podemos escoger entre PNG y JPG para guardar el screenshot.
Instalar Screengrab
FireFtp:
Aplicacion FTP para subir y bajar archivos, permite guardar la informacion de los sitios dentro del navegador, asi no hay que estar ingresando el usuario o la clave cada vez que accedemos al servidor a travez del ftp
Instalar FireFtp
Web Developer:
Este plugin es muy parecido al Firebug pero tiene sus diferencias importantes. Al igual que el Firebug, el Web Developer permite editar html y css en caliente, sin embargo fueron añadidas otras funciones como por ejemplo:
-Desactivar cookies, javascript, css y otros elementos de las paginas.
-Se pueden identificar distintos elementos del html activando la opcion OUTLINE que es una funcion que hara un borde que rodeara cualquier elemento del html desde divs, tablas, links esto es muy util cuando desconocemos o necesitamos ubicar algun elemento en especial dentro del html.
-Desplegar información escondida; como meta, comentarios etc.
-Funciones de regla, guias y lupa muy util para todo web designer
-Validación de html y css con un solo click. Inclusive permite la validación offline
Instalar Web developer
PixelPerfect:
Es un plugin que corre dentro del plugin Firebug de Firefox. Y básicamente permite agregar un jpg o png del sitio enviado por el diseñador para que el web developer pueda comparar que tanto se parece el diseño al sitio ya desarrollado. Esto es una delicia para el que busca el perfeccionamiento y por supuesto para los departamentos de quality de cualquier agencia.
Instalar PixelPerfect
Plus+ Otra herramienta esencial:
Xray (Firefox / Safari / Opera / Internet Explorer):
Es una herramienta que funciona en todas las plataformas y aunque no tiene las mismas funcionalidades que los plugins de firefox es muy util sobre todo si estamos tratando de corregir errores desde Safari de Mac o Internet Explorer de Microsoft.
Usar XRAY
Conoces un plugin de firefox que debería estar en esta lista? Envíanos un comentario!
Un necesario cambio recibio el sitio de la casa blanca, con elementos modernos de diseno, codigo semántico y hasta usando jquery, la casa blanca ahora es un sitio de esos que da gusto entrar.