Syst�me d�exploitation Windows Introduction aux commandes et by md820pSH

VIEWS: 8 PAGES: 44

									                                                              Publication Web
Thierry Lemeunier – Licence SPI1 – Systèmes d’exploitations




                                                              Introduction à XHTML, à CSS, aux
                                                              blogs et aux wikis

                                                              Thierry Lemeunier

                                                                                                 1
                                                              Sommaire
                                                                 Diffusion par le web : le client-serveur
                                                                 Créer des pages web en XHTML
                                                                 Agrémenter ses pages web avec CSS
                                                                 Créer son wiki avec DokuWiki
                                                                 Créer son blog avec WordPress
Thierry Lemeunier – Licence SPI1 – Systèmes d’exploitations




                                                                                                             2
                                                              Le client-serveur (1/3)
                                                                 Toute diffusion de données sur le réseau Internet suit le
                                                                  principe du client-serveur :
                                                                  ◦ Client : la machine qui demande l’accès à une information
                                                                  ◦ Serveur : la machine qui diffuse l’information demandée
                                                                 Pour lire une page d’un site web, le navigateur web de la
                                                                  machine cliente « dialogue » avec la machine serveur
                                                                  hébergeant le site web
Thierry Lemeunier – Licence SPI1 – Systèmes d’exploitations




                                                              Machine cliente                                        Machine serveur
                                                                                                                    hébergeant le site
                                                                                                                                     3
                                                              Le client-serveur (2/3)
                                                                 La diffusion utilise différents protocoles :
                                                                  ◦   Protocole pour naviguer sur le Web : HTTP
                                                                  ◦   Protocole pour diffuser des fichiers : FTP
                                                                  ◦   Protocole pour exécuter des commandes à distance : SSH
                                                                  ◦   Etc.
                                                                 Le protocole HTTP transmet :
                                                                  ◦ les requêtes du client au serveur
                                                                  ◦ et la réponse (les données) transitant du serveur vers le client
Thierry Lemeunier – Licence SPI1 – Systèmes d’exploitations




                                                                 Les données sont codées au format HTML et sont affichées
                                                                  par le navigateur de la machine cliente

                                                                                           ...
                                                                                           <body>
                                                                                           <p><img src="entete.gif" alt="caf" /></p>
                                                                            HTTP + HTML    <h2>Déclaration d'un colocataire</h2>
                                                                                           ...
                                                                                           </body>
                                                                                           ...
                                                                                                                                       4
                                                              Le client-serveur (3/3)
                                                                 Comment créer son site web ? Le cas le plus
                                                                  général consiste à suivre les étapes suivantes :
                                                                  1. Créer localement son site
                                                                       Concevoir la structure du site
                                                                       Rassembler les contenus (textes, images, audios, vidéos)
                                                                       Editer des documents HTML (éditeur de texte pure comme
                                                                        Notepad++ ou éditeur spécialisé comme KompoZer)
                                                                  2. Transférer les documents et les contenus sur le
Thierry Lemeunier – Licence SPI1 – Systèmes d’exploitations




                                                                     serveur ; il y a plusieurs possibilités selon
                                                                     l’hébergeur :
                                                                       Transférer avec un logiciel client FTP (FileZilla...)
                                                                       Transférer au serveur grâce à un partage réseau
                                                                       Transférer par des outils web par exemple votre ENT de
                                                                        l’Université (onglet Espace Fichiers répertoire public_html)
                                                                  3. Vérifier que le site fonctionne correctement sur le
                                                                     serveur en consultant la version hébergée sur le
                                                                     serveur
                                                                                                                                       5
                                                              Sommaire
                                                                        par le web : le client-serveur
                                                               Diffusion
                                                               Créer des pages web en XHTML
                                                               Agrémenter ses pages web avec CSS
                                                               Créer son wiki avec DokuWiki
                                                               Créer son blog avec WordPress
Thierry Lemeunier – Licence SPI1 – Systèmes d’exploitations




                                                                                                         6
                                                              XHTML (1/11)
                                                                 HTML est un langage de présentation de contenu multimédia
                                                                  (texte, image, audio, vidéo)
                                                                 Un document au format HTML est un fichier éditable et
                                                                  « compréhensible » par un humain
                                                                 Chaque document HTML peut faire référence à d’autres
                                                                  documents HTML par leurs adresses HTTP : le lien
                                                                  hypertexte
                                                                 Le lien hypertexte est le principe de base du web : lier les
Thierry Lemeunier – Licence SPI1 – Systèmes d’exploitations




                                                                  informations entre elles, d’ailleurs HTML signifie "HyperText
                                                                  Markup Language"
                                                                 XHTML est une version plus stricte et plus récente
                                                                 Remarque n°1 : tous les standards du web sont normalisés
                                                                  et diffusés par le W3C (World Wide Web Consortium) à
                                                                  l’adresse http://www.w3.org/
                                                                 Remarque n°2 : le W3C propose un validateur de
                                                                  conformité à XHTML à l’adresse http://validator.w3.org/

                                                                                                                                  7
                                                              XHTML (2/11)
