LocalStorage

Hoy aprenderemos a como utilizar el LocalStorage de HTML y JavaScript para usarlo en nuestras paginas web.

¿Qué es el LocalStorage?

Con el LocalStorage podemos guardar información en nuestro navegador web a modo de sesión y que esa información persista y esté disponible durante la navegación entre las diferentes páginas de nuestro sitio web.

El LocalStorage suele usarse mucho en aplicaciones web desarrolladas completamente con JavaScript,  puede aplicarse a cualquier web en la cual necesitemos compartir datos entre secciones.

Veamos cómo usar el LocalStorage en JavaScript.

Guardar datos en el navegador

Para almacenar datos y guardar nuevos elementos o indices en el LocalStorage usaremos la siguiente instrucción:

// Guardar
localStorage.setItem("elemento", "ListadeElementos");

De esta manera damos de alta un nuevo elemento.

Recuperar datos

Para conseguir los datos que tenemos guardados en un indice de nuestro almacenamiento local del navegador usaremos:

// Conseguir elemento
localStorage.getItem("elemento");

Esto nos devolverá el valor que hemos guardado anteriormente.

Guardar objetos en el LocalStorage

Para guardar un objeto primero debemos convertirlo en un string json ya que el localstorage no permite guardar objetos de JavaSciprt como tal.

Tendríamos que hacer algo así:

localStorage.setItem("usuario", JSON.stringify(mi_objeto));

Guardamos el elemento usuario cuyo valor es un objeto convertido a string.

Sacar objetos del LocalStorage

Para recuperar un objeto primero debemos convertirlo en un objeto de JavaScript JSON en lugar del string JSON que se encuentra guardado por defecto.

Haríamos esto:

JSON.parse(localStorage.getItem("usuario"));

Recordemos que:
JSON.parse() es para convertir algo a un objeto JSON usable por JavaScript.
JSON.stringify() es para crear un JSON string de un objeto o un array.

Borrar o vaciar el LocalStorage

Para eliminar un elemento del LocalStorage usaremos la siguiente instrucción:

localStorage.removeItem("usuario");

Siendo"usuario" el identificador del elemento.

Para vaciar por completo el LocalStorage usaremos la siguiente instrucción:
localStorage.clear();

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

