Html5

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

Agenda
31/01/2015 Alex – HTML52
• ¿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.
31/01/2015 Alex – HTML53

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 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

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

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”>

Elementos Estructurales o
Semánticos (Ahora)
31/01/2015 Alex – HTML58
<header>
<nav>
<article>
<aside>
<section>
<footer>

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>

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>

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

Almacenamiento Web (2)
<script type="text/javascript">
localStorage.pagecount=Number(localStorage.pagecount)+1;
sessionStorage.lastname="Smith";
</script>
31/01/2015 Alex – HTML512

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

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

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

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

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

Ejemplo 1
De HTML 4.01 a HTML5
31/01/2015 Alex – HTML518

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

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

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

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
31/01/2015 Alex – HTML522

¿Cómo se ve un Canvas?
<canvas id=“canvas” width="300" height="225">
</canvas>
31/01/2015 Alex – HTML523

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

Eje de Coordenadas
31/01/2015 Alex – HTML525
(0,0)

Dibujando Figuras Simples
Rectángulos:
31/01/2015 Alex – HTML526
• fillRect(x,y,ancho,alto)
• strokeRect(x,y,ancho,alto)
• clearRect(x,y,ancho,alto)

Dibujemos un Rectángulo
window.onload = function ()
{
var canvas =
document.getElementById("canvas");
var contexto =
canvas.getContext("2d");
}
31/01/2015 Alex – HTML527

Dibujemos el Contorno de un
Rectángulo
{
var canvas =
var contexto =
canvas.getContext("2d");
contexto.strokeRect(10, 10, 100, 50);
}
31/01/2015 Alex – HTML528

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

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

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

Dibujemos dos Rectángulos =D
{
var canvas =
contexto.fillStyle = "green";
contexto.fillStyle = "red";
}
31/01/2015 Alex – HTML532

Transparencias
Existen dos formas para que dibujemos figuras
semi-transparentes:
• globalAlpha = valor de transparencia
• rgba
31/01/2015 Alex – HTML533

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)

Gradiente Lineal
createLinearGradient(x0,y0,x1,y1);
31/01/2015 Alex – HTML535
(0,0,300,0)
(0,0,300,225)
(0,0,0,225)

Gradiente Radial
createRadialGradient(x0,y0,r0,x1,y1,r1)
31/01/2015 Alex – HTML536

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

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)

Dibujemos un Triangulo
{
var canvas = document.getElementById("canvas");
contexto.beginPath();
contexto.moveTo(75, 300);
contexto.lineTo(600,600);
contexto.lineTo(600, 25);
contexto.closePath();
contexto.fill();
}
31/01/2015 Alex – HTML539

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

Curvas (Bézier y Cuadráticas)
quadraticCurveTo(p1x,
p1y, x, y)
bezierCurveTo(p1x, p1y,
p2x, p2y, x, y)
31/01/2015 Alex – HTML541
Curva Bézier
Curva Cuadrática

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();
31/01/2015 Alex – HTML542

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

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();
31/01/2015 Alex – HTML544

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

Proporcionando Imágenes
• Usar un <img> existente
• Crear un objeto “Image” con JavaScript
• Proporcionar la imagen en Base64
31/01/2015 Alex – HTML546

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 gato = document.getElementById("gato");
context.drawImage(cat, 0, 0);
};
</script>
31/01/2015 Alex – HTML547

Usando JavaScript
<canvas id="c" width="177" height="113"></canvas>
<script>
var canvas = document.getElementById(“c");
var gato = new Image();
gato.src = "img/gato.png";
gato.onload = function() {
contexto.drawImage(gato, 0, 0);
};
</script>
31/01/2015 Alex – HTML548

Usando Base64
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

Patrones
• createPattern(image,type)
• repeat
• repeat-x
• repeat-y
• no-repeat
31/01/2015 Alex – HTML550

Ejemplo de Patrones
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

¿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

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.

Agregando Texto
contexto.font = "bold 35px sans-serif";
contexto.textBaseline = "top";
contexto.fillText("Eje X", 70, 5);
contexto.fillText("Eje Y", 70, 275);
31/01/2015 Alex – HTML554

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

Seguridad Integrada
31/01/2015 Alex – HTML556

Accediendo a la Posición del
Usuario
{
navigator.geolocation.getCurrentPosition(fnPos);
}
function fnPos(posicion)
{
var latitud = posicion.coords.latitude;
var longitud = posicion.coords.longitude;
}
31/01/2015 Alex – HTML557

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

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

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

Manejando Errores
navigator.geolocation.getCurrentPosition(fnPos,fnError);
function fnError(error)
{
if(error.code == 1)
{
alert("El usuario se ha negado a compartir su ubicación");
}
}
31/01/2015 Alex – HTML561

¿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”.

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});

¿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

Incompatibilidades
31/01/2015 Alex – HTML565

geo.js
<script src="gears_init.js"></script>
<script src="geo.js"></script>
31/01/2015 Alex – HTML566

Usando geo.js
if (geo_position_js.init())
{
geo_position_js.getCurrentPosition(fnPos, fnError);
}
function fnPos(p) {
alert("Posición: (" + p.coords.latitude"," +
p.coords.longitude + ")");
}
function fnError() {
alert(“No nos fue posible encontrarte.");
}
31/01/2015 Alex – HTML567

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

¿Preguntas?
31/01/2015 Alex - HTML569

Gracias
31/01/2015 Alex - HTML570
programadorjavablog@gmail.com
http://javatutoriales.blogspot.com/
Java Tutoriales en Facebook

Html5

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Html5

Ähnlich wie Html5 (20)

Mehr von programadorjavablog

Mehr von programadorjavablog (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (10)

Html5