SlideShare a Scribd company logo
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh perfw8appdevv1
twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen
Who am I?
 Developer Evangelist at Microsoft based in Silicon Valley, CA
 Blog: http://blogs.msdn.com/b/dorischen/
 Twitter @doristchen
 Email: doris.chen@microsoft.com
 Office Hours http://ohours.org/dorischen
 Has over 15 years of experience in the software industry focusing
on web technologies
 Spoke and published widely at JavaOne, O'Reilly, Silicon Valley
Code Camp, SD West, SD Forum and worldwide User Groups
meetings
 Doris received her Ph.D. from the University of California at Los
Angeles (UCLA)
PAGE 2
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh perfw8appdevv1
As of March 2012, IDC
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh perfw8appdevv1
PAGE 9
HTML App Platform
App container
HTML host process
Internet Explorer
Web
platform
TAB
App code
Web platform
Windows
runtime
App code
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh perfw8appdevv1
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh perfw8appdevv1
PAGE
PAGE 15
PAGE 16
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh perfw8appdevv1
PAGE 23
PAGE 24
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh perfw8appdevv1
The development tools are FREE!
If you use a higher SKU, it just works!
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh perfw8appdevv1
PAGE
demo
http://blogs.msdn.com/b/dorischen/archive/2012/10/02/transform-your-html-
css-javascript-apps-into-windows-8-application.aspx
http://github.com/appendto/jquery-win8
interoperability@Microsoft blog
http://msdn.microsoft.com/en-
us/library/windows/apps/hh700404.aspx
PAGE
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh perfw8appdevv1
"Code for touch, get mouse and pen for free!"
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh perfw8appdevv1
function onLoad() {
...
var workSpaces = document.getElementsByClassName("workspace");
for (i = 0; i < workSpaces.length; i++) {
workSpaces[i].addEventListener("MSPointerDown", pointerDownHandler, false);
workSpaces[i].addEventListener("MSPointerMove", pointerMoveHandler, false);
workSpaces[i].addEventListener("MSPointerUp", pointerUpHandler, false);
workSpaces[i].addEventListener("MSManipulationStateChanged",
resetInteractions, false);
}
...
}
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh perfw8appdevv1
Tips & tricks that still work
http://channel9.msdn.com/Events/Build/2012/3-132
function InsertUsername()
{
document.getElementById('user').innerHTML =
userName;
}
User innerHTML to Create your DOM
Use DOM Efficiently
<html>
<head>
<script type="text/javascript">
function helloWorld() {
alert('Hello World!') ;
}
</script>
</head>
<body>
…
</body>
</html>
Avoid Inline JavaScript
Efficiently Structure Markup
JSON Always Faster than XML for Data
JSON Representation
"glossary":{
"title": "example glossary", "GlossDiv":{
"title": "S", "GlossList": {
"GlossEntry": {
"ID": "SGML",
"SortAs": "SGML",
"GlossTerm": "Markup Language",
"Acronym": "SGML",
"Abbrev": "ISO 8879:1986",
"GlossDef": {
"para": "meta-markup language",
"GlossSeeAlso": ["GML", "XML"] },
"GlossSee": "markup" }
}
}
}
XML Representation
<!DOCTYPE glossary PUBLIC "DocBook V3.1">
<glossary><title>example glossary</title>
<GlossDiv><title>S</title>
<GlossList>
<GlossEntry ID="SGML" SortAs="SGML">
<GlossTerm>Markup Language</GlossTerm>
<Acronym>SGML</Acronym>
<Abbrev>ISO 8879:1986</Abbrev>
<GlossDef>
<para>meta-markup language</para>
<GlossSeeAlso OtherTerm="GML">
<GlossSeeAlso OtherTerm="XML">
</GlossDef>
<GlossSee OtherTerm="markup">
</GlossEntry>
</GlossList>
</GlossDiv>
</glossary>
Native JSON Methods
var jsObjStringParsed = JSON.parse(jsObjString);
var jsObjStringBack = JSON.stringify(jsObjStringParsed);
Use Native JSON Methods
Write Fast JavaScript
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh perfw8appdevv1
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh perfw8appdevv1
Loading and
parsing
of
HTML, JS, CSS
New host
process
Tile click
"DOMContentLoaded" event
Windows Runtime
"activated" event
Splash screen
Ready for
user
Navigation
App visible
Optimize your landing page: Package Locally
Optimize your landing Page: Use Local Data
Internet Internet
5
Fetch Info
From Network
Cache Info
Locally
Fetch Info
From Cache
No Network
Available
AppCache
Internet Internet
HTML 5 AppCache – Update Flow
Fetch Manifest
From Network
If diff Create New
Cache
Fetch Info
From Cache
No Network
Available
AppCache
twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
manifest file
PAGE 60
MIME Type: text/cache-manifest
twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischenPAGE 62
twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
var oRequestDB = window.indexedDB.open(“Library”);
oRequestDB.onsuccess = function (event) {
db1 = oRequestDB.result;
if (db1.version == 1) {
txn =
db1.transaction([“Books”],IDBTransaction.READ_ONLY);
var objStoreReq = txn.objectStore(“Books”);
var request = objStoreReq.get("Book0");
request.onsuccess = processGet;
}
};
Optimize landing page: Load only what you need
 <script type="text/javascript" src='file1.js'
