Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI
•Als PPTX, PDF herunterladen•
0 gefällt mir•971 views
Empfohlen
Weitere ähnliche Inhalte
Mehr von Frédéric Harper
Mehr von Frédéric Harper (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI
- 10. 1.
- 11. 1. 2.
- 12. 1. 2. 3.
- 13. demo
- 20. demo
- 22. demo
- 26. demo
- 48. City Guide City Guide Barcelona, Spain 7 night Alaska Cruise Weather Attractions 7 days Today 54/43 Mostly Sunny Today 54/43 Mostly Sunny Today 54/43 Mostly Sunny Ocean View Cabins Suites Today 54/43 Mostly Sunny Upgrade from an inside cabin and save Upgrade from an inside cabin and save $43/night/person! $43/night/person! Picture windows with ocean and port views Picture windows with ocean and port From $2,099 — only $150/night/person based on view Today double occupancy From $2,099 — only $150/night/person 54/43 do Mostly Sunny
- 49. Contoso Travel Last minute deals My Trips Featured destinations Top Destinations for 2012 Barcelona, Spain 7 night Alaska Cruise Weather Attractions 7 days Today 54/43 Mostly Sunny Today 54/43 Mostly Sunny Today 54/43 Mostly Sunny Ocean View Cabins Suites Today 54/43 Mostly Sunny Upgrade from an inside cabin and save Upgrade from an inside cabin and save $43/night/person! $43/night/person! Picture windows with ocean and port views Picture windows with ocean and port From $2,099 — only $150/night/person based on view Today double occupancy From $2,099 — only $150/night/person 54/43 do Mostly Sunny
- 50. demo
- 56. demo
- 60. demo
- 68. http://windows.com http://dev.windows.com http://design.windows.com http://w00t.ms
Hinweis der Redaktion
- 8 traits of great Metro style appsI can get content from and share content with people I care about
- 8 traits of great Metro style appsI can get content from and share content with people I care about
- 8 traits of great Metro style appsI can get content from and share content with people I care about
- 8 traits of great Metro style appsI can get content from and share content with people I care about
- 8 traits of great Metro style appsI can get content from and share content with people I care about
- Choose two or three of the many demos we have on the IE 10 testdrive site. Try to end up on a high/graphical note.. Like the touch demo..Ecmascript5http://ie.microsoft.com/testdrive/HTML5/TryStrict/Default.htmlFormshttp://ie.microsoft.com/testdrive/HTML5/Forms/Default.htmlTouchhttp://ie.microsoft.com/testdrive/Graphics/TouchEffects/Web workershttp://ie.microsoft.com/testdrive/HTML5/WebWorkerTest262/Default.html
- Let’s put this topic into context…
- You are here !!
- Of course in Windows 8, we are adding more.. We will get into the details of these in the next few slides where we highlight most relevant ones
- Choose two or three of the many demos we have on the IE 10 testdrive site. Try to end up on a high/graphical note.. Like the touch demo..Ecmascript5http://ie.microsoft.com/testdrive/HTML5/TryStrict/Default.htmlFormshttp://ie.microsoft.com/testdrive/HTML5/Forms/Default.htmlTouchhttp://ie.microsoft.com/testdrive/Graphics/TouchEffects/Web workershttp://ie.microsoft.com/testdrive/HTML5/WebWorkerTest262/Default.html
- File New Project in Visual Studio Intellisense on Javascript.. Demonstrate Simulator Demonstrate DOM explorer using the simulator.. Set a breakpoint in the Debugger … a good place for this is the navigated event in navigator.js Open Javascript console .. Now type vardlg = new Windows.UI.Popups.MessageDialog("test") ; dlg.showAsync().then ( function () {} ) ; Comment out that this is the same text we used earlier.. Notice the javascript syntax in showAsync.. Tease the audience.. Will this work? Injecting a statement? Open Contoso Recipes in Blend .. Make sure this is a copy for this session. You don’t want your changes preservedDemonstrate how blend uses live data … Explain the solution is data driven, yet it is all showing. Style something, demonstrating that blend is great for styling.. Drag a control somewhere into layout..
- Demonstratecontoso recipes application Show the use of the module pattern in javascript… Show the use of a promise.. Show the navigation Show the WinJS.application object To see all of these, it is trivial to do a search on the solution for //DEMO:WinJS and you will be able to see areas to set breakpoints for discussion..
- If you prefer to use your own library, you can. As long as your app is compliant with Metro SDK, you will be fine.. At build, we explicitly wrote a sample (finance) using jQuery… It works very well.. If you are bringing your own library, here is the advise that I can give you:Mix & Match work fine. WinJS does a lot of things well, such as simplifying the object model, wrappers for file system, implementing the promise pattern, etc.. Use WinJS for all of that.. Use your favorite library for everything else, but do try to adhere to the Metro UI and the Windows personality. Your users will appreciate it if you do..
- 8 traits of great Metro style appsI can get content from and share content with people I care about
- Content before Chrome is a core principle to Metro-styled design
- The shift in focus is crucial – it means that the users, instead of remembering how to use the software, are remembering the content – the news story they read about, the social updates from their friends, the products they are shopping for.
- Windows 8 is about putting the app on the center stage. Content is the heart of any experience, and everything else are only tools to let you consume and interact with your contentIt’s important to think about how to leverage this real estate and place content first, so that users can actually be immersed in the things they love.Where does chrome come from? LayoutCommandsNavigationLet’s look at how we handle these in a Content first world
- Content before Chrome is a core principle to Metro-styled design
- In the absence of chrome, when users are focusing on the content, the formation of your content is what forms the silhouette. This shape is what allows your eyes to recognize something as a Metro style app, as opposed to a webpage, or a traditional app, before you even really process it. This layout allows you to provide the users with a feeling of familiarity and confidence. Align elements on a grid to create a structured and consistent layoutTop, left, and bottom margins create a ‘C’ with negative space to indicate panning directionThe headers are in the same position, use the same type treatmentConsistent type sizes are used throughout and in parallel locations: Large, medium, small
- Content before Chrome is a core principle to Metro-styled design
- Leave only the most relevant elements are on screen Use the app bar to tuck away commanding chrome until needed by the usersUse the system charm for search and settings
- Contextual commandsCommands are generally on the rightNew is on the far rightWhen an item is selected, the app bar shows, and a new contextual command shows on the other side (easy to notice and differentiate)When the app bar comes up because of selection it is sticky – no longer light dismiss
- Integrate commands into the contentLight dismiss model for transient UI such as flyouts. No need for close buttonFlyoutsFlyouts should always appear adjacent to item that the user tapped to invoke it. Users can respond to the flyout efficiently with touch and mouseThe flyout’s context as it relates to the anchor is very clearFlyouts are great as confirmation messages rather than using dialogsThe purpose of a confirmation is to make sure the user hasn’t tapped a significant command accidentally so all you need is a second tap – you should be a lightweight and unobtrusive as possible getting the confirmation since it’s likely that the user did mean to press it the first time
- Content before Chrome is a core principle to Metro-styled design
- Integrate navigational elements into the contentThe group headers are a part of the content and inform you of what you are viewing.Reasons why people build tabs: Want a way for people to see all the groups availableWant to quickly jump from one group to anotherBoth of these can be accomplished with semantic zoom
- UI Structure
- UI Structure
- Choose two or three of the many demos we have on the IE 10 testdrive site. Try to end up on a high/graphical note.. Like the touch demo..Ecmascript5http://ie.microsoft.com/testdrive/HTML5/TryStrict/Default.htmlFormshttp://ie.microsoft.com/testdrive/HTML5/Forms/Default.htmlTouchhttp://ie.microsoft.com/testdrive/Graphics/TouchEffects/Web workershttp://ie.microsoft.com/testdrive/HTML5/WebWorkerTest262/Default.html
- Your app can be displayed in any of the following sizes:Snapped: 320x768 (a minimum of 1366x768 is required to support snapped view)Full screen landscape / filled: minimum 1024x768Full screen portrait: minimum 768x1024Although there are an infinite number of supported sizes, it is important to verify your application in the most common application dimensions, namely:1024px by 768px1366px by 768px
- Choose two or three of the many demos we have on the IE 10 testdrive site. Try to end up on a high/graphical note.. Like the touch demo..Ecmascript5http://ie.microsoft.com/testdrive/HTML5/TryStrict/Default.htmlFormshttp://ie.microsoft.com/testdrive/HTML5/Forms/Default.htmlTouchhttp://ie.microsoft.com/testdrive/Graphics/TouchEffects/Web workershttp://ie.microsoft.com/testdrive/HTML5/WebWorkerTest262/Default.html
- Use common system entry points, Charms, as a predictable consistent way of accessing contract functionalities so users do not have to relearn
- After your app has registered for the Picker File ExtensionYour app will appear in the list of locations the users can navigate toYou can specify which file types are relevant to your app
- Choose two or three of the many demos we have on the IE 10 testdrive site. Try to end up on a high/graphical note.. Like the touch demo..Ecmascript5http://ie.microsoft.com/testdrive/HTML5/TryStrict/Default.htmlFormshttp://ie.microsoft.com/testdrive/HTML5/Forms/Default.htmlTouchhttp://ie.microsoft.com/testdrive/Graphics/TouchEffects/Web workershttp://ie.microsoft.com/testdrive/HTML5/WebWorkerTest262/Default.html
- Tile templates: A lot of rendering options available from Pure text to Pure images.
- Toast notifications use the same template architecture as live tilesRich set of rendering options available
- Pride in craftsmanship: Layout, every pixel matter. Details like type size matters.Do more with less: Content before chrome. Showing less on screen to let people focus on what matters.Be fast and fluid: Designing with motion and designing for touchAuthentically digital: Being connected and alive with tiles & notifications, Leveraging the cloud to roamWin as one: Using contracts to work with other apps to complete scenarios. 1:1=3