CMS : Content Management System

Transcription

1 CMS : Content Management System Louis-Claude CANON louis-claude.canon@loria.fr 15 septembre 2009 CANON CMS 15 septembre / 36

2 Plan Contexte introductif 1 Contexte introductif 2 Contenu numérique 3 Problématique éditoriale 4 Technologies web HTTP PHP SQL 5 Exemples et synthèse CANON CMS 15 septembre / 36

3 Contexte introductif Internet C ANON CMS 15 septembre / 36

4 Internet Contexte introductif 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). CANON CMS 15 septembre / 36

5 Internet Contexte introductif 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. CANON CMS 15 septembre / 36

6 Internet Contexte introductif 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). CANON CMS 15 septembre / 36

7 Architecture Contexte introductif 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) CANON CMS 15 septembre / 36

8 Architecture Contexte introductif 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. CANON CMS 15 septembre / 36

9 Synthèse Contexte introductif Client Serveur Contenu CANON CMS 15 septembre / 36

10 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 CANON CMS 15 septembre / 36

11 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 CANON CMS 15 septembre / 36

12 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. CANON CMS 15 septembre / 36

13 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 CANON CMS 15 septembre / 36

14 Synthèse Contexte introductif Clients Fournisseur de contenu Serveur Contenu CMS CANON CMS 15 septembre / 36

15 Plan Contenu numérique 1 Contexte introductif 2 Contenu numérique 3 Problématique éditoriale 4 Technologies web HTTP PHP SQL 5 Exemples et synthèse CANON CMS 15 septembre / 36

16 Format Contenu numérique É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,...). CANON CMS 15 septembre / 36

17 Format Contenu numérique É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. CANON CMS 15 septembre / 36

18 HTML Contenu numérique 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. CANON CMS 15 septembre / 36

19 HTML Contenu numérique 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. CANON CMS 15 septembre / 36

20 HTML Contenu numérique 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. CANON CMS 15 septembre / 36

21 Attributs Contenu numérique Attributs Enrichie une balise sur le contenu délimité. Une balise peut avoir des valeurs pour chacun de ses attributs. CANON CMS 15 septembre / 36

22 Attributs Contenu numérique 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. CANON CMS 15 septembre / 36

23 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. CANON CMS 15 septembre / 36

24 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> CANON CMS 15 septembre / 36

25 Contenu numérique Génération de contenu Directement en HTML Problème : non accessible au néophyte. CANON CMS 15 septembre / 36

26 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é. CANON CMS 15 septembre / 36

27 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. CANON CMS 15 septembre / 36

28 Synthèse Contenu numérique Clients Fournisseur de contenu Serveur HTML CMS CANON CMS 15 septembre / 36

29 Plan Problématique éditoriale 1 Contexte introductif 2 Contenu numérique 3 Problématique éditoriale 4 Technologies web HTTP PHP SQL 5 Exemples et synthèse CANON CMS 15 septembre / 36

30 Édition Problématique éditoriale Contenu Ensemble de médias numériques et textes électroniques. CANON CMS 15 septembre / 36

31 Édition Problématique éditoriale 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). CANON CMS 15 septembre / 36

32 Workflow Problématique éditoriale Définition Séquence d opérations réalisées par des personnes ou groupes de personnes. CANON CMS 15 septembre / 36

33 Workflow Problématique éditoriale 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. CANON CMS 15 septembre / 36

34 Synthèse Problématique éditoriale Avantages Charte graphique, rationalisation de la complexité, contrôle de la chaîne éditoriale. Clients Redacteurs Editeur Serveur HTML CMS CANON CMS 15 septembre / 36

35 Plan Technologies web HTTP 1 Contexte introductif 2 Contenu numérique 3 Problématique éditoriale 4 Technologies web HTTP PHP SQL 5 Exemples et synthèse CANON CMS 15 septembre / 36

