Thierry Lemeunier – Licence SPI1 – Systèmes dexploitations Publication Web Introduction à...
44
Thierry Lemeunier – Licence SPI1 – Systèmes d’exploitations Publication Web Publication Web Introduction à XHTML, à Introduction à XHTML, à CSS, aux blogs et aux CSS, aux blogs et aux wikis wikis Thierry Lemeunier Thierry Lemeunier 1
-
Upload
archimbaud-charlot -
Category
Documents
-
view
106 -
download
0
Transcript of Thierry Lemeunier – Licence SPI1 – Systèmes dexploitations Publication Web Introduction à...
Thi
erry
Lem
euni
er –
Lic
ence
SP
I1 –
Sys
tèm
es d
’exp
loita
tions
Publication WebPublication Web
Introduction à XHTML, à CSS, Introduction à XHTML, à CSS, aux blogs et aux wikisaux blogs et aux wikis
Thierry LemeunierThierry Lemeunier
1
Thi
erry
Lem
euni
er –
Lic
ence
SP
I1 –
Sys
tèm
es d
’exp
loita
tions
SommaireSommaireDiffusion par le web : le client-serveurCréer des pages web en XHTMLAgrémenter ses pages web avec CSSCréer son wiki avec DokuWiki Créer son blog avec WordPress
2
Thi
erry
Lem
euni
er –
Lic
ence
SP
I1 –
Sys
tèm
es d
’exp
loita
tions
Le client-serveur (1/3)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
3
Machine cliente Machine serveurhébergeant le site
Thi
erry
Lem
euni
er –
Lic
ence
SP
I1 –
Sys
tèm
es d
’exp
loita
tions
Le client-serveur (2/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 Les données sont codées au format HTML et sont
affichées par le navigateur de la machine cliente
4
Thi
erry
Lem
euni
er –
Lic
ence
SP
I1 –
Sys
tèm
es d
’exp
loita
tions
Le client-serveur (3/3)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 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
Thi
erry
Lem
euni
er –
Lic
ence
SP
I1 –
Sys
tèm
es d
’exp
loita
tions
SommaireSommaireDiffusion par le web : le client-serveur Créer des pages web en XHTMLAgrémenter ses pages web avec CSSCréer son wiki avec DokuWiki Créer son blog avec WordPress
6
Thi
erry
Lem
euni
er –
Lic
ence
SP
I1 –
Sys
tèm
es d
’exp
loita
tions
XHTML (1/11)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 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
Thi
erry
Lem
euni
er –
Lic
ence
SP
I1 –
Sys
tèm
es d
’exp
loita
tions
XHTML (2/11)XHTML (2/11)
8
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
Thi
erry
Lem
euni
er –
Lic
ence
SP
I1 –
Sys
tèm
es d
’exp
loita
tions
XHTML (3/11)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 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
Thi
erry
Lem
euni
er –
Lic
ence
SP
I1 –
Sys
tèm
es d
’exp
loita
tions
XHTML (4/11)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
10
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head><title> Ceci est le titre en haut de votre navigateur </title><meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />
</head>
<body><p> bonjour </p><p> vous devez compléter votre page ici </p>
</body>
</html>
Corps
Entête dudocument
Entête dufichier
Doc
ume
nt
Thi
erry
Lem
euni
er –
Lic
ence
SP
I1 –
Sys
tèm
es d
’exp
loita
tions
XHTML (5/11)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
11
...<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>...
Thi
erry
Lem
euni
er –
Lic
ence
SP
I1 –
Sys
tèm
es d
’exp
loita
tions
XHTML (6/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 />
12
...<body>
Je vais faire un sautde ligne <br />Et maintenant, je traceun trait horizontal <hr />
</body>...
Thi
erry
Lem
euni
er –
Lic
ence
SP
I1 –
Sys
tèm
es d
’exp
loita
tions
XHTML (7/11)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)
13
...<body>
<p>Voici les <i>styles</i>les <b>plus</b> utilisésen XHTML. </p><p>On peut aussi mettredes mots en <sup>exposant</sup>ou en <sub>indice</sub>.</p>
</body>...
Thi
erry
Lem
euni
er –
Lic
ence
SP
I1 –
Sys
tèm
es d
’exp
loita
tions
XHTML (8/11)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>
14
<body><table border="1">
<tr><td><b>Titre</b></td><td><b>Année</b></td><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>
</body>
Thi
erry
Lem
euni
er –
Lic
ence
SP
I1 –
Sys
tèm
es d
’exp
loita
tions
XHTML (9/11)XHTML (9/11)Balises de listes :
◦ Liste normale : <ul>...</ul>◦ Liste numérotés : <ol>...</ol>◦ Chaque élément de la liste : <li>...</li>
15
...<body>
<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>...
Thi
erry
Lem
euni
er –
Lic
ence
SP
I1 –
Sys
tèm
es d
’exp
loita
tions
XHTML (10/11)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 chargée
16
...<body>
<p>Voici l'image d'un Labrador :</p><p>
<img src="Labrador.jpg" alt="mon chien" /></p>
</body>...
Thi
erry
Lem
euni
er –
Lic
ence
SP
I1 –
Sys
tèm
es d
’exp
loita
tions
XHTML (11/11)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...
17
...<body>
<p>Voici comment on fait un lien<br />vers une <a href="images.html">autre page</a>dans du texte</p>
</body>...
Thi
erry
Lem
euni
er –
Lic
ence
SP
I1 –
Sys
tèm
es d
’exp
loita
tions
SommaireSommaireDiffusion par le web : le client-serveurCréer des pages web en XHTML Agrémenter ses pages web avec CSSCréer son wiki avec DokuWiki Créer son blog avec WordPress
18
Thi
erry
Lem
euni
er –
Lic
ence
SP
I1 –
Sys
tèm
es d
’exp
loita
tions
CSS (1/11)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 standard CSSUne 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
Thi
erry
Lem
euni
er –
Lic
ence
SP
I1 –
Sys
tèm
es d
’exp
loita
tions
CSS (2/11)CSS (2/11) Exemple d’un même contenu mais avec deux
fichiers CSS :
20
Fichier XHTML
Fichier CSS n°1
Fichier CSS n°2
=
=
+
+
Thi
erry
Lem
euni
er –
Lic
ence
SP
I1 –
Sys
tèm
es d
’exp
loita
tions
CSS (3/11)CSS (3/11) Comment définir et utiliser une feuille de style ?
1. Editer un fichier CSS externe au document XHTML
1. Inclure la feuille de style CSS dans l’entête du document XHTML
1. Après téléchargement surle serveur, vérifier l’apparenceobtenue
21
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 */
}
<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>
Thi
erry
Lem
euni
er –
Lic
ence
SP
I1 –
Sys
tèm
es d
’exp
loita
tions
CSS (4/11)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 : 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
Thi
erry
Lem
euni
er –
Lic
ence
SP
I1 –
Sys
tèm
es d
’exp
loita
tions
CSS (5/11)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 exempleh1, h2 {...} définit les propriétés communes à h1et h2
◦ Chaque propriété est de la forme attribut : valeurs ;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
Thi
erry
Lem
euni
er –
Lic
ence
SP
I1 –
Sys
tèm
es d
’exp
loita
tions
CSS (6/11)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
24
body { /* l'ensemble du document */ color: #434a6a ; background-color: white ; background-image:url(../fleur1.jpg) ;}
h1 { color: #e8eaff ; background-color :#babcec ;}
Thi
erry
Lem
euni
er –
Lic
ence
SP
I1 –
Sys
tèm
es d
’exp
loita
tions
CSS (7/11)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◦ letter-spacing : distance entre les lettres par exemple 5px
25
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) ;}
Thi
erry
Lem
euni
er –
Lic
ence
SP
I1 –
Sys
tèm
es d
’exp
loita
tions
CSS (8/11)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)
26
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;}
Thi
erry
Lem
euni
er –
Lic
ence
SP
I1 –
Sys
tèm
es d
’exp
loita
tions
CSS (9/11)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
Idem pour bottom, left et right
27
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;}
Thi
erry
Lem
euni
er –
Lic
ence
SP
I1 –
Sys
tèm
es d
’exp
loita
tions
CSS (10/11)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
28
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 ;
}
Thi
erry
Lem
euni
er –
Lic
ence
SP
I1 –
Sys
tèm
es d
’exp
loita
tions
CSS (11/11)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>
29
td.grise {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>
Thi
erry
Lem
euni
er –
Lic
ence
SP
I1 –
Sys
tèm
es d
’exp
loita
tions
SommaireSommaireDiffusion par le web : le client-serveurCréer des pages web en XHTMLAgrémenter ses pages web avec CSS Créer son wiki avec DokuWiki Créer son blog avec WordPress
30
Thi
erry
Lem
euni
er –
Lic
ence
SP
I1 –
Sys
tèm
es d
’exp
loita
tions
Créer son wiki (1/6)Créer son wiki (1/6)wiki = site web collaboratif : pages
éditables par tout ou partie des visiteurs du site
Modification directesur le site avec unéditeur intégré
Le premier wiki aété créé en 1995 parWard Cunningham
Le wiki le plus connuest l’encyclopédie collaborative Wikipédia http://fr.wikipedia.org/
31
Thi
erry
Lem
euni
er –
Lic
ence
SP
I1 –
Sys
tèm
es d
’exp
loita
tions
Créer son wiki (2/6)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
32
Problèmes du wiki : Liés à son ouverture Possibilité d’écrire des
contre-vérités, de falsifierles faits, etc.
Exemples avec Wikipédia :
Modifier une biographie
Modifier l’histoire d’une entreprise
Thi
erry
Lem
euni
er –
Lic
ence
SP
I1 –
Sys
tèm
es d
’exp
loita
tions
Créer son wiki (3/6)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
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
Thi
erry
Lem
euni
er –
Lic
ence
SP
I1 –
Sys
tèm
es d
’exp
loita
tions
Créer son wiki (4/6)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)◦ 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
Thi
erry
Lem
euni
er –
Lic
ence
SP
I1 –
Sys
tèm
es d
’exp
loita
tions
Créer son wiki (5/6)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 : 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
Thi
erry
Lem
euni
er –
Lic
ence
SP
I1 –
Sys
tèm
es d
’exp
loita
tions
Créer son wiki (6/6)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) :1. Télécharger localement un moteur de wiki
Notre choix : DokuWiki http://www.dokuwiki.org/dokuwiki
2. Décompressé le moteur de wiki3. (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
web6. Commencer à travailler sur le wiki de votre site
36
Thi
erry
Lem
euni
er –
Lic
ence
SP
I1 –
Sys
tèm
es d
’exp
loita
tions
SommaireSommaireDiffusion par le web : le client-serveurCréer des pages web en XHTMLAgrémenter ses pages web avec CSSCréer son wiki avec DokuWiki Créer son blog avec WordPress
37
Thi
erry
Lem
euni
er –
Lic
ence
SP
I1 –
Sys
tèm
es d
’exp
loita
tions
Créer son blog (1/7)Créer son blog (1/7)blog (ou blogue) = site web à billets
généralement commentésL’édition se fait sur place uniquement
par l’auteur du blog : le blogueur ou la blogueuse
Les commentaires (si autorisés) sont publics 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
Thi
erry
Lem
euni
er –
Lic
ence
SP
I1 –
Sys
tèm
es d
’exp
loita
tions
Créer son blog (2/7)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.frhttp://www.liberation.fr/blogs
39
Thi
erry
Lem
euni
er –
Lic
ence
SP
I1 –
Sys
tèm
es d
’exp
loita
tions
Créer son blog (3/7)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
◦ 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
Thi
erry
Lem
euni
er –
Lic
ence
SP
I1 –
Sys
tèm
es d
’exp
loita
tions
Créer son blog (4/7)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)◦ 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
Thi
erry
Lem
euni
er –
Lic
ence
SP
I1 –
Sys
tèm
es d
’exp
loita
tions
Créer son blog (5/7)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 ◦ 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
Thi
erry
Lem
euni
er –
Lic
ence
SP
I1 –
Sys
tèm
es d
’exp
loita
tions
Créer son blog (6/7)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
43URL de rétrolien d’un billet d’un blog A Exemple de création d’un billet d’un blog Ben indiquant le rétrolien du billet du blog A
Thi
erry
Lem
euni
er –
Lic
ence
SP
I1 –
Sys
tèm
es d
’exp
loita
tions
Créer son blog (7/7)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) :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
