Un'integrazione CMS surreale di 15 minuti

Hai già creato il tuo sito Web, ma come lo manterrai? In questo tutorial imparerai come integrare il tuo sito web con Surreal CMS in meno di 15 minuti. Analizzeremo alcuni dei "trucchi" e realizzeremo praticamente qualsiasi sito web statico in pochissimo tempo.

Panoramica

Probabilmente ti starai chiedendo come sia possibile integrare l'intero sito Web con un CMS in soli 15 minuti. La verità è che, a causa della recente tendenza dei sistemi di gestione dei contenuti "leggeri", è diventato più facile che mai avere siti Web statici di piccole e medie dimensioni attivi e funzionanti.

Cos'è un CMS leggero? Per il bene di questo tutorial, lo definisco come un sistema di gestione dei contenuti facile da usare e non intrusivo che non è necessario installare. La cosa bella di questi sistemi è che non è nemmeno necessario ospitarli da soli, motivo per cui l'integrazione richiede pochissimo tempo.

Ci sono in realtà pochi prodotti CMS disponibili, inclusi CushyCMS, Pagelime e SimpleCMS. La maggior parte di questi sistemi si basa sullo stesso principio di base - si aggiunge class = "qualcosa" per quasi tutti gli elementi HTML, collega il tuo sito Web al loro sistema e il gioco è fatto. Meglio di tutti, ognuno di questi sistemi offre una versione gratuita.

Anche se ogni prodotto CMS leggero ha i suoi pro e contro, ho scelto di lavorare con Surreal CMS grazie al loro vasto set di funzionalità e all'interfaccia semplice. Vedrai esattamente cosa intendo in un solo istante, ma nel frattempo, ecco il processo generale di integrazione con qualsiasi CMS leggero:

Crea il tuo sito web
Collegalo al CMS
Abilita pagine web
Aggiungi uno o più editor
Inizia la modifica

Solo per familiarizzare con lo strumento con cui lavoreremo, ecco una rapida panoramica della schermata di modifica della pagina Web di Surreal CMS:

considerazioni sul design

Prima di iniziare a lavorare con un CMS leggero, è sempre bene pensare a cose come la codifica dei caratteri e il modo in cui si collegano a immagini e altre risorse. Surreal CMS preferisce che tu usi la codifica dei caratteri UTF-8, che è semplice come aggiungere il seguente meta tag a sezione di ogni pagina web:

È inoltre importante collegare i documenti, le immagini e altre risorse in un modo che il CMS possa comprendere. Surreal CMS funziona meglio quando si utilizza il collegamento relativo alla radice o il collegamento assoluto:

 ... ...

L'ultima ma probabilmente la cosa più importante da considerare prima di collegare il tuo sito Web a Surreal CMS è il posizionamento delle aree di contenuti. Ecco un eccellente esempio di una pagina web molto semplice che ha un menu di navigazione, una barra laterale e un'area di contenuto principale:

    Esempio di pagina Web        Example.com
 
   
   Contenuto della sidebar qui
 
  Il tuo contenuto qui
 
 
  © Example.com

Potresti aver notato che ho aggiunto modificabile Classi nella barra laterale e nella regione del contenuto principale. Questo è il modo in cui il CMS sa quali sezioni della pagina dovrebbe consentire di modificare. È possibile aggiungere il modificabile classe a quasi tutti i tag HTML, e puoi avere quante ne vuoi su ogni pagina.

Un'altra cosa che potresti aver notato è che la navigazione viene inclusa da un file separato tramite PHP. Surreal CMS ti consente di lavorare con file inclusi come questo in modo da poter aggiornare la navigazione dell'intero sito senza dover modificare ogni pagina singolarmente.

Una volta preparate le pagine e configurato le aree modificabili, sarete pronti per integrare il vostro sito Web con Surreal CMS.

Aggiunta del sito Web al CMS

Surreal CMS offre account gratuiti e a pagamento. L'account gratuito ha pochissime restrizioni e sarà più che sufficiente per il bene di questo tutorial. Basta andare sul loro sito Web e creare un account gratuito.

Una volta creato l'account, accedere al CMS all'indirizzo http://edit-content.com/. Questo è il gateway per l'applicazione Surreal CMS.

Ora che ti trovi, seleziona il pulsante che dice Aggiungi un sito web. Ecco il modulo che vedrai:

Inserisci l'URL del tuo sito web, il server (in genere ftp.your-domain.com), il nome utente FTP e la password FTP. Puoi verificare di aver digitato tutto correttamente facendo clic Test di connessione.

Per la radice del sito Web, è meglio fare clic su Navigare pulsante e utilizzare lo strumento di navigazione. In sostanza, la radice del tuo sito Web sarà la cartella che contiene la tua home page. È importante che questa cartella sia la cartella effettiva con la tua home page in modo che il CMS possa mappare correttamente gli URL a immagini e altri file.

Se si desidera specificare percorsi personalizzati per documenti, immagini e file multimediali, selezionare Avanzate opzione. Quando si impostano percorsi personalizzati, verrà comunicato al CMS dove è consentito caricare altre persone che modificano il sito Web. Per ora, puoi lasciare questi vuoti.

Abilitare le tue pagine web

Ora che il tuo sito web è stato aggiunto al CMS, il passaggio successivo è abilitare le tue pagine web. In altri prodotti CMS leggeri, questo può essere un po 'gravoso per il tuo tempo, ma Surreal CMS ha una bella funzione di scansione che abilita automaticamente le pagine web con un semplice clic.

Per iniziare a abilitare le pagine, seleziona il tuo sito web dall'elenco:

Quindi, selezionare Abilita pagine Web. Apparirà la seguente finestra di dialogo:

Seleziona la pagina o le pagine che desideri modificare nel CMS. Mentre li selezioni, appariranno uno per uno sullo sfondo. Come scorciatoia, puoi navigare in qualsiasi directory sul tuo sito web e fare clic Scansione di pagine modificabili. Questo dirà al CMS di abilitare qualsiasi pagina nella directory corrente che ha un class = "modificabile" attributo in esso. Quando hai finito, seleziona Fatto.

