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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

HTML5 Web Standards

432
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
432
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