"Advertencia: El siguiente sitio se ve mejor con…"

Así es, el famoso mensaje que nos recuerda una y otra vez que alguien no tuvo el tiempo ni las ganas de desarrollar un sitio compatible con nuestro navegador. Y como si eso fuese poco, nos recomiendan que descarguemos otro navegador y cambiemos la resolución de nuestro monitor. ¡Una locura!

Todos los que desarrollamos sitios web, en algún momento de nuestras vidas, nos encontramos con el mismo problema: la incompatibilidad entre navegadores. Una incompatibilidad que refleja, no solo la calidad de nuestro trabajo, sino también la interminable lucha de la W3C por establecer normas y estándares. Como todos ya saben, los navegadores se encuentran en constante desarrollo. Las empresas que los fabrican lanzan nuevas y mejores versiones con el fin de cumplir con ciertas reglas y aportar nuevas características. Ahora, ¿qué navegador utilizan las personas que visitan nuestro sitio? ¿Internet Explorer, Netscape, Opera, Safari o Konqueror? ¿Qué versión? ¿Con qué frecuencia los actualizan? ¿Qué preferencias tienen configuradas? ¿Qué plugins tienen instalados? ¿Qué plataforma de trabajo utilizan? ¿Windows, Mac, Linux, WebTV? ¿Bajo qué restricciones? Estas son algunas de las tantas preguntas que, como desarrolladores, nos debemos hacer a la hora de desarrollar un sitio web.

"No es una cuestión de piel, es una cuestión de navegadores"

Los navegadores actúan como traductores, traducen los documentos HTML en páginas web formateadas. Las reglas básicas para traducir estos documentos son establecidas por la World Wide Web Consortium (W3C), que se encarga de publicar los estándares oficiales del HTML en su href="http://www.w3c.org/">sitio web. Ahora, esto es todo un tema, por no decir problema, ya que no todos los navegadores se rigen en base a estas normas, como así tampoco las interpretan de la misma manera. Por ejemplo, W3C establece que el tag TABLE debe soportar el atributo CELLSPACING para que uno pueda definir el espacio entre celdas. Pero los estándares no definen que valor lleva ese atributo por defecto, por lo tanto, si no especificamos un valor, los navegadores lo hacen por nosotros.

¿Qué navegadores debemos tener en cuenta a la hora de desarrollar un sitio? Fácil. Los más populares. Siempre es bueno tener en cuenta las dos últimas versiones de los mismos. O sea, tampoco vamos a retrasar el avance tecnológico por un loco que sigue usando Netscape 3.

Para aquellos que no estudiaron "Historia del Navegador" en
la universidad de Google, les cuento que la rivalidad entre Microsoft y Netscape
lo único que dejo fue una gran incompatibilidad entre navegadores, nada
mas. De ahí vienen los famosos tags LAYER e IFRAME, por nombrar algunos.
Por suerte, la época en que los navegadores inventaban sus propios tags
forma parte del pasado. Hoy en día muchos de estos tags se encuentran
en vías de extinción. Aunque esto no quita que la rivalidad entre
estas dos empresas haya terminado. Basta con ingresar a Hotmail utilizando el
navegador Netscape para ver lo que sucede.

Navegadores vs Desarrolladores

A partir de la llegada de Netscape 6, por fin podemos manejar capas con el mismo código para los navegadores Internet Explorer y Netscape:

<div id="capa" style="position:static; width:300; height:300;">
Funciona en Netscape 6+ e Internet Explorer 5+
</div> 

Las versiones 4.x y anteriores de Internet Explorer y Netscape no reconocen el tag DIV, por lo tanto proceden a ignorarlo. Pero esto no significa que ignoren lo de adentro, lo cual nos permite sacar una ventaja muy importante a la hora de desarrollar un sitio compatible. Nunca se preguntaron para qué existen ciertos tags y atributos? Como por ejemplo el tag NOSCRIPT o el atributo ALT del tag IMG. No se inventaron para que el manual de HTML contenga más páginas, se inventaron para que podamos desarrollar sitios más compatibles. Algunas personas no permiten o no tienen permitido ejecutar rutinas de JS en su navegador, otras no quieren o no pueden ver imágenes. Y el tag NOSCRIPT y el atributo ALT están justamente para eso, para ajustar nuestro sitio a las preferencias y/o restricciones del visitante.

Ahora, cuando se trata de una incompatibilidad, ¿cómo le pedimos a un navegador que traduzca algo que no entiende? Por suerte, los navegadores poseen el maravilloso don de la indiferencia. Cuando no reconocen un tag, lo ignoran. Es muy importante destacar que los navegadores ignoran los tags que no reconocen, pero no lo de adentro.

