Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Togu CMS
Similaire à Togu CMS (20)
Dernier
Dernier (20)
Togu CMS
- 1. TheWYSIWYG in no time!
- 2. Backend based CMS Time wasted by contributors Lots of forms to fill, need to preview each time WYSIWYG Time wasted by developers Often hard to customize for advanced features
- 3. Togu is aWYSIWIG Content Management Framework based on HTML 5 Support for Desktop and Mobile devices Native support for Responsive design websites Large library of production-ready Components
- 4. Easy contents creation WYSIWYG editing Fast to develop and customize Forget about the backend development Write the frontend code and you are done
- 5. In place text editing Insert and modify resources with Drag & Drop Customize the website aspect in real time Access translated contents in one click History of modifications available in one click Adapt contents depending on the device or the location Preview the website in mobile devices via an integrated simulator
- 7. Two-way data binding between the model and the view The views are plain Mustache templates with custom directives No more need to use jQuery Selectors Events binding extremely simple Dependency injection of Services into the Controllers Inspired by Polymer /AngularJS
- 8. The server acts as a Data Provider Delivers HTML just for the first Request, rendering the template to be SEO compliant RESTWebServices expose the website data Completely agnostic from the Frontend design No need to write a line of code in most cases Easy to port to different languages NodeJS / .NET / Java…
- 9. Create the Templates Write the Controllers Define the Data Structure
- 18. Thank you
- 19. Questions?
Notes de l'éditeur
- Aujourd’hui il y a deux types principales de CMS: les CMS classiques, comme Wordpress, Drupal, Joomla, et les CMS WYSIWYG. Les premières sont généralement assez flexibles et simples pour les développeurs, mais risque d’être très compliqués pour les contributeurs et peu ergonomiques, car on n’a pas une aperçu immédiate du contenu. Les deuxièmes ont l’avantage d’une aperçu directe du résultat finale, mais manque de flexibilité pour des interfaces très custom, comme de plus en plus demandé par le HTML5.
- Togu est un Content Management Framework qui aide le développement de sites web administrables en WYSIWYG. Il est de nature responsive et il met à disposition une grande librairie de composants optimisés prêts à être utilisés en production.
- Togu a comme objectif de simplifier la création de sites web en HTML 5 avec une interface d’édition WYSIWYG. Le développeur n’aura pas besoin de modifier le backend ou l’interface d’administration, car assez génériques pour s’adapter à tous les usages. L’effort, parfois requis, est de remettre en forme le composant édité. Ceci se fait en appelant les mêmes fonctionnes écrites pour mettre en forme le composant, donc une tache très simple et rapide à mettre en place.
- Parmi les caractéristiques de Togu, il y a l’édition du texte en temps réel, la possibilité d’ajouter et changer images, vidéos et blocs de contenu en Drag & Drop. Tout type de modification faite au site est immédiatement visualisable par l’éditeur, car le site s’adapte en temps réel. L’éditeur a la possibilité d’accéder simplement aux versions traduites de la même page, et d’accéder aux différentes versions de la page en temps réel en quelque click. Il peut également visualiser les contenus sur tablette et téléphone par le biais d’un simulateur intégré et les adapter selon le type de device, ou de géolocalisation.
- Togu se base sur les Frameworks suivants: ExtJS Le Framework utilisé pour créer l’interface d’administration, il met à disposition des libraries robustes pour créer toutes les interfaces nécessaires à la gestion d’un CMS avancé ExtCore Utilisé dans le Frontend, permet de faire l’héritage JavaScript de classe de manière très propre et de créer des Objets JavaScript observables jQuery Permet d’avoir accès à une quantité énorme de plugins et de simplifier l’accès au DOM Symfony L’un des Frameworks Backend plus populaires, permet d’abstraire le modèle de données coté serveur, de connecter simplement Togu à des data sources externes et d’avoir une gestion des droits robuste.
- L’architecture du Frontend de Togu est MVC. Son data binding bidirectionnel entre le modèle et la vue permet de simplifier extrêmement le développement, car pour modifier l’aspect de la vue il suffit d’agir sur le modèle de données et vice-versa, une modification de la vue sera répercuté immédiatement sur le modèle. Les vues sont des fichiers HTML5 qui utilisent la syntaxe des Mustaches pour les variables, on utilise des attributs pour spécifier les fonctionnalités des nœuds. A différence de Frameworks comme AngularJS ou Polymer, la syntaxe expressément simple est faite pour pouvoir obtenir le même rendu coté Backend que Frontend. Ceci permet une indexation correcte par les moteurs de recherche. On peut assigner des nœuds DOM au contrôleur et binder des évènements de manière très simple, grâce aux directives. Injection de service dans les controleurs permet d’avoir un couplage faible entre les Controleurs et les Services. Les principes de développement sont inspirés par les Frameworks de Google Polymer et AngularJS, malgré une implémentation « from scratch » du Framework.
- Le Backend de Togu a été conçu pour agir comme Data Provider: il livre qu’au navigateur un fichier HTML qui contient le DOM nécessaire à l’indexation par les moteurs de recherche. Le reste des communications est fait par des requêtes AJAX via des Webservices REST. Étant donné que le Backend doit renvoyer que des données et ne pas prendre en charge l’affichage des interfaces d’administration et du Frontend, sa logique est très simple et le nombre de lignes de code nécessaire à son implémentation très réduit. Ceci fait que pour des sites éditoriaux souvent il n’est pas nécessaire d’écrire du code Backend ou ceci est très limité. Un autre avantage de ce choix est que le Backend peut être porté dans des autres langages de programmation, comme NodeJS, .NET, Java
- Le workflow de développent de Togu est composé de trois étapes principales: Création des fichiers de Template Définition des structures de données Écriture du contrôleur (si nécessaire)
- Comme dit en précédence, la syntaxe de Togu est du type Mustache, les variables sont écrites entre des accolades. À l’aide des directives, on définit le nom du Template, on assigne des nœuds au controleur (cmf-far) et on bind des évenments (cmf-on) On verra dans la suite comment les utiliser dans les controleurs
- Ici le modèle de données qui définit les types des variables et nous permet de créer les interfaces d’administration pour un composant donné. Chaque champ a son nom (ce qu’il est affiché dans le Template), le type, sa valeur par default, et les paramètres pour générer l’interface d’administration. Son format peut sembler un peu compliqué et verbeux, c’est pour ça que dans la roadmap du projet il y a le développement d’une GUI en ExtJS pour le paramétrer et gagner du temps.
- Ceci est le contrôleur pour le Template défini avant. Ici on peut voir comment fonctionne l’injection de dépendance, via le paramètre inject, le bind des évènements (via le paramètre listen), comment affecter les valeurs du modèle (this.data.set) et comment accéder aux éléments du DOM (this.$)
- Ceci est l’interface d’administration de Togu pour un site fait pour un atelier, on peut trouver le site sur www.onomatopees.fr. Sur la gauche on peut voir la liste des pages du site web triés par catégorie, sur la droite la liste des composants de la page et en bas leur propriétés. On peut faire Drag & Drop des nœuds de l’arbre des composants pour en changer l’ordre dans la grille. Pour modifier largeur et hauteur des blocs, changer lien et image de fond, il suffit de changer les valeurs dans le panneau Properties. On peut enfin changer les textes en utilisant les “Properties” ou bien en cliquant et écrivant directement sur la page.
- Le composant en surbrillance est le composant qu’on a montré dans l’exemple précèdent. Le code qu’on a écrit nous suffit pour pouvoir faire Drag & Drop d’un lien de la partie gauche et le déposer directement dans le composant pour le changer à la volée.
- Le même Drag & Drop peut être effectué depuis la bibliothèque d’images pour changer l’image de fond. On peut apprécier la structure à arborescence des images, qui permet d’en trier une grosse quantité.
- L’éditeur textuel de données nous permet d’accéder à la liste de tous les composants qui sont stockes dans la base de données, d’en inspecter et d’éditer leurs propriétés. Cette vue est très utile si on veut gérer un catalogue de produits, par exemple.
- Et comme pour le reste elle nous permet de faire Drag & Drop d’un projet sur un autre pour le changer sur la page.