Juego del “Gato” en JQuery

Esta vez vamos a diseñar un juego, el famoso “Gato” para poder competir con algún amigo. Algunos problemas para la elaboración de este juego se solucionaron con la ayuda del libro “Programming with JavaScript: Algorithms and Applications for Desktop and mobile Browsers”.

Comencemos:

1.- Estructura html. En este caso no es nada complicada, solamente haremos uso de un div sobre el cual iremos agregando la estructura con la función append. Por ello es necesario agregarle un id con el cual vamos a hacerle referencia.

<div id=”gato”></div>

2.- Estilos del juego. En este caso no haremos uso de muchos estilos, simplemente para el identificador anterior y poder centrarlo, de modo que podamos ver mejor el tablero del juego.

<style type=”text/css”>
#gato{ width:250px;  margin:10px auto; }

</style>

3.- Agregar la referencia a la API de JQuery. Accedemos a la página de JQuery para agregar el query más actualizado.

<script src=”http://code.jquery.com/jquery-1.11.0.min.js”></script>

4.- Implementar código JQuery. El siguiente es el código completo del script, posteriormente vamos a definir cada uno de sus elementos a fin de entenderlo.

<script type=”text/javascript”>
  $(document).ready(function () {
       var cuadritos = [];
       var puntos;
       var movimientos;
       var turno = “X”;
       var ganar = [7, 56, 448, 73, 146, 292, 273, 84];
       var jugar,ganador;

      $(function() {
var tablero = $(“<table bgcolor=’green’ border=5 cellspacing=10>”);

               var indicador = 1;
               for (var i=0; i<3; i+=1) {
                              var fila = $(“<tr>”);
                              tablero.append(fila);
                              for (var j = 0; j <3; j += 1) {
                                          var celda = $(“<td height=50 width=50 align=center></td>”);
                                          celda[0].indicador = indicador;
                                          celda.click(function() {
                                                               if ($(this).html() !== ” “) {
                                                                          return;      
                                                                         }
                                                              $(this).html(turno);
                                                              movimientos =movimientos + 1;
                                                              puntos[turno] += $(this)[0].indicador;
                                                              if (ganador(puntos[turno])) {
                                                                         alert(turno + ” ha Ganado!!!”);
                                                                         }
                                                              else if (movimientos == 9) {
                                                                         alert(“Es un empate”);
                                                                          }
                                                              else {
                                                                       if(turno==”X”)
                                                                                      {turno=”O”;}
                                                                       else
                                                                                       {turno=”X”}
                                                                       }
                                              });
                                           fila.append(celda);
                                           cuadritos.push(celda);
                                           indicador += indicador;
                                 }
               }
   $(document.getElementById(“gato”)).append(tablero);
               jugar();
               });

jugar = function() {
                       turno = “X”;
                       puntos = {“X”: 0, “O”: 0};
                       movimientos = 0;
                       cuadritos.forEach(function(cuadro)
                                                             {cuadro.html(” “);
                                                         });
                   };

ganador = function(puntos) {
                           for (var i=0;i<ganar.length;i+=1) {
                                           if ((ganar[i]&puntos)==ganar[i]){
                                                       return true;
                                                        }
                             }
                            return false;
                      };
});
</script>

5.- Entendiendo el script de JQuery. La función principal, como ya sabemos, comienza con el

$(document).ready();

De modo que hagamos referencia al documento de nuestra página. Declaramos algunas variables que nos serán útiles.

Para determinar la condición de victoria cada cuadro se “etiqueta” de izquierda a derecha y de arriba abajo, con las sucesivas potencias de 2. Cada celda representa un valor de la potencia y dicho valor se le asigna al jugador que ocupa la casilla. Por lo tanto el ganador se puede determinar fácilmente comprobando si los valores de los jugadores han cubierto cualquiera de las combinaciones para obtener la victoria. Dichas combinaciones son las que pertenecen a la variable ganar:

273                 84

/

1 |   2 |   4  = 7

—–+—–+—–

8 |  16 |  32  = 56

—–+—–+—–

64 | 128 | 256  = 448

=================

73   146   292

De este modo llenamos la variable ganar con los valores con los que es posible ganar.

La siguiente función se encarga de dibujar el tablero haciendo uso del comando append, se utiliza todo entre la función $( ) pues de este modo se hace más simple seleccionar elementos y para poder hacer un callback de otras funciones (jugar y ganador) que se explicarán más adelante  y funciona de la siguiente manera:

  var tablero = $(“<table bgcolor=’green’ border=5 cellspacing=10>”);

Define una variable con un código html que se encarga de dibujar nuestra tabla. El siguiente for se encarga de agregar las filas de nuestra tabla de acuerdo al tamaño que definimos