Per impostazione predefinita, ogni pagina abilitata utilizza il della pagina come etichetta. Facendo clic su questo, puoi facilmente modificarlo con qualcosa di più compatibile con CMS <b>Modifica etichetta</b>. Ad esempio, è possibile modificare l'etichetta per <b>index.php</b> leggere "Homepage" e l'etichetta per <b>nav.php</b> leggere "Navigazione".</p> <hr> <h2>Aggiornamento del contenuto</h2> <p> Che ci crediate o no, la parte difficile è finita. Ora è solo questione di entrare e modificare i contenuti. Parte del motivo per cui Surreal CMS mi piace così tanto è che semplifica gran parte del setup. Detto questo, passiamo alla modifica del contenuto.</p> <p> Dopo aver attivato una o più pagine Web, il passaggio successivo è iniziare la modifica. Basta selezionare una qualsiasi delle pagine che hai abilitato facendo clic sull'etichetta della pagina appropriata. Questo ti porterà nell'editor della pagina web, dove trascorrerai la maggior parte del tuo tempo utilizzando questo ottimo CMS.</p> <p> Nell'editor della pagina web, vedrai quattro schede:</p> <ul> <li> <b>Soddisfare</b> - È qui che è possibile trovare tutte le aree di contenuto.</li> <li> <b>Proprietà</b> - Qui puoi modificare il titolo della pagina, le parole chiave e la descrizione.</li> <li> <b>Storia</b> - Visualizza ogni revisione di questa pagina che viene pubblicata per un massimo di 90 giorni.</li> <li> <b>Editors</b> - Visualizza un elenco di tutti gli editor che hanno accesso alla pagina.</li> </ul> <p> All'interno del <b>Soddisfare</b> scheda, supponendo che la tua pagina abbia almeno una regione modificabile, vedrai qualcosa di simile a questo:</p> <img src="//accentsconagua.com/img/images_27_3/a-15-minute-surreal-cms-integration_6.jpg"> <p> Questo esempio particolare ha le due regioni modificabili di cui abbiamo parlato in precedenza: <b>sidebar</b> e <b>contenuto principale</b>. Noterai che il CMS ha convertito gli ID minuscoli e separati da underscore in Camel Case, le etichette separate dallo spazio per l'estetica. Se si dispone di più di una regione modificabile in una pagina, è possibile passare da una all'altra facendo clic sul pulsante appropriato.</p> <p> A questo punto, la modifica funziona allo stesso modo in molti altri sistemi di gestione dei contenuti e applicazioni di elaborazione testi. È possibile formattare il testo, modificare l'allineamento, inserire immagini, elenchi, ecc. Surreal CMS dispone anche di un File Manager incorporato che consente di visualizzare, caricare, rinominare ed eliminare file e cartelle. Per finire, c'è anche un editor di immagini che consente di ridimensionare, ritagliare, ruotare e capovolgere le immagini con facilità.</p> <p> A seconda del tipo di elemento che aggiungi <b>class = "modificabile"</b> a, Surreal CMS fornirà uno strumento di editing appropriato. Ad esempio, ecco cosa è modificabile <img> sembra:</p> <img src="//accentsconagua.com/img/images_27_3/a-15-minute-surreal-cms-integration_7.jpg"> <p> Il <b>Modifica immagine</b> pulsante lancia l'editor di immagini di cui ho parlato prima. È davvero facile da usare, quindi non dovresti avere problemi a manipolare le tue foto. Ecco come appare:</p> <img src="//accentsconagua.com/img/images_27_3/a-15-minute-surreal-cms-integration_8.jpg"> <p> Al termine della modifica, puoi visualizzare l'anteprima delle modifiche facendo clic su <b>Anteprima</b>. Si aprirà una nuova finestra e vedrai la tua pagina <i>Esattamente</i> come apparirà quando sarà pubblicato. Naturalmente, se sei soddisfatto delle modifiche, fai clic <b>Pubblicare</b> li salverà sul tuo sito web.</p> <hr> <h2>Permettere ad altre persone di modificare il tuo sito web</h2> <p> Ora che sai come configurare il tuo sito web e modificarlo da solo, non sarebbe bello consentire anche ad altre persone di accedere? Ciò è particolarmente utile per i progettisti che desiderano offrire ai clienti un accesso limitato per modificare i propri siti Web ed è semplice da configurare.</p> <p> Per prima cosa, seleziona il <b>Editors</b> scheda da qualsiasi parte nel CMS e fare clic su <b>Aggiungi un editor</b>. Apparirà il seguente modulo:</p> <img src="//accentsconagua.com/img/images_27_3/a-15-minute-surreal-cms-integration_9.jpg"> <p> Basta inserire il nome e l'indirizzo e-mail della persona per iniziare. Quindi, seleziona i siti Web a cui deve essere assegnato. Se vuoi, puoi aprire il <b>Avanzate</b> sezione e consentire all'editor di clonare le pagine, eliminare pagine e modificare le proprietà della pagina. Da qui puoi anche abilitare o disabilitare ogni opzione nella barra degli strumenti dell'editor rich-text.</p> <p> Dopo aver inserito tutte le informazioni necessarie, selezionare <b>Aggiungi editor</b> e l'utente verrà aggiunto al CMS. Per impostazione predefinita, viene inviata una e-mail contenente il nome utente e la password. Tuttavia, puoi disabilitare questo e il CMS ti mostrerà la password temporanea per fornirli manualmente.</p> <p> Ci sono un paio di cose che devi sapere sugli account degli editor. Innanzitutto, non hanno accesso a <i>qualunque cosa</i> che fai come designer - gli editor hanno accesso solo in base ai siti Web e alle autorizzazioni che gli vengono assegnati. In secondo luogo, gli editor non hanno accesso a cose come la modifica del codice sorgente a pagina intera e lo strumento Tidy, di cui parleremo a breve. Il modo migliore per vedere qual è la differenza tra un designer e un account editor è creare un editor di test con un indirizzo email alternativo.</p> <p> Prima di andare avanti, c'è un'altra caratteristica che dovresti sapere sugli editori. Puoi impedire loro di modificare pagine specifiche per utente. Basta aprire qualsiasi pagina per la modifica e selezionare il <b>Editors</b> scheda. Accanto al tuo editor sarà un'opzione per <b>disattivare</b> la modifica. Facendo clic su questo impedirai all'utente di modificare la pagina corrente.</p> <img src="//accentsconagua.com/img/images_27_3/a-15-minute-surreal-cms-integration_10.jpg"> <hr> <h2>Altre caratteristiche utili</h2> <p> Finora, abbiamo coperto tutto, dall'integrazione di Surreal CMS al tuo sito web alla modifica delle pagine. Il divertimento non finisce qui, però. Ecco un elenco di funzionalità che puoi sfruttare una volta che inizi a esplorare in profondità ciò che offre Surreal CMS:</p> <h3>Clonazione di pagine Web</h3> <p> Puoi creare nuove pagine duplicando quelle esistenti. Ciò è particolarmente utile perché è possibile impostare una o più pagine template vuote e consentire agli utenti di creare pagine come necessario. Puoi anche attivarlo o disattivarlo per ciascun utente, quindi gli editor più esperti possono avere maggiore controllo sul sito.</p> <h3>Disegnare l'editor Rich-text</h3> <p> Applica gli stili dal tuo sito Web all'editor di testo dinamico per dare agli utenti un aspetto simile a quello del sito web. Per accedere a questa funzione, selezionare il <b>siti web</b> scheda da qualsiasi parte nel CMS e scegliere un sito Web. Vedrai un pulsante con l'etichetta <b>Modifica gli stili dell'editor</b>.</p> <h3>Modifica di file CSS, JavaScript e XML</h3> <p> Puoi abilitare fogli di stile, script e file XML come qualsiasi altra pagina web. Ovviamente, dovrai modificare il codice sorgente grezzo, quindi potresti voler bloccare gli utenti inesperti nell'accedere a questi tipi di file se li abiliti.</p> <h3>Modifica del codice sorgente HTML completo</h3> <p> Mentre stai modificando una pagina web, noterai un pulsante con l'etichetta "Modifica aree di contenuto". Questo in realtà ti consente di accedere al codice sorgente completo della pagina. Gli editori non hanno accesso a questo strumento.</p> <h3>Riparazione di codice HTML disordinato con Tidy</h3> <p> Surreal CMS ha uno strumento integrato che utilizza la popolare libreria HTML Tidy. Questo è utile per correggere tag nidificati o codice HTML non valido che potrebbe causare problemi durante la modifica. È possibile accedere a questo strumento dalla pagina di modifica completa del codice sorgente.</p> <h3>Visualizzazione dell'attività editoriale</h3> <p> Puoi vedere che cosa hanno fatto i tuoi editor! Ciò include quali pagine hanno accesso, quando sono state modificate e anche le volte in cui hanno effettuato l'accesso al CMS. Per visualizzare queste informazioni, selezionare il <b>Editors</b> scheda da qualsiasi parte nel CMS e scegliere un editor. Clicca sul nome degli editor per vedere la loro attività recente.</p> <h3>Funzionalità Pro</h3> <p> Surreal CMS è gratuito per un massimo di tre siti Web. Dopo di ciò, ti chiedono di pagare $ 25 USD al mese per il loro servizio a pagamento, ma gli account Pro hanno anche un paio di altre funzionalità interessanti. Ad esempio, puoi accedere al CMS dal tuo dominio o sottodominio (ad es. Cms.your-domain.com).</p> <p> Con un account Pro, puoi anche caricare il tuo logo e personalizzare il tema, che è l'ideale per i progettisti che desiderano utilizzare il CMS come soluzione per i propri clienti. Ecco un esempio di cosa puoi aspettarti quando marchi il CMS come il tuo:</p> <img src="//accentsconagua.com/img/images_27_3/a-15-minute-surreal-cms-integration_11.jpg"> <hr> <h2>Risorse addizionali</h2> <p> Ora che conosci tutte le nozioni di base (e anche alcuni suggerimenti avanzati!), Ecco alcune risorse utili per lavorare con Surreal CMS:</p> <ul> <li>Homepage surreale CMS</li> <li>Pagina di registrazione</li> <li>Documentazione CMS</li> <li>Domande frequenti</li> <li>Programma di affiliazione Surreal 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">Codice</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">Un'introduzione di 20 minuti alle basi della tipografia</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">Una guida per principianti di 12 passi per 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="/">it.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Informazioni interessanti e consigli utili sulla programmazione. Sviluppo di siti web, web design e sviluppo web. Tutorial di Photoshop. Creazione di giochi per computer e applicazioni mobili. Diventa un programmatore professionista da zero. </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="Ricerca..."> <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>