Thierry Lemeunier – Licence SPI1 – Systèmes d’exploitations




                                                              Chaque document HTML hébergé sur une machine serveur peut
                                                              faire référence à d’autres documents hébergés sur la même
                                                              machine serveur ou bien sur d’autres machines serveurs
                                                                                                                          8
                                                              XHTML (3/11)
                                                                 XHTML repose sur le principe de la séparation entre la forme
                                                                  (l’apparence et l’agencement) et le fond (le contenu diffusé)
                                                                 L’agencement suit une structure logique de répartition du contenu
                                                                  en différents paragraphes, titres, listes, tableaux, etc.
                                                                 Chacun de ces éléments est balisé : le début et la fin de l’élément
                                                                  sont marqués par une balise de début <balise> et une balise de fin
                                                                  </balise>
                                                                 Un élément balisé peut contenir d’autres éléments balisés
                                                                  Une balise peut contenir des attributs servant à spécifier certaines
Thierry Lemeunier – Licence SPI1 – Systèmes d’exploitations




                                                              
                                                                  valeurs de propriétés. Par exemple la balise <img> nécessite
                                                                  l’attribut src pour indiquer l’adresse du fichier de l’image
                                                                 Remarque n°1 : les balises, les attributs et les valeurs des attributs
                                                                  doivent être en minuscule ; les valeurs doivent être entre guillemet
                                                                 Remarque n°2 :
                                                                  ◦ Syntaxe complète des balises HTML
                                                                    http://www.w3.org/TR/1999/REC-html401-19991224/
                                                                  ◦ Syntaxe complète de XHTML
                                                                    http://www.w3.org/TR/xhtml1

                                                                                                                                           9
                                                                         XHTML (4/11)
                                                                             Tout document HTML suit la structure suivante :
                                                                              ◦ L’entête du fichier : indique les propriétés d’encodage (encoding)
                                                                                et de format du fichier (xhtml1-strict.dtd)
                                                                              ◦ Le document lui-même (balises <html>...</html>) composé de
                                                                                deux éléments :
                                                                                  L’entête du document (balises <head>...</head>) : indique le titre (balises
                                                                                   <title>...</title>) et les propriétés du document (balises <meta>...</meta>)
                                                                                  Le corps du document (balises <body>...</body>) : il contiendra les balises des
                                                                                   éléments de contenu et de forme
Thierry Lemeunier – Licence SPI1 – Systèmes d’exploitations




                                                                                    <?xml version="1.0" encoding="iso-8859-1"?>
                                                              Entête du             <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                                                                 fichier            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

                                                                                    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

                                                                                              <head>
                                                                             Entête du               <title> Ceci est le titre en haut de votre navigateur </title>
                                                                             document                <meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />
                                                              Document




                                                                                              </head>

                                                                                              <body>
                                                                                                        <p> bonjour </p>
                                                                               Corps                    <p> vous devez compléter votre page ici </p>
                                                                                              </body>

                                                                                    </html>
                                                                                                                                                                                  10
                                                              XHTML (5/11)
                                                                 Balises des titres :
                                                                  ◦ Balises <hi>...</hi> avec 1 ≤ i ≤ 6
                                                                  ◦ h1 est le plus grand titre et h6 le plus petit titre
Thierry Lemeunier – Licence SPI1 – Systèmes d’exploitations




                                                                  ...
                                                                  <body>
                                                                       <h1>Titre de rang 1</h1>
                                                                       <h2>Titre de rang 2</h2>
                                                                       <h3>Titre de rang 3</h3>
                                                                       <h4>Titre de rang 4</h4>
                                                                       <h5>Titre de rang 5</h5>
                                                                       <h6>Titre de rang 6</h6>
                                                                  </body>
                                                                  ...




                                                                                                                           11
                                                              XHTML (6/11)
                                                                 Balises des paragraphes
                                                                  ◦ Définir un paragraphe : <p>...</p>
                                                                  ◦ Tout ce qui suit un paragraphe va à la ligne
                                                                 Passage à la ligne : <br />
                                                                 Trait horizontal : <hr />
Thierry Lemeunier – Licence SPI1 – Systèmes d’exploitations




                                                                  ...
                                                                  <body>
                                                                       Je vais faire un saut
                                                                       de ligne <br />
                                                                       Et maintenant, je trace
                                                                       un trait horizontal <hr />
                                                                  </body>
                                                                  ...




                                                                                                                   12
                                                               XHTML (7/11)
                                                                   Balises de style :
                                                                    ◦   <b>...</b> : mettre en gras
                                                                    ◦   <i>...</i> : mettre en italique
                                                                    ◦   <sup>...</sup> : mettre en exposant
                                                                    ◦   <sub>...</sub> : mettre en indice
                                                                    ◦   Ces balises ne sont plus utilisées avec CSS (cf. ci-après)
