Una de las cosas que ya está estandarizada en HTML5 es la reproducción de elementos de audio. Es decir, podemos poder música en la web de una forma estándar.

Para poder poner música en las webs, HTML5 ha estandarizado el elemento AUDIO. Así que, lo que tendremos que hacer, para poner un archivo de música será insertar la siguiente etiqueta:

<audio src="cancion"></audio>

Por lo tanto, si nuestra canción es "micancion.mp3" el código a utilizar será:

<audio src="micancion.mp3"></audio>

Si escribimos solamente este código no llegaremos muy lejos ya que, por defecto, el elemento de audio no se muestra. Por lo tanto no podremos utilizar los botones de play, stop, pause,... Así, si queremos que el elemento de AUDIOcontrols.

<audio src="micancion.mp3" controls></audio>

Así ya tendremos el reproductor que nos permita poner la música en nuestra web con HTML5

Los formatos que podemos reproducir mediante el elemento AUDIO de HTML5

• MPEG-1 audio layer 3, que son los más que de sobra conocidos como MP3 y extensión .mp3.
• Advanced Audio Coding, mejoraban la calidad de sonido de los MP3 y es un formato promovido por Apple. Su extensión es .acc. Este formato funciona bajo pantentes
• Vorbis, o conocido como Ogg Vorbis. Es un formato libre de patentes. La extensión que utilizan es .ogg

Similar Posts:

• Embed: Música de fondo en tu página web
• Reproducir música por java
• Iniciar automáticamente un vídeo en HTML5
• Cargar un vídeo AVI, ASF o WMV en mi página web
• Utilizando la etiqueta ADDRESS

Seguro que cuando estás rellenando un formulario muchas de las veces te empieza a ofrecer opciones de autocompletado de los datos. Empiezas a escribir tu nombre y ya te ofrece varias opciones. E incluso, introduciendo un solo campo te rellena varios del formulario.

No en vano el autocompletar de los formularios es una de las cosas que más está potenciando los navegadores.

Ahora con HTML5 vamos a poder controlar el aspecto de autocompletar los formularios. Así mediante código podremos decir si queremos que el formulario sea autocompletable o no.

Para controlar el autocompletar de los formularios con HTML5 tenemos el atributo autocomplete. Atributo al cual deberemos de pasar un valor booleano.

Así podemos tener un formulario con el autocompletar del formulario activado. Es decir con el atributo autocomplete a "on":

 
<h2>Formulario con Autocompletar Activado</h2>
 
Al insertar datos en los campos es muy probable que se muestren opciones de autocompletado.
<form action="enviar.php" autocomplete="on">
<label for="nombre">Nombre: </label>
<input type="text" id="nombre"/><br/>
<label for="city">Ciudad: </label>
<input type="text" id="city"/><br/>
</form>
 

O un formulario con el autocompletar del formulario desactivado. Es decir, con el atributo autocomplete a "off":

 
<h2>Formulario con Autocompletar Desactivado</h2>
 
Al insertar datos en los campos no se te mostraran opciones de autocompletado.
<form action="enviar.php" autocomplete="off">
<label for="nombre2">Nombre: </label>
<input type="text" id="nombre2"/><br/>
<label for="city2">Ciudad: </label>
<input type="text" id="city2"/><br/>
</form>
 

Un simple atributo en HTML5 con mucha capacidad de control.Similar Posts:

• Recuperar datos de un formulario con ASP
• Modificar valores por defecto de un formulario con jQuery
• Listar opciones seleccionadas de un combo con jQuery
• Recuperar datos de un formulario con PHP
• Controlar volumen de vídeo HTML5 con un Slider

Ya veíamos en otro artículo como en HTML5 tenemos la capacidad de definir áreas o elementos que sean editables. Para ello nos basábamos en el atributo general de HTML5 contentEditable.

Pero con HTML5 podemos llegar aún más lejos y podemos crear un documento editable. Es decir, que todos los elementos de la página serán editables desde nuestro navegador.

Para poder crear nuestro documento editable en HTML5 deberemos de recurrir al Javascript y es que desde código Javascript podemos modificar el atributo designMode y aplicarle el valor "on".

document.designMode="on";

Esta simple línea de código Javascript que modifica un atributo HTML5 permite que el documento entero sea editable.

