| 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 [email protected] Xavier Bocken, Microsoft Practice
Manager [email protected] http://ch.linkedin.com/in/xbocken
Sacha Bruttin, Senior Consultant [email protected]
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