7 Caracteristicas de HTML5 parte 2

HTM5 tiene muchas mas caracteristicas y funciones para hacer de nuestras paginas web mas interactivas, esta vez vamos a hablar de 12 caracteristicas mas que tiene el HTML5 y que claro nos pueden ayudar a hacer mejores sitios o apps web.

1. Elemento Datalist

El elemento Datalist es un Input que tiene una lista desplegable con los elementos de una lista y segun se va escribiendo te va sugueriendo el elemento que coincide con lo que estas escribiendo.

<input list="comida" id="mycomida" name="mycomida" />
<datalist id="comida">
  <option value="Tacos"></option>
  <option value="Hamburguesas"></option>
  <option value="Tortas"></option>
  <option value="Pizza"></option>
  <option value="Tostadas"></option>
</datalist>

2. Canvas

El canvas de HTML5 es un elemento que sirve para hacer graficos en 2d y 3d.

Se usa la etiqueta <canvas></canvas> y se usa javascript para manipular los graficos.

El siguiente ejemplo sirve para dibujar un circulo.

<canvas id="mycanvas"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>

3. Contenido Editable

Se incluyo en HTML5 la posibilidad de modificar el contenido para ello se puede usar el atributo contenteditable en casi cualquier elemento, lo que hara que el contenido de este elemento pueda ser modificado desde la vista.

Obviamente si se modifica el contenido este no queda guardado por lo que es necesario usar javascript y algun tipo de backend para guardar los datos.

<p contenteditable>Hola</p>
<div contenteditable>Hola Mundo</div>

4. LocalStorage

LocalStorage sirve para guardar datos en el navegador usando la notacion clave-valor se asigna una variable y su valor.

La duracion del LocalStorage es persistente por lo que va a durar hasta que se eliminen los datos del navegador o hasta que se reasigne el valor a nulo.

<script>
// Almacenar el valor
localStorage.setItem('mivariable', 'valor de la variable');

// Retornar el valor de la variable
alert(localStorage.getItem('mivariable'));
</script>

Se pueden guardar datos tipo entero, cadenas de texto, objetos, json y mas.

5. SessionStorage

El SessionStorage es muy similar al la funcion localStorage con la particularidad que los datos solo estan guardados durante la sesion, cuando se cierra el navegador se eliminan los datos.

<script>
// Almacenar el valor
sessionStorage.setItem('mivariable', 'valor de la variable');

// Retornar el valor de la variable
alert(sessionStorage.getItem('mivariable'));
</script>

6. Geolocalizacion

La geolocalizacion sirve para obtenerla ubicacion con coordenadas geograficas del dispositivo.

Este uso de las coordenadas se puede usar para la representacion en un mapa u otros usos.

<div id="demo"></div>
<script>
var x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude +
  "<br>Longitude: " + position.coords.longitude;
}
</script>

7. Creacion de SVG

Tambien podremos crear graficos SVG usando la notacion SVG de HTML5, se usa la etiqueta SVG.

El siguiente ejemplo sirve para dibujar un circulo.

<svg width="400" height="200">
    <circle cx="150" cy="100" r="50" style="fill:#900000; stroke:#000000; stroke-width:5;" />
</svg>