WST#9

Si les CMS m’étaient contés... grâce à MODX

Gildas NOËL (@ackwa)
Pour suivre cette présentation en ligne, connectez-vous à l'adresse suivante : http://slides.ackwa.fr/wst9
v.1.3 du 05/03/2014

Ackwa en quelques mots...

  • Développement Web
  • Sites, Intranet & Applications
  • Formations
  • Membre fondateur de Centre & TIC
  • MODX Ambassador & Professional
  • En savoir plus : Ackwa.fr et @ackwa

Romain Tripault...

  • Freelance ("MODX-clusif" depuis 2009)
  • Traducteur (Revolution)
  • MODX Ambassador
  • Contributeur au core
  • Développeur de composants

Reveal.js

Ces slides ont été conçus grâce à Reveal.js, un grand merci à Hakim El Hattab pour cette réalisation. Pour mémoire quelques fonctionnalités de cette librairie :

  • ESC permet de passer en mode "Overview"
  • ALT+Clic permet de "Zoomer"
  • F permet de passer en mod "Fullscreen"
  • S permet d'afficher le "tableau de bord"
  • B permet le "blackout"
  • Supporte le Markdown
  • Propose différents "thèmes" et diverses "transitions"
  • Fonctionne sur "Safari mobile"...

Un CMS...

Un CMS (Content Management System ou Système de Gestion de Contenu)  est une famille de logiciels destinés à la conception et à la mise à jour dynamique de sites Web ou d'applications multimédia.
Wikipedia FR

Un CMS permet...

  • ›De publier des contenus multimédia : texte, image, video...
  • De gérer le cycle de vie de ces contenus
  • ›De dissocier le contenu du site de son apparence
  • ›De créer de nouveaux contenus rapidement
  • ›De gérer les rôles et permissions des utilisateurs
  • ›Une mise à jour "simple" sans connaissance technique
  • Une optimisation du référencement...

Un CMS pour quoi faire ?

  • Un site Internet "vitrine", "corporate"...
  • Un site e-commerce
  • Un Intranet / Extranet
  • Un application web
  • Une présentation "en ligne"
  • ...

 

Et ce indépendamment du fait que le site soit "classique", "mobile", "responsive", offre ou non des "services" via API...

Quels critères ?

  • Indépendance vis à vis du design
  • Capacité de structuration du contenu
  • Processus de publication
  • Courbe d'apprentissage
  • Experience utilisateur en front-office
  • Multilinguisme
  • Niveau d'industrialisation & de support
  • Ergonomie du back-office
  • Qualité de l'architecture technique (ex. API, ORM...)
  • Coût des licences (?)

Une hégémonie WordPress !?

WordPress 56.5%
Joomla 9.2%
Drupal 6.7%
Autres 27.6%
Web Technology Surveys Mai 2013

WordPress, des contraintes ?

Tenir compte de la courbe d'apprentissage...

Bien choisir...

Tous les chemins mènent à MODX...

MODX "Creative Freedom"

MODX, c'est quoi ?

  • Une plateforme de gestion de contenu et un framework (CMF)
  • Première release en 2004/05
  • Deux versions : Evolution / Revolution
  • Environnement PHP, MySQL ou SQL Server 2008
  • Linux, Windows, OSX
  • >500.000 téléchargements depuis 2010
  • >100.000 sites sous MODX
  • Public : Professionnels de la création

MODX, la liberté de création

Du Design au template...

  •    100% de contrôle sur le Front
  • ~100% de contrôle sur le Back

MODX, qui l'utilise ?

Plus de 100.000 sites, dont DELL, MOZbot, NotePad++....

Une bonne implantation aux USA, en Asie, en Russie, mais encore faible en Europe et tout particulièrement en France.

Installation 1/2

L'installation d'une MODX est d'une facilité déconcertante ou "Next/Next/Next" :

  • Vérifier les quelques prérequis
  • Télécharger la version "Traditional"
  • La décompresser dans votre espace web
  • Vérifier les permissions 
  • Exécuter l'URL /setup/
  • Suivre les instructions...
Un mode d'installation avancée existe pour permettre optimisation et sécurisation de la configuration (et pour les nerds et aficionados de l'automatisation : installation/upgrade en CLI).

Installation 2/2

Login

Ecran de connection

Un solution pour tester, le MODXCloud en version "Laboratory" (Free)

Dashboard

Navigation, actualités... Il est personnalisable.

Arborescence des "composants" 1/4

Ressources

Eléments

Fichiers

arborescence de ressources modx arborescence de ressources modx arborescence de ressources modx

Arborescence des "fichiers" 2/4

L'onglet File permet de naviguer dans l'ensemble des dossiers et fichiers nécessaires au bon fonctionnement de MODX. Parmi ceux-ci figure le dossier assets, dans lequel vous pourrez mettre tous vos fichiers statiques (CSS, JS, PDF, images...).

Ces manipulations peuvent aussi être réalisées via FTP ou SSH.

Arborescence des "fichiers" 3/4

Le première étape lors de la création d'un "site" MODX est de créer la structure de ce dossier, soit dans notre cas :

Arborescence des "fichiers" 4/4

Et nous déposerons dans le dossier templates, la dernière version de Reveal.js. Afin d'obtenir l'arborescence suivante :

Ya Plus K...

Ressources MODX 1/4

Les ressources sont les "sources de données" / "pages" du site Internet. Elles peuvent être de différents type

  • Dossier
  • Document
    • HTML
    • CSS
    • Texte brute
    • XML
    • Javascript
    • JSON
    • RSS
  • Liens
  • Personnalisée / Sur-mesure

Ressources MODX 2/4

Chaque ressource est identifiée par un ID unique, dispose de propriétés génériques :

  • Nom
  • Description
  • Alias
  • Template
  • Contenu...

 Et peut avoir différents status :

  • Visible
  • Publié
  • Programmé
  • Supprimé

 

 

 

Ressource MODX 3/4

Ainsi, nos "Présentations" seront classées dans une ressource de type weblink :

Ressources MODX 4/4

Et, notre "Présentation" sera une ressource de type document :

Les Templates 1/3

Les templates sont les structures syntaxique (ex. HTML, XML, JSON...) de présentation des ressources MODX.

Les Templates 2/3

Ainsi, pour notre présentation, le template a été construit à partir du code de démonstration de Reveal.js. Télécharger le template : wst9.tpl


<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">

        <!-- ACK - Title & Meta -->
        <title>[[*pagetitle]]</title>
        <meta name="description" content="[[*description:default=`[[*pagetitle]]`]]">
        <meta name="author" content="Ackwa.fr">

        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

        <!-- ACK - Base : assets/templates/reveal -->
        <base href="[[!++site_url]]/assets/templates/reveal/" >

        <link rel="stylesheet" href="css/reveal.min.css">
        <link rel="stylesheet" href="css/theme/default.css" id="theme">

        <!-- For syntax highlighting -->
        <link rel="stylesheet" href="lib/css/zenburn.css">

        <!-- If the query includes 'print-pdf', use the PDF print sheet -->
        <script>
            document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
        </script>

        <!--[if lt IE 9]>
        <script src="lib/js/html5shiv.js"></script>
        <![endif]-->
    </head>
    <body>
        <!-- Reveal main container -->
        <div class="reveal">
            <!-- Any section element inside of this container is displayed as a slide -->
            <div class="slides">
                <!-- ACK - Title slide -->
                <section>
                    <h1>[[*pagetitle]]</h1>
                    <h3>[[*longtitle]]</h3>
                    <h5>[[*description]]</h5>
                </section>

                <!-- ACK - The slides -->
                [[getResources?tpl=`RevealSlide`
                              &includeContent=`1`
                              &sortby=`{"menuindex":"ASC"}`]]

            </div>
        </div>

        <!-- Reveal Libraries / Configuration -->
        <script src="lib/js/head.min.js"></script>
        <script src="js/reveal.min.js"></script>
        <script>
            // Full list of configuration options available here:
            // https://github.com/hakimel/reveal.js#configuration
            Reveal.initialize({
                controls: true,
                progress: true,
                history: true,
                center: true,

                theme: Reveal.getQueryHash().theme || 'default', // available themes are in /css/theme
                transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none

                // Optional libraries used to extend on reveal.js
                dependencies: [
                     { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } }
                    ,{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }
                    ,{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }
                    ,{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }
                    ,{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } }
                    ,{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
                    //,{ src: 'plugin/search/search.js', async: true, condition: function() { return !!document.body.classList; } }
                    //,{ src: 'plugin/remotes/remotes.js', async: true, condition: function() { return !!document.body.classList; } }
                ]
            });
        </script>
    </body>
</html>

Les Templates 3/3

Dans l'onglet "Elements", nous allons donc créer un nouveau "Template" avec le code HTML de Reveal.js adapté à MODX :

Les Tags MODX 1/4

L'adaptation à MODX d'un code HTML, consiste à y intégrer des "tags", qui sont les marqueurs permettant d'accéder aux différentes données, ressources et fonctionnalités de MODX. Il en existe plusieurs sortes... Ils sont sous matérialisés par la syntaxe suivante :

Les Tags MODX 2/4

Les différents "tags" MODX sont les suivants :

[[++site_name]] Donnée de configuration système
[[*pagetitle]]  Propriété d'un document (pagetitle, content, tec...)
[[*tv]]         Propriété étendue de document ou Template Variable
[[$xxx]]        Intégration d'un morceau de code (HTML, Texte...) ou Chunk
[[yyy]]         Exécution de code PHP ou Snippet
[[~14]]         Lien vers une resource via son ID (ex. ici l'ID 14)
[[+ph]]         Emplacement dédié aux "sorties" d'un Snippet ou Placeholder
[[-comment]]    Commentaire

Les Tags MODX 3/4

Il est ainsi possible dans un template d'accéder aux propriétés d'un document ainsi :

[[*pagetitle]]   Affiche le titre du document courrant
[[*content]]     Affiche le contenu du document courrant
[[*longtitle]]   Affiche le titre long du document courrant
[[*description]] Affiche la description du document courrant
[[*alias]]       Affiche l'alias du document courrant
[[*parent]]      Affiche l'id du document parent du document courrant
[[*publishedon]] Affiche la date de publication du document courrant

Les Tags MODX 4/4

Notre "Template" Reveal.js utilise donc pas exemple pour le 1er slide le code suivant :


<!-- ACK - Title slide -->
<section>
   <h1>[[*pagetitle]]</h1>
   <h3>[[*longtitle]]</h3>
   <h5>[[*description]]</h5>
</section>

Revenons à notre Template...

Nous pouvons désormais affecté à notre "Présentation" son template :

Un premier test...

Les snippets 1/5

Les Snippets sont des codes PHP qui exploitent les APIs de MODX et sont invoqués dans les pages. Vous pouvez les développer ou bien utiliser ceux mis à votre disposition par la communauté via le "Package Management" :

Les snippets 2/5

Pour notre projet, nous allons télécharger "getResource", un Snippet, dont le but est de parcourir une arborescence de ressources et de "lister" celles-ci :

Les snippets 3/5

Les snippets 4/5

Les snippets 5/5

Notre Template invoque le snippet getResources ainsi :



Ackwa en quelques mots...

  • Développement Web
  • Sites, Intranet & Applications
  • Formations
  • Membre fondateur de Centre & TIC
  • MODX Ambassador & Professional
  • En savoir plus : Ackwa.fr et @ackwa

Un CMS permet...

  • ›De publier des contenus multimédia : texte, image, video...
  • De gérer le cycle de vie de ces contenus
  • ›De dissocier le contenu du site de son apparence
  • ›De créer de nouveaux contenus rapidement
  • ›De gérer les rôles et permissions des utilisateurs
  • ›Une mise à jour "simple" sans connaissance technique
  • Une optimisation du référencement...

Vitrine

Centre & TIC

MODX, c'est quoi ?

  • Une plateforme de gestion de contenu et un framework (CMF)
  • Première release en 2004/05
  • Deux versions : Evolution / Revolution
  • Environnement PHP, MySQL ou SQL Server 2008
  • Linux, Windows, OSX
  • >500.000 téléchargements depuis 2010
  • >100.000 sites sous MODX
  • Public : Professionnels de la création

Romain Tripault...

  • Freelance ("MODX-clusif" depuis 2009)
  • Traducteur (Revolution)
  • MODX Ambassador
  • Contributeur au core
  • Développeur de composants

Il ne nous reste plus qu'a créer le modèle d'affichage des ressources nommé ici RevealSlide.

Les chunks 1/2

Les Chunks sont des morceaux de code HTML, Texte, JS...

Les chunks 2/2

Dans notre cas, ce Chunk, permettra l'affichage des différents slides extrait via getResources. Télécharger le : RevealSlide.tpl :


<!-- Reveal Slide : #[[+id]] -->
<section id="slide-[[+id]]">
    <h2>[[+pagetitle]]</h2>
    [[+content]]
</section>

A notre l'usage du + et non du * pour l'accès aux propriétés, des documents extraits par getResources.

Un peu de contenu...

Ajoutons quelques slides pour meubler notre démonstration. Ce sont des "ressources filles" de notre présentation, qui se transforme ainsi en "conteneur"..

Un dernier test...

Les Templates Variables (TV) 1/6

Les "Template variables" sont des propriétés personnalisées qui seront associées à un modèle. Elles permettent d'étendre à loisir les propriétés d'une Ressource. Elles peuvent être de différentes types :

  • Text,
  • Textarea,
  • Nombre, Date, E-mail, URL
  • Checkbox, Radio
  • Select (simple ou multiple)
  • Images...

Les Templates Variables (TV) 2/6

Les Templates Variables (TV) 3/6

Télécharger les valeurs du TV : RevealTheme.txt

Les Templates Variables (TV) 4/6

Les Templates Variables (TV) 5/6

Les Templates Variables (TV) 6/6

Notre "Template" exploite ce TV pour changer le thème de la présentation :


...
    Reveal.initialize({
        controls: true,
        progress: true,
        history: true,
        center: true,

        theme: Reveal.getQueryHash().theme || '[[*revealTheme]]', 
....

Quelques composants

MODX est largement extensible, grâce à des composants produits et validés par la communauté (>400). Parmi ceux-ci :

  • getResources : Pour lister des pages, et autres ressources
  • Wayfinder :  Pour créer des menu, des sitemap...
  • MailChimpx : Interface avec les API Mailchimp
  • SimpleSearch : Pour intégrer un moteur de recherche
  • FormIt : Pour gérer les formulaires
  • Et bien d'autres...

API

L'API MODX basé sur xPDO permet de développer ses propres composants, pluggin, snippet...


$page = $modx->getObject('modResource', 555);
$output = $page->get('pagetitle');

Quelques exemples

  • Un site "vitrine" : Centre & TIC
  • Un site "corporate" : CHU de Tours
  • Un site "évènementiel" : Javerdat
  • Un site e-commerce : Antigel
  • Un Intranet / Extranet :
  • Un application web :
  • Une présentation "en ligne" : WST9

Vitrine

Centre & TIC

Evènementiel

Javerdat

e-commerce

Antigel

Corporate

CHU de Tours

Extranet

Extranet

Application web

Application web : gestion de congés

THE END!

Merci de votre attention...

Gildas NOËL (@ackwa)
http://slides.ackwa.fr/wst9