Publication Web Introduction à XHTML, à CSS, aux blogs et aux wikis Thierry 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
Machine serveur hébergeant le site 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 Internet Machine cliente Machine serveur hébergeant le site
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 ... <body> <p><img src="entete.gif" alt="caf" /></p> <h2>Déclaration d'un colocataire</h2> </body> HTTP + HTML
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/ Dire oralement qu’on ne verra pas tout HTML mais uniquement le plus directement accessible et le plus utilisé
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 HTML http://www.w3.org/TR/1999/REC-html401-19991224/ Syntaxe complète de XHTML http://www.w3.org/TR/xhtml1
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 Entête du fichier <?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> Ne pas rentrer dans les détails du XML ! Entête du document Document Corps
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 ... <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>
XHTML (6/11) Balises des paragraphes Passage à la ligne : <br /> Définir un paragraphe : <p>...</p> Tout ce qui suit un paragraphe va à la ligne Passage à la ligne : <br /> Trait horizontal : <hr /> ... <body> Je vais faire un saut de ligne <br /> Et maintenant, je trace un trait horizontal <hr /> </body>
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) ... <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>
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> <td><b>Nom réalisateur</b></td> <td><b>Prénom réalisateur</b></td> </tr> <td>Alien</td> <td>1979</td> <td>Scott</td> <td>Ridley</td> <td>Vertigo</td> <td>1958</td> <td>Hitchcock</td> <td>Alfred</td> </table> </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> <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> </ol> </body>
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 ... <body> <p>Voici l'image d'un Labrador :</p> <p> <img src="Labrador.jpg" alt="mon chien" /> </p> </body>
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... ... <body> <p>Voici comment on fait un lien<br /> vers une <a href="images.html">autre page</a> dans du texte</p> </body>
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
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/ Idem que pour HTML, dire oralement qu’on ne verra pas tout CSS mais uniquement le plus directement accessible et le plus utilisé
CSS (2/11) Exemple d’un même contenu mais avec deux fichiers CSS : + = Fichier CSS n°1 Fichier XHTML = + Fichier CSS n°2
CSS (3/11) 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 sur le serveur, vérifier l’apparence obtenue 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>
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 exemple h1, 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) 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 body { /* l'ensemble du document */ color: #434a6a ; background-color: white ; background-image:url(../fleur1.jpg) ; } h1 { color: #e8eaff ; background-color :#babcec ;
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 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) ; }
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) 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;
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 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; }
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 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 ;
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 { 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>
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
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 Ward Cunningham Le wiki le plus connu est l’encyclopédie collaborative Wikipédia http://fr.wikipedia.org/ Feuilleter wikipédia pour donner un aperçu
Créer son wiki (2/6) Utilité du wiki : Problèmes 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 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 Un wiki est édité par un groupe de personnes. Si personne d’extérieur ne contrôle ou s’il n’y a pas d’auto-cpntrôle au sein du groupe cela peut conduire à beaucoup d’abus. Un wiki peut être un « petit » outil de lobbying et de pression.
Créer son wiki (3/6) Principes d’un wiki : Quelques moteurs de 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/
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 wiki Notre 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 Dire qu’il aurait un tutoriel complet pour installer et créer un wiki avec DokuWiki
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
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.fr http://www.liberation.fr/blogs
Créer son blog (3/7) Utilité du blog : Problèmes 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 : Quelques moteurs de 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 : Les commentaires : 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/
URL de rétrolien d’un billet d’un blog A 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 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
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 blog Notre 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 Dire qu’il aurait un tutoriel complet pour installer et créer un blog avec WordPress