A diferencia del diseño gráfico para imprenta, los diseñadores web pueden incluir contenidos en movimiento que aportan frescura, dinamismo y nuevas posibilidades a los sitios web.
Muchas páginas web usan pases de imágenes, llamados slides. Su atractivo visual y su función comercial los hacen muy beneficiosos para muchos proyectos. Te explicamos qué son, para qué sirven y cómo funcionan.
¿Qué es un slide y un slider?
En inglés, el verbo slide significa deslizarse o desplazarse “resbalando”. Slider sería “el deslizador”, un elemento de las páginas web que muestra una imagen (un slide) que se ve desplazada por otras que irán progresivamente ocupando su mismo espacio. Normalmente se van relevando entre 3 y 7 imágenes, y después de la última, se repite el ciclo de nuevo desde la primera imagen.
Slide (como sustantivo) sirve para nombrar cada una de esas imágenes en movimiento.
Una variante muy usada son los sliders que no sustituyen las imágenes desplazándolas lateralmente, sino desvaneciendo cada imagen al tiempo que va apareciendo la siguiente.
Generalmente, se usan imágenes bastante grandes, que en algunos casos llegan a ocupar todo el ancho de la pantalla.
Si no he logrado describirte adecuadamente este funcionamiento, puedes verlo en acción en muchos sitios web, por ejemplo en: www.DiseñoWebGlobal.es
¿Qué funciones cumple un slider?
Es un método muy útil para mostrar sucesivamente diversos contenidos en un mismo espacio de la pantalla, al estilo de los pases de diapositivas o una proyección animada.
Al mostrar en sucesión varias fotografías de nuestros artículos, carteles con nuestras promociones, novedades, anuncios, etc, el visitante irá viéndolas sin necesidad de desplazarse a la parte inferior de la página web.
Características de un pase de diapositivas
A menudo, las imágenes se van intercambiando automáticamente en el orden preestablecido, pero también se puede programar su aparición en orden aleatorio. Es posible asimismo mostrar la primera imagen y dejar la proyección “en pausa” hasta que el visitante haga clic en las flechas de “siguiente” y anterior”, o colocar unos botones (a menudo las mismas imágenes, pero en miniatura) que “saltan” directamente a la imagen deseada al ser pulsados.
Especialmente útil es comenzar la animación automáticamente, y que, al apuntar con el ratón dentro de la imagen, se detenga el proceso, permitiendo al visitante contemplar tranquilamente el contenido, hasta que apunte el ratón fuera de la imagen, y continúe el movimiento.
Para ampliar la información que aparece en la imagen, el visitante puede hacer clic en cada slide, lo que le llevará a una página web donde se aportan más detalles de dicha promoción, sección o novedad.
¿Qué tecnologías usan los sliders?
La mayoría de ellos utilizan los lenguajes HTML, CSS y JavaScript (especialmente jQuery), pero es posible programarlo usando sólo HTML y CSS3, como el que desarrollé para mi cliente Construcciones Ibiricu.
Inconvenientes de un slide
El diseñador web debe tener mucho precaución para que el slider no ralentice la carga de la página. Si usa muchas imágenes y/o muy grandes, la página tardará mucho en mostrarse, y los visitantes huirán a otros sitios web. Y recuerda que Google perjudica el SEO de las páginas lentas.
También debemos tener en cuenta el tamaño del programa que realiza el movimiento.
Si elegimos buenas fotos, optimizamos las imágenes adecuadamente, y elegimos un slider bien programado, nuestros visitantes disfrutarán de un pase de diapositivas rápido y atractivo.
En conclusión
Un slide es un sistema muy interesante para que nuestros visitantes vean nuestras novedades, productos o servicios de forma atractiva, ágil e interactiva. Con un buen trabajo de diseño gráfico y programación, nuestras páginas web serán más profesionales y aumentará el porcentaje de conversión de visitantes en clientes.
Fernando Sánchez Gómez
Cliparts: www.freepik.es
