Un primer ejemplo de página web que utiliza Mootools para hacer un efecto sencillo que nos permita conocer el framework sin ningún conocimiento previo del sistema.
Como había dicho en la introducción de este manual de Mootools, el uso del framework puede resultar difícil para las personas que nunca han trabajado con él o con otro framework Javascript. Por eso tiene sentido hacer un ejemplo inicial muy simple para iniciarse. Este ejemplo realmente no sirve para nada, simplemente para que veamos la facilidad con la que se puede utilizar Mootools para realizar código Javascript compatible con todos los navegadores más habituales.
No obstante, hay que decir que para poder utilizar Mootools debemos tener antes un conocimiento medio o avanzado de Javascript, porque realmente lo que estamos haciendo en estos ejemplos es programar en Javascript funcionalidades para páginas web. En DesarrolloWeb.com tenemos varios manuales de Javascript que nos van a servir para obtener las bases sobre el lenguaje y hasta conocimientos avanzados. Los podemos ver en la sección de Javascipt a fondo.
Además, para quien no sepa qué es Mootools y donde descargarlo, será necesario que comience por el principio del manual sobre Mootools.
En este ejemplo sólo tenemos que conocer unas cuantas cosas de Mootools.
Para empezar, hay que incluir el código Javascript de las librerías de Mootools, esto se hace incluyendo el archivo externo de código Javascript con las librerías del framework, que hemos descargado de la página de Mootools.
<script src="mootools -1.11.js" type="text/javascript"></script>
La función $()
En Mootols utilizamos la function $() para recibir un objeto con un elemento de la página. $() recibe como parámetro el identificador del elemento, que se ha indicado con el atributo id de la etiqueta HTML de lo que queremos recibir.
Las librerías de Element.js, dentro del paquete llamado NATIVE, contienen varios métodos que podemos invocar sobre los objetos element, para realizar cosas con ellos, analizarlos o alterar su estado. Nosotros vamos a utilizar dos métodos de Element:
Método setOpacity()
Es para alterar la transparencia de un elemento. Recibe un valor entre 0 y 1 para definir cuanto de opaco o transparente que es un elemento. El valor 0 es transparente y el valor 1 es opaco del todo.
Método setStyle()
Para alterar cualquier estilo CSS del elemento. Recibe dos parámetros, el primero el nombre del estilo y el segundo el valor del estilo.
Con estos datos, ya conocemos todo lo que debemos saber de Mootools para entender el siguiente ejemplo.
Primero voy a poner un enlace al ejemplo en marcha para que se vea lo que hemos hecho.
El código del ejemplo es el siguiente:
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
<title>ejemplo básico con mootools</title>
<script src="mootools-comprimido-1.11.js" type="text/javascript"></script>
<script>
window.addEvent('domready', function(){
opaco_actual = 0;
capa_transicion = null;
cargado = true;
});
</script>
</head>
<body>
<div id="texto_presentacion">Hola, esto es un texto para hacer una prueba con Mootools. Simplemente estoy alterando propiedades de el DIV donde está este texto.</div>
<br>
<form>
<input type="button" value="Opacidad 0%" onclick="$('texto_presentacion').setOpacity(0);">
<input type="button" value="Opacidad 25%" onclick="$('texto_presentacion').setOpacity(.25);">
<input type="button" value="Opacidad 50%" onclick="$('texto_presentacion').setOpacity(.5);">
<input type="button" value="Opacidad 75%" onclick="$('texto_presentacion').setOpacity(.75);">
<input type="button" value="Opacidad 100%" onclick="$('texto_presentacion').setOpacity(1);">
<br>
<br>
<input type="button" value="Tamaño 200px" onclick="$('texto_presentacion').setStyle('width', '200px');">
<input type="button" value="Pon borde" onclick="$('texto_presentacion').setStyle('border', '1px solid #ff0000');">
<input type="button" value="Tamaño 50%" onclick="$('texto_presentacion').setStyle('width', '50%');">
</form>
</body>
</html>
Veremos que hemos incluido las librerías Mootools en el head de la página, con un archivo externo Javascript, cargado con la etiqueta <script> .
También debemos fijarnos que tenemos una capa, creada con un <div> que tiene el atributo id para especificar su nombre: id="texto_presentacion".
Luego, tenemos un formulario con una serie de botones, cada uno con un código Javascript que se ejecuta cuando el usuario hace clic sobre el botón.
La primera serie de botones alteran la opacidad del elemento.
$('texto_presentacion').setOpacity(0);
Con $('texto_presentacion') recibimos un objeto que es el elemento que tenía el id="texto_presentacion". Luego sobre ese objeto invocamos el método setOpacity() pasando por parámetro el valor de opacidad. Con eso se cambia la transparencia de la capa.
Luego tenemos otra serie de botones que alteran algunos atributos de estilo del elemento.
$('texto_presentacion').setStyle('width', '200px');
Esto altera el atributo CSS width y lo cambia por el valor 200px, con lo que la capa texto_presentacion tendrá un ancho de 200 pixel.
$('texto_presentacion').setStyle('border', '1px solid #ff0000');
Con esto aleramos el atributo CSS border, y le pasamos un nuevo valor que indica que tenga un borde sólido de 1 pixel y con color rojo.
$('texto_presentacion').setStyle('width', '50%');
Con esto último cambiamos de nuevo el atributo width para poner una anchura de 50%, es decir, la mitad del espacio disponible donde está el elemento.
Espero que el ejemplo haya sido suficientemente sencillo y claro para entender un poco la facilidad con la que podemos realizar acciones, más o menos complejas, en la página web. Todo sin preocuparnos de las particularidades de cada navegador. Podemos probarlo en distintos browsers para ver que funciona perfectamente, es decir, hemos conseguido un código cross-browser, compatible con todos los navegadores, con un trabajo casi nulo.
Dejo de nuevo el enlace para ver el ejemplo en marcha.
No obstante, hay que decir que para poder utilizar Mootools debemos tener antes un conocimiento medio o avanzado de Javascript, porque realmente lo que estamos haciendo en estos ejemplos es programar en Javascript funcionalidades para páginas web. En DesarrolloWeb.com tenemos varios manuales de Javascript que nos van a servir para obtener las bases sobre el lenguaje y hasta conocimientos avanzados. Los podemos ver en la sección de Javascipt a fondo.
Además, para quien no sepa qué es Mootools y donde descargarlo, será necesario que comience por el principio del manual sobre Mootools.
En este ejemplo sólo tenemos que conocer unas cuantas cosas de Mootools.
Para empezar, hay que incluir el código Javascript de las librerías de Mootools, esto se hace incluyendo el archivo externo de código Javascript con las librerías del framework, que hemos descargado de la página de Mootools.
<script src="mootools -1.11.js" type="text/javascript"></script>
La función $()
En Mootols utilizamos la function $() para recibir un objeto con un elemento de la página. $() recibe como parámetro el identificador del elemento, que se ha indicado con el atributo id de la etiqueta HTML de lo que queremos recibir.
Las librerías de Element.js, dentro del paquete llamado NATIVE, contienen varios métodos que podemos invocar sobre los objetos element, para realizar cosas con ellos, analizarlos o alterar su estado. Nosotros vamos a utilizar dos métodos de Element:
Método setOpacity()
Es para alterar la transparencia de un elemento. Recibe un valor entre 0 y 1 para definir cuanto de opaco o transparente que es un elemento. El valor 0 es transparente y el valor 1 es opaco del todo.
Método setStyle()
Para alterar cualquier estilo CSS del elemento. Recibe dos parámetros, el primero el nombre del estilo y el segundo el valor del estilo.
Con estos datos, ya conocemos todo lo que debemos saber de Mootools para entender el siguiente ejemplo.
Primero voy a poner un enlace al ejemplo en marcha para que se vea lo que hemos hecho.
El código del ejemplo es el siguiente:
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
<title>ejemplo básico con mootools</title>
<script src="mootools-comprimido-1.11.js" type="text/javascript"></script>
<script>
window.addEvent('domready', function(){
opaco_actual = 0;
capa_transicion = null;
cargado = true;
});
</script>
</head>
<body>
<div id="texto_presentacion">Hola, esto es un texto para hacer una prueba con Mootools. Simplemente estoy alterando propiedades de el DIV donde está este texto.</div>
<br>
<form>
<input type="button" value="Opacidad 0%" onclick="$('texto_presentacion').setOpacity(0);">
<input type="button" value="Opacidad 25%" onclick="$('texto_presentacion').setOpacity(.25);">
<input type="button" value="Opacidad 50%" onclick="$('texto_presentacion').setOpacity(.5);">
<input type="button" value="Opacidad 75%" onclick="$('texto_presentacion').setOpacity(.75);">
<input type="button" value="Opacidad 100%" onclick="$('texto_presentacion').setOpacity(1);">
<br>
<br>
<input type="button" value="Tamaño 200px" onclick="$('texto_presentacion').setStyle('width', '200px');">
<input type="button" value="Pon borde" onclick="$('texto_presentacion').setStyle('border', '1px solid #ff0000');">
<input type="button" value="Tamaño 50%" onclick="$('texto_presentacion').setStyle('width', '50%');">
</form>
</body>
</html>
Veremos que hemos incluido las librerías Mootools en el head de la página, con un archivo externo Javascript, cargado con la etiqueta <script> .
También debemos fijarnos que tenemos una capa, creada con un <div> que tiene el atributo id para especificar su nombre: id="texto_presentacion".
Luego, tenemos un formulario con una serie de botones, cada uno con un código Javascript que se ejecuta cuando el usuario hace clic sobre el botón.
La primera serie de botones alteran la opacidad del elemento.
$('texto_presentacion').setOpacity(0);
Con $('texto_presentacion') recibimos un objeto que es el elemento que tenía el id="texto_presentacion". Luego sobre ese objeto invocamos el método setOpacity() pasando por parámetro el valor de opacidad. Con eso se cambia la transparencia de la capa.
Luego tenemos otra serie de botones que alteran algunos atributos de estilo del elemento.
$('texto_presentacion').setStyle('width', '200px');
Esto altera el atributo CSS width y lo cambia por el valor 200px, con lo que la capa texto_presentacion tendrá un ancho de 200 pixel.
$('texto_presentacion').setStyle('border', '1px solid #ff0000');
Con esto aleramos el atributo CSS border, y le pasamos un nuevo valor que indica que tenga un borde sólido de 1 pixel y con color rojo.
$('texto_presentacion').setStyle('width', '50%');
Con esto último cambiamos de nuevo el atributo width para poner una anchura de 50%, es decir, la mitad del espacio disponible donde está el elemento.
Espero que el ejemplo haya sido suficientemente sencillo y claro para entender un poco la facilidad con la que podemos realizar acciones, más o menos complejas, en la página web. Todo sin preocuparnos de las particularidades de cada navegador. Podemos probarlo en distintos browsers para ver que funciona perfectamente, es decir, hemos conseguido un código cross-browser, compatible con todos los navegadores, con un trabajo casi nulo.
Dejo de nuevo el enlace para ver el ejemplo en marcha.
Este ejemplo era bastante sencillo, que viene bien para comenzar. Además hemos preparado otro sencillo ejemplo con Mootools que convendrá leer y realizar para ir obteniendo experiencia en la dinámica de trabajo y en las posibilidades de este framework Javascript. Para los que deseen ver otros ejemplos interesantes, algunos bastante más complejos, recomendamos también pasarse por el Taller de Mootools.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...