En coulisse : la démonstration « Let It Snow… »

IEBlog Français

Blog de l'équipe de développement de Windows Internet Explorer

En coulisse : la démonstration « Let It Snow… »

  • Comments 0

Nous sommes en pleine tempête de neige ici à Seattle : l'occasion idéale pour proposer cette petite description de notre démonstration de test d'IE, publiée au cours des fêtes de fin d'année 2011 (intitulée « Let It Snow »). — Le rédacteur en chef

Lorsqu'un navigateur parvient à utiliser de façon efficace le matériel sous-jacent, ses possibilités sont illimitées. Pendant les fêtes de fin d'année, nous avons publié une démonstration permettant de mieux apprécier les avantages d'une expérience de navigation exploitant pleinement l'accélération matérielle et les interfaces tactiles dans Internet Explorer 10. Dans ce billet, nous expliquons plus en détail comment a été créée la démonstration Let It Snow. Les techniques utilisées dans cette démonstration sont représentatives des expériences utilisateur HTML5, qui émergent actuellement de part et d'autre du Web, mais aussi des premières applications de style Metro. Plutôt que de s'attacher aux aspects visuels, nous allons ici nous concentrer sur le fonctionnement de la démonstration.

À l'heure où les appareils mobiles basse consommation et les expériences utilisateur tactiles deviennent monnaie courante, les attentes des clients en matière de performances de navigation sont de plus en plus fortes. Pour déterminer les performances d'un navigateur, il faut désormais évaluer dans quelle mesure les sites Web répondent de façon fluide aux gestes tactiles de l'utilisateur, la réactivité des sites face à ces interactions tactiles, ainsi que l'efficacité du navigateur en termes de consommation de batterie. Avec Internet Explorer 10 et Windows 8, nous nous sommes fixés pour objectif de bâtir le navigateur le plus rapide au monde dans les scénarios d'utilisation courants.

Conception de la démonstration « Let It Snow »

Nous avons commencé par créer une carte thématique contenant une zone destinée à accueillir des voeux.

Carte de vœux

Nous avons commencé par créer une carte thématique contenant une zone destinée à accueillir des voeux. La carte est générée au moment de l'exécution par le biais de l'élément HTML5 Canvas. Elle utilise de nombreuses techniques de dessin courantes : tracé d'images, création de dégradés, manipulation de l'opacité et de l'inclinaison, etc.

Nous avons ensuite ajouté de nombreux flocons de neige pour créer une véritable tempête de neige.

Tempête de neige animée

Nous avons ensuite ajouté de nombreux flocons de neige pour créer une véritable tempête de neige. Pour ce faire, nous avons ajouté un deuxième dessin par-dessus la carte. Chaque flocon est représenté sous forme d'objet dans une collection JavaScript contenant l'état du flocon (position actuelle, vitesse de déplacement, image à tracer, etc.). À chaque image, le dessin est effacé et la scène est recréée à partir du modèle sous-jacent.

Peu à peu, les flocons s'accumulent sur le panneau.

Accumulation des flocons

Peu à peu, les flocons s'accumulent sur le panneau. Grâce à des techniques de test de frappe, nous déterminons à quel moment le flocon atteint le panneau et lui affectons de façon aléatoire une cible sur le panneau. Lorsque le flocon approche de sa cible, nous utilisons les modes composites de l'élément HTML5 Canvas pour tracer les flocons sur le dessin.

Vous pouvez enlever la neige de la carte à l'aide d'un doigt ou de votre souris.

Dégagement de la neige

Vous pouvez enlever la neige de la carte à l'aide d'un doigt ou de votre souris. Les actions de l'utilisateur sont détectées par le biais du nouvel événement MSPointer, qui permet d'utiliser une seule et même API avec différents modèles de pointeurs. Ainsi, nous pouvons proposer une expérience utilisateur tactile multipoint dans Internet Explorer 10 sous Windows 8. Les points identifiés sont utilisés pour effacer une partie du dessin et donner ainsi l'illusion qu'une partie de la neige a été enlevée du panneau.

Une fois combinés, les calques créent une scène de Noël interactive.

Scène complète

Une fois combinés, les calques créent une scène de Noël interactive. Les éléments utilisés dans cette démonstration représentent des techniques couramment mises en œuvre dans des jeux comme Angry Birds ou Cut The Rope : animations scriptées, détection avancée des actions de l'utilisateur, logique de jeu basée sur les principes physiques, etc.

Nous sommes particulièrement enthousiastes vis-à-vis de la rapidité et de la fluidité des expériences interactives pouvant être mises en œuvre dans Internet Explorer 10 et Windows 8 avec une plateforme HTML5 tactile exploitant pleinement l'accélération matérielle. Pour découvrir en pratique ces avantages, la meilleure solution consiste à utiliser Windows 8 Developer Preview.

—Bogdan Brinza‎, Chef de projet, Internet Explorer

  • Loading...