defer='defer'></script>
Further optimizations
Be lightweight, control your
Resource Usage
App gets 5s to handle
suspend
App is not notified
before termination
Apps are notified when
they have been resumed
User
Launches
App
Splash
screen
Manage your resources
URL.revokeObjectURL
 var url = URL.createObjectURL(blob, {oneTimeOnly: true});
// Pick an image file
picker.pickSingleFileAsync()
.then(function (file) {
var properties = Windows.Storage.FileProperties.ThumbnailMode;
return file.getThumbnailAsync(properties.singleItem, 1024);
})
.then(function (thumb) {
var imgTag = document.getElementById("imageTag");
imgTag.src = URL.createObjectURL(thumb, false);
});
// Pick an image file
picker.pickSingleFileAsync()
.then(function (file) {
var imgTag = document.getElementById("imageTag");
imgTag.src = URL.createObjectURL(file, false);
});
Manage your Resources:
// Open File Picker
var picker = new Windows.Storage.Pickers.FileOpenPicker();
picker.fileTypeFilter.replaceAll([".jpg", ".png"]);
Show you’re listening, process
user inputs
0s 1s 2s 3s
UI thread
Launch User input Animation
twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
Typical Execution Flow on the UI thread
JavaScript
Web Worker
JavaScript
LayoutUpdate View
User Input Event,
Timer,
or Callback
UI Thread
Update App
Logic
twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischenPAGE 75
xhr
//access a web service, cloud service, local resource
http://www.example.org/somedata.json
Activation time Memory leaks
UI responsiveness Idle state CPU usage
Layout passes Successful suspend
Synchronous XMLHttpRequest on UI
thread
Memory reduction when suspended
Image scaling App memory growth
Memory footprint Runtime broker memory growth
Runtime broker memory reference set
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh perfw8appdevv1
PAGE 79
PAGE 80
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh perfw8appdevv1
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh perfw8appdevv1
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh perfw8appdevv1
http://bit.ly/2000Cash
 Publish your app to the Windows
Store and/or Windows Phone Store
March 8, 2013 through June 30, 2013
 Submit up to 10 published apps per
Store and get a $100 Virtual Visa®
 More: http://bit.ly/2000Cash
http://bit.ly/HTML5Wins8Camp
http://bit.ly/CampInBox
http://msdn.microsoft.com/en-us/library/windows/apps/hh465194.aspx
http://Aka.ms/brockschmidtbook
 http:/dev.windows.comPAGE
PAGE
• Responsive Web Design and CSS3
• http://bit.ly/CSS3Intro
• HTML5, CSS3 Free 1 Day Training
• http://bit.ly/HTML5DevCampDownload
• Using Blend to Design HTML5 Windows 8 Application (Part II): Style,
Layout and Grid
• http://bit.ly/HTML5onBlend2
• Using Blend to Design HTML5 Windows 8 Application (Part III): Style
Game Board, Cards, Support Different Device, View States
• http://bit.ly/HTML5onBlend3
• Feature-specific demos
• http://ie.microsoft.com/testdrive/
• Real-world demos
• http://www.beautyoftheweb.com/

More Related Content

What's hot

JAVA SCRIPT
JAVA SCRIPTJAVA SCRIPT
JAVA SCRIPT
Mohammed Hussein
 
