Efectos visuales para tu web con Script.aculo.us

Scriptaculous

¿Qué es Script.aculo.us?

Scriptaculous es una librería Javascript que nos permite añadir efectos visuales al estilo de Flash en nuestra web mediante sencillas instrucciones en Javascript. Esta librería utiliza como base otra famosa librería Javascript llamada Prototype por lo que son totalmente compatibles. Su sintaxis es realmente sencilla y en muy poco tiempo seremos capaces de incluir efectos visuales en nuestras páginas web.

Este artículo es sólo una introducción, pero en artículos siguientes se irán poniendo ejemplos para ver las capacidades de esta librería.

¿Por qué utilizar Scriptaculous?

Porque hace la experiencia de navegación de tu página más agradable e incrementa la usabilidad. Pensad en las posibilidades que ofrece la utilidad dragdrop de esta librería para hacer un carro de la compra por poner un ejemplo.
Eso sí, quien hacer una página que parezca Flash cargada de efectos visuales que utilice Flash y se olvide de esta librería que se le quedará corta y hará de la página un sitio horriblemente innavegable.

¿Cómo se utiliza Scriptaculous?

El procedimiento es sencillo. Descargamos la última versión de su página oficial y lo descomprimimos.
En la página web importamos las librerías Javascript de la siguiente manera cambiando la ruta según el caso.

<head>
<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript" src="/js/scriptaculous/scriptaculous.js"></script>
</head>

En ocasiones no necesitaremos utilizar todos los módulos por lo que podemos importar únicamente las lbrerías de nuestro interés:

<head>
<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript" src="/js/scriptaculous/scriptaculous.js?load=effects,controls">
</script>
</head>

Los módulos de Scriptaculous

Scriptaculous cuenta con los siguientes módulos:

  • builder: para la manipulación del DOM del documento, puede añadir y elminar nodos del árbol DOM.
  • controls
    • dragdrop: para mover y arrastrar componentes con el ratón.
    • acordion: menus desplegables tipo acordeon
    • sortables: listas ordenables
    • slider: controles deslizantes.
    • autocompleter: sugerencias de autocompletado en inputs de formularios.
    • In-place editing: nos permite editar con un simple click cualquier elemento que no es editable como <p>, <li> o <a>.
  • effects:
    • opacity: cambia la transparencia del elemento
    • scale: cambia las dimensiones de un elemento.
    • morph: transformaciones
    • move: movimiento
    • highlight: cambia el color de fondo de un elemento.
    • parallel: combina varios de los anteriores efectos para que se ejecuten en paralelo.
    • y una colección de efectos combinados que será lo que más usaremos.

Ventajas y desventajas de scriptaculous

Ventajas

  • No es flash, por lo que los contenidos de la página son fácilmente indexables por los robots de los buscadores.
  • No tener que aprender Flash para hacer cosas vistosas en la web.
  • Es gratuito.

Desventajas

  • La documentación es muy pobre. Tiene una wiki insuficiente en el sitio oficial, hay mejores referencias en páginas no oficiales
  • El peso. Son unos 140KB que hay que cargar por lo menos en la primera visita.

Descargar librería en Script.aculo.us

Sin categoría

Deja una respuesta