Presentation given at Sinhgad Institute of Management on HTML5.

1. A Brief Introduction
By:
Tripad Mishra
Mozilla Student Rep
Sinhgad Institute of Management, Pune
Twitter: @_Tripad

3. internet has
evolved (duh!)

4. Yahoo.com in 1999

6. Apple.com in 1997

8. MTNL.net.in - 2004

9. …I guess the only changed was the new IPv6 link :P

10. So .. What is HTML5?

11. o HTML5 includes the 5th
revision of the HTML markup
language, CSS3, and a series
of JavaScript APIs.
o Not owned by any particular
company or a specific browser.
o Developed by a consortium
of companies like Mozilla,
Opera, Apple, Google and
many other – WHATWG &
W3C

12. But .. Why HTML5?

13. But .. Why HTML5?
•REACH
• PORTABILITY
• FREEDOM
• RICH Graphics
• PERFORMANCE
• SEMANTICS
• INTERACTIVITY
• OFFLINE ACCESS
• REAL-TIME
• Security
• And a whole bunch more of features ……

14. Making Web
Beautiful
• Demo of FLUID
Canvas, WebGL & JS
– https://developer.mozilla.org/en-US/demos/detail/fluid

15. 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

16. Web Freedom

18. 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

19. • 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>
HTML5 Video & Audio

20. • 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
HTML5 Video & Audio

21. Smarter & Sleek Forms

22. 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

25. CSS3 – Web Styled

26. CSS3 – Effects
• Text Shadow
– Create photoshop like effects
• @font-face
• Box Shadow
• Gradients

27. CSS3 – Border Radius

28. CSS3 – Animation Demo
3D clock demo
Solar System Demo

29. 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!

30. HTML5 Resources
• Mozilla Developer Network
– https://developer.mozilla.org/en-
US/docs/HTML/HTML5
– DemoStudio
• HTML5Rocks.com