R312 — CM #1

Développement front et intégration

Présentation

Nom: R312 : Développement front et intégration
Sur AMeTICE: [23-24]-S3- R312 Développement front et intégration
Séances: 1 CM + 3 TD + 7 TP

Objectifs

Découvrir les frameworks pour le développement front-end

Bootstrap en particulier
faire des sites web responsives
interfaces interactives

Évaluation

Examen sur machine (60%) et exercices de TP (40%)

Règles

Prendre des notes en cours
Ne pas parler pendant mes explications
Pas de smartphone ni réseaux sociaux
Ponctualité
Rendus individuels (triche durement pénalisée)

Règles (pour moi)

Joignable par mail, forum du cours, mon bureau (C07)
Répondre à vos questions

Responsive web design (RWD)

Un site web responsive : wikipedia

Un site un peu responsive : craigslist.org

Un site pas responsive : lien

Évolution des dispositifs

Imprimerie en Europe (années 1450)
WWW (début années 1990) : le contenu est rendu
Premier smartphone, iPhone (2007) : internet sans ordinateur
Première tablette, iPad (2010) : encore un autre dispositif
Responsive Web Design, par Ethan Marcotte (2010) : nouvelle problématique, après 5 siècles

RWD : ensemble de techniques pour adapter les pages web à toutes les tailles d'écran en gardant un bon rendu et ergonomie.

En français, responsive = réactif, adaptatif.

À éviter

Penser que tout le monde utilise un ordinateur : statistiques
Simple redimensionnement : contenu (texte, images) trop petit
Scrolling horizontal : on lit horizontalement
Mise en page complètement différente : UX dégradée

Brainstorming

Quelles techniques peut-on utiliser pour adapter une mise en page à plusieurs largeurs d'écran différentes ?

collapser des parties (menus, textes)
transformer l'horizontal en vertical
cacher des parties non essentielles
…

Plusieurs solutions techniques :

Développer des applications pour les smartphones et tablettes (Gmail) ⟶ installation, Android/iOS
Faire une page spécifique pour les petits écrans (Wikipedia)⟶ difficile à maintenir
Avoir des règles CSS pour différentes tailles d'écran ⟶ idéale !

Requêtes média (media queries)

@media (min-width: 576px) {
  body {
    background-color: red;
  }
}

Valeurs relatives

div.boite  {
  margin: 3%;
  width: 15%;
}

Tailles maximales/minimales

.img-fluid {
  max-width: 100%;
  height: auto;
}

En bref

Responsive web design : problématique spécifique du développement web
Conception de la mise en page (design) + réalisation technique (CSS)
Difficile avec HTML + CSS (sans framework)

Rappel de HTML + CSS

Front/back-end

Deux catégories dans le développement web

Front-end	Back-end
coté client (utilisateur)	coté serveur (hébergeur)
Présenter le contenu	Générer le contenu
HTML, CSS et JavaScript	PHP, Java, Python, Ruby, C#…

HTML, CSS et JavaScript

HTML est un langage de balisage qui s'occupe du contenu (texte, images, vidéos), de sa sémantique (fonction, importance) et de sa structure

CSS est un langage qui décrit la présentation du document HTML (mise en page, couleurs, polices, animations)

JavaScript (JS) est un langage de programmation pour rendre les pages web interactives

Exemple de HTML

<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>Mon site web</title>
  </head>
  <body>
    <h1>Bienvenue</h1>
    <p>Vous êtes sur ma page web.</p>
  </body>
</html>

Exemple de CSS

body {
  background-color: red;
}
p {
  margin: 10px 0;
  padding: 5px;
  border: 1px solid #999;
}
h1 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

Notions de HTML

Un document HTML (avec extension .html) contient des éléments, délimités par une balise ouvrante et une balise fermante.
Il existe plus de 100 éléments différents en HTML5.

Ce qui se trouve entre les deux balises est le contenu.

Un élément peut avoir des attributs, comme class, id, style ou href.

Structure basique d'un document HTML :

<!DOCTYPE html> <!-- parce que c'est un fichier HTML-->
<html lang="fr">
  <head>
    <!-- informations pour le navigateur -->
  </head>
  <body>
    <!-- partie visible -->
  </body>
</html>

Dans l'entête (<head>)


<head>
  <!-- Titre de la page web, *obligatoire* -->
  <title>Mon titre</title>
  <!-- Encodage, nécessaire en français -->
  <meta charset="utf-8">
  <!-- Autres métadonnées -->
  <meta name="description" content="Description de cette page web">
  <meta name="author" content="Le nom de l'auteur">
  <!-- Lien vers une feuille de style -->
  <link rel="stylesheet" href="css/style.css">
</head>

Dans le corps (<body>), il y a deux types d'éléments : les blocks (comme <div>) et les inlines (<span>).

Block : empilement vertical, toute la largeur
Inline : empilement horizontal, largeur du contenu

Les éléments <div> et <span> n'ont pas de sémantique

Éléments sémantiques

Sections : <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>
Texte : <h1>, …, <h6>, <p>, <em>, <strong>, <a>
Structure : <ul>, <ol>, <dl>, <table>, <form>

