formations:devweb_2

Devweb 102 : Le responsive & Bootstrap

Cette seconde formation permet d'avoir une vue plus actuelle du développement web en présentant les outils du développeur d'aujourd'hui.

Compétences abordées : HTML, CSS, Responsive, Media Queries, Inspecteur d’éléments, Bootstrap

Avoir suivi la formation Devweb 101 : Les bases du développement web. Pour accéder aux fichiers depuis son ordi personnel on utilise FileZilla. Son utilisation est décrite ici : Transfert de fichiers.

L’inspecteur d’éléments fait partie des outils indispensables aux développeurs pour leurs tests de rendu.

En fonction des navigateurs, il a des noms différents :

  • Firefox : examiner l’élément
  • Google Chrome : inspecter
  • Safari : inspecter l’élément

On y accède via clic droit sur le corps de la page qui nous intéresse. On illustrera l’utilisation de cet outil sur Google Chrome.

On voit ici l'interface de l'inspecteur sur Google Chrome. Les sections encadrées en rouge sont celles dont nous nous servons en général.

Le panneau HTML et le panneau CSS

Grâce au panneau HTML, il est possible d'examiner et d'éditer le code HTML d'une page en direct.

Voici un exemple très simple avec MyCentraleAssos :

On voit ici que le titre, une fois changé dans le code, est modifié sur la vue.

Survoler une ligne dans le panneau HTML le mettra en surbrillance dans la page.

Lorsqu'une ligne du code HTML est sélectionnée, le panneau CSS affiche tous les styles qui s'appliquent à l'élément sélectionné. Il est ainsi possible, ici encore, de modifier les propriétés qui s'appliquent pour chaque élément.

Ici on a modifié la taille du texte.

Cependant, il arrive que certaines propriétés notées dans “Style” soient pas actives (par exemple la couleur est barrée ci-dessous). Cela est dû à d'autres propriétés surplombant la première.

Attention, éditer le code dans l'inspecteur ne modifiera en aucun cas le code réel de votre page. L'inspecteur n'est là que pour vous permettre d'expérimenter. Si vous voulez rendre vos modifications permanentes, il faut modifier le code source de votre page.

Le sélecteur d'éléments

Le sélecteur d'éléments permet de remonter à la position d'un élément dans le code HTML en le sélectionnant sur le corps de la page elle même.

Le Toggle device mode

Le Toggle device mode permet d'afficher la page actuelle sur la vue correspondant à une résolution d'écran différente au choix.

Console

La console affiche des informations associées à la page web active. Cela comprend les requêtes réseau, le JavaScript, le CSS, les erreurs et avertissements de sécurité.

Elle permet également d'interagir avec la page web en exécutant du JavaScript.

Réseau

Lorsque l’on construit un site web, il faut veiller à ce que sa lecture soit confortable. Et cela est particulièrement difficile lorsque l'on sait que les différents utilisateurs d'un même site n'utilisent pas le même navigateur par exemple. Cette problématique réapparaît lorsque l'on se penche sur les différents écrans par lesquels un utilisateur aimerait accéder à notre site.

C'est pour cela que l'on va œuvrer à rendre nos site responsive, c’est-à-dire que l’on va faire en sorte qu’ils s’adaptent eux même à chaque taille d’écran.

Ainsi, lorsque l'on construit la structure d'un site web, il est important de se poser la question de son apparence en fonction des différentes résolutions d'écran.

Les media queries sont des règles à appliquer pour changer le design d'un site en fonction des caractéristiques de l'écran.

Bootstrap est une boite à outils comprenant plusieurs modules et permettant de faire du responsive assez facilement.

La première étape est de télécharger les fichiers nécessaires à l'installation de Bootstrap. En plus de ceux-ci, la librairie JQuery est nécessaire. Les fichiers sont donc disponibles ici :

Il faut ensuite extraire le contenu pour avoir le contenu des dossiers css et js dans notre dossier web.

L'architecture des dossiers devrait ressembler à ceci :

css/
├── bootstrap.css
├── bootstrap.css.map
├── bootstrap.min.css
└── ...
js/
├── bootstrap.bundle.js
├── bootstrap.bundle.js.map
├── bootstrap.bundle.min.js
├── ...
└── jquery.min.js
index.html
Pour faire vos essais réenommez votre fichier de la dernière fois (en cv.html par exemple).

Ensuite dans le fichier html il faut ajouter les parties suivantes pour inclure les fichiers :

Dans le head :

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

Avant la fin du body :

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

Ce qui devrait donner quelque chose dans le genre :

index.html
<!DOCTYPE html>
<html>
	<head>
		<title>Titre de ma page</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
                <meta charset="UTF-8" />
	</head>
	<body>
 
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
	</body>
