Crea tu propio Slider para tu página web con HTML, CSS Y JS

Hola, en esta nueva publicación te mostraremos una manera sencilla de crear tu propio slider de imágenes para tu página web.

Comencemos con una pequeña introducción de lo que es un slider.

Un slider es un recurso que se utiliza para dar un diseño mas novedoso a la presentación de imágenes en un sitio web además de ser una manera de atraer la atención de los visitantes y usuarios que accedan a ella.

Requisitos:

Para realizar esta práctica necesitaras de algunas imágenes, así como también haremos uso de conocimientos en HTML, CSS y Javascript.

  • Definiremos el código HTML en el cual crearemos un contenedor donde se creara el slider, lo llamaremos “caja”.
  • Declararemos en el código CSS la apariencia que tomara el contenedor.
  • Y por ultimo utilizaremos Javascript para el funcionamiento de este con un degradado.

Procedimiento:

  1. Iniciemos la práctica colocando el código HTML, dentro de la etiqueta <body>  colocamos onload=”javascript:Aparecer()” para que se ejecute automáticamente al cargar la página.
  2. Ahora crearemos el contenedor con la etiqueta <div> en la que declararemos las imágenes  <img  src= dirección de imagen  id= identificador de imagen>.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Practica</title>
</head>
<!--Código HTML-->
<body onload="javascript:Aparecer();">
.
.(imagenes)
.
</body>

 

Es importante que dentro de la etiqueta <img> se declare un identificador ya que se utilizara mas adelante.

3.- Para definir la apariencia utilizaremos CSS el cual definimos de la siguiente manera dando formato al contenedor de las imágenes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title>Practica</title> 
<!--Código CSS--> 
<style type="text/css">
#caja{
width:262px; 
height:192px; 
color:white; 
font-family:"Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; 
margin:0px auto; 
margin-top:30px;}

img{     
width:350px;    
height:200px; 
position:absolute;}
</style>
</head> 
<!--Código HTML--> 
.
.
.
</html>

Asignamos un tamaño a las imágenes con un width y height además de la posición en la que se ubicarán las imágenes dentro del slider.

Ahora estamos listos para comenzar a introducir el código javascript.

4.- Comenzaremos creando la función Aparecer en la que utilizaremos un interval=setInterval(muestra, 20) para llamar cada 20 milisegundos una nueva función llamada muestra.

La función Aparecer llamara:

  • La función detener  la cual manejara un clearInterval(interval) para limpiar el intervalo.
  • Y la función elige la cual se encargara de elegir y activar la visibilidad entre las imágenes del slider.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title>Practica</title> 
<!--Código CSS-->
.
.
. 
<!--Código Javascript--> 
 
var interval; 
var i=1; 
var ver=0; 

function Aparecer() { 
detener(); 
elige(); 
interval=setInterval(muestra, 20); } 

function muestra() { 
if(i>6) { 
   i=1; 
    Ocultar(); } 
if(ver==0) 
   document.getElementById("arbol").style.opacity=i; 
else 
   document.getElementById("nieve").style.opacity=i; 
i+=0.05; } 

function detener() { 
clearInterval(interval); } 

function elige() { 
if(ver==0) { 
document.getElementById("arbol").style.visibility="visible"; 
document.getElementById("nieve").style.visibility="hidden"; } 
else { 
document.getElementById("arbol").style.visibility="hidden"; 
document.getElementById("nieve").style.visibility="visible"; } }


</head> 
<!--Código HTML--> 
.
.
.
</html>

5.- La función muestra jugara un papel muy importante a la hora de mostrar y ocultar ya que manejara la transición entre imágenes jugando con la opacidad de la imagen que se muestra en el slider.

function Ocultar() { 
detener(); 
interval=setInterval(desvanecer,20); } 

function desvanecer() { 
if(i<=0) { 
i=0; 
if(ver==0) 
ver=1; 
else ver=0; 
elige(); 
Aparecer(); } 
if(ver==0) 
document.getElementById("arbol").style.opacity=i; 
else document.getElementById("nieve").style.opacity=i; 
i-=0.05; } 
<!--Código HTML--> 
.
.
.
</html>

6.- Mientras que la función de Ocultar se encargara con un interval=setInterval(desvanecer,20) de llamar cada 20 milisegundos a la función desvanecer esta se encargara de modificar la opacidad de la imagen que se ocultara.

De esta manera tendremos el efecto de un transición entre cada imagen del slider. Listo esta es una manera secilla de realizar un slider para tu sitio web.

