Your SlideShare is downloading. ×
0
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
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
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
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
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
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
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
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
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
Windows Store Apps using HTML and JavaScript: Become a Windows App Store developer in 60 minutes
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

766

Published on

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

No Downloads
Views
Total Views
766
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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
  • 13. | Lausanne Chapter 2/5 Access data and content
  • 14. The TPG OpenData API http://rtpi.data.tpg.ch/v1/ + developer key • • GetStops.json GetNextDepartures.json?stopCode= censuré
  • 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. The New Windows.Web.HttpClient API example Simple
  • 17. The New Windows.Web.HttpClient API control over More caching behavior
  • 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. | Lausanne Access data and content Démo
  • 20. | Lausanne Chapter 3/5 Enrich your App
  • 21. Enrich your App – Semantic zoom Detailed level Zoomed out level
  • 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. Enrich your App - Animations Drag items within a list JavaScript: dragSourceStart dragSourceEnd dragBetweenEnter dragBetweenLeave
  • 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. | Lausanne Enrich your App Démo
  • 26. | Lausanne Chapter 4/5 Implement contracts
  • 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. 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. | Lausanne Implement search Démo
  • 30. | Lausanne Chapter 5/5 Wrap it up!
  • 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. 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. 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

×