jueves, 11 de octubre de 2007

Enlaces con efectos (sonidos) - Vagabundia


Cuando me preguntaron si era posible colocar sonidos en los botones o en los enlaces, creí que me había sumergido en la máquina del tiempo y había regresado a los tiempos en que todo brillaba, todo se movía y todo hacía ruidos cuando abríamos una página web burla

Lo cierto es que una página puede tener sonidos, incluso en Blogger, ya sea como fondo que se ejecuta al cargarla o como resultado de una acción de los visitantes.

Esto, tiene varias limitaciones, la fundamental es que el navegador que utilicemos debe disponer de los plugins necesarios para reconocer los diferentes formatos de audio. En general, sólo Internet Explorer dispone de estos plugins por defecto por lo tanto, en cualquier otro, deberemos instalarlos de manera manual. Diría que en principio, el plugin de Quicktime es suficiente aunque también puede usarse su version alternativa que es mucho más liviana.

Los fondos de sonido sólo pueden utilizarse en Internet Explorer:
<bgsound src="URL_archivoSonido" loop="n">
donde el archivo de audio podrá estar en formato WAV, MID o incluso MP3 y el atributo loop tendrá como valor el número de veces que se debe ejecutar (-1 o infinite hace que se ejecute indefinidamente). Este atributo no es obligatorio, si se omite, sólo se ejecutará una vez.

¿Qué pasará en otros navegadores? Nada, ignorarán la etiqueta lo cual, desde mi punto de vista, es una verdadera ventaja ya que no recomendaría usar este tipo de cosas. La carga de una página se hace lenta y siempre deberíamos tener la consideración de darle al usuario la posibilidad de activar y desactivar el sonido.

Poner sonidos en enlaces o botones y que funcione en ambos navegadores no es menos complicado pero, por lo menos, es posible. Para que esto ocurra, debemos limitarnos a utilizar archivos en formato WAV.

Este es un ejemplo, basta hacer click en la imagen para que se ejecute el sonido:


Este es el código general que agregaremos a la plantilla justo antes de </head>:
<script type='text/javascript'>
// precargar los sonidos
var sonido = new Array();
sonido[0] = "http://simplythebest.net/sounds/WAV/sound_effects_WAV/sound_effect_WAV_files/cow.wav";
sonido[1] = "URL_sonido1.wav";
sonido[2] = "URL_sonido2.wav";;
// agregaremos todas las direcciones URL de los archivos de sonido a utilizar
sonido[n] = "URL_sonidoN.wav";

// nombres de los sonidos
var nombre = new Array();
nombre[0] = "suena1";
nombre[1] = "suena2";
nombre[2] = "suena3";
// le daremos un nombre único a cada uno de esos sonidos
nombre[n] = "suenaN";

function crearSonidos() {
for (var i=0; i &lt; sonido.length; i++)
document.write("&lt;embed class='sonidoOculto' src='" +
sonido[i] +
"' autostart='false' id='" +
nombre[i] +
"' enablejavascript='true'&gt;&lt;/embed&gt;");
}

function ejecutarSonido(cual) {
var elObjeto=document.getElementById(cual);
elObjeto.Play();
}

</script>

<style type='text/css'>
.sonidoOculto {
height: 0; width: 0; position: absolute; top: 0; left: 0;
}
</style>
Y luego, inmediatamente después de <body>, agregamos esto:
<script>crearSonidos();</script>
Al igual que con las animaciones, debemos precargar los sonidos para que estén disponibles inmediatamente, esto lo hacemos en la primera parte del script, guardándolos en una variable:

sonido[n] = "URL_sonidoN.wav";

donde n será un número consecutivo, comenzando con cero y el contenido, será la dirección URL donde hayamos alojado el archivo WAV.

También al inicio, asignaremos los nombres de los sonidos a usar que puede ser cualquier tipo de texto pero, debe ser único, es decir, no podrá haber dos sonidos con el mismo nombre; por ejemplo:

nombre[n] = "hacerClick";

Para reproducirse, el sonido requiere que haya un reproductor insertado en la página pero, como no queremos que se vea, le vamos a dar propiedades especiales con una clase llamada sonidoOculto. El reproductor, en realidad, los reproductores, uno para cada sonido, se crearán al inicio de la página pero permanecerán ocultos; esto es lo que hacemos con:

<script>crearSonidos();</script>

Ahora, lo único que faltaría hacer es utilizarlos.

Los sonidos, los colocaremos en los enlaces así que usaremos los llamados "eventos" para que se ejecuten. Por ejemplo, para que el sonido se reproduzca al hacer click, el código sería el siguiente:
<a href="URL_destino" onclick="ejecutarSonido('nombreSonido')">ENLACE</a>
donde el enlace podrá ser un texto o una imagen y nombreSonido es el nombre único que hemos definido en el script para el sonido que queremos ejecutar.

La otra posibilidad es utilizar el evento mouseover, de esta manera:
<a href="javascript:void(0);" onmouseover="ejecutarSonido('nombreSonido');">ENLACE</a>
Podemos utilizar el mismo sonido para diferentes enlaces:

SONIDO

O distintos sonidos en enlaces que tengan la misma imagen:


Sea cual sea el método que utilicemos, los efectos de audio deben ser incluido con mesura.




















TABLA - FUENTES - FONTS


SOUV2BalaramScaGoudyFOLIO 4.2Biblica Font








free counters


Disculpen las Molestias




TABLA - INFORMÁTICA - UTILIDADES

miércoles, 10 de octubre de 2007

Enlaces con efectos (animaciones) - Vagabundia


Enlaces con efectos (animaciones)


JMiur






Hace años, la web era un cúmulo de GIFS animados, ahora, se han transformado en algo que los desarrolladores eluden como si se tratara de la peste negra.

Como cualquier otra herramienta, los GIFS no tienen nada de malo ni nada bueno, todo dependerá de lo que hagamos con ellos. En este caso, vamos a ver cómo podemos usarlos para darle un poco de vida a los enlaces. Para esto, necesitamos tener dos imágenes, una fija y una animada.

El enlace podría tener este código:
<a href="direccion_URL"
onmouseout="getElementById('nombreUnico').src='URL_imagen_FIJA';"
onmouseover="getElementById('nombreUnico').src='URL_imagen_ANIMADA';">
<img id="nombreUnico" src="URL_imagen_FIJA"/>
</a>

Como siempre, escribimos todo en una sola línea y tenemos la precaución de darle al ID un nombre único, no repetido.

La imagen fija se mostrará como la imagen por defecto; cuando el puntero del ratón pase sobre el enlace (onmouseover), el script cambiará la dirección de esta y se mostrará la imagen animada. Cuando el puntero del ratón salga de encima del enlace (onmouseout), el script volverá a cambiar la dirección y mostrará la imagen fija.


Debido a que la única imagen cargada es la imagen fija y la imagen animada sólo se carga cuando se ejecuta el evento onmouseover, el efecto puede ser poco evidente ya que se producirá un retardo; habrá un momento en que no veamos nada. Esto, lo resolvemos utilizando JavaScript y "precargando" las imágenes animadas antes, por ejemplo, agregando a la plantilla, justo antes de </head> lo siguiente:
<script type='text/javascript'>
var animPic=new Array();
animPic[0]=new Image(ancho0,alto0);
animPic[0].src="URL_imagen_0";
animPic[1]=new Image(ancho1,alto1);
animPic[1].src="URL_imagen_1";
.............
animPic[N]=new Image(anchoN,altoN);
animPic[N].src="URL_imagen_N";
</script>
Donde animPic[] es un nombre cualquiera y, entre corchetes, comenzando con 0 (cero) vamos agregando, sucesivamente, todas las imágenes que queremos precargar, indicando la dirección URL de cada una y reemplazando alto y ancho por los valores correspondientes, expresados en pixeles.

Otra posibilidad es usar estas animaciones como fondos de un elemento. En ese caso, no sólo deberemos tener dos imágenes sino establecer dos clases CSS. Por ejemplo:
<style type="text/css">
.ejemplo-icono-fijo { /* la clase de la imagen fija */
width: anchopx;
height: altopx;
background:transparent url(URLimagenFija) no-repeat scroll left top;
}
.ejemplo-icono-animado { /* la clase de la imagen animada */
 width: anchopx;
height: altopx;
background:transparent url(URLimagenAnimada) no-repeat scroll left top;
}
</style>
Esto, lo podemos usar así:
<span class="ejemplo-icono-fijo" 
onmouseout="this.className="ejemplo-icono-fijo";" 
onmouseover="this.className='ejemplo-icono-animado';">
...................
</span>
O como fondo de cualquier enlace o etiqueta.



















Fuentes - Fonts
SOUV2BalaramScaGoudyFOLIO 4.2Biblica Font





free counters



Disculpen las Molestias





INFORMÁTICA - UTILIDADES





Correo Vaishnava