Java Script
Java ScriptJava Script
Java Script
SURBHI SAROHA
 
Java script programs
Java script programsJava script programs
Java script programs
ITz_1
 
Scraping the web with Laravel, Dusk, Docker, and PHP
Scraping the web with Laravel, Dusk, Docker, and PHPScraping the web with Laravel, Dusk, Docker, and PHP
Scraping the web with Laravel, Dusk, Docker, and PHP
Paul Redmond
 
Java script
Java scriptJava script
Java script
umesh patil
 
Browser extension
Browser extensionBrowser extension
Browser extension
Cosmin Stefanache
 
NodeJS for Novices - 28/Oct/13 - Winnipeg, MB
NodeJS for Novices - 28/Oct/13 - Winnipeg, MBNodeJS for Novices - 28/Oct/13 - Winnipeg, MB
NodeJS for Novices - 28/Oct/13 - Winnipeg, MB
David Wesst
 
JavaScript DOM - Dynamic interactive Code
JavaScript DOM - Dynamic interactive CodeJavaScript DOM - Dynamic interactive Code
JavaScript DOM - Dynamic interactive Code
Laurence Svekis ✔
 
JavaScript Jump Start 20220214
JavaScript Jump Start 20220214JavaScript Jump Start 20220214
JavaScript Jump Start 20220214
Haim Michael
 
Monster JavaScript Course - 50+ projects and applications
Monster JavaScript Course - 50+ projects and applicationsMonster JavaScript Course - 50+ projects and applications
Monster JavaScript Course - 50+ projects and applications
Laurence Svekis ✔
 
Nodejs
NodejsNodejs
Nodejs
dssprakash
 
WordPress Hardening
WordPress HardeningWordPress Hardening
WordPress Hardening
Maurizio Pelizzone
 
JavaScript Presentation Frameworks and Libraries
JavaScript Presentation Frameworks and LibrariesJavaScript Presentation Frameworks and Libraries
JavaScript Presentation Frameworks and Libraries
Oleksii Prohonnyi
 
Introduction to Java Script
Introduction to Java ScriptIntroduction to Java Script
Introduction to Java Script
Vijay Kumar Verma
 
Passo a Passo para criar uma aplicação Móvel Híbrida
Passo a Passo para criar uma aplicação Móvel HíbridaPasso a Passo para criar uma aplicação Móvel Híbrida
Passo a Passo para criar uma aplicação Móvel Híbrida
Juliano Martins
 
Java script by Act Academy
Java script by Act AcademyJava script by Act Academy
Java script by Act Academy
actanimation
 
Creating chrome-extension
Creating chrome-extensionCreating chrome-extension
Creating chrome-extension
Akshay Khale
 
Chrome Extension
Chrome ExtensionChrome Extension
Chrome Extension
Andrei McMillan
 

What's hot (18)

JAVA SCRIPT
JAVA SCRIPTJAVA SCRIPT
JAVA SCRIPT
 
Java Script
Java ScriptJava Script
Java Script
 
Java script programs
Java script programsJava script programs
Java script programs
 
Scraping the web with Laravel, Dusk, Docker, and PHP
Scraping the web with Laravel, Dusk, Docker, and PHPScraping the web with Laravel, Dusk, Docker, and PHP
Scraping the web with Laravel, Dusk, Docker, and PHP
 
Java script
Java scriptJava script
Java script
 
Browser extension
Browser extensionBrowser extension
Browser extension
 
NodeJS for Novices - 28/Oct/13 - Winnipeg, MB
NodeJS for Novices - 28/Oct/13 - Winnipeg, MBNodeJS for Novices - 28/Oct/13 - Winnipeg, MB
NodeJS for Novices - 28/Oct/13 - Winnipeg, MB
 
JavaScript DOM - Dynamic interactive Code
JavaScript DOM - Dynamic interactive CodeJavaScript DOM - Dynamic interactive Code
JavaScript DOM - Dynamic interactive Code
 
JavaScript Jump Start 20220214
JavaScript Jump Start 20220214JavaScript Jump Start 20220214
JavaScript Jump Start 20220214
 
Monster JavaScript Course - 50+ projects and applications
Monster JavaScript Course - 50+ projects and applicationsMonster JavaScript Course - 50+ projects and applications
Monster JavaScript Course - 50+ projects and applications
 
