DNDI / Web & Documents - Cours du 21/11/16 Pierre Châtel-Innocenti - Labo Paragraphe/CITU - Pierre Châtel-Innocenti

 
DNDI / Web & Documents - Cours du 21/11/16 Pierre Châtel-Innocenti - Labo Paragraphe/CITU - Pierre Châtel-Innocenti
DNDI / Web & Documents
     Cours du 21/11/16
  Pierre Châtel-Innocenti – Labo Paragraphe/CITU
           pierre.chatel@univ-paris8.fr

                                                   1
DNDI / Web & Documents - Cours du 21/11/16 Pierre Châtel-Innocenti - Labo Paragraphe/CITU - Pierre Châtel-Innocenti
Dans ce cours
           Création de document                                        Diffusion de document

Papier         Electronique         Télématique            Internet   Mobile           Fichiers   Papier

     Web          SMS             Email           Autres

                                                                                                  2
DNDI / Web & Documents - Cours du 21/11/16 Pierre Châtel-Innocenti - Labo Paragraphe/CITU - Pierre Châtel-Innocenti
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
DNDI / Web & Documents - Cours du 21/11/16 Pierre Châtel-Innocenti - Labo Paragraphe/CITU - Pierre Châtel-Innocenti
Dans ce cours
1.   Web & Documents
      §   Document vs. Fichier
      §   Internet vs. Web
2.   Technologies de base de documents sur le Web
      §   HTML, PHP, CSS
      §   Document Web et Hypertexte
      §   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
DNDI / Web & Documents - Cours du 21/11/16 Pierre Châtel-Innocenti - Labo Paragraphe/CITU - Pierre Châtel-Innocenti
1. Web & Documents

                     5
DNDI / Web & Documents - Cours du 21/11/16 Pierre Châtel-Innocenti - Labo Paragraphe/CITU - Pierre Châtel-Innocenti
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
DNDI / Web & Documents - Cours du 21/11/16 Pierre Châtel-Innocenti - Labo Paragraphe/CITU - Pierre Châtel-Innocenti
Confusion #1 : Document vs. Fichier
Document = concept abstrait, en théorie de l’information
     §   « Un Document est un ensemble d'information qui représente (…) une unité informationnelle
         que l'on peut raisonnablement considérer comme indivisible et complète » - Yves MARCOUX
         http://marcoux.ebsi.umontreal.ca
     §   « Un document est un ensemble cohérent et fini d'informations structurées et lisibles (…) à un
         usage défini, quelque soit le support » - Claude Garneau, Corporation Interdoc,
         Documentation juin 2000
Fichier = ressource concrète, dans le domaine du numérique
     §   Stockée sur un disque, en mémoire et/ou échangée via un réseau
     §   L’informatique moderne, en tant qu’outil, a très vite été orientée fichiers
         §   Tendance exacerbée par les systèmes d’exploitation de type *NIX (Unix, Linux, ...) où même les
             périphériques d’une machine sont vus comme des fichiers dans une arborescence !
         §   Idem pour le Web
è Document ou Fichier, où se situe la frontière ?
     §   Bien que « l’unité informationnelle » du document soit indivisible, les ressources d’un seul
         document peuvent se situer – pour son stockage – dans plusieurs fichiers numériques
         §   Ex. Document Lettre à Fichiers En-tête, Corps, Signature
                                                                                                              7
DNDI / Web & Documents - Cours du 21/11/16 Pierre Châtel-Innocenti - Labo Paragraphe/CITU - Pierre Châtel-Innocenti
Confusion #2 : Internet vs. Web
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 1969-70
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 »
                                                                                      8
Internet vs Web

                        Internet backbone

                                                     Page sur “Internet”

 Ordinateur personnel                       Serveur Wikipedia              9
Wikipedia
                  CC BY-SA 4.0
                  File:Internet Key Layers.png

Internet vs Web
                  Uploaded by Concord hioz
                  Created: 22 November 2014

                                10
ARPANET, un réseau encore représentable

                                          11
Wikipedia
                                        CC BY-SA 3.0

Le Web, impossible à représenter dans   File:WorldWideWebAround
                                        Wikipedia.png
                                        Uploaded by Zarex

son ensemble                            Created: 18 July 2004

                                        W orld
                                        W ide
                                        W eb

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

                             13
Technologies de doc. – vue d’ensemble

                     HTML + CSS

                        XML
Serveur      PHP                  DOM      Client

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

                     16
