[HTML5] Trabajando con el storage de HTML5, almacenando en JSON – Parte II

En el post pasado (míralo acá) se hizo una introducción al nuevo storage disponible en HTML5, el cual es realmente bastante sencillo de trabajar, así que en este artículo quiero mostrar como podemos almacenar datos en formato JSON en el storage, además como ya es bien conocido JSON se esta volviendo cada vez más importantes cuando trabajamos en aplicaciones Web.

Bien lo primero es referencias los archivos JavaScript necesarios, en este caso la librería core de jQuery y a librería json2.js.

   1:  <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>

   2:  <script type="text/javascript" src="js/json2.js"></script>

Luego, vamos a crear un formulario muy sencillo para recibir los datos de un usuario, el HTML sería:

   1:  <fieldset style="width:300px;">

   2:      <legend>Registro</legend>        

   3:      <table>

   4:          <tr>

   5:              <td><b>Nombres:</b></td>

   6:              <td><input type="text" id="txtNombre" /></td>

   7:          </tr>

   8:          <tr>

   9:              <td><b>Apellidos:</b></td>

  10:              <td><input type="text" id="txtApellidos" /></td>

  11:          </tr>

  12:          <tr>

  13:              <td><b>Email:</b></td>

  14:              <td><input type="text" id="txtEmail" /></td>

  15:          </tr>

  16:          <tr>

  17:              <td><b>Twitter:</b></td>

  18:              <td><input type="text" id="txtTwitter" /></td>

  19:          </tr>

  20:          <tr>

  21:              <td colspan="2">

  22:                  <input type="button" id="btnGuardar" value="Guardar"/>|

  23:                  <input type="button" id="btnRecuperar" value="Recuperar"/>

  24:              </td>

  25:          </tr>

  26:      </table>

  27:  </fieldset>

Como se puede observar, en la parte inferior tenemos dos botones, uno para guardar los datos y el otro para recuperarlos y mostrarlos en el formulario, en resumen el código JavaScript es:

   1:  $(document).on("ready", function(){

   2:      var nombres = $("#txtNombre");

   3:      var apellidos = $("#txtApellidos");

   4:      var email = $("#txtEmail");

   5:      var twitter = $("#txtTwitter");

   6:                  

   7:      $("#btnGuardar").on("click", function(){

   8:          var usuario = new Object();

   9:          usuario.nombres = nombres.val();

  10:          usuario.apellidos = apellidos.val();

  11:          usuario.email = email.val();

  12:          usuario.twitter = twitter.val();                

  13:          window.sessionStorage.setItem("usuario",JSON.stringify(usuario));

  14:          LimpiarFormulario();

  15:      })

  16:                  

  17:      $("#btnRecuperar").on("click", function(){

  18:          var usuario = new Object();

  19:          usuario = JSON.parse(window.sessionStorage.getItem("usuario"));

  20:          nombres.val(usuario.nombres);

  21:          apellidos.val(usuario.apellidos);

  22:          email.val(usuario.email);

  23:          twitter.val(usuario.twitter);

  24:      })

  25:              

  26:      function LimpiarFormulario()

  27:      {

  28:          nombres.val('');

  29:          apellidos.val('');

  30:          email.val('');

  31:          twitter.val('');

  32:      }

  33:  })

Como se puede observar el código es bastante sencillo, lo único a comentar es en la línea 13 convertimos el objeto usuario a un objeto en JSON con JSON.stringify, y la otra línea importante es la número 19, en donde convertimos el objeto JSON almacenado a un Objeto en JavaScript.

Espero les sea de utilidad, como siempre les dejo el código del ejemplo:

Descarga el ejemplo!

[HTML5] Trabajando con el storage de HTML5 – Parte I

Una de las nuevas características que más me gustan de HTML5 es el storage, pero para hablar de este tema quiero hablar un poco sobre las cookies, pero no las galletas sino aquellos datos que se podían guardar en una aplicación Web en el cliente.

Los cookies permiten guardan datos en el cliente, pero tienen algunos pequeños problemas:

· Su tamaño es muy pequeño (si mal no estoy solo 100k de espacio)

· Se envían al servidor en cada petición que se realiza.

