html5

Material charla Aplicaciones híbridas con HTML5, JavaScript e Icenium

Posted on

Hola a todos, el dia de ayer en Microsoft Colombia, estuve charlando un poco sobre el desarrollo de aplicaciones híbridas, tocando el tema de html5, javascript e icenium, así que les comparto los slides y el video:

Slides:

Video:

Saludos.

[HTML5] Presentación de HTML5

Posted on Updated on

Compañeros, les comparto una presentación sobre HTML5, espero les guste:

Saludos!

[HTML5] Canvas I – Trazos y figuras

Posted on Updated on

Hola, hace buen rato que no escribía nada sobre HTML5, así que con este post quiero retomar el tema, y la idea es con algunos post sobre como trabajar con el Canvas, así que vamos a comenzar definiendo el canvas con una superficie de dibujo, con el canvas podemos entre otras cosas:

· Dibujar líneas y figuras geométricas

· Trabajar con texto

· Trabajar con gradientes

· Trabajar con audio y video

· Realizar animaciones

· Realizar juegos

· Y mucho más…

Para iniciar, una definición muy simple del canvas puede ser una superficie de dibujo rectangular, y dicho rectángulo tiene unas coordenadas (x,y), la siguiente imagen ilustra este tema:

Ahora ya entrando en materia, para crear el canvas utilizamos la etiqueta <canvas>, un ejemplo sería:

   1:  <canvas id=”canvas1style=”border: 1px Gray Solid height:400px; width:400px;”>
   2:         <p>Tu explorador no soporta el canvas… please update!</p>
   3:  </canvas>

Al canvas anterior le definimos un id (para luego accederlo utilizando JavaScript) y unas propiedades css, lo que esta dentro del canvas (en este caso un párrafo) solo se mostrará si el explorador no lo soporta.

Bueno y ahora si a trabajar con el canvas, en este post revisaremos como dibujar líneas y algunas figuras como rectángulos, círculos y arcos.

Lo primero que se debe hacer para cualquier tipo de acción con el canvas es obtener una referencia al elemento y luego definir su contexto:

   1:  var canvas = document.getElementById('canvas1');
   2:  var contexto = canvas.getContext('2d')

Las dos líneas anteriores simplemente primero obtienen una referencia al elemento y luego le definimos el contexto para trabajar, de acá en adelante usaremos el contexto para dibujar.

Ahora para dibujar líneas tenemos varias funciones, algunas de ellas son:

· moveTo(x,y): Nos ubica en la posición (x,y) dentro del canvas, aca no se dibuja nada.

· lineTo(x,y): Realiza una línea desde la posición actual hasta el punto (x,y).

· lineWidth: Específica el grosor de la línea.

· strokeStyle: Color de la línea, es posible especificarlo en formato hexadecimal, rgb(a) o por el nombre del color.

Y finalmente para que las líneas se dibujen debemos hacer un llamado a contexto.stroke(), de lo contrario no se pintará nada. Ahora si quisiéramos hacer algo como lo de la imagen:

Imagen1

Lo que podríamos hacer es:

   1:  //Obtener el elemento
   2:  var canvas = document.getElementById('canvas1');
   3:  //Definir contexto
   4:  var contexto = canvas.getContext('2d');
   5:   
   6:  var i;
   7:  for (i = 0; i <= 300; i += 30)
   8:  {
   9:      contexto.moveTo(i,0);
  10:      contexto.lineTo(i,300);
  11:      
  12:      contexto.moveTo(0,i);
  13:      contexto.lineTo(300,i);
  14:  }
  15:  contexto.strokeStyle = 'rgba(228,42,190,0.2)';
  16:  contexto.lineWidth = 2;
  17:  contexto.stroke();

Y ahora para dibujar un rectángulo:

   1:  contexto.fillRect(x0, y0, ancho, alto);
   2:  contexto.fillStyle = color;

Y si fuera un circulo:

   1:  contexto.arc(x, y, radio, anguloInicial, anguloFinal, false);
   2:  contexto.fillStyle = color de relleno;
   3:  contexto.fill();
   4:  contexto.lineWidth = ancho de línea;
   5:  contexto.strokeStyle = color;
   6:  contexto.stroke();

Espero les sea de utilidad este post, y pendientes porque vienen más post sobre el canvas, como siempre les dejo el código del ejemplo:

Descarga el ejemplo!

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

Posted on

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

Posted on Updated on

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:

storage

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

Posted on Updated on

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!

[HTML5] Trabajando con Audio y Video – Parte I

Posted on Updated on

Hola a todos, en este post quiero mostrar otra de las nuevas características de HTML5 y es el trabajo con archivos multimedia para el audio y/o el video.

Anteriormente para poder visualizar videos es alguna página Web debíamos hacer uso de plugins como Silverlight o Flash, sin embargo con la venida de HTML5 la idea es reducir a 0 el uso de plugins. Por lo anterior HTML5 ahora define dos nuevos elementos multimedia audio y video, el primero para la reproducción de audio y el segundo para el video.

Las características de audio y video son casi iguales, por lo tanto en este post me enfocare en trabajar con el video, mostraré las características y al final dejaré un muy sencillo reproductor de videos para que lo descarguen y puedan ver la implementación de lo tratado.

Lo primero para conocer el manejo del audio y el video es conocer la etiqueta que se debe utilizar, para el audio usamos <audio id=”audio1”></audio> y para el video <video id=”video1”></video>, y claro allí podemos darle un id para poder trabajar con este elemento desde JavaScript.

Para la etiqueta video adicionalmente podemos especificar las propiedades height y width para dar un tamaño fijo al cuadro que mostrará el video.

Los atributos principales para trabajar con audio y video son:

· src: específica la fuente del media

· controls: define si se deben mostrar los controles de usuario para manipulación del media

· muted: sin volumen

· autoplay: indica si el media debe iniciar su reproducción tan pronto está lo suficientemente cargado.

· loop: vuelve a reproducir el media cuando se termine de reproducir.

· poster [solo para video]: permite definir una imagen que será mostrada cuando el video no ha iniciado su reproducción.

· type: permite especificar el tipo del archivo multimedia.

Entonces un elemento video más completo sería:

   1:  <video id=”video1controls autoplay src=”media/video.mp4type=”video/mp4width=”500pxheight=”500pxposter=”media/poster.jpg>
   2:  </video>

Y en este punto surge un nuevo problema, no todos los exploradores soportan los mismos tipos de archives; afortunadamente tanto para el elemento audio como para el video es posible especificar múltiples tipos de archivos, lo único negativo es que se debe tener el mismo video en diferentes tipos.

Para especificar múltiples fuentes de archivos utilizamos el elemento source, y definimos tantos elementos source como tipos de archivo, continuando con el ejemplo anterior:

   1:  <video id=”video1controls autoplay type=”video/mp4width=”500pxheight=”500pxposter=”media/poster.jpg>
   2:      <source src=”media/video.mp4type=”video/mp4/>
   3:      <source src=”media/video.webmtype=”video/webm/>
   4:  </video>

Y ahora ya tenemos el elemento video funcionando en nuestra Web, en el siguiente post vamos a ver cómo podemos trabajar con estos elementos desde código JavaScript.

Como siempre les dejo el código del ejemplo:

Descarga el ejemplo!