HTML5 Web Standards

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