· Su creación y administración utilizando JavaScript puro es (en mi opinión) bastante cansona, claro existe un plugin de jQuery que no hace la vida muy sencilla, y lo pueden ver en este post.

Ya aclarando un poco el tema de las cookies, el storage de HTML5 llega con la idea de resolver estos problemas, y es por eso que ahora se definen dos nuevos tipos de almacenamiento:

• localStorage
• sessionStorage

Estos dos tipos de almacenamiento trabajan prácticamente igual, es decir las funciones para guardar, recuperar y eliminar son los mismos, la diferencia radica en que el sessionStorage funciona mientras el usuario tiene el browser abierto, y el localStorage persiste aun después de cerrar el explorador. Este tipo de storage tiene en promedio 5 Mb de almacenamiento, es almacenado en el cliente y es enviado al servidor en cada postback.

Almacenando datos:

Para poder almacenar datos utilizamos el método setItem, el cual como primer argumento define la llave a utilizar (para poderlo recuperar luego) y el valor:

   1:  window.sessionStorage.setItem('key', 'value');

   2:  window.localStorage.setItem('key', 'value');

Recuperando datos:

Para poder recuperar datos lo hacemos por medio de la llave establecida:

   1:  window.sessionStorage.getItem('key', 'value');

   2:  window.localStorage.getItem('key', 'value');

Eliminando datos:

Para eliminar un valor, también lo hacemos por medio de la llave:

   1:  window.sessionStorage.removeItem('key');

   2:  window.localStorage.removeItem('key');

Ahora para verificar que realmente este storage funciona vamos a escribir el siguiente HTML:

   1:  <h1>Storage en HTML5</h1>

   2:  <hr>

   3:  <br>

   4:  <b>Nombre:</b><input type="text" id="txtNombre">

   5:  <br>

   6:  <b>Email:</b><input type="text" id="txtEmail">

   7:  <br>

   8:  <fieldset>

   9:      <legend>Session Storage</legend>

  10:      <input type="button" id="btnGuardar" value="Guardar">

  11:      <input type="button" id="btnObtener" value="Obtener">

  12:      <input type="button" id="btnEliminarNombre" value="Eliminar nombre">

  13:  </fieldset>

  14:  <fieldset>

  15:      <legend>Local Storage</legend>

  16:      <input type="button" id="btnGuardar2" value="Guardar">

  17:      <input type="button" id="btnObtener2" value="Obtener">

  18:      <input type="button" id="btnEliminarNombre2" value="Eliminar nombre">

  19:  </fieldset>

Simplemente tenemos dos campos de texto, uno para el nombre y el otro para la dirección de email, además de botones para el sessionStorage y el localStorage. El código JavaScript sería:

   1:  $(document).on("ready", function(){

   2:      //SESSION STORAGE

   3:      $("#btnGuardar").on("click", function(){

   4:          var nombre = $("#txtNombre").val();

   5:          var email = $("#txtEmail").val();

   6:          window.sessionStorage.setItem("nombre",nombre);

   7:          window.sessionStorage.setItem("correo",email);

   8:      })

   9:      $("#btnObtener").on("click", function(){

  10:          var nombre = window.sessionStorage.getItem("nombre");

  11:          var email = window.sessionStorage.getItem("correo");            

  12:          $("#txtNombre").val(nombre);

  13:          $("#txtEmail").val(email);

  14:      })

  15:      $("#btnEliminarNombre").on("click", function(){

  16:          window.sessionStorage.removeItem("nombre");

  17:      })

  18:      //LOCAL STORAGE

  19:      $("#btnGuardar2").on("click", function(){

  20:          var nombre = $("#txtNombre").val();

  21:          var email = $("#txtEmail").val();                

  22:          window.localStorage.setItem("nombre",nombre);

  23:          window.localStorage.setItem("correo",email);

  24:      })

  25:      $("#btnObtener2").on("click", function(){

  26:          var nombre = window.localStorage.getItem("nombre");

  27:          var email = window.localStorage.getItem("correo");    

  28:          $("#txtNombre").val(nombre);

  29:          $("#txtEmail").val(email);

  30:      })

  31:      $("#btnEliminarNombre2").on("click", function(){

  32:          window.localStorage.removeItem("nombre");

  33:      })

  34:  })

