Manuale di sopravvivenza del programmatore solitario – [1] la grafica

Quando il budget stringe e non abbiamo un grafico a disposizione urgono soluzioni alternative, a costo zero o quasi.

Quando si tratta di mettere online velocemente un semplice sito “standard” realizzato con joomla, wordpress o altro software libero diffuso a livello mondiale, esiste una vastissima base di templates / temi / modelli /comesichiamano gratuiti o a basso costo.

Per qualcosa di più specifico come le nostre applicazioni create con cakephp la situazione cambia un po’. Ma le alternative -che comportano spesso meno tempo e maggiore resa del fare da se- non mancano.

In generale è semplice adattare un template generico (semplice html+css) per cake.  Il punto è quindi dove trovare buoni templates. O come crearseli in fretta. Trovare velocemente un bel vestitino per la nostra applicazione, così da poterci concentrare su quello che conta: l’analisi, la progettazione, la programmazione; ecco quindi una brevissima guida al prèt-a-porter del web.

1. Templates gratuiti

Ci sono diversi autori e siti che raccolgono templates gratuiti. Freecsstemplates, Styleshout, TemplateWorld sono i primi che mi vengono in mente.
Per esperienza posso consigliare il primo quando servono serie di modelli diversi ma con una base comune – i template hanno un markup di base semplice e spesso molto simile.

2. Templates gratuiti.. col trucco

Dicevamo che esistono migliaia di temi / modelli per i più diffusi cms, come wordpress e joomla. Perché non usarli?
Ma sono spezzettati in una raccolta di diversi file php
, obietterà qualcuno.
Certo. Nessuno ci impedisce però di installarci una copia locale di wordpress, creare alcuni contenuti fittizi nei quali utilizziamo vari elementi (immagini, tabelle, liste, citazioni, etc.) e fare un bel salvataggio della/e pagina/e dal browser, così da ottenere il nostro bel markup generato da utilizzare con i css e le immagini del tema.
Attenzione però alle licenze d’uso, non si sa mai.. In caso di dubbio, è sempre meglio chiedere all’autore.

3. Templates.. spendendo poco

Soluzioni a pagamento ce ne sono tante. Personalmente ho provato DreamTemplate e ThemeForset.
Uno è la quantità, l’altro la qualità.
Il primo si distingue per la quantità di template di vario tipo disponibili, per una piccola cifra annuale. Qualità mediamente buona,  talvolta aspetto un po’ “passato”, ma non c’è molto da lamentarsi visto il costo (al momento solo 60 dollari). Devo dire che i siti bonus (in particolare quelli per l’opzione premium) danno un po’ l’impressione di specchietti per le allodole, ma in generale sono delle aggiunte che possono rivelarsi utili.
Il secondo brilla invece per qualità (ma pure la quantità è buona). Davvero ottimo: è diventato la mia prima opzione quando mi serve in fretta un “vestitino” pronto per una applicazione. Buona varietà, compresa una ricca sezione di admin skins (con ottime implementazioni di “Pannelli di controllo” da adattare), grandissima cura dei dettagli. I singoli template spesso sono disponibili in pacchetti con più versioni e con file psd sorgenti utili per personalizzare e applicare piccole modifiche. I costi, poi sono davvero contenuti. Consigliato.

4. Fai da te

Si, vabbeh, allora avrei fatto il grafico, non il programmatore.
Esatto. E’ anche vero che con poche competenze grafiche, limitandosi ad un po’ di css e uso accurato di spazi e tipografia, al massimo con qualche sfumatura e ombreggiatura facile da fare con fireworks o photoshop, si possono ottenere ottimi risultati pur non essendo grafici professionisti. Ma ci vorrà sempre molto più tempo rispetto a prendere un prodotto pronto.. e probabilmente con risultati peggiori.

Esistono però vari programmi, wizard, estensioni per dreamweaver utili per generare in fretta almeno la base del nostro template.
Devo dire che di quelli che ho provato, nessuno mi ha mai soddisfatto. meglio spendere 10-20 dollari su themeforest per un lavoro professionale da adattare. C’è però un’eccezione. Un programma che è nato come modo simpatico di crearsi semplici modelli o template per alcuni diffusi cms, ed è maturato nel tempo arrivando ad una qualità, flessibilità, facilità d’uso che difficilmente mi sarei aspettato da un programma di questo tipo.