36 Technologies web Transférer les pages web HTTP Définition HTTP protocole de transfert de données hypertextes. CANON CMS 15 septembre / 36

37 Technologies web Transférer les pages web HTTP 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. CANON CMS 15 septembre / 36

38 Serveur HTTP Technologies web HTTP Requête GET Des caractères transitent sur le réseau et le serveurs HTTP renvoie une page internet (ici, telnet 80 GET /identite/identite.htm HTTP/1.0 Host : CANON CMS 15 septembre / 36

39 Serveur HTTP Technologies web HTTP Requête GET Des caractères transitent sur le réseau et le serveurs HTTP renvoie une page internet (ici, telnet 80 GET /identite/identite.htm HTTP/1.0 Host : Autre requête La requête POST est utilisé lors les données d un formulaire internet sont envoyées au serveur. CANON CMS 15 septembre / 36

40 Synthèse Technologies web HTTP Clients Redacteurs Editeur Serveur GET HTML HTTP CMS CANON CMS 15 septembre / 36

41 Technologies web PHP Des pages conçues dynamiquement Limite Comment concevoir une page qui affiche la date du jour? CANON CMS 15 septembre / 36

42 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> CANON CMS 15 septembre / 36

43 Technologies web Langage de script : PHP 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. CANON CMS 15 septembre / 36

44 Technologies web Langage de script : PHP 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? >. CANON CMS 15 septembre / 36

45 Technologies web Langage de script : PHP 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." ; CANON CMS 15 septembre / 36

46 Utiliser des variables Technologies web PHP Concept de variables Une variable est une valeur représentée par un symbole (un chaîne de caractère). CANON CMS 15 septembre / 36

47 Utiliser des variables Technologies web PHP 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. CANON CMS 15 septembre / 36

48 Technologies web Réaliser des opérations PHP Calcul simple $nombre = 10 ; $resultat = ($nombre + 5) * $nombre ; CANON CMS 15 septembre / 36

49 Technologies web Réaliser des opérations PHP Calcul simple $nombre = 10 ; $resultat = ($nombre + 5) * $nombre ; Récupérer des arguments dans l adresse En accédant à l adresse internet http :// on peut obtenir le numéro du jour en PHP : $numeror_jour = $_GET[ jour ] = 27 ; CANON CMS 15 septembre / 36

50 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. CANON CMS 15 septembre / 36

51 Synthèse Technologies web PHP Clients Redacteurs Editeur Serveur HTML GET HTTP PHP CMS CANON CMS 15 septembre / 36

52 Technologies web Stocker des informations SQL Limite Où aller chercher le contenu s il n est pas stocké en HTML? CANON CMS 15 septembre / 36

53 Technologies web Stocker des informations SQL 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. CANON CMS 15 septembre / 36

54 Base de données Technologies web SQL 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 CANON CMS 15 septembre / 36

55 Base de données Technologies web SQL 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. CANON CMS 15 septembre / 36

56 Requêtes SQL Technologies web 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. CANON CMS 15 septembre / 36

57 Requêtes SQL Technologies web 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. CANON CMS 15 septembre / 36

58 Synthèse Technologies web SQL Clients Redacteurs Editeur Serveur GET HTML HTTP PHP SQL CMS CANON CMS 15 septembre / 36

59 Plan Exemples et synthèse 1 Contexte introductif 2 Contenu numérique 3 Problématique éditoriale 4 Technologies web HTTP PHP SQL 5 Exemples et synthèse CANON CMS 15 septembre / 36

60 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 :// CANON CMS 15 septembre / 36

61 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 :// Wordpress Conception de blog (gestion des commentaires,...). Repose également sur PHP/SQL. Wordpress Codex : http ://codex.wordpress.org/main_page CANON CMS 15 septembre / 36

62 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 :// 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,... CANON CMS 15 septembre / 36

63 Conclusion Exemples et synthèse 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 CANON CMS 15 septembre / 36