Embed Size (px)
Citation preview
Danscecours
Création de document
Papier TélématiqueElectronique
SMS Email AutresWeb
Diffusion de document
Mobile Fichiers PapierInternet
2
Dans ce cours
Focussurlesspécifiésdelacréation,diffusion,réceptiondesdocumentssurleWebIntroduction(non-exhaustive)auxtechnosdebasepourlesdocumentsWeb.Traversédumiroirà aperçudecequiestnormalementinvisiblesurleWebpourlegrandpublic
§ Pourquoi?Caronnepeutpasmaitriserdesoutilscomplexes(commelesCMS)sanscomprendre– unminimum– cequisepasse« souslecapot »
§ Vousserezforcementamenés– quellequesoitvotreprofession– àutiliserdesoutilsWebpourlapromotiondevosprojets,travaux,recherches,articles,réalisationsartistiques…etdoncàcréerdesDocumentsWeb
3
Dans ce cours1. Web&Documents
§ Documentvs. Fichier§ Internetvs.Web
2. TechnologiesdebasededocumentssurleWeb§ HTML,PHP,CSS§ DocumentWebetHypertexte§ Décorréler ContenuetPrésentationd’undocument
3. Web2.0&Documentsdynamiques§ AJAX,DOM,XML,Javascript
4. Perspectiveshistoriques§ Complexificationtechnologique§ CMS
5. TP
4
1. Web&Documents
5
LeWebest« document-centric »(centrédocuments)SIC=« Sciencesdel’InformationetdelaCommunication »
§ Sciencesdel’Information(SDL)etduDocument
UnepageWebestundocument(voirundocumentdedocuments)!« UnchercheurenSICs'intéresseauxconditionsdelaproduction,communicationetréceptiond'uneinformation »
§ LeWebenestunmoyenàTRESgrandeéchelle§ desoutilsdeproductiond'information/documents (logicielsdecréationdecontenu)§ desmoyensdedistributiondel'information,desdocuments(réseauxetserveurs)§ desordinateurspersonnels+navigateurspoursaréceptionetéventuelletransformation
6
Confusion#1:Documentvs. FichierDocument=conceptabstrait,enthéoriedel’information
§ « UnDocumentestunensembled'informationquireprésente(…) uneunitéinformationnellequel'onpeutraisonnablementconsidérercommeindivisibleetcomplète»- YvesMARCOUXhttp://marcoux.ebsi.umontreal.ca
§ « Undocumentestunensemblecohérentetfini d'informationsstructuréesetlisibles(…)àunusagedé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êmelespériphériquesd’unemachinesontvuscommedesfichiersdansunearborescence!
§ IdempourleWeb
è DocumentouFichier,oùsesituelafrontière?§ Bienque« l’unitéinformationnelle »dudocumentsoitindivisible,lesressourcesd’unseul
documentpeuventsesituer– poursonstockage– dansplusieursfichiersnumériques§ Ex.DocumentLettreà FichiersEn-tête,Corps,Signature
7
Confusion#2:Internetvs.Web
Internet=les« tuyaux »§ C.-à-d.lesmoyenstechniquespourladiffusionentremachinesd’information(binaire),quelquellesoit
§ Ungigantesqueréseauderéseau,constituéaufildutemps.Sapremièregraine:ARPANET,projetmilitaireduDoDauxUSAen1969-70
Web=une« toile »constituéededocumentsliéesentreeux§ Découvrablesvia uneadresse§ Accessiblesvia Internet§ Conceptclé:leslienshypertextequitissentunemultitudedeliensentrelesdocuments(d’oùlenomde« toile »)
§ SurleWeb,touslesdocumentssontappelés« ressources »
8
InternetvsWeb
Internetbackbone
Pagesur“Internet”
Ordinateurpersonnel ServeurWikipedia 9
InternetvsWeb
WikipediaCCBY-SA4.0File:InternetKeyLayers.pngUploadedbyConcordhiozCreated:22November2014
10
ARPANET,unréseauencorereprésentable
11
WikipediaCCBY-SA3.0File:WorldWideWebAroundWikipedia.pngUploadedbyZarexCreated:18July2004
WorldWideWeb
12
LeWeb,impossibleàreprésenterdanssonensemble
2. TechnologiesdebasededocumentssurleWebHTML,PHP,CSS
13
Technologiesdedoc.– vued’ensemble
XML
PHP
Node.js
DOM
HTML+CSS
Javascript
Serveur Client
14
Technologies:HTML
« HyperTextMarkupLanguage »§ Formatdedonnéesutilisantdesbalises(<div> … </div>) etde
l’hypertexte pourreprésenterdesdocumentsWeb(pagesWeb)Permetsimultanémentdedéfinir,structurer etmettreenformelecontenu(texte,images,vidéos,…)
§ Définir…dutexte:sousformelibre,directementdanslefichierHTML§ Structurer:balisesstructurantespourcréerdesblocs,quipeuventêtre
imbriquéslesunsdanslesautres<div>
Contenant<div>Contenu</div>
</div>§ Mettreenforme:avecdesbalisesdédiées§ Attention:laplupartdesbalisesserventàlafoisàstructureretàmettreen
forme.
<div> Contenant
</div>
<div>Contenu</div>
15
Technologies:HTML
16
Technologies:HTMLDocumenten poupéesrusses<html>
<head>
<title>Hello World Example</title>
</head>
<body>
<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></i></p>
</div>
</body>
</html>
<html>
</html>
<head>
</head>
<title>Hello World Example
</title>
<body>
…</body>
<div id=“hello_block”>
</div>
<p>
</p>
<b>Hello World!
</b>
Unebaliseouvrante
Unedonnée– letitredudocument
Unebalisefermantedemiseenforme
17
Technologies:HTMLDocumenten poupéesrusses<html>
<head>
<title>Hello World Example</title>
</head>
<body>
<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></i></p>
</div>
</body>
</html>
<html>
</html>
<body>
…
</body>
<div id=“text_block”>
</div>
<p><i><small>
</small></i>/p>
<a href=“http://www.univ-paris8.fr>les etudiants
</a>
Unlienhypertexte
18
<html>
…</html>
URL: http://www.univ-paris8.fr
Technologies:HTMLRésuméElements debase
§ 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/>)
Actuellement,leWorldWideWebConsortium(W3C)ànormalisélaversion5deHTML– leHTML5UneévolutiondeHTML:xHTML,àlasyntaxeplus“propre”,prochedeXML,maisévolutionbloquéepardesproblèmespolitiquesauseinduW3C…LesdocumentsHTMLsontàlabaseduWebdepuissacréation,etrienn’indiquequecelavachanger.
19
DocumentWebetHypertexte
Définition« documenthypertexte »:documentcontenantdesnœuds (unitéminimaled'information,toujoursprésentéeentière)etdeshyperliens pourpasserautomatiquementd’unnœudàl’autre.
§ Unutilisateursedéplacedenœudennœud,vialeshyperliens.§ Nœudsaudiovisuels(image,son,vidéo)à documentshypermédias
HypertextesurleWebà HTML§ C’estleformathypertexteleplusrépanduaumonde(desmilliardsdedocuments)!§ Maisaussiundesplussimples:hyperliensunidirectionnelsquisecassentlorsquela
ressourceliéeestdéplacéeousupprimée,pasd'aperçudesressourcesliées,pasdedroitsd'auteur,pasd'annotation,pasdegestiondeversions.
HypertextepasuniquementsurleWeb:applicationsauprocessusdelecture(avecinterruption),aujournalisme(cf.travauxdeAlexandraSaemmer– Paris8),àlalittérature(histoiresdontvousêteslehéro,poésiehypertextuelle,…)
20
DocumentWebetHypertexteVisionhypertexte/hypermédia
§ Nœudsinsécables (Webà lesdocumentsWeb)liésentreeuxpardeshyperliens permettantàl’utilisateurdepasserd'unnœudàunautre(Webà lesliens« cliquables »dansunepage)
LeWebgénéraliseleconceptdedocumentetintroduitceluide ressource
§ Définition:unDocumentWeb estunregroupementlogiquede1..n fichier(s)ressource(s)nécessairesàsadiffusion,sarestitution,sonaffichage§ Nb:principed’insécabilitérelativisé
§ Attention:hyperlienspourchangerdedocument+lienspour chargerdesressourcesdirectementauseindelapage
Ex.l’inclusiondirected’uneressourceimagedansunepageWebviaunlien(uneURL)spécifique<img class="aligncenter size-full wp-image-413" src=http://chatel.pm/wp-content/uploads/2015/01/ginko-separator_blue.png width="135" height="93 />
21
Unlien(URL)nonhypertexte
BaliseHTMLinclusionimage
PageWeb(ressourceHTML)
PageWeb(ressourceHTML)
PageWeb(ressourceHTML)
Image(ressource)
Musique(ressource)
hyperlien<a href=URL3
hyperlien<a href=URL2
lien<img src=URL1
lien<source src=URL4
DocumentWebetHypertexte1 DocumentWeb= n Fichiers« ressources »Cascourant:1pageWeb (fichierHTML)etsesressourcesliées (CSS,images,sons,…)
Extremum- :unepageWebseule,sansressourcesliées,peutêtreundocumentWeb,ouunesimpleimage(n=1)
Extremum+:unsiteWeb danssonintégralité,avectoutessesressourcesliéesetseslienshypertextespourpasserdepageenpage(doncdedocumentendocument),estunassemblagelogiquededocumentsWeb
§ SiteWeb=DocumentdeDocuments
22
DocumentWeb
hyperlien
hyperlien
lien
lien
PageWeb
PageWeb
PageWeb
L’hyperlienfaitpartiedudocumentWeb…
…maispassa“destination”à dansunautredocument
DocumentWebetHypertexte1 SiteWeb=n DocumentsWebdem Fichiers
23
DocumentWeb– 6Fichiers
Contenuà 4Fichiers
HTML
Présentationà 2Fichiers
CSS
CSShyperliens
HTML
HTML
Technologies:PHPPHP=PHPHypertextPreprocessor
§ Langagedeprogrammation,orientéobjet,exécutécôtéserveurWeb
§ Un« Preprocesseur »d’hypertexte,c’estàdireexécutéAVANTl’envoid’unepageWeb,parunserveuràunnavigateur
§ Balisesspéciales:<?php … ?>Danslapratique:permetdecalculerdespagesWeb,pourchaquerequête,dechaqueutilisateur,sansavoiràlesécrireàl’avance
§ Permetderendrelessitesplusdynamiquequel’écrituredesimpleHTMLàl’avance
§ MAIS,pourautant,undocument/pageWebainsiproduit– unefoisenvoyésurleréseau– restestatiqueunefois« calculé ».C’estlesitedanssaglobalitéquiestrenduplusdynamique
§ Ilfaudraajouterd’autresconcepts&briquestechnologiquespourobtenirdesdocumentWebvraimentdynamiques(cf.DOM,Javascript)
Serveur
Client
PageWebsource(avecPHP)
PageWebproduitestatique
PréprocesseurPHP
Internet
1–requête
pageweb
2–ProductionpageWeb
pourceclientàcetinstant
3–Transmissiondocument
24
!
Technologies:PHP<html
<head><title>Hello World Example</title>
</head><body>
<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 à <?php echo date("H:i");?>
</i></p></div>
</body></html>
<html<head>
<title>Hello World Example</title></head>
<body><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 à 17:19
</i></p></div>
</body></html>
HTMLSourceaveccodePHP
HTMLproduità envoyé sur leréseau
PréprocesseurPHP
25
Décorréler ContenuetPrésentationProblèmeduHTMLclassique:mélangeducontenuetdesaprésentation(sonstyle)dansunmêmedocument.
§ Pb:le« bold »(<b>)affichédansIEneserapaslemêmequeceluideChrome§ Pb:laséparationdescouchesdonnéesetprésentationestunebonnepratiquegénéraliséeen
informatique,maisquin’estpasicirespectée§ Pb:commentfaireévoluerlecontenududocument,sanscassersaprésentation,puisque
toutestmélangé.Deplus,HTMLn’offrepasdemoyensdemiseenpagemoderne
§ Placementcorrectdesélémentssurunepage;lesunsparrapportauxautres,« reflow »,« responsivedesign »…toutcelaestimpossible
§ Pireencore:utilisationdestableauxHTMLpourorganiserlesélementsd’unepageàl’écran§ Pourl’éditiondedocumentsnumériquesnon-Web,dessolutionsexistentdepuislongtemps
(e.g.TeX,LaTeX)UnesolutiondédiéeauWeb:lesCSS- « CascadingStyleSheets »
26
!
Technologies:CSSApparaîtaumilieudesannées90,maisplusieursannéesavantusagerépandu;maintenantindispensable
§ Principe1:structureetcontenurestentdansledocumentHTML§ Principe2:ensembledelaprésentationmigredanslesfichiers(oudéclarations)CSS
§ Danslapratique,lesbalisesdemiseenforme(<b>,<i>,<p>,…)sonttoujoursutilisées,maisleursstylespeutêtredéfinietmodifiédanslesCSS
§ FichierHTMLfortementréduitentaille§ Onparlede« cascade »defeuillesdestyle carlestyled’unmêmedocumentpeutêtrehéritéde
plusieursCSSqui,quelquefois,définissentetsurchargentlesmêmeélémentsgraphiques§ à nécessitéd’arbitrageenfonctiondescontraintesd’affichagedudocumentWeb
UnedespierresangulairesduWebmoderne§ TouslesnavigateurssupportentlesCSS,mêmesicertainesfonctionsrécentes(e.g.mediaqueries ne
fonctionnentpaspartoutexactementpareil)§ Onpeutconcevoirundocumentsanssesoucier,dansunpremiertemps,desaprésentation§ DessitesWebdontlesdocumentsontuneprésentationuniformisée(référenceauxmêmesfeuillesde
style)§ Arbitrageà « responsivedesign ».Parex.unCSSquidiminuelatailledesélémentspourl’affichage
d’unepagesurunsmartphoneetunautreCSSpourl’affichagesurécrand’ordinateur.
27
Technologies:CSS§ UneentréedanslafeuilleCSS
sélecteur { propriété: valeur;
}
§ SélecteurBaliseHTML(body, h1, p, b, i),identifiant# (attributHTML id=…),classe. (attributclass=...)
§ PropriétéStyleàappliqueràl’élémentdéfiniparlesélecteur(font, background, margin, text_align, color)
§ Valeur...delapropriété(ex.lacouleurchoisiered)
28
CSS
HTML HTML HTML HTML
#div_header
#div_footer
#div_nav #div_content
Unbloc<div id=“div_nav> … </div>
HTML
Technologies:CSS
Onindiquel’emplacementdelafeuilledestyleCSS
UneclassedestyledéfiniedansleCSS
29
Technologies:CSS
Uneclasse– réutilisableà plusieurs endroits
Stylepardéfaut de<p> modifié
Identifiant à usageunique–utilisé leplussouvent avec
lesbalises <div>
30
3. Web2.0&DocumentsdynamiquesAJAX,DOM,XML,Javascript
31
EvolutiondedocumentsUndocumentWebestamenéàévoluer enamont desapublication,parunemodificationactivedesoncontenuparsonconcepteur(cf.slidesprécédents).
Enaval,siévolution/modificationsouhaitéeparleconcepteuràrepublicationnécessaire.
Peutaussiévoluersansparticipationactivedesonconcepteurlorsdelamodificationducontenu,etsansnécessiterderepublicationà c’estlecasdes« documentsdynamiques »
§ UneapplicationWeb(commeleportaildelafac)contiensdesdocumentsWebdontlecontenuchangeautomatiquementenfonctiondel’identitéetdesactionsdesutilisateurs(ex.paged’accueildifférenteenfonctiondel’utilisateur)
§ Unesolutiontechniquepossible:technologiesdedocumentsWebdynamiques(PHP+AJAX)
32
EvolutionEvolution
Recueil d’Information
Structuration
Publication
Archivage
Evolution(s)
t
Republication
Documentsdynamiquesàl’heureduWeb2.0Documentsdynamiques – destinésàévoluerdansletemps,enfonctiondesbesoins/actionsdel’utilisateurfinal
§ Solutiontechnique:AJAX(« AsynchronousJavascript&XML)
§ « Asynchrone »carpermetdefairedesmodificationssurlesdocumentssansbloquerlesinteractionsavecl’utilisateur(étapes3– 4nonbloquantes).
Technologies:§ JavaScript – unlangagedeprogrammationsimple,
soupleettrèsrépandusurleWeb.Unstandarddefait.
§ XML – formatmultiplateformeetéchangeable(vialeréseau)dedocuments/données.
§ DOM – modèleobjetdedocuments,permettantleurmanipulationsurleClient(parJavaScript)
Serveur
Internet
DocsHTML&Javascript DocXML
PageWeb(HTML)
Javascript
+Moteur
Javascript +DOMdelapage
Web
Client(NavigateurWeb)1–
requêtepageweb
Click
2– Actionutilisateur
5– Nouvellepageà afficher
3– Requêtenouvellesdonnées
4– EnvoidonnésenXML
33
Documentsàl’heureduWeb2.0
Internet
DocXML
PageWeb(HTML)
Javascript
+
MoteurJavascript +
DOMdelapageWeb
Click2– Actionutilisateur
5– Modificationdelapageaffichée,vialeDOM
3– Requête nouvellesdonnées
4– Envoidonnés enXML
SGBD
34
Onpeut effectuer une autre actionavant leretourdesdonnées enétape 4à asynchronisme
Documentsàl’heureduWeb2.0
Internet
PageWeb(HTML)
Javascript
+
SGBDLecontenududocumentaffiché(lapageWeb,sonDOM)aétéchangé
dynamiquementCEN’ESTPASUNENOUVELLEPAGE!
35
Unmodèleobjet dedocuments,leDOM« DocumentObjectModel »Unmoyen multiplateformeetindépendantdeslangagesdeprogrammationpourreprésenteretmanipulerlesdocumentsHTML,XHTMLetXMLsousformed’objets
§ Documentsmodéliséssousformearborescente,avecdesnœuds – onparled’arbreDOM§ L’arbreDOMestmanipuléviadesméthodes surdesobjets(les« elements »,« attributes »,« text »,…dudocument).Méthodesregroupéesdansune« API ».
§ Attention:mêmesdocumentsqu’avant,c’estlareprésentationenmémoire(del’ordinateur)envuedeleurmanipulation(parunnavigateur,unprogramme,unscript)quichange
Quelintérêt ?Ilestpossibled’intervenirdemanièreprogrammatique(ex.avecduJavaScript)surundocumentWeb(unepagechargéedansunnavigateur)aprioriouposteriori desonaffichageàl’utilisateur.
§ IlestpossibledevirtuellementTOUTchangeràl’intérieurdudocumentquiaététransmisauclient/consommateur/navigateur.
§ Lesparadigmesobjetetarborescentsonttrèsfamiliersàlaplupartdesprogrammeurs,doncfaciled’accès.
§ Onobtientundocumentréifié (observablesouslaformed’objets)etmutable,àl’opposédelaconceptionstatiqued’undocumentpapier 36
DOM,retoursurlesexemples
Visualisationdudocument
Modèleobjetdudocument
NavigateurWeb
VuearborescentedelapageWeb
Un“element”i dansl’arborescence
Visualisationdudocumentdansle
navigateur
1document– 2vues
37
DOM,retoursurlesexemples
VuearborescentedelapageWeb
Un“element”div dansl’arborescence
Visualisationdudocumentdansle
navigateur
38
DOM– arbred’objetsmanipulables<html>
<head>
<title>Hello World Example</title>
</head>
<body>
<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></i></p>
</div>
</body>
</html>
Document
Rootelement:<html>
Element:<head>
Element:<title>
Text:"HelloWorld
Example"
Element:<body>
Element:<div>
Attribute:“id” Element:<p>
Element:<b>
Element:<div>
Element:<p>
Element:<i>
.firstElementChild()
.children()
.getAttribute(“id”)
Méthodes modifiant leDOM:.setAttribute().removeAttribute().removeChild().replaceChild()(…) 39
TechnologiesWeb2.0:XML« eXtensibleMarkupLanguage »,standardW3CGénéralisationdesprincipesduHTMLvuplushaut
§ Maisn’estpasundescendantdeHTML;vientdeSGML§ OnpeutaucontrairevoirHTML/xHTMLcommeunXMLspécialisé,plus
limité
UndocumentXMLest« textuel »,lisibleàl’œilnuparunhumain(commepourHMLT),maissurtoutinterprétableparunemachine.
§ Utiliséprincipalementpourla« sérialisation »etletransfertdedonnéesvialeréseau
§ Favorisel’interopérabilitéquandémetteuretreceveurdedonnéesneseconnaissentpasàl’avance;danscecasleformatdedocument« ouvert »deXMLfacilitelatransmissiondesdonnées.
Sereposesurlanotionde« schema »pourdéfinirlesformats/typesdedocumentetleurcontenuà uneformedemeta-document,declassededocuments.
40
Classe
Objet Objet Objet
Instanciation
XMLSchema
DocXML
DocXML
DocXML
Instanciation
ObjectOrientedProgramming(OOP)
Documents&“MetaDocuments”XML
TechnologiesWeb2.0:Javascript
Langagedeprogrammation de scripts(pascompilé)crééen1995
§ Exécutécôtéclient,danslenavigateur(aucontrairedePHPquiétaitcôtéserveur)
§ Permetderendreles pagesweb interactives,parmodificationduDOM(cf.méthodesvuci-dessus),sansdemanderunnouveaudocumentWebauserveur,etsansbloquerlesinteractionsaveclapage(cf.Gmail)
Unlangageorientéobjetsetprototypes(sansclasses)danslequelmêmelesfonctionssontdesobjets(objetsdu1er ordre)– aucontrairedulangageJava.
§ IntroductionàJavascriptbienaudelàdupérimètredececoursmaisilexistedenombreusesressourcessurlenetpours’yformer
§ Onnotecependantqu’ilestparticulièrementadaptéaumondeduWebetàlamanipulationdedocumentsréifiés,carilestléger,soupleetlui-mêmeorientéobjet
41
!
Serveur
Client
PageWebsource(avecPHP)
PageWebproduite avecJavascript
Préprocesseur PHP
Internet
1–requête
pageweb
2–ProductionpageWeb
pourceclientàcetinstant
3–Transmissiondocuments
HTML JS
+
JavascriptRuntime
A
B
C D
E
F
Documentsousforme DOM
4.Modifsdoc.
TechnologiesWeb2.0:Javascript
42
<html><head>
<title>Hello World Example</title><script type="text/javascript">
function clock_refresh(){var refresh=1000;mytime=setTimeout('display_clock()',refresh)
}
function display_clock() {var strcountvar x = new Date()document.getElementById('clock').innerHTML = x;
clock_refresh();}
</script></head>
<body onload=display_clock();><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><p>Horloge : <span id='clock' ></span>
</div></body>
</html>
CodeJavascript envoyéavecledocumentHTML
sur leclient
Fonction pourrafraichirautomatiquement toutes
lessecondes
ModificationduDOMparlescript,côtéclient
LescriptmodifiecetélémentdansleDOMet
yinsèrel’horloge
Document
Head Body
<p>Horloge
<spanid='clock'>
DOM
Client
TechnologiesWeb2.0:Javascript
43
4. PerspectiveshistoriquesComplexification technologique
44
Frisechronologique,fondationstechnologiques
45
1995:PHP1989:HTML
1995:Javascript
2009:Node.js
1995:MySQL
1996:CSS
1998:XML
2004:AJAX1998:DOM 2015
Années90trèsproductivesà Technologies“debase”toujourstrèsutilisées
2000:CMS
Apparitiond’outils/technosdeproduction(dedocumentsWeb)plusévoluées,accessibles
…etvous(non-informaticien)?
Unparadoxe: depuis15anslesoutilsnumériquesdeproductiond'informationsurleWebsontdeplusenplusaccessiblesaugrandpublic,auxnon-informaticiens,MAISparallèlementlanotiondedocumentdisparait,carelleestmasquéeparlesoutils
§ Exemple1:avecunCMS,accessibilitéaccruecaronnemodifieplusdirectementlespagesWeb,leshyperliens…maisonperdlavisibilitéducontenuexactdesdocumentsWeb
§ Exemple2:bien« pire »,lesservicesenlignedeconceptionautomatiquedesiteWeb
RestequeladémocratisationdelaproductiondecontenuWebestuneconséquencetrèspositivedel’évolutiontechnologiquedes15dernièresannéesà plusbesoind’êtreunexpert!
46
Unparallèlehistorique:l’automobile
47
1908:FordT(+)Basiqueetpossibledecomprendresonfonctionnemententotalitéetlaréparer(+)Principesdebasetoujoursenvigueuraujourd’hui(-)PersonnenevoudraitconduireuneFordTdenosjours,pasassezconfortable
2010+:SUV(+)Trèsconfortableetfacileàconduire(+)Plusbesoindecomprendresonfonctionnementinternepourlaconduire(-)PlusPOSSIBLEdecomprendresonfonctionnementinterneà rendspossiblelescandaleactueldepollutioncartoutpeutêtrecachédanslelogiciel(+/-)Mêmeensachantcela,onpréfèregarderleSUVà àréfléchir…
« ContentManagementSystems »(CMS)Uneapplicationquipermet,depuisuneinterface(graphique)centralisée,lapublication,l’édition,lamodification/suppressiondecontenu...leplussouventdemanièrecollaborative.
§ …cesontdesVW(avectouslesavantages&inconvénients)§ VersionWeb:applicationsWeb,accessiblesdepuisuneadressehttp,quiproduisentelle-mêmedes
documents/pagesWebriches(avecimages,sons,vidéos,…)sansquel’utilisateuraitàécrireducodeHTML,Javascript.
§ Apparuesfinannées90,démocratiséesdepuis~10ans.
Denombreusessolutionsdisponibles,laplupartgratuites,baséessur lelangage...§ PHP: Wordpress (utilisépar+10millionsdesitesen2015),Drupal,Joomla!,MediaWiki,phpWiki,SPIP,
…§ Java:ApacheRoller,OpenCMS,Liferay,Xwiki,…§ Python:Django-cms,…
Lasolutionuniqueadaptéeàtouslesbesoinsn’existepas,vousdevezdéfinirvotrebesoinprécisetcomparerlessolutionsdisponibleshttps://en.wikipedia.org/wiki/List_of_content_management_systems
48
Adressepourtéléchargerlecours
http://chatel.pm/enseignement/
49
5. TPSefamiliariser à Wordpress&Création deDocumentsWeb
50
Sujet:Etape1– SefamiliariseràWordpress
Utilisationd’unCMS(WordPress)pourcréerrapidementetdezérounsiteWeb§ PourlesbesoinsduTP,onmasquelacomplexitéducodageWeb(pasdirectementdeHTML,PHP,JS,CSS,…)
§ Vousdisposez,parbinôme,d’unWordpressdéjàconfiguré,enfrançais,fonctionnel,indépendantdesautres,àuneadressedédiée.
§ Vouspouvezleconserveraudelàdecetp– surl’année.§ Vouspouvez/devezTOUTmodifier,lefondetlaforme!
Uneaidepossible pourvosprojetsàréaliserdanslemoduleDNDI§ Sujetgénéral:« conceptiondedocument(cultureletartistique) »§ Besoinidentifié:« choisirunsupportdecommunicationdestravauxréalisés »
§ DanslecadredeceTP,onproposeunsitedynamiqueréaliséavecWordPresspourcommuniquer§ Audelàduprojet/tp,unmoyendepromotiondevostravauxculturelsetartistiques§ Maissivousn’êtespassuffisammentauclairpourfaireunsiteenlienavecvotredevoirDNDI,vous
pouvezquandmêmemanipulerWordpress.
51
Sitedebaseà à“customiser”
52
Seconnecter:projetn.enabled.fr/wp-admin
53
Sujet:Etape2– CréationdeDocumentsWeb
4exercices:1. créationd’undocumentWeb2. modificationdesoncontenu3. modificationdesaprésentation4. commentlerendreplusdynamique.
Adressedesexercices:http://chatel.pm/enseignement/dndi-tp-document-web-2/
54
