Interfaces utilisateur d'amorçage

Les interfaces utilisateur sont l'une des parties les plus importantes des applications, car c'est la manière dont les utilisateurs interagiront avec nos créations, mais au-delà, une bonne interface rend l'expérience avec notre application positive. qu'une bonne application ne peut plus être utilisée.
Amorcer Il ne nous donne pas d'interfaces construites, c'est quelque chose que nous devons concevoir nous-mêmes, mais il nous donne les composants pour pouvoir les construire et bien que la plupart de ses composants soient destinés à la conception d'applications Web, il a en fait d'autres composants à améliorer l'expérience du nom d'utilisateur.
Ces composants sont basés sur JavaScript Oui jQuery, nous allons donc exiger que cette dernière bibliothèque puisse utiliser ces éléments que nous avons mentionnés, mais une fois que nous verrons certains des résultats, nous justifierons cette inclusion.
Comme nous l'avons indiqué dans l'introduction, il est nécessaire d'utiliser jQuery Afin d'utiliser ces composants, c'est pourquoi la première chose que nous allons définir est comment notre étiquette doit être diriger de tous les exemples que nous allons voir. Voyons le code de celui-ci:

Tout d'abord, nous incluons le bootstrap.css dans sa version minifiée puis le thème.css, jusqu'à présent, tout s'est déroulé comme d'habitude, mais nous devons ensuite inclure jQuery et nous devons également inclure bootstrap.js c'est ainsi que ce framework va nous donner l'opportunité d'intégrer les composants de nos interfaces.
Ces inclusions peuvent être faites comme nous le voyons dans le code d'un dossier sur notre machine où nous stockons le projet, ou nous pouvons également utiliser un CDN, comme on le voit dans le morceau de code suivant :

Toutes les options que nous utilisons conviennent, ce qui est important est de respecter l'ordre dans lequel nous incluons les bibliothèques, sinon nos composants ne fonctionneront pas comme nous le souhaitons.
Une bonne interface doit toujours être utile à l'utilisateur, elle doit toujours lui montrer la voie à suivre et à quoi servent ses différents composants, de cette manière elle est intuitive et évite les conjectures de la part de l'utilisateur lorsqu'il essaie des boutons et des menus pour trouver quelque chose. .
Info-bulleUn outil qui nous permet d'éviter cela est le Info-bulle, qui ne sont rien de plus que de petites boîtes contextuelles qui nous aident à expliquer des sections de notre application, elles sont également appelées boîtes d'aide, l'idée est que dans ces petites boîtes, nous ajoutons de petites phrases qui donnent un sens à l'action que nous pouvons effectuer dans notre interface.
Voyons un petit code où nous montrons comment créer une info-bulle à l'aide de Amorcer:

 Exemple d'info-bulle Enregistrer

Dans notre code nous avons inclus les bibliothèques mentionnées puis dans l'étiquette scénario nous utilisons l'événement document.prêt pour créer notre info-bulle qui va s'appliquer à tout ce que la classe a outil1, ce nom de classe peut être personnalisé par qui nous voulons, et en plus nous ajoutons en option qu'il a une disposition sur la droite, c'est-à-dire que notre aide sera affichée sur le côté droit. Ensuite, nous créons un style général pour le corps afin que notre contenu soit plus visible à l'écran à des fins de démonstration.
Enfin à l'intérieur du corps nous créons un élément bouton, il a un attribut appelé bascule de données et nous indiquons que ce sera un info-bulle où dans l'attribut Titre nous plaçons le texte que notre boîte d'aide doit afficher, et bien sûr dans l'attribut classer nous devons inclure outil1 qui était la classe que nous avions définie au début. Une fois que tout est en place, lorsque nous passons la souris sur notre bouton, nous pouvons visualiser l'info-bulle créée, qui une fois exécutée dans notre navigateur devrait ressembler à ceci :

