Presentación dinámica de imágenes

A veces queremos mostrar las fotografías que tenemos de una forma espectacular (o casi) y siempre pensamos en realizarlo mediante Flash. ¿Por qué no?, yo no soy muy amante del Flash, pero me parece bien que se use. Si tampoco eres fan del Flash o si prefieres hacerlo mediante DHTML, quizás te interese esta forma de realizarlo.
Se trata de mostrar las imágenes agrupadas de cinco en cinco (no más para que no quede saturada la página, aunque es válido para cualquier número de imágenes), moviéndose circularmente con perspectiva 3D, dando la posibilidad de parar el movimiento y aumentar o disminuir la velocidad de rotación.

Mostrar resto >>

<< Ocultar resto
Lo primero que necesitamos es un contenedor para colocar las imágenes, se va a usar una capa DIV y tendrá que tener posicionamiento absoluto para poder moverla libremente por la pantalla (position: absolute).

<DIV id="contenedor" style="position: absolute">Cargando datos...</DIV> <!-- El texto se pone para que aparezca algo mientras se cargan los datos -->

Una vez creado el contenedor, tenemos que escribir un control para controlar la velocidad de rotación y para movernos entre las distintas páginas.

    <table>     <tr>         <td onclick="paginaAnterior()" style="cursor: hand;             cursor:pointer"><< ANTERIOR</td>         <td onclick="reduce()" style="cursor: hand;             cursor:pointer">-</td>         <td id=vel1 onclick="ponVelocidad(1)" style="cursor:             hand; cursor:pointer">&nbsp;&nbsp;&nbsp;&nbsp;             &nbsp;&nbsp;&nbsp;</td>         <td id=vel4 onclick="ponVelocidad(4)" style="cursor:             hand; cursor:pointer">&nbsp;&nbsp;&nbsp;&nbsp;             &nbsp;&nbsp;&nbsp;</td>         <td id=vel7 onclick="ponVelocidad(7)" style="cursor:             hand; cursor:pointer">&nbsp;&nbsp;&nbsp;&nbsp;             &nbsp;&nbsp;&nbsp;</td>         <td id=vel10 onclick="ponVelocidad(10)" style="cursor:             hand; cursor:pointer">&nbsp;&nbsp;&nbsp;&nbsp;             &nbsp;&nbsp;&nbsp;</td>         <td id=vel13 onclick="ponVelocidad(13)" style="cursor:             hand; cursor:pointer">&nbsp;&nbsp;&nbsp;&nbsp;             &nbsp;&nbsp;&nbsp;</td>         <td id=vel16 onclick="ponVelocidad(16)" style="cursor:             hand; cursor:pointer">&nbsp;&nbsp;&nbsp;&nbsp;             &nbsp;&nbsp;&nbsp;</td>         <td id=vel19 onclick="ponVelocidad(19)" style="cursor:             hand; cursor:pointer">&nbsp;&nbsp;&nbsp;&nbsp;             &nbsp;&nbsp;&nbsp;</td>         <td onclick="aumenta()" style="cursor:             hand; cursor:pointer">+</td>         <td onclick="paginaSiguiente()" style="cursor:             hand; cursor:pointer">SIGUIENTE >></td>     </tr>     </table>

La primera y la última celda de la tabla son para ir a las páginas anteriores y siguientes. La segunda celda y la penúltima celda son para aumentar la velocidad o disminuirla. Las celdas intermedias para seleccionar directamente una velocidad.
Entremos en el código Javascript que se encarga del dinamismo de las fotografías, empezando por la definición de variables.

    var evento;

Necesitamos una variable para almacenar el identificador del proceso que ejecutamos repetitivamente para rotar las imágenes.

    var velocidad=10;

Almacenaremos la velocidad en un variable para que se pueda modificar.

    var nombreImagenes = new Array('1', '2', '3', '4', '5');

Un array con los nombres de las imágenes, la extensión la tengo predeterminada como ".jpg". En este caso son 5 imágenes, pero puede haber más, el número es este porque más podrían saturar la página. Deben existir dos imágenes, <nombre>.jpg y g<nombre>.jpg, la primera imágen es la miniatura y la segunda es el original que se abrirá cuando se pulse en la imagen. El tamaño de las miniaturas no debe ser grande para evitar así que unas se tapen a otras mientras mientras giran.

    var imagenes = new Array();

