www.pc-actual.com

Tus fotos en la Web: instantáneas con efecto

24-07-2008 Edición Foto Internet

Una excelente forma de exponer tus mejores fotos, tus diseños o tus imágenes favoritas en la Red es a través de una galería. Puedes utilizarla como portafolio para promocionar tu trabajo en la Web o simplemente para compartir tus creaciones con amigos y familiares

Es posible encontrar diferentes formas de exhibir nuestras fotografías o diseños en Internet, la más difícil, se basa en el uso de galerías. Tenemos varias entre las que elegir e incluso, dependiendo del CMS que utilicemos para nuestra web, seguro que descubrimos funciones, add-ons, plug-ins o módulos que nos ayuden a construir una.

 

Otra opción para instalar una galería dentro de nuestra página web, e independientemente del CMS que utilicemos, es recurrir a cualquier framework JavaScript, como script.aculo.us, motools o Prototype, y también a todos los paquetes prediseñados realizados a partir de ellos.

 

A continuación, os vamos a mostrar cómo configurar uno de estos paquetes prediseños e instalarlo en vuestro sitio web a modo de galería.

 

Paso 1

Descarga el paquete prediseñado

Lo primero es descargarse el paquete desde la web del autor (www.jovianskye.com/archive/jstimemachine-web-based-time-machine-interface), que nos permite su uso tanto si es con fines comerciales como si no, pero siempre que hagamos la referencia oportuna.

 

En su web ofrece dos ejemplos para ver en vivo la demostración de esta peculiar galería, así como dos opciones para la descarga. La primera se corresponde con el paquete que mantiene el prediseño totalmente limpio y unas tablas de ejemplo; la segunda incluye los ejemplos de las imágenes. Si no tenéis mucha experiencia, es recomendable la de los ejemplos, así comprobaríais mucho mejor la conexión entre los diferentes archivos. Tras elegir esta opción, descargamos el paquete en nuestro PC.

 

Paso 2

Visualiza los documentos

Tras descomprimir el fichero descargado, abrimos la carpeta para examinar los diferentes archivos y directorios. Este paso es necesario para saber dónde está cada cosa y dónde vamos a poner las imágenes o modificar cualquier detalle para personalizarlo a nuestro gusto.

 

En la carpeta Images encontraremos las instantáneas que forman parte de la estructura de la web. Vemos que contiene la imagen del control de avance y la de fondo de la web. La carpeta js cuenta con el archivo JavaScript que va a ser el que domine los eventos que va a haber en la transición y aparición de las imágenes. La carpeta pixs es a la que vamos a añadir nuestras fotos.

 

Si utilizas Windows o Linux, probablemente veas el archivo .DS_Store, está oculto en los sistemas de Apple y equivaldría al fichero .Thumbs en Windows, encargándose de administrar los eventos en las carpetas, sin nada que ver con nuestra galería. Para finalizar, tenemos los archivos jstimemachine.css, que es la hoja de estilos CSS, y jstimemachine.html, que es el código HTML de la página en la que estará nuestra galería.

 

Paso 3

Selección de imágenes

Antes de continuar, tenemos que planear la distribución que le vamos a dar en nuestro sitio web. Depende bastante si va a ser la página principal del dominio o lo vamos a situar en otra ubicación, ya que todo esto habrá que configurarlo en los diferentes documentos para conectar los archivos entre sí y que no nos devuelvan ningún error. Comenzamos cargando nuestras imágenes dentro de la carpeta pixs y, después, eliminamos las que había de ejemplo en ella.

 

Paso 4

Configura jstimemachine.html

Si en este momento abrimos el archivo jstimemachine.html en nuestro navegador, el espacio en el que antes veíamos las imágenes de ejemplo aparecerá ahora totalmente vacío. De hecho, nuestras instantáneas no se mostrarán hasta que indiquemos su referencia en el archivo HTML.

 

Así, abrimos el fichero jstimemachine.html con el Bloc de notas o cualquier otro editor que tengamos a mano. Entre las etiquetas <div id=”Timemachine”></div> encontraremos el menú y cada uno de los apartados dedicados a cada foto entre las <div class=”TimemachinePanel”…></div>. Dentro de este apartado, sustituiremos el título por el nombre de cada una de nuestras fotografías y también la ruta. Guardamos y comprobamos en el navegador que nuestros cambios se han realizado correctamente y si ya se ven nuestras fotos.

 

Si queremos añadir algo más a esta galería, como menús de navegación o cualquier otro elemento, éste es el lugar adecuado para hacerlo.

 

Paso 5

Configura jstimeMachine.js

Si deseamos variar o configurar a nuestro gusto la forma en la que aparecen las fotos en esta galería, recurriremos al archivo jstimeMachine.js, que se encuentra en la carpeta js. En las especificaciones de ajustes, encontraremos las variables que podremos modificar según nuestros gustos; por ejemplo, el retardo en la transición, la altura respecto a la parte superior de la página, la cantidad de imágenes que se dispararán en cada transición (frames), o la perspectiva en la que estarán colocadas las fotografías.

 

Un poquito más abajo, encontramos las especificaciones sobre las características de cada instantánea o imagen, tales como el ancho , la altura o la opacidad.

 

Paso 6

La hoja de estilos

Si el diseño de esta galería tal y como viene por defecto no te convence, siempre puedes personalizar el estilo en el documento que corresponde a la hoja de estilos jstimemachine.css, situado en la carpeta principal. En la hoja de estilos teneos la oportunidad de configurar a nuestro gusto la página de la galería, colores, fuentes, tamaños, e incluso podremos añadirle los que queramos.

 

Si nos fijamos bien en esta hoja, exactamente en el elemento Timetable, que es el que hace referencia al espacio ocupado por la fotografía, veremos que aparecen unas directrices bloqueadas (/*…*/). Son las que hacen que las fotografías se presenten tal cual las vemos en el ejemplo. Si les retiramos el bloqueo, veremos el marco que rodea a las fotografías en la galería como si de diapositivas o instantáneas se tratara.

 

Paso 7

Sube los archivos al servidor

Tras comprobar que todos los detalles están a nuestro gusto, sólo nos queda subirlo todo a nuestro sitio web. No obstante, antes de hacerlo es recomendable cambiar el nombre del archivo jstimemachine.html por uno más fácil de recordar; en nuestro ejemplo lo cambiamos por galeria.html. A continuación, subimos todos los archivos de la carpeta al directorio principal de nuestro dominio vía FTP y visualizamos en el navegador la página www.nombredetudominio.com/galeria.html. Será entonces cuando podremos ver la nueva galería en línea.

 

Recursos para el tratamiento de imágenes con Flash, JavaScript y Ajax

JavaScript es uno de los lenguajes de programación para la web que mejores resultados aportan, al menos visualmente hablando. Por ello, hemos considerado oportuno anotaros una recopilación de los mejores recursos, con JavaScript, que hay para el tratamiento de imágenes, tanto para darles un soporte con estilo como impresionantes efectos.

 

* www.phatfusion.net/index.htm: plug-ins programados con JavaScript y Flash.

* www.curvycorners.net/index.php: esquinas redondeadas para imágenes y capas web.

* www.blogohblog.com/top-10-javascripts-for-image-manipulation: los 10 mejores efectos para manipular imágenes con JavaScript

* www.ajaxrain.com/index.php: directorio de scripts con Ajax, JavaScript y DHTML.

* http://ntt.cc/2008/04/10/over-15-free-powerful-and-easy-to-integrate-flash-image-gallery.html: 15 galerías Flash gratuitas para instalar en tu web.