• Página 1 de 1
  • 1
Moderador del foro: ZorG  
Foro uCoz » Ayuda a los webmasters » Configuración del diseño » Mootools (les presento una herramienta interesante y útil)
Mootools
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 1 | 2:40 PM
MOOTOOLS

Qué es Mootools, un framework Javascript para construir aplicaciones web dinámicas y compatibles con cualquier navegador. Introducción a Mootools.

Seguro estoy de que ya ha llegado el momento de escribir algún artículo sobre este interesante sistema. No puedo decir que sea un experto, ni mucho menos, pero creo que podré ayudar a las personas que quieren dar sus primeros pasos usando Mootools en sus páginas web. Lo primero sería decir que Mootools es un framework Javascript, que sirve para crear fácilmente código Javascript independiente del navegador, de una forma rápida y directa.

Dicho de otra manera, que tal vez sea más fácil de entender, Mootools es un conjunto de librerías, también llamado API, que proveen clases de programación orientada a objetos en Javascript, para realizar una amplia gama de funcionalidades en páginas web, como trabajo con capas, efectos diversos, Ajax y mucho más. Con Mootools podemos programar todo tipo de scripts en el cliente rápidamente y sin preocuparnos de las distintas particularidades de cada navegador. Mootools está especialmente indicado para programar scripts complejos, que nos costaría mucho más trabajo de realizar si partiésemos de cero.

Existen diversos framework en Javascript, la mayoría ni he probado todavía. Mootools es una opción interesante, bastante difundida y que tiene una serie de ventajas como:

Ligero: el framework no pesa demasiado en Kb y no el procesamiento carga poco al navegador.
Modular: mootools se compone de diversos módulos y podemos seleccionar los que vamos a utilizar para incorporarlos en nuestras páginas web, dejando los otros para que no ocupen tiempo de descarga ni procesamiento.
Libre de errores: podemos confiar en el sistema porque Mootools las herramientas de Mootools funcionan perfectamente, sin emitir errores en tiempo de ejecución.
Soportado por una amplia comunidad: existen muchos desarrolladores que lo utilizan con éxito y han creado una serie de componentes adicionales ya listos para usar en nuestras páginas web, como calendarios, editores de texto, etc.

Pero también hay cosas que no me han gustado tanto, como la documentación, que resulta un poco escasa. Realmente tiene una buena documentación, pero la encuentro un poco escueta y falta de explicaciones o ejemplos. También he de decir que me resultó bastante difícil dar los primeros pasos utilizando el framework, es decir, la curva de aprendizaje de Mootools en el inicio resulta bastante complicada y los ejemplos que encontraba en un principio demasiado complejos para poder entender qué y cómo estaban trabajando. No obstante, después de realizar con éxito unas cuantas pruebas, ya pude empezar a crear mis propios scripts personales. Uno de mis objetivos es preparar una buena serie de ejemplos sencillos para que los nuevos desarrolladores de Mootools puedan comenzar con mayor facilidad que yo en el trabajo con el framework.

Para acabar esta introducción hay que decir que Mootools es gratuito y de código abierto, con licencia MIT, que permite usarlo y modificarlo en cualquier caso de uso.

En los artículos siguientes voy a ilustrar el uso de Mootools, con el la versión framework 1.11, que es la que estaba en producción en el momento de escribir este texto.

Dejo la URL de Mootools para consultas y descargas del Framework. http://mootools.net


DESCARGA DE MOOTOOLS

Podemos descargar Mootools desde la propia página del framework. Debemos elegir los módulos con los que queremos trabajar y la compresión del archivo.


La descarga de Mootools es sencilla, pero incorpora varias opciones que podemos resumir en este artículo. Tenemos dos cosas que elegir cuando hacemos el download de las librerías:

