DNDI / Web & Documents

Transcription

1 DNDI / Web & Documents Cours 1 23/11/15 Pierre Châtel-Innocenti Labo Paragraphe/CITU 1

2 Dans ce cours Création de document Diffusion de document Papier Electronique Télématique Internet Mobile Fichiers Papier Web SMS Autres 2

3 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

4 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

5 1. Web & Documents 5

6 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

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

8 Internet vs Web Internet backbone Page sur Internet Ordinateur personnel Serveur Wikipedia 8

9 Internet vs Web Wikipedia CC BY-SA 4.0 File:Internet Key Layers.png Uploaded by Concord hioz Created: 22 November

10 ARPANET, un réseau encore représentable 10

11 Le Web, impossible à représenter Wikipedia CC BY-SA 3.0 File:WorldWideWebAround Wikipedia.png Uploaded by Zarex Created: 18 July 2004 W orld W ide W eb 11

12 2. Technologies de base de documents sur le Web HTML, PHP, CSS 12

13 Technologies de doc. vue d ensemble HTML + CSS XML Serveur PHP DOM Client Node.js Javascript 13

14 Technologies: HTML «HyperText Markup Language» Format de données utilisant des balises (<div> </div>) 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 <div> Contenant <div>contenu</div> </div> Mettre en forme: avec des balises dédiées <div> Contenant <div>contenu </div> Attention: la plupart des balises servent à la fois à structurer et à mettre en forme. </div> 14

15 Focus: 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, ) 15

16 Technologies: HTML 16

17 HTML document en poupées russes <html> Une balise ouvrante <html> <head> Une donnée le titre <title>hello World Example</title> du document </head> <body> <head> </head> <title> </title> Hello World Example <div id="hello_block"> <body> Une balise fermante de <p><b>hello World!</b></p> mise en forme </div> <div id= hello_block > <p> <div id="text_block"> <p><i><small>un exemple de fichier HTML pour <b> </b> Hello World! <a href=" les etudiants</a></small></i></p> </p> </div> </body> </html> </div> </body> </html> 17

18 HTML document en poupées russes <html> <html> <head> <title>hello World Example</title> <body> <div id= text_block > </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 </body> <p><i><small> </div> <a href= les etudiants </a> </small></i>/p> Un lien hypertexte <a href=" les etudiants</a></small></i></p> </html> </div> </body> </html> URL: <html> </html> 18

19 HTML résumé Elements de base Balises ouvrantes (<h1>) et fermantes (</h1>) Balises vides (retour à la ligne forcé <br/>) Caractérisent ce qui est contenu entre la balise ouvrante et fermante Attributs de balise, pour qualifier le contenu entre les balises: <a href= >Ma page</a> Titres: <h1> à <h6> Paragraphes: <p> Liens: cf. ci-dessus Images (utilise des attributs): <img src= img.jpg alt= image width= 50 height= 50 > Faire commencer les documents HTML par <!DOCTYPE html> Balises vides (retour à la ligne forcé <br/>) 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. 19

20 Technologies: PHP PHP = PHP Hypertext Preprocessor Langage de programmation, orienté objet, exécuté côté serveur Web Un «Preprocesseur» d hypertexte, c est à dire exécuté AVANT l envoi d une page Web, par un serveur à un navigateur Balises spéciales: <?php?> Dans la pratique: permet de calculer des pages Web, pour chaque requête, de chaque utilisateur, sans avoir à les écrire à l avance Permet de rendre les sites plus dynamique que l écriture de simple HTML à l avance! MAIS, pour autant, un document/page Web ainsi produit une fois envoyé sur le réseau reste statique une fois «calculé». C est le site dans sa globalité qui est rendu plus dynamique Il faudra ajouter d autres concepts & briques technologiques pour obtenir des document Web vraiment dynamiques (cf. DOM, Javascript) Serveur 2 Production page Web pour ce client à cet instant Internet Page Web source (avec PHP) Préprocesseur PHP Page Web produite statique 1 requête page web Client 3 Transmission document 20

21 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=" les etudiants</a></small> produit à <?php echo date("h:i");?> </i></p> </div> </body> </html> HTML Source avec code PHP Préprocesseur PHP HTML produit à envoyé sur le réseau <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=" les etudiants</a></small> produit à 17:19 </i></p> </div> </body> </html> 21

22 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» (<b>) 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» 22

23 Technologies: 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 (<b>, <i>, <p>, ) 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. 23

24 Technologies: CSS Une entrée dans la feuille CSS sélecteur { propriété: valeur; } CSS HTML HTML HTML HTML HTML Sélecteur Balise HTML (body, h1, p, b, i), identifiant # (attribut HTML id= ), classe. (attribut class=...) Propriété Style à appliquer à l élément défini par le sélecteur (font, background, margin, text_align, color) Valeur... de la propriété (ex. la couleur choisie red) Un bloc <div id= div_nav> </div> #div_ nav #div_header #div_content #div_footer 24

25 Technologies: CSS On indique l emplacement de la feuille de style CSS Une classe de style définie dans le CSS 25

26 Technologies: CSS Identifiant à usage unique utilisé le plus souvent avec les balises <div> Style par défaut de <p> modifié Une classe réutilisable à plusieurs endroits 26