Por ejemplo:

Si el tag DIV es reconocido por el navegador, creamos una capa de 300×300. Si no es reconocido por el navegador, utilizamos el tag LAYER para crear una capa de 300×300.

<html>
<head>
<style>
#capa {position: absolute; width: 300; height: 300;}
</style>
</head>
<body>
<div id="capa" style="position: absolute; width:300; height:300;">
<layer id="capa" position="absolute" width="300" height="300">
Funciona en Netscape 4.x, 6+ e Internet Explorer 4.x, 5+
</layer>
</div>
</body>
</html>

Fácil, no? Ahora, incorporemos dos tags más a este ejemplo, SCRIPT y NOSCRIPT. Este ultimo es un tag muy valioso, que muchos desarrolladores olvidan de utilizar a la hora de trabajar con JS.

<html>
<head>
<style>
#capa {position: absolute; width: 300; height: 300;}
</style>
</head>
<body>
<div id="capa" style="position: absolute; width:300; height:300;">
<layer id="capa" position="absolute" width="300" height="300">
<script languaje="javascript">
document.write("Bienvenidos a mi sitio web...");
</script>
<noscript>
Bienvenidos a mi sitio web...
</noscript>
</layer>
</div>
</body>
</html>

Este es el verdadero uso que se le debe dar al tag NOSCRIPT, de lo contrario caemos nuevamente en el error de los mensajes sin sentido, como por ejemplo: "Lo siento, su navegador no soporta JS". Y que sentido tiene informarle al usuario que su navegador no soporta JS? Como si se fuese a descargar otro navegador. Hay que pensar un poco más en el usuario, como solucionarle los problemas. De lo contrario, lo único que estamos haciendo con este tipo de mensajes, es crearle otro problema más.

Fallas en los navegadores

El navegador mas popular, ya sea para PC o Mac, sigue siendo Internet Explorer, seguido por Netscape y Opera. Aunque Safari, el navegador que incluye por defecto Mac en su sistema operativo, esta realizando un excelente trabajo. Es muy importante aclarar que cuando hablamos de Internet Explorer para PC, no estamos hablando de Internet Explorer para Mac. Por más hijos del mismo padre que sean, uno es rubio y el otro es morocho. Dicho en otras palabras, los dos tienen diferentes fallas e incompatibilidades. Otro navegador que se utiliza mucho a la hora de revisar sitios es el Konqueror, que corre bajo Linux.

Las fallas o "bugs" que contienen los navegadores, son las termitas de internet. Se comen todo lo que encuentran en el camino. Todos los navegadores contienen fallas y cometen errores, sobre todo a la hora de interpretar hojas de estilo y/o scripts.

La mejor forma de lidiar con esto es:

1. Descargando e instalando la mayor cantidad de navegadores posibles. Nunca viene mal tener a mano unos cuantos navegadores de colección .
2. Validando los documentos HTML y archivos CSS utilizando herramientas on-line: href="http://jigsaw.w3.org/css-validator/validator-uri.html">W3C’s CSS Validator o algún software dedicado: href="http://www.bradsoft.com/topstyle/index.asp">Top Style Pro .
3. Visitando los sitios de las empresas que fabrican navegadores. Generalmente ahí publican las fallas de sus navegadores: Bugzilla .
4. Conociendo las principales fallas de los navegadores más populares: href="http://msdn.microsoft.com/workshop/author/dhtml/overview/compat.asp">Microsoft

Por ejemplo, sabían que:

.capa {
font-size: 10pt;
width: 300px;
height: 300px;
overflow: auto;
/* overflow auto fix for Mac IE 5 */
padding: 0px 16px 0px 0px;
}

a. Netscape 4.x (PC) no reconoce la propiedad "height".

b. Opera 4.x / 5.x y Netscape 4.x (PC y Mac) no reconocen la propiedad "overflow".

c. Internet Explorer 5 (Mac) genera dentro de las capas un margen imaginario de -15px.

d. El valor "px" le permite al usuario cambiar el tamaño de las fuentes, mientras que "pt" no.

Y, otra falla muy conocida que muchos desarrolladores parecen ignorar:

function mostrar(capa){
if (document.getElementById){
// innerHTML bug fix for NS 6
objeto.style.top = '1px';
objeto.style.top = '0px';
objeto.innerHTML='hola mundo';
}
}

