SubDesarrollando

Vía Torres Buriel descubro esta presentación realizada por Leslie Franke con S5, que nos cuenta cómo podemos hacer uso de Firefox para nuestro trabajo como desarrolladores para la web. Hay una serie de extensiones, aplicaciones y trucos para sacar partido a todas ellas en el proceso de construir y probar un sitio web.

• Rapid Web Development and Testing with Mozilla Firefox.

Curioseando por el sitio de Leslie, me encuentro con una serie de guías de referencia rápida muy interesantes: CSS, HTML, Javascript y Atajos de teclado de Firefox. Puedes verlas en el sitio o bajártelas en PDF.

• Referencia rápida CSS, HTML, Javascript y Atajos de teclado de Firefox.

A la hora de construir/diseñar un sitio web, siempre se recomienda ver nuestro diseño en diferentes navegadores. Lo clásico es tener instalado al menos dos navegadores: Explorer (el que usa la mayoría, 90% de la gente para un sitio no tecnológico) y otro que cumpla con los estándares como corresponde, hoy por hoy, Firefox (que puede llegar ser usado por el 45% de los visitantes, como es el caso de este blog).

Lo típico es tener 2 o 3 navegadores instalados, e ir probando el sitio en uno y otro. La novedad es la aparición de algunas alternativas para realizar esta tarea de forma más simple y potente a la vez.

Opción 1: Extensión IETab para Firefox.
Esta extensión permite instanciar IE dentro de una pestaña de Firefox. Ya no tienes que tener dos ventanas abiertas, sino que en Firefox puedes ver el mismo sitio en uno y otro navegador, con un par de clics.

Un detalle: Si utilizas Firefox 1.0.x tienes que instalarte dos extensiones, si usas 1.5 beta, sólo una.

• IETab

Opción 2: CSSVista
Esta es una aplicación independiente, donde en un sector de la ventana puedes editar la hoja de estilos, y en el otro sector, dividido en dos, ves el sitio en Firefox y en IE. Lo mas interesante es esa capacidad de poder editar los estilos y ver al momento los cambios en ambos navegadores.

La aplicación es gratuita, y recién se encuentra en versión 0.1. Sólo tiene una contra: para que funcione tienes que bajarte e instalar el Microsoft .NET Framework Version 2.0, que pesa unos 23 Mb.

• CSSVista
• Microsoft .NET Framework Version 2.0

Opción 3: Browsershots
Este no es un software que instalas, sino un sitio web que ya he comentado antes.

Browsershots realiza capturas de pantalla de un sitio web que especifiques, en diferentes navegadores, resoluciones y plugins, a saber: Firefox 1.0.4, Galeon, Konqueror 3.3, Mozilla 1.7.8, MSIE 6.0, Opera 8.50 y Safari 2.0, en 800 x 600 y 1024 x 768.

El pro es que tienes bastantes navegadores donde ver tu sitio, incluso varios de otros sistemas operativos. La contra es que sólo funciona con sitios que estén online, y además tienes que esperar unas horas para ver los resultados, aunque puedes llegar a montártelo en tu propio servidor.

• Browsershots

De una forma u otra, ya no hay excusas para que nuestros sitios no se vean como corresponde.

Las primeras opciones descubiertas vía Nuhuati, la tercera vía BlogPocket

Para mostrar visualmente la diferencia de procesamiento entre una página estática y una página dinámica, he realizado los siguientes gráficos:

Fundamentalmente, una página estática está compuesta por código HTML. Cuando el archivo es requerido por el navegador, el servidor lo envía y punto. Todos los visitantes verán el mismo contenido.

En un sitio dinámico, la página se procesa en el servidor antes de ser enviada al navegador.

El archivo archivo.php contiene código php que al ser ejecutado generará código html. En ese proceso de ejecución de código, pueden hacerse consultas a bases de datos u otros archivos.
El resultado final que se envía al navegador si bien tiene extensión .php, es código HTML, que fue generado para este visitante en particular. Otras personas podrán obtener diferentes resultados.