Slide 1

| Lausanne Windows Store Apps using HTML and JavaScript: Become a Windows App Store developer in 60 minutes Valrie Alonso Xavier Bocken Sacha Bruttin

Slide 2

Become an Office 365 developer in 60 min Valerie Alonso, Lead Associate valerie.alonso@b-i.com Xavier Bocken, Microsoft Practice Manager xavier.bocken@b-i.com http://ch.linkedin.com/in/xbocken Sacha Bruttin, Senior Consultant sacha.bruttin@b-i.com http://bruttin.com/

Slide 3

Everyday our +350 experts strive to bring together their expertise to provide pragmatic, award-wining solutions to industry leaders.

Slide 4

APPLICATION DEVELOPMENT Collaboration Business Intelligence CRM Systems Integration Development platforms USER EXPERIENCE Usability Analysis User research User journey and flows Interaction Design Prototyping Wire-faming DIGITAL MARKETING Strategy, Planning Creative CRM and E-Commerce Online Advertising, SEO/SEM Social Media Mobile Service Management Identify Management Service Support E-mail management TECHNOLOGY & INFRASTRUCTURE Systems Management Security Monitoring & BPM Cloud Computing

Slide 5

TPG Lite http://www.tpg.ch/application-iphone-ipad-et-ipod http://www.windowsphone.com/fr-ch/store/app/tpg-lite/ bbc8c900-c9ac-43ce-a14b-aa2b01f03345

Slide 6

Agenda Getting started: the user interface Access data and content Enrich your App: semantic zoom, favorites Implement contracts: search Wrap it up

Slide 7

Windows 8 guidelines http://aka.ms/UXGuidelines Windows 8.1 Product Guide: Whats new for developers http://msdn.microsoft.com/en-us/windows/apps/bg184615.aspx Windows 8.1: New APIs and features http://msdn.microsoft.com/en-us/library/windows/apps/bg182410.aspx http://msdn.microsoft.com/en-us/library/windows/apps/bg182410.aspx WinRT API Reference http://msdn.microsoft.com/en-us/library/windows/apps/br211377.aspx

Slide 8

| Lausanne Getting started Chapter 1/5

Slide 9

Getting started: the UI Define a vision for your app List the TPG bus stops and bus wait times Access to a list of favorites bus stops, with information updated in real time Choose the layout of your UI / navigation scheme Hierarchical navigation: more content organized into section/categories/details Flat navigation: simple content Flat navigation Visual Studio templates Navigation app template

Slide 10

Getting started: the UI Windows sizes, continuous scaling and minimum width

Slide 11

Getting started: the UI Device sizes, scaling to screens and orientations @media screen and (max-width: 1024px) {... } @media all and (orientation: portrait) {...} CSS3 media queries

Slide 12

| Lausanne Getting started: the UI Dmo

Slide 13

Slide 14

| Lausanne Access data and content Chapter 2/5

Slide 15

The TPG OpenData API http://rtpi.data.tpg.ch/v1/ + developer key GetStops.json GetNextDepartures.json?stopCode= censur

Slide 16

The New Windows.Web.HttpClient API Brand new API for Windows 8.1, replacing: WinJS.xhr for JavaScript; System.Net.Http.HttpClient in C# and VB; IXMLHTTPRequest2 for C++ Highlights for JavaScript programming: Strongly typed HTTP headers Access to cookies and shared cookies A lot more control over caching behavior Powerful HTTP protocol filters

Slide 17

The New Windows.Web.HttpClient API Simple example

Slide 18

The New Windows.Web.HttpClient API More control over caching behavior

Slide 19

The F12 tools equivalent in VS 2013 F12 debugging tools have been rebuilt from the ground up in IE 11 DOM Explorer: intellisense auto-complete for attributes and CSS No-refresh debugging, new tools: UI Responsiveness tool, Javascript Memory Equivalent in Visual Studio 2013: Analyze > Performance and Diagnostics

