Windows 8 quick start dev

Developer Ignition

Windows 8 Quick Start

Alexandre Marreirosamarreiros@gmail.com|@alexmarreiros|

digitalmindignition.wordpress.com

Windows 8 Quick Start – About The presentation Author

Windows 8 Quick Start

Remember the UI Features

Windows 8 Quick Start

Windows startup screen

Future

Past

Windows 8 Quick Start

• 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

Windows 8 Quick Start

• Immersive;

• Fast and Fluid;

• Touch Enabled;

• Integrated in the system;

• Consistent with the System;

The Metro UI

Windows 8 Quick Start

• 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

Windows 8 Quick Start

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

Windows 8 Quick Start

• 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

Windows 8 Quick Start

• 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

Windows 8 Quick Start

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

Windows 8 Quick Start

Dive in to the Windows 8 Platform Architecture

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

Windows 8 Quick Start

Kernel architecture

Windows 8 Quick Start

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 Quick Start

Windows 8 Runtime APIS

Windows 8 Quick Start

Metro Style Apps Architecture

Windows 8 Quick Start

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 )

Windows 8 Quick Start

Find KB to develop APPS

Windows 8 Quick Start

Win RT

HTML/CSS javascript XAML C#/VB/…

Same Result different paths

Windows 8 Quick Start

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

Windows 8 Quick Start

Win RT

XAML C#/VB/…

Struture - XAML

Presentation – XMAL resources

Behaviour – C# c++ Vb.NET

Windows 8 Quick Start

App Lifecycle

Running

Terminated

Suspended

Launch

Windows 8 Quick Start

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

Windows 8 Quick Start

Controls of Windows 8

Windows 8 Quick Start

Controls of Windows 8

Windows 8 Quick Start

Tools to Develop

Windows 8 Quick Start

Don t forget to declare your capabilities

Windows 8 Quick Start

HTML / JS quick Start

Windows 8 Quick Start

UI Surfaces HTML / JS

Windows 8 Quick Start

HTML / JS Controls

HTML 5 Markup

WIN JS controls

Windows 8 Quick Start

HTML / JS handle events

Windows 8 Quick Start

Demo

Windows 8 Quick Start

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

Windows 8 Quick Start

XAML quick Start

Windows 8 Quick Start

XAML quick Start

Windows 8 Quick Start

XAML quick Start

Allmost the same as in WP7 or Silverlight but…

Windows 8 metro RulesNew namespace Windows.ui.xaml

Windows 8 Quick Start

XAML What’s new in Controls

Windows 8 Quick Start

Demo

Windows 8 Quick Start

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

Alexandre Marreirosamarreiros@gmail.com|@alexmarreiros|

digitalmindignition.wordpress.com

Windows 8 Quick Start

Thank You !