icono_twiter
Alejandro Pérez García

Alejandro es socio fundador de Autentia y nuestro experto en J2EE, Linux y optimización de aplicaciones empresariales.

Ingeniero en Informática y Certified ScrumMaster

Si te gusta lo que ves, puedes contratarle para darte ayuda con soporte experto, impartir cursos presenciales en tu empresa o para que realicemos tus proyectos como factoría (Madrid).
Puedes encontrarme en Autentia: Ofrecemos servicios de soporte a desarrollo, factoría y formación.

Ver todos los tutoriales del autor

Fecha de publicación del tutorial: 2011-10-15

Tutorial visitado 7.961 veces Descargar en PDF
Galerías de imágenes en HTML con WOW Slider

Galerías de imágenes con WOW Slider

Creación: 10-10-2011



Índice de contenidos

1. Introducción
2. Entorno
3. Instalación
4. Creando la galería de imágenes
5. El resultado
6. Conclusiones
7. Sobre el autor


1. Introducción

Yo soy principalmente desarrollador y la verdad es que no tengo mucha idea de diseño y estética, soy un tío típico de backend, con su Java, su Spring, su Hibernate, su NoSQL y ese tipo de cacharritos (vamos el típico que no puede ir a comprarse ropa sin la novia porque la lía parda). Pero como no me gusta quedarme en mis círculos de comodidad llevo tiempo aprendiendo cositas de composición, estilo, colores (y eso que soy un poco daltónico :P ), ...

El caso es que he escrito una pequeña reseña de mi paso por la Apache Barcamp Spain 2011 en Sevilla, y quería poner algunas fotitos que hice durante el evento. El antiguo yo simplemente las hubiera dejado caer sobre la página, o como mucho hubiera montado un pequeño mosaico usando <table>. Pero no, ese ya no soy yo, así que tenía que buscar algo un poco más vistoso y pintón. Es increíble la cantidad de recursos que se pueden encontrar en Internet, y eso que limité mi búsqueda a plugins de jQuery.

De todos los que vi me decidí a usar WOW Slider. Porque es bonito (podéis ver gran cantidad de ejemplos en la propia página), configurable, gratis si es para contenidos no comerciales, y lo mejor de todo, tiene una aplicación de escritorio donde le dices de forma super sencilla las fotos, todas las opciones, y te genera todo el código !!!

En este tutorial vamos a ver usar esta estupenda herramienta.

WOW Slider _ jQuery Image Slider & Carousel



2. Entorno

El tutorial está escrito usando el siguiente entorno:

  • Hardware: Portátil MacBook Pro 17' (2.8 GHz Intel i7, 8GB DDR3 SDRAM, 256GB Solid State Drive).

  • NVIDIA GeForce GT 330M with 512MB

  • Sistema Operativo: Mac OS X Lion 10.7.1

  • WOW Slider 1.9



3. Instalación

La instalación es simple, sólo hay que descargar el paquete pulsando sobre Download en la parte superior de la página. Si hemos elegido la versión gratuita simplemente tendremos que registrarnos para empezar con la descarga.

Una vez descargado lo descomprimimos y ejecutamos el instalador.

Si hay que decir que sólo hay versión para Mac y Windows, si eres usuario de Linux te recomiendo que lo pruebes de dentro de una máquina virtual porque su sencillez y resultado creo que merecen la pena.



4. Creando la galería de imágenes

Una vez abierta, la aplicación tiene el siguiente aspecto:

WOW Slider 1.9 - Free version - New gallery

Como veis es bastante sencilla y autoexplicativa. Además está traducida a muchísimos idiomas (incluido el español), y si colaboras con las traducción te regalan una licencia empresarial ;)

Para añadir las imágenes que queremos que formen parte de la galería basta con arrastrarlas desde el Finder al interior de la aplicación. También podemos añadirlas pulsando sobre el enorme signo + verde que hay en la parte superior. En este caso podremos añadir imágenes que estén en nuestro sistema de ficheros, carpetas enteras, o incluso imágenes que estén en Picasa, Flickr o Photobucket. También podemos pinchar sobre las imágenes añadidas para editar sus propiedades, como el título, una descripción, una url, ...

WOW Slider 1.9 - Free version - New gallery

Ahora que tenemos las imágenes añadidas y configuradas sus propiedades tenemos que definir la configuración de nuestra galería. Para ello pulsamos sobre el icono de la llave inglesa que está en la parte superior (entre el disco para guardar y el mundo para publicar).

Se nos abre la primera pestaña General, donde podemos poner título a la galería y configurara que elementos queremos en la interfaz de la mismas.

Gallery properties

Yo he activado el Pause on mouse over, para que la animación se pare si ponemos el ratón encima. Y también he cambiado la posición de los puntos que representan el número total de imágenes de la galería.

Ahora pulsamos sobre el icono superior de Images, y pasamos a la siguiente sección. Aquí vamos a escoger el efecto que se aplicará entre las dispositivas, el tamaño de las imágenes, el estilo que queremos que tenga la galería, el tiempo entre las diapositivas, e incluso con una licencia comercial podemos hacer que nos aplique una marca de agua a todas las imágenes.

Gallery properties

El último paso es pulsar sobre el icono Publish de la bola del mundo para publicar nuestro contenido. Esta opción también nos sorprende la cantidad de posibilidades, ya que podemos publicar al disco duro, o un FTP, incluso insertar directamente la galería en una página que ya tengamos, o en un módulo de Joomla o un Slider de Wordpress.

Gallery properties

En mi caso os recomiendo que la primera vez lo hagáis en el disco duro para poder inspeccionar los ficheros que genera. Por supuesto todo lo que encontraréis es HTML y JavaScript con jQuery.



5. El resultado

Salta a la vista, tiempo y esfuerzo mínimos y resultado bonito y profesional (bueno, si no tenemos en cuenta mi careto :P ).



6. Conclusiones

Salir de tu círculo de comodidad no tiene por que ser doloroso, significa que vas a aprender cosas nuevas, y eso es fantástico!!! En esta ocasión hemos descubierto WOW Slider y yo por lo menos me lo he pasado estupendamente jugando con él.

Animo y mucha suerte a todos!!!



7. Sobre el autor

Alejandro Pérez García, Ingeniero en Informática (especialidad de Ingeniería del Software) y Certified ScrumMaster

Socio fundador de Autentia (Desarrollo de software, Consultoría, Formación)

mailto:alejandropg@autentia.com

Autentia Real Business Solutions S.L. - "Soporte a Desarrollo"

http://www.autentia.com



A continuación puedes evaluarlo:

Regístrate para evaluarlo

Por favor, vota +1 o compártelo si te pareció interesante

Share |
Anímate y coméntanos lo que pienses sobre este TUTORIAL:

Fecha publicación: 2012-10-19-15:19:34

Autor: saintnazho

Hola, muy interesante tu post, WOW slider esta perfecto!! mas para mi, ya que recien estoy empezando en el mundo de la programacion y no tengo muchos conocimientos en jquery. Queria saber como pusiste tu slider en tu página PHP ya que wow slider permite solo añadirlas a HTML. Estaria muy agradecido si haces un tutorial o me explicas.
Saludos