Plan du site  
français  English
pixel
pixel

Articles - Étudiants SUPINFO

Qu'est ce qu'une Application Universelle Windows ?

Les UWA sont un nouveau type d'application ayant pour ambition de créer une rupture dans la manière d'utiliser des applications ; répondant à de nombreux critères d'ergonomie, centrées sur leur contenu et promettant une même utilisation sur de nombreux supports : ordinateur fixe et portable bien entendu, mais également tablette, téléphone portable, Xbox, Surface Hub et même les HoloLens, un casque de réalité augmentée.

Dans ce cours, vous découvrirez la plateforme universelle Windows ou UWP et apprendrez à développer de A à Z une application universelle en ciblant les trois principaux marchés actuels : l'ordinateur, la tablette et le smartphone.

Origines

Les applications universelles sont apparues pour la première fois dans Windows 8 (par le biais du Windows Runtime ou Windows RT). Elles étaient avec leurs icônes carrées (les "Tuiles", ou "Tiles" en version anglaise), leur design plat (Flat Design) très en vogue aujourd'hui et leur plein écran, une véritable révolution qui a bousculé les codes de l'époque. Si le changement des habitudes utilisateur est toujours un épineux problème dans le domaine de l'ergonomie, le design appelé Metro puis Modern UI est aujourd'hui pleinement rentré dans les habitudes des utilisateurs.

Figure 1.1. Un exemple d'Application Universelle

Un exemple d'Application Universelle

Si l'interface d'alors ressemble à s'y méprendre aux applications universelles d'aujourd'hui, une différence de taille les sépare : les applications Windows 8 n'étaient que peu universelles. Si la structure des projets permettait un partage d'une partie du code, les différentes plateformes étaient régies par un système et une architecture (ARM, 32 ou 64 bits) complètement différents. De plus, si la séparation entre applications Win32 et applications universelles était claire sur ordinateur, SilverLight et UWP se faisaient concurrence dans le domaine du mobile.

Windows 10 et l'avènement de l'universel

A sa sortie, Windows 10 a basé sa communication notamment sur la portabilité de son système et de ses applications. Elle place ainsi l'utilisateur au centre, et celui-ci retrouve l'ensemble de ses données quand il utilise son application, quelque soit les équipements utilisés. Sous le capot, Microsoft a beaucoup remanié UWP et cette plateforme est devenue la fusion de nombreuses bibliothèques de construction d'application, WPF, SilverLight et Windows Phone en tête.

Le principe fort derrière les applications universelles est de fournir une interface unifiée pour continuer l'expérience quelque soit l'équipement utilisé ; l'utilisation est donc décorrelée du média par essence. Aujourd'hui, si de nombreux services s'utilisent aussi bien sur différents équipements (YouTube, Gmail, Facebook, Twitter, ...), il est soit nécessaire de créer une application Web visionnée depuis tous les périphériques, soit de créer une application par support. Microsoft fournit aujourd'hui avec UWP une solution simple mêlant les avantages du code natif au développement unique, et ce sans sacrifier l'expérience utilisateur au passage.

Figure 1.2. Publicité Windows 10 (1er juin 2015)


Les chiffres montrent d'ailleurs une grande évolution depuis mi-2015 : Environ 700.000 applications universelles sur le Microsoft Store avec quelques centaines de nouvelles applications disponibles par jour, pour 400 millions d'équipements fonctionnant sous Windows 10.

Modern UI ou Microsoft Design Style

Le Microsoft Design Style est un changement majeur dans la mise en page et l'affichage des applications Windows, et plus généralement des systèmes Microsoft. Enclenché avec Windows 8, il s'agit du plus grand chamboulement depuis Windows 95 : des applications pensées pour le plein écran, disparition du menu "Démarrer", pensé pour associer le toucher à la souris.

