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:

• Modernizr y las capacidades HTML5 y CSS3
• document.getElementById
• Parar la descarga de un vídeo en HTML5
• Dibujar una elipse en SVG
• Crear elementos HTML con JavaScript

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
• Crear eventos con JavaScript

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

Lo primero que haremos será poner en nuestra página los elementos HTML5 que necesitemos, ya que el código Javascript que incorporemos será siempre no intrusivo.

El vídeo, mediante el elemento VIDEO será el siguiente:

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

Y el slider será mediante un elemento input y su tipo "range"

<label for="volumen">Volumen: </label>
<input type="range" min="0" max="1" value="1" step="0.1" id="volumen">
<input type="checkbox" id="mute"><label for="mute">Mute</label>

Además hemos incorporado un checkbox para simular el mute. Es decir, para quitar el sonido al vídeo.

Lo primero, las referencias a los elementos:

var mute = document.getElementById("mute");
var barra = document.getElementById("volumen");

Sobre el tema de controlar el volumen del vídeo deberemos de saber que la propiedad que gestiona el volumen de un vídeo en HTML5 es .volume del elemento HTMLMediaElement. Y que los valores que puede tomar dicha propiedad van desde el 0.0 hasta el 1.0 con saltos de 0.1. Algo importante ya que como vemos son los valores que hemos dado a las propiedades min, max y step del slider.

Así la codificación ante un cambio del slider, es decir, ante que se produzca un evento change, será el asignar el valor del slider al volumen del vídeo.

barra.addEventListener("change",function(ev){
  var v = document.getElementById("mivideo");
  v.volume = ev.target.value;
  mute.checked=false;
},true);

Vemos en el código que el .value del slider se lo asignamos a la propiedad .volume del vídeo.

Utilizamos .addEventListener para adjuntar la gestión de un evento a un elemento en concreto.

Además hemos añadido el manejo del mute. es decir, si cambiamos el slider (movemos el volumen) se desactivará la casilla del mute.

Ahora vamos con el mute. Para esto gestionamos el evento change del checkbox. Cada vez que cambie el checkbox veremos que hacer. Pero antes de esto nos vamos a crear una variable que nos permite mantener la información del volumen. Esta nos servirá para que cuando desactivemos el mute, recuperemos la última posición del volumen. A esta variable la hemos llamado oldvolume.

var oldvolume = 1;

Inicializada a 1, al igual que sucede con el volumen.
Ahora solo tenemos que jugar con el valor del checkbox. Su atributo .checked nos indicará si este está activo o no.

mute.addEventListener("change",function(ev){
	var v = document.getElementById("mivideo");
	if (ev.target.checked) {
		oldvolume = v.volume;
		v.volume = 0;
		barra.value = 0;
	} else {
		v.volume = oldvolume;
		barra.value = oldvolume;
	}
},true);

La lógica, la siguiente. Si está activado hay que apagar el volumen (atributo volume a 0 y el slider con un valor de 0), pero guardándonos la posición actual del volumen en la variable oldvolume.

Que el checkbox está desactivado, pues reponemos el valor de la variable oldvolume tanto al slider, como al atributo .volume del vídeo.

Con todo esto ya podemos controlar el volumen de vídeo HTML5 con un Slider.Similar Posts:

• Contar checkbox activos con JavaScript
• Elemento rango en formularios HTML5
• Cambios en un combo con jQuery
• Tiempo total de un vídeo HTML5
• Cambiar el valor de un radio group dinámicamente

Para poder consultar el tiempo total de un vídeo utilizaremos el atributo duration del HTMLMediaElement.

var v = document.getElementById("mivideo");
document.write(v.duration);

Ahora, que cuando ejecutemos este código nos llevaremos una sorpresa y es que, el atributo duration, no nos devolverá ningún valor. Esto es debido a que la información del tiempo total de un vídeo no es cargada hasta que tenemos la información de los metadatos del vídeo.

Y, ¿cuándo tenemos los metadatos del vídeo? Para ello tenemos el evento loadeddata. Así que tendremos que poner un listener sobre dicho evento en el elemento video. En este caso utilizaremos el método .addEventListener() para llevar a cabo dicha tarea.

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

Será dentro del listener dónde codifiquemos el acceso al campo duration del HTMLMediaElement para obtener el tiempo total de un vídeo HTML5.

var v = document.getElementById("mivideo");
v.addEventListener("loadeddata",function(ev){
   document.getElementById("tiempototal").innerHTML = v.duration;
},true);

Tiempototal es una capa de nuestra página HTML5 sobre la que volcaremos el resultado.Similar Posts:

• Tiempo visualizado del vídeo en HTML5
• Elemento rango en formularios HTML5
• Controlar volumen de vídeo HTML5 con un Slider
• Parar la descarga de un vídeo en HTML5
• Controlar un error de carga de un vídeo en HTML5

Pero, a qué tipos del elemento INPUT le podemos aplicar un DataList en HTML5. Pues podemos aplicarlo al tipo text o aun tipo URL o al tipo range. Es decir, sobre una caja de text o sobre un slider. En el primer caso el DataList serán las opciones propuestas y predefinidas que se le darán al usuario y en el caso del slider serán diferentes puntos dentro del slider.