Thierry Lemeunier – Licence SPI1 – Systèmes d’exploitations




                                                              ...
                                                              <body>
                                                                   <p>Voici les <i>styles</i>
                                                                   les <b>plus</b> utilisés
                                                                   en XHTML. </p>
                                                                   <p>On peut aussi mettre
                                                                   des mots en <sup>exposant</sup>
                                                                   ou en <sub>indice</sub>.</p>
                                                              </body>
                                                              ...


                                                                                                                                     13
                                                                XHTML (8/11)
                                                                    Balises pour les tableaux :
                                                                     ◦ Balises englobantes : <table>...</table>
                                                                     ◦ On définit le tableau ligne par ligne avec les balises <tr>...</tr> et pour
                                                                       chaque ligne cellule par cellule avec les balises <td>...</td>

                                                              <body>
                                                                     <table border="1">
                                                                            <tr>
                                                                                  <td><b>Titre</b></td>
                                                                                  <td><b>Année</b></td>
Thierry Lemeunier – Licence SPI1 – Systèmes d’exploitations




                                                                                  <td><b>Nom réalisateur</b></td>
                                                                                  <td><b>Prénom
                                                              réalisateur</b></td>
                                                                            </tr>
                                                                            <tr>
                                                                                  <td>Alien</td>
                                                                                  <td>1979</td>
                                                                                  <td>Scott</td>
                                                                                  <td>Ridley</td>
                                                                            </tr>
                                                                            <tr>
                                                                                  <td>Vertigo</td>
                                                                                  <td>1958</td>
                                                                                  <td>Hitchcock</td>
                                                                                  <td>Alfred</td>
                                                                            </tr>
                                                                     </table>                                                                        14
                                                              </body>
                                                              XHTML (9/11)
                                                                 Balises de listes :
                                                                  ◦ Liste normale : <ul>...</ul>
                                                                  ◦ Liste numérotés : <ol>...</ol>
                                                                  ◦ Chaque élément de la liste : <li>...</li>

                                                              ...
                                                              <body>
Thierry Lemeunier – Licence SPI1 – Systèmes d’exploitations




                                                                   <p>Voici deux listes :</p>
                                                                   <ul>
                                                                         <li>Tout d'abord... </li>
                                                                         <li>En outre...</li>
                                                                         <li>Qui plus est...</li>
                                                                         <li>En conclusion...</li>
                                                                   </ul>
                                                                   <ol>
                                                                         <li>Tout d'abord...</li>
                                                                         <li>En outre...</li>
                                                                         <li>Qui plus est...</li>
                                                                         <li>En conclusion...</li>
                                                                   </ol>
                                                              </body>
                                                              ...                                               15
                                                              XHTML (10/11)
                                                                 Balise d’image :
                                                                  ◦ Balise : <img src="adresse_image" alt="texte" />
                                                                  ◦ L’attribut src : adresse HTTP de l’image
                                                                      Si l’image est au même endroit que le fichier HTML : src="Labrador.jpg"
                                                                      Si l’image est dans un autre répertoire : src="../images/Labrador.jpg"
                                                                      Si l’image est sur un autre serveur :
                                                                       src="http://www.images.net/images/chiens/Labrador.jpg"
                                                                  ◦ L’attribut alt : texte alternatif si l'image ne peut être
Thierry Lemeunier – Licence SPI1 – Systèmes d’exploitations




                                                                    chargée

                                                              ...
                                                              <body>
                                                                   <p>Voici l'image d'un Labrador :</p>
                                                                   <p>
                                                                        <img src="Labrador.jpg"
                                                                               alt="mon chien" />
                                                                   </p>
                                                              </body>
                                                              ...
                                                                                                                                                 16
                                                              XHTML (11/11)
                                                                 Balise de lien hypertexte :
                                                                  ◦ Balise : <a href="adresse_http">...</a>
                                                                  ◦ Le lien peut être n’importe quel élément : un
                                                                    texte, une image, une vidéo...
                                                              ...
Thierry Lemeunier – Licence SPI1 – Systèmes d’exploitations




                                                              <body>
                                                                   <p>Voici comment on fait un lien<br />
                                                                   vers une <a href="images.html">autre page</a>
                                                                   dans du texte</p>
                                                              </body>
                                                              ...




                                                                                                                    17
                                                              Sommaire
                                                                        par le web : le client-serveur
                                                               Diffusion
                                                               Créer des pages web en XHTML
                                                               Agrémenter ses pages web avec CSS
                                                               Créer son wiki avec DokuWiki
                                                               Créer son blog avec WordPress
