| Lausanne

Windows Store Apps using HTML
and JavaScript: Become a Windows
App Store developer in 60 minutes
Valérie Alons...
Become an Office 365 developer in 60
min
Valerie Alonso, Lead Associate
valerie.alonso@b-i.com

Xavier Bocken, Microsoft P...
Everyday our +350 experts strive to
bring together their expertise to
provide pragmatic, award-wining
solutions to industr...
DIGITAL MARKETING

USER EXPERIENCE

Strategy, Planning
Creative
CRM and E-Commerce
Online Advertising, SEO/SEM
Social...
TPG Lite

http://www.tpg.ch/application-iphone-ipad-et-ipod

http://www.windowsphone.com/fr-ch/store/app/tpg-lite/
bbc8c90...
Agenda
Getting started: the user interface
Access data and content

Enrich your App: semantic zoom, favorites
Implement co...
Windows 8 guidelines
Windows 8 guidelines
http://aka.ms/UXGuidelines
Windows 8.1 Product Guide: What’s new for developers
...
| Lausanne

Chapter 1/5

Getting started
Getting started: the UI
Define a vision for your app
•
•

List the TPG bus stops and bus wait times
Access to a list of fa...
Getting started: the UI
Windows sizes, continuous scaling and minimum
width
Getting started: the UI
Device sizes, scaling to screens and orientations

screen and (max-width: 1024px)
CSS3 media queri...
| Lausanne

Getting started: the UI
Démo
| Lausanne

Chapter 2/5

Access data and
content
The TPG OpenData API
http://rtpi.data.tpg.ch/v1/ + developer key
•
•

GetStops.json
GetNextDepartures.json?stopCode=

cens...
The New Windows.Web.HttpClient
API new API for Windows 8.1, replacing:
Brand
•
•
•

WinJS.xhr for JavaScript;
System.Net.H...
The New Windows.Web.HttpClient
API example
Simple
The New Windows.Web.HttpClient
API control over
More
caching behavior
The F12 tools equivalent in VS 2013
F12 debugging tools have been rebuilt from the ground up in IE 11
•
•

DOM Explorer: i...
| Lausanne

Access data and
content
Démo
| Lausanne

Chapter 3/5

Enrich your App
Enrich your App – Semantic zoom

Detailed level
Zoomed out level
Enrich your App – Semantic zoom
SemanticZoom control
•
•
•

Switch between two different views of the same content
Uses 2 ...
Enrich your App - Animations
Drag items within a list
JavaScript:
dragSourceStart

dragSourceEnd
dragBetweenEnter
dragBetw...
Windows 8 App lifecycle
5 secs

Incremental save

Application data

Windows.Storage.ApplicationDat
localSettings / roaming...
| Lausanne

Enrich your App
Démo
| Lausanne

Chapter 4/5

Implement contracts
Windows 8 charms & contracts
App contracts
•

Contracts = agreement between one or more apps

Search contract
•

Add a sea...
Windows 8.1 search improvements
Search in Windows 8
•
Used the Search charm
•
Implement the Search contract + SearchPane A...
| Lausanne

Implement search
Démo
| Lausanne

Chapter 5/5

Wrap it up!
Submit your app to the store
•
•
•
•
•
•

Open your Windows Store developer account
Reserve your app name
Choose a busines...
Windows App Certification Kit
App certification process
Upload > Security tests > Technical compliance > Content complianc...
Helpful ressources
Windows Store app UI, start to finish
http://msdn.microsoft.com/en-us/library/windows/apps/dn263201.asp...
Windows Store Apps using HTML and JavaScript: Become a Windows App Store developer in 60 minutes
Windows Store Apps using HTML and JavaScript: Become a Windows App Store developer in 60 minutes
Windows Store Apps using HTML and JavaScript: Become a Windows App Store developer in 60 minutes
Windows Store Apps using HTML and JavaScript: Become a Windows App Store developer in 60 minutes
Upcoming SlideShare
Loading in …5
×

Windows Store Apps using HTML and JavaScript: Become a Windows App Store developer in 60 minutes

1,190 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,190
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Windows Store Apps using HTML and JavaScript: Become a Windows App Store developer in 60 minutes

  1. 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. 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. 3. Everyday our +350 experts strive to bring together their expertise to provide pragmatic, award-wining solutions to industry leaders.
  4. 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. 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. 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. 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. 8. | Lausanne Chapter 1/5 Getting started
  9. 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. 10. Getting started: the UI Windows sizes, continuous scaling and minimum width
  11. 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. 12. | Lausanne Getting started: the UI Démo
  13. 13. | Lausanne Chapter 2/5 Access data and content
  14. 14. The TPG OpenData API http://rtpi.data.tpg.ch/v1/ + developer key • • GetStops.json GetNextDepartures.json?stopCode= censuré
  15. 15. 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
  16. 16. The New Windows.Web.HttpClient API example Simple
  17. 17. The New Windows.Web.HttpClient API control over More caching behavior
  18. 18. 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
  19. 19. | Lausanne Access data and content Démo
  20. 20. | Lausanne Chapter 3/5 Enrich your App
  21. 21. Enrich your App – Semantic zoom Detailed level Zoomed out level
  22. 22. 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>
  23. 23. Enrich your App - Animations Drag items within a list JavaScript: dragSourceStart dragSourceEnd dragBetweenEnter dragBetweenLeave
  24. 24. 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. }
  25. 25. | Lausanne Enrich your App Démo
  26. 26. | Lausanne Chapter 4/5 Implement contracts
  27. 27. 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
  28. 28. 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
  29. 29. | Lausanne Implement search Démo
  30. 30. | Lausanne Chapter 5/5 Wrap it up!
  31. 31. 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
  32. 32. 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
  33. 33. 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

×