Your SlideShare is downloading. ×
0
HTML5: An Overview
HTML5: An Overview
HTML5: An Overview
HTML5: An Overview
HTML5: An Overview
HTML5: An Overview
HTML5: An Overview
HTML5: An Overview
HTML5: An Overview
HTML5: An Overview
HTML5: An Overview
HTML5: An Overview
HTML5: An Overview
HTML5: An Overview
HTML5: An Overview
HTML5: An Overview
HTML5: An Overview
HTML5: An Overview
HTML5: An Overview
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5: An Overview

3,493

Published on

Slides from an HTML5 overview session I presented at work... …

Slides from an HTML5 overview session I presented at work...
This presentation has an accompanying sample webapp project: http://code.google.com/p/html5-playground

Published in: Technology, Design
2 Comments
3 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,493
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
81
Comments
2
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Nagendra Mahesh
  • 2. AGENDA• What is HTML5?• Why HTML5?• The HTML5 feature set• Demos + Code• CSS3 – A (very) brief intro• What I will NOT discuss today• References
  • 3. • HTML + JS + CSS ~= HTML5 !!• A new major milestone for web development• Focused on web pages web sites web applications• Not “one thing” – bunch of features• Combined (ongoing) efforts of W3C, WHATWG and many others• Eliminates HTML and web framework fragmentation
  • 4. “The world is moving to HTML5” - Steve Jobs
  • 5. …because HTML5 provides elegant, pragmatic Solutions to real-world problems. Before<input type=‚text‛ name=‚email‛> HTML5<input type=‚text‛ name=‚time‛> <input type=‚email‛> + <input type=‚time‛> Loads of extra js validation…because HTML5 is simpler. Before<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML HTML54.01 [Transitional | Strict |Frameset]//EN <!DOCTYPE html>"http://www.w3.org/TR/html4/loose.dtd"> <meta charset=utf-8><meta http-equiv="Content-Type"content="text/html; charset=utf-8">
  • 6. …because HTML5 hasawesome stuff built-in.No more buggy pluginsthat crash your browser,gobble resources andcause security issues. …because HTML5 makes the web as your platform for crazily rich web application experiences. …because it’s already everywhere !!
  • 7. HTML5 feature categories
  • 8. First things first… Browser Support??• For the latest and greatest, check http://caniuse.com• In code, use Modernizr.js if(Modernizr.geolocation) { navigator.geolocation.getCurrentPosition(); } else { alert(‘Geolocation not supported’); }
  • 9. Offline/Storage Features• Key-value pairs in the browser cache • LocalStorage API • SessionStorage API…because using cookies = old school.Use cases: online shopping carts, client-side prefs, UI customizations etc.• Web SQL Databases • Browsers implementing in-memory DB Engines (SQLite etc.) • js allows you to write SQL queries !! • Save almost all kinds of typed data • Secured Data - Datastore access restricted exclusively within same-originUse cases: rich offline apps, everything under the sun• Application cache (appcache) • Cache resources (html, js, css, images etc.) in browser -> offline access• Offline/Online Events navigator.onLine(); // true if you are online document.body.addEventListener("online", function () {...} document.body.addEventListener("offline", function () {...}
  • 10. File/Hardware Access• Geolocation - Get the geographical location of the browser navigator.geolocation.getCurrentPosition(successCallBack(position)); function successCallBack(position) { generateMap(position.coords.latitude, position.coords.longitude); }Uses GPS, wi-fi access point info, MAC address (Skyhook Wireless)• Native Drag and Drop• Filesystem API • sandboxed section of native filesystemwindow.webkitStorageInfo.requestQuota(); // request quota of ‘n’ bytes for this web appwindow.requestFileSystem(); // returns FileSystem object fs (handle)fs.root.getFile(log.txt, {create: true, exclusive: true}, success(fileEntry){});fs.root.getDirectory(MyPictures, {create: true}, successCallBack(fileEntry){});fileEntry.createWriter(); // returns FileWriter objectfileWriter.write(); // writes to filedirReader = fs.root.createReader(); // returns a DirReader objectdirReader.readEntries(); // read contents of the directory (files and subdirectories)
  • 11. File/Hardware Access• Device Control (UserMedia) API • control + access input/output devices such as cameras etc. • getUserMedia();• Orientation Physics • Accelerometer, etc. • window.addEventListener(‘deviceorientation’);• WebGL (Web Graphics Library) • Leveraging GPU (Graphics Processors/3D accelerator cards) in the client machine to render mind-blowing graphics
  • 12. Realtime/CommunicationWeb Workers• API for spawning background js threads !!• async != concurrency• Web workers can only access a subset of all js features (no DOM manipulation)• Use-cases: • Real-time text formatting • Number/JSON crunching • Background DB operationsWebSockets• Full-duplex, bi-directional communication over the Web• Just data, no HTTP headers• Socket connections between web browser and server• Use-cases: • Multiplayer online games • Chat apps • Realtime social streams • Custom protocol interactionNotifications API
  • 13. Semantics and Markup• New elements and form input types introduced• More meaningful (semantics) and practically useful• Help in SEO
  • 14. Graphics and MultimediaCanvas API• a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly.• use JavaScript to draw anything you want !!• <canvas /> elementHTML5 Video• <video /> element• Standard way to embed video in a webpage• Browser support for major formats: H.264, MP4, AVI, OGG etc.HTML5 Audio• <audio /> element• Standard way to embed audio in a webpage• Browser support for major formats: H.264, MP3, ALAC, WAV etc.
  • 15. CSS3Selectors/* pattern selection */ /* Specific attributes */ /* Negation selection */.row:nth-child(even) { input[type="text"] { :not(.box) { background: #dde; background: #eee; color: #00c;} } }.row:nth-child(odd) { :not(span) { background: white; display: block;} }Rounded Corners (border-radius)Gradients and shadows (text-shadow and box-shadow)CSS3 Animations and Transforms … and lots more.
  • 16. What I have NOT discussed today…Orientation WebRTC <ruby/> Physics PostMessage 3D CanvasHistory API Microdata Web Audio API requestAnimationFrame WebGL Lots of CSS3 stuff Web Intents SVG IndexedDB CORS Cross-OriginXmlHttpRequest2 HTML Selector API Resource Sharing
  • 17. References On the web: If you want to fork and play with my html5 playground code: http://www.w3schools.com/html5 http://diveintohtml5.info https://code.google.com/p/html5- http://html5rocks.com playground/

×