AWS annonce Cloudscape Design System, une solution open source pour la création d'applications Web intuitives
AWS annonce Cloudscape Design System, une solution open source pour la création d'applications Web intuitives,
la structure HTML interne de ses composants peut changer à tout moment
AWS a annoncé via une publication sur son site officiel la sortie de Cloudscape Design System, une solution open source pour la création d'applications Web intuitives. « Aujourd'hui, nous sommes ravis d'annoncer Cloudscape Design System, une solution open source permettant de créer des expériences utilisateur attrayantes et inclusives à grande échelle. »
Cloudscape se compose d'un ensemble complet de directives pour créer des applications Web, ainsi que des ressources de conception et des composants frontaux pour rationaliser la mise en œuvre. Elle a été construite pour et est utilisé par les produits et services AWS. Elle est publiée en open source afin que toute personne créant des produits sur le cloud puisse bénéficier du système de conception d’AWS.
« Nous l'avons créé en 2016 pour améliorer l'expérience utilisateur à travers les applications web AWS, et aussi pour aider les équipes à mettre en œuvre ces applications plus rapidement. Depuis lors, nous n'avons cessé de l'améliorer en nous appuyant sur les commentaires des clients et les recherches menées », déclare AWS.
Présentation de Cloudscape
Cloudscape est un système de conception open source pour créer des applications Web. Il a été construit pour et est utilisé par les produits et services d'Amazon Web Services (AWS). Nous l'avons créé en 2016 pour améliorer l'expérience utilisateur à travers les applications web appartenant aux services AWS, et aussi pour aider les équipes à mettre en œuvre ces applications plus rapidement. Depuis lors, nous avons continué à améliorer le système en fonction des commentaires des clients et des recherches. Apprenez-en davantage sur le système.
Chaque composant dispose d'un environnement de travail où les concepteurs et les développeurs peuvent voir comment le composant se comporte, ainsi que des exemples de code. Pour faire gagner du temps et épargner des efforts lors de la création, AWS propose des conseils détaillés sur les options d'accessibilité et les solutions de conception.
Lorsque vous créez des tests automatisés pour une application, vous interagissez avec les composants de Cloudscape. Par exemple, vous pouvez choisir un bouton Cloudscape et affirmer que l'application se met à jour pour refléter l'action que vous avez associée à ce bouton. La structure HTML interne des composants Cloudscape, y compris les noms des classes CSS, peut changer à tout moment.
C'est pourquoi AWS a créé des utilitaires de test pour chaque composant. Les utilitaires de test presentent des API stables afin que vous puissiez accéder aux parties pertinentes de ces composants sans vous soucier du bon sélecteur à utiliser. Les utilitaires de test de Cloudscape sont indépendants du cadre de travail et peuvent être utilisés avec n'importe quelle pile de test (de Jest et jsdom à WebdriverIO), ainsi qu'avec les éléments suivants :
- Les tests unitaires, où vous avez généralement un accès direct au modèle d'objet de document (DOM) ;
- Tests d'intégration, où il est typique de s'appuyer sur des sélecteurs de chaînes. Les utilitaires de test font partie du paquetage principal des composants.
Quelques composants de Cloudscape
Filtre de sélection
Un filtre de sélection permet aux utilisateurs de trouver des éléments spécifiques dans une collection de ressources en choisissant une ou deux propriétés.
Conteneur
Avec le conteneur, vous pouvez présenter un groupe d'éléments de contenu, en indiquant que les éléments sont liés. Par exemple, un tableau est un type de conteneur.
Section extensible
Avec la sélection extensible, les utilisateurs peuvent développer ou réduire une section. Il est recommendé d’utiliser des sections extensibles lorsque vous avez plusieurs sections sur une page et que vous souhaitez permettre aux utilisateurs de voir une ou plusieurs sections à la fois. Les sections extensibles sont réduites par défaut.
Hotspot
Dans les didacticiels pratiques, les hotspots sont des conteneurs invisibles qui marquent les endroits où les icônes des hotspots doivent être placées. Les icônes de points chauds sont rendues par le contexte d'annotation et sont utilisées pour ouvrir et fermer les popovers d'annotation.
Panneau divisé
Un panneau ajustable qui permet d'accéder à des informations ou des contrôles secondaires. Il s'agit du principal composant permettant de mettre en œuvre la vue fractionnée, un modèle permettant d'afficher une collection de ressources avec des détails contextuels sur les ressources.
Wizard
Un formulaire à plusieurs pages qui guide l'utilisateur à travers un flux complexe ou une série de tâches interdépendantes. Un Wizard se compose d'un volet de navigation, d'un en-tête, d'une zone de contenu principal et de boutons d'action.
Source : AWS
Et vous ?
Quel est votre avis sur le sujet ?
Voir aussi :
Répondre avec citation
Partager