Les applications sont développées avec un nouvel environnement visant tous les ordinateurs, toutes les architectures, tout en se focalisant sur une expérience utilisateur fluide, immersive, une navigation rapide et une gestion de son espace de travail facilitée, tant pour la gestion des données orientée Cloud que pour la gestion des applications avec le Microsoft Store.

Figure 1.3. Fracture entre Windows 95 et Windows 8

Fracture entre Windows 95 et Windows 8

Ces interfaces sont régies par des conventions d'ergonomie et de design que nous allons parcourir plus en détail.

Nous nous intéresserons à trois éléments : la mise en page, la navigation et le contenu. La mise en page se rapporte à l'architecture d'une fenêtre et la hiérarchie de ses éléments constituant la fenêtre de l'application, quand la navigation ne concerne que les contrôles utilisables par l'utilisateur. Le contenu, quant à lui, est l'information que l'utilisateur souhaite afficher.

Mise en page

Dans les précédentes versions de Windows, on remarque une importante place laissée à de nombreux éléments pourtant rarement nécessaires à la bonne visualisation du contenu. Le tour de force de Modern UI est de faire la part belle au contenu que l'utilisateur souhaite visionner et réduire les éléments perturbateurs : contrôles inutiles, barre de statut, effets visuels...

Figure 1.4. A gauche, la mise en page avant le contenu. A droite, le contenu avant la mise en page

A gauche, la mise en page avant le contenu. A droite, le contenu avant la mise en page

Dans les images ci-dessus, on peut noter une forte présence de la mise en page dans la capture de gauche : Une zone démesurée et permanente réservée aux contrôles au sein de la vidéo, une liste de flux à droite certes utile mais non pendant le visionnage d'une vidéo. En haut, on note également de nombreux menus et icônes rendant à la fois leur compréhension et leur utilisation difficiles.

La première règle du design Modern UI est d'immerger les utilisateurs dans le contenu qu'ils aiment, et toujours le mettre au centre selon le contexte de visualisation. Une citation souvent attribuée à Saint-Exupery résume précisément ce concept :

La perfection est atteinte, non pas lorsqu'il n'y a plus rien à ajouter, mais lorsqu'il n'y a plus rien à retirer - Antoine de Saint-Exupéry, Terre des hommes , chapitre III , L'avion. (réflexion sur la machine).

La place ainsi gagnée dans l'application permet d'offrir de l'espace autour du contenu, une zone intentionnellement vide pour permettre à l'utilisateur de se concentrer sur les éléments importants de la page. Parallèlement, il convient de supprimer les bordures et lignes auparavant prévues pour grouper et organiser le contenu.

Pour conserver ce sentiment de structure, on utilise en premier lieu la typographie. Un ensemble de tailles de texte et couleurs permet de hiérarchiser le contenu et la navigation. Les styles offerts par la librairie des applications universelles offrent une expérience commune de navigation qui renforce la facilité d'utilisation.

Figure 1.5. Exemple de tailles de texte renforçant la structure d'une application à gauche, Exemple d'application à droite

Exemple de tailles de texte renforçant la structure d'une application à gauche, Exemple d'application à droite

Il est à noter que cet exemple présente des tailles exprimées en points (pt), ce qui pourrait rendre complexe la mise en place dans une logique universelle. Cependant, cette taille est toujours convertie de manière sous-jacente en Effective Pixels (epx). Cette unité assure un confort optimal de visualisation des éléments quelque soit la densité de pixels de l'équipement. Utiliser cette unité permet également de prendre en compte la distance à laquelle on utilise son équipement.

Figure 1.6. Explication concise du concept d'Effective Pixels (vidéo en Anglais)


Pour renforcer ce sentiment de structure, on utilise également l'alignement vertical et horizontal entre les différents groupes et au sein de ces groupes entre les différents éléments. Dans l'exemple précédant illustrant la typographie, on remarque également les alignements horizontaux entre le bouton "Retour" et le titre, ainsi qu'entre les parties gauche et droite, mais également des alignements verticaux entre la majorité des éléments. On saisit ainsi d'un coup d'oeil la hiérarchie des éléments et leurs regroupements sans briser l'expérience de navigation par des bordures ou des lignes, aussi fines qu'elles puissent être, renforçant les possibilités d'exploration.

