Een 15 minuten durende Surreal CMS-integratie

U hebt uw website al gebouwd, maar hoe gaat u deze onderhouden? In deze tutorial leer je hoe je je website met Surreal CMS in minder dan 15 minuten kunt integreren. We bespreken een aantal van de "gotchas" en laten je vrijwel geen enkele statische website bewerken in amper geen tijd.

Overzicht

Je vraagt je waarschijnlijk af hoe je je hele website in slechts 15 minuten met een CMS zou kunnen integreren. De waarheid is dat, dankzij de recente trend van "light" content management systemen, het steeds gemakkelijker wordt om kleine tot middelgrote statische websites in gebruik te nemen..

Wat is een licht CMS? In het belang van deze zelfstudie definieer ik het als een eenvoudig te gebruiken, onopvallend inhoudbeheersysteem dat u niet hoeft te installeren. Het leuke van deze systemen is dat je ze zelf niet hoeft te hosten. Daarom kost integratie weinig tijd.

Er zijn in feite een handvol van deze CMS-producten beschikbaar, waaronder CushyCMS, Pagelime en SimpleCMS. De meeste van deze systemen werken op hetzelfde basisprincipe, voegt u eraan toe class = "iets" naar bijna elk HTML-element, linkt u uw website naar hun systeem en bent u klaar. Het beste van alles is dat elk van deze systemen een gratis versie biedt.

Hoewel elk licht CMS-product zijn voor- en nadelen heeft, heb ik ervoor gekozen om met Surreal CMS te werken vanwege hun uitgebreide functies en eenvoudige interface. U zult precies zien wat ik in een ogenblik bedoel, maar in de tussentijd is hier het algemene integratieproces met elk licht CMS:

Maak uw website
Koppel hem aan de CMS
Schakel webpagina's in
Voeg een of meer editors toe
Begin met bewerken

Om u vertrouwd te maken met de tool waarmee we gaan werken, volgt hier een korte blik op het webpaginabewerkingsscherm van Surreal CMS:

Ontwerp Overwegingen

Voordat u met een licht CMS gaat werken, is het altijd goed om na te denken over zaken als het coderen van tekens en de manier waarop u naar afbeeldingen en andere bronnen linkt. Surreal CMS geeft er de voorkeur aan dat u UTF-8-tekencodering gebruikt, wat net zo eenvoudig is als het toevoegen van de volgende metatag aan de sectie van elke webpagina:

Het is ook belangrijk dat u een koppeling maakt naar documenten, afbeeldingen en andere bronnen op een manier die het CMS kan begrijpen. Surreal CMS werkt het beste wanneer u root-relatieve koppeling of absolute koppeling gebruikt:

 ... ...

Het laatste maar waarschijnlijk belangrijkste om te overwegen voordat u uw website linkt aan Surreal CMS is de plaatsing van uw inhoudsregio's. Hier is een uitstekend voorbeeld van een zeer eenvoudige webpagina met een navigatiemenu, een zijbalk en een hoofdinhoudsgebied:

    Voorbeeldwebpagina        Example.com
 
   
   Zijbalkinhoud hier
 
  Uw inhoud hier
 
 
  © Example.com

Je hebt misschien gemerkt dat ik het heb toegevoegd bewerkbare klassen naar de zijbalk en het hoofdinhoudsgebied. Op deze manier weet het CMS welke delen van uw pagina u moeten bewerken. U kunt de bewerkbare tot bijna elke HTML-tag, en u kunt zoveel als u wilt op elke pagina.

Iets anders dat je misschien gemerkt hebt, is dat de navigatie via PHP uit een afzonderlijk bestand wordt opgenomen. Met Surreal CMS kunt u werken met ingesloten bestanden, zodat u de hele navigatie van uw site kunt bijwerken zonder elke pagina afzonderlijk te hoeven bewerken.

Nadat u uw pagina's heeft voorbereid en bewerkbare regio's heeft ingesteld, bent u klaar om uw website te integreren met Surreal CMS.

Uw website toevoegen aan de CMS

Surreal CMS biedt zowel gratis als betaalde accounts. Het gratis account heeft zeer weinig beperkingen en zal meer dan voldoende zijn voor deze tutorial. Ga gewoon naar hun website en maak een gratis account aan.

Zodra uw account is aangemaakt, meldt u zich aan bij de CMS op http://edit-content.com/. Dit is de toegangspoort tot de Surreal CMS-applicatie.

Nu dat je er bent, selecteer je de knop die zegt Voeg een website toe. Hier is de vorm die u zult zien:

