web 2.0 expo ria offline desktop
DESCRIPTION
Dion Almaer (Google) and Ryan Stewart (Adobe) went into detail on how you can build offline and desktop Web applications today, and explain how Gears and AIR are complementary, and are pushing the Web forward in new ways.TRANSCRIPT
![Page 1: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/1.jpg)
Taking the Web Offline and On the Desktop
Ryan StewartDion Almaer
1
![Page 2: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/2.jpg)
Taking the Web Offline and On the Desktop
Ryan StewartDion Almaer
.. and the future of the Web too!
1
![Page 3: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/3.jpg)
Who are these chumps?2
![Page 4: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/4.jpg)
Who are these chumps?2
![Page 5: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/5.jpg)
3
![Page 6: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/6.jpg)
The Web is the platform of today, and of the future
4
![Page 7: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/7.jpg)
Landscape5
![Page 8: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/8.jpg)
Landscape5
![Page 9: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/9.jpg)
Landscape5
![Page 10: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/10.jpg)
Landscape5
![Page 11: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/11.jpg)
Landscape5
![Page 12: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/12.jpg)
Landscape5
![Page 13: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/13.jpg)
Landscape5
![Page 14: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/14.jpg)
Adobe AIR enables web developers to use existing technologies to build and deploy rich
Internet applications on the desktop.
6
![Page 15: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/15.jpg)
Why RIAs on the Desktop?Persistent connection
Desktop functionality Data access Efficient development
Branded experiences
7
![Page 16: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/16.jpg)
Cross-OS ApplicationIntegratedRendering
Integrated DOMs& Scripting
Flash
FlexActionScriptXMLAudioVideo
HTML
HTML
HTMLJavaScriptXMLCSS
Flash
Adobe AIR APIs
Mac, Windows, Linux & Device OS
File SystemAccess
NetworkDetection
Notifications ApplicationUpdate
Drag andDrop
LocalDatabase
...
Adobe AIR Application Stack
8
![Page 17: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/17.jpg)
Building AIR Applications
Use existing tools for designers and developers
Free SDK Available for debugging and packaging AIR applications
9
![Page 18: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/18.jpg)
Building AIR Applications
Use existing tools for designers and developers
10
![Page 19: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/19.jpg)
Universal Application Installer
.air installer contains all application files
Application files are cross platform web technologies SWF, HTML, PNG, XML, etc.
The same .air file installs Windows, Macintosh, and Linux
The installation process creates OS specific executables that allow the AIR application to behave like a native application
11
![Page 20: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/20.jpg)
Privileges: AIR Applications have full desktop application privileges
read/write files, background execution, full network access
Administrator can limit application install and other sensitive capabilities
Installation: All applications must be signed by the creator
Mandatory, trusted install process
Development: Separation of application and non-application content
Enhanced HTML security model to limit injection
Minimum-privilege and safe-by-default APIs to decrease developer risk
Encrypted Local Storage to managing secrets like passwords or PINs
Enforcing Secure Application Deploymentt
12
![Page 21: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/21.jpg)
Integrated rendering pipeline Filters
Visual effects
Cross scripting between HTML and Flash Flash classes can be used directly from JavaScript
JavaScript classes can be used directly from Flash
AIRAliases.js
Abstracts out “runtime.flash.*” references
Can be modified, added to, etc.
HTML and Flash Integration
13
![Page 22: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/22.jpg)
WebKit HTML Engine
Open Source Engine
Web class HTML engine with full Ajax support and web compatibility
Used in Safari, KHTML
Benefits of WebKit Open Source
Proven
Small
Existing Mobile/Device Support
14
![Page 23: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/23.jpg)
Local Database SQLite (http://www.sqlite.org)
Supports ACID transactions
Zero-configuration allowing for embedded solution
SQL-92
Complete database is a single file on disk
Supports terabyte-sized databases
Provide synchronous and asynchronous
var selectStmt:SQLStatement = new SQLStatement();
// A SQLConnection named "conn" has been created previouslyselectStmt.sqlConnection = conn;selectStmt.text = "SELECT itemId, itemName, price FROM products";
selectStmt.addEventListener(SQLEvent.RESULT, resultHandler);selectStmt.addEventListener(SQLErrorEvent.ERROR, errorHandler);selectStmt.execute();
15
![Page 24: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/24.jpg)
Custom Chrome, Transparent Applications, and Native Windows
Window Chrome Use native OS window chrome
Use custom chrome implemented by application
Transparent Transparent region can choose to receive or pass through
mouse clicks
Design windows of any shape
Enables complete control and branding of user interface
The developer can provide custom window controls
16
![Page 25: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/25.jpg)
Custom Chrome, Transparent Applications, and Native Windows
//create the init optionsvar options:NativeWindowInitOptions = new NativeWindowInitOptions();options.transparent = false;options.systemChrome = NativeWindowSystemChrome.STANDARD;options.type = NativeWindowType.UTILITY;
//create the windowvar newWindow:NativeWindow = new NativeWindow(options);newWindow.title = "My Window";newWindow.width = 600;newWindow.height = 400; //activate and show the new windownewWindow.activate();
You create native windows using the NativeWindow class. The settings for the window are contained in an instance of the NativeWindowInitOptions class as shown below:
17
![Page 26: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/26.jpg)
Local File Access Create and delete files and directories
Copy and move files and directories
List the content of directories
Get system information on files and directories
Read and write text or binary files Text, XML
Video, Audio, Documents
Serialize and deserialize ActionScript objects
Register to handle files based on file extension
Support Synchronous and Asynchronous access
Encrypted Local Storage
18
![Page 27: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/27.jpg)
What does Offline mean?
19
![Page 28: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/28.jpg)
20
![Page 29: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/29.jpg)
DatabaseEmbedded using SQLite
Contributed Full Text Search
var db = google.gears.factory.create('beta.database', '1.0');db.open('database-demo');
db.execute('create table if not exists Demo (Phrase varchar(255), Timestamp int)');db.execute('insert into Demo values (?, ?)', [phrase, currTime]);
21
![Page 30: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/30.jpg)
Full Text Search
• Create the databasedb.execute('CREATE VIRTUAL TABLE recipe USING fts2(dish, ingredients)');
• Search the databasedb.execute('SELECT dish FROM recipe WHERE recipe MATCH ?', ['tomatoes']);
Fun queries: dish:stew tomatoes Find rows with 'stew' in the dish field, and 'tomatoes' in any field.
22
![Page 31: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/31.jpg)
Database Tools
23
![Page 32: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/32.jpg)
Database ToolsGears in Motion
24
![Page 33: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/33.jpg)
Buxfer25
![Page 34: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/34.jpg)
Local ServerA mini-web server that groks 200 and 304
26
![Page 35: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/35.jpg)
ResourceStoreManually Capturing
var pageFiles = [ location.pathname, 'gears_base.js', '../scripts/gears_db.js', ‘foo.html’];
try { localServer = google.gears.factory.create('beta.localserver', '1.0');} catch (e) { alert('Could not create local server: ' + e.message); return;}
var store = localServer.openStore(this.storeName) || localServer.createStore(this.storeName);
store.capture(pageFiles, function(url, success, captureId) { console.log(url + ' capture ' + (success ? 'succeeded' : 'failed'));});
27
![Page 36: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/36.jpg)
ManagedResourceStore Capture entire applications
• List application resources in a separate manifest
• Gears captures and updates the list atomically
• Gears auto-updates automatically on each view (within reason)
• Supports multiple users per application
28
![Page 37: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/37.jpg)
ManagedResourceStoreJSON Me
{ // version of the manifest file format "betaManifestVersion": 1,
// version of the set of resources described in this manifest file "version": "my_version_string",
// optional // If the store specifies a requiredCookie, when a request would hit // an entry contained in the manifest except the requiredCookie is // not present, the local server responds with a redirect to this URL. "redirectUrl": "login.html",
// URLs to be cached (URLs are given relative to the manifest URL) "entries": [ { "url": "main.html", "src": "main_offline.html" }, { "url": ".", "redirect": "main.html" }, { "url": "main.js" } { "url": "formHandler.html", "ignoreQuery": true }, ]}
29
![Page 38: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/38.jpg)
HTML 5Offline in General
<html application=”manifest-of-urls.txt”>
<html application>“There’s a concept of an application cache. An application cache is a groupof resources, the group being identified by a URI (which typically happensto resolve to a manifest). Resources in a cache are either top-level ornot; top-level resources are those that are HTML or XML and when parsedwith scripting disabled have with the value ofthe attribute pointing to the same URI as identifies the cache.
When you visit a page you first check to see if you have that page in acache as a known top-level page.”
30
![Page 39: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/39.jpg)
Worker PoolJavaScript needs threads after all? Brendan!
Browser JavaScript Engine
WorkerPool
WorkerPool
window, document no access
31
![Page 40: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/40.jpg)
32
![Page 41: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/41.jpg)
“The basic advice regarding response times has been about the same for thirty years:
“0.1 second is about the limit for having the user feel that the system is reacting instantaneously, meaning that no special feedback is necessary except to display the result.
“1.0 second is about the limit for the user's flow of thought to stay uninterrupted, even though the user will notice the delay. Normally, no special feedback is necessary during delays of more than 0.1 but less than 1.0 second, but the user does lose the feeling of operating directly on the data.”
Jakob NielsenNoted Usability ExpertProlific Author
32
![Page 42: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/42.jpg)
User Interface
BackgroundThread
2
Browser
1
33
![Page 43: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/43.jpg)
User Interface
BackgroundThread
2
X
Browser
1
33
![Page 44: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/44.jpg)
User Interface
WorkerPool
Browser
1
WorkerPool
2 3
Message Passing
34
![Page 45: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/45.jpg)
Use case: Encryption
dojox.sql("INSERT INTO CUSTOMERS VALUES (?, ?, ENCRYPT(?))", "Neuberg", "Brad",
"555-34-8962")
35
![Page 46: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/46.jpg)
The Digg Oracle36
![Page 47: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/47.jpg)
The Ajax Universe Expanding
37
![Page 48: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/48.jpg)
The Ajax Universe Expanding
37
![Page 49: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/49.jpg)
The Ajax Universe Expanding
37
![Page 50: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/50.jpg)
The Ajax Universe Expanding
37
![Page 51: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/51.jpg)
The Ajax Universe Expanding
37
![Page 52: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/52.jpg)
The Ajax Universe Expanding
37
![Page 53: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/53.jpg)
The Ajax Universe Expanding
37
![Page 54: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/54.jpg)
The Ajax Universe Expanding
37
![Page 55: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/55.jpg)
38
![Page 56: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/56.jpg)
It takes too long to update the Web
I believe...
39
![Page 57: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/57.jpg)
Gears: Open Source Update Mechanism for the Web
40
![Page 58: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/58.jpg)
It’s not actually just offline
41
![Page 59: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/59.jpg)
It’s not actually just offline
41
![Page 60: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/60.jpg)
HTML 5 Gears
• Standards• Long term• All browsers• No plugin
• Implementation• Battle hardened• A place for innovation• Cross browser• Plugin
Past
Present A bleeding edge implementation
of HTML 5!
Future
42
![Page 61: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/61.jpg)
HTML 5 WebKit
43
![Page 62: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/62.jpg)
Location APIEven on a laptop?
// Getting the objectvar location = google.gears.factory.create( "beta.location", "1.0" ); // Setting up a callback to handle "location changed" eventslocation.onlocationstatechanged = function() { if (this.state == COMPLETE) { SetStatusText("Location accuracy:", this.accuracy); MoveMap(this.latitude, this.longitude); }}
location.startLocationUpdates();
44
![Page 63: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/63.jpg)
Audio APIPlay and Record
// playvar audio = google.gears.factory.create('beta.audio');audio.src = 'http://blahblahblob.com/sampleaudio.wav';audio.load();audio.play();
// recordvar recorder = google.gears.factory.create('beta.audiorecorder');recorder.destination = <http post url>recorder.autoStream = true;recorder.record(); //asynchronous call
45
![Page 64: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/64.jpg)
Notification APIGrowl for the Web
var notifier = google.gears.factory.create('beta.notifier', '1.0'); notifier.notify({ application: "My App", title: 'warning', description: 'some text', priority: 2, sticky: 'True', password: 'Really Secure',});
46
![Page 65: Web 2.0 Expo Ria Offline Desktop](https://reader037.vdocument.in/reader037/viewer/2022103113/55491dbab4c905b44c8b667a/html5/thumbnails/65.jpg)
twitter.com/dalmaer
47