[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.

Tabla de Pendientes con JS/JQuery

En esta publicación vamos a realizar una pequeño y fácil script en JavaScript que realizara el trabajo de una pequeña tabla de pendientes.

Este ejercicio es bastante útil, no necesariamente por que vayamos a incluir una tabla de pendientes en una de nuestras páginas web sino porque podemos sacarle algunas ideas para otras cosas que deseemos realizar solo basta con cambiar la idea principal y aunque no se quede guardado ya que no haremos uso de base de datos es un ejercicio que podría resolverte varias dudas con respeto a la creación de nuevos elementos hijo o su eliminación.

Pasos:

  1. En el el head le agregamos el <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”> para poder hacer el query que necesitamos.
  2. Creamos un archivo html en este tendremos una entrada de tipo texto y le podremos un id = textoTarea, este input nos servirá para ingresar el texto de nuestro pendiente. Creamos un botón el cual le podremos un id = btnAniadir el cual tiene como texto Añadir, como el texto lo dice este botón contendrá el evento para añadir el pendiente o tarea.
  3. Aquí podría ser de diferentes maneras como crear la tabla completamente desde el script, pero aquí crearemos el encabezado de la tabla desde el html, creamos una tabla la cual tendrá como id= TablaPendientes.
    1. Dentro de la tabla creamos el cuerpo de la tabla mediante la etiqueta <body> y creamos la fila del encabezado con la etiqueta tr el cual tiene definido class = “FileRen”, este encabezado tendrá 3 columnas Fecha, Pendiente, Estado y no constará de ningún id.
  4. Darle diseño, le daremos un pequeño diseño a nuestra tabla para que no se vea tan feo.
  5. Ya en el script instanciamos la variable btnAniadir la cual obtendrá el elemento botón que creamos, textoPendiente que obtendrá el elemento de la entrada de tipo texto, tbody obtendrá el cuerpo de la tabla que servirá para agregarle los renglones que vamos creando, ren obtendrá los renglones y realizara un query, checa obtendrá los elementos qie tienen estado para realizar un query y una variable de tipo fecha para sacar la fecha del dia.
  6. Creamos un evento a btnAniadir en el cual cada que demos clic crearemos un TR y sus respectivos TD, el primer TD le creamos un nodo texto donde sacamos la fecha por medio de la variable fecha que creamos previamente, el segundo TD le creamos un nodo texto apartir del texto que ingresamos, y al tercer le creamos un nodo texto con la palabra “PENDIENTE” y le agregamos un atrubuto “class” de nombre “estado” para crearele un query a ese TD, los tres TD se los agregamos a el TR y este TR se los agregamos al cuerpo de la tabla tbody.
  7. En el mismo evento de btnAniadir creamos un query para la variable ren que es la que tiene todos los elementos que tienen la clase = “FilaRen” eliminar cada vez que un renglón tenga doble clic
  8. Creamos otro query con la variable checa que es la que obtiene todos los elementos que tienen la clase = “estado”, para que cada que le demos clic a la ultima celda de cada fila cambie su estado.

 

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

Declaración de variables en Javascript

Como programador, seguramente te has topado con la necesidad de definir el tipo de las variables que vas a usar en tu código; ya sean de tipo enteros, punto flotante o caracteres, entre otros. Gracias a que JavaScript es un lenguaje de tipado blando, podemos olvidarnos de esta manera de declarar variables y usar unas más generales var, let y const.

En este post aprenderemos cómo declarar nuevas variables en JavaScript y cómo son interpretadas, con el fin de hacer un mejor uso de los recursos de cómputo y de evitar errores a la hora de programar.

Rompiendo los hábitos

En lenguajes como C, C++, Phyton e incluso Java, declaramos las variables que usaremos en nuestro programa dándoles un tipo específico.

En el caso de JavaScript esta costumbre no es necesaria. JavaScript realiza las conversiones necesarias de forma interna para tratar las variables según se requieran durante la ejecución.

A este tipo de lenguajes se le conoce de tipado blando, ya que permite violaciones entre los tipos de las variables una vez que ya fueron declarados.
Por lo tanto, si en C la declaración de una variable de tipo entero se hacía de la siguiente manera:
int i
En JavaScript lo haremos así:
var i
Al asignarle un valor, por ejemplo: i=10, JavaScript entenderá entonces que se trata de un entero.

Diferentes maneras de declarar variables

En esta parte del post hablaremos de las diferentes maneras de declarar variables en JavaScript, aprenderemos qué sucede si declaramos una variable de una manera o de otra y cuáles son las palabras reservadas que debemos de usar para hacer estas declaraciones.

Ámbitos

JavaScript también es un lenguaje con ámbito global con ámbito predeterminado, es decir que si se declara una variable fuera de una función se va a pasar por referencia a todas las funciones, convirtiéndola en una variable global. Y también, si declaramos una variable dentro de una función su ámbito sólo va a ser dentro de esa misma función.
Por ejemplo:

var g = 1000

function f()

{

var g=14;

console.log(g); // mostrará 14 en la consola

}

En el ejemplo anterior tenemos dos variables con el mismo identificador; sin embargo, están en localidades de memoria diferentes, ya que una fue declarada afuera de la función con ámbito global y la otra con ámbito sólo dentro de la función. Por lo tanto, JavaScript no sobre escribe la variable global.
Usaremos la palabra reservada var para definir variables de ámbito local, que se hereda a scopes descendientes por referencia. En otras palabras, sólo es válida dentro de su scope, afuera de él ya no será reconocida.

Hoisting

Este término se refiere a que cada que se cada declaración de variable hecha con la palabra reservada var se moverá al inicio del código durante la ejecución. Con esto nos aseguramos de que las variables siempre estarán definidas y tendrán un espacio en memoria sin importar su posición dentro del código. Sin embargo, si le asignamos un valor inicial a una variable, no se le asignará hasta llegar a esa línea de código.

Palabras diferentes

Hasta ahora hemos visto que cualquier tipo de variable puede declararse usando la palabra var al inicio; sin embargo, no es la única. Existen dos palabras más para hacer declaraciones con JavaScript.

let y const.
En esta parte del post repasaremos cuáles son sus utilidades y diferencias principales.

const

Al usar const queremos decir que la variable no va a ser reasignada, que no es lo mismo a decir que no va a cambiar.
Estamos hablando de una constante, que siempre tendrá el mismo ‘objeto’ dentro de ella, pero las propiedades de dicho objeto pueden cambiar.
Por ejemplo, definir: const r=360
r=180;
Nos daría un error, pero si definimos un arreglo cuyos valores cambien, no tendríamos ningún problema.

let

Las palabras reservadas var y let tienen un uso bastante similar, sólo que una variable declarada con let dentro de un bloque de control de flujo, como: for, while o if, estará definida sólo dentro de ese bloque.
Por ejemplo:

function f()
{
let i=0
I=5*9; 
while(true){ let i=8;}
}

La variable i dentro del while será de ámbito local, y será definida en otra dirección de memoria a la que está definida fuera del bloque.
Se prefiere usar let a var, ya que gracias a estas definiciones locales, es más difícil cometer errores y sobrescribir valores.

Redactor:
Valeria Estefanía Cortez Gutiérrez
Tecnologías Web, semestre 20182018-1

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