But .. Why HTML5?• REACH• PORTABILITY• FREEDOM• RICH Graphics• PERFORMANCE• SEMANTICS• INTERACTIVITY• OFFLINE ACCESS• REAL-TIME• Security• And a whole bunch more of features ……
Making Web Beautiful • Demo of FLUID Canvas, WebGL & JS– https://developer.mozilla.org/en-US/demos/detail/fluid
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
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
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>
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
CSS3 – Animation Demo 3D clock demo Solar System Demo
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!