Navigation et retours utilisateur

Les pages de votre application doivent présenter en premier lieu à l'utilisateur le contenu qu'il souhaite voir et non où il pourrait naviguer. Ainsi, les éléments de navigation sont présents mais incrustés dans le contenu. L'exploration est plébiscitée au détriment de contrôles figés. Ainsi, il est conseillé aux développeurs de privilégier les fonctionnalités de l'application via des clics/touches sur les éléments, l'utilisation du glisser/déposer ou du défilement plutôt que des boutons.

Pour faciliter l'intégration de la navigation, de nombreuses structures d'application et contrôles associés sont fournies par la librairie. On peut ainsi lister sans exhaustivité les onglets (Pivot), le panneau de navigation rétractable ou non, le Hub, ou le modèle Master/Details. Ces choix de mise en page reviennent au designer de l'application et sont autant d'outils pour en faciliter son exploration.

Notons également la présence du bouton "Retour" incrustable directement dans le bandeau de l'application, offrant une expérience unifiée entre toutes les applications.

Nous reviendrons sur ces éléments de navigation ultérieurement dans ce cours au moment de leur implémentation.

La navigation et les actions utilisateur sont également mises en valeur par le biais d'animations. En effet, il est indispensable pour une expérience utilisateur satisfaisante d'indiquer la bonne prise en compte d'une action (clic ou toucher, glisser/déposer, suivi d'un lien, ...). La bibliothèque application universelle propose ainsi automatiquement des animations pour tout événement utilisateur, donnant vie à l'application à travers le mouvement.

Les animations étant fournies, elles permettent également de renforcer la cohérence et une continuité entre les applications pour rassurer l'utilisateur quant à la bonne réception d'une action. On peut lister l'entrée/sortie d'une page, l'ouverture/fermeture d'un panneau, le défilement, le glisser/déposer, le clic ou toucher, mais il en existe bien d'autres. Il est de surcroît possible de créer ses propres animations pour des comportements spécifiques à votre application.

Figure 1.7. Exemple d'animations UWP

Exemple d'animations UWP

Contenu

Le contenu, comme dit précédemment, est le centre de l'application. Tout dans l'application doit donc servir le contenu qu'elle affiche. Par exemple, dans une application de modification de photo, la photo est le contenu. Dans une application de lecture, le texte est le contenu.

Et si les applications sont toutes variées tant dans leurs objectifs que leurs usages, on peut présenter trois scénarios liés au contenu :

  1. Consommation : Regarder une vidéo, écouter de la musique, lire... Si la navigation est possible, l'échange est majoritairement unilatéral de l'application vers l'utilisateur.

  2. Création : Modifier une photo, dessiner, écrire un document... L'échange, s'il est également majoritairement unilatéral, il l'est cette fois de l'utilisateur vers l'application.

  3. Interactif : Jouer à un jeu, échanger sur une messagerie instantanée, applications business... L'échange est bilatéral et est autant de fournir du contenu à l'utilisateur qu'à l'utilisateur de créer celui-ci.

Selon ces scénarios, l'ergonomie générale de l'application peut s'en trouver transformée :

  • Pour une application de consommation, il est souvent préférable de créer des pages dédiées à la navigation et d'autres à la lecture, tout en profitant des bénéfices liés au bouton "Retour", afin de limiter les distractions et offrir un confort de lecture maximal.

  • Pour une application de création au contraire, les commandes sont tout aussi importantes que le contenu ; on imagine mal devoir quitter l'édition d'une photo pour changer d'outil !

  • Enfin, pour une application interactive, il est nécessaire de prendre le temps de définir les modèles de données pour en extraire des scénarios d'utilisation performants car dans ce cas, la navigation, le contenu et les commandes offertes à l'utilisateur sont d'égale importance.

