Une intégration de CMS surréaliste de 15 minutes

Vous avez déjà construit votre site Web, mais comment allez-vous le maintenir? Dans ce tutoriel, vous apprendrez à intégrer votre site Web à un CMS surréaliste en moins de 15 minutes. Nous allons passer en revue quelques-uns des "pièges" et vous faire éditer pratiquement n'importe quel site web statique en un rien de temps.

Vue d'ensemble

Vous vous demandez probablement comment intégrer tout votre site Web avec un CMS en seulement 15 minutes. La vérité est que, en raison de la tendance récente aux systèmes de gestion de contenu "allégés", il devient plus facile que jamais de mettre en place des sites Web statiques de petite ou moyenne taille.

Qu'est-ce qu'un CMS léger? Dans l'intérêt de ce didacticiel, je le définis comme un système de gestion de contenu simple à utiliser et non intrusif que vous n'avez pas à installer. La bonne chose à propos de ces systèmes est que vous n'avez même pas à les héberger vous-même, raison pour laquelle l'intégration prend très peu de temps.

Une poignée de ces produits CMS sont actuellement disponibles, notamment CushyCMS, Pagelime et SimpleCMS. La plupart de ces systèmes fonctionnent sur le même principe de base - vous ajoutez classe = "quelque chose" à presque tous les éléments HTML, reliez votre site Web à leur système, et vous avez terminé. Le meilleur de tous, chacun de ces systèmes offrent une version gratuite.

Bien que chaque produit de CMS léger ait ses avantages et ses inconvénients, j'ai choisi de travailler avec le CMS surréaliste en raison de leur vaste ensemble de fonctionnalités et de leur interface simple. Vous verrez exactement ce que je veux dire dans un instant, mais en attendant, voici le processus général d'intégration avec n'importe quel CMS léger:

Créez votre site web
Liez-le au CMS
Activer les pages Web
Ajouter un ou plusieurs éditeurs
Commencer l'édition

Juste pour vous familiariser avec l'outil avec lequel nous allons travailler, voici un aperçu de l'écran de modification de pages Web de Surreal CMS:

Considérations sur la conception

Avant de commencer à travailler avec un CMS léger, il est toujours bon de penser à des choses telles que le codage de caractères et la façon dont vous créez un lien vers des images et d'autres ressources. Surreal CMS préfère que vous utilisiez le codage de caractères UTF-8, qui est aussi simple que d’ajouter la balise méta suivante à la section de chaque page Web:

Il est également important de créer des liens vers des documents, des images et d'autres ressources de manière à ce que le système de gestion de contenu puisse comprendre. Le système de gestion de contenu surréaliste fonctionne mieux lorsque vous utilisez un lien relatif à la racine ou absolu:

 ……

La dernière chose à considérer avant de relier votre site Web à un CMS surréaliste est probablement le placement de vos régions de contenu. Voici un excellent exemple de page Web très basique comportant un menu de navigation, une barre latérale et une zone de contenu principale:

    Exemple de page Web        Example.com
 
   
   Contenu de la barre latérale ici
 
  Votre contenu ici
 
 
  © Example.com

Vous avez peut-être remarqué que j'ai ajouté éditable classes dans la barre latérale et dans la région de contenu principale. Voici comment le CMS sait quelles sections de votre page il devrait vous permettre d’éditer. Vous pouvez ajouter le éditable classe à presque n’importe quelle balise HTML, et vous pouvez en avoir autant que vous le souhaitez sur chaque page.

Une autre chose que vous avez peut-être remarquée est que la navigation est incluse dans un fichier séparé via PHP. Surreal CMS vous permet de travailler avec des fichiers inclus comme celui-ci afin que vous puissiez mettre à jour la navigation de l'ensemble de votre site sans avoir à éditer chaque page individuellement.

Une fois que vous avez préparé vos pages et configuré les régions modifiables, vous serez prêt à intégrer votre site Web à un CMS surréaliste..

Ajout de votre site Web au CMS

