Html5

HTML5
Expositor: Alex
http://javatutoriales.blogspot.com/
Se permite hacer preguntas en cualquier momento.

Agenda
22/11/2010
Alex – HTML5
2
¿Qué es HTML5?
Reglas de HTML5
Características
Elementos estructurales
Beneficios de HTML5
Nuevas Características a Detalle

¿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.
22/11/2010
Alex – HTML5
3

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.
22/11/2010
Alex – HTML5
4

5 Cosas que Debemos Saber sobre HTML5
No es una gran cosa.
No es necesario desechar las cosas que ya tenemos o conocemos.
Es fácil comenzar a usarlo.
Los navegadores ya lo soportan.
Llego para quedarse.
22/11/2010
Alex – HTML5
5

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
22/11/2010
Alex – HTML5
6

Elementos Estructurales o Semánticos (el Antes)
22/11/2010
Alex – HTML5
7
<div id=“header”>
<div id=“nav”>
<div id=“article”>
<div id=“sidebar”>
<div id=“section”>
<div id=“footer”>

Elementos Estructurales o Semánticos (Ahora)
22/11/2010
Alex – HTML5
8
<header>
<nav>
<article>
<aside>
<section>
<footer>

Etiquetas de Elementos Semánticos
22/11/2010
Alex – HTML5
9

Sintaxis resumida
HTML 4.01 HTML5
22/11/2010
Alex – HTML5
10
<!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" />
<meta charset=“ISO-8859-1" />
<script type="text/javascript">
<styletype=“text/css”
<script>
<style>

Almacenamiento Web
HTML5 ofrece 2 nuevas formas de almacenar datos en el cliente (dejando a las cookies obsoletas):
localSotore
sessionStore
22/11/2010
Alex – HTML5
11

Almacenamiento Web (2)
<script type="text/javascript">
localStorage.pagecount=Number(localStorage.pagecount)+1;
sessionStorage.lastname="Smith";
</script>
22/11/2010
Alex – HTML5
12

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.
22/11/2010
Alex – HTML5
13

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.
22/11/2010
Alex – HTML5
14

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.
22/11/2010
Alex – HTML5
15

Canvas (2)
El proceso para dibujar en el canvas es muy simple:
22/11/2010
Alex – HTML5
16
Colocar la etiqueta <canvas> en el cuerpo de la página.
Dibujar en el canvas utilizando JavaScript

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
22/11/2010
Alex – HTML5
17

Ejemplo 1
De HTML 4.01 a HTML5
22/11/2010
Alex – HTML5
18

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.
22/11/2010
Alex – HTML5
19

Detectar si un Navegador Soporta HTML5
Ver si cierta propiedad existe en un objeto global (como “window” o “navigator”).
Crear un elemento, después verificar si cierta propiedad existe en ese elemento.
Crear un elemento, verificar si cierto método existe en ese elemento, después llamar al método y verificar el valor que regresa.
Crear un elemento, establecer una propiedad a cierto valor, después ver si la propiedad retuvo el valor.
22/11/2010
Alex – HTML5
20

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}
22/11/2010
Alex – HTML5
21

Detección de Características
Modernizr.canvas
Modernizr.canvastext
Modernizr.video
Modernizr.localstorage
Modernizr.webworkers
Modernizr.applicationcache
Modernizr.geolocation
Modernizr.inputtypes.date
Modernizr.input.placeholder
Modernizr.input.autofocus
22/11/2010
Alex – HTML5
22

¿Cómo se ve un Canvas?
<canvas id=“canvas” width="300" height="225">
</canvas>
22/11/2010
Alex – HTML5
23

Contexto de Dibujo
Cada canvas tiene un contexto de dibujo asociado, este contexto contiene los métodos que nos permiten dibujar en el canvas:
varcanvas=document.getElementById(“canvas");
var contexto = canvas.getContext("2d");
contexto.fillRect(50, 25, 150, 100);
22/11/2010
Alex – HTML5
24

Eje de Coordenadas
22/11/2010
Alex – HTML5
25
(0,0)

Dibujando Figuras Simples
Rectángulos:
22/11/2010
Alex – HTML5
26
fillRect(x,y,ancho,alto)
strokeRect(x,y,ancho,alto)
clearRect(x,y,ancho,alto)

Dibujemos un Rectángulo
window.onload = function ()
{
varcanvas =
document.getElementById("canvas");
var contexto =
canvas.getContext("2d");
}
22/11/2010
Alex – HTML5
27

Dibujemos el Contorno de un Rectángulo
{
varcanvas =
var contexto =
canvas.getContext("2d");
contexto.strokeRect(10, 10, 100, 50);
}
22/11/2010
Alex – HTML5
28

Aplicando Estilos y Colores
Si queremos aplicar colores a las figuras, hay dos propiedades importantes que podemos usar:
22/11/2010
Alex – HTML5
29
fillStyle = color
strokeStyle = color

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.
22/11/2010
Alex – HTML5
30

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)";
22/11/2010
Alex – HTML5
31