[Note]

Ces conseils de contenu seront mis en pratique dans la suite du cours au travers d'un exemple de réalisation d'application de consommation.

Universalité

Ces trois notions précédemment abordées, la mise en page, la navigation et le contenu, sont fonction du terminal utilisé. En effet, les ordinateurs, tablettes et smartphones (sans parler du casque HoloLens) ne s'appréhendent pas de la même manière et conséquemment, ne peuvent souvent pas avoir la même mise en page. Les zones d'interaction et de lecture ne sont par exemple pas les mêmes, comme le montre le schéma ci-dessous :

Figure 1.8. Schéma d'usabilité

Schéma d'usabilité

Ainsi, il sera parfois nécessaire d'adapter les visualisations aux terminaux. Heureusement, les applications universelles peuvent facilement s'adapter au terminal et donc être adaptatives ("responsive" en anglais), mais également décliner les affichages pour chaque terminal en cas de modification substantielle.

Ces modifications sont contenues dans une terminologie qu'on appelle "6R" : Reflow, Resize, Reposition, Reveal, Replace et Re-Architect. Ces terminologies sont propres au monde de l'expérience utilisateur (UX) et dépassent le cadre de ce cours. Vous pourrez cependant trouver plus d'informations en lisant la documentation officielle ou en visionnant cette vidéo sur le site CodeChannel.

Figure 1.9. Exemple de ré-architecture

Exemple de ré-architecture

Comment créer une application universelle ?

Ce type d'applications se base sur le framework .NET, et à ce titre, différents langages sont proposés. On retrouve ainsi C#, VB.NET et C++ avec XAML pour la partie de création d'interface, mais également le duo HTML/JavaScript via l'API WinJS et Chakra, le moteur JavaScript de Microsoft. Les langages précités sont bien connus des développeurs de tous horizons, tant par le développement d'applications Win32, Unity ou de sites internet, qu'ils soient réalisés en ASP.NET ou en HTML/JavaScript.

Ce cours s'orientera vers le duo XAML/C# et nécessitera donc une connaissance de ces langages. Si vous n'y êtes pas familiers, nous vous recommandons notre cours 2NET.

Pour développer et tester, il sera nécessaire d'utiliser un ordinateur avec Windows 10, Visual Studio 2015 avec le SDK Windows 10. L'IDE de Microsoft vous offre de nombreuses possibilités allant du contrôle de version à l'émulateur des différentes familles d'équipements ciblées par les applications universelles, en passant bien sûr par IntelliSense, le système d'auto-complétion intelligent.

Bien que non couvert par ce cours, il est important de mentionner Microsoft Blend, un logiciel de création graphique pour vos applications.

Vous pourrez retrouver Visual Studio 2015 dans notre espace réservé aux Advanced Members http://www.campus-booster.net. Le SDK Windows 10 quant à lui est accessible pendant l'installation comme le montre cette capture d'écran :

Figure 1.10. Installation des outils de développement UWA

Installation des outils de développement UWA

Une fois installé, il vous suffit de créer une nouvelle application universelle. Pour ceci, rendez-vous dans le menu

"Fichier" -> "Nouveau" -> "Projet"

et sélectionnez "Windows" -> "Universal", comme le montre la capture d'écran suivante :

Figure 1.11. Création d'un nouveau projet

Création d'un nouveau projet

Si le détail de la structure d'une application universelle sera traité ci-après, on peut dès à présent noter l'ensemble des possibilités de test de celle-ci dans les menus déroulants ciblant différentes architectures et différents équipements : ARM, x86 (32-bit), x64 (64-bit), avec pour chacun la possibilité de cibler tantôt un Windows Phone connecté à l'ordinateur, l'ordinateur local lui-même, un ordinateur distant, ou une palette extensibles d'émulateurs, de toutes résolutions et performances.

Figure 1.12. Exemple d'émulateurs utilisés dans les applications UWP

