DNDI / Web & Documentschatel.pm/enseignement_fichiers/2015/dndi/dndi_technos_web_cour… · § Placement correct des éléments sur une page; les uns par rapport aux autres, « reflow»,

DNDI/Web&DocumentsCours1– 23/11/15

PierreChâtel-Innocenti– LaboParagraphe/CITU

1

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 cours

1. Web&Documents2. TechnologiesdebasededocumentssurleWeb

§ HTML,PHP,CSS§ DécorrélerContenuetPré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

InternetvsWebà Confusion

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 »

7

InternetvsWeb

Internetbackbone

Pagesur“Internet”

Ordinateurpersonnel ServeurWikipedia 8

InternetvsWeb

WikipediaCCBY-SA4.0File:InternetKeyLayers.pngUploadedbyConcordhiozCreated:22November2014

9

ARPANET,unréseauencorereprésentable

10

LeWeb,impossible àreprésenter

WikipediaCCBY-SA3.0File:WorldWideWebAroundWikipedia.pngUploadedbyZarexCreated:18July2004

WorldWideWeb

11

2. TechnologiesdebasededocumentssurleWebHTML,PHP,CSS

12

Technologiesdedoc.– vued’ensemble

XML

PHP

Node.js

DOM

HTML+CSS

Javascript

Serveur Client

13

Technologies:HTML

« HyperTextMarkupLanguage »§ Formatdedonnéesutilisantdesbalises(<div> … </div>) etde

l’hypertexte pourreprésenterdesdocumentsWeb(pagesWeb)Permetsimultanémentdedéfinir,structureretmettreenformelecontenu(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>

14

Focus:Documenthypertexte

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

HypertexteetWeb§ Leformathypertexteleplusrépanduaumonde(desmilliardsdedocuments)!§ Maisaussiundesplussimples:hyperliensunidirectionnelsquisecassentlorsquela

ressourceliéeestdéplacéeousupprimée,pasd'aperçudesressourcesliées,pasdedroitsd'auteur,pasd'annotation,pasdegestiondeversions.

PasuniquementWeb:applicationsauprocessusdelecture(avecinterruption),aujournalisme(cf.travauxdeAlexandraSaemmer– Paris8),àlalittérature(histoiresdontvousêteslehéro,poésiehypertextuelle,…)

15

Technologies:HTML

16

HTML– documenten 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>

Unebalise ouvrante

Unedonnée – letitredudocument

Unebalise fermantedemiseenforme

17

HTML– documenten poupéesrusses<html>

<head>


</head>

<body>



</div>




</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>

Unlien hypertexte

18

<html>

…</html>

URL: http://www.univ-paris8.fr

HTML– ré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, àla syntaxeplus“propre”,prochedeXML,maisévolutionbloquée pardesproblèmes politiquesauseinduW3C…LesdocumentsHTMLsontàlabaseduWebdepuis sacréation, etrienn’indiquequecela vachanger.

19

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&briquestechnologiques pourobtenirdesdocumentWebvraimentdynamiques (cf.DOM,Javascript)

Serveur

Client

PageWebsource(avecPHP)

PageWebproduitestatique

PréprocesseurPHP

Internet

1–requêtepageweb

2–ProductionpageWeb

pourceclientàcetinstant

3–Transmissiondocument

20

!

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 le réseau

PréprocesseurPHP

21

Décorréler ContenuetPrésentationProblèmeduHTMLclassique:mélangeducontenuetdesaprésentation(sonstyle)dansunmêmedocument.

§ Pb:le« bold »(<b>)affichédansIEneserapaslemêmequeceluideChrome§ Pb:laséparationdescouchesdonnées etpré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, dessolutions existentdepuis longtemps

(e.g.TeX,LaTeX)

UnesolutiondédiéeauWeb:lesCSS- « CascadingStyleSheets »

22

!

Technologies:CSSApparaîtaumilieudesannées90,maisplusieursannéesavantusagerépandu;maintenantindispensable

§ Principe 1:structure etcontenu restentdans ledocument HTML§ Principe 2:ensemble delaprésentation migredans les fichiers (ou déclarations) CSS

§ Danslapratique,lesbalisesdemiseenforme(<b>,<i>,<p>,…)sonttoujoursutilisées,maisleursstylespeutêtredéfinietmodifiédanslesCSS

§ FichierHTMLfortementréduitentaille§ Onparlede« cascade »defeuilles destyle carlestyled’unmêmedocument peut êtrehéritéde

plusieurs CSS qui, quelquefois, définissent etsurchargentlesmêmeéléments graphiques§ à nécessitéd’arbitrageenfonctiondescontraintesd’affichagedudocumentWeb

UnedespierresangulairesduWebmoderne§ Tous lesnavigateurssupportent lesCSS, même sicertaines fonctions récentes (e.g.mediaqueries ne

fonctionnent paspartout exactementpareil)§ Onpeut concevoir undocument sans sesoucier, dans unpremier temps, desaprésentation§ DessitesWebdont lesdocuments ontuneprésentation uniformisée (référence auxmêmes feuilles de

style)§ Arbitrageà « responsive design ».Parex.unCSS qui diminue latailledes éléments pour l’affichage

d’unepagesurun smartphone etun autreCSS pour l’affichage surécrand’ordinateur.

23

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)

