Descargar para leer sin conexión
Html5 g@tv
Este documento presenta una introducción a HTML5. Cubre las nuevas etiquetas y funcionalidades de HTML5 como video, audio, geolocalización y formularios. También describe las herramientas para desarrollar en HTML5 y las nuevas APIs de JavaScript para controlar los nuevos elementos. Además, explica características como almacenamiento local, web offline, canvas y web workers. Por último, menciona los prefijos necesarios para usar algunas funciones de CSS3 en diferentes navegadores.
![[Code Camp 2009] Introducción a ASP.NET 4.0 con Visual Studio 2010 (Ignacio L...](https://cdn.slidesharecdn.com/ss_thumbnails/codecamp2009introduccinaasp-net4-0convisualstudio2010ignaciolpezhernnnbilepabloalisicioni-100119112405-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
Html5 g@tv
- 1.
- 2. G@TV - HTML5 • Introducción • Herramientas • Nuevas funcionalidades • Javascript • CSS3 Índice
- 3. G@TV - HTML5 Introducción I Conjunto de estándares y recomendaciones del W3C Actualmente el estado en que se encuentran la mayoría: - Working Draft - Candidate Recomendation - Last Call Draft Video Forms Geolocalization
- 4. G@TV - HTML5 Introducción y II Diferencias HTML4 Más Sencillo: HTML 4 HTML 5 <!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=UTF-8"> <meta charset="UTF-8"> Case Sensitive X Estructura estricta X Nuevas Etiquetas: <nav> <aside> <article> <section> <header> <footer> <figure> <video> <audio> <track> <canvas> <embed> <details> <menuitem> <time>
- 5. G@TV - HTML5 Herramientas Navegadores Editores de texto • Notepad++ • Ultraedit • Eclipse • SublimeText 2(Mac) • Jsfiddle (http://jsfiddle.net/) online Plug-ins Debug • Firebug • Herramientas de desarrollador de cada navegador
- 6. G@TV - HTML5 Nuevas funcionalidades IVideo & Audio - Introducir nativamente estos elementos - <video></video> (Dependiendo del navegador) - Mp4 - Ogv - webM - <audio></audio> - API de control mediante Js. - Introducción dentro del DOM - Personalización - Control de errores - Librerías libres (video.js, Kaltura) - Ejemplo http://www.barbafan.de/html5video?video=tron
- 7. G@TV - HTML5 Nuevas funcionalidades IIGeolocalization & Forms - GEO - Obtener posición del navegador - getCurrentPosition() - Siempre hay que pedir permiso - Forms - Nuevos atributos para <input> - Máximos y mínimos - Fecha - Validación - Nuevos elementos - Progress - Output
- 8. G@TV - HTML5 Nuevas funcionalidades IIILocal Storage & Offline Web - Local Storage - Cookies - Mayor necesidad de almacenamiento - Basado en paradigma Clave/Valor - Dos tipos de objetos: - localStorage - sesionStorage - Offline web - <html manifest=“fichero”> - Hasta que se borre cache nav - Modifique el fichero CACHE MANIFEST # 2012-02-21 v1.0.0 /estilo.css /logo.gif /main.js NETWORK: login.asp FALLBACK: /html/ /offline.html
- 9. G@TV - HTML5 Nuevas funcionalidades IVCanvas - Lienzo para dibujar - Animaciones 2D / 3D - API Js <canvas id=“miCanvas”> Su navegador no soporta Canvas </canvas> var canvas = document.getElementById(‘miCanvas'); var context = canvas.getContext('2d'); - Ejemplo - http://www.craftymind.com/factory/html5video/CanvasVideo.html
- 10. G@TV - HTML5 Nuevas funcionalidades VWeb Workers - Generación de comandos en segundo plano - Comunicación por paso de mensajes - Es útil para: - Procesado de gran cantidad de datos - Llamadas AJAX (XHR XMLHttpRequest) - Procesos en paralelo (shareWorkers) var worker = new Worker('worker.js'); worker.onmessage = function (event) { document.getElementById('result').textContent = event.data; };
- 11. G@TV - HTML5 Javascript Java is to Javascript like Ham is to Hamster Basado en ECMAScript. Interpretado en el navegador. API’s para el control de los nuevos elementos basado en eventos Json (Javascript Object Notation) Uso de Frameworks: • jQuery • Dojo • Prototype • MooTools • Yui Library (Yahoo!)
- 12. G@TV - HTML5 CSS3 • Diseño modular en contraposición a CSS2 • Transformaciones • Selectores • Animaciones • Para algunas funcionalidades usar prefijos: -webkit- (Chrome, Safari) -ms- (iexplorer) -moz- (Firefox) -o- (Opera)
- 13. G@TV - HTML5 http://www.w3.org/standards/techs/html#w3c_all https://rawgithub.com/whatwg/html-differences/master/Overview.html http://en.wikipedia.org/wiki/List_of_JavaScript_libraries http://diveintohtml5.org/ http://html5boilerplate.com/ http://www.modernizr.com/ http://coding.smashingmagazine.com/2010/10/11/local-storage-and-how-to- use-it/ http://webdesignish.com/best-html5-and-css3-frameworks.html http://www.netmagazine.com/features/developer-s-guide-html5-apis http://html5demos.com/ http://www.webappers.com/2009/08/10/70-must-have-css3-and-html5- tutorials-and-resources/ http://net.tutsplus.com/tutorials/html-css-techniques/html5-javascript-apis/ http://www.w3schools.com/cssref/default.asp http://caniuse.com/ Referencias y Webs de interés
- 14. G@TV - HTML5 http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video- and-audio/ https://developer.mozilla.org/en-US/docs/Web/HTML/Using_HTML5_audio_and_video http://www.html5rocks.com/en/ http://slides.html5rocks.com http://www.whatwg.org/specs/web-apps/current-work/multipage/workers.html Referencias y Webs de interés