You are on page 1of 27

<

M.I. Edgar Alfonso Pérez García

>

<HTML5>
HTML5 (HyperText Markup Language, versión 5) es la quinta revisión importante del lenguaje básico de la World Wide Web, HTML. HTML5 = HTML + CSS + JS
Todavía se encuentra en modo experimental, lo cual indica la misma W3C; aunque ya es usado por múltiples desarrolladores web.
Tecnologías WEB M.I. Edgar Alfonso Pérez García

nav.VENTAJAS E INOVACIONES MANEJO DE ERRORES En HTML se pueden declarar inconsistencias en el lenguaje y etiquetas (tag soup) y aún así mostrar un resultado (no siempre deseado) en el Navegador. HTML5 contiene nuevas etiquetas que permiten una mejor comprensión y estructuración. Edgar Alfonso Pérez García . Esto debido a que HTML es un lenguaje interpretado. Ejemplo : article. PÁGINAS MEJOR ESTRUCTURADAS HTML hacia un uso excesivo de la etiqueta <div>. article Tecnologías WEB M.I. HTML5 intenta estandarizar estas definiciones así como un apropiado manejo de errores. aside. header. footer. hgroup.

Módulos anteriormente desarrollados en javascritp. •Web SQL database •Cache de Aplicaciones •Manipulación de archivos •Barras de Progreso •Nuevos Elementos de Formulario •Validación de elementos de Formulario •Formularios para Moviles •etc … Tecnologías WEB M. Edgar Alfonso Pérez García . jQuery o AJAX se incorporan como parte de HTML5.I. Permite descargar todos los contenidos necesarios y trabajar de forma local. •Drag and drop •Off-Line API.PLATAFORMA DE APLICACIONES HTML5 incorpora una variedad de herramientas para convertir al Navegador en una Plataforma API (application programming interfaces) .

Edgar Alfonso Pérez García . GRÁFICOS y VIDEOJUEGOS HTML5 proporciona soporte para gráficos vectoriales SVG y la nueva etiqueta <canvas> proporciona un lienzo para dibujar en el.GEOLOCALIZACIÓN Las aplicaciones web pueden tener acceso a la latitud y longitud donde se encuentre el usuario que accede a un website. permitiendo así gráficos en 2D y 3D. HTML5 proporciona un estándar común que permitirá la reproducción de sin tener que instalar elementos adicionales.I. Tecnologías WEB M. VIDEO NATIVO La reproducción de vídeos en la web iba ligada hasta hace bien poco a la instalación de Flash en nuestro navegador.

WEBSOCKETS Proporciona canales de comunicación FULL DUPLEX entre los Servidores. Edgar Alfonso Pérez García . con bases de datos (basadas en SQLite) o con almacenamiento de objetos por aplicación o por dominio Web (Local Storage y Global Storage).I. WEBWORKERS Hilos de ejecución en paralelo.API STORAGE Facilidad de almacenamiento persistente en local. Se dispone de una Base de datos con la posibilidad de hacer consultas SQL. Tecnologías WEB M. JAVASCRIPT Permite a Javascript correr en 2° plano o background.

Edgar Alfonso Pérez García .I.com/ Tecnologías WEB M.com/index.COMPATIBILIDAD Por el momento no todas las características de HTML5 son soportadas por todos los navegadores. http://html5test. Se hace una evaluación de los 5 navegadores más Antes de proceder a la parte de los ejemplos se deberá verificar la compatibilidad del navegador en el siguiente sitio y/o descargar la versión más reciente.html Para mayores informes de la compatibilidad visitar el siguiente sitio http://html5demos.

El año 2011 fue considerado el año del auge de HTML5 Tecnologías WEB M.I.La compatibilidad se ha venido dando gradualmente desde el año 2009. Edgar Alfonso Pérez García .

Edgar Alfonso Pérez García .<EJEMPLOS> Tecnologías WEB M.I.

Edgar Alfonso Pérez García .ESTRUCTURA Las nuevas etiquetas nos permiten generar una mejor y más legible estructuración de las páginas web ESTRUCTURA GENERAL DE HTML5 La declaración del doctype en HTML5 es más simple. <!DOCTYPE HTML> <html> <head> </head> <body> </body> </html> Tecnologías WEB M.I.

