Introduzione (Seria) a CSS Hero

Se è la prima volta che leggi un mio articolo TIENITI FORTE perché in questo scoprirai le potenzialità di un potente plugin WordPress che ti permetterà di modifcare qualsiasi tema WordPress con la stessa naturalezza con cui usi Photoshop.

Contenuti Extra

Non usi Photoshop? Che mi dici se ti parlo di Ombre, Animazioni, Transizioni e altri effetti CSS che potrai realizzare con un’interfaccia grafica?

Se non è la prima volta che mi leggi, molto probabilmente saprai del plugin CSS Hero e che un po’ di tempo fa ho tenuto un webinar dal vivo nel quale ho esposto le potenzialità di questo strumento ed ho passato gran parte del tempo a rispondere alle domande dei curiosi. Per quanto mi sia divertito ed abbia trovato l’esperienza più  che interessante, la qualità del video non rispecchia gli standard AndMore; ho quindi deciso di andare a fare un nuovo video ed un completo articolo nel quale andremo a scoprire tutte le sue caratteristiche!

Ovviamente questo non sarà il replay del webinar, anche se molte delle informazioni che riguardano CSS Hero sono state già discusse al suo interno, ma in questo ho la possibilità di parlartene nel dettaglio fornendoti degli esempi che ti lasceranno a bocca aperta!

Curioso di scoprire CSS Hero in azione e dire addio ai file .css? Allora non ti resta altro che continuare a leggere.

Come Attivare il Plugin

CSS Hero è molto potente ma, per controllare questa potenza, è necessaria una corretta configurazione. Se utilizzi uno dei temi standard di WordPress puoi divertirti tranquillamente grazie alle configurazioni già realizzate, se stai utilizzando un tema proprietario, ti mostrerò in un prossimo articolo come sia possibile configurare il plugin per modificare gli elementi che desideri ma, sicuramente, questo non riduce le potenzialità di Cassius (il nome della mascotte di questo progetto).

Una volta che avrai eseguito il processo di attivazione (che documenterò nella guida che ho intenzione di pubblicare, maggiori info a fine articolo) tutto quello che devi fare è visualizzare la homepage del tuo WordPress, ricorda, sei ad un passo dalle modifiche LIVE al tuo tema.

Attiva CSS Hero

Una volta premuto sul pulsante, CSS Hero si avvierà il caricamento del plugin che metterà a disposizione i poteri del nostro supereroe grazie alla presenza di questo pannello:

Toolbar di CSS Hero

Ecco la presentazione della toolbar di CSS Hero, come puoi vedere tutti gli strumenti sono facili da raggiungere e ti permetteranno di accedere a tutte le funzionalità. Nell’immagine sopra ho cercato di inserire la descrizione delle varie icone nel tentativo di farti capire al meglio come si presenta la barra degli strumenti, ma credo che una spiegazione più dettagliata non faccia male a nessuno. Andiamo a scoprirli punto punto:

  1. Mirino – quello che io chiamo mirino è il tuo primo alleato nella modifica di un tema WordPress, una volta premuto, ti permetterà di selezionare l’elemento che vuoi modificare e di accedere al pannello delle proprietà CSS (maggiori informazioni a breve);
  2. Responsive Mode – siamo nel 2014 e non poteva mancare la possibilità di creare un tema responsive! Grazie a questo pulsante potrai accedere alle varie risoluzioni che ti permetteranno di applicare diversi stili a seconda della risoluzione che il visitatore sta utilizzando;
  3. Undo History – questa sezione è molto simile alla history di Photoshop, in breve, contiene tutti gli step che hai eseguito nella modifica del tema permettendoti un veloce accesso a vecchie versioni;
  4. Preset – all’interno di questo pannello potrai salvare e richiamare versioni del tema modificato con la comodità di un solo click (molto utile quando dobbiamo presentare diverse soluzione grafiche);
  5. Strumenti – una collezione di utili strumenti che ti permetteranno anche di vedere il codice generato da CSS Hero;
  6. Love – hai realizzato un fantastico tema e vuoi condividerlo con la comunità CSS Hero o sui tuoi social network? Ancora una volta, tutto alla portata di un click;
  7. Fullscreen Mode – permette di lavorare a tutto schermo evitando distrazioni;
  8. Chiudi CSS Hero – questo pulsante ti permetterà di chiudere CSS Hero e consultare il tuo sito senza la possibilità di modificarlo direttamente.

