Fa pocs dies AWS va anunciar a través d'una publicació al seu lloc web oficial el llançament de Cloudscape Design System, una solució de codi obert per crear aplicacions web intuïtives.
Cloudscape Design System, consisteix en un conjunt integral de pautes per crear aplicacions web, així com també recursos de disseny i components frontend per agilitzar la implementació.
“Avui estem encantats d'anunciar Cloudscape Design System, una solució de codi obert per crear experiències d'usuari atractives i inclusives a escala. Cloudscape
“El vam crear el 2016 per millorar l'experiència de l'usuari a les aplicacions web d'AWS i també per ajudar els equips a implementar aquestes aplicacions més ràpidament. Des de llavors, ho hem millorat contínuament en funció dels comentaris dels clients i la investigació realitzada”, diu AWS.
Sobre Cloudscape Design System
Núvols és un sistema de disseny de codi obert per crear aplicacions web amb la finalitat de millorar lexperiència de lusuari en les aplicacions web que pertanyen als serveis dAWS i també per ajudar els equips a implementar aquestes aplicacions més ràpid.
Cada component té un entorn de treball on els dissenyadors i desenvolupadors poden veure com es comporta el component, així com un codi de mostra. Per estalviar temps i esforç per crear, AWS ofereix orientació pas a pas sobre opcions d'accessibilitat i solucions de disseny.
Quan creeu proves automatitzades per a una aplicació, interactueu amb els components de Cloudscape. Per exemple, podeu triar un botó de Cloudscape i afirmar que l'aplicació s'actualitza per reflectir l'acció que va associar amb aquest botó. L'estructura HTML interna dels components de Cloudscape, inclosos els noms de les classes CSS, es pot canviar en qualsevol moment.
És per això que AWS va crear utilitats de prova per a cada component. Les utilitats de prova tenen API estables perquè pugueu accedir a les parts rellevants d'aquests components sense preocupar-vos per quin selector utilitzar. Les utilitats de prova de Cloudscape són independents del marc i es poden fer servir amb qualsevol pila de prova (des de Jest i jsdom fins a WebdriverIO), així com amb les següents:
- Proves unitàries, on generalment té accés directe al model d'objecte del document (DOM)
- Proves dintegració, on és típic confiar en selectors de cadenes. Les utilitats de prova són part del paquet de components principal.
- Un filtre de selecció: que permet als usuaris trobar elements específics en una col·lecció de recursos escollint una o dues propietats.
- Contenidor: Amb el contenidor, podeu presentar un grup d'elements de contingut, cosa que indica que els elements estan relacionats. Per exemple, una matriu és un tipus de contenidor.
- Secció expandible: amb ella els usuaris poden expandir o contraure una secció. Es recomana utilitzar seccions expandibles quan teniu diverses seccions en una pàgina i voleu permetre que els usuaris vegin una o més seccions alhora. Les seccions desplegables estan col·lapsades per defecte.
- Un punt d'accés: Als tutorials pràctics, els punts d'accés són contenidors invisibles que marquen on s'han de col·locar les icones dels punts d'accés. Les icones de punts d'accés són representades pel context d'anotació i es fan servir per obrir i tancar finestres emergents d'anotació.
- Panell dividit: aquest és un panell ajustable que ofereix accés a informació o controls secundaris. Aquest és el component principal per implementar la vista dividida, una plantilla per mostrar una col·lecció de recursos amb detalls de recursos contextuals.
- Mag: Un formulari de diverses pàgines que guia l'usuari mitjançant un flux complex o una sèrie de tasques interrelacionades. Un assistent consta d'un panell de navegació, una capçalera, una àrea de contingut principal i botons d'acció.
Finalment si estàs interessat en poder conèixer més a l'respecte, has de saber que Cloudscape Design System va ser creat per als productes i serveis d'AWS i és utilitzat per ells. Es llança com a codi obert perquè qualsevol persona que creï productes al núvol pugui beneficiar-se del sistema de disseny d'AWS.
Pots consultar els detalls a el següent enllaç.