Content Management System
Définition : Système de gestion de contenu
Un système de gestion de contenu ou SGC (content management system ou CMS en anglais) est une famille de logiciels destinés à la conception et à la mise à jour dynamique de sites Web ou d'applications multimédia. Ils partagent les fonctionnalités suivantes :
Ils permettent à plusieurs individus de travailler sur un même document2
Ils fournissent une chaîne de publication (workflow) offrant par exemple la possibilité de mettre en ligne le contenu des documents ;
Ils permettent de séparer les opérations de gestion de la forme et du contenu ;
Ils permettent de structurer le contenu (utilisation de FAQ, de documents, de blogs, de forums de discussion, etc.) ;
Ils permettent de hiérarchiser les utilisateurs et de leur attribuer des rôles et des permissions (utilisateur anonyme, administrateur, contributeur, etc.) ;
Certains SGC incluent la gestion de versions.
Définition : Les éditeurs Web en mode code
Les éditeurs Web en mode code sont des logiciels qui permettent d'éditer directement en langage HTML : le code y apparaît et y est traité comme du texte. Ils requièrent donc une compétence dans ce langage. En contrepartie, ils permettent à un utilisateur compétent de s'assurer de la qualité du document produit, nous pouvons citer par exemple :
Bluefish
Ecoder
Htmledit
HTML Kit
Isofting eWriter Wisto
Notepad++
PSPad
Quanta+
SciTE
Smultron
Sublime text
Définition : Les éditeurs Web en mode WYSIWYG
Les éditeurs Web en mode WYSIWYG sont des logiciels qui permettent d'éditer une page Web à peu près telle qu'elle apparaît dans les navigateurs courants. Ils proposent les fonctions classiques des traitements de texte WYSIWYG. Ses deux principaux avantages sont la facilité d'utilisation et l'observation immédiate du rendu graphique. Ses deux principaux désavantages sont le manque de maîtrise sur la qualité du document HTML produit et les risques d'incompatibilité avec des navigateurs non prévus par l'éditeur (plus récents, plus anciens, ou moins courants), nous pouvons citer par exemple :
Adobe GoLive
Adobe Dreamweaver (anciennement Macromedia Dreamweaver)
Easy Web Composer
Komodo
KompoZer (Dernière version : 2010)
Microsoft Expression (anciennement Microsoft FrontPage)
Mozilla Composer (Dernière version : 2006)
Nvu (Dernière version: 2005)
BlueGriffon ( successeur de Mozilla Composer et Nvu )
Netlor
OPEN BEXI HTML Builder
TOWeb
Webacappella
Dans ce qui suit nous allons apprendre à utiliser le CMS Kompozer pour créer un simple site Web (sous forme d'un exercice).
Tout d’abord il faut télécharger l'exécutable à partir de : https://kompozer.fr.uptodown.com/windows et l'installer.
1. Ouverture et configuration de l'interface :
Pour ouvrir KompoZer (généralement), cliquez sur démarrer Tous les programmes, KompoZer.
Chaque démarrage, il y a une fenêtre d'astuces qui vous donne l'astuce du jours.
2. Premier enregistrement dans un répertoire spécifique et titre de page
Cliquez sur Fichier Enregistrer sous... Dans la fenêtre Titre de la page, inscrivez Site du cours d'Histoire.
Ensuite, créez un dossier nommé page_web (si ce n'est pas déjà fait) sur le bureau, et nommez votre page index.html
3.Insertion d'une image d'arrière-plan
• Cliquez sur Format Couleurs et fond de page..., et dans l'espace Image de fond:, cliquez sur l'icône Parcourir... et choisissez le fichier ragged_edge_cobblestone_md_wht.gif toujours dans votre dossier page_web sur le bureau. Cliquez sur Ok.
4. Insertion de texte
• Centrez votre curseur : Format Aligner Centrer.
• Changer votre police pour Arial Format Police Arial.
• Ensuite, entrez le texte suivant : Site du cours d'Histoire
• Changer la taille du texte : Format Taille Très grande
• Changer la couleur du texte : Format Couleur du texte et prenez un gris foncé [#333333]
5. Insertion d'une ligne horizontale
• Placez-vous en dessous du titre, et cliquez sur Insertion Ligne horizontale. Double-cliquez la ligne, et dans la fenêtre des propriétés, changez la largeur de la barre pour 75%.
6. Insertion d'une image
• Placez-vous en dessous de la ligne, et entrez le texte de l'image 7a ci-dessous.
• Cliquez sur Insertion Image, et sélectionnez l'image atlas_decorative_lg_clr.gif.
7. Insertion d'un tableau
Cliquez sur Insertion Tableau..., et dessinez un tableau d'une ligne et de trois colonnes
Ensuite, double-cliquez sur le tableau (sur une bordure).
Dans la fenêtre, cliquez sur l'onglet Tableau.
Inscrivez une largeur de 40% (et non 40 pixels), et une bordure de 0 pixel (donc invisible).
Choisissez Centre pour l'Alignement du tableau
Ensuite, insérez les trois images suivantes de manière centrée dans chacune des cellules : blkcrevel_mail_md_wht.gif, blkcrevel_home_md_wht.gif et blkcrevel_right_md_wht.gif.
8. Création d'une deuxième page
• Cliquez sur Fichier Nouveau (ou sur l'icône Nouveau) afin de créer une nouvelle page.
• Enregistrez. Donnez le titre La découverte de l'Amérique à votre page et amerique.html comme nom de fichier.
• Sélectionnez l'image ragged_edgefutura_panel_md_wht.gif comme arrière-plan.
9. Insertion de l'entête en copier-coller
• Allez à la page index.html (onglet Site du cours d'Histoire).
• Sélectionnez la barre horizontale et le titre. Cliquez sur ةedition Copier.
• Retournez à la page amerique.html (onglet La découverte de l'Amérique), et cliquez sur edition, coller.
• Changer le titre pour : La découverte de l'Amérique
10. Insertion d'un deuxième tableau
• Insérez un tableau avec les coordonnées suivantes: 2 lignes - 3 colonnes - 50% de largeur - 0 de bordure.
• De manière centrée, insérez, dans chacune des cellules du haut, les images des bateaux Nina, Pinta et Santa-Maria.
• Inscrivez le nom en dessous de chacun des bateaux.
11. Configuration de cellules
• Sélectionnez les 3 cellules de la 2e ligne.
• Choisissez le noir comme couleur de fond, et le blanc comme couleur de texte. Cliquez sur B pour rendre le texte gras.
12. Redimensionnement d'une image
En dessous du tableau, écrivez Les bateaux de Christophe Colomb.
Insérez l'image colomb.jpg, et dans l'onglet Dimensions, placez les coordonnées suivantes: largeur : 173, hauteur : 228.
En dessous de l'image, écrivez Christophe Colomb.
Insérez l'image cartedec.gif, et placez les coordonnées suivantes via l'onglet Apparence : bordure : 2.
En dessous de l'image, écrivez Carte des Grandes Découvertes.
13. Insertion de trois types de lien
Allez à la page index.html.
Sélectionnez le bouton maison, en cliquez sur Insertion Lien..., dans l'espace lien, écrivez l'adresse : http://www.fse.ulaval.ca Il s'agit d'un lien vers un autre site Web.
Sélectionnez le bouton courriel, en entrez, dans l'espace lien le texte : mailto:monadresse@gmail.com. Il s'agit d'un lien vers une adresse de courriel.
Sélectionnez la flèche, et à côté de l'espace de lien, cliquez sur le petit dossier jaune . Sélectionnez le fichier amerique.html. Il s'agit d'un lien vers une autre page de votre site.
14. Configuration d'une barre de navigation
• Copiez le tableau en entier.
• Allez à la page amerique.html.
• Collez le tableau dans le bas de la page.
• Faites les changements en changeant la flèche et lui donnant un lien vers index.html
15. Insertion d'un lien avec ancrage
• Placez votre curseur dans le haut de la page.
• Cliquez sur Insertion Ancre... et nommez l'ancre haut.
Dans le bas de la page, écrivez Haut de la page.
• Sélectionnez votre texte, et dans l'espace lien de la fenêtre des propriétés, inscrivez #haut.
• Ce type de lien vous permet d'aller directement à un autre emplacement à l'intérieur de la même page.
16. Aperçu dans le navigateur
• Enregistrez les deux pages (amerique.html et index.html).
• Sur la page index.html, cliquez sur Fichier Aperçu dans le navigateur.
• Une fois dans le navigateur, essayez vos différents liens.
Voici un exemple en vidéo de création de site web en utilisant kompozer :
http://www.henni-karim.net/videos/exemple_CMS.mp4/exemple_CMS.mp4
La solution de cet exercice sous forme de pages Web ainsi l'ensemble des images utilisées est donnée en ressource en bas