Nodejs
NodejsNodejs
Nodejs
 
WordPress Hardening
WordPress HardeningWordPress Hardening
WordPress Hardening
 
JavaScript Presentation Frameworks and Libraries
JavaScript Presentation Frameworks and LibrariesJavaScript Presentation Frameworks and Libraries
JavaScript Presentation Frameworks and Libraries
 
Introduction to Java Script
Introduction to Java ScriptIntroduction to Java Script
Introduction to Java Script
 
Passo a Passo para criar uma aplicação Móvel Híbrida
Passo a Passo para criar uma aplicação Móvel HíbridaPasso a Passo para criar uma aplicação Móvel Híbrida
Passo a Passo para criar uma aplicação Móvel Híbrida
 
Java script by Act Academy
Java script by Act AcademyJava script by Act Academy
Java script by Act Academy
 
Creating chrome-extension
Creating chrome-extensionCreating chrome-extension
Creating chrome-extension
 
Chrome Extension
Chrome ExtensionChrome Extension
Chrome Extension
 

Similar to Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh perfw8appdevv1

Intro to mobile web application development
Intro to mobile web application developmentIntro to mobile web application development
Intro to mobile web application development
zonathen
 
JavaScript guide 2020 Learn JavaScript
JavaScript guide 2020 Learn JavaScriptJavaScript guide 2020 Learn JavaScript
JavaScript guide 2020 Learn JavaScript
Laurence Svekis ✔
 
JavaScript For People Who Don't Code
JavaScript For People Who Don't CodeJavaScript For People Who Don't Code
JavaScript For People Who Don't Code
Christopher Schmitt
 
Front-end development introduction (JavaScript). Part 2
Front-end development introduction (JavaScript). Part 2Front-end development introduction (JavaScript). Part 2
Front-end development introduction (JavaScript). Part 2
Oleksii Prohonnyi
 
State of modern web technologies: an introduction
State of modern web technologies: an introductionState of modern web technologies: an introduction
State of modern web technologies: an introduction
Michael Ahearn
 
Building high performance web apps.
Building high performance web apps.Building high performance web apps.
Building high performance web apps.
Arshak Movsisyan
 
The "Holy Grail" of Dev/Ops
The "Holy Grail" of Dev/OpsThe "Holy Grail" of Dev/Ops
The "Holy Grail" of Dev/Ops
Erik Osterman
 
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
Evan Mullins
 
Upstate CSCI 450 jQuery
Upstate CSCI 450 jQueryUpstate CSCI 450 jQuery
Upstate CSCI 450 jQuery
DanWooster1
 
Joomla! Day Chicago 2011 Presentation - Steven Pignataro
Joomla! Day Chicago 2011 Presentation - Steven PignataroJoomla! Day Chicago 2011 Presentation - Steven Pignataro
Joomla! Day Chicago 2011 Presentation - Steven Pignataro
Steven Pignataro
 
Meetup Performance
Meetup PerformanceMeetup Performance
Meetup Performance
Greg Whalin
 
Meetup Performance
Meetup PerformanceMeetup Performance
Meetup Performance
Justin Cataldo
 
Google App Engine for PHP
Google App Engine for PHP Google App Engine for PHP
Google App Engine for PHP
Eric Johnson
 
Html5 & less css
Html5 & less cssHtml5 & less css
Html5 & less css
Graham Johnson
 
Building Web Hack Interfaces
Building Web Hack InterfacesBuilding Web Hack Interfaces
Building Web Hack Interfaces
Christian Heilmann
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Sadaaki HIRAI
 
dJango
dJangodJango
dJango
Bob Chao
 
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to DevelopmentWordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
Evan Mullins
 
Fewd week4 slides
Fewd week4 slidesFewd week4 slides
Fewd week4 slides
William Myers
 
Basic JavaScript Tutorial
Basic JavaScript TutorialBasic JavaScript Tutorial
Basic JavaScript Tutorial
DHTMLExtreme
 

Similar to Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh perfw8appdevv1 (20)

Intro to mobile web application development
Intro to mobile web application developmentIntro to mobile web application development
Intro to mobile web application development
 
JavaScript guide 2020 Learn JavaScript
JavaScript guide 2020 Learn JavaScriptJavaScript guide 2020 Learn JavaScript
JavaScript guide 2020 Learn JavaScript
 
