Fundamentos de HTML5

HTML
HTML es el lenguaje que se emplea para el desarrollo de páginas de
internet. Este lenguaje está constituido de elementos que el navegador
interpreta y las despliega en la pantalla de acuerdo a su objetivo
 HTML 5
Hay muchas mejoras y cosas nuevas que nos pueden sorprender por
ejemplo el tema de formularios, la forma de estructuración entre otros,
entre los que se destacan:

• Las nuevas características debe basarse en HTML, CSS, DOM y JavaScript.

• Reducir la necesidad de plugins externos (como Flash).

• Mejor manejo de errores.

• Más marcado para reemplazar secuencias de comandos.

• HTML5 debe ser independiente del dispositivo.

• El proceso de desarrollo debe ser visible para el público.

ESTRUCTURA HTML 5
 Contenido editable HTML 5

HTML5 abre una vía nueva para poder interactuar con los usuarios que
visiten el sitio web. Se trata de el nuevo elemento contentEditable, que
nos da la posibilidad de crear partes en un documento HTML5 que sea
completamente editable
 Fomulario en HTML5

Elementos del tipo INPUT:

<input type=text>: especifica que el usuario debe de llenar el campo con texto
<input type=email>: especifica que el usuario debe de llenar el campo con un email valido
<input type=url>: especifica que el usuario debe de llenar el campo con url
<input type=color>: especifica que el usuario debe de llenar el campo con un color
<input type=date>: especifica que el usuario debe de llenar el campo con una fecha
<input type=month>: especifica que el usuario debe de llenar el campo con unos de los meses
 Elemento Autofocus

En HTML5 disponemos una propiedad en los controles de los formularios que nos permiten
indicar cual control tendrá foco (es decir que aparecerá el cursor en su interior)
Anteriormente esta actividad se la realizaba mediante Javascript, pero como vemos varios
tipos de problemas ahora se los puede resolver directamente con HTML.
 Elemento PlaceHolder

Normalmente cuando creamos un formulario previo a cada control disponemos un mensaje

indicando que dato debe cargar el usuario en el mismo, en algunas circunstancias dicha
información puede quedar no lo suficientemente clara. Mediante la propiedad placeholder
podemos disponer más información directamente dentro del control generalmente con un
ejemplo de dato a ingresar.
 Expresiones Regulares

Una expresión regular es una técnica que nos permite identificar si un string coincide con un
patrón determinado. Un ejemplo clásico es determinar si un email está correctamente
estructurado (sabemos que comienza con uno o más caracteres alfanuméricos, luego el
carácter @ seguido de uno o más caracteres alfanuméricos, luego el carácter "." y finalmente
otros caracteres alfabéticos)
 Expresiones Regulares

Una expresión regular que permita validar el ingreso de un numero entero con 5 dígitos
 Validación Email

HTML5 trae una nueva serie de controles de formulario que complementan los existentes en
HTML. Para utilizar estos nuevos controles hay que definir el tipo en la propiedad type del
control input.
 Elemento DataList

Este elemento proporcionar un “autocompletar” en funciones de los <input>. Es decir

cuando el usuario se situé dentro del campo y comience a escribir este campo va a
desplegar una cantidad de opciones predefinidas anteriormente en su configuración.
Ejemplo:
 Fomulario en HTML5

Elemento required
El atributo required o requerido en un elemento se establecerá en un <input>,
y automáticamente hace que el usuario se vea obligado a llenar el campo para
continuar, es decir el navegador no permitirá que se envié la forma sin que el
input con este atributo este vacío.
 Elemento Output
Elemento Output
• El elemento <output> es para mostrar los resultados de un cálculo o de otro
tipo con la escritura. Por ejemplo aquí se realiza un cálculo del atributo step
que nos genera un resultado y el del atributo range que nos presenta un
slider que podemos graduar para dar un resultado. Y el resultado total lo
sacamos utilizando el elemento <output>
 Operaciones con HTML5
– La etiqueta HTML5 output permite realizar operaciones matemáticas en los
formularios, sin necesidad de utilizar JavaScript
 WEB STORAGE (localStorage y
sessionStorage)
• Para almacenar datos en el navegador empleando HTML5 se
recomienda la funcionalidad que provee el objeto localStorage.

• El objeto localStorage nos permite almacenar datos que serán

recordados por el navegador para siempre, es decir no tienen una
fecha de caducidad.

• La cantidad de información que podemos almacenar es muy superior a

la permitida con las cookies, el localStorage permite almacenar por lo
menos 5 Mb.

• La información que se almacena en el localStorage a diferencia de las

cookies no se envía al servidor cada vez que se solicita una página.
Necesariamente debemos utilizar Javascript para almacenar y
recuperar datos.
WEB STORAGE (localStorage y
sessionStorage)
 Geolocalización

• La Geolocalización es una característica de HTML5 que nos permite acceder a

ubicación geográfica del usuario del sitio web con una precisión absoluta en el
caso que el dispositivo que utilice tenga GPS.

• El navegador administra la geolocalización mediante un objeto llamado

geolocation que es un atributo del objeto navigator.

• El objeto geolocation cuenta con un método llamado getCurrentPosition que le

enviamos el nombre de la función que se llamará cuando se obtenga la
posición.

• Como la geolocalización es una característica que puede invadir nuestra

privacidad (tengamos en cuenta que estamos informando al sitio web el lugar
exacto donde estamos parados en ese momento) el navegador nos muestra un
diálogo para que aceptemos o no informar nuestra posición .
Geolocalización
Geolocalización 2
Geolocalización 2
 Streaming HTML5

Con HTML5 se puede trasmitir video y audio en vivo, sin la necesidad

de Flash, gracias WebRTC es posible acceder a la cámara y el micrófono de
nuestra computadora utilizando el navegador.

• Accedemos a la cámara con getUserMedia

• Pasamos la información de la cámara a una etiqueta video

• Mandamos las imágenes vía socket.io a un servidor

• En el server mandamos la imagen a la ws sockets conectadas.

• Las sockets colocan la imagen en el atributo src de una imagen y listo!

Streaming HTML5
Streaming HTML5
 Ejercicios en Clase

1. Implemente un formulario HTML5 utilizando todos los elementos vistos hasta el

momento

2. Con base en el concepto de expresiones regulares, valide un campo que permita

ingresar las placas de un vehículo ( Recuerde que las placas las conforman 3 letras y tres
números)

3. Implemente con HTML 5 , un formulario que haga operaciones de suma, resta,

multiplicación y división. Si es necesario agregue una función en JavaScript

4. Integre los ejercicios propuestos en un menu boostrap que sea del tipo responsive