No he encontrado forma de hacerlo directamente sobre el código HTML5 de la página, sin recurrir al código Javascript. Si alguien sabe como resolverlo, su respuesta será muy bienvenida.Similar Posts:

• Crear contenido editable en HTML5
• Generar un documento HTML mediante JavaScript
• Obtener el titulo de la página con JavaScript
• Calcular el numero de imagenes con JavaScript
• Autofoco a un campo con HTML5

La verdad es que casi todos los navegadores modernos ya incluyen dentro de sus plataformas un corrector ortográfico. Algo que no sucedía en las versiones más antiguas.

Una de las cosas que podemos hacer gracias a HTML5 es la de activar o desactivar el corrector ortográfico sobre un determinado elemento. Es decir, pasamos a tener control de esta característica del navegador.

El atributo que nos da el control sobre el corrector ortográfico con HTML5 es spellcheck. El atributo spellcheck está presente en todos los elementos del lenguaje HTML5. Los valores que puede tomar este atributo son "true" y "false". En el primer caso es para activar el corrector ortográfico y en el segundo caso es para deshabilitarlo. Por defecto, el valor que tiene este atributo es "true".

Así, si queremos inhabilitar el corrector ortográfico sobre un área de texto escribiríamos lo siguiente:

<textarea id="texto" rows="12" cols="100" spellcheck="false">Texto</textarea>

Pero no solo podemos jugar con los valores de este atributo en el código HTML5, si no que de forma dinámica, mediante Javascript, podemos modificar sus valores.

De esta forma vamos a añadir unos botones para habilitar y deshabilitar el corrector.

<button id="validar">Validar la Ortografía</button>
<button id="novalidar">Quitar la Validación</button>

Ahora lo que haremos será capturar los eventos click de dichos botones para activar y desactivar el corrector respectivamente.

var boton = document.getElementById("validar");
var boton2 = document.getElementById("novalidar");
var texto = document.getElementById("texto");
 
boton.addEventListener("click",function(ev){
  texto.spellcheck = true;
  texto.focus();
},true);
 
boton2.addEventListener("click",function(ev){
  texto.spellcheck = false;
  texto.focus();
},true);
 

Vemos que sobre el elemento textarea, del cual obtenemos la referencia con .getElementById, manipulamos su atributo spellcheck asignándole "true" o "false".Similar Posts:

• Convertir una cadena a fecha en Javascript
• Tiempo total de un vídeo HTML5
• Elemento rango en formularios HTML5
• Menú Contextual en HTML5
• Controlar volumen de vídeo HTML5 con un Slider

Una de las nuevas capacidades que encontramos dentro de HTML5 es la de definir un contenido editable. Es decir, nos permite insertar elementos dentro del documento web los cuales el usuario puede editar desde el navegador y modificar su contenido.

Lógicamente ampliando las capacidades ya existentes con el TEXTAREA para introducir texto. Así al poder crear contenido editable en HTML5 podremos estar cerca de tener un editor web (o diseñador web) de las páginas web o editores de texto con formato enriquecido.

La forma de crear contenido editable en HTML5 es muy sencilla. Lo primero que haremos será definir una capa de contenido DIV. Sobre dicha capa insertaremos texto.

 
<div id="micapa" style="border: thin solid;padding:10px;">
Inserta la pregunta que quieras hacernos...
</div>
 

Podemos observar que hemos dado un pequeño estilo a la capa agregandola un borde y un espaciado del contenido con respecto al borde.

Para convertir a la capa en editable y así poder crear contenido editbale nos bastará con añadir el atributo contentEditable y asignarle un valor de true. Ya que por defecto este atributo vendrá con un valor de false.

 
<div id="micapa" contentEditable="true" style="border: thin solid;padding:10px;">
Inserta la pregunta que quieras hacernos...
</div>
 

Simplemente con la inclusión de este contentEditable hemos conseguido crear contenido editable en HTML5. Ahora cuando carguemos la página en el navegador y pulsemos sobre el texto veremos como el navegador nos deja modificar el contenido de la capa.

Como siempre con la especificación HTML5 (al menos de momento), deberemos de tener cuidado con el soporte de los navegadores del atributo contentEditable, ya que nos podemos encontrar que alguna versión no lo soporte.Similar Posts:

