• Go DevMENTAL

    Canadian Finals Imagine Cup deadline this weekend!

    • 1 Comments

    If you are entering Games, Innovation, or World Citizenship in the Canadian Imagine Cup this year you need to submit your entry by Saturday March 22, 2014 8:00 p.m. Eastern Time.

    You can download the official copy of the Canadian Imagine Cup rules for 2014.

    We are very excited to see this year’s entries, the judges are looking forward to seeing what Canadian students have created!

    MS_0920_Imagine_Cup_2014_Email_V1-Student_Announcement_r3_intel_logo_imgWhich Canadian teams will win Windows 8 tablets provided by our sponsor Intel?

    Which Canadian team will represent Canada at the World finals in Seattle in July and possibly meet Bill Gates?

    The Deadline

    Saturday March 22, 2014 8:00 p.m. Eastern Time.

    The Submission requirements

    • Video Presentation of your project in which you team appears on camera to deliver the presentation as if to a panel of judges. This presentation should explain your project and your team. Who your team is, what your project does, who your project is for, and how you will bring your project to market. Your video must be no longer than ten minutes and it may not have any edits or visual effects. You may not move the camera during your presentation. In all respects it should replicate the experience of a judge sitting and watching your live presentation.
    • Software (usable by the judges in a hands-on evaluation)
    • Software Instructions – a document that explains to the judges how to use your software

    All the submissions must be provided in the English language.

    GOOD LUCK CANADA! WE CAN’T WAIT TO SEE YOUR IDEAS BROUGHT TO LIFE!

     
    IC14_CompetitionHeroWeb_970x300_Set03

  • Go DevMENTAL

    Step by Step Apps for non coders – Windows Phone App Studio

    • 12 Comments

    clip_image001Windows Phone App Studio allows you to build elegant apps with nothing more than a web browser. In this post we take a detailed look at how to build an app using one of the provided templates

    Many people want to try building an app but don’t have the coding skills or don’t have the time to sit down and code an application from scratch. Windows Phone App Studio lets you build an app for Windows Phone (the preview actually includes Windows 8 apps as well) and all you need is a browser.

    In this post you will find step by step instructions to create an app using the My City template. This template is suitable for showcasing something like a city, attraction, region, university or college. You can find more how to posts and resources on our Windows Phone App Studio resources page.

    Don’t forget apps published in Canada could earn you rewards through the Developer Movement!

    In this post we will cover

    • Getting Started with Windows Phone App Studio
    • Starting a new project
    • Setting up your app sections
    • Adding data
    • Adding images
    • Checking data binding
    • Customizing detail pages
    • Adding extra functionality to detail pages
    • Adding additional sections (Collection, RSS Feed, Youtube Feed, Flickr Feed, Bing search, HTML5)
    • Customizing the Application Theme
    • Customizing the Tile for your application
    • Customizing the Splash screen and lock screen

    Getting Started with Windows Phone App Studio

    1. Go to Windows Phone App Studio and Sign in

    NOTE: You will need to sign in with a Microsoft account (you can easily create one at www.outlook.com if you don’t have one)

    clip_image003

     

    2. If you are signing into Windows Phone App Studio for the first time you will be asked if the application can access your email addresses in your profile (because when you finish your project it will send you the files for your project by email.) Select Yes to continue.

    clip_image005

    3. Indicate you accept the Windows Phone App Studio Agreement by clicking on the checkbox and selecting Register.

    clip_image007

    Once you have successfully logged in to Windows Phone App Studio you will arrive on the My Projects page and you can start creating your first application!

    Starting a new project

    1. Select Start new project to start creating your first app.

    clip_image009

    In this post we will explore the My City template and see how we can use it to create an app to show off a town, university, tourist attraction, or region.

    2. Select My City from the list of templates.

    clip_image011

    A screen will appear confirming providing more detail about the template you selected. This is a great way to learn more about each of the templates. However we have selected the template we want so

    3. Select Create to create a new project based on the My City template.

    clip_image012

    Setting up your app sections

    Now the fun starts! We get to start adding content to our application.

    You can see that there are a number of sections we can add: monuments, special places, history, photo album (you don’t have to use all these sections and you can rename sections as well).
    First things first, let’s give our application a new name, I am going to create an app for a quaint little town in the Ottawa area called Manotick. So I’ll change the App title to Manotick.

    1. Change the title to the name of your town, university, or the attraction you want to highlight in your app.

    clip_image014

    Manotick is a pretty small village, so rather than having a section on monuments and one on special places, I am going to delete the section called monuments and then Edit the section called special places. Instead of deleting a section, you can Edit and rename the section.

    2. If there are more sections than you will need, delete the unnecessary sections. Then select Save.

    3. Choose the first section you want to modify and select Edit

    clip_image016

    After I delete the monuments section, when I try to Edit special places I get a warning saying I have unsaved changes. One of the things you want to get in the habit of doing in this tool, is saving your changes. You should save your changes before you go to the next screen. If you forget, no big deal, you will get this warning. All you do is choose Stay on this page, and then choose Save to save your changes. Then you can go ahead and navigate to another page, in this case I have to save before I can Edit the special places section.

    clip_image018Now I can customize the Special places for Manotick.

    5. Rename the section if you wish by changing the Section title.

    I am going to change the section name to Hidden secrets.

    Now I have to choose the layout of how I want to display the list of Manotick’s hidden secrets. This will not be the layout page with all the details. This will be the page which lists Manotick’s hidden secrets so the user can choose an item of interest to get more information. If you click on different layouts you can see a preview of how the page would appear on the left. I plan to include images but I want a slightly different layout from the default.

    6. Click on different layouts to see how they appear in the preview, then select your preferred layout.

    clip_image020Adding Data

    Now of course I need to provide some data about the special places in my town to display in the application.

    1. Select the Data tab to start specifying the data for your app.

    You will be presented with two ways to store your data

    • Static resources (data is in the app) – select this option if you want your user to be able to use the application without an internet application. BUT! Storing the data in the app also means if you ever want to update the data, you will have to update the app in the store. So if you expect to be adding and updating data regularly you might want to go with dynamic resources
    • Dynamic resources (data is in the cloud) – select this option if you expect to be updating data or adding new data to the app over time. This option stores your app data in the cloud. That means when a user launches the app, the app will connect to the internet and download the data from the cloud. This does mean that the app cannot be used offline and will require downloading data to use.

    Since I am targeting people in North America who generally have decent data plans (I don’t think anyone in rural Malawi will be looking up restaurants and things to do in Manotick), I am going to choose Dynamic resources so that I can easily fix typos and add new data.

    2. Choose your preferred data storage option and then select Edit data to start adding your data (you will have to save before you edit the data).

    clip_image022

    Now you can add data to your application. This template assumes that you want to provide a Title Subtitle, Image and Description for each item in the section.

    3. Type in the values you want for your application. Don’t forget to delete any rows you don’t want. You can import data from a spreadsheet as well, but for this example we will keep it simple and just type in our data.

    NOTE: I recommend saving your data after you add each row, sometimes you will get an error uploading an image and then the Save button gives you an error, and you have to leave the page and come back again. A little annoying, but nothing serious, just a good idea to save frequently, just in case.

    clip_image024

    Adding Images

    When you click on the Image text box you will see a pop up windows that allows you to select an image from one of three locations:

    • My computer – choose this option to pick a picture you have stored on your PC or on a SD card in your computer.
    • My OneDrive account - OneDrive is free cloud storage provided by Microsoft so you can save and share documents and photos and then access those photos from other devices. If you have a Windows Phone, you can save pictures to OneDrive automaticall.
    • App Studio resources – this is a limited collection of stock photography you can use in your application.

    clip_image025

    Any images you add must be between 100 and 1000 pixels in height and width. If you have an image that is too large, you can resize it using Microsoft Paint. Open the image in Paint. Choose Resize from the Toolbar. Select pixels and then specify a size between 100 and 1000 pixels for your resized image. Make sure the Maintain aspect ratio checkbox is selected so your image is not stretched or skewed when you resize it.

    clip_image027

    Checking data binding

    1. After you have entered the data for your rows, use the back arrow beside the title Edit collection data to return to the section editor

    clip_image028

    Now that we have added data to our app, take a glance down at the bottom of the section editor. Notice the Bindings. That is what determines the text displayed in the list of entries for this section. When a user runs the app and taps on a particular entry they will see more details about that entry.

    clip_image030

    If I ran my app right now, the screens would look like this:

    clip_image032

    clip_image034

    clip_image036

    I don’t have that much information so I would like to have the image and the text appear on the same page when someone clicks on an entry in the list. Let’s go back to the section editor and see how you can customize the way details are displayed.

    Customizing detail pages

    Up until now we have only looked at the first page in the layouts which provides a list of the data in our app, the remaining pages determine how the rest of the data will be displayed when a user selects an entry

    clip_image037

    So if I want to show the image and the description on a single page, I need to select the second page, and then pick a layout that allows an image and a description. I’ve found a layout that will allow me to display all the details on a single page. For my application, I think that layout will work perfectly! Once again I can see a preview on the left and I can control the data that is displayed on the page using the Bindings at the bottom of the page.

     

    clip_image039

    You can have as one or more detail pages, do whatever makes sense for your application. For each detail page, you control the layout and use the bindings to control the data you want displayed. When you have multiple detail pages the user will scroll horizontally to move between detail pages.

    1. Select a detail page layout

    2. Set the bindings to control what values are displayed on each detail page

    3. If necessary add additional detail pages so a user will be able to scroll through the details pages and see all the data for the selected entry

    4. Delete any unused detail pages

    After I finish my changes my pages look like this

    clip_image040

    clip_image042

    Adding extra functionality to your detail pages

    You might have noticed a few extra sliders in the bottom right corner of the detail page editor.

    These features are all enabled by default, all the user has to do to use the features is bring up the app bar on their phone

    clip_image044

    These features are all enabled by default, all the user has to do to use the features is bring up the app bar on their phone.

    clip_image046

    TextToSpeech

    This feature gives the user the ability to have text on the screen read aloud by the phone. You choose which field is read aloud by selecting the binding field as you build the app. The default is the Description field.

    To use this feature the user just selects the read icon on the app bar.

    clip_image048

    ShareText

    This feature will allow the user to Share the text on the screen with someone by email, by text message or by tap and send.

    To use this feature, the user just selects share on the app bar and then they select the method they want to use to share the information on the page.

    clip_image050

    clip_image052

    PinToStart

    This feature allows the user to create a tile on their phone that will take them directly to this detail page.

    To use this feature, the user just selects pin to start on the app bar and then a tile is added to their start screen.

    clip_image054

    clip_image056

     

    1. For each of your detail pages, use the sliders to determine which features you want to enable for your users.

    Adding more sections (if needed)

    1. For each section in your app, Edit the section and repeat the process you just completed specifying a name, data, layouts an dfeatures for the main page and detail pages.

    You can have up to 6 sections in your app, you can add new sections as well from the main content page. If you want another section like the ones we were working on already, add a Collection.

    Adding a collection section

    clip_image058

    If you want the same basic columns (Title, Subtitle, Description and Image) choose Add Default columns when you add the collection.

    clip_image060

    When you edit your new section, you will have to specify the bindings yourself to tell the application what data to display on the summary page.

    clip_image062

    Adding an RSS feed section

    If there is an RSS Feed you wish to include in your app, you can easily add a section for that to your app (but remember you are only allowed a maximum of 6 sections)

    Click on the RSS section type to add the new section to your app

    clip_image064

    Specify a name for your new section and the URL, the URL of the RSS feed and select Confirm

    clip_image066

    Don’t forget to edit your new section and pick a suitable layout for the listing page and the detail pages.

    If you can’t see any data in the preview on the left you probably have a mistake in your URL.

    If you need to change the RSS URL, go to the DATA tab of the section.

    Adding a Youtube section

    If there is an Youtube channel you wish to include in your app, you can easily add a section for that to your app (but remember you are only allowed a maximum of 6 sections)

    Click on the Youtube section type to add the new section to your app

    clip_image068

    Give your new section a name.

    Specify the videos to include by Youtube user name or by Youtube search criteria.

    Select Confirm to create the new section.

    clip_image070

    Don’t forget to edit your new section and pick a suitable layout for the listing page and the detail pages. If you can’t see any data in the preview on the left you probably have a mistake in your username or search criteria

    If you need to change the search criteria, go to the DATA tab of the section.

    Adding a Flickr section

    If there is a Flickr account with photos you wish to include in your app, you can easily add a section for that to your app (but remember you are only allowed a maximum of 6 sections)

    Click on the Flickr section type to add the new section to your app

    clip_image072

    Specify a section name

    A Flickr user name or search criteria to determine which Flickr photos are displayed.

    clip_image074

    Don’t forget to edit your new section and pick a suitable layout for the listing page and the detail pages.

    If you can’t see any data in the preview on the left you probably have a mistake in your username or search criteria

    If you need to change the search criteria, go to the DATA tab of the section.

    Adding a Bing section

    You can include Bing search results right inside your app with a Bing section. Users will be able to tap a search result and be brought to the web page selected in the search results.

    To add a Bing section to your app select the Bing section.

    clip_image076

    Specify the section name, country to use for the search context, and search phrase. You may want to try a few different phrases in Bing search to find the phrase that provides the most helpful results for your application.

    clip_image078

    Don’t forget to edit your new section and pick a suitable layout for the listing page. There won’t be detail pages for a Bing page, because if someone selects a search result the app will launch the browser and take them to the selected web site.

    If you can’t see any data in the preview on the left you probably have a mistake in your search criteria

    If you need to change the search criteria, go to the DATA tab of the section.

    Adding an HTML5 section

    If none of the above section types will do you what you need, you can also add an HTML5 section which basically allows you to write your own HTML5 code to control the data and appearance of the section. Explaining how to write your own HTML data is more than we will get into in this document, but it’s nice to know you have that option when you need it!

    Finish adding your app sections and data

    1. Add the remaining sections to your application based on the type of data you want to include. Delete any sections you are not using.

    I now have a beautiful functional phone application that lets my user explore hidden secrets of Manotick, local restaurants, photos, videos, and news about the village.

    clip_image079

    clip_image080

    clip_image081

    clip_image082

    clip_image083

    clip_image084

    Customizing the application theme

    In addition to being able to modify the data, layout and functionality of your application. You can also change the look and feel.

    1. Select the Themes Tab for your application.

    There are three pre-built themes you can choose as a starting point. Simply select the theme whose look and feel you prefer and customize the color to suit your needs.

    2. Choose the foreground color, background color, application bar color and even a background image to display.

    I like the idea of a background image showing the beauty of Manotick in the background so I am going to go with the Custom style and change the colors and image to something better suited to the content.

    clip_image086

    Customizing the tile for your application

    You can customize the tile that appears on the Start screen for your user. There are three tile styles to choose from

    • Flip template – The flip template is eye catching because when on the start screen it will occasionally flip from front to back. You can provide an image and title for the front and an image and title for the back of the tile that appears when it flips.
    • Cycle template – This is another eye catching template because it will cycle through up to nine images you provide grabbing the user’s attention.
    • Iconic template – This is the classic template which displays an icon and title for your app. You will have to specify different icon sizes since the user could choose to display the tile in different sizes on their start screen.

    1. Select the tile template you want for your application

    For an app that is trying to show off a quaint village, I think the Cycle Template will work well because it will allow me to show the users different aspects of Manotick and should be fairly eye catching.

    Each template will require slightly different content, but basically each will require some sort of title, some sort of icon (possibly different sizes of the icon for different size tiles) and either images which you upload to display on the tile, or for the cycle template a section which contains image the app can cycle through.

    You will always have to provide some sort of image or icon for a basic tile because for the app listing page. This icon has to be 160x160 pixels. Remember you can use Microsoft Paint to crop and resize images.

    I have selected the Cycle template so I have to specify

    • A title to display on the tile
    • Image to use for the icon

    A section that contains image data to use as the image source. Flickr and RSS feeds won’t work, it will need to be a section where you have provided specific image content.

    clip_image088

    2. Specify a title, images and icon for your selected tile template

    Customizing the Splash screen and lock screen background

    If you go the Tiles tab you can also edit the Splash screen and lock screen for your application.

    1. Select the SPLASH & LOCK tab in the Tiles section

    clip_image090

    When you select Edit you are asked to select an image to use as the background. I am going to select images of the Mill since that is the best known landmark in Manotick. I will use that image for both the splash and lock screens.

    2. Select Edit for the Splash Screen background and specify an image to display in the background

    3. Select Edit for the Lock Screen background and specify an image to display in the background

    The finished app!

    You have now customized the data, layout and appearance of my app. The finished result of the app I was building looks like this:

    clip_image091

    clip_image092

    clip_image093

    Now I see that the text is a little hard to read with my selected colors and background image, so I might want to make the background image more faded (you can’t do that in Microsoft Paint, so I actually used Microsoft PowerPoint which has some features for editing images. I added my image to a slide in PowerPoint than used the image editing tool, then I moved the image back to Microsoft Paint and saved it for use in my application)

    I have created a faded version of my image and decided to make the text and app bar the same color and now I get something more like this. I should warn you I am infamous for making really ugly screens, so for me this is actually a pretty nice looking app! Usually I ask someone else to fix up my color and layout, but I might just publish this as is!

    clip_image095

    Phew! Okay give yourself a pat on the back! You have now created an app. Next up we will learn how you can take that app from Windows Phone Studio and either run it in Visual Studio (that’s how I got all my screenshots, the preview is great, but I ran it in the emulator to check the look and feel) or publish it to the store!

  • Go DevMENTAL

    Lister toutes vos applications Windows Phone dans chacune d’entre elles

    • 0 Comments

    Christian HissibiniDéveloppeur Windows Phone Christian Hissibini (Histech Solutions) partage comment il a fait la promotion de ses applications à partir de chacune d’entre elles.

    Cet post est aussi disponible en anglais/This post is also available in English

    Note de Susan: Au Canada, dans le cadre du Mouvement des développeurs, amassez des points à chaque étape, puis échangez ceux ci contre des récompenses géniales!

    Assez avec les notes de Susan, vas-y Christian

    La Problème: Comment lister mes applications dans un application Windows Phone

    Nous savons tous que lister l’ensemble de nos propres applications à partir de chacune d’entre elles constitue un moyen efficace et gratuit pour faire leur promotion et aussi leur publicité. De cette manière, nous permettons à nos applications de se vendre d’elles-mêmes.

    clip_image002

    Malheureusement la documentation MSDN ne nous renseigne pas nécessairement sur une méthode officielle pour le faire. Bon nombre de développeurs proposent des méthodes alternatives mais qui sont souvent lourdes d’usage.

    Recherchant une solution légère, on m’avait d’abord suggéré Marketplace Search Task (voir la discussion ici), mais mes applications n’étaient pas les seules à apparaître dans la liste. Ce n’est pas que je ne suis pas gentil, mais c’est juste que les autres n’auraient pas aimé que je leur fasse de la pub gratuite J

    clip_image004

    Ensuite j’ai opté pour une autre méthode plus égoïste, mais moins élégante car elle gâchait l’expérience utilisateur. En fait, il fallait passer par le navigateur via un lien Web et le web Browser Task.

    Tout récemment, en faisant des recherches sur les schémas URI de lancement des applications intégrées pour Windows Phone 8(URI schemes for launching built-in apps for Windows Phone 8), je suis tombé sur un précieux, la solution miracle… Le schéma d’URI Zune !

    La solution : Appel de la méthode LaunchUriAsync(Uri) avec son paramètre associé à un schéma d’URI Zune

    Lol qui a dit que Zune était vraiment mort ? Même s’il s’agit d’un fantôme, c’est le seul qui permet d’afficher à partir du store, toutes les applications d’un seul et unique éditeur dont le nom est spécifié en paramètre.

    La syntaxe du schéma d’URI en question est la suivante :

    . zune:search?publisher=[publisher name]

    Exemple d’implémentation :

    Considérons un bouton associé à l’événement ListMyAppBtn
    Le code donne ceci :

    XAML

    <Button Content="Hint Me" HorizontalAlignment="Left" Margin="68,158,0,0" 
    VerticalAlignment="Top" Height="136" Width="340" Tap="ListMyAppsBtn"/>

    C#

    async void ListMyAppsBtn(object sender, System.Windows.Input.GestureEventArgs e)
    
    {
    
    await Windows.System.Launcher.LaunchUriAsync(new Uri("zune:search?publisher=HisTech Solutions"));
    
    }

    Remarque : Le paramètre [publisher name] est sensible à la casse (it is case sensitive). Par exemple, avec [Histech Solutions] comme paramètre, il ne trouvera rien, pourtant avec [HisTech Solutions] le listing s’affichera correctement.

    Téléchargements

    Exemple ListMyApps

    Pour aller plus loin avec schémas d’URI Zune

    Voici d’autres schémas d’URI Zune qui pourraient être utiles pour la promotion de vos applications :

    Lance le store et affiche le contenu spécifié

    zune:search?keyword=[search keyword]&publisher=[publisher name]&contenttype=app

    Lance le store et affiche les applications en fonction des mots clés spécifiés

    zune:search?keyword=[search keyword]&contenttype=app

    Lance le store et affiche la page d’évaluation de l’application appelante

    zune:reviewapp

    Lance le store et affiche la page d’évaluation de l’application spécifiée

    zune:reviewapp?appid=app[app ID]

    Lance le store et affiche les détails de l’application spécifiée

    zune:navigate?appid=[app ID]

    Documentation

    Retrouvez la liste complète des schémas URI pour le lancement des applications intégrées Windows Phone à partir du lien suivant :

    http://msdn.microsoft.com/en-us/library/windowsphone/develop/jj662937(v=vs.105).aspx

  • Go DevMENTAL

    How to Cross promote your Windows Phone apps

    • 1 Comments

    Christian HissibiniWhy not list all your Windows Phone applications inside each other, so if someone likes one of your apps they can discover other apps you published?

    Windows Phone developer Christian Hissibini (Histech Solutions) shares how he found a way to cross promote his applications, so that his fans could find more of his apps.

    Note from Susan: I hope Christian’s story helps you increase downloads of your own applications, don’t forget Canadian developers can earn rewards for their apps through Developer Movement!

    This blog post is also available in French/ Cette poste est aussi disponible en francais

    Now take it away Christian!

    The problem: How to get a list of all my published apps to display in a phone app

    We all know that listing all our applications within each other is an effective and free way to promote and publicize them. This way we can help our apps sell themselves.

    image

    Unfortunately the MSDN documentation does give us an official way of doing it. A number of developers have proposed different solutions but they are often cumbersome.

    Researching a simpler solution, someone suggested I try the Marketplace Search Task (see the discussion here), but my applications weren’t the only ones returned by the list. It’s not that I’m not a nice person, but I ‘m not sure the other publishers would really want me providing them with free publicity :)

    image

    Next, I tried another more self centered method, but it was less elegant because it affected the user experience. Basically, it went through the browser to a hyperlink with the Web Browser Task.

    Recently, while doing research on the URI schemes for launching applications integrated with Windows Phone 8, I discovered the precious, the miracle solution…the URI Zune Scheme!

    The Solution: Call the LaunchUriAsync(Uri) with a parameter associated to a URI Zune Scheme

    LOL! Who said Zune is dead? Even if it is a ghost, it’s the only way to post from the store, all the applications of a particular publisher where you user the publisher name as the specified parameter.

    The syntax of the URI schema in question is as follows:

    . zune:search?publisher=[publisher name]

    Here’s an example.

    Take a button associated with the event ListMyAppBtn. You get the following code:

    XAML

    <Button Content="Hint Me" HorizontalAlignment="Left" Margin="68,158,0,0" 
    VerticalAlignment="Top" Height="136" Width="340" Tap="ListMyAppsBtn"/>

    C#

    async void ListMyAppsBtn(object sender, System.Windows.Input.GestureEventArgs e)
            {
                await Windows.System.Launcher.LaunchUriAsync(new Uri("zune:search?publisher=HisTech Solutions"));
            }
    

    Note: The parameter publisher name is case sensitive. For example with Histech Solutions as a parameter, it won’t find anything, however with HisTech Solutions the correct results are returned.

    Related Downloads

    Sample ListMyApps

    Download the source code of this example from MSDN

    Going further into Zune URI schemas

    Here are some other URI Zune Schemas which could be useful for promoting your applications:

    Launch the store and post the specified content

    zune:search?keyword=[search keyword]&publisher=[publisher name]&contenttype=app

    Launch the store and list the applications based on specified keywords

    zune:search?keyword=[search keyword]&contenttype=app

    Launch the store and display the page to rate the app making the call

    zune:reviewapp

    Launch the store and display the page to rate the specified app

    zune:reviewapp?appid=app[app ID]

    Launch the store and list the details of the specified application

    zune:navigate?appid=[app ID]

    Documentation

    You can see the complete list of URI Schemes for launching applications integrated with Windows Phone at the following link:

    http://msdn.microsoft.com/en-us/library/windowsphone/develop/jj662937(v=vs.105).aspx

  • Go DevMENTAL

    Internationaliser son application Windows Phone – Pourquoi et Comment ?

    • 0 Comments

    Christian HissibiniDéveloppeur Windows Phone Christian Hissibini (Histech Solutions) partage comment il a crée des applications Windows Phone pour un public international.

    Cet post est aussi disponible en anglais/This post is also available in English

    Note de Susan: Au Canada, dans le cadre du Mouvement des développeurs, amassez des points à chaque étape, puis échangez ceux ci contre des récompenses géniales!

    Assez avec les notes de Susan, vas-y Christian

    Généralement, quand on se lance dans un projet de création d’application, que l’on parte d’une idée de génie ou d’une idée complètement loufoque, on espère secrètement que celle-ci devienne « The Next Big Thing » :)

    Objectif de Mission : « The Next Big Thing »

    Il s’agit ici de séduire le maximum d’utilisateurs… A ce propos, la plateforme Windows Phone nous offre la possibilité de rendre notre application disponible dans le monde entier ou de ne la restreindre qu’à certains pays.

    Mais pour garantir un taux de téléchargements et d’adoptions efficients, l’application se doit d’être conviviale et cela passe par la considération du public visé, de la culture, de la zone géographique et de la langue d’interface; d’où la pratique de l’internationalisation.

    C’est quoi Internationaliser une application ?

    Vous l’avez sans doute déjà deviné, internationaliser une application c’est l’adapter à d’autres langues, marchés, cultures et régions.
    Ici deux notions sont essentielles : Globalisation et Localisation.

    La Globalisation permet à l’application, pendant son fonctionnement, de considérer les paramètres de culture de l’utilisateur (format d’affichage de date, monnaie, etc.).

    La Localisation quant à elle permet à l’application de considérer la langue et les paramètres régionaux de l’utilisateur. Elle consiste entre autre à la traduction de texte, au choix de police (fonte), au sens de lecture, au choix des visuels adéquats, etc.

    Maintenant que nous avons meilleure connaissance du sujet, rappelons quelques avantages de l’internationalisation, histoire d’encourager les plus sceptiques.

    Quels sont les avantages de l’internationalisation ?

    • L’expérience utilisateur est de loin meilleure.
    • Elle permet de toucher un public plus important (on parle ici du monde entier).
    • On récolte forcément beaucoup plus de téléchargements.
    • Le taux d’adoption de l’application est beaucoup plus élevé.
    • Etc.

    Bref tout tourne autour de l’argument « The Next Big Thing » :). Tout ceci a forcément un impact positif sur les ventes dans les différents marchés et génère plus de trafic au sein de l’application.

    Convaincu ? Allons donc voir comment préparer notre application pour qu’elle soit prête pour la conquête du monde. J

    Comment préparer son application pour le marché international ?

    Intégrer la logique de l’internationalisation dès la phase de conception est très avantageux, mais même si vous partez d’un projet existant, soyez sans crainte car grâce à l’infrastructure .NET, l’intégration est super simple à mettre en œuvre. La globalisation et à la localisation deviennent vite un jeu d’enfant.

    1 – Globalisation d’une application Windows phone

    Comme nous l’avons dit tantôt, la globalisation permet à l’utilisateur de retrouver un environnement culturel qui lui est familier.
    Pour ce faire, nous avons recours à la classe CultureInfo. Celle-ci contient déjà les langues adéquates et les codes de pays. Par exemple, en-US pour anglais-Etats Unis ou fr-CA pour français-Canada (qui est différent de fr-FR pour français-France). L’instance est prête à être utilisée pour tous le formatage de chaînes locales (devise, date et heure).

    Exemple : Modification de la culture courante grâce à CultureInfo

    String cul; 
    
    cul = "fr-CA";
    
    CultureInfo newCulture = new CultureInfo(cul); 
    
    Thread.CurrentThread.CurrentCulture = newCulture;
    
    Thread.CurrentThread.CurrentUICulture = newCulture;
    

    Le site Web de MSDN propose dans sa documentation un tutoriel intitulé “How to build a globalized app for Windows Phone”.
    Vous y retrouverez les différents usages dont on a recourt dans la globalisation d’une application et aussi, un exemple d’application globalisée est disponible en téléchargement.

    2 – Localisation d’une application Windows Phone

    Note : Dans ce contexte, localisation signifie adaptation à un groupe linguistique... Donc, aucun lien avec le positionnement GPS...

    Ici aussi la plateforme nous simplifie les choses, car lorsque nous créons un nouveau projet Windows Phone, un dossier de ressources (Resources) est automatiquement ajouté à la solution. Ce dossier contient un fichier appelé AppResources.resx. Ce fichier contient les chaînes traduisibles.

    clip_image001

    Normalement, lorsqu’on clique sur ce fichier, un éditeur de ressources s’ouvre.

    clip_image002

    Comme nous le constatons, par défaut, ce fichier intègre des entrées telles que ResourceLanguage (qui représente la langue par défaut), ResourceFlowDirection (qui détermine le sens directionnel pour la lecture).

    Comment ajouter une nouvelle entrée au fichier de ressources ?

    Pour ajouter une nouvelle entrée, il suffit de cliquer sur une nouvelle ligne et ajouter le nom et la valeur. Il n’y a pas plus simple non!? J

    Bon, une petite illustration ne fera que grand bien

    clip_image004

    A présent que nous savons ajouter de nouvelles entrées dans le fichier de ressources, voyons comment faire pour que notre code vienne lire ces entrées.

    Comment lier le code aux entrées du fichier de ressources ?

    Cette liaison se fait aisément au niveau du XAML.

    En effet, il suffit de remplacer le texte codé en dur entre les guillemets des attributs par le nom attribué à la ressource correspondante.

    Un exemple vaut mieux qu’un long discours :

    Supposons que nous voulons intégrer cette citation « If you lie to the compiler, it will get its revenge. » de Henry Spencer qui devra être traduite plus tard.

    Sans localisation nous avons :

    <TextBlock Text="Si on ment à un compilateur, il prendra sa revanche." 
    Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>

    - Avec localisation ça devient :

    <TextBlock Text="{Binding Path=LocalizedResources.CitationHenry, Source={StaticResource LocalizedStrings}}" 
    Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>

    Dans cette dernière partie, nous avons fait savoir au TextBlock qu’il recevra sa valeur à partir de la ressource nommée CitationHenry, présente dans le fichier AppResources.resx

    Une nouvelle ligne devra donc être obligatoirement ajoutée au fichier de ressources

    clip_image006

    Les moins aveugles d’entre nous ont surement constaté que dans les commentaires générés initialement avec le fichier MainPage.xaml de notre solution, il existe une remarque concernant la localisation.

    <!-- REMARQUE CONCERNANT LA LOCALISATION :
    
    Pour localiser les chaînes affichées, copiez leurs valeurs dans les clés correctes
    
    du fichier de ressources linguistiquement neutre de l'application (AppResources.resx), puis
    
    remplacez le texte codé en dur entre les guillemets des attributs
    
    par la clause de liaison dont le chemin pointe vers ce nom de chaîne.
    
    Par exemple :
    
    Text="{Binding Path=LocalizedResources.ApplicationTitle, Source={StaticResource LocalizedStrings}}"
    
    Cette liaison pointe vers la ressource de chaîne du modèle appelée ApplicationTitle.
    
    L'ajout de langues prises en charge à l'onglet Propriétés du projet crée un
    
    fichier resx par langue qui peut restituer les valeurs traduites de vos
    
    chaînes d'interface utilisateur. La liaison dans ces exemples peut entraîner le retrait de la valeur des
    
    attributs du fichier .resx qui correspond à la valeur
    
    CurrentUICulture de l'application au moment de l'exécution.
    
    -->
    

    Comme quoi il est important de considérer les petits commentaires verts qui se retrouvent dans les fichiers générés automatiquement lors de la création d’un nouveau projet :)

    Dans l’exemple précédent, nous avons vu comment localiser du texte, mais alors qu’en est-il des images ?

    Localisation des images

    Dans la pratique, localiser une image a le même principe que localiser du texte. En fait, il suffit juste de mettre son URI en ressource comme suit :

    <Image Source="{Binding Path=LocalizedResources.ImageURI, Source={StaticResource LocalizedStrings}}"/>

    A présent que nous avons quelques notions sur la localisation des applications, il est temps de voir comment la rendre accessible au plus grand nombre et comme vous vous en doutiez bien, cela passe par la prise en charge multilingue.

    Comment ajouter de nouvelles langues à son application ?

    Ajouter une ou plusieurs nouvelles langues à son application revient à joindre des fichiers de ressources additionnels.

    A ma connaissance, il existe 2 méthodes :

    Méthode 1 : Manuelle


    Pour ce faire, il suffit d’ouvrir les propriétés de notre projet en effectuant un double-clic sur « Properties », ensuite à cocher les langues correspondantes dans le box « cultures prises en charge » et enfin à générer.
    Une fois les fichiers AppResources créés, il faudra juste les renseigner à l’aide des valeurs correspondantes.

    clip_image008

    Méthode 2 : A l’aide du kit de ressources pour application multilingue (Multilingual App Toolkit)

    Cette méthode est ma préférée :) Vous verrez pourquoi…

    Nous devons d’abord télécharger et installer le kit de ressources pour application multilingue. Qui en fait est une extension pour Visual Studio qui vient simplifier tout le processus de traduction.

    Dans la page de téléchargement, je vous conseille de choisir la version française.

    Une fois l’installation complétée, dans le menu de Visual Studio, sélectionnez Outils puis cliquez sur Activer le kit de ressources pour application multilingue.

    Dans l’explorateur de solution, faites un clic droit sur le fichier du projet et sélectionnez Ajouter des langues de traduction.

    Une fois la fenêtre ouverte, sélectionnez la langue désirée. Dans notre exemple allons commencer par offrir le rêve américain à notre application en choisissant Anglais (États-Unis) [en-US]

    clip_image009

    Après avoir cliqué sur le bouton OK, les fichiers ressources en anglais sont automatiquement générés.

    clip_image010

    Si vous cliquez sur ce nouveau fichier de ressources, vous remarquerez que toutes les entrées de votre premier fichier AppResources s’y retrouvent, mais sans aucune traduction.
    A ce niveau, nous avons le choix soit de traduire manuellement chaque entrée ou de passer par l’outil de traduction automatique fourni par le kit de ressources.

    clip_image011

    Il faut noter que la traduction n’est pas souvent parfaite, donc la faire vérifier serait fort utile et ça nous évitera aussi de tomber dans la confusion ou même de déclencher un scandale international J

    A présent que nous avons intégré une nouvelle langue à notre projet, il est temps de tester afin de pouvoir pousser un hourra de joie J

    Comment effectuer des tests ?

    On commence par générer notre solution.
    Ensuite on lance l’application sur l’émulateur (ou notre appareil).
    Enfin dans l’émulateur sélectionner Paramètres à Ensuite langue + région à Modifier la langue du téléphone en anglais (ou toute autre langue choisie pendant la localisation) puis cliquer (ou appuyer) sur Redémarrer le téléphone

    On relance l’application sur l’émulateur (ou notre appareil) et puis quoi ??? On vient de franchir un cap vers la conquête du monde !!! Souvenez-vous de l’objectif de notre mission : The Next Big Thing !!!

    Nous ne pouvons clore cette partie sans citer quelques bonnes pratiques qui nous aideront à réussir efficacement nos localisations.

    Bonnes pratiques pour la localisation

    • Séparer les ressources du code (permet de rendre le code indépendant de la langue et ainsi de supporter des encodages différents…).
    • Ne pas abuser de la localisation (Par exemple, on n’a pas besoin de localiser des balises…)
    • Prévoir des longueurs de chaîne plus grandes (la traduction d’un mot peut être plus longue…)
    • Localiser les phrases au lieu des mots séparément. (Aide à préserver le sens des phrases après traduction…)
    • S’assurer de lister les paramètres dans le bon ordre.
    • Utiliser des attributs uniques pour identifier les ressources
    • Choisir une approche appropriée de traduction.

    Pour plus de détails concernant ces bonnes pratiques, je vous invite à consulter la documentation de MSDN, à la section intitulée « Localization best practices for Windows Phone »

    Pour aller plus loin…

    Voici un rappel de la liste de ressources en ligne qui m’ont été utiles dans la pratique et aussi dans la rédaction de cet article. Elles vous aideront à aller plus loin sur le sujet :

    Conclusion

    Nous avons vu que l’internationalisation des applications Windows Phone comporte de gros avantages et, aussi qu’il est important d’intégrer cette logique dès la phase de conception et enfin, que sa mise en œuvre, à travers la globalisation et la localisation, est aussi simple qu’un jeu d’enfant.
    Si un aspect évoqué dans cet article ne vous semble pas assez clair, n’hésitez pas à poser vos questions.

    Bonne continuation vers «The Next Big Thing » :)

    P.S. N’oubliez pas, cette année au Canada, dans le cadre du Mouvement des développeurs, vous apprendrez sous la tutelle du Sensei du code et maîtriserez l’art de coder! Amassez des points à chaque étape, puis échangez ceux ci contre des récompenses géniales!

Page 4 of 82 (409 items) «23456»