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 Actualizado enn

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

Saludos!

[HTML5] Canvas I – Trazos y figuras

Posted on Actualizado enn

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 Actualizado enn

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 Actualizado enn

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 Actualizado enn

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!

[HTML 5] Trabajando con la geolocalización

Posted on Actualizado enn

Otra de las cosas nuevas que trae HTML5 es la geolocalización, con ella podemos determinar en qué lugar (coordenadas) se encuentra un usuario.

Determinar la posición de un usuario es bastante sencillo, y en este post les voy a mostrar como lo podemos hacer, y como complemento, mostraremos dicha ubicación en un mapa utilizando Bing Maps.

La sintaxis general para trabajar con la geolocalización es:

   1:  navigator.geolocation.getCurrentPosition(GetPosition,funcionError, options);

Entonces se utilice el método getCurrentPosition de geolocation, donde el primer parámetro es la función que se llama si todo nos sale bien, la segunda será la función que se ejecuta cuando algo falla y por último podemos definir un set de opciones.

Algunas de las opciones que podemos definir son:

· enableHighAccuracy: De tipo booleano, indica si se debe obtener la posición más acertada.

· timeout: indica el tiempo permitido en milisegundos para intentar obtener la posición.

Una vez obtenida la posición accedemos a las coordenadas (latitud y longitud) mediante un objeto position, el cual contiene dicha información.

Ahora que ya tenemos algo (no toda) de teoría manos a la obra, la idea como comente antes es mostrar en donde estamos en un mapa, y por otro lado vamos a tener dos campos de texto para mostrar la latitud y la longitud.

Escribir el HTML:

De una manera muy simple tenemos los dos campos de texto para mostrar la latitud y la longitud, y por otro lado un div el cual será nuestro mapa:

   1:  <p>Geolocalizacion en HTML 5</p>
   2:  <p>Latitud:<input type="text" id="txtLatitud" /></p>
   3:  <p>Longitud:<input type="text" id="txtLongitud" /></p>
   4:  <hr/>
   5:  <div id='mapDiv' style="position:relative; width:600px; height:600px;"></div>   

Referenciar los JavaScript

Ahora se debe referenciar el archivo js de jQuery y el API de Bing Maps:

   1:  <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
   2:  <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

Definir las opciones:

Definir en un variable las opciones que vamos a utilizar:

   1:  var options = {
   2:      enableHighAccuracy: true,
   3:      timeout: 45000
   4:  };

Obtener posición:

   1:  navigator.geolocation.getCurrentPosition(GetPosition,funcionError, options);

Luego definimos la función funcionError:

   1:  function funcionError(error)
   2:  {
   3:      alert(error.message);
   4:  }

Y la función GetPosition:

   1:  function GetPosition(posicion)
   2:  {
   3:      var latitud = posicion.coords.latitude;
   4:      var longitud = posicion.coords.longitude;
   5:      $("#txtLatitud").val(latitud);
   6:      $("#txtLongitud").val(longitud);
   7:      GetMap(latitud,longitud);
   8:  }

En esta función lo interesante es que tenemos la variable posicion, y es por medio de ella que accedemos a los valores de latitud y longitud respectivamente, finalmente se observa el llamado a la función GetMap, la cual recibe la latitud y la longitud para poder ubicarse en el mapa, en resumen la función GetMap sería:

   1:  function GetMap(a,b)
   2:  {   
   3:      var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), 
   4:          {credentials: "######",
   5:          center: new Microsoft.Maps.Location(a, b),
   6:          mapTypeId: Microsoft.Maps.MapTypeId.road,
   7:          zoom: 8});
   8:  }

Pero esa parte ya nos la da es el API de Bing, y en donde dice ### debemos colocar el número dado por el API.

Listo, ahora un tema importante es que cuando se intente obtener la localización del usuario, siempre el usuario debe permitir realizar dicha acción, es por eso que al cargar la página vemos que se muestra un mensaje como (mensaje tomado de Internet Explorer 9):

Imagen1

Y allí el usuario puede decidir aceptar o rechazar la petición de localización, en caso afirmativo lo que se va a obtener es:

Imagen2

Espero les haya gustado el post, así que les dejo el ejemplo y claro, viene más de HTML5.

Descarga el ejemplo! (ten en cuenta que para que le ejemplo te funcione debes colocar la key que te da el API de Bing)

[HTML 5] Visual Studio y HTML5

Posted on Actualizado enn

En los pasados post (míralo acá) hemos visto algunas de las nuevas características ofrecidas por HTML5, así que en este articulo quiero mostrar algunas ventajas y ayudas que nos da Visual Studio 2010 y 11 al trabajar con HTML5.

Así que iniciemos con Visual Studio 2010. Con el service pack 1 de VS 2010, tenemos a nuestra disposición intellisense para escribir nuestro código HTML5, y como lo activamos?… muy sencillo, primero vamos a tools -> opciones:

