Your SlideShare is downloading. ×
  • Like
  • Save

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

HTML5 - A Brief Introduction


Presentation given at Sinhgad Institute of Management on HTML5.

Presentation given at Sinhgad Institute of Management on HTML5.

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. A Brief Introduction By: Tripad Mishra Mozilla Student Rep Sinhgad Institute of Management, Pune Twitter: @_Tripad
  • 2. internet has evolved (duh!)
  • 3. in 1999
  • 4. in 1997
  • 5. - 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–
  • 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=” l=en_GB&fs=1&”></param> ... <embed src=” 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 – US/docs/HTML/HTML5 – DemoStudio•