HTML5 vs Silverlight

vsMatt Castohttp://mattcasto.info

vsDid You Want an Answer?

vsIt Depends

vsOpinions

vsReligion

HTML5 is many things ...

HTML5 is many things ...Ofﬂine / Storage MultimediaCommunication CSS 3Hardware Access 3D EffectsSemantics Performance

HTML5 is many things ...

This is not an overview of HTML5 Features.http://www.w3.org/html5http://www.html5rocks.com/http://slides.html5rocks.comhttp://diveintohtml5.org

Silverlight

vsPlatforms

PlatformsIE 9 (Vista, Win7)Firefox 3.5+ (WinXP, OSX, Android, Linux)Chrome (WinXP, OSX, Linux)Safari (OSX, iOS)Webkit (Android, etc)

PlatformsIE 9 (Vista, Win7)Firefox 3.5+ (WinXP, OSX, Android, Linux)Chrome (WinXP, OSX, Linux)Safari (OSX, iOS)Webkit (Android, etc)Just about everywhere

PlatformsIE 9 (Vista, Win7)Firefox 3.5+ (WinXP, OSX, Android, Linux)Chrome (WinXP, OSX, Linux)Safari (OSX, iOS)Webkit (Android, etc)Just about everywhere ... to varying degrees.

Platforms IE 6+ ( WinXP+) Firefox 2+ (WinXP, OSX) Chrome (WinXP+) Safari (OSX) Windows Phone 7

Platforms IE 6+ ( WinXP+) Firefox 2+ (WinXP, OSX) Chrome (WinXP+) Safari (OSX) Windows Phone 7Don’t forget about Moonlight

Platforms IE 6+ ( WinXP+) Firefox 2+ (WinXP, OSX) Chrome (WinXP+) Safari (OSX) Windows Phone 7Don’t forget about Moonlight ... even though Novell has.

vsStorage

StorageLocal Storage// use localStorage for persistent storage// use sessionStorage for per tab storagewindow.localStorage.setItem(value, area.value);window.sessionStorage.setItem(timestamp, (new Date()).getTime());var val = window.localStorage.getItem(value);window.localStorage.removeItem(value);window.localStorage.clear();

StorageLocal StorageSource: http://caniuse.com

StorageApplicationSettings / Site Settings// ApplicationSettings are plugin instance specific// SiteSettings are site (URL) specificprivate IsolatedStorageSettings userSettings = IsolatedStorageSettings.ApplicationSettings;private IsolatedStorageSettings siteSettings = IsolatedStorageSettings.SiteSettings;userSettings.Add("value", "hello world");userSettings.Remove("value");userSettings.Clear();

StorageIsolated Storage// GetUserStoreForApplication() - plugin specific// GetUserStoreForSite() - site (URL) specificvar isf = IsolatedStorageFile.GetUserStoreForApplication();using (var isfs = new IsolatedStorageFileStream(fileName,FileMode.Create, isf)) using (StreamWriter sw = new StreamWriter(isfs)) sw.Write(data);using (var isfs = new IsolatedStorageFileStream(fileName,FileMode.Open, isf)) using (StreamReader sr = new StreamReader(isfs)) var allData = sr.ReadToEnd();

vsDatabases

DatabasesWeb SQL Databasevar db = openDatabase(exampleDB, 1.0, example database, 5 * 1024 * 1024);db.transaction(function (tx) { tx.executeSql(CREATE TABLE IF NOT EXISTS foo (id unique, text)); tx.executeSql(INSERT INTO foo (id, text) VALUES (1, "bar")); tx.executeSql(SELECT * FROM foo, [], function (tx, results) { var len = results.rows.length, i; for (i = 0; i < len; i++) { alert(results.rows.item(i).text); } });});

DatabasesWeb SQL DatabaseSource: http://caniuse.com

DatabasesIndexedDBvar trans = db.transaction(["foo"], IDBTransaction.READ_WRITE, 0);var store = trans.objectStore("foo");var request = store.put( {"bar": foobar} );request.onsuccess = function(e) { alert("Success!" + "rnrn" + e.value); };request.onerror = function(e) { alert("Error! " + "rnrn" + e.value); };

