• Save
 

HTML5 - A Brief Introduction

on

  • 797 views

Presentation given at Sinhgad Institute of Management on HTML5.

Presentation given at Sinhgad Institute of Management on HTML5.

Statistics

Views

Total Views
797
Views on SlideShare
797
Embed Views
0

Actions

Likes
1
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

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.

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

HTML5 - A Brief Introduction HTML5 - A Brief Introduction Presentation Transcript

  • A Brief Introduction By: Tripad Mishra Mozilla Student Rep Sinhgad Institute of Management, Pune Twitter: @_Tripad
  • internet has evolved (duh!)
  • Yahoo.com in 1999
  • Apple.com in 1997
  • MTNL.net.in - 2004
  • …I guess the only changed was the new IPv6 link :P
  • So .. What is HTML5?
  • 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
  • But .. Why HTML5?
  • 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
  • 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
  • Smarter & Sleek Forms
  • 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
  • CSS3 – Web Styled
  • CSS3 – Effects• Text Shadow – Create photoshop like effects• @font-face• Box Shadow• Gradients
  • CSS3 – Border Radius
  • 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!
  • HTML5 Resources• Mozilla Developer Network – https://developer.mozilla.org/en- US/docs/HTML/HTML5 – DemoStudio• HTML5Rocks.com