Surreal CMS propose des comptes gratuits et payants. Le compte gratuit a très peu de restrictions, et sera plus que suffisant pour les besoins de ce tutoriel. Il suffit de visiter leur site Web et créer un compte gratuit.

Une fois votre compte créé, connectez-vous au CMS à l'adresse http://edit-content.com/. C'est la passerelle vers l'application Surreal CMS.

Maintenant que vous êtes dedans, sélectionnez le bouton qui dit Ajouter un site web. Voici le formulaire que vous verrez:

Entrez l'URL de votre site Web, votre serveur (généralement ftp.votre-domaine.com), votre nom d'utilisateur FTP et votre mot de passe FTP. Vous pouvez vérifier que vous avez tout saisi correctement en cliquant sur Test de connexion.

Pour la racine du site Web, il est préférable de cliquer sur le bouton Feuilleter bouton et utiliser l'outil de navigation. Essentiellement, la racine de votre site Web sera le dossier contenant votre page d'accueil.. Il est important que ce dossier soit le dossier contenant votre page d'accueil afin que le CMS puisse correctement mapper les URL vers des images et d'autres fichiers..

Si vous souhaitez spécifier des chemins personnalisés pour les documents, les images et les fichiers multimédias, sélectionnez le Avancée option. Lorsque vous définissez des chemins personnalisés, il indique au CMS où les autres personnes qui modifient votre site Web sont autorisées à télécharger des fichiers. Pour l'instant, vous pouvez laisser ces champs vides.

Activer vos pages Web

Maintenant que votre site Web a été ajouté au CMS, l'étape suivante consiste à activer vos pages Web. Dans d'autres produits CMS légers, cela peut être un peu fastidieux, mais Surreal CMS possède une fonctionnalité d'analyse intéressante qui active automatiquement les pages Web en un seul clic..

Pour commencer à activer les pages, sélectionnez votre site Web dans la liste:

Ensuite, sélectionnez Activer les pages Web. La boîte de dialogue suivante apparaîtra:

Sélectionnez la ou les pages que vous souhaitez pouvoir modifier dans le CMS. Au fur et à mesure que vous les sélectionnez, ils apparaîtront un à un en arrière-plan. En tant que raccourci, vous pouvez accéder à n’importe quel répertoire de votre site Web et cliquer sur Rechercher les pages modifiables. Cela indiquera au CMS d’activer toute page du répertoire en cours comportant un class = "editable" attribuer en elle. Lorsque vous avez terminé, sélectionnez Terminé.

