Utilisation des contrôles HTML pour créer des applications de style Metro pleinement réussies

Blog des développeurs d'applications Windows 8

Indications sur la conception d'applications de style Metro pour Windows 8, par l'équipe d'ingénierie de Windows 8

Utilisation des contrôles HTML pour créer des applications de style Metro pleinement réussies

  • Comments 0

Avec Windows 8, vous pouvez utiliser HTML pour créer des applications de style Metro. Vous ne réalisez peut-être pas qu'en utilisant directement les contrôles HTML, vous bénéficiez automatiquement de la nouvelle expérience Windows 8. Nous avons travaillé en HTML afin que vous puissiez créer des applications solides et tactiles tout en conservant la flexibilité que confère l'utilisation de HTML. Nous voulons que vous puissiez créer rapidement et efficacement des applications hors du commun.

Tout particulièrement, il est important que vous puissiez continuer à bénéficier des contrôles HTML courants, tels que <button> afin de mettre au point de fabuleuses expériences Windows 8 en vous appuyant sur vos connaissances. Cela est possible avec Windows 8, grâce aux nouvelles implémentations des contrôles HTML standard qui intègrent les expériences Windows 8. Par défaut, tous ces contrôles standard présentent la nouvelle apparence de Windows 8, une formidable expérience tactile et une prise en charge solide de la localisation et de la globalisation. En utilisant ces contrôles HTML standard, vous pouvez créer de formidables applications de style Metro que vos clients aimeront, tout en conservant la flexibilité attendue de HTML.

L'équipe Windows 8 souhaite qu'il soit aussi facile que possible de créer de formidables applications que vos utilisateurs aimeront utiliser. Comme étude de cas, nous prenons un des contrôles les plus simples, <button>, et regardons de façon détaillée comment le contrôle <button> dans Windows 8 améliore votre productivité. Avec les conseils et astuces abordés dans ce billet, nous vous aiderons à tirer le meilleur parti de HTML pour Windows 8 afin de créer une application de style Metro extraordinaire.

Le bouton Windows 8

Vous connaissez peut-être déjà certaines de nos recommandations en matière de conception d'une application de style Metro réussie :

  1. Appliquer l'apparence du style Metro
  2. Concevoir pour le tactile
  3. Coder avec les fondamentaux à l'esprit (par exemple, la globalisation et l'accessibilité)
  4. Être rapide et fluide

Les contrôles HTML actualisés dans Windows 8 vous aident à suivre librement ces recommandations en matière de conception, car nous voulons que vos applications adoptent le puits du succès :

Le puits du succès : Contrairement à l'ascension d'un sommet ou d'un pic abrupt, ou d'un voyage à travers un désert pour arracher une difficile victoire après un parcours semé d'embûches, nous voulons que nos clients adoptent simplement les bonnes pratiques en utilisant notre plateforme et nos infrastructures. Dans la mesure où nous facilitons les situations difficiles, nous sommes inévitablement voués à l'échec.

-Rico Mariani, architecte partenaire sur Internet Explorer

Examinons maintenant comment le contrôle <button> contribue au succès de vos applications et leur permet d'adopter naturellement les caractéristiques d'une application de style Metro réussie.

Appliquer l'apparence du style Metro

Nous souhaitions vous permettre de créer facilement une interface utilisateur avec la conception de style Metro tout en vous procurant la flexibilité et la puissance nécessaires pour personnaliser cette apparence selon les besoins et la marque unique de votre application. Si vous avez essayé de créer une application Windows 8 avec JavaScript et HTML à l'aide des modèles VS, vous avez remarqué que tous les contrôles HTML standard, tels que <button>, intègrent par défaut la conception de style Metro, comme on le voit ici :

<button>Windows 8 Rocks!</button>

 

Bouton par défaut dans Internet Explorer 10
Figure 1 : bouton par défaut dans Internet Explorer 10
Bouton dans les applications Windows 8 de style Metro

Figure 2 : bouton dans les applications Windows 8 de style Metro

Comment cela fonctionne-t-il en arrière-plan ? Windows 8 a apporté deux améliorations : nous avons d'abord amélioré les fonctionnalités de style fournies pour les contrôles HTML, tels que <button>, pour accroître votre flexibilité via CSS afin de fournir des visuels pour les différentes parties et les états visuels que vous voyez dans les contrôles. Ensuite, nous avons fourni des visuels de style Metro par défaut pour tous les contrôles HTML via deux feuilles de style par défaut intégrées, qui font partie de la bibliothèque Windows pour JavaScript (WinJS) et qui sont incluses par défaut dans tous les modèles VS.

Infrastructure des nouveaux contrôles HTML

Nous avons modifié la façon dont les contrôles sont conçus pour vous donner plus de souplesse quant au style des contrôles. En fait, nous utilisons les mêmes améliorations de style pour définir l'apparence par défaut de tous les contrôles HTML dans Windows 8.

La plupart des navigateurs rendent actuellement les contrôles à l'aide des images générées précédemment. Lorsque vous appliquez un style à un contrôle, le navigateur ignore l'image codée en dur, rend de nouveau le contrôle avec un aspect basique simple, puis applique le style que vous voulez par-dessus.

Pour le contrôle <button>, vous pouvez voir que même si vous n'avez appliqué qu'une couleur d'arrière-plan, le deuxième bouton comporte maintenant une bordure avec un aspect biseauté en 3D. Cette bordure en 3D fait partie de l'aspect basique :

<button>Normal</button>

<button style="background-color: red;">Styled</button>

Application d'un style au bouton

Figure 1 : bouton normal et bouton stylisé dans Internet Explorer

L'aspect par défaut via l'image codée en dur est limité en termes de style. Vous ne pouvez pas simplement styliser directement avec les nouveaux styles et il n'est pas immédiatement évident de savoir ce qui va arriver au style lorsque vous appliquez un style à une image bitmap générée précédemment. Par conséquent, Windows 8 ne fournit plus l'aspect d'origine des contrôles HTML via une image codée en dur. Nous avons entièrement recréé tous les contrôles HTML pour qu'ils soient rendus avec des primitives vectorielles, CSS, pour vous permettre d'appliquer directement un style sur le contrôle.

Nous avons ajouté la possibilité d'accéder aux parties internes des contrôles. Pour un contrôle, tel que la case à cocher, vous pouvez sélectionner la coche interne à l'aide des pseudo-éléments -ms-check et styliser cet élément interne séparément de la case.

input[type=checkbox]::-ms-check
{
background-image: url("myCheckMark.svg");
}

Pour voir la liste complète des parties que nous avons ajoutées aux contrôles HTML, consultez Démarrage rapide : application de styles aux contrôles (applications de style Metro en JavaScript et en HTML).

Si vous utilisez de façon un peu plus poussée les styles CSS, vous pouvez maintenant bénéficier de styles très intéressants qui n'existaient pas auparavant.

Case à cocher
Figure 2 : exemples de cases à cocher stylisées

Regardez cet exemple de contrôles HTML courants et consultez Démarrage rapide : application de styles aux contrôles pour en savoir plus.

Le fait que nous ayons créé tous nos contrôles à partir de primitives CSS présente un autre avantage : une très bonne mise à l'échelle. Cela est particulièrement important, car Windows 8 prend en charge un riche écosystème de périphériques et il est impératif que les contrôles s'adaptent à toutes les résolutions d'écran et tous les PPP.

L'utilisation des primitives CSS permet à tous nos contrôles de s'adapter automatiquement et de s'afficher plus nettement sur toutes les résolutions d'écran et tous les PPP.

Boutons vectoriels (petit, moyen et grand)

Figure 3 : les images CSS tracées restent nettes dans chaque résolution

Ainsi, si vous choisissez de personnaliser vos contrôles, continuez à utiliser une technologie vectorielle, telle que les primitives CSS ou SVG. Avec les images raster, les pixels seront visibles sur les contrôles mis à l'échelle et votre application ne sera pas aussi esthétique sur tous les périphériques Windows 8.