clip_image002

Luego allí buscamos el nodo Text Editor, luego seleccionamos la opción HTML y dentro de HTML vamos al ítem de validación, entonces en el cuadro desplegable asociado al target seleccionamos HTML5 y damos en OK:

clip_image004

Entonces ya cuando vamos a escribir el código HTML de una pagina ya tenemos intellisense para las nuevos tags:

clip_image006

Bueno y que con que Visual Studio 11??

En VS 11 tenemos mas ayudas que con VS 2010, además de tener el intellisense, cuando tenemos textbox de ASP.NET, en su propiedad TextMode disponemos de nuevas opciones para elegir, dentro de las cuales están los nuevos tipos de input de HTML5:

clip_image008

Espero que les haya gustado este post…y claro vamos a tener más sobre HTML5.

Hasta la próxima.

[HTML5] Trabajando con formularios

Posted on Actualizado enn

HTML5 ofrece una nueva manera para trabajar con formularios, centrándose principalmente en hacernos la vida más fácil a los desarrolladores, ahora es posible tener formularios con reglas de validación sin utilizar código cliente.

Anteriormente vimos cuales son los nuevos tipos de input de los que disponemos (ver post), y estos son parte clave en el desarrollo, pero aun tenemos más, y vamos a revisarlas:

1. Nuevos atributos:

HTML5 define nuevos atributos para trabajar con formularios, y su principal objetivo es reducir el código JavaScript que debemos escribir prácticamente a 0.

Los atributos son:

· placeholder: con este atributo podemos especificar un texto que trabaje como marca de agua para una caja de texto, el texto solo será mostrado si dicho campo esta vacía, un ejemplo:

   1:  <input id=”txtNombretype=”textplaceholder=”Ingresa tu nombre/>

· required: con este atributo definimos si un campo es requerido o no, un ejemplo sería:

   1:  <input id=”txtNombretype=”textrequired />

· autofocus: establece el foco en un determinado control cuando se carga la página, solo se debe asignar este atributo a un elemento del DOM por página, un ejemplo sería:

   1:  <input id=”txtNombretype=”textautofocus />

· autocomplete: permite definir si un campo de texto debe recordar los valores ingresados anteriormente, puede tomar dos valores, true o false; un ejemplo sería:

   1:  <input id=”txtNombretype=”textautocomplete=”false/>

2. Lista de opciones:

Otra de las características que tenemos disponibles ahora en HTML5 para trabajar con formularios es la posibilidad de crear listas de opciones para nuestras cajas de texto, para realizar esto disponemos del elemento datalist en el cual definimos las opciones y del atributo list el cual tendrá como valor el id del datalist creado, un ejemplo sería:

   1:  <b>Ciudades:</b>
   2:  <input type="text" id="txtCiudad" list="listCiudad" placeholder="Ingresa tu ciudad"/>
   3:  <datalist id="listCiudad">
   4:      <option value="Bogota" label="Bogota">
   5:      <option value="Cali" label="Cali">
   6:      <option value="Medellin" label="Medellin">
   7:      <option value="Pereira" label="Pereira">
   8:  </datalist>

3. Validar formulario al enviarlo:

Por defecto, los botones de tipo submit realizan la validación de todos los campos con el atributo required en un formulario, sin embargo es posible tener botones que no realicen dichas validaciones, y como? muy fácil solo debemos incluir el atributo formnovalidate, un ejemplo sería:

   1:  <input id="btnLimpiar" formnovalidate type="submit" value="Limpiar" />

Ahora como ejemplo real vamos a crear un formulario de registro de usuario, y vamos a ver que realmente no nos es necesario escribir código cliente para realizar la validación de estos campos, en resumen nuestro HTML sería:

   1:  <h1>Validando un formulario</h1><hr>
   2:  <form id="form1" name="form1">
   3:     <table>
   4:          <tr>
   5:              <td>Nombre:</td>
   6:              <td><input type="text" required placeholder="Ingrese su nombre"></td>
   7:          </tr>
   8:          <tr>
   9:              <td>Apellido:</td>
  10:              <td><input type="text" required placeholder="Ingrese su apellido"></td>
  11:          </tr> 
  12:          <tr>
  13:              <td>Email:</td>
  14:              <td><input type="email" required placeholder="Ingrese su email"></td>
  15:          </tr>
  16:          <tr>
  17:              <td>Sitio Web:</td>
  18:              <td><input type="url" placeholder="Ingrese el sitio Web"></td>
  19:          </tr>
  20:          <tr>
  21:              <td><input type="submit" value="Enviar datos"></td>
  22:              <td><input type="submit" value="Limpiar datos" formnovalidate></td>
  23:          </tr>
  24:      </table>
  25:  <form>

Nos vemos en el siguiente post!

Descarga el ejemplo!