Technologies: HTML
Document en poupées russes
                                                           
       Une balise ouvrante
                                                       
                                 Une donnée – le titre                      
    Hello World Example
                                    du document                                            Hello World Example
                                                                     
                              Une balise fermante de          
      Hello World!
                                  mise en forme
                                                          
                                                                                                Hello World!
          Un exemple de fichier HTML pour
                                                                     
                       les etudiants        
    
                                                                                …
                                                             
                                                                                                           17
Technologies: HTML
         Document en poupées russes                                    

                                                                                                 …
               Hello World Example                         

                                                                                                                   les etudiants
               
                     Hello World!
                                                                                /p>
               
                      Un exemple de fichier HTML pour       

Un lien hypertexte       
                                   les etudiants   

                                                                       URL: http://www.univ-paris8.fr
                                                                       
                                                                                                       …
                                                                                                                        18
Technologies: HTML
Résumé
Elements de base
       §    Balises ouvrantes () et fermantes ()
       §    Balises “vides” (retour à la ligne forcé )
       §    Caractérisent ce qui est contenu entre la balise ouvrante et fermante
       §    Attributs de balise, pour qualifier le contenu entre les balises:
            Ma page
       §    Titres:  à 
       §    Paragraphes: 
       §    Liens: cf. ci-dessus
       §    Images (utilise des attributs):
            
       §    Faire commencer les documents HTML par 
       §    Balises “vides” (retour à la ligne forcé )
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
Document Web et Hypertexte
Définition « document hypertexte » : 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 sur le Web à HTML
     §   C’est 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.
Hypertexte pas uniquement sur le 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, …)

                                                                                                 20
Document Web et Hypertexte
        Vision hypertexte/hypermédia
                      §   Nœuds insécables (Web à les documents Web) liés
                          entre eux par des hyperliens permettant à
                          l’utilisateur de passer d'un nœud à un autre                    Image                                Page Web
                          (Web à les liens « cliquables » dans une page)
                                                                                       (ressource)                         (ressource HTML)
        Le Web généralise le concept de document et introduit                             lien                     hyperlien
        celui de ressource
Document Web et Hypertexte
1 Document Web = n Fichiers « ressources »
Cas courant : 1 page Web (fichier HTML) et
ses ressources liées (CSS, images, sons, …)
                                                                          Document Web                          Page Web

Extremum - : une page Web seule, sans
ressources liées, peut être un document
Web, ou une simple image (n = 1)
                                                                                lien                hyperlien

Extremum + : un site Web dans son               L’hyperlien fait partie
                                                 du document Web…
                                                                             hyperlien
intégralité, avec toutes ses ressources liées                                                        lien
                                                                                         Page Web
et ses liens hypertextes pour passer de page
en page (donc de document en document),
est un assemblage logique de documents
Web
    § Site Web = Document de Documents                                       … mais pas sa
                                                                          “destination” à dans
                                                                           un autre document
                                                     Page Web                                                   22
Document Web et Hypertexte
1 Site Web = n Documents Web de m Fichiers
                                 Document Web – 6 Fichiers
                                    Contenu à 4 Fichiers     Présentation à 2
                                                                  Fichiers

HTML                                                          CSS

                    hyperliens                                          CSS
                                    HTML

           HTML

                                                                                23
Technologies: PHP                                                    Serveur         Page Web source
                                                                                        (avec PHP)
                                                                                2–
                                                                       Production
                                                                         page Web Préprocesseur PHP
PHP = PHP Hypertext Preprocessor                                     pour ce client
        §   Langage de programmation, orienté objet, exécuté côté     à cet instant
            serveur Web
       § Un « Preprocesseur » d’hypertexte, c’est à dire exécuté
            AVANT l’envoi d’une page Web, par un serveur à un
            navigateur                                                          Page Web produite statique
       § Balises spéciales:                                                         3–
Dans la pratique: permet de calculer des pages Web, pour chaque                               Transmission
requête, de chaque utilisateur, sans avoir à les écrire à l’avance                            document

       § Permet de rendre les sites plus dynamique que
            l’écriture de simple HTML à l’avance                     Internet
    !  § MAIS, pour autant, un document/page Web ainsi
            produit – une fois envoyé sur le réseau – reste
                                                                               1–
                                                                           requête
            statique une fois « calculé ». C’est le site dans sa          page web
            globalité qui est rendu plus dynamique
       § Il faudra ajouter d’autres concepts & briques
            technologiques pour obtenir des document Web
            vraiment dynamiques (cf. DOM, Javascript)
                                                                                        Client         24