Petit bouton raster flouFigure 4 : l'image est floue lorsqu'elle est réduite
Grand bouton raster avec apparition des pixels

Figure 5 : les pixels sont visibles sur l'image lorsqu'elle est agrandie

Pour en savoir plus sur la gestion de la mise à l'échelle, consultez cet exemple de mise à l'échelle SDK.

Internet Explorer 10 et HTML pour Windows 8 partagent la même plateforme HTML. Cela signifie que tous les contrôles HTML pour Internet Explorer 10 sont également créés avec CSS et les pages Web, de sorte qu'ils peuvent également s'adapter à différentes résolutions d'écran et différents PPP dans Windows 8 !

Apparence de style Metro par défaut

Nous fournissons la nouvelle apparence de style Metro de tous les contrôles grâce à une feuille de style CSS. Nous souhaitons montrer de manière transparente comment la nouvelle conception de style Metro est implémentée et vous permettre d'y intégrer votre propre marque, par exemple en modifiant les couleurs des contrôles afin d'utiliser le modèle de couleurs de la marque de votre application. Profitez de cette flexibilité ! Voici un lien vers un exemple d'éditeur de thème SDK qui permet de colorier facilement les contrôles.

Maintenant, pour obtenir l'apparence par défaut, il suffit de choisir une des deux feuilles de style par défaut. La seule différence entre elles est le modèle de couleurs sur lequel elles sont basées. ui-dark.css contient les contrôles de couleur les mieux adaptés à un arrière-plan foncé et ui-light.css renferme les contrôles de couleur les mieux adaptés à un arrière-plan clair. Pour les applications qui affichent principalement des images ou des vidéos, nous recommandons d'utiliser la feuille de style foncée et pour celles qui contiennent beaucoup de texte, nous conseillons d'utiliser la feuille de style claire. (Si vous utilisez un modèle de couleurs personnalisé, utilisez la feuille de style qui convient le mieux à l'apparence de votre application.) Pour choisir un modèle de couleurs, référencez simplement une de ces feuilles de style dans votre projet à l'aide de ce code HTML :

<head>

<!-- Dark Style Sheet reference -->

<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet">

<!-- or Light Style Sheet reference -->

<link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet">

<!—Other header content -->

</head>

Le meilleur moyen de savoir comment appliquer et utiliser le style par défaut est d'ouvrir la feuille de style CSS par défaut et de regarder les styles CSS qu'elle contient.

Si nous revenons à l'exemple du bouton du début, si vous avez la même ligne de code que celle que nous avons vue précédemment dans une application de style Metro, voici ce que vous obtenez maintenant :

ButtonCSS

Figure 6 : bouton normal et bouton stylisé

Dans les applications de style Metro, seuls les styles que vous avez appliqués sont maintenant remplacés. Vous pouvez facilement personnaliser votre application tout en conservant la nouvelle apparence du style Metro.

Comme vous pouvez le voir, vous pouvez maintenant mieux styliser vos contrôles et ces derniers s'adapteront plus nettement à plusieurs résolutions d'écran et PPP. Nous voulons que vous puissiez appliquer plus facilement l'apparence souhaitée à votre application, sans écarter l'apparence du style Metro.

Concevoir pour le tactile

Pour vous aider à créer des applications réussies, nous voulions simplifier la création d'une interface utilisateur qui fonctionne avec le tactile, le clavier et la souris et qui donne à vos utilisateurs l'ensemble des interactions qu'ils peuvent effectuer de manière cohérente dans tout le système.

De nos jours, les contrôles HTML assurent déjà une compatibilité optimale avec le clavier et la souris. Comme le tactile est un nouveau mode d'interaction, il était nécessaire d'améliorer la prise en charge tactile sur tous les contrôles HTML. Pour optimiser votre code, vous devez d'abord comprendre les défis propres au tactile.

Manque de précision du doigt

Un doigt est un mode de saisie moins précis que le pointeur de la souris qui, lui, est précis au pixel près.