Ecco che cosa significano i bottoni presenti nella toolbar del nostro eroe, sei curioso di scoprire come puoi modificare un elemento? Eccoti accontentato!

Come Modificare un Tema con CSS Hero

Dopo questa breve scarrellata sugli strumenti che ti vengono forniti da questo plugin, è giunto il momento di scoprire come poter modificare un tema. La scelta di questo plugin è quella di rendere tutto il processo di modifica il più naturale e semplice possibile, infatti, se vuoi modificare un titolo tutto quello che devi fare è cliccare su di esso, grazie a questa azione, CSS Hero sarà in grado di capire le tue intenzioni e ti fornirà una lista di possibili elementi pronti da modificare.

Lista Elementi Modificabili con CSS Hero

In questa immagine, ad esempio, io ho cliccato sul titolo del mio tema (come ti mostro nel video) ed ho ottenuto questa lista di elementi compatibili con il click che ho eseguito e, dato che una pagina HTML contiene centinaia di elementi diversi, una raccolta come questa non può che facilitare la tua selezione; anche grazie alla presenza di suggerimenti.

Vorrei ricordarti che questa lista viene modificata in base all’elemento che viene selezionato, in questo modo avrai a disposizione elementi diversi a seconda dell’area in cui hai cliccato; elementi che, come vedremo più avanti, potrai inserire tu stesso e modificare a tuo piacimento!

Adesso che abbiamo capito che cosa sia questa lista, andiamo a selezionare Site Title (cliccandoci sopra) ecco come vengono organizzate le proprietà in CSS Hero: Proprietà CSS Modificabili con CSS Hero

Come puoi notare, l’interfaccia di Hero risulta molto pulita e semplice da capire, una volta selezionato un elemento troverai in alto il suo nome e anche il selettore CSS (giusto per essere sicuri di non modificare qualcosa che non vogliamo); sotto di esso trovi la lista dei gruppi di proprietà CSS che sono stati creati per agevolarti la loro selezione. I numeri che ho aggiunto mi permettono di fornirti una spiegazione veloce dei contenuti di ciascun gruppo; per una spiegazione più dettagliata di ciascuno di esse, aspetta i prossimi articoli 😉

  • 1.Background – all’interno di questo gruppo trovi tutte le proprietà CSS che ti permettono di personalizzare lo sfondo di un elemento HTML. Per facilitare il tuo lavoro è stato inserito un color picker, un generatore di sfumature e anche la possibilità di caricare qualsiasi immagine di sfondo tu desideri. Sono presenti anche altre proprietà avanzate ma, come ti dicevo, le andremo a vedere meglio più avanti;
  • 2.Text – vuoi modificare la grandezza, il colore o qualsiasi altra regola CSS relativa al testo? All’interno di questo gruppo troverai tutte le funzioni che ti permetteranno di fare queste ed altre modifiche (come ad esempio costruire le tue ombre di testo personalizzate);
  • 3.Border e 4.Border Radius – in questi due gruppi abbiamo inserito le regole che ti permetteranno di creare bordi ed angoli arrotondati per tutti gli elementi HTML che desideri;
  • 5.Size, 6.Margin e 7.Padding – tutte le regole relative al box model dove potrai definire le misure e le distanze che il tuo elemento dovrà avere;
  • 8.Position – vuoi posizionare un elemento in modo particolare utilizzando la proprietà CSS position? All’interno di questo gruppo troverai tutte gli strumenti per farlo dalla comodità di una interfaccia grafica;
  • 9.Extra – con questo gruppo è stato scelto di raccogliere al suo interno tutte le proprietà CSS più interessanti ed utili per creare effetti nelle tue pagine HTML. Al suo interno troverai molti strumenti che ti permetteranno di creare ombre personalizzate, effeti di transizione, effetti di trasformazione e molte altre regole CSS che ti permettono di modificare il comportamento di default di un elemento HTML;
  • 10.All e 11.Saved – vuoi modificare tutte le regole CSS da un singolo pannello? Oppure vuoi vedere soltanto le regole CSS modificate? Grazie a questi due gruppi sarai in grado di fare proprio questo e di velocizzare il tuo lavoro.

