Fonctionnalités d'amorçage

Dans ce deuxième article de la série traitons des fonctionnalités de Bootstrap. Il s'agit d'une bibliothèque complète de ressources pour la conception de sites Web et d'applications, y compris des modèles et des éléments pour les formulaires, les polices et les menus, entre autres.

Dans le article précédent nous avons fait valoir qu'il y a des moments où les gestionnaires de contenu ne sont pas la meilleure option et que écrire du code à partir de zéro pour un site Web est la bonne alternative. Cependant, cela ne signifie pas que nous devons réinventer la roue. L'utilisation de frameworks comme Bootstrap réduit considérablement le temps de conception et facilite l'obtention de résultats.

Fonctionnalités d'amorçage

Pour comprendre les fonctionnalités de Bootstrap, nous devons comprendre le changement de paradigme dans la conception de sites Web.

quand ils sont apparus les sites Web devaient simplement s'adapter aux différentes tailles d'écrans. Mais, au fil du temps, les téléphones portables et les tablettes sont devenus de plus en plus les moyens d'accès privilégiés des utilisateurs. le défi était de faire en sorte que les pages s'adaptent aux différents écrans sans que l'utilisateur ait à agrandir, rétrécir ou déplacer le contenu pour pouvoir le voir.

En principe, les approches suivantes ont été adoptées :

• Conception réactive : Le design est le même mais automatiquement adapté à la taille de l'écran. Cette approche présente certains problèmes tels que l'utilisateur peut être obligé de zoomer sur certaines sections de la page afin de les voir.
• Avance progressive : Il commence par concevoir le site pour l'appareil disposant de moins de ressources (généralement le téléphone mobile car il a un écran plus petit, un navigateur moins compatible pour les fonctionnalités avancées, et nécessite souvent l'utilisation d'un forfait data pour se connecter). Une fois terminé, sur la base de cette conception, des fonctionnalités sont ajoutées pour obtenir la version pour tablettes, ordinateurs portables et ordinateurs de bureau.
• Dégradation progressive : C'est le chemin inverse. Le site de bureau est créé en premier et les fonctionnalités sont supprimées jusqu'à ce qu'une version adaptée aux mobiles soit obtenue.

Comme il est toujours plus facile d'ajouter que d'enlever, l'avance progressive est la tendance qui a réussi à s'imposer. Bootstrap, par exemple, adopte l'approche "mobile first", c'est-à-dire que la base de la conception est toujours la version qui va être affichée dans la plus petite taille d'écran et, ensuite, les modifications qui seront apportées au fur et à mesure de son passage aux tailles qui suivent sont établies.

Un avantage supplémentaire de l'utilisation de Bootstrap est lié au fait que Google donne la priorité aux sites adaptés aux mobiles dans ses recherches.

Un autre concept que nous devons prendre en compte est la différence entre la conception frontend et backend. La conception frontale prend en charge tout ce que l'utilisateur voit et tout ce avec quoi il interagit. Le backend regroupe ce qui se fait sur le serveur. Un exemple du premier est celui d'un formulaire Web. L'affichage d'une série d'options est affiché sous la forme d'un menu déroulant est la conception du frontend, que l'option choisie est envoyée par courrier ou ajoutée à une base de données est la conception du backend.

Bootstrap est un framework qui combine des éléments de style CSS et de programmation Javascript pour contrôler le rendu et donner de l'interactivité à tous les composants d'une page développée en HTML5.

Parmi les choses que nous pouvons contrôler avec Bootstrap, il y a :

• Accessibilité: Les composants tels que les menus ou les boîtes de dialogue sont compatibles avec les lecteurs d'écran ou adaptés à une utilisation par des personnes à mobilité réduite.
• Boutons: Y compris les mesures, les styles, les états et les regroupements.
• Formes:  Y compris le rendu, les types de contrôles et la validation des entrées.
• Imágenes: contrôle l'origine, l'alignement et la taille d'écran des images insérées.
• Éléments de navigation : Par exemple, des barres latérales masquables ou des menus verticaux ou horizontaux selon l'appareil.
• Typographie: Contrôlez l'affichage des différentes parties du texte.
• Disposition: Réglage du rendu du contenu en fonction de l'appareil

Dans le prochain article, nous verrons quelques exemples pratiques de son utilisation.