Primeros auxilios en DHTML para navegadores de 6 generación
Revisado en Enero, 12 del 2001.
Traducción al español de Jose Luis Pumarega
Un aviso a todos los fans del DHTML: la pintada está en la pared.
Quizá hayas visto tu maravillosa obra multi navegador caer como un castillo de naipes en el nuevo navegador Netscape 6.0. Bien, deja de llorar; esto es lo que debe esperarse de un mundo que finalmente decide soportar los estandares del W3C para HTML 4, hojas de etilo en cascada(CSS1) y Document Object Model (DOM1)
Y esto se pondrá mucho peor. ¿De veras piensas que tus páginas estarán seguras en IE 4 o 5? Quizás por ahora. Pero si Netscape toma esta linea, es de esperar que Internet Explorer se adecúe también a los estandares. Hay una gran probabilidad de que tu código diseñado para IE se vaya al infierno con la proxima generación de navegador de Microsoft.
Pero todo esto es bueno. En el momento en que los estándares del W3C sean acogidos, la necesidad de dar rodeos para cada navegador desaparecerá por completo.Ahora visualiza un mundo donde tus artesanales menús desplegables y otras creaciones funcionan estupendamente en todos los navegadores, utilizando el mismo código. Los <DIV>s flotan libremente por el aire, la gente vive en armonía con la tierra, todo el mundo es libre, helado de crema para todos!
Pero para que este sueño se haga realidad, tendrás que tomar parte en la revolución y escribir tu código de acuerdo a los standares del W3C ¿Qué puede haber de bueno en tener navegadores que soporten el standard si tus propias paginas no lo hacen?
Quizás no sea malo mientras los usuarios no comiencen a actualizarse en masa a la siguiente generación de navegadores. Pero lo harán. De manera que lo mejor que puedes hacer ahora por ti mismo es armarte de conocimientos sobre como adecuar tus páginas actuales a la forma de los nuevos navegadores de sexta generación.
Aprendiendo a despedirse
Lo primero que ha caido bajo el hacha de las implementaciones standard son las soluciones propietarias. Digamos adios a la etiqueta <LAYER> y a la colección document.layers Despidámonos de la colección document.all del explorer y de la propiedad innerHTML. Aprende a apreciar sus sustitutos standard.
Vamos a mirar algunos de los cambios que deberías hacer para que tus scripts se adecuen al standard 6.0
document.layers[] (NS) y document.all (IE)
Si eres un programador de DHTML experimentado, posiblemente hayas llegado a amar y a odiar las colecciones document.layers de Netscape y document.all de Internet Explorer. En tanto que ambos modelos tienen poderosas características para acceder y manipular los elementos del documento, sus nucleos son incompatibles entre si.
Bien, despidamonos de ambos. Ambas colecciones son reemplazadas por el método DOM document.getElementById(). Más que una colección de elementos, document.getElementById() te permite dirigirte directamente al elemento deseado. Sencillamente pasa el ID del elemento que quieras y te devolverá una referencia a ese elemento.
Por ejemplo, en los navegadores de cuarta generación, puedes acceder un elemento <DIV> usando los siguientes métodos:
en Netscape:
miDiv = document.layers["divID"]
en IE:
miDiv = document.all["divID"]
Si seguimos los estándares del W3C implementados en NS6 (y en parte por IE5) la manera adecuada de hacer esto es:
miDiv = document.getElementById("divID")
Esto simplifica maravillosamente las cosas para Netscape, dado que para acceder a capas anidadas no deberás de emplear convenciones como document.layers["div1"].document.["div2"] Te permite además acceder a cualquier elemento de la página, no sólo a una etiqueta <DIV>
Incluso mejor, no tendrás que dar a tus capas posicionamiento absoluto en Netscape para poder manipularlas. De manera que si quieres ver tus capas bailando en Netscape 6.0 te evitarás un montón de trabajo extra.
Es elemental
Los diversos pedazos y partes en los que está compuesto el núcleo de la funcionalidad del DHTML están siendo revisados, reemplazados y en algunos casos eliminados. Echemos un ojo a los grandes cambios.
<LAYER> Y <ILAYER>
Estas dos etiquetas no están soportadas por Netscape 6, y nunca estarán soportadas por IE. Olvídalas. Reemplaza la etiqueta <LAYER> por la compatible con HTML4 <DIV>. De manera similar, <ILAYER> debería ser sustituida por <IFRAME>.
Más malas noticias: el atributo SRC de la etiqueta <DIV> también se despide. Si quieres cargar contenidos externos deberías de usar el atributo SRC de la etiqueta <IFRAME>
Visibillidad y posicionamiento
La habilidad para mostrar y esconder elementos ha sido enormemente simplificada, en tanto que la propiedad visibility ahora se adjunta a la propiedad style para cada elemento. Accedes a ella de esta manera:
element.style.visibility = value;
Este era el antiguo modo de esconder un <DIV> :
En Netscape:
document.layers["divID"].visibility = "hide";
En IE:
document.all["divID"].style.visibility = "hidden";
El modo de hacerlo en las versiones 6.0 es más sencillo, usando el método document.getElementByID() para acceder a la etiqueta <DIV>:
document.getElementById("divID").style.visibility = "hidden";
Los antiguos atributos de Ntescape no serán apropiados ya. Usa hidden y visible a cambio.
elemento.left (NS) y elemento.style.pixelLeft (IE)
Estos ya no serán tampoco los modos apropiados de acceder a la posición de un elemento. El modo compatible con el standard es:
parseInt(elemento.style.left)
Reemplaza elemento por el método document.getElementById() para recoger el elemento:
parseInt(document.getElementById("divID").style.left)
¿Para qué usar parseInt()? El standard establece el pixel como unidad de medida por defecto, de manera que el valor recogido de elemento.style.left será una cadena de texto, como "12 px" en lugar de un valor numérico. parseInt() convertirá la cadena en un valor numérico.
elemento.top (NS) y elemento.style.pixelTop (IE)
Las mismas reglas para recoger el valor de la posición horizontal se aplican ahora para la vertical. Simplemente reemplaza la propiedad left por top. Una vez más, usa parseInt para convertir el valor a un número.
parseInt(document.getElementById("divID").style.top)
Animando elementos
Programando para navegadores de la 4 generación, seguramente hayas usado los siguientes métodos para mover un elemento existente a una nueva posición en el documento:
En Netscape:
document.layers["divID"].moveTo(x, y);
O en IE:
document.all.["divID"].style.pixelLeft = x;
document.all.["divID"].style.pixelTop = y;
Estos métodos han sido reemplazados con las sentencias que asignan directamente nuevos valores para las propiedades top y left del objeto.
element.style.left = value + "px";
element.style.top = value + "px";
Así que para mover una etiqueta <DIV> 100 píxeles desde el lado izquierdo del decumento y 200 desde el superior, deberías hacer esto:
miObjeto = document.getElementById("divID");
miObjeto.style.left = 100 + "px";
miObjeto.style.top = 200 + "px";
Date cuenta de que estás añadiendo "px" al final del valor de modo que esté de acuerdo al standard. Debes usar simepre pixels para posicionar elementos. Puntos y em son unidades de impresión y pueden ser interpretadas de manera diferente en resoluciones de pantalla y plataformas distintas. Pero un pixel es siempre un pixel.
Para mover un elemento a una nueva posicion 10 píxeles desde la actual, tu código debería parecerse a este:
miObjeto = document.getElementById("divID");
x = parseInt(miObjeto.style.left);
y = parseInt(miObjeto.style.top);
x = x + 10;
y = y + 10;
miObjeto.style.left = x + "px";
miObjeto.style.top = y + "px";
Recuerda, debes usar parseInt() para convertir los valores x e y actuales a números antes de incrementarlos.
Para optimizar el código y encerrarlo en una funcion JavaScript puedes crear tu propio método moveBy() que tome el ID del elemento que quieres mover y los incrementos x e y pasados como parámetros.
function myMoveBy (myObj,x,y){
thisObj = document.getElementById(myObj);
thisObj.style.left = parseInt(thisObj.style.left) + x + "px";
thisObj.style.top = parseInt(thisObj.style.top) + x + "px";
}
Manipulación de Estilos
En Navigator 4, teníamos la colección document.tags, document.ids y document.classes para acceder a las propiedades CSS. Todo esto ha desaparecido a favor de la interface CSS2, muco más comprensible.
Nestcape 6 adopta un modelo de estilos similar al usado en IE, en el que un objeto style es adjuntado a cada elemento que pueda ser usado para acceder a las propiedades CSS para ese elemento. Ya has visto ese modelo cuando nos enfrentábamos al posicionamiento y a la visibilidad. Para acceder a las propiedades de estilo de un elemento, deberías usar la siguiente sintaxis:
x = document.getElementById(id).style.propiedadDeEstilo;
De esta manera, para recoger el color de fondo de un elemento <DIV> específico:
x = document.getElementById("divID").style.backgroundColor;
De esta manera puedes también cambiar o asignar nuevos estilos al elemento:
document.getElementById("divID").style.fontSize = "10pt";
Si estás usando etiquetas <STYLE> o llamandolas desde CSS externas mediante una etiqueta <LINK>, puedes acceder a las hojas de estilo usando la coleccióm document.styleSheets. Esta colección guarda una referencia a cada hoja de estilo, tanto si las usas desde etiquetas <STYLE> como si usas <LINK> para importarlas.
Cada elemento dentro de document.styleSheets tiene un conjunto de propiedades.
- href, una cadena que contiene la url de la hoja de estilos si ha sido importada mediante <LINK>
- cssRules, una colección de las reglas CSS usadas en una hoja de estilos.
Cada elemento de cssRules representa una regla de estilo, como "P {color: #cc0033}". En cualquier caso, no puedes acceder a la regla entera como si fuese una cadena. A cambio, cada elemento de cssRules tiene sus propias propiedades.
- selectorText es una cadena que contiene el valor del selector, En nuestro ejemplo anterior, selectorText contendría "P".
- cssText es el texto completo de las reglas CSS tal como están escritas en la hoja de estilos.
- style el el objeto style para esa regla. Igual que el objeto Style adjuntado al elemento individual, el objeto style puede ser accedido y manipulado usando la sintaxis style.propiedad = valor.
Echemos un ojo a un ejemplo de hoja de estilos:
<style type="text/css">
A { color:red }
P { color:blue }
</style>
Para cambiar el color de nuestras etiquetas de enlaces de rojo a amarillo, podemos hacer esto:
document.styleSheets[0].cssRules[0].style.color = "yellow"
Para añadir un color de fondo a los elementos de párrafo, podemos hacer esto:
document.styleSheets[0].cssRules[1].style.backgroundColor = "green"
Conclusión
Esto debería de ser lo suficiente para tomar tus páginas DHTML y darlas forma para Netscape 6. Pero solo hemos comenzado a arañar la superficie del recien adoptado W3C DOM y su modelo de scripts. Hay muchos y muy potentes métodos DOM-1 y DOM-2 que la comunidad de progamadores DHTML ni conoce ni usa. Primariamente, por que estamos muy ocupados creando efectos acrobáticos para los Dos Grandes Navegadores. En un artículo futuro echaremos un ojo más cercano a lo que el estándar W3C tiene en su galería para los amantes del DHTML.
Feliz Scripting!
Aprende Más
- Comenta este tutorial.
- Busca algo más de Netscape 6.0 en developer.netscape.com
- Aprende DOM, CSS y soporte de standards en www.w3c.org
- Únete a la causa del Web Standards Project www.webstandards.org