Figure 7 : l'image montre que la largeur du doigt moyen d'un adulte est d'environ 11 millimètres, tandis que la largeur du doigt d'un bébé est de 8 mm et que certains joueurs de basket-ball ont des doigts dont la largeur dépasse 19 mm !

taille_doigt

Pour améliorer la précision de l'appui d'un utilisateur, la plateforme HTML de Windows 8 a ajouté ces fonctionnalités :

  • Contrôles adaptés au tactile

Par défaut, la taille des contrôles HTML de style Metro sont adaptés aux doigts moyens. Cela permet aux utilisateurs de cibler les contrôles en toute confiance. 7x7 mm est une bonne taille minimale si le fait de se tromper de cible peut être corrigé en un ou deux mouvements ou en moins de cinq secondes. Dans notre feuille de style par défaut, tous les contrôles des boutons ont une hauteur et une largeur minimales qui vous donnent une superficie minimale de 7x7 mm. Voici un exemple avec les valeurs provenant de la feuille de style par défaut.

button, input[type=button], input[type=reset], input[type=submit] 
{
min-height: 32px;
min-width: 90px;
}
  • Reciblage tactile

Le ciblage tactile de Windows 8 aide les utilisateurs en permettant au système de trouver le contrôle le plus proche au sein de la géométrie de contact et en reciblant le point tactile dans cette direction.

  • Clarification tactile

Le moteur de clarification tactile permet au système de mieux déterminer l'endroit ciblé par l'utilisateur lorsque son doigt touche plusieurs contrôles.

Aucun retour permettant de viser

Avec la souris, les utilisateurs peuvent d'abord viser avec le curseur, s'assurer que le point de 1 pixel se trouve précisément sur ce qu'ils souhaitent activer, puis cliquer. Mais avec le tactile, vous devez passer sur l'écran sans qu'aucun retour ne vous indique si ce que vous avez survolé est précisément ce que vous désirez. Lorsque vous touchez l'écran, vous activez immédiatement l'interface utilisateur. En d'autres termes, avec la souris, vous vous préparez, vous visez, puis vous faites feu. Tandis qu'avec le tactile, vous faites directement feu. Comme vous n'avez pas l'occasion de viser, la marge d'erreur est plus importante en tactile.

Pour permettre aux utilisateurs de toucher l'écran avec assurance, Windows 8 a défini un ensemble d'états visuels interactifs informant les utilisateurs lorsqu'ils sont sur le point d'appeler un contrôle. Par exemple, l'utilisateur verra les mêmes visuels pour lui indiquer ce qui a été activé et lorsqu'il annule l'activation s'il a changé d'avis. Windows 8 a directement intégré ces visuels aux contrôles via la feuille de style par défaut. Windows 8 a réalisé cela en faisant correspondre les états CSS aux états d'interaction tactile. Voici un exemple de correspondance CSS pour <button> :

Correspondance CSS des états d'interaction tactileFigure 8 : correspondance CSS des états d'interaction tactile

Regardons de plus près l'ensemble des états d'interaction et la façon dont nous avons intégré les visuels aux contrôles.

État activé

Les contrôles procurent maintenant un fort retour visuel lorsqu'ils sont activés, ce qui permet à l'utilisateur de savoir quel bouton le système a ciblé.

État activé du bouton

Figure 9 : état activé du bouton

Lorsqu'un utilisateur appuie sur le bouton, nous appliquons les pseudo-états CSS :hover et :active au bouton et fournissons un retour visuel en stylisant la couleur d'arrière-plan et la couleur de police dans les feuilles de style en cascade (CSS) :

button:hover:active {
background-color: rgb(0, 0, 0);
color: rgb(255, 255, 255);
}

Nous avons associé :hover et :active pour l'action d'appui, et pas simplement l'état :active, ce qui nous permet d'utiliser un modèle de programmation similaire à celui de la souris. Vous pouvez ainsi facilement utiliser le même code pour les deux types de saisie. Lorsque vous utilisez la souris pour cliquer sur un bouton, la souris se trouve généralement déjà au-dessus du bouton et déjà dans l'état :hover. Lorsque vous cliquez sur un bouton avec la souris, un état :active supplémentaire est ajouté.

Annulation

Si un utilisateur voit qu'il s'est trompé de bouton, il peut faire glisser son doigt et le relever pour annuler. Tant que le doigt ne repose pas sur le bouton, ce dernier revient à son état normal pour indiquer que l'interaction va être annulée.

Pour parvenir au visuel de désactivation, nous continuons à appliquer l'état :active au bouton et invalidons l'état :hover lorsque l'utilisateur s'éloigne du bouton. Comme l'état :active même ne comporte pas de style, le contrôle retourne dans le style normal, ce qui donne l'impression que le bouton est retourné dans son état de repos. Cela indique visuellement à l'utilisateur que l'action du bouton a été annulée. Il s'agit du comportement existant de la souris. Dans IE9, ceci a été possible par le biais d'un changement d'images bitmap de thème privé. Dans IE10, nous présentons le changement par le biais d'états CSS publics, ce qui vous permet de parvenir au même effet lorsque vous stylisez le contrôle.

Lorsque vous stylisez les contrôles, ne stylisez pas simplement l'état :active de votre style activé, car cet état représente le comportement d'annulation et doit par conséquent être de même style que l'état normal. L'état approprié à utiliser pour l'activation est l'état :hover:active.

État annulé du bouton

Figure 10 : état annulé du bouton

Vous ne souhaitez pas que les utilisateurs se préoccupent de l'endroit où ils relèvent leur doigt pour éviter l'activation accidentelle d'un contrôle différent. Par exemple, si les boutons OK et ANNULER sont proches l'un de l'autre et que l'utilisateur à touché le bouton OK par erreur alors qu'il souhaitait retirer son doigt, il ne doit pas se soucier de déclencher accidentellement le bouton ANNULER. Le bouton ANNULER ne doit pas prendre son style activé dans ce cas.

Ceci fonctionne par défaut dans la plateforme HTML, car <button> capture la saisie tactile. Ainsi, tant que l'action d'appui se trouve centrée sur le bouton, l'utilisateur peut confortablement retirer son doigt sans se préoccuper de déclencher autre chose par accident.

Plus qu'un clic

Le tactile permet aux utilisateurs d'avoir plusieurs pointeurs à l'écran à tout moment, il s'agit du tactile multipoint. La direction et la vitesse de saisie tactile (les mouvements) ont une signification particulière. Par exemple, le mouvement dans lequel un doigt touche un côté de l'écran et se déplace horizontalement à travers l'écran s'appelle un balayage.

Avec le tactile multipoint dans la plateforme HTML de Windows 8, nous permettons maintenant à plusieurs contrôles d'avoir l'état :active et des événements de clic en même temps, de sorte que lorsqu'un utilisateur touche l'écran, il peut activer plusieurs contrôles à la fois. Un simple contrôle, tel que <button>, peut être utilisé dans des cas comme les touches d'une application de clavier ou les contrôles d'un jeu !

En outre, la détection des mouvements nous permet de reconnaître les différents mouvements et de leur attribuer une signification pour les contrôles HTML. Par exemple, un mouvement de balayage sur un bouton est rapidement converti en déplacement de la page. Et un mouvement de balayage sur le curseur, <input type=”range”>, est interprété comme une saisie pour le contrôle. Ce travail permettra aux applications de réagir en toute fluidité aux mouvements tactiles, quels que soient les contrôles sur lesquels vous vous arrêtez.

Grâce à la formidable expérience tactile de tous nos contrôles HTML rendue possible via les indicateurs visuels de qualité, les améliorations intégrées du ciblage tactile, la prise en charge du tactile multipoint et la réaction fluide face aux mouvements tactiles, votre application HTML de style Metro s'adaptera automatiquement au tactile si vous utilisez les contrôles et suivez les conseils et astuces indiqués ici !

Fondamentaux : globalisation et accessibilité

Une application réussie doit toucher autant de gens que possible. En d'autres termes, l'application doit être globalisée et accessible. Pour vous aider à atteindre cet objectif, nous avons intégré ces éléments fondamentaux dans tous les contrôles HTML.