Slide 20

| Lausanne Access data and content Dmo

Slide 21

Slide 22

| Lausanne Enrich your App Chapter 3/5

Slide 23

Enrich your App Semantic zoom Detailed level Zoomed out level

Slide 24

Enrich your App Semantic zoom SemanticZoom control Switch between two different views of the same content Uses 2 controls: 1 for zoomed-in view and one for zoomed-out view Inner controls must implement IZoomableView > ListView // Create a WinJS.Binding.List from your data array. var itemsList = new WinJS.Binding.List(myData); // Create the groups for the ListView from the item data and the grouping functions var groupedItemsList = itemsList.createGrouped(getGroupKey, getGroupData, compareGroups);

Slide 25

Enrich your App - Animations Drag items within a list JavaScript: dragSourceStart dragSourceEnd dragBetweenEnter dragBetweenLeave

Slide 26

Windows 8 App lifecycle Incremental save Application data Windows.Storage.ApplicationData localSettings / roamingSettings Session data WinJS.Application.sessionState 5 secs Restore application state if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) { // TODO: App newly launched. Initialize code goes here. } else { // TODO: App reactivated from suspension. Restore app state here. }

Slide 27

| Lausanne Enrich your App Dmo

Slide 28

Slide 29

| Lausanne Implement contracts Chapter 4/5

Slide 30

Windows 8 charms & contracts App contracts Contracts = agreement between one or more apps Search contract Add a search pane to search you apps content and content from other apps Share contract Help users share content from your app with another and vice versa Play To contract Play digital media to connected DLNA devices Settings contract Provide quick, in-context to your apps settings

Slide 31

Windows 8.1 search improvements Search in Windows 8 Used the Search charm Implement the Search contract + SearchPane API Search in Windows 8.1 Use the Search charm for global searches In-app search should use the SearchBox control Up to 5 suggestions Up to 3 history items Image separators

Slide 32

| Lausanne Implement search Dmo

Slide 33

| Lausanne Wrap it up! Chapter 5/5

Slide 34

Submit your app to the store Open your Windows Store developer account Reserve your app name Choose a business model: free or not, trial, ad-supported Choose the countries and regions where to sell your app Test your app using the Windows App Certification Kit Submit your app to the store

Slide 35

Windows App Certification Kit App certification process Upload > Security tests > Technical compliance > Content compliance > Signing and publishing Test the readiness of your Windows Store app for Win 8 and 8.1 Crash and hang tests App manifest compliance, app capabilities Performance, security Package sanity check Resource usage test

Slide 36

Helpful ressources Windows Store app UI, start to finish http://msdn.microsoft.com/en-us/library/windows/apps/dn263201.aspx http://msdn.microsoft.com/en-us/library/windows/apps/dn263201.aspx Windows 8.1: New APIs and features for developers http://msdn.microsoft.com/en-us/library/windows/apps/bg182410.aspx http://msdn.microsoft.com/en-us/library/windows/apps/bg182410.aspx Microsoft Virtual Academy Windows Store Apps with HTML5 Jump Start http://www.microsoftvirtualacademy.com/Content/ViewContent.aspx?et= 3921&m=3914&ct=19152#?fbid=yDB7PDIZ1Se&et=3921&m=3914&ct= 19152#fbid http://www.microsoftvirtualacademy.com/Content/ViewContent.aspx?et= 3921&m=3914&ct=19152#?fbid=yDB7PDIZ1Se&et=3921&m=3914&ct= 19152#fbid Free ebook: Programming Windows 8 Apps with HTML, CSS and JavaScript http://blogs.msdn.com/b/microsoft_press/archive/2012/10/29/free-ebook- programming-windows-8-apps-with-html-css-and-javascript.aspx http://blogs.msdn.com/b/microsoft_press/archive/2012/10/29/free-ebook- programming-windows-8-apps-with-html-css-and-javascript.aspx

Slide 37