M3206 — TD #1

Intégration multimédia S3

Présentation du module

Nom

M3206 : Intégration multimédia S3

Sur AMeTICE

[18] - S3 - M3206 : Intégration multimédia (A. Gonzalez-Lorenzo)

Séances

CM	TD	TP
0	4	8

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

Ne pas parler pendant mes explications
Pas de smartphone ni réseaux sociaux
Ponctualité

Règles (pour moi)

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

Responsive web design (RWD)

Page-web non responsive : [url]
Un peu responsive : [url]
Responsive, avec des erreus : [url]
Responsive : [url]

Évolutions des dispositifs

Imprimerie (en Europe) : années 1450
WWW : début années 1990
Premier smartphone (iPhone): 2007
Première tablette (iPad): 2010
Responsive Web Design, par Ethan Marcotte (2010)
Statistiques d'usage en 2018 [url]

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

collapser des parties (menus, thumbnails)
transformer l'horizontal en vertical
cacher des parties non esentielles

Plusieurs solutions :

Faire une page specifique pour les petits écrans (Wikipedia)
Développer des applications pour les smartphones et tablettes (Amazon)
Avoir des règles CSS pour différente tailles d'écran.

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;
}

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)
HTML, CSS et JavaScript	PHP, Java, Python, Ruby, C#, etc.
Afficher le contenu	Générer le contenu

Un développeur est dit full stack s'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;
}

h {
  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 contenir des attributs, comme class, id, style ou href.

Structure basique d'un document HTML :


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

Dans l'entête (<head>)


<head>
  <!-- Titre de la page web, *obligatoire* -->
  Mon titre
  <!-- Encodage, nécessaire en français -->
  
  <!-- Autres métadonnées -->
  
  
  <!-- Lien vers une feuille de style -->
  
</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 règles définissent comment il est affiché.

Chaque déclaration est formé 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 et 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, etc. [url]
OpenClassrooms : cours en ligne sur tout [url]
freeCodeCamp : cours de HTML, CSS, JS, jQuery, Bootstrap, etc. [url]
CSS-Tricks : blog [url]
Grafikart.fr : tutoriels vidéos [url]
Cours de M2206 (par Z. El-Khalfi) [pdf]

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.

Dernières versions

version	date
4.3.1	13 février 2019
4.2.1	21 décembre 2018
4.1.3	24 juillet 2018
4.1	9 avril 2018
4.0	18 janvier 2018
3.0	19 août 2013

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

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, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" 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.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</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="hippopotame.jpg" class="img-thumbnail" alt="Un hippopotame">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" 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
~~Themes~~: Thèmes payants
Expo: Des sites web utilisant Bootstrap
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