Skip to main content

Categoría: dev

Tipos de entrada en HTML5 para input

Joseba Garai Deja un comentario

Uno de los retos a resolver cuando se crean formularios en HTML es validar los datos que el usuario introduce. Hasta ahora esto implicaba que para cada proyecto hay que establecer algún procedimiento para comprobar la validez de estos datos ya sea en JavaScript o con el lenguaje que se ejecuta en el servidor.

Conscientes de este problema, en HTML5 se han incluido nuevos tipos de datos que ya en el navegador del usuario, se hace la validación de los campos del formulario antes del envío.

  • email
  • url
  • números
  • rangos
  • fechas
  • búsquedas
  • color

Como pasa con otros elementos del estándar HTML5 los distintos fabricantes de navegadores añaden el soporte para las nuevas características de forma desigual. En este caso Opera y Chrome son los que mejor soporte dan y Safari e IE los que peor.

Datos locales en HTML5

Joseba Garai Deja un comentario

Hasta ahora podíamos guardar información en el navegador del usuario mediante el uso de las cookies. Pero esto no es siempre una solución adecuada para todo tipo de escenario donde se necesita almacenar información del usuario.

HTML5 dispone de dos objetos para almacenar datos en el navegador. Estos datos no se transmiten en cada requerimiento del servidor, tan solo cuando se piden. Los dos objetos son:

  • localStorage – Guarda los datos sin límite. Pueden estar disponibles un día, un semana o un año.
  • sessionStorage – Guarda los datos mientras está viva la sesión. Los datos se borran cuando se cierra el navegador.

Los datos están separados de manera que una web solo puede acceder a los datos guardados por ella. Para acceder y editar estos objetos se usa JavaScript.

HTML5

Etiqueta canvas en HTML5

Joseba Garai Deja un comentario

Entre las nuevas características de HTML5 una de las consideradas más poderosas está el elemento canvas. Con el elemento canvas simplemente indicamos una región rectangular donde podremos después dibujar usando JavaScript. Desde JavaScript tendremos el control de cada píxel del área rectangular y podremos dibujar líneas, rectángulos, círculos, escribir letras y añadir imágenes.

Para usar canvas tan solo debemos emplear un código en nuestra web como el siguiente:

El contenido entre <canvas> y </canvas> se mostrará en los navegadores que no tengan soporte de canvas. Es importante usar el atributo id para poder acceder a la región canvas desde JavaScript.

Los atributos específicos son:

height pixeles Especifica la altura de la región canvas
width pixeles Especifica la anchura de la región canvas

HTML5