Cours
Le Web
Un peu d’histoire
Quelles différences entre Internet et le Web ?
Internet :
- Réseau de transport
- Générique
- Symétrique
- Transmission par paquets
Web :
- Application d'Internet
- Protocole HTTP / adresse URL / langage HTML
- Hyperlien / navigateur web
Tim Berners-Lee et Vint Cerf :
Réseaux
Hébergement
Logique web
Un site web repose sur trois langages : le HTML, le CSS, et le JavaScript.
Avec le langage HTML, on crée et on hiérarchise un document.
Le CSS permet de modifier son apparence.
Le JavaScript permet de le rendre interactif.
La structure d’un document HTML est basée sur des conteneurs et des éléments contenus.
Les langages
HTML
Syntaxe HTML
HTML signifie HyperText Markup Language où markup signifie balisage. C’est donc un langage de balisage.
Les balises permettent de définir la nature du contenu qu’elles encadrent. Les balises et leur contenu forment des éléments HTML.
<balise> = balise ouvrante
texte = contenu
</balise> = balise fermante
Le code HTML permet de créer une structure : une balise peut contenir d'autres balises afin de construire un arbre logique. Voici un exemple simple :
<conteneur>
<element>Élément 1</element>
<element>Élément 2</element>
<element>Élément 3</element>
</conteneur>
Il est possible d’ajouter des attributs aux balises HTML.
<balise attribut="valeur"> = balise ouvrante avec paramètre
texte = contenu
</balise> = balise fermante
Il existe des balises auto-fermantes, comme celle pour insérer une image.
<img src="lien.extension"> = balise auto-fermante
Exemples de balises HTML
Quelques exemples de balises.
Listes des balises HTML [anglais]
Listes des balises HTML [français]
CSS
Syntaxe CSS
CSS signifie Cascading Style Sheets. Ce langage permet de définir des règles pour modifier l’apparence, l’agencement et le positionnement des éléments HTML.
Grâce à des sélecteurs, le CSS permet d’associer des propriétés aux éléments du document HTML.
selecteur {
propriete: valeur;
}
Le CSS se sert de l'arbre logique HTML pour permettre de sélectionner les éléments HTML. Il peut aussi bien sélectionner le conteneur que les éléments qu’il contient.
conteneur { = sélection du conteneur
propriete: valeur;
}
conteneur element { = sélection des élements
propriete: valeur;
}
Class et ID
Afin de pouvoir sélectionner les éléments avec plus de précision, il est possible de leur spécifier en HTML des Class et des Id. Ce sont des attributs HTML atteignables en CSS.
Une Class sert à sélectionner des éléments pour leur spécifier le même style CSS. C’est un sélecteur pour des éléments multiples.
En HTML, une Class intitulée "bleu" se déclare ainsi :
<balise class="bleu"> = déclaration d’une Class
contenu
</balise>
<balise2 class="bleu">
contenu2
</balise2>
En CSS, une Class est appelée avec un point précédant son intitulé :
.bleu { = sélection d’une Class
propriete: valeur;
}
L’attribut Id sert à sélectionner un élément unique. Il doit uniquement être utilisé pour cet élément.
En HTML, une Id intitulée "home" se déclare ainsi :
<balise id="home"> = déclaration d’une Id
contenu
</balise>
En CSS, une Id est appelée avec un croisillon précédant son intitulé :
#home { = sélection d’une Id
propriete: valeur;
}
Exemples de balises CSS
Quelques exemples de balises.
Listes des propriétés CSS [anglais]
Listes des propriétés CSS [français]
CSS / Dimensions, bordure, marges
element {
width: valeur; = largeur
height: valeur; = hauteur
border: valeur; = contour
padding: valeur; = marges intérieures
margin: valeur; = marges extérieures
}
CSS / Display
CSS / Tableau récapitulatif : display
Display
Schéma
→
↓
Usage
Se déclare sur
Width
Height
Exemple
Inline

Oui
Non
Texte
L’élément
Non
Non
a, strong
Block

Non
Oui
Menu vertical, mise en page
L’élément
100% par défaut
Oui
div, p
Inline-block

Oui
Non
Menu horizontal, suite d’images
L’élément
Oui
Oui
img
List-item

Non
Oui
Liste
L’élément
li
Flex

Oui
Oui
Mise en page, menu, centrer des éléments
Le parent
Oui
Oui
CSS / display:inline
Un élément display:inline est une boîte qui s’agence comme du texte :

element {
display: inline; = boîte dans le flux du texte
= pas de retour à la ligne
= pas de margin-top et margin-bottom
= pas de width et height
}
Exemples de balises par défaut display:inline :
a, span, b, em, i, strong
Display : Block / en bloc
Un élément display:block est une boîte qui prend de la place selon une logique verticale :

Résumé :
- Flux vertical
- Par défaut : width : 100%
- A la hauteur de ses enfants
- Possibilité d'ajouter margin et padding
- Pas de vertical-align
element {
display: block;
}
Display : Inline-block / En ligne
Un élément display:block est une boîte qui s’agence comme un texte (logique horizontale) avec des particularités d’un bloc :

Résumé :
- Flux horizontal
- Retour à la ligne en bout de conteneur
- Avec width et height
- Avec margin et padding
- Avec vertical-align
element {
display: inline-block;
}
Display : Flex / Flexible
Le module Flexbox permet d’agencer des éléments suivant un flux horizontal ou vertical (au choix), à l’aide de tailles responsives.
Il s’applique sur le conteneur qui dicte alors un agencement flex aux éléments contenus. On ajoute la propriété display:flex au conteneur et on lui spécifie la direction pour agencer les éléments. Ensuite, on spécifie la width aux éléments contenus.
Ce site permet de générer et tester en direct cette propriété : Générateur Flexbox
Flux horizontal (par défaut) :

Flux vertical (colonne) :


conteneur {
display: flex;
flex-direction: row;
}
conteneur2 {
display: flex;
flex-direction: column;
}
Le module Flex possède des sous propriétés permettant de justifier et d’aligner les éléments. La méthode est très semblable à la justification et l'alignement dans la cellule d’un tableau :
Justification :

Alignement :

Dans un conteneur "display: flex;", la propriété "justify-content" permet de justifier les élements.
La propriété "align-items" permet d'aligner les éléments.
Flex-direction
Axes




Pour flex-direction : row :
Axe
Sens
flex-start
flex-end
center
space-between
stretch
justify-content
→




×
align-items
↓



×

Pour flex-direction : column :
Axe
Sens
flex-start
flex-end
center
space-between
stretch
justify-content
↓




×
align-items
→



×

CSS / Position
Position : static
La position static est le positionnement par défaut des blocs. Ils s'enchaînent donc dans le flux.
Position : relative
La position relative permet de déplacer un élément par rapport à son point d'origine. Il ne sort pas du flux donc l'espace qu'il prenait reste visible :

Pour déplacer l'élément, il faut utiliser les propriétés CSS "bottom", "top", "left" et "right".
La position relative est particulièrement utile pour fixer un point d'origine à un élément enfant positionné en position absolute (cf. le point sur la position absolute pour plus de précisions).
Position : fixed
La position fixed sert à ce qu'un élément reste immobile lors du scroll.
L’élément positionné avec la position fixed sort du flux donc l'espace qu'il prenait n'est plus visible. Il est placé suivant des coordonnées par rapport à la fenêtre du navigateur :

Pour le déplacer, il faut utiliser les propriétés CSS "bottom", "top", "left" et "right" :
Position : absolute
L’élément positionné avec la position absolute sort du flux donc l'espace qu'il prenait n'est plus visible. Il est placé à partir des coordonnées du premier ancêtre donc la position n'est pas static.
Dans l'exemple ci-dessous, le parent est en position static, alors le calcul des coordonnées se fait à partir de la fenêtre du navigateur :

Mais dans cet exemple, le parent est en position relative, alors le calcul des coordonnées se fait à partir du parent :

