This document appears to be a presentation about HTML5 and next generation web standards. It includes sections on new HTML5 elements, layout tags, forms, multimedia like audio and video, 2D and 3D drawing with canvas, CSS3, new JavaScript APIs, and examples of websites using HTML5. It discusses topics like the acceleration of the web platform, solving developer challenges, and the future of Flash. The presentation provides information on HTML5 specifications, features and examples to demonstrate the capabilities of HTML5.

1. Saturday, March 9, 13

2. HTML 5*
Saturday, March 9, 13

3. Next Generation Web Standards
HTML 5*
Saturday, March 9, 13

4. Next Generation Web Standards
Presented by Vu Tran Lam
HTML 5*
Saturday, March 9, 13

5. +
IT News
n iPad wifi + 3G is available in Apple Store and iPhone 4G with iPhone
OS 4 is coming in June or July of 2010 (Apple News)
n Apple say No with flash platform (Apple News)
n Mozilla trying to build VP8 into HTML5 video (CNET News)
n Google tries freeing Web video with WebM (CNET News)
n Google Chrome 5 adds HTML5 security feature for developers
n Facebook videos make switch to HTML5
n Dreamweaver CS5 gets HTML5 extension
Saturday, March 9, 13

6. +
The Web Platform is Accelerating
Saturday, March 9, 13

7. +
The Web Platform is Accelerating
Saturday, March 9, 13

8. +
It’s Solving Developer Challenges
Saturday, March 9, 13

9. +
It’s Solving Developer Challenges
Saturday, March 9, 13

10. +
Timeline of Web Technologies
Saturday, March 9, 13

11. +
Timeline of Web Technologies
Saturday, March 9, 13

12. +
More Powerful Web?
Saturday, March 9, 13

13. +
More Powerful Web?
Saturday, March 9, 13

14. +
Saturday, March 9, 13

15. +
Saturday, March 9, 13

16. +
Saturday, March 9, 13

17. +
Saturday, March 9, 13

18. +
What is HTML 5?
Saturday, March 9, 13

19. +
What is HTML 5?
Saturday, March 9, 13

20. +
New HTML 5 Elements
n Semantics (New tags, Link Relations, Microdata)
n Web Forms 2.0 (Input Fields)
n Multimedia (Audio Tag,Video Tag)
n 2D and 3D drawing (Canvas,WebGL)
Saturday, March 9, 13

21. +
Layout Tags
Saturday, March 9, 13

22. +
Layout Tags
Saturday, March 9, 13

23. +
Layout Tags
Saturday, March 9, 13

24. +
Form Field Types
Implemented
Not yet (Only Opera supports)
Saturday, March 9, 13

25. +
Multimedia (Audio + Video)
Saturday, March 9, 13

26. +
Multimedia (Audio + Video)
Saturday, March 9, 13

27. +
Multimedia (Audio + Video)
Saturday, March 9, 13

28. +
Multimedia (Audio + Video)
Saturday, March 9, 13

29. +
Multimedia (Audio + Video)
Saturday, March 9, 13

30. +
Flash Video HTML Tag
Saturday, March 9, 13

31. +
Flash Video HTML Tag
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=6,0,40,0">
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&"/>
<param name="allowfullscreen" value="true" />
<embed type="application/x-shockwave-flash" width="425" height="344" src="http://
www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always"
allowfullscreen="true">
</embed>
</object>
Saturday, March 9, 13

32. +
Flash Video HTML Tag
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=6,0,40,0">
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&"/>
<param name="allowfullscreen" value="true" />
<embed type="application/x-shockwave-flash" width="425" height="344" src="http://
www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always"
allowfullscreen="true">
</embed>
</object>
Saturday, March 9, 13

33. +
Flash Video HTML Tag
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=6,0,40,0">
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&"/>
<param name="allowfullscreen" value="true" />
<embed type="application/x-shockwave-flash" width="425" height="344" src="http://
www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always"
allowfullscreen="true">
</embed>
</object>
Ugh, terrible
code
Saturday, March 9, 13

34. +
HTML 5 Audio and Video
Saturday, March 9, 13

35. +
HTML 5 Audio and Video
Saturday, March 9, 13

36. +
HTML 5 Audio and Video
Saturday, March 9, 13

37. +
HTML 5 Audio and Video
Look, so easy,
so simple
Saturday, March 9, 13

38. +
Audio and Video Demo
n Make ogg Video
n Audio and Video player demo
Saturday, March 9, 13

39. +
2D and 3D Drawing
Saturday, March 9, 13

40. +
2D and 3D Drawing
Saturday, March 9, 13

41. +
Canvas
Saturday, March 9, 13

42. +
Canvas
Saturday, March 9, 13

43. +
Canvas Tag
Saturday, March 9, 13

44. +
Canvas Demo
n Basic canvas
n Photo viewer
FPT - Aptech
Saturday, March 09,
2013
Saturday, March 9, 13

45. +
03/09/13FPT - Aptech
Saturday, March 9, 13

46. +
03/09/13FPT - Aptech
Saturday, March 9, 13

47. +
CSS 3
Cool stuff includes:
n Rounded corners
n Drop shadows
n Transparency
n Multiple background images
n Multi-column support
FPT - Aptech
Saturday, March 09,
2013
Saturday, March 9, 13

48. +
CSS 3 Demo
Saturday, March 9, 13

49. +
New JS APIs
n Desktop experience (Notifications, Drag and Drop API)
n Geolocation
n Web Storage
Saturday, March 9, 13

50. +
Drag and Drop
Saturday, March 9, 13

51. +
Drag and Drop
Saturday, March 9, 13

52. +
Drag and Drop
Drag here
Saturday, March 9, 13

53. +
Drag and Drop
Drag here
Saturday, March 9, 13

54. +
Drag and Drop Code
Saturday, March 9, 13

55. +
Drag and Drop Demo
n Web demo
n Coming soon: drag files from your desktop
Saturday, March 9, 13

56. +
Geolocation
Saturday, March 9, 13

57. +
Geolocation
Saturday, March 9, 13

58. +
Geolocation Code
Saturday, March 9, 13

59. +
Geolocation Demo
n Show current postion
Saturday, March 9, 13

60. +
Web Storage
Saturday, March 9, 13

61. +
Web Storage Demo
Saturday, March 9, 13

62. +
HTML 5 Support
Saturday, March 9, 13

63. +
HTML 5 Support
Saturday, March 9, 13

64. +
Websites Using HTML 5
n The NewYork Times - http://www.nytimes.com/
n Youtube.com (beta) - http://www.youtube.com/html5
n Vimeo.com
n CNN.com
Saturday, March 9, 13

65. +
Q & A
Saturday, March 9, 13

66. +
Q & A
Saturday, March 9, 13

67. +
What is the Future of Flash?
Saturday, March 9, 13

68. +
References
n http://dev.w3.org/html5/spec/Overview.html
n http://en.wikipedia.org/wiki/HTML
n http://www.w3.org/Style/CSS/current-work#CSS3
n http://css3generator.com/
Saturday, March 9, 13

69. +
Saturday, March 9, 13

70. +
Saturday, March 9, 13