HTML5 ¿Que es HTML5? HTML5 TML5 es el nuevo estándar de HTML La versión anterior HTML 4.01 apareció en 1999. El web ha cambiado mucho desde entonces. HTML5 todavía esta en desarrollo, pero muchos browsers ya soportan algunas de sus características. Desarrollo de HTML5 Principios básicos de HTML5 ● Basarse en HTML, CSS, DOM, y JavaScript HTML5 es el resultado de la cooperación entre el World Wide Web Consortium (W3C) y el Web Hypertext Application Technology Working Group (WHATWG). ● Reducir la necesidad de plugins ● Mejor manejo de errores ● Remplazar scripting con etiquetas ● Independiente del dispositivo de visualización ● Proceso de desarrollo transparente para el público Nuevas características de HTML5 ● Elemento Canvas para dibujar ● Elementos de video y audio ● Almacenamiento de datos “offline” Estatus actual de HTML5 HTML5 no es todavía un estándar oficial y ningún browser lo soporta completamente pero es en general bien soportado por los principales navegadores: Firefox, Safari, Chrome, Opera, Internet Explorer 9, ... ● Elementos asociados con el contenido: article, Se puede detectar si el navegador utilizado tiene soporte para caracteristicas individuales como canvas, video, etc. footer, header, nav, section ● Nuevos controles en las formas: calendar, date, time, email, url, search Se recomienda utilizar las características disponibles conforme vayan apareciendo. Detección de HTML5 Cuando un browser despliega una página web, se construye un “Document Object Model” (DOM), el cual consiste en una colección de objetos que representan los elementos HTML de la página. Cada elemento es representado en el DOM por un objeto. En los browsers que soportan HTML5, ciertos objetos tendrán propiedades únicas que pueden servir para saber que características de HTML5 están soportadas. Detección de HTML5 (cont (cont…) …) Modernizer es una librería JavaScript open source que detecta las características HTML5 y CSS3 que son soportadas por el browser. Detección de HTML5 (cont (cont…) …) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5 sure is fun</title> <script src="modernizr.min.js"></script> </head> <body> ... </body> </html> Detección de HTML5 (cont (cont…) …) if (Modernizr.canvas) { // let's draw some shapes! } else { // no native canvas support available :( } Detección de HTML5 (cont (cont…) …) Modernizr se ejecuta automáticamente y se crea un objeto global llamado Modernizr, el cual contiene un conjunto de propiedades booleanas por cada característica que puede detectar. Por ejemplo, si el browser soporta el API canvas, La propiedad Modernizr.canvas tendrá el valor de “true”. Nuevos elementos en HTML5 Consultar: http://www.w3schools.com/html5/ Nuevos elementos en HTML5 (cont..) Nuevos elementos en HTML5 (cont..) Estructura semántica • Nuevos controles de formularios • Audio y Video • Gráficas 2D/3D • ANTES Ahora, elementos semánticos HTML5: Video HTML5: Video (cont ...) Hasta ahora no existía un estandar para mostrar video en un a página web. La mayoría de los videos se muestran mediante un plugin (por ejemplo Flash). Currently, there are 3 supported video formats for the video element: HTML5 especifica una manera estandar para incuir video mediante el elemento <video> HTML5: Video (cont ...) HTML5: Video (cont ...) <!DOCTYPE HTML> <html> <body> El elemento <video> admite la especificación de múltiples fuentes para que el browser utilice la primera que reconozca. <video src="movie.ogg" width="320" height="240" controls="controls"> Your browser does not support the video tag. </video> <video width="320" height="240" controls="controls"> <source src="movie.ogg" type="video/ogg" /> <source src="movie.mp4" type="video/mp4" /> <source src="movie.webm" type="video/webm" /> Your browser does not support the video tag. </video> </body> </html> HTML5: Video (cont ...) Atributos de <video> HTML5: Audio HTML5: Audio (cont ...) Hasta ahora no existía un estandar para incluir audio en un a página web. La mayoría de los audios se escuchan mediante un plugin (por ejemplo Flash). HTML5 especifica una manera estandar para incuir audio mediante el elemento <audio> Currently, there are 3 supported formats for the audio element: HTML5: Audio (cont ...) <!DOCTYPE HTML> <html> <body> <audio src="song.ogg" controls="controls"> Your browser does not support the audio element. </audio> HTML5: Audio (cont ...) El elemento <audio> admite la especificación de múltiples fuentes para que el browser utilice la primera que reconozca. <audio controls="controls"> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" /> Your browser does not support the audio element. </audio> </body> </html> Nuevas funcionalidades HTML5: Atributos de <audio> Canvas • Scalable Vector Graphics (SVG) • Drag and drop • Web Storage • Geolocation • App Cache • Server-Sent Sent Events (SSE) • Web sockets • HTML5: Canvas El elemento canvas de HTML 5 permite hacer dibujos utilizando javascript. Existen métodos para dibujar líneas, rectángulos, circúlos, etc. Un canvas es un área rectangular en la pantalla. HTML5: Canvas (cont...) Para dibujar en el elemento <canvas> es indispensable utilizar javascript. <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); </script> HTML5: Canvas (cont...) EJEMPLO <canvas id="myCanvas" width="200" height="100"></canvas> SVG <!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:yellow;stroke:brown;stroke style="fill:yellow;stroke:brown;stroke-width:5;fill-rule:evenodd;“/> </svg> </body> </html> Drag and Drop <!DOCTYPE HTML> <html><head> <style type="text/css"> div {width:120px;height:120px;padding:10px;border:1px solid #aaaaaa;} </style> <script> function allowDrop(ev){ev.preventDefault();} function drag(ev){ev.dataTransfer.setData("Text",ev.target.id);} function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> Drag and Drop (cont…) cont…) Drag and Drop (cont…) cont…) <body ondrop="drop(event)" ondragover="allowDrop(event)"> <p>Drag the image into a square or into the body:</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"> <img id="drag1" src="liebre.jpg" draggable="true" ondragstart="drag(event)" > </div> <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br/> </body> </html> HTML5: Web Storage El objeto localStorage almacena datos permanentemente. El objeto sessionStorage almacena los datos pero los borra cuando se cierra el browser. <!DOCTYPE html> <html> <body> <div id="result"></div> <script> if(typeof(Storage)!=="undefined"){ localStorage.lastname="Smith"; document.getElementById("result").innerHTML="Last name: " + localStorage.lastname; }else{ document.getElementById("result").innerHTML="Sorry, your browser does not support web storage..."; } </script></body></html> Geolocation Geolocation <!DOCTYPE html> <html> <body> <p id="demo">Click the button to get your coordinates:</p> <button onclick="getLocation()">Try It</button> <script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else{x.innerHTML="Geolocation is not supported by this browser.";} } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; } </script> </body> </html> Formas HTML5: datos de entrada HTML5: Input types HTML5 tiene nuevos tipos de entrada de datos. Los datos se validan automáticamente ● ● ● ● ● email url number range date pickers (date, month, week, time, datetime, datetime-local) local) ● search ● color Note: Opera has the best support for the new input types. However, you can already start using them in all major browsers. If they are not supported, they will behave as regular text fields. HTML5: Input - e-mail HTML5: Input - range Points: <input type="range" name="points" min="1" max="10" /> <form action="demo_form.asp"> E-mail: mail: <input type="email" name="usremail" /> <br /><input type="submit" value="Send" /> </form> No pemite enviar un e-mail Incorrecto. Si el browser no soporta el tipo de entrada lo despliega como tipo texto HTML5 HTML 5: Input – date <form action="demo_form.asp"> Birthday: <input type="date" name="bday" /> <input type="submit" /> </form> HTML5: Input – color <!DOCTYPE html> <html> <body> <form action="demo_form.asp"> Select your favorite color: <input type="color" name="favcolor" /><br /> <input type="submit" /> </form> </body> </html> list attribute and <datalist <datalist> > element Formas: <datalist <datalist> > element (cont…) cont…) <!DOCTYPE html> <html><body> <form action="demo_form.asp" method="get"> <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input type="submit"> </form> <p> <b>Note:</b> The datalist tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p> </body> </html> Formas: Nuevos Atributos Soporte de los browsers Input Type • Atributos de las formas • • • autocomplete novalidate Atributos de los inputs • • • • • • • • • • • autocomplete autofocus form form overrides (formaction formaction, formenctype, formmethod, formnovalidate, formnovalidate formtarget) height and width list min, max and step multiple pattern (regexp) placeholder required autocomplete IE Firefox Opera Chrome Safari 4 8 3.5 9.5 3 autofocus No 4 10 3 4 form No 4 9.5 10 No form overrides No 4 10.5 10 No 8 3.5 9.5 3 4 No 4 9.5 No No height and width list min, max and step No No 9.5 3 No multiple No 3.5 11 3 4 novalidate No 4 11 10 No pattern No 4 9.5 3 No placeholder No 4 11 3 3 required No 4 9.5 3 No