Sicuramente nel video, e nei prossimi articoli, troverai delle spiegazioni più dettagliate che ti permetteranno di conoscere anche più da vicino le caratteristiche di questo plugin, ma credo che hai già capito da solo quanto potrebbe essere utile utilizzare questo strumento durante il tuo sviluppo web.

Alcune Curiosità sull’Interfaccia

Anche se non voglio andare a spiegare una per una le regole CSS che potrai modificare con questo plugin, voglio comunque prendere qualche minuto per descriverti nel dettaglio il funzionamento dell’interfaccia grafica, in questo modo sarai in grado di utilizzare al massimo delle potenzialità questo plugin fin dai primi istanti.

Seleziona un Colore

Selezionare un colore con CSS Hero è una cosa veramente semplice, basta cliccare sul colore stesso o nel campo testo a fianco per aprire il color picker che ti presento qua sotto. Noterai che ci sono dei numeri e delle brevi spiegazioni che verranno riprese ed estese successivamente.

Seleziona Colore con CSS Hero

Questa immagine rappresenta nel dettaglio il selettore di colore che viene fornito con CSS Hero, come puoi notare le possibilità sono molte.

Per prima cosa è possibile inserire manualmente (1) il valore del colore che, in linea con le specifiche CSS, è in grado di accettare colori esadecimali, rbg, rgba, hsl e hsla. Con gli altri due pannelli (2 e 3) ti viene fornita la possibilità di selezionare il colore direttamente con il tuo mouse in pieno stile WordPress (infatti viene usato lo stesso color picker incluso in questa piattaforma) mentre, nella parte più bassa di questo elemento (4), sarai in grado di utilizzare colori precedentemente utilizzati per altri elementi presenti del tema; in questo modo non dovrai neanche avere bisogno di copiare ed incollare il codice 😉

Unità di Misura e Slider

Gli slider sono veramente molto comodi dato che, assieme alla preview LIVE delle modifiche, permettono di avere un immediato feedback visivo e scegliere con cura il valore più appropriato ma, una cosa che non è molto chiara, è la possibilità di modificare le unità di misura per fare in modo di adattare il tema alle proprie esigenze.

Dettaglio Slider e Modifica Unità di Misura con CSS Hero

Anche questa immagine sembra molto semplice, in fin dei conti trovi uno slider ed un campo di testo sulla destra che ti mostra l’unità di misura utilizzata ed il valore raggiunto grazie allo slider ma, quello che non molti sanno, è la possibilità di modificare direttamente sia il valore che l’unità di misura utilizzati senza dover utilizzare lo slider.

Tutto quello che devi fare è selezionare il campo di testo (2) ed inserire al suo interno i nuovi valori che desideri utilizzare; appena salvate queste modifiche, CSS Hero sarà in grado di farti utilizzare lo slider con i nuovi valori per permetterti di trovare la soluzione corretta che risponde alle tue esigenze.

Non avere paura di applicare le tue modifiche perché potrai sempre riprendere le modifiche precedenti grazie alla history e alla possibilità di resettare ogni singola proprietà modificata.

Modificare lo Stato di un Link

L’ultima curiosità della quale ti voglio parlare, per poi riprendere il nostro discorso sulle funzionalità di CSS Hero, è la possibilità di modificare lo stato di un link. Sono sicuro che, da bravo web designer che sei, sarai a conoscenza del fatto che qualsiasi link ha tre stati ben precisi:

  • hover lo stato che assume un link o un qualsiasi elemento HTML quando si posiziona il mouse sopra di esso;
  • active ovvero quel breve momento in cui il link viene effettivamente cliccato;
  • visited le modifiche applicabili ad un link che è già stato visitato.

Dato che questi stati sono molto interessanti anche da un punto di vista di animazioni e transizioni (nuove tecniche introdotte con i CSS3) non poteva mancare un’interfaccia che permettesse di fare proprio questo:

Modifica stato Hover, Active o Visited con CSS Hero

Ecco che, cliccando sull’icona delle tre linette, si aprirà il menu contestuale che ti permetterà di modificare lo stato hover dei tuoi elementi e, nel caso in cui questi siano dei link, mostrerà anche gli stati active e visited. Cliccando su una qualsiasi di queste nuove voci si presenteranno i gruppi di proprietà CSS che hai conosciuto poco fa e che ti permetteranno di modificare qualsiasi proprietà che desideri differente in questi stati.

È Tutta una Questione di Responsive

