HTML5
¿Que es HTML5?
HTML5
TML5 es el nuevo estándar de HTML
La versión anterior HTML 4.01 apareció en
1999. El web ha cambiado mucho desde
entonces.
HTML5 todavía esta en desarrollo, pero
muchos browsers ya soportan algunas de sus
características.
Desarrollo de HTML5
Principios básicos de HTML5
● Basarse en HTML, CSS, DOM, y JavaScript
HTML5 es el resultado de la cooperación
entre el World Wide Web Consortium (W3C) y
el Web Hypertext Application Technology
Working Group (WHATWG).
● Reducir la necesidad de plugins
● Mejor manejo de errores
● Remplazar scripting con etiquetas
● Independiente del dispositivo de visualización
● Proceso de desarrollo transparente para el público
Nuevas características de HTML5
● Elemento Canvas para dibujar
● Elementos de video y audio
● Almacenamiento de datos “offline”
Estatus actual de HTML5
HTML5 no es todavía un estándar oficial y ningún
browser lo soporta completamente pero es en general
bien soportado por los principales navegadores: Firefox,
Safari, Chrome, Opera, Internet Explorer 9, ...
● Elementos asociados con el contenido: article,
Se puede detectar si el navegador utilizado tiene soporte
para caracteristicas individuales como canvas, video, etc.
footer, header, nav, section
● Nuevos controles en las formas: calendar, date,
time, email, url, search
Se recomienda utilizar las características disponibles
conforme vayan apareciendo.
Detección de HTML5
Cuando un browser despliega una página web, se
construye un “Document Object Model” (DOM), el
cual consiste en una colección de objetos que
representan los elementos HTML de la página.
Cada elemento es representado en el DOM por un
objeto.
En los browsers que soportan HTML5, ciertos
objetos tendrán propiedades únicas que pueden
servir para saber que características de HTML5
están soportadas.
Detección de HTML5 (cont
(cont…)
…)
Modernizer es una librería JavaScript open
source que detecta las características HTML5
y CSS3 que son soportadas por el browser.
Detección de HTML5 (cont
(cont…)
…)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 sure is fun</title>
<script src="modernizr.min.js"></script>
</head>
<body>
...
</body>
</html>
Detección de HTML5 (cont
(cont…)
…)
if (Modernizr.canvas) {
// let's draw some shapes!
} else {
// no native canvas support available :(
}
Detección de HTML5 (cont
(cont…)
…)
Modernizr se ejecuta automáticamente y se
crea un objeto global llamado Modernizr, el
cual contiene un conjunto de propiedades
booleanas por cada característica que puede
detectar. Por ejemplo, si el browser soporta el
API canvas, La propiedad Modernizr.canvas
tendrá el valor de “true”.
Nuevos elementos en HTML5
Consultar:
http://www.w3schools.com/html5/
Nuevos elementos en HTML5 (cont..)
Nuevos elementos en HTML5 (cont..)
Estructura semántica
• Nuevos controles de formularios
• Audio y Video
• Gráficas 2D/3D
•
ANTES
Ahora, elementos semánticos
HTML5: Video
HTML5: Video (cont ...)
Hasta ahora no existía un estandar para
mostrar video en un a página web. La
mayoría de los videos se muestran mediante
un plugin (por ejemplo Flash).
Currently, there are 3 supported video formats
for the video element:
HTML5 especifica una manera estandar para
incuir video mediante el elemento <video>
HTML5: Video (cont ...)
HTML5: Video (cont ...)
<!DOCTYPE HTML>
<html>
<body>
El elemento <video> admite la especificación de múltiples
fuentes para que el browser utilice la primera que reconozca.
<video src="movie.ogg" width="320" height="240"
controls="controls">
Your browser does not support the video tag.
</video>
<video width="320" height="240"
controls="controls">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
<source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
</body>
</html>
HTML5: Video (cont ...)
Atributos de <video>
HTML5: Audio
HTML5: Audio (cont ...)
Hasta ahora no existía un estandar para
incluir audio en un a página web. La mayoría
de los audios se escuchan mediante un
plugin (por ejemplo Flash).
HTML5 especifica una manera estandar para
incuir audio mediante el elemento <audio>
Currently, there are 3 supported formats for
the audio element:
HTML5: Audio (cont ...)
<!DOCTYPE HTML>
<html>
<body>
<audio src="song.ogg" controls="controls">
Your browser does not support the audio element.
</audio>
HTML5: Audio (cont ...)
El elemento <audio> admite la especificación de múltiples
fuentes para que el browser utilice la primera que reconozca.
<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
</body>
</html>
Nuevas funcionalidades
HTML5: Atributos de <audio>
Canvas
• Scalable Vector Graphics (SVG)
• Drag and drop
• Web Storage
• Geolocation
• App Cache
• Server-Sent
Sent Events (SSE)
• Web sockets
•
HTML5: Canvas
El elemento canvas de HTML 5 permite hacer
dibujos utilizando javascript. Existen métodos
para dibujar líneas, rectángulos, circúlos, etc.
Un canvas es un área rectangular en la
pantalla.
HTML5: Canvas (cont...)
Para dibujar en el elemento <canvas> es indispensable
utilizar javascript.
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
HTML5: Canvas (cont...)
EJEMPLO
<canvas id="myCanvas" width="200"
height="100"></canvas>
SVG
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:yellow;stroke:brown;stroke
style="fill:yellow;stroke:brown;stroke-width:5;fill-rule:evenodd;“/>
</svg>
</body>
</html>
Drag and Drop
<!DOCTYPE HTML>
<html><head>
<style type="text/css">
div {width:120px;height:120px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev){ev.preventDefault();}
function drag(ev){ev.dataTransfer.setData("Text",ev.target.id);}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
Drag and Drop (cont…)
cont…)
Drag and Drop (cont…)
cont…)
<body ondrop="drop(event)" ondragover="allowDrop(event)">
<p>Drag the image into a square or into the body:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag1" src="liebre.jpg" draggable="true" ondragstart="drag(event)" >
</div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br/>
</body>
</html>
HTML5: Web Storage
El objeto localStorage almacena datos permanentemente.
El objeto sessionStorage almacena los datos pero los borra cuando se cierra el browser.
<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
<script>
if(typeof(Storage)!=="undefined"){
localStorage.lastname="Smith";
document.getElementById("result").innerHTML="Last name: " + localStorage.lastname;
}else{
document.getElementById("result").innerHTML="Sorry, your browser does not support
web storage...";
}
</script></body></html>
Geolocation
Geolocation
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to get your coordinates:</p>
<button onclick="getLocation()">Try It</button>
<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>
</body>
</html>
Formas HTML5: datos de entrada
HTML5: Input types
HTML5 tiene nuevos tipos de entrada de datos. Los
datos se validan automáticamente
●
●
●
●
●
email
url
number
range
date pickers (date, month, week, time,
datetime, datetime-local)
local)
● search
● color
Note: Opera has the best support for the new input
types. However, you can already start using them in
all major browsers. If they are not supported, they
will behave as regular text fields.
HTML5: Input - e-mail
HTML5: Input - range
Points: <input type="range" name="points" min="1" max="10" />
<form action="demo_form.asp">
E-mail:
mail: <input type="email" name="usremail" />
<br /><input type="submit" value="Send" />
</form>
No pemite
enviar un e-mail
Incorrecto.
Si el browser no soporta
el tipo de entrada lo
despliega como tipo
texto
HTML5
HTML
5: Input – date
<form action="demo_form.asp">
Birthday: <input type="date" name="bday" />
<input type="submit" />
</form>
HTML5: Input – color
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
Select your favorite color: <input
type="color" name="favcolor" /><br />
<input type="submit" />
</form>
</body>
</html>
list attribute and <datalist
<datalist>
> element
Formas: <datalist
<datalist>
> element (cont…)
cont…)
<!DOCTYPE html>
<html><body>
<form action="demo_form.asp" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
<p>
<b>Note:</b>
The datalist tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p>
</body>
</html>
Formas: Nuevos Atributos
Soporte de los browsers
Input Type
•
Atributos de las formas
•
•
•
autocomplete
novalidate
Atributos de los inputs
•
•
•
•
•
•
•
•
•
•
•
autocomplete
autofocus
form
form overrides (formaction
formaction, formenctype,
formmethod, formnovalidate,
formnovalidate formtarget)
height and width
list
min, max and step
multiple
pattern (regexp)
placeholder
required
autocomplete
IE
Firefox
Opera
Chrome
Safari
4
8
3.5
9.5
3
autofocus
No
4
10
3
4
form
No
4
9.5
10
No
form overrides
No
4
10.5
10
No
8
3.5
9.5
3
4
No
4
9.5
No
No
height and width
list
min, max and step
No
No
9.5
3
No
multiple
No
3.5
11
3
4
novalidate
No
4
11
10
No
pattern
No
4
9.5
3
No
placeholder
No
4
11
3
3
required
No
4
9.5
3
No
0
