[Arreglos] en JS

Siempre será necesario el uso de arreglos en cualquier lenguaje de programación y claro que JavaScript no es la excepción.

En esta publicación aprenderemos como declarar arreglos, como agregar, ordenar y eliminar elementos dentro de los también conocidos como “Arrays”.

Primero

Los arreglos son una colección ordenada de elementos no homogéneos, cada elemento puede ser de un tipo de dato diferente.

Son el método más común y simple de almacenar datos. Técnicamente, un “Array” es un objeto intrínseco de JavaScript. Admite datos del tipo cadenas, números, objetos, arrays, true, false, null.

Declaración

Existen dos formas de declarar un arreglo y son las siguientes:

La primera forma de declarar un arreglo es a través de los corchetes.

Un ejemplo de arreglo con tres datos string seria:

 var arreglo1 = ["rojo", "azul", "verde"] ;

En el caso de un arreglo vacío sería:

 var arreglo1 = [];

La segunda forma nos permite declarar un arreglo estableciendo el número de posiciones e indicando los elementos que tendrá.

De la siguiente manera declaramos el arreglo, pero sin ninguna posición:

 var arreglo2 = new Array();

entonces para establecer un número de posiciones para el arreglo, seria:

 var arreglo2 = new Array(3);

Dentro de los paréntesis o mejor llamado constructor, se establece el número de elementos que puede contener este arreglo, a su vez, se podría indicar los elementos del arreglo:

 var arreglo2 = new Array("rojo", "azul", "verde");

Agregar Elementos

Para agregar elementos dentro de nuestro arreglo podemos usar las funciones Push y Unshift.

  • Push agrega un elemento al final del arreglo.
  • Unshift agrega un elemento al inicio del arreglo.

Ejemplos:
var Colores = ["rojo","verde"];


Colores.push["azul"];
["rojo","verde","azul"]

Colores.unshift["negro"];
["negro","rojo","verde","azul"]

Ordenar elementos

Para ordenar elementos tenemos la función Sort que ordena alfabéticamente elementos de tipo string y ordena de menor a mayor elementos de tipo entero.

También existe la función Reverse que invierte el orden del arreglo.

Colores.sort();
["azul","negro","rojo","verde"]

Colores.reverse();
["verde","rojo","negro","azul"]

Eliminar elementos 

Para eliminar elementos de nuestro arreglo tenemos las funciones Pop Shift.

  • Pop elimina el ultimo elemento del arreglo
  • Shift elimina el primer elemento del arreglo

Ejemplos:
var Colores = ["verde","rojo","negro","azul"]

Colores.pop();
["verde","rojo","negro"]

Colores.shift();
["rojo","negro","azul"]

See the Pen
Arreglos en js
by JHilarioOjeda (@jhilarioojeda)
on CodePen.

Efectos en imágenes con FadeIn y FadeOut

Siempre queremos darle la mejor presentación a nuestra página web usando y manejando imágenes de la mejor manera, muchas veces recurrimos a métodos que nos permiten crear efectos de alta calidad pero con el defecto que hacen lenta y no muy funcional nuestra página haciendo que la navegación dentro de la misma sea molesta para el usuario.

Por eso en esta publicación te mostraremos como desplegar algunas imágenes sin hacer uso de técnicas que estropeen la funcionalidad de tu página.

Documento HTML
Lo primero que debemos hacer es nuestro documento HTML, donde en una lista desordenada agregamos imágenes y dos enlaces con id “mostrar” y “ocultar”, conteniendo el mismo texto.

Documento CSS
Agregaremos un estilo, en un archivo CSS, para nuestros elementos en la lista de imágenes donde no se vea ninguna viñeta y se encuentren colocados a la izquierda. Es importante no mostrarlos en un inicio, esto lo podemos hacer agregando “display: none”.

Creación del Script
Para realizar el efecto sobre las imágenes haremos un script. Usaremos JQuery así que debemos agregar la siguiente librería en nuestro HTML: https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