Se non hai vissuto sulla Luna negli ultimi anni, saprai sicuramente che con il termine responsive si definisce la creazione di un sito web che ha le caratteristiche necessarie per adattare i contenuti del sito a diverse dimensioni dello schermo sul quale viene mostrato; se così non fosse, il ché vuol dire che sei stato sulla Luna e che hai tutta la mia invidia, adesso dovrebbe esserti chiaro.

Durante la realizzazione di questo plugin, una tra le cose più difficili da creare, è stato proprio quella di permetterti di creare un tema Responsive. Ormai dovresti aver capito quanto semplice sia modificare le proprietà di un elemento HTML se siamo accompagnati da CSS Hero e, la cosa bella, è che troverai la stessa semplicità durante le modifiche delle proprietà responsive. Tornando alla toolbar generale di CSS Hero, l’icona sulla quale dovresti posizionare il tuo cursore, è la seguente:

Responsive Mode in CSS Hero

Posizionando il tuo cursore sull’icona a forma di schermo si aprirà un menu sulla sinistra che ti permetterà di selezionare il tipo di dispositivo; una volta fatto questo potrai iniziare a modificare le proprietà che desideri, aiutato anche dalle nuove dimensioni utilizzate per visualizzare il tema, e potrai salvarle in modo che saranno disponibili soltanto per la risoluzione scelta.

Io credo che l’esperienza utente sia una delle migliori che al momento ho visto per realizzare (LIVE) temi WordPress Responsive ma le mie orecchie sono sempre pronte ad ascoltare suggerimenti o chiarimenti 😉

Ho Sbagliato, Come Torno Indietro?

Fin troppo spesso capita di salvare delle modifiche che, in fin dei conti, non sono state altro che un errore. In certi casi abbiamo complessi sistemi di backup o applicazioni che ci aiutano a fare il versioning del codice; all’interno di CSS Hero, troviamo la history!

La history dal punto di vista di CSS Hero

Come puoi notare tu stesso, niente è più semplice ed intuitivo che navigare all’interno di una lista che ci permetterà di avere una rapida preview delle modifiche che CSS Hero ha salvato man mano che noi applicavamo modifiche. Questa caratteristica è veramente molto utile se ci ricordiamo la data in cui abbiamo fatto le modifiche che ci piacerebbe ripristinare, ma non sarebbe possibile avere qualcosa di più umano?

Salva Tutto in un Preset

Eccoci quindi di fronte ad affrontare l’argomento “come posso salvare una particolare versione del tema che sto sviluppando?“, ed eccomi quà pronto a risponderti! Sono sicuro che ti sarà capitato molto spesso di mostrare al cliente diverse versioni grafiche del sito che intendi realizzare, ma ti sei mai chiesto quanto sarebbe utile poter far vedere queste modifiche direttamente nel tema e con i contenuti del sito del cliente? Quanto tempo potresti risparmiare tra definire l’idea grafica ed importarla all’interno di un tema WordPress?

I Preset in CSS Hero

Ecco che, anche se avrai di fronte una lista molto simile alla precedente, questa volta sarai in grado di muoverti più tranquillamente dato che sarai in grado di riconoscere a colpo d’occhio il preset che stai cercando leggendo il suo nome.

Gli Strumenti di un Eroe

Prima di concludere, voglio parlarti di un’altra caratteristica molto interessante di questo plugin; più che una singola caratteristica, qua si parla di ben 3 distinti strumenti:

  1. reimpostare tutte le modifiche fatte al tema ai valori iniziali;
  2. pulire tutti i salvataggi automatici che CSS Hero ha inserito nella history;
  3. mostrare il codice CSS generato.
Strumenti Disponibili in CSS Hero

Questi sono dei semplici strumenti che potrai utilizzare nel momento del bisogno ma sono sicuramente qualcosa che aggiunge un maggior livello di controllo nel comportamento generale del plugin.

Conclusioni

Beh che dire, che a me piace CSS Hero è un dato di fatto! Ma quello di cui sono più curioso è conoscere le tue impressioni, sapere che cosa ne pensi e se credi che questo strumento possa agevolare il tuo lavoro.

Se vuoi mettere le mani su questo plugin WordPress, sono felice di dirti che puoi acquistarlo immediatamente e mettere le mani su tutte le funzionalità del plugin.

Lascia il tuo Pensiero