Voer de URL van uw website, server (meestal ftp.uw-domein.com), FTP-gebruikersnaam en FTP-wachtwoord in. U kunt controleren of u alles correct hebt getypt door op te klikken Test verbinding.

Voor de Website Root, is het het beste om op te klikken Blader knop en gebruik de bladerfunctie. In essentie zal de hoofdmap van uw website de map zijn die uw startpagina bevat. Het is belangrijk dat deze map de eigenlijke map is met uw startpagina, zodat de CMS URL's naar afbeeldingen en andere bestanden correct kan toewijzen.

Als u aangepaste paden voor documenten, afbeeldingen en mediabestanden wilt opgeven, selecteert u de gevorderd keuze. Wanneer u aangepaste paden instelt, wordt aan de CMS verteld waar andere personen die uw website bewerken, toestemming hebben om bestanden te uploaden. Voorlopig kunt u deze leeg laten.

Uw webpagina's inschakelen

Nu uw website is toegevoegd aan de CMS, is de volgende stap om uw webpagina's in te schakelen. In andere lichte CMS-producten kan dit een beetje belastend zijn voor uw tijd, maar Surreal CMS heeft een mooie scanfunctie waarmee webpagina's automatisch met slechts één muisklik worden ingeschakeld.

Om uw pagina's te activeren, selecteert u uw website in de lijst:

Selecteer vervolgens Schakel webpagina's in. Het volgende dialoogvenster verschijnt:

Selecteer de pagina of pagina's die u in de CMS wilt bewerken. Terwijl u ze selecteert, verschijnen ze één voor één op de achtergrond. Als een snelkoppeling kunt u naar elke map op uw website navigeren en klikken Zoeken naar bewerkbare pagina's. Dit zal de CMS vertellen om elke pagina in de huidige map met een a in te schakelen class = "bewerkbaar" attribuut erin. Selecteer als u klaar bent Gedaan.