Módulos que queremos descargar:
El código de Mootools está repartido en varios módulos o librerías, pero nuestras páginas web puede que no realicen todas las acciones que permiten los distintos módulos. Es decir, puede que descarguemos sólo Mootools para realizar efectos con capas, o para invocar fácilmente procesos Ajax. Así que, en la hora de descargar el framework, podemos elegir qué módulos traernos y así liberar a los usuarios que visitan nuestras webs de tiempo de descarga de las librerías y tiempo de interpretación por parte del navgador.

Los módulos tienen algunas dependencias unos con otros. Pero la herramienta para descarga es "inteligente" y si seleccionamos un módulo que necesita de otro, lo marca automáticamente para la descarga en el paquete que necesitamos. El módulo Core es necesario para cualquier paquete de librerías Mootools, por lo que siempre se debe descargar y aparece marcado desde el principio. Luego, si por ejemplo marcamos las librerías Element.Event, se marcarán adicionalmente otra serie de librerías que son necesarias para que esta funcione, como Class, Array, Element, etc.

Tipo de compresión de la descarga:
Además también tenemos que seleccionar el tipo de compresión. Esto es para hacer la descarga de un archivo con las librerías con unas características específicas que lo hacen pesar más o menos. Todos los archivos son de texto, con el código listo para incluir en nuestras páginas, pero en unos están los comentarios al código, otros no tienen saltos de línea o espacios, en otros incluso de han cambiado los nombres de variables internas por otros más cortos, etc.

Lo que está claro que cuanta mayor compresión, menos ocupará el archivo y menor será por tanto el tiempo de descarga en nuestra web. Pero cuando estamos desarrollando igual nos conviene una versión con todo el código y la documentación en el propio archivo, para que podamos guiarnos con ella para depurar cualquier fallo.

En esta serie de artículos he utilizado la versión de Mootools 1.11, que era la que estaba para descarga en el momento de hacer este texto. Voy a colocar aquí los archivos para descarga, para que cualquiera que quiera seguir estas explicaciones pueda utilizar las mismas versiones de la librería que usé yo en los ejemplos.

mootools-release-1.11-completo-comprimido.js.txt
El framework completo y comprimido 43Kb

mootools-release-1.11-completo-documentado-comentarios.js.txt
Mootools completo, documentado y con comentarios 180Kb

mootools-1.11-parcial-comprimido.js.txt
El framework con las funcionalidades suficientes para hacer los primeros ejemplos, comprimido 20kb

No obstante, hay que remarcar que para nuestros proyectos será mejor descargar Mootools en las versiones más actuales, que vendrá más completo y con mayor depuración del código. Además, desde la propia página de descargas podremos seleccionar los módulos que realmente vamos a necesitar en nuestras aplicaciones.



Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 2 | 2:41 PM
PRIMER EJEMPLO CON MOOTOOLS

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, Mootools 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.

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.

Quote
<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.

El código del ejemplo es el siguiente:

Quote
<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.

