Document Web - Pierre Châtel

DNDI/Web&Documents
Cours2– 23/11/15
PierreChâtel-Innocenti– LaboParagraphe/CITU
1
Dans ce cours
1. Notionspréliminaires
§
§
Web (rappels)
Documentvs.Fichier
2. DocumentsWeb– Particularités
3. Evolutionsdedocuments – Etdocumentsévolutifs
§
§
Traitementd’information
Conséquences
4. RappelstechnologiquesnécessairesauTP – HTML,CSS,DOM,JS
5. TP– ManipulationdeDocumentWeb
2
1. Notionspréliminaires
3
Web(rappels)
§
§
§
§
§
§
Internet≠Web|LeWebest« document-centric »
ImportancededécorrélerContenuetPrésentation
Versdesdocumentsdeplusenplusdynamique (dusupportphysiqueausupport
numériqueWebpuisWeb2.0)
TechnologiesWeb(HTML,PHP,CSS)etWeb2.0(AJAX,DOM,XML,Javascript)
indispensables
LasimplificationdesoutilsdeproductiondedocumentsWebdepuis15ansade
nombreuxavantages(démocratisation)…etdesinconvénients(onnecomprendplus
toujourstoutcequisepasse« souslecapot »)
UnDOMestunModèle Objet d’unDocument géréparunnavigateurWeb.C’estune
vision« enboutdechaînedeproduction »dudocument.
§
DocumentHTMLouXML réifié (observablesouslaformed’objets)etmutable(par
programmation),àl’opposédelaconceptionstatiqued’undocument papier!
4
Documentvs.Fichier
Document=conceptabstrait,enthéoriedel’information
§
§
« UnDocumentestunensembled'informationquireprésente(…) uneunitéinformationnelle
quel'onpeutraisonnablementconsidérercommeindivisibleetcomplète»- YvesMARCOUX
http://marcoux.ebsi.umontreal.ca
« Undocumentestunensemblecohérentetfini d'informationsstructuréesetlisibles(…)àun
usagedéfini,quelquesoitlesupport » - ClaudeGarneau,CorporationInterdoc,
Documentationjuin2000
Fichier=ressourceconcrète, dansledomainedunumérique
§
§
Stockéesurundisque,enmémoireet/ouéchangéeviaunréseau
L’informatiquemoderne,entantqu’outil,atrèsviteétéorientéefichiers
§
§
Tendanceexacerbéeparlessystèmesd’exploitationdetype*NIX(Unix,Linux,...)oùmêmeles
périphériquesd’unemachinesontvuscommedesfichiersdansunearborescence!
IdempourleWeb(cf.cours#1)
è DocumentouFichier,oùsesituelafrontière?
§
Bienque« l’unitéinformationnelle »dudocument soitindivisible,lesressourcesd’unseul
documentpeuvent sesituer– poursonstockage– dansplusieursfichiersnumériques
§
Ex.DocumentLettre à FichiersEn-tête,Corps,Signature
5
2. DocumentsWeb
Particularités
6
DocumentWebetHypertexte
Visionhypertexte/hypermédia
§
Nœudsinsécables (Web à lesdocuments Web) liés
entreeuxpardeshyperliens permettant à
l’utilisateur depasser d'un nœud àun autre
(Web à lesliens « cliquables »dansune page)
LeWebgénéraliseleconceptdedocumentetintroduit
celuide ressource
§
Définition: unDocumentWeb estunregroupement
logique de1..n fichier(s) ressource(s) nécessaires àsa
diffusion, sarestitution, son affichage
§
§
Balise HTMLinclusion
image
Unlien (URL)non
hypertexte
Image
(ressource)
PageWeb
(ressourceHTML)
lien
<img src=URL1
hyperlien
<a href=URL3
hyperlien
<a href=URL2
lien
<source src=URL4
Nb:principe d’insécabilitérelativisé
PageWeb
(ressourceHTML)
Attention:hyperliens pour changerdedocument +
liens pour chargerdesressources directement ausein
delapage
Ex.l’inclusion directed’une ressource imagedans
une pageWeb viaun lien(une URL)spécifique
<img class="aligncenter size-full wp-image413" src=http://chatel.pm/wpcontent/uploads/2015/01/ginkoseparator_blue.png width="135" height="93 />
PageWeb
(ressourceHTML)
Musique
7
(ressource)
1 DocumentWeb= n Fichiers« ressources »
Cascourant:1pageWeb (fichierHTML)et
sesressourcesliées (CSS,images,sons,…)
DocumentWeb
Extremum- :unepageWebseule,sans
ressourcesliées,peutêtreundocument
Web,ouunesimpleimage(n=1)
Extremum+:unsiteWeb dansson
intégralité,avectoutessesressourcesliées
etseslienshypertextespourpasserdepage
enpage(doncdedocumentendocument),
estunassemblagelogiquededocuments
Web
lien
L’hyperlien faitpartie
dudocument Web…
hyperlien
hyperlien
PageWeb
§ SiteWeb=DocumentdeDocuments
PageWeb
PageWeb
lien
…maispassa
“destination” à dans
unautredocument
8
1 SiteWeb=n DocumentsWebde m Fichiers
DocumentWeb– 6Fichiers
Contenuà 4Fichiers
HTML
Présentationà 2
Fichiers
CSS
hyperliens
HTML
CSS
HTML
9
2. Evolutionsdedocuments
…etdocumentsévolutifs
10
Traitementd’informationetévolutionsde
documents
Recueil d’Information
t
Projet de document
Structuration
Réalisation
de document
Publication
Edition de document
Evolution(s)
Evolution
Evolution
Modification(s) de document
Modification de document
Modification de document
Archivage
Archivage de document
11
Conséquences
…pourvous,producteursdecontenuhypermédia
§
VospropresdocumentWebvontnécessairementévoluerdansletemps,lecontenude
son/sesfichier(s)avec(ex.modificationducodeHTMLd’unepageWeb,deses
hyperliens,...)
§
§
§
§
Pour ajouter/supprimer ducontenu dans undocument,
pour ycorrigerdeserreurs,
pour enmodifier laprésentation, etc..
Conséquenceparadigmehypertexte:deslienset/ouhyperliensd’unepageWebpeuvent
neplusfonctionneràl’instantt0+n
§
Evolution à Modification dudocument (changement liens) à Republication
à PrendreencomptelanotiondetempslorsdelaconceptiondedocumentWeb
§
§
t0:publicationinitiale, t0+1:publication,t0+n:re-publication,…
Toutprévoirpourfaciliterlesfuturesévolutions,enparticulierlorsd’untravaild’équipe
12
Documentsévolutifs
UndocumentWebestamenéàévoluer« enamont »,parunemodification
activedesoncontenuparsonconcepteur(cf.slidesprécédents)
à Evolutionde documents
Maisaussi« enaval »,sansparticipationactivedesonconcepteurlorsdela
modificationducontenu,etsansnécessiterderepublication
à Documentsévolutifs
§
§
UneapplicationWeb(commeleportaildelafac)contiensdesdocumentsWeb
dontlecontenuchangeautomatiquementenfonctiondel’identitéetdes
actionsdesutilisateurs(ex.paged’accueildifférenteenfonctiondel’utilisateur)
Solutiontechnique:technologiesdedocumentsWebdynamiques(PHP+AJAX)
vusauCours#1
13
Documentsévolutifs– PHP+Javascript +DOM
1–
requête
pageweb
URL = http://enabled.fr/projet1/index.php
Serveur
Client
PageWebsource
(avecPHP)
A
HTML
Internet
2– Préprocesseur PHP
Production
pageWeb
pour ceclient
àcetinstant
PageWebproduite+Javascript
C
E
D
F
5.Modifs
doc.via Moteur
sonDOM Javascript
14
Document
sousforme DOM
JS
+
B
3–
Transmission
documents
4.NavigateurWeb
chargelesdocuments
transmisetcrée leDOM
14
Documentsévolutifs– PHP+Javascript +DOM
15
3. Rappelstechnologiques
nécessairesauTP
HTML,CSS,DOM,Javascript
16
HTML
<html>
<html>
Unebalise ouvrante
<body>
…
<head>
Unedonnée – letitre
<title>Hello World Example</title>
dudocument
</head>
<div id=“text_block”>
<p><i><small>
<body>
<a href=“http://www.univ-paris8.fr>
les etudiants
</a>
<div id="hello_block">
Unparagraphe
Unebalise fermantede
<p><b>Hello World!</b></p>
miseenforme
</div>
<div id="text_block">
<p><i><small>Un exemple de fichier HTML pour
Unlien hypertexte
<a href="https://www.univ-paris8.fr">
les etudiants</a></small></i></p>
</small></i>/p>
</div>
</body>
</html>
</div>
</body>
</html>
URL: http://www.univ-paris8.fr
<html>
…
</html>
17
HTML
Elementsdebase
§
§
§
§
§
§
§
§
§
§
Balises ouvrantes(<h1>)etfermantes(</h1>)
Balises “vides”(retouràlaligneforcé<br/>)
Caractérisentcequiestcontenuentrelabaliseouvranteetfermante
Attributsdebalise,pourqualifierlecontenuentrelesbalises:
<a href=“http://www.chatel.pm”>Ma page</a>
Titres: <h1> à<h6>
Paragraphes:<p>
Liens:cf.ci-dessus
Images (utilisedesattributs):
<img src=“img.jpg” alt=“image” width=“50” height=“50”>
FairecommencerlesdocumentsHTMLpar<!DOCTYPE html>
Balises “vides”(retouràlaligneforcé<br/>)
18
Technologies:CSS
Référence unblochtml précis
#div_nav {
color: white;
}
CSS
HTML HTML HTML HTML
§
Uneentréedans lafeuilleCSS
sélecteur {
propriété: valeur;
}
§
Sélecteur
Balise HTML (body, h1, p, b, i),
identifiant #NAME (attributHTML id=NAME),
classe .NAME (attribut HTMLclass=NAME)
§
Propriété
Style àappliquer àl’élément défini parle
sélecteur (font, background, margin,
text_align, color)
§
Valeur
...delapropriété (ex.lacouleur choisie red)
#div_header
Bloc référencé parleCSS
dans lecodeHTML
<div id=“div_nav> … </div>
#div_
nav
#div_content
#div_footer
19
Technologies:CSS
Onindique
l’emplacement dela
feuille destyleCSS
Uneclassedestyle
définie dansleCSS
20
Technologies:CSS
Identifiant à usageunique–
utilisé leplussouvent avec
lesbalises <div>
Stylepardéfaut de<p>
modifié
Uneclasse– réutilisable
à plusieurs endroits
21
DOM– Documentàarbred’objetsmanipulables
<html>
Document
<head>
.firstElementChild()
<title>Hello World Example</title>
</head>
Root
element:
<html>
<body>
.children()
<div id="hello_block">
<p><b>Hello World!</b></p>
</div>
Element:
<head>
Element:
<body>
<div id="text_block">
<p><i><small>Un exemple de fichier HTML pour
<a href="https://www.univ-paris8.fr">
les etudiants</a></small></i></p>
</div>
</body>
</html>
Méthodes modifiant leDOM:
.setAttribute()
.removeAttribute()
.removeChild()
.replaceChild()
(…)
Element:
<title>
Element:
<div>
Element:
<div>
.getAttribute(“id”)
Text:"Hello
World
Example"
Attribute: “id”
Element:<p>
Element:<p>
Element:<b>
Element:<i>
22
Javascript
<html>
<head>
<title>Hello World Example</title>
<script type="text/javascript">
HTML+JS
function clock_refresh(){
var refresh=1000;
dansuneseule
mytime=setTimeout('display_clock()',refresh)
ressource
}
Client
Document
Head
DOM
Body
<p>
Horloge
<span
id='clock'>
Fonction pour rafraichir
automatiquement toutes
lessecondes
function display_clock() {
var strcount;
var x = new Date();
Modification duDOMpar
document.getElementById('clock').innerHTML = x;
lescript, côté client
clock_refresh();
}
</script>
</head>
Script appeléenmême
<body onload=display_clock();>
tempsquelapage
<div id="hello_block">
<p><b>Hello World!</b></p>
</div>
<div id="text_block">
<p><i><small>Un exemple de fichier HTML pour
<a href="https://www.univ-paris8.fr">les etudiants</a></small>
produit a 12:34
</i></p>
Lescript modifie cet
<p>Horloge : <span id='clock' ></span>
élément dansleDOMet
</div>
yinsèrel’horloge
</body>
</html>
23
Adressepourtéléchargerlecours
http://chatel.pm/enseignement/
24
5. TP
ManipulationdeDocumentWeb
25
TP:Sujet
Adressedusujet:http://chatel.pm/enseignement/dndi-tp-documentweb-2/
26
Seconnecter: enabled.fr/projetn/wp-admin
27