Cours

Le Web

Un peu d’histoire

Quelles différences entre Internet et le Web ?

Internet :

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é :

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é :

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

Installation d'une bibliothèque manquante

Se servir d'un terminal

Windows :

MacOs :

Afficher son adresse IP locale

Windows :

MacOs :

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 :

Le principe de ces fonctions repose sur deux méthodes :

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