JavaScript For People Who Don't Code
JavaScript For People Who Don't CodeJavaScript For People Who Don't Code
JavaScript For People Who Don't Code
 
Front-end development introduction (JavaScript). Part 2
Front-end development introduction (JavaScript). Part 2Front-end development introduction (JavaScript). Part 2
Front-end development introduction (JavaScript). Part 2
 
State of modern web technologies: an introduction
State of modern web technologies: an introductionState of modern web technologies: an introduction
State of modern web technologies: an introduction
 
Building high performance web apps.
Building high performance web apps.Building high performance web apps.
Building high performance web apps.
 
The "Holy Grail" of Dev/Ops
The "Holy Grail" of Dev/OpsThe "Holy Grail" of Dev/Ops
The "Holy Grail" of Dev/Ops
 
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
 
Upstate CSCI 450 jQuery
Upstate CSCI 450 jQueryUpstate CSCI 450 jQuery
Upstate CSCI 450 jQuery
 
Joomla! Day Chicago 2011 Presentation - Steven Pignataro
Joomla! Day Chicago 2011 Presentation - Steven PignataroJoomla! Day Chicago 2011 Presentation - Steven Pignataro
Joomla! Day Chicago 2011 Presentation - Steven Pignataro
 
Meetup Performance
Meetup PerformanceMeetup Performance
Meetup Performance
 
Meetup Performance
Meetup PerformanceMeetup Performance
Meetup Performance
 
Google App Engine for PHP
Google App Engine for PHP Google App Engine for PHP
Google App Engine for PHP
 
Html5 & less css
Html5 & less cssHtml5 & less css
Html5 & less css
 
Building Web Hack Interfaces
Building Web Hack InterfacesBuilding Web Hack Interfaces
Building Web Hack Interfaces
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
 
dJango
dJangodJango
dJango
 
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to DevelopmentWordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
 
Fewd week4 slides
Fewd week4 slidesFewd week4 slides
Fewd week4 slides
 
Basic JavaScript Tutorial
Basic JavaScript TutorialBasic JavaScript Tutorial
Basic JavaScript Tutorial
 

More from Doris Chen

Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016
Doris Chen
 
Building Web Sites that Work Everywhere
Building Web Sites that Work EverywhereBuilding Web Sites that Work Everywhere
Building Web Sites that Work Everywhere
Doris Chen
 
Angular mobile angular_u
Angular mobile angular_uAngular mobile angular_u
Angular mobile angular_u
Doris Chen
 
Lastest Trends in Web Development
Lastest Trends in Web DevelopmentLastest Trends in Web Development
Lastest Trends in Web Development
Doris Chen
 
Angular or Backbone: Go Mobile!
Angular or Backbone: Go Mobile!Angular or Backbone: Go Mobile!
Angular or Backbone: Go Mobile!
Doris Chen
 
OSCON Presentation: Developing High Performance Websites and Modern Apps with...
OSCON Presentation: Developing High Performance Websites and Modern Apps with...OSCON Presentation: Developing High Performance Websites and Modern Apps with...
OSCON Presentation: Developing High Performance Websites and Modern Apps with...
Doris Chen
 
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps FasterPractical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Doris Chen
 
Developing High Performance Websites and Modern Apps with JavaScript and HTML5
Developing High Performance Websites and Modern Apps with JavaScript and HTML5Developing High Performance Websites and Modern Apps with JavaScript and HTML5
Developing High Performance Websites and Modern Apps with JavaScript and HTML5
Doris Chen
 
What Web Developers Need to Know to Develop Native HTML5/JS Apps
What Web Developers Need to Know to Develop Native HTML5/JS AppsWhat Web Developers Need to Know to Develop Native HTML5/JS Apps
What Web Developers Need to Know to Develop Native HTML5/JS Apps
Doris Chen
 
Windows 8 Opportunity
Windows 8 OpportunityWindows 8 Opportunity
Windows 8 Opportunity
Doris Chen
 
Wins8 appfoforweb fluent
Wins8 appfoforweb fluentWins8 appfoforweb fluent
Wins8 appfoforweb fluent
Doris Chen
 
