Windows 8 quick start dev

Developer Ignition

Windows 8 Quick Start

Alexandre [email protected]|@alexmarreiros|

digitalmindignition.wordpress.com

Windows 8 Quick Start – About The presentation Author


Remember the UI Features


Windows startup screen

Future

Past


• Intend to make easy to have a view at the apps;

• Is basically a collection of tiles related to the different apps instaled in the system;

• Allows to Group Apps;

• Give the user a view over all the installed apps withouth have to click on a menu;

Windows startup screen


• Immersive;

• Fast and Fluid;

• Touch Enabled;

• Integrated in the system;

• Consistent with the System;

The Metro UI


• Apps are imersive, sometimes the user feel the need to have this content and at teh same type to have a look at other contents…For that Windows 8 offers a new way to have the applications content crossed with other apps.

App Snap


Rules• Snap is only for landscape

positions;• Screens width >=1366 px ;• Snapped view is differnt from full

screen view;• Snap can be in one off the edges

Left or Right;

App Snap


• Content Sensitive;• Conect apps to the system and

other apps;• Represent the transversal options

of the system;• Sharm options are based on

contracts;

Charms bar


• Apps are emersive• User should are focus on the

content• Create a transversal expectation

of the user about where to find functions;

• We can define a app bar as a application Menu;

• A good pratice is to use the upper part of the Bar to do navigation the down part of the app bar to navigation in content, or cross content navigation;

• App bar provides app-specific actions;

APP bar


Semantic Zoom• Presents and navigating large sets of

related data or content within a single view;

• Semantic Zoom uses two distinct modes of classification (or zoom levels) for organizing and presenting the content: one low-level (or zoomed in) mode that is typically used to display items in a flat, all-up structure and another, high-level (or zoomed out) mode that displays items in groups and enables a user to quickly navigate and browse through the content.

• The Semantic Zoom interaction is performed with the pinch and stretch gestures (moving the fingers farther apart zooms in and moving them closer together zooms out), or by holding the Ctrl key down while scrolling the mouse scroll wheel, or by holding the Ctrl key down (with the Shift key, if no numeric keypad is available) and pressing the plus (+) or minus (-) key.

http://msdn.microsoft.com/en-us/library/windows/apps/hh465319.aspx

http://msdn.microsoft.com/en-us/library/windows/apps/hh465319.aspx


Dive in to the Windows 8 Platform Architecture

http://www.oilrig-photos.com/picture/number180.asp

http://www.oilrig-photos.com/picture/number180.asp


Kernel architecture


Kernel architecture

windows support 2 kinds of different interaction paradigm • Desktop Apps : the usual kind of

applications we are used to in a windows operation system

• Metro Style Apps: apps that follow the patterns of Metro style principles


Windows 8 Runtime APIS


Metro Style Apps Architecture


Metro Style Apps Architecture

• Windows Core: correspond to the services of Windows;• Windows runtime core: Is a Layer that exposes the

Windows services, definition of types exposure of interfaces, is the core of the runtime;

• UI, Pickers, Controls; Media; XAML;Storage; Network;.. : Some APIS that live on the top of windows runtime;

• Windows Metadata & Namespace: The runtime give us the concept of metadata for types, what allow us to manage and get in a natural way the runtime notions of types.

• Web Host: A host for Web applications;• Runtime Broker: is a separate process that handles the

security permission of separated processes like sensors or cameras;

• Language projection: A mechanism that allows the windows runtime API be exposed in a different way according to the language in usage;

• Language support: Is the implementation of the technologies to allow the support of windows runtime over the different languages (WINJS, CLR )


Find KB to develop APPS


Win RT

HTML/CSS javascript XAML C#/VB/…

Same Result different paths


Win RT

HTML/CSS javascript

Struture - Markup combined with markup controls our Win JS Controls

Presentation – CSS for styling

Behaviour – WinJs or for example class Lybraries in other WIN RT technologies


Win RT

XAML C#/VB/…

Struture - XAML

Presentation – XMAL resources

Behaviour – C# c++ Vb.NET


App Lifecycle

Running

Terminated

Suspended

Launch


App LifecycleSuspended:

Ocurs when a new APP is launch or activated (in about 5 s)

What to do in a 5 s:Oportunity Save state

When low memory resources some suspended apps can be terminated

No notification when the Terminate app happens


Controls of Windows 8


Controls of Windows 8


Tools to Develop


Don t forget to declare your capabilities


HTML / JS quick Start


UI Surfaces HTML / JS


HTML / JS Controls

HTML 5 Markup

WIN JS controls


HTML / JS handle events


Demo


HTML / JS ControlsSuspended:

Ocurs when a new APP is launch or activated (in about 5 s)

What to do in a 5 s:Oportunity Save state

When low memory resources some suspended apps can be terminated

No notification when the Terminate app happens


XAML quick Start


XAML quick Start


XAML quick Start

Allmost the same as in WP7 or Silverlight but…

Windows 8 metro RulesNew namespace Windows.ui.xaml


XAML What’s new in Controls


Demo


References & Must See http://blogs.msdn.com/b/b8/ - Dev team Blog

http://blogs.msdn.com/b/microsoft_press/archive/2012/06/04/free-ebook-programming-windows-8-apps-with-html-css-and-javascript-first-preview.aspx - HTML5 win 8 Book http://xa.yimg.com/kq/groups/10682412/1769183635/name/Metro+Revealed-Building+Windows+8+apps+with+HTML5+and+JavaScript.pdf - bookhttp://johnpapa.net/fundamentals-of-windows-8-xaml-c-metro-style-apps- Slides Create Metro style apps quickly with built-in controlsMake great Metro style apps that are touch-optimized using HTML5 VideoBring apps to life with Metro style animations in HTML5Using tiles and notifications VideoBuilding beautiful and interactive apps with HTML5 & CSS3Designing Metro style apps using CSS3 VideoCreate reusable custom Metro style controls Video

http://blogs.msdn.com/b/b8/

http://blogs.msdn.com/b/b8/

http://blogs.msdn.com/b/microsoft_press/archive/2012/06/04/free-ebook-programming-windows-8-apps-with-html-css-and-javascript-first-preview.aspx




http://xa.yimg.com/kq/groups/10682412/1769183635/name/Metro+Revealed-Building+Windows+8+apps+with+HTML5+and+JavaScript.pdf




http://johnpapa.net/fundamentals-of-windows-8-xaml-c-metro-style-apps



http://channel9.msdn.com/Events/BUILD/BUILD2011/APP-211T









http://channel9.msdn.com/Events/BUILD/BUILD2011/PLAT-381T






Alexandre [email protected]|@alexmarreiros|

digitalmindignition.wordpress.com


Thank You !

Technology

Windows 8 quick start dev