Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

HTML5 Web Standards

on

  • 599 views

HTML5 Web Standards

HTML5 Web Standards

Statistics

Views

Total Views
599
Views on SlideShare
599
Embed Views
0

Actions

Likes
0
Downloads
11
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5 Web Standards Presentation Transcript

  • 1. Saturday, March 9, 13
  • 2. HTML 5*Saturday, March 9, 13
  • 3. HTML 5* Next Generation Web StandardsSaturday, March 9, 13
  • 4. HTML 5* Next Generation Web Standards Presented by Vu Tran LamSaturday, 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 extensionSaturday, March 9, 13
  • 6. + The Web Platform is AcceleratingSaturday, March 9, 13
  • 7. + The Web Platform is AcceleratingSaturday, March 9, 13
  • 8. + It’s Solving Developer ChallengesSaturday, March 9, 13
  • 9. + It’s Solving Developer ChallengesSaturday, March 9, 13
  • 10. + Timeline of Web TechnologiesSaturday, March 9, 13
  • 11. + Timeline of Web TechnologiesSaturday, 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 TagsSaturday, March 9, 13
  • 22. + Layout TagsSaturday, March 9, 13
  • 23. + Layout TagsSaturday, 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 TagSaturday, 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" /> Ugh, terrible <embed type="application/x-shockwave-flash" width="425" height="344" src="http:// www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" code allowfullscreen="true"> </embed> </object>Saturday, March 9, 13
  • 34. + HTML 5 Audio and VideoSaturday, March 9, 13
  • 35. + HTML 5 Audio and VideoSaturday, March 9, 13
  • 36. + HTML 5 Audio and VideoSaturday, March 9, 13
  • 37. + HTML 5 Audio and Video Look, so easy, so simpleSaturday, March 9, 13
  • 38. + Audio and Video Demo n Make ogg Video n Audio and Video player demoSaturday, March 9, 13
  • 39. + 2D and 3D DrawingSaturday, March 9, 13
  • 40. + 2D and 3D DrawingSaturday, March 9, 13
  • 41. + CanvasSaturday, March 9, 13
  • 42. + CanvasSaturday, March 9, 13
  • 43. + Canvas TagSaturday, March 9, 13
  • 44. + Canvas Demo n Basic canvas n Photo viewer Saturday, March 09, FPT - Aptech 2013Saturday, March 9, 13
  • 45. + FPT - Aptech 03/09/13Saturday, March 9, 13
  • 46. + FPT - Aptech 03/09/13Saturday, 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 Saturday, March 09, FPT - Aptech 2013Saturday, March 9, 13
  • 48. + CSS 3 DemoSaturday, March 9, 13
  • 49. + New JS APIs n Desktop experience (Notifications, Drag and Drop API) n Geolocation n Web StorageSaturday, March 9, 13
  • 50. + Drag and DropSaturday, March 9, 13
  • 51. + Drag and DropSaturday, March 9, 13
  • 52. + Drag and Drop Drag hereSaturday, March 9, 13
  • 53. + Drag and Drop Drag hereSaturday, March 9, 13
  • 54. + Drag and Drop CodeSaturday, March 9, 13
  • 55. + Drag and Drop Demo n Web demo n Coming soon: drag files from your desktopSaturday, March 9, 13
  • 56. + GeolocationSaturday, March 9, 13
  • 57. + GeolocationSaturday, March 9, 13
  • 58. + Geolocation CodeSaturday, March 9, 13
  • 59. + Geolocation Demo n Show current postionSaturday, March 9, 13
  • 60. + Web StorageSaturday, March 9, 13
  • 61. + Web Storage DemoSaturday, March 9, 13
  • 62. + HTML 5 SupportSaturday, March 9, 13
  • 63. + HTML 5 SupportSaturday, March 9, 13
  • 64. + Websites Using HTML 5 n The New York Times - http://www.nytimes.com/ n Youtube.com (beta) - http://www.youtube.com/html5 n Vimeo.com n CNN.comSaturday, March 9, 13
  • 65. + Q&ASaturday, March 9, 13
  • 66. + Q&ASaturday, 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