Thierry Lemeunier – Licence SPI1 – Systèmes d’exploitations




                                                                                                         18
                                                              CSS (1/11)
                                                                 Le défaut de XHTML est de ne pas séparer clairement
                                                                  le fond de la forme : il est difficile de changer d’aspect
                                                                  même sans changer le contenu
                                                                 CSS (Cascading Style Sheets = Feuilles de Styles en
                                                                  Cascade) permet de séparer la forme du fond :
                                                                  ◦ le fond (le contenu et la structure logique) est défini avec
                                                                    XHTML
                                                                  ◦ et la forme (l’aspect) est défini dans un fichier séparé au
Thierry Lemeunier – Licence SPI1 – Systèmes d’exploitations




                                                                    standard CSS
                                                                 Une même feuille de style peut servir pour toutes les
                                                                  pages d’un site afin d’assurer une bonne cohérence
                                                                  ergonomique
                                                                 La norme CSS 2.1 est accessible à la page :
                                                                  http://www.w3.org/TR/CSS21/
                                                                 Un validateur de conformité est accessible à la page :
                                                                  http://jigsaw.w3.org/css-validator/
                                                                                                                                   19
                                                               CSS (2/11)
                                                                   Exemple d’un même contenu mais avec deux fichiers CSS :




                                                                            +                    =
Thierry Lemeunier – Licence SPI1 – Systèmes d’exploitations




                                                                                   Fichier CSS n°1




                                                              Fichier XHTML
                                                                                                 =
                                                                           +
                                                                                   Fichier CSS n°2
                                                                                                                              20
                                                              CSS (3/11)
                                                                 Comment définir et utiliser une feuille de style ?
                                                                  1.   Editer un fichier CSS externe au document XHTML
                                                                        h1 {
                                                                               font-family : Arial, Helvetica,sans-serif ; /* changer le style de la police */
                                                                               font-size : 14px ; /* changer la taille de la police */
                                                                               color : #00ff00 ; /* changer la couleur de la police */
                                                                               background-color : #000000 ; /* changer la couleur de fond */
                                                                        }


                                                                  1.   Inclure la feuille de style CSS dans l’entête du document XHTML
Thierry Lemeunier – Licence SPI1 – Systèmes d’exploitations




                                                                        <head>
                                                                              <title>Gabarit XHTLM avec CSS</title>
                                                                               <meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />
                                                                              <link rel="stylesheet" type="text/css" href="style1.css" media="screen" />
                                                                        </head>




                                                                  1.   Après téléchargement sur
                                                                       le serveur, vérifier l’apparence
                                                                       obtenue


                                                                                                                                                                 21
                                                              CSS (4/11)
                                                                 Codage de la couleur en CSS:
                                                                  ◦ En informatique, la couleur est obtenue en
                                                                    mélangeant 3 composantes : une composante rouge,
                                                                    une composante verte et une composante bleue
                                                                  ◦ Ainsi chaque couleur est codée sur 3 entiers compris
                                                                    entre 0 et 255 (0 et FF en hexadécimal)
                                                                  ◦ Exemples :
Thierry Lemeunier – Licence SPI1 – Systèmes d’exploitations




                                                                       Le noir : #000000 ou black
                                                                       Le blanc : #FFFFFF ou white
                                                                       Le rouge : #FF0000 ou red
                                                                       Le vert : #00FF00 ou green
                                                                       Le bleu : #0000FF ou blue
                                                                       Une couleur quelconque par exmple : #120AA1
                                                                  ◦ Pour obtenir le code hexadécimal d’une couleur allez
                                                                    par exemple sur le site :
                                                                    http://www.drpeterjones.com/colorcalc/
                                                                                                                           22
                                                              CSS (5/11)
                                                                 Syntaxe de la feuille de style :
                                                                  ◦ Ensemble de règles de la forme :
                                                                    sélecteurs { propriétés pour le sélecteur }
                                                                  ◦ Le sélecteur correspond aux balises de XHTML
                                                                    (hi, ul, li, ol, p, br, hr, table, td, tr, ...).
                                                                  ◦ Par exemple
                                                                    h1, h2 {...} définit les propriétés communes à h1et h2
                                                                  ◦ Chaque propriété est de la forme attribut : valeurs ;
