Download as PDF, PPTX
![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);
}
...
}](https://image.slidesharecdn.com/wins8forhtml5-121128211659-phpapp01/85/Building-Beautiful-and-Interactive-Windows-8-apps-with-JavaScript-HTML5-CSS3-38-320.jpg)
![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);
}
...
}](https://image.slidesharecdn.com/wins8forhtml5-121128211659-phpapp01/75/Building-Beautiful-and-Interactive-Windows-8-apps-with-JavaScript-HTML5-CSS3-38-2048.jpg)
Uploaded byDoris Chen
Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
Doris Chen is a developer evangelist at Microsoft with over 15 years of experience in web technologies, based in Silicon Valley. She has extensively spoken and published on various platforms, holds a Ph.D. from UCLA, and offers guidance on Windows 8 application development. Doris provides resources for developers, including training, tips, and a supportive community through her blog and social media.
Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
- 2. 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 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 twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen
- 3.
- 4. As of March2012, IDC
- 6. PAGE 7 twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen
- 7.
- 8.
- 10.
- 11. PAGE 13 twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen
- 12. PAGE 14 twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen
- 14. /* Re-arrange andhide/show content */ /* */ Full screen Portrait /* …*/ /* …*/ Snap Fill PAGE 17
- 16. PAGE 21 twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen
- 17. PAGE 22 twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen
- 19. The development toolsare FREE! If you use a higher SKU, it just works!
- 20.
- 22.
- 23. Feature Local context Web context Windows Run-time Yes No Windows Library for Yes No * Javascript External script No Yes references Cross-domain XHR Yes No requests Automatic filtering for Yes No script injection on DOM 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.
- 24. 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
- 25.
- 29. PAGE 40 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
- 31.
- 32.
- 35. "Code for touch,get mouse and pen for free!"
- 38. 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); } ... }
- 39. 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; } };
- 40.
- 42. DatePicker SettingsFlyout Listview SemanticZoom Semantic Zoom Flipview Menu Flyout Rating Appbar Slide does not include all WinJS controls (Tooltip, ViewBox, ToggleSwitch, HTMLControl, etc.)
- 43.
- 45. <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>
- 46. Use whatyou 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 Blog http://blogs.msdn.com/dorischen PAGE
- 50. YOUR IDEA. Week 1 App design YOUR APP . Week 2 Coding your app 30 DAYS. Week 3 Making your app shine Week 4 Get published You can develop a Windows 8 app in 30 days— and we’re here to help. • 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
- 51. • Responsive WebDesign 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 PAGE • http://www.beautyoftheweb.com/
- 52. http://bit.ly/CampInBox Windows 8Cheat Sheet http://bit.ly/wins8cheatsheet http://bit.ly/Win8GenApp http:/dev.windows.com PAGE