DNDI / Web & Documents - Cours du 21/11/16 Pierre Châtel-Innocenti - Labo Paragraphe/CITU - Pierre Châtel-Innocenti
←
→
Transcription du contenu de la page
Si votre navigateur ne rend pas la page correctement, lisez s'il vous plaît le contenu de la page ci-dessous
DNDI / Web & Documents
Cours du 21/11/16
Pierre Châtel-Innocenti – Labo Paragraphe/CITU
pierre.chatel@univ-paris8.fr
1
Dans ce cours
Création de document Diffusion de document
Papier Electronique Télématique Internet Mobile Fichiers Papier
Web SMS Email Autres
2
Dans ce cours
Focus sur les spécifiés de la création, diffusion, réception des documents sur
le Web
Introduction (non-exhaustive) aux technos de base pour les documents Web.
Traversé du miroir à aperçu de ce qui est normalement invisible sur le Web
pour le grand public
§ Pourquoi ? Car on ne peut pas maitriser des outils complexes (comme les CMS)
sans comprendre – un minimum – ce qui se passe « sous le capot »
§ Vous serez forcement amenés – quelle que soit votre profession – à utiliser des
outils Web pour la promotion de vos projets, travaux, recherches, articles,
réalisations artistiques … et donc à créer des Documents Web
3
Dans ce cours
1. Web & Documents
§ Document vs. Fichier
§ Internet vs. Web
2. Technologies de base de documents sur le Web
§ HTML, PHP, CSS
§ Document Web et Hypertexte
§ Décorréler Contenu et Présentation d’un document
3. Web 2.0 & Documents dynamiques
§ AJAX, DOM, XML, Javascript
4. Perspectives historiques
§ Complexification technologique
§ CMS
5. TP
4
1. Web & Documents
5
Le Web est « document-centric » (centré
documents)
SIC = « Sciences de l’Information et de la Communication »
§ Sciences de l’Information (SDL) et du Document
Une page Web est un document (voir un document de documents) !
« Un chercheur en SIC s'intéresse aux conditions de la production,
communication et réception d'une information »
§ Le Web en est un moyen à TRES grande échelle
§ des outils de production d'information/documents (logiciels de création de contenu)
§ des moyens de distribution de l'information, des documents (réseaux et serveurs)
§ des ordinateurs personnels + navigateurs pour sa réception et éventuelle transformation
6
Confusion #1 : Document vs. Fichier
Document = concept abstrait, en théorie de l’information
§ « Un Document est un ensemble d'information qui représente (…) une unité informationnelle
que l'on peut raisonnablement considérer comme indivisible et complète » - Yves MARCOUX
http://marcoux.ebsi.umontreal.ca
§ « Un document est un ensemble cohérent et fini d'informations structurées et lisibles (…) à un
usage défini, quelque soit le support » - Claude Garneau, Corporation Interdoc,
Documentation juin 2000
Fichier = ressource concrète, dans le domaine du numérique
§ Stockée sur un disque, en mémoire et/ou échangée via un réseau
§ L’informatique moderne, en tant qu’outil, a très vite été orientée fichiers
§ Tendance exacerbée par les systèmes d’exploitation de type *NIX (Unix, Linux, ...) où même les
périphériques d’une machine sont vus comme des fichiers dans une arborescence !
§ Idem pour le Web
è Document ou Fichier, où se situe la frontière ?
§ Bien que « l’unité informationnelle » du document soit indivisible, les ressources d’un seul
document peuvent se situer – pour son stockage – dans plusieurs fichiers numériques
§ Ex. Document Lettre à Fichiers En-tête, Corps, Signature
7
Confusion #2 : Internet vs. Web
Internet = les « tuyaux »
§ C.-à-d. les moyens techniques pour la diffusion entre machines d’information
(binaire), quel quelle soit
§ Un gigantesque réseau de réseau, constitué au fil du temps.
Sa première graine: ARPANET, projet militaire du DoD aux USA en 1969-70
Web = une « toile » constituée de documents liées entre eux
§ Découvrables via une adresse
§ Accessibles via Internet
§ Concept clé: les liens hypertexte qui tissent une multitude de liens entre les
documents (d’où le nom de « toile »)
§ Sur le Web, tous les documents sont appelés « ressources »
8Internet vs Web
Internet backbone
Page sur “Internet”
Ordinateur personnel Serveur Wikipedia 9Wikipedia
CC BY-SA 4.0
File:Internet Key Layers.png
Internet vs Web
Uploaded by Concord hioz
Created: 22 November 2014
10ARPANET, un réseau encore représentable
11Wikipedia
CC BY-SA 3.0
Le Web, impossible à représenter dans File:WorldWideWebAround
Wikipedia.png
Uploaded by Zarex
son ensemble Created: 18 July 2004
W orld
W ide
W eb
122. Technologies de base de
documents sur le Web
HTML, PHP, CSS
13Technologies de doc. – vue d’ensemble
HTML + CSS
XML
Serveur PHP DOM Client
Node.js Javascript
14Technologies: HTML
« HyperText Markup Language »
§ Format de données utilisant des balises ( … ) et de
l’hypertexte pour représenter des documents Web (pages Web)
Permet simultanément de définir, structurer et mettre en forme le contenu
(texte, images, vidéos, …)
§ Définir… du texte: sous forme libre, directement dans le fichier HTML
§ Structurer: balises structurantes pour créer des blocs, qui peuvent être
imbriqués les uns dans les autres
Contenant
Contenant Contenu
Contenu
§ Mettre en forme: avec des balises dédiées
§ Attention: la plupart des balises servent à la fois à structurer et à mettre en
forme.
15Technologies: HTML
16Technologies: HTML
Document en poupées russes
Une balise ouvrante
Une donnée – le titre
Hello World Example
du document Hello World Example
Une balise fermante de
Hello World!
mise en forme
Hello World!
Un exemple de fichier HTML pour
les etudiants
…
17Technologies: HTML
Document en poupées russes
…
Hello World Example
les etudiants
Hello World!
/p>
Un exemple de fichier HTML pour
Un lien hypertexte
les etudiants
URL: http://www.univ-paris8.fr
…
18Technologies: HTML
Résumé
Elements de base
§ Balises ouvrantes () et fermantes ()
§ Balises “vides” (retour à la ligne forcé )
§ Caractérisent ce qui est contenu entre la balise ouvrante et fermante
§ Attributs de balise, pour qualifier le contenu entre les balises:
Ma page
§ Titres: à
§ Paragraphes:
§ Liens: cf. ci-dessus
§ Images (utilise des attributs):
§ Faire commencer les documents HTML par
§ Balises “vides” (retour à la ligne forcé )
Actuellement, le World Wide Web Consortium (W3C) à normalisé la version 5 de HTML – le HTML5
Une évolution de HTML: xHTML, à la syntaxe plus “propre”, proche de XML, mais évolution bloquée par des
problèmes politiques au sein du W3C…
Les documents HTML sont à la base du Web depuis sa création, et rien n’indique que cela va changer.
19Document Web et Hypertexte
Définition « document hypertexte » : document contenant des nœuds (unité
minimale d'information, toujours présentée entière) et des hyperliens pour passer
automatiquement d’un nœud à l’autre.
§ Un utilisateur se déplace de nœud en nœud, via les hyperliens.
§ Nœuds audiovisuels (image, son, vidéo) à documents hypermédias
Hypertexte sur le Web à HTML
§ C’est le format hypertexte le plus répandu au monde (des milliards de documents) !
§ Mais aussi un des plus simples: hyperliens unidirectionnels qui se cassent lorsque la
ressource liée est déplacée ou supprimée, pas d'aperçu des ressources liées, pas de
droits d'auteur, pas d'annotation, pas de gestion de versions.
Hypertexte pas uniquement sur le Web: applications au processus de lecture (avec
interruption), au journalisme (cf. travaux de Alexandra Saemmer – Paris 8), à la
littérature (histoires dont vous êtes le héro, poésie hypertextuelle, …)
20Document Web et Hypertexte
Vision hypertexte/hypermédia
§ Nœuds insécables (Web à les documents Web) liés
entre eux par des hyperliens permettant à
l’utilisateur de passer d'un nœud à un autre Image Page Web
(Web à les liens « cliquables » dans une page)
(ressource) (ressource HTML)
Le Web généralise le concept de document et introduit lien hyperlien
celui de ressourceDocument Web et Hypertexte
1 Document Web = n Fichiers « ressources »
Cas courant : 1 page Web (fichier HTML) et
ses ressources liées (CSS, images, sons, …)
Document Web Page Web
Extremum - : une page Web seule, sans
ressources liées, peut être un document
Web, ou une simple image (n = 1)
lien hyperlien
Extremum + : un site Web dans son L’hyperlien fait partie
du document Web…
hyperlien
intégralité, avec toutes ses ressources liées lien
Page Web
et ses liens hypertextes pour passer de page
en page (donc de document en document),
est un assemblage logique de documents
Web
§ Site Web = Document de Documents … mais pas sa
“destination” à dans
un autre document
Page Web 22Document Web et Hypertexte
1 Site Web = n Documents Web de m Fichiers
Document Web – 6 Fichiers
Contenu à 4 Fichiers Présentation à 2
Fichiers
HTML CSS
hyperliens CSS
HTML
HTML
23Technologies: PHP Serveur Page Web source
(avec PHP)
2–
Production
page Web Préprocesseur PHP
PHP = PHP Hypertext Preprocessor pour ce client
§ Langage de programmation, orienté objet, exécuté côté à cet instant
serveur Web
§ Un « Preprocesseur » d’hypertexte, c’est à dire exécuté
AVANT l’envoi d’une page Web, par un serveur à un
navigateur Page Web produite statique
§ Balises spéciales: 3–
Dans la pratique: permet de calculer des pages Web, pour chaque Transmission
requête, de chaque utilisateur, sans avoir à les écrire à l’avance document
§ Permet de rendre les sites plus dynamique que
l’écriture de simple HTML à l’avance Internet
! § MAIS, pour autant, un document/page Web ainsi
produit – une fois envoyé sur le réseau – reste
1–
requête
statique une fois « calculé ». C’est le site dans sa page web
globalité qui est rendu plus dynamique
§ Il faudra ajouter d’autres concepts & briques
technologiques pour obtenir des document Web
vraiment dynamiques (cf. DOM, Javascript)
Client 24Technologies: PHP
Décorréler Contenu et Présentation
Problème du HTML classique: mélange du contenu et de sa présentation (son style) dans
un même document.
§ Pb: le « bold » () affiché dans IE ne sera pas le même que celui de Chrome
! § Pb: la séparation des couches données et présentation est une bonne pratique généralisée en
informatique, mais qui n’est pas ici respectée
§ Pb: comment faire évoluer le contenu du document, sans casser sa présentation, puisque
tout est mélangé.
De plus, HTML n’offre pas de moyens de mise en page moderne
§ Placement correct des éléments sur une page; les uns par rapport aux autres, « reflow »,
« responsive design »… tout cela est impossible
§ Pire encore: utilisation des tableaux HTML pour organiser les élements d’une page à l’écran
§ Pour l’édition de documents numériques non-Web, des solutions existent depuis longtemps
(e.g. TeX, LaTeX)
Une solution dédiée au Web: les CSS - « Cascading Style Sheets »
26Technologies: CSS
Apparaît au milieu des années 90, mais plusieurs années avant usage répandu; maintenant
indispensable
§ Principe 1: structure et contenu restent dans le document HTML
§ Principe 2: ensemble de la présentation migre dans les fichiers (ou déclarations) CSS
§ Dans la pratique, les balises de mise en forme (, , , …) sont toujours utilisées, mais leurs styles peut être défini
et modifié dans les CSS
§ Fichier HTML fortement réduit en taille
§ On parle de « cascade » de feuilles de style car le style d’un même document peut être hérité de
plusieurs CSS qui, quelquefois, définissent et surchargent les même éléments graphiques
§ à nécessité d’arbitrage en fonction des contraintes d’affichage du document Web
Une des pierres angulaires du Web moderne
§ Tous les navigateurs supportent les CSS, même si certaines fonctions récentes (e.g. media queries ne
fonctionnent pas partout exactement pareil)
§ On peut concevoir un document sans se soucier, dans un premier temps, de sa présentation
§ Des sites Web dont les documents ont une présentation uniformisée (référence aux mêmes feuilles de
style)
§ Arbitrage à « responsive design ». Par ex. un CSS qui diminue la taille des éléments pour l’affichage
d’une page sur un smartphone et un autre CSS pour l’affichage sur écran d’ordinateur.
27CSS
Technologies: CSS
HTML HTML HTML HTML
§ Une entrée dans la feuille CSS
sélecteur {
propriété: valeur; HTML
}
#div_header
§ Sélecteur
Balise HTML (body, h1, p, b, i),
identifiant # (attribut HTML id=…), classe Un bloc
. (attribut class=...) …
#div_
§ Propriété #div_content
nav
Style à appliquer à l’élément défini par le
sélecteur (font, background,
margin, text_align, color)
§ Valeur #div_footer
... de la propriété (ex. la couleur choisie
red)
28Technologies: CSS
On indique
l’emplacement de la
feuille de style CSS
Une classe de style
définie dans le CSS
29Technologies: CSS
Identifiant à usage unique –
utilisé le plus souvent avec
les balises
Style par défaut de
modifié
Une classe – réutilisable
à plusieurs endroits
303. Web 2.0 & Documents
dynamiques
AJAX, DOM, XML, Javascript
31Evolution de documents
t
Un document Web est amené à évoluer en amont de sa
publication, par une modification active de son contenu par son Recueil d’Information
concepteur (cf. slides précédents).
En aval, si évolution/modification souhaitée par le concepteur à Structuration
republication nécessaire.
Peut aussi évoluer sans participation active de son concepteur lors Publication
de la modification du contenu, et sans nécessiter de republication
à c’est le cas des « documents dynamiques »
§ Une application Web (comme le portail de la fac) contiens des Republication Evolution(s)
Evolution
documents Web dont le contenu change automatiquement en Evolution
fonction de l’identité et des actions des utilisateurs (ex. page
d’accueil différente en fonction de l’utilisateur)
§ Une solution technique possible : technologies de documents
Archivage
Web dynamiques (PHP + AJAX)
32Documents dynamiques
à l’heure du Web 2.0 Click
Documents dynamiques – destinés à évoluer dans le 2 – Action
temps, en fonction des besoins/actions de l’utilisateur utilisateur
final Moteur
Javascript +
§ Solution technique: AJAX (« Asynchronous Javascript
& XML)
+ DOM de la page
§ « Asynchrone » car permet de faire des modifications Page Web Javascript Web
sur les documents sans bloquer les interactions avec (HTML) 5 – Nouvelle
l’utilisateur (étapes 3 – 4 non bloquantes). page à afficher
Technologies: Client (Navigateur Web) 3 – Requête
§ JavaScript – un langage de programmation simple, nouvelles données
souple et très répandu sur le Web. Un standard de 1–
fait. requête 4 – Envoi
Internet
donnés
§ XML – format multiplateforme et échangeable (via le page web
en XML
réseau) de documents/données.
§ DOM – modèle objet de documents, permettant leur
manipulation sur le Client (par JavaScript) Docs HTML
Doc XML
& Javascript
Serveur 33Documents à l’heure du Web 2.0
Internet
5 – Modification de la page
+
affichée, via le DOM
2 – Action Click
utilisateur
Moteur 3 – Requête nouvelles données
Page Web
Javascript +
(HTML)
DOM de la page SGBD
Web 4 – Envoi donnés en XML
On peut effectuer une autre action
avant le retour des données en
Javascript étape 4 à asynchronisme
Doc XML
34Documents à l’heure du Web 2.0
Internet
+
Page Web
(HTML)
Le contenu du document affiché (la SGBD
page Web, son DOM) a été changé
dynamiquement
CE N’EST PAS UNE NOUVELLE PAGE !
Javascript
35Un modèle objet de documents, le DOM
« Document Object Model »
Un moyen multiplateforme et indépendant des langages de programmation pour
représenter et manipuler les documents HTML, XHTML et XML sous forme d’objets
§ Documents modélisés sous forme arborescente, avec des nœuds – on parle d’arbre DOM
§ L’arbre DOM est manipulé via des méthodes sur des objets (les « elements », « attributes »,
« text », … du document). Méthodes regroupées dans une « API ».
§ Attention: mêmes documents qu’avant, c’est la représentation en mémoire (de l’ordinateur) en
vue de leur manipulation (par un navigateur, un programme, un script) qui change
Quel intérêt ? Il est possible d’intervenir de manière programmatique (ex. avec du
JavaScript) sur un document Web (une page chargée dans un navigateur) a priori ou
posteriori de son affichage à l’utilisateur.
§ Il est possible de virtuellement TOUT changer à l’intérieur du document qui a été transmis au
client/consommateur/navigateur.
§ Les paradigmes objet et arborescent sont très familiers à la plupart des programmeurs, donc facile
d’accès.
§ On obtient un document réifié (observable sous la forme d’objets) et mutable, à l’opposé de la
conception statique d’un document papier 36DOM, retour sur les exemples
Visualisation du
document dans le
navigateur
Vue arborescente
de la page Web
Un “element” i dans
l’arborescence
1 document – 2 vues
Visualisation du Modèle objet du
Navigateur Web
document document
37DOM, retour sur les exemples
Visualisation du
document dans le
navigateur
Vue arborescente
de la page Web
Un “element” div dans
l’arborescence
38DOM – arbre d’objets manipulables
Document
Hello World Example .firstElementChild()
Root
element:
.children()
Hello World!
Element: Element:
Un exemple de fichier HTML pour
Element: Element: Element:
les etudiants
.getAttribute(“id”)
Méthodes modifiant le DOM: Text: "Hello
World Attribute: “id” Element: Element:
.setAttribute() Example"
.removeAttribute()
.removeChild()
.replaceChild() Element: Element:
(…) 39Technologies Web 2.0: XML Object Oriented Programming (OOP)
Classe
« eXtensible Markup Language », standard W3C
Généralisation des principes du HTML vu plus haut Instanciation
§ Mais n’est pas un descendant de HTML; vient de SGML
§ On peut au contraire voir HTML/xHTML comme un XML spécialisé, plus
limité Objet Objet Objet
Un document XML est « textuel », lisible à l’œil nu par un humain
(comme pour HMLT) , mais surtout interprétable par une machine.
§ Utilisé principalement pour la « sérialisation » et le transfert de données Documents &
via le réseau “Meta Documents” XML
§ Favorise l’interopérabilité quand émetteur et receveur de données ne se
connaissent pas à l’avance; dans ce cas le format de document « ouvert »
de XML facilite la transmission des données.
XML Schema
Se repose sur la notion de « schema » pour définir les formats/types de
document et leur contenu à une forme de meta-document, de classe
de documents. Instanciation
Doc Doc Doc
XML XML XML
40Serveur
Technologies Web 2.0: Javascript Page Web source
(avec PHP)
2–
Production Préprocesseur PHP
Langage de programmation de scripts (pas compilé) créé page Web
en 1995 pour ce client
§ Exécuté côté client, dans le navigateur (au contraire de à cet instant
HTML JS
PHP qui était côté serveur)
§ Permet de rendre les pages web interactives, par +
modification du DOM (cf. méthodes vu ci-dessus), sans
demander un nouveau document Web au serveur, et Page Web produite avec Javascript
sans bloquer les interactions avec la page (cf. Gmail) 1– 3–
requête Transmission
Un langage orienté objets et prototypes (sans classes) page web Internet documents
dans lequel même les fonctions sont des objets (objets
du 1er ordre) – au contraire du langage Java. Client
§ Introduction à Javascript bien au delà du périmètre de
ce cours mais il existe de nombreuses ressources sur le
A
net pour s’y former
! § On note cependant qu’il est particulièrement adapté
au monde du Web et à la manipulation de documents
B E 4. Modifs
doc.
Javascript
Runtime
réifiés, car il est léger, souple et lui-même orienté C D F
objet
Document
sous forme DOM 41Technologies Web 2.0: Javascript
Hello World Example
function clock_refresh(){ Fonction pour rafraichir
var refresh=1000; automatiquement toutes
mytime=setTimeout('display_clock()',refresh) les secondes
}
Code Javascript envoyé
function display_clock() { avec le document HTML
var strcount sur le client
var x = new Date()
Modification du DOM par
document.getElementById('clock').innerHTML = x;le script, côté client
clock_refresh();
Client }
Document
Hello World!
Head Body
Un exemple de fichier HTML pour
DOM
les etudiants
Horloge produit a 12:34
Le script modifie cet
Horloge : élément dans le DOM et
42Technologies Web 2.0: Javascript
434. Perspectives historiques
Complexification technologique
44Frise chronologique, fondations technologiques
Années 90 très productives Apparition d’outils/technos de production
à Technologies “de base” toujours très utilisées (de documents Web) plus évoluées, accessibles
1989: HTML 1995: PHP 1996: CSS 1998: DOM 2000: CMS 2004: AJAX 2009: Node.js 2015
1995: MySQL 1998: XML
1995: Javascript
45… et vous (non-informaticien) ?
Un paradoxe: depuis 15 ans les outils numériques de production
d'information sur le Web sont de plus en plus accessibles au grand public,
aux non-informaticiens, MAIS parallèlement la notion de document
disparait, car elle est masquée par les outils
§ Exemple 1: avec un CMS, accessibilité accrue car on ne modifie plus directement les
pages Web, les hyperliens… mais on perd la visibilité du contenu exact des
documents Web
§ Exemple 2: bien « pire », les services en ligne de conception automatique de site
Web
Reste que la démocratisation de la production de contenu Web est une
conséquence très positive de l’évolution technologique des 15 dernières
années à plus besoin d’être un expert !
46Un parallèle historique: l’automobile
2010+ : SUV
(+) Très confortable et facile à conduire
(+) Plus besoin de comprendre son fonctionnement
interne pour la conduire
(-) Plus POSSIBLE de comprendre son fonctionnement
interne à rends possible le scandale actuel de
pollution car tout peut être caché dans le logiciel
(+/-) Même en sachant cela, on préfère garder le SUV
à à réfléchir…
1908 : Ford T
(+) Basique et possible de comprendre son
fonctionnement en totalité et la réparer
(+) Principes de base toujours en vigueur
aujourd’hui
(-) Personne ne voudrait conduire une Ford T de
nos jours, pas assez confortable
47« Content Management Systems » (CMS)
Une application qui permet, depuis une interface (graphique) centralisée, la publication, l’édition, la
modification/suppression de contenu... le plus souvent de manière collaborative.
§ …ce sont des VW (avec tous les avantages & inconvénients)
§ Version Web: applications Web, accessibles depuis une adresse http, qui produisent elle-même des
documents/pages Web riches (avec images, sons, vidéos, …) sans que l’utilisateur ait à écrire du code
HTML, Javascript.
§ Apparues fin années 90, démocratisées depuis ~10 ans.
De nombreuses solutions disponibles, la plupart gratuites, basées sur le langage...
§ PHP: Wordpress (utilisé par +10 millions de sites en 2015), Drupal, Joomla!, MediaWiki, phpWiki, SPIP,
…
§ Java: Apache Roller, OpenCMS, Liferay, Xwiki, …
§ Python: Django-cms, …
La solution unique adaptée à tous les besoins n’existe pas, vous devez définir votre besoin précis et
comparer les solutions disponibles
https://en.wikipedia.org/wiki/List_of_content_management_systems
48Adresse pour télécharger le cours
http://chatel.pm/enseignement/
495. TP
Se familiariser à Wordpress
& Création de Documents Web
50Sujet : Etape 1 – Se familiariser à Wordpress
Utilisation d’un CMS (WordPress) pour créer rapidement et de zéro un site Web
§ Pour les besoins du TP, on masque la complexité du codage Web (pas directement de HTML,
PHP, JS, CSS, …)
§ Vous disposez, par binôme, d’un Wordpress déjà configuré, en français, fonctionnel,
indépendant des autres, à une adresse dédiée.
§ Vous pouvez le conserver au delà de ce tp – sur l’année.
§ Vous pouvez/devez TOUT modifier, le fond et la forme !
Une aide possible pour vos projets à réaliser dans le module DNDI
§ Sujet général: « conception de document (culturel et artistique) »
§ Besoin identifié: « choisir un support de communication des travaux réalisés »
§ Dans le cadre de ce TP, on propose un site dynamique réalisé avec WordPress pour communiquer
§ Au delà du projet/tp, un moyen de promotion de vos travaux culturels et artistiques
§ Mais si vous n’êtes pas suffisamment au clair pour faire un site en lien avec votre devoir DNDI, vous
pouvez quand même manipuler Wordpress.
51Site de base à à “customiser”
52Se connecter: projetn.enabled.fr/wp-admin
53Sujet : Etape 2 – Création de Documents Web
4 exercices :
1. création d’un document Web
2. modification de son contenu
3. modification de sa présentation
4. comment le rendre plus dynamique.
Adresse des exercices : http://chatel.pm/enseignement/dndi-tp-
document-web-2/
54Vous pouvez aussi lire