</html>
Le fait de mettre les balises javascript à la fin du corps de la page et non dans le head permet de charger le contenu plus rapidement et donc de donner une impression de rapidité supplémentaire au visiteur.

Bootstrap permet de découper facilement le contenu pour le positionner sur la page. Pour cela il y a un système de grille, dont le contenu peut s'ajuster facilement selon la taille de l'écran de l'utilisateur.

La grille de Bootstrap est divisée en lignes (row) qui comprend 12 colonnes (col). Par exemple :

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

produira le visuel suivant :

(cet exemple provient de la doc bootstrap 3.4 mais s'applique aussi à bootstrap4)

Voir l'exemple pour le changement sur mobile : https://getbootstrap.com/docs/3.4/css/#grid-example-mixed (utiliser l'inspecteur pour changer la taille du device)

Pour former une ligne complète, il suffit donc que la somme des valeurs des col fasse 12.

  • Si la somme dépasse 12 alors le dernier bloc sera passé à la ligne.
  • si la somme est inférieure à 12 alors les blocs n'ocuperont pas toute la ligne.

Dans l'exemple, le md de col-md-X signifie medium device. Dès que la taille de l'écran passe en dessous de ce que bootstrap considère comme un medium device, l'affichage se fait en ligne au lieu d'en colonne. Cette caractérisque permet d'organiser simplement les éléments selon la taille du device.

Selon la version de Bootstrap (3 ou 4) ces règles sont un peu différentes.

Spécificités Bootstrap 3

Pour BS3, les différentes tailles d'écran sont définies ainsi :

Spécificités Bootstrap 4

Pour BS4, les différentes tailles d'écran sont définies ainsi :

Par rapport à BS3, BS4 apporte les changements suivants : La taille des colonnes ont été redéfinies pour effectuer un étalement plus important, de plus les col-xs- deviennent des col- tout court, et le col-lg- apparaît.

Documentations

Pour en savoir plus sur la grille, voir les documentations :

A partir de maintenant on ne parlera que de Bootstrap 4. Pour BS3 il faut se référer à la documentation directement.

La Navbar (navigation bar) est la barre en haut qu'on voit sur la plupart des sites et qui contient les liens vers les différentes parties d'un site web. Bootstrap intègre une Navbar responsive de base avec quelques options.

Exemples

<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="logo.png" width="30" height="30" alt="">
  </a>
</nav>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
 
  <!-- Bouton affiché uniquement sur mobile pour dérouler -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
 
  <!-- Les éléments de la navbar -->
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

Documentation

Le modal est une petite fenêtre qui peut s'ouvrir sur une page, pour par exemple afficher un formulaire, afficher des informations supplémentaires. Le Modal est une fonctionnalité qui nécéssite du javascript normalement, mais avec Bootstrap on peut l'utiliser sans.

Utilisation

Il faut tout d'abord créer le bloc Modal lui-même. Celui-ci sera caché au début.

<div class="modal fade" id="monPremierModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Titre de ma fenêtre</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Ici un petit message.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Il y a beaucoup de code, mais ce qu'il faut remarquer c'est l'id sur la première ligne (id=“monPremierModal”), le titre : <h5 class=“modal-title”>Titre de ma fenêtre</h5>, et le corps (contenu de div class=“modal-body”). Le reste du code consitue le corps du Modal tel que défini par Bootstrap.

Ensuite pour ouvrir le modal, il faut placer un bouton :

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#monPremierModal">
  Launch demo modal
</button>

Ici les attributs font toute la fonctionnalité :

  • data-toggle=“modal” permet de dire que ce bouton doit ouvrir le modal
  • data-target=“#monPremierModal” permet d'inquer quel modal est concerné. (ID monPremierModal)

Documentation

Bootstrap dispose d'un grand nombre de composants. Ces 3 exemples ne sont qu'une petite partie des possibilités qu'offre BS4. Il est possible de tous les trouver dans la documentation.

Normalement votre site perso doit en être à la fin de la pratique de la formation Devweb 1.

Avant de continuer nous allons nettoyer un peu les fichiers de votre site, et définir quelles pages nous allons faire.

Nous allons organiser les fichiers comme suit :

  • Les fichiers css dans un dossier css/
  • Les images dans un dossier images/
css/
├── bootstrap.css
├── bootstrap.css.map
├── bootstrap.min.css
├── ...
└── style.css
js/
├── bootstrap.bundle.js
├── bootstrap.bundle.js.map
├── bootstrap.bundle.min.js
├── ...
└── jquery.min.js
images/
└── portrait.jpg 
index.html
Si ce n'est pas déjà fait, mettre tout le CSS contenu dans le fichier html dans un fichier css/style.css. Pour lier le fichier CSS (dans la balise <head>) :
<link href="css/style.css" rel="stylesheet" />

