Edition 2012/13 CMS - lcprod [ CMS - Content Management System ] • Grandadam E. • LCProd CMS...

[ CMS - Content Management System ] • Grandadam E. • LCProd

CMSContent Management System

Wordpress

eZ Publish...

Joomla !

Prestashop

Jahia

Typo3

Drupal

Edition 2012/13


CMSContent Management System

...

1. La gestion de contenus

2. Présentation des outils

3. Utiliser des architectures Web

4. Mettre en place les outils

5. Apprendre les concepts fondamentaux

6. Utiliser les flux de travaux (Workflow)

7. Penser la restitution

8. Etude de cas : Wordpress

9. Le TD Wordpress


1. La gestion de contenusCMS : Une définitionDistinguer les types d’outilsPourquoi les CMS ?


CMS : Définition

Un système de gestion de contenuest une famille de logiciels destinés à la

conception et à la mise à jour dynamiquede sites Web.

http://fr.wikipedia.org/wiki/Sites_Webhttp://fr.wikipedia.org/wiki/Sites_Web


Les types d’outilsMaturité des outils ...•ERP ou PGI : Progiciel de gestion intégré•GED : Gestion documentaire•CMS : Gestion de contenus

-WCM : Web Content Management- ECM : Enterprise Content Management (gestion de la connaissance)

•BLOG : Publication•Galeries : Diffusion• Services Web : Utilisation (Gmail)


Pourquoi les CMS ?Les atouts• ils permettent le travail collaboratif (Groupware)• ils permettent les interactions (Commentaires)• ils fournissent des chaînes de publication (Workflow)• ils permettent de séparer la forme du contenu• ils permettent de structurer les informations• ils permettent de dématérialiser les documents• ...


2. Présentation des outilsChoisir un CMSQuelques CMSCMS Open source : un logiciel libre


Choisir un CMSTrès large choix ....•Wordpress, Joomla !, Drupal, Prestashop, eZ Publish...

Les fonctionnalités•Capacité de gestion, droits utilisateurs, workflow...

http://www.framasoft.net/rubrique168.html

http://www.framasoft.net/rubrique168.htmlhttp://www.framasoft.net/rubrique168.htmlhttp://www.framasoft.net/rubrique168.htmlhttp://www.framasoft.net/rubrique168.html


Quelques CMS ...SPIP•Projet Français•CMS complet•Gestion de plugins

http://www.spip.net

http://www.spip.nethttp://www.spip.net


Quelques CMS ...Wordpress•Architecture classique•Elegant•Gestion de plugins•Thèmes

http://wordpress.org/

http://wordpress.org/http://wordpress.org/


Quelques CMS ...Drupal•Grand nombre de modules•Espace utilisateur•Modification possible de la structure

http://www.drupal.org

http://www.drupal.orghttp://www.drupal.org


Quelques CMS ...Typo3•Le produit est sorti fin 2000•Très riche en fonctionnalités•Gestion de droits et workflow

http://typo3.fr/

http://typo3.fr/http://typo3.fr/


Quelques CMS ...eZ Publish•Configuration poussée•Gestion d'extensions•Création de modèle pour la publication•Gestion des versions et langues

http://ez.no/fr/

http://ez.no/fr/http://ez.no/fr/


Quelques CMS ...Jahia•Basé sur JAVA•Produit commercial•Portail plutôt que CMS

http://www.jahia.org/cms

http://www.jahia.org/cmshttp://www.jahia.org/cms


Quelques CMS ...Prestashop•E-commerce•Gestion de modules•Gestion de thèmes

http://www.prestashop.com/

http://www.prestashop.com/http://www.prestashop.com/


OpenSourceLogiciels libre ...•Pas toujours gratuit !•Code accessible et modifiable•Licences Creative Commons


OpenSourceRentabilité•« Tant qu’une communauté s’y intéresse, le produit vivra. »

Pérénité•« La libre disposition des sources, est un gage fondamental de

