Recreo

Si aparece en La Brújula Verde quiere decir que es es aceptable poner a los Muppets en un blog serio. Bueno, como este no es un blog serio, el tema no me debería preocupar demasiado pero, lo mínimo que uno debe hacer es mantener las apariencias.

La canción es la famosísima Mahna Mahna y, aunque ya tiene cuarenta años ... ¿40? ... ¿4? y ¿0? ... me acaba de dar un soponcio, mejor copio y pego:

Su título original era Mah-Na Mah-Na, y la escribió el compositor italiano Piero Umiliani en 1968 para un documental sobre la vida en Suecia titulado Svezia, Inferno e Paradiso.

La versión más conocida de Los Muppets la interpretaron por vez primera en el Ed Sullivan Show el 30 de noviembre de 1969. Luego apareció en el episodio 101 de The Muppet Show.

Click para ejecutar el video.

Hay muchas versiones, desde una tecno cortita a una full que incluye la presentación pero lo mejor es deleitarse con otras actuaciones memorables

Click para ejecutar los videos.

The Fubon Two Tales es una realización de saizenmedia.com. No tengo idea qué es ni si sirve para algo pero la página, íntegramente desarrollada en Flash, es impresionante.

No es su único trabajo, hay varios y todos son muy originales:

Byblo's Club
Nostale Game
Tormet Game Website
Flashpoint
ver la lista completa

Scriptaculous no sólo posee un pequeño grupo de efectos contenidos en el nucleo [1 2], sino que además, nos provee de una serie de efectos combinados prediseñados y listos para utilizar.

Todas estas animaciones se basan en el tiempo así que basta establecerlo para que funcionen de la misma manera sin importar el navegador ni la velocidad de conexión. Además, pueden utilizarse sobre cualquier tipo de elemento, imágenes, párrafos, textos, tablas, formularios, etc.

Effect.Appear Effect.Fade muestra u oculta un elemento.

Si ocultamos un elemento con la propiedad display:none, utilizando el atributo <style> dentro de la etiqueta, el efecto Appear lo mostrará. Por el contrario, Fade hará que se oculte, desapareciendo lentamente. Esta es la sintaxis:

new Effect.Appear('nombre_elemento',opciones);

Sus opciones son:

duration: por defecto 1.0
from: porcentaje de opacidad inicial (0.0 a 1.0)
to: porcentaje de opacidad final (0.0 a 1.0)

new Effect.Fade('nombre_elemento',opciones);

Sus opciones son:

from: porcentaje de opacidad inicial (por defecto 1.0)
to: porcentaje de opacidad final (por defecto 0.0)

Effect.BlindDown Effect.BlindUp Effect.SlideDown Effect.SlideUp

Estos cuatro efectos despliegan un elemento verticalmente.

new Effect.BlindDown('nombre_elemento',opciones);
new Effect.BlindUp('nombre_elemento',opciones);

new Effect.SlideDown('nombre_elemento',opciones);
new Effect.SlideUp('nombre_elemento',opciones);

Sus opciones son:

scaleX: por defecto false
scaleY: por defecto true
scaleContent: por defecto true
scaleFrom Center?: por defecto false
scaleMode: por defecto ‘box’
scaleFrom: por defecto 100.0 (0% a 100%)
scaleTo: por defecto 0 (0% a 100%)
duration: por defecto 1

Effect.DropOut Effect.Shrink Effect.Pulsate

Effect.SwitchOff Effect.Squish Effect.Fold

Son efectos diversos que no tienen opciones.

Effect.DropOut('nombre_elemento');
Effect.Shrink('nombre_elemento');
Effect.Pulsate('nombre_elemento');
Effect.SwitchOff('nombre_elemento');
Effect.Squish('nombre_elemento');
Effect.Fold('nombre_elemento');

En todos los casos, en los demos, se muestra el efecto y luego, al cabo de un tiempo, se restaura el elemento origina. Esto se logra agregando un parámetro especial en el, pasado cierto tiempo, llamamos al efecto Appear. El código básico para cualquiera de los ejemplos es el siguiente:

