1. | Lausanne
Windows Store Apps using HTML
and JavaScript: Become a Windows
App Store developer in 60 minutes
Valérie Alonso
Xavier Bocken
Sacha Bruttin

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/

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

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

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

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

7. Windows 8 guidelines
Windows 8 guidelines
http://aka.ms/UXGuidelines
Windows 8.1 Product Guide: What’s 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
WinRT API Reference
http://msdn.microsoft.com/en-us/library/windows/apps/br211377.aspx

8. | Lausanne
Chapter 1/5
Getting started

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

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

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

12. | Lausanne
Getting started: the UI
Démo

14. | Lausanne
Chapter 2/5
Access data and
content

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

16. The New Windows.Web.HttpClient
API new API for Windows 8.1, replacing:
Brand
•
•
•
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

17. The New Windows.Web.HttpClient
API example
Simple

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

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

20. | Lausanne
Access data and
content
Démo

22. | Lausanne
Chapter 3/5
Enrich your App

23. Enrich your App – Semantic zoom
Detailed level
Zoomed out level

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);
<div data-win-control="WinJS.UI.SemanticZoom">
<!-- The zoomed-in view. -->
<div id="zoomedInListView" data-win-control="WinJS.UI.ListView" />
<!--- The zoomed-out view. -->
<div id="zoomedOutListView" data-win-control="WinJS.UI.ListView" />
</div>

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

26. Windows 8 App lifecycle
5 secs
Incremental save
Application data
Windows.Storage.ApplicationDat
localSettings / roamingSettings
Session data
WinJS.Application.sessionState
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.
}

27. | Lausanne
Enrich your App
Démo

29. | Lausanne
Chapter 4/5
Implement contracts

30. Windows 8 charms & contracts
App contracts
•
Contracts = agreement between one or more apps
Search contract
•
Add a search pane to search you app’s 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 app’s settings

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

32. | Lausanne
Implement search
Démo

33. | Lausanne
Chapter 5/5
Wrap it up!

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

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

36. Helpful ressources
Windows Store app UI, start to finish
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
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
Free ebook: Programming Windows 8 Apps with HTML, CSS and JavaScript
http://blogs.msdn.com/b/microsoft_press/archive/2012/10/29/free-ebookprogramming-windows-8-apps-with-html-css-and-javascript.aspx