Pero lo primero será definir la lista de opciones del DataList. El elemento es datalist.

<datalist id="lista">
<option value="0">
<option value="2">
<option value="4">
<option value="6">
<option value="8">
<option value="10">
</datalist>

Como vemos, la lista tiene un identificador denotado por el atributo id y una lista de opciones. Cada una de las opciones de la lista la definimos mediante un elemento option.

Si queremos podemos dar a los valores de la lista un texto alternativo. Para ello utilizaremos el atributo label.

<datalist id="listaurls">
<option value="http://www.ayudaenlaweb.com" label="Ayuda en la Web">
<option value="http://lineadecodigo.com" label="Línea de Código">
<option value="http://www.dudasprogramacion.com" label="Dudas de Programación">
</datalist>

Como podemos comprobar la estructura de la lista es realmente sencilla. El siguiente paso será el asociar la lista al elemento INPUT. Para ello utilizamos el atributo list del INPUT, el cual deberá de hacer referencia al id de la lista.

Así si creamos un input que haga referencia a la primera lista sería:

 
<input type="range" min="0" max="10" value="3" step="1" id="mislider" list="lista">

y si creamos una referencia desde un tipo URL a la segunda lista sería:

 
<input type="url" id="misurl" list="listaurls" size="100">

Ya solo nos queda ver el efecto que produce el elemento DataList y su comportamiento de opciones por defecto en nuestro navegador. Eso sí, de momento solo el navegador web Opera da soporte a los DataList de HTML5.
Similar Posts:

• Elemento rango en formularios HTML5
• Controlar volumen de vídeo HTML5 con un Slider
• Listar opciones seleccionadas de un combo con jQuery
• Cargar un vídeo de diferentes formatos con HTML5
• PlaceHolder: Marcadores de posición en HTML5

Para crear un elemento de tipo rango en formularios HTML5 tenemos que crear un elemento input de tipo range de la siguiente forma:

 
<input type="range"/>

Sobre este elemento podemos definir varios valores. En primer lugar el valor máximo y mínimo del rango. Esto lo haremos mediante los atributos min y max.

 
<input type="range" min="0" max="10"/>

De igual manera podemos definir los valores del incremento, es decir, cada vez que desplazamos el puntero en cuanto se incrementará o decrementará el valor del elemento. Este atributo es step. Así si queremos que se incremente de uno en uno definiremos el elemento rango de la siguiente forma:

 
<input type="range" min="0" max="10" value="3" step="1" id="mislider">

Los elementos de tipo rango están disponibles vía Javascript. Es decir, podemos acceder a su modelo DOM y consultar el valor que tiene el rango en cualquier momento. Bastará solo con consultar el valor del atributo value.

Por ejemplo, si queremos calcular el valor que tiene el rango cada vez que se modifique podemos crear un listener sobre el evento onchange de dicho rango con el método addEventListener.

var barra = document.getElementById("mislider");
barra.addEventListener("change",function(ev){
  var resultado = document.getElementById("valor");
  resultado.innerHTML = ev.currentTarget.value;
},true);

Vemos que cuando utilizamos el método addEventListener el objeto evento que se le pasa a la función lleva la referencia al elemento que generó el evento en el campo currentTarget.

Solo hay que tener en cuenta una cosa al utilizar el elemento range en formularios HTML5 y esto es el soporte de los navegadores, ya que todavía todos no lo dan.Similar Posts:

• Controlar volumen de vídeo HTML5 con un Slider
• Tiempo total de un vídeo HTML5
• Crear eventos con JavaScript
• Controlar un error de carga de un vídeo en HTML5
• Tiempo visualizado del vídeo en HTML5

Realmente lo que estamos haciendo es restar dos fechas en Javascript, la que nos da el usuario contra la fecha del sistema.

Para obtener la fecha del sistema simplemente instanciaremos un objeto Date.

fecha = new Date();

Ahora cogeremos la fecha del usuario. Para ello ya vimos en el ejemplo de cómo convertir una cadena de texto en una fecha los pasos que teníamos que seguir:

var boton = document.getElementById("calcular");
boton.addEventListener("click",function(ev){
 
  dia = document.getElementById("dia").value;
  mes = document.getElementById("mes").value;
  annio = document.getElementById("annio").value;
 
  fecha_texto = annio+"-"+mes+"-"+dia;
 
  ms = Date.parse(fecha_texto);
  fecha2 = new Date(ms);
 
},false);

Ahora toca la resta, para ejecutar la resta convertimos previamente la dos fechas en milisegundos con el método .getTime(). A este valor lo dividimos por los milisegundos que representan un día (1000 ms * 60 segundos * 60 minutos * 24 horas).

Por último realizaremos un redondeo apoyándonos en el método .ceil() del objeto Math de Javascript.

one_day=1000*60*60*24;
diferencia = Math.ceil((fecha.getTime()-fecha2.getTime())/(one_day));
texto = (diferencia>0)?"Hace " + diferencia:"Dentro de " + (diferencia*-1);

