Martes, 12 de diciembre de 2017

Elementos de una página web, el slider

Las páginas web disponen de determinados componentes y funcionalidades que no existían antes de Internet. Hoy hablaremos de los slides o pases de diapositivas, y en próximos artículos, comentaremos el resto.

Insertar Sliders en páginas web Salamanca

Uno de los componentes más usados en muchas páginas web por su atractivo visual y su función comercial son los pases de imágenes o slides. Veamos 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 (con erre al final) sería “el deslizador”, un componente de las páginas web que muestra una imagen (slide) que es desplazada por otra que ocupará su mismo espacio. El proceso se repite hasta que no hay más imágenes, y se repite el ciclo volviendo a la primera imagen.

Slide (como sustantivo) indica cada una de las imágenes que se desplazan para ocupar la posición que tenía la anterior.

Algunos sliders no intercambian las imágenes mediante un desplazamiento lateral, sino que cada imagen se va desvaneciendo mientras va apareciendo la siguiente.

Suelen usarse imágenes grandes, incluso que ocupen todo el ancho de la pantalla.

Mucho más fácil que explicarlo en palabras es verlo en acción, por ejemplo en: www.DiseñoWebGlobal.es

¿Para qué sirve un slider?

Es un sistema muy conveniente para mostrar en un mismo espacio de la pantalla diversos contenidos, a modo de pase de diapositivas o proyección animada.

De ese modo, podemos mostrar en sucesión varias fotografías de nuestros productos, promociones, anuncios, etc, sin que el visitante tenga que ir desplazándose por la parte inferior de la página.

Funcionalidades de un pase de diapositivas

Generalmente las imágenes van pasando automáticamente siguiendo la sucesión previamente establecida, pero también se puede hacer que vayan apareciendo en orden aleatorio, que sólo se muestre la primera imagen hasta que se pulsen unas flechas de “siguiente” y anterior”, o que haya unos botones o imágenes en miniatura que permitan “saltar” directamente a la imagen deseada.

También es habitual, y especialmente interesante que el pase comience automáticamente, y que, al apuntar con el ratón dentro de la imagen, se coloque en pausa, deteniendo el ciclo hasta que apuntemos el ratón fuera.

Muy útil es la función que permite enlazar cada una de las imágenes a sendas páginas, de modo que haciendo clic en ella, el visitante pueda ampliar la información que aparece en la imagen.

¿Qué tecnologías permiten insertar un slider?

La mayoría de los slider están programados en los lenguajes informáticos HTML, CSS y JavaScript (especialmente jQuery), aunque también es posible desarrollarlo sólo en HTML y CSS3, como el que programé para mi cliente Construcciones Ibiricu.

Inconvenientes de un slide

Si se usan muchas imágenes de gran tamaño, la velocidad de carga de la página puede empeorar, lo que puede causar que el visitante abandone nuestro sitio web y que Google perjudique nuestro posicionamiento web por su lentitud.

Lo mismo puede ocurrir si la programación del slider no es suficientemente buena, y “pesa” muchos Kb.

Usando un slider bien programado y optimizando profesionalmente las imágenes, podemos evitar estos problemas y disfrutar de un pase de diapositivas rápido y vistoso.

En resumen

Un slide es un buen método para mostrar a nuestros visitantes varias novedades, productos o servicios de un modo atractivo, ágil e interactivo. Añadir este componente a nuestro sitio web le dará un aspecto más profesional y aumentará el porcentaje de conversión de visitantes en clientes.

Fernando Sánchez Gómez
Diseño Web Global

Leer más artículos sobre Tutoriales y Diccionarios