<a href="javascript:void(0);" 
onclick="new Effect.CUAL('nombreID'); 
window.setTimeout('Effect.Appear(\'nombreID\',{duration:.3})',2500);">
ENLACE
</a>

<div id="nombreID" style="propiedades_opcionales">
... CONTENIDO ...
</div>

CUAL es el efecto a utilizar
nombreID es el nombre único del elemento sobre el cuál se usará el efecto
el valor de duration es la duración del efecto Appear
el otro valor (2500) son los microsegundos en que el elemento permanece oculto hasta restaurarse

Estos no son todos los efectos, aún hay más.

Según se dice, hace unos pocos años, allá por el 2005, Google, aseguraba que la información disponible en todo el mundo era de unos 5 millones de terabytes (5.120 millones de gigas), y, de ella, sus diferentes servicios (vídeos, audio, fotografías, libros, etc.) habían procesado menos del 0.005% (unos 256.000 gigas).

Pero, el tiempo pasa y, para bien o para mal, Google ha crecido.

Ahora han publicado un informe en el que aseguran que están procesando 20 petabytes de datos (unos 21 millones de gigas) ... cada día.

Veamos:

• 1 bit es un uno o un cero, los únicos dos números que entiende una computadora (en realidad, lo único que entiende)
• 8 bits forman un byte
• 1024 bytes equivalen a un kilobyte (KB)
• 1024 kilobytes equivalen a un megabyte (MB) o sea, lo que entra en un diskette
• 1024 megabytes equivalen a un gigabyte (GB) una medida común pero que es más o menos la misma información que pueden contener unos 10 metros de libros apilados
• 1024 gigabytes equivalen a un terabyte (TB); la medida ya nos excede pero imaginemos que se necesitarían unos 50 mil árboles para fabricar el papel necesario para imprimir semejante cantidad de información
• 1024 terabytes equivalen a un petabyte (PB); dicen los que calculan estas cosas que unos 100 PB serían suficientes para guardar todo el material impreso existente
  

Google sólo ha llegado a manejar 20 petabyes pero puede ser peor, en unos años las cifras podrían subir ya que hay más medidas:

• 1 exabyte son 1024 petabytes
• 1 zettabyte son 1024 exabytes
• 1 yottabyte son 1024 zettabytes = ¿10.000.000.000.000.000.000.000 bits?

REFERENCIAS:

Google Discovery

REFERENCIAS:

protegeles.com

SpamLoco

Hace unos días, Darwin me preguntaba cómo hacer una galería de imágenes similar a la utilizada en este post.

No es la primera vez que me lo preguntan y siempre demoré la explicación porque no me parecía demasiado interesante. Es un pequeño script que armé con pedazos de otros ejemplos y que utilizo porque me resulta más cómodo que otros más sofisticados.

Primero que nada, necesitamos el script. Este, lo podemos añadir a la plantilla antes de </head> o crear un archivo externo y alojarlo en algún servidor. En el primer caso, escribimos:

<script language='JavaScript'>
//<![CDATA[
var visorIMGnum=0;
var visorPIC=new Array();

function visorAtras(cual,mtxpics) {
visorPIC = mtxpics
if(visorIMGnum==0) {
visorIMGnum=visorPIC.length-1;
} else {
visorIMGnum --
}
document.getElementById(cual).src=visorPIC[visorIMGnum].src;
}

function visorAdelante(cual,mtxpics) {
visorPIC = mtxpics
if(visorIMGnum==visorPIC.length-1) {
visorIMGnum=0;
} else {
visorIMGnum ++;
}
document.getElementById(cual).src=visorPIC[visorIMGnum].src;
}
//]]>
</script>

En el segundo caso, abrimos el block de notas, copiamos y pegamos el código (todo lo anterior menos las etiquetas <script language='JavaScript'> </script>) y lo guardamos con cualquier nombre y extensión .JS. Luego, lo alojamos en un servidor como Google Pages.