DatabasesIndexedDBSource: http://caniuse.com

Databases3rd Party Client-Side Databases for Silverlight • Sterling - http://sterling.codeplex.com/ • Perst - http://www.mcobject.com/silverlight-demo • siaqodb - http://siaqodb.com/ • efﬁproz - http://www.efﬁproz.com/ • Ninja Database - http://www.kellermansoftware.com/p-42-ninja- database-lite.aspx

vsOfﬂine

OfﬂineAppCache - Cache ManifestCACHE MANIFEST# version 0.0.8index.htmlsite.cssjquery-1.4.1.jsemoticon_smile.pngemoticon_unhappy.pngNETWORK:noncached.htmlFALLBACK:/ offline.html

OfﬂineAppCache - Referencing Caching<!DOCTYPE HTML><html manifest="cache.manifest"> <head><title>Hello AppCache</title></head> <body> <h1>Hello AppCache!</h1> </body></html>

OfﬂineOnLine / Ofﬂine APIdocument.body.addEventListener("online", function() { checkOnLineState(); }, false);document.body.addEventListener("offline", function() { checkOnLineState(); }, false);checkOnLineState();function checkOnLineState() { if (typeof (navigator.onLine) == undefined) { alert("navigator.onLine isnt defined."); return; } if (navigator.onLine) { alert("You are online."); } else { alert("You are online."); }}

OfﬂineAppCache & onLine APISource: http://caniuse.com

OfﬂineOut-of-Browser (OOB)• OOB applications run in a separate window and work regardless of network connectivity.• Silverlight API gives full control of installation and updates.• Default Isolated Storage capacity increases from 5 MB to 25 MB• Web Browser control for OOB applications• With Elevated Trust you can call COM APIs• Silverlight 5 introduces p/invoke, multiple windows

vsThreading

ThreadingWeb Workersvar worker = new Worker("worker.js");worker.onmessage = function(e){ alert(e.data) };worker.postMessage("Hello Worker");worker.jsonmessage = function(e) { if (e.data === "Hello Worker") { postMessage("Hello World"); }};

ThreadingWeb WorkersSource: http://caniuse.com

ThreadingSilverlight BackgroundWorkervar bg = new BackgroundWorker{ WorkerReportsProgress = true, WorkerSupportsCancellation = true};bg.DoWork += (o, e) =>{ for (var i = 1; i <= 100; i++) { System.Threading.Thread.Sleep(500); ((BackgroundWorker) o).ReportProgress(i); }};bg.ProgressChanged += (o, e) => MessageBox.Show("Working %" + e.ProgressPercentage);bg.RunWorkerAsync();

vsCommunication

CommunicationWebSocket APIvar ws = new WebSocket("ws://websocket.example.com");ws.onopen = function(e) { alert("WebSocket connection open"); };ws.onmessage = function(e) { alert("WebSocket message received: " + e.data); };ws.onclose = function(e) { alert("WebSocket connection closed"); };ws.postMessage("Hello WebSocket");ws.disconnect();

CommunicationSilverlight & WCF • Silverlight WCF client supports PollingDuplexHttpBinding for a simulated duplex communication over HTTP • Silverlight supports System.Net.Sockets for low level sockets communication • Silverlight supports UDP multicast clients over Sockets • The only thing Silverlight doesn’t support that WebSockets API does is secure socket communication

vsNotiﬁcation