e. Netscape 6 (PC) contiene una falla al escribir dentro de una capa. Dicha falla se puede solucionar posicionando nuevamente la capa.

El siguiente sitio nos permite realizar una excelente prueba de compatibilidad: href="http://www.anybrowser.com/siteviewer.html">Site viewer

Conclusión final

Tenemos que aprender a ver nuestro sitio con los ojos de nuestros visitantes. Esto implica verlo con el mismo navegador, las mismas preferencias, el mismo sistema operativo, las mismas restricciones, el mismo monitor y hasta la misma resolución. Hasta el día de hoy, el método de prueba y error sigue siendo el mas efectivo a la hora de combatir la incompatibilidad.

No se olviden que existen dos tipos de mensajes en internet, "lo siento, tiene un problema" y "no se preocupe, ya esta solucionado". Como así también existen dos tipos de sitios, los que "se ven mejor con…" y los que se ven igual con todos.

Un saludo muy grande a toda la comunidad de Maestros del Web!

Antes de comenzar a diseñar la interface del Sitio debemos tener una idea muy clara de lo que vamos a hacer. Los tres puntos más importantes a tener en cuenta son: colores, tipografías e imágenes que vamos a utilizar. El Sitio de por sí debe ser fácil de leer y navegar, y debe cargar rápido. Hay que tener en cuenta que los diseños cargados resultan incómodos para las personas que visitan nuestro Sitio, ya sea porque los hacen más lentos o porque dificultan la navegación del mismo.

A continuación se detallan los pasos a seguir para crear una barra de navegación moderna, rápida e interactiva.

1. Encabezado del vSitio

2. Barra de navegación

3. Precarga

4. Interacción

5. Consejos

1. Encabezado del Sitio

a) Abrimos el Editor de imágenes (Photoshop, Paint Shop Pro, Paint, Photo Impact, etc.) y creamos un documento nuevo.

Ancho >> 760 píxeles, Alto >> 80 píxeles, Resolución >> 72 dpi, Color >> Azul marino.

b) Diseñamos el encabezado del Sitio.

c) Redondeamos las puntas de la imagen.

d) Cortamos la imagen en 3 partes y las guardamos como: imagen01.gif, texto.gif e imagen02.gif.

e) Abrimos el Editor HTML (Dreamweaver, Front Page, etc.) y creamos una tabla con tres celdas.

Tabla: Ancho >> 760 píxeles

Celda de la izquierda: Ancho >> “82″ píxeles (debe tener el mismo ancho que la imagen)

Celda de la derecha: Ancho >> 213 píxeles (debe tener el mismo ancho que la imagen)

Celda del medio: Ancho >> 455 píxeles (los píxeles que faltan para llegar a 760)

f) Insertamos las imágenes dentro de sus respectivas celdas y guardamos el documento HTML.

2. Barra de navegación

a) Abrimos nuevamente el Editor de imágenes y creamos un documento nuevo.

Ancho 76 píxeles, Alto 30 píxeles, Resolución 72 dpi, Color Negro.

b) Superponemos 4 rectángulos para darle un efecto de relieve
a la barra de navegación:

c) Cortamos la última imagen en 3 partes: (1) izquierda.gif,
(2) centro.gif y (3) derecha.gif.

d) Abrimos el Editor HTML y creamos otra tabla con tres celdas.

Tabla: Ancho >> 760 píxeles, Color de fondo >> Gris

Celda de la izquierda: Ancho >> “37″ píxeles (debe tener el mismo ancho que la imagen)

Celda de la derecha: Ancho >> “37″ píxeles (debe tener el mismo ancho que la imagen)

Celda del medio: Ancho >> 686 píxeles (los píxeles que faltan para llegar a 760)

e) Insertamos la imagen (1) izquierda.gif en la celda de la izquierda y la imagen (3) derecha.gif en la celda de la derecha.

f) Insertamos la imagen (2) centro.gif como fondo de la tabla y guardamos el documento HTML.

g) Ahora nos falta crear los botones. Abrimos el Editor de imágenes y creamos un documento nuevo. 

Ancho >> 76 píxeles, Alto >> 26 píxeles, Resolución >> 72 dpi, Color >> Gris.

h) Escribimos en el documento el nombre del enlace INICIO y guardamos la imagen con el nombre de boton01.gif.

width="76" >

i) Repetimos los puntos G y H hasta obtener todos los botones de la barra de navegación.

j) Creamos una imagen nueva para utilizar como separador. Abrimos un documento nuevo.