Pour déplacer l'élément, il faut utiliser les propriétés CSS "bottom", "top", "left" et "right" :
CSS / Texte
Voici quelques balises HTML propices à accueillir du texte : article, p, a, em, strong, li. Ces balises ont des comportements qui varient par défaut. Pour un contenu de typo block, il est plus pratique d'utiliser article et p. Pour des éléments inline, il convient d'utiliser a, em, strong. Pour une liste : li.
em et strong sont respectivement utilisées pour les texte en italique et en gras (em pour emphase et strong pour gras).
En CSS, il est possible de spécifier un caractère typographique, la taille du corps, la hauteur de ligne, l'approche, la couleur, la graisse des caractères, le type de caractère.
Choix d'un caractère typographique
Il est possible d'appeler les typographies installées sur l'ordinateur du visiteur du site avec la propriété font-family :
conteneur {
font-family: "arial";
}
Et il est également possible d'appeler un fichier personnalisé avec la règle font-face :
@font-face {
font-family : "MaTypo";
src : url("fonts/MaTypo.otf");
}
Il faut ensuite appeler cette font-face avec font-family :
conteneur {
font-family: "MaTypo";
}
Taille du corps
La taille du corps se règle avec l'attribut font-size :
conteneur {
font-size: 13px;
}
Hauteur de ligne
La hauteur de ligne se règle avec l'attribut line-height :
conteneur {
line-height: 13px;
}
Approche
L'approche se règle avec l'attribut letter-spacing :
conteneur {
letter-spacing: 1px;
}
Couleur
La couleur se règle avec l'attribut color :
conteneur {
color: blue;
}
Graisse des caractères
La graisse des caractères se règle avec l'attribut font-weight :
conteneur {
font-weight: 600;
}
Type de caractère
La type des caractères se règle avec l'attribut font-style :
conteneur {
font-style: italic;
}
JS
À venir…
Écrans
Il est impératif de penser les déclinaisons de la maquette d’un site web pour plusieurs tailles d’écran.
mobile 320px × 1024px
tablette 768px × 1024px
desktop 1440px × 1024px
NodeJS
Installation
- Téléchargement : nodejs.org/fr
- Installation du fichier .msi
- Se rendre dans le dossier de l'application node
- Démarrer le serveur :
node nom_du_fichier_js_serveur
- Se rendre sur localhost:8080 ou sur mon_adresse_ip:8080
Installation d'une bibliothèque manquante
- Par le terminal :
npm install nom_du_packet
Se servir d'un terminal
Windows :
- Ouvrir "l'invité de commandes"
- Afficher les dossiers :
dir
- Changer de dossier :
cd nom_du_dossier
- Revenir en arrière :
cd ..
- Changer de disque dur :
d:
MacOs :
- Ouvrir un terminal (App/Utilitaires/Terminal)
- Afficher les dossiers :
ls
- Changer de dossier :
cd nom_du_dossier
- Revenir en arrière :
cd ..
Afficher son adresse IP locale
Windows :
- Dans un terminal :
ipconfig /all
- Prendre l'adresse Ipv4 (préféré), lui ajouter :8080
MacOs :
- Dans les préférences réseaux
- Ou par le terminal :
ifconfig |grep inet
Structure
Node.js permet d'utiliser le JavaScript côté serveur. Le serveur est démarré grâce à un fichier .js.
La librairie Express permet de simplifier l'initialisation du serveur. La librairie Socket.io permet la communication en temps réel avec le serveur.
Node.js fonctionne en appelant le fichier serveur. Ce fichier appelle les librairies requises pour son fonctionnement, il initialise un serveur qui sera accessible sur http://localhost:8080 ou sur http://MON.IP:8080. (Le port "8080" peut être changé dans le code)
Avec la librairie Express, le fichier serveur appelle le dossier "public" qui contient les fichiers du site web qui s'affichera sur http://localhost:8080.
Avec la librairie Socket.io, le fichier serveur dispose d'une fonction permettant de recevoir et d'émettre d'autres fonctions afin de communiquer avec les clients. Ainsi, il y aura un aller-retour de fonctions et de messages entre le fichier serveur (server.js) et le fichier JS client (javascript.js)
Détails
Voici le code détaillé du site Simple échange de message [client/serveur]
Sur le fichier serveur
Appel des dépendances pour créer un serveur web (http) et se servir de la librairie Express :
var http = require('http');
var express = require('express');
var app = express();
Création du serveur et appel du dossier "public" :
var server = http.createServer(app);
app.use(express.static('public'));
Appel de la libraire Socket.io :
var io = require('socket.io').listen(server);
La fonction qui établit une connexion serveur / client :
io.on('connection', function (socket) {
// les fonctions qui communiquent avec le client
});
Cette fonction (ci-dessous) permet d'écrire des fonctions pour :
- que le serveur envoie un message au client
- que le client envoie un message au serveur
Le principe de ces fonctions repose sur deux méthodes :
- socket.emit() qui permet d'émettre
- socket.on() qui permet de réceptionner
Émission d'un message Serveur → Client(s)
Sur le fichier serveur
La méthode emit() émet un message au client :
socket.emit('message', 'Vous êtes connecté');
socket.emit() prend deux arguments : le premier est le titre du message, ce qui permet de le reconnaître côté client, et le second est le contenu du message.
La méthode emit() peut être augmentée grâce à la méthode broadcast afin d'émettre un message à tous les clients sauf celui qui sollicite le serveur :
socket.broadcast.emit('message', 'Un nouvel utilisateur s\'est connecté');
Émission d'un message Client(s) → Serveur
Sur le fichier client :
Tout d'abord, la librairie Socket.io est présente dans le fichier HTML :
<script src="../socket.io/socket.io.js"></script>
Ensuite, la connexion avec le serveur est initialisée dans le fichier JS client :
var socket = io.connect();
Pour que le client émette un message, on utilise la méthode socket.emit() :
socket.emit('message', 'Il y a eu un click');
Réception d'un message Serveur → Client(s) et Client(s) → Serveur
Pour réceptionner un message provenant d'un client, on utilise la méthode socket.on() :
socket.on('message', function (message) {
console.log('Message d\'un client : ' + message);
});