tecnicalia.com

Luego del anterior artículo develando cómo se realiza el efecto Parallax con CSS, surgieron dudas de su real aplicación en proyectos web. Así como se presentó no tiene mucho sentido, y como mencioné, es difícil verlo aplicado sin que se note el efecto que produce (ya que el usuario no suele modificar el tamaño de la ventana de su browser). Así que para paliar esa frustración que surgió en los comentarios, me propuse inventar un método para verlo funcionando de acuerdo a la interacción del usuario con el sitio. Primero intenté con el movimiento del mouse sobre la superficie de la ventana (con lo que hice para el sitio de 2monos), pero no funcionó por problemas de posicionamiento relativo de los elementos. Luego, pensé en movimiento horizontal mediante anclas; algo que ya había utilizado en otras ocasiones anteriores. Felizmente logré integrarlo a través del grandioso Mootools.

(more…)

Mootools nos permite integrar fácilmente Ajax según nuestras necesidades, ya sea mediante el envio de formularios o, como lo veremos ahora, el rescate de información desde una fuente externa a nuestra página, sin tener que volver a cargar la página. Primero, construiremos un HTML donde estará un lugar delimitado en que se cargará la info desde otro HTML creado también por nosotros (un lorem ipsum cualquiera). Y claro, un botón que gatillará la acción mediante Ajax.

(more…)

La idea de un framework es reordenar un lenguaje y entregarnos herramientas para que sea bastante más fácil nuestro desarrollo. Una de ellas, es el reconocimiento del browser del usuario. En 2monos quise hacer lo mejor de lo mejor, pero lamentablemente IE6 no me acompañó en este camino. En vez de desgastarme tratando de que por lo menos se viera algo decente, o funcione a medias…. preferí abolirlo de una vez por todas. Si entras a 2monos.net utilizando IE6, una ventana te indicará que mejor bajes Firefox. Lamentablemente esta es una acción que por más que lo deseemos no se puede ejecutar en todos los sitios web en que trabajamos, pero en este caso como este sitio es mío, hago lo que quiero y decidí por discriminar un browser que nunca debería haber sido una mayoría.

(more…)

A raíz de mi proyecto musical más reciente lanzado, incluyendo el sitio web donde me divertí mucho utilizando Mootools para sus diferentes funcionalidades, iré ampliando los artículos relacionados con este framework de JS explicando los puntos más importantes de su desarrollo. Pero para comenzar, mostraré un modo de crear ventanas modales (lightbox, thickbox, greybox, modalbox… son todas ventanas modales) sólo con CSS. Mientras puedo, ahorro en plugins para no recargar los sitios, y en el caso de las ventanas emergentes no-obstructivas utilicé un elegante método donde a través de simple CSS se abren ventanas con mensajes varios. Para gatillarla, utilicé, claro, Mootools. Pero donde tomé prestado la idea, utilizaban Javascript puro para ello. Mostraré ambos métodos, a gusto y necesidad del usuario cuál decidir ocupar.

(more…)

A pedido popular, comenzaré a iniciar a quienes visitan este sitio en algunos de los frameworks Javascript más populares, o por lo menos, que utilizo con más frecuencia. El primero de ellos sería Mootools, con el que más he estado jugando últimamente (y prometo mostrar resultados).

Pero antes, me interesa comenzar con definir framework. Según mi instinto (y ayuda de Wikipedia), los frameworks Javascript (pueden ser de otros tipos) son una arquitectura que modela las relaciones del lenguaje Javascript. Provee una estructura y principalmente una metodología de trabajo que ayuda a ordenar una sintaxis de trabajo. Son diseñados principalmente para facilitar el desarrollo de sitios y aplicaciones web. Cada framework tiene su orden y estructuras definidos, y no pueden ser mezclados, ya que las reglas son diferentes entre ellos (imagínense sino jugar rugby con reglas de básquetbol… ¡un lío!).

En este artículo, crearemos unos simples Eventos donde manipularemos Elementos vía Javascript.

Cargando

Para comenzar a trabajar con Mootools debemos primero llamar la librería, la que puede ser descargada desde su sitio web ofreciéndonos mucha flexibilidad para bajar una versión optimizada a nuestros requerimientos. Por este detalle, Mootools puede intimidar, ya que quizás algunos Eventos o Efectos no funcionen a la primera (y frustren a quienes esperan prontos resultados), debido a que no han bajado el material necesario para ello. Así, Mootools puede ser considerado como un framework avanzado, pero prefiero verlo como versátil y liviano. Basta algo de estudio para entender bien y utilizar lo justo y necesario para nuestras necesidades. Resumiendo, para cagarlo se utiliza:

<script type="text/javascript" src="ruta_a/mootools.js"></script>

Luego, comenzaremos a escribir lo que queremos realizar vía Javascript. Para comenzar, debemos crear un Evento que nos diga cuando comenzar a realizar lo que queremos.

window.addEvent(’domready’, function() {
     // nuestro código
});

Mootools nos ofrece más de una opción para comenzar a escribir código:

• domready: se ejecuta cuando todos los elementos de la página están listos, pero no espera por las imágenes. Gran aporte de Mootools.
• load: se ejecuta cuando toda la página (inclusive imágenes) se carga, lo que se hacía usualmente con Javascript puro. En algunos casos se demora bastante más.

Escribiendo

Bien, estamos listos para programar algo con ayuda de Mootools. Como mencioné, crearemos un Evento donde manipularemos aspectos de alguna etiqueta (Elemento). Primero, lo que queremos realizar:

$(’enlace’).addClass(’grandote’);

Ahora diseccionaremos esto: al elemento que tenga un id="enlace", agrega una class que se llame .grandote (que aumentará el tamaño de la tipografía del enlace).

$ todos los elementos
(’enlace’) que tengan el id="enlace"
.addClass agrega la class
(’grandote’) .grandote

Así de simple. Claro que tienen que tener definida la class .grandote en su hoja de estilos para que vean el resultado.

Ver ejemplo 1

Ojalá puedan ver el source desde Firefox con el plugin Web Developer o Firebug, y podrán apreciar la diferencia entre el código fuente y el código generado.

Ahora, si queremos alcanzar más de un id:

$$([’nombre:id’, ‘otro_id’]).addClass(’grandote’);

Ver ejemplo 2

Notaron como cambió la invocación al Elemento? Cuando es más de uno, se usa $$ y se agrupan entre corchetes []. Pequeños detalles que diferencian los Frameworks.

Se pueden hacer muchas cosas más manipulando Elementos o Selectores con Mootools, como por ejemplo:

• $(’elemento’).remove(); remueve el elemento, literalmente.
• $(’elemento’).removeClass(); remieve la class que tenga ese elemento.
• $(’elemento’).setStyle(); agrega estilos CSS que definamos.
• $(’elemento’).setOpacity(0.4); le da opacidad de 40%;
• $(’elemento’).setText(’Lorem Ipsum’); le inyecta Lorem Ipsum dentro de un elemento, por ejemplo <p></p>
• $(’elemento’).empty(); vacía un elemento.

Siendo fiel con el título de este artículo, esta fue una introducción. La documentación de Mootools es completa pero lamentablemente pobre de aplicaciones reales. En el foro pueden encontrar más variedad, pero aún no es bastante satisfactorio.

Próximamente, artículo dedicado a JQuery.