Html5

15,450 views

Published on

Published in: Technology, Design
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
15,450
On SlideShare
0
From Embeds
0
Number of Embeds
11,034
Actions
Shares
0
Downloads
0
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Html5

  1. 1. HTML5 Expositor: Alex http://javatutoriales.blogspot.com/ Se permite hacer preguntas en cualquier momento.
  2. 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. 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. 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. 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. 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. 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”>
  8. 8. Elementos Estructurales o Semánticos (Ahora) 31/01/2015 Alex – HTML58 <header> <nav> <article> <aside> <section> <footer>
  9. 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. 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. 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. 12. Almacenamiento Web (2) <script type="text/javascript"> localStorage.pagecount=Number(localStorage.pagecount)+1; sessionStorage.lastname="Smith"; </script> 31/01/2015 Alex – HTML512
  13. 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. 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. 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. 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. 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
  18. 18. Ejemplo 1 De HTML 4.01 a HTML5 31/01/2015 Alex – HTML518
  19. 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. 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. 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
  22. 22. 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
  23. 23. ¿Cómo se ve un Canvas? <canvas id=“canvas” width="300" height="225"> </canvas> 31/01/2015 Alex – HTML523
  24. 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
  25. 25. Eje de Coordenadas 31/01/2015 Alex – HTML525 (0,0)
  26. 26. 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)
  27. 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. 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. 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. 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. 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. 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. 33. Transparencias Existen dos formas para que dibujemos figuras semi-transparentes: • globalAlpha = valor de transparencia • rgba 31/01/2015 Alex – HTML533
  34. 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)
  35. 35. Gradiente Lineal createLinearGradient(x0,y0,x1,y1); 31/01/2015 Alex – HTML535 (0,0,300,0) (0,0,300,225) (0,0,0,225)
  36. 36. Gradiente Radial createRadialGradient(x0,y0,r0,x1,y1,r1) 31/01/2015 Alex – HTML536
  37. 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. 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. 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. 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
  41. 41. 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
  42. 42. Dibujando Caritas Felices =D contexto.beginPath(); contexto.arc(300,300,300,0,Math.PI*2,true); contexto.moveTo(450,300); contexto.arc(300,300,150,0,Math.PI,false); contexto.moveTo(230,180); contexto.arc(180,180,50,0,Math.PI*2,true); contexto.moveTo(460,180); contexto.arc(410,180,50,0,Math.PI*2,true); contexto.stroke(); 31/01/2015 Alex – HTML542
  43. 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
  44. 44. Un Ejemplo más Completo contexto.fillStyle = "orange"; cuadro(contexto,12,12,550,500,15); cuadro(contexto,22,22,530,480,9); cuadro(contexto,116,97,116,127,10); cuadro(contexto,328,97,116,127,6); cuadro(contexto,116,300,116,127,10); cuadro(contexto,328,300,116,127,10); contexto.beginPath(); contexto.arc(63,63,35,Math.PI/7,-Math.PI/7,false); contexto.lineTo(60,63); 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.beginPath(); contexto.fillStyle = "red"; contexto.moveTo(30,336); contexto.lineTo(30,302); contexto.bezierCurveTo(30,294, 40,268, 67.5,268); contexto.bezierCurveTo(95,268, 105,294, 105,302); contexto.lineTo(105,336); contexto.lineTo(92.5,350); contexto.lineTo(80,336); contexto.lineTo(67.5,350); contexto.lineTo(55,336); contexto.lineTo(42.5,350); contexto.lineTo(30,336); contexto.fill(); contexto.fillStyle = "white"; contexto.beginPath(); 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.bezierCurveTo(62.5,307, 59,312, 55,312); contexto.bezierCurveTo(51,312, 47.5,307, 47.5,302); contexto.moveTo(72.5,302); contexto.bezierCurveTo(72.5,297, 75.5,292, 80,292); contexto.bezierCurveTo(84,292, 87.5,297, 87.5,302); contexto.bezierCurveTo(87.5,307, 84,312, 80,312); contexto.bezierCurveTo(76,312, 72.5,307, 72.5,302); contexto.fill(); contexto.fillStyle = "black"; contexto.beginPath(); contexto.arc(55,302,4,0,Math.PI*2,true); contexto.fill(); contexto.beginPath(); contexto.arc(80,302,4,0,Math.PI*2,true); contexto.fill(); 31/01/2015 Alex – HTML544
  45. 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. 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. 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. 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. 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
  50. 50. Patrones • createPattern(image,type) • repeat • repeat-x • repeat-y • no-repeat 31/01/2015 Alex – HTML550
  51. 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. 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. 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.
  54. 54. 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
  55. 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
  56. 56. Seguridad Integrada 31/01/2015 Alex – HTML556
  57. 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. 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. 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. 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
  61. 61. 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
  62. 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. 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. 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
  65. 65. Incompatibilidades 31/01/2015 Alex – HTML565
  66. 66. geo.js <script src="gears_init.js"></script> <script src="geo.js"></script> 31/01/2015 Alex – HTML566
  67. 67. 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
  68. 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
  69. 69. ¿Preguntas? 31/01/2015 Alex - HTML569
  70. 70. Gracias 31/01/2015 Alex - HTML570 programadorjavablog@gmail.com http://javatutoriales.blogspot.com/ Java Tutoriales en Facebook

×