NotiﬁcationNotiﬁcations APIif (window.webkitNotifications.checkPermission() == 0) { // you can pass any url as a parameter window.webkitNotifications.createNotification(tweet.picture, tweet.title, tweet.text).show();} else { window.webkitNotifications.requestPermission();}

NotiﬁcationNotiﬁcations APISource: http://caniuse.com

NotiﬁcationSilverlight NotiﬁcationWindowif (App.Current.IsRunningOutOfBrowser){ var nw = new NotificationWindow(); nw.Content = "Look at me!"; nw.Show(5000); // milliseconds}

vsAudio

AudioAudio Tag

AudioAudio TagSource: http://caniuse.com

AudioAudio Tag Browser Ogg mp3 wavFirefox 3.5+ ✓ ✓ Safari 5+ ✓ ✓Chrome 6+ ✓ ✓Opera 10.5+ ✓ ✓ IE 9 ✓ ✓

AudioMediaElement<MediaElement x:Name="media" Source="example.mp3" Width="300" Height="300" />

AudioMediaElement Container Codecs MP3 MP3 ASF WMA Standard & Professional AAC-LC, HE-AAC v1 (AAC+), HE-AAC v2 MP4 (eAAC+)

vsVideo

VideoVideo Tag

VideoVideo TagSource: http://caniuse.com

Video Browser Ogg H.264 WebM Firefox 3.5+ ✓ Firefox 4+ ✓ ✓ Safari 3+ ✓ Chrome 6+ ✓ ✓Opera 10.5+ ✓ ✓ IE 9 ✓ ✓iPhone Safari ✓ Android ✓ ✓

VideoMediaElement<MediaElement x:Name="media" Source="example.wmv" Width="300" Height="300" />

VideoMediaElement Container Codecs ASF WMV & VC-1 MP4 H.264Also Supports... • Progressive Download & Windows Media Streaming • Server Side Play Lists • Server Logs • Timeline Markers

vsCanvas

Canvas<canvas id="canvas" width="838" height="220"></canvas><script> var canvasContext = document.getElementById("canvas").getContext("2d"); canvasContext.fillRect(250, 25, 150, 100); canvasContext.beginPath(); canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2); canvasContext.lineWidth = 15; canvasContext.lineCap = round; canvasContext.strokeStyle = rgba(255, 127, 0, 0.5); canvasContext.stroke();</script>

CanvasCanvasSource: http://caniuse.com

Canvas<Canvas x:Name="LayoutRoot" Background="White" > <Rectangle Canvas.Left="250" Canvas.Top="25" Height="100" Width="150" Stroke="Black" Fill="Black"/> <Path Canvas.Left="406" Canvas.Top="10" Height="290" Width="137" Stroke="#7FFF7F00" Fill="#00FFFFFF" StrokeThickness="15" StrokeLineJoin="Round" StrokeStartLineCap="Round" StrokeEndLineCap="Round"> <Path.Data> <PathGeometry> <PathGeometry.Figures> <PathFigure> <PathFigure.Segments> <ArcSegment Size="50,50" RotationAngle="45" IsLargeArc="True"SweepDirection="Counterclockwise" Point="0,250"/> </PathFigure.Segments> </PathFigure > </PathGeometry.Figures> </PathGeometry> </Path.Data> </Path></Canvas>

vsPotpourri

Potpourri• Canvas 3D - WebGL• SVG (inline, etc)• Drag & Drop, Drop In, Drag Out• File System API• Geolocation API• Semantic HTML Tags• New form types (email, date, range, search, tel, color, number)

Potpourri• CSS - Selectors, Rounded Corners, Shadows, Transitions, Tranforms, Animations, etc.• Webfonts• Javascript selectors (getElementsByClassName, querySelector, querySelectorAll)• data-* attributes• element.classList• Browser History API

Potpourri• XAML• Languages - C#,Visual Basic.NET, Iron Ruby, Iron Python• 3D - Silverlight 5 Beta• GPU Hardware Acceleration• Devices - Webcam, Microphones• Printing - Bitmap in SL 4, Postscript vector in SL 5• COM Interop (Out-of-browser full trust)• P/Invoke (Out-of-browser full trust in SL 5)

vsIt Depends

vsMatt Castohttp://mattcasto.info

http://www.franksworld.com	195
http://franksworld.com	70
http://trunk.ly	1
http://b.hatena.ne.jp	1
http://www.thetableteer.com	1

HTML5 vs Silverlight

by Matt Casto on Jun 03, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

5 Embeds 268

Statistics

HTML5 vs Silverlight — Presentation Transcript