Ejemplos de códigos HTML5
- Código HTML5 para reproducir audio sin la necesidad de plugins
Para video es algo similar.
<!DOCTYPE HTML>
<html LANG="es">
<head>
<meta charset="UTF-8">
<title>fuente de múltiples elementos</title>
</head>
<body>
<audio id="audioTestElem" autobuffer controls >
<source src="test.m4a">
<source src="test.ogg" type="audio/ogg; codecs=vorbis">
<source src="url">
no audio for you
</audio>
</body>
</html>
Ejemplo de WebWorker (Hilo de ejecución en paralelo)
Es necesario el uso de javascript.
Para el archivo Prueba.html
<!DOCTYPE HTML>
<html>
<head>
<title>Worker example: One-core computation</title>
</head>
<body>
<p>The highest prime number discovered so far is: <output id="result"></output></p>
<script>
var worker = new Worker('worker.js');
worker.onmessage = function (event) {
document.getElementById('result').textContent = event.data;
};
</script>
</body>
</html>
Para el archivo worker.js (fichero con la tarea del nuevo hilo de ejecución infinito)
var n = 1;
search: while (true) {
n += 1;
for (var i = 2; i <= Math.sqrt(n); i += 1)
if (n % i == 0)
continue search;
// found a prime!
postMessage(n);
}
- Ejemplo de Canvas 2D utilizando el API de dibujo
<!DOCTYPE HTML>
<html>
<head>
<title>HTML5 Canvas example</title>
<script>
function drawPicture(){
// Primero se recupera el objeto canvas a modificar
var canvas = document.getElementById('example');
// Luego se le indica la forma de trabajar 2D o 3D
var context = canvas.getContext('2d');
// Se comienza a dibujar en el lienzo utilizando objetos
// gráficos
context.fillStyle = "rgb(0,255,0)";
context.fillRect (25, 25, 100, 100);
context.fillStyle = "rgba(255,0,0, 0.6)";
context.beginPath();
context.arc(125,100,50,0,Math.PI*2,true);
context.fill();
context.fillStyle = "rgba(0,0,255,0.6)";
context.beginPath();
context.moveTo(125,100);
context.lineTo(175,50);
context.lineTo(225,150);
context.fill();
}
</script>
<style type="text/css">
canvas { border: 2px solid black; }
</style>
</head>
<body onload="drawPicture();">
<canvas id="example" width="260" height="200">
There is supposed to be an example drawing here, but it's not important.
</canvas>
</body>
</html>
- Ejemplo de un formulario con nuevos tipos de datos
Elimina muchas validaciones en Javascript. (La clave está en el atributo Type).
<!DOCTYPE HTML>
<html>
<body>
<form>
<input name="form_number" id="form_number" type="number" min="1" max="10" >
<input name="form_date" id="form_date" type="date">
<input name="form_month" id="form_month" type="month">
<input name="form_week" id="form_week" type="week">
<input name="form_time" id="form_time" type="time">
<input name="form_url" id="form_url" type="url" list="url_list">
<datalist id="url_list">
<option value="http://www.google.com" label="Google">
<option value="http://net.tutsplus.com" label="NetTuts+">
</datalist>
<input name="form_email" id="form_email" type="email" list="email_list" multiple>
<datalist id="email_list">
<option value="jane.doe@test.com" label="Jane Doe">
<option value="john.doe@test.com" label="John Doe">
</datalist>
<input name="form_telephone" id="form_telephone" type="tel">
<input name="form_color" id="form_color" type="color">
<label>
Attachments:
<input type="file" multiple name="att">
</label>
<input name="x" type="range" min="100" max="700" step="9.09090909" value="509.090909">
</form>
</body>
</html>
- Ejemplo de geoposicionamiento
<!DOCTYPE HTML>
<html>
<head>
<title> Geo Localizations </title>
</head>
<body>
<script language="javascript">
function obtener_localizacion() {
navigator.geolocation.getCurrentPosition(coordenadas);
}
function coordenadas(position) {
var latitud = position.coords.latitude;
var longitud = position.coords.longitude;
alert('Tus coordenadas son: ('+latitud+','+longitud+')');
}
</script>
<a href="javascript:obtener_localizacion();">Mostrar Posición</a>
</body>
</html>