7 Un CMS pour le développement de sites web 1. LES CMS 2.

Présentation au sujet: "7 Un CMS pour le développement de sites web 1. LES CMS 2."— Transcription de la présentation:

1 7 Un CMS pour le développement de sites web 1

2 LES CMS 2

3 Un CMS c’est quoi ? CMS : Content Management System Système de Gestion de Contenus 3

4 Un CMS c’est quoi ? Gestion dynamique de contenus en ligne 4

5 Un CMS c’est quoi ? Conception et mise à jour de sites Internet dynamiques 5

6 Un CMS c’est quoi ? Gestion 100% web 6

7 Un CMS c’est quoi ? Espace d’administration sécurisé en accès restreint Gestion des différents niveaux accès à l’outil : Administrateurs Rédacteurs, contributeurs, modérateurs Lecteurs Notion de groupe 7

8 Un CMS c’est quoi ? Gestion du travail collaboratif Travail en groupe Suivi des mises à jour Validation Modération Commentaires Restriction des accès 8

9 Un CMS c’est quoi ? Gestion du Workflow 9

10 Un CMS c’est quoi ? Gestion du cycle de vie des documents 10

11 Un CMS c’est quoi ? Organisation de l’information 11

12 Un CMS c’est quoi ? Un fond séparé de la structure et de la mise en forme 12

13 Un CMS c’est quoi ? Structure + Mise en forme = Layout 13

14 Un CMS c’est quoi ? Le Respect des standards du web 14

15 Un CMS c’est quoi ? Des publications accessibles de tous via un navigateur 15

16 Le « meilleur » CMS ? Lire l’enquête Smile sur les CMS open source pénétration des CMS open source en France plus de 1300 participants y ont répondu premier trimestre 2013 SSII française spécialisée dans l’intégration de solutions open source 16

17 Le « meilleur » CMS ? 17

18 Le « meilleur » CMS ? Drupal, CMS le plus utilisé dans les grandes entreprises 18

19 DRUPAL 19

20 Drupal CMS communautaire (990 000 personnes) Créé en 2000, université d'Anvers, Dries Buytaert Fondé sur LAMP (Linux, Apache, MySQL, PHP) Open source / Licence GNU GPL www.drupal.org 20

21 Quelques chiffres Une communauté de 990 000 personnes Nombre de lignes de code : – 50 669 pour Drupal 5 – 77 087 pour Drupal 6 – 203 966 pour Drupal 7 Nombre de modules : – 2 629 pour Drupal 5 – 7 202 pour Drupal 6 – 8 148 pour Drupal 7 + de 500 000 sites Téléchargé + de 250 000 fois par mois 21

22 4 niveaux d’utilisation 1.Utilisation telle quelle après installation 2.Personnalisation simple 3.Extension par ajouts externes 4.Extension par développement interne 22

23 Compétences requises en dev Drupal requiert des compétences en développement pour concevoir un site évolué 23

24 INSTALLATION 24

25 Téléchargement de de WAMP http://www.wampserver.com/ 25

26 Installation de WAMP 26

27 Installation de WAMP 27

28 Installation de WAMP 28

29 Configuration de wamp Activez la librairie PHP « gd2 » Icône de notif WAMP > PHP > PHP extensions > php_gd2 Activez le module apache « rewrite » Icône de notif WAMP > Apache > Apache module > rewrite_module Effectuez des réglages dans MySQL Icône de notif WAMP > MySQL > my.ini – innodb_flush_log_at_trx_commit =2 (au lieu de 1) Effectuez des réglages dans php Icône de notif WAMP > PHP > php.ini – max_execution_time = 300 (au lieu de 30) – memory_limit = 256M (au lieu de 128M) – upload_max_filesize = 10M (au lieu de 2M) – max_file_uploads = 20 – realpath_cache_size = 2M (au lieu de 16K) – realpath_cache_ttl = 36000 (au lieu de 120) – output_buffering = 4096 (au lieu de “on”) 29

30 Téléchargement de Drupal http://drupal.org/project/drupal 30

31 Installation de Drupal 31

32 Installation de Drupal 32

33 Installation de Drupal 33

34 Installation de Drupal 34

35 Installation de Drupal 35

36 Installation de Drupal 36

37 Installation de Drupal 37

38 Installation de Drupal 38

39 Installation de Drupal 39

40 Installation de Drupal 40

41 Installation de Drupal 41

