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.
Fecha de publicación del tutorial: 2011-10-15
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.
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:
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, ...
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.
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.
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.
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 ).
Desarrollo con nuevas tecnologías para Web y dispositivos móviles.
Se consciente, se consecuente!!!
Ese soy yo :)
1
2
3
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"
A continuación puedes evaluarlo:
Fecha publicación: 2012-10-19-15:19:34
Autor: saintnazho
Saludos