Quote
$('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.

Quote
$('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.

Quote
$('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.

Quote
$('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 el enlace para ver el ejemplo en marcha.


SEGUNDO EJEMPLO DE MOOTOOLS

Vamos a otro ejemplo sencillo con Mootools para crear un scroll en una capa de la página.

Para continuar el manual de Mootools, vamos a ver un segundo ejemplo de gran sencillez para hacer un scroll en una capa por Javascript. Este sistema de scroll o desplazamiento sería muy complejo de hacer sin la ayuda del framework como Mootools. Nosotros lo vamos a hacer con una simple ejecución de una sentencia Javascript.

Ahora voy a poner el enlace al ejemplo en marcha para que podamos verlo en funcionamiento antes de pasar a visualizar el código.

El presente ejemplo utiliza el módulo llamado Element.Dimensions.js, que tiene dos métodos que nos van a servir para hacer el desplazamiento:

Método scrollTo()
Sirve para desplazar un elemento a una nueva posición. Recibe dos parámetros, las coordenadas X e Y a las que queremos desplazar el scroll del elemento.

Método getSize()
Sirve para obtener las dimensiones de un elemento, así como la posición actual del scroll o desplazamiento que se haya realizado sobre el mismo. Devuelve un objeto con una serie de propiedades que son las informaciones sobre tamaño y desplazamiento del elemento. Entre las propiedades tiene la que nos interesa, que se llama scroll y a su vez, scroll tiene dos propiedades que son las X e Y del scroll que se haya realizado. Por ejemplo:

Quote
mielemento.getSize().scroll.x

Nos devolvería los píxel que se haya desplazado el elemento mielemento en la horizontal.

Quote
mielemento.getSize().scroll.y

Nos devolvería el desplazamiento vertical que se haya realizado sobre el elemento mielemento.

El código de este sencillo ejemplo es el siguiente:

Quote
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
<title>Ejemplo 2 con Mootools</title>
<script src="mootools-comprimido-1.11.js" type="text/javascript"></script>
</head>

<body>

<div id="texto_scroll" style="overflow: auto; height: 70px; width: 400px;">
<div style="width:100%;">
Hola, esto es un texto que voy a poner de prueba para hacer un scroll rápidamente con Mootools.
<br>
La verdad es que este framework de javscript funciona muy bien y permite un desarrollo sorprendentemente rápido.
<br>
En pocos pasos y con absolutamente ningún conocimiento del Framework he conseguido hacer esta página. Me he ayudado de la documentación y de unos ejemplos que he encontrado en la página: http://clientside.cnet.com/wiki/mootorial/
<br>
Ahora tendría que intentar ir poco a poco para conocer todo el funcionamiento en detalle.
</div>

</div>
<br>
<script>
capa_desplazar = $('texto_scroll');
</script>
<a href="javascript:capa_desplazar.scrollTo(0, capa_desplazar.getSize().scroll.y + 20);">Abajo</a> // <a href="javascript:capa_desplazar.scrollTo(0, capa_desplazar.getSize().scroll.y - 20);">Arriba</a>

</body>
</html>

Como vemos, primero hemos incluido dentro del head de la página el script con el framework de Mootools, con la etiqueta <script>.

Luego hemos creado una capa con un texto y una serie de estilos CSS para que tenga un tamaño definido, que no permita ver el contenido completo del texto, y unas barras de desplazamiento para hacer el scroll.

A continuación hay un script que crea una variable global a la página que contiene la capa que queremos desplazar.

Quote
<script>
capa_desplazar = $('texto_scroll');
</script>

Luego hay un par de enlaces que son los que, pulsándolos, desplazará automáticamente el texto arriba o abajo.

Quote
<a href="javascript:capa_desplazar.scrollTo(0, capa_desplazar.getSize().scroll.y + 20);">Abajo</a>

Con "javascript:" metido en un href de un enlace, estamos indicando que se tiene que ejecutar esa sentencia javascript al pulsar el link. Y la sentencia es:

Quote
capa_desplazar.scrollTo(0, capa_desplazar.getSize().scroll.y + 20);

Eso indica que en la variable de la capa que habíamos creado antes, capa_desplazar, se tiene que ejecutar el método scrollTo(). Este método recibe como primer parámetro 0, porque no queremos desplazarlo horizontalmente. Luego como desplazamiento vertical ponemos el desplazamiento vertical del elemento + 20 píxel. El desplazamiento vertical actual del elemento lo sacamos con capa_desplazar.getSize().scroll.y, tal como habíamos explicado antes en este artículo.

El enlace de para desplazar el scroll hacia arriba sería muy similar al que acabamos de ver.

Quote
<a href="javascript:capa_desplazar.scrollTo(0, capa_desplazar.getSize().scroll.y - 20);">Arriba</a>

La única diferencia es que ahora hacemos un scrollTo() a cero en la horizontal y a el scroll actual - 20 píxel.

Espero que se haya entendido el ejemplo. Podemos ir a la documentación de Mootools, del módulo Element.Dimensions.js para obtener la descripción completa de los métodos que hemos utilizado.

Hasta aquí en este manual hemos visto un par de ejemplos muy simples sobre Mootools, este segundo un poco más práctico. Pero el objetivo no es sino expresar por medio de un código la sencillez con la que se programa con Mootools para conseguir efectos que de otra manera nos hubiera costado mucho trabajo programar. Y todo compatible con los navegadores más habituales.


PESTAÑAS DINÁMICAS CON CSS Y MOOTOOLS

Sobre cómo crear una interfaz de pestañas dinámicas, maquetadas con CSS y con dinamismo creado con Javascript y Mootools.

Vamos a ver cómo crear un sistema de pestañas o tabs que responda a las acciones del usuario. De modo que, haciendo clic en las distintas pestañas, se muestren dinámicamente los contenidos asociados a los distintos items, en el mismo espacio y sin recargar los contenidos de la página. Es decir, tendremos varias pestañas y un área donde se mostrarán los contenidos relacionados con cada una. Inicialmente se mostrará un contenido de una pestaña y luego, cuando se seleccionen otras, se cambiará el color para mostrar la pestaña activa y se mostrará el contenido asociado a la nueva tab activa.

Quizás lo más fácil es ver el ejemplo en marcha para hacerse una idea exacta de nuestras intenciones.

Este artículo tiene una cierta intención:

Queremos mostrar cómo animar un sistema de pestañas y aplicar la interacción con el usuario, para que el sistema de tabs sea perfectamente funcional y sirva para mantener varios contenidos en un mismo espacio. Todo se debe hacer dinámicamente y respondiendo a las acciones del usuario. En este caso, el artículo sirve de colofón a una serie de artículos en los que venimos creando un sistema de tabs maquetados con CSS.

Diseño de pestañas con CSS
Pestañas CSS: mejora de detalles

Cambios sobre la maquetación CSS de las pestañas
En los dos artículos mencionados anteriormente hemos explicado los detalles de la creación de las pestañas a partir de listas HTML y estilos CSS.

Para aplicar el dinamismo con Javascript sobre esas pestañas hemos hecho un par de cambios en el código HTML y CSS de las pestañas.

Por una parte, hemos creado unas nuevas capas donde se muestran los contenidos que tienen que visualizarse cuando se active cada una de las pestañas. Inicialmente sólo uno de los contenidos asociados a los tab está visible, el que corresponde con la pestaña activa. Los demás los tenemos que ocultar de momento.

Por otra parte se han incorporado unos identificadores (atributos id) en los elementos que queremos dinamizar. Esos identificadores han sido colocados en las etiquetas LI de las pestañas y en las etiquetas DIV de los contenidos asociados a ellas. Serán importantes para acceder a los elementos desde Javascript.

El código HTML quedará de la siguiente manera:

Quote
<div id="pestanas">
<ul>
<li id="p1"><a href="javascript: void(0);" onclick="cambiaPestana(0)">DesarrolloWeb.com</a></li>
<li id="p2" class="activa"><a href="javascript: void(0);" onclick="cambiaPestana(1)">CriarWeb.com</a></li>
<li id="p3"><a href="javascript: void(0);" onclick="cambiaPestana(2)">Comunidad</a></li>
<li id="otrapestana"><a href="javascript: void(0);" onclick="cambiaPestana(3)">Otro enlace más largo</a></li>
</ul>
</div>
<div id="contenedorpestanas">
<div id="cont1" class="nover">Contenido de la pestaña con título DesarrolloWeb.com</div>
<div id="cont2">Contenido de la segunda pestaña, que tenía el título CriarWeb.com!</div>
<div id="cont3" class="nover">Otro contenido de la pestaña<br>En este caso el tercer elemento.</div>
<div id="cont4" class="nover">El contenido de la última pestaña<p>Le creo un párrafo para que se haga un poco mayor!</p></div>
</div>

Podemos haber observado además que los enlaces tienen unos códigos para definir el href y el evento onclick. En seguida los explicaremos.

También podremos observar que dentro del DIV con id="contenedorpestanas" se han colocado los distintos elementos que se van a asociar con cada una de las pestañas. A estos elementos les hemos colocado una clase CSS class="nover" para que inicialmente no estén a la vista. Sólo hemos dejado a la vista (sin el mencionado class="nover") el elemento asociado a la segunda pestaña, que es la que está activa.

La clase "nover" tendrá este código CSS:

Quote
.nover{
display: none;
}

Descargar y enlazar el framework Mootools
Ahora unas notas sobre Mootools, que es una herramienta que permite la programación de aplicaciones web del lado del cliente de una manera sencilla y compatible con todos los navegadores, ya que tiene clases, con sus propiedades y métodos para hacer cualquier cosa que podamos necesitar.

Este ejemplo lo hemos desarrollado con Mootools, por lo que, si no lo tenemos, debemos ir a la página de inicio del Framework para descargarlo: http://mootools.net

Haremos el download del "core" de Mootools, aunque en en vídeo que podrás ver más tarde explicaremos la forma de descargar una versión reducida del "core", dado que nuestro script es tan sencillo que no necesita incorporar todas las características del framework.

Para incluir Mootools en la página tenemos que crear una etiqueta script con la que enlazar con el código del framework:

Quote
<script src="mootools-1.2.2-core-reducido.js" type="text/javascript"></script>

Script Javascript que hace uso de Mootools para animar las pestañas
Por último podemos dar paso al script Javascript que vamos a utilizar para crear el dinamismo en las pestañas y la interacción con el usuario.

El dinamismo que tenemos que producir sólo tiene que hacer 1 cosa: estar pendiente de los clic del usuario sobre las pestañas, para mostrar en todo momento como activa la pestaña sobre la que se ha hecho clic y además presentar el contenido asociado a ese tab activo.

Para lo cual, voy a crear una función que se encargue de todo. Deberá recibir de algún modo la pestaña que se debe activar y básicamente hará estas acciones:

• Quitar la clase "activa" de todas las pestañas (realmente sólo necesitaría quitar la clase "activa" del tab que estaba seleccionado antes de esta llamada a la función, pero como no sé cuál es, pues simplemente quito la clase "activa" de todas las pestañas.
• Colocar la clase "activa" sobre la pestaña que se ha pulsado y que había recibido por parámetro.
• Ocultar el contenido asociado a todas las pestañas (aquí, de nuevo, hubiera sido suficiente ocultar el contenido asociado a la pestaña que estaba activa anteriormente, pero como no sé cuál era, pues me vale con ocultar todos los contenidos asociados a las tabs)
• Mostrar el contenido de la pestaña que se había pulsado.

Eso es todo. Pero para hacerlo antes voy a tener que crear unos arrays con todos los identificadores de las pestañas (etiquetas LI) y los contenidos asociados a éstas (etiquetas DIV que hay dentro del elemento "contenedorpestanas").

Quote
var idsPestanas = ["p1", "p2", "p3", "otrapestana"];
var idsContenedores = ["cont1", "cont2", "cont3", "cont4"];

Estos arrays nos servirán para iterar sobre todos los elementos de todas las tabs.

Y ahora podemos ver la función cambiaPestana(), que recibe el índice de la pestaña que ha sido pulsada. Este índice es un número entero que corresponde con el valor de la nueva pestaña que tenemos que poner como activa. Recordemos que los Arrays comienzan por el índice cero, por lo que para activar la primera pestaña se tendrá que enviar a la función el índice de array con valor cero (0) y para activar la última, se debería pasar el índice tres (3), que en este caso corresponde con la cuarta y última pestaña.

Quote
function cambiaPestana(id){
//borro la clase activa de todas las pestañas
idsPestanas.each(function(item){
$(item).removeClass("activa");
});
//coloco la clase activa a la pestaña que se recibe por parámetro
$(idsPestanas[id]).addClass("activa");
//oculto el contenido de todos los contenedores asociados a las pestañas
idsContenedores.each(function(miItem){
$(miItem).addClass("nover");
});
//en el contenido que está asociado con la pestaña activa, quito la clase nover
$(idsContenedores[id]).removeClass("nover");
}

El código lo hemos comentado para que se pueda entender mejor. No obstante, utiliza diversas llamadas a métodos de distintas clases Mootools para crear el dinamismo que resultaría imposible explicar si no se conoce el mencionado framework Javascript.

En concreto hace uso del método each() de Native Array, para recorrer todos los elementos de los arrays de identificadores creados anteriormente. También hace uso de la clase Element, para seleccionar elementos con la función dólar y para añadir y quitar clases CSS de los elementos de la página con los métodos addClass() y removeClass().

Por último, debemos realizar las llamadas a esta función, cuando se hace clic sobre los enlaces de las pestañas. Eso lo hemos conseguido con los atributos onclick de los enlaces, en los que hemos escrito la sentencia Javascript para llamar a la función pasando el índice de la pestaña que se debe activar.

Quote
onclick="cambiaPestana(0)"
...
onclick="cambiaPestana(3)"

Y sobre los href de los enlaces, decir que se llama a una función void() de Javascript, que no devuelve nada, para que simplemente el enlace no haga nada.

Ya lo tenemos todo, así que les recomendamos acceder al ejemplo en marcha, donde podrán ver también el código fuente completo de este sistema.

Mootools y reutilización del código
Lo que sí quiero remarcar es que este ejemplo está hecho para simplificar las cosas. No está desarrollado como me gustaría, pero al menos es sencillo y funcional. Mootools es un framework totalmente orientado a objetos y, a medida que lo vayamos dominando, experimentaremos que si hacemos todo por medio de clases, podremos reutilizar el código en diversos sitios o en páginas dentro de un mismo web.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 3 | 2:49 PM
Efectos con Mootools

Comenzamos a estudiar los efectos que se pueden hacer con Mootools con la clase Fx y varias otras que heredan de ella.

Para estudiar los efectos en Mootools, comenzaremos explicando cómo hacer cosas sencillas, como hacer un fundido de opaco a transparente para ocultar un elemento. Luego nos detendremos más en los detalles y aprenderemos a utilizar las clases que heredan de Fx con todas sus posibilidades y comprobaremos que las herramientas de Mootools son bastante potentes.

Clase Fx
La clase Fx sirve para hacer efectos especiales, pero raramente la utilizaremos a ella misma. En realidad sirve como base para el core de Mootools para realizar varias clases derivadas, que implementan diversos tipos de efectos que nos pueden venir bien para enriquecer la experiencia de usuario.

Sin embargo, será importante conocer un poco esta clase, o al menos tenerla en cuenta cuando consultemos la documentación de Mootools, porque tiene muchas cosas que son comunes a todas las clases derivadas para hacer efectos.

Clases que heredan de Fx
Como ya se adelantaba, existen varias clases que se construyen en Mootools a partir de Fx, que sirven para hacer efectos de diversos tipos concretos. Estas clases son:

Fx.CSS
Esta clase tiene funcionalidades para interpretar estilos y clases CSS. Pero todos los métodos y propiedades de esta clase son privados, con lo que no podemos hacer nada con ella, sino que sirve para que las otras clases de Fx la utilicen.

Fx.Tween
Una clase que sirve para hacer una transición de cualquier propiedad CSS, de un valor a otro. Con ella podremos hacer efectos con cualquier duración, de modo que su presentación sea suave. Por ejemplo si hacemos un efecto para alterar la propiedad "top" de un elemento de la página, desde el valor 0 al 100, lo que ocurrirá es que el elemento se moverá por la página 100 píxeles hacia abajo, desde el pixel 0 al 100. Si habíamos configurado el estilo con una duración de, por ejemplo, 1 segundo, el movimiento del elemento, desde que está en la posición inicial a que llega a la final, tardará 1 segundo, con lo que el usuario lo verá suavizado.

Fx.Morph
Esta clase es parecida a Fx.Teen, con la diferencia que permite alterar varias propiedades CSS al mismo tiempo.

Fx.Transitions
Para hacer efectos más detallistas, que ajustan el proceso de transición con una función matemática. Por ejemplo esto sirve para hacer un desplazamiento de un elemento, pero donde la velocidad del movimiento no es linear, sino que es por ejemplo exponencial, siendo más rápido al inicio o al final del movimiento. Existen diferentes funciones matemáticas preestablecidas para genera efectos simpáticos, como movimientos con un rebote cuando llegan al final o que se pasan y luego vuelven, como si fuera un elástico.

Ejemplos sencillos de efectos con Mootools
Para acabar esta introducción a los efectos, vamos a mostrar cómo hacer algunos efectos sobre elementos de la página con Mootools. Para hacer estos efectos sencillos vamos a utilizar algunos métodos rápidos que tiene Fx.Tween.

Cuando tenemos la clase Fx.Tween cargada, se crean unos métodos nuevos para los elementos de la página (clase Element), para hacer efectos muy recurridos, como fundidos o resaltados. Estos métodos los podemos invocar sobre cualquier elemento, como cualquier otro método de los de la clase Element.

Método fade()
Método highlight()
Método tween()


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 4 | 2:53 PM
Método fade() para hacer un efecto de fundido

Aprendemos a utilizar el método fade() de la clase Element de Mootools, que sirve para hacer efectos de fundido con transparencia.

Estamos viendo una serie de métodos para hacer efectos rápidos en Mootools. En el capítulo anterior dimos una introducción a lo que son los efectos de Mootools y queríamos empezar mostrando cómo hacer efectos recurridos y sencillos.

Fade() es un método muy rápido de usar y que sin duda resulta muy útil y bastante atractivo visualmente. Se trata de hacer lo que en inglés llaman un "fade in" o "fade out", que no es más que un efecto que muestra u oculta un elemento, con un fundido de transparente a opaco, o viceversa.

El método fade() se puede utilizar sobre cualquier elemento de la página que tengamos seleccionado o bien con la función dólar $() o la función dolardolar $$().

Por ejemplo, tenemos un elemento como este:

Quote
<div id="mielemento">
Este elemento...
</div>

Podríamos hacer un fundido de opaco a transparente con la sentencia:

Quote
$("mielemento").fade("out");

Ahora, para hacer un fundido de transparente a opaco, se puede invocar el método fade() de esta manera:

Quote
$("mielemento").fade("in");

Un ejemplo completo de uso de fade() lo podemos ver a continuación, en el que tenemos un elemento y dos enlaces, uno para hacer un "fade in" y otro para hacer un "fade out", sobre ese elemento:

Quote
<html>
<head>
<title>Fade en mootools</title>
<script src="../mootools-1.2.3-core-yc.js" type="text/javascript"></script>
<script>
window.addEvent("domready", function(){
//creo un evento para el enlace con id=fadeout
$("fadeout").addEvent("click", function(evento){
evento.preventDefault();
//invoco el método fade sobre el elemento que quiero ocultar
$("mielemento").fade("out");
});
//creo un evento para el enlace con id=fadein
$("fadein").addEvent("click", function(evento){
evento.preventDefault();
//invoco el método fade sobre el elemento que quiero mostrar
$("mielemento").fade("in");
});
});
</script>
</head>

<body>

<a href="#" id="fadeout">Fade out</a> | <a href="#" id="fadein">Fade in</a>
<br>
<br>
<div id="mielemento" style="background-color: #ddffdd; padding: 10px; width: 120px;">
Este elemento lo tenemos para jugar a hacer efectos con Mootools
</div>

</body>
</html>

Podemos ver este ejemplo en marcha en una página aparte.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
Jexus1
Mensajes: 2
Reputación: 0
Mensaje Nº 5 | 1:35 AM
Se ve bien ,cuando tenga un poco de tiempo lo pruebo xD
Foro uCoz » Ayuda a los webmasters » Configuración del diseño » Mootools (les presento una herramienta interesante y útil)
  • Página 1 de 1
  • 1
Búscar: