Cross-Browser. DHTML compatible con todos los navegadores.

  • Por
Presentamos un sitio web que ofrece interesantes utilidades para el trabajo con HTML Dinámico de una manera sencilla y compatible con los navegadores más habituales.
Es de sobra conocido, para todos los que hayan experimentado con capas y Javascript, el problema de la compatibilidad de navegadores y la necesidad de realizar distintos códigos DHTML dependiendo del explorador que tenga el cliente.

Si no has encontrado todavía problemas de compatibilidad de tus scripts, posiblemente nunca te hayas enfrentado con la programación del lado del cliente en Javascript, más concretamente con el trabajo con las capas y por tanto, no te interesará mucho este artículo.

Ahora bien, si tienes problemas con las capas al programar una web y no consigues que se vea bien en los distintos navegadores, puede que este artículo te haga más sencilla la vida. Esto gracias a cross-browser.com, un sitio web que ofrece una interesante librería de funciones, que vamos a presentar a continuación, para el trabajo con HTML Dinámico compatible con todos los navegadores más habituales.

X Library VS CBE API

En cross-browser.com nos proporcionan dos librerías distintas para el trabajo con DHTML. En realidad se trata de un mismo conjunto de funciones, siendo una librería la evolución de otra. CBE API es la librería original y X Library es su evolución, que todavía (en el momento de publicar este artículo) se encuentra en fase experimental.

CBE API es la librería más antigua y todavía tiene mayores funcionalidades, pero en un breve espacio de tiempo X Library dispondrá de las mismas funcionalidades que la otra, aunque con diversas mejoras como una considerable reducción del peso de los archivos Javascript.

En principio, si entramos a cross-browser.com, nos presentan X Library, aunque un poco más escondido encontraremos su antecesor CBE API. El consejo es que se utilice X Library para proyectos nuevos. De todos modos, CBE API sigue perfectamente vigente (por ahora). Por ejemplo, en DesarrolloWeb.com utilizamos la librería CBE API para gestionar el tema de las capas, en concreto en el menú de la cabecera de la página.

Cómo utilizar X Library

Tenemos que empezar por descargar la versión actual de X Library. Para ello entramos en cross-browser.com y accedemos a la sección de Toys (para el creador de este sitio web, sus juguetitos son librerías DHTML). Aquí podemos hacer el download de la última versión, donde encontraremos las librerías y ejemplos de uso.

Una vez descomprimido el paquete, podemos encontrar una carpeta llamada "x", donde están las librerías. Nos fijamos en que hay una buena cantidad de archivos .JS, cada uno con diversas funciones. Dependiendo de la acción que se desee realizar tendremos que llamar a una función u otra, y tendremos que saber en qué archivo .JS se encuentra. Las funciones más habituales se encuentran en el archivo x_core.js. En nuestras páginas no tenemos por qué incluir todos los archivos del directorio, sólo los que vayamos a utilizar. Podemos ver en qué archivo está cada función en la documentación del propio programa, más concretamente en la referencia de funciones (el directorio donde se aloja la documentación está dentro de la carpeta "docs" que está dentro del directorio "x").

Dentro del directorio "x" también hay una carpeta de ejemplos, llamada "examples", a los que podemos echar un vistazo para empezar a familiarizarnos con las posibilidades de la librería. Nosotros hemos creado un par de ejemplos para comprobar las bondades de este software. Para ello hemos seguido el esquema del código de la propia página cross-browser.com y el de los distintos ejemplos que se ofrecen. Algunas funcionalidades de los ejemplos, como la función xInclude() están todavía en fase de experimentación, por lo que nosotros no las hemos utilizado y en su lugar incluimos los archivos que necesitamos tal como se hace habitualmente en Javascript.

Ejemplo mostrar y ocultar capa

X Library dispone de una sencilla función para mostrar y ocultar una capa. Simplemente recibe el identificador de la capa que se desea mostrar u ocultar. En principio, podemos enviarle a la función el propio objeto capa o bien un string con su identificador (que se indica con el atributo id en la etiqueta <div>).

Referencia: En el manual de CSS tenemos explicaciones de lo que son las capas y la forma de crearlas y definir su posicionamiento y apariencia.

<html>
<head>
    <title>Ejemplo de utilización de Cross-Browser</title>
<script type='text/javascript' src='x_core.js'></script>
<script type='text/javascript'>
function muestra(){
    xShow('c1');
}
function oculta(){
    xHide('c1');
}
</script>
</head>

<body>
<div id="c1" style="position:absolute; left: 200px; top: 100px; background-color:#9999aa; width:100px; height:80px;">
Hola!
</div>

<form>
<input type=button onclick="muestra()" value="Muestra Capa">
<input type=button onclick="oculta()" value="Oculta Capa">
</form>

</body>
</html>