Pour les pages, on peut commencer par celles-ci :

  • Une page d'accueil, index.html
  • Une page de CV, mais remaniée, cv.html
  • Une gallerie d'images pour les photos de loutre, galerie.html
  • Et une page pour parler de vos goûts musicaux et de votre musique préférée de JuL, musique.html

Nous allons commencer par réaliser notre page d'accueil, qui sera assez simple, et qui pourra servir de “template” pour la création des autres pages.

En suivant les exemples ci-dessus, on va mettre :

  • Une Navbar avec des liens pointant vers les autres pages
  • Un corps de page indiquant le contenu du site
  • Un modal apparaîssant sur un lien de la navbar avec les informations de contact

La Navbar

Pour rappel, les liens doivent pointer vers les pages suivantes :

  • Nom du site : index.html
  • CV : cv.html
  • Galerie : galerie.html
  • Musique : musique.html

Le code suivant est un exemple d'implémentation de ces liens :

index.html
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" href="index.html">Accueil <span class="sr-only">(actuel)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="cv.html">Mon CV</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="galerie.html">De belles images</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="musique.html">Ce que j'aime</a>
          </li>
        </ul>
      </div>
    </nav>

Le Modal de contact

On va intégrer un modal avec les informations suivantes :

  • Nom/prénom
  • Titre (étudiant à centrale Marseille par exemple)
  • Adresse mail
  • Numéro de téléphone
  • Un QR code contenant les informations de contact (à générer par exemple sur https://fr.qr-code-generator.com/)

Pour un visuel de ce genre :

Le code de ce visuel :

    <div class="modal fade" id="contactModal" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Contactez moi</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="row">
              <div class="col-md-6">Jean <b>Loutre</b></div>
              <div class="col-md-6"> <i>Loutre professionnelle</i> </div>
              <div class="col-12">jean.loutre@centrale-assos.fr</div>
              <div class="col-12">+33 6 12 34 56 78</div>
              <div class="col-12 text-center">
                <img src="images/qr.png" alt="">
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" data-dismiss="modal">C'est noté</button>
          </div>
        </div>
      </div>
    </div>

Sans oublier le lien à ajouter dans la navbar :

          <li class="nav-item">
            <a href="#" class="nav-link" data-toggle="modal" data-target="#contactModal">Contact</a>
          </li>

Le corps du site

Un petit texte de bienvenue, basé sur l'utilisation de la grille !

    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h1>Bienvenue sur mon site perso</h1>
          <p>J'aime bien le poisson, et le GInfo !</p>
          <p class="text-center">
            <img src="https://ginfo.asso.centrale-marseille.fr/wp-content/uploads/2019/04/logodecoup-e1562921977806.png" alt="">
          </p>
        </div>
      </div>
    </div>

La page au complet

index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Site de Jean-Loutre</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  </head>
  <body>
 
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">Site de Jean-Loutre</a>
 
      <!-- Bouton affiché uniquement sur mobile pour dérouler -->
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
 
      <!-- Les éléments de la navbar -->
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" href="index.html">Accueil <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="cv.html">Mon CV</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="galerie.html">De belles images</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="musique.html">Ce que j'aime</a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link" data-toggle="modal" data-target="#contactModal">Contact</a>
          </li>
        </ul>
      </div>
    </nav>
 
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h1>Bienvenue sur mon site perso</h1>
          <p>J'aime bien le poisson, et le GInfo !</p>
          <p class="text-center">
            <img src="https://ginfo.asso.centrale-marseille.fr/wp-content/uploads/2019/04/logodecoup-e1562921977806.png" alt="">
          </p>
        </div>
      </div>
    </div>
 
    <div class="modal fade" id="contactModal" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Contactez moi</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="row">
              <div class="col-md-6">Jean <b>Loutre</b></div>
              <div class="col-md-6"> <i>Loutre professionnelle</i> </div>
              <div class="col-12">jean.loutre@centrale-assos.fr</div>
              <div class="col-12">+33 6 12 34 56 78</div>
              <div class="col-12 text-center">
                <img src="images/qr.png" alt="">
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" data-dismiss="modal">C'est noté</button>
          </div>
        </div>
      </div>
    </div>
 
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
  </body>
</html>

Première étape : appliquer le même design que la page d'accueil à la page du CV.

Pour intégrer une vidéo youtube : Partager → Intégrer

Exemple :

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/ByHxaDIyRTk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  • formations/devweb_2.txt
  • Dernière modification: 15/10/2019 15:41
  • par rgrondin