Comme on peut le voir, ce composant est assez utile puisqu'il nous donne la possibilité d'expliquer à l'utilisateur à travers les boîtes d'aide comment ils fonctionnent ou à quoi servent certains éléments dans notre interface.
Il y a un autre composant très important de l'interface utilisateur et c'est le accordéon, Le but de cet élément est de pouvoir enregistrer le texte sous un composant de notre application, avec cela nous obtenons une première impression de l'ordre et de la propreté de notre interface, où l'utilisateur en cliquant dessus, le contenu est affiché.
Ceci est important car une autre qualité dont une bonne interface utilisateur a besoin est la propreté, car une interface propre signifie que l'utilisateur ne se sent pas abasourdi et qu'il sera donc plus agréable de l'utiliser.
La constitution de l'accordéon est simple, dans ce cas on n'a pas besoin de construire un script en tant que tel, il suffit de faire une structure de div qui nous permettent d'indiquer qu'ils sont du type panneau, le titre de notre accordéon sera un div du type en-tête de panneau et notre contenu sera un autre div du type panneau-contenu, que nous devons répéter pour la quantité d'éléments que nous voulons montrer.
Voyons dans l'exemple suivant où nous créons un accordéon à deux éléments :

 Exemple d'accordéon
Premier élément
C'est le premier élément de notre accordéon

Deuxième élément
C'est le contenu de notre deuxième élément de l'accordéon

La chose la plus importante pour faire fonctionner l'accordéon après la structure sont les identifiants, si nous regardons le titre de l'accordéon nous avons une ancre et cela est dirigé dans l'exemple vers objet 1 Oui élément2 où chacune de ces ancres correspond à l'identifiant du contenu, alors on voit comment le bloc de contenu de chacune a comme aller ces deux mots, ce qui signifie que lorsque l'on clique sur les titres, le contenu s'affiche. Voyons à quoi cela ressemble dans notre navigateur lorsque nous exécutons notre exemple :

AGRANDIR

Comme on peut le voir, element1 affiche son contenu sans problème tandis que element2 n'affiche aucune information, si nous cliquons dessus nous pouvons voir comment le contenu de element1 est caché et le contenu de element2 est affiché :

AGRANDIR

Enfin, un autre des grands composants des interfaces utilisateur est le images modalesCe sont des éléments qui sont invoqués en cliquant sur un bouton ou une ancre et leur fonctionnalité est de nous montrer une sorte de fenêtre pop-up.
Cette fenêtre est très utile car elle permet d'afficher du texte qui, de par sa longueur, n'est pas pratique dans un info-bulle, ou peut-être que nous avons besoin que l'utilisateur remplisse certaines informations et que nous ne voulons pas les envoyer sur une autre page. Ce type de composant nous aide à maintenir la propreté de notre application, mais il nous aide aussi à forcer l'utilisateur à faire attention à quelque chose qui peut être très important.
Bien sûr, des règles de bon sens doivent s'appliquer ici, car bien qu'il soit possible pour un modal d'élever un autre modal, cela est de mauvais goût et nuit à la navigation de l'utilisateur, même si nous devons incorporer plus de quatre champs dans un formulaire, c'est mieux de le faire dans une nouvelle page et non dans un modal pour ne citer que quelques exemples. Voyons dans le code suivant comment créer un modal :

 Cartes modales×
Une fois que vous passez à la phase suivante, toutes vos actions seront définitives.

je ne peux pas annuler vos réponses
Quitter Continuer

Dans ce cas le modal est configuré dans le document.prêt pour être affiché directement, ce type de mise en œuvre est largement utilisé pour donner des avertissements avant que l'utilisateur ne continue. Ensuite, notre modal est composé de trois parties; partie supérieure (entête), corps (corps) et pied de page (bas de page).
Normalement dans le entête Il y a un titre avec une taille qui ressort pour indiquer la raison du modal, dans le corps l'explication ou le contenu tel qu'un formulaire ou un message, et dans le bas de page boutons d'action comme continuer ou fermer. Voyons donc à quoi ressemble notre fenêtre modale lorsque nous l'exécutons dans le navigateur :

Ce composant est assez simple à mettre en œuvre et donne à notre application un style professionnel, cependant il est important que nous sachions utiliser notre logique pour la placer dans un endroit qui n'interrompt pas l'harmonie de l'application.
Avec cela, nous concluons ce didacticiel, où nous avons développé efficacement trois grands composants qui nous aident à créer des interfaces utilisateur pour obtenir une meilleure organisation et une meilleure compréhension des actions dans notre application, améliorant ainsi l'expérience de navigation et son utilisation.