Para almacenar las imagenes.
La primera función que vamos a usar es la que crea los objetos Image y las posiciona en el contenedor. Deberá incluirse en el evento onload del BODY.

    function carga() {         // Obtenemos el objeto DIV que contendrá las imágenes         var obj = document.getElementById("contenedor");         /* Inicializamos cada imágen, dándole una posición          fija, estilos, eventos: hacer que pare la rotacion          cuando se pone encima el ratón, continuar          la rotación cuando se deja de poner el          ratón en la imagen, abrir la imagen original          cuando se pulsa en ella, ... */         for (var i=0; i<nombreImagenes.length; i++) {             imagenes[i] = new Image();             imagenes[i].src = nombreImagenes[i]+'.jpg';             imagenes[i].style.top = '100px';             imagenes[i].style.left = '200px';             imagenes[i].style.width = '100px';             imagenes[i].style.height = '100px';             imagenes[i].style.border = '1px solid black';             imagenes[i].style.cursor = (IE)? "hand":"pointer";             imagenes[i].onmouseover = parar;             imagenes[i].onmouseout = rotar;             imagenes[i].onclick = abre;             imagenes[i].angulo=0;             imagenes[i].ancho = tamImagenes[i][0];             imagenes[i].alto = tamImagenes[i][1];             imagenes[i].comentario = comentarios[i];         }         // Calculamos la separación entre cada imagen         var parte = 360/imagenes.length;         // Posicionamos cada imagen         for (i=0; i<imagenes.length; i++) {             posiciona(imagenes[i], i*parte);         }         // Añadimos las imagenes al contenedor         obj.innerHTML = "";         for (var i=0; i<imagenes.length; i++) {             obj.appendChild(imagenes[i]);         }     }

La siguiente función es la que se encarga de posicionar la imagen dentro del contenedor, se calcula la posición izquierda, posición derecha, el ancho y el alto de la imagen y la posicion en la coordenada Z. Para hacer el efecto 3D es necesario cambiar el tamaño de la imagen para simular la profundidad.

    function posiciona(_obj, _parte) {         // Calculamos el ángulo de la circunferencia por la         // que gira         var parte = (_parte+_obj.angulo)*2*Math.PI/360;         _obj.angulo = (parseInt(_obj.angulo) + _parte) % 360;         _obj.style.position = "absolute";         // Posición dentro del eje Z (profundidad)         _obj.style.zIndex = parseInt((200-40*Math.sin(parte)));         // Calculamos el ancho y el alto según la profundidad         // (en este caso se trata de un cuadrado)         ancho = parseInt((65-35*Math.sin(parte)));         _obj.style.width = ancho+"px";         _obj.style.height = ancho+"px";         // Calculamos la posicion vertical según el         // ancho y el ángulo         _obj.style.top = parseInt(                           (100-40*Math.sin(parte))                           -(ancho/2))+"px";         // Calculamos la posicion horizontal según el         // ancho y el ángulo         _obj.style.left = parseInt(                           ((document.body.clientWidth/2)                           +100*Math.cos(parte))-(ancho/2))+"px";     }

La función para rotar las imágenes se debe llamar en el evento onload del BODY y debe ejecutarse cada cierto tiempo.

    function rotar() {         // Obtenemos todas las imagenes del contenedor y         // luego las posicionamos         var obj = document.getElementById("contenedor");         var imgs = obj.getElementsByTagName("img");         for (var i=0; i<imgs.length; i++) {             posiciona(imgs[i], velocidad);         }         evento = setTimeout("rotar()", 100);     }

Y por último las funciones relativas a la velocidad de rotación.

    // Para el movimiento de las imagenes cancelando     // el proceso de rotación     function parar(evt) {         clearTimeout(evento);     }     // Disminuye la velocidad     function reduce() {         if (velocidad > 1) {             velocidad -= 3;         }     }     // Aumenta la velocidad     function aumenta() {         if (velocidad < 19) {             velocidad += 3;         }     }     // Fija la velocidad     function ponVelocidad(n) {         velocidad = n;     }

Un ejemplo se puede ver aquí: ARCHIVO ZIP

Eliminar publicidad molesta en servidores gratuitos

No todos podemos o queremos gastarnos un dinerillo en un alojamiento, en un dominio, etc... y por ello debemos recurrir a servidores gratuitos tipo Lycos, ... ¿Cuál es el inconveniente?, pues que amablemente te meten publicidad en tu página sin preguntarte (claro, que si es gratuito es por algo y por eso ponen publicidad y por eso no te preguntan).
Evitar esta publicidad es sencillo, un simple script y usando lo explicado anteriormente sobre el uso de atributos, haremos que desaparezca la molesta publicidad.

Mostrar resto >>

<< Ocultar resto Está claro que cada servidor tiene su método de meter publicidad, y puede que lo que vaya a explicar ahora no funcione contigo. Yo empecé a hacer la típica página que la tomas con mucho entusiasmo y que no llegas a acabar, decidí ponerla en Lycos y fue allí cuando me encontré con que ponían publicidad en todas las páginas (bueno, en casi todas, dependía de varios factores) y que hacía que se me descuadrara todo el diseño.
¿Cómo funciona esta publicidad?, incluyen un código HTML al inicio de tu página que es la que contiene toda la publicidad. Suele estar incluido en una etiqueta DIV y contiene código Javascript que comprueba que la capa con la publicidad sigue en su sitio y que es visible. La solución es sencilla, coger el DIV incustrado y hacerlo desaparecer (usando estilos). El problema esta en el código que comprueba cada cierto tiempo el estado de la publicidad, este código usa la funcion setTimeout para comprobar el tamaño del DIV, si está oculto (mediante visibility:hidden o mediante display:none), si se había desplazado fuera de la pantalla, ... Afortunadamente el quitarlo es sencillo, solo se debe usar la función clearTimeout con el identificador usado en la creación (setTimeout). Averiguar el identificador también es sencillo, debido a que cada vez que creas un identificador es de forma consecutiva, por lo que solo era necesario crear uno nuevo y coger el n-1 para obtener el que estábamos buscando.
Una vez cancelada la ejecución del código de comprobación, se tiene que eliminar la capa con la publicidad. Como he dicho anteriormente, la publicidad se encuentra metida dentro de un elemento DIV, pero el identificador de ese elemento es desconocido y no es siempre el mismo, por lo que tenemos que coger todos los elementos DIV y comprobar si es uno que he creado yo o no, si no es mio, le cambiamos el estilo y listo... adios publicidad.
¿Inconvenientes?, dos, que la limpieza de la publicidad se tiene que hacer una vez cargada la página, creándose un efecto de parpadeo (aparece/desaparece la publicidad) y que cada vez que creamos una etiqueta DIV, le tenemos que añadir un atributo propio, ej:

<DIV id="contenido" mio="si">...</DIV>

El código necesario sería el siguiente:

    function elimininaLaPublicidad() {         divMolestos = document.getElementsByTagName("DIV");         // Obtenemos todos los DIVs         // Creamos un identificador para obtener el anterior         var id = setTimeout("alert()", 100000);         // Cancelamos ambos identificadores         clearTimeout(id);         clearTimeout(id-1);         // Por cada DIV miramos si no es nuestro, en ese caso lo hacemos desaparecer         for (i=0; i<divMolestos.length; i++) {             if (divMolestos[i].getAttribute("mio") != "si") {                 divMolestos[i].style.display="none";             }         }     } ... ... ...   <BODY onload="elimininaLaPublicidad()">

Este código está comprobado en Firefox, IE y Opera para Windows. Para los usuarios de Firefox os recomiendo usar la extensión Adblock para eliminar publicidad pesada y otras cosas.

Shortcut Icon, sencillo pero que luce

Un pequeño detalle que hace que luzca un poco más la página web que se está creando, es el uso del icono para el enlace en la barra de direcciones y en los favoritos. Es tan sencillo como crear un imagen BMP de 16x16 y ponerle extensión .ICO (aunque en el caso de display: NONE he tenido que usar una jpeg debido a que alojo las imágenes en Flickr y también funciona). Luego solo falta añadir está línea en tu página web para que funcione.

<HEAD> ...   <LINK REL="SHORTCUT ICON" HREF="url icono.jpg"> ... <HEAD>

El uso de las pestañas en los navegadores (Firefox, Opera, ...) hace que este icono sea más visible y que nuestra página más facil de localizar entre las distintas pestañas.

Uso de atributos para acciones dinámicas

Algo importante a la hora de crear páginas web es tener en cuenta dos cosas:

• El HTML es un XML y como tal se puede tratar mediante el DOM. Esto nos permite acceder a sus atributos, hijos, ... y a actuar sobre ellos.
• Es bueno pensar en los elementos de la página como objetos, pudiendo mejorar el dinamismo y la interacción en la página.

Todos los elementos HTML tiene atributos predefinidos que modifican el comportamiento del elementro dentro de la página, así por ejemplo en un elemento IMG tiene el atributo scr para indicar la ruta de la imagen que representa. Esto es conocido por todos, lógicamente, pero tampoco está mal recordarlo por si alguna persona que lo lee es algo inexperta. Ahora bien, que un elemento tenga determinados atributos, no quiere decir que solo puedan existir estos y que nosotros no podamos incluir otros nuevos. Crear nuevos atributos puede ser de utilidad para acciones nuevas que nosotros diseñemos.

Mostrar resto >>

<< Ocultar resto
A no ser que sean los atributos prefefinidos, yo recomiendo usar las funciones setAttribute y getAttribute para tratar con los atributos. La función setAttribute añade un nuevo atributo al elemento si no existía con anterioridad, en caso contrario modifica el valor y la función getAttribute recupera el valor del atributo del elemento.

obj.setAttribute("p1", "v1"); // Crea un nuevo atributo "p1" con el valor "v1" obj.getAttribute("p1"); // Recupera el valor del atributo "p1", nos devolvería "v1"

Cuando queramos que el elemento HTML tenga incluido el nuevo atributo desde el principio, solo tendremos que escribirlo como si fuera cualquiera de los predefinidos.

<IMG src="imagen.png" nuevoAtr="valor">

Todo esto es muy bonito, pero... ¿qué se puede hacer con ello?. Un ejemplo cualquiera de su utilización sería el siguiente: imaginemos que tenemos una lista de imágenes que queremos seleccionar y tener las que seleccionemos en una lista para luego hacer con ellas algo y no deseamos que se incluya dos veces la misma imagen. Necesitaremos esa lista de imágenes y que cada elemento IMG tenga dos atributos: una descripción y un indicativo de si ha sido seleccionado antes o no.

<HTML> ... <BODY> ... <IMG src="img1.png" descripcion="Esta es la primera imagen" onclick="selecciona(this)"> <IMG src="img2.png" descripcion="Esta es la segunda imagen" onclick="selecciona(this)"> <IMG src="img3.png" descripcion="Esta es la tercera imagen" onclick="selecciona(this)"> <IMG src="img4.png" descripcion="Esta es la cuarta imagen" onclick="selecciona(this)"> ... </BODY> </HTML>

He añadido a las imágenes el evento onclick para que cuando se pulse en ellas se seleccione. No voy a entrar en detalles como que aparezca el cursor con la forma de la mano, ni que si se pulsa de nuevo se deseleccione.
También necesitaremos un objeto SELECT para ir incluyendo las imagenes que seleccionemos.

<SELECT id="lista" size="4"> </SELECT>

Solo nos falta que cuando pulsemos en la imagen, se añada la descripción de la imagen en la lista y se ponga el atributo "incluida" a true para que así sepamos que ya se ha añadido la imagen a la lista.

<SCRIPT>     function selecciona(obj) {         var incluida = obj.getAttribute("incluida");         // Comprobamos si ya ha sido incluida         if (incluida != "si") {             // Recuperamos el elemento select             var lista = document.getElementById("lista");             // Incluimos en la lista la imagen seleccionada             lista.options[lista.options.length] = new Option(obj.getAttribute("descripcion", obj.src);             obj.setAttribute("incluida", "si");         }     } </SCRIPT>

El resultado sería el siguiente: ARCHIVO

Bienvenidos

Bienvenidos a este nuevo blog, mi intención es compartir lo que conozco del mundo de la creación web, ya sea mediante código propio, ideas o noticias. Espero seros útil.