Bonne structure et sémantique correcte :

Meilleure visibilité du contenu, plus facile à parcourir
Mieux pour le référencement naturel (SEO)
Adapté aux malvoyants
Code CSS et JavaScript plus simple

Validez toujours votre code HTML avec W3C Markup Validation Service

Notions de CSS

Un document CSS (avec extension .css) contient des règles, avec un sélecteur suivi de ses déclarations (entre accolades).
Le sélecteur permet d'identifier un type d'élément HTML, et les déclarations définissent comment il est affiché.

Chaque déclaration est formée par une propriété suivie d'une valeur.

Il existe beaucoup de sélecteurs, propriétés et valeurs.

Trois façons d'écrire du code CSS :

En ligne, avec l'attribut style


<h1 style="color: blue; background-color: pink">
  Un titre en bleu sur fond rose
</h1>

Dans la balise <style>


<style>
  h1 {
    color: blue;
    background-color: pink;
  }
</style>

Dans un fichier externe linké


<link rel="stylesheet" href="feuille-de-style.css">

Sélecteur

Permet d’identifier les éléments sur lesquels la règle est appliquée

Simple : h1, .une-classe, #un-identifiant
Élément avec classe : p.important
Un élément dans un autre : header h1

De plus : pseudo-classes (:hover) et pseudo-éléments (:first-child)

Entraînez-vous avec CSS Diner

Modèle des boîtes

Propriétés : width, height, padding, border, margin…

Ressources

MDN : documentation, tutoriels, références et cours de HTML, CSS et JS [url]
w3schools : tutoriels et références de HTML, CSS, JS, jQuery, Bootstrap… [url]
OpenClassrooms : cours en ligne sur tout [url]
freeCodeCamp : cours de HTML, CSS, JS, jQuery, Bootstrap… Newsletter [url]
CSS-Tricks : blog [url]
Grafikart.fr : tutoriels vidéos [url]

En bref

HTML et CSS sont les bases du développement web front-end
Faire des feuilles de style CSS pour avoir une belle page web peut être pénible, donc il vaut mieux utiliser un framework
Dans ce cours, on va utiliser Bootstrap

Bootstrap

C'est quoi ?

Bootstrap est un framework, un ensemble de règles CSS et de scripts JS pour créer des sites web beaux, responsives, et avec des animations.

Bootstrap a été conçu par Mark Otto et Jacob Thornton. Bien que Bootstrap ait été créé chez Twitter, c'est libre (licence MIT) et open source.

Nous utiliserons Bootstrap pour :

Faire des mises en page riches (complexes)
et responsive

Il existe d'autres frameworks front-end : Materialize, Foundation, Tailwind …

Dernières versions

version	date
5.3.1	juillet 2022
5.0	mai 2021
4.0	janvier 2018
3.0	août 2013

Vue d'ensemble

Pour utiliser Bootstrap, il suffit de :

Ajouter le lien pour les règles CSS
Ajouter le lien pour les scripts JS
Ajouter des attributs class dans les éléments HTML avec des noms définis dans Bootstrap

Exemple minimal


<!DOCTYPE html>
<html lang="fr">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
  </head>
  <body>
    <h1>Bonjour le monde</h1>

    <!-- Optional JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
  </body>
</html>

Un exemple plus complet


<!DOCTYPE html>
<html lang="fr">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">

    <title>Exemple plus complet</title>
  </head>
  <body>
    <blockquote class="blockquote">
      <p>
        Nullam quis risus eget urna mollis ornare vel eu leo.
        Aenean eu leo quam.
        Pellentesque ornare sem lacinia quam venenatis vestibulum.
      </p>
      <footer class="blockquote-footer">
        Cursus Ridiculus
        Nullam : <cite title="Titre de la source">Fusce Quam</cite>.
      </footer>
    </blockquote>
    
    <div class="alert alert-primary" role="alert">
      Vestibulum Tortor Euismod Porta Egestas
    </div>
    
    <p>Un hippopotame :</p>
    <img src="https://media.istockphoto.com/photos/hippo-with-clipping-path-on-white-background-picture-id520386707" class="img-thumbnail" alt="Un hippopotame">

    <!-- Optional JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
  </body>
  </body>
</html>

Regardez le résultat

Site web officiel

getbootstrap.com

Docs: Documentation officielle, bonne et complète
Examples: Exemples de sites web
Blog: Dernières actualités

Documentation

Il y a 4 sections principales :

Layout (mise en page): la grille Bootstrap
Content (contenu rédactionnel): typographie, images, tableaux...
Components (composants): objets d'interface (alertes, barres de navigation...)
Utilities (utilitaires): paramètres de mise en forme

Ressources

Documentation officielle [url]
w3schools : Bootstrap 5 [url]
Traversy Media : Bootstrap 5 Crash Course [youtube]

En bref

RWD : concevoir des sites web ergonomiques pour tout type de dispositif
Bootstrap est le principal framework pour faire du RWD
Libre, open souce, bonne documentation
Utiliser un framework permet d'aller plus loin et plus vite dans la création d'un site web