<!DOCTYPE HTML> <html> <head></head> <body> <header>PAGE HEADER</header> <nav>PAGE NAV</nav> <article> ARTICLE <header>Article Header</header> <section>Section 1</section> <section>Section 2</section> <footer>Article Footer</footer> </article> <div class="rightAside"> DIV <aside>Aside 1</aside> <aside>Aside 2</aside> </div> <footer>PAGE FOOTER</footer> </body> </html> Tecnologías WEB M. Edgar Alfonso Pérez García .I.

latitude. } </script> <a href="javascript:obtener_localizacion().getCurrentPosition(coordenadas).coords.GEOLOCALIZACIÓN <!DOCTYPE HTML> <html> <head> </head> <body> <script language="javascript"> function obtener_localizacion() { navigator.'+longitud+')'). Edgar Alfonso Pérez García . var longitud = position. } function coordenadas(position) { var latitud = position.I. alert('Tus coordenadas son: ('+latitud+'.longitude.coords.">Mostrar Posición</a> </body> </html> *Probar con Mozilla Firefox Tecnologías WEB M.geolocation.

FORMATOS DE AUDIO SOPORTADOS FORMATOS DE VIDEO SOPORTADOS Tecnologías WEB M. Edgar Alfonso Pérez García . Quick-Time o cualquier otro reproductor disponible y previamente instalado. Anteriormente se dependía mucho de FLASH.I.AUDIO Y VIDEO Las nuevas etiquetas <audio> y <video> nos permiten reproducir respectivamente los elementos sin la necesidad de tener instalados complementos adicionales.

AUDIO Y VIDEO <!DOCTYPE HTML> <html> <head> </head> <body> <audio id="audio" src="media/sientate_gorda.play().mp3" controls></audio> <script language="javascript"> document. </script> </body> </html> *Probar con Google Chrome Tecnologías WEB M. </script> <video id="video" src="media/homero1.I. Edgar Alfonso Pérez García .getElementById("video").getElementById("audio").mp4" autoplay controls></video> <script language="javascript"> document.muted = false.

