Document Web - Pierre Châtel
Transcription
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