Dinamismo en páginas web con Mootools

13 07 2009

logo de mootools

Hola a todos! ya me animo yo a llenar de contenidos este precioso blog.

Como algunos sabéis, ahora me ha dado por aprender un poquito de diseño y programación web (yo y mis hobbies veraniegos), así que me voy a iniciar hablándoos de una librería muy guapa para javascript con la que podemos darle más dinamismo a nuestras páginas webs y así abandonar esos diseños tan estáticos que nos recuerdan a las páginas que visitábamos cuando usábamos internet explorer xD.

La librería en cuestión se llama Mootools (algunos ya la conoceréis u os sonará). Con ella podemos hacer cosas como que un recuadro con información que permanecía oculto, al mostrarse lo haga deslizándose suavemente (típicos efectos que podéis ver por ejemplo aquí, en wordpress). Podéis probar unas demos de esos efectos en el siguiente enlace demos.

A continuación os pondré los pasos a seguir más un código de ejemplo que he utilizado yo para una web de prueba que estoy haciendo, que os puede servir de guía para empezar a hacer efectitos molones.

1. Lo primero es descargar de la web de mootools los archivos fuente que contienen las librerías javascript que vamos a utilizar, os recomiendo que lo descarguéis todo, tanto ‘core’ como ‘more’. aunque no vayáis a utilizar todas las funcionalidades, ya que sólo son 2 archivitos de texto que no ocupan nada.

2. Copiad los 2 archivos .js que os habéis descargado, a la raiz del proyecto o subcarpetas (o donde os guste más y lo tengáis a mano) para hacer uso de ellos.

3. En el head del html, incluid los 2 archivos javascript para que puedan ser usados. En mi caso:

<script src="mootools-1.2.3-core-nc.js" type="text/javascript"></script>
<script src="mootools-1.2.3.1-more.js" type="text/javascript"></script>

4. Especificar un id (si no lo tenéis ya) al div que queréis animar. En mi caso:

<div id="error">

5. Al inicio de vuestro código javascript, añadir lo siguiente:

window.addEvent('domready', function(){
 errorSlide = new Fx.Slide('error');
 errorSlide.hide();
});

Esto va a hacer que justo al inicio de la carga de la página, se cree un objeto FX.Slide (al que aquí hemos llamado ‘errorSlide’) que animará al ‘div’ que hemos pasado como parámetro, en mi caso el div ‘error’. Seguidamente hacemos “hide()” de ese objeto para que lo oculte (no queremos que se muestre aún).

6. Ahora ya sólo nos queda mostrarlo y ocultarlo “animadamente” conforme nos vaya haciendo falta en nuestro código, por ejemplo:

function mostrarError(){
  errorSlide.slideIn();
}

function ocultarError(){
  errorSlide.slideOut();
}

La diferencia entre slideOut() y hide() es que hide() lo hace sin animación (lo oculta instantaneamente). También disponemos de otras funciones como toggle(), que muestra u oculta dependiendo de su estado (mostrandose u ocultado).

Podéis consultar la api aquí o bien acceder a la página principal de mootools.

Espero que esto os sirva de ayuda, ahora o en el futuro. Un saludo y hasta la próxima.

Anuncios

Acciones

Information

2 responses

11 08 2009
Trackback

Comentario…

[..]Articulo Indexado Correctamente[..]…

10 04 2013
Read the Full Article

Thanks a lot for sharing this with all of us you actually know what you’re talking about! Bookmarked. Please also visit my web site =). We could have a link exchange agreement between us!

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s




A %d blogueros les gusta esto: