• Go DevMENTAL

    Get an Xbox 360 wireless controller for learning some JavaScript? Really?

    • 0 Comments

    JavaScript in Visual Studio 2013Watch the Microsoft Virtual Academy course “JavaScript Fundamentals for absolute beginners” and you can learn how to add functionality to your websites and video games. If you are in Canada, watching the video could even earn you rewards!

    Building a great web site, or a cool web game requires JavaScript. Yup, yet another programming language to master! What I like about this particular course is the way Bob Tabor from www.LearnVisualStudio.net, has each concept is broken into its own video so you can search for and focus on the information you need, without having to watch hours and hours of content.

    Check out the many topics as part of the JavaScript Fundamentals for absolute beginners

    • Writing your First JavaScript Application
    • Writing JavaScript in Visual Web Developer Express Edition
    • JavaScript variables, types, operators, and expressions
    • Conditional logic
    • Functions
    • Arrays
    • Working with external JavaScript Files
    • Getting started with jQuery
    • using jQuery to retrieve JSON via AJAX

    and more!

    Not only that until June 1, 2014, developers in Canada can earn rewards by watching ANY videos at Microsoft Virtual Academy. Check out Code Kwon Do at www.developermovement.com to find out how just watching one video could earn you rewards like an Xbox Live Gold membership or a $25 Windows App Store Gift card, or an Xbox 360 Wireless controller.

  • Go DevMENTAL

    Imagine Cup – Showcasing student talent in Canada and around the world!

    • 0 Comments

    TeamSanoWinsAwardThe Imagine Cup is a competition organized by Microsoft where students are invited to use technology to do amazing things! They never disappoint us!

    Everybody has dreams, but not every body is ready to fight for the dreams, if you dream, it can be real, you have to fight for it” – Imagine Cup competitor

    Sometimes you come up with a cool business idea, or you look at a problem facing the world and think to yourself: “It’s just too big, I couldn’t actually tackle that.” When you meet the students participating in Imagine Cup you can’t help but start to see things differently. These students have the passion and drive to pursue their ideas and bring them to reality!

    You can do anything, so dream big and follow it” - Imagine Cup competitor

    imageThis year is the 12th year of the Microsoft Imagine Cup. Here in Canada we are excited to be entering our third consecutive year of Canadian Imagine Cup Finals, sponsored by intel. We have already seen some amazing projects from across the country.

    • In 2012, a team of students from George Brown College represented Canada at the World Finals in Sydney, Australia. Their project was a Kinect system that controls ventilation and lighting systems to save energy (learn more)
    • In 2013 a team of students from the University of Calgary represented Canada at the World Finals in St Petersburg, Russia. They developed a Kinect system for remote physiotherapy which earned them $10,000. (learn more)

    We just wrapped up the Canadian 2014 Finals and we'll be announcing the winners of the Games, Innovation, and World Citizenship categories shortly! One of the three teams selected will represent Canada at this year’s world finals in Seattle, Washington. At the world finals they will compete against other great teams from around the world.

    blog_meetbillgates_660x360[1]Teams at the worldwide finals will compete for some fantastic opportunities to help them bring their ideas to reality!

    • The Innovation winners receive $50,000 and four weeks in a Microsoft Ventures accelerator program.
    • The Games winners receive $50,000 and a trip to PAX Prime and PAX Dev the game developer conference in Seattle.
    • The World Citizenship winners receive $50,000 and a week at Microsoft global headquarters for a week of intensive sessions curated specifically for the team and their project.
    • One team will win the coveted Imagine Cup trophy and a meeting with a former student who has been both an innovator, an entrepreneur, and a philanthropist: Bill Gates.

    So the next time you start to worry about where the world is headed, take heart, because there are talented, passionate students around the world all working hard to make a difference! Here’s a small peek into the passion and excitement that is Imagine Cup!

     
  • Go DevMENTAL

    Step By Step Displaying Custom or Open data with Windows Phone App Studio for non coders

    • 0 Comments

    Noimage coding required! Want to create an application to share information, but need more than a title, description, and image? In this post you will learn how you can create an app to display Open data or your own custom data with just a browser and without writing a single line of code!

    If you haven’t seen Windows Phone App Studio before you may want to check out our Windows Phone App Studio Resources page for tips to help you get started.

    In this post we will cover

    • Deciding what data to display in your app
    • Creating a new app to display your data
    • Describing your data
    • Entering the data
    • Troubleshooting your data import
    • Displaying the data in your application
    • Adding actions to phone numbers, addresses, and email

    In the post Building an apps for non coders, we explored how you could display Youtube videos, RSS feeds, Bing search results, and basic data in an application. But all our data examples assumed you were content using the basic collection data template which provides fields for a title, subtitle, image and description. You may have different data you want to display.

    In this post we will explore how you can create your own collection pages and specify exactly what fields you want to include.

    Don’t forget if you are in Canada and publish your app before June 1,2014 you can earn rewards through the Developer Movement!

    Deciding what data to display in your app

    Business data

    My sister is co-founder of a running group that helps people train for anything from a 5 km race to an iron man triathlon. She shares running tips, suggested races, as well as details on upcoming clinics. An app would be a great way to share this information with her current runners, and new potential customers.

    Any data you own

    My husband is quite the chef, he makes a myriad of fabulous dishes. Due to popular demand from friends and family. He has created a Word Document of his best recipes. Every year we add a few new recipes and distribute it. When I describe his awe inspiring and tasty tiramisu recipe inevitably I am asked for the recipe. My husband’s recipes would make a great basis for an application, because anyone who wants his recipes could just download the app, and I can add new recipes as they come along.

    Open Data

    If you are not familiar with Open Data, it’s a pretty simple concept, cities and governments and various agencies provide access to data files on everything from parking lots, to election results, to water quality test results. A quick bing search for “Open Data Ottawa, Open Data Australia, Open Data Edmonton” will allow you to find hundreds of different data sets you could use for your application.

    Windows Phone App Studio allows you to import data from CSV (Comma Separated Variable) files. This is significant, because when you look at Open Data websites you will notice that the different data is available in different format. Your life will be easier if the data set you select is available as an Excel spreadsheet or as a .csv file.

    image

    Windows Phone App Studio allows you to import data in a csv file into an application. Excel files can easily be converted to a csv file. In Excel 2013 you would choose File | Export | Change File Type | CSV to save the contents of an Excel file to a csv file. In earlier versions of Excel it might be an option under File | Save as.

    image

    Creating a new app to display the data

    Log in to Windows Phone App Studio, and create a new app using the Empty App Template

    image

    You will see a pop up window with more information about the selected template. Select Create to start building your application

    image

    You now have an application with no pages at all. We saw how to add RSS, Flickr, Youtube, and Bing pages in the post Step By Step How to build an app using Windows Phone App Studio. Now we are going to learn how to add customized data using the collection pages. Add a new Collection page to your app.

    image

    When you add a new collection section:

    Enter a name for your new collection

    Select either static or dynamic resources. This is an important decision!

    • Static resources – your app will work when the user has no internet connection or data connection because the data will be stored within the application itself. The drawback is if you want to put new data in the application, you will have to update the app and publish a new version of the application to the store
    • Dynamic resources – your app will fetch the data from the cloud when the user runs the application. That means you can add new data any time you want and the user will see the new data the next time they run the application. The drawback is the user cannot see the data unless they have internet access.

    Select Create new to start adding the data fields you want to your application.

    image

    Describing your data

    When you click Create new, a blank line will be added to the table where you specify information about the data you plan to display.

    Name – is the name of the field you want to display. The name cannot contain any spaces.

    ColumnType – is the type of data you will display in the field. You can choose between text, song, phone, email, image, artist, album, and address. Most of your data will probably be text, however, selecting specific column types can give you the ability to provide additional functionality to your application. For example:

    • Address –Gives the user the ability to tap a field and see the address on a map
    • Email – Gives the user the ability to tap on that email address and send an email to that user
    • Phone – Gives the user the ability to tap on that phone number and place a call to that number

    Multiline – indicates if the data displayed in this field may wrap across multiple lines on the screen (descriptions, comments, or even long names should have Multiline set to true

    Add a row for each field of data you want to display. I have decided to build an app for Open Doors Ottawa, an annual event where you can visit different interesting buildings across the city. There is an open data set available with the data in CSV format.

    If you are planning to import the data from a CSV or Excel file

    • List the fields in the same order that they appear in your file
    • Make sure the column headings are the same in your import file as they are in your data fields
    • Make sure the CSV file uses semi-colons to separate the data (further down in this guide, within the importing data troubleshooting tips the steps to change from “,” to “;” for a CSV file are listed)
    • Do a search within your data for “;” characters which might be misinterpreted as field separators and replace them with a different character.

    image

    Entering the data

    After you have listed all your fields it is time to add the data itself. To do that, save your changes and then select Edit Data.

    image

    Now you have two ways to specify the data to display in your app.

    Type the data in manually.

    Select Create New to create a new row of data, you will see all the fields you defined listed. Just type in values for each of the fields. Each time you want to add a new row, select Create new again. Select Save every few rows, just in case you make a data entry error. It’s easier to figure out which of 3 rows has the error than which of 30 rows has the error.

    image

    Import the data from a CSV file

    Often it is easier to import the data from a CSV file. You could type the data into an Excel Spreadsheet and then save it as a CSV file to import, or you could use an existing CSV file from a system or open data set.

    I have a CSV file showing all the locations for the Ottawa Open Doors event that I downloaded from the City of Ottawa open Data site. I have deleted a few columns of data I don’t wish to display in the app.

    When I start, my spreadsheet looks like this. Over the course of developing the app I may delete columns I don’t want to display, or reformat some fields.

    image

    I save it as a CSV file using the Export feature in Excel 2013.

    image

    I select Import Data from a CSV file

    image

    Because the first row of my file contains column headers I move the slider to indicate the first row is header information and not data.

    Then I select Confirm

    image

    I see the Windows Explorer open so I can navigate to and select the .csv file containing the data I want to import then select Open.

    image

    NOTE: If your file contains a lot of data, be patient! You may spend a little time staring at the screen with the Confirm button while the data is loaded. You may want to create a test file with only two or three rows of data and make sure you can import that before you try to import all your data.

    If you are lucky your screen will come back showing the data nicely loaded correctly in each field, something like this:

    image

    Troubleshooting your data import

    Do your column headers match the column names in the application?

    If you have column headers in your CSV file the column names must match the names of the columns you created in the application. If not you will see empty rows imported with no data displayed.

    Is your data separated by commas or semi-colons?

    If you are like me, you may find that you just get a bunch of blank rows instead! If that happens, chances are your CSV file is using commas instead of semi-colons to separate the fields. That is what happened to me. I had to use Delete All rows to delete the blank rows and try again.

    To check if your CSV file is using commas or semicolons you can browse to the file in Windows Explorer. Right click on the file and choose Open With | Notepad.

    image

    When I opened my file I discovered that commas were used to separate the fields. The Windows Phone App Studio tool expects semi-colons. That’s why I seem to end up with a table of empty rows.

    image

    After a little digging, I discovered Excel decides whether to use commas or semi-colons based on your Regional Settings in Control Panel. So I had to open Control Panel and select Clock, Language, and Region.

    image

    Then I select Change date, time, or number formats from the Region settings.

    image

    Then select Additional settings to reach the property that controls list separators

    image

    Now you can change the List separator to a semi colon

    image

    Now save your CSV file in Excel again and try once again to import the file.

    Data is imported but not lined up in fields properly

    Once I got my CSV file formatted correctly with semi-colons as separators I imported the data but I could see that the data was sort of messed up. The values in the start time field are obviously NOT start times.

    image

    When I open up my data I discovered that my original data contained some special characters, including semi-colons. So I have to use <CTRL><F> search and replace in Excel to replace those semi-colons with something else so that the semi colons that happen to appear in my data are not interpreted as field separators.

    In my case double quotes were appearing as the string “&quot;” within my data file so all I did was replace all occurrences of &quot; with a double quotes symbol.

    image

    You import the data and it looks like nothing happened

    Sometimes I select a file to import and I am brought back to the screen and it looks like nothing happened at all: no error messages, no data imported, just a blank screen with no data.

    image

    I suspect this is some sort of time-out issue, because what I discovered was if you return to the previous screen by selecting the arrow beside Edit Collection Data and come back again it works. You might be prompted to log in when you switch between screens (that’s why I think it may be some sort of time-out)

    Displaying the data in your application

    Now that you have the data loaded you can Save your changes and add pages to your application to display the data.

    Return to the main sections editor page and select Edit for the collection that now contains data.

    image

    This will bring you to the section editor.

    When a user views a section the first page they see is a list of all the records available. In my case it would be a list of all the different buildings you can visit during Open Doors Ottawa. Then you would navigate to another page or pages to see the details about that specific building.

    The first page layout you must design will be the page that lists all the records. You have to decide which layout you like. After you pick a layout, then you have to decide which fields from the record will be displayed in the list using the Bindings.

    image

    After you select a layout and set your bindings, you can see how the page will appear in the preview

    image

    When a user selects a particular entry from the master page they will be brought to the detail pages. Now we have to add the detail pages to provide more information about the building selected. Select the “+” symbol in the Pages to add a new detail page.

    image

    After you add a detail page, choose a layout, and use the Bindings to specify what data will be displayed on the page. In the example below I have created a page to show a description of the building. Ignore the Action fields for now. We will examine that a little later.

    image

    You can add additional detail pages to display the remaining information, I have added pages for the location, hours, and contact information.

    Remember when I was picking the column types for my fields? I mentioned certain fields provide additional functionality to the user! On my address page I display the address field which is stored in a field with the Address Column Type. On my contact page I display a phone number and an email address which are stored in fields with the Phone and Email Column types respectively.

    Let’s see how this app would now appear to a user

    image image image

    Adding actions to phone numbers, email and addresses

    Now I want to add a little more functionality! Remember how I mentioned when we chose our column types, that certain column types would allow us to let the user tap on the fields to perform actions? Well I have a Phone number, and Address and an email address. So I am going to add Actions to those fields in the application in the detail page editor.

    image

    Now when I go to the Location and Contact pages, the user sees additional icons. If they select the field beside the icon the application will perform the action I defined in the detail pages (call the number, look up an address, or email a contact)

    image image

    Don’t forget you can edit the colors, theme, add a background photo, add options like Share, pin, and read text to your application as well. This is documented in the Step By Step how to create an application in Windows Phone App Studio so I won’t repeat everything here!

    You now have the ability to build and publish useful applications for Windows Phone 8 (and Windows 8 as well since Windows Phone App Studio now generates both but more on that in another post!)

    Don’t forget if you are in Canada and publish your app before June 1,2014 you can earn rewards through the Developer Movement!

  • Go DevMENTAL

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

    • 5 Comments

    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)

    image

    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.

    image

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

    image

    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.

    image

    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.

    image

    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.

    image

    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.

    image

    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.

    image

    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.

    image

    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.

    image

    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).

    image

    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ù.

     

    image

    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.

    image

    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.

    image

    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.

    image

    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.

    image

    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.

    image

    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.

    image

    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.

    image

    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.

    image

    TextToSpeech

    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.

    image

    ShareText

    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

    PinToStart

    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

    image

    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.

    image

    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.

    image

    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.

    image

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

    image

    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.

    image

    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.

    image

    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.

    image

    Donnez un nom à la section.

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

    image

    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.

    image

    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.

    image

    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.

    image

    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.

    image

    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

    image

    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.

    image

    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

  • Go DevMENTAL

    Step by Step Apps for non coders – Publishing to the Store

    • 0 Comments

    clip_image001

    Windows Phone App Studio gives you the ability to build an app in your browser without any coding.

     

    NOTE: This tutorial is intended for developers who have completed an app with Windows Phone App Studio. If you are new to the tool you may want to visit our Windows Phone App Studio resources page for instructions to help you get started. It is recommended you complete that tutorial before continuing with this one!

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

    So you’re finished creating your app – congratulations! Now you can move on to publishing. This tutorial will show you how to capture the screenshots you’ll need to publish your app, and will show you how to publish your app in the Windows Phone Dev Center. In the previous tutorial we built an app for Manotick. This tutorial uses an app I created for Halifax, Nova Scotia, so the app will look different, but the steps will work for any app you’ve created.

    NOTE: the images in this post are a bit small – a document with larger images is available for download here.

    Let’s begin!

    Generating the App Publishing Files

    First, open up the app you want to publish in the Windows Phone App Studio browser. It doesn’t matter what page you’re on. Press the FINISH button, shown below:

    clip_image003

    This will take you to a page where you can GENERATE your app packages. You’ll notice that there is a section labelled “Previous versions” – currently this is blank, because this is the first version you have created.

    clip_image005

    When you click Generate, a pop up will appear that gives you two options. The left option will give you a publishable .XAP file that you can use to publish your app for Windows Phone 8.0. The right option is a preview of a feature currently being developed – it will give you three versions of a Windows 8 app and a demo on how to share code between Windows 8 and Windows Phone. This is still in preview, so if you don’t know how to code, do not select this option.

    clip_image007

    clip_image008

    Once you’ve generated your app, you will see a version listed in the “Previous versions” section. Now, in the main body of the page, you will see three major options:

    · Download package – choose this option if you want to download your app to your own phone only. This is useful if you want to use your app yourself without publishing to the store, or if you want to see how it works on your phone before publishing it.

    · Download publish package – choose this option to go straight to publishing without changing your code or taking screenshots. If you do not have Visual Studio, this is the option you should take.

    · Download source code – choose this option if you want to edit your code or take screenshots using an emulator.

    Capturing Screenshots for Publishing

    At this point, we are going to choose to download the source code, so we can use the emulator to take screenshots to publish with our app in the store. NOTE: if you do not have Visual Studio, download the free trial version HERE.

    clip_image010

    Once you select this option, you will see the following popup. Select Download and when prompted, select “Save and open” to view the files.

    clip_image012

    Then, extract the files to a place you can easily find them. I like to create a new folder in Visual Studio > Projects.

    clip_image014

    Once you’ve extracted it, double click on the solution (the only item that is not a folder, it should be labeled “App”) to open your app in Visual Studio. At this point you may get a popup asking if you trust the source – this is because you downloaded the file and didn’t create it on your own computer. No worries, just uncheck the box (because yes, we trust Windows phone App Studio) and press OK.

    clip_image016

    If you’re not familiar with Visual Studio, the solution will look like garbled text. Don’t worry, we’re just going to run the phone emulator to get screenshots! Click on the little drop down arrow to get a list of available emulators.

    clip_image018

    There are a few options. For the highest resolution screenshots, choose Emulator WXGA.

    clip_image019

    Once you’ve selected it, click on the green arrow. The emulator will take a little while to load, just be patient! You’ll notice that it displays way larger on your screen than the actual size of a phone. In my case, it’s larger than the height of my laptop screen – but that’s okay, we’ll use the screenshot tool within the emulator to get our screenshots. As shown below, click the double arrows on the emulator tool bar for more tools, where you’ll find the screenshot tool.

    clip_image021

    We’re going to take a few screenshots for our app, one for each page type. Simply navigate through your app so the emulator displays what you want to capture, then press the capture button as shown below.

    clip_image023

    Once you’ve captured a screenshot, check the preview to make sure you’re happy with it. Save and repeat until you have as many as you want!

    clip_image025

    Then go ahead and close the emulator, and close Visual Studio.

    Publishing Your App

    Before we head to the final steps, we need to download the .XAP file for your app. To do so, go back to the Generate page in Windows Phone App Studio and select “Download publish package”. Save this file to an easy-to-find place.

    clip_image027

    Now you have all the tools to publish your app! Next you need to create an Windows Phone Dev Center account. If you are a student, you can get one for free through DreamSpark. If not, you’ll have to pay a registration fee of $20. We won’t look at the exact steps in this tutorial, but you can create an account here!

    Once you’ve registered and logged in to your account, go to the Dev Center home page and click on “Submit an App”.

    clip_image029

    This button takes you to the publishing steps page, where you can see a list of required and optional steps. In this tutorial we’ll only do the two required steps. First, let’s do step 1, inputting app info.

    clip_image031

    Input all the basic info for your app. In this case, here is the data for the Halifax app:

    clip_image033

    We’re just going to go with a free version for this app, but if you want to add a price you’ll have to input your personal banking information so you can get your profits.

    Selecting More Options will give you a bit more customization, but these only apply if you want to change your distribution channels or when it publishes. For most apps, these options can be left as default.

    clip_image035

    When you’re ready, press Save and you’ll be taken back to the Steps screen.

    clip_image037

    Next select Step 2 to upload your package.

    clip_image039

    This will take you to a page where you can upload your package. Remember the .XAP file we saved earlier? That’s the one! Select “Add new” to upload it. And when that’s done, click Save

    clip_image041

    clip_image043

    Now it’s time to fill in the details about your app. What language? What version?

    clip_image045

    What does your app do? What subjects or topics does it relate to?

    clip_image047

    Next you have to upload the related images. Upload your app icon first, and make sure it is exactly 300px by 300px, otherwise it won’t upload properly. Add a promo image if you want, too.

    clip_image049

    Here’s where our screenshots come in handy! Select the + to add up to eight screenshots of your app.

    clip_image050

    When you’re ready, click Save at the bottom of the page. You’ll be brought back to the Steps page, where you can go through the optional steps if you want to add ads to your app, set the pricing options for different markets worldwide, or get the map token you need if you developed an app using a map. Since none of those features apply to this app, we’ll just click “Review and Submit” to go on to the last step!

    clip_image051

    Now, review your app details and, if you’re happy with it, press Submit! If you want to make changes, select “Go back and edit”.

    clip_image053

    Congratulations! You’ve now submitted your first app to the app store, without ever touching any code!

    clip_image055

Page 3 of 82 (409 items) 12345»