En este ejemplo hemos creado una capa (con identificador "c1") y un par de botones. Cuando se pulsa uno se muestra la capa y cuando se pulsa el otro se oculta. Para ello hemos creado también un par de funciones, que se llaman cuando se hace clic en los botones, cuyo cometido es mostrar y ocultar la capa utilizando la librería X Library.

Concretamente vamos a hacer uso de las funciones xShow() y xHide(), que reciben el identificador de la capa que hay que mostrar u ocultar respectivamente. Estas dos funciones se encuentran en el archivo "x_core.js", que hemos incluido en la página como bloque de script externo.

Se puede visualizar este sencillo ejemplo en una página web aparte.

Ejemplo para hacer un movimiento de capa

El segundo ejemplo que hemos creado es una capa que se mueve por la página de izquierda a derecha. Esta página tiene también un par de botones, para detener el movimiento o ponerlo en marcha.

<html>
<head>
    <title>hacemos un scroll</title>
<script type='text/javascript' src='x_core.js'></script>
<script type='text/javascript'>
function inicia(){
    velocidad=2
}
function detiene(){
    velocidad=0
}
function mueve(){
    posicion+=velocidad
    posicion %= 500
    xMoveTo('c1',posicion,100)
    setTimeout("mueve()",100)
}

window.onload = function()
{
    velocidad = 0
    posicion = 200
    mueve()
}

</script>
</head>

<body>
<div id="c1" style="position:absolute; left: 200px; top: 100px; background-color:red; width:100px; height:20px;">
Hola!
</div>

<form>
<input type=button onclick="inicia()" value="Mueve la Capa">
<input type=button onclick="detiene()" value="Para la Capa">
</form>

</body>
</html>


En este caso, por lo que respecta a la librería, hemos utilizado la función xMoveTo(), que recibe el identificador de la capa a mover y las nuevas coordenadas donde colocarla. Esta función también se encuentra dentro del archivo "x_core.js", que hemos incluido con el primer bloque de script.

Para entender el movimiento de la capa tenemos que haber visto alguna vez la función setTimeout(), que recibe una instrucción Javascript a ejecutar y una cantidad de milisegundos que deben de pasar antes de la ejecución. En el ejemplo tenemos una función que se llama mueve(), que se encarga de variar la posición actual de la capa. Esta función se llama a si misma por medio de setTimeout(), con un retardo de 100 milisegundos, por tanto, la función mueve() nunca para de ejecutarse, en concreto 10 veces por segundo.

Nota: setTimeout es un método del objeto window. Tenemos varios artículos que utilizan esta función, por ejemplo: Reloj en Javascript o Texto en movimiento en la barra de estado.

Luego hemos definido una variable velocidad, que es el número de pixels que se desplaza la capa en cada llamada a mueve(). Los dos botones lo único que hacen es modificar el valor de esa variable velocidad. El botón que para el movimiento simplemente asigna el valor cero a la velocidad.

Otra cosa que tenemos que ver es que se ha definido una serie de instrucciones a ejecutar cuando se carga la página, en el bloque window.onload = function(). Entre esas acciones a ejecutar se encuentra la configuración de la posición inicial de la capa y la velocidad del movimiento. Además, se hace una llamada inicial a mueve(), que desencadena el flujo del movimiento, pues la función mueve se encarga de llamarse a si misma hasta que el usuario abandona la página.

Si se desea, se puede ver el ejemplo en funcionamiento.

Conclusión

No era nuestra intención explicar todas las funcionalidades de esta herramienta, sino más bien darla a conocer. Tampoco es nuestra intención explicar cómo realizar un movimiento de una capa ayudados por setTimeout(), aun así pedimos disculpas para aquel lector que no haya podido entender por qué realizamos un script de movimiento de esa forma.

Nuestro objetivo era presentar las librerías y mostrar como, con muy poco código y sin tener que conocer los entresijos de cada navegador, se puede realizar un ejemplo ya bastante avanzado del manejo de capas.

Recomendamos que no reinventéis la rueda. Ya que se dispone de herramientas de trabajo con capas tan versátiles como X Library, es mucho más interesante basar nuestros scripts en ella que rompernos la cabeza para inventar mecanismos compatibles con cada navegador.

Hemos creado un manual donde vamos a ir comentando varios ejemplos de efectos interesantes que se pueden realizar utilizando estas librerías. El manual en concreto se llama Taller de Cross-Browser DHTML.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Rodrigo Damián Orlando

14/10/2004
Me han desilusionado, cuando al final de este art. pusieron:

"Recomendamos que no reinventéis la rueda. Ya que se dispone de herramientas de trabajo con capas tan versátiles como X Library, es mucho más interesante basar nuestros scripts en ella que rompernos la cabeza para inventar mecanismos compatibles con cada navegador."