• Crear un documento editable con HTML5
• Modernizr y las capacidades HTML5 y CSS3
• Controlando el overflow de una capa
• Modificando propiedades CSS con un Slider
• Modificar el contenido de una capa con jQuery

Una de las aplicaciones que podemos tener con un Slider es la de modificar los valores de las propiedades CSS. Así los incrementaremos o decrementaremos, según vayamos moviendo el slider, aplicarán a ciertos valores de las hojas de estilo.

En nuestro caso lo que vamos a hacer es modificar el tamaño del texto (font-size) y el redonde de las esquinas (border-radiux).

Lo primero será crear la página web, la cual contendrá una capa con un texto dentro.

 
<div id="micapa">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus venenatis est sit amet nulla imperdiet vestibulum...</div>
 

Y debajo el slider en HTML5:

<label for="mislider">Redondea los bordes:</label>
<input id="mislider" type="range" min=0 max=20 value="6">

Ahora vamos a empezar a crear el código de manejo. Para ello vamos a controlar el evento onchange del slider.

barra.addEventListener("change",function(ev){
...
},true);

El código de este manejador será sencillo ya que lo que hará será modificar una propiedad CSS. Bueno, en realidad, dos. Así que vamos a ver dos formas de modificar las propiedades CSS.

La primera forma será modificando el atributo de un objeto. Es decir, el borde de un estilo está representado por el campo .borderRadius. Así que solo tendremos que asignarle un valor.

var barra = document.getElementById("mislider");
resultado = barra.value;
fuente = 2;
var capa = document.getElementById("micapa");
var tamanio = fuente*resultado+"px";
capa.style.borderRadius = tamanio;

Si miramos el código vemos que lo primero que hacemos es coger el valor de la barra mediante el atributo value. Este valor lo vamos a multiplicar por una base y se lo aplicamos al estilo.

La segunda forma es mediante el método .setAttribute(). En este caso lo que hacemos es pasarle el nombre del atributo a modificar "style" y la propiedad CSS que queremos modificar.

var barra = document.getElementById("mislider");
var fuente = 2;
resultado = barra.value;
var capa = document.getElementById("micapa");
var tamanio = fuente*resultado+"px";
capa.setAttribute("style","font-size:"+tamanio);

Todo nuestro código quedará de la siguiente forma:

var barra = document.getElementById("mislider");
var fuente = 2;
barra.addEventListener("change",function(ev){
	resultado = barra.value;
	var capa = document.getElementById("micapa");
	var tamanio = fuente*resultado+"px";
	capa.setAttribute("style","font-size:"+tamanio);
	capa.style.borderRadius = tamanio;
},true);

¿Qué te ha parecido este uso del slider de HTML5? ¿Se te ocurren otros?Similar Posts:

• Formato de texto por defecto con CSS
• Elemento rango en formularios HTML5
• Controlar volumen de vídeo HTML5 con un Slider
• Cambiar el contenido de una capa con JavaScript
• Cambiar estilos dinámicamente

Una de las cosas que no está todavía soportada por los navegadores web respecto al HTML5 son los menús contextuales. A día de hoy solo Firefox 8 y superiores dan soporte al menú contextual en HTML5.

Pero, ¿qué es un menú contextual? Un menú contextual es aquel menú asociado a una zona de la página y el cual tenemos disponible mediante el botón derecho del ratón.

Lo primero de todo será saber cómo se define un menú contextual. Para ello vamos a necesitar el elemento menú.

 
<menu id="colorMenu">...</menu>
 

Lo importante en el caso de estar creando un menú contextual es que el tipo del menú es "context". Otros valores son "toolbar" o "list".

Lo siguiente que haremos será definir los diferentes items o elementos que tendrá el menú. En este caso utilizamos el elemento menuitem para dar de alta cada uno de ellos.

 
<menu type="context" id="colorMenu">
<menuitem label="Rojo" id="rojo" icon="rojo.png"/></menuitem>
<menuitem label="Verde" id="verde" icon="verde.png"/></menuitem>
<menuitem label="Azul" id="azul" icon="azul.png"/></menuitem>
</menu>
 

