HTML5 en Acción

5,092 views

Published on

Presentación de HTML5 que se hizo en Arequipa en el Instituto del Sur el 19.11.2011

Published in: Design
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
5,092
On SlideShare
0
From Embeds
0
Number of Embeds
2,837
Actions
Shares
0
Downloads
91
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

HTML5 en Acción

  1. 1. HTML5 en Acción Guisella Acuña
  2. 2. ¿Quién soy? Guisella Acuña Diseñadora web @DraRock guisella@bell-n-whistle.com www.bell-n-whistle.com
  3. 3. IETF hasta W3C: El camino a HTML4 HTML 2.0 IETF La etiqueta <img> aparece en esta especificación
  4. 4. IETF hasta W3C: El camino a HTML4 HTML 4.01 W3C Especificación publicada en 1999
  5. 5. XHTML1: HTML como XML XHTML 1.0 W3C Especificación idéntica a la de HTML 4.01, excepto por la sintaxis
  6. 6. WHATWG WHATWG Conformado por representantes de Opera, Apple y Mozilla Editor Ian Hickson
  7. 7. Web Apps 1.0 a HTML5 Web Forms 1.0 & Web Apps 1.0 Se busca permitir la creación de aplicaciones web
  8. 8. Web Apps 1.0 a HTML5 HTML5
  9. 9. Reunificación HTML5 WHATWG une fuerzas con la W3C
  10. 10. ¿Cuándo estará listo?
  11. 11. 2022Según Ian Hickson
  12. 12. 2012Draft terminado
  13. 13. Doctype Pre-HTML5 <!DOCTYPE HTML 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> ...
  14. 14. Doctype HTML5 <!DOCTYPE html> <html> <meta charset="UTF-8"> <title>Cool</title> </head> ...
  15. 15. No necesitamos atributo Type 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>
  16. 16. XHTMLXHTML nos dejó: • Etiquetas en minúscula • Cerrar las etiquetas • No dejar atributos en blanco (disabled=”disabled”) • Siempre poner valores de atributos en comillas dobles
  17. 17. HTML5 Tú eliges
  18. 18. Mantén un código limpio, te lo agradecerás más tarde
  19. 19. Le decimos adiós a: • 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...
  20. 20. 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
  21. 21. SEMÁNTICA
  22. 22. Semántica
  23. 23. SemánticaNuevas etiquetas semánticas: • section, article, aside, header, footer, nav, menu, hgroup, command, dialog, figure, details
  24. 24. Semántica
  25. 25. Semántica IE no reconoce las nuevas etiquetas
  26. 26. 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
  27. 27. 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
  28. 28. Web Forms 2.0 http://www.coreservlets.com/html5-tutorial/input-types.html
  29. 29. OFFLINE &ALMACENAMIENTO
  30. 30. Offline & Almacenamiento DOM Storage sessionStorage.setItem(key, value); sessionStorage.getItem(key); localStorage.setItem(key,value); localStorage.getItem(key);
  31. 31. Offline & Almacenamiento <html manifest=”cache.manifest”> Detección online / offline window.addEventListener(‘online’,online, true); window.addEventListener(‘offline’,online, true);
  32. 32. Offline & Almacenamiento WebSQL Storage Bases de datos de lado cliente usando SQL
  33. 33. Offline & Almacenamiento http://www.jstorage.info/
  34. 34. ACCESO A DISPOSITIVOS
  35. 35. 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
  36. 36. CONECTIVIDAD
  37. 37. Conectividad • Conectividad má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.
  38. 38. RENDIMIENTO EINTEGRACIÓN
  39. 39. Rendimiento e Integración • Web Workers • XMLHttpRequest 2 • Acceso a archivos locales
  40. 40. MULTIMEDIA
  41. 41. Multimedia • Video y Audio • Audio Data API • Time Track API
  42. 42. 3D, GRÁFICOS, EFECTOS
  43. 43. 3D, Gráficos, Efectos • 2D Canvas • WebGL • SVG • 3D CSS Transforms • SMIL
  44. 44. CSS3
  45. 45. CSS3 • Transformaciones 2D y 3D • Transiciones • Web Fonts • Multiples backgrounds • text-shadow, box-shadow, border-radius
  46. 46. Adopten las nuevas tecnologías y sigan adelante
  47. 47. Links Demos y Recursos • 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)
  48. 48. Links HTML5 y CSS3 • 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
  49. 49. 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/
  50. 50. Gracias ^_^

×