Technologies: PHP
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 » () 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 »

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

                                                On indique
                                          l’emplacement de la
                                            feuille de style CSS

                    Une classe de style
                    définie dans le CSS

                                                                   29
Technologies: CSS
             Identifiant à usage unique –
              utilisé le plus souvent avec
                   les balises 

                                                Style par défaut de 
                                                        modifié

                         Une classe – réutilisable
                           à plusieurs endroits

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

                                31
Evolution de documents
                                                                                        t
Un document Web est amené à évoluer en amont de sa
publication, par une modification active de son contenu par son                               Recueil d’Information

concepteur (cf. slides précédents).
En aval, si évolution/modification souhaitée par le concepteur à                                  Structuration
republication nécessaire.

Peut aussi évoluer sans participation active de son concepteur lors                                Publication

de la modification du contenu, et sans nécessiter de republication
à c’est le cas des « documents dynamiques »
      §    Une application Web (comme le portail de la fac) contiens des      Republication       Evolution(s)
                                                                                                    Evolution
           documents Web dont le contenu change automatiquement en                                   Evolution
           fonction de l’identité et des actions des utilisateurs (ex. page
           d’accueil différente en fonction de l’utilisateur)
      §    Une solution technique possible : technologies de documents
                                                                                                   Archivage
           Web dynamiques (PHP + AJAX)

                                                                                                                  32
Documents dynamiques
à l’heure du Web 2.0                                                                        Click

Documents dynamiques – destinés à évoluer dans le                                         2 – Action
temps, en fonction des besoins/actions de l’utilisateur                                   utilisateur
final                                                                                                        Moteur
                                                                                                           Javascript +
      §    Solution technique: AJAX (« Asynchronous Javascript
           & XML)
                                                                             +                            DOM de la page
      §    « Asynchrone » car permet de faire des modifications      Page Web Javascript                      Web
           sur les documents sans bloquer les interactions avec       (HTML)            5 – Nouvelle
           l’utilisateur (étapes 3 – 4 non bloquantes).                                 page à afficher

Technologies:                                                        Client (Navigateur Web)           3 – Requête
      §    JavaScript – un langage de programmation simple,                                         nouvelles données
           souple et très répandu sur le Web. Un standard de        1–
           fait.                                                requête                                         4 – Envoi
                                                                                           Internet
                                                                                                                  donnés
      §    XML – format multiplateforme et échangeable (via le page web
                                                                                                                  en XML
           réseau) de documents/données.
      §    DOM – modèle objet de documents, permettant leur
           manipulation sur le Client (par JavaScript)                                    Docs HTML
                                                                                                                    Doc XML
                                                                                          & Javascript

                                                                     Serveur                                        33
Documents à l’heure du Web 2.0

                                                                                                                       Internet
                     5 – Modification de la page
                                                                                         +
                         affichée, via le DOM

                                  2 – Action                  Click
                                  utilisateur

                Moteur                          3 – Requête nouvelles données
Page Web
              Javascript +
 (HTML)
             DOM de la page                                                                                                            SGBD

                 Web                                                                         4 – Envoi donnés en XML
                                                    On peut effectuer une autre action
                                                     avant le retour des données en
Javascript                                              étape 4 à asynchronisme
                                                                                                     Doc XML

                                                                                                                                  34
Documents à l’heure du Web 2.0

                                                               Internet
                                                +

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

                                                                          35
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                                                         36
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                                   Modèle objet du
                                         Navigateur Web
                       document                                          document
                                                                                                        37
DOM, retour sur les exemples
 Visualisation du
document dans le
    navigateur
                                                       Vue arborescente
                                                        de la page Web
                               Un “element” div dans
                                   l’arborescence

                                                                          38
DOM – arbre d’objets manipulables

                                                                              Document
  
    Hello World Example                                             .firstElementChild()
                                                                          Root
                                                                               element:
                                                                          
                                                            .children()
         Hello World!
                                                            Element:                               Element:
                                                                                        
          Un exemple de fichier HTML pour
                                                            Element:                   Element:                Element:
                                                                
                       les etudiants
                                                                                .getAttribute(“id”)
    
                       Méthodes modifiant le DOM:          Text: "Hello
                                                       World       Attribute: “id”    Element:      Element: 
                       .setAttribute()                      Example"

                       .removeAttribute()
                       .removeChild()
                       .replaceChild()                                                       Element:      Element: 
                       (…)                                                                                              39