Thierry Lemeunier – Licence SPI1 – Systèmes d’exploitations




                                                                    Par exemples :
                                                                             font-size : 16pt ;
                                                                             font-family : Arial, Helvetica,sans-serif ;
                                                                  ◦ Les propriétés modifiables sont :
                                                                     les propriétés de couleur et de fond
                                                                     les propriétés associées aux polices et au texte (caractères et formatage
                                                                      d'un texte)
                                                                     les propriétés associées aux listes (présence ou non de puces, ...)
                                                                     les propriétés associées aux tables (styles des bordures d'un tableau, ...)

                                                                                                                                                    23
                                                                CSS (6/11)
                                                                    Propriétés de couleur et de fond :
                                                                     ◦ Elles s’appliquent à des sélecteurs comme body ou hi
                                                                         color : couleur du texte
                                                                         background-color : couleur de fond
                                                                         background-image : image de fond
Thierry Lemeunier – Licence SPI1 – Systèmes d’exploitations




                                                              body { /* l'ensemble du document */
                                                                color: #434a6a ;
                                                                background-color: white ;
                                                                background-image:url(../fleur1.jpg) ;
                                                              }

                                                              h1 {
                                                                color: #e8eaff ;
                                                                background-color :#babcec ;
                                                              }



                                                                                                                              24
                                                              CSS (7/11)
                                                                  Propriétés associés aux textes :
                                                                   ◦ font-family : police de caractères; valeur : une police, par exemple
                                                                     Verdana, Arial, Helvetica, Geneva, ...
                                                                   ◦ font-size : taille de la police par exemple 12px
                                                                   ◦ font-style : style de la police; valeur : normal, italic
                                                                   ◦ font-weight : épaisseur de la police ; valeur : normal, bold, bolder, lighter
                                                                   ◦ text-decoration : soulignement du texte ; valeur : none, underline, overline,
                                                                     line-through
                                                                   ◦ text-align : alignement du texte ; valeur : left, right, center, justify
Thierry Lemeunier – Licence SPI1 – Systèmes d’exploitations




                                                                   ◦ letter-spacing : distance entre les lettres par exemple 5px

                                                                  h1 {
                                                                    font-family: Geneva;
                                                                    font-size: 40px;
                                                                    font-style: italic;
                                                                    font-weight: bolder;
                                                                    text-decoration: line-through;
                                                                    text-align: left;
                                                                    color: #10ff10 ;
                                                                    letter-spacing: 5px;
                                                                    background-image : url(fleur1.jpg) ;
                                                                  }                                                                                  25
                                                              CSS (8/11)
                                                                 Propriétés des listes :
                                                                  ◦ list-style-type : type de puces à appliquer dans la
                                                                    liste; valeur : disc, circle, square, decimal, none
                                                                  ◦ list-style-image : spécifier une image à utiliser
                                                                    comme puce ; valeur : url(image.gif)
Thierry Lemeunier – Licence SPI1 – Systèmes d’exploitations




                                                                   ul {
                                                                     font-family: Geneva;
                                                                     font-size: 14px;
                                                                     font-style: italic;
                                                                     text-align: left;
                                                                     list-style-type: square;
                                                                   }

                                                                   ol {
                                                                     font-family: Arial;
                                                                     font-size: 16px;
                                                                     font-style: normal;
                                                                     text-align: center;
                                                                   }                                                      26
                                                              CSS (9/11)
                                                                 Propriétés des bordures :
                                                                  ◦ Concerne les bordures de tableau, de texte, etc.
                                                                  ◦ Propriétés communes aux 4 côtés :
                                                                     border-color : couleur de la bordure ; valeur : unecouleur
                                                                     border-style : forme de la bordure ; valeur : none, hidden, dotted, dashed, solid,
                                                                      double groove, ridge, inset, outset
                                                                     border-width : épaisseur de la bordure ; valeur: épaisseur ou thin, medium, thick
                                                                  ◦ Propriétés spécifique pour un seul côté :
                                                                     Pour le haut : border-top-color, border-top-style et border-top-width
Thierry Lemeunier – Licence SPI1 – Systèmes d’exploitations




                                                                     Idem pour bottom, left et right

                                                              p{
                                                                font-family: Arial;
                                                                border-color: red;
                                                                border-style: dashed;
                                                                border-width: 2px;
                                                                border-right-style: solid;
                                                                border-left-style: solid;
                                                                border-left-color: green;
                                                                border-right-color: green;
                                                                border-left-width: 20px;
                                                                border-top-width: thin;
                                                              }                                                                                            27
                                                              CSS (10/11)
                                                                  Propriétés spécifiques aux tableaux :
                                                                   ◦ padding : espace entre la bordure et le contenu
                                                                     des cellules par exemple 2px
                                                                   ◦ border-collapse : fusionner ou séparer la bordure
                                                                     du tableau et la bordure des cases ; valeur :
                                                                     collapse ou separate
Thierry Lemeunier – Licence SPI1 – Systèmes d’exploitations




                                                              table, td {
                                                                    border-color : #6495ed ;
                                                                    border-top-style : solid ;
                                                                    border-bottom-style : solid ;
                                                                    border-width : thin;
                                                                    text-align : center;
                                                                    padding: 4px;
                                                              }
                                                              td {
                                                                    border-left-style : dashed ;
                                                                    border-right-style : dashed ;
                                                              }
                                                                                                                         28
                                                              CSS (11/11)
                                                                  Définir des classes :
                                                                   ◦ Possibilité de « spécialiser » une balise
                                                                   ◦ Syntaxe de la règle : balise.NomClasse { propriétés }
                                                                   ◦ Dans XHTML : <balise class="NomClasse">...</balise>
                                                                       td.grise {
Thierry Lemeunier – Licence SPI1 – Systèmes d’exploitations




                                                                              background-color: grey;
                                                                       }

                                                                       td.verte {
                                                                             background-color: green;
                                                                       }

                                                              <body>
                                                                <table >
                                                                  <tr>
                                                                    <td class="grise"> une cellule grise </td>
                                                                    <td class="verte"> une cellule verte </td>
                                                                 </tr>
                                                                </table>
                                                              </body>                                                        29
                                                              Sommaire
                                                                        par le web : le client-serveur
                                                               Diffusion
                                                               Créer des pages web en XHTML
                                                               Agrémenter ses pages web avec CSS
                                                               Créer son wiki avec DokuWiki
                                                               Créer son blog avec WordPress
Thierry Lemeunier – Licence SPI1 – Systèmes d’exploitations




                                                                                                         30
                                                              Créer son wiki (1/6)
                                                                 wiki = site web collaboratif : pages éditables par
                                                                  tout ou partie des visiteurs du site
                                                                 Modification directe
                                                                  sur le site avec un
                                                                  éditeur intégré
                                                                 Le premier wiki a
                                                                  été créé en 1995 par
Thierry Lemeunier – Licence SPI1 – Systèmes d’exploitations




                                                                  Ward Cunningham
                                                                 Le wiki le plus connu
                                                                  est l’encyclopédie
                                                                  collaborative Wikipédia
                                                                  http://fr.wikipedia.org/



                                                                                                                       31
                                                              Créer son wiki (2/6)
                                                                 Utilité du wiki :
                                                                      ◦ Site web ouvert à la modification
                                                                      ◦ Site web de partage de connaissance
                                                                        Exemple : WikiF1 http://www.wikif1.org/
                                                                      ◦ Site d’un groupe de travail collaboratif (souvent à accès
                                                                        restreint ou non public)
                                                                        Exemple : wiki de la licence SPI
Thierry Lemeunier – Licence SPI1 – Systèmes d’exploitations




                                                                      Problèmes du wiki :
                                                                         Liés à son ouverture
                                                                         Possibilité d’écrire des
                                                                          contre-vérités, de falsifier
                                                                          les faits, etc.
                                                                         Exemples avec Wikipédia :
                                                                             Modifier une biographie
                                                                             Modifier l’histoire d’une
                                                                               entreprise
                                                                                                                                    32
                                                              Créer son wiki (3/6)
                                                                 Principes d’un wiki :
                                                                  ◦ Une partie éditoriale : le contenu lisible et modifiable
                                                                    (souvent organisé de façon hiérarchique pas
                                                                    obligatoirement)
                                                                  ◦ Une partie fonctionnelle : le moteur de wiki (un
                                                                    programme installé sur le serveur web) qui gère
                                                                    l’édition sur place et les droits d’éditions
Thierry Lemeunier – Licence SPI1 – Systèmes d’exploitations




                                                                 Quelques moteurs de wiki :
                                                                  ◦   MediaWiki (créé pour Wikipédia)
                                                                  ◦   DokuWiki (moteur standard)
                                                                  ◦   PmWiki (conforme XHTML et CSS)
                                                                  ◦   Xwiki (orienté wiki d’entreprise)
                                                                  ◦   Etc.
                                                                  ◦   Pour un comparatif de plus de 124 moteurs de wiki
                                                                      voir WikiMatrix http://www.wikimatrix.org/
                                                                                                                               33
                                                              Créer son wiki (4/6)
                                                                 La partie éditoriale :
                                                                  ◦ Accès avec un navigateur web classique
                                                                  ◦ Accès en lecture (par défaut) et en écriture après
                                                                    identification
                                                                  ◦ Selon le moteur de wiki, l’édition est soit :
                                                                     Purement textuelle en wikitexte : syntaxe particulière au moteur de wiki
                                                                      pour la mise en forme du texte, créer des liens, disposer des images, etc.
                                                                     WYSIWYG (What You See Is What You Get)
Thierry Lemeunier – Licence SPI1 – Systèmes d’exploitations




                                                                  ◦ Suivi des modifications avec certains wiki :
                                                                     Un contributeur enregistré peut suivre l'évolution d'une page, ou les
                                                                      contributions d'une personne en particulier
                                                                     Ces suivis permettent de réagir à des actes de vandalismes, ou de spam.
                                                                  ◦ Historique des modifications de chaque page :
                                                                     Il permet de retourner à une version précédente (notemment en cas de
                                                                      vandalisme)
                                                                     Il indique la date de la modification, et le nom ou l'adresse IP de son
                                                                      auteur
                                                                     Il permet le respect du droit d'auteur en gardant une trace de tous les
                                                                      auteurs d'un article.
                                                                                                                                                   34
                                                              Créer son wiki (5/6)
                                                                 La partie fonctionnelle :
                                                                  ◦ Identification :
                                                                     Un wiki entièrement public (auteur anonyme) identifie un
                                                                      auteur par son adresse internet (numéro IP)
                                                                     Un wiki à accès restreint identifie un auteur par un login et un
                                                                      mot de passe préalablement enregistré
                                                                  ◦ Les droits :
Thierry Lemeunier – Licence SPI1 – Systèmes d’exploitations




                                                                     Chaque auteur à un niveau de droit selon qu’il est anonyme (si
                                                                      le wiki le permet) ou enregistré
                                                                     Un administrateur affecte les droits :
                                                                       Droit en lecture : ne requiert pas d’enregistrement (sauf pour les
                                                                        wikis privés d’entreprise par exemple)
                                                                       Droits en écriture, création, suppression, téléchargement de
                                                                        médias :
                                                                         Nécessite une inscription préalable (sauf pour les wikis entièrement public)
                                                                         Permet de gérer l’accès en écriture par page ou groupe de pages par auteur ou par
                                                                          groupe d’auteurs ou même par fonction (auteur, administrateur, etc.)

                                                                                                                                                              35
                                                              Créer son wiki (6/6)
                                                                 Comment créer son wiki ? Deux possibilités :
                                                                  ◦ Soit utiliser un serveur de wiki existant gratuit ou
                                                                    payant. Par exemples : EditThis.info, PBWiki, Wikia
                                                                    Wikidot, Wiki-Site, etc.
                                                                  ◦ Soit installer son propre moteur de wiki sur son
                                                                    site web (ce sera notre démarche) :
Thierry Lemeunier – Licence SPI1 – Systèmes d’exploitations




                                                                   1.   Télécharger localement un moteur de wiki
                                                                        Notre choix : DokuWiki http://www.dokuwiki.org/dokuwiki
                                                                   2.   Décompressé le moteur de wiki
                                                                   3.   (Editer localement les fichiers de configuration)
                                                                   4.   (Préparer une base de données sur le serveur si nécessaire)
                                                                   5.   Télécharger le répertoire wiki avec FTP sur votre site web
                                                                   6.   Commencer à travailler sur le wiki de votre site
                                                                                                                                      36
                                                              Sommaire
                                                                        par le web : le client-serveur
                                                               Diffusion
                                                               Créer des pages web en XHTML
                                                               Agrémenter ses pages web avec CSS
                                                               Créer son wiki avec DokuWiki
                                                               Créer son blog avec WordPress
Thierry Lemeunier – Licence SPI1 – Systèmes d’exploitations




                                                                                                         37
                                                              Créer son blog (1/7)
                                                                 blog (ou blogue) = site web à billets
                                                                  généralement commentés
                                                                 L’édition se fait sur place uniquement par
                                                                  l’auteur du blog : le blogueur ou la blogueuse
                                                                 Les commentaires (si autorisés) sont publics
Thierry Lemeunier – Licence SPI1 – Systèmes d’exploitations




                                                                  mais peuvent être modérés
                                                                 Les premiers blogs sont apparus fin des années
                                                                  1990 au Canada
                                                                 Les blogs sont souvent éphémères : des milliers
                                                                  de blog sont crées par jour et autant sont
                                                                  détruits ou abandonnés
                                                                                                                    38
                                                              Créer son blog (2/7)
                                                                 Un exemple de type de blog : le blog journalistique
                                                                  ◦ Tenu par des journalistes d’une rédaction ou des
                                                                    indépendants mais n’engageant pas la responsabilité
                                                                    éditoriale du journal
                                                                  ◦ Un exemple : les blogs de Libération.fr
                                                                    http://www.liberation.fr/blogs
Thierry Lemeunier – Licence SPI1 – Systèmes d’exploitations




                                                                                                                          39
                                                              Créer son blog (3/7)
                                                                 Utilité du blog :
                                                                  ◦ Blog d’entreprise : diffusion plus directe, moins officielle et plus
                                                                    interactive vers leurs clients ; le blog interne sert de bulletin
                                                                    d’informations et améliore les échanges entre collaborateurs
                                                                  ◦ Blog pédagogique : développer des pratiques collaboratives et de
                                                                    co-construction dans et hors la classe entre enseignants et
                                                                    apprenants
                                                                  ◦ Blog communautaire : publier des connaissances structurées
                                                                    dans le cadre d'un processus de synthèse
Thierry Lemeunier – Licence SPI1 – Systèmes d’exploitations




                                                                  ◦ Blog personnel : publier un journal intime ou des avis personnels
                                                                    sur n’importe quel sujet...
                                                                 Problèmes du blog :
                                                                  ◦ Comme pour les réseaux sociaux (FaceBook...), diffuser ses
                                                                    opinions et sa vie privée peut nuire au blogueur
                                                                  ◦ Comme toute parole public, il faut respecter le droit en vigueur
                                                                  ◦ Exemples :
                                                                     Affaires judiciaires mettant en cause des élèves insultant des professeurs
                                                                     Des blogs relatant la vie en entreprise auraient conduit à des licenciements

                                                                                                                                                     40
                                                              Créer son blog (4/7)
                                                                 Principes d’un blog :
                                                                  ◦ Une partie éditoriale : le contenu lisible et modifiable
                                                                  ◦ Une partie fonctionnelle : le moteur de blog (un
                                                                    programme installé sur le serveur web) qui gère l’édition
                                                                    sur place et les commentaires
                                                                 Quelques moteurs de blog :
                                                                  ◦ Ce sont des systèmes de gestion de contenu ou CMS
                                                                    (Content Management System)
Thierry Lemeunier – Licence SPI1 – Systèmes d’exploitations




                                                                  ◦ Drupal http://drupal.org/ (très complet et abouti)
                                                                  ◦ Joomla! http://www.joomla.fr/ (très riche et abouti)
                                                                  ◦ SPIP http://www.spip.net/ (simple et connu pour son
                                                                    respect des règles typographiques)
                                                                  ◦ Dotclear http://fr.dotclear.org/ (respectueux des standards
                                                                    du Web et très utilisé en France)
                                                                  ◦ Pour un comparatif de plus de 29 moteurs de blog voir
                                                                    WeblogMatrix http://www.weblogmatrix.org
                                                                                                                                  41
                                                              Créer son blog (5/7)
                                                                 Format d’un blog :
                                                                  ◦ Billets souvent classés par ordre par ordre antéchronologique (le plus
                                                                    récent billet est le premier à apparaître)
                                                                  ◦ Chaque billet est étiqueté avec des tags (mots-clés) qui le catégorise
                                                                  ◦ On peut filtrer des billets par date et/ou par tags
                                                                  ◦ Un billet contient bien sûr des médias
                                                                 Les commentaires :
                                                                  ◦ Il peuvent être autorisé ou censuré partiellement ou totalement
