Cambiar formato de elementos Font Awesome, botones y texto al colocar el puntero

En esta practica vamos a cambiar el formato de elementos Font Awesome, ademas de un texto y un botón, cada que el puntero se posicione sobre el elemento.

Anteriormente aprendimos a añadir elementos Font Awesome, recordemos un poco.

Para utilizar los íconos Font Awesome es necesario:

1.-Descargar a la carpeta de tu proyecto la carpeta:

  • CSS que incluye los siguientes archivos:
    • font-awesome.css
    • font-awesome.css.map
    • font-awesome.min.css
  • fonts que incluye los siguientes archivos
    • FontAwesome.otf
    • fontawesome-webfont.eot
    • fontawesome-webfont.svg
    • fontawesome-webfont.ttf
    • fontawesome-webfont.woff
    • fontawesome-webfont.woff

2.- Una vez que tengas la estructura de directorios mencionada en la carpeta de tu proyecto, es necesario incluir las referencias CSS en las páginas desde donde se utilizarán los iconos:

<link type=”text/css” rel=”stylesheet” href=”css/font-awesome.min.css”/>
<link type=”text/css” rel=”stylesheet” href=”css/font-awesome.css”/>

3.-  para llamar los íconos en tu página web se hace através del artributo class de HTML donde se mandan a llamar las conjuntos de estilos defindos por Font Awesome, de la siguiente manera:

<span>
<img class="fl-icon" src="my-icons-collection_1/png/001-food.png" alt="foto"/>
</span>

Ya que hemos recapitulado la manera de añadir elementos Font Awesome, Comencemos con el ejercicio.

Pasos:

1.- Como anteriormente lo mencionamos añadimos las referencias al archivo css.

<!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>
<link rel="stylesheet" href="FA/css/font-awesome.min.css"/>
</head>

2.-Ahora armemos nuestro body en el que insertamos el elemento Font Awesome con la etiqueta <span>, ademas de insertar texto y un botón.

< div class="services-div">
 <span> 
    <img class="fl-icon" src="my-icons-collection_1/png/001-food.png" alt="foto"/> 
 </span>
 <p class="services-title">
   <a href="#">Services</a>
 </p>
 <p class="services-title">
   <a href="#">Services</a>
 </p>
 <hr width="50%" align="center"/>
 <p class="services-desc">Look through an extensive catalog of our services including everything from cloud messaging to remote sensing equipment.</p>
 < div class="boton">
   < div class="capa"></div>
   < a href="#">More</a>
 </div>
</div>

3.-El siguiente paso sera insertar el código css

  • Usaremos .services-title para dar formato al Titulo
  • .service-title a para dar formato a los hiperenlaces que colocaremos.
  • .services-title a:hover para especificar los cambios que tendra el titulo al momento de color el cursor sobre el.
  • .services-desc para dar formato al parrado de texto.
  • .fl-icon para dar formato en este caso tamaño y una transición a los iconos Font Awesome.
  • Y por ultimo .services-div:hover .fl-icon para señalar que cada que el cursor pase en el contenedor cambie el formato de los iconos Font Awesome dentro de este.
<!--Código CSS--> 
<style type="text/css">

.services-title{ 
    font-family:"Arial Narrow", "Times New Roman", Times, serif; 
    text-transform:uppercase; color:white; 
    text-align:center; font-size:2.3em; 
}
.services-title a{ 
    color:white;
    text-decoration:none;
    transition:all .5s; 
}
.services-title a:hover{ 
     color:#50ADE7;
 }
.services-desc{ 
      text-align:center; 
      color:white; font-family:Tahoma; 
      width:80%; margin:0px auto; 
      font-size:0.95em;
}
.fl-icon{ 
      transform:scale(.4);
      transform:scale(.4); 
      transition:all 1s;  
      margin-top:-140px; 
      margin-bottom:-150px;  
      margin-left:30px
}
.services-div:hover .fl-icon
{ transform:scale(.5);}

.
.
.
  • También usaremos .boton para dar estilo al boton
  • .boton a para dar estilo al hiperenlace dentro del botón
  • .capa para el estilo a una capa que que tendrá el botón
  • Y por ultimo .boton:hover .capa para cambiar el tamaño de la capa y así crear el efecto en el botón.