42 Installation de Drupal 42

43 PRISE EN MAIN & PARAMÉTRAGE DE BASE 43

44 Après l’installation… Suppression des anomalies du rapport dans le tableau de bord admin – Permission d’accès à certains dossiers – Paramètres Apache – Sécurité – Mise à jour – … Renseignement de la rubrique configuration Paramétrage de la vérification des mises à jour automatiques Configuration des modules qui sont déjà présents (Core Modules) 44

45 Drupal en français ! Téléchargez, installez et activez le module « Localization Update » extraire l’archive « l10n_update.zip » dans le dossier « /drupal/sites/all/modules » Activez le module core « Locale » admin/modules/list Ajoutez la langue française et la définir en tant que langue par défaut admin/config/regional/language/add Importez la traduction française admin/config/regional/translate/import (remplacez les chaines existantes) 45

46 THÈMES 46

47 Thème Un moteur de templates en PHP Séparation propre entre présentation et données Faible granularité du theming (listes, menus, liens, images, contenus, page, etc.) Possibilité de surcharger n'importe quelle fonction de thème Une pénurie de thèmes toutefois Module « Display Suite » 47

48 Thèmes de départ Responsive HTML5 Boilerplate Un base thème HTML5 responsive !! Omega Un base theme très puissant en HTML5/960gs avec une approche responsive web design, qui propose une foule d'options en un clic, avec des sous-thèmes et modules reliés comme omega tools ou delta Fusion avec le module Skinr Un base theme 960gs très puissant avec plein d'options pour faire du point-and-click theming, jusqu'au choix des typos, le skin des blocs grâce à skinr, etc. + Son thème fusion mobile (une version de dev pour drupal 7 disponible, et une version stable annoncée comme imminente). Une version HTML5 est envisagée comme sub-theme dans l'avenir (indisponible pour l'instant) Adaptativetheme Un base theme HTML5 livré avec son core theme et son sub-theme qui propose diverses choses en plus : options en 1 clic comme 'equal heights', horizontalisation du bloc login, support de skinr annoncé, assez proche de fusion dans l'esprit...)+ Son adaptivetheme mobile (seulement pour drupal 6) Boron Un base theme HTML5 simple et efficace qui convertit les templates natifs de drupal en HTML5, sans autre modification Panels 960gs Un base theme HTML5/960gs qui requiert boron, et génère quantité de layouts pour panels ; permet de partir du principe qu'il n'a pas nécessairement une "sidebar" dans un site drupal 48

49 Thèmes prêts à l'emploi Busy Un très bon thème corporate, en bleu et blanc, plutôt élégant Marinelli Un thème corporate assez clean, quoique moins élégant Bluemasters Un très bon thème avec slideshow en home, que nous avons utilisé pour le site vigie-nature du MNHN BlogBuzz Un thème élégant et bien fait, que nous avions utilisé comme base en son temps pour reduplikation.Net Dingus Un thème élégant et intéressant pour un blog Sky Un thème minimal en HTML 5 qui dépannera facilement Corolla Un thème propre bien connu de la communauté drupal Grunge Un thème "loisir" assez sympa, mais uniquement pour drupal 6 à ce jour Colourise Un thème très élégant, mais uniquement pour drupal 6 à ce jour Acquia Slate Un thème intéressant et bien connu, mais uniquement pour drupal 6 à ce jour 49

50 Thèmes d'administration Rubik Pour les fanatiques de la séparation entre front-office et back-office MD Construction Un thème élégant et bien utile pour les sites en construction. À utiliser avec le module role theme switcher 50

51 MODULES 51

52 Une quarantaine de modules par défaut aggregator block blog book color comment contact contextual dashboard dblog field field_ui file filter forum help image locale menu node openid overlay path php poll profile rdf search shortcut simpletest statistics syslog system taxonomy toolbar tracker translation trigger update user 52

53 Modules « linguistiques » Internationalization Traduire le contenu dans n'importe quelle langue TranslateThis Button Un bouton Google Translate pour traduire la page courante Language switcher dropdown Une liste déroulante pour choisir la langue, avec ou sans les drapeaux Languages icons Les drapeaux correspondant aux langues à la place des noms de langues 53