Thierry Lemeunier – Licence SPI1 – Systèmes d’exploitations




                                                                  ◦ Remarque : en France, le blogueur est légalement responsable de ce qui
                                                                    est affiché sur son site
                                                                 Les permaliens :
                                                                  ◦ Chaque billet est accessible par une adresse unique et statique
                                                                  ◦ Il n’y a pas de format standard (jusqu’à présent)
                                                                  ◦ Si un billet est changé, renommé, ou déplacé, son permalien n'est jamais
                                                                    modifié
                                                                  ◦ Si un billet est effacé, son permalien ne peut pas être utilisé à nouveau
                                                                  ◦ Exemple du format du moteur de blog WordPress :
                                                                    http://adresse_du_site/année/mois/jour/nom_du_billet/

                                                                                                                                                42
                                                              Créer son blog (6/7)
                                                                 Les rétroliens (trackback en anglais) :
                                                                   ◦ Il permet de relier des billets de blogs différents (si les moteurs de blog le
                                                                     permettent)
                                                                   ◦ Chaque billet d’un blog à une URL de rétrolien spécifique
                                                                   ◦ L'auteur d'un blog B établit un rétrolien vers un billet d'un blog A en indiquant,
                                                                     dans son propre billet sur son blog B, l’URL de rétrolien du billet du blog A
                                                                   ◦ Le moteur du blog A indiquera dans son billet que le blog B y fait référence