Para utilizar el script, lo cargamos en la plantilla para tenerlo siempre a mano, en un elemento HTML de la sidebar o, como en mi caso, en el post donde lo vamos a utilizar. en todos los casos, escribimos:

<script src="URL_nombre.js"></script>

Donde reemplazamos URL_nombre.js por la dirección URL del archivo.

Ahora, lo que debemos hacer es especificar cuáles son las imágenes a utilizar y precargarlas para que el efecto sea lo suficientemente rápido. Esto, lo hacemos dándoles un nombre cualquiera y estableciendo sus dimensiones. Por ejemplo, supongamos que utilizamos tres imágenes de 200x100:

<script>
var nombrePIC=new Array();
nombrePIC[0]=new Image(200,100); nombrePIC[0].src="URL_imagen1";
nombrePIC[1]=new Image(200,100); nombrePIC[1].src="URL_imagen2";
nombrePIC[2]=new Image(200,100); nombrePIC[2].src="URL_imagen3";
</script>

Por último, el HTML y aquí es donde entra la imaginación de cada uno. Voy a poner todo en una tabla a manera de ejemplo pero las alternativas son muchas:

<table>
<tr>
<td> <!-- primera celda -->
<a onclick="visorAtras('nombreIMG',nombrePIC);return false;" href="javascript:void(0);">
... ENLACE RETROCEDER ...
</a>
</td>
<td> <!-- segunda celda -->
<img src="URL_imagen1" id="nombreIMG" />
</td>
<td> <!-- tercera celda -->
<a onclick="visorAdelante('nombreIMG',nombrePIC);return false;" href="javascript:void(0);">
... ENLACE AVANZAR ...
</a>
</td>
</tr>
</table>

Donde en la primera celda ponemos un enlace que puede ser un texto o una imagen y que ejecuta el script para retroceder en la lista de imágenes.

La segunda celda contiene la primera imagen, la que aparecerá por defecto y tiene un atributo ID con el que identicaremos el bloque.

Y en la tercera celda ponemos el enlace que ejecuta el script para avanzar en la lista de imágenes.

Si se usa una tabla, el esquema es muy variado.

Siguiendo con los efectos del nucleo de Scriptaculous, aquí están los tres siguientes.

Effect.Morph cambia las propiedades CSS de un elemento. Su sintaxis es:

new Effect.Morph('nombre_elemento',opciones);

por ejemplo:

onclick="new Effect.Morph("nombre_elemento", {style:{width:'200px'});return false;"

aunque, la mejor forma de utilizar este efecto es usando este tipo de código:

onclick="getElementById('nombre_elemento').morph('propiedades_de_estilo');return false;"

Debe tenerse en cuenta que el estilo original debe estar definido previamente.

DEMO utilizando OnMouseOver y OnMouseOut

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Effect.Move desplaza un elemento. Su sintaxis es:

new Effect.Move('nombre_elemento',opciones);

por ejemplo:

onclick="new Effect.Move ('nombre_elemento',{ x: 0, y: 0, mode: 'absolute'});
return false;"

lo moverá al ángulo superior izquierdo de la pantalla y:

onclick="new Effect.Move('nombre_elemento', { x: 20, y: 20, mode: 'relative'});
return false;"

lo desplazará a partir e la posición donde se encuentra el elemento.

Effect.Parallel es un efecto especial que permite combinaciones. Su sintaxis es:

new Effect.Parallel(lista,opciones]);

No es sencillo de implementar y hay otras alternativas que pueden utilizarse y que serán mostradas en el siguiente post. De cualquier manera, este es un ejemplo:

<a href="javascript:void(0);" 
onclick="
new Effect.Parallel( [ 
new Effect.Opacity('scrdemo61',{from:0.25, to:1.0}),
new Effect.Move('scrdemo61',{x:32,y:0,mode:'relative'})
]);return false;
">CLICK</a>