pérennité. »


3. Architecture WebSimple et pratiqueSéparer le contenu de la présentationGestion des droits et des accèsEdition simplifiée


Architecture WebSimple et pratique ...•Pas d’installations logiciels•Mises à jour simplifiées (côté serveur)• Standardisation des affichages•Maintenances simple•Accès multiples• Sécurité


Architecture WebSéparer le contenu de la présentation•Contenu stocké dans une base de données•Présentation liée à un thème


Architecture WebGestion des droits et des accès•Différents types d’utilisateurs (login/password)•Différents droits sur le contenu


Architecture WebEdition simplifiée• Interface Web•Navigateur Web normalisé

•Attention aux problèmes d’interprétation du code HTML par les navigateurs

http://fr.wikipedia.org/wiki/Acid3

http://fr.wikipedia.org/wiki/Acid3http://fr.wikipedia.org/wiki/Acid3http://www.framasoft.net/rubrique168.htmlhttp://www.framasoft.net/rubrique168.html


4. Mise en place Utiliser le modèle Client/ServeurUtiliser Apache/PHP/MySQLVirtualiser des serveurs


Client / ServeurModèle Web

ServeurClient

Requêtehttp://serveur/page.html

Réponsehtml / Page Web


Normalisation du codeHTML / XHTML et CSS•Normalisations du W3C

•HTML = Langage de Mise en Forme utilisant des Balises-HyperText Makup Language

•XHTML = Version du HTML utilisant la syntaxe du XML•XML = Langage qui permet de stocker des données

- eXtended Markup Language•CSS = Prise en charge des styles

-Cascading Style Sheets


Client / ServeurLes technologies de programmation

ServeurClient

JavascriptAJAXFlash

PHPASP (Microsoft)JSP (Java)

PHP


Client / ServeurLa base de données

ServeurClient

Serveur de base de donnéesMySQL

MySQL

PHP


Apache / PHP/ MySQLLes outils :•Apache -> Serveur Web•PHP -> Programmation•MySQL -> Base de données

