HTML5: An Overview

AGENDA
• What is HTML5?
• Why HTML5?
• The HTML5 feature set
• Demos + Code
• CSS3 – A (very) brief intro
• What I will NOT discuss today
• References

• 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

“The world is moving to HTML5”
- Steve Jobs

…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 HTML5
4.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">

…because HTML5 has
awesome stuff built-in.

No more buggy plugins
that crash your browser,
gobble resources and
cause security issues.

…because HTML5 makes
the web as your platform
for crazily rich web
application experiences.

…because it’s already
everywhere !!

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’);
}

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-origin
Use 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 () {...}

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 filesystem
window.webkitStorageInfo.requestQuota(); // request quota of ‘n’ bytes for this web app
window.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 object
fileWriter.write(); // writes to file

dirReader = fs.root.createReader(); // returns a DirReader object
dirReader.readEntries(); // read contents of the directory (files and subdirectories)

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

Realtime/Communication
Web 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 operations

WebSockets
• 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 interaction

Notifications API

Semantics and Markup

• New elements and form input types introduced
• More meaningful (semantics) and practically useful
• Help in SEO

Graphics and Multimedia
Canvas 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 /> element

HTML5 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.

CSS3
Selectors
/* 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.

What I have NOT discussed today…

Orientation WebRTC <ruby/>
Physics PostMessage

3D Canvas
History API Microdata
Web Audio API

requestAnimationFrame
WebGL
Lots of CSS3 stuff
Web Intents
SVG
IndexedDB
CORS
Cross-Origin
XmlHttpRequest2 HTML Selector API Resource Sharing

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/

HTML5: An Overview

More Related Content

What's hot

Similar to HTML5: An Overview

Recently uploaded

HTML5: An Overview