Publication Web Introduction à XHTML, à CSS, aux blogs et aux wikis Thierry Lemeunier

Publication WebIntroduction à XHTML, à CSS, aux blogs et aux wikisThierry Lemeunier

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

Le client-serveur (1/3) Internet Machine cliente Machine serveurhébergeant le site • 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

Le client-serveur (2/3) ... <body> <p><imgsrc="entete.gif" alt="caf" /></p> <h2>Déclaration d'un colocataire</h2> ... </body> ... HTTP + HTML • 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

Le client-serveur (3/3) • Comment créer son site web ? Le cas le plus général consiste à suivre les étapes suivantes : • 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) • 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) • Vérifier que le site fonctionne correctement sur le serveur en consultant la version hébergée sur le serveur

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

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/

XHTML (2/11) 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

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 HTMLhttp://www.w3.org/TR/1999/REC-html401-19991224/ • Syntaxe complète de XHTMLhttp://www.w3.org/TR/xhtml1

XHTML (4/11) <?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> Entête dufichier Entête dudocument Document Corps • 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

XHTML (5/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> ... • Balises des titres : • Balises <hi>...</hi> avec 1 ≤ i ≤ 6 • h1 est le plus grand titre et h6 le plus petit titre

XHTML (6/11) ... <body> Je vais faire un saut de ligne <br /> Et maintenant, je trace un trait horizontal <hr /> </body> ... • 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 />

XHTML (7/11) ... <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> ... • 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)

XHTML (8/11) <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> • 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>

XHTML (9/11) ... <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> ... • Balises de listes : • Liste normale : <ul>...</ul> • Liste numérotés : <ol>...</ol> • Chaque élément de la liste : <li>...</li>

XHTML (10/11) ... <body> <p>Voici l'image d'un Labrador :</p> <p> <img src="Labrador.jpg" alt="mon chien" /> </p> </body> ... • 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

XHTML (11/11) ... <body> <p>Voici comment on fait un lien<br /> vers une <a href="images.html">autre page</a> dans du texte</p> </body> ... • 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...

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

CSS (2/11) + = Fichier CSS n°1 Fichier XHTML = + Fichier CSS n°2 Exemple d’un même contenu mais avec deux fichiers CSS :

CSS (3/11) 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> • Comment définir et utiliser une feuille de style ? • Editer un fichier CSS externe au document XHTML • Inclure la feuille de style CSS dans l’entête du document XHTML • Après téléchargement surle serveur, vérifier l’apparenceobtenue

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/

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, ...)

CSS (6/11) body { /* l'ensemble du document */ color: #434a6a ; background-color: white ; background-image:url(../fleur1.jpg) ; } h1 { color: #e8eaff ; background-color :#babcec ; } • 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

CSS (7/11) 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) ; } • 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

CSS (8/11) 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; } • 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)

CSS (9/11) 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; } • 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

CSS (10/11) 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 ; } • 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

CSS (11/11) 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> • 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>

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/

Créer son wiki (2/6) • 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 • Utilité du wiki : • Site web ouvert à la modification • Site web de partage de connaissanceExemple : 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

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 WikiMatrixhttp://www.wikimatrix.org/

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.

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

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) : • Télécharger localement un moteur de wikiNotre choix : DokuWiki http://www.dokuwiki.org/dokuwiki • Décompressé le moteur de wiki • (Editer localement les fichiers de configuration) • (Préparer une base de données sur le serveur si nécessaire) • Télécharger le répertoire wiki avec FTP sur votre site web • Commencer à travailler sur le wiki de votre site

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

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

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

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

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/

Créer son blog (6/7) URL 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 • 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

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) : • Télécharger localement un moteur de blogNotre choix : WordPress http://www.wordpress-fr.net/ • Décompressé le moteur de blog • (Editer localement les fichiers de configuration) • (Préparer une base de données sur le serveur si nécessaire) • Télécharger le répertoire blog avec FTP sur votre site web • Commencer à travailler sur le blog de votre site

Publication Web Introduction à XHTML, à CSS, aux blogs et aux wikis Thierry Lemeunier