Exemple d'émulateurs utilisés dans les applications UWP

Structure d'une application universelle

Une application universelle est constituée à la création des éléments suivants :

  • Solution : En créant un nouveau Projet au sein de Visual Studio, on crée automatiquement une Solution. Cette Solution peut contenir un ou plusieurs projets intimement liés. Par exemple, il fait sens de mettre au sein d'une seule et même solution une application Web et son application mobile, car elles traitent toutes deux du même sujet. De plus, un projet peut être une base de code commun partagée dans toute la solution.

  • Projet : Inclus dans la solution, un projet est un ensemble fini de code, contenant la totalité du code spécifique à celui-ci. On peut citer dans notre exemple précédent, un projet pour l'application Web et un projet pour une application universelle.

Au sein du projet, on trouve les éléments suivants :

  • Les propriétés : Elles contiennent notamment le fichier AssemblyInfo.cs qui précise toutes les informations du projet.

  • Les références : Une liste de bibliothèques de fonctions liées au projet. Dans un nouveau projet, on ne note que "Universal Windows", la bibliothèque contenant tous les outils pour développer une application universelle.

  • Le dossier "Assets" : Contient toutes les images du projet.

  • App.xaml : Contient l'ensemble des ressources XAML partagées du projet. Il est majoritairement utilisé pour définir un style commun pour l'application. A noter que le fichier App.xaml.cs est le point d'entrée de votre programme.

  • NomDuProjet_TemporaryKey.pfx : Contient le certificat temporaire du fichier pour définir sa signature et sa provenance. En cas de publication sur le Store, il faudra le remplacer par un certificat permanent.

  • MainPage.xaml : La page principale de votre application où tout reste à construire !

  • Package.appxmanifest : Le manifeste de l'application contenant toutes les méta-données de celle-ci. On peut ainsi lister les icônes, les permissions demandées, le nom affiché de votre application, les familles d'équipement qu'elle cible (Mobile, Ordinateur, ...)

  • project.json : Lié au gestionnaire de package NuGet, il définit les dépendances et librairies utilisées dans votre projet ainsi que leurs versions.

Application "Hello World"

Pour réaliser une application "Hello World":

  1. Créez un nouveau projet et appelez-le "HelloWorldApp"

  2. Double-cliquez sur la page "MainPage.xaml"

  3. Utilisez la barre d'outils disponible à gauche et déplacez un élément TextBlock dans la fenêtre intitulée "Design" représentant la page, ou copiez dans la partie XAML au sein de la balise Grid le code suivant :

    <TextBlock x:Name="textBlock" HorizontalAlignment="Left" Margin="148,355,0,0" 
            TextWrapping="Wrap" Text="Hello World!" VerticalAlignment="Top"/>
  4. Sélectionnez à votre convenance un environnement de test, qu'il soit de la famille des smartphones ou votre ordinateur.

  5. Cliquez sur l'icône "Démarrer" ou appuyez sur la touche F5

Figure 1.13. Application Hello World : Exemple de rendu

Application Hello World : Exemple de rendu

Félicitations, vous venez de créer votre première application universelle ! Dans le prochain chapitre, nous détaillerons la majorité des contrôles constituant une UWA, ainsi que le pendant C# de chaque vue, le "Code-Behind".

About SUPINFO | Contacts & addresses | Teachers | Press | INVESTOR | Conditions of Use & Copyright | Respect of Privacy
Logo de la société Cisco Logo de la société IBM Logo de la société Sun-Oracle Logo de la société Apple Logo de la société Sybase Logo de la société Novell Logo de la société Intel Logo de la société Accenture Logo de la société SAP Logo de la société Prometric Logo du IT Academy Program par Microsoft

SUPINFO International University is globally operated by EDUCINVEST Belgium - Avenue Louise, 534 - 1050 Brussels
and is accredited in France by Association Ecole Supérieure d'Informatique de Paris (ESI SUPINFO)