piątek, 25 listopada 2011

Notatki o Windows 8 - odc.2

Dziś głównie o zaleceniach do projektowania UI, w tym jak powinno się obsługiwać wizualnie poszczególne rodzaje błędów. Znajdziemy też sporo informacji o licencji developera (dzięki temu pisząc aplikacje Metro możemy je uruchamiać na naszym komputerze z pominięciem certyfikacji przez Marketplace i w przeciwieństwie do WP7 nie musimy nawet mieć założonego konta).

You can develop a complete game using Microsoft Visual Studio 11 Express for Windows Developer Preview, but the Ultimate version has more extensive graphics debugging support and more tools for asset management.
Currently, only native C++ is supported for DirectX apps.

HTML snippets: Inside the <div> block, right-click in the editor, select Insert Snippet >HTML > table.

In template-based apps, you may want to use querySelector instead of getElementById to retrieve elements.

Always try to use the content.  Whenever possible, let users directly manipulate the content on the app's canvas, rather than adding commands that act on the content. For example, in the travel app, let users rearrange their itinerary by dragging and dropping activities in a list on the canvas, rather than selecting the activity and using Up or Down command buttons.

If you can't use the content, place commands on one of these UI surfaces:
- In the app bar: You should put most commands into the app bar, which is usually hidden until the users bring it up.
- On the app's canvas itself: If the user is on a page or view that has a single purpose, you can provide commands for  that purpose directly on the canvas. There should be very few of these commands.
- In a context menu: You can use context menus for clipboard actions (such as cut, copy, and paste), or for commands  that apply to content that cannot be selected (like adding a push pin to a location on a map).

Windows Developer Preview supports landscape, portrait, snapped, and fill views. Users can put your app in any of these views at any time, and you want your app to look and work great in each one.

When you design your app for touch input and manipulation, you get support for mouse and keyboard input for free. Your users can switch from one put method to another and not miss a beat of the app experience. Plug a keyboard into a slate? No problem. Your app adapts to your users' choices.

Tap: Used to activate a control, select a word, position the caret, and so on.
Hold, or press and hold: Used to learn about the user interface (tooltip or self-revealing interaction) or access a context menu.
Drag: Used to pan, move an object, or select an object.
Cross-slide: One finger is placed on an object and dragged at a right angle to the panning direction. Used to select an object without invoking a command, or to move it to a new location (drag-and-drop).
  Coś takiego jest zdaje się np. na GridView
Pan: Used to scroll, or pan, across the app UI.
Pinch: Used to zoom in or out, optically or semantically.

To avoid confusing users, you shouldn't create new interactions that accomplish the same goal as a standard interaction.

Strings are placed into a resource file (ResW or ResJSON). Take other files that you have identified as requiring localization (f.e images) and place them in folders tagged with language names.

Any customer who pays for an app can install and use that app on multiple Windows Developer Preview devices.

Metro style apps that are not certified by the Windows Store are not allowed to run on Windows.You can obtain a license that unlocks Windows Developer Preview so that you can run and debug Metro style apps without Windows Store certification. The license is provided
on a per-computer basis at no cost.
When you install a developer licenses, you can run unpackaged projects on the local computer by pressing F5 in Microsoft Visual Studio, just as you can with classic desktop applications. You can also install a developer licenses on a remote computer or device, install a package (that does not have to be certified), run it, and debug it.
The developer licenses does not affect the runtime environment, only setup and deployment.
The developer licenses does not affect Windows Store-certified apps or classic desktop applications.
You can also use the developer licenses to update a Windows Store-certified app without getting the update signed by the store.
There is no charge for a developer licenses, and you can obtain as many as you need. Developer licenses are not related to a Windows Store  account, and you can obtain them even if you do not have an account.
When you run Microsoft Visual Studio 11 Express for Windows Developer Preview for the first time, it prompts you to obtain a developer licenses. After you install a license on a computer, you will not be prompted again unless the license has expired (or you removed it) and you try to run a Metro style app or create a new project. (The license that is issued with the BUILD conference prerelease software is valid for 150 days. The terms of the license renewal process have not been determined at the time of this writing.)
When you first run or debug a Metro style app on a remote computer or device that is tethered to your development computer, you are prompted to install the remote debugging tools and a separate developer licenses on the remote computer.
If you are not using Visual Studio 11 Express for Windows Developer Preview, you can acquire and manage developer licenses on the command line by calling these three methods in wsclient.dll:
•    AcquireDeveloperLicense
•    CheckDeveloperLicense
•    RemoveDeveloperLicense
You can invoke the methods by using Windows PowerShell cmdlets.
Microsoft may monitor developer licenses usage on a registered computer to detect fraudulent use.

The canvas holds all of your content and controls. Whenever possible, you should integrate your UI elements into this base surface. For example, instead of using a pop-up to display an error, you can smoothly show, hide, or shift the error message on the window with the built-in animations. Presenting your UI inline lets users fully immerse themselves in your app and stay in context.

The app bar is hidden by default and appears when users swipe a finger from the top or bottom edge of the screen. It covers the content of the app  and can be dismissed by the user with an edge swipe, or by interacting with the app.

You can use up to five commands on each content menu, like cut, copy, or open with. This limit keeps the context menu uncluttered, easy-to-read, and directly relevant to the text or object that the commands act on.  Don't use context menus as the primary command interface for an app. That's what the app bar is for.

Use message dialogs only when you intend to stop the user and to demand response.

Flyouts show temporary, dismissable UI related to what the user is currently doing. For example, you can use flyouts to ask the user to confirm an action, to show a drop-down menu from a button the app bar, or to show more details about an item. Flyouts are different from message dialogs in that you should show a flyout only in response to a user tap or click, and you should always dismiss the flyout when the user taps outside of it; you should show a message dialog only when you need to interrupt the user and demand some kind of interaction. The user can tap the button or tap outside the flyout to dismiss it. That is, the message in the flyout can be ignored.

Errors within an app can be communicated to the user through three main surfaces. The right surface for an error is chosen by the app developer  based on the content and consequences of the error.

A non-critical error specific to an element in the app: Text inline on the canvas:

A non-critical error that applies to the whole app: Text at the top of the page (text only)

A significant but non-critical error that applies to the whole app and your app can suggest a solution: Error and warning bar at the top of the page (text + 2 buttons):

A critical error that applies to the whole app and prevents the user from using the app: Message dialog centered across the app (text, 1-3 buttons, optional title):

Do not use flyouts, toasts, or custom UI surfaces to display errors.

Fluid views (JS):
Use fluid layouts
Use media queries to identify the view state and resolution being targeted.
Use controls that are designed for fluid layout, like ListView.
Consider vector-based UI (SVG, XAML) for application resources.

For maximum control over the UI and minimum development effort, you should use the ListView and CSS3 Flexible Box controls wherever possible.
Use CSS grids.

Snapping is only available on displays with sufficient horizontal resolution (> 1366 px). A snapped app is always a standard width, measured in touch independent pixels (TIPs), and can be placed on either side of the screen.


Brak komentarzy: