Creare il proprio CMS da zero: #1 strutturare il progetto

Inizia la rubrica dedicata alla programmazione Php/mysql dedicata a tutti coloro che vogliono creare un proprio cms per la gestione di un sito web in perfetto stile WordPress ma ovviamente molto più personalizzato!

La guida non è rivolta ai soli utenti avanzati ma cercherò di fornire strumenti utili per creare il vostro potente cms partendo da zero. I più esperti magari potranno imparare qualche trucchetto o codice che non conoscevano 😉

01. Brainstorming e feature del progetto

Come primo punto dovete focalizzarvi sul progetto che avete in mente di realizzare. Il “target” del progetto è essenziale per evitare perdite di tempo e partire da subito con il piede giusto. Strtturare un cms per alberghi o hotel sarà infatti diverso da quello di un blog etc. Pertanto mettetevi di fronte a carta e penna (ebbene si ogni tanto è bello riassaporare il caro vecchio inchiostro), e mettete giù alcune righe sull’entità del progetto. In questa fase è bene aver parlato prima con il cliente in questione proprio per approfondire meglio eventuali tecniche da utilizzare.

CASE STUDY : PROGETTO1

Sito di un albergo, il cliente non ha pretese e vuole aggiornare solo il listino prezzi e una sezione “news” dedicata ai last minute. budget limitato.

SVOLGIMENTO

Per massimizzare i tempi di sviluppo in relazione al rendimento ore_lavoro/budget risulta inutile sviluppare TUTTE le sezioni tramite cms. Vi basterà pertanto predisporre nel front-end una sezione news e un listino prezzi i cui dati verranno caricati in dinamico e in completa autonomia dal cliente tramite il vostro CMS.

Dato il basso profilo (budget) del cliente questa risulta la soluzione più ideale e a mio parere anche la più professionale. Le pagine non saranno interamente modificabili, ma come da richiesta dello stesso, il cliente potrà variare il proprio listino in qualsiasi momento e impostare last minute e offerte a sua discrezione facendo “lavorare” il proprio sito ( e il proprio investimento).

Oltre a questo dato il target analizzato risulta inverosimile che il cliente vada a modificare ossessivamante la pagina “contatti” o “chi siamo”. Se proprio vogliamo fare un regalino al nostro cliente aggiungiamo anche una gestione delle fotografie presenti nel sito 😉

Tutto questo per farvi capire che senza un accurato brainstorming avremmo perso tempo prezioso sforando il budget chiesto dal cliente. Pertanto fate attenzione questo è un punto fondamentale!

02. Che interfaccia uso? layout e feature da usare per il proprio cms

Ora la domanda sorge spontanea, una volta capite le esigenze del cliente, e delineate le linee guida del progetto che interfaccia usiamo per il nostro cms? La creazione di un’interfaccia sempre nuova ad ogni lavoro può risultare alla lunga molto controproducente. Pertanto il mio consiglio, e di stilizzare al massimo 2/3 interfacce e una volta scelta quella che più vi aggrada vi consiglio di rimanere su quella per un pò.

Per scegliere la migliore non valutate solo l’aspetto prettamente grafico: ricordate che la UI che disegnerete non sarà visibile a tutti ma solo ai vostri clienti che amministraranno il sito. Piuttosto di perdere troppo tempo con la grafica pertanto, il mio consiglio è di aggiornare continuamente l’interfaccia per renderla sempre più fruibile e facile da usare. Ajax e controlli per evitare errori o bug sono molto ben accetti in questo tipo di progetti.

La semplicità d’uso è ciò che fa la differenza: più avrà caratteristiche utili e più i vostri clienti saranno soddisfatti. Ovviamente cercate di dare anche un aspetto gradevole!

03. Case study utili

Personalmente la “crescita” grafica della mia interfaccia per cms è variata nel tempo in modo abbastanza significativo. Ovviamente aumentando le vostre skills riuscirete a creare prodotti sempre migliori e fruibili da tutti.

Ho deciso di fornirvi degli screenshot delle mie interfacce web in modo da farvi capire meglio i miei errori, e potervi indirizzare meglio nella scelta.

A) PRIMA UI

cms1

La prima versione è sicuramente la più brutta a vederla oggi rabbrividisco XD tuttavia era abbastanza funzionale e manteneva un buon grado di semplicità. Purtroppo oltre alla resa grafica, non avevo implementato quasi nessuna feature per migliorare l’usabilità (ebbene si anche io sono incappato nei refresh selvaggi all’inizio, e men vanto!) pertanto ho deciso di progettare la seconda versione.

B) SECONDA UI

cms2

Questa seconda versione aveva una dashboard vera e propria, la resa generale a screen completo vi assicuro è molto più gradevole. In questa versione avevo integrato il sistema di notifiche in remoto (vedi box sinistra). Quest’ultimo per me è stata una specie di piccola “rivoluzione” in quanto mi permette di comunicare in tempo reale con il cliente senza dover accedere al suo pannello di gestione.

C) ULTIMA VERSIONE

cms3

Ed eccoci giunti alla terza (ed attuale) versione. In questo screen la vedete applicata a un cms per la gestione di una galleria (sempre di mia creazione).  La dashboard ha sempre più un aspetto “WordPress based” se bisogna imparare è meglio farlo dai migliori no? 😉

Con questa UI oltre alla già sopracitata gestione delle news in remoto ho la possibilità di sviluppare meglio i sotto menu tramite discesa usando jQuery. In questo modo il cliente ha sempre davanti il menu che diventa contenstuale in alcune sezioni. In questa versione ho introdotto molti controlli e funzionalità ajax per ridurre al minimo il refresh delle pagine. Questo aspetto è estramamente importante quando progettate un interfaccia utente per cms in quanto refresh “selvaggi” e talvolta inutili rendono il cms poco usabile e “lento”. 

Nella nuova versione (che farò appena mi capiterà un momento di calma =D), vorrei implementare le notifiche stile Growl per le comunicazioni, e maggiori funzionalità come ad esempio l’upload drag and drop in html5. 

Mi piacerebbe avere dei feedback su come migliorare il pannellino, ovviamente tutti i consigli sono ben accetti!

04. L’importanza della dashboard

come avrete capito la dashboard è la prima pagina che appare al cliente dopo aver effettuato il login, pertanto ecco cosa FARE:

A) ben vengano sistemi di controllo errori al fine di prevenire bug (es. check sui campi principali come titolo articolo)

B) Integrate un sistema di News/comunicazioni in modo da far capire al cliente che continuate ad aggiornare e gestire il suo progetto!

D) Integrate una sorta di manuale dove spiegate le funzionalità.

C) Se possibile date supporto diretto tramite skype o altro.

D) integrate un sistema di statistiche dentro la dashboard. renderà il tutto più integrato e veloce.

cosa NON fare:

A) Mettere troppe informazioni nella prima pagina —> controproducente, l’utente medio è abituato a facebook, quindi redete tutto semplice e facile usando commenti, indicazioni e informazioni utili.

B) Evitate, il più possibile i refresh della pagina, più cose integrate insieme e meglio è.

C) Non siate ossessivi sulla grafica, la vedrà solo il vostro cliente, concentratevi su altro.

D) Non uste font troppo “pesanti” o invasivi.

Ecco fatto, alla fine di questo articolo dovreste avere le idee un pò più chiare su:

– Come iniziare un progetto cms (raggruppare le idee).

– Come stilizzare (e scegliere) la dashboard (prima pagina) del cms.

– Errori da NON fare nella progettazione della dashboard

Se non vuoi perderti nemmeno un articolo utile sullo sviluppo e sul web design clicca “mi piace” che trovi nella sidebar qui a fianco. Grazie per il supporto!

Leggi la prima parte sul come creare il tuo login personalizzato: PARTE 1 LOGIN >> (Ancora da perfezionare).

Vuoi un preventivo  e/o una consulenza per la creazione del tuo cms? contattami ora.

E voi che stile avete scelto per i vostri progetti? Che tipo di briefing fate prima di mettervi al lavoro?

Foto credits by sinator

  1. Ottimi spunti di riflessione Riccardo, ora mi spiego anche il perchè dell’articolo su Kendo UI 😀

    Strutturare un CMS ad hoc non è una delle cose più semplici del mondo, personalmente ho avuto modo di crearne almeno un paio e devo dire che erano tutti decisamente più “grezzi” dei tuoi a livello grafico 😀
    Per non parlare a livello di codice dove ad oggi cestinerei quasi tutto quello che c’è 😀

    Per quanto mi riguarda comunque quando penso ad un CMS più che pensare ad uno strumento per il cliente lo penso con uno strumento di partenza per tutti i miei progetti. E’ da lì parte tutto secondo me 🙂

  2. La creazione di un cms è qualcosa di veramente complesso e sicuramente l’idea di strutturarlo per fargli svolgere solo alcune funzionalità specifiche semplica di molto il lavoro ma, di contro, si perde in estensibilità.
    Se ci si trova ad affrontare più problemi usufruendo sempre dello stesso core bisogna prevedere che si possa estendere all’infinito.
    Per questo motivo ritengo che un buon cms debba offrire essenzialmente la possibilità di gestire: utenti, pagine e contenuti e delegare a plugin esterni la risoluzione dei problemi specifici.

    Vi segnalo questa pagina: *** in cui ho elencato una serie di articoli utili.

    Buon cms a tutti

    1. Ciao Gasmor, ovviamente la soluzione che ho indicato, e su cui si basa la guida, è per creare un cms di base “mirato” senza troppi fronzoli. Ovviamente i cms che creo di solito sono scalabili e più complessi ma non mi sembrava il caso di mettere troppa carne al fuoco per i novizi. Oltre a questo ritengo che dare una “personalizzazione estrema” a seconda del tipo di progetto sia molto meglio che creare un cms “base” e adattarlo a tutti i progetti, per quello c’è già wordpress.

  3. Ciao Riccardo, wordpress è una soluzione molto interessante anche se ci sono molti altri cms interessanti.
    Ciò che dici lo condivido solo in parte e ti spiego perchè.
    Ho realizzato molti progetti “ad hoc” e lavorare in questo modo è sicuramente molto più rapido, veloce ed efficiente almeno fino a che non sei costretto a modificarlo perchè ormai troppo vecchio o perchè hai bisogno di qualcosa di nuovo.
    Ho decine di siti realizzati da zero da me, ognuno diverso da loro, e per fare delle modifiche sostanziali devo ristudiarmeli per benino prima di metterci le mani sopra.
    Invece creare un core e poi affidare i compiti ai plugin ti permette di lavorare su un unico progetto e avere sempre tutti i siti aggiornati allo stesso modo.
    Se ci pensi, inoltre, qualsiasi cms piccolo o grande che sia necessita di:
    – gestione utenti: registrazione, login, logout, sessioni, permessi…
    – gestione pagine e strutture;
    – gestione contenuti e loro visualizzazione nelle pagine;
    – gestione database;
    – area amministrativa;
    – router o .htaccess;
    – gestione dei layout
    ecc…
    Tutte queste cose dovrebbe farle il core (unico progetto su cui lavorare) e poi, ad esempio, per fare un sito di hotel si potrebbe fare qualcosa di simile: class hotel extends core.

    1. Si questo lo condivido =D personalmente ho parecchi lavori e cms all’attivo e il fatto di personalizzarli ogni volta rendendo unico il prodotto è quel “qualcosa in più” che spingono i clienti verso i developer come noi.

      Ovviamente anche l’idea di scalare con diversi plugin non è una brutta idea =D

      1. Non conosco PHP quindi anche i passaggi più banali li ignoro. Credevo di impararlo attraverso dei tutorial, solitamente mi riesce meglio. Ma navigando ho capito che è opportuno prima documentarsi a livello teorico, almeno per una infarinatura…

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Up Next:

Newsletter Signup Box in psd

Newsletter Signup Box in psd