Si chiama Artisteer, costa tra i 50 e 130 dollari a seconda della versione, e li vale tutti – anche di più.

(una volta ho trovato un sito che vendeva template generati con questo programma – e, beh, pur sembrando una mezza presa in giro, i template non sebravano peggio di quelli venduti su altri siti..)
Di ogni sezione (sfondo, layout, foglio, header, menu, articoli, barre laterali, bottoni, etc.) è possibile personalizzare praticamente tutto, e far generare una combinazione casuale al programma, da cui partire – idem per l’intero template. L’ultima versione ha aggiunto una maggiore varietà di layout possibili, a scelta in parte (o tutto) a dimensione fissa o fluida. Fornisce di base una gran varietà di sfondi, texture, foto, set di colori, icone, sfumature, trame.. e la possibilità di inserire i propri.
E’ possibile generare template per wordpress, joomla ed altri cms (persino codecharge studio!), oppure html. E passare semplicemente dall’uno all’altro (creare lo stesso template per cms diversi). Spesso genero templates con la struttura per worpress, per poi salvarli in html -così da usarli ed adattarli dove mi servono. Il codice html+css generato non è il più semplice e sintetico del mondo.. ma è ben fatto, leggibile ed adeguato vista la varietà di strutture possibili ed i dettagli come i bordi arrotondati (con la tecnica delle sliding doors).
Insomma, da provare. E da comprare.

5. accessori

Servono delle foto decenti, e gratuite? StockExchange.

Set di icone? Uhm, no, ce ne sono troppi. Comunque con Tango e famfamfam si va sul sicuro.

6. l’alternativa più bieca di tutte

Sfruttare il lavoro non retribuito di qualche giovane. Che si fa un po’ di indispensabile esperienza e può mostrare qualcosa, arricchire il portfolio ed il curriculum. Spesso si chiama stage.. oppure volontariato. Ehi, non è mica una cattiva idea*!

* il sito in questione, ad esempio, utilizza un template di themeforest. 14 Dollari, che è stato il costo totale a parte l’hosting. L’importanza del design, quindi -in questo caso- della scelta del template preconfezionato sulle scelte di usabilità, l’impostazione  e lo sviluppo dell’applicazione sarà oggetto di un altro articolo

  • ottimo articolo, vorrie pero’ chiederti un parere: di templates HTML ,che oggi sembra stiano sempre più tornando di moda, su Themeforest ce ne sono davvero di belli e ben fatti
    il problema sta nell’editing, ovvero devi praticametne fare tutto a mano, perchè (non uso Dreamweaver perchè non lo usare) ad esempio usando un software come Kompozer, alla fine la visualizzazione su cui lavorare (e quindi il risultato finale) è davvero pessimo.
    senza poi parlare dealla gestione dei menus…e via di seguito.
    data la tua esperienza, quale potrebbe essere un editor che permette DAVVERO un editing visuale di un template themeforest html (con css)?
    grazie in anticipo
    PS: Artisteer è carino, ma il problema dell’editing rimane, una volta fatta la pubblicazione in html, no?

  • stefanomanfredini

    In effetti di tool esclusivamente o prevalentemente visuali – a parte dreamweaver che non uso da anni- non ne conosco.. anche perché per molte cose, considerando anche la logica, diventa pressoché impossibile gestire tutto a livello visuale. Però, se il codice è scritto bene, non è difficile metterci le mani; in una applicazikne cakephp ad esempio si tratta di separare layout, viste, elementi riusabili, aggiustando un po’ le cose (ovvero aggiungendo un po’ di stili css e qualche id agli elementi). In più nel frattempo si sono imposte delle belle novità, come html 5 e framework lato client come twitter bootstrap.. difficile farne a meno, e facilitano le cose sotto diversi aspetti.
    Artisteer a sua volta è decisamente migliorato, buono per fare template per wp, joomla, etc. ma anche statici. La possibilità di aggiungere pagine ed editarne il contenuto forse lo rende anche un editor utile per creare velocemente semplici siti statici, con buon comtrollo sull’aspetto, quando serve