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 Les modules essentiels sont déjà présents (Core Modules) Configuration des modules Core nécessaires 44

45 THÈMES 45

46 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 » 46

47 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 47

48 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 48

49 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 49

50 MODULES 50

51 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 51

52 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 52

53 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 53

54 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 54

55 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 55

56 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. 56

57 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 57

58 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 58

59 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. 59

60 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 60

61 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 61

62 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é 62

63 SEO 63

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

65 ORGANISATION DE L’INFORMATION 65

66 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) 66

67 GESTION DES DROITS 67

68 68

69 PARAMÉTRAGE AVANCÉ 69

70 70

71 SUPPORT 71

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

73 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) 73

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

75 Documentation Documentation technique Documentation utilisateur 75

76 LICENCE 76

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

78 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 78

79 QUELQUES RÉFÉRENCES 79

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

81 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/ … 81

82 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 » 82

83 CONCLUSION 83

84 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, …) 84

85 C’EST FINI ! 85