HTML5 Web Standards

561 views
512 views

Published on

HTML5 Web Standards

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
561
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML5 Web Standards

  1. 1. Saturday, March 9, 13
  2. 2. HTML 5* Saturday, March 9, 13
  3. 3. Next Generation Web Standards HTML 5* Saturday, March 9, 13
  4. 4. Next Generation Web Standards Presented by Vu Tran Lam HTML 5* Saturday, March 9, 13
  5. 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. 6. + The Web Platform is Accelerating Saturday, March 9, 13
  7. 7. + The Web Platform is Accelerating Saturday, March 9, 13
  8. 8. + It’s Solving Developer Challenges Saturday, March 9, 13
  9. 9. + It’s Solving Developer Challenges Saturday, March 9, 13
  10. 10. + Timeline of Web Technologies Saturday, March 9, 13
  11. 11. + Timeline of Web Technologies Saturday, March 9, 13
  12. 12. + More Powerful Web? Saturday, March 9, 13
  13. 13. + More Powerful Web? Saturday, March 9, 13
  14. 14. + Saturday, March 9, 13
  15. 15. + Saturday, March 9, 13
  16. 16. + Saturday, March 9, 13
  17. 17. + Saturday, March 9, 13
  18. 18. + What is HTML 5? Saturday, March 9, 13
  19. 19. + What is HTML 5? Saturday, March 9, 13
  20. 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. 21. + Layout Tags Saturday, March 9, 13
  22. 22. + Layout Tags Saturday, March 9, 13
  23. 23. + Layout Tags Saturday, March 9, 13
  24. 24. + Form Field Types Implemented Not yet (Only Opera supports) Saturday, March 9, 13
  25. 25. + Multimedia (Audio + Video) Saturday, March 9, 13
  26. 26. + Multimedia (Audio + Video) Saturday, March 9, 13
  27. 27. + Multimedia (Audio + Video) Saturday, March 9, 13
  28. 28. + Multimedia (Audio + Video) Saturday, March 9, 13
  29. 29. + Multimedia (Audio + Video) Saturday, March 9, 13
  30. 30. + Flash Video HTML Tag Saturday, March 9, 13
  31. 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. 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. 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. 34. + HTML 5 Audio and Video Saturday, March 9, 13
  35. 35. + HTML 5 Audio and Video Saturday, March 9, 13
  36. 36. + HTML 5 Audio and Video Saturday, March 9, 13
  37. 37. + HTML 5 Audio and Video Look, so easy, so simple Saturday, March 9, 13
  38. 38. + Audio and Video Demo n Make ogg Video n Audio and Video player demo Saturday, March 9, 13
  39. 39. + 2D and 3D Drawing Saturday, March 9, 13
  40. 40. + 2D and 3D Drawing Saturday, March 9, 13
  41. 41. + Canvas Saturday, March 9, 13
  42. 42. + Canvas Saturday, March 9, 13
  43. 43. + Canvas Tag Saturday, March 9, 13
  44. 44. + Canvas Demo n Basic canvas n Photo viewer FPT - Aptech Saturday, March 09, 2013 Saturday, March 9, 13
  45. 45. + 03/09/13FPT - Aptech Saturday, March 9, 13
  46. 46. + 03/09/13FPT - Aptech Saturday, March 9, 13
  47. 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. 48. + CSS 3 Demo Saturday, March 9, 13
  49. 49. + New JS APIs n Desktop experience (Notifications, Drag and Drop API) n Geolocation n Web Storage Saturday, March 9, 13
  50. 50. + Drag and Drop Saturday, March 9, 13
  51. 51. + Drag and Drop Saturday, March 9, 13
  52. 52. + Drag and Drop Drag here Saturday, March 9, 13
  53. 53. + Drag and Drop Drag here Saturday, March 9, 13
  54. 54. + Drag and Drop Code Saturday, March 9, 13
  55. 55. + Drag and Drop Demo n Web demo n Coming soon: drag files from your desktop Saturday, March 9, 13
  56. 56. + Geolocation Saturday, March 9, 13
  57. 57. + Geolocation Saturday, March 9, 13
  58. 58. + Geolocation Code Saturday, March 9, 13
  59. 59. + Geolocation Demo n Show current postion Saturday, March 9, 13
  60. 60. + Web Storage Saturday, March 9, 13
  61. 61. + Web Storage Demo Saturday, March 9, 13
  62. 62. + HTML 5 Support Saturday, March 9, 13
  63. 63. + HTML 5 Support Saturday, March 9, 13
  64. 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. 65. + Q & A Saturday, March 9, 13
  66. 66. + Q & A Saturday, March 9, 13
  67. 67. + What is the Future of Flash? Saturday, March 9, 13
  68. 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. 69. + Saturday, March 9, 13
  70. 70. + Saturday, March 9, 13

×