Dibujemos dos Rectángulos =D
{
varcanvas =
contexto.fillStyle = "green";
contexto.fillStyle = "red";
}
22/11/2010
Alex – HTML5
32

Transparencias
Existen dos formas para que dibujemos figuras semi-transparentes:
globalAlpha = valor de transparencia
rgba
22/11/2010
Alex – HTML5
33

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.
22/11/2010
Alex – HTML5
34
Gradientes Lineares:
createLinearGradient(x0,y0,x1,y1)
Gradientes Radiales:
createRadialGradient(x0,y0,r0,x1,y1,r1)

Gradiente Lineal
createLinearGradient(x0,y0,x1,y1);
22/11/2010
Alex – HTML5
35
(0,0,300,0)
(0,0,0,225)
(0,0,300,225)

Gradiente Radial
createRadialGradient(x0,y0,r0,x1,y1,r1)
22/11/2010
Alex – HTML5
36

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);
22/11/2010
Alex – HTML5
37

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.
22/11/2010
Alex – HTML5
38
beginPath()
closePath()
stroke()
fill()
moveTo(x, y)
lineTo(x, y)

Dibujemos un Triangulo
{
varcanvas = document.getElementById("canvas");
contexto.beginPath();
contexto.moveTo(75, 300);
contexto.lineTo(600,600);
contexto.lineTo(600, 25);
contexto.closePath();
contexto.fill();
}
22/11/2010
Alex – HTML5
39

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
22/11/2010
Alex – HTML5
40

Curvas (Bézier y Cuadráticas)
quadraticCurveTo(p1x, p1y, x, y)
bezierCurveTo(p1x, p1y, p2x, p2y, x, y)
22/11/2010
Alex – HTML5
41
Curva Cuadrática
Curva Bézier

Dibujando Caritas Felices =D
contexto.arc(300,300,300,0,Math.PI*2,true);
contexto.moveTo(450,300);
contexto.arc(300,300,150,0,Math.PI,false);
contexto.stroke();
22/11/2010
Alex – HTML5
42

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);
}
22/11/2010
Alex – HTML5
43

Un Ejemplo más Completo
contexto.fillStyle = "orange";
cuadro(contexto,12,12,550,500,15);
cuadro(contexto,116,300,116,127,10);
cuadro(contexto,328,300,116,127,10);
contexto.arc(63,63,35,Math.PI/7,-Math.PI/7,false);
contexto.fill();
contexto.fillStyle = "black";
// bloques
for(i=0;i<9;i++)
{
contexto.fillRect(111+i*50,60,10,10);
}
for(i=0;i<7;i++){
contexto.fillRect(275,110+i*50,10,10);
}
for(i=0;i<10;i++){
contexto.fillRect(51+i*50,455,10,10);
}
contexto.fillStyle = "red";
contexto.bezierCurveTo(30,294, 40,268, 67.5,268);
contexto.bezierCurveTo(95,268, 105,294, 105,302);
contexto.lineTo(92.5,350);
contexto.fill();
contexto.fillStyle = "white";
contexto.moveTo(47.5,302);
contexto.bezierCurveTo(47.5,297, 51,292, 55,292);
contexto.bezierCurveTo(59,292, 62.5,297, 62.5,302);
contexto.moveTo(72.5,302);
contexto.bezierCurveTo(72.5,297, 75.5,292, 80,292);
contexto.fill();
contexto.fillStyle = "black";
contexto.fill();
contexto.fill();
22/11/2010
Alex – HTML5
44

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)
22/11/2010
Alex – HTML5
45

Proporcionando Imágenes
Usar un <img> existente
Crear un objeto “Image” con JavaScript
Proporcionar la imagen en Base64
22/11/2010
Alex – HTML5
46

Usando un <img>
<imgid="gato"src="img/gato.png" alt=“gato" width="177" height="113">
<canvas id="can"width="177" height="113"></canvas>
<script>
window.onload = function() {
varcanvas = document.getElementById("c");
var gato = document.getElementById("gato");
context.drawImage(cat, 0, 0);
};
</script>
22/11/2010
Alex – HTML5
47

