WordPress et les logiciels de gestion de contenu web I. Objectifs Savoir ce qu est un système de gestion de contenu. Identifier les différents acteurs du marché. Etre capable de mettre en place un site WordPress. Connaître les bases de la publication en ligne. Maitriser la publication de contenus en ligne. II. Les systèmes de gestion de contenu A. Définitions On appelle système de gestion de contenu, en anglais CMS (Content Management System) un système informatique, généralement fourni sous forme d une plate-forme de déploiement de site web, permettant la publication en ligne d information de façon simplifiée et pour un coût modique tout en bénéficiant des derniers standards du web. La plupart des systèmes de gestion de contenu intègrent la possibilité de gérer une communauté d utilisateurs et de définir pour ceux-ci des droits d accès et de contrôle des contributions. La majorité des systèmes de gestion de contenu actuels sont Open Source et gratuits. Certains systèmes de gestion de contenu sont disponibles en version hébergée pour permettre de créer un site web en quelques secondes sans aucune manipulation de fichiers ni connaissance technique (attention dans ce cas là, généralement, les extensions deviennent payantes). B. Fonctionnement Un système de gestion de contenu est toujours composé de 2 éléments : un site web dédié à la publication sur lequel seront publiés les différents contenus destinés aux internautes (front-office), une interface d'administration permettant d éditer les contenus, de gérer les publications et leur mise en ligne, de modifier la présentation générale du site ainsi que la composition de l équipe rédactionnelle (back-office). F.ROUX 1/10 ISEG Lyon MCS3
Il est possible d enrichir les fonctionnalités d un système de gestion de contenu intégrant des extensions (plug-ins) très diverses : e-commerce, optimisation du référencement, analyse d activité, gestion des formulaires de contact, prise en charge des réseaux sociaux, etc. Il est aussi très facile de changer l apparence du site web d un système de gestion de contenus grâce à des modèles de pages (templates) et à des thèmes graphiques mis à disposition. Il est ainsi très facile de personnaliser un système de gestion de contenu et de l adapter en fonction de ses besoins. De plus la présence de mini-logiciels dédiés (widgets), activables à la demande permet d enrichir très facilement l interactivité du système de gestion de contenu (sondage, statistique, formulaire de contact, menus spéciaux, galerie photo, etc.). Généralement les systèmes de gestion de contenu sont téléchargeables sous formes d archives qu il suffit simplement de décompresser dans le répertoire d un serveur web pour les faire fonctionner après avoir mis en place une base de données et un fichier de paramétrage. C. Technologies Plusieurs technologies du web sont à l œuvre pour faire fonctionner un système de gestion de contenu parmi lesquelles on distingue : Le HTML (Hypertext Markup Language) et le XML (Extensible Markup Language) qui permettent de structurer sémantiquement et de mettre en forme le contenu des pages en y intégrant des éléments multimédia et des données de formulaire. La dernière révision majeure HTML5 bien que incomplète et non encore normalisée est souvent utilisée car elle intègre les derniers standards du web et est dite «responsive» car elle permet l adaptation du format des documents aux terminaux mobiles tels que les tablettes ou les téléphones portables. Le PHP (Hypertext Preprocessor), c est un langage de programmation libre qui a la particularité de générer du HTML de façon dynamique. Les CSS (Cascading Style Sheets) ou feuilles de style en cascade qui décrivent la présentation graphique et la mise en page textuelle des documents HTML et XML. D. Les différentes offres 1. Drupal Sites : http://www.drupal.org/ http://www.drupal.fr/ http://drupalfr.org/ «Drupal est un logiciel qui permet aux individus comme aux communautés d'utilisateurs de publier facilement, de gérer et d'organiser un vaste éventail de contenus sur un site web. Des dizaines de milliers de personnes et d'organisations utilisent Drupal pour propulser des sites de toutes tailles et fonctions.» 2. Joomla! Sites : http://www.joomla.org/ http://www.joomla.fr/ F.ROUX 2/10 ISEG Lyon MCS3
«Joomla! est un système de gestion de contenu créé par une équipe internationale de développeurs récompensée à maintes reprises, celle-là même qui a hissé Mambo vers les sommets. Joomla! est un CMS Open Source distribué sous licence GNU/GPL (gratuit) avec lequel vous pourrez mettre en ligne du contenu et mettre à disposition de vos visiteurs des services (forum, boutique en ligne, galerie photos, etc.), le tout sans connaissances techniques particulières.» 3. Typo3 Sites : http://typo3.org/ http://typo3-fr.org/ «Une des raisons du succès de TYPO3 est qu'il a disposé très tôt de traitements graphiques époustouflants, abolissant toutes les contraintes et limitations alors inhérentes à de nombreux autres gestionnaires de contenus. En se couplant aux librairies graphiques open source les plus performantes, TYPO3 permet aux web designers de proposer des conceptions originales répondant parfaitement aux attentes des stratégies de communication et de marketing, et bien sûr en garantissant une mise à jour des contenus sans compétences particulières en informatique.» 4. SPIP Sites : http://www.spip.net/ http://www.spip.net/fr «SPIP est un système de publication pour l Internet qui s attache particulièrement au fonctionnement collectif, au multilinguisme et à la facilité d emploi. C est un logiciel libre, distribué sous la licence GNU/GPL. Il peut ainsi être utilisé pour tout site Internet, qu il soit associatif ou institutionnel, personnel ou marchand.» 5. WordPress Sites : http://wordpress.org/ http://fr.wordpress.org/ «WordPress est né du désir d un système de publication personnelle élégant et bien architecturé. C est un projet open source qui rassemble une très vaste communauté de plusieurs centaines de personnes qui œuvrent chaque jour au développement de cet outil de blogging utilisé sur des millions de sites et vu par des dizaines de millions de personnes chaque jour.» F.ROUX 3/10 ISEG Lyon MCS3
III. WordPress A. Prise en main WordPress est à la base un moteur de blog personnel créé en 2003 qui a rapidement évolué vers un système de gestion de contenu. Pour essayer le système de gestion de contenu WordPress, nous allons utiliser sa version hébergée disponible à l adresse suivante : https://fr.wordpress.com/ TRAVAIL à faire Ouvrez votre navigateur web et rendez-vous sur la page suivante : https://fr.wordpress.com/ Après avoir choisi un nom pour votre blog (en minuscules et sans accent) : cliquez sur «Créer un site». Vous pouvez prendre comme thème général de votre site web, le thème de votre choix. Complétez votre inscription en entrant votre adresse mail, un nom d utilisateur et un mot de passe, essayez le «générateur de mot de passe fort» si votre mot de passe n est pas accepté et prenez soin de bien conserver votre nom d utilisateur et votre mot de passe. Etape 1 - Ajoutez un titre à votre blog et une description de quelques mots. Etape 2 Choisissez un thème graphique de votre choix. Etape 3 Personnalisez votre thème graphique : Si votre thème est «responsive» essayez-le en différents format, Faites le tour des Widgets (mini composant logiciel) installés. Etape 4 Partager éventuellement vos publications sur les réseaux sociaux. B. Votre premier article La rédaction du premier article se fait à l aide d un wiki sur le site «wordpress.com». Vos articles suivants pourront être ajoutés au choix soit sur le site «wordpress.com», soit directement sur votre site personnel. Le dernier bouton de la barre d outils vous donne accès à des outils supplémentaires. Vous pouvez ajouter une image ou un autre type de média en cliquant sur «Ajouter un média», il faut dans un premier temps ajouter un média puis dans un deuxième temps le choisir dans la bibliothèque pour l insérer dans l article. Le menu de droite permet de modifier les propriétés générales de l article et/ou du site. F.ROUX 4/10 ISEG Lyon MCS3
TRAVAIL à faire Trouvez la définition d un wiki sur le site de l encyclopédie libre Wikipédia. Testez les possibilités offertes par le wiki en rédigeant votre premier article sur le thème des wikis. Ajouter une image libre de droit de votre choix pour illustrer votre premier article. Ouvrez votre boîte mail et confirmer votre adresse e-mail en cliquant sur le lien. Vous pouvez publier votre article. C. Le tableau de bord (dashboard) Vous pouvez accéder au «Tableau de bord» : soit en cliquant dans le menu de WordPress «Mes Sites» puis «Tableau de bord» sous l image de votre site si vous êtes connecté sur le site WordPress.com qui regroupe sous un menu bleu vos différents blogs et/ou sites. soit en choisissant «Tableau de bord» dans le menu déroulant de votre blog si vous y êtes connecté. Comme son nom l indique il permet de gérer l ensemble des paramètres de votre site. C est votre interface d administration (back-office). Il est accessible en ligne à l adresse suivante : http://votresite.wordpress.com/wp-admin F.ROUX 5/10 ISEG Lyon MCS3
TRAVAIL à faire Vérifiez et mettez à jour les réglages généraux de votre site dans le menu «Réglages» option «Général» du tableau de bord (normalement, il n y a rien à changer). D. Mise en place de la publication 1. Les Pages Il s agit en fait de pages destinées à la structuration du site, leur contenu est généralement fixé dans le temps même si leur édition est très facile. 2. Les Articles Il s agit des publications périodiques. Les articles sont regroupés par catégorie et classés généralement par date de publication avec un regroupement périodique (exemple «le mois dernier»). Une fois votre adresse e-mail confirmée, vous avez la possibilité de publier vos articles. On peut enrichir un article avec un document ou une image (médias), mais on peut aussi lui ajouter un sondage ou bien un formulaire de contact et pourquoi pas une géolocalisation. 3. Les Catégories Les articles peuvent être classés en différentes catégories qui correspondent aux grandes thématiques de votre site web. Il est possible de créer des sous-catégories regroupées au sein d une même catégorie. 4. Les Médias Il s agit des illustrations diverses fichiers ou images que vous pouvez intégrer dans vos articles (types de fichiers acceptés : jpg, jpeg, png, gif, pdf, doc, ppt, odt, pptx, docx, pps, ppsx, xls, xlsx, key). 5. Les Liens Ce sont des liens hypertextes (adresses URL) incorporables dans les articles, on peut les classer par catégories. E. Les retours des internautes 1. Les Commentaires Ce sont les commentaires laissés par les «followers» du site. Cf. la rubrique «Commentaires» du tableau de bord. 2. Le Feedback Ce sont les sondages et évaluations proposés sur votre site avec leurs résultats en retour et les réactions des internautes («feedback»). Cf. la rubrique «Feedback» du tableau de bord. F.ROUX 6/10 ISEG Lyon MCS3
TRAVAIL à faire Ajouter 3 catégories de votre choix pour les articles de votre site dans le menu «Articles» option «Catégories» du tableau de bord. Ajoutez 2 articles dans chacune de vos catégories. Ajoutez un sondage et formulaire de contact à au moins un de vos articles. Ajoutez des images d illustration (libre de droit) dans vos articles, en utilisant au préalable le menu «Média» option «Ajouter» du tableau de bord. Ajoutez des liens dans vos articles, en utilisant au préalable le menu «Liens» option «Ajouter» du tableau de bord. F. La gestion des utilisateurs 1. Les rôles Il existe plusieurs rôles dans WordPress pour les utilisateurs : Administrateur Comme son nom l indique il a tous les pouvoirs. Editeur Il a accès aux articles, aux pages, aux commentaires, aux catégories, aux mots - clefs (tags) et aux liens, bref c est un rédacteur en chef. Auteur Il peut écrire et publier des articles et a accès à la bibliothèque. Contributeur Il peut écrire un article mais pas le publier. Follower Il peur lire et écrire des commentaires sur les articles. 2. Le recrutement Il est possible dans le tableau de bord dans la rubrique «Utilisateurs» d inviter des nouveaux utilisateurs en indiquant leurs adresses e-mails. Il est possible de recruter plusieurs utilisateurs en même temps mais pour un seul rôle à la fois. L interface permet de suivre le déroulement des invitations et leurs résultats. 3. Profil personnel Dans la rubrique «Utilisateurs» du tableau de bord avec l option «Mon profil», il est possible définir vos informations personnelles ainsi que les moyens de vous contacter, vous pouvez aussi choisir des options de l interface graphique avec l option «Paramètres personnels». F.ROUX 7/10 ISEG Lyon MCS3
TRAVAIL à faire Complétez votre profil personnel dans la rubrique «Utilisateurs» du tableau de bord. Ajouter la catégorie «mes blogs préférés». Recrutez 3 de vos camarades comme contributeur et invitez-les à écrire un article pour présenter leur propre blog. Publiez leurs articles sur votre site uniquement s ils vous paraissent intéressants dans la catégorie «mes blogs préférés». Parmi vos amis proches, recrutez des followers et invitez-les à commenter vos articles. Visualisez les commentaires dans le tableau de bord. G. La publication des articles 1. Le statut Il existe différents statuts d articles : brouillon C est le statut des articles en cours d écriture. en attente de relecture C est le statut des articles rédigés par des «Contributeurs». L article ne sera pas en ligne sans l intervention d un «Editeur» ou d un «Administrateur». publié C est le statut d un article en ligne. 2. La visibilité Il existe plusieurs types de visibilité concernant un article, on distingue : Public (sans mise en avant) L article est visible de tous les internautes et se trouve dans sa catégorie. Public (avec mise en avant) L article est visible de tous les internautes et se trouve sur la page d accueil du site et dans sa catégorie. Protégé par un mot de passe La lecture de l article est subordonnée à la saisie d un mot de passe. Privée La lecture de l article est réservée à son auteur. 3. Les révisions Les différentes versions de l article sont stockées avec la possibilité de revenir en arrière et de voir les corrections effectuées au cours du temps. 4. Les co-publications Il est possible de publier votre article sur différents sites sociaux (Facebook, Google+, Twitter, LinkedIn, Tumblr, Path). F.ROUX 8/10 ISEG Lyon MCS3
IV. La gestion de l interface graphique 1. Le thème graphique L interface graphique repose sur la définition, grâce à des feuilles de styles en cascade (CSS), d un thème graphique. Beaucoup de thèmes sont fournis par défaut dans WordPress payants ou pas et sont tous personnalisables. Il existe aussi de nombreux sites qui mettent à disposition des thèmes graphiques pour WordPress, là aussi gratuitement ou moyennant finance. Il est possible de choisir et de modifier un thème dans la rubrique «Apparence» du tableau de bord. Dans la version open source, il est possible d ajouter un thème téléchargé sur internet ce qui n est pas le cas dans la version hébergée. L installation est alors automatique. 2. Les Widgets Il s agit de composants logiciels que vous pouvez activer à la demande et qui vont augmenter l interactivité et donc l attrait de votre site. La liste des Widgets disponibles se trouve dans la rubrique «Apparence» du tableau de bord, sous l option «Widgets». Pour utiliser un Widget sur votre site il suffit cliquer dessus et de le faire glisser vers un des rectangle de la partie droite de l écran qui représente les grandes parties de la structure de votre site (Sidebar, En-tête de colonne, etc.). Vous pouvez modifier les paramètres du Widget une fois qu il est en place dans la structure de votre site web. 3. Les Menus Il est possible de créer et de personnaliser des menus dans la rubrique «Apparence» du tableau de bord, sous l option «Menus». Un menu peut intégrer différents éléments (bouton «Ajouter au menu») : des pages pour les prendre en compte dans la structure du site. des liens pour permettre de naviguer vers des sites extérieurs. des catégories pour afficher les articles correspondants. Selon le thème choisi il est possible de «Gérer les emplacements» dans l onglet du même nom et de remplacer les menus existants dans le thème par ceux que vous venez de créer. 4. L arrière plan Il est possible de changer l arrière-plan de votre thème (couleur ou image) dans la rubrique «Apparence» du tableau de bord avec l option «Arrière-plan». 5. Design personnalisé Si vous connaissez la programmation des feuilles de style en cascade (CSS) il vous est possible de modifier les fichiers de votre thème et de créer votre propre design WordPress avec la rubrique «Apparence» du tableau de bord et l option «Design personnalisé». C est une option payante sur la version hébergée. F.ROUX 9/10 ISEG Lyon MCS3
6. Thème «responsive» Il est possible de d adapter votre thème avec les terminaux mobiles dans la rubrique «Apparence» du tableau de bord avec l option «Portable». TRAVAIL à faire Mettez des «tags» (mot-clefs) dans vos articles. Ajouter le Widget «Nuage de tags» à la structure de votre site (dans Sidebar si elle existe ou dans une colonne autrement). Ajouter les Widgets «Calendrier» et «Catégories» à la structure de votre site. Créer un nouveau menu avec les éléments de votre choix et testez-le. V. Webographie fr.wordpress.org fr.wordpress.com fr.wikipedia.org/wiki/wordpress Site officiel WordPress pour le téléchargement de la version francisée de WordPress. Version hébergée de la plateforme WordPress pour la mise en ligne d un site web WordPress en français. La page de l encyclopédie Wikipédia dédiée à WordPress. www.cms.fr Site d'information dédié aux dernières actualités des CMS et des logiciels de gestion de contenu web. www.scriptol.fr/cms/liste.php Liste des CMS gratuits et open source. en.support.wordpress.com/ Support officiel de WordPress en anglais. F.ROUX 10/10 ISEG Lyon MCS3