Para los amantes de los estándares de la web os propongo un truco para simular el comportamiento del atributo “target” de la etiqueta <a>, sin dejar de cumplir el estándar HTML 4.0 Strict o XHTML 1.0 Strict.

Para ello utilizaremos el atributo rel=”external” que no incumple con los estándares. Utilizaremos un script que revisará todos los enlaces (etiquetas <a>) cuyo atributo “rel” tenga valor “external” y le asignará un evento “onclick” que cancelará el evento por defecto y abrirá la URL de “href” en una nueva ventana.

<a href="http://www.equipo24.com" rel="external">Sitio desarrollado con mootools</a>

A continuación os dejo los códigos javascript para Mootools y una solución general sin necesidad de bibiliotecas externas.

Mootools

function fix_external_links() {
	$ES('a').each(function(el) {
		if (el.getProperty('rel') == 'external') {
			el.addEvent('click', function(e) {
				e = new Event(e);
				e.stop();	
				window.open(this.getProperty('href'));
			}.bind(el));
		}	
	});
}

window.addEvent('domready', function() { 
	fix_external_links();
});

Sin bibliotecas externas

function fix_external_links() {
	if (!document.getElementsByTagName) return;
	var anchors = document.getElementsByTagName("a");
	for (var i = 0; i < anchors.length; i++) {
		var anchor = anchors[i];
		if (anchor.getAttribute("rel") && anchor.getAttribute("rel") == "external") {
			anchor.target = "_blank";
		} 
	}
}
window.onload = fix_external_links;

function fix_external_links() {
	if (!document.getElementsByTagName) return;
	var anchors = document.getElementsByTagName("a");
	for (var i = 0; i < anchors.length; i++) {
		var anchor = anchors[i];
		if (anchor.getAttribute("rel") && anchor.getAttribute("rel") == "external") {
			anchor.target = "_blank";
		} 
	}
}
window.onload = fix_external_links;

Introducción

e24Squares es una extensión para scriptaculous que permite hacer transiciones entre imágenes con un efecto original. Este efecto genera una serie de cuadros blancos que van apareciendo de forma aleatoria en diferentes posiciones mientras la siguiente imagen va apareciendo detrás con un efecto de opacidad o fade. La extensión puede ser usada como galería de fotos o como un efecto decorativo en nuestra página web.

Demos

• Transiciones Manuales
• Reproducción automática

¿Cómo utilizarlo?

Incluya Prototype 1.6.0.2 y Scriptaculous 1.8.1 dentro del header del código HTML de la página. Incluya e24Squares después de ambos:

<script type='text/javascript' src='js/prototype.js'></script>
<script type='text/javascript' src='js/scriptaculous.js?load=effects'></script>
<script type='text/javascript' src='js/e24squares.js'></script>

Ahora escriba el código HTML necesario para definir la galería. Necesitaremos una capa contenedora (“visor” en el ejemplo) y dentro de la capa contenedora pondremos una imagen que será la que aparezca inicialmente antes de comenzar el efecto.

<!--e24Squares container -->
<div id="visor" >
	<img src="img/liberty.jpg" alt="imagen 1" />
</div>
<!-- End of e24Squares container -->

Ahora veremos el código javascript necesario para el funcionamiento del efecto, donde pasaremos como primer parámetro el id de la capa contenedora de la galería “visor”, como segundo parámetro pasaremos un array con los nombres de los archivos de las imágenes y por último un array de parámetros para el efecto.

oe24Squares = new e24Squares( 'visor', 
			    [ 'liberty.jpg', 'newyork2.jpg', 'mexico.jpg', 'newyork.jpg' ],
				{ 
					base: 'img/', 
					width: 640, 
					height: 300, 
					rows: 3, 
					cols: 5, 
					hideonfinish: true, 
					autostart: true, 
					duration: 1.0, 
					interval: 1.0 
				}
			);

Todas las Opciones

• base: El camino donde se encuentran las imágenes.
• width: Ancho en pixeles del visor de la galería.
• height: Alto en pixeles del visor de la galería.
• rows: Cantidad de filas en que se dividirá el visor para formar los cuadros de la transición. Valor por defecto: 3
• cols: Cantidad de columnas en que se dividirá el visor para formar los cuadros de la transición. Valor por defecto: 5
• duration: Un valor decimal que representa el tiempo en segundos que durará la transición entre una foto y la siguiente. Valor por defecto: 1.0
• interval: Un valor decimal que representa el tiempo en segundos que tardará en comenzar la siguiente transición. Valor por defecto: 0.3
• color: Representa el color de los cuadros que aparecerán en el efecto. Valor por defecto: #ffffff
• autostart: Un valor booleano, si es true la animación se inicia automáticamente, si es false necesitaremos llamar al método start() para iniciar la reproducción automática o llamar al método transition() para ir a una imagen determinada. Valor por defecto: false
• hideonfinish: Un valor booleano, si es true el visor se ocultará cuando llegue a la última foto, si es false la última foto permanecerá visible. Valor por defecto: false
• callback: función que se llamará cuando se complete la última transición, útil para concatenar con otro efecto.

Métodos

• start: No requiere parámetros, inicia la animación si el efecto se creó con el parámetro autostart como false.
• transition((int)index, (function)pCallback): Recibe como primer parámetro el índice de la imagen a mostrar(la primera es 0), el segundo parámetro es una función que se llamará cuando termine la transición por si se necesita concatenar con otra acción.

oe24Squares.transition(2);

Errores conocidos y cosas por hacer

• Permitir que la reproducción automática comience por el primero cuando llegue al final.

Descargar

e24Squares 0.2 beta (218 KB, incluye los demos)

En el post anterior vimos la importancia de cuidar que nuestros scripts AJAX degraden correctamente. Hoy veremos un caso práctico de cómo lograrlo utilizando prototype.

Pongamos como ejemplo el efecto e24Writer descrito en posts anteriores. El e24Writer hace que una serie de elementos aparezcan progresivamente, por tanto necesitaríamos que dichos elementos estén ocultos antes de comenzar el efecto. Supongamos que animaremos el texto “AJAX”, de manera que aparezca letra a letra. Si ocultamos este texto inicialmente poniendo la propiedad de CSS display a none, si por alguna razón de las descritas en el post anterior el javascript fallara entonces nuestra web no degradaría correctamente porque el texto “AJAX” nunca se mostraría.

Si por el contrario dejamos el texto visible de inicio necesitaríamos ocultarlo antes de que se muestre la página, para ello necesitaríamos hacerlo en un evento que se ejecute apenas tengamos acceso a todo el DOM y antes de que se muestre la página. Este evento es sin duda el “domReady”.

A diferencia de otras bibliotecas de AJAX como Mootools, YUI o ExtJs, Prototype no implementa nativamente el evento “domReady”. Pero si buscamos en Google por “prototype domReady” encontramos varias extensiones como esta

Event.onDOMReady(function() {
  $('text').hide();
  oe24Writer = new e24Writer( 'text', { autostart: true, duration: 1.0, interval: 0.3 });
});

De esta forma el texto podrá leerse independientemente de la presencia o no de javascript.