24

CSS

HTML HTML HTML HTML

#div_header

#div_footer

#div_nav

#div_content

Unbloc<div id=“div_nav> … </div>

HTML

Technologies:CSS

Onindiquel’emplacement delafeuille destyleCSS

Uneclassedestyledéfinie dansleCSS

25

Technologies:CSS

Uneclasse– réutilisableà plusieurs endroits

Stylepardéfaut de<p> modifié

Identifiant à usageunique–utilisé leplussouvent avec

lesbalises <div>

26

3. Web2.0&DocumentsdynamiquesAJAX,DOM,XML,Javascript

27

Documentsàl’heureduWeb2.0Documentsdynamiques – destinésàévoluerdansletemps,enfonctiondesbesoins/actionsdel’utilisateurfinal

§ Solution technique:AJAX (« Asynchronous Javascript&XML)

§ « Asynchrone »carpermet defairedesmodificationssurles documents sans bloquer les interactions avecl’utilisateur (étapes 3– 4nonbloquantes).

Technologies:§ JavaScript – unlangagedeprogrammation simple,

souple ettrèsrépandu sur leWeb.Unstandard defait.

§ XML – formatmultiplateforme etéchangeable (vialeréseau) dedocuments/données.

§ DOM – modèle objet dedocuments, permettantleurmanipulation surleClient (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

28

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

29

Onpeut effectuer uneautre actionavant leretourdesdonnées enétape4à asynchronisme

Documentsàl’heureduWeb2.0

Internet

PageWeb(HTML)

Javascript

+

SGBDLecontenududocumentaffiché(lapageWeb,sonDOM)aétéchangé

dynamiquementCEN’ESTPASUNENOUVELLEPAGE!

30

Unmodèleobjet dedocuments,leDOM« DocumentObjectModel »UnmoyenmultiplateformeetindépendantdeslangagesdeprogrammationpourreprésenteretmanipulerlesdocumentsHTML,XHTMLetXMLsousformed’objets

§ Documentsmodéliséssousformearborescente,avecdesnœuds – onparled’arbre DOM§ L’arbreDOMestmanipuléviadesméthodes surdesobjets(les« elements »,« attributes »,« text »,…dudocument).Méthodesregroupéesdansune« API ».

§ Attention:mêmesdocumentsqu’avant,c’estlareprésentationenmémoire(del’ordinateur)envuede leurmanipulation(parunnavigateur,unprogramme,unscript)quichange

Quelintérêt?Ilestpossibled’intervenirdemanièreprogrammatique(ex.avecduJavaScript)surundocumentWeb(unepagechargéedansunnavigateur)aprioriouposterioridesonaffichageà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 31

DOM,retoursurlesexemples

Visualisation dudocument

Modèleobjetdudocument

NavigateurWeb

VuearborescentedelapageWeb

Un“element”i dansl’arborescence

Visualisation dudocument dansle

navigateur

1document– 2vues

32

DOM,retoursurlesexemples

VuearborescentedelapageWeb

Un“element”div dansl’arborescence

Visualisation dudocument dansle

navigateur

33

DOM– arbred’objetsmanipulables<html>

<head>


</head>

<body>



</div>




</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éthodesmodifiant leDOM:.setAttribute().removeAttribute().removeChild().replaceChild()(…) 34

TechnologiesWeb2.0:XML« eXtensibleMarkupLanguage »,standardW3CGénéralisation desprincipes duHTMLvuplushaut

§ Maisn’estpasundescendantdeHTML;vientdeSGML§ OnpeutaucontrairevoirHTML/xHTMLcommeunXMLspécialisé,plus

limité

UndocumentXMLest« textuel »,lisible àl’œilnuparunhumain(commepourHMLT) ,mais surtoutinterprétable parunemachine.

§ Utiliséprincipalementpourla« sérialisation »etletransfertdedonnéesvialeréseau

§ Favorisel’interopérabilitéquandémetteuretreceveurdedonnéesneseconnaissentpasàl’avance;danscecasleformatdedocument« ouvert»deXMLfacilitelatransmissiondesdonnées.

Sereposesurlanotionde« schema »pourdéfinir les formats/typesdedocumentetleurcontenuà uneformedemeta-document,declassededocuments.

35

Classe

Objet Objet Objet

Instanciation

XMLSchema

DocXML

DocXML

DocXML

Instanciation

ObjectOriented Programming (OOP)

Documents&“MetaDocuments”XML

TechnologiesWeb2.0:Javascript

Langagedeprogrammation de scripts(pascompilé)crééen1995

§ Exécutécôtéclient, dans lenavigateur(aucontrairedePHPqui étaitcôtéserveur)

§ Permetderendreles pagesweb interactives, parmodification duDOM(cf.méthodes vuci-dessus), sansdemander unnouveau document Web auserveur, etsans bloquer lesinteractions aveclapage(cf.Gmail)

Unlangageorientéobjetsetprototypes(sansclasses)danslequelmêmelesfonctionssontdesobjets(objetsdu1er ordre)– aucontrairedulangageJava.

§ Introduction àJavascript bien audelàdupérimètre dececoursmais ilexistedenombreuses ressources surlenetpour s’y former

§ Onnote cependant qu’il estparticulièrement adaptéaumondeduWebetàlamanipulation dedocumentsréifiés, carilestléger,souple etlui-même orientéobjet

36

!

Serveur

Client

PageWebsource(avecPHP)

PageWebproduite avecJavascript

Préprocesseur PHP

Internet

1–requêtepageweb

2–ProductionpageWeb

pourceclientàcetinstant

3–Transmissiondocuments

HTML JS

+

JavascriptRuntime

A

B

C D

E

F

DocumentsousformeDOM

4.Modifsdoc.


37

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

Code Javascript envoyéavecledocument HTML

sur leclient

Fonction pour rafraichirautomatiquement toutes

lessecondes

Modification duDOMparlescript, côté client

Lescript modifie cetélément dansleDOMet

yinsèrel’horloge

Document

Head Body

<p>Horloge

<spanid='clock'>

DOM

Client


38

4. PerspectiveshistoriquesComplexification technologique

39

Frisechronologique,fondationstechnologiques

40

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/technos deproduction(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!

41

Unparallèlehistorique: l’automobile

42

1908 :FordT(+)Basique etpossible decomprendre sonfonctionnement entotalitéetlaréparer(+)Principes debase toujours envigueuraujourd’hui(-)Personne nevoudrait conduire une FordTdenos jours, pasassezconfortable

2010+ :VolkswagenTiguan(+)Trèsconfortable etfacileàconduire(+)Plus besoin decomprendre son fonctionnementinternepour laconduire(-)Plus POSSIBLEdecomprendre son fonctionnementinterneà rends possible lescandale actueldepollution cartoutpeutêtrecachédans lelogiciel(+/-)Mêmeensachantcela, onpréfèregarderlaTiguanà àréfléchir…

« ContentManagementSystems »(CMS)Uneapplicationquipermet,depuisuneinterface(graphique)centralisée,lapublication,l’édition,lamodification/suppressiondecontenu...leplussouventdemanièrecollaborative.

§ …cesontdesVW(avectous lesavantages&inconvénients)§ VersionWeb:applications Web, accessibles depuis une adresse http,qui produisent elle-même des

documents/pages Web riches (avecimages, sons, vidéos, …)sans quel’utilisateur aitàécrireducodeHTML,Javascript.

§ Apparues finannées 90,démocratisées depuis ~10ans.

Denombreusessolutionsdisponibles,laplupartgratuites,baséessur lelangage...§ PHP: Wordpress (utilisé par+10millions desitesen2015), 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

43

Adressepourtéléchargerlecours

http://chatel.pm/enseignement/

44

5. TPManipulationWordpress

45

TP:Sujet

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, onpropose un sitedynamique réaliséavecWordPress pour communiquer§ Audelàdu projet/tp, unmoyen depromotion devos travauxculturels etartistiques§ Maissi vous n’êtes passuffisamment auclairpour faireunsiteenlien avecvotre devoirDNDI,vous

pouvez quandmêmemanipuler Wordpress.

46

Sitedebaseà à“customiser”

47

Seconnecter:enabled.fr/projetn/wp-admin

48