Ancho >> 2 píxeles, Alto >> 26 píxeles, Resolución >> 72 dpi, Color >> Gris oscuro.

El pixel de la izquierda debe ser gris oscuro y el de la derecha gris claro. Guardamos la imagen con el nombre de linea.gif

Ejemplo: Imagen ampliada:

k) Abrimos el Editor HTML e insertamos los botones dentro de la celda del medio. Para separar los botones utilizamos la imagen linea.gif. Ejemplo: linea.gif - boton01.gif - linea.gif - boton02.gif - linea.gif - boton03.gif - etc.

l) Creamos los hipervínculos. Por el momento el Encabezado y la Barra de navegación nos quedarían de la siguiente manera:

m) Creamos otra serie de imágenes que luego vamos a utilizar
para crear el efecto “Roll Over”. En este caso las imágenes son similares a
la de los botones anteriores, pero un poco mas claras.

Vamos a llamar a estas imágenes boton01a.gif - boton02a.gif - boton03a.gif - boton04a.gif

Nota: No hace falta que diseñes nuevamente las cuatro imágenes. Podes abrir las imágenes anteriores, cambiarles el brillo y guardarlas con otro nombre, de esta manera te vas a ahorrar mucho trabajo.

3. Precarga

Vamos a utilizar un JavaScript para realizar la precarga de las imágenes.

a) Abrimos el Editor HTML, nos vamos al código fuente del documento y copiamos el siguiente JavaScript dentro del tag <head>

<script language="javascript">          boton01=new Image          boton01.src="boton01.gif"          boton01a=new Image          boton01a.src="boton01a.gif"          boton02=new Image          boton02.src="boton02.gif"          boton02a=new Image          boton02a.src="boton02a.gif"          boton03=new Image          boton03.src="boton03.gif"          boton03a=new Image          boton03a.src="boton03a.gif"          boton04=new Image          boton04.src="boton04.gif"          boton04a=new Image          boton04a.src="boton04a.gif"			</script>

Este Script le indica al navegador que cargue las imágenes de la Barra de Navegación antes de leer los tags que se encuentran dentro del Cuerpo del documento HTML.

4. Interacción

Vamos a utilizar dentro de los tags <img> OnMouseover y OnMouseout para que la Barra de Navegación interactúe con el puntero del mouse. A este efecto se lo conoce con el nombre de “Roll Over”, que en español significa “Pasar por encima”.

a) Volvemos nuevamente al código fuente, nos dirigimos al <body> del documento y dentro del tag <img> escribimos lo siguiente:

(Tomé como ejemplo la imagen boton01.gif)

<img src=”boton01.gif” name=”b01” onMouseover=”document.images['b01'].src=boton01a.src” onMouseout=”document.images['b01'].src=boton01.src” width=”76″ height=”26″ border=”0″>

Lo que le estamos indicando al navegador es que muestre la imagen boton01.gif cuyo nombre es b01. En caso de que el puntero del mouse pase por encima de la imagen, que la cambie por boton01a.src, no te olvides que boton01a.src está definida dentro del JavaScript que insertamos en el <head> como boton01a.gif. Lo mismo sucede con OnMouseout pero a la inversa.

c) Repetir el punto A con las demás imágenes de la Barra de Navegación. Nota: Si la primer imagen se llama b01, la segunda se deberá llamar b02 y así sucesivamente.

b) Listo, veamos como nos queda:

width="215" >

Podes hacer clic con el botón derecho del mouse y seleccionar “Ver código fuente” para ver la Barra de Navegación terminada dentro del código HTML.

5. Consejos

Es muy importante incluir todos los links internos dentro de cada página en el mismo lugar siempre. Si la barra de navegación está compuesta por imágenes como es en este caso, es muy importante agregar otra barra de navegación que contenga los mismos enlaces pero en forma de texto. De esta manera las personas
que tengan configurado el navegador para no mostrar imágenes van a poder navegar por el Sitio sin problema.

Las imágenes se pueden guardar en formato JPG o GIF,
ya que son los únicos admitidos por el navegador. Estos formatos guardan las imágenes comprimidas, por lo que hay que estar muy atentos al nivel de compresión que se puede lograr para nuestras imágenes. Cuando se trabaja con imágenes que contienen muchos colores, ya sean fotos o imágenes, se recomienda guardarlas en formato JPG, y cuando se trabaja con gráficos con pocos colores se recomienda el formato GIF. No hay que olvidarse que el formato JPG no admite transparencias.

Nota: Las imágenes fueron reducidas de tamaño por formato de despliegue.