Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building your first windows store app in html5 js phonegap

2,656 views

Published on

Building your first windows 8 application using HTML 5 and JavaScript and how to convert your windows 8 app to PhoneGap and use the same code base across different platform such as Android, iOS and more.

Published in: Technology
  • Positions Available Now! We currently have several openings for social media workers. ◆◆◆ http://t.cn/AieX6y8B
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Unlock Her Legs - How to Turn a Girl On In 10 Minutes or Less... ➤➤ http://scamcb.com/unlockher/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL MOVIE, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... ,DOWNLOAD FULL. MOVIE 4K,FHD,HD,480P here { https://tinyurl.com/yybdfxwh }
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ★★ How Long Does She Want You to Last? ★★ A recent study proved that the average man lasts just 2-5 minutes in bed (during intercourse). The study also showed that many women need at least 7-10 minutes of intercourse to reach "The Big O" - and, worse still... 30% of women never get there during intercourse. Clearly, most men are NOT fulfilling there women's needs in bed. Now, as I've said many times - how long you can last is no guarantee of being a GREAT LOVER. But, not being able to last 20, 30 minutes or more, is definitely a sign that you're not going to "set your woman's world on fire" between the sheets. Question is: "What can you do to last longer?" Well, one of the best recommendations I can give you today is to read THIS report. In it, you'll discover a detailed guide to an Ancient Taoist Thrusting Technique that can help any man to last much longer in bed. I can vouch 100% for the technique because my husband has been using it for years :) Here's the link to the report ➤➤ http://ishbv.com/rockhardx/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Building your first windows store app in html5 js phonegap

  1. 1. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel www.sela.co.il
  2. 2. Windows 8.1 Echosystem Architecture Personality, Pattern, Principles, Platform PhoneGap and Windows Store Questions Summary © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 2
  3. 3. Products Editions • Xbox • Microsoft SkyDrive )OneDrive ) • Windows Store • Windows 8.1 • Windows 8.1 Pro • Windows 8.1 Enterprise Windows RT • © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 3
  4. 4. Windows 8.1 Platform Architecture Desktop Apps HTML C/C++ Internet Explorer Windows Store apps C# / VB.NET C++/ CX C# / VB.NET Javascript WinRT APIs .Net CLR/ Silverlight Win32 HTML CSS XAML Comm. & Data Graphics & Media Devices & Others Windows Kernel Services © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 4
  5. 5. Start screen Charms Task Manager © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 5
  6. 6. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 6
  7. 7. • • • • Purposeful animations Predefined Animation Library Touch-ready apps Binding instead of events © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 7
  8. 8. Screen modes: • Full-screen, both landscape and portrait • Side-by-side Design and implementation tips: • Accommodate any screen mode and size • Maintain state • Plan for ergonomics © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 8
  9. 9. Your Contract Windows Store app Contract Contracts © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 9
  10. 10. • Tiles are the front door of the app • Secondary tiles link to specific pages and information • Live tiles are used for dynamically updated information • Secondary and live tiles can be pinned to the Start screen © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 10
  11. 11. Live tile • Live tiles for dynamic information on tiles • Toast messages for dynamic pop-ups • App feels alive and updated even when dormant • User is drawn to your app all the time Toast Message © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 11
  12. 12. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 12
  13. 13. Choose the most comfortable language JavaScript C#/VB.NET C++ Knowledge Preservation Web, HTML, JavaScript XAML, WPF, Silverlight XAML, C++ Code Reuse Web apps WPF or Silverlight, C++ codebase or .NET codebase Execution Environment Internet Explorer JavaScript engine .NET CLR with access to WinRT Runs directly on top of WinRT Language Style Dynamic Static Static Memory Management Managed by the JavaScript engine Managed by the .NET CLR Unmanaged, uses reference counting Create WinRT Components No Yes Yes © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 13
  14. 14. WinRT Language Features Metadata Metadata C++/CX Code Metadata WinRT C# 5.0 Code JavaScript Code © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 14
  15. 15. • Helpers for: • Namespaces • Classes • Mixins • Promises • App Models • Navigation • Data binding • Controls • Animations • Templates • Utilities • Default CSS styles • Page & user controls © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 15
  16. 16. WinJS includes APIs for • Creating logical namespaces through the WinJS.Namespace object • Defining classes and mixins by using the WinJS.Class object Making use of both these objects • Helps to reuse code • Helps to create an object model in an app © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 16
  17. 17. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 17
  18. 18. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 18 © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel www.sela.co.il
  19. 19. • Mobile Web Apps – Limited functionality w/ HTML – Flash is problematic • Mobile Applications – Native or cross-compile? – Both provide much more functionality than “Web” – Native is platform-specific – Cross-compile casts a wider netbut performance and experience could* suffer © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 19
  20. 20. • Web – HTML with JavaScript/CSS • Cross-compile – – – – – Adobe AIR (AS3, MXML) PhoneGap (JS, HTML) Titanium (JS, HTML) Xamarin (C#, XAML) Unity • Native (only choose one) – Objective-C (iOS) – Java (Android / BlackBerry) – C#/Silverlight/XAML (Windows) © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 20
  21. 21. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 21
  22. 22. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 22
  23. 23. • PhoneGap is open source mobile development framework. - Developed by Nitobi Software - Bought by Adobe • Renamed to Cordova after the shift to Adobe • Enables building mobile device applications using the Web technology stack – HTML, CSS, and JavaScript.
  24. 24. • A PhoneGap application is considered Hybrid. - They are neither truly native, nor purely web based. - All layout rendering is done via the Web View • Supports 7 platforms
  25. 25. http://docs.phonegap.com/en/3.1.0/index.html
  26. 26. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 28 © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel www.sela.co.il
  27. 27. • Set up your development environment - PC, Mac - XCode, Eclipse, Visual Studio - SDKs, JDKs, Plug-Ins Same as for Native Development • Adobe® PhoneGap™ Build- Simply upload your HTML5, CSS, and JavaScript assets to the Adobe® PhoneGap™ Build cloud service and we do the work of compiling for you.
  28. 28. 1. 2. 3. 4. Create New Project Add reference to Cordova.js Register “deviceready” event Done
  29. 29. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 31
  30. 30. function includeJS(jsFile) { $('head').append($('<script>').attr('type', 'text/javascript').attr('src', j sFile)); } // Pick a JS to load switch(device.platform) { case “Android”: includeJS(‘android.js'); break; case “BlackBerry 10”: includeJS(‘bb.js'); break; case “Win32NT”: includeJS(‘win8.js'); break; } © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 32
  31. 31. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 33
  32. 32. Platform-specific native applications seem to be slowly fading away into a niche or need-basis. HTML/JavaScript applications, done right, can be a good alternative, and can save you time an money. If you’re not sure, validate.
  33. 33. Shai Raiten • shair@sela.co.il • http://blogs.Microsoft.co.il/blogs/shair © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 35

×