HTML5 en Acción
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

HTML5 en Acción

on

  • 5,335 views

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

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

Statistics

Views

Total Views
5,335
Views on SlideShare
2,520
Embed Views
2,815

Actions

Likes
1
Downloads
85
Comments
1

4 Embeds 2,815

http://blog.aqphost.com 2811
http://abtasty.com 2
http://a0.twimg.com 1
https://www.google.com.pe 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5 en Acción Presentation Transcript

  • 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 como XML 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.0 a HTML5 Web Forms 1.0 & Web Apps 1.0 Se busca permitir la creación de aplicaciones web
  • 8. Web Apps 1.0 a HTML5 HTML5
  • 9. Reunificación HTML5 WHATWG une fuerzas con la W3C
  • 10. ¿Cuándo estará listo?
  • 11. 2022Según Ian Hickson
  • 12. 2012Draft terminado
  • 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. Doctype HTML5 <!DOCTYPE html> <html> <meta charset="UTF-8"> <title>Cool</title> </head> ...
  • 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. 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. HTML5 Tú eliges
  • 18. Mantén un código limpio, te lo agradecerás más tarde
  • 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. 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. SEMÁNTICA
  • 22. Semántica
  • 23. SemánticaNuevas etiquetas semánticas: • section, article, aside, header, footer, nav, menu, hgroup, command, dialog, figure, details
  • 24. Semántica
  • 25. Semántica IE no reconoce las nuevas etiquetas
  • 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. 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. Web Forms 2.0 http://www.coreservlets.com/html5-tutorial/input-types.html
  • 29. OFFLINE &ALMACENAMIENTO
  • 30. Offline & Almacenamiento DOM Storage sessionStorage.setItem(key, value); sessionStorage.getItem(key); localStorage.setItem(key,value); localStorage.getItem(key);
  • 31. Offline & Almacenamiento <html manifest=”cache.manifest”> Detección online / offline window.addEventListener(‘online’,online, true); window.addEventListener(‘offline’,online, true);
  • 32. Offline & Almacenamiento WebSQL Storage Bases de datos de lado cliente usando SQL
  • 33. Offline & Almacenamiento http://www.jstorage.info/
  • 34. ACCESO A DISPOSITIVOS
  • 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. CONECTIVIDAD
  • 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. RENDIMIENTO EINTEGRACIÓN
  • 39. Rendimiento e Integración • Web Workers • XMLHttpRequest 2 • Acceso a archivos locales
  • 40. MULTIMEDIA
  • 41. Multimedia • Video y Audio • Audio Data API • Time Track API
  • 42. 3D, GRÁFICOS, EFECTOS
  • 43. 3D, Gráficos, Efectos • 2D Canvas • WebGL • SVG • 3D CSS Transforms • SMIL
  • 44. CSS3
  • 45. CSS3 • Transformaciones 2D y 3D • Transiciones • Web Fonts • Multiples backgrounds • text-shadow, box-shadow, border-radius
  • 46. Adopten las nuevas tecnologías y sigan adelante
  • 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. 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. 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. Gracias ^_^