Thierry Lemeunier – Licence SPI1 – Systèmes d’exploitations




                                                              URL de rétrolien d’un billet d’un blog A     Exemple de création d’un billet d’un blog B
                                                                                                           en indiquant le rétrolien du billet du blog A
                                                                                                                                                           43
                                                              Créer son blog (7/7)
                                                                 Comment créer son blog ? Deux possibilités :
                                                                  ◦ Soit utiliser un serveur de blog existant gratuit ou
                                                                    payant. Par exemples : OverBlog, Blogger,
                                                                    Skyrockblog, CanalBlog, etc.
                                                                  ◦ Soit installer son propre moteur de blog sur son
                                                                    site web (cela sera notre démarche) :
Thierry Lemeunier – Licence SPI1 – Systèmes d’exploitations




                                                                   1.   Télécharger localement un moteur de blog
                                                                        Notre choix : WordPress http://www.wordpress-fr.net/
                                                                   2.   Décompressé le moteur de blog
                                                                   3.   (Editer localement les fichiers de configuration)
                                                                   4.   (Préparer une base de données sur le serveur si nécessaire)
                                                                   5.   Télécharger le répertoire blog avec FTP sur votre site web
                                                                   6.   Commencer à travailler sur le blog de votre site
                                                                                                                                      44

								
To top