Webmonkey Guía para hacer fotos animadas con Javascript Las galerías de imágenes en movimiento en JavaScript se pueden usar para hacer más interesantes los álbumes de fotos y para agregar dinamismo a una página de inicio o incluso para lograr una animación de estilo "stop-motion". Cómo hacer una, paso a paso, en este tutorial de Webmonkey.
Los slide shows (galerías de imágenes en movimiento) en JavaScript son fantásticos por dos motivos: se pueden usar para hacer más interesantes los álbumes de fotos y para agregar dinamismo a una página de inicio o incluso para lograr una animación de estilo "stop-motion". ¿Te atrevés a montar uno?
Para tener una idea de la magia que estoy describiendo, echa una mirada al slide show que construí con las imágenes de la fiesta de despedida de mi amiga Azure. Si bien fue triste que Azure se fuera, mi pérdida se puede convertir en ganancia para vos: es muy fácil aprender a usar y modificar el script que utilicé para crear este slide show.
Espacio
de publicidad
Sí, en las lecciones que detallo a continuación, te voy a mostrar cómo construir tu propio slide show y cómo modificarlo a tu gusto.
Antes de empezar
Antes de que empecemos a desarrollar nuestro script, debo decirte que si sos novato con JavaScript, tal vez te resulte un poco complicado comprender este lenguaje de programación.
Preparativos
Para desarrollar nuestro slide show, debemos tener en cuenta algunas cosas:
Ancho de banda: cuando se construye un slide show para un sitio web, es importante detenerse a pensar un momento en los usuarios. Cuantas más imágenes se incluyan en él, más va a tardar en cargarse. Por lo tanto, si tu visitante promedio todavía utiliza una conexión telefónica normal, va a ser indispensable reducir el peso de las imágenes. Además es conveniente limitar la cantidad de fotos a 10 o menos.
Otro asunto que requiere atención es la navegación. Te voy a mostrar cómo hacer botones "Siguiente" y "Anterior" que son ideales para los usuarios de conexiones telefónicas. Pero si el ancho de banda no es problema, entonces ¡adelante!
Y por último, los slide shows que le dan al usuario la opción de abrirlos o no son mucho menos intrusivos que los que se activan por sí solos. Conviene ofrecer siempre a los usuarios de conexiones más lentas esa opción, van a estar muy agradecidos.
Lista de características: al escribir un script reutilizable, siempre conviene saber anticipadamente qué esperamos que haga. Por lo tanto, confeccionemos una lista de las características que deseamos para nuestro script, en la que incluiremos todos los elementos que deberemos incorporar.
Queremos que el script:
1.- Tenga una lista secuencial de todas las imágenes para que podamos mostrarlas en ese orden.
2.- Ofrezca la posibilidad de mostrarlas en orden aleatorio.
3.- Permita modificar el tiempo de demora entre cambio de imágenes.
4.- Le ofrezca al usuario algunos controles como pausa, adelante y atrás.
5.- Brinde la opción de autoactivación o activación por parte del usuario.
Dimensionamiento de las imágenes: cuando preparo un slide show, me gusta recortar o redimensionar las imágenes de modo que todas tengan el mismo tamaño. Es menos molesto para el usuario e implica que las etiquetas de altura y ancho van a ser siempre las mismas, lo cual permite lograr un script ordenado y simple.
Tal vez decidas utilizar un puñado de imágenes de diferentes tamaños, pero recuerda que en ese caso tendrás que eliminar las etiquetas de ancho y alto de las etiquetas de las imágenes (lo cual disminuirá la velocidad de carga), o bien complicarte un poco más agregando algunas variables para la altura y el ancho. Por el momento, me voy a dedicar a los slide shows con imágenes de un tamaño único.
Una vez que hayas redimensionado las imágenes, tal vez convenga estudiar la posibilidad de simplificar sus nombres: es más fácil de manejar y es menos probable que haya saltos tipográficos en el script.
En el mercado, se ofrecen muchos productos para cambiar el nombre de los archivos. En mi Mac, utilizo una aplicación shareware muy cómoda que se llama Quick Rename. Para vos, probable usuario de Windows, recomiendo una aplicación shareware denominada The Rename Program.
/
)
Partes de esta nota
Noticias
relacionadas 
Descargá tus programas preferidos
Más secciones, nuevo diseño y mucho más.
Tutoriales para construir sitios web.
Guía de cámaras, trucos y soft para editar.