Vemos que cada menuitem lleva asociado un atributo label, que será el texto que aparezca en la opción del menú, un id y un icono, el cual definimos mediante el atributo icon. Ya solo nos quedará decidir dónde se va a lanzar el menú. Sobre que parte de la página se podrá ver este menú contextual en HTML5. Para ello utilizamos el atributo general contextmenu, al cual deberemos de pasar el ID del menú que acabamos de crear. Que queremos aplicar el menú sobre una sección de la página escribiremos:

 
<section contextmenu="colorMenu" id="miseccion">
</section>
 

Que lo queremos aplicar sobre un campo de input, pues escribirmos lo siguiente:

<label for="color">Color:</label>
<input id="color" type="text" contextmenu="colorMenu">
 

Ya solo nos quedará pulsar con el botón derecho sobre la zona del menú contextual para ver el efecto.

Sobre los menús contextuales podemos manejar los eventos como sobre cualquier otro elemento de la página. Así podemos añadir el siguiente código en Javascript para controlar el click sobre las opciones del menú contextual.

var campo = document.getElementById("color");
var color = document.getElementById("colorMenu");
color.addEventListener("click",function(ev){
	campo.value = ev.target.label;
},true);

Similar Posts:

• Cambiar estilos dinámicamente
• Seleccionar el texto de un campo
• Hacer foco en un campo de la página usando JavaScript
• DataList en HTML5
• Activar el corrector ortográfico con HTML5

El canvas es un elemento que aparece nuevo en HTML5 y que nos permitirá la gestión de gráficos. Así podremos dibujar gráficos, crear foto composiciones, realizar animaciones,...

Para crear un canvas en HTML5 tenemos que utilizar el elemento CANVAS.

<canvas>
  Contenido alternativo
</canvas>

A un elemento CANVAS podemos darle un alto y ancho mediante los atributos height y width respectivamente. Así como darle un identificador mediante el atributo id.

<canvas height="300px" width="300px" id="micanvas"></canvas>

En el caso de que no indiquemos las dimesiones, estas serán de 300x150.

Una vez que tenemos nuestro "lienzo" vamos a dibujar algún gráfico. Para ello utilizaremos el lenguaje Javascript. Así lo primero que haremos será obtener la referencia sobre el CANVAS mediante un getElementById().

var canvas = document.getElementById("micanvas");

Dentro de un CANVAS podemos volcar varios contextos. Lo que son conocidos como contextos de renderizado. Así podremos tener contextos 2D y 3D. Estos últimos todavía en fase experimental. El método .getContext() sobre el CANVAS nos permitirá crear un nuevo contexto.

var canvas = document.getElementById("micanvas");
var ctx = canvas.getContext("2d");

Ahora ya pasaremos a dibujar gráficos. Así, con el manejo de una propiedad: .fillStyle y un método .fillRect() podemos crear rectángulos de colores. En el caso de .fillStyle recibe como parámetro un color definido en formato RGB y en el caso de .fillRect() las coordenadas de los vertices superior izquierdo, así como el alto y ancho.

Así nos quedará el código que insertará gráficos al crear nuestro primer canvas con HTML5.

var canvas = document.getElementById("micanvas");
var ctx = canvas.getContext("2d");
 
ctx.fillStyle = "rgb(255,0,0)";
ctx.fillRect(20,20,100,100);
 
ctx.fillStyle = "rgb(0,255,0)";
ctx.fillRect(60,60,140,140);
 
ctx.fillStyle = "rgb(0,0,255)";
ctx.fillRect(100,100,180,180);

Similar Posts:

• document.getElementById
• Modernizr y las capacidades HTML5 y CSS3
• Parar la descarga de un vídeo en HTML5
• Dibujar una elipse en SVG
• Cambiar el tamaño de la imagen de forma dinamica

Seguimos con el análisis del manejo de vídeos en HTML5, así como con el manejo del elemento DOM HTMLMediaElement. En este caso vamos a ver como podemos ir viendo el tiempo visualizado del vídeo en HTML5. Es decir, según vaya avanzando la visualización del vídeo, calcular los segundos que hayan transcurrido de la visualización.

Lo primero será poner el vídeo en nuestra página web.

<video id="mivideo" controls>
  <source src="http://easyhtml5video.com/images/happyfit2.ogv" type="video/ogg"></source>
  Tu navegador no soporta el elemento <code>video</code>
</video>