Ahora, para ver que realmente si esta guardando datos voy a utilizar las herramientas de Chrome (con F12 se muestra) y dentro de Resources esta la opción de Local Storage y de Session Storage, y allí podremos ver los datos guardados, como en la siguiente imagen:

Como se puede observar realmente es muy sencillo, en el próximo post vamos a revisar como poder almacenar datos el formato JSON, como siempre les dejo el ejemplo para que lo descarguen:

Descargar ejemplo!

[HTML5] Trabajando con Audio y Video – Parte II

En el post anterior (míralo acá) se hizo una introducción a los elementos para manejar audio y video disponibles en HTML5, se revisaron sus propiedades principales y se comentaron algunas pequeñas diferencias entre el audio y el video a nivel de configuración.

Bien, y en este post la idea es ir un poco más allá y poder revisar algunas funcionalidades que se tiene para poder manipular estos elementos mediante JavaScript, así entonces se podrá crear controles personalizados para trabajar con estos elementos.

Entonces algunas de las funciones JavaScript que tenemos disponibles son:

· paused: retorna true si el video/audio esta pausado

· play(): inicia o continua la reproducción del video/audio

· pause(): pausa la reproducción

· volumen: permite establecer el volumen, el rango de valores va desde 0 (sin volumen) hasta 1 (volumen máximo).

· duration: retorna la duración del archivo, este valor esta dado en segundos

· currentSrc: retorna el nombre del archivo que se está reproduciendo.

Adicionalmente otro evento bastante importante es timeupdate, con el cual podemos detectar el tiempo de reproducción actual del media, así podemos ir mostrando el avance de la reproducción.

El siguiente código muestra la implementación de las funciones citadas anteriormente:

   1:  $(document).on("ready", function(){

   2:      var video = document.getElementById("video1");

   3:      var play = document.getElementById("btnPlay");

   4:      var nombre = document.getElementById("lblVideo");

   5:      var duracion = document.getElementById("lblDuracion");

   6:      var tiempo = document.getElementById("lblTiempo");

   7:      $("#btnPlay, #video1").on("click", function(){

   8:          if (video.paused)

   9:          {

  10:             $(play).attr("value","stop");

  11:             video.play();

  12:             $(nombre).text(video.currentSrc);

  13:             $(duracion).text(video.duration);

  14:          }

  15:          else

  16:          {

  17:              $(play).attr("value","play");

  18:              video.pause();

  19:          }

  20:      })

  21:      $("#btnMas").on("click", function(){

  22:          video.volume = 1;

  23:      })

  24:      $("#btnMenos").on("click", function(){

  25:          video.volume = 0;

  26:      })

  27:      $("#btnMasVolumen").on("click", function(){

  28:          var vol = video.volume;

  29:          video.volume = vol + 0.1;

  30:      })

  31:      $("#btnMenosVolumen").on("click", function(){

  32:          var vol = video.volume;

  33:          video.volume = vol - 0.1;

  34:      })

  35:      $(":input").css("cursor","pointer");

  36:      $(video).on("timeupdate", function(){

  37:          $(tiempo).text(video.currentTime);

  38:      })

  39:  })

Y el HTML sería:

   1:  <h1>Video en HTML5</h1>

   2:  <hr>

   3:  <video  id="video1" width="640px" height="460px" poster="img.jpg">

   4:      <source src="simpsons.mp4" type="video/mp4" />

   5:  </video>

   6:  <br>

   7:  <b>Nombre:</b><label id="lblVideo"></label>

   8:  <br>

   9:  <b>Duración:</b><label id="lblDuracion"></label>

  10:  <br>

  11:  <b>Tiempo:</b><label id="lblTiempo"></label>

  12:  <br>

  13:  <input type="button" id="btnPlay" value="Play">

  14:  <input type="button" id="btnMas" value="mas">

  15:  <input type="button" id="btnMenos" value="menos">

  16:  <input type="button" id="btnMasVolumen" value="+">

  17:  <input type="button" id="btnMenosVolumen" value="-">

Y para ver esto trabajando les dejo el ejemplo para su descarga, en el ejemplo solo se tiene un archivo de tipo mp4, por lo cual lo podrán ver funcionar el ejemplo en Internet Explorer 9 o en Chrome.

Descarga el ejemplo!