54 Modules de « gestion de contenu » Wysiwyg Installer un éditeur WYSIWYG tel que tinymce, ckeditor et beaucoup d'autres CKEditor Module indépendant de wysiwyg et en un sens plus complet) avec des modules liés comme : – CKEditor SWF Insérer facilement du flash, du MP3, et même des vidéos youtube – CKEditor Link Faciliter la création de liens internes au site drupal IMCE Ajotuer un navigateur de fichiers à votre éditeur WYSIWYG – IMCE Crop Retailler les images à la volée – IMCE Mkdir Gérer l'arborescence de dosseirs à la volée – IMCE Rename Renommer les fichiers à la volée – IMCE Tools Améliorer grâce à IMCE search + IMCE file path 54

55 Modules de « gestion de contenu » Video_Filter Faire de l'embedding de vidéos multi-platefomes Image Resize Filter Gérer facilement les redimensionnements à la volée Transliteration Éviter les problèmes avec les noms de fichiers Multiupload Imagefield widget Charger plusieurs images en une seule fois Maxlength Limiter le nombre d'un caractères d'un champ de type de contenu ou de formulaire iTweak Upload Améliorer énormément la fonction de fichiers attachés 55

56 Modules « multimédias » Location Map Plans d’accès Google Maps ColorBox Un nouveau lightbox pour drupal 7 ? Shadowbox L'irremplaçable Gallery Formatter Slideshow + jcarousel, solution complète de portfolio Drupagram Intégration à drupal de l'incroyable réseau social photo instagram Views JQFX Suite de modules exceptionnelle, comprenant galleria, carousel, imageflow, etc. jQFX Imageflow Imageflow intégrant la vidéo pour drupal 7 Views Slideshow Créer des slideshows dynamiques et personnalisés avec de l'image ou du contenu HTML, incontournable Views Nivo Slider Une autre solution "slideshow" basée sur jquery, intéressant 56

57 Modules « multimédias » Rotating Banner Créer et gérer très simplement une bannière d'images rotative, module en usage sur drupalgardens Media Gérer des champs multimédia dans field UI, en local ou en 3rd-party, incontournable, extensible avec : – Media gallery – Media:flickr – Media:youtube – Media:vimeo – Media:dailymotion – Media:element Video Filter Intégrer Un Format D'entrée vidéo qui reconnaît automatiquement toutes les urls des services tiers de vidéo Mobile Codes Générer des QR codes à partir d'infos texstuelles, URL, etc. 57

58 Modules « nodes » SimilarByTerms Afficher une liste de nodes similaires sur la base du même terme de taxonomie Relevant content Référencer du contenu pertinent lié Pagination Paginer automatiquement ou arbitrairement un même node Author Contact Générer un formulaire de contact permettant de contacter l’auteur du node Content Access Restreindre l'accès au contenu de manière fine FAQ Générer facilement des FAQ 58

59 Modules de « restriction d'accès » Content Access Restreindre finement par types de contenu ACL Utilisé avec le précédent Protected node Restreindre l'accès à un node sans passer par des gros modules User Role Field Restreindre un champ à un rôle Role Delegation Restreindre le droit de donner des droits d'accès et des rôles 59

60 Modules de « fils d'Ariane » Menu Breadcrumb Afficher dans le fil d’ariane le menu auquel la page courante appartient Custom Breadcrumb Personnaliser de manière approfondie le fil d’ariane par node types, etc. 60

61 Modules « menus » DHTML Menu Créer des menus dépliants Menu Attributes Générer des ID et des class et autres attribust sur des items de menus Menu FirstChild Renvoyer un item de menu vers son premier enfant sans lui attribuer de chemin Nice Menus Créer des menus déroulants Superfish Des menus déroulants très avancés Menu Admin per menu Donner les droits d'admin sur certains menus et pas d'autres Menu per Role Restreindre l'accès aux items de menu par rôle OM Maximenu Des mega menus riches simples et faciles avec des "awesome features" Menu Minipanels Intégrer des panels dans un menu, utile pour un mega drop down ou un drop down riche MegaMenu Faire un mega drop down menu ; la page du module cite aussi des projets similaires 61

62 Modules « blocs » Boxes Les blocs ajaxés et réinventés, très puissant avec panels Field Boxes Qui pourrait bien révolutionner drupal Collapsiblock Blocs dépliants très utiles avec panels Block class Ajouter des classes css aux blocs via l'interface d'admin des blocs Node Blocks Rendre des types de contenu disponibles comme blocs Multiblock Avoir plusieurs instances d'un même bloc 62