Utilizaremos la sentencia “document.ready “y dentro de ella cargaremos la función padre que contendrá las dos funciones dependientes que serán activadas mediante el evento “click” que se efectúa sobre los enlaces.

Finalmente pasamos a definir el contenido de cada una de las funciones internas, que serán las encargadas de llevar acabo el efecto de mostrar nuestras imágenes.
Para darle un estilo elegante al mostrar las imágenes, usaremos la librería FadeIn y FadeOut de JQuery, las cuales nos permiten agregar efectos de desvanecimiento en las imágenes.

La función “muestra” utilizará el efecto FadeIn para que cada imagen se muestre cada 250 ms, y de manera recursiva mande llamar a la función “mostrarimg”.

Para uso de la recursividad crearemos una variable con el nombre de “i” inicializándola en 0. Una vez iniciado el ciclo la variable ira aumentando de valor cada vez que se llame a “mostrarimg” esto dejará de funcionar una vez que la variable i alcance un valor fuera de la lista. Cuando la función devuelva un elemento que no existe, JQuery devolverá un objeto vacío, y deja de llamar a FadeIn.

Lo mismo haremos del lado de la función “ocultar” pero con las siguientes variantes, en vez de utilizar FadeIn utilizaremos FadeOut, le daremos un tiempo de 150 ms, para dar un efecto de borrado rápido. En vez de tomar a “0” como el valor default de la variable “i”, tomaremos el tamaño de nuestra lista como el valor.

Finalmente en vez de incrementar el valor dentro de nuestro ciclo, lo iremos disminuyendo, de esta manera primero desaparecerá la última imagen y el ciclo concluirá con la primera.

See the Pen
Imagenes
by JHilarioOjeda (@jhilarioojeda)
on CodePen.

CSS Media Query

¿Qué es una Media Query?

La Media Query es una técnica CSS introducida en CSS3.

Utiliza la regla @media para incluir un bloque de propiedades CSS solo si una cierta condición es verdadera.

Las consultas de los medios se pueden utilizar para verificar muchas cosas, como:

  • ancho y alto de la ventana
  • ancho y alto del dispositivo
  • orientación (¿la tableta / teléfono está en modo horizontal o vertical?)
  • resolución

El uso de consultas de medios es una técnica popular para entregar una hoja de estilo personalizada para computadoras de escritorio, computadoras portátiles, tabletas y teléfonos móviles (como los teléfonos iPhone y Android).

 

Sintaxis de consulta de medios

Una consulta de medios consta de un tipo de medio y puede contener una o más expresiones, que se resuelven como verdaderas o falsas.

Por ejemplo en este query el fondo de todos los h2 sera tomado solo si tiene un rango mínimo de 50rem y un máximo de 75rem en el ancho de la pantalla


@media screen and (min-width:50rem) and (max-width:75rem)
{
h2{ background-color: tomato;}
}

El resultado de la consulta es verdadero si el tipo de medio especificado coincide con el tipo de dispositivo en el que se muestra el documento y todas las expresiones en la consulta de medios son verdaderas. Cuando una consulta de medios es verdadera, se aplican la hoja de estilo o las reglas de estilo correspondientes, siguiendo las reglas normales en cascada.

A menos que utilice los operadores no o solo, el tipo de medio es opcional y all tipo estará implícito.

También puede tener diferentes hojas de estilo para diferentes medios.

 

 

Ejemplo sencillo: MENU RESPOSIVO

 

Tenemos un pequeño menú el cual diseñamos de la siguiente manera que en teoría es lo original


