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