• Save

Like this? Share it with your network


HTML5 - A Brief Introduction



Presentation given at Sinhgad Institute of Management on HTML5.

Presentation given at Sinhgad Institute of Management on HTML5.



Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

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.

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

HTML5 - A Brief Introduction Presentation Transcript

  • 1. A Brief Introduction By: Tripad Mishra Mozilla Student Rep Sinhgad Institute of Management, Pune Twitter: @_Tripad
  • 2. internet has evolved (duh!)
  • 3. Yahoo.com in 1999
  • 4. Apple.com in 1997
  • 5. MTNL.net.in - 2004
  • 6. …I guess the only changed was the new IPv6 link :P
  • 7. So .. What is HTML5?
  • 8. o HTML5 includes the 5threvision of the HTML markuplanguage, CSS3, and a seriesof JavaScript APIs.o Not owned by any particularcompany or a specific browser.o Developed by a consortiumof companies likeMozilla, Opera, Apple, Googleand many other – WHATWG &W3C
  • 9. But .. Why HTML5?
  • 10. But .. Why HTML5?• REACH• PORTABILITY• FREEDOM• RICH Graphics• PERFORMANCE• SEMANTICS• INTERACTIVITY• OFFLINE ACCESS• REAL-TIME• Security• And a whole bunch more of features ……
  • 11. Making Web Beautiful • Demo of FLUID Canvas, WebGL & JS– https://developer.mozilla.org/en-US/demos/detail/fluid
  • 12. Making Web Beautiful• HTML5 is a full-fledged platform for graphic based applications – 3D Rendering – Shadows & Lighting – Vectors and much more.• Making browser your CANVAS – Canvas element provides an API for 2D drawing – Support for Mobile Devices – Ball Code Example• WebGL – Web Graphics Library – JS Library to render 3D/2D Graphics without any plugins – Can directly communicate with GPU
  • 13. Web Freedom
  • 14. Web Freedom• Problems with Proprietary Plug-ins – Control transfer from browser to 3rd party application – “Another Piece” for the users to find – Major cause of browser instability and security issue – Mostly closed-source and paid
  • 15. HTML5 Video & Audio• Old school <embed> <object width=”425” height=”344”> <param name=”movie” value=”http://www.youtube.com/9sEI1AUFJKw&h l=en_GB&fs=1&”></param> ... <embed src=”http://www.youtube.com/v/9sEI1AUFJKw&h l=en_GB&fs=1&” type=”application/x- shockwave-flash” allowscriptaccess=”always” allowfullscreen=”true” width=”425” height=”344”></embed> </object>
  • 16. HTML5 Video & Audio• HTML 5 way of doing it :<video> <source src=“MyVideo.ogv" type=video/ogg; codecs="theora, vorbis"></video>• Fully integrated with all other aspects of the document – CSS/JS/Canvas etc• Demo
  • 17. Smarter & Sleek Forms
  • 18. HTML5 Forms• Faster and better forms.• “Content-Aware”• Many new input types: – Email,phone,url – Date,time – range• Browser Validation without any extra code!• Demo
  • 19. CSS3 – Web Styled
  • 20. CSS3 – Effects• Text Shadow – Create photoshop like effects• @font-face• Box Shadow• Gradients
  • 21. CSS3 – Border Radius
  • 22. CSS3 – Animation Demo 3D clock demo Solar System Demo
  • 23. Much More to HTML5• Cleaner & Semantic Code• Data Storage & Offline data access• Web Workers• Drag & Drop and File System Access• Direct Hardware Support• Geolocation Capabilities• Notifications• Much more!
  • 24. HTML5 Resources• Mozilla Developer Network – https://developer.mozilla.org/en- US/docs/HTML/HTML5 – DemoStudio• HTML5Rocks.com