DNDI / Web & Documents - Cours 1 - 23/11/15 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 1 – 23/11/15
Pierre Châtel-Innocenti – Labo Paragraphe/CITU
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
2. Technologies de base de documents sur le Web
§ HTML, PHP, CSS
§ 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
Internet vs Web à Confusion
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 »
7
Internet vs Web
Internet backbone
Page sur “Internet”
Ordinateur personnel Serveur Wikipedia 8Wikipedia
CC BY-SA 4.0
File:Internet Key Layers.png
Internet vs Web
Uploaded by Concord hioz
Created: 22 November 2014
9ARPANET, un réseau encore représentable
10Wikipedia
CC BY-SA 3.0
File:WorldWideWebAround
Le Web, impossible à représenter
Wikipedia.png
Uploaded by Zarex
Created: 18 July 2004
W orld
W ide
W eb
112. Technologies de base de
documents sur le Web
HTML, PHP, CSS
12Technologies de doc. – vue d’ensemble
HTML + CSS
XML
Serveur PHP DOM Client
Node.js Javascript
13Technologies: 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.
14Focus: Document hypertexte
Définition: 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 et Web
§ 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.
Pas uniquement 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, …)
15Technologies: HTML
16HTML – 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
…
17HTML – 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
…
18HTML – 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.
19Technologies: 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 20Technologies: 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 »
22Technologies: 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.
23CSS
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)
24Technologies: CSS
On indique
l’emplacement de la
feuille de style CSS
Une classe de style
définie dans le CSS
25Technologies: CSS
Identifiant à usage unique –
utilisé le plus souvent avec
les balises
Style par défaut de
modifié
Une classe – réutilisable
à plusieurs endroits
263. Web 2.0 & Documents
dynamiques
AJAX, DOM, XML, Javascript
27Documents à 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 Internet 4 – Envoi
donnés
§ XML – format multiplateforme et échangeable (via le page web
réseau) de documents/données. en XML
§ DOM – modèle objet de documents, permettant leur
manipulation sur le Client (par JavaScript) Docs HTML
Doc XML
& Javascript
Serveur 28Documents à 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
29Documents à 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
30Un 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 31DOM, 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
32DOM, retour sur les exemples
Visualisation du
document dans le
navigateur
Vue arborescente
de la page Web
Un “element” div dans
l’arborescence
33DOM – 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:
(…) 34Technologies 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
35Serveur
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 36Technologies 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
37Technologies Web 2.0: Javascript
384. Perspectives historiques
Complexification technologique
39Frise 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
40… 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 !
41Un parallèle historique: l’automobile
2010+ : Volkswagen Tiguan
(+) 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 la
Tiguan à à 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
42« 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
43Adresse pour télécharger le cours
http://chatel.pm/enseignement/
445. TP
Manipulation Wordpress
45TP: Sujet
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.
46Site de base à à “customiser”
47Se connecter: enabled.fr/projetn/wp-admin
48Vous pouvez aussi lire