Le package :•EasyPHP (http://easyphp.org)

-Outils de test ! Pas de mise en production avec cette solution. Voir Linux.

http://easyphp.orghttp://easyphp.org


VirtualisationPenser ‘Services’ et non pas ‘Machine’•Utiliser les processeurs multi-cores pour gérer plusieurs

systèmes•L’ordinateur devient un ‘Service’•Modifications rapides (taille de disque dur, mémoire allouée, ...)


5. Concepts fondamentauxSéparer le fond de la formeStructure les contenus (données/métadonnées)Organiser les contenus


La forme et le fondPourquoi séparer ?•Modifier le graphisme indépendamment du contenu•Créer du contenu sans avoir à gérer la présentation•Organiser le fond selon les besoins•Etendre les moyens de consultations (RSS, iPhone, ...)

Limites ?•Présentation précise•Styles prédéfinis


Structure les contenusContenus élémentaires structurés•Titre, Chapeau, Extrait, Auteur...

Sémantique : donner du sens. •Donnée = Donnée publiée (titre de l'article, du document...)•Métadonnées = Donnée non publiée (Auteur, date de création...)

" Un fichier (pièce jointe) reste opaque pour le système "


Organiser les contenusPlusieurs méthodes d'organisation :•Catégories•Mots clés•Identificateurs• ...


6. Utiliser les WorkflowWorkflow : une définitionLe workflow de validation (gestion des rôles)Le workflow sur le cycle de vie (des contenus)Le workflow des commentairesLe workflow de versionsLa gestion des rôles des utilisateurs


Workflow : DéfinitionUn workflow (anglicisme) est :•une suite de tâches,•une suite d'opérations,• le passage d'une étape à une autre

« le workflow sert à décrire le circuit de validation, les tâches à répartirentre les différents acteurs d'un processus.»

« Un bon workflow doit gérer les absences et les escalades. »

http://fr.wikipedia.org/wiki/Anglicismehttp://fr.wikipedia.org/wiki/Anglicisme

Séparer les étapes, organiser le travail.

Brouillon (attente de relecture)

Validations Publication


Workflow de validation

Rôle de rédaction seulement.

Rôle de validation et d'organisation des contenus.

Rôle de gestion des rendus dans le site.


Workflow sur le cycle de vieGérer le cycle de vie des contenus.

Etats Visiblité Publication

Brouillon,Proposé,Validé,Publié,Archivé...

Protéger un article,

Faire en sorte qu’il reste en tête de page...

Programmer la publication à une date précise,

Masquer après un délais...


Workflow des commentairesPrendre en compte les commentaires.

Autorisations Contrôles Réponses

Ouverts,Fermés,Inscription...

Modérateurs,CAPTCHA,Liste noire...

Suivi...


Workflow de versionsPrendre en compte les versions

Documentn-2

Documentn+2

Documentn+1

Documentn-1

Documentpublié


La gestion des rôlesDistinctions pour gérer des utilisateurs•Contributeur

- Produit des contenus-N’est pas professionnel du Web- Son processus doit être simple

•Rédacteur en chef- Valide les contenus (éditorial)- défini et gère les rubriques

•Administrateur-Gère les utilisateurs et les droits

•Webmaster-Organise le site (publication)-Définit le graphisme


La gestion des rôlesDistinctions sur les habilitations•Appliquer sur les processus de travail

- Proposer, valider, publier-Organiser le site (créer une rubrique)-Modifier des modèles (gabarits)-Créer des utilisateurs

•Appliquer sur un zone (périmètre) de contenu- Rubrique, sous rubrique, section...


7. RestitutionsRestitutionModèles et gabaritsMulti-canalDroits utilisateursMoteur de recherche


RestitutionDéfini par le contributeur•Article posé explicitement sur une page

Défini par règles•Association de contenus


Modèles et gabaritsVocabulaire•Template, gabarits, masques, ...

Le gabarit gère ...•Les éléments (du document) qui seront restituées•La présentation


Modèles et gabaritsPas de standardisation !•Chaque CMS possède son propre langage.•Chaque CMS possède sont propre système de boucles

et de conditions

C’est de la programmation.•Apprendre le langage du CMS

- Ex. SPIP = Squelettes, Boucles, ...


Modèles et gabaritsUtilisation des CSS•Cascading StyleSheet


Multi-canalDifférents canaux de diffusion• Flux RSS•Version Wap, iMode•Version PDA, iPhone, ...• Sorties PDF•Publications PAO• ...

« Ce doit être une affaire de gabarits. »


Droits d’accès en lecturePrendre en compte les droits des Internautes•Zone sécurisée,•Pages modifiées en fonction des utilisateurs

- Personnalisation des contenus


Moteur de rechercheIntégré au CSM•Essentiel !• Simple d’utilisation• Intégré au CMS•Moteur libre :

- Lucène (java)- Solr (application web)- Zend Framework (php)

« Ce doit être une affaire de gabarits. »


8. Etude de cas : WordpressTélécharger WordpressPlacer les fichiers de Wordpress sur le serveur WebCréer une base de donnée videLancer l'installation de WordpressConfigurer le site


Télécharger WordpressEn francais...•http://fr.wordpress.org/

Décompresser le ZIP•Extraire les fichiers...

Dans le cas du TD : Renommer le dossier• 'wordpress' en 'td_wordpress'

http://fr.wordpress.org/http://fr.wordpress.org/


Placer les fichiers sur le serveurDéplacer ou copier le dossier sur le serveur•Dans le répertoire 'www' du serveur Web


Créer une base de donnéesAvec phpMyAdmin :•Onglet 'Bases de données'•Nommer la base 'td_wordpress'


Installer WordpressCréer le fichier de configuration (navigateur)•http://127.0.0.1/td_wordpress/

Renseigner les informations sur la bdd•Nom de la base : td_wordpress•Identifiant : root•Mot de passe : (vide)•Hôte : 127.0.0.1•Préfixe : wp_


Configurer le siteRenseigner les champs•Titre,•Utilisateur (admin)•Mot de passe

Important•Pas d'indexation par les moteurs de recherche.


9. Le TD WordpressInstaller le thème du TDInstaller la base de données du TDAdministrer et utiliser le site


Le thème 'td_wordpress'Récupérer le thème 'td_wordpress'•http://dl.lcprod.net/iut/cms/td_wordpress/td_wordpress.theme.zip

Décompresser le ZIP•Extraire les fichiers...

Déplacer ou copier le dossier du thème•Dans le répertoire 'wp-content\themes\' du Wordpress

http://dl.lcprod.net/iut/cms/td_wordpress/http://dl.lcprod.net/iut/cms/td_wordpress/http://dl.lcprod.net/iut/cms/td_wordpress/td_wordpress.theme.ziphttp://dl.lcprod.net/iut/cms/td_wordpress/td_wordpress.theme.zip


La base de données du TD 1/2Récupérer la base de données 'td_wordpress.sql'•http://dl.lcprod.net/iut/cms/td_wordpress/

td_wordpress.bdd.zip

Décompresser le ZIP•Extraire le fichier...

http://dl.lcprod.net/iut/cms/td_wordpress/http://dl.lcprod.net/iut/cms/td_wordpress/http://dl.lcprod.net/iut/cms/td_wordpress/td_wordpress.bdd.ziphttp://dl.lcprod.net/iut/cms/td_wordpress/td_wordpress.bdd.zip


La base de données du TD 2/2Importer la base de données avec phpMyAdmin :• Supprimer les tables de la base 'td_wordpress'Depuis l'onglet 'Structure' :

Sélectionner la base 'td_wordpress'

'tout cocher' puis 'Pour la sélection :' ... Supprimer !

• Importer le fichier td_wordpress.sql dans la baseDepuis l'onglet 'Importer'

Parcourir et sélectionner le fichier 'td_wordpress.sql'

Exécuter !


Administrer et utiliser le siteAccès à l'administration•http://127.0.0.1/td_wordpress/wp-login.phpIdentifiant : admin

Mot de passe : 1utm@t1c

Le mot de passe est 'iutmatic' avec des '1' pour les 'i' et '@' pour le 'a'

Accès au site•http://127.0.0.1/td_wordpress/

http://127.0.0.1/td_wordpress/wp-login.phphttp://127.0.0.1/td_wordpress/wp-login.phphttp://127.0.0.1/td_wordpress/http://127.0.0.1/td_wordpress/


Licence Creative Commons

Vous êtes libres : de reproduire, distribuer et communiquer cette création au public

Selon les conditions suivantes :

Paternité. Vous devez citer le nom de l'auteur original de la manière indiquée par l'auteur de l'oeuvre ou le titulaire des droits qui vous confère cette autorisation (mais pas d'une manière qui suggérerait qu'ils vous soutiennent ou approuvent votre utilisation de l'oeuvre).

Pas d'Utilisation Commerciale. Vous n'avez pas le droit d'utiliser cette création à des fins commerciales.

Pas de Modification. Vous n'avez pas le droit de modifier, de transformer ou d'adapter cette création.

http://creativecommons.org/licenses/by-nc-nd/3.0/deed.fr
http://creativecommons.org/licenses/by-nc-nd/3.0/deed.frhttp://creativecommons.org/licenses/by-nc-nd/3.0/deed.fr

Edition 2012/13 CMS - lcprod [ CMS - Content Management System ] • Grandadam E. • LCProd CMS...

Documents

Transcript of Edition 2012/13 CMS - lcprod [ CMS - Content Management System ] • Grandadam E. • LCProd CMS...