Date post: | 27-Dec-2015 |
Category: |
Documents |
Upload: | theodore-nelson |
View: | 217 times |
Download: | 0 times |
Building Metro style apps with HTML and JavaScriptPaul GusmorinoLead Program ManagerMicrosoft Corporation
DEV366
Agenda
What is Metro style UI?Platform for Metro style apps with HTML and JSDeeper dive on new HTML/CSS featuresDeeper dive on Windows Library for JavaScript
You’ll leave with examples of how to:Use HTML/CSS and Windows Library for JavaScript to implement common Metro style app user interface patterns.
A set of common user interface patternsgrounded in a set of design principles
and supported by the Windows 8 platform.
Powerful engine for creating user interfacesReuse skills (and code!) from the standard webNew HTML/CSS features in Windows 8 give you the capabilities you need to make great Metro style UIs
HTML/CSS
Controls and other UI building blocks for Metro style appsStyle sheets with default Metro style designCommon infrastructure for responsive, reliable apps
WinJS
Seamlessly integrate with the Metro style shellConnect to other apps through contractsAccess storage, devices, and other capabilities of the PC
Windows Runtime
Deep dive into UI platform for Metro style appsWinJS
PagesAnimation LibraryStylesheetsPromises BindingListViewAppBar
New HTML/CSS FeaturesCSS LayoutsCSS Transforms and AnimationsHTML DOM Touch APIsCSS Scroll ViewsHTML Controls
CSS Layouts
Metro Style apps feature adaptive layouts that:Support multiple screen sizes and shapesHandle snapped and filled view statesHandle rotation
CSS Layouts give you:CSS Grid, CSS Flexbox, CSS Multicolumn, Media QueriesNative performanceEasy to use
WinJS Pages
Metro Style apps feature in-line navigation without tearing down the whole screen.
WinJS Pages give you:Load and unload chunks of HTML + CSS + JS code directly inline into your user interfacePage content can be dynamic including other WinJS controls within it
CSS Transforms and Animations
Metro Style apps use a common set of animations:Users can learn meaning of animations in the ‘language’Apps feel cohesive with the systemAnimations look and feel great
WinJS Animation Library gives you:Set of carefully crafted common animations you can apply in your own appBuilds upon CSS Animations for fast and fluid performance
WinJS Animation Library
Metro style apps feature fast and fluid animations.
CSS Animations give you:CSS 2D Transforms, CSS 3D Transforms, CSS Transitions, CSS AnimationsSmooth, independent composition doesn’t block UI thread
HTML Touch/Pointer APIs
Metro Style apps feature <text>.
HTML Touch/Pointer APIs give you:PointsGestures
CSS Scroll Views
Metro Style apps feature direct manipulation panning and zooming of content as a predominant user interface paradigm.
CSS Scroll Views give you:Support touch, mouse, and keyboard“Stick to the finger” experience for panning and zoomingConsistent user experience with rails, inertia, and boundary feedbackSupport for snap points, nesting, and chaining
WinJS Stylesheets
Metro style apps have <text>
WinJS Stylehsheets give you:Dark & LightDefault visuals that map to the Metro style design.Well-defined CSS Selectors you can use to over-ride and customize the visuals to map to your own apps branded look.
WinJS Promise
Metro style apps have user interfaces that are always responsive.
WinJS Promises give you:Handle asynchronous operations without blocking the UIConsistent programming model
WinJS Binding
Metro Style apps are alive and connected to data (from the web or the PC itself) and let users view and consume it.
WinJS Binding give you:One way data bindingAsynchronous notificationsProgrammatic bindingDeclarative binding
Deep dive into UI platform for Metro style appsWinJS
PromisesPagesBindingStylesheetsListViewAppBar
New HTML/CSS FeaturesCSS LayoutsCSS Transforms and AnimationsDOM Touch APICSS Scroll viewsHTML Controls
Powerful engine for creating user interfacesReuse skills (and code!) from the standard webNew HTML/CSS features in Windows 8 give you the capabilities you need to make great Metro style UIs
HTML/CSS
Controls and other UI building blocks for Metro style appsStyle sheets with default Metro style designCommon infrastructure for responsive, reliable apps
WinJS
Related Content
DEV354 Building Windows 8 Metro Style UIs
DEV350 Using Windows Runtime and SDK to Build Metro Style Apps
Find Me Later At… Ask the Experts
DEV352 What Web Developers Need to Know Building Metro style Apps
DEV Track Resources
Visual Studio Home Page :: http://www.microsoft.com/visualstudio/en-us
Jason Zander’s Blog :: http://blogs.msdn.com/b/jasonz/
Facebook :: http://www.facebook.com/visualstudio
Twitter :: http://twitter.com/#!/visualstudio
Somasegar’s Blog :: http://blogs.msdn.com/b/somasegar/
Resources
Connect. Share. Discuss.
http://europe.msteched.com
Learning
Microsoft Certification & Training Resources
www.microsoft.com/learning
TechNet
Resources for IT Professionals
http://microsoft.com/technet
Resources for Developers
http://microsoft.com/msdn
Evaluations
http://europe.msteched.com/sessions
Submit your evals online
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to
be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS
PRESENTATION.