Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
-
Upload
doris-chen -
Category
Documents
-
view
2.079 -
download
1
description
Transcript of Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
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: [email protected]
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
Blog http://blogs.msdn.com/dorischen
As of March 2012, IDC
twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen PAGE 7
Blog http://blogs.msdn.com/dorischen
demo
Blog http://blogs.msdn.com/dorischen PAGE
12
twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen PAGE 13
twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen PAGE 14
/* Re-arrange and hide/show content */
/* */
/* …*/
/* …*/
Full screen
Snap
Fill
Portrait
PAGE 17
twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen PAGE 21
twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen PAGE 22
The development tools are FREE!
If you use a higher SKU, it just works!
demo
Blog http://blogs.msdn.com/dorischen PAGE
28
Feature Local context Web context
Windows Run-time Yes No
Windows Library for
Javascript
Yes No *
External script
references
No Yes
Cross-domain XHR
requests
Yes No
Automatic filtering for
script injection on
DOM
Yes No
There are ways to communicate across contexts, ways to give websites access to some web standards
features and ways to skip automatic filtering within a function.
http://blogs.msdn.com/b/dorischen/archive/2012/10/02/transform-your-html-css-javascript-apps-into-windows-8-application.aspx
http://msdn.microsoft.com/en-us/library/windows/apps/hh700404.aspx
http://msdn.microsoft.com/en-us/library/windows/apps/hh465380.aspx
http://msdn.microsoft.com/en-us/library/windows/apps/hh465373.aspx
Blog http://blogs.msdn.com/dorischen PAGE
32
twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen PAGE 40
demo
Blog http://blogs.msdn.com/dorischen PAGE
43
"Code for touch, get mouse and pen for free!"
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);
}
...
}
this.MSPointerDown = function(evt)
{
context.beginPath();
context.moveTo(evt.offsetX, evt.offsetY);
x = evt.offsetX;
y = evt.offsetY;
brush.started = true;
};
this.MSPointerUp = function(evt)
{
if (brush.started)
{
brush.MSPointerMove(evt);
context.closePath();
brush.started = false;
}
};
demo
SettingsFlyout
Flyout
Appbar
Semantic Zoom
Flipview
SemanticZoom
Listview
Menu
Rating
Slide does not include all WinJS controls (Tooltip, ViewBox, ToggleSwitch, HTMLControl, etc.)
DatePicker
Blog http://blogs.msdn.com/dorischen PAGE
55
<div id="appbar" data-win-control="WinJS.UI.AppBar">
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'brag', label:'Brag', icon:'emoji2', section:'selection', type:'flyout', flyout:'bragFlyout'}"></button>
</div>
<div id="bragFlyout" data-win-control="WinJS.UI.Menu">
<button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'photo', label:'Photo'}"></button>
<button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'video', label:'Video' }"></button>
</div>
Blog http://blogs.msdn.com/dorischen
Use what you already know
Best practices
Adopt the right look and feel for your app
Touch, UI Control, View State, Scroll, Zoom
Follow the app model
App Bar, Hardware
PAGE
58
YOUR IDEA.
YOUR APP.
30 DAYS.
You can develop a Windows 8 app in 30 days—
and we’re here to help.
Week 1 App design
Week 2 Coding your app
Week 3 Making your app shine
Week 4 Get published
• Insider tips and tricks on Windows 8 application development.
• Personal on-the-phone access to a Windows 8 architect*.
• An exclusive one-on-one Metro style design consultation*.
• An opportunity to get expert help from a Microsoft Services Engineer at an App Excellence Lab.
Sign Up http://bit.ly/Win8GenApp
PAGE
63
• 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/
http://bit.ly/CampInBox
Windows 8 Cheat Sheethttp://bit.ly/wins8cheatsheet
http://bit.ly/Win8GenApp
http:/dev.windows.comPAGE
64