* {
box-sizing: border-box;

.nav {
overflow: hidden;
background-color: #333;
}

.nav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.nav a:hover {
background-color: #ddd;
color: black;
}

p{
width: 50%;
float: left;
}

Pero al meter nosotros nuestra primer quería la restricción nos dice que cuando el ancho de la pantalla este entre un mínimo de 75rem y un máximo de 120rem el fondo de la etiqueta h2 será de color #FCF7FF, y todo sigue igual en nuestro navegador

@media screen and (min-width: 75rem) and (max-width:120rem){
h2{ background-color: #FCF7FF;}
}

Pero cuando nuestra pantalla cumpla la siguiente restricción el fondo de la etiqueta h2 cambiara a  #967AA1 la barra de menú o navegador dejara de flotar y cubrirán el 100% del ancho y las etiquetas p también lo haciendo que a pesar de lo pequeño de nuestra pantalla no se pierdan los elementos del menú.


@media screen and (min-width:25rem) and (max-width:50rem){
h2{
background-color: #967AA1; }

p{
width: 100%;
float: none; }

.nav a {
float: none;
width: 100%; }
}

 

See the Pen
bZqPGV
by Jonathan Eduardo (@JhonQuistiano)
on CodePen.

Tipos de Selectores en CSS

Los selectores en CSS son aquellos que identifican elementos dentro de una página web para así poder aplicar estilos a sus elementos.

Los tipos de selectores abarcan desde el nombre de las etiquetas usadas en HTML hasta combinaciones que permiten diversos selectores de la página.

Existen diferentes tipos de selectores como lo son:

  • universal
  • de etiqueta
  • descendentes
  • de clase
  • de id.

TIPOS:

Selector Universal

Es aquel que se puede utilizar para identificar y modificar a todos los elementos de la pagina web.

El selector universal se declara con un asterisco (*) y dentro de las llaves se colocan las características que tomarán los elementos como se muestra a continuación.

Creamos nuestro selector * {} en el que daremos el mismo estilo margin y padding ademas de el color aqua a todos los elementos.

Selectores de Etiqueta

Los selectores de etiqueta seleccionan a los elementos cuyo nombre coincida con el nombre del elemento html.

Cuando existen diferentes etiquetas con propiedades iguales se puede enlazar separando los nombres por comas.

Ejemplo: Se le asigna un color y un formato al texto de los títulos h1, h2 y h3.

Podemos observar en el ejemplo estamos asignando un mismo estilo a las tres etiquetas.

Selectores descendentes

Son aquellos que seleccionan los elementos que se encuentran dentro de uno o mas elementos creando una mayor precisión para la selección de la etiqueta a la que se le aplicara el estilo. Estos selectores se separan por espacios en blando.

Ejemplo: Se modificara el color y la fuente de los elementos dentro de una etiqueta <p> que a su vez este dentro de la etiqueta <div>.

Un elemento no tiene que ser descendente directo de otro si no que la única condición es que el elemento debe estar dentro del otro elemento sin importar el nivel de profundidad en el que se encuentre

Selectores de Clase

Son prácticos para aplicar estilos a un solo elemento de la página ya que utilizando el atributo class se puede indicar directamente la regla CSS

Se diferencia este tipo de selector con la notación de un punto (.) antes de la palabra usada con el prefijo “class”.

Ejemplo: Al elemento <p> en su atributo class asignamos el nombre del selector creado .DeClase

Selectores de ID

Se utilizan para dar estilo a un solo elemento según su identificador único (id). Se utiliza con el atributo de id.

La sintaxis es muy parecida con los selectores de clase; la diferencia es que se utiliza el símbolo (#) en vez del (.). La diferencia  es que no se puede repetir en una misma página web.

Por ejemplo: Al elemento h3 se le da como identificador único #DeId por lo cual solo se le aplicara el estilo a este elemento. 

Es importante no confundir este selector con los anteriores:

p#DeId : Todos los elementos de tipo p con identificador unico DeId

p DeId : Todos los elementos con identificador único DeId y este dentro de alguna etiqueta p

p, DeId : Todos los elementos p y todos los elementos con identificador único DeId

Selectores Específicos

Pero ¿Cómo es posible aplicar estilos a solamente al párrafo cuyo atributo class sea igual a Estilo?

Combinando el selector de clase y el selector de tipo, para obtener un selector mucho mas especifico:

Como podemos observar el estilo solo se aplico al párrafo y no a los otros elementos. “Se puede interpretar el selector p.Estilos como Elementos de tipo <p> que dispongan de un atributo class con un valor de Estilos”

Estos fueron los diversos selectores CSS que puedes utilizar en la creación de tu página web.

 

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