Fundamentos de
HTML5
JUAN CARLOS CONDE RAMÍREZ
Qué es HTML
•El HyperText Markup Languaje, por sus siglas en inglés, es el lenguaje más básico para la
construcción y visualización de páginas Web.
•Su funcionamiento se basa en el uso de marcas o etiquetas, cada una con un fin específico. Estas
pueden definir:
◦ la estructura del contenido,
◦ la forma en que se visualiza y
◦ los enlaces a otros documentos HTML.
•Una de las principales características es que HTML puede ser interpretado directamente por
Estructura base HTML I
<html> <head>
<title>El primer documento HTML</title> </head>
<body>
<p>El lenguaje HTML es <strong>tan sencillo</strong>
que prácticamente se entiende sin estudiar el significado de sus etiquetas principales.</p> </body>
Evolución de HTML
1991 1994 1995 1996 1997 1998 2000 2004 2005 2008 HTML 1.0 Created by Tim Berners Lee HTML 2.0 W3C established Lanzamiento de Internet Explorer HTML comienza a ser soportdo en Tabllets Lanzamiento de CSS1 HTML 3.2 (WILBUR) HTML 4.0 (COUGAR) CSS2 HTML & XML forman XHTML Nace la WHATWG (Web Hypertext Application Technology Group) AJAX HTML5 Google Chrome <html> <table> .css 2014 EstándarQué es HTML5
•Es la quinta versión del estándar definido por la W3C que es el sucesor del HTML 4.0 (Cougar)
estandarizado en el 1998.
•Es soportado por todas las nuevas versiones de la mayoría de los navegadores, sin embargo con
versiones más antiguas podrían no mostrarse correctamente todos los elementos.
•Cuando un navegador no reconoce elementos HTML los manejan automáticamente como
Características de HTML5
•HTML5 cuenta con nuevos elementos a diferencia de sus predecesores:
1. Un nuevo Doctype
2. Elementos semánticos
3. Elementos de forma/control
4. Elementos gráficos
5. Elementos multimedia
6. Compatibilidad con nuevas APIs
Nuevo Doctype
•El Doctype debe ser la primera cosa que incluyas en tu página Web.
•Es básicamente un “mensaje” para el navegador Web que le indica en qué versión de HTML está
escrita la página a mostrar.
•Algunos ejemplos de Doctype son:
◦ HTML 4.0:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
◦ HTML 5: <!DOCTYPE html>
Elementos Semánticos (I)
•Elementos no-semánticos: Por ejemplo: <div>
◦ No nos dice nada del contenido que será incluido.
•Elementos semánticos: Por ejemplo <form> y <table> ◦ Claramente define el contenido
◦ Es fácil de reconocer para el navegador
◦ Mejora la SEO (Search Engine Optimization) de los motores de búsqueda.
◦ Permite una mejor experiencia para el usuario
HTML 4.0:
<div id=”header”> </div> <div id=”footer”> </div>
HTML5:
<header> </header> <footer> </footer>
Elementos Semánticos (II)
•HTML5 contiene otros elementos semánticos que permiten escribir páginas Web de manera
Elementos Semánticos (III)
Elemento Función
<header> Esta sección contiene típicamente el nombre del sitio, un logo y/o un menú de navegación. <nav> Esta etiqueta se usa para identificar una barra de navegación que contiene hipervínculos de
navegación.
<section> Esta etiqueta define una sección en la página Web.
<article> Esta etiqueta define un artículo en la página Web, es decir, una pieza autónoma eindependiente de contenido. Es útil para publicaciones de blogs, foros, artículos de periódicos, etc.
<aside> Esta etiqueta puede ser usada para crear barras laterales en una página Web.
<footer> Esta etiqueta es usada al fondo de la página. Normalmente incluye el nombre del autor e información de copyright, así como información de contacto y/o hipervínculos de navegación.
Elementos de Control/Formulario (I)
•Nuevo ELEMENTO de formulario:
◦ <datalist> especifica una lista de opciones predefinidas para un elemento <input> de un formulario.
<form action="myWebPage.php"> <input list="browsers"> <datalist id="browsers">
<option value="Chrome"> <option value="IE"> <option value="Firefox"> <option value="Opera"> <option value="Safari"> </datalist>
Elementos de Control/Formulario (II)
•Nuevo ELEMENTO de formulario:
◦ <output> es utilizada para representar el resultado de un cálculo.
<form action="action_page.asp“ oninput="x.value=parseInt(a.value)+parseInt(b.value)"> 0
<input type="range" id="a" name="a" value=“50”> 100 +
<input type="number" id="b" name="b" value=“50”> =
<output name="x" for="a b"></output> <br/><br/>
<input type="submit“> </form>
Elementos de Control/Formulario (III)
•Nuevo ELEMENTO de formulario:
◦ <keygen> es utilizada para proporcionar autenticación de usuarios de manera segura.
◦ Cuando el formulario es enviado se generan 2 llaves, 1 privada y 1 pública.
◦ La llave privada es almacenada localmente.
◦ La llave pública es enviada al servidor.
◦ La llave pública será utilizada para generar un certificado de cliente y así autenticar al usuario si se necesita.
<form action="action_page.php">
Username: <input type="text" name="user"> Encryption: <keygen name="security"> <input type="submit">
Elementos de Control/Formulario (III)
Elementos Gráficos (I)
<canvas>
Esta etiqueta es utilizada como un contenedor del lienzo
<svg>
Soportes para gráficos vectoriales escalables
<canvas id="myLine" width="250"
height=”250"
style="border:1px solid #ccc;"> </canvas> <script> var c = document.getElementById("myLine"); var ctx = c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke(); </script>
Basic Example - Line:
<svg width="100" height="100"> <circle cx="50" cy="50" r="40"
stroke="blue" stroke-width="4"
fill="red" /> </svg>
Elementos Gráficos (II)
Diferencias entre Canvas y SVG:
<svg>
● Resolución independiente ● Soporte para manejadores de
eventos
● Lento si el renderizado es complejo (mucho uso de DOM)
● Adecuado para aplicaciones con grandes áreas de representación, por ejemplo. mapas de Google
● No adecuado para juegos
<canvas>
● Es sumamente dependiente de la resolución
● No soporta manejadores de eventos ● Capacidades pobres de renderizado
de texto
● Bueno para juegos con graficos intensivos
● Puede guardar la imagen resultante como .jpg o .png
Elementos Multimedia (I)
•Ejemplos multimedia en páginas Web incluyen: imágenes, videos, audio y más.
•Formatos comunes de imágenes: .jpg, .png, .gif
•Formatos comunes de video: .avi, .mpg, .mov, .swf, .flv, .ogg, .mp4 •Formatos comunes de audio: .mp3, .wav, .ogg, .aac, .midi
Elementos Multimedia (II)
•Elemento <video>
◦ Para incrustar un video en una página Web se podría incluir con esta etiqueta.
◦ Antes de HTML5 no había algún estándar para incluir videos en una página Web.
◦ IE9+, Chrome, Firefox, Opera y Safari soportan esta etiqueta o elemento.
Elementos Multimedia (III)
•Actualmente son soportados tres FORMATOS de video:
◦ mp4, webm, ogg
Browser MP4 WebM Ogg
Internet Explorer Sí No No
Chrome Sí Sí Sí
Safari Sí No No
Firefox Sí Sí Sí
Elementos Multimedia (IV)
•Elemento <audio>
◦ Para incrustar un audio en una página Web se podría incluir con esta etiqueta.
◦ Antes de HTML5 no había algún estándar para incluir audios en una página Web. Los archivos de audio sólo se podía reproducir con un plug-in como Flash.
◦ IE9+, Chrome, Firefox, Opera y Safari soportan esta etiqueta o elemento.
Elementos Multimedia (V)
•Actualmente son soportados tres FORMATOS de audio:
◦ mp3, wav, ogg
Browser MP3 Wav Ogg
Internet Explorer Sí No No
Chrome Sí Sí Sí
Safari Sí Sí No
Firefox Sí Sí Sí
Nuevas API
•Interfaz de Programación de Aplicaciones o API (Application Program Interface)
•Puede decirse que son un conjunto de rutinas, protocolos y herramientas para construir
software y aplicaciones.
•Una compañía de software, p.e. Google, puede liberar su API (Google Maps) al público para que
Ejemplo: Geolocalización
•El API de Geolocalización es utilizado para determinar la ubicación de un usuario, siempre y
cuando el usuario lo haya aprobado por supuesto!
•IE9+, Chrome, Firefox, Safari, Opera soportan Geolocalización. Sin embargo, esta es mucho más
Arrastra y Suelta (Drag & Drop)
•En HTML5 cualquier elemento puede ser arrastrado.
•IE9+, Firefox, Chrome, Opera, Safari soportan el drag & drop.
Almacenamiento Local (II)
•Las aplicaciones Web están habilitadas para almacenar datos localmente en los navegadores de
los usuarios.
•Previo a HTML5, estos datos eran almacenados en cookies las cuales eran mucho menos seguras
y menores en tamaño.
•Con HTML5:
◦ El almacenamiento local tiene un límite de al menos 5MB.
◦ Es seguro tal que la información nunca es transferida al servidor.
◦ Esto no afecta el rendimiento del sitio Web.
◦ El almacenamiento local es soportado en IE8+, Chrome, Firefox, Opera, Safari.
Almacenamiento Local (III)
•El almacenamiento local de HTML5 proporciona 2 objetos para almacenar datos del lado del
cliente:
• window.localStorage– Almacena datos sin fecha de expiración.
• code.sessionStorage – Almacena datos por una sesión (los datos son perdidos cuando la pestaña se cierra)
Almacenamiento Local (IV)
•Dado que el objeto localStorage almacena datos sin fecha de expiración, los datos no serán
borrados cuando el navegador sea cerrado.
•¿Qué está sucediendo?
◦ Creamos un objeto con un par nombre/valor asignando nombre=“lastname” y valor=“Smith”.
◦ Se recupera el valor de “lastname” y se inserta en el elemento con id=“result”.
◦ localStorage.removeItem remueve el ítem “lastname” del almacenamiento local.
◦ Los pares nombre/valor siempre son almacenados como strings.
// Store
localStorage.setItem("lastname", "Smith"); // Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname"); localStorage.removeItem(“lastname”);
Almacenamiento Local (V)
•El siguiente código cuenta el número de veces que un usuario da clic en la sesión actual.
•El objeto sessionStorage es similar al objeto localStorage, sin embargo éste almacena los datos
por una sesión y son borrados cuando el usuario cierra la ventana del navegador.
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1; } else {
sessionStorage.clickcount = 1; }
document.getElementById("result").innerHTML = "You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";
Cache de Aplicación (I)
•Esta característica le permite a una aplicación Web ser accesible sin una conexión a Internet.
•Existen 3 ventajas para esto:
◦ Reduce la carga del servidor – el navegador sólo descarga recursos actualizados del servidor.
◦ Velocidad – los recursos almacenados en cache se cargan más rápidamente.
◦ Navegación sin conexión – los usuarios pueden utilizar la aplicación sin conexión
•IE 10, Chrome, Firefox, Opera y Safari soportan la cache de aplicación.
<!DOCTYPE HTML>
<html manifest="demo.appcache"> <body>
The content of the document...
Todas las páginas con el atributo manifest especificado serán cacheadas cuando el usuario las visita. La extensión de archivo para el manifiesto es
Cache de Aplicación (II)
•El archivo de manifiesto es un archivo de texto simple que le dice al navegador qué almacenar
en cache.
•Este tiene 3 secciones:
1. Cache Manifest – los archivos que aparecen en esta sección se almacenarán en caché después de descargarse por primera vez.
2. Network – estos archivos requieren una conexión al servidor, y nunca se almacenarán en cache.
3. Fallback – los archivos de esta sección especifican las páginas de respaldo si una página es inaccesible.
Cache de Aplicación (III)
•Una vez que una aplicación Web es almacenada en cache, esta se mantiene en cache hasta que
sucede algo de lo siguiente:
◦ El archivo manifiesto es modificado.
◦ El usuario limpia la memoria cache del navegador.
◦ La cache de la aplicación es modificada usando programación.
• IMPORTANTE: Ten cuidado con lo que se almacena en cache. Una vez que un archivo se almacena en cache, el explorador continuará mostrando la versión en cache, incluso si el archivo cambia en el servidor. Además, los navegadores pueden tener diferentes límites de tamaño para los datos almacenados en caché.
Soporte SSE (I)
•Soporte para Eventos Enviados por el Servidor (Server-Sent Events).
•Ocurre cuando una página Web obtiene actualizaciones automáticamente desde un servidor,
p.e. actualizaciones de Twitter, Facebook o noticias.
Soporte SSE (II)
•¿Qué está sucediendo?
◦ Creamos un nuevo objeto EventSource especificando la URL de la página que envía actualizaciones (p.e. demo_sse.php)
◦ Cada que una actualización es recibida, ocurre un evento onmessage.
◦ Cuando un evento onmessage ocurre, los datos recibidos se ponen en el elemento con id=“result”.
El objeto EventSource es utilizado para recibir notificaciones SSE:
var source = new EventSource("demo_sse.php"); source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>"; };
Soporte SSE (II)
•Para que el código funcione, necesita un servidor capaz de enviar actualizaciones de datos
(PHP o ASP).
•¿Qué está sucediendo?
• Se configura el encabezado Content-Type como “text/event-stream”
• Se especifica que la página no será almacenada en cache
• Se obtienen los datos a enviar
• Se vacían los datos de salida de vuelta a la página Código en PHP:
<?php
header('Content-Type: text/event-stream'); header('Cache-Control: no-cache');
$time = date('r');
echo "data: The server time is: {$time}\n\n"; flush(); ?> Código in ASP: <% Response.ContentType = "text/event-stream" Response.Expires = -1
Response.Write("data: The server time is: " & now()) Response.Flush()
