How to get your free student Windows 8 store account


    The Windows 8 store is open for individuals to publish and students can get a Windows store account for free through the DreamSpark program, here’s how you do it.

    Microsoft announced this week, that the Windows 8 Store is open to individuals and that they will be providing free accounts to students through the DreamSpark program, the same awesome deal we got for the Windows Phone marketplace. That means the only thing standing between you and an app in the store is some time at your keyboard geeking out!

    How do you get your free marketplace account, go here and follow the instructions, the rest of this blog provides more detailed instructions on how to create your marketplace account.

    You must

    1. Verify you are a student
    2. Get your registration code
    3. Register at the Windows Store
    4. Get Coding!


    1. Verify you are a student

    Already got a DreamSpark account?

    Then jump to step 2 and Get your registration code!

    Don’t have a DreamSpark account?

    You need a DreamSpark account in order to get a registration code. It’s the registration code that allows you to create your store account for free. Only students or educators can create DreamSpark accounts. If you are a student or educator and do not have one yet, create a DreamSpark account.


    2. Get your registration code

    Go to DreamSpark and Sign in with your DreamSpark account, now from the top menu select Students | app development

    Select Windows 8 Learn more

    Scroll to the bottom of the page and select Get Your Registration code

    You will be brought back to the top of the screen. In the box with the title Get Registration Code. Select Get Code Now.



    After you select Get Code now a code will be displayed in the box. Write that code down. That’s the code that will allow you to create your Windows Store account for free. Now you can creating your Windows Store account!


    3. Register at the Windows Store

    Go to the Windows Store

    • If you already have a Windows Phone store account you can link the accounts and keep the same publisher display name for both accounts or you can start over and create a new Publisher account for your Windows 8 Store account.
    • You will be asked to confirm or enter information about your store account including your Publisher display name. This is the name that will appear in the store as the publisher for all your apps.
    • You will have to accept the application developer agreement.
    • Enter your registration code in the registration code box so you don’t have to pay the $49 account fee.image


    • You will now be asked to enter your credit card information.
    • Yes, even if you get a free Store account you are required to enter credit card information. Pre-paid credit cards won’t work. That’s because this is another way of confirming your identity. You enter credit card information and a small amount is charged to your credit card and then reversed. You will need to look at your credit card statement to find the transaction in order to be able to verify your Store account.

    • After you enter your credit card information you will see a confirmation screen you can use to double check your information before you create your account by clicking the Purchase button. DONT FORGET TO READ THE SMALL PRINT THAT EXPLAINS THE FINAL VERIFICATION OF YOUR CREDIT CARD!


      Now that your account is created, you need that credit card statement! It may take a day or two for your online bill to show the transaction. If you are in a hurry, you can try calling your credit card company to get the information sooner. If you do not have online billing, you will have to call the credit card company or wait until you get your credit card bill in the mail.

      Once you have the credit card bill with the transaction information return to the Windows Dev Center, Sign In, select Dashboard from the menu, and select Verify your payment method.

      At the bottom of the screen you are asked to enter the 3 digit code that appears in the transaction description OR the transaction amount that was charged (and will be refunded to the credit card!)

      Verify payment

      Once you have entered that information, Congratulations! You are ready to submit your first app to the Windows store! Whenever you are ready return to the dashboard and choose Submit an app to get started! 

      4. Get Coding!

      Go reserve the name of your app (before someone else nabs it! Better to be Timer than Timer74) and get coding! Here’s a few resources to help

    • Go DevMENTAL

      Visual Studio Tips and Tricks: 5 great keyboard shortcuts


      VisualStudioLogoHere’s five of my favorite keyboard shortcuts in Visual Studio, I think there’s a good chance there is at least one of them you haven’t seen before!

      Find more Visual Studio tips and tricks here

      Move code ALT+UP/DOWN

      This keyboard shortcut is new in Visual Studio 2013. If you put the cursor on a line of code and use the <ALT><UP ARROW> key the line of code you have selected moves up. If you use the <ALT><DOWN ARROW> the line of code selected moves down.



      Create Collapsible Region CTRL+M+H/CTRL+M+U

      Chances are you have noticed the “+” and “-“ symbols in the margins that allow you to collapse and expand your classes and functions. Did you know you can create your own collapsible regions? If you select a section of code and then use the key sequence <CTRL><M><H> you turn that region into a collapsible/expandable region. The key sequence <CTRL><M><U> will remove the collapsible region (it doesn’t delete the code, it just removes the icon that allows you to expand and collapse.



      Comment code block CTRL+K+C/CTRL+K+U

      Whether it’s because you are trying to track down a but, or experimenting with code change, from time to time you will want to comment and uncomment blocks of code. If you select a block of code and use the key sequence <CTRL><K><C> will comment out the section of code. <CTRL><K><U> will uncomment the code.


      Peek Definition ALT+F12

      When you are going through your code and you want to examine the code in the method you are calling, many programmers will use the <F12> key or the pop-up menu option Go To Definition. Go To Definition will navigate to the called method, however many times you don’t need to navigate to the code. Sometimes, you just want a quick look at the method. If you have installed Visual Studio 2013 there is a new keyboard shortcut <ALT><F12> which will give you a preview of the method being called inline. You can use the <ESC> key to close the preview.



      Navigate Forward/Backward CTRL - /CTRL SHIFT -

      When you have multiple files open at the same time you may want a way to quickly move back and forth between two or three different locations in your code. If you have moved from one location to another you can use the keyboard sequence <CTRL><-> to move to the previous location and then you can return using <CTRL><SHIFT><->


      Where do I get Visual Studio 2013?

      Students can download Visual Studio 2013 Professional at DreamSpark

      MSDN subscribers can download it from MSDN

      Anyone can get express versions of Visual Studio for free or 90 day trials of Visual Studio Professional, Premium, or Ultimate at the Visual Studio downloads center.

      Learn more about the new features of Visual Studio by watching the Visual Studio 2013 New Features at Microsoft Virtual Academy

    • Go DevMENTAL

      Building a great Windows 8 app Step 4: Pick your programming language

      Windows 8 start screenWhat’s the best programming language for your Windows 8 app? .NET, JavaScript with HTML/Canvas, or C++?

      This blog is part of a series, you can see the rest of the series here.

      If you want to develop for Windows 8, you need to decide which programming model best suits your needs and skills and find some resources to help you get started with your chosen model. Don’t forget in Canada, any app you publish before end of March 2013 can earn you rewards through the Developer Movement, and students building apps can enter them in Imagine Cup!

      Let’s look at options for different types of developers:

      • Are you a web developer?
      • Are you a game developer?
      • Are you a .NET developer?
      • Are you a Java developer?
      • Are you a C++ developer?
      • Are you an iOS developer?
      • Are you an Android developer?

      Are you a web developer?

      If you’ve been coding HTML, HTML5, CSS or JavaScript you can use those same programming skills to build a Windows 8 app. To get started check out the Roadmap for Windows 8 apps using JavaScript.

      Websites have been built with HTML, CSS and JavaScript for years. In the past few years the trend has been towards HTML5. Microsoft started to enter the HTML5 world with Internet Explorer 9. IE9 added a lot of support to HTML5 features, and IE10 took it even further. Windows 8 continues the trend of supporting HTML5. If you haven’t explored it yet, HTML5 is more than just new markup tags like <video> and <audio> it includes improvements to CSS (like media queries to handle different screen sizes) and updates to JavaScript. HTML5 has been gaining in popularity in the web space because it does not require any plug ins and every year more HTML5 features are being supported by more browsers. So if you are already developing websites with HTML and JavaScript take what you know and apply it to Windows 8 app development.

      Are you a game developer?

      There are a number of options for game development on Windows 8, what makes sense for you depends on your existing game experience and the complexity of the game you plan to build.


      I would not recommend C++ and DirectX for a beginner programmer, but, when it comes to high performance games, serious gamers turn to C++ and DirectX. With DirectX and C++ you can build great games for Windows 8. To get started, check out the Developing Games for Windows 8 or Developing apps with C++ and DirectX (scroll down to the section Game Programming in C++.)

      JavaScript with HTML and Canvas

      Easier for beginners than DirectX, you might be surprised at the games you can build with HTML and Canvas. It is growing in popularity for web games, especially with fewer platforms supporting Flash. The same HTML and Canvas capabilities that exist on the web can be used to build cool games for Windows 8. To get started here’s a good post by David Rousset called Everything you need to know to build HTML5 games with Canvas

      Have you already built XNA games?

      XNA is not included on Windows 8, however there is an open source cross platform implementation of the XNA framework called MonoXNA that you can use to build Windows 8 apps. To get started check out Tara Walker’s blog on Windows 8 development using C#, XNA and MonoGame 3.0

      Do you prefer a 3rd party tool which generates the code for you?

      There are a lot of companies out there who produce tools for beginner and experienced game developers. These products have their own development environments and generate the application code for you. Some of these tools are free, some charge you either for the development environment tools, or to publish the apps. To get started check out cross platform tools that support Windows 8

      Are you a .NET developer?

      If you are already familiar with the .NET framework, you will probably find it easiest to develop your apps in C# or VB .Net with XAML. To get started check out the Roadmap for Windows 8 apps using C# or Visual Basic.

      Are you a Java developer?

      If you have already coded in Java, you will find it pretty easy to pick up C#. Consider building your apps with C# and XAML.To get started check out the Roadmap for Windows 8 apps using C# or Visual Basic.

      Are you a C++ developer?

      Go ahead and build your app using C++ and XAML. To get started check out Building your first Windows Store app using C++.

      Are you an iOS developer?

      There’s some great resources to help you bring your knowledge of Objective-C, Cocoa Touch, and XCode to Windows Store app development. To get started check out Resources for iOS developers. If you are planning to build a new app and want to target multiple platforms you may also want to check out Cross platform tools that support Windows 8.

      Are you an Android developer?

      The platforms are different, but you can certainly take an app you built for Android and port it to Windows 8. To get started check out this article Porting Android apps to Windows 8 . If you are planning to build a new app and want to target multiple platforms you may also want to check out Cross platform tools that support Windows 8.

    • Go DevMENTAL

      Turn WordPress Blogs into Windows Phone, Android or iPhone apps without writing any code!


      IdeaPress has been updated. You can now create Windows 8, Windows Phone, Android, or iPhone apps from your WordPress.com or Wordpress.org sites without writing any code.

      Don't forget, if you are a student you can publish to the Windows Phone store for free through DreamSpark.

      We’ve invited Michael SIU, one of the creators of IdeaPress, to tell us more about the update and explain how to use their new wizard. Michael is a partner of IdeaNotion, and a specialist in web applications, mobile applications, windows applications and cloud solutions. Take it away Michael:

      Hello to all our new users and a warm welcome back to our old ones from the Windows 8 version of IdeaPress!

      We released IdeaPress for Windows 8 back in Mar 22 this year and we're back with a new platform that allows you to create Android, iPhone and Windows Phone apps without writing a single line of code! In this post I'll go through our new wizard and show you

      • how to create your IdeaPress account
      • how to start your first app
      • how to register your website
      • how to specify app information for the store
      • how to style your app
      • how to organize your content

      Let's get started!

      How to create your IdeaPress Account

      Below you will find our home page. If you are a new user you can click "Get Started" on the right or if you've already registered you can click "Login" at the top-right.

      TIP: If you were a Windows 8 Ideapress user, your old account will not work here, so you'll have to make a new one. But don't worry! You can still use the same login info!


      We've made registration as minimal as possible because we want you to be able to dive right in. All you need to specify is an email and password. Having an account is important as it allows us to save your apps in progress. It's also important to have an up-to-date and accurate email address because we use that address to email you your app and to send you updates on the publishing process.


      How to start your first app

      After registering, you can move on to the app creator wizard. You will see a premade app on the right side that you can explore.

      To change it to your app, type the address of your wordpress.org or wordpress.com website in the URL field.

      If you have a site hosted on wordpress.com ignore the message at the top, your site will work straight out of the box; If you are hosting your own site with the software from wordpress.org then to proceed you’ll need to have the IdeaPress JSON Plugin installed (Click more details  in the dialog box for instructions on doing that or click here to head directly to the installer).

      Specify a Project Name. This project name will show up on your dashboard.

      Select the platform for your first app. You can choose between Windows Phone, Android, and iPhone. Don't worry, you can come back later to create apps for the platforms you don’t select now.


      After entering your website and (for WordPress.Org sites) installing the IdeaPress JSON API you will see the demo app is updated to show your website's content. You have a live preview! It's still black and white though. You need to confirm this is the site you want to use before moving on by clicking confirm settings. Once you have your completed that step you will be able to save your apps (you will know this is the case because the blue Save button on the top-right is enabled). The app on the right is a live preview of what your app will look like so go ahead and play around with it. When you are ready you can start changing it up.


      How to specify app information for the store

      On the first tab, you fill in the information about your app. This is the same information that will show on the app store if you publish through IdeaPress. To get a detailed description of what you should enter in the boxes, just hover over them. Your app name will also update in the live preview. The required boxes for app store submissions will be highlighted in red when you click them.


      How to style your app

      After setting your info you get to the fun part: styling. On the Style tab, you get to set the colour, layout and fonts all updated in the live preview on the right. The logos you upload below will become the app icons on your phone and your app icon in the phone store. Try out different layouts to get a feel for how each one looks, at the moment we have 5 layouts. Choose the layout that best matches the content on your site. No pictures? Use a text heavy layout. Have a lot of cool pictures? Pick the full picture layout. We plan on adding additional premium layouts  at some point so stay tuned.

      TIP: Windows phone apps will require a Wide Logo and a Splash Pic.


      How to organize your content

      The Content tab contains all the categories our IdeaPress JSON API plugin pulled from your website. You can drag, drop and reorder them. The live preview will reflect the categories and order you select. Your categories can be found in the menu of your app for easy searching.


      Once you have the app working the way you like it. It’s time to save. When you click Save, you will notice a list of "Remaining app publish requirements" at the top, your app is saved but it's not quite ready to become a mobile app.

      Go to the style tab and you will see two images highlighted in red, we need to upload these in order for our app to be complete.


      Once the app is complete (meeting all requirements) you can select Exit. You will be taken to the dashboard. On the dashboard you can

      • Create additional versions of your app for other phone platforms by using the plus button clip_image009 
      • Edit your app by using the pencil button clip_image010 
      • If your app meets all the requirements, you will see an app status of “Ready” and you will see the button that allows you to compile and publish your appclip_image011 

      There are a lot of options you can choose from when you create and publish your app but I'll cover that later.  There's also a "Create Site" button if you have an additional website you want to use to create more apps.


      Next time I will explain the store publishing process and your options on how to get from the Wizard above to the actual mobile app.

      Stay Tuned and Happy App making =)

    • Go DevMENTAL

      Comment créer une application de A à Z sans savoir programmer – Windows Phone App Studio


      Windows Phone App Studio permet de créer des applications élégantes en se servant uniquement d’un navigateur Web. Dans cet article, nous verrons en détail comment développer une application en utilisant l’un des modèles de template (gabarit) proposés.

      Note: Merci Christian Hissibini  pour avoir traduit cette poste! This blog post is also available in English. Pour savoir comment publier ton application cherchez l'article publication des applications Windows Phone App Studio

      La plupart des gens ont le désir de créer des applications, mais souvent sont heurtés par la complexité de la programmation ou tout simplement n’ont pas le temps de s’asseoir et coder une application à partir de zéro. Windows Phone App Studio vous permet de créer des applications Windows Phone (La version actuelle inclus également les applis Windows 8) à l’aide du navigateur comme seul outil.

      Dans cet article, vous trouverez des instructions pas-à-pas pour créer une appli utilisant le template (gabarit) My City. Ce template est indiqué pour mettre en vedette des lieux comme une ville, une région, une attraction, une université ou un collège.

      N’oubliez pas, les applications publiées au Canada peuvent vous faire gagner des récompenses à travers le Mouvement des Développeurs!

      Cet article couvre les sections suivantes :

      • Débuter avec Windows Phone App Studio
      • Démarrer un nouveau projet
      • Paramétrer les sections de votre application
      • Ajout de données
      • Ajout d’images
      • Vérification de la liaison de données
      • Personnalisation de la page de détails
      • Ajout de fonctionnalités supplémentaires à la page de détails
      • Ajout de sections additionnelles (Collection, Flux RSS, Flux Youtube, Flux Flickr, Recherche Bing, HTML5)
      • Personnalisation du thème de l’application.
      • Personnalisation de la tuile de l’application.
      • Personnalisation des écrans de démarrage (Splash Screen) et de veille (Lock Screen) de l’application.

      Débuter avec Windows Phone App Studio

      1 – Allez sur Windows Phone App Studio et se connecter.

      Note : Vous avez besoin de vous connecter à l’aide d’un compte Microsoft (Si vous n’en possédez pas, vous pouvez créer facilement un à partir de www.outlook.com)


      2 – Si vous vous connectez pour la première fois sur Windows Phone App Studio, il vous sera demandé une autorisation pour que l’application puisse accéder aux adresses emails de votre profil (car lorsque vous finirez un projet, elle vous enverra les fichiers de votre projet par email.). A cette étape, sélectionnez Yes (oui) pour continuer.


      3 – Indiquez que vous acceptez les termes de licence de Windows Phone App Studio en cochant la case et sélectionnez Register (s’enregistrer).


      Une fois que vous êtes connectés avec succès dans Windows Phone App Studio, vous arrivez sur la page My Projects (Mes Projets) et vous pouvez créer votre première application.

      Démarrer un nouveau projet

      1 – Sélectionnez Start new project pour lancer la création de votre première application.


      Dans cet article, nous explorerons le template My City et verrons comment l’utiliser pour créer une application pour mettre en vedette une ville, une université, une attraction touristique, ou une région.

      2 – Sélectionnez My City dans la liste des templates.


      Un écran de confirmation comportant des détails du modèle de template choisi apparaîtra. Ceci est un bon moyen pour apprendre d’avantage sur les usages des différents templates. Cependant, nous avons sélectionné les template que nous désirons, alors on passe à l’étape suivante.

      3 - Sélectionnez Create pour créer un nouveau projet basé sur le template My City.


      Paramétrer les sections de votre application

      A présent, passons au jeu ! Nous allons commencer par ajouter du contenu à notre application.

      Vous remarquerez qu’il y a un certain nombre de sections que nous pouvons ajouter : Monuments, Histoire, Lieux spéciaux, Album photo (Nous n’avons pas besoin de nous servir de toutes ces sections et il est possible également de renommer ces sections).

      En première des choses, nous allons donner un nom à notre application. Dans notre exemple, nous créons une application pour une petite ville pittoresque située dans la zone d’Ottawa et qui s’appelle Manotick. Donc remplaçons le titre de l’application par Manotick.

      1 – Remplacez le titre par le nom de votre ville, université, ou de l’attraction que vous désirez mettre en vedette dans votre application.


      Manotick est un joli petit village, donc plutôt que d’avoir une section pour les monuments et une autre pour les lieux spéciaux, nous allons supprimer la section appelée Monuments and éditer celle appelée special places. Au lieu de supprimer une section, vous pouvez l’éditer et renommer la section.

      2 – S’il y a plus de sections que vous n’en désirez, supprimez celles qui vous sont inutiles. Et sélectionnez Save (sauvegarder)

      3 - Choisissez la première section que vous désirez modifier et sélectionnez Edit.


      Après, avoir supprimé la section Monuments, si nous essayons d’éditer special places, nous recevons une alerte mentionnant que certaines modifications ne sont pas encore enregistrés. L’un des réflexes que vous devez avoir dans l’usage de cet outil, c’est la sauvegarde des modifications effectuées. La sauvegarde est impérative avant le passage à l’écran suivant. S’il arrive que vous oubliiez, pas de soucis, vous recevrez un message d’alerte. Et tout ce que vous aurez à faire sera de rester sur la page courante, et choisir Save pour sauvegarder vos modifications. Après quoi vous pourrez avancer dans votre navigation vers une autre page.
      Dans notre exemple, nous avons sauvegardé avant, ce qui fait que nous pouvons éditer la section special places.


      A présent, nous pouvons effectuer des personnaliser la section special places pour Manotick.

      5 – Renommez la section si vous le désirez en modifiant Section title (Titre de la section).

      Dans notre cas, nous remplaçons le nom de la section par Hidden secrets.

      A présent, nous devons choisir la disposition (layout) de page et la manière dont nous voulons afficher la liste des Hidden secrets de Manoticks. Il ne s’agit pas ici de la disposition de page comportant tous les détails, mais de la page listant les Hidden secrets et à partir de laquelle l’utilisateur pourra choisir un élément d’intérêt afin d’en avoir plus informations. Si vous cliquez sur d’autres dispositions (layout), vous pourrez voir à gauche de l’écran, une prévisualisation de la manière dont la page apparaîtra. Dans notre exemple, nous prévoyons d’inclure des images, mais nous voulons une disposition légèrement différente de celle qui est offerte par défaut.

      6 – Cliquez sur des dispositions (layout) différentes pour voir leur apparence dans la prévisualisation, puis sélectionnez la disposition qui vous convient le mieux.


      Ajout de données

      A ce stade, bien entendu, nous devons fournir certaines données concernant les lieux spéciaux de notre ville afin de les afficher dans l’application.

      1 – Sélectionnez l’onglet Data pour commencer à spécifier les données dans votre application.

      Vous serez amenez à utiliser deux moyens pour stocker vos données.

      · Static resources (Ressources Statiques : les données sont contenues dans l’application) – Sélectionnez cette option si vous désirez que l’utilisateur soit capable de se servir de l’application sans une connexion Internet. Mais sachez que stocker des données dans l’application veut aussi dire que pour mettre à jour ces données, il vous faudra soumettre une mise à jour de l’application sur le store.

      · Dynamic resources (Ressources dynamiques : Les données sont dans le nuage) – Sélectionnez cette option si vous prévoyez de temps en temps mettre à jour vos données ou ajouter de nouvelles données à l’application. Cette option implique le stockage des données sur le nuage. Ce qui signifie que lorsque l’utilisateur lance l’application, cette dernière se connectera à Internet et téléchargera les données à partir du nuage. Ceci veut dire que l’application ne pourra pas être utilisée hors ligne et aura besoin de télécharger des données pour utilisation.

      Vu que nous ciblons des utilisateurs en Amérique du Nord qui généralement ont des forfaits de données décents (Nous ne pensons pas qu’une personne vivant dans un village du Malawi viendra rechercher des restaurants et choses à faire à Manotick), nous choisissons Dynamic resources, comme ça, nous pouvons facilement corriger les fautes de frappe et ajouter de nouvelles données.

      2 – Choisissez l’option de stockage de données qui vous convient et ensuite sélectionnez Edit data pour commencer à ajouter vos données (Bien entendu, vous devez sauvegarder avant d’éditer les données).


      A présent, vous pouvez ajouter des données à votre application. Ce modèle de template suppose que vous voulez fournir un titre, un sous-titre, une image et une description pour chaque élément dans la section.

      3 – Entrez les valeurs que vous désirez pour votre application. N’oubliez pas de supprimer les lignes dont vous n’avez pas besoin. Vous pouvez aussi importer vos données à partir d’un tableur, mais dans notre exemple, nous allons garder le cap sur la simplicité en entrant nos données au clavier.

      Note : Nous recommandons de faire une sauvegarde de vos données après l’ajout de chaque ligne. Quelques fois, il vous arrivera de recevoir une erreur pendant l’upload d’une image, juste après avoir cliqué sur le bouton Save, et vous serez amené à quitter la page pour y revenir après. C’est un peu ennuyant, mais rien de sérieux, donc pensez à sauvegarder fréquemment pour le cas où.



      Ajout d’images

      Quand on clique sur la zone de texte image, une fenêtre pop-up apparaît et nous permet de sélectionner une image à partir d’une des trois ces endroits.

      • My computer - Choisissez cette option pour sélectionner une image stockée dans votre PC ou dans une carte SD dans votre ordinateur.
      • My OneDrive account – OneDrive est une unité de stockage gratuite sur le nuage, offerte par Microsoft et qui permet de sauvegarder et partager des documents et photos, et les rend disponibles à partir d’autres appareils. Si vous avez un Windows Phone, vous pouvez sauvegarder automatiquement vos images sur OneDrive.
      • App Studio resources – Il s’agit d’une collection limitée d’images que vous pouvez utiliser dans votre application.


      Chaque image que vous ajoutez doit avoir une hauteur et une largeur situées entre 100 et 1000 pixels. Si vous possédez une image très large, vous pouvez la redimensionner en utilisant l’outil Paint. Pour cela, il suffit d’ouvrir l’image dans Paint. Choisir Redimensionner à partir de la barre d’outils. Sélectionner pixels et spécifier une taille entre 100 et 1000 pixels pour votre image redimensionnée. Assurez-vous que la case maintenir l’aspect ratio est cochée, pour éviter que votre image ne soit étirée ou déformée pendant le redimensionnement.


      Vérification de la liaison de données

      1 – Après avoir entré les données dans les lignes, utilisez la flèche de retour à côté du titre Edit collection data pour retourner à l’éditeur de section.


      A présent que nous avons ajouté des données dans notre application, lancez un coup d’œil au bas de l’éditeur de section. Remarquez les liaisons. C’est ce qui détermine le texte qui sera affiché dans la liste des entrées pour cette section. Lorsqu’un utilisateur lance l’application et tape sur une entrée en particulier, il verra plus de détails concernant cette entrée.


      Si nous lançons notre application là maintenant, les écrans ressembleront à ceci :

      image image image

      Pour notre exemple, nous ne disposons pas d’autant d’informations, de ce fait, nous désirons que lorsque quelqu’un clique sur une entrée de la liste, l’image et le texte apparaissent dans la même page. Retournons dans notre éditeur de section et voyons comment personnaliser la manière dont les détails s’afficheront.

      Personnalisation de la page de détails

      Jusqu’à présent, nous avons juste regardé la première page dans les mises en page, fournissant une liste de données dans notre application. Les pages restantes déterminent comment le reste de données seront affichées lorsque l’utilisateur aura sélectionné une entrée.


      Donc comme nous voulons afficher l’image et la description dans une seule page, nous devons sélectionner la seconde page, ensuite choisir une disposition ou mise en page qui admet image et description. Nous avons trouvé une disposition que nous permet d’afficher tous les détails dans une seule page. Pour notre application, nous pensons que cette disposition est ira à merveille ! Une fois de plus, nous pouvons voir une prévisualisation à gauche de l’écran et contrôler les données affichées sur la page utilisent les liaisons au bas de la page.


      Vous pouvez avoir une ou plusieurs pages de détails, optez pour ce qui donnera plus de sens à votre application. Pour chaque page de détails, vous avec le contrôle sur la disposition et la liaison de données pour vérifier les données que vous souhaitez afficher.
      Lorsque vous avec plusieurs pages de détails, l’utilisateur défilera horizontalement pour se déplacer entre les pages de détails.

      1 – Sélectionnez une disposition (ou mise en page) de page de détail

      2 – Paramétrez les liaisons pour contrôler quelles valeurs seront affichées dans chaque page de détail.

      3 – Si nécessaire, ajouter des pages de détails additionnelles, pour que les utilisateurs soient capables de défiler horizontalement entre les pages de détails et voir toutes les données pour l’entrée sélectionnée.

      4 – Supprimer les pages de détails non utilisées

      Après toutes ces modifications, nos pages ressemblent à ceci :

      image image

      Ajout de fonctionnalités supplémentaires à la page de détails

      Vous avez sans doute remarqué quelques boutons coulissants dans le coin droit au bas de l’éditeur de page de détails.


      Ces fonctionnalités sont activées par défaut. Tous les utilisateurs y ont accès en faisant apparaître la barre d’application de leur téléphone.



      Cette fonctionnalité permet à l’utilisateur d’obtenir une lecture vocale du texte apparaissant à l’écran par le téléphone. Le texte lu par défaut est le champ de description.

      Pour se servir de cette fonction, l’utilisateur n’aura qu’à sélectionner l’icône read(lecture) sur la barre d’application.



      Cette fonctionnalité permet à l’utilisateur de partager le texte apparaissant à l’écran avec quelqu’un d’autre via un courriel, un message texte, ou un tap and send (tapez et envoyez).

      Pour se servir de cette fonction, l’utilisateur n’aura qu’à sélectionner share (partager) sur la barre d’application et ensuite sélectionner la méthode qu’il voudra utiliser pour partager l’information de la page.

      image image


      Cette fonctionnalité permet à l’utilisateur de créer une tuile sur le menu d’accueil de son téléphone et celle-ci lui permettra d’accéder directement à la page de détails concernée.

      Pour se servir de cette fonction, l’utilisateur n’aura qu’à sélectionner pin to start (Épingler à l’accueil) sur la barre d’application et la tuile sera ajoutée à l’écran d’accueil.

      image image

      1 – Pour chaque page de détails, utilisez les boutons coulissants pour déterminer les fonctionnalités que vous désirez activer pour vos utilisateurs.

      Ajout des sections additionnelles (si nécessaire)

      1 – Pour chaque section de votre application, modifiez la section et répétez le processus que vous venez de terminer, c’est-à-dire spécifier un nom, des données, une disposition ou mise en page, et des fonctionnalités pour la page principale et les pages de détails.

      Ajout d’une collection de sections


      Si vous désirez avoir les mêmes colonnes de base (Titre, Sous-titre, Description et Image) choisissez Add Default Columns pendant l’ajout de la collection.


      Pendant la modification de votre nouvelle section, vous devrez spécifier les liaisons de données vous-même afin d’indiquer à l’application quelles données vous voulez afficher au résumé de page.


      Ajout d’une section de flux RSS

      S’il y a un flux RSS que vous désirez inclure dans votre application, vous pouvez le faire facilement en ajoutant une section dédiée (mais gardez à l’esprit qu’un maximum de 6 sections est autorisé).

      Cliquez sur la section de type RSS pour ajouter une nouvelle section à votre application.


      Donnez un nom à votre section et l’URL (ici l’URL du flux RSS) et sélectionnez Confirm


      N’oubliez pas de modifier votre nouvelle section et de choisir une disposition adaptée pour la page de listage et les pages de détails.

      Si vous ne voyez aucune donnée dans la prévisualisation à gauche de l’écran, il se peut qu’il y ait une erreur dans votre URL.

      Si vous désirez changer l’URL du flux RSS, allez sur l’onglet DATA de la section.

      Ajout d’une section Youtube

      Si vous désirer inclure une chaîne Youtube dans votre application, vous pouvez facilement ajouter une section à votre application (Bien entendu, n’oubliez pas la limitation de 6 sections au maximum)

      Cliquez sur la section de type Youtube pour ajouter une nouvelle section à votre application.


      Donnez un nom à votre nouvelle section.

      Indiquez les vidéos que vous désirez inclure par le nom d’utilisateur Youtube ou par un critère de recherche Youtube.

      Sélectionnez Confirm pour créer la nouvelle section.


      N’oubliez pas de modifier votre nouvelle section et de choisir une disposition adaptée pour la page de listage et les pages de détails. Si vous ne voyez aucune donnée dans la prévisualisation à gauche de l’écran, il se peut qu’il y ait une erreur dans le nom d’utilisateur Youtube que vous aviez entré ou le critère de recherche.

      Si vous désirez changer le critère de recherche, allez sur l’onglet DATA de la section.

      Ajout d’une section de Flickr

      S’il y a un compte Flickr avec des photos que vous désirez inclure dans votre application, vous pouvez le faire facilement en ajoutant une section dédiée (mais gardez à l’esprit qu’un maximum de 6 sections est autorisé).

      Cliquez sur la section de type Flickr pour ajouter une nouvelle section à votre application.


      Donnez un nom à la section.

      Un nom d’utilisateur Flickr ou un critère de recherche pour indiquer les photos à afficher.


      N’oubliez pas de modifier votre nouvelle section et de choisir une disposition adaptée pour la page de listage et les pages de détails.

      Si vous ne voyez aucune donnée dans la prévisualisation à gauche de l’écran, il se peut qu’il y ait une erreur dans votre URL.

      Si vous désirez changer le critère de recherche, allez sur l’onglet DATA de la section.

      Ajout d’une section Bing

      Vous pouvez inclure les résultats d’une recherche Bing dans votre application grâce à la section Bing. Les utilisateurs auront la possibilité de taper sur un résultat de recherche et atterrir sur la page Web relative.

      Pour ajouter une section Bing à votre application, choisissez la section Bing.


      Spécifiez le nom de la section, le pays d’utilisation pour le contexte de recherche, et la phrase de recherche. Vous aurez probablement besoin d’utiliser quelques phrases différentes de recherche Bing afin de trouver la phrase qui fournira les résultats les mieux adéquates pour votre application.


      N’oubliez pas de modifier votre nouvelle section et de choisir une disposition adaptée pour la page de listage. Il n’y a pas de page de détails pour la page Bing, ceci tout simplement parce que si quelqu’un sélectionne un résultat de recherche, l’application lancera le navigateur et ouvrira le site web concerné.

      Si vous ne voyez aucune donnée dans la prévisualisation à gauche de l’écran, il se peut qu’il y ait une erreur dans le critère de recherche que vous avez entré.

      Si vous désirez changer le critère de recherche, allez sur l’onglet DATA de la section.

      Ajout de la section HTML5

      Si aucun des types de sections ci-dessus ne fait pas que ce que vous désirez, vous pouvez aussi ajouter une section HTML5 qui fondamentalement, vous permettra d’intégrer votre propre code HTML5 pour contrôler les données et l’apparence de la section. Expliquer comment écrire votre propre code HTML va au-delà de la couverture de cet article, mais il était nécessaire de vous signaler la disponibilité de cette option.

      Finalisation de l’ajout des données et sections de votre application

      1 – Ajoutez les sections restantes à votre application considérant le type de données que vous voulez inclure. Supprimer les sections que vous n’utilisez pas.

      Nous avons à présent, une belle et fonctionnelle application qui permet à l’utilisateur d’explorer les hidden secrets de Manotick, les restaurants locaux, photos, vidéos et informations à propos du village.

      image image image
      image image image

      Personnalisation du thème de l’application.

      En plus de pouvoir modifier les données, mise en page et fonctionnalités de votre application, vous pouvez aussi changer son style et son apparence.

      1 – Sélectionnez l’onglet Themes pour votre application.

      Il y a trois thèmes préconstruits que vous pouvez choisir comme point de départ. Il suffit tout simplement de choisir le thème dont vous préférez le style et l’apparence et personnaliser les couleurs pour s’accorder à vos besoins.

      2 – Choisissez la couleur de premier-plan, la couleur d’arrière-plan, la couleur de la barre d’application et même l’image d’arrière-plan pour l’affichage.

      Pour notre exemple, nous aimons l’idée d’une image d’arrière-plan montrant la beauté de Manotick en arrière-plan. Donc nous irons avec le Custom style (style personnalisé) et changer les couleurs et l’image pour quelque chose qui s’accorde mieux au contenu.


      Personnalisation de la tuile de l’application

      Vous pouvez personnaliser la tuile qui apparaît à l’écran d’accueil pour vos utilisateurs. Il y a trois types de styles de tuiles.

      • Flip template – le flip template est accrocheur parce que lorsqu’on est sur l’écran d’accueil, occasionnellement la tuile se retourne de l’avant vers l’arrière. Vous pouvez fournir une image et un titre pour l’avant et une image et un titre pour l’arrière de la tuile qui apparaît après retournement.
      • Cycle template – C’est un autre template saute-à-l’ œil parce qu’il fera défiler jusqu’à neuf images que vous fournirez pour capter l’attention de l’utilisateur.
      • Iconic template – Il s’agit ici du template classique qui affiche une icône et un titre pour votre application. Vous aurez à spécifier des tailles d’icônes différentes, de ce fait, l’utilisateur pourra choisir d’afficher la tuile dans différentes tailles sur leur écran d’accueil.

      1 – Sélectionnez le template de tuile que vous désirez pour votre application.

      Pour une application qui essaye de montrer un village pittoresque, nous pensons que le Cycle Template fonctionnera bien car il nous permet de montrer à l’utilisateur les différents aspects de Manotick et devrait être assez accrocheur.

      Chaque template nécessitera un template légèrement différent, mais fondamentalement, chacun nécessitera une sorte de titre, une sorte d’icône (possiblement de tailles différentes pour les différentes tailles de tuiles) et des images que vous uploaderez pour l’affichage sur la tuile, ou pour le cycle template.

      Vous serez toujours amenés à fournir une sorte d’image ou icône pour tuile basique à cause de la page de listage d’applications. Cette icône doit faire 160x160 pixels. Souvenez-vous que vous pouvez utiliser Microsoft Paint pour rogner et redimensionner les images.

      Pour notre exemple, nous avons choisi le Cycle template, donc nous avons spécifié :

      • Un titre pour l’affichage sur la tuile
      • Une image pour utiliser en guise d’icône

      Une section qui contient les données d’image à utiliser comme image source. Les flux RSS et Flickr ne fonctionneront pas ici, il faudra une section où vous aurez à spécifier une contenu image spécifique.


      2 – Spécifier un titre, images et icône pour le template de tuile choisi.

      Personnalisation des écrans de démarrage (Splash Screen) et de veille (Lock Screen) de l’application

      Si vous allez sur l’onglet des tuiles (Tiles), vous pouvez aussi modifier l’écran de démarrage et l’écran de veille pour votre application.

      1 – Sélectionnez l’onglet SPLASH & LOCK dans la section Tiles


      Quand vous sélectionnez Edit, il vous est demandé de choisir une image à utiliser comme arrière-plan. Dans notre cas, nous choisissons les images de Mill, sachant que c’est l’un des point de repère les plus connus de Manotick. Nous utiliserons cette image à la fois pour les écrans de démarrage et de veille.

      2 – Sélectionnez Edit pour l’arrière-plan de l’écran d’accueil (Splash Screen) et spécifiez une image pour afficher dans l’arrière-plan.

      3 – Sélectionnez Edit pour l’arrière-plan de l’écran de veille (Lock Screen) et spécifiez une image pour afficher dans l’arrière-plan.

      L’application finale !

      A présent, vous avez personnalisé les données, la mise en page et l’apparence de notre application. Le résultat final de l’application que nous avons développée ressemble à ceci :

      image image image

      Mais nous constatons que le texte est un peu difficile à lire, considérant les couleurs choisies et l’image d’arrière-plan. Donc nous pourrons avoir envie de faire fondre d’avantage l’image de fond (Ne pouvant le faire avec Microsoft Paint, nous avons donc utilisé Microsoft Powepoint qui a quelques fonctionnalités de retouche d’images. Nous avons ajouté notre image dans une diapositive dans PowerPoint pour utiliser l’outil de retouche d’image, ensuite déplacé l’image dans Microsoft Paint et la sauvegardé pour l’utiliser dans notre application).

      Nous avons créé une version fondu de notre image et décidé de donner la même couleur au texte et à la barre d’application. Et à présent, nous avons quelque chose qui ressemble à ceci. Je dois vous avertir que je suis célèbre dans la création d’écrans vraiment laids, donc pour moi cette application est très jolie dans son état actuel. Habituellement, je demande à quelqu’un d’autre de m’aider à arranger la couleur et la mise en page, mais je pourrais publier l’application dans son état.


      Ouf! Bon donnez-vous une tape dans le dos! Vous venez de créer une application. Prochainement, nous apprendrons à prendre une application de Windows Phone Studio et à l’exécuter dans Visual Studio (C’est de cette manière que j’ai eu toutes mes captures d’écran. La prévisualisation est bonne, mais j’ai fait tourner l’application sur l’émulateur pour vérifier le style et l’apparence) ou à la publier sur le store ! Pour savoir comment publier ton application cherchez l'article publication des applications Windows Phone App Studio

    Page 1 of 82 (409 items) 12345»