Standaard gebruikt elke pagina die u inschakelt de van de pagina als een label. U kunt dit eenvoudig wijzigen in iets meer CMS-vriendelijk door op te klikken <b>Label bewerken</b>. U kunt bijvoorbeeld het label wijzigen <b>index.php</b> om "Homepage" en het label voor te lezen <b>nav.php</b> om "Navigatie" te lezen.</p> <hr> <h2>Uw inhoud bijwerken</h2> <p> Geloof het of niet, het moeilijke is voorbij. Nu is het gewoon een kwestie van naar binnen gaan en inhoud bewerken. Een deel van de reden waarom ik Surreal CMS zo leuk vind, is dat het de meeste instellingen stroomlijnt. Dat gezegd hebbende, laten we verdergaan met het bewerken van inhoud.</p> <p> Nadat u een of meer webpagina's hebt ingeschakeld, is de volgende stap om te beginnen met bewerken. Selecteer eenvoudig een van de pagina's die u hebt ingeschakeld door op het juiste paginanaam te klikken. Hiermee gaat u naar de webpagina-editor, waar u het grootste deel van uw tijd zult doorbrengen met deze geweldige CMS.</p> <p> In de webpagina-editor ziet u vier tabbladen:</p> <ul> <li> <b>Inhoud</b> - Dit is waar al uw inhoudsregio's te vinden zijn.</li> <li> <b>eigenschappen</b> - U kunt hier de paginatitel, zoekwoorden en beschrijving bewerken.</li> <li> <b>Geschiedenis</b> - Bekijk elke revisie van deze pagina die tot 90 dagen wordt gepubliceerd.</li> <li> <b>Editors</b> - Bekijk een lijst met alle editors die toegang hebben tot de pagina.</li> </ul> <p> Binnenkant van de <b>Inhoud</b> tabblad, ervan uitgaande dat uw pagina ten minste één bewerkbare regio heeft, ziet u ongeveer zoiets als dit:</p> <img src="//accentsconagua.com/img/images_27_3/a-15-minute-surreal-cms-integration_6.jpg"> <p> Dit specifieke voorbeeld heeft de twee bewerkbare regio's waar we eerder over gesproken hebben: <b>zijbalk</b> en <b>belangrijkste inhoud</b>. U zult merken dat de CMS de kleine letters, met een streepjescode gescheiden ID's, heeft omgezet in Camel Case, door spaties gescheiden labels voor esthetiek. Als u meer dan één bewerkbaar gebied op een pagina heeft, kunt u hiertussen schakelen door op de betreffende knop te klikken.</p> <p> Op dit moment werkt bewerken op dezelfde manier als in veel andere contentmanagementsystemen en tekstverwerkingsprogramma's. U kunt tekst opmaken, uitlijning wijzigen, afbeeldingen invoegen, lijsten, enz. Surreal CMS heeft zelfs een ingebouwde bestandsbeheerder waarmee u bestanden en mappen kunt bekijken, uploaden, hernoemen en verwijderen. Als klap op de vuurpijl is er ook een afbeeldingseditor waarmee u afbeeldingen gemakkelijk kunt verkleinen, bijsnijden, roteren en omdraaien.</p> <p> Afhankelijk van het type element dat u toevoegt <b>class = "bewerkbaar"</b> to, biedt Surreal CMS een geschikte bewerkingstool. Als voorbeeld, hier is wat een bewerkbaar <img> lijkt op:</p> <img src="//accentsconagua.com/img/images_27_3/a-15-minute-surreal-cms-integration_7.jpg"> <p> De <b>Bewerk afbeelding</b> knop start de Image Editor waar ik het eerder over had. Het is echt gemakkelijk te gebruiken, dus je zou helemaal geen problemen moeten hebben om je foto's te manipuleren. Hier is hoe het eruit ziet:</p> <img src="//accentsconagua.com/img/images_27_3/a-15-minute-surreal-cms-integration_8.jpg"> <p> Als u klaar bent met bewerken, kunt u een voorbeeld van uw wijzigingen bekijken door op te klikken <b>Voorbeeld</b>. Een nieuw venster wordt geopend en u ziet uw pagina <i>precies</i> zoals het zal verschijnen bij publicatie. Natuurlijk, als u tevreden bent met uw wijzigingen, klikt u op <b>Publiceren</b> zal ze opslaan op uw website.</p> <hr> <h2>Toestaan dat andere mensen uw website kunnen bewerken</h2> <p> Nu je weet hoe je je website moet instellen en zelf kunt bewerken, zou het dan niet fijn zijn om andere mensen ook toegang te geven? Dit is vooral handig voor ontwerpers die hun klanten beperkte toegang willen geven om hun eigen websites te bewerken, en het is eenvoudig in te stellen.</p> <p> Selecteer eerst de <b>Editors</b> tab vanuit elke locatie in de CMS en klik op <b>Voeg een editor toe</b>. Het volgende formulier verschijnt:</p> <img src="//accentsconagua.com/img/images_27_3/a-15-minute-surreal-cms-integration_9.jpg"> <p> Vul gewoon de naam en het e-mailadres van de persoon in om te beginnen. Selecteer vervolgens de website (s) waaraan hij of zij moet worden toegewezen. Als u wilt, kunt u de <b>gevorderd</b> sectie en laat de editor toe om pagina's te klonen, pagina's te verwijderen en pagina-eigenschappen te bewerken. U kunt hier ook elke optie in de rich-text-editorwerkbalk in- of uitschakelen.</p> <p> Nadat u alle benodigde informatie hebt ingevoerd, selecteert u <b>Editor toevoegen</b> en de gebruiker wordt toegevoegd aan de CMS. Standaard wordt een e-mail naar hen verzonden met hun gebruikersnaam en wachtwoord. U kunt dit echter uitschakelen en de CMS zal u hun tijdelijke wachtwoord tonen zodat u ze handmatig kunt opgeven.</p> <p> Er zijn een paar dingen die je moet weten over redactierekeningen. Ten eerste hebben ze geen toegang tot <i>alles</i> dat doet u als ontwerper - editors hebben alleen toegang op basis van de websites en machtigingen die u aan hen toewijst. Ten tweede hebben editors geen toegang tot zaken als het bewerken van broncodes op volledige pagina's en de tool Tidy, waarover we binnenkort zullen praten. De beste manier om te zien wat het verschil is tussen een ontwerper en een editoraccount, is door uzelf een testeditor te maken met een alternatief e-mailadres.</p> <p> Voordat we verder gaan, is er nog een andere functie die u over editors moet kennen. U kunt ze blokkeren om specifieke pagina's per gebruiker te bewerken. Open eenvoudig elke pagina om te bewerken en selecteer de <b>Editors</b> tab. Naast je editor zal een optie zijn om <b>onbruikbaar maken</b> editing. Als u hierop klikt, kan die gebruiker de huidige pagina niet bewerken.</p> <img src="//accentsconagua.com/img/images_27_3/a-15-minute-surreal-cms-integration_10.jpg"> <hr> <h2>Andere handige functies</h2> <p> Tot nu toe hebben we alles behandeld, van het integreren van Surreal CMS met uw website tot het bewerken van pagina's. Het plezier houdt echter niet op. Hier is een lijst met functies waarvan u gebruik kunt maken zodra u dieper op zoek gaat naar wat Surreal CMS biedt:</p> <h3>Klonen van webpagina's</h3> <p> U kunt nieuwe pagina's maken door bestaande te dupliceren. Dit is vooral handig omdat u een of meer lege sjabloonpagina's kunt instellen en uw gebruikers pagina's kunt laten maken zoals ze nodig hebben. U kunt dit ook voor elke gebruiker in- of uitschakelen, zodat ervaren editors meer controle over de site kunnen krijgen.</p> <h3>Styling van de Rich-text Editor</h3> <p> Pas stijlen van uw website toe op de rich-text-editor om gebruikers een vergelijkbare look en gevoel te geven die vergelijkbaar is met de website. Om toegang tot deze functie te krijgen, selecteert u de <b>websites</b> tab vanuit elke plek in de CMS en kies een website. Je ziet een knop met het label <b>Verander bewerkingsstijlen</b>.</p> <h3>CSS-, JavaScript- en XML-bestanden bewerken</h3> <p> U kunt stylesheets, scripts en XML-bestanden inschakelen net als elke andere webpagina. Natuurlijk, je zult ruwe broncode bewerken, dus je zou willen dat onervaren gebruikers toegang krijgen tot dit soort bestanden als je ze inschakelt.</p> <h3>Volledige HTML-broncode bewerken</h3> <p> Terwijl u een webpagina bewerkt, ziet u een knop met het label 'Inhoudsgebieden bewerken'. Hiermee hebt u feitelijk toegang tot de volledige broncode van de pagina. Bewerkers hebben geen toegang tot deze tool.</p> <h3>Het repareren van rommelige HTML-code met Tidy</h3> <p> Surreal CMS heeft een ingebouwde tool die de populaire HTML Tidy-bibliotheek gebruikt. Dit is handig voor het repareren van geneste tags of ongeldige HTML-code die problemen kunnen veroorzaken tijdens het bewerken. U kunt deze tool openen vanuit de volledige broncodebewerkingspagina.</p> <h3>Activiteit van editor bekijken</h3> <p> U kunt zien wat uw editors hebben gedaan! Dit omvat de pagina's die ze hebben bezocht, wanneer ze zijn bewerkt en zelfs op de momenten dat ze zich bij de CMS hebben aangemeld. Selecteer de om deze informatie te bekijken <b>Editors</b> tab vanuit elke plek in de CMS en kies een editor. Klik op de naam van de redactie om hun recente activiteit te zien.</p> <h3>Pro-functies</h3> <p> Surreal CMS is gratis te gebruiken voor maximaal drie websites. Daarna vragen ze je om $ 25 USD per maand te betalen voor hun betaalde service, maar Pro-accounts hebben nog een paar andere leuke functies. U hebt bijvoorbeeld toegang tot de CMS vanuit uw eigen domein of subdomein (dat wil zeggen cms.uw-domein.com).</p> <p> Met een Pro-account kunt u ook uw eigen logo uploaden en het thema aanpassen, wat ideaal is voor ontwerpers die de CMS als een oplossing voor hun klanten willen gebruiken. Hier is een voorbeeld van wat u kunt verwachten wanneer u het CMS als het uwe brandt:</p> <img src="//accentsconagua.com/img/images_27_3/a-15-minute-surreal-cms-integration_11.jpg"> <hr> <h2>Aanvullende bronnen</h2> <p> Nu je alle basisbeginselen kent (en ook enkele geavanceerde tips!), Zijn hier enkele nuttige bronnen voor het werken met Surreal CMS:</p> <ul> <li>Surreal CMS Homepage</li> <li>Inschrijvingspagina</li> <li>CMS-documentatie</li> <li>Veel Gestelde Vragen</li> <li>Surreal CMS Affiliate-programma</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">Introductie tot typografie van 20 minuten</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">Een 12-staps beginnershandleiding voor iPhoneography</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="/">nl.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Interessante informatie en nuttige tips over programmeren. Website ontwikkeling, webdesign en webontwikkeling. Photoshop-zelfstudies. Creatie van computerspellen en mobiele applicaties. Word een volledig professionele programmeur. </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="Zoeken..."> <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>