Curso de HTML5: Herramientas de desarrollo e implementacion Como aplicar todo lo aprendido en el curso en el mundo real. Mejora progresiva y adaptación a los diferentes navegadores del mercado

1. Herramientas de desarrollo e implementacion
Monday, December 5, 11

2. Herramientas de
desarrollo e
implementacion
OMG esto era facil!
Monday, December 5, 11

3. Internet esta
avanzando
Monday, December 5, 11

4. http://html5readiness.com/
Monday, December 5, 11

5. http://caniuse.com/
Monday, December 5, 11

6. http://findmebyip.com/litmus
Monday, December 5, 11

7. Monday, December 5, 11

8. IE6 ESTA MUERTO
Monday, December 5, 11

9. en uno de estos esta
el IE6!
No solo yo lo digo!
Monday, December 5, 11

10. http://gs.statcounter.com/#browser_version-CL-
monthly-201011-201110-bar
Monday, December 5, 11

11. http://www.ie6countdown.com/
Monday, December 5, 11

12. NO MAS IE6!!
no mas freno a la internet
Monday, December 5, 11

13. Creemos experiencias innovadoras
que se adapten en navegadores antiguos
Monday, December 5, 11

14. Progressive
Enhancement
Monday, December 5, 11

15. Progressive
Enhancement
Mejorar progresivamente la experiencia, segun las
capacidades del usuario.
Monday, December 5, 11

16. <video>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="550"
height="400" id="movie_name" align="middle">
<param name="movie" value="movie_name.swf"/>
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="movie_name.swf"
width="550" height="400">
<param name="movie" value="movie_name.swf"/>
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflash">
<img src="http://www.adobe.com/images/shared/download_buttons/
get_flash_player.gif" alt="Get Adobe Flash player"/>
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
Monday, December 5, 11

17. Fun
cio
tod na e
nav os l n
<video> ega os
dor
<source src=”loremipsum.mp4” >
es!!
<source src=”loremipsum.webm” >
<source src=”loremipsum.oga” >
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="550" height="400"
id="movie_name" align="middle">
<param name="movie" value="movie_name.swf"/>
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="movie_name.swf" width="550"
height="400">
<param name="movie" value="movie_name.swf"/>
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflash">
<img src="http://www.adobe.com/images/shared/download_buttons/
get_flash_player.gif" alt="Get Adobe Flash player"/>
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</video>
Monday, December 5, 11

18. Monday, December 5, 11

19. Polyfills:
Monday, December 5, 11

20. Polyfills:
Proveen la tecnologia que esperamos que funcione
nativamente en el codigo
Monday, December 5, 11

21. Polyfills:
Proveen la tecnologia que esperamos que funcione
nativamente en el codigo.
Monday, December 5, 11

22. Monday, December 5, 11

23. Monday, December 5, 11

24. Monday, December 5, 11

25. webworkers
Monday, December 5, 11

26. webworkers
webworkers Polyfill
Monday, December 5, 11

27. webworkers
webworkers Polyfill
Monday, December 5, 11

28. https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-
Browser-Polyfills
Monday, December 5, 11

29. CSS3
Monday, December 5, 11

30. CSS3
Podemos usarlo con seguridad en sitios web
profesionales
Monday, December 5, 11

31. Border redondeados
http://css3pie.com/
Monday, December 5, 11

32. Border redondeados
http://fetchak.com/ie-css3/
Monday, December 5, 11

33. Prefijos
-webkit
-moz
-o
Monday, December 5, 11

34. Prefijos
http://cssprefixer.appspot.com/
Monday, December 5, 11

35. Prefijos
http://leaverou.github.com/prefixfree/
Monday, December 5, 11

36. Selectores
http://selectivizr.com/
Monday, December 5, 11

37. Herramientas de
Desarrollo
Monday, December 5, 11

38. http://muse.adobe.com/
Monday, December 5, 11

39. http://www.youtube.com/watch?v=dlJzRdVrDmA
Monday, December 5, 11

40. http://labs.adobe.com/technologies/edge/
Monday, December 5, 11

41. http://www.youtube.com/watch?v=8FnNtX73v8k
Monday, December 5, 11

42. Frameworks
Monday, December 5, 11

43. http://www.modernizr.com/
Monday, December 5, 11

44. http://html5boilerplate.com/
Monday, December 5, 11

45. Que sigue?
Monday, December 5, 11

46. Monday, December 5, 11

47. Monday, December 5, 11

48. Monday, December 5, 11

49. MUCHAS GRACIAS!!
@siddharta
Monday, December 5, 11