63 Modules « taxonomie » Taxonomy Accordion Pliage/dépliage des catégories de vocabulaire Taxonomy Super Select Prendre les sélections de termes sous la forme de checkboxes, entre autres Hierarchical Select Faciliter la sélection de termes dans un vocabulaire très hiérarchisé 63

64 DÉVELOPPEZ VOTRE PROPRE MODULE 64

65 Module « test » Créez un dossier « drupal/sites/all/modules/test/ » Dedans, créez les fichiers « test.info » et « test.module » 65

66 Le fichier « test.info » name = Mon module test description = Ceci est un test pour apprendre à utiliser les modules dans Drupal project = test version = 7.x-1.0 core = 7.x dependencies[] = node dependencies[] = module_bidon https://drupal.org/node/542202 66

67 Le fichier « test.module » <?php function test_affichage($texte) { echo $texte; } ?> 67

68 Dans mon thème… dans le fichier « drupal/sites/all/ themes/mon_theme/page.tpl.php », Ajouter : <?php if(module_exists("test")) : test_affichage("Exemple de message de test"); endif; ?> 68

69 Pour finir… Activez votre module « test » admin/modules/list Visualisez le résultat

70 CONTENUS 70

71 Organisation de l’information Classement, hiérarchisation description commentaires des utilisateurs Liens, menus taxonomie indexation référencement diffusion syndication (RSS) cycle de vie version standardisation, normalisation gabarit (layout) 71

72 Les blocs 72

73 Les types de contenus 73

74 La taxonomie Permet de classifier, organiser les éléments de contenus selon des vocabulaires La taxonomie permet de faire une recherche de contenu sous différentes approches

75 Mise en forme du texte Installez et activez le module « WYSIWYG » Installez la librairie « CKEditor » dans le dossier : drupal/sites/all/libraries/ckeditor Paramétrez l’éditeur de texte selon le type de contenu : – HTML – HTML filtré – Text simple 75

76 Module WYSIWYG 76

77 Du code PHP dans les pages Activez le module core « PHP Filter » Attention toutefois à son utilisation 77

78 SEO 78

79 SEO Drupal respecte à 100% les standards W3C Réécriture et historisation d’URLS Structuration de la navigation par menus Site map Statistiques et rapports 79

80 Les menus Menu principal Menu secondaire … 80

81 Réécriture d’URL « friendly » Activez les URL simplifiées Installez, activez et paramétrez les modules « Pathauto » et « token » 81

82 Le site map Installez, activez et paramétrez le module « XML sitemap » 82

83 GESTION DES DROITS 83

84 Rôles Les rôles permettent de définir un ensemble de droits sur le site et d’y associer un libellé Par exemple : – Rédacteur – Modérateur – Maintenance – Gestionnaire système – Gestion des utilisateurs – … 84

85 Rôles Rôles de base : – Utilisateur anonyme Utilisateurs sans accès ou non authentifiés – Utilisateur authentifié Utilisateurs authentifiés – Administrateur Rôle le plus permissif 85

86 Rôles

87 Droits Les droits permettent de contrôler l’accès aux fonctionnalités de Drupal Ils permettent de définir ce que les utilisateurs ont la permission de voir et de faire sur le site Par exemple : Consulter, Créer, Modifier ou supprimer un contenu 87

88 Droits

89 Utilisateurs Les utilisateurs sont associés à un ou plusieurs rôles Les utilisateurs bénéficient alors des droits relatifs à chacun des rôles qu’ils possèdent 89

90 Utilisateurs

91 OPTIMISEZ DRUPAL 91

92 Côté modules Désactivez tous les modules inutiles Désactivez les modules trop gourmands en ressources et remplacez-les par d'autres Désactivez les modules relatifs au mode développement 92

93 Côté thème > Images Limitez le graphisme à l’essentiel (charte graphique) Réglez le rapport « poids-qualité » – Format – Résolution – Codage – Compression – bords perdus Limitez les requêtes HTTP – Réduire le nombre d’images (sprites) – Moins d’images plus de styles ! 93

94 Côté thème > Styles CSS Limitez le graphisme à l’essentiel Moins d’images plus de styles ! Optimisez les styles CSS (reset, normalise, …) Respectez les standards supprimez toutes les erreurs Limitez les requêtes HTTP – Agrégez les styles – Compressez les fichiers 94

