Intégration web ESGI 3IW 2023-2024
Edouard Sombié
Introduction
L'objet de ce cours est de passer en revue les bonnes pratiques de l'intégration web
ainsi que les outils mis à notre disposition.
Le cours sera articulé selon les grandes parties suivantes :
• Le balisage / HTML 5
• La mise en forme / CSS3
• La compilation de feuilles de style / Sass
• Créer un framework css !
Pour prolonger le cours, vous pouvez aller jeter un œil aux sites de références :
[Link]
[Link]
[Link]
HTML5 - rappels
Le langage html
• signifie Hyper Text Markup Language
• est le langage de balisage standard pour la création de pages Web
• décrit la structure d'une page Web
• se compose d'une série d’éléments (balises)
• Les éléments HTML indiquent au navigateur comment afficher le contenu
• Les éléments HTML étiquettent des éléments de contenu tels que "ceci est un titre",
"ceci est un paragraphe", "ceci est un lien", etc.
• date de 1991
HTML5 - rappels
• Les balises
<tagname> Le contenu va ici ... </tagname>
<h1> Mon premier cap </h1>
Certaines balises sont vides par définition…
<br>
• Les attributs
<tagname attr="value">... </tagname >
[Link]
HTML5 - rappels
• La structure de base
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
</body>
</html>
Elles servent à quoi ces meta ?
HTML5 - rappels
Les différents types d'images
• JPEG 16 millions de couleurs (compressé)
• PNG 16 millions plus transparence
• GIF 256 couleurs, peut être animé
• SVG vectoriel
• APNG comme le png mais animé Pas encore dans
• WEBP comme le png ou jpg mais compression plus efficace les standards du W3C
[Link]
HTML5 - rappels
• Les principales balises structurantes du html5
<header> Entête
<main> Contenu principal
<footer> Pied de page
<nav> Principaux liens de navigation
<section> Section dans un document
• Les autres balises html5 importantes
<article> Un article dans un document
<aside> Le contenu annexe de la page
<figure> Contenu autonome (image et légende)
<figcaption> Légende pour un élément <figure>
<time> Date ou heure
HTML5 - rappels
Quelle balise manque à
cette page ?
HTML5 - rappels
Markup et SEO
La structuration du contenu selon des balises « signifiantes » est considérée comme
une bonne pratique. Notamment pour le référencement par les moteurs de recherche.
En plus de ces considérations de SEO, une telle structuration est encouragée pour
rendre le contenu facilement accessible aux clients « machines » présents et à venir.
Les balises structurantes du html5 doivent être utilisées au détriment des balises <div>.
A ces balises, il faut ajouter les balises classiques <strong>, <em> et <h1> qui jouent
un rôle important dans l’indexation d’une page.
Exercice 1
Structure html à partir d’un template graphique.
CSS3 - rappels
Dimensionnement
On distingue en html 2 grands types de balises, celles qui se présentent sous forme de
rectangle (block) et les autres qui se présentent en ligne (inline)
Balises de type block : h1, main, p, table...
Balises de type inline : a, em, span...
On ne peut dimensionner que les balises de type block. De même, cela n'a pas de sens
d'ajouter une marge interne ou externe à un élément inline.
box-sizing
content-box (valeur par défaut)
border-box (le plus utile) "
margin : 0 auto
Centre horizontalement
CSS3 - rappels
Positionnement
Le positionnement des éléments est un des principaux enjeux de l'intégration web.
Pour atteindre nos objectifs, nous avons 3 approches différentes qui peuvent être
complémentaires.
• Le positionnement flottant : float
• Le type d'affichage : display
• Le type de position : position
CSS3 - rappels / Positionnement
float
none (défaut), right, left
• Si différent de none, élément retiré du flux normal, se place à droite ou à gauche de
son conteneur. Demeure tout de même dans le flux.
• Implique l'utilisation d'une disposition en bloc : change la valeur du display.
• Sa hauteur n'est pas prise en compte par son parent #
• Nécessite un clearfix $ qui repose sur la propriété clear
Note :
Ce type de positionnement est de moins en moins fréquent et peut (à juste titre) être
considéré comme désuet. Toutefois, il est important d'en comprendre le
fonctionnement et de savoir comment prendre en compte des éléments flottants.
Il arrive, dans de rares cas, d'avoir à faire flotter un bloc %
CSS3 - rappels / Positionnement
display
block, inline...
• none : élément pas affiché
• inline-block : en ligne mais forme un rectangle (ne va pas à la ligne)
• flex : se comporte comme un conteneur flexible
• list-item, table, grid...
On reparlera des flexboxes un peu plus tard... &
CSS3 - rappels / Positionnement
position
• static (défaut) : élément positionné dans le flux avec sa position par défaut
• relative : positionné dans le flux, mais peut être décalé avec les propriétés top, right,
bottom, left
• absolute : sorti du flux, positionné avec top, right, bottom, left, par rapport à son
plus proche ancêtre positionné.
• fixed : sorti du flux, positionné avec top, right, bottom, left, par rapport à la fenêtre
(ne bouge pas lors du scroll).
• sticky : positionné dans le flux mais sorti du flux et positionné de façon fixe par
rapport au parent ("collé" en haut).
CSS3 - rappels
Les unités
• Les unités absolues
px, pt, mm, in...
Dans la plupart des cas, elles sont à éviter !
Elles nous serviront uniquement à évaluer la taille du viewport ou à la création de styles
pour l'impression.
• Les unités relatives
%, em, rem, vw, vh, vmin, vmax...
Les unités relatives sont à privilégier car elles permettent une intégration simple et
facilement modifiable. De plus, elles permettent d'avoir une interface en adéquation
avec les réglages du navigateur des visiteurs.
font-size: 1rem;
CSS3 - rappels
Les sélecteurs et les combinateurs
On est bien d'accord sur le fait qu'on connaît ces sélecteurs ?
.selector1
#selector1
[attr]
selector1 selector2
selector1 > selector2
selector1 + selector2
selector1 ~ selector2
Si ce n'est pas le cas, c'est le moment de se mettre à jour...
CSS3 - rappels
Les pseudo classes
Permettent de sélectionner un élément dans un état particulier.
Elles commencent par :
:hover, :checked, :active
:first-child, :last-child
:nth-child(n), :not(selector)...
Les pseudo éléments
Permettent d'ajouter ou de sélectionner un élément à l'intérieur d'un autre.
Ils commencent par ::
::after, ::before
::first-letter, ::first-line
::selection
*::after{ Note : sans valeur de content,
content:""; le pseudo élément ::before ou ::after n'est pas créé !
}
CSS3 - rappels
Les polices de caractères
Il existent deux formats officiels pour les polices de caractères sur le web.
On n'utilisera que celles-ci !
.woff et .woff2
Beaucoup de projets reposent sur des polices Google fonts.
Dans ce cas, on les utilisera directement à partir du CDN Google avec l'instruction
@import
Pour les projets nécessitant une police commerciale, il faudra la convertir du format
d'origine (.ttf, .otf ...) vers un format web.
De nombreux outils de conversion en ligne et gratuits existent, retenons celui-ci :
[Link]
CSS3 - rappels
Quelques règles css
En principe, vous connaissez déjà les principales règles css, mais connaissez-vous
celles-ci ?
scroll-behavior, scroll-margin-top
transition, animation
transform
object-fit, object-position
aspect-ratio
align-items, justify-content
Des mot-clés à connaitre et à utiliser
inherit, initial, unset
currentColor
Exercice 2
Positionner tous les éléments du TP1 avec des flottants !! '
Ça va être un peu galère, mais on va voir
des pratiques très importantes ( :
• Utiliser un container
• Contrôler le padding avec le box-sizing
• Contrôler les flottants avec un clearfix
• Contrôler le margin-collapsing
• Contrôler le positionnement vertical
• Utiliser calc() et nth-child()
CSS3
Le positionnement flex
On oublie les flottants et on revient en 2023 !
C'est clairement la meilleure manière d'agencer des éléments dans une mise en page.
Elle règle un certains nombre de problèmes liés au margin-collapsing et à l'alignement
vertical et offre des actions jusque là impossibles sans javascript.
Pour faire simple, le positionnement flex va nous permettre de :
• Dimensionner les blocs enfants indépendamment de leur contenu.
• Les présenter horizontalement (row) ou verticalement (column).
• Simplifier l’alignement des éléments (axe vertical).
display : flex;
La seule alternative crédible au positionnement flex est le grid system : plus puissant
mais aussi plus complexe à mettre en œuvre...
CSS3 - le positionnement flex
Les propriétés de base d'une flexbox
• flex-direction
Direction de la boîte (row, column, row-reverse, column-reverse)
• flex-wrap
Avec ou sans saut de ligne (nowrap, wrap, wrap-reverse)
• justify-content
Alignement sur l'axe principal (flex-start, flex-end, center, space-between, space-
around, space-evenly)
• align-items
Alignement sur l'axe secondaire (stretch, flex-start, flex-end)
• align-content
Alignement des lignes sur l'axe secondaire
(start, center, space-between, space-around)
• flex-flow (combinaison des propriétés flex-direction et flex-wrap)
CSS3 - le positionnement flex
Les propriétés de base d'un item flex
• order
Ordre d'affichage de l'élément dans la flex box
• align-self
Alignement de l'élément sur l'axe secondaire
• flex-grow
Capacité à être agrandi par la flexbox
• flex-shrink
Capacité à être réduit par la flexbox
• flex-basis
Longueur de base de l'élément dans la flex box
• flex
combinaison de flex-grow, flex-shrink et flex-basis - valeur par défaut : 0 1 auto
CSS3 - le positionnement flex
Mettons cela en pratique avec un petit exercice en ligne :
[Link]
Exercice 3
Positionner tous les éléments du TP1 avec des flexboxes !! )
Beaucoup plus simple et robuste que dans
l'exercice précédent...
• flex-direction
• flex-wrap
• flex-direction
• justify-content
• align-items
• flex-grow
• flex-shrink
• flex-basis
• order
CSS3
Les variables css
Appelées également "propriétés personnalisées", les variables css sont visibles par le
navigateur web. Elles peuvent être utilisées afin de définir des styles en fonction du
contexte. Leur utilisation est considérée comme une très bonne pratique. *
:root{
--text-color: #333;
}
header{
--text-color: #red;
}
a{
color: var(--text-color);
}
CSS3
Les fonctions css
Fonctions permettant de calculer des valeurs au moment du rendu dans le navigateur.
Ces valeurs seraient impossibles à définir lors de l'écriture des feuilles de style...
calc()
calc(50% - 1em)
min()
max(1vw, 1rem)
max()
max(12px, 1em, 3vw)
clamp()
clamp(MIN, VAL, MAX)
CSS3
Les transitions css
Lorsque l'on désire animer des éléments d'une page web, il est recommandé de faire
appel aux transitions ou animations css, au détriment du javascript.
Dans ce cas de figure, le code js va servir à modifier des règles css et c'est cette
modification qui va induire l'animation (transition).
transition: <property> <duration> <timing-function> <delay>;
.maClasse{
transition: all 0.3s;
}
.maClasse{
transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
}
CSS3
Les animations css
La propriété animation permet d'ajouter à un élément une série @keyframes
@keyframes monAnimation{
from {propriete1 : valeur1; propriete2 : valeur2}
to {propriete1 : valeur3; propriete2 : valeur4}
}
.maclasse{
animation : monAnimation 4s;
}
Les étapes d'une @keyframes peuvent être définies précisément :
@keyframes monAnimation{
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
CSS3
La propriété animation est un raccourci regroupant les propriétés suivantes (avec leur
valeur par défaut) :
• animation-name: none
• animation-duration: 0s
• animation-timing-function: ease
• animation-delay: 0s
• animation-iteration-count: 1
• animation-direction: normal
• animation-fill-mode: none
• animation-play-state: running
• animation-timeline: auto
.maClasse {
animation: monAnimation 5s linear 2s infinite alternate;
}
CSS3
Les requêtes @media
Permettent notamment de définir des règles en fonction du type de media (screen,
print ou all) et de la taille de l'écran (height, width, min-width...).
Elles permettent aussi de créer un dark mode pour nos styles (prefers-color-scheme).
@media screen, print
@media (400px <= width <= 700px)
@media screen and (max-width: 1024px) approche responsive design
@media screen and (min-width: 1024px) approche mobile first +
@media (prefers-color-scheme: dark) dark | light
CSS3
Adaptation au viewport
Pour que les règles spécifiques aux tailles d'écran soient prises en compte, ile est
nécessaire d'ajouter cette meta :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Les breakpoints du framework Bootstrap
• Extra small < 576px
• Small ≥ 576px (largeur max. du conteneur : 540px)
• Medium ≥ 768px (largeur max. du conteneur : 720px)
• Large ≥ 992px (largeur max. du conteneur : 960px)
• Extra large ≥ 1200px (largeur max. du conteneur : 1140px)
• Extra extra large ≥ 1400px (largeur max. du conteneur : 1320px)
Exercice 4
Intégrer polices, couleurs et images
• Approche par composant
• Animations
• Responsive design et dark mode
SASS
Les pré-processeurs css
On compte aujourd'hui un certain nombre de langages de compilation de feuilles de
styles. On retiendra les principaux : Sass, Less et Stylus
Dans le cadre de ce cours, nous compilerons le code grâce au pré-processeur le plus
largement utilisé : Sass.
SASS
Les pré-processeurs css
Sass est un pré-processeur css permettant de compiler des feuilles de styles à partir
de variables et de fonctions. Il permet également l'inclusion de fichiers (partials),
rendant les projets d'intégration plus faciles à maintenir et à faire évoluer. Fini les
"recherche et remplace" dans des fichiers css sans fin...
[Link]
La compilation peut être faite via des applications autonomes (ex. Codekit),
mais aussi grâce à des bibliothèques JavaScript, Ruby, Swift ou Java.
Dans le cadre de ce cours, nous utiliserons la version js du compilateur qui tourne sur
[Link] : le package sass, distribution de dart-sass.
[Link]
Dart Sass ([Link])
Installation globale (recommandée) :
npm install -g sass
Installation dans un projet :
npm install --save-dev sass
Exécution via une commande sass :
sass --watch [--style=compressed] [Link] [Link]
Exécution via le fichier [Link] (recommandée)
npm run watch
{
"scripts": {
"watch": "sass --watch [Link] [Link]"
}
}
Sass vs scss
Les fichiers de compilation sass peuvent être écrits selon deux syntaxes différentes :
Sass "natif" (.sass) Scss (.scss)
Syntactically Awesome StyleSheets Sassy Cascading StyleSheets
➔ Syntaxe basée sur l'indentation. ➔ Syntaxe identique au css
(accolades, point-virgule)
.button .button{
display: block display: block;
padding: 1em padding: 1em;
}
Bien entendu, nous utiliserons la syntaxe scss qui nous permettra
d'inclure des bibliothèques déjà compilées ou des composants déjà
écrits en css ! )
Imbrication (nesting)
body{ body{
margin: 0; margin: 0;
h1{ }
text-transform: uppercase; body h1{
} text-transform: uppercase;
} }
& "le sélecteur de parent"
ul{ ul{
display: flex; display: flex;
aside &{ }
flex-direction: column; aside ul{
} flex-direction: column;
} }
A noter :
L'imbrication est possible aujourd'hui en css mais avec des limitations.
Les sous sélecteurs doivent commencer par un caractère spécial : . # : [ * + > ~ &
A éviter pour le moment pour garantir un bon support navigateur.
Source: [Link]
Trick , :
Contourner les limitations du sous sélecteur grâce à & et :is()
body{ ul{
margin: 0; display: flex;
& h1{ :is(aside) &{
text-transform: uppercase; flex-direction: column;
} }
} }
Mais aucun intégrateur digne de ce nom n'écrit du css non compilé... (-
Variables
$base-color: #c6538c;
$border-dark: rgba($base-color, 0.88);
$space: 10px; .alert {
border: 1px solid rgba(#c6538c, 0.88);
.alert { padding : 13px;
border: 1px solid $border-dark; }
padding : 3px + $space;
}
On assigne une valeur par défaut à une variable avec le drapeau !default
$main-color : black !default;
Note :
Dans les noms de variables, - et _ sont traités de manière identique.
$ma_variable == $ma-variable -
Portée des variables
Les variables déclarées au premier niveau de la feuille de style sont globales.
Celles déclarées dans un sélecteur (entre accolades) sont locales.
Une variable globale existante est modifiée depuis un scope local avec !global
$main-color : red !global;
Concaténation de variables
Pour concaténer la valeur d'une variable (interpolation), on utilise #{ }
Cela est utile lorsque l'on veut concaténer une valeur dans une chaîne de caractères.
--bg-color : #{$secondary-color};
.col-#{$i} {...}
Opérations sur des variables
Deux variables ayant la même unité peuvent être additionnées ou soustraites l'une à
l'autre;
$padding-base: 1rem;
.btn {
padding : $padding-base + 0.5rem;
}
Les variables peuvent également être multipliées par une valeur.
Par contre, pour une division, il faut utiliser calc() ou [Link]() ;
@use "sass:math"; .button {
$space: 2rem; margin: 4rem;
padding: 1rem;
.button{ line-height: 1rem;
margin: $space * 2; font-size: calc(2rem / 2);
padding: [Link]($space, 2); }
line-height: calc($space / 2);
font-size: calc(#{$space} / 2);
}
Import et inclusion
@import
Cette règle permet d'importer des fichiers scss externes, des partials (préfixés d'un
underscore) ou des feuilles de styles css.
@import "variables"; // fait référence au fichier _variables.scss
@import "vendor/bootstrap-min";
Notes :
• Pas besoin de spécifier ./ pour les chemins relatifs.
• La règle @import est en principe destinée au premier niveau d'une feuille de
style mais peut également être appelée dans un sélecteur.
.btn { @import "btn-rules"}
Réutilisation de code (snippets)
@mixin
Les mixins sont une des fonctionnalités les plus puissantes de sass. Ils permettent
l'inclusion de blocs de code css grâce à l'instruction @include.
@mixin resetList {
list-style: none;
margin: 0;
padding: 0;
}
ul {
@include resetList;
}
@mixin resetList($padding) {
list-style: none; Les mixins peuvent recevoir
margin: 0; des paramètres.
padding: $padding;
}
ul {
@include resetList(1rem);
}
@extend .
Cette instruction, assez proche de @include permet d'étendre une classe ou un
placeholder. Son utilisation est fortement déconseillée, au profit des mixins, car elle
perturbe la structure de la feuille de style et crée des liens entre sélecteurs qui
peuvent générer de effets indésirables.
.no-border { .no-border, .maClasse {
border: none; border: none;
} }
.maClasse { .maClasse {
font-size: 1rem; font-size: 1rem;
@extend .no-border; }
}
Avec un placeholder %, le sélecteur de base n'est pas compilé.
Mais ça reste pas terrible du tout !
%no-border { .maClasse {
border: none; border: none;
} }
.maClasse { .maClasse {
font-size: 1rem; font-size: 1rem;
@extend %no-border; }
}
Boucles et conditions
Sass offre les traditionnelles boucles @for et @while.
• @for $i from 1 through 6 { // la dernière itération est incluse
.p-#{$i} {
padding : $i * 0.5rem;
}
}
• @for $i from 1 to 7 { // la dernière itération est exclue
.p-#{$i} {
padding : $i * 0.5rem;
}
}
• @while $value > $base { // Cette boucle est à éviter si possible,
$value: [Link]($value, $ratio); au profit de @for ou @each car elle augmente le
} temps de compilation et repose sur des valeurs
@return $value; true/false assez strictes (0 != false par exemple)
La boucle @each pour parcourir listes et maps
• @each $size in $sizes { // liste
.icon-#{size} {
font-size: $size;
}
}
• @each $name, $size in $breakpoints { // map
.container-#{name} {
width: $size;
}
}
Fonctions
Sass propose de nombreuses fonctions natives permettant de modifier des valeurs ou
d'évaluer des variables.
Certaines sont globales :
darken($red, 30%);
D'autres font partie de modules sass natifs :
[Link]($color1, $color2, $weight: 50%);
Liste complète : [Link]
@function
On peut également créer des fonctions custom qui traiteront une valeur d'entrée afin
de renvoyer un résultat.
@function rem($pxVal) {
@return calc($pxVal / 16 * 1rem);
}