Utilizaremos el operador ternario para adecentar nuestra respuesta y diferenciar si la fecha paso (resultado positivo) o todavía no hemos llegado (resultado negativo).
Ya tenemos nuestra comparación con la fecha del sistema en Javascript.Similar Posts:

• Convertir una cadena a fecha en Javascript
• Obtener fecha de modificación de un fichero con Java
• Obtener la fecha en un JSP
• Convertir segundos en formato hora con Javascript
• Obtener fecha actual con Java

Y es que en el fondo, sí, podemos escribir la siguiente línea de código:

var fecha = new Date("Sat, 4 Feb 2012");

Pero, ¿qué podemos utilizar como cadena de texto? Lo que podemos utilizar es todo aquello que podamos analizar mediante el método .parse() del objeto Date.

Date.parse(cadena);

Y si miramos qué soporta el método .parse() veremos que el texto que le pasemos tiene que estar en formato RFC822 o ISO 8601. Así el método nos devolverá los milisegundos desde el 1 de enero de 1970.

Si no te apetece leerte que dicen los estándares RFC822 y ISO 8601 te lo resumiremos en que tienen que ser fechas en formato:

dia_semana, dia hora
yyyy-mm-dd

Y formatos similares. Así el 4 de febrero del 2012 podría declararse como:

Sat 4 Feb 2012 12:20:34
2012-02-04

Nosotros, para evitar formateos adicionales vamos a montar la fecha por nuestra cuenta, así que utilizaremos un formulario para pedirle al usuario los datos. El formulario será el siguiente:

 
<form>
<label for="dia">
<input type="text" id="dia" size="2" value="01"></label>/
<label for="mes">
<input type="text" id="mes" size="2" value="02"></label>/
<label for="annio">
<input type="text" id="annio" size="4" value="2012"></label><br/>
<button id="calcular">Calcular Fecha</button>
</form>
 

Y ahora, controlando el evento de pulsar sobre el botón, es decir, utilizando un addEventListener()

var boton = document.getElementById("calcular");
boton.addEventListener("click",function(ev){
  ...
},false);

Vamos a componer nuestra fecha. Obtenemos los valores del formulario y componemos la fecha en formato yyyy-mm-dd

dia = document.getElementById("dia").value;
mes = document.getElementById("mes").value;
annio = document.getElementById("annio").value;
fecha_texto = annio+"-"+mes+"-"+dia;

Lo siguiente será parsearla y crear una fecha (aunque podríamos haber hecho solo lo segundo)

ms = Date.parse(fecha_texto);
fecha = new Date(ms);

Por último volcamos el contenido del Date a un campo y bloqueamos que se lance el evento del botón con .preventDefault() para poder ver el resultado y no enviar el formulario.

document.getElementById("fecha").innerHTML = fecha;
ev.preventDefault();

El código entero del manejador quedaría de la siguiente forma:

var boton = document.getElementById("calcular");
boton.addEventListener("click",function(ev){
 
	dia = document.getElementById("dia").value;
	mes = document.getElementById("mes").value;
	annio = document.getElementById("annio").value;
 
	fecha_texto = annio+"-"+mes+"-"+dia;
 
	ms = Date.parse(fecha_texto);
	fecha = new Date(ms);
 
	document.getElementById("fecha").innerHTML = fecha;
	ev.preventDefault();
 
},false);

Similar Posts:

• Comparar con la fecha del sistema en Javascript
• Fecha en castellano con VBScript
• Tiempo visualizado del vídeo en HTML5
• Obtener fecha de modificación de un fichero con Java
• Evitar que se ejecute un evento con jQuery

Lo primero será guardar en una variable los segundos:

segundos = 1341;

Ahora instanciaremos un objeto de Tipo Date. La inicialización del objeto Date es mediante milisegundos, por lo que necesitaremos multiplicar por 1000 nuestro valor en segundos.

var d=new Date(segundos*1000);

Ahora solo tenemos que acceder a los métodos del objeto Date. Al .getHours(), getMinutes() y getSeconds(). Estos nos dará los valores en formato hora.

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();

De este código hay que fijarse en dos cosas. La primera es que el valor de la hora retornará una hora más de la que realmente es. Es por ello que hacemos la corrección.

var hora = (d.getHours()==0)?23:d.getHours()-1;

Y lo segundo en lo que debemos de fijarnos es en el uso del operador ternario para poner los minutos, segundos y horas en un formato de dos dígitos. Y es que los valores inferiores al 10 siempre vendrán solos. Es decir, 1, 2, 3, 4,... cuando nosotros queremos poner 01, 02, 03, 04,...

Solo quedará volcar el contenido y añadir los dos puntos:

document.write(hora+":"+minuto+":"+segundo);

Ya hemos visto que con el uso del objeto Date hemos conseguido convertir segundos en formato hora con Javascript.Similar Posts:

• Reloj en JavaScript
• Reloj Javascript en una capa
• Reloj con la hora del servidor
• Tiempo visualizado del vídeo en HTML5
• Obtener fecha de modificación de un fichero con Java