95 Côté thème > Configuration Ajoutez un fichier erreur 404 Complétez le fichier « theme.info » Ajoutez un « screenshot » 95

96 Côté cache > La base Activez caches natifs Activez la compression des pages Agrégez les feuilles de style et de JavaScript Activez le cache de certains modules (Views, Panels, Date...) Ne videz pas les caches pendant les « heures de pointe » ! 96

97 Côté cache > Module Entity Cache Installez ce module pour transférer les entités du core vers l’API de cache de Drupal – Comment – File – Node – taxonomy – User –... https://drupal.org/project/entitycache 97

98 Côté cache > Varnish Installez le serveur reverse proxy de cache externe http Varnish Installez le module Drupal du même nom pour faire le lien avec le serveur Visualisez les résultats de cache avec Firebug https://drupal.org/project/varnish 98

99 Côté cache > Memcached Installez Memcached sur le serveur (caches et requêtes complexes dans la RAM du serveur) Installez le module Drupal du même nom pour faire le lien avec le serveur https://drupal.org/project/memcache 99

100 Reverse proxy Internet Serveurs

101 Côté Bonnes pratiques Ne réinventez pas la roue à couper le beurre ! Documentez-vous Respectez les « coding standards » Commentez le code Gérez les versions (GIT, SVN) Mutualisez désactivez éventuellement les logs ou les statistiques … 101

102 SUPPORT 102

103 Maintenance technique Sauvegardes Vérification* (via le tableau de bord admin.) Mise à jour * – Logiciel – Modules – Thèmes *automatisé 103

104 Maintenance technique La permission « Utiliser le site en mode maintenance » Permet à d'autres utilisateurs que le user 1 d'accéder au site pendant qu'il est fermé (ex: un client) 104

105 Formation des utilisateurs Administrateurs Rédacteurs, contributeurs, modérateurs 105

106 Documentation Documentation technique Documentation utilisateur 106

107 LICENCE 107

108 Licence La Licence Publique Générale GNU ou GNU General Public License ou GNU GPL 108

109 Licence Exécution du programme quelque soit l’usage Accès au code source Adaptation du programme à son besoin Copie et diffusion du programme Obligation de redistribuer à la communauté les versions modifiées et diffusées du programme Pas d’obligations lors d’un usage personnel 109

110 QUELQUES RÉFÉRENCES 110

111 LAMP, WAMP, MAMP http://lamphowto.com/ http://www.wampserver.com/ http://www.mamp.info/ 111

112 CMS http://www.smile.fr/ (lire l’enquête CMS) http://www.smile.fr/ http://drupal.org http://www.wordpress-fr.net/ http://www.joomla.fr/ http://www.spip.net/ http://typo3-fr.org/ http://ez.no/ … 112

113 Drupal http://drupal.org (projet Drupal) http://drupal.org http://drupalfr.org (communauté française Drupal) http://drupalfr.org http://api.drupal.org/api/ (doc. des API Drupal) http://api.drupal.org/api/ http://www.drupalsites.net/ (dépôt de sites sous Drupal) http://www.drupalsites.net/ http://buytaert.net/tag/drupal-sites (dépôts de D. Buytaert) http://buytaert.net/tag/drupal-sites http://www.guide-drupal.fr/ « Drupal : Concevoir et déployer ses sites web » Yoran Brault – Edition Eyrolles (en accès libre) « Drupal : Concevoir et déployer ses sites web » « Drupal - Réalisez des développements professionnels avec PHP » David Omelta et Rémi Benoit – Edition ENI (Expert IT) « Drupal - Réalisez des développements professionnels avec PHP » 113

114 Thèmes https://drupal.org/project/zen https://drupal.org/project/corolla 114

115 Modules https://drupal.org/project/l10n_update https://drupal.org/project/pathauto https://drupal.org/project/token https://drupal.org/project/wysiwyg https://drupal.org/project/xmlsitemap … 115

116 Gestion des caches https://drupal.org/project/entitycache https://drupal.org/project/varnish https://drupal.org/project/memcache 116

117 CONCLUSION 117

118 Conclusion Système de gestion de contenus open source Connaissances en PHP requises Accessible aux développeurs Prise en main plus longue Populaire Personnalisable à souhaits Performant et sûr Une grande communauté « derrière » Quelques bugs En route vers Drupal 8… Il existe d’autres CMS (Joomla, Typo, SPIP, WordPress, …) 118

119 C’EST FINI ! 119