.
.
.
.boton{ 
width:155px; 
height:50px; 
background:linear-gradient(to bottom, #429fe2, #5ebbeb); 
overflow:hidden; 
border-bottom:2px solid #a5dbfa; 
margin:0px auto;
 margin-top:50px; 
margin-bottom:50px}

.boton a{ 
text-align:center; 
padding-top:15px; 
padding-bottom:15px; 
color:white; 
text-decoration:none; 
text-transform:uppercase; 
font-weight:100; 
font-family:"Arial Narrow"; 
display:block; 
position:absolute; 
width:155px;}

.capa{ 
height:0px; 
transition:all  0.5s  ease; 
position:absolute; 
width:155px; 
background-color:rgba(76,80,81,1);}

.boton:hover .capa{ 
height:50px;}

</style>

A continuación se muestra el resultado final

Resultado Final:

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

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.

Menú HTML & CSS responsivo con transiciones

Hola a todos!!. En una publicación anterior vimos como crear un menú con animación JQuery, el día de hoy vamos a crear un menú con movimiento a través de transiciones CSS, es decir, podemos omitir el código Javascript para animar el menú, esto lo hacemos gracias a un truco de CSS ligado a un control checkbox.

1. El primer paso es crear la estructura HTML:

Aqui es dónde viene el truco, como puedes ver utilizamos un checkbox para mostrar el icono de menú, te preguntarás ¿Por qué utilizar un checkbox si lo puedo hacer con una etiqueta img?, bueno, pues este control nos ayudará a detectar cuando se hizo clic sobre él, utilizando CSS detectamos el cambio de estado checked para desplegar u ocultar el menú. ¿podría utilizarse una etiqueta button, link u alguna otra?, la respuesta es, seguramente sí, siempre y cuando podamos detectar sus estados dentro de CSS

<!-- Agregamos el control Checkbox y su label asociado -->
<input type="checkbox" id="menuCheck">
<label class="iconoMenu" for="menuCheck"></label>

<<!-- Este es el titulo de la página -->
<h1>Título de mi página</h1>

<!-- Estructura del menú y su contenedor -->
<div class="contenedorMenu">
<ul>
<li><a href="#">Opción uno</a></li>
<li><a href="#">Opción dos</a></li>
<li><a href="#">Opción tres</a></li>
<li><a href="#">Opción cuatro</a></li>
</ul>
</div>

Seguramente notarás que la estructura realmente no es tan compleja, así que no ahondaré en ella.

2. Pasemos a los estilos

Dentro de los estilos, solo rescataré la forma de mostrar/ocultar el menú.

#menuCheck:checked ~ .contenedorMenu{transform: translateX(0%)}

La explicación de esta línea debe comenzar con saber qué es el simbolo ~ y para que se utiliza, este simbolo llamado selector obtiene todos los elementos de la parte izquierda que preceden a la parte derecha de la regla, ejemplo: element1 ~ element2 (seleccionar todos lo elementos element2 que sean hermanos/estén al mismo nivel jerárquico que element1), para mayor información consultar el enlace https://www.w3schools.com/cssref/css_selectors.asp.

Para nuestro caso, estamos seleccionado al div contenedor del menú cuando el checkbox este en estado checked. Cuando el checkbox deja de estar en este estado los estilos vuelven a su “normalidad”, es decir a los estilos establecidos de inicio.

Para “animar” el menú utilizamos transiciones CSS que propiamente son algo diferente a las animaciones CSS, la principal diferencia es que las transiciones solo se inician en un cambio de estado como vimos ahora, mientras que las animaciones no dependen de estados de las etiquetas y se puede configurar mas a detalle como se comportará el CSS.

Finalmente te dejo el demo del funcionamiento de este código.

Saludos!

See the Pen Menú HTML & CSS responsivo con transiciones by Jesús Rodríguez (@chuyrdz) on CodePen.

Cómo usar los íconos Font Awesome (fa)

El conjunto de íconos Font Awesome es una de las alternativas que nos permiten decorar nuestro sitio o desarrollo web con elementos gráficos que le den un toque moderno y ligero ya que la representación gráfica de los íconos no se realiza mediante imágenes sino a través de una tipografía (fuente).

La versión actual incluye una colección de 585 íconos en la versión 4.4.0 de Font Awesome y constantemente se agregan más.

font-awesome

La imagen anterior muestra una parte de la colección de íconos Font Awesome.

Unas de las características especiales de este conjunto de íconos es:

  • Al no ser gráficos y ser representados mediante una fuente, el peso en mucho menor.
  • Pueden utilizarse distintos colores para su representación
  • Es posible utilizar varios tamaños sin que estos se deformen

Prácticamente para usar estos íconos es necesario:

  • del proyecto de Font-Awesome es necesario descargar a la carpeta de tu proyecto la carpeta:
    • CSS que incluye los siguientes archivos:
      • font-awesome.css
      • font-awesome.css.map
      • font-awesome.min.css
    • fonts que incluye los siguientes archivos
      • FontAwesome.otf
      • fontawesome-webfont.eot
      • fontawesome-webfont.svg
      • fontawesome-webfont.ttf
      • fontawesome-webfont.woff
      • fontawesome-webfont.woff2



Una vez que tengas la estructura de directorios mencionada en la carpeta de tu proyecto, es necesario incluir el siguiente código en las páginas desde donde se utilizarán los íconos:

La referencia a los archivos CSS:
<link type=”text/css” rel=”stylesheet” href=”css/font-awesome.min.css”/>
<link type=”text/css” rel=”stylesheet” href=”css/font-awesome.css”/>

y ¡listo!, esto es lo que necesitas.

Ahora, para llamar los íconos en tu página web se hace através del artributo class de HTML y donde se mandan a llamar las conjuntos de estilos defindos por Font Awesome, de la siguiente manera:

<span class=”fa fa-folder-open”></span> directorio<br/>
<span class=”fa fa-folder-open fa-2x”></span> directorio al doble<br/>
<span class=”fa fa-folder-open fa-3x”></span> directorio al triple<br />
<span class=”fa fa-spinner fa-2x”></span>cambio de ícono <br/>
<span class=”fa fa-spinner fa-2x” style=”color:red”></span>Al ser una fuente puedes indicar el color que necesitas<br/>

el resultado es:

font-awesome-ejemplo

Utilizar una etiqueta spam es semanticamente mejor que utilizar <i> como lo menciona la ayuda de la página oficial de Font Awesome, sin emabargo es posible utilizar cualquiera de las dos.

Una de las características de estos íconos es la rotación, la puedes experimentar con el estilo: fa-spin

Font Awesome incluye el soporte para botones, listas y controles HTML, puedes encontrar documentación completa en: http://fortawesome.github.io/Font-Awesome/examples/

Saludos

Creación de menú (UL) desde cero – 5 Animación JQuery

En los post anteriores hemos creado un menú básico horizontal utilizando listas no ordenadas, luego le agregamos submenús y también lo hicimos pegajoso al scrollear sobre la página. El día de hoy modificaremos el menú básico para hacerlo vertical y vamos a utilizar JQuery para animar (mostrar / ocultar ) el menú y mejorar la navegabilidad del sitio.

1.- Estructura básica del menú. Utilizaremos la misma estructura que hemos utilizado desde el inicio.  

 <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 las mismas reglas, solamente cambiaremos algunos estilos para hacerlo vertical.   Hasta este punto el menú se ve así: Menu JQuery

3.- Agregar elementos adicionales a la página. Vamos a incorporar un encabezado para el menú, este contendrá un botón en donde al hacer clic se mostrara u ocultara el menú. Antes del div class=”contenedorMenu” agregamos:

<div class=”encabezadoMenu”></div>
<div class=”botonMenu”></div>

y su correspondiente css

/*Estilos para el encabezado del menu*/            
.encabezadoMenu{ width:250px; height:70px; background-color:#2C2C30;}            
.botonMenu{width:37px; height:31px; background-image:url(‘Menu.png’); position:relative; top:20px; left:25px;}            
.botonMenu:hover{ cursor:pointer} ahora el menú se ve asi: Menu5_1 4.- Agregar la referencia a la API de JQuery. De preferencia utilicemos el sitio oficial de JQuery y la versión mas reciente para trabajar nuestros proyectos. 5.- Implementar el código JQuery. Lo que queremos lograr es lo siguiente: -Inicialmente el menú debe estar oculto. -Al hacer clic sobre el botón, el menú deberá desplegarse y mostrarse completamente. -Al hacer clic nuevamente, el menú deberá contraerse y ocultarse completamente. Esto se implementará así: // <![CDATA[

    $(document).ready(function(){    
          $(“.contenedorMenu”).slideToggle(); /*Ocultar de inicio el menu*/
          /*Efecto del menu principal*/
          $(“.botonMenu”).click(function(event){ 
               event.stopPropagation(); 
              $(“.contenedorMenu”).slideToggle();  /*SlideUp o SlideDown dependiendo de su estado*/
        });            
  });    

// ]]>
menuAnimado El funcionamiento de SlideToggle, SlideUp y SlideDown puede estudiarse en la documentación oficial de JQuery. En el siguiente post, incluiremos el uso del scroll para ocultar el menú. Gracias

Crear un menu usando elementos DIV y CSS

Generalmente la creación de menús horizontales en páginas web se realizan mediante listas (ul,ol) o mediante el uso de DIV, en algún otro momento chuyrdz ya expuso detalladamente cómo se realiza la creación de un menu (ul) desde cero.

Ahora mostraré los elementos mínimos para la creación de un menú horizontal usando solamente DIV y darle la funcionalidad necesaria sin uso de JavaScript para lograr la funcionalidad.

A partir de este código mostrado tendrán la posibilidad de personalizarlo de acuerdo al diseño que se seleccione.

La estructura en HTML es la siguiente:

<div class=”Menu”>
    <div><a href=”#”>inicio</a></div>
    <div><a href=”google.com.mx”>Google</a></div>
    <div><a href=”wordpress.com”>Word Press</a></div>
    <div>
            <a href=”#”>Correos</a>
            <div class=”SubMenu”>
                <div><a href=”gmail.com”>google</a></div>
                <div><a href=”hotmail.com”>hotmail</a></div>
                <div><a href=”yahoo.com”>yahoo</a></div>
            </div>
    </div>
    <div>
           <a href=”#”>Enlaces</a>
          <div class=”SubMenu”>
               <div><a href=”www.google.com.mx”>google</a></div>
               <div><a href=”hotmail.com”>hotmail</a></div>
                <div><a href=”yahoo.com”>yahoo</a></div>
           </div>
    </div>
</div>

La estructura de estos elementos es la siguiente:

div (menu)
    – div
            -a
    – div
            -a
    – div
            -a
            -div (submenu)
                    -div
                          -a
                    -div
                          -a
                    -div
                          -a
    – div
            -a
            -div (submenu)
                    -div
                          -a
                    -div
                          -a
                    -div
                          -a

La estructura anterior muestra los elementos principales del menú que contienen submenú, en este caso, se ejemplificará para los dos últimos elementos, sin embargo si los dos primeros elementos tuvieran submenú, solo tendría que seguirse la estructura especificada y la funcionalidad se aplicará sin realizar ninguna modificación.

Ahora, para que esta estructura tenga la funcionalidad mínima de mostrar los submenús cuando el mouse esté arriba de la opción se deberá especificar el siguiente código como parte de los estilos.

/*establecemos el alto del menú*/
.Menu

{
height:30px; 
}

/*flotamos los div que son hijos directos del div que tiene como clase Menu*/
.Menu > div
{
float:left;
}

/*se indica que los enlaces ocupen todo el espacio del DIV donde están contenidos, se les da un espacio de separación interior entre el texto y el borde (padding)*/
.Menu a
{
display:block;
padding:5px 15px 5px 15px;
}

/*se establece la funcionalidad del enlace al colocar el mouse arriba del enlace*/
.Menu a:hover
{
background-color:gray;
}

/*Se establecen las características iniciales del submenú, el cual no debe mostrarse*/
.SubMenu
{
position:absolute;
visibility:hidden;
display:none;
}

/*Se establece la funcionalidad del submenu cuando el mouse esté arriba de la opción de menu*/
.Menu > div:hover .SubMenu
{
display:block;
visibility:visible;
}

Hasta el momento se tiene solamente funcionalidad, sin embargo este código está listo para adaptarle cualquier diseño de colores, contornos, estilos de letra y demás monerías  a los elementos estáticos o dinámicos.

Saludos

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.