What Web Developers Need to Know to Develop Windows 8 Apps
What Web Developers Need to Know to Develop Windows 8 AppsWhat Web Developers Need to Know to Develop Windows 8 Apps
What Web Developers Need to Know to Develop Windows 8 Apps
Doris Chen
 
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3
Doris Chen
 
Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
Doris Chen
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
Doris Chen
 
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3
Doris Chen
 
Practical HTML5: Using It Today
Practical HTML5: Using It TodayPractical HTML5: Using It Today
Practical HTML5: Using It Today
Doris Chen
 
Dive Into HTML5
Dive Into HTML5Dive Into HTML5
Dive Into HTML5
Doris Chen
 
Practical HTML5: Using It Today
Practical HTML5: Using It TodayPractical HTML5: Using It Today
Practical HTML5: Using It Today
Doris Chen
 
HTML 5 Development for Windows Phone and Desktop
HTML 5 Development for Windows Phone and DesktopHTML 5 Development for Windows Phone and Desktop
HTML 5 Development for Windows Phone and Desktop
Doris Chen
 

More from Doris Chen (20)

Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016
 
Building Web Sites that Work Everywhere
Building Web Sites that Work EverywhereBuilding Web Sites that Work Everywhere
Building Web Sites that Work Everywhere
 
Angular mobile angular_u
Angular mobile angular_uAngular mobile angular_u
Angular mobile angular_u
 
Lastest Trends in Web Development
Lastest Trends in Web DevelopmentLastest Trends in Web Development
Lastest Trends in Web Development
 
Angular or Backbone: Go Mobile!
Angular or Backbone: Go Mobile!Angular or Backbone: Go Mobile!
Angular or Backbone: Go Mobile!
 
OSCON Presentation: Developing High Performance Websites and Modern Apps with...
OSCON Presentation: Developing High Performance Websites and Modern Apps with...OSCON Presentation: Developing High Performance Websites and Modern Apps with...
OSCON Presentation: Developing High Performance Websites and Modern Apps with...
 
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps FasterPractical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
 
Developing High Performance Websites and Modern Apps with JavaScript and HTML5
Developing High Performance Websites and Modern Apps with JavaScript and HTML5Developing High Performance Websites and Modern Apps with JavaScript and HTML5
Developing High Performance Websites and Modern Apps with JavaScript and HTML5
 
What Web Developers Need to Know to Develop Native HTML5/JS Apps
What Web Developers Need to Know to Develop Native HTML5/JS AppsWhat Web Developers Need to Know to Develop Native HTML5/JS Apps
What Web Developers Need to Know to Develop Native HTML5/JS Apps
 
Windows 8 Opportunity
Windows 8 OpportunityWindows 8 Opportunity
Windows 8 Opportunity
 
Wins8 appfoforweb fluent
Wins8 appfoforweb fluentWins8 appfoforweb fluent
Wins8 appfoforweb fluent
 
What Web Developers Need to Know to Develop Windows 8 Apps
What Web Developers Need to Know to Develop Windows 8 AppsWhat Web Developers Need to Know to Develop Windows 8 Apps
What Web Developers Need to Know to Develop Windows 8 Apps
 
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3
 
Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
 
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3
 
Practical HTML5: Using It Today
Practical HTML5: Using It TodayPractical HTML5: Using It Today
Practical HTML5: Using It Today
 
Dive Into HTML5
Dive Into HTML5Dive Into HTML5
Dive Into HTML5
 
Practical HTML5: Using It Today
Practical HTML5: Using It TodayPractical HTML5: Using It Today
Practical HTML5: Using It Today
 
HTML 5 Development for Windows Phone and Desktop
HTML 5 Development for Windows Phone and DesktopHTML 5 Development for Windows Phone and Desktop
HTML 5 Development for Windows Phone and Desktop
 

Recently uploaded

Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
sunilverma7884
 
CiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.pptCiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.ppt
moinahousna
 
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptxUse Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
SynapseIndia
 
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
maigasapphire
 
Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024
aakash malhotra
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
Tatiana Al-Chueyr
 
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and OllamaTirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Zilliz
 
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
aslasdfmkhan4750
 
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSECHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
kumarjarun2010
 
Pigging Unit Lubricant Oil Blending Plant
Pigging Unit Lubricant Oil Blending PlantPigging Unit Lubricant Oil Blending Plant
Pigging Unit Lubricant Oil Blending Plant
LINUS PROJECTS (INDIA)
 
Opencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of MünsterOpencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of Münster
Matthias Neugebauer
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
Neo4j
 
July Patch Tuesday
July Patch TuesdayJuly Patch Tuesday
July Patch Tuesday
Ivanti
 
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes..."Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
Anant Gupta
 
Types of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technologyTypes of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technology
ldtexsolbl
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
huseindihon
 
Feature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptxFeature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptx
ssuser1915fe1
 
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
digitalxplive
 
Amul milk launches in US: Key details of its new products ...
Amul milk launches in US: Key details of its new products ...Amul milk launches in US: Key details of its new products ...
Amul milk launches in US: Key details of its new products ...
chetankumar9855
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
Adam Dunkels
 

Recently uploaded (20)

Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
 
CiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.pptCiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.ppt
 
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptxUse Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
 
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
 
Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
 
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and OllamaTirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
 
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
 
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSECHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
 
Pigging Unit Lubricant Oil Blending Plant
Pigging Unit Lubricant Oil Blending PlantPigging Unit Lubricant Oil Blending Plant
Pigging Unit Lubricant Oil Blending Plant
 
Opencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of MünsterOpencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of Münster
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
 
July Patch Tuesday
July Patch TuesdayJuly Patch Tuesday
July Patch Tuesday
 
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes..."Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
 
Types of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technologyTypes of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technology
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
 
Feature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptxFeature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptx
 
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
 
