Descargado 91 veces
Subido pordrarock
HTML5 en Acción
Este documento proporciona una introducción a HTML5. Resume la historia de HTML desde sus inicios hasta la actual especificación HTML5 desarrollada por WHATWG y W3C. Destaca las nuevas características semánticas, de formularios, almacenamiento, multimedia y gráficos 3D que introduce HTML5.
Más contenido relacionado
HTML5 en Acción
- 1. HTML5 en Acción Guisella Acuña
- 2. ¿Quién soy? Guisella Acuña Diseñadora web @DraRock guisella@bell-n-whistle.com www.bell-n-whistle.com
- 3. IETF hasta W3C:El camino a HTML4 HTML 2.0 IETF La etiqueta <img> aparece en esta especificación
- 4. IETF hasta W3C:El camino a HTML4 HTML 4.01 W3C Especificación publicada en 1999
- 5. XHTML1: HTML comoXML XHTML 1.0 W3C Especificación idéntica a la de HTML 4.01, excepto por la sintaxis
- 6. WHATWG WHATWG Conformado por representantes de Opera, Apple y Mozilla Editor Ian Hickson
- 7. Web Apps 1.0a HTML5 Web Forms 1.0 & Web Apps 1.0 Se busca permitir la creación de aplicaciones web
- 8. Web Apps 1.0a HTML5 HTML5
- 9. Reunificación HTML5 WHATWG une fuerzas con la W3C
- 10.
- 11.
- 12.
- 14. Doctype Pre-HTML5 <!DOCTYPEHTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Cool</title> </head> ...
- 15. Doctype HTML5 <!DOCTYPEhtml> <html> <meta charset="UTF-8"> <title>Cool</title> </head> ...
- 16. No necesitamos atributoType Pre-HTML5 <script type=”text/javascript”src=”script.js”></script> <link type=”text/css” href=”style.css”></link> HTML5 <script src=”script.js”></script> <link href=”style.css”></link>
- 17. XHTML XHTML nos dejó: • Etiquetas en minúscula • Cerrar las etiquetas • No dejar atributos en blanco (disabled=”disabled”) • Siempre poner valores de atributos en comillas dobles
- 18. HTML5 Tú eliges
- 19. Mantén un códigolimpio, te lo agradecerás más tarde
- 20. Le decimos adiósa: • frames (marcos) • acronym, basefont, big, center, font, s strike, tt, u • Atributo language en script y type en link • Más atributos de presentación: cellpadding, cellspacing, width, height en tablas y celdas, align, valign, size en inputs...
- 21. HTML5 nos trae: • Web Applications 1.0 • Describe el comportamiento del navegador • Describe estructura de página • Nuevas etiquetas • Nuevos atributos • Nuevas habilidades en Javascript • Definición del DOM
- 22.
- 23.
- 24. Semántica Nuevas etiquetas semánticas: • section, article, aside, header, footer, nav, menu, hgroup, command, dialog, figure, details
- 25.
- 26. Semántica IE no reconoce las nuevas etiquetas
- 27. Semántica JavaScript al rescate! Habilitar etiquetas HTML5 http://remysharp.com/2009/01/07/html5-enabling-script/ CSS3 http://css3pie.com/ Canvas http://excanvas.sourceforge.net/ Modernizr http://www.modernizr.com
- 28. Web Forms 2.0 • Input types: date, time, email, url, color, search, number... • Validación lado cliente • El navegador provee una interfaz de usuario • Atributos: placeholder, autofocus, autocomplete, required, min, max,... • Validación con expresiones regulares
- 29. Web Forms 2.0 http://www.coreservlets.com/html5-tutorial/input-types.html
- 30.
- 31. Offline & Almacenamiento DOM Storage sessionStorage.setItem(key, value); sessionStorage.getItem(key); localStorage.setItem(key,value); localStorage.getItem(key);
- 32. Offline & Almacenamiento <html manifest=”cache.manifest”> Detección online / offline window.addEventListener(‘online’,online, true); window.addEventListener(‘offline’,online, true);
- 33. Offline & Almacenamiento WebSQL Storage Bases de datos de lado cliente usando SQL
- 34. Offline & Almacenamiento http://www.jstorage.info/
- 35.
- 36. Acceso a dispositivos • Geolocalización http://html5demos.com/geo • Acceso a cámara y micrófono • Acceso a contactos, calendario e inclinación del dispositivo
- 37.
- 38. Conectividad • Conectividadmás efectiva • Web Sockets • Mensajería en tiempo real, juegos más rápidos y mejor comunicación • Intercambio de data entre cliente y servidor nunca fue tan rápida.
- 39.
- 40. Rendimiento e Integración • Web Workers • XMLHttpRequest 2 • Acceso a archivos locales
- 41.
- 42. Multimedia • Videoy Audio • Audio Data API • Time Track API
- 43.
- 44. 3D, Gráficos, Efectos • 2D Canvas • WebGL • SVG • 3D CSS Transforms • SMIL
- 45.
- 46. CSS3 • Transformaciones2D y 3D • Transiciones • Web Fonts • Multiples backgrounds • text-shadow, box-shadow, border-radius
- 47. Adopten las nuevastecnologías y sigan adelante
- 48. Links Demos yRecursos • http://www.chromeexperiments.com/ • http://html5demos.com/ • http://www.html5rocks.com/en/ • http://www.coreservlets.com/html5-tutorial/input-types.html • http://jsbin.com/#javascript,html,live (para probar código en el navegador) • http://html5test.com/ (testing de compatibilidad)
- 49. Links HTML5 yCSS3 • http://www.nikebetterworld.com/ (ver como se hizo en http://coding.smashingmagazine.com/2011/07/12/behind-the-scenes-of-nike- better-world/ ) • http://www.culturalsolutions.co.uk/ • http://robedwards.org/ • http://www.viniltec.com.br • http://www.netlashproject.be/ • http://teamviget.com/ • http://www.trifermed.com/ • http://www.nintendo.com.au/gamesites/mariokartwii/ • http://beta.theexpressiveweb.com/ • http://www.webkit.org/blog-files/3d-transforms/poster-circle.html
- 50. Experimentos HTML5 •http://mrdoob.com/ • http://nouvellevague.ultranoir.com/ • http://www.drawastickman.com/ • http://lights.elliegoulding.com • http://www.thewildernessdowntown.com/ • http://www.chromeexperiments.com/
- 51.