Tutoriales de Desarrollo y Diseño Web | Web.Ontuts

Pequeña reflexión Inicial

La mayoría de los frameworks javascript open source existentes para desarrollares ofrecen ventajas e incovenientes dependiendo del entorno donde se usan,  o de los requisitos que se necesitan. A medida que se avanza en el desarrollo de éstos, sus desarrolladores han ido enfocándose en su ámbito preferido, permitiendo así al usuario seleccionar un framework u otro dependiendo de los requisitos del proyecto a desarrollar.

Por ejemplo, dojo, uno de mis preferidos, es un framework muy potente y muy completo, que otorga al usuario desarrollador, las armas necesarias para crear una RIA (Rich Interface Application) muy vistosa y muy eficaz en poco tiempo. Incluye consigo la librería dijit, que contiene widgets out-of-the-box para todo lo que necesario para conseguir una buena RIA: desde campos de sugerencias (llamados combobox o filteringselects), hasta una sencilla forma de crear layouts (pestañas, tabs, etc).

Sin embargo, al generar una página web expuesta al público, dojo puede ser demasiado pesado, y es por eso que se hace necesario revisar otros frameworks. En este caso nos encontramos con Prototype, jQuery y/o MooTools (entre otros). Históricamente, los dos primeros han protagonizado una encarnizada batalla para obtener el poder, saliendo generalmente vencedor uno u otro dependiendo quién lo analice (demostrando que existen opiniones para todos los gustos). MooTools, algo más “por libre”  y uno de los más nuevos, ha aprendido de los errores de los dos, y ha generado un framework liviano y modular, aunque algo difícil de usar si es “tu primera vez”.

En este tutorial nos centraremos en Prototype, ya que es el que más uso. ¿Por qué? Supongo que porque al tirar la moneda en su día, salió “cara”; podría haber salido “cruz”, y ahora estaríamos hablando de jQuery, pero no es así. Sin embargo, los conceptos en ambos frameworks son muy sencillos y similares, y puede que te interese leer este “primeros pasos de prototype” para compararlo con jQuery, así que te animo a que sigas leyendo.

Prototype y jQuery son dos frameworks muy similares. Son muy útiles a la hora de desarrollar webs de cara al “gran público”, ya que ofrecen comandos e instrucciones que simplifican al máximo las tareas de programación javascript, y minimizan, sobre todo, la probabilidad de error al desarrollar.

Prototype – Introducción

Prototype sorprende al desarrollador típico de javascript nada más comenzar a usarlo. ¿Por qué? Por su modo de emplearse. Cuando comencé, esperaba que existiera una clase “Prototype” o similar, que contuviera de algún modo más o menos organizado (probablamente menos), todas las nuevas instrucciones introducidas por el framework. Pero estaba muy equivocado.

Prototype, y de allí su nombre, extiende el prototipado de los objetos nativos de javascript, lo que significa que añade al propio objeto las funciones adicionales. Por ejemplo, un objeto javascript en sí (digamos una capa “div”) no contiene por sí solo el método “hide()” (esconder), pero al añadirle el framework prototype, mágicamente, es posible invocar el método “hide()” para ocultar esta capa. Interesante planteamiento, ¿a que sí?

Funciones típicas

La función más típica a la hora de usar javascript de un modo algo más avanzado, es el “document.getElementById”. Cada vez que usamos este método hemos de teclear 22 caracteres, y además, pensar si la D es mayúscula o no; es algo que nos pasa a todos. Con prototype (y por cierto, también con jQuery), esta función pasa a tener un alias más asequible denominado $.

Por ejemplo, $(“capa”) es equivalente a escribir document.getElementById(“capa”)

Bastante más eficaz, ¿verdad?

Otra de las funciones más útiles es $$. Esta función permite llegar a los objetos a través de su selector CSS (es decir, a través de sus clases y sus ID).

Por ejemplo, $$(‘#capa’) sería similar a $(‘capa’), aunque podría usarse por ejemplo $$(‘div.blanca’) para obtener todos los div cuyo class es blanca.

Para terminar el apartado Funciones Típicas, explicaremos el “each”, que permite aplicar una función a cada uno de los métodos del array de una forma sencillísima.

$$('div.blanca').each(function(r) { r.removeClassName('blanca'); }

Este código de una sola línea elimina la clase “blanca” a todos los div que la contengan.

La función $ sustituye al fatídico y difícil de escribir document.getElementById sustituyendo 22 caracteres por uno solo.

Jugando con clases

Cinco funciones relacionadas con CSS que no requieren mayor explicación son:

$('capa').hide();
$('capa').show();
$('capa').toggle();
$('capa').addClassName('blanca');
$('capa').removeClassName('blanca');

Trabajando con DOM

Trabajar con DOM implica poder alterar el documento mediante javascript; es decir, modificar elementos html desde y dónde se desee.

Esto es sencillo de realizar con prototype mediante los métodos insert y remove. Además, a la hora de insertar elementos,es posible indicar la situación relativa respecto al elemento donde insertarlo (detrás de, delante de, antes o encima de, y después o debajo de).

$('capa').insert({after:'contenidohtml'});
$('capa').insert({before:'contenidohtml'});
$('capa').insert({top:'contenidohtml'});
$('capa').insert({bottom:'contenidohtml'});

Eliminar un objeto es tan fácil como:

$('capa').remove()

Conclusión

En este tutorial, hemos visto cómo depende el proyecto puede ser más útil usar un framework js u otro. Para el caso de páginas web abiertas al público, es necesario utilizar un framework liviano. Si es la primera vez que se trabaja con estos frameworks, uno de los más sencillos es Prototype. Se han mostrado la funcionalidad de algunos métodos que incluye este framework para demostrar la sencillez de su uso.

Si deseas saber más sobre Prototype y conocer a fondo su API, te invitamos a visitar: http://api.prototypejs.org/

No te olvides de descargar los ejemplos si quieres ver los métodos mencionados en acción.

Y por supuesto, si conoces jQuery, dojo, Prototype y/o MooTools de antemano, y no estás de acuerdo en algo que he dicho anteriormente, te invito a que comparemos opiniones a través de los comentarios.

¡Nos vemos! $(‘jmarti’).hide();