Your SlideShare is downloading. ×
HTML5 Web Standards
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

HTML5 Web Standards

425
views

Published on

HTML5 Web Standards

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
425
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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