Editions ENI Livres | Vidéos | e-Formations
Introduction
Le développement des sites web
Depuis longtemps déjà, le développement des sites web a fortement évolué. Vous devez créer des sites avec une architecture solide, qui soient élégants, ergonomiques et qui puissent être parfaitement affichés dans tous les types de support actuel, c’est-à-dire sur un écran d’ordinateur, sur une tablette ou un smartphone.
Cela nécessite une très bonne connaissance des langages fondateurs du Web (HTML, CSS et JavaScript) de sorte à pouvoir mener à bien les projets. Mais il ne faut pas se leurrer, c’est parfois long et difficile.
Pour nous aider dans cette tâche, nous pouvons utiliser des frameworks (ou des cadriciels selon la terminologie française). Les frameworks sont des collections de brique de code (HTML, CSS et JavaScript) bien structurées et prêtes à l’emploi qui nous permettent de partir sur de solides bases pour la création de nos sites web.
Il existe de très nombreux frameworks, mais le plus utilisé est sans conteste Bootstrap de Twitter. Au départ il a été créé en interne, pour unifier les interfaces des applications de Twitter. Puis un des deux architectes, Mark Otto en a créé un projet ouvert à tous...
Les fonctionnalités de Bootstrap
Bootstrap propose de très solides fonctionnalités pour développer nos sites web, avec une approche résolument « Responsive Web Design ». Bootstrap utilise aussi les dernières fonctionnalités de mise en page, avec l’utilisation des modules CSS3 Flexbox (https://www.w3.org/TR/css-flexbox-1/) et Grid (https://www.w3.org/TR/css-grid-1/), proposés par le W3C.
Voici les fonctionnalités que nous propose Bootstrap :
Une grille de mise en page pour agencer les différentes boîtes d’affichage des sites. Cette grille est immédiatement « Responsive Web Design », cela veut dire que l’affichage va s’adapter aux écrans de diffusion : ordinateurs, tablette et smartphone.
-
Des styles CSS pour mettre en forme le texte, les tableaux et les formulaires...
-
Des styles CSS permettant d’afficher des boutons attrayants et des images design.
-
Des composants d’interface pour dynamiser vos sites web : barre de menus, groupe de bouton, fil d’Ariane, pagination, vignette d’image, liste...
-
De nombreuses règles CSS qui viennent vous aider pour améliorer le design de vos pages web de manière élégante : des jeux de couleurs, des bordures, des flottements et des positions pour les blocs d’information, des marges supplémentaires...
La compatibilité avec les navigateurs
Bootstrap utilise les techniques de mise en page Flexbox avec les CSS3, ce qui implique d’utiliser des navigateurs récents. Pour exploiter des pages conçues avec Bootstrap, il faut utiliser Google Chrome en version supérieure ou égale à 60, Firefox supérieur ou égal à 60, Apple Safari supérieure ou égale 12 et les navigateurs sous iOS supérieur ou égal 12..
Pour la compatibilité des CSS avec les navigateurs, Bootstrap a fusionné une partie de la librairie Normelize.CSS (https://necolas.github.io/normalize.css/) et le reset HTML dans un module CSS unique nommé Reboot.
Télécharger les exemples
Notez que vous pourrez télécharger tous les exemples de ce livre depuis le site des Éditions ENI (https://www.editions-eni.fr), sur la page du site relative à ce livre.