Usando JavaScript
<canvas id="c" width="177" height="113"></canvas>
<script>
varcanvas = document.getElementById(“c");
var gato = new Image();
gato.src = "img/gato.png";
gato.onload = function() {
contexto.drawImage(gato, 0, 0);
};
</script>
22/11/2010
Alex – HTML5
48

Usando Base64
var datos =
'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
varimg = new Image();
img.src = datos;
img.onload = function()
{
contexto.drawImage(img, 0, 0);
}
22/11/2010
Alex – HTML5
49

Patrones
createPattern(image,type)
repeat
repeat-x
repeat-y
no-repeat
22/11/2010
Alex – HTML5
50

Ejemplo de Patrones
varimg = new Image();
img.src = 'patron.jpg';
img.onload = function() {
varpatron = ctx.createPattern(img, 'repeat');
contexto.fillStyle = patron;
contexto.fillRect(0,0,1000,600);
}
22/11/2010
Alex – HTML5
51

¿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()
22/11/2010
Alex – HTML5
52

Propiedades del Texto
22/11/2010
Alex – HTML5
53
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.

Agregando Texto
contexto.font = "bold 35px sans-serif";
contexto.textBaseline = "top";
contexto.fillText("Eje X", 70, 5);
contexto.fillText("Eje Y", 70, 275);
22/11/2010
Alex – HTML5
54

Geolocalización
Saber en qué parte del mundo nos encontramos y, opcionalmente, compartir esta información.
22/11/2010
Alex – HTML5
55
La latitud y longitud está disponible en el JavaScript de nuestra página, solo debemos darle permiso de usar esta información

Seguridad Integrada
22/11/2010
Alex – HTML5
56

Accediendo a la Posición del Usuario
{
navigator.geolocation.getCurrentPosition(fnPos);
}
functionfnPos(posicion)
{
var latitud = posicion.coords.latitude;
var longitud = posicion.coords.longitude;
}
22/11/2010
Alex – HTML5
57

Propiedades del objeto Position
22/11/2010
Alex – HTML5
58

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”
22/11/2010
Alex – HTML5
59

Las Propiedades de PositionError
22/11/2010
Alex – HTML5
60
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

Manejando Errores
navigator.geolocation.getCurrentPosition(fnPos,fnError);
functionfnError(error)
{
if(error.code == 1)
{
alert("El usuario se ha negado a compartir su ubicación");
}
}
22/11/2010
Alex – HTML5
61

¿Y qué hay de los Móviles?
Dos opciones para localizar la posición
22/11/2010
Alex – HTML5
62
La función “getCurrentPosition” tiene un tercer argumento opcional, un objeto “PositionOptions”.

Propiedades de “PositionOptions”
22/11/2010
Alex – HTML5
63
navigator.geolocation.getCurrentPosition(
funcion_posicion,
funcion_error,
{maximumAge: 75000});

¿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()”
22/11/2010
Alex – HTML5
64

Incompatibilidades
22/11/2010
Alex – HTML5
65

geo.js
<script src="gears_init.js"></script>
<script src="geo.js"></script>
22/11/2010
Alex – HTML5
66

Usando geo.js
if (geo_position_js.init())
{
geo_position_js.getCurrentPosition(fnPos, fnError);
}
functionfnPos(p) {
alert("Posición: (" + p.coords.latitude"," + p.coords.longitude + ")");
}
functionfnError() {
alert(“No nos fue posible encontrarte.");
}
22/11/2010
Alex – HTML5
67

Ejemplo de geolocalizacion con mapas
varmap = 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 orless)"}));
}
22/11/2010
Alex – HTML5
68

¿Preguntas?
22/11/2010
Alex - HTML5
69

Gracias
22/11/2010
Alex - HTML5
70
programadorjavablog@gmail.com
http://javatutoriales.blogspot.com/
Java Tutoriales en Facebook

http://www.javatutoriales.com	6124
http://javatutoriales.blogspot.com	48
http://translate.googleusercontent.com	4
http://t.co	3
http://webcache.googleusercontent.com	1
https://si0.twimg.com	1

Html5

by programadorjavablog

Accessibility

Categories

Upload Details

Usage Rights

6 Embeds 6,181

Statistics

Html5 Presentation Transcript

Html5

by programadorjavablog

Accessibility

Categories

Upload Details

Usage Rights

6 Embeds 6,181

Statistics

Html5 Presentation Transcript

Let LinkedIn power your SlideShare experience

Let LinkedIn power your SlideShare experience

Customize SlideShare content based on your interests

Keep up to date when your LinkedIn contacts post on SlideShare