Cuándo el usuario pulse al play se irán sucediendo una serie de eventos. Uno de los eventos importantes es timeupdate. Dicho evento se envía progresivamente según avanza la visualización del vídeo. Así que tendremos que crear un listener sobre dicho evento en el vídeo.

 var v = document.getElementById("mivideo");
 v.addEventListener("timeupdate",function(ev){
  ...
 },true);

Cuándo se ejecute el método asociado al listener deberemos de acceder al atributo .currentTime del HTMLMediaElement, ya que este atributo es el que contiene el tiempo transcurrido del vídeo. Este tiempo será en segundos.

Lo que nosotros hacemos es volcar el contenido del atributo .currentTime sobre una capa. Este contenido se irá actualizando cada vez que se lance el evento timeupdate en el vídeo.

v.addEventListener("timeupdate",function(ev){
   document.getElementById("tiemposegundos").innerHTML = v.currentTime;
 },true);

Si queremos "dejarlo bonito" podemos convertir el tiempo en segundos en un formato reloj, igual que explicábamos en el artículo Convertir segundos en formato hora con Javascript.

Nosotros hemos metido este código dentro de una función que la hemos llamado hora, la cual recibe una cantidad de segundos, los cuales los devuelve en un formato hh:mm:ss.

 function hora(segundos){
  var d=new Date(segundos*1000);
  // Ajuste de las 23 horas
  var hora = (d.getHours()==0)?23:d.getHours()-1;
  var hora = (hora<9)?"0"+hora:hora;
  var minuto = (d.getMinutes()<9)?"0"+d.getMinutes():d.getMinutes();
  var segundo = (d.getSeconds()<9)?"0"+d.getSeconds():d.getSeconds();
  return hora+":"+minuto+":"+segundo;
 }

Ya solo nos quedará invocar a esta función desde el listener:

v.addEventListener("timeupdate",function(ev){
   document.getElementById("tiemposegundos").innerHTML = v.currentTime;
   document.getElementById("tiempo").innerHTML = hora(v.currentTime);
 },true);

Similar Posts:

• Tiempo total de un vídeo HTML5
• Convertir segundos en formato hora con Javascript
• Convertir una cadena a fecha en Javascript
• Elemento rango en formularios HTML5
• Activar el corrector ortográfico con HTML5

Antes de tener la especificación de HTML5 si queríamos realizar un autofoco a un campo, es decir, que al cargar una página el foco del cursor se pusiese en un campo de un formulario, teníamos que utilizar código Javascript.
Ahora, gracias a HTML5, podemos acometer esta labor de una forma sencilla.

Lo primero será definir el formulario. En nuestro caso tendrá dos simples campos de entrada de texto:

 
<form>
  <label for="nombre">¿Cómo te llamas?</label>
<input id="nombre" type="text" />
  <label for="edad">¿Cuántos años tienes?</label>
<input id="edad" type="text" />
</form>
 

Si lo que queremos es que el autofoco se realice sobre el campo INPUT nombre, le añadiremos el atributo autofocus. Quedándonos el siguiente código:

 
<form>
  <label for="nombre">¿Cómo te llamas?</label>
<input id="nombre" autofoucs type="text" />
  <label for="edad">¿Cuántos años tienes?</label>
<input id="edad" type="text" />
</form>
 

El atributo autofocus solo puede aplicarse sobre un único campo del formulario

Solo tenemos que tener cuidado de una cosa y es que la especificación HTML5 todavía no está terminada ni implementada en todos los navegadores web. Es por ello que puede ser que no funcione correctamente. Las versiones mínimas en las que funciona son Chrome 6, Firefox 4, Opera 11, Safari 5 e Internet Explorer 10. Quizás la versión del Internet Explorer sea la que más problemas pueda ocasionarte.

En este caso podemos recurrir a la implementación en Javascript. En este caso vamos a crear mediante Javascript un elemento INPUT ficiticio y vamos a comprobar si este tiene el atributo autofocus o no. En caso de que no lo tenga lanzaremos el código Javascript con el método .focus()

if(!("autofocus" in document.createElement("input")))
  document.getElementById("nombre").focus();

Similar Posts:

• Hacer foco en un campo de la página usando JavaScript
• Seleccionar texto al posicionarse en un campo
• Cambiar el valor de un radio group dinámicamente
• Seleccionar un texto solo si no ha cambiado
• PlaceHolder: Marcadores de posición en HTML5