Resultado:

See the Pen slider1 by Maria Gpe. Velázquez Martínez (@MarieVelmart7) on CodePen.

Crear un reloj utilizando Javascript, HTML Y CSS

A continuación se muestra la creación de un reloj, un  ejercicio en que utilizaremos elementos html, css y javascript.

Con este ejercicio podremos aprender la utilización de la hora y fecha del sistema para implementarla en una pagina web.

Iniciaremos con la creación de un nuevo documento de tipo html, y dentro de body crearemos el contenedor con la etiqueta <div></div> donde colocaremos nuestro reloj el cual llamaremos “caja”. Ademas agregaremos un enlace utilizando la etiqueta <a></a> con la cual daremos inicio a nuestro reloj.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>RELOJ</title>
</head>
<!--Código HTML-->
<body>
 <a href="javascript:iniciarReloj();">Iniciar Reloj</a>
<body>
</html>
 A continuación le daremos un formato a la caja utilizando elementos css.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>RELOJ</title>
<!--Código CSS-->
<style type="text/css">
#caja{ 
width:300px; 
height:200px;
background-color:blanchedalmond;
color:black; 
font-family:"Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; font-size:2.0em; 
text-align:center;}
a{ 
border:1px solid brown;}
</style>
</head>
<!--Código HTML-->
<body>
 <a href="javascript:iniciarReloj();">Iniciar Reloj</a>
</body> </html>

Ya que tenemos nuestro código CSS y HTML comenzaremos con nuestro código. Utilizaremos la función de iniciarReloj() en la que con setInterval(reloj, 1000)  según el valor indicado la función sera ejecutada en este caso 1000 milisegundos es el tiempo que se ejecutara la función reloj().

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>RELOJ</title>
<!--Código CSS-->
.
.
.
<!--Código JS-->
 
var interval;
function iniciarReloj(){
interval=setInterval(reloj, 1000);//1000 milisegundos = 1 segundo  }

function reloj() { 
var d= new Date(); 
var t= d.toLocaleTimeString();
document.getElementById("caja").innerHTML= t;
} 

</head>
<!--Código HTML-->
.
.
.
</html>

Posteriormente en la función reloj() es donde se inyectara el código js en HTML con document.getElementById(“caja”).innerHTML= t  utilizaremos t en caso de utilizar solo la hora, y d si se requiere la fecha completa.

También podemos incluir un enlace con la etiqueta <a></a> para detener el reloj esto en nuestro código HTML y creando una nueva función en el código CSS en la cual marcamos el clearInterval(interval); que limpiara el intervalo que anteriormente se había declarado para el intervalo de ejecución en el iniciarReloj().

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>RELOJ</title>
<!--Código CSS-->
.
.
.
<!--Código JS-->
 
var interval;
function iniciarReloj(){ ... }
function reloj() { ... } 

function detenerReloj() { 
clearInterval(interval);
 }

</head>
<!--Código HTML-->
<body>
 <a href="javascript:iniciarReloj();">Iniciar Reloj</a>
 <a href="javascript:detenerReloj();">Detener Reloj</a>
 </body> </html>

De esta manera concluimos el ejercicio con el cual aprendimos a utilizar la hora del sistema, y la implementan del setinterval y el clearinterval ademas del innerHTML.

See the Pen reloj by Maria Gpe. Velázquez Martínez (@MarieVelmart7) on CodePen.

Almacenar Arrays en Cookies con Javascript

Cuando un servidor web responde a una solicitud de un cliente el servidor termina la conexión que se establece entre ellos y se “olvida” de lo que esta pasando con el cliente, es por ello que se ideó la idea de almacenar en el cliente información que puede ser necesaria en caso de reestablecer la conexión con el servidor para realizar mas peticiones. Tomemos como ejemplo el inicio de sesión de un usuario en sitio web, el usuario iniciará su sesión al ingresar al sitio por primera vez, esta página pedirá recordar estas credenciales para evitar que el usuario tenga que iniciar sesión cada que se reestablece la comunicación con el servidor.

Esto es posible gracias a que el lenguaje JavaScript es capaz de escribir esta información directamente en el cliente a través de archivos de texto. Las cookies se administran de forma diferente para cada navegador, en algunos casos se crea un archivo de cookies por dominio y en algunos otros por cada usuario del equipo cliente. Esto no nos afecta en nada ya que en el lenguaje JavaScript las cookies se manejan de la misma forma, independientemente del navegador que el cliente utilice.

Desde el JavaScript las cookies se guardan la propiedad cookie del objeto document y de igual manera es desde ahí donde se recuperan las cookies almacenadas.

Cabe recordar que los datos que se almacenan dentro de las cookies se almacenan como cadena de caracteres, entonces les presento aquí una forma de almacenar datos de un arreglo dentro de una cookie:

//Teniendo un array con datos:
var ganadores = [“Luis”,120,”Ernesto”,87,”Vane”,145];
//creamos una variable que almacenara las cadenas que contienen el arreglo
var strGanadores=””;
//mediante un ciclo concatenamos los valores del arreglo a la cadena.
for(var i=0;i<ganadores.length;i++)
{
strGanadores+=ganadores[i]+”,”;  //agregamos un carácter ‘,’ (coma) como separador de los elementos en la cadena
}
//Quitamos el ultimo carácter, que es una coma.
strGanadores = strGanadores.substr(0, strGanadores.length-1);
//Generamos el tiempo de duración que tendrá la cookie
var hoy = new Date();    //Fri May 09 2014 10:43:00 GMT-0500 (Hora de verano central (México))
var unAnio  = 365*24*60*60*1000; // establecer la duración que tendra la cookie 365 dias * 24 horas *60 minutos * 60 segundos * 1000 milisegundos (1 año en milisegundos)
var duracion = hoy.getTime() + unAnio; //la suma de la fecha de hoy en ms ´un año en ms, como resultado = Fri May 09 2024 10:43:00 GMT -0500 en ms
hoy.setTime(duracion);
var expira = hoy.toUTCString();
//guardamos la cookie con los datos del arreglo y que expirara dentro de un año
document.cookie = strGanadores+”;expires=”+expira;

//Para recuperar la informacion
ganadores = document.cookie.split(“,”);  //obtenemos los elementos que se separaron por coma, retorna un arreglo
for(var i=0;i<ganadores.length; i++)
{
document.getElementById(i+1).innerHTML=ganadores[i];
}

Gracias

Una “intro” a BumpBox…

La idea de este post es mostrar como usar BumpBox (http://www.artviper.net/website-tools/bumpbox-lightbox.php) en los sitios web en desarrollo.

Esta herramienta hace que la presentación de PDF, imágenes, videos se haga diferente, atractiva, de manera que se salga de las formas comunes de presentación.

No es la única herramienta que hace este tipo de transiciones y efectos… sin embargo es una de las que hace presentación de una amplia variedad de recursos., sin tanto rollo comencemos con la creación del ejercicio.

Entendamos la parte conceptual:

  • Lo que se va mostrar en la ventana emergente que crea BumpBox es el valor de href del enlace que hace referencia a la herramienta.

Como ejemplo mostraré el contenido de una página y además un documento PDF, el HTML quedaría así:

<a href=”navegar.pdf”>Enlace de texto</a> <br/><br/>
<a href=”https://www.google.com.mx”><img src=”images/imagen.jpg” /></a>

y para que estos enlaces se reconozcan por la herramienta den incorporar el atributo class, además debemos especificar el tamaño de la ventana emergente en el atributo rel con el formato ancho-alto.

<a href=”navegar.pdf” class=”elemento” rel=”800-600″>Enlace de texto</a> <br/><br/>
<a href=”https://www.google.com.mx” class=”elemento” rel=”800-600″><img src=”images/inna1.jpg” /></a>

Ahora hay que hacer referencia a los recursos JS necesarios.

<script type=”text/javascript” src=”js/mootools.js”></script>
<script type=”text/javascript” src=”js/bumpbox-2.0.1.js”></script>

Justo como lo vemos en las referencias, BumpBox se acompaña de MooTools para funcionar, aunque esto es transparente ya que no tendemos que entrar a detalle.

Por ultimo, necesitamos invocar la función que creará la interacción y dejará los enlaces listos para que al dar clic se muestren dentro de las ventana emergentes los contenidos correspondientes, la función es: doBump( )

La mínima declaración es: doBump( ‘.elemento’);

Aquí se indica que los elementos que transformará son los que usan la clase elemento de CSS, los enlaces que no necesiten ser transformados por BumpBox pueden no llevar la clase o tener otra clase declarada y no son tomadas en cuenta.

La llamada se puede hacer al final de la página mediante la llamada a la función o en el evento onload de body, ambos tendrán el mismo resultado.

La función doBump además de la clase tiene una colección extensa de parámetros, la siguiente tabla lo resume:

name Nombre de la clase de CSS de los elementos que queremos que se afectan por BumpBox
inSpeed Tiempo de transición para mostrar la ventana en milisegundos
outSpeed Tiempo de transición para cerrar la ventana en milisegundos
boxColor Color de bumpbox sin el #
backColor Color del fondo, omitir #
bgOpacity Valor de la opacidad del contorno de la ventana emergente.
bRadius Especificar el redondeo de la ventana
borderWeight Especificar el grosor del borde de la ventana
borderColor Color del borde de la ventana emergente, omitir #
boxShadowSize Tamaño de la sombra en pixeles
boxShadowColor Color de la sombra de la ventana
iconSet Especificar entre 1 y 4 el conjunto de iconos que se utilizarán en la ventana
effectsIn El efecto de transición usada para mostrar la ventana
effectsOut El efecto de la transición usada para ocultar la ventana
bgImage Imagen que puede ser usada de fondo
bgPosition Posición del fondo
bgRepeat Tipo de repetición del fondo

Para tener más información sobre los efectos de transición consultar la referencia de transiciones Fx de MooTools

http://mootools.net/docs/core/Fx/Fx.Transitions#Fx-Transitions

De esta manera una llamada a la función doBump puede quedar así:

<body onload=”doBump( ‘.emergente’,1000, 4000, ‘111’, ‘900’, ‘0.8’, 5, 1 ,’333′, 15,’000′, 2, Fx.Transitions.Bounce.EaseOut, Fx.Transitions.Bounce.EaseOut );”>

Listo, es lo mínimo necesario para usar BumpBox en nuestro sitio web, ya sea un desarrollo propio o un manejador de contenido.

Nos vemos la próxima

el origen del slider…

Independientemente del camino que tomemos para armar y dar la funcionalidad de un slider, el siguiente código dará una idea de cómo es el funcionamiento y estructura.

La idea general central es, generar un código HTML sin tanta personalización en atriburos (id, clases de CSS, names) y que por si solo sea tomado y animado para dar el efecto de estos elemtos tan utilizados actualmente en una variedad de sitios.

Se parte de la estructura HTML.

<div id=”contenedor”>
  <div id=”imagenes”>
      <div><a href=”inna1.html”><img src=”img1.jpg” alt=”” /></a></div>
      <div><a href=”inna2.html”><img src=”img2.jpg” alt=”” /></a></div>
      <div><a href=”inna3.html”><img src=”img3.jpg” alt=”” /></a></div>
      <div><a href=”inna4.html”><img src=”img4.jpg” alt=”” /></a></div>
  </div>
</div>

Nota, de acuerdo a la forma en que será propuesto el ejercicio es necesario crear un contenedor principal, en este caso llamado “contenedor” y otro que es el que se desplazará cada cierto tiempo.

Ahora es necesaria la personalización de estos DIV’s con CSS

#contenedor
{
      border:1px solid red;
      height:100px;
      width:300px;
      overflow:hidden;
}
#contenedor #imagenes
{
      position:relative;
}

una vez definida la apariencia y limitado los espacios la función que será llamada al momento del cargado de la página.

<body onload=”rotarImagen()”>

el código es:

<script type=”text/javascript” language=”javascript”>
      var nImg = 1;
      var pos=100;
      var intervalo=10;
      function rotarImagen()
      {
            if ((pos*(-1))<((document.getElementById(‘imagenes’).children.length-1)*100))
            {
                  document.getElementById(‘imagenes’).style.top = (pos-intervalo) + “px”;
                  pos = pos – intervalo;
            }
            else
            {
                  document.getElementById(‘imagenes’).style.top = “0px”;
                  pos = 0;
            }
      if ((pos%100)!=0) setTimeout(“rotarImagen()”,50);
      else setTimeout(“rotarImagen()”,2000);
     }
</script>

Como pueden ver la transición de las imágenes está en función de su tamaño y se provoca un desplazamiento secuencial del contenedor “Imagenes” que tiene una pausa menor cuando el desplazamiento ha cumplido con el tamaño de la imagen, esto da la apariencia de transición.

En caso de querer incorporar algún otro efecto de transición como difuminado de la imagen se debe modificar el alpha de la imagen (valor entre 0 y 1) y así dar otro efecto de movimiento.

A partir de este pequeño código es que podemos encontrar slides tan elaborados como nuestra imaginación (o el diseñador gráfico) lo requiera.

Saludos