27 3. Web 2.0 & Documents dynamiques AJAX, DOM, XML, Javascript 27

28 Documents à l heure du Web 2.0 Click Documents dynamiques destinés à évoluer dans le temps, en fonction des besoins/actions de l utilisateur final Solution technique: AJAX («Asynchronous Javascript & XML) «Asynchrone» car permet de faire des modifications sur les documents sans bloquer les interactions avec l utilisateur (étapes 3 4 non bloquantes). Technologies: JavaScript un langage de programmation simple, souple et très répandu sur le Web. Un standard de fait. XML format multiplateforme et échangeable (via le réseau) de documents/données. DOM modèle objet de documents, permettant leur manipulation sur le Client (par JavaScript) 1 requête page web Page Web (HTML) + Javascript 2 Action utilisateur 5 Nouvelle page à afficher Client (Navigateur Web) Internet Docs HTML & Javascript Moteur Javascript + DOM de la page Web 3 Requête nouvelles données 4 Envoi donnés en XML Doc XML Serveur 28

29 Documents à l heure du Web Modification de la page affichée, via le DOM + Internet 2 Action utilisateur Click Page Web (HTML) Javascript Moteur Javascript + DOM de la page Web 3 Requête nouvelles données On peut effectuer une autreaction avant le retour des données en étape 4 à asynchronisme 4 Envoi donnés en XML SGBD Doc XML 29

30 Documents à l heure du Web Internet Page Web (HTML) Javascript Le contenu du document affiché (la page Web, son DOM) a été changé dynamiquement CE N EST PAS UNE NOUVELLE PAGE! SGBD 30

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

32 DOM, 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 document Navigateur Web Modèle objet du document 32

33 DOM, retour sur les exemples Visualisation du document dans le navigateur Un element div dans l arborescence Vue arborescente de la page Web 33

34 DOM arbre d objets manipulables <html> <head> <title>hello World Example</title> </head> <body> <div id="hello_block"> <p><b>hello World!</b></p> </div> <div id="text_block"> Element: <head> Document Root element: <html>.firstelementchild().children() Element: <body> <p><i><small>un exemple de fichier HTML pour </div> </body> </html> <a href=" les etudiants</a></small></i></p> Element: <title> Element: <div>.getattribute( id ) Element: <div> Méthodes modifiant le DOM: Text: "Hello World Attribute: id Element: <p> Element: <p>.setattribute() Example".removeAttribute().removeChild().replaceChild() Element: <b> Element: <i> ( ) 34

35 Technologies Web 2.0: XML Object Oriented Programming (OOP) «extensible Markup Language», standard W3C Généralisation des principes du HTML vu plus haut 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é 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 via le réseau 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. 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. Classe Objet Objet Objet XML Schema Instanciation Documents & Meta Documents XML Instanciation Doc XML Doc XML Doc XML 35

36 Technologies Web 2.0: Javascript Langage de programmation de scripts (pas compilé) créé en 1995 Exécuté côté client, dans le navigateur (au contraire de 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 sans bloquer les interactions avec la page (cf. Gmail) Un langage orienté objets et prototypes (sans classes) dans lequel même les fonctions sont des objets (objets du 1 er ordre) au contraire du langage Java. Introduction à Javascript bien au delà du périmètre de ce cours mais il existe de nombreuses ressources sur le net pour s y former! On note cependant qu il est particulièrement adapté au monde du Web et à la manipulation de documents réifiés, car il est léger, souple et lui-même orienté objet 1 requête page web Serveur 2 Production page Web pour ce client à cet instant Internet C Client Page Web source (avec PHP) Préprocesseur PHP Page Web produite avec Javascript B D A E F Document sous forme DOM HTML + 4. Modifs doc. JS 3 Transmission documents 36 Javascript Runtime

37 Client Technologies Web 2.0: Javascript Head DOM Document Body <p> Horloge <span id='clock'> <html> <head> <title>hello World Example</title> <script type="text/javascript"> function clock_refresh(){ var refresh=1000; mytime=settimeout('display_clock()',refresh) } Fonction pour rafraichir automatiquement toutes les secondes function display_clock() { var strcount var x = new Date() Modification du DOM par document.getelementbyid('clock').innerhtml = x; le script, côté client 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=" etudiants</a></small> produit a 12:34 </i></p> Le script modifie cet <p>horloge : <span id='clock' ></span> élément dans le DOM et </div> y insère l horloge </body> </html> Code Javascript envoyé avec le document HTML sur le client 37

38 Technologies Web 2.0: Javascript 38

39 4. Perspectives historiques Complexification technologique 39

40 Frise chronologique, fondations technologiques Années 90 très productives à Technologies de base toujours très utilisées Apparition d outils/technos de production (de documents Web) plus évoluées, accessibles 1989: HTML 1995: PHP 1996: CSS 1995: MySQL 1995: Javascript 1998: DOM 2000: CMS 2004: AJAX 2009: Node.js : XML 40

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

42 Un parallèle historique: l automobile : 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

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

44 Adresse pour télécharger le cours 44

45 5. TP Manipulation Wordpress 45

46 TP: 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. 46

47 Site de base à à customiser 47

48 Se connecter: enabled.fr/projetn/wp-admin 48