Prise en charge des polices

Nous avons intégré la prise en charge appropriée des polices aux contrôles HTML. Même si vous ne prévoyez pas de localiser votre application, cette dernière pourra toujours afficher du texte localisé dans les langues prises en charge par Windows 8. Ceci est particulièrement utile lorsque votre application doit afficher du texte saisi par l'utilisateur, par exemple dans un contrôle de zone de texte. Votre application sera capable d'afficher correctement le texte, car nous avons fait en sorte que le contrôle utilise la police qui prend en charge ces caractères. Nous fournissons également la police de style Metro privilégiée qui correspond à la version localisée de Windows. Windows sélectionne la police de style Metro privilégiée pour toutes les langues. En bref, nous optimisons la prise en charge des polices.

Si vous souhaitez savoir comment nous avons procédé, il suffit de rouvrir la feuille de style par défaut pour voir que, pour de nombreuses langues, nous définissons automatiquement une liste de polices de secours. Dans l'exemple suivant, en japonais, la première police sélectionnée est Meiryo UI. Mais si votre application a des caractères Unicode que la police Meiryo UI ne couvre pas, la police de secours suivante est Segoe UI. Si cela ne suffit pas, nous utilisons Ebrima et ainsi de suite. Ainsi dans la plupart des cas, vos caractères seront couverts par les polices privilégiées du style Metro de Windows. Même s'il nous manque une police par défaut dans une langue donnée, nous faisons appel à la police de secours sur la plateforme Web. Par conséquent, vos utilisateurs ne verront jamais de caractères de réservation dans vos contrôles !

body:lang(ja), .win-type-xx-large:lang(ja), .win-type-x-large:lang(ja), .win-type-large:lang(ja), .win-type-medium:lang(ja), .win-type-small:lang(ja),

.win-type-x-small:lang(ja), .win-type-xx-small:lang(ja), input:lang(ja),textarea:lang(ja),

.win-textarea:lang(ja), button:lang(ja), select:lang(ja), option:lang(ja)
{
font-family: "Meiryo UI", "Segoe UI", "Ebrima", "Nirmala UI", "Gadugi", "Segoe UI Symbol", "Khmer UI", /* etc.*/
}

De plus, comme vous pouvez le voir dans notre exemple précédent, nous ne l'avons pas simplement ajouté à l'élément <body> ou aux contrôles HTML. Nous fournissons également une liste de styles typographiques que vous pouvez appliquer au contenu de votre application afin d'obtenir automatiquement cette sélection intelligente des polices. Pour plus d'informations, consultez l'article sur les classes CSS WinJS pour la typographie.

Choix des ressources appropriées

Nous avons créé un chargeur de ressources qui vous permet de localiser plus facilement vos applications. Utilisez-le pour charger l'ensemble approprié de chaînes localisées pour votre application, qui fonctionne parfaitement pour tous les contrôles HTML. Le chargeur de ressources fournit une méthode de secours grâce à laquelle vous n'avez pas à vous préoccuper de la matrice de langues que vous devez prendre en charge. Vous pouvez maintenant référencer de façon déclarative vos ressources dans votre code HTML pour que le chargeur de ressources sélectionne automatiquement la ressource qui vous convient.

<button data-win-res="{textContent: ‘string2’}">OK</button>

Accessibilité intégrée

Pour que votre application atteigne l'audience la plus vaste possible, une infrastructure d'accessibilité est intégrée à tous les contrôles HTML.

D'abord, comme tous les contrôles HTML ont une signification sémantique, nous intégrons le narrateur et le lecteur d'écran. L'objectif d'un écran est d'identifier et d'interpréter les visuels à l'écran pour les utilisateurs présentant des déficiences visuelles. Pour un contrôle <button>, un lecteur d'écran peut indiquer à l'utilisateur final que l'application attend une action, ce qui n'est pas le cas d'un bouton semblable créé avec <div>. Ainsi, pour que le lecteur d'écran et le narrateur fonctionnent correctement avec un <div>, vous devez ajouter vos propres attributs ARIA.

Ensuite, nous nous assurons que tous les contrôles HTML continuent à prendre en charge le contraste élevé. Le contraste élevé est conçu pour les gens souffrant d'une déficience visuelle. Les modèles de couleurs à contraste élevé peuvent rendre l'écran plus facile à visualiser pour certains utilisateurs en augmentant le contraste à l'écran avec différentes combinaisons de couleurs.

Nous avons intégré ces couleurs à la feuille de style par défaut et les contrôles passent automatiquement aux couleurs à contraste élevé lorsque Windows est défini pour apparaître dans des thèmes à contraste élevé, ce qui permet à votre application d'être compatible par défaut avec le contraste élevé. Ainsi, même si vous avez stylisé et actualisé les couleurs des contrôles intrinsèques par défaut, tant que les sélecteurs que vous utilisez ont les mêmes spécificités, Windows s'assure que les couleurs à contraste élevé appropriées s'affichent. Pour en savoir plus à ce sujet, consultez notre présentation de la conférence BUILD Stand out in styling for your HTML app.

Nous basculons sur le contraste élevé en ajoutant simplement une requête de média pour le mode de contraste élevé et en définissant toutes les couleurs nécessaires à chacun des contrôles intrinsèques dans la feuille de style par défaut. Si vous êtes curieux de connaître ces couleurs, ouvrez la feuille de style par défaut et regardez.

@media (-ms-high-contrast) 
{
/* high contrast definition */
}

Grâce à la bonne prise en charge des polices, au chargeur de ressources permettant de sélectionner les ressources localisées appropriées et à l'intégration de l'accessibilité, vos applications sont à même d'atteindre le plus facilement possible le vaste ensemble des utilisateurs de Windows.

Rendre vos applications rapides et fluides

Pour que votre application HTML fonctionne de manière optimale sur tous les périphériques Windows 8 (y compris sur ARM), nous voulons nous assurer que les composants de base de l'application, les contrôles, se comportent parfaitement.

Windows 8 intègre un moteur HTML qui prend en charge les deux modes de navigation (de style Metro et de bureau), ainsi que les applications de style Metro utilisant HTML5 et JavaScript. Le moteur HTML commun offre une prise en charge rapide, sûre et performante des normes Web et du modèle de programmation Web, aussi bien pour la navigation que pour les applications de style Metro. Cela signifie que les applications de style Metro bénéficient de tous les avantages d'IE10 en termes de performances. Voici certains des principaux facteurs affectant les contrôles HTML :

  • Accélération matérielle Direct2D

Comme les contrôles sont natifs à la plateforme HTML, nous pouvons tirer parti de l'accélération matérielle Direct2D de la plateforme HTML. Nous pouvons maintenant utiliser le processeur graphique pour tous les graphiques et le texte dans votre application HTML de Windows 8. Le processeur graphique peut utiliser le matériel spécialisé pour actualiser efficacement l'écran. En utilisant le processeur graphique pour le rendu visuel, nous libérons le processeur pour qu'il effectue d'autres opérations, telles que la compilation JIT (Just-in-time) de votre code JavaScript susceptible d'améliorer encore les performances de votre application.

  • Interface tactile indépendante

Un des secteurs dont nous avons optimisé les performances de la plateforme Web est le déplacement et le zoom. Nous avons réalisé un travail important pour que les contrôles s'adaptent aux améliorations que nous avons apportées aux opérations de déplacement et de zoom. Par exemple, si vous utilisez un contrôle de bouton standard sur une zone subissant un déplacement et que l'utilisateur commence à effectuer un déplacement, le système traitera l'action tactile sur la zone faisant l'objet du déplacement et sur le bouton parallèlement. Ainsi, l'utilisateur final ne connaîtra aucun ralentissement en raison des contrôles supplémentaires à traiter et le déplacement commencera aussi rapidement que si aucun bouton n'existait à cet emplacement. Nous nous sommes assurés que l'utilisation des contrôles ne provoquait pas de délais, contrairement à ce qui a pu se passer avec certaines implémentations plus simples de contrôles.

  • Fiabilité tactile des contrôles

