Réalisation avec Bootstrap
|
Objectif
|
On propose de mettre en application les différentes fonctionnalités de Bootstrap 5 présentées dans les TP afin de réaliser un site complet et fonctionnel. Les données de formulaire ne seront pas prises en charge par notre application, qui se limitera à la mise en place de pages statiques.
1. Cahier des charges
La site réalisé sera celui d’une compagnie de distribution d’énergie ou d’eau s’inspirant de https://eau.grenoblealpesmetropole.fr/. On y reconnait : une présentation responsive, une barre de navigation, des cartes pour accéder aux pages des différents services, des formulaires de connection, de déclaration de relevé de consomation, un carousel, un menu dropdown.
Une fois loggé, un tituliare de contrat à accès à un site plus fourni :
avec un menu utiilisateur en dropdown :
et un menu de services dans une barre verticale repliable :
Les îcones de la barre latérale donnent à accès aux pages :
-
d’information statutaires sur le contrat
-
à la page des relevés de consommation
-
à la page d’historique des factures
-
à une page de mise en place de services
-
à une page de liens vers des démarches
-
enfin une aide apparait en modal via le dernier item
2. Outils
2.1. Hébergement
Pour coller à la réalité, vous allez publier votre code sur un hébergeur public et tester votre application sur votre propre terminal mobile.
2.1.1. Alwaysdata
Alwaysdata est un hébergeur proposant une offre gratuite avec un volume limité, mais pleinement fonctionnelle. Rendez-vous sur l’URL https://www.alwaysdata.com/fr/signup/ et inscrivez-vous au pack gratuit en utilisant votre adresse e-mail institutionnelle. Une fois inscrit, connectez-vous à l’espace d’administration.
Pour obtenir un sous-domaine sur Alwaysdata, vous devez créer un compte. Dans l’espace Administration, allez dans la section Espace client, puis Comptes. Créez un compte spécifique pour ce TP en cliquant sur Ouvrir un nouveau compte. Nommez-le, par exemple, avec votre identifiant institutionnel, et associez-le à un pack gratuit. Le nom de ce compte déterminera l’URL d’accès par défaut à votre site, et le mot de passe défini sera utilisé pour l’accès distant. Votre hébergement sera alors accessible via : http[s]://nom-du-compte.alwaysdata.net. Testez cette URL dans un navigateur.
2.1.2. Configuration de l’accès distant via WebDAV
Configurez maintenant l’accès distant à votre hébergement en activant le montage WebDAV. Dans l’administration, accédez au menu Accès distant → WebDAV. Vérifiez qu’un compte WebDAV est bien présent et notez son nom d’hôte. S’il n’existe pas, ajoutez un utilisateur WebDAV avec / ou www comme répertoire racine.
Créez ensuite un montage WebDAV sur votre poste en ajoutant un lecteur réseau dans l’explorateur de fichiers. L’adresse réseau commencera par :
https://webdav-nom-du-compte.alwaysdata.net.
2.1.3. Mise en ligne de votre projet
Dans le répertoire www de votre hébergement, renommez le fichier index.html (la page par défaut d’Alwaysdata) en index.html.old. Ensuite, créez un dossier tp et copiez-y le contenu de vos travaux précédents.
Pour autoriser le parcours de l’arborescence sur votre hébergement, ajoutez un fichier .htaccess contenant la ligne suivante :
.htaccessOptions +IndexesRafraîchissez votre navigateur à chaque modification en visitant l’URL :
http[s]://nom-du-compte.alwaysdata.net/[arborescence]
et testez votre site.
2.2. Personnalisations et Couleurs
2.2.1. Icônes
Bootstrap propose un pack d’icônes officiel appelé Bootstrap Icons, bibliothèque d’icônes vectorielles gratuites.
Pour utiliser Bootstrap Icons, ajoutez ce lien dans le <head> de votre HTML :
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">Puis utilisez les icônes avec la classe bi bi-nom-de-l’icone :
<i class="bi bi-house"></i> <!-- Maison -->
<i class="bi bi-heart"></i> <!-- Cœur -->Les îcones peuvent être personnalisées :
-
en taille
<i class="bi bi-alarm fs-1"></i> <!-- Grande icône -->-
en couleur :
<i class="bi bi-heart text-danger"></i> <!-- Rouge -->-
intégrées dans un bouton** :
<button class="btn btn-primary">
<i class="bi bi-download"></i> Télécharger
</button>Documentation sur : Bootstrap Icons
2.2.2. Couleurs
Le choix des couleurs est libre et laissé à votre appréciation. Vous pouvez sélectionner les teintes qui vous conviennent le mieux en fonction de l’esthétique recherchée et de l’ambiance que vous souhaitez créer. L’important est de garantir une bonne lisibilité et une harmonie visuelle.
Bootstrap propose deux thèmes : light par défaut ou dark. Le thème est appliqué à l’ensemble d’une page par :
<body data-bs-theme="dark" class="bg-body">Des couleurs personnelles peuvent être simplement déclarées dans une feuille de style locale (ou externe comme par exemple custom.css) à la suite de l’inclusion de bootstrap.css dans la page.
Par exemple :
<style>
.btn-primary {
background-color: #ff5733;
border-color: #ff5733;
}
.btn-secondary {
background-color: #33c3ff;
border-color: #33c3ff;
}
.text-primary {
color: #ff5733;
}
.text-secondary {
color: #33c3ff;
}
</style><div class="container text-center mt-5">
<h1 class="text-primary">Titre principal</h1>
<p class="text-secondary">Un texte avec la couleur secondaire.</p>
<button class="btn btn-primary">Bouton principal</button>
<button class="btn btn-secondary">Bouton secondaire</button>
<button class="btn btn-success">Succès</button>
<button class="btn btn-danger">Danger</button>
</div>Remarquez que seule la couleur pricipale des boutons a été modifiée (pas pour les click, les survols etc). La création d’un thème complet est très fastidieuse comme vu ici
Vous pouvez vous aider dans le choix de couleurs avec les sites : Adobe Color ; ColorHexa ou Coolors.
3. Méthodologie
3.1. Arboresence des pages
La réalisation s’organisera avec les fichiers :
wwww
└── compte/
├───┬── moncompte.html # accueil utilisateur
| ├── factures.html
| ├── conso.html
| ├── contrat.html
| ├── services.html
| └── demarches.html
├── index.html # accueil du site
├── souscription1.html # partie 1 de la souscription
├── souscription2.html # partie 2 de la souscription
└── resiliation.htmlLa vadidation du formulaire de connexion dirigera vers l’accueil utilisateur sans authentification.
3.2. Développement
Toutes les pages ont en commun la barre de navigation, demarez votre développement par celle-ci dans l’accueil du site. Copiez cette barre dans les autres pages.
Pour les pages liées à l’utilisateur loggé, la barre verticale est en commun. Chaque page (factures, conso, contrat, etc.) aura cette même barre avec l’item correspondant en surbrillance avec la classe .active.