HTML5: An Overview


Published on

Slides from an HTML5 overview session I presented at work...
This presentation has an accompanying sample webapp project:

Published in: Technology, Design
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

HTML5: An Overview

  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>""> <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• 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: playground/