M3206 — CM #1

Intégration multimédia S3

Présentation du module

Nom
M3206 : Intégration multimédia S3
Sur AMeTICE
[20-21]-Intégration multimédia S3
Séances
CM TD TP
1 3 7
Objectifs
Utiliser Bootstrap, donc
  • découvrir un framework front-end
  • faire des sites web responsives
  • apprendre à se débrouiller

mais pas
  • apprendre par cœur tous les outils
  • créer des nouveaux thèmes
Évaluation
  • Examen : 10 pts
  • Présentation orale : 4 pts
  • Projet : 6 pts
  • Exercices : 5 pts
Règles
  • Prendre des notes en cours
  • Ne pas parler pendant mes explications
  • Pas de smartphone ni réseaux sociaux
  • Ponctualité
  • Covid-19 : masque du nez au menton
Règles (pour moi)
  • Joignable par mail, forum du cours, mon bureau (C07)
  • Répondre à vos questions

Responsive web design (RWD)

  • Site web non responsive : [url]
  • Un peu responsive : [url]
  • Responsive : [url]

É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 2020
  • 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, thumbnails)
  • transformer l'horizontal en vertical
  • cacher des parties non essentielles
  • …

Plusieurs solutions techniques :

  • Développer des applications pour les smartphones et tablettes (installation, Android/iOS)
  • Faire une page spécifique pour les petits écrans (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#, etc.

Développeur full stack = il fait les deux.

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>
  <head>
    <title>Page Title</title>
  </head>

  <body>
    <h1>This is a Heading</h1>
    <p>This is a paragraph.</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 (elements), délimités par une balise (tag) 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.

Plus d'information ici

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 :

  • Meilleur visibilité du contenu, plus facile à parcourir
  • Mieux pour le référencement naturel (SEO)
  • Adapté aux malvoyants
  • 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 (rules), avec un sélecteur (selector) 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.

Plus d'information ici

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

  1. En ligne, avec l'attribut style 
    
<h1 style="color: blue; background-color: pink">
  Un titre en bleu sur fond rose
</h1>
  2. Dans la balise <style> 
    
<style>
  h1 {
    color: blue;
    background-color: pink;
  }
</style>
  3. 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.

  1. Simple : h1, .une-classe, #un-identifiant
  2. Élément avec classe : p.important
  3. 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

Le modèle des boîtes illustré

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, etc. [url]
  • OpenClassrooms : cours en ligne sur tout [url]
  • freeCodeCamp : cours de HTML, CSS, JS, jQuery, Bootstrap, etc. 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 faut mieux utiliser un framework
  • Dans ce module, on va utiliser Bootstrap

Découverte de Bootstrap

C'est quoi ?

Bootstrap est un framework, une plateforme, 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 :

  1. Faire des mises en page riches (complexes)
  2. et responsive

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

Dernières versions

version date
4.5.2 6 août 2020
4.3.1 13 février 2019
4.2.1 21 décembre 2018
4.0 18 janvier 2018
3.0 19 août 2013

Donc ça ne devrait pas trop changer d'ici à 2023 (?)

Plus sur la numérotation des versions ici

Vue d'ensemble

Pour utiliser Bootstrap, il suffit de :

  1. Ajouter le lien pour les règles CSS
  2. Ajouter le lien pour les scripts JS
  3. 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, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

    <title>Exemple minimal</title>
  </head>
  <body>
    <h1>Bonjour le monde</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" 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 rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" 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 -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  </body>
</html>

Et encore plus.

Site web officiel

getbootstrap.com

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

Documentation

Il y a 4 sections principales :

Mise en page (layout)
la grille Bootstrap
Contenu rédactionnel (content)
typographie, images, tableaux...
Composants (components)
objets d'interface (alertes, barres de navigation...)
Utilitaires (utilities)
paramètres de mise en forme
Ressources
  • Documentation officielle [url]
  • w3schools : Bootstrap 4 [url]
  • Christophe AUBRY : Bootstrap 4 pour l'intégrateur web [url, fnac] ← demander à la BU
  • Traversy Media : Bootstrap Beginner Crash Course [youtube]

Conclusion

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

À faire

  • Mettez à jour votre photo de profil sur AMeTICE
  • Révisez ce cours avant la prochaine séance de TP