CMS : Content Management System - of Louis
publicité
CMS : Content Management System Louis-Claude C ANON [email protected] 15 septembre 2009 C ANON CMS 15 septembre 2009 1 / 36 Contexte introductif Plan 1 Contexte introductif 2 Contenu numérique 3 Problématique éditoriale 4 Technologies web HTTP PHP SQL 5 Exemples et synthèse C ANON CMS 15 septembre 2009 2 / 36 Contexte introductif Internet C ANON CMS 15 septembre 2009 3 / 36 Contexte introductif Internet Internet Réseau : ensemble d’équipements reliés entre eux pour échanger des informations. Internet : système mondial de réseaux informatiques interconnectés (réseau de réseaux). C ANON CMS 15 septembre 2009 3 / 36 Contexte introductif Internet Internet Réseau : ensemble d’équipements reliés entre eux pour échanger des informations. Internet : système mondial de réseaux informatiques interconnectés (réseau de réseaux). World Wide Web Système hypertexte de documents. Hypertexte/hyperlien : référence dans un document permettant d’accéder directement à un autre document web. C ANON CMS 15 septembre 2009 3 / 36 Contexte introductif Internet Internet Réseau : ensemble d’équipements reliés entre eux pour échanger des informations. Internet : système mondial de réseaux informatiques interconnectés (réseau de réseaux). World Wide Web Système hypertexte de documents. Hypertexte/hyperlien : référence dans un document permettant d’accéder directement à un autre document web. Navigateur web Logiciel conçu pour consulter des documents web et facilitant la navigation (i.e., le passage entre une succession de documents liés par des liens hypertextes). C ANON CMS 15 septembre 2009 3 / 36 Contexte introductif Architecture Architecture client/serveur Client : envoie des requêtes au serveur (e.g., le navigateur web) Serveur : en écoute, traite et répond aux requêtes (e.g., serveur de mail) C ANON CMS 15 septembre 2009 4 / 36 Contexte introductif Architecture Architecture client/serveur Client : envoie des requêtes au serveur (e.g., le navigateur web) Serveur : en écoute, traite et répond aux requêtes (e.g., serveur de mail) Cas d’utilisation Le client souhaite rapatrier ses mails. Le serveur reçoit une requête, authentifie le client (vérifie ses droits) et renvoie une liste de mails. Idem pour une page web. C ANON CMS 15 septembre 2009 4 / 36 Contexte introductif Synthèse Serveur Client Contenu C ANON CMS 15 septembre 2009 5 / 36 Contexte introductif Exemple de sites gérés automatiquement Description amazon fiches descriptives pour chaque produit blogger entrées accompagnées de médias avec possibilités de laisser des commentaire wikipedia pages sur chaque sujet picasa ensemble de photos organisées youtube ensemble de vidéos C ANON CMS 15 septembre 2009 6 / 36 Contexte introductif Exemple de sites gérés automatiquement Description amazon fiches descriptives pour chaque produit blogger entrées accompagnées de médias avec possibilités de laisser des commentaire wikipedia pages sur chaque sujet picasa ensemble de photos organisées youtube ensemble de vidéos Remarques Même structure sur chaque page Même aspect visuel C ANON CMS 15 septembre 2009 6 / 36 Contexte introductif Problématique de mise en ligne de contenu Édition de contenu web Besoin de gérer et manipuler des quantités importantes de contenu web. C ANON CMS 15 septembre 2009 7 / 36 Contexte introductif Problématique de mise en ligne de contenu Édition de contenu web Besoin de gérer et manipuler des quantités importantes de contenu web. Critère d’efficacité d’une telle gestion Simplicité d’utilisation Rapidité d’utilisation Gestion des rôles C ANON CMS 15 septembre 2009 7 / 36 Contexte introductif Synthèse Fournisseur de contenu Clients Serveur Contenu C ANON CMS CMS 15 septembre 2009 8 / 36 Contenu numérique Plan 1 Contexte introductif 2 Contenu numérique 3 Problématique éditoriale 4 Technologies web HTTP PHP SQL 5 Exemples et synthèse C ANON CMS 15 septembre 2009 9 / 36 Contenu numérique Format Élément de base Différent médias : texte, image, figure, graphique, son, vidéo. Éléments mis en page pour une navigation agréable. Encodage dans un format spécifique décrivant tous les détails relatif à la mise en page (couleur de fond, police de caractère, taille, emplacement des images, du texte, ...). C ANON CMS 15 septembre 2009 10 / 36 Contenu numérique Format Élément de base Différent médias : texte, image, figure, graphique, son, vidéo. Éléments mis en page pour une navigation agréable. Encodage dans un format spécifique décrivant tous les détails relatif à la mise en page (couleur de fond, police de caractère, taille, emplacement des images, du texte, ...). Une page, un fichier, une adresse Une page web est un fichier. Il est récupéré sur un site à partir d’une adresse web. Le fichier est traduit par le navigateur en contenu visuel. C ANON CMS 15 septembre 2009 10 / 36 Contenu numérique HTML Langage de mise en page Ne contient que du texte. Permet au navigateur d’inclure des médias externes grâce à leur adresse. Basé sur des balises qui encadrent des éléments. C ANON CMS 15 septembre 2009 11 / 36 Contenu numérique HTML Langage de mise en page Ne contient que du texte. Permet au navigateur d’inclure des médias externes grâce à leur adresse. Basé sur des balises qui encadrent des éléments. Balises Balise ouvrantes et fermantes (e.g., <a> et </a>). Définit la nature structurelle ou visuelle des éléments entourés des 2 balises. C ANON CMS 15 septembre 2009 11 / 36 Contenu numérique HTML Langage de mise en page Ne contient que du texte. Permet au navigateur d’inclure des médias externes grâce à leur adresse. Basé sur des balises qui encadrent des éléments. Balises Balise ouvrantes et fermantes (e.g., <a> et </a>). Définit la nature structurelle ou visuelle des éléments entourés des 2 balises. Exemple <titre>Ceci sera interprété comme étant un titre</titre> Les espaces et retour charriots n’ont aucune incidence. C ANON CMS 15 septembre 2009 11 / 36 Contenu numérique Attributs Attributs Enrichie une balise sur le contenu délimité. Une balise peut avoir des valeurs pour chacun de ses attributs. C ANON CMS 15 septembre 2009 12 / 36 Contenu numérique Attributs Attributs Enrichie une balise sur le contenu délimité. Une balise peut avoir des valeurs pour chacun de ses attributs. Exemple <citation auteur="Martin">Blabla</citation> Une citation de Martin. C ANON CMS 15 septembre 2009 12 / 36 Contenu numérique Une première page Structure général d’un document HTML On commence par un en-tête qui définie les informations générales du document. Vient ensuite le corps du document avec le contenu. C ANON CMS 15 septembre 2009 13 / 36 Contenu numérique Une première page Structure général d’un document HTML On commence par un en-tête qui définie les informations générales du document. Vient ensuite le corps du document avec le contenu. Exemple <html> <head> <title>Titre de la page</titre> </head> <body> Une première page. </body> </html> C ANON CMS 15 septembre 2009 13 / 36 Contenu numérique Génération de contenu Directement en HTML Problème : non accessible au néophyte. C ANON CMS 15 septembre 2009 14 / 36 Contenu numérique Génération de contenu Directement en HTML Problème : non accessible au néophyte. Grâce à un outil graphique Problème : moins bon contrôle du code HTML généré. C ANON CMS 15 septembre 2009 14 / 36 Contenu numérique Génération de contenu Directement en HTML Problème : non accessible au néophyte. Grâce à un outil graphique Problème : moins bon contrôle du code HTML généré. CMS Dans les 2 cas, comment garder une cohérence visuelle ? À partir d’un squelette HTML réalisé à la main, les différents contenus sont insérés automatiquement. Toutes les pages ont la même structure et respectent une même charte graphique. C ANON CMS 15 septembre 2009 14 / 36 Contenu numérique Synthèse Fournisseur de contenu Clients Serveur HTML C ANON CMS CMS 15 septembre 2009 15 / 36 Problématique éditoriale Plan 1 Contexte introductif 2 Contenu numérique 3 Problématique éditoriale 4 Technologies web HTTP PHP SQL 5 Exemples et synthèse C ANON CMS 15 septembre 2009 16 / 36 Problématique éditoriale Édition Contenu Ensemble de médias numériques et textes électroniques. C ANON CMS 15 septembre 2009 17 / 36 Problématique éditoriale Édition Contenu Ensemble de médias numériques et textes électroniques. Actions sur le contenu Créer, modifier, vérifier/contrôler, indexer, publier, archiver/stocker. Et permettre la recherche et le versionnage (conserver l’historique des modification d’un document). C ANON CMS 15 septembre 2009 17 / 36 Problématique éditoriale Workflow Définition Séquence d’opérations réalisées par des personnes ou groupes de personnes. C ANON CMS 15 septembre 2009 18 / 36 Problématique éditoriale Workflow Définition Séquence d’opérations réalisées par des personnes ou groupes de personnes. Contexte éditorial Les contenus sont préparés en interne, vérifiés puis publiés. Chaque action est associée à un rôle qu’un CMS peut attribuer à ses utilisateurs. C ANON CMS 15 septembre 2009 18 / 36 Problématique éditoriale Synthèse Avantages Charte graphique, rationalisation de la complexité, contrôle de la chaîne éditoriale. Clients Redacteurs Editeur Serveur HTML C ANON CMS CMS 15 septembre 2009 19 / 36 Technologies web HTTP Plan 1 Contexte introductif 2 Contenu numérique 3 Problématique éditoriale 4 Technologies web HTTP PHP SQL 5 Exemples et synthèse C ANON CMS 15 septembre 2009 20 / 36 Technologies web HTTP Transférer les pages web Définition HTTP protocole de transfert de données hypertextes. C ANON CMS 15 septembre 2009 21 / 36 Technologies web HTTP Transférer les pages web Définition HTTP protocole de transfert de données hypertextes. Protocole de communication Ensemble de contraintes permettant d’établir une communication entre deux entités. Sont spécifiées la structure des messages, leurs tailles, les types d’informations échangées. C ANON CMS 15 septembre 2009 21 / 36 Technologies web HTTP Serveur HTTP Requête GET Des caractères transitent sur le réseau et le serveurs HTTP renvoie une page internet (ici, www.mines.inpl-nancy.fr/identite/identite.htm). telnet www.mines.inpl-nancy.fr 80 GET /identite/identite.htm HTTP/1.0 Host : www.mines.inpl-nancy.fr C ANON CMS 15 septembre 2009 22 / 36 Technologies web HTTP Serveur HTTP Requête GET Des caractères transitent sur le réseau et le serveurs HTTP renvoie une page internet (ici, www.mines.inpl-nancy.fr/identite/identite.htm). telnet www.mines.inpl-nancy.fr 80 GET /identite/identite.htm HTTP/1.0 Host : www.mines.inpl-nancy.fr Autre requête La requête POST est utilisé lors les données d’un formulaire internet sont envoyées au serveur. C ANON CMS 15 septembre 2009 22 / 36 Technologies web HTTP Synthèse Clients Redacteurs Editeur Serveur HTML GET C ANON HTTP CMS CMS 15 septembre 2009 23 / 36 Technologies web PHP Des pages conçues dynamiquement Limite Comment concevoir une page qui affiche la date du jour ? C ANON CMS 15 septembre 2009 24 / 36 Technologies web PHP Des pages conçues dynamiquement Limite Comment concevoir une page qui affiche la date du jour ? Code dynamique La date sera insérée dans la page suivante : <html> <head> <title>My first page in PHP</title> </head> <body> Current date. : < ?php print (Date("l F d, Y")) ; ?> </body> </html> C ANON CMS 15 septembre 2009 24 / 36 Technologies web PHP Langage de script : PHP Mélange HTML/PHP Les morceaux de scripts PHP insérés dans le code HTML sont remplacé lors de la navigation. Après avoir reçu une requête HTTP (GET), le serveur vas interpréter le code PHP puis renvoyer le résultat. C ANON CMS 15 septembre 2009 25 / 36 Technologies web PHP Langage de script : PHP Mélange HTML/PHP Les morceaux de scripts PHP insérés dans le code HTML sont remplacé lors de la navigation. Après avoir reçu une requête HTTP (GET), le serveur vas interpréter le code PHP puis renvoyer le résultat. Délimitation du PHP On encadre le code PHP par <? php et ? >. C ANON CMS 15 septembre 2009 25 / 36 Technologies web PHP Langage de script : PHP Mélange HTML/PHP Les morceaux de scripts PHP insérés dans le code HTML sont remplacé lors de la navigation. Après avoir reçu une requête HTTP (GET), le serveur vas interpréter le code PHP puis renvoyer le résultat. Délimitation du PHP On encadre le code PHP par <? php et ? >. Insérer une chaîne de caractère On utilise le mot-clé echo. Exemple : echo "Celle-ci a été écrite en PHP." ; C ANON CMS 15 septembre 2009 25 / 36 Technologies web PHP Utiliser des variables Concept de variables Une variable est une valeur représentée par un symbole (un chaîne de caractère). C ANON CMS 15 septembre 2009 26 / 36 Technologies web PHP Utiliser des variables Concept de variables Une variable est une valeur représentée par un symbole (un chaîne de caractère). Syntaxe PHP On utilise le symbole $ pour dénoter une variable. Exemple : $pseudo_du_visiteur = "Mateo21" ; echo "Bonjour $pseudo_du_visiteur !" ; À l’exécution la variable $pseudo_du_visiteur est remplacée par son contenu. C ANON CMS 15 septembre 2009 26 / 36 Technologies web PHP Réaliser des opérations Calcul simple $nombre = 10 ; $resultat = ($nombre + 5) * $nombre ; C ANON CMS 15 septembre 2009 27 / 36 Technologies web PHP Réaliser des opérations Calcul simple $nombre = 10 ; $resultat = ($nombre + 5) * $nombre ; Récupérer des arguments dans l’adresse En accédant à l’adresse internet http ://www.monsite.com/infos.php ?jour=27, on peut obtenir le numéro du jour en PHP : $numeror_jour = $_GET[’jour’] = 27 ; C ANON CMS 15 septembre 2009 27 / 36 Technologies web PHP Utilisation dans le cadre des CMS Intérêt Squelette HTML contenant l’aspect structurel et visuel. Le code PHP ira insérer du contenu aux endroits prévus. C ANON CMS 15 septembre 2009 28 / 36 Technologies web PHP Synthèse Clients Redacteurs Editeur Serveur HTML GET C ANON HTTP CMS PHP CMS 15 septembre 2009 29 / 36 Technologies web SQL Stocker des informations Limite Où aller chercher le contenu s’il n’est pas stocké en HTML ? C ANON CMS 15 septembre 2009 30 / 36 Technologies web SQL Stocker des informations Limite Où aller chercher le contenu s’il n’est pas stocké en HTML ? Base de données Serveur permettant à un client d’accéder à des données brutes (sans mise en page). Les scripts PHP seront clients (sur le serveur HTTP) et accéderont aux données dans un langage spécifique, puis les inséreront. C ANON CMS 15 septembre 2009 30 / 36 Technologies web SQL Base de données Tables Les données sont structurées sont forme de tables : USER_ID Nom Prénom Profession 1 Canon Louis-Claude Moniteur 2 Benmouffek Dominique Maître de conférence C ANON CMS 15 septembre 2009 31 / 36 Technologies web SQL Base de données Tables Les données sont structurées sont forme de tables : USER_ID Nom Prénom Profession 1 Canon Louis-Claude Moniteur 2 Benmouffek Dominique Maître de conférence Mixer les tables USER_ID Enseignement 1 Atelier 3 1 Atelier 5 2 PP/Word À partir de ces deux tables, on peut obtenir la liste des enseignements à partir du nom d’un enseignant. La colonne USER_ID permet de faire la correspondance. C ANON CMS 15 septembre 2009 31 / 36 Technologies web SQL Requêtes SQL Langage Les requêtes respectent le format du langage SQL. Elles permettent de récupérer des données, ou ajouter/modifier/supprimer les tables. C ANON CMS 15 septembre 2009 32 / 36 Technologies web SQL Requêtes SQL Langage Les requêtes respectent le format du langage SQL. Elles permettent de récupérer des données, ou ajouter/modifier/supprimer les tables. Exemple SELECT Enseignement FROM table1, table2 WHERE table1.USER_ID = table2.USER_ID AND table1.Nom = "Nom" ; Renvoie la liste des enseignements de l’enseignant “Nom”. C ANON CMS 15 septembre 2009 32 / 36 Technologies web SQL Synthèse Clients Redacteurs Editeur Serveur HTML GET C ANON HTTP PHP CMS SQL CMS 15 septembre 2009 33 / 36 Exemples et synthèse Plan 1 Contexte introductif 2 Contenu numérique 3 Problématique éditoriale 4 Technologies web HTTP PHP SQL 5 Exemples et synthèse C ANON CMS 15 septembre 2009 34 / 36 Exemples et synthèse Quelques CMS SPIP Conception de site à contenu informatif (assez général). Orienté édition et organisation des rôles. Utilise des squelettes HTML personnalisables. Le logiciel utilise PHP et une base de données SQL de façon transparente. Site officiel : http ://www.spip.net/rubrique91.html C ANON CMS 15 septembre 2009 35 / 36 Exemples et synthèse Quelques CMS SPIP Conception de site à contenu informatif (assez général). Orienté édition et organisation des rôles. Utilise des squelettes HTML personnalisables. Le logiciel utilise PHP et une base de données SQL de façon transparente. Site officiel : http ://www.spip.net/rubrique91.html Wordpress Conception de blog (gestion des commentaires, . . .). Repose également sur PHP/SQL. Wordpress Codex : http ://codex.wordpress.org/Main_Page C ANON CMS 15 septembre 2009 35 / 36 Exemples et synthèse Quelques CMS SPIP Conception de site à contenu informatif (assez général). Orienté édition et organisation des rôles. Utilise des squelettes HTML personnalisables. Le logiciel utilise PHP et une base de données SQL de façon transparente. Site officiel : http ://www.spip.net/rubrique91.html Wordpress Conception de blog (gestion des commentaires, . . .). Repose également sur PHP/SQL. Wordpress Codex : http ://codex.wordpress.org/Main_Page Et encore Wikimedia, Drupal, Joomla, . . . C ANON CMS 15 septembre 2009 35 / 36 Exemples et synthèse Conclusion Caractérisation des technologies principales Utilisation facile par des formulaires web Notion de rôle (permissions) Nécessité d’une gestion cohérente des contenus Respect de la charte graphique C ANON CMS 15 septembre 2009 36 / 36