Ya que soy desarrollador, (recientemente para la web), y he aprendido mucho con su sitio.

Es muy fácil y simplista, dar esta opinión, ya que otro se rompió pensando por usted.

Cuando se tiene que terminar un trabajo y no se dispone de tiempo, o no so quiere hacer el todo el trabajo, está perfecto lo que se propone, pero eso de no reinventar la rueda, me paréese que va en contra del aprendizaje (me pareció que la idea del sitio era que pudríamos aprender). Si conocemos como funciona algo al derecho y al revés, estaremos aprendiendo, pudiendo hacer incluso mejoras, o adaptarlo mejor a nuestras necesidades, generar scripts con otro tipo de funcionalidades, etc. (puede dar ideas), de hecho estoy terminando algunas librerías (para soft. de escritorio), que facilitan la tarea del desarrollador, pero en ningún caso, mi intención es pensar por otros, sino ayudarlos.

La única forma en la que estaría de acuerdo es en que el resultado sea hecho por arte de magia (algunos lo pueden pensar), y no dudo que sea una magnifica herramienta (no la he probado), pero si alguien se molesto en hacer una herramienta que te sirve agrádesele, pero por tu comentario parece más bien que lo insultas por hacer algo que tu no puedes, porque que si el hubiera pensado igual, no contarías con esta magnifica herramienta.

Hay que tener cuidado, cuando uno es el encargado de trasmitir.

RESPUESTA

Ante todo gracias por tus comentarios y el tiempo en enviar tu comentario. Te contesto como redactor del artículo. Estoy de acuerdo con muchas cosas que dices y creo que algunas deberían tener un matiz.

No se me ocurriría desmerecer el trabajo realizado por el creador de Cross-Browser, es una gran herramienta y de hecho, mi intención publicando este artículo, es divulgarla y ayudar a que los desarrolladores la conozcan.

Insisto, en mi experiencia trabajando con DHTML, he tenido muchos momentos difíciles haciendo un código compatible con todos los navegadores y ahora mismo, no sería capaz de desarrollar un trabajo tan bien hecho como estas librerías. Salvo que invirtiera una ingente cantidad de tiempo y estudiara muy bien cada uno de los miles de detalles necesarios para conocer cada navegador.

No merece la pena que invierta todo ese tiempo en desarrollar otras librerías o hacer un código compatible. Lo que sí me parece interensante es que utilice las librerías para hacer más trabajo, a partir de donde se quedó el autor de Cross-Browser.

Por ejemplo se puede desarrollar una interfaz gráfica o menú por capas, que sea fácilmente configurable y utilizable en muchos desarrollos distintos. Lo que habría que hacer en este caso es enviarle al creador de las librerías ese código para que lo publique en la página y esté accesible a otras personas. De hecho, estamos publicando una línea de artículos con ejercicios DHTML que utilizan estas librerías y es mi intención enviarlos a Cross-Browser para su conocimiento. A ver si sale algo bueno.

Haciendo mias unas palabras que he visto hoy en producto de Microsoft: "Se trata de inventar, no de reinventar".

David

14/2/2005
El articulo me ha parecido muy interesante. Con respecto al comentario de no reinventar la rueda estoy completamente de acuerdo. Si todos siguieramos reinventando y empezando desde 0 como comenta otra persona, aun empezariamos a programar con ensamblador, o peor aun, en binario. Gracias por todo.

CAMPOS

26/1/2006
Nose cualquier tipo de informacion y si no es invalida y tu no pagas x ella y se da de gratis simplemente por conocer mas...osea no entiendo las quejas :D
Reinventar? primera que no hay sistemas perfectos siempre se puede mejorar y desde donde es mejor que de raiz? JEJE soi mu novatillo y ni lei bien nada xo las quejas ... DESARROLLOWEB.COM ENHORABUENA JEJE HACEIS UN CURRO DE LO MEJOR :D YEAH

Joffre Sanchez

31/1/2006
Estoy de acuerdo con lo de no reinventar la rueda, al margen de que si uno u otro hace el trabajo de desarrollo, el resultado, ademas de una herramienta util, es una fuente de aprendizaje para los novatos (como yo) para poder entender mejor un lenguaje con tantas peculiaridades como el JavaScript.

Davdi

09/2/2006
Si, vastante interesante, pero como hago para que este truco funcione con frame. Es decir que se desplase y cruce dos o mas frame.

kubert

20/4/2012
X-Library
Hola!. No encuentro el fichero x_core.js, ni la sección Toys, tal cual.

He bajado el archivo comprimido X423 de mayo 2011 y tengo:
la carpeta Cross-Browser/
capertas: x, css, templates y images.
capeta: x/
x.js, build.xml, obf-demo.xpp; y las carpetas: docs, examples, lib, tools.
Pero NO encuentro el archivo x_core.js
Un saludo.