Technologies Web 2.0: XML                                                                 Object Oriented Programming (OOP)

                                                                                                            Classe
« eXtensible Markup Language », standard W3C
Généralisation des principes du HTML vu plus haut                                                                      Instanciation
       §    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é                                                                                  Objet    Objet   Objet

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            Documents &
            via le réseau                                                                      “Meta Documents” XML
       §    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.
                                                                                                    XML Schema
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.                                                                                                          Instanciation

                                                                                                    Doc      Doc     Doc
                                                                                                    XML      XML     XML

                                                                                                                                  40
Serveur

Technologies Web 2.0: Javascript                                                                   Page Web source
                                                                                                      (avec PHP)
                                                                                           2–
                                                                                  Production Préprocesseur PHP
Langage de programmation de scripts (pas compilé) créé                              page Web
en 1995                                                                         pour ce client
      §   Exécuté côté client, dans le navigateur (au contraire de               à cet instant
                                                                                                       HTML       JS
          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                              Page Web produite avec Javascript
          sans bloquer les interactions avec la page (cf. Gmail)          1–                                  3–
                                                                      requête                                 Transmission
Un langage orienté objets et prototypes (sans classes)               page web   Internet                      documents
dans lequel même les fonctions sont des objets (objets
du 1er ordre) – au contraire du langage Java.                                         Client
      §   Introduction à Javascript bien au delà du périmètre de
          ce cours mais il existe de nombreuses ressources sur le
                                                                                               A
          net pour s’y former
  !   §   On note cependant qu’il est particulièrement adapté
          au monde du Web et à la manipulation de documents
                                                                                       B           E    4. Modifs
                                                                                                           doc.
                                                                                                                          Javascript
                                                                                                                           Runtime
          réifiés, car il est léger, souple et lui-même orienté                   C        D       F
          objet
                                                                                     Document
                                                                                  sous forme DOM                     41
Technologies Web 2.0: Javascript
                            
                                Hello World Example
                                
                                   function clock_refresh(){                           Fonction pour rafraichir
                                     var refresh=1000;                                automatiquement toutes
                                     mytime=setTimeout('display_clock()',refresh)           les secondes
                                   }
                                                                                                                     Code Javascript envoyé
                                  function display_clock() {                                                         avec le document HTML
                                    var strcount                                                                            sur le client
                                    var x = new Date()
                                                                                           Modification du DOM par
                                     document.getElementById('clock').innerHTML = x;le script, côté client
                                    clock_refresh();
Client                            }
                                
         Document
                                
                                    Hello World!
    Head            Body          
                                  
                                    Un exemple de fichier HTML pour
DOM             
                                      les etudiants
               Horloge                produit a 12:34
                                                                        Le script modifie cet
                                    Horloge :     élément  dans le DOM et
                                                                                                             42
Technologies Web 2.0: Javascript

                                   43
4. Perspectives historiques
   Complexification technologique

                                    44
Frise chronologique, fondations technologiques

         Années 90 très productives                           Apparition d’outils/technos de production
 à Technologies “de base” toujours très utilisées           (de documents Web) plus évoluées, accessibles

1989: HTML     1995: PHP 1996: CSS 1998: DOM        2000: CMS                    2004: AJAX 2009: Node.js        2015
               1995: MySQL             1998: XML

               1995: Javascript

                                                                                                            45
… 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 !
                                                                                           46
Un parallèle historique: l’automobile
                                                                        2010+ : SUV
                                                  (+) 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 le SUV
                                                  à à 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

                                                                                             47
« 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
https://en.wikipedia.org/wiki/List_of_content_management_systems

                                                                                                                   48
Adresse pour télécharger le cours
http://chatel.pm/enseignement/

                                    49
5. TP
  Se familiariser à Wordpress
  & Création de Documents Web
                                50
Sujet : Etape 1 – Se familiariser à Wordpress
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.

                                                                                                                 51
Site de base à à “customiser”

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

                                            53
Sujet : Etape 2 – Création de Documents Web
4 exercices :
1. création d’un document Web
2. modification de son contenu
3. modification de sa présentation
4. comment le rendre plus dynamique.

Adresse des exercices : http://chatel.pm/enseignement/dndi-tp-
document-web-2/
                                                                 54
Vous pouvez aussi lire
DIAPOSITIVES SUIVANTES ... Annuler