HTML5 es el nuevo estándar de HTML. La versión anterior HTML 4.01 apareció en. entonces.

Tamaño: px

Comenzar la demostración a partir de la página:

Download "HTML5 es el nuevo estándar de HTML. La versión anterior HTML 4.01 apareció en. entonces."

Luis Miguel Escobar Redondo
hace 8 años
Vistas:

1 HTML5 Que es HTML5? HTML5 es el nuevo estándar de HTML La versión anterior HTML 4.01 apareció en 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 HTML5 es el resultado de la cooperación entre el World Wide Web Consortium (W3C) y el Web Hypertext Application Technology Working Group (WHATWG). Basarse en HTML, CSS, DOM, y JavaScript 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

Desarrollo de HTML5 Principios básicos de HTML5 HTML5 es el resultado de la cooperación entre el World Wide Web Consortium (W3C) y el Web Hypertext Application

2 Nuevas características de HTML5 Elemento Canvas para dibujar Elementos de video y audio Almacenamiento de datos offline Elementos asociados con el contenido: article, footer, header, nav, section Nuevos controles en las formas: calendar, date, time, , url, search 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,... Se puede detectar si el navegador utilizado tiene soporte para caracteristicas individuales como canvas, video, etc. 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 ) Modernizer es una librería JavaScript open source que detecta las características HTML5 y CSS3 que son soportadas por el browser.

bien soportado por los principales navegadores: Firefox, Safari, Chrome, Opera, Internet Explorer 9,.

3 Detección de HTML5 (cont ) Detección de HTML5 (cont ) <!DOCTYPE html> <head> <meta charset="utf-8"> <title>html5 sure is fun</title> <script src="modernizr.min.js"></script> </head>... 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. Detección de HTML5 (cont ) Nuevos elementos en HTML5 if (Modernizr.canvas) { // let's draw some shapes! } else { // no native canvas support available :( } Consultar:

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

4 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

formularios Audio y Video Gráficas 2D/3D ANTES

5 HTML5: Video 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). HTML5: Video (cont...) 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> <video src="movie.ogg" width="320" height="240" controls="controls"> Your browser does not support the video tag. </video> El elemento <video> admite la especificación de múltiples fuentes para que el browser utilice la primera que reconozca. <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>

..) <!DOCTYPE HTML> <video src="movie.ogg" width="320" height="240" controls="controls"> Your browser does not support the video tag.

6 HTML5: Video (cont...) Atributos de <video> HTML5: Audio 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: Audio (cont...) Currently, there are 3 supported formats for the audio element: HTML5 especifica una manera estandar para incuir audio mediante el elemento <audio>

un a página web. La mayoría de los audios se escuchan mediante un plugin (por ejemplo Flash).

7 HTML5: Audio (cont...) HTML5: Audio (cont...) <!DOCTYPE HTML> <audio src="song.ogg" controls="controls"> Your browser does not support the audio element. </audio> 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> HTML5: Atributos de <audio> Nuevas funcionalidades Canvas Scalable Vector Graphics (SVG) Drag and drop Web Storage Geolocation App Cache Server-Sent Sent Events (SSE) Web sockets

<audio controls="controls"> <source src="song.ogg" type="audio/ogg" /> <source src="song.

8 HTML5: Canvas HTML5: Canvas (cont...) 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. EJEMPLO <canvas id="mycanvas" width="200" height="100"></canvas> 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> SVG <!DOCTYPE html> <svg xmlns=" version="1.1" height="190"> <polygon points="100,10 40, ,60 10,60 160,180" style="fill:yellow;stroke:brown;stroke-width:5;fill-rule:evenodd; /> </svg>

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

Drag and Drop <!DOCTYPE HTML> <head> <style type="text/css"> div {width:120px;height:120px;padding:10px;border:1px solid #aaaaaa;} </style> <script> function allowdrop(ev){ev.

9 Drag and Drop <!DOCTYPE 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 ) <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/> Drag and Drop (cont ) 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> <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>

getelementbyid(data)); } </script> </head> Drag and Drop (cont ) <body ondrop="drop(event)" ondragover="allowdrop(event)"> <p>drag the image into a square or into the body:</p> <div id="div1"

10 Geolocation Geolocation <!DOCTYPE html> <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> Formas HTML5: datos de entrada HTML5: Input types HTML5 tiene nuevos tipos de entrada de datos. Los datos se validan automáticamente url number range date pickers (date, month, week, time, datetime, datetime-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.

";} } function showposition(position) { x.innerhtml="latitude: " + position.coords.

HTML5: Input - e-mail HTML5: Input - range Points: <input type="range" name="points" min="1" max="10" /> <form action="demo_form.

11 HTML5: Input - HTML5: Input - range Points: <input type="range" name="points" min="1" max="10" /> <form action="demo_form.asp"> <input type=" " name="usr " /> <br /><input type="submit" value="send" /> </form> No pemite enviar un Incorrecto. Si el browser no soporta el tipo de entrada lo despliega como tipo texto HTML5: Input date HTML5: Input color <form action="demo_form.asp"> Birthday: <input type="date" name="bday" /> <input type="submit" /> </form> <!DOCTYPE html> <form action="demo_form.asp"> Select your favorite color: <input type="color" name="favcolor" /><br /> <input type="submit" /> </form>

Si el browser no soporta el tipo de entrada lo despliega como tipo texto HTML5: Input date HTML5: Input color <form action="demo_form.

12 list attribute and <datalist> element Formas: <datalist> element (cont ) <!DOCTYPE html> <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> Formas: Nuevos Atributos Atributos de las formas autocomplete novalidate Atributos de los inputs autocomplete autofocus form form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget) height and width list min, max and step multiple pattern (regexp) placeholder required Soporte de los browsers Input Type IE Firefox Opera Chrome Safari autocomplete autofocus No 4 form No 4 form overrides No 4 height and width list No 4 min, max and step No No multiple No 3.5 novalidate No 4 pattern No 4 placeholder No 4 required No No No No No No No No No

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.

Documentos relacionados

HTML5: Nuevas etiquetas semánticas. Juan Eladio Sánchez Rosas

HTML5: Nuevas etiquetas semánticas Juan Eladio Sánchez Rosas Objetivo Semantics Objetivo de la sesión Presentar y describir las nuevas etiquetas del estándar HTML5 Citar los antecedentes que derivaron