Pour optimiser les performances du tactile, nous avons ajusté le système pour le rendre plus fiable. En voici un exemple : dans le contrôle <button>, nous avons introduit un délai de rassemblement de l'état d'activation afin que d'autres mouvements tactiles, tels que l'appui ou le balayage sur le contrôle <button>, puissent être traités prioritairement. Ainsi, il n'est pas nécessaire d'effectuer immédiatement les calculs complexes et gourmands en ressources de disposition des parents pour chaque interaction. En conséquence, si les utilisateurs souhaitent uniquement appuyer sur le bouton, le bouton entre et sort de l'état d'activation rapidement, puis revient dans son état normal sans que les conteneurs parents n'aient besoin d'actualiser la disposition. De petits ajustements, tels que celui-ci, contribuent à la fiabilité globale de vos applications HTML.

Outils intégrés

Outre les formidables fonctionnalités de la plateforme que nous avons soulignées ici, nous proposons également des outils de premier plan pour les contrôles HTML.

Voici certaines des améliorations apportées aux outils dans Visual Studio et Blend :

  • Dans Visual Studio et Blend, IntelliSense est intégré pour HTML, CSS et JavaScript. Par exemple dans Visual Studio, lorsque vous indiquez que vous souhaitez définir une couleur d'arrière-plan, au lieu d'un simple IntelliSense texte, nous avons maintenant un sélecteur de couleurs.

Sélecteur de couleurs intégré dans BlendFigure 11 : sélecteur de couleurs intégré dans Blend

  • Dans Blend, vous pouvez maintenant faire glisser et déplacer tous les contrôles directement de la boîte à outils vers la surface de conception. En outre, vous pouvez maintenant disposer et redimensionner les contrôles directement sur la surface de conception. Cela vous permet de disposer visuellement les contrôles dans votre application.

Bouton sur la surface de conception BlendFigure 12 : bouton sur la surface de conception Blend

  • Dans Blend, vous pouvez styliser les contrôles à l'aide du panneau des styles.

Vous pouvez par exemple utiliser le sélecteur de couleurs intégré pour définir les couleurs d'arrière-plan et de premier plan.

panneau des styles

Figure 13 : panneau des styles avec sélecteur de couleurs dans Blend

Vous pouvez par ailleurs effectuer des opérations plus compliquées, telles que définir des transitions sur le contrôle.

Panneau des propriétés de transition dans BlendFigure 14 : panneau des propriétés de transition dans Blend

Pour en savoir plus sur ce qui est fourni dans les outils, consultez le blog de Soma.

Résumé

Dans ce billet, j'ai beaucoup parlé du contrôle <button>, mais toutes les formidables fonctionnalités qui s'appliquent à <button> sont également valables pour tous les autres contrôles HTML natifs.

Nous nous sommes beaucoup investis pour optimiser les contrôles HTML afin que vous puissiez créer des applications de style Metro. Ces contrôles fonctionnent maintenant parfaitement sur différents terminaux, ils peuvent améliorer l'expérience utilisateur et étendre la portée de votre application. Certaines des principales applications disponibles dans la version Release Preview utilisent majoritairement les contrôles HTML, par exemple la boutique d'applications de Windows 8 et les applications Courrier, Calendrier et Photo. Ces contrôles permettent à votre application de bénéficier gratuitement de l'apparence du style Metro et vous permettent de vous concentrer sur les valeurs essentielles de votre application.

Pour plus d'informations, consultez :

Ajout de contrôles et de contenu

Recommandations en matière d’expérience utilisateur pour les applications de style Metro

Exemples SDK :

CSS styling: branding your app sample

Exemple de contrôle HTML

Les présentations //BUILD/ sur le contrôle et les styles.

-- Kathy Kam, chef de projet senior, Windows


  • Loading...
Leave a Comment
  • Please add 3 and 3 and type the answer here:
  • Post