I. mostrar los campos requeridos así como indicar algún error en cualquiera de sus campos TIPO DE CAMPO text DESCRIPCIÓN Campo de Texto email date range search tel color number url Correo electrónico Fecha Rango Resultados de Búsqueda Teléfono Paleta de Colores Numeric UpDown Url Tecnologías WEB M. Edgar Alfonso Pérez García .FORMULARIOS La validación de Formularios del lado del cliente siempre ha sido necesaria. Los nuevos campos de formulario y características permiten fácilmente validar el formulario.

} :invalid { border-color: #F88. -webkit-box-shadow: 0 0 3px rgba(0. Edgar Alfonso Pérez García .8). 0.} </style> Tecnologías WEB M. <style> [required] { border-color: #F00. . 255. .ATRIBUTO autocomplete autofocus pattern placeholder required CSS DESCRIPCIÓN Habilita o Deshabilita el modo de autocompletar Indica que un elemento obtendrá el foco al cargar la página Expresión regular para evaluar el contenido de un campo Pista o sugerencia para el valor del campo Indica si un campo es requerido (no vacío) Se agregan dos elementos útiles que interactúan con los <input> del formulario para denotar los campos requeridos y los campos inválidos. 0. -webkit-box-shadow: 0 0 5px rgba(255.5).I. 0.

com" required />*</br> Date</br><input type="date" min="2010-08-14" max="2012-12-21" value="2012-12-21"/></br> Range</br><input type="range" min="0" max="50" value="10" /></br> Search</br><input type="search" results="10" placeholder="Search.g..*?$" /></br> Color</br><input type="color" placeholder="e. #bbbbbb" /></br> Number</br><input type="number" step="1" min="-5" max="10" value="0" /></br> Url</br><input type="url" name="homepage" required />*</br> <input type="submit" value="Submit"> </form> *Probar con Google Chrome Tecnologías WEB M." /></br> Tel</br><input type="tel" placeholder="(444) 111-1111" pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.. Edgar Alfonso Pérez García .<form > Text</br><input type="text" required />*</br> Email</br><input type="email" value="some@email.I.

I. Edgar Alfonso Pérez García . (Correr ejemplo 7) Tecnologías WEB M. se puede encontrar muchos ejemplos y referencias en internet. Anteriormente el dibujo sobre un navegador implicaba mucha codificación en javascript o usando elementos jQuery o tecnología de servidor para generar imágenes.CANVAS 2d y 3d El canvas o lienzo de HTML5 nos permite dibujar en tiempo de ejecución (on the fly) usando javascrit. Para el canvas 3d es un poco m{as de programación en javascript.

getElementById('example'). // Se comienza a dibujar en el lienzo utilizando objetos // gráficos context.lineTo(225. } </script> <style type="text/css"> canvas { border: 2px solid black.fillStyle = "rgb(0.arc(125.fillStyle = "rgba(0.Math. context.0)".<!DOCTYPE HTML> <html> <head> <title>HTML5 Canvas example</title> <script> function drawPicture(){ // Se recupera el objeto canvas a modificar var canvas = document. 100). context.fill().6)". 0.PI*2. context. context.255.0. // Luego se le indicar la forma de trabajar 2D o 3D var context = canvas.getContext('2d'). *Probar con Google Chrome Tecnologías WEB M.100). context.0.0. 100.fillRect (25. context. 25. Edgar Alfonso Pérez García ."> <canvas id="example" width="260" height="200"> </canvas> </body> </html> context.0. context.moveTo(125.255.true). context.fill(). context.100.I. context.lineTo(175.beginPath().50.0.50).6)".beginPath().fillStyle = "rgba(255.150). } </style> </head> <body onload="drawPicture().

SPEECH Reconocimiento de voz como entrada Tecnologías WEB M. Edgar Alfonso Pérez García .OTROS CONTROLES METER Medida escalar con rango fijo o fraccionario PROGRESS Representa el Progreso de alguna tarea.I.

</progress></br> </br>PROGRESS 75%</br> <progress value="75" max="100">3/4 complete</progress></br> </br>SPEECH</br> <input type="text" x-webkit-speech /></br></body> </html> *Probar con Google Chrome Tecnologías WEB M...<!DOCTYPE HTML> <html> <head> </head> <body> </br>METER</br> <meter min="0" max="100" low="40" high="90" optimum="100" value="91">A+</meter></br> </br>PROGRESS</br> <progress>working.I. Edgar Alfonso Pérez García .

Tecnologías WEB M.I. Edgar Alfonso Pérez García .

BOILERPLATE HTML5 Boilerplate nos ofrece simplificar el proceso de construcción de sitios web en HTML5 y para ello nos permite descargar una especie de template o plantilla que puede ayudar no solo a los desarrolladores web novatos. Con H5BP podemos obtener código de los mejores gurus y programadores web. modelos y archivos de configuración con las mejores prácticas de programación.I. Edgar Alfonso Pérez García . Tecnologías WEB M. sino también a los más expertos. Ofrece una serie de técnicas. templates.

txt •Un archivo humans. Edgar Alfonso Pérez García .HTML5 BOILERPLATE nos ofrece entre otras cosas •Normalización para todos los navegadores (cross-browsing) •Optimización de performance •Optimizaciones para navegadores en dispositivos móviles •Clases específicas para IE.css •Un archivo reset. clases “no-js” y “js” para estilos basados en capacidades del navegador •Manejo y redirección de errores http •Un archivo .I.txt Tecnologías WEB M.css •Un archivo robots.htaccess que permite el uso correcto de características HTML5 y carga de página más rápida •Un archivo style.

I.adobe.org/ http://www.org/ http://meyerweb.TÉCNICAS Y STANDARES POPULARES PARA HTML5 http://humanstxt. Edgar Alfonso Pérez García .html Tecnologías WEB M.com/eric/tools/css/reset/ http://en.robotstxt.wikipedia.com/devnet/articles/crossdomain_policy_file_spec.org/wiki/Htaccess http://www.

I.<REFERENCIAS> Tecnologías WEB M. Edgar Alfonso Pérez García .

html5.matuk.com/ http://html5test.id.com/ http://www.com/en/ http://html5boilerplate.info/ BLOGS http://blog.magnoninternational.w3.script-tutorials.com/2010/09/html-vs-html5.html http://www.HTML5 http://www.com/2012/01/14/2011-el-ano-de-html5/ http://www.com/how-to-create-3d-canvas-object-in-html5/ Tecnologías WEB M.css3.arc.html5rocks.html http://www.html5rocks.org/ http://www.com/html/html5-page-structure.org/TR/html5-diff/ http://es.com/ http://slides.com/#web-sql-db http://platform.co.com/index.basewebmaster.html http://www.wikipedia.uk/dev/canvask3d/k3d_test.com/html5-benefits-and-comparison/ http://www.w3schools.techrepublic. Edgar Alfonso Pérez García .au/Canvas3DGraphics.I.techsutram.kevs3d.org/wiki/HTML5 http://www.php CANVAS 3D http://www.com/blog/10things/10-new-html5-tags-you-need-to-know-about/3219 http://www.html http://html5demos.