2. Agenda
31/01/2015 Alex – HTML52
• ¿Qué es HTML5?
• Reglas de HTML5
• Características
• Elementos estructurales
• Beneficios de HTML5
• Nuevas Características a Detalle
3. ¿Qué es HTML5?
Estándar basado en HTML, XHTML, DOM,
CSS.
HTML 4.01 Diciembre 1999.
Es un trabajo aún en progreso, sin embargo la
mayoría de los navegadores modernos ya lo
soportan.
31/01/2015 Alex – HTML53
4. Reglas de HTML5
• Las nuevas características deben ser basadas en
HTML, CSS, DOM y JavaScript.
• Reducir la necesidad de plugins externos
(flash).
• Mejor manejo de errores.
• Mas etiquetas para reemplazar el scripting.
• Independiente del dispositivo.
• El proceso de desarrollo debe ser visible al
público.
31/01/2015 Alex – HTML54
5. 5 Cosas que Debemos Saber sobre
HTML5
1. No es una gran cosa.
2. No es necesario desechar las cosas que ya
tenemos o conocemos.
3. Es fácil comenzar a usarlo.
4. Los navegadores ya lo soportan.
5. Llego para quedarse.
31/01/2015 Alex – HTML55
6. Algunas de las Características más
interesantes de HTML5
• Microdatos
• Drag & Drop
• Canvas
• Audio y Video
• Almacenamiento local
• Geolocalización
• Web Workers (Threads)
• Trabajo offline
• Nuevos elementos estructurales o semánticos
• Nuevos controles para formularios
31/01/2015 Alex – HTML56
7. Elementos Estructurales o
Semánticos (el Antes)
31/01/2015 Alex – HTML57
<div id=“header”>
<div id=“nav”>
<div id=“article”>
<div id=“sidebar”>
<div id=“section”>
<div id=“footer”>
9. Etiquetas de Elementos Semánticos
31/01/2015 Alex – HTML59
<article> <aside> <command> <details>
<summary> <figure> <figcaption> <footer>
<header> <hgroup> <mark> <meter>
<nav> <progress> <ruby> <rt>
<rp> <section> <time> <wbr>
10. Sintaxis resumida
HTML 4.01 HTML5
31/01/2015 Alex – HTML510
<!DOCTYPE HTML PUBLIC "-
//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">
<style type=“text/css”
<meta charset=“ISO-8859-1" />
<script>
<style>
11. Almacenamiento Web
HTML5 ofrece 2 nuevas formas de almacenar
datos en el cliente (dejando a las cookies
obsoletas):
• localSotore
• sessionStore
31/01/2015 Alex – HTML511
12. Almacenamiento Web (2)
<script type="text/javascript">
localStorage.pagecount=Number(localStorage.pagecount)+1;
sessionStorage.lastname="Smith";
</script>
31/01/2015 Alex – HTML512
13. Geolocalización
Saber en qué parte del mundo estamos y,
opcionalmente, compartir esta información.
La geolocalización no es HTML5, pero ya está en
los navegadores, junto con el soporte para
HTML5.
31/01/2015 Alex – HTML513
14. Micro Datos
Son una forma estandarizada de agregar
semánticas adicionales, como datos del autor de
una página, licencias de las imágenes, etc.
El estándar de micro datos incluye etiquetas,
especialmente para motores de búsqueda.
31/01/2015 Alex – HTML514
15. Canvas
Es uno delos componentes más novedosos de
HTML5. Nos permite dibujar dinámica imágenes
en una página web.
Nos permite hacer cosas que antes solo eran
posibles con Flash o con algún otro plugin en el
navegador.
31/01/2015 Alex – HTML515
16. Canvas (2)
El proceso para dibujar en el canvas es muy
simple:
31/01/2015 Alex – HTML516
1. Colocar la etiqueta <canvas> en el cuerpo de
la página.
2. Dibujar en el canvas utilizando JavaScript
17. Web Forms 2.0
• tel: Para un número de teléfono.
• search: Para un campo de búsqueda.
• url: Para una URL.
• email: Para una o más direcciones de e-mail.
• datetime, date, month, week, time, datetime-local: El
valor de entrada es una fecha/hora.
• number: El valor de entrada es un número.
• range: El valor de entrada es un número en un rango dado.
• color: El valor de entrada es un color hexadecimal, como
#FF8800
31/01/2015 Alex – HTML517
19. Beneficios de HTML5
• Marcado más limpio.
• Semántica adicional para nuevos elementos.
• Nuevos elementos para formularios.
• APIs nuevas que reducen la dependencia de
plugins.
31/01/2015 Alex – HTML519
20. Detectar si un Navegador Soporta
HTML5
1. Ver si cierta propiedad existe en un objeto global
(como “window” o “navigator”).
2. Crear un elemento, después verificar si cierta
propiedad existe en ese elemento.
3. Crear un elemento, verificar si cierto método
existe en ese elemento, después llamar al método
y verificar el valor que regresa.
4. Crear un elemento, establecer una propiedad a
cierto valor, después ver si la propiedad retuvo el
valor.
31/01/2015 Alex – HTML520
21. Modernizr
Existen alternativas a las 4 técnicas anteriores.
Modernizr es una librería open source que nos
permite detectar si un navegador soporta las
nuevas características de HTML5.
<script src="modernizr.min.js"></script>
if(Modernizr.canvas){// Dibujemos algo}
31/01/2015 Alex – HTML521
23. ¿Cómo se ve un Canvas?
<canvas id=“canvas” width="300" height="225">
</canvas>
31/01/2015 Alex – HTML523
24. Contexto de Dibujo
Cada canvas tiene un contexto de dibujo
asociado, este contexto contiene los métodos que
nos permiten dibujar en el canvas:
var canvas=document.getElementById(“canvas");
var contexto = canvas.getContext("2d");
contexto.fillRect(50, 25, 150, 100);
31/01/2015 Alex – HTML524
27. Dibujemos un Rectángulo
window.onload = function ()
{
var canvas =
document.getElementById("canvas");
var contexto =
canvas.getContext("2d");
contexto.fillRect(10, 10, 100, 50);
}
31/01/2015 Alex – HTML527
28. Dibujemos el Contorno de un
Rectángulo
window.onload = function ()
{
var canvas =
document.getElementById("canvas");
var contexto =
canvas.getContext("2d");
contexto.strokeRect(10, 10, 100, 50);
}
31/01/2015 Alex – HTML528
29. Aplicando Estilos y Colores
Si queremos aplicar colores a las figuras, hay dos
propiedades importantes que podemos usar:
31/01/2015 Alex – HTML529
• fillStyle = color
• strokeStyle = color
30. fillStyle y strokeStyle
Permiten cambiar el estilo de relleno y contorno,
respectivamente.
Pueden ser un color CSS, un patrón, o un gradiente.
Por default son negro sólido, pero podemos
establecerlo al valor que queramos.
Cada contexto de dibujo mantiene sus propiedades
mientras la página esté abierta, a menos que hagamos
algo para resetearla.
31/01/2015 Alex – HTML530
31. Cuatro Formas de Indicar el mismo
Color
ctx.fillStyle = "orange";
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)";
ctx.fillStyle = "rgba(255,165,0,1)";
31/01/2015 Alex – HTML531
32. Dibujemos dos Rectángulos =D
window.onload = function ()
{
var canvas =
document.getElementById("canvas");
var contexto = canvas.getContext("2d");
contexto.fillStyle = "green";
contexto.fillRect(10, 10, 100, 50);
contexto.fillStyle = "red";
contexto.fillRect(50, 50, 50, 50);
}
31/01/2015 Alex – HTML532
33. Transparencias
Existen dos formas para que dibujemos figuras
semi-transparentes:
• globalAlpha = valor de transparencia
• rgba
31/01/2015 Alex – HTML533
34. Gradiantes
Las figuras y líneas no están limitadas a un color
sólido, también podemos hacer un degradado de
dos o más colores.
31/01/2015 Alex – HTML534
• Gradientes Lineares:
createLinearGradient(x0,y0,x1,y1)
• Gradientes Radiales:
createRadialGradient(x0,y0,r0,x1,y1,r1)
37. Uso de gradientes
var gradiente =
ctx.createLinearGradient(0,0,150,150;
gradiente.addColorStop(0,"black");
gradiente.addColorStop(1,"white");
ctx.fillStyle = gradiente;
ctx.fillRect(0, 0, 300, 225);
31/01/2015 Alex – HTML537
38. Paths
Sirven para dibujar sin mostrar el trazo en el
canvas, es como hacer un dibujo en lápiz que
después repasaremos con tinta.
31/01/2015 Alex – HTML538
• beginPath()
• closePath()
• stroke()
• fill()
• moveTo(x, y)
• lineTo(x, y)
39. Dibujemos un Triangulo
window.onload = function ()
{
var canvas = document.getElementById("canvas");
var contexto = canvas.getContext("2d");
contexto.beginPath();
contexto.moveTo(75, 300);
contexto.lineTo(600,600);
contexto.lineTo(600, 25);
contexto.closePath();
contexto.fill();
}
31/01/2015 Alex – HTML539
40. Arcos
arc(x, y, radio,
anguloI,anguloF, sentidoReloj)
*Nota: Los ángulos en la función “arc” se dan en
radianes, no en grados. Para convertir grados a radianes
podemos usar la siguiente expresión “JavaScript” :
var radianes =(Math.PI/180)*grados
31/01/2015 Alex – HTML540
43. Dibujando Líneas
for (var x = 2.5; x < 705; x += 20)
{
contexto.moveTo(x, 0);
contexto.lineTo(x, 605);
}
for (var y = 2.5; y < 605; y += 20)
{
contexto.moveTo(0, y);
contexto.lineTo(705, y);
}
31/01/2015 Alex – HTML543
45. Imágenes
Las imágenes externas pueden ser usadas en
formato “png”, “gif”, o “jpeg”.
•drawImage(img, x, y)
•drawImage(img, x, y, w, h)
•drawImage(img, cx, cy, cw, ch, x, y, w, h)
31/01/2015 Alex – HTML545
46. Proporcionando Imágenes
• Usar un <img> existente
• Crear un objeto “Image” con JavaScript
• Proporcionar la imagen en Base64
31/01/2015 Alex – HTML546
47. Usando un <img>
<img id="gato" src="img/gato.png" alt=“gato"
width="177" height="113">
<canvas id="can" width="177" height="113"></canvas>
<script>
window.onload = function() {
var canvas = document.getElementById("c");
var contexto = canvas.getContext("2d");
var gato = document.getElementById("gato");
context.drawImage(cat, 0, 0);
};
</script>
31/01/2015 Alex – HTML547
48. Usando JavaScript
<canvas id="c" width="177" height="113"></canvas>
<script>
var canvas = document.getElementById(“c");
var contexto = canvas.getContext("2d");
var gato = new Image();
gato.src = "img/gato.png";
gato.onload = function() {
contexto.drawImage(gato, 0, 0);
};
</script>
31/01/2015 Alex – HTML548
49. Usando Base64
var canvas = document.getElementById("canvas");
var contexto = canvas.getContext("2d");
var datos =
'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAA
EALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
var img = new Image();
img.src = datos;
img.onload = function()
{
contexto.drawImage(img, 0, 0);
}
31/01/2015 Alex – HTML549
51. Ejemplo de Patrones
var canvas = document.getElementById("canvas");
var contexto = canvas.getContext("2d");
var img = new Image();
img.src = 'patron.jpg';
img.onload = function() {
var patron = ctx.createPattern(img, 'repeat');
contexto.fillStyle = patron;
contexto.fillRect(0,0,1000,600);
}
31/01/2015 Alex – HTML551
52. ¿Y qué hay del Texto?
Además de dibujar líneas en un canvas, también
podemos dibujar texto. Podemos establecer algunos
atributos para la fuente, después seleccionamos un punto
en el canvas para dibujar ahí nuestro texto.
• fillText()
31/01/2015 Alex – HTML552
53. Propiedades del Texto
31/01/2015 Alex – HTML553
• font: puede ser cualquier cosa que podamos poner en una
regla “font” de CSS. Que incluye el estilo, variación, peso,
tamaño, altura, y familia.
• textAlign: controla la alineación del texto. Los valores
posibles son: start, end, left, right, y center.
• textBaseline: controla dónde se dibuja el texto relativo
al punto de inicio. Los valores posibles son: top,
hanging, middle, alphabetic, ideographic, o
bottom.
55. Geolocalización
Saber en qué parte del mundo nos encontramos
y, opcionalmente, compartir esta información.
31/01/2015 Alex – HTML555
La latitud y longitud está disponible
en el JavaScript de nuestra página,
solo debemos darle permiso de usar
esta información
57. Accediendo a la Posición del
Usuario
window.onload = function ()
{
navigator.geolocation.getCurrentPosition(fnPos);
}
function fnPos(posicion)
{
var latitud = posicion.coords.latitude;
var longitud = posicion.coords.longitude;
}
31/01/2015 Alex – HTML557
58. Propiedades del objeto Position
PROPIEDAD TIPO NOTAS
coords.latitude double Grados
coords.longitude double Grados
coords.altitude double o null Metros
coords.accuracy double Metros
coords.altitudeAccuracy double o null Metros
coords.heading double o null Grados desde el norte real
coords.speed double o null Metros/segundo
timestamp DOMTimeStamt Como un objeto Date()
31/01/2015 Alex – HTML558
59. Manejo de Errores
La geolocalización es complicada, algo podría
salir mal.
• getCurrentPosition(fnPos, fnErrores)
Si algo sale mal, la función de manejo de errores será
llamada con un objeto de tipo“PositionError”
31/01/2015 Alex – HTML559
60. Las Propiedades de PositionError
PROPIEDAD TIPO NOTAS
code short Un valor enumerado
message DOMString No para usuarios finales
31/01/2015 Alex – HTML560
• PERMISSION_DENIED (1): Si el usuario decide no
compartir su ubicación
• POSITION_UNAVAILABLE (2): Si no es posible conectarse
a la red, o no se puede contactar a los satélites de
posicionamiento.
• TIMEOUT (3): Si hay conexión a la red pero ha tomado
mucho tiempo calcular la posición del usuario. En un momento
veremos cómo definir qué significa “mucho tiempo”.
• UNKNOWN_ERROR (0): Si alguna otra cosa salió mal
62. ¿Y qué hay de los Móviles?
Dos opciones para localizar la posición
31/01/2015 Alex – HTML562
La función “getCurrentPosition” tiene un
tercer argumento opcional, un objeto
“PositionOptions”.
63. Propiedades de “PositionOptions”
PROPIEDAD TIPO DEFAULT NOTAS
enableHighAccuracy boolean false true es más lento
timeout long ---- Milisegundos
maximumAge long 0 milisegundos
31/01/2015 Alex – HTML563
navigator.geolocation.getCurrentPosition(
funcion_posicion,
funcion_error,
{maximumAge: 75000});
64. ¿Y si requiero Obtener la Posición
de manera Constante?
Si debemos encontrar su ubicación de forma
continua, entonces debemos usar
“watchPosition()” en vez de
“getCurrentPosition()”.
El navegador determinará cada cuanto hay que
llamar a “watchPosition()”
31/01/2015 Alex – HTML564
68. Ejemplo de geolocalizacion con
mapas
var map = new
GMap2(document.getElementById("geo-
wrapper"));
var center = new GLatLng(loc.coords.latitude,
loc.coords.longitude);
map.setCenter(center,14);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.addOverlay(new GMarker(center, {draggable:
false, title: "You are here (more or
less)"}));
}
31/01/2015 Alex – HTML568