jueves, 17 de noviembre de 2011

Navegadores y Herramientas Web



Herramientas para un desarrollo web
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.

Qué es un Navegador Web

El navegador web es un programa o aplicación que nos va a permitir movernos por internet y acceder al contenido de las webs, blogs, foros, galerías fotográficas, etc., de Internet.
Posiblemente el navegador Internet Explorer sea el más conocido por todos al estar integrado en Windows, no obstante, también disponemos de otras alternativas como por ejemplo: Mozilla Firefox, Opera, Flock, Chrome, Maxthon, Avant Browser, Kmeleon, etc.
Incluso podremos utilizar versiones portables del navegador web cuando cuenten con ellas y por tanto, sin necesidad de instalación, tendremos otro navegador web en nuestro ordenador.
Podemos utilizarlos en nuestro ordenador sin necesidad de desinstalar Internet Explorer, es decir, podremos tener varios Navegadores web y utilizarlos simultáneamente si así lo deseamos, aunque debemos tener en cuenta para qué Sistema Operativo (Windows, Linux, Mac) están diseñados.
Si tenéis interés, en nuestro blog Cajon desastres publicamos hace un tiempo un pequeño recopilatorio de Navegadores web, con sus respectivos enlaces de descarga.


EJEMPLOS DE NAVEGADORES WEB
Existe una lista detallada de navegadores, motores de renderización y otros temas asociados en la categoría asociada.
Navegadores web basados en texto:
Primeros navegadores (que ya no están en desarrollo):
Publicado por en No hay comentarios:
Suscribirse a: Entradas (Atom)