for (var i=0; i<3; i+=1) {
var fila = $(“<tr>”);

            tablero.append(fila);

Entendemos entonces que nuestro primer for se encarga de agregar las filas, requerimos que sea menor que 3 pues un “gato” no contiene más de 3 filas,  y se agregan con el comando append a la tabla como se mencionó anteriormente.

Del mismo modo que lo anterior, nuestro siguiente for agrega las celdas (necesitamos que sean 3 por fila) y a la primer celda (Celda[0]) le asigna el valor de 1, denotado como celda[0].indicador de modo que se asignen los valores a la matriz en potencias de 2 (20=1) como se explicó en la primera parte.

for (var j = 0; j <3; j += 1) {
var celda = $(“<td height=50 width=50 align=center></td>”);

                celda[0].indicador = indicador;

A continuación, y dentro de ambos for utilizamos la función click en la variable celda que nos permitirá realizar lo que necesitamos cuando se le de click a la celda

celda.click(function() {

Y una vez dentro de la función si se da click a un elemento que no esté vacío no queremos que ocurra algo, por lo que utilizamos el siguiente condicional:

if ($(this).html() !== ” “) {
return;

         }

En caso de que el elemento esté vacío mediante el uso de $(this).html(turno); nos encargamos de imprimir X o O de acuerdo al turno que corresponde. A continuación aumentamos los movimientos, pues se utilizan como condición para alcanzar un empate, es decir, si se alcanzan los 9 movimientos y no se ha declarado un ganador, automáticamente se determina un empate.

A continuación se suman los puntos que obtiene por presionar una casilla y se le asignan a turno, sea O o X:

puntos[turno] += $(this)[0].indicador;

Ahora, mediante condicionales se determinan las condiciones de victoria, primeramente, si los puntos sumados corresponden a alguno de la cadena ganador, entonces se determina que ha ganado el jugador del turno en curso. En caso de que no se haya determinado aún un ganador y se hayan alcanzado los 9 movimientos determina un empate con un alert. Y finalemente, si no hay ganador aún, cambia al turno del siguiente jugador.

if (ganador(puntos[turno])) {
alert(turno + ” ha Ganado!!!”);

       }
else if (movimientos == 9) {
              alert(“Es un empate”);
       }
else {
              if(turno==”X”)
                             {turno=”O”;}
              else
                             {turno=”X”}
          }

Y para terminar los cilcos for agregamos la celda a la fila con append, y el valor de la celda (en la que se hizo click) al arreglo cuadritos mediante la función push y aumentamos el indicador.

fila.append(celda);
cuadritos.push(celda);

indicador += indicador;

Terminamos la función llamando al documento y obteniendo el elemento por su identificador (nuestro único div) y le agregamos el tablero que se realizó anteriormente. Y llamamos a otra función llamada jugar();.

$(document.getElementById(“gato”)).append(tablero);
jugar();

FUNCIÓN JUGAR Y FUNCIÓN GANADOR

Estas funciones no son nada complicadas,  se declaran como variables para poder llamarlas dentro de la función principal, de modo que podamos hacer modificaciones al juego más rápidamente, además de que sera menos complicado entender como funciona el cambio de turnos y la búsqueda del ganador en el arreglo. La función jugar únicamente tiene la función de alternar los valores de O o X y de asignar a cada elemento de “cuadritos” un espacio en blanco.

jugar = function() {
turno = “X”;

                        puntos = {“X”: 0, “O”: 0};
                        movimientos = 0;
                        cuadritos.forEach(function(cuadro)
                                                              {cuadro.html(” “);}

Por último explicaremos la función ganador la cual, tal como lo dice su nombre, se encargará de determinar al ganador haciendo un recorrido mediante un for, de los valores con los cuales se obtiene la victoria mediante una condición if. Básicamente se encarga de determinar si la puntuación en cualquier momento es una puntuación ganadora y regresar un verdadero.

ganador = function(puntos) {
for (var i=0;i<ganar.length;i+=1) {

                                                   if ((ganar[i]&puntos)==ganar[i]){
                                                                      return true;
                                                            }
                          }
                       return false;
              };

Esperamos que este código sirva para entender el uso de algunas funciones y entender el callback entre funciones. Saludos!

Galería de imágenes con JQuery

A continuación se muestra un ejemplo de galería de imágenes utilizando el efecto de desvanecimiento y difuminación, utilizando estilos, y jquery.

Esta imagen muestra el diseño de la pagina en si.

imagen general de la pagina

imagen general de la pagina

Aquí se puede observar el efecto que se aplica, al hacer clic sobre una imagen aparecerá dicha imagen en el recuadro de la derecha (efecto de desvanecimiento) mientras el resto de las imágenes no seleccionadas se difuminan.

al dar click se aprecian estos efectos

al dar click se aprecian estos efectos

1) hacer referencia a la librería de jquery

<script src=“http://code.jquery.com/jquery-1.11.0.min.js”></script>


2) editaremos la parte de los estilos que para dar formato a la pagina

/*referencia a una fuente de google*/

href=’http://fonts.googleapis.com/css?family=Henny+Penny’ rel=’stylesheet’ type=’text/css’/>

<style type=”text/css”>

/*clase que edita el logo de inicio de la pagina*/


.principal{
width:200px;
height:200px;
}

/*clase que edita el titulo de la pagina */


.titulo{
width:1000px;
height:200px;
margin-top:-200px; margin-left:200px;
text-align:center;
font-size:80px;
color:white;
font-family: ‘Henny Penny’, cursive;
}

/*clase que edita el tamaño y borde que tiene cada imagen del menú (imágenes pequeñas)*/

.imCh2{
width:100px;
height:100px;
border:thin orange solid;
}

/*clase que edita el div que contiene cada una de las imágenes pequeñas*/

.imCh{
width:103px;
height:103px;
float:left;
}

/*clase que edita el div que contiene la imagen grande */

.imG{
width:400px;
height:400px;
margin-top:-425px;
margin-left:450px;
border:thin gray dashed;
}

/*clase que edita el tamaño de la imagen grande (imagen del efecto de desvanecimiento) */

.imG2{
width:400px;
height:400px;
}

/*clase que edita los títulos de separación en el menú*/


.subtitulos{
width:200px;
color:white;
text-align:center;
font-size:25px;
}

/*edita el cuerpo de la pagina*/

body{
background-color:black;
margin: 50px;
}


3) dar forma a la pagina utilizando html (body)

/*se crea el titulo con el logo de la pagina*/

<div>
<div><img class=”principal” src=”principal.jpg” alt=”” /></div>
<div class=”titulo”>Bienvenido a Hogwarts!</div>
</div>

 

/*se crea el menú de imágenes (para este caso son 8 y 2 subtitulos) cabe mencionar que para que este código funcione deben agregarse directorios reales en el atributo src de las imágenes*/

<div style=”width:206px; margin-left:200px; overflow:hidden;” >


<div class=”subtitulos”>Casas</div>
<div class=”imCh”><img class=”imCh2″ src=”g.jpg” alt=”” /></div>
<div class=”imCh”><img class=”imCh2″ src=”s.jpg” alt=”” /></div>
<div class=”imCh”><img class=”imCh2″ src=”h.jpg” alt=”” /></div>
<div class=”imCh”><img class=”imCh2″ src=”r.jpg” alt=”” /></div>


<div class=”subtitulos” style=”margin-top:205px”> Profesores</div>
<div class=”imCh”><img class=”imCh2″ src=”dom.jpg” alt=”” /></div>
<div class=”imCh”><img class=”imCh2″ src=”mcgo.jpg” alt=””/></div>
<div class=”imCh”><img class=”imCh2″ src=”snape.jpg” alt=”” /></div>
<div class=”imCh”><img class=”imCh2″ src=”hagrid.jpg” alt=”” /></div>
</div>

 

/*colocamos la imagen grande que es la que va a ir apareciendo dependiendo de la imagen seleccionada (por default en este ejemplo se utiliza otra imagen)*/

<div class=”imG”><img class=”imG2″ src=”ini.jpg” alt=”” /></div>


4)Ahora si editaremos los efectos con jquery

<script type=”text/javascript”>
$(document).ready(funcion);

/*esta función genera el desvanecimiento y reaparición de cada una de las imágenes pequeñas osea el menú (desvanecer y reaparecer la imagen duran en conjunto el mismo tiempo del efecto de la imagen grande) */

function desvanece(){
$(“.imCh2”).each(function(){ 
/*se indica que para cada imagen del menú se realizaran las sig. animaciones*/

$(this).animate({opacity:0.15},10,function(){
 /*opaca la imagen en un tiempo de 10 ms*/

$(this).delay(900).animate({opacity:1},0); 
/*detiene la imagen opacada por 0.9 seg y luego la reaparece */

});
});
}

/*función principal donde se revisa sobre cual imagen se dio clic y se implementan las animaciones*/

function funcion(){


$(“.imCh2”).click(function(event){ 
/*se revisa el clic en cualquiera de las imágenes*/

$(“.imG2″).css({display:”none”});  
/*desaparece la imagen grande que se encuentre desplegada*/

var im=$(this).html($(this).attr(“src”)).text(); 
/*de la imagen donde se dio clic (this) se recupera el atributo src y se convierte en una cadena*/

switch(im){  
/*este switch se utiliza para aparecer un fondo diferente para cada una de las imágenes intercalado en el efecto*/


case “g.jpg”:$(“.imG”).css({background:”#6E1B17″}); break;
case “s.jpg”:$(“.imG”).css({background:”#386C26″}); break;
case “h.jpg”:$(“.imG”).css({background:”#94681E”}); break;
case “r.jpg”:$(“.imG”).css({background:”#072466″}); break;
case “dom.jpg”:$(“.imG”).css({background:”#4E6A81″}); break;
case “mcgo.jpg”:$(“.imG”).css({background:”#121C0D”}); break;
case “snape.jpg”:$(“.imG”).css({background:”black”}); break;
case “hagrid.jpg”:$(“.imG”).css({background:”#69493A”}); break;
}

/* aquí se aplica el efecto de aparecer la imagen grande gradualmente (fadeIn) , antes de que aparezca la imagen se ve el color de fondo seleccionado*/

$(“.imG2”).attr(“src”,im).fadeIn(1000);

/*manda llamar la función desvanece (explicada arriba)*/

desvanece();

/*debido a que desvanece() opaca todas las imágenes del menú con la sig. instrucción reaparece la imagen sobre la que se dio clic, este efecto tiene un tiempo de 0 seg para que no se note la transición*/

$(this).animate({opacity:1},0);
});
}
</script>




NOTA1: recordar que los script y style van dentro del <head>

NOTA2: la librería de jquery de la forma que aparece en este blog solo funciona al estar conectado a Internet, si se va a utilizar sin Internet es preciso descargar y guardar la librería en el mismo directorio donde se guardará la pagina.

Animacion de texto sobre imagen

Este es un efecto  para mostrar información de una imagen al pasar el cursor encima, se puede utilizar para agregarle atractivo a cualquier pagina, sobe todo si maneja muchas imágenes, este ejemplo esta echo para funcionar con 4 imagenes, veamos los pasos:

1.- HTML:

 Colocaremos un div por cada imagen que tendremos la cual contendrá los estilos que queremos agregar

<div class=”info c1″></div>

<div class=”info c2″></div>

<div class=”info c3″></div>

<div class=”info c4″></div>

y de igual manera insertar las imágenes que queramos:

<div class=”pic” id=”pic1″><img src=”pic1.jpg”/> </div> 

<div class=”pic” id=”pic2″> <img src=”pic2.jpg”/> </div>

<div class=”pic” id=”pic3″><img src=”pic3.jpg”/></div>

<div class=”pic” id=”pic4″> <img src=”pic4.jpg”/></div>

 

2.- CSS:

.pic{
     width: 250px;
     height: 400px;
    position:relative;
    float: left;
    border:10px black solid;
    margin-left: 20px ;
}

img {
      position : relative;
      width: 250px;
      height: 400px;
     z-index:-1;
}

le daremos un tamaño deseado a nuestras imágenes

 
.info{
height:50px;
position:absolute;
margin-left:10px;
top:-20px;
background-color:navy;
background-color: rgba(255, 0, 0, 0.2);
margin-top:160px;
text-align:center;
padding:10px 0px 0px 0px;
color:white;
font-family:”AR CHRISTY”
}

esta clase le dará nuestros estilos deseados al efecto

3.- SCRIPT

El primer paso sera esconder la información de la imagen:

$(“.c1 .c2 .c3 .c4”).hide();

Queremos que la información se despliegue al pasar el cursor del mouse, para ello obtendremos la altura (height) el ancho (width) de la imagen para adaptar nuestro efecto:

$(“.pic”).mouseover(function(){

var w = $(this).width();
var h = $(this).height();

y obtendremos el id de cada imagen como método para seleccionar la imagen con el cursor:

var ids = $(this).attr(“id”);

después, mostraremos el efecto de la información sobre la imagen:

if(ids==”pic1″){    // ids == pic2 pic 3 pic 4…
$(“.c1”).show().animate({height: h, top:-150,fontSize:5},200)
.animate({fontSize:22},2000).end();}

De la misma manera, se remueve el efecto al quitar el cursor: 

$(“.pic”).mouseleave(function(){

$(“.c1”).hide().animate({height:0, top:160,},0); } //.c2 c3 c4…..

Y listo!!. Un inconveniente de esta animación es adaptarlo acorde a otros tamaños de imagen, lo cual se puede solucionar cambiando las propiedades de las clases.

 

Slider de imágenes con diferentes efectos (JQuery).

Vamos a realizar un pequeño slider de transición de imágenes ,las cuales tendremos opciones en la parte de abajo para hacer clic, cuando suceda esto cada botón tiene una animación diferente, de igual manera tendremos un listón que despliega una descripción de la fotografía.

Paso 1.

Necesitamos agregar la librería de JQuery, ponemos la siguiente línea de código para cargarla de Internet.

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>

Paso 2.

Para que funcione nuestro programa JQuery necesitamos abrir un script e iniciar de la siguiente manera:

<script type=”text/javascript”>                                                                                                            

$(document).ready(function(){ Aquí van todas nuestras animaciones})   </script>

Paso 3. Programación JQuery. Funcionamiento del código.

Detección si se hace clic:

Para cada una de las animaciones primero revisamos si se da clic para eso utilizamos la siguiente función. $(‘.nuestraboton’).click(function({ “aquí va nuestras acciones si se dio clic”}));

Otras funciones

$(‘.formato .imagenes:first’).    Cargamos el contenedor de las clases (formato), accedemos al primer div que encuentre con la clase llamada imágenes (.imagenes:first);

fadeOut(100). Desvanece la imagen en 100 ms.

next(‘.imagenes’).  Continua con la transición, avanza al siguiente div de clase imágenes.

fadeIn(1000).    Empieza a aparecer poco a poco en 1000 ms.

.end().appendTo(‘.formato’); En otra instrucción que utilizaremos mandamos lo que fue la primera imagen al final, es decir como una cola circular, volvemos a formar la imagen es lo hace la instrucción .appendTo(), es sucede cada que se da un clic.

end().  Lo que hace en realidad es resetear el conteo que hicimos avanzar con la instrucción next y obviamente por que se realizo clic.

slideUp(0)  Oculta el elemento que le estemos indicando a 0ms.

slideDown(1000)  Despliega el elemento, con un movimiento hacia abajo en 1000ms.

Animate

animate().  Lo que hace es dar animaciones por medio de CSS, cambiando sus propiedades por lapsos de tiempo.

$(‘.ClaseAnimar’).animate({propiedadCSS: valor}, tiempo);

En las 4 animaciones tenemos animate():

$(‘.por’). La clase por nos maneja el listón de la descripción.

$(‘.imagenes’). La clase donde están contenidas las imágenes.

En la animación 1:

$(‘.boton1’).click(function(){
$(‘.formato .imagenes:first’).fadeOut(100) A partir de la imagen que encuentra en la primera posición la desvanece en 100ms 
.next(‘.imagenes’).fadeIn(1000).end().appendTo(‘.formato’);  Avanza a la siguiente imagen y la aparece en 1000ms, y manda al final la imagen
$(‘.por’).animate({width:0,fontSize:0},0);  En 0ms, el ancho lo deja en 0
$(‘.por’).animate({width:500},1000);         En 1000ms, el ancho lo incrementa a 500px
$(‘.por’).animate({fontSize:30},100);         En 100ms el tamaño de la fuente lo incrementa a 30px.
});

En la animación 2:

$(‘.boton2’).click(function(){
$(‘.formato .imagenes:first’).fadeOut(1000) A partir de la imagen que encuentra en la primera posición la desvanece en 1000ms 
.next(‘.imagenes’).slideUp(0)                            Avanza a la siguiente imagen y la sube en 0ms,
.slideDown(1000).end().appendTo(‘.formato’);  Baja la imagen en 1000ms y la manda al final,
$(‘.por’).animate({bottom:0,fontSize:0},0);    La iniciamos con bottom en 0 y letra en 0, esto lo realiza en 0 ms.
$(‘.por’).animate({bottom:20},1000);             Incrementamos bottom en 20, en 1000ms.
$(‘.por’).animate({fontSize:30},100);         Incrementamos el tamaño de la letra en 100ms.

});

En la animación 3:

var x= $(‘.formato’).width(),     Nos regresa el valor de el ancho de el contenedor.
x2= $(‘.formato’).height();        Nos regresa el alto del contenedor.
$(‘.boton3’).click(function(){
$(‘.formato .imagenes:first’).fadeOut(1000) A partir de la imagen que encuentra en la primera posición la desvanece en 1000ms
.next(‘.imagenes’).fadeIn(0).end().appendTo(‘.formato’); Avanza a la siguiente imagen y la aparece en 0ms, y manda al final la imagen
$(‘.imagenes’).animate({width:0,height:0},0);  Iniciamos el ancho y alto en 0, en 0 ms.
$(‘.imagenes’).animate({width:x,height:x2},1000);   Incrementamos al ancho y alto del contenedor.
$(‘.por’).animate({fontSize:0,top:0},0);         Ponemos el listón en 0 de la fuente y 0 en top, en 0 ms.
$(‘.por’).animate({top:307},1000);                Incrementamos el top en 307px, en 1000ms.
$(‘.por’).animate({fontSize:30},100);});         Incrementamos la fuente en 100ms.

Animación 4

$(‘.boton4’).click(function(){
$(‘.formato .imagenes:first’).fadeOut(1000)  A partir de la imagen que encuentra en la primera posición la desvanece en 1000ms
.next(‘.imagenes’).fadeIn(0).end().appendTo(‘.formato’); Avanza a la siguiente imagen y la aparece en 0ms, y manda al final la imagen

$(‘.imagenes’).animate({height:’400px’,opacity:’0.4′},1000);   Aumentamos el alto a 400px, y opacidad de 0.4, en 1000ms.
$(‘.imagenes’).animate({width:’1500px’,opacity:’0.8′},1000);  Aumentamos el ancho a 1500px y opacidad 0.8, en 1000ms.
$(‘.imagenes’).animate({width:x,height:x2},1000);                  Los regresamos al tamaño original en 1000ms.
$(‘.por’).animate({fontSize:0,width:0},0);                       La letra y ancho los reducimos a 0px, en 0 ms.
$(‘.por’).animate({width:500},2000);                              El ancho incrementa en 500px, en 2000ms.
$(‘.por’).animate({fontSize:30},100);});                          Incrementa la letra en 100ms

Paso 4. Programación CSS

Recordemos que nuestros estilos se crean así:

<style type=”text/css”> .unaClase{estilos:valor;}</style>

Código

body{ margin:0;}  //Margen del body en 0

.imagenes{        //CSS de imagenes
width:1035px;
height:375px;
position:relative; }

.formato{         //CSS de contenedor
width:1035px;
height:375px;
position:relative;
overflow:hidden;
margin:0 auto;
border-radius:10px 10px 10px 10px;}

.marco{    //Marco del contenedor
border:5px #CCCCCC solid; } 

.parabotones{   //Contenedor botones
width:1045px;
height:60px;
margin:0 auto;
}

.boton{               //CSS para botones
position:relative;
font-family:Tahoma, Geneva, sans-serif;
font-size:0.7em;
color:#FFF;
width:150px;
height:30px;
border:2px solid #CCCCCC;
background-color:maroon;
padding:5px;
opacity: 0.6;
border-radius:10px 10px 10px 10px;
line-height:20px;
text-align:center;
margin-top:0px;}

.boton1{float:right; cursor:pointer;}
.boton2{float:right; cursor:pointer;}
.boton3{float:right; cursor:pointer;}
.boton4{float:right; cursor:pointer;}
.por {  //CSS Listón de descripción de imágenes
position: absolute;
bottom:10px;
display:block;
opacity: 0.6;
width: 500px;
height: 50px;
margin:0;
padding: 5px 0;
color: #eee;
border-bottom:2px solid #CCCCCC;
border-top:2px solid #CCCCCC;
border-right:2px solid #CCCCCC;
background-color:maroon;
font-size: 30px;
line-height:40px;
text-align:center;
border-radius:0px 10px 10px 0px;}

Paso 5. HTML

<body>

<div class=”marco formato”>
<div class=”imagenes” ><img src=”foto1.jpg” width=”100%”/><p class=”por”>LAGO </p></div>
<div class=”imagenes” ><img src=”foto2.jpg” width=”100%”/><p class=”por”>LAGO FRIO </p></div>
<div class=”imagenes” ><img src=”foto3.jpg” width=”100%” /><p class=”por”>MONTAÑAS </p></div>
<div class=”imagenes” ><img src=”foto4.jpg” width=”100%”/><p class=”por”>VISTA A LA ISLA </p></div>
<div class=”imagenes” ><img src=”foto5.jpg” width=”100%”/><p class=”por”>ISLA </p></div>
<div class=”imagenes” ><img src=”foto6.jpg” width=”100%”/><p class=”por”>PUENTE CON VISTA AL LAGO </p></div>
<div class=”imagenes” ><img src=”foto7.jpg” width=”100%”/><p class=”por”>PECES </p></div>
<div class=”imagenes” ><img src=”foto8.jpg” width=”100%”/><p class=”por”>CON VISTA AL LAGO </p></div>
</div>
<div class=”parabotones”>
<div class=”boton boton1″> Clic siguiente efecto1</div>
<div class=”boton boton2″> Clic siguiente efecto2</div>
<div class=”boton boton3″> Clic siguiente efecto3</div>
<div class=”boton boton4″> Clic siguiente efecto4</div>
</div>
</body>

De esta manera construimos un sencillo Slider, con diferentes animaciones.

Creación de menú (UL) desde cero – 4 Sticky Menu.

En el post anterior hicimos un menú horizontal, con posibilidad de agregar submenus verticales para cada opción del menú.

Ahora, agregaremos un poco de funcionalidad al menú, haremos que este menú este siempre visible sin importar que tan larga este la pagina y cuanto se scrollee, a este efecto se le conoce como StickyMenu (Menú pegajoso).

Comencemos……

1.- Estructura básica del menú. Para este ejemplo, utilizaremos la estructura generada en el primer ejercicio.

<div class=”contenedorMenu”>        
                <ul class=”menu”>
                    <li><a href=”#inicio”>Inicio</a></li>            
                    <li><a href=”#seccion1″>Sección 1</a></li>
                    <li><a href=”#seccion2″>Sección 2</a></li>
                    <li><a href=”#seccion3″>Sección 3</a></li>
                </ul>                        
            </div>

2.- Estilos para el menú. Utilizaremos los estilos generados en el primer ejercicio.

<style type=”text/css”>
            body{ margin:0px;}                       
            /*Estilos para el contendor del menu*/            
            .contenedorMenu
            {
                background: #E321A6;   /*Color de fondo para el menu*/
                width: 100%; /*ancho del menu */
            }
            /*Estilos para el elemnto ul*/
            .menu
            {
                list-style: none;  /*Quitar viñetas de la lista*/
                padding: 0px;    /*Quitar sangría de la lista */
                height: 30px;    /*Establecer el ancho del menu*/
                line-height: 30px; /*Centrar el contenido al medio*/
                margin: 0px;/*Quitar espacios arriba y abajo*/
            }
            /*Estilos para los items de menu*/
            .menu li
            {
                float:left;    /*alinear los elemntos a la izquierda*/
                width:100px;    /*Establecer el ancho de cada item*/
                text-align:center;    /*centrar contenido en texto*/
            }
            /*Estilos para el enlace dentro de los Items de menu*/
            .menu li a
            {
                text-decoration: none;    /*Quitar el subrayado*/
                color: white;    /*Color de fuente*/
                display: inline-block;    /*Expandir el enlace a lo alto del LI*/
                width: 100%;    /*Expandir el enlace a lo largo del LI*/
            }
            /*Estilos para los enlaces cuando el mouse se coloca sobre ellos*/
            .menu li a:hover
            {
                 background-color:white;    /*Color de Fondo*/
                 color:#E321A6;    /*Color de fuente*/
            }
            /*Estilos sticky*/
            .sticky{position: fixed; top: 0px; width: 1000px;}
        </style>

3.- Agregar elementos adicionales a la pagina. Para mostrar como funciona este ejercicio, incorporaremos un encabezado y saltos de linea a la pagina. Como encabezado agregaremos un div, y los saltos de linea se incorporaran al final de la página.

<div class=”pagina”>
            <div class=”encabezado”></div>
            <div class=”contenedorMenu”>        
                <ul class=”menu”>
                    <li><a href=”#inicio”>Inicio</a></li>            
                    <li><a href=”#seccion1″>Sección 1</a></li>
                    <li><a href=”#seccion2″>Sección 2</a></li>
                    <li><a href=”#seccion3″>Sección 3</a></li>
                </ul>                        
            </div>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        </div>

Y sus correspondientes estilos:

            /*Estilos generales para la pagina*/
            .pagina{ width: 1000px; margin: 0 auto;}
            .encabezado{ width:100%; background-color: #456789; height: 200px;}

4.- Agregar la referencia a la API de JQuery. De preferencia utilicemos el sitio oficial de JQuery y la version mas reciente para trabajar nuestros proyectos.

             <script src=”http://code.jquery.com/jquery-1.11.0.min.js”></script>

5.- Implementar el código JQuery. Lo que queremos lograr es lo siguiente:

-Inicialmente el menú debe verse debajo del encabezado y, mientras se scrollea hacia abajo recorrerse en la ventana, como normalmente ocurriría.
-Cuando el scroll rebase el ancho del encabezado, el menú cambiará de estilo para permitir que siempre este visible al tope de la página.

Esto se implementa así:

<script type=”text/javascript” >
            $(document).ready(function () {
                    /*Vincular el evento scroll a la ventana*/
                    $(window).scroll(function () {
                            //Obtener el alto del encabezado
                            var distancia = $(“.encabezado”).height();
                            //Verificar si se ha scrolleado lo sifuciente para que menú se vea en el tope del sitio                            
                            if( $(this).scrollTop() > distancia )
                            {
                                /*Si el scroll llego a la posicion del menu, dejar el menu al tope con posicion fija*/
                                $(“.contenedorMenu”).addClass(“sticky”);
                            }
                            else
                            {
                                /*Si el scroll esta por encima del menu, quitar la posicion fija en el tope*/
                                $(“.contenedorMenu”).removeClass(“sticky”);
                            }
                    });
            });
        </script>

Donde la clase sticky, se define:

/*Estilos sticky*/
.sticky{position: fixed; top: 0px; width: 1000px;}

Esto permite que el menú, siempre este visible sin importar que tan larga sea la página.

Menu4aMenu4b

Gracias

Cómo usar las animaciones con CSS3

Con la versión 3.0 de CSS es posible crear animaciones de elementos web que anteriormente solo se podía crear mediante un lenguaje de programación estructurado que permitiera estructuras de control (ciclos y condicionantes).

De manera similar ocurrió con las transiciones (también incorporadas en CSS3), sin embargo la diferencia entre las transiciones y las animaciones es que las transiciones se ejecutan a partir de un evento como puede ser el hover y las animaciones no responden a un evento en especial, sino al cargado de los estilos al momento de cargar la página.

para ejemplificar el uso de las animaciones usaremos una imagen.

<img alt=”” ” src=”tatto%20page.jpg”  />

y lo que haremos es que mediante animaciones cambiaremos la propiedad de opacidad (opacity) de la imagen de manera que esté transparente al unicio y que se comience a visualizar conforme pasa el tiempo.

Entonces los atributos de la imagen quedaría así:

img{
    animation: aparecer 5s; /*se declara para la imagen una animación llamada “aparecer” y que la animación se realizará en 5 segundos */ 
}

Nota: Estas instrucciones son las declaraciones estándares, en caso de que no se ejecuten tendrás que agregar los prefijos (-webkit-, -o-, -ms-, etc) de acuerdo al navegador que utilices para revisar el ejercicio.

Una vez declarada la animación para el elemento se realiza la declaración de la animación de la siguiente manera:

@keyframes animacion
{
    from{opacity:0;}  /* apariencia inicial del elemento*/
    to{opacity:1;} /* apariencia finaldel elemento*/
}

El ejemplo anterior indica que la opacidad del elemento que tenga asignada esta animación será de “cero” inicialmente (es decir no se verá) y durante la animación se transitará hasta llegar a “uno” (es decir será completamente visible).

Si el ejemplo se deja tal como está, esta animación solo hará una transición es decir de opacidad cero a opacidad uno, sin embargo si queremos que esto sea cíclico (que cuando llegue a opacidad 1 inicie nuevamente) debemos agregar a la animación una instrucción indicando que la animación no se detenga en el estado final:

animation-iteration-count: infinite;

Otro mecanismo para ejemplificar el paso de la animación entre el estado inicial y el final es hacerlo mediante el porcentaje del tiempo que durará la animación, de la siguiente manera:

@-webkit-keyframes aparecer {
    0% {opacity:0;}      /*  similar al “from” estado inicial*/
    50% {opacity:1;}    /*  estado que marca el estado al 50% del tiempo transcurrido */
    100% {opacity:0;} /*  similar a “to”, marca el estado al 100% del tiempo transcurrido */
}

Les recomiendo profundizar en los demás parametros de las animaciones que permiten personaliar la transición de la aminación:

  • animation-delay, especifica el tiempo en que comenzará la animación
  • animation-direction, especifica como se desarrollará la animación
  • animation-duration, especifica cuanto tiempo durará el tiempo del ciclo de la animación
  • animation-fill-mode, especifica el estilo que se le aplicará al elemento cuando la animación no ha terminado o no ha comenzado
  • animation-play-state, especifica cuando la animación está ejecutándose o está en pausa.

Cada una de estos parámetros tiene su conjunto de valores.

Espero les sea de utilidad.

Creación de menú (UL) desde cero – 3 Submenus.

En el post inicial vimos como crear un menú utilizando listas no ordenadas, luego vimos como añadir un estilo de tabs a las opciones del menú. Ahora veremos como agregar submenus a las opciones del menú principal, claro, utilizando listas no ordenadas.

Comencemos….

1.- Estructura principal. Para este ejemplo utilizaremos la estructura creada en el menú básico y la modificaremos para agregar submenus utilizando otra lista no ordenada. La lista que representara el submenu se agregará dentro de la opcion de menu que la contenga, con esto se facilita el posicionamiento del submenu.

<div class=”contenedorMenu”>        
            <ul class=”menu”>
                <li><a href=”#inicio”>Inicio</a></li>            
                <li><a href=”#seccion1″>Sección 1</a></li>
                <li><a href=”#seccion2″>Sección 2</a>
                    <!– este es el submenu –>                    
                    <ul class=”submenu”>
                        <li><a href=”#Subseccion1″>SubSeccion1</a></li>                    
                        <li><a href=”#Subseccion2″>SubSeccion2</a></li>
                        <li><a href=”#Subseccion3″>SubSeccion3</a></li>
                    </ul>
                    <!– Termina el submenu –>                
                </li>
                <li><a href=”#seccion3″>Sección 3</a></li>
            </ul>                        
        </div>

2.- Estilos para el submenu. El submenu debería estar oculto hasta que la opción que lo contiene este seleccionada. Además, agregamos estilos para los submenu items.

/*Estilos para submenu UL*/
            .submenu
            {
                display:none; /*No mostrar*/
            }

/*Estilos para los SubmenuItems    */
            .submenu li
            {
                background: #a921A6;   /*Color de fondo para el menu*/                
                width:140px;    /*Establecer el ancho de cada item*/
                text-align:center;    /*centrar contenido en texto*/
            }

3.- Desplegar el submenu. Una vez el cursor este sobre la opción del menú principal, se cambiará el estilo del submenu para mostrarlo.

/*Cuando se pase el cursor sobre el Item de Menu, mostrar el submenu*/
            .menu li:hover > .submenu
            {
                display: inline-block;            /*Mostrar submenu*/
            }        

 

Ahora, tenemos un menú parecido a este:

Menu Ul

En el siguiente post veremos como hacer un sticky menú

Gracias

Creación de menú (UL) desde cero – 2 Diseño Tab.

En el post anterior creamos la estructura básica del menú utilizando un contenedor y una lista no ordenada como las opciones que el menú va mostrar. Construimos un menú bastante básico pero funcional.

En este post, daremos al menú un aspecto diferente, vamos a simular TABs.

Comencemos…

1.- Estructura Intacta. Para este ejemplo, la estructura que creamos anteriormente no se modificara, seguimos utilizando:

<div class=”contenedorMenu”>        
            <ul class=”menu”>
                <li><a href=”#inicio”>Inicio</a></li>            
                <li><a href=”#seccion1″>Sección 1</a></li>
                <li><a href=”#seccion2″>Sección 2</a></li>
                <li><a href=”#seccion3″>Sección 3</a></li>
            </ul>                        
        </div>

2.- Agregar estilos. Para darle el efecto de tab, tendremos que agregar nuevos estilos y cambiar de lugar algunos otros.

El primer cambio que realizaremos sucede en la regla del contenedor, en el menú original teníamos esta regla:

.contenedorMenu
            {
                background: #E321A6;   /*Color de fondo para el menu*/
                width: 400px; /*ancho del menu */
            }

Como primer cambio moveremos el estilo que establece color de fondo de la regla del contenedor y lo colocaremos en la regla que establece estilos a los ListsItems.

Como segundo cambio, en esta misma regla, agregaremos los estilos para redondear los bordes superiores de los item de la lista, para esto utilizaremos los estilos border-top-left y border-top-right.

La regla queda así:

.menu li
            {
                float:left;    /*alinear los elemntos a la izquierda*/
                width:100px;    /*Establecer el ancho de cada item*/
                text-align:center;    /*centrar contenido en texto*/
                

               /*Para menú en forma de tabs*/
                background: #E321A6;   /*Color de fondo para el menu 1er cambio*/
                border-top-left-radius: 15px;   /*Bordes redondeados 2ndo cambio*/
                border-top-right-radius: 15px;                
            }

Para mayor información acerca del estilo border-radius, ir aquí

Como tercera modificación, agregamos un borde redondeado al evento hover de los ListItems, esto con la finalidad de ver un borde redondeado al colocar el cursor sobre el Item.

.menu li a:hover
            {
                 background-color:white;    /*Color de Fondo*/
                 color:#E321A6;    /*Color de fuente*/
                 /*Para menú en forma de tabs*/

                 border-top:1px #E321A6 solid;
                 border-top-left-radius: 15px;
                 border-top-right-radius: 15px;    
            }       

El menú queda así:

Menu tab

En el siguiente post veremos como agregar submenús al menú principal

Saludos

Creación de menú (UL) desde cero – 1 Estructura y diseño.

Los menús siempre han sido un elemento infaltable en la visualización de información, por qué, es a partir de él que los usuarios pueden acceder de manera fácil y rápida a toda la información que se desea mostrar.

En los sitio web, los menús han pasado de ser una simple lista enlaces a una serie de elementos HTML que combinado con CSS y JavaScript, nos muestran funcionalidades mas ricas y vistas mas atractivas para usarse.

En esta serie de posts, crearemos un menú desde cero utilizando una lista no ordenada (UL), modificando su vista con CSS y dando funcionalidad con JQuery.

Comencemos…….

1.-Estructurar el menu. Utilizo un div “contenedor ” que me permitira mover el menu o cambiar su posicionamiento, dentro de él creo un elemento Lista No Ordenada y creo sus ListItems, uno por cada opción que contendrá el menú.

<div class=”contenedorMenu”>        
          <ul class=”menu”>
                <li><a href=”#inicio”>Inicio</a></li>            
                <li><a href=”#seccion1″>Sección 1</a></li>
                <li><a href=”#seccion2″>Sección 2</a></li>
                <li><a href=”#seccion3″>Sección 3</a></li>
       </ul>                        
 </div>

2.- Diseñar los estilos. Una vez creada la estructura HTML que formará mi menú, aplico los estilos necesarios para darle una vista diferente a como se vería normalmente una lista no ordenada. A continuación se muestran los estilos aplicados a cada uno de los elementos así como la función que tiene cada uno de ellos:

 <style type=”text/css”>
body{ margin:0px;}
/*Estilos para el contendor del menu*/
.contenedorMenu
{
background: #E321A6;   /*Color de fondo para el menu*/
width: 400px; /*ancho del menu considerando que cada una de las opciones del menu tiene como ancho 100px;*/
}
/*Estilos para el elemnto ul*/
.menu
{
list-style: none;  /*Quitar viñetas de la lista*/
padding: 0px;    /*Quitar sangría de la lista */
margin:0px; /*Quitar espacios que genera la lista ul*/
height: 30px;    /*Establecer el ancho del menu*/
line-height: 30px; /*Centrar el contenido al medio*/
}
/*Estilos para los items de menu*/
.menu li
{
float:left;    /*alinear los elemntos a la izquierda*/
width:100px;    /*Establecer el ancho de cada item*/
text-align:center;    /*centrar contenido en texto*/
}
/*Estilos para el enlace dentro de los Items de menu*/
.menu li a
{
text-decoration: none;    /*Quitar el subrayado*/
color: white;    /*Color de fuente*/
display: inline-block;    /*Expandir el enlace a lo alto del LI*/
width: 100%;    /*Expandir el enlace a lo largo del LI*/
}
/*Estilos para los enlaces cuando el mouse se coloca sobre ellos*/
.menu li a:hover
{
background-color:navy;    /*Color de Fondo*/
color:#fff;    /*Color de fuente*/
}

</style>

Hasta ahora, tenemos un menú bastante básico pero funcional. Algo asi:

Menu básico

En próximos post, agregaremos algunas funcionalidades y características a este menú.

2.-Menu en forma de TAB

Gracias.

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