Your SlideShare is downloading. ×
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Introduccion html5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Introduccion html5

6,476

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,476
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
274
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Introducción a HTML5 José Luis Serrano Lozano
  • 2. Introducción a HTML5 Índice - Historia - Novedades - Algunas diferencias con HTML4 - Nuevos elementos - Vídeo - Canvas - Formularios - Polyfills y Modernizr - Otras APIs - RecursosJosé Luis Serrano Lozano
  • 3. Introducción a HTML5 Historia- Se trata del nuevo estándar del lenguaje HTML para estructurar y presentar contenido en la web.- Es la quinta revisión importante del lenguaje, la anterior, HTML 4, data ya de 1997, y la última, HTML 4.01, es de 1999.- La web ha cambiado mucho desde entonces.- Su intención es englobar todas las tecnologías web en un solo estándar. José Luis Serrano Lozano
  • 4. Introducción a HTML5 Historia- Surgió como una cooperación en 2006 entre el W3C (World Wide Web Consortium) y el WHATWG (Web Hypertext Application Technology Working Group).- Algunas de las reglas: • Las nuevas características deben estar basadas en HTML, CSS y JavaScript. • Reducir la necesidad de plugins externos. • Más marcado para reducir scripting. • Independencia del dispositivo. José Luis Serrano Lozano
  • 5. Introducción a HTML5HTML + CSS 3 + JavaScript APIs = HTML5 José Luis Serrano Lozano
  • 6. Introducción a HTML5 Novedades- Nuevos elementos y atributos para contenido específico: header, nav, footer, article...- Algunos son similares a div y span pero añaden un significado semántico: <div> → <div id=”header”> → <header>- Otros proporcionan nuevas funcionalidades a través de una interfaz estandarizada.- Elementos audio y video para reproducción multimedia. José Luis Serrano Lozano
  • 7. Introducción a HTML5 Novedades- Nuevo elemento canvas para dibujos en 2D.- Nuevos tipos de inputs para un mejor manejo de los formularios, como calendar, date, email...- Se eliminan elementos obsoletos de HTML 4.01, incluyendo algunos puros de presentación: font, center, frame... José Luis Serrano Lozano
  • 8. Introducción a HTML5 Novedades- No sólo hay cambios en las etiquetas.- Nacen muchas APIs basadas en Javascript y que extienden el DOM: • Audio y Vídeo • Canvas 2D • Drag & Drop • Web Storage • Indexed BD José Luis Serrano Lozano
  • 9. Introducción a HTML5 Novedades• Web Workers• File API• Offline• Web Sockets• XMLHttpRequest 2• Geolocation José Luis Serrano Lozano
  • 10. Introducción a HTML5 Algunas diferencias con HTML4- DOCTYPE HTML 4.01: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> HTML 5: <!DOCTYPE html> José Luis Serrano Lozano
  • 11. Introducción a HTML5 Algunas diferencias con HTML4- HTML HTML 4.01: <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> HTML 5: <html lang="en"> José Luis Serrano Lozano
  • 12. Introducción a HTML5 Algunas diferencias con HTML4- META HTML 4.01: <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> HTML 5: <meta charset="utf-8" /> José Luis Serrano Lozano
  • 13. Introducción a HTML5 Nuevos elementos- De estructura: <section> Marcar una sección genérica en un documento. Se trata de un conjunto de contenido temático, normalmente con una cabecera. <nav> Declarar una sección navegacional de una página. Este elemento está pensando para los bloques de navegación más importantes de la página. José Luis Serrano Lozano
  • 14. Introducción a HTML5 Nuevos elementos- De estructura: <article> Marcar un contenido independiente o un bloque como un artículo, éste puede ser un artículo de una noticia, el post de un blog... Este contenido debe ser, en principio, reusable o distribuible de forma independiente. <aside> Envolver todo aquel contenido que sea relativo a la sección principal de un sitio, pero que no es el tema principal. Es habitual colocarlo a la derecha, por ejemplo: formulario de login, widgets de Facebook o Twitter, post antiguos... José Luis Serrano Lozano
  • 15. Introducción a HTML5 Nuevos elementos- De estructura: <hgroup> Representa la cabecera de una sección. Agrupa un conjunto de encabezados en un sólo bloque para que puedan ser usados como una única unidad. Sólo se pueden usar las etiquetas que van desde <h1> hasta <h6>. <header> Cabecera para la introducción de un documento o de una sección con las etiquetas <h1> hasta <h6> y <hgroup>, aunque no es obligatorio. Puede incluir navegación, una tabla de contenidos, un formulario de búsqueda o logos. José Luis Serrano Lozano
  • 16. Introducción a HTML5 Nuevos elementos- De estructura: <footer> Marcar el pie de un documento o de una sección, puede incluir el nombre del autor, la fecha del documento, información de contacto o información de copyright. José Luis Serrano Lozano
  • 17. Introducción a HTML5 Nuevos elementos- De agrupación de contenido: <figure> y <figcaption> Agrupar una sección de contenido autónomo. Es usado para marcar ilustraciones, diagramas, fotos, código fuente, gráficos... <figcaption> puede ser utilizado para asociar un título al contenido embebido. <div> No tiene ningún significado semántico especial. Debe ser utilizado como último recurso cuando no haya ningún otro elemento más adecuado, y sólo para marcar semánticamente y de forma común a un grupo consecutivo de elementos. José Luis Serrano Lozano
  • 18. Introducción a HTML5 Nuevos elementos- A nivel de texto: <mark> Marcar un texto que debe ser resaltado y diferenciado. Su función puede tener dependencia con el comportamiento del usuario, ya que en ocasiones esta etiqueta puede indicar algún tipo de actividad reciente. <time> Definir una hora o fecha, o ambos. José Luis Serrano Lozano
  • 19. Introducción a HTML5 Nuevos elementos- Interactivos: <details> y <summary> Proporcionan un área de contenido desplegable. Inicialmente se muestra un elemento <summary> que será con el que se alterne la visibilidad del contenido de forma interactiva. José Luis Serrano Lozano
  • 20. Introducción a HTML5 Nuevos elementos- Otros: <progress> Estado de un trabajo en progreso o tarea en curso. <meter> Representa una medida dentro de un rango conocido, sólo se puede utilizar si son conocidos los valores mínimo y máximo, por ejemplo el uso de disco, la fracción de una votación... José Luis Serrano Lozano
  • 21. Introducción a HTML5 Nuevos elementos- Multimedia: <audio> y <video> Para añadir y reproducir contenido multimedia, sonidos, música y vídeo. <source> Para definir los recursos de los elementos audio y video. <embed> Como contenedor para aplicaciones externas o plugins, como una animación Flash. <track> Para especificar subtítulos, títulos y otros ficheros que contengan texto y que deban visualizarse. José Luis Serrano Lozano
  • 22. Introducción a HTML5 Nuevos elementos- Veamos un ejemplo. José Luis Serrano Lozano
  • 23. Introducción a HTML5 Vídeo- En el pasado la única manera de introducir vídeo en una página web era a través de un plugin de terceros como podía ser Flash, Silverlight, Quicktime, Windows Media…- HTML5 incorpora una forma estándar de introducir vídeo en las páginas web.- Esta manera estándar está soportada por Firefox 3.5, Safari 3, Chrome, Opera, IE 9… José Luis Serrano Lozano
  • 24. Introducción a HTML5 Vídeo- Actualmente es una de las partes del estándar mejor soportada por casi todos los navegadores, aunque no todos son capaces de reproducir vídeos codificados en todos los formados.- Hay multitud de formatos de vídeo: Ogg Theora, H.264, WebM, MPEG-4, Flash video... José Luis Serrano Lozano
  • 25. Introducción a HTML5 Vídeo- Si queremos usar html 5 para reproducir vídeo y que funcione en todos los navegadores tendremos que codificar ese vídeo en varios formatos.- No todos los formatos son soportados por todos los navegadores.- Se definen nuevas APIs Javascript para la manipulación del elemento video: HTMLMediaElement y HTMLVideoElement. José Luis Serrano Lozano
  • 26. Introducción a HTML5 Vídeo<video id="elVideo" controls autoplay> <source src="clase.ogv" type="video/ogg"/> <source src="clase.mp4" /> Tu navegador no soporta vídeo.</video>var video = document.getElementById(elVideo);video.play(); // Reproducirvideo.pause(); // Pausarvideo.currentTime = 20; // Ir al segundo 20 del vídeo José Luis Serrano Lozano
  • 27. Introducción a HTML5 Vídeo- Veamos un ejemplo. José Luis Serrano Lozano
  • 28. Introducción a HTML5 Canvas- Sirve para dibujar gráficos en una página usando Javascript. Se trata de un área rectangular de la que podemos controlar cada uno de sus píxeles.- Su API ofrece toda una serie de métodos para pintar líneas, rectángulos, círculos, imágenes... <canvas id="elCanvas" width="200" height="200"></canvas> var canvas = document.getElementById("elCanvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "#ff0000"; ctx.fillRect(0, 0, 50, 50); ctx.fillStyle = "orange"; ctx.arc(50,50,15,0,Math.PI*2); ctx.fill(); José Luis Serrano Lozano
  • 29. Introducción a HTML5 Canvas- Veamos un ejemplo. José Luis Serrano Lozano
  • 30. Introducción a HTML5 Formularios- HTML5 ofrece toda una serie de nuevos tipos de campos de entrada que permiten construir y validar de manera estándar formularios mucho más ricos en aspecto y funcionalidad.- También trae algunos nuevos atributos que facilitan el control y la validación de los campos. José Luis Serrano Lozano
  • 31. Introducción a HTML5 Formularios- Placeholder Permite indicar un texto en el interior de un input que describe el valor esperado para el campo: <input name="texto" type=”text” placeholder="Introduce el texto a buscar" />- Autofocus Permite indicar el elemento del formulario en el que se deberá situar el foco al cargar la página: <input name="texto" type=”text” autofocus />- Required Permite indicar de forma nativa qué campos del formulario son obligatorios. <input name="texto" type=”text” required /> José Luis Serrano Lozano
  • 32. Introducción a HTML5 Formularios- Pattern Nos permite indicar la expresión regular que debe cumplir el texto del campo para que éste se considere correcto: <input name="texto" type=”text” pattern=”regexp” />- Novalidate Para desactivar todas las validaciones por defecto de un formulario: <form action=”” novalidate /> José Luis Serrano Lozano
  • 33. Introducción a HTML5 Formularios- Email Para la introducción de emails. En los dispositivos móviles se adapta el teclado: <input name="entrada" type="email" />- Url Destinado a la introducción de urls. Al igual que el anterior en los dispositivos móviles se adapta el teclado: <input name="entrada" type="url" /> José Luis Serrano Lozano
  • 34. Introducción a HTML5 Formularios- Numérico Nos permite indicar que se trata de un tipo de campo numérico. Podremos indicar el valor mínimo, el máximo, el intervalo permitido y el valor por defecto: <input name=”entrada” type="number" min="0" max="12" step="2" value="6" />- Rango Similar al campo de arriba, salvo por su representación visual, que será como un slider: <input type="range" min="0" max="12" step="2" value="6" name=”entrada” /> José Luis Serrano Lozano
  • 35. Introducción a HTML5 Formularios- Fecha Permite hasta 6 formas de introducir una fecha: date, month, week, time, datetime y datetime-local. <input name="entrada" type="date" />- Búsqueda Permite indicar que el elemento se trata de un campo de búsqueda. A efectos prácticos aporta poco, aunque algunos navegadores lo renderizan de una forma especial: <input name="entrada" type="search" /> José Luis Serrano Lozano
  • 36. Introducción a HTML5 Formularios- Color Permite seleccionar un color devolviendo su valor en hexadecimal fácil de usar en css: <input name="entrada" type="color" /> José Luis Serrano Lozano
  • 37. Introducción a HTML5 Formularios- A nivel de formulario: checkValidity(): valida todos los campos.- A nivel de inputs: checkValidity(): si el campo es válido. setCustomValidity(): asigna un mensaje de error personalizado y hace que automáticamente el formulario no se valide. willValidate: propiedad que indica si el campo debe ser validado o no atendiendo a su tipo. validationMessage: propiedad que indica el mensaje de error que se mostrará. validity: propiedad de tipo ValidityState que indica qué tipos de restricciones no se cumplen. José Luis Serrano Lozano
  • 38. Introducción a HTML5 Formularios- ValidityState: customError: cuando se ha indicado un mensaje de error personalizado. patternMismatch: si el valor no cumple con el patrón indicado. rangeOverflow: si el valor es superior al máx. rangeUnderflow: si el valor es inferior al mín. stepMismatch: si el valor no cumple con la regla del intervalo. tooLong: si el valor supera el tamaño máx. typeMismatch: si el valor no cumple la sintaxis esperada (tipo email, url...). valueMissing: si el campo es obligatorio pero no tiene valor. valid: cierta si son false todas las demás propiedades. José Luis Serrano Lozano
  • 39. Introducción a HTML5 Formularios- Veamos un ejemplo. José Luis Serrano Lozano
  • 40. Introducción a HTML5 Polyfills- Nos van a permitir utilizar las nuevas funcionalidades de HTML5 y CSS3 en navegadores antiguos.- Un polyfill es un bloque de código JavaScript que replica o emula una API estándar aportando funcionalidad futura a navegadores antiguos, permitiéndonos mantener la compatibilidad entre navegadores. José Luis Serrano Lozano
  • 41. Introducción a HTML5 Modernizr- Librería JavaScript que detecta la disponibilidad de implementaciones nativas de las características de HTML5 y CSS3. Modernizr.load([ { test : Modernizr.websockets, yep : recurso.js, nope : socket-io.js, both : [ app.js, extra.js ], complete : function () { myApp.init(); } } ]); José Luis Serrano Lozano
  • 42. Introducción a HTML5 Modernizr- Veamos un par de ejemplos. José Luis Serrano Lozano
  • 43. Introducción a HTML5 Geolocation- El API de geolocalización nos permite obtener la posición aproximada en la que se encuentra el navegador: navigator.geolocation.getCurrentPosition(function(pos) { alert( latitud: + pos.coords.latitude + nlongitud: + pos.coords.longitude); }, function(error) { var msg = Error desconocido; if(error.code == 1) { msg = Permiso denegado; } else if(error.code == 2) { msg = Posición no disponible; } else if(error.code == 3) { msg = Timeout; } console.log(Error: + error.code + --> + msg); }); José Luis Serrano Lozano
  • 44. Introducción a HTML5 WebSockets- WebSockets proporciona un socket sobre HTTP que permite comunicación bidireccional entre cliente y servidor en tiempo real. var connection = new WebSocket(ws://localhost:8080/Prueba/socketPrueba); connection.onopen = function () {}; connection.onerror = function (error) {}; connection.onmessage = function (e) { console.log(e.data); }; connection.send(mensaje a enviar); José Luis Serrano Lozano
  • 45. Introducción a HTML5 WebStorage- Web Storage permite almacenar pares clave-valor donde la clave será una cadena y el valor otra cadena.- Define dos tipos de almacenamiento con características distintas: •Session Storage •Local Storage- Se diferencian en como se comportan los datos en cuanto a durabilidad y ámbitos para el acceso. José Luis Serrano Lozano
  • 46. Introducción a HTML5 Session Storage- Elimina el problema de las cookies compartidas entre diferentes ventanas.- Sólo se debe guardar información efímera que no tenga que conservarse en diferentes sesiones. // Almacenar con setItem o directamente la propiedad con el nombre que deseamos usar: sessionStorage.nombre = nombre; sessionStorage.setItem(apellidos, apellidos); //Para recuperar accedemos bien por propiedad o bien mediante el método getItem: var nombre = sessionStorage.nombre; var apellidos = sessionStorage.getItem(apellidos); // Para eliminar con el método removeItem: sessionStorage.removeItem(nombre); sessionStorage.removeItem(apellidos); José Luis Serrano Lozano
  • 47. Introducción a HTML5 Local Storage- Permite almacenar información que perdurará aún cuando la ventana se cierre.- Es compartido entre las diferentes ventanas dentro de un mismo dominio. // Almacenar con setItem o directamente la propiedad con el nombre que deseamos usar: localStorage.nombre = nombre; localStorage.setItem(apellidos, apellidos); //Para recuperar accedemos bien por propiedad o bien mediante el método getItem: var nombre = localStorage.nombre; var apellidos = localStorage.getItem(apellidos); // Para eliminar con el método removeItem: localStorage.removeItem(nombre); localStorage.removeItem(apellidos); José Luis Serrano Lozano
  • 48. Introducción a HTML5 IndexedDB- Nos permite crear bases de datos en cliente asociadas a dominios.- No presentan tablas pero sí cierta estructura basada en objetos: object stores (almacenes de objetos).- Un object store es una asociación clave-valor.- Nos permite definir claves, índices y campos únicos.- Transaccionalidad, consulta, inserción, borrado, cursores... José Luis Serrano Lozano
  • 49. Introducción a HTML5 IndexedDBvar request = indexedDB.open(users);request.onsuccess = function(e) { var v = 1.0; database.db = e.target.result; var db = database.db; if(v != db.version) { var versionRequest = db.setVersion(v); versionRequest.onerror = database.onerror; versionRequest.onsuccess = function(e) { if(db.objectStoreNames.contains(objectStoreUsers)) { db.deleteObjectStore(objectStoreUsers); } db.createObjectStore(objectStoreUsers, { keyPath : email }); }; }}; José Luis Serrano Lozano
  • 50. Introducción a HTML5 IndexedDBdatabase.addUser = function(user) { var db = database.db; var transaction = db.transaction([objectStoreUsers], IDBTransaction.READ_WRITE); var objectStore = transaction.objectStore(objectStoreUsers); var putRequest = objectStore.put(user); putRequest.onsuccess = function(e) { alert("Usuario creado"); }; putRequest.onerror = database.onerror;}; José Luis Serrano Lozano
  • 51. Introducción a HTML5 File API- HTML5 introduce nuevas posibilidades para seleccionar ficheros y trabajar con ellos.- También ofrece un sistema de ficheros en el navegador en el que se pueden crear, modificar y borrar tanto directorios como ficheros. José Luis Serrano Lozano
  • 52. Introducción a HTML5 File API<input type=”file” id=”input-archivos-imagen” multiple=”multiple” accept=”image/*” />document.getElementById(“input-archivos-imagen”).addEventListener(change, getInfo);function getInfo(){ var files = this.files; for (var i=0; i<files.length; i++){ var file = files[i]; console.log(file.name + + file.type + + file.size); }} José Luis Serrano Lozano
  • 53. Introducción a HTML5 File API – Object URLfunction previsualizar(){ var files = this.files; var divPreview = document.getElementById(zonaPreview); for (var i=0; i<files.length; i++){ var img = document.createElement(image); img.src = window.URL.createObjectURL(files[i]); img.onload = function(e){ window.URL.revokeObjectURL(this.src); } divPreview.appendChild(img); } divPreview.style.display = ;} José Luis Serrano Lozano
  • 54. Introducción a HTML5 File API – File Systemwindow.requestFileSystem(window.TEMPORARY, 10*1024*1024 /*10MB*/, successInitFileSystem, fileSystemErrorHandler);function successInitFileSystem(fs) { fs.root.getFile(log.txt, {create: true, exclusive: true}, ok, error);}function leeFichero(fs){ fs.root.getFile(log.txt, {}, function(fileEntry){ fileEntry.file(function(file){ var reader = new FileReader(); reader.onloadend = function(e){ var contenido = this.result; } reader.readAsText(file); } }, error);} José Luis Serrano Lozano
  • 55. Introducción a HTML5 Web Workers- Permiten poder lanzar tareas en segundo plano sin que interfieran con el hilo principal.- Permiten el intercambio de mensajes con el hilo principal (en ambas Direcciones).- Pueden realizar tareas de comunicación con el servidor mediante XMLHttpRequest.- Un Worker no puede acceder al DOM ni a ningún componente que no sea thread-safe. José Luis Serrano Lozano
  • 56. Introducción a HTML5 Web Workers// Creación del worker desde el hilo principalvar miWorker = new Worker(‘fichero.js’);// Recibir mensajes del worker en el hilo principalmiWorker.onmessage = function(event){ alert(event.data);};// Finalizar worker desde el hilo principalmiWorker.terminate();// Enviar mensajes desde el hilo principalmiWorker.postMessage(obj);// Enviar mensajes desde el workerpostMessage(obj); José Luis Serrano Lozano
  • 57. Introducción a HTML5 Offline- A través de un simple fichero de meta-información.- Se trata de un fichero con una estructura que indica como debe actuar el navegador a la hora de cachear los recursos.- Debe servirse con la cabecera Content-Type igual “text/cache-manifest”. <!DOCTYPE HTML> <html manifest="/cache.manifest"> <body> ... </body> </html> José Luis Serrano Lozano
  • 58. Introducción a HTML5 OfflineCACHE MANIFESTNETWORK:/cuenta-visitasFALLBACK:/ /no-encontrado.htmlCACHE:/un.css/un.js/logo.jpg/contacta.html José Luis Serrano Lozano
  • 59. Introducción a HTML5 Offline- Para conocer si estamos online: navigator.onLine con valores true o false. Evento online del body que salta siempre que el navegador pasa de estado offline a online. Evento offline del body que salta siempre que el navegador pasa de estado online a offline. José Luis Serrano Lozano
  • 60. Introducción a HTML5 Drag & Drop- Para hacer un elemento “draggable” simplemente indicaremos su atributo draggable a true: <div draggable=”true” />- Sin embargo, tenemos que recurrir a los eventos nativos para realizar el seguimiento de toda la acción: dragstart, drag, dragenter, dragleave, dragover, drop, dragend- A través de la propiedad dataTransfer podremos enviar la información asociada a la acción de drag & drop. José Luis Serrano Lozano
  • 61. Introducción a HTML5 Recursos- Ejemplos y tutoriales:http://www.html5rocks.comhttp://html5demos.com- Soporte de los navegadores:http://www.fmbip.com/litmushttp://www.html5test.com- Tabla periódica de los elementos:http://html5facil.com/wp-content/uploads/2011/12/tabla-periodica-de-los-elementos-en-html5.png- Polyfills:https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills- Guía de referencia rápida:http://media.smashingmagazine.com/wp-content/uploads/images/html5-cheat-sheet/html5-cheat-sheet.pdf José Luis Serrano Lozano
  • 62. Introducción a HTML5MUCHAS GRACIAS!!!!José Luis Serrano Lozano

×