Par défaut, chaque page que vous activez utilise le de la page comme une étiquette. Vous pouvez facilement changer cela en quelque chose de plus convivial pour le CMS en cliquant sur <b>Editer le libellé</b>. Par exemple, vous pouvez changer l’étiquette pour <b>index.php</b> lire "Homepage" et l'étiquette pour <b>nav.php</b> lire "Navigation".</p> <hr> <h2>Mise à jour de votre contenu</h2> <p> Croyez-le ou non, le plus dur est passé. Maintenant, il ne reste plus qu’à y entrer et à éditer du contenu. Une des raisons pour lesquelles j'aime tant le CMS surréaliste est qu'il simplifie la majeure partie de la configuration. Cela dit, passons à l'édition de contenu.</p> <p> Après avoir activé une ou plusieurs pages Web, l'étape suivante consiste à commencer la modification. Sélectionnez simplement l'une des pages que vous avez activées en cliquant sur l'étiquette de la page appropriée. Cela vous mènera à l'éditeur de pages Web, où vous passerez la plupart de votre temps à utiliser ce formidable CMS..</p> <p> Dans l'éditeur de pages Web, vous verrez quatre onglets:</p> <ul> <li> <b>Contenu</b> - C'est ici que se trouvent toutes vos régions de contenu..</li> <li> <b>Propriétés</b> - Vous pouvez modifier le titre de la page, les mots-clés et la description ici.</li> <li> <b>L'histoire</b> - Affichez chaque révision de cette page publiée jusqu'à 90 jours..</li> <li> <b>Rédacteurs</b> - Voir une liste de tous les éditeurs ayant accès à la page.</li> </ul> <p> À l'intérieur de la <b>Contenu</b> onglet, en supposant que votre page comporte au moins une région modifiable, vous verrez quelque chose comme ceci:</p> <img src="//accentsconagua.com/img/images_27_3/a-15-minute-surreal-cms-integration_6.jpg"> <p> Cet exemple particulier comprend les deux régions modifiables dont nous avons parlé plus tôt: <b>barre latérale</b> et <b>contenu principal</b>. Vous remarquerez que le CMS a converti les ID minuscules séparés par des tirets bas en étiquettes Camel Case, séparées par des espaces, pour des raisons esthétiques. Si vous avez plusieurs régions modifiables sur une page, vous pouvez basculer entre elles en cliquant sur le bouton approprié..</p> <p> À ce stade, l'édition fonctionne de la même manière que dans de nombreux autres systèmes de gestion de contenu et applications de traitement de texte. Vous pouvez formater du texte, modifier l'alignement, insérer des images, des listes, etc. Surreal CMS dispose même d'un gestionnaire de fichiers intégré qui vous permet d'afficher, de télécharger, de renommer et de supprimer des fichiers et des dossiers. Pour couronner le tout, il existe également un éditeur d'images qui vous permet de redimensionner, de rogner, de faire pivoter et d'inverser facilement les images..</p> <p> En fonction du type d'élément que vous ajoutez <b>class = "editable"</b> Surreal CMS fournira un outil d’édition approprié. A titre d'exemple, voici ce qu'un éditable <img> ressemble à:</p> <img src="//accentsconagua.com/img/images_27_3/a-15-minute-surreal-cms-integration_7.jpg"> <p> le <b>Éditer l'image</b> Le bouton lance l'éditeur d'images dont j'ai parlé plus tôt. C'est vraiment facile à utiliser, vous ne devriez donc pas avoir de problème à manipuler vos photos. Voici à quoi ça ressemble:</p> <img src="//accentsconagua.com/img/images_27_3/a-15-minute-surreal-cms-integration_8.jpg"> <p> Une fois vos modifications terminées, vous pouvez prévisualiser vos modifications en cliquant sur <b>Aperçu</b>. Une nouvelle fenêtre s'ouvrira et vous verrez votre page <i>exactement</i> comme il apparaîtra lors de la publication. Bien sûr, si vous êtes satisfait de vos modifications, cliquez sur <b>Publier</b> les sauvera sur votre site web.</p> <hr> <h2>Autoriser d'autres personnes à modifier votre site Web</h2> <p> Maintenant que vous savez comment configurer votre site Web et le modifier vous-même, ne serait-il pas agréable de permettre à d'autres personnes d'accéder également? Ceci est particulièrement utile pour les concepteurs qui souhaitent donner aux clients un accès limité pour éditer leurs propres sites Web..</p> <p> Tout d'abord, sélectionnez le <b>Rédacteurs</b> onglet de n'importe où dans le CMS et cliquez sur <b>Ajouter un éditeur</b>. Le formulaire suivant apparaîtra:</p> <img src="//accentsconagua.com/img/images_27_3/a-15-minute-surreal-cms-integration_9.jpg"> <p> Il vous suffit de renseigner le nom et l'adresse électronique de la personne pour commencer. Ensuite, sélectionnez le ou les sites Web auxquels il / elle devrait être assigné. Si vous voulez, vous pouvez ouvrir le <b>Avancée</b> section et autoriser l’éditeur à cloner des pages, à supprimer des pages et à modifier les propriétés de la page. Vous pouvez également activer ou désactiver chaque option de la barre d'outils de l'éditeur de texte enrichi à partir d'ici..</p> <p> Une fois que vous avez entré toutes les informations nécessaires, sélectionnez <b>Ajouter un éditeur</b> et l'utilisateur sera ajouté au CMS. Par défaut, un email leur est envoyé contenant leur nom d'utilisateur et leur mot de passe. Vous pouvez le désactiver, cependant, et le CMS vous montrera son mot de passe temporaire pour que vous puissiez leur fournir manuellement.</p> <p> Il y a quelques choses que vous devez savoir sur les comptes d'éditeur. Tout d'abord, ils n'ont pas accès à <i>tout</i> que vous faites en tant que concepteur - les éditeurs ont uniquement accès aux sites Web et aux autorisations que vous leur attribuez. Deuxièmement, les éditeurs n'ont pas accès à des éléments tels que l'édition de code source d'une page complète et l'outil Tidy, dont nous parlerons dans un instant. La meilleure façon de voir la différence entre un concepteur et un compte d'éditeur est de créer vous-même un éditeur de test avec une adresse électronique alternative..</p> <p> Avant de poursuivre, vous devez connaître une autre fonctionnalité concernant les éditeurs. Vous pouvez les empêcher de modifier des pages spécifiques pour chaque utilisateur. Ouvrez simplement une page pour la modifier et sélectionnez le <b>Rédacteurs</b> languette. À côté de votre éditeur sera une option pour <b>Désactiver</b> édition. En cliquant sur ce bouton, vous évitez que cet utilisateur ne modifie la page en cours..</p> <img src="//accentsconagua.com/img/images_27_3/a-15-minute-surreal-cms-integration_10.jpg"> <hr> <h2>Autres fonctionnalités pratiques</h2> <p> Jusqu'à présent, nous avons tout couvert, de l'intégration du CMS surréaliste à votre site Web, en passant par les pages d'édition. Le plaisir ne s'arrête pas là, cependant. Voici une liste de fonctionnalités dont vous pouvez tirer parti une fois que vous avez commencé à explorer plus en profondeur ce que propose le CMS surréaliste:</p> <h3>Pages Web de clonage</h3> <p> Vous pouvez créer de nouvelles pages en dupliquant celles existantes. Cela est particulièrement utile car vous pouvez configurer une ou plusieurs pages de modèle vierges et permettre à vos utilisateurs de créer les pages à leur guise. Vous pouvez également activer ou désactiver cette option pour chaque utilisateur, afin que des éditeurs plus expérimentés puissent mieux contrôler le site..</p> <h3>Mise en forme de l'éditeur de texte enrichi</h3> <p> Appliquez des styles de votre site Web à l'éditeur de texte enrichi pour donner aux utilisateurs un aspect similaire au site Web. Pour accéder à cette fonctionnalité, sélectionnez le <b>Sites Internet</b> onglet de n'importe où dans le CMS et choisissez un site Web. Vous verrez un bouton intitulé <b>Changer les styles de l'éditeur</b>.</p> <h3>Modification de fichiers CSS, JavaScript et XML</h3> <p> Vous pouvez activer les feuilles de style, les scripts et les fichiers XML comme n'importe quelle autre page Web. Bien sûr, vous allez modifier le code source brut. Vous voudrez peut-être empêcher les utilisateurs inexpérimentés d'accéder à ces types de fichiers si vous les activez..</p> <h3>Modification du code source HTML complet</h3> <p> Lorsque vous modifiez une page Web, vous remarquerez un bouton intitulé "Modifier les régions de contenu". Cela vous permet en fait d'accéder au code source complet de la page. Les éditeurs n'ont pas accès à cet outil.</p> <h3>Réparer le code HTML malpropre avec Tidy</h3> <p> Surreal CMS a un outil intégré qui utilise la bibliothèque HTML Tidy. Cela est utile pour corriger les balises imbriquées ou le code HTML non valide qui peut entraîner des problèmes lors de la modification. Vous pouvez accéder à cet outil à partir de la page d'édition du code source complet..</p> <h3>Affichage de l'activité de l'éditeur</h3> <p> Vous pouvez voir ce que vos rédacteurs ont préparé! Cela inclut les pages auxquelles ils ont accédé, la date à laquelle ils ont été modifiés et même les heures auxquelles ils se sont connectés au CMS. Pour afficher ces informations, sélectionnez le <b>Rédacteurs</b> onglet de n'importe où dans le CMS et choisissez un éditeur. Cliquez sur le nom des éditeurs pour voir leur activité récente.</p> <h3>Caractéristiques Pro</h3> <p> Surreal CMS est gratuit pour trois sites Web. Après cela, ils vous demandent de payer 25 USD par mois pour leur service payant, mais les comptes Pro ont également quelques fonctionnalités intéressantes. Par exemple, vous pouvez accéder au CMS à partir de votre propre domaine ou sous-domaine (par exemple, cms.votre-domaine.com)..</p> <p> Avec un compte Pro, vous pouvez également télécharger votre propre logo et personnaliser le thème, ce qui est idéal pour les concepteurs qui souhaitent utiliser le CMS comme solution pour leurs clients. Voici un exemple de ce à quoi vous pouvez vous attendre lorsque vous personnalisez le CMS:</p> <img src="//accentsconagua.com/img/images_27_3/a-15-minute-surreal-cms-integration_11.jpg"> <hr> <h2>Ressources supplémentaires</h2> <p> Maintenant que vous connaissez toutes les bases (et quelques astuces avancées!), Voici quelques ressources utiles pour utiliser le CMS surréaliste:</p> <ul> <li>CMS surréaliste</li> <li>Page d'inscription</li> <li>Documentation CMS</li> <li>Questions fréquemment posées</li> <li>Programme d'affiliation surréaliste CMS</li> </ul> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:inline-block;width:580px;height:400px" data-ad-client="ca-pub-3810161443300697" data-ad-slot="9434875811"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div class="h-alltags"> <a href="articles/code">Code</a> </div> </div> </div> </div> </div> <div class="next_posts clearfix"> <div class="n_post"> <div class="next_posts-h1 left_nh1"><a href="/articles/design/a-20-minute-intro-to-typography-basics.html">Une introduction de 20 minutes aux bases de la typographie</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_27_6/a-20-minute-intro-to-typography-basics_8.jpg');"></div> </div> <div class="n_post"> <div class="next_posts-h1 right_nh1"><a href="/articles/photography/a-12-step-beginners-guide-to-iphoneography.html">Guide de l'iPhoneographie pour débutants en 12 étapes</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_21/a-12-step-beginners-guide-to-iphoneography_13.jpg');"></div> </div> </div> <footer> <div class="container"> <div class="footer-langs"> <ul class="site-langs-list"> <li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li> <li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li> <li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li> <li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li> <li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li> <li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li> <li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li> <li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li> </ul> </div> <div class="h-block"><a href="/">fr.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Informations intéressantes et conseils utiles sur la programmation. Développement de sites Web, conception de sites Web et développement Web. Tutoriels Photoshop. Création de jeux informatiques et d'applications mobiles. Devenez un programmeur professionnel à partir de zéro. </div> </div> </footer> <div class="search"> <img class="searchico" src="//accentsconagua.com/img/search.svg" alt=""> </div> <div class="modal"> <div class="modal-content"> <span class="close-button">×</span> <input class="searchmain" type="text" id="search-input" placeholder="Chercher..."> <ul class="searchli" id="results-container"></ul> </div> </div> <link rel="stylesheet" href="css/flags.css"> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script src="js/scripts.min.js"></script> <script src="js/common.js"></script> <link rel="stylesheet" href="css/fontawesome-all.min.css"> <script> var modal = document.querySelector(".modal"); var trigger = document.querySelector(".search"); var closeButton = document.querySelector(".close-button"); function toggleModal() { modal.classList.toggle("show-modal"); } function windowOnClick(event) { if (event.target === modal) { toggleModal(); } } trigger.addEventListener("click", toggleModal); closeButton.addEventListener("click", toggleModal); window.addEventListener("click", windowOnClick); </script> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <script src="jquery.unveil2.min.js"></script> <script> $('img').unveil(); </script> </body> </html>