The Rich Standard: Getting Familiar with HTML5

the RICHSTANDARD:GETTING familiar with HTML5
facebook.com/telerik
by Todd Anglin
@telerik

Introductions
Todd Anglin
Chief Evangelist, Telerik
Microsoft MVP
President NHDNUG & O’Reilly Author
TelerikWatch.com
@toddanglin

Telerik HQ
Sofia, Bulgaria
Founded 2002
Sofia, BG
Munich, DE
Boston, MA
Houston, TX
Austin, TX
Winnipeg, CA
Toronto, CA
Hong Kong, CN

Telerik
One-stop provider for .NET tools & UI components
UI DATA PRODUCTIVITY TESTING TFS CMS
.NET Developer Productivity
UI: ASP.NET AJAX, MVC, WinForms, Silverlight, WPF
DATA: Telerik Reporting, OpenAccess ORM
TFS: Work Item Manager, Project Dashboard
CMS: Sitefinity CMS
PRODUCTIVITY: JustCode, JustMock
TESTING: WebUI Test Studio

Telerik
Complete provider of development planning, construction & testing tools
UI DATA PRODUCTIVITY TESTING TFS CMS

the “plan”

“Perhaps Adobe should focus more on creating great HTML5 tools for the future, and less on criticizing Apple for leaving the past behind.”
-Steve Jobs
April, 2010

what do these *platforms* have in common?

the rich web
New!Web 3D

famously dead* proprietary platforms
ColdFusion
PowerBuilder
WinForms
FoxPro
OS/2
VB6
OS 9
BeOS

when will HTML5 be “official?”

<HTML5>

the basics
<!DOCTYPE html>
9 new “structure” tags
16 new HTML elements
13 new <input> types

compatible

HTML
CSS+
+JavaScript

which browsers matter?
99%
of internet browses with
IE, FF, Safari, Chrome, or Opera

Because some browsers run on many different operating systems, there can be a tendency to use a 'least common denominator' approach to implementing HTML5. By using more of the underlying operating system, and taking advantage of the power of the whole PC, IE9 enables developers to do more with HTML5.
“
”
-Dean Hachamovitch
General Manager, IE Team

html5test.com
?

HTML5 Test + IE9

semantic tags
tag: <header> <footer> <nav> <article> <hgroup>
<header>
<hgroup>
<h1>My Site</h1>
<h2>My site tag line</h2>
</hgroup>
</header>
<article>
<header>
<h1>An article title</h1>
<header>
</article>
<footer>
<p>Copyright 1987</p>
</footer>
support: IE9, FF3.5, Safari, Chrome, Opera

fixing IE
<head>
<meta charset="utf-8" />
<title>My Weblog</title>

</head>

input types
tag: time, date, search, email, etc.
<form>
<input type="email" autofocus="autofocus" placeholder="Enter your email" />
</form>
support: Safari, Chrome, Opera

canvas
tag: <canvas />
<canvas id=“b" width="300" height="225"></canvas>
function draw_b() {
varb_canvas = document.getElementById("b");
varb_context = b_canvas.getContext("2d");
b_context.fillRect(50, 25, 150, 100);
}
support: IE*, FF3, Safari, Chrome, Opera

fixing IE
<head>

</head>
Explorercanvas

local storage
api: sessionStorage & localStoarge
<script>
sessionStorage.setItem('value', this.value);
localStorage.setItem('value', this.value);
sessionStorage.getItem(‘value’);
sessionStorage.clear();
localStorage.clear();
</script>
5 MB limit

web sockets
api: WebSocket
ws = new WebSocket("ws://localhost:8282/test”);
ws.onopen = WSonOpen;
ws.onmessage = WSonMessage;
ws.onclose = WSonClose;
ws.onerror = WSonError;
function WSonMessage(event) {
$(“#myDiv”).html(event.data);
};
support: Safari, Chrome, Firefox, (Opera 10.7)

web sql
api: openDatabase
db= openDatabase("html5demos", "1.0", "HTML 5 Database API example", 200000);
if (db) {
db.transaction(function(tx) {
tx.executeSql("CREATE TABLE IF NOT EXISTS tweets (id REAL UNIQUE,
text TEXT, created_atTEXT, screen_name TEXT,
mention BOOLEAN)", [], callback);
});
}
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM tweets WHERE mention = ? AND id > ? ORDER BY id DESC', [mention, latest], callbackFunc);});
“This specification has reached an impasse: all interested implementors have used the same SQL backend (Sqlite), but we need multiple independent implementations to proceed along a standardisation path.” –W3C
support: Safari, Chrome, Opera

offline
tag: <html manifest="html5demo.manifest">
type: text/cache-manifest
CACHE MANIFEST
# Files you want cached for your app to work offline
myLogo.jpg
//Interacting with cache
window.applicationCache.update();
alert(window.applicationCache.status);
support: FF3.5, Safari, Chrome

video
tag: <video />

<video src="mymovie.mp4" width="320" height="240"></video>

<video width="320" height="240" controls>
<source src="mymovie.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="mymovie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>

video for all browsers
Multiple encodings
Graceful degradation
<video width="320" height="240" controls>
<source src="mymovie.ogv">
<source src="mymovie.mp4">
<object data="videoplayer.swf">
<param name="flashvars" value="mymovie.mp4">
HTML5 and Flash video not supported
</object>
</video>

WebM
Royalty Free
VP8/Vorbis
support: IE9, FF3.5, Safari*, Chrome, Opera

CSS3 &JavaScript
jQuery

CSS3 Demos

how do you use HTML5 today?

modernizer

progressiveenhancementgracefuldegradation

PE & GD Examples

should I use HTML5 today?

The consumer should be able to decide which technologies they want to use, but a multi-platform world is definitely where the world is headed.
-ShantanuNarayen
April, 2010

The future of the web is HTML5.
-Dean Hachamovitch
April, 2010

thanks!
telerikwatch.com
@toddanglin
anglin@telerik.com

Resources
Quotes
http://www.apple.com/hotnews/thoughts-on-flash/
http://www.dailytech.com/Adobes+CEO+Responds+to+Steve+Jobs+Rant+about+Flash/article18267.htm
http://blogs.msdn.com/ie/archive/2010/04/29/html5-video.aspx
HTML5 Resources
http://www.w3.org/TR/html5-diff/#backwards-compatible
http://html5demos.com/
http://ishtml5ready.com
http://caniuse.com
http://html5readiness.com
http://html5test.com
http://www.browserscope.org/
http://www.html5rocks.com/
HTML5 Demos
http://9elements.com/io/projects/html5/canvas/
http://html5demos.com/
http://www.chromeexperiments.com/
CSS3 Demos
http://www.zachstronaut.com/lab/text-shadow-box/text-shadow-box.html
http://anthonycalzadilla.com/css3-ATAT/index.html
IE9 Download
http://ie.microsoft.com/testdrive/

http://www.telerikwatch.com	1441
http://feeds.feedburner.com	79
url_unknown	34
http://www.newsblur.com	2
http://www.techgig.com	2
http://webcache.googleusercontent.com	2
http://translate.googleusercontent.com	1

The Rich Standard: Getting Familiar with HTML5

by Todd Anglin on Oct 25, 2010

Accessibility

Categories

Upload Details

Usage Rights

7 Embeds 1,561

Statistics

The Rich Standard: Getting Familiar with HTML5 Presentation Transcript