Amul milk launches in US: Key details of its new products ...
Amul milk launches in US: Key details of its new products ...Amul milk launches in US: Key details of its new products ...
Amul milk launches in US: Key details of its new products ...
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
 

Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh perfw8appdevv1

  • 2. twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen Who am I?  Developer Evangelist at Microsoft based in Silicon Valley, CA  Blog: http://blogs.msdn.com/b/dorischen/  Twitter @doristchen  Email: doris.chen@microsoft.com  Office Hours http://ohours.org/dorischen  Has over 15 years of experience in the software industry focusing on web technologies  Spoke and published widely at JavaOne, O'Reilly, Silicon Valley Code Camp, SD West, SD Forum and worldwide User Groups meetings  Doris received her Ph.D. from the University of California at Los Angeles (UCLA) PAGE 2
  • 4. As of March 2012, IDC
  • 7. HTML App Platform App container HTML host process Internet Explorer Web platform TAB App code Web platform Windows runtime App code
  • 10. PAGE
  • 17. The development tools are FREE! If you use a higher SKU, it just works!
  • 19. PAGE
  • 20. demo
  • 22. PAGE
  • 24. "Code for touch, get mouse and pen for free!"
  • 26. function onLoad() { ... var workSpaces = document.getElementsByClassName("workspace"); for (i = 0; i < workSpaces.length; i++) { workSpaces[i].addEventListener("MSPointerDown", pointerDownHandler, false); workSpaces[i].addEventListener("MSPointerMove", pointerMoveHandler, false); workSpaces[i].addEventListener("MSPointerUp", pointerUpHandler, false); workSpaces[i].addEventListener("MSManipulationStateChanged", resetInteractions, false); } ... }
  • 28. Tips & tricks that still work http://channel9.msdn.com/Events/Build/2012/3-132
  • 30. <html> <head> <script type="text/javascript"> function helloWorld() { alert('Hello World!') ; } </script> </head> <body> … </body> </html> Avoid Inline JavaScript Efficiently Structure Markup
  • 31. JSON Always Faster than XML for Data JSON Representation "glossary":{ "title": "example glossary", "GlossDiv":{ "title": "S", "GlossList": { "GlossEntry": { "ID": "SGML", "SortAs": "SGML", "GlossTerm": "Markup Language", "Acronym": "SGML", "Abbrev": "ISO 8879:1986", "GlossDef": { "para": "meta-markup language", "GlossSeeAlso": ["GML", "XML"] }, "GlossSee": "markup" } } } } XML Representation <!DOCTYPE glossary PUBLIC "DocBook V3.1"> <glossary><title>example glossary</title> <GlossDiv><title>S</title> <GlossList> <GlossEntry ID="SGML" SortAs="SGML"> <GlossTerm>Markup Language</GlossTerm> <Acronym>SGML</Acronym> <Abbrev>ISO 8879:1986</Abbrev> <GlossDef> <para>meta-markup language</para> <GlossSeeAlso OtherTerm="GML"> <GlossSeeAlso OtherTerm="XML"> </GlossDef> <GlossSee OtherTerm="markup"> </GlossEntry> </GlossList> </GlossDiv> </glossary>
  • 32. Native JSON Methods var jsObjStringParsed = JSON.parse(jsObjString); var jsObjStringBack = JSON.stringify(jsObjStringParsed); Use Native JSON Methods Write Fast JavaScript
  • 35. Loading and parsing of HTML, JS, CSS New host process Tile click "DOMContentLoaded" event Windows Runtime "activated" event Splash screen Ready for user Navigation App visible
  • 36. Optimize your landing page: Package Locally
  • 37. Optimize your landing Page: Use Local Data
  • 38. Internet Internet 5 Fetch Info From Network Cache Info Locally Fetch Info From Cache No Network Available AppCache
  • 39. Internet Internet HTML 5 AppCache – Update Flow Fetch Manifest From Network If diff Create New Cache Fetch Info From Cache No Network Available AppCache
  • 40. twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen manifest file PAGE 60
  • 42. twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischenPAGE 62
  • 43. twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen var oRequestDB = window.indexedDB.open(“Library”); oRequestDB.onsuccess = function (event) { db1 = oRequestDB.result; if (db1.version == 1) { txn = db1.transaction([“Books”],IDBTransaction.READ_ONLY); var objStoreReq = txn.objectStore(“Books”); var request = objStoreReq.get("Book0"); request.onsuccess = processGet; } };
  • 44. Optimize landing page: Load only what you need  <script type="text/javascript" src='file1.js' defer='defer'></script>
  • 46. Be lightweight, control your Resource Usage
  • 47. App gets 5s to handle suspend App is not notified before termination Apps are notified when they have been resumed User Launches App Splash screen
  • 48. Manage your resources URL.revokeObjectURL  var url = URL.createObjectURL(blob, {oneTimeOnly: true});
  • 49. // Pick an image file picker.pickSingleFileAsync() .then(function (file) { var properties = Windows.Storage.FileProperties.ThumbnailMode; return file.getThumbnailAsync(properties.singleItem, 1024); }) .then(function (thumb) { var imgTag = document.getElementById("imageTag"); imgTag.src = URL.createObjectURL(thumb, false); }); // Pick an image file picker.pickSingleFileAsync() .then(function (file) { var imgTag = document.getElementById("imageTag"); imgTag.src = URL.createObjectURL(file, false); }); Manage your Resources: // Open File Picker var picker = new Windows.Storage.Pickers.FileOpenPicker(); picker.fileTypeFilter.replaceAll([".jpg", ".png"]);
  • 50. Show you’re listening, process user inputs
  • 51. 0s 1s 2s 3s UI thread Launch User input Animation
  • 52. twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen Typical Execution Flow on the UI thread JavaScript Web Worker JavaScript LayoutUpdate View User Input Event, Timer, or Callback UI Thread Update App Logic
  • 53. twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
  • 54. twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischenPAGE 75
  • 55. xhr //access a web service, cloud service, local resource http://www.example.org/somedata.json
  • 56. Activation time Memory leaks UI responsiveness Idle state CPU usage Layout passes Successful suspend Synchronous XMLHttpRequest on UI thread Memory reduction when suspended Image scaling App memory growth Memory footprint Runtime broker memory growth Runtime broker memory reference set
  • 63. http://bit.ly/2000Cash  Publish your app to the Windows Store and/or Windows Phone Store March 8, 2013 through June 30, 2013  Submit up to 10 published apps per Store and get a $100 Virtual Visa®  More: http://bit.ly/2000Cash
  • 65. PAGE • Responsive Web Design and CSS3 • http://bit.ly/CSS3Intro • HTML5, CSS3 Free 1 Day Training • http://bit.ly/HTML5DevCampDownload • Using Blend to Design HTML5 Windows 8 Application (Part II): Style, Layout and Grid • http://bit.ly/HTML5onBlend2 • Using Blend to Design HTML5 Windows 8 Application (Part III): Style Game Board, Cards, Support Different Device, View States • http://bit.ly/HTML5onBlend3 • Feature-specific demos • http://ie.microsoft.com/testdrive/ • Real-world demos • http://www.beautyoftheweb.com/