Mapp è il primo prodotto targato GraphiCal, è nato come un progetto personale e poi si è sviluppato come componente web configurabile e installabile. La sua funzione è quella di installare all’interno del proprio sito web una mappa interattiva che facilità la gestione dei link in tutti quei contesti dove i contenuti sono distribuiti sul territorio nazionale ed internazionale.

Su ogni paese infatti è configurabile un link, che fungerà da pagina di destinazione per il paese selezionato, questo sarà utile quando ad esempio una grande azienda deve comunicare ai propri utenti le sedi dei propri stabilimenti, cliccando su Puglia verrà indirizzato alla pagina con le informazioni relative a Puglia, su Lazio quelle relative a Lazio e così via. Un’altro impiego può essere quello di un’agenzia viaggio, infatti questi tipi di siti internet hanno già le informazioni suddivise per paese, allora perché non aiutare l’utente con una bella Mappa interattiva?

Ho curato molto la semplicità di utilizzo e la personalizzazione tramite interfaccia web. Il componente attualmente è configurabile nei colori e nei link in maniera abbastanza intuitiva, ma punto a renderlo ancora più personalizzabile, ampliando il numero dei paesi e inserendo altre funzioni utili come il fullscreen, visualizzare/nascondere le icone, modificare i menù, inserire un tooltip su ogni paese e se qualcuno ha altri suggerimenti scrivetemi un commento!

Attualmente il componente è a pagamento, unica licenza, installabile su un singolo sito web, la licenza è a vita e sarà possibile usufruire di tutti gli aggiornamenti successivi. Chissà però se in futuro non realizzo una versione gratuita con funzioni limitate.

Di seguito un video che visualizza la facilità di configurazione di Mapp:

Link a Mapp: mapp.graphical.it

Trai i post più letti del blog senza nemmeno troppo stupore ci sono le raccolte di temi gratuiti per WordPress, infatti non è una novità che la maggior parte dei web designer sono sempre alla ricerca di nuovi spunti e in questo caso di nuovi template da utilizzare nei propri lavori. Una delle raccolte meno discusse è forse quella che riguarda game (videogiochi, briscola, WoW etc), ed eccoci che oggi vi presento 10 dei migliori, a mio parere, template per la piattaforma più popolare del mondo, WordPress.

#1 Games Mania

#2 Marioland

#3 PeaceKeeper

#4 Gamerpress

#5 Warlord

#6 warpack

#7 Massgamble

Theme perfetto per un blog sulla roulette o altri giochi di casinò.

# 8Game star

#9 Mmopress

#10 iGames

Questa non è sicuramente una lista esaustiva  su quelli che possono essere considerati come i migliori temi WordPress, ma è una buona cernita che ho trovato su wpdaddy, selezionati in base alla creatività e alla professionalità che li contraddistinguono!

Potrete utilizzare i temi in maniera del tutto gratuita permettendovi di realizzare con poco sforzo dei lavori di altissimo livello. Buona scelta!

Notate qualcosa di strano nel blog? Ebbene si, sono autorizzato ad utilizzare il logo Adobe per promuovere le mie attività sul web. Giusto ieri, infatti, ho preso la mia prima certificazione Adobe in Dreamweaver CS5 e ora sono un certificato ACE (Adobe Certified Expert).

Di seguito racconterò le mie impressioni riguardo all’esame, come e quanto ho dovuto studiare per raggiungere la certificazione e quali libri e documentazioni mi hanno aiutato per essere preparato.

Come studiare

Per prepararmi all’esame ho utilizzato sostanzialmente 2 libri uno in italiano e uno in inglese.

Quello italiano a mio dire inutile a meno che non si parta da zero è Classroom in a Book (il corso ufficiale di Adobe System) della Mondadori Informatica, costo di copertina 50 euro. Inutile perché in Italiano. Se volete prendere dimestichezza con i pannelli e le aree di lavoro dreamweaver bisogna imparare i nomi in inglese perchè l’esame sarà in inglese e tranne per alcuni nomi noti è difficile comprendere che Bindings panel sarà il pannello Associazioni, o Property Ispector sarà il pannello Proprietà… Certo inutile non è se, come dicevo, invece si parte da zero perché studiare in italiano ti fa comprendere in maniera chiara alcune dinamiche del software che a meno che non si sappia l’inglese in maniera ottimale, non sono di facile intuito. Consiglio invece lo stesso libro ma nella versione inglese.

Il secondo libro è Dreamweaver CS5 On Demand (di Steve Johnson) in inglese, molto completo e scorrevole da leggere, inoltre offre una pratica tabella che ti segnala le pagine da studiare per la certificazione ACE, ovvimanete è bene leggerlo almeno una volta tutto.

Un’altra risorsa eccezionale è la guida online di Adobe, gratuita, completa, in versione italiana e inglese.

Le tematiche

Di seguito le tematiche trattate nell’esame e la loro percentuale di domande:

Qui un report più completo e dettagliato.

Quanto costa la certificazione

I prezzi sono disponibili sul sito dell’Adobe e costa 135 euro più IVA, verrebbe a costare intorno ai 163 euro.

Come prenotarsi per l’esame

Per l’esame bisogna prima registrarsi sul sito della Pearson VUE inserire tutti i dati anagrafici e schedulare un’esame, ovvero scegliere la tipologia di certificazione, ricercare il test center più vicino a voi e prenotare l’esame in una delle date messe a disposizione del test center selezionato. E’ importante essere lì il giorno dell’esame almeno con 15 minuti di anticipo e portare 2 documenti di identità. Se spostate l’esame o non vi presentate il giorno prenotato dovrete pagare una piccola tassa per la mancata presenza.

L’esame

Si svolge presso un test center Pearson Vue, si compone di 49 domande in inglese, la percentuale minima di risposte corrette per superare l’esame è 72%, la durata è di 80 minuti + 30 minuti per la differenza di lingua.

In conclusione posso dirvi che bisogna essere molto motivati, studiare e utilizzare il programma quotidianamente, solo così si riesce a conoscere tutte le features del software, anche quelle più nascoste (e non pensate che non vi siano richieste!), ora non mi resta che aggiornare il CV e a voi vi mando un in bocca al lupo se avete intenzione di intraprendere questa strada!

Oggi ti segnalo un sito che ho scoperto da poco e racchiude contenuti veramente interessanti e di qualità.

Il sito si chiama TrainingCreativo.com e al suo interno puoi trovare un sacco di risorse gratuite e a pagamento.

Principalmente il  sito si presenta come una sorta di contenitore di video tutorial su Photoshop (al momento puoi trovare 6 video corsi, formati complessivamente da 128 video) ai quali, periodicamente, se ne aggiungono sempre di nuovi.

Per accedere a questi video corsi (a pagamento) hai varie possibilità:

1) Iscrizione alla membership mensile.

In questo modo potrai vedere tutti i video corsi on-line (ma non potrai scaricarli sul tuo PC) e finche rimarrai iscritto/a, avrai accesso anche a tutti i nuovi video che verranno aggiunti nel tempo.

2) Iscrizione alla membership annuale.

In questo modo potrai vedere tutti i video corsi on-line e potrai scaricarli anche sul tuo PC e finche rimarrai iscritto/a, avrai accesso anche a tutti i nuovi video che verranno aggiunti nel tempo.

Con questa iscrizione risparmi anche 2 mensilità, pagherai in pratica 10 mesi invece di 12.

3) Acquistare i video corsi singolarmente (prezzo variabile a seconda del video corso).

Scegliendo questa opzione acquisti un video corso singolo e puoi scaricarlo sul tuo PC, senza vincoli ne ulteriori pagamenti nei mesi successivi.

Per chi vuole essere sempre aggiornato e imparare facilmente nuovi trucchi ed effetti speciali con l’uso di programmi per la computer grafica, l’opzione più  vantaggiosa, a mio parere, è  sicuramente la membership annuale, in quanto puoi scaricare tutti i video corsi ad un costo ben al di sotto del prezzo complessivo acquistando tutti i video corsi singolarmente. Per chi vuole toccare con mano la qualità dei video prima di acquistare un abbonamento è possibile scaricare gratis (dietro iscrizione alla newsletter) un mini video training composto da alcuni video tutorial, estratti dai vari video corsi, per farsi un idea dei contenuti che si possono trovare iscrivendosi alla membership.

Ma la cosa veramente interessante  che, oltre a contenuti a cui puoi accedere a pagamento, trainingcreativo.com mette a disposizione dei visitatori tantissimi tutorial, video e testuali scaricabili in pdf, esclusivamente gratuiti.

Inoltre puoi accedere ad alcune sezioni del sito dove troverai un vasto elenco di link a risorse utilissime come immagini e foto gratis, font, pennelli per Photoshop, texture, color tools, generatori di testo e tanto altro.

Il sito offre anche un glossario dove leggere il significato dei vari termini utilizzati nell’ambiente della grafica. Questa sezione, a mio parere  un po’ scarna di contenuti, è messa a disposizione di tutti gli utenti che possono contribuire all’ampliamento della stessa contattando l’amministratore del sito.

Anche il supporto è buono, infatti hai la possibilità di comunicare direttamente con l’autore dei video attraverso vari form per, ad esempio, fare domande o richiedere assistenza, suggerire tutorial, ma anche proporsi come collaboratori.

Concludendo, per chi lavora con la grafica o per chi semplicemente è un appassionato di questo mondo, queste risorse ci aiutano a lavorare in maniera più efficiente e a creare prodotti di qualità! Le risorse messe a disposizione dalla rete infatti sono degli strumenti che ogni web designer dovrebbe conoscere e avere sul proprio PC.

Adesso lascio a voi la scelta di andare a dare un’occhiata e sperimentare sui vostri progetti!

Vi è mai capitato di stare davanti al computer, seduti su una scomoda sedia del vostro ufficio, e d’un tratto notare fuori dalla finestra che vi state perdendo una fantastica giornata? Quante volte avreste voluto semplicemente spegnere il pc e uscire, ma gli orari del vostro ufficio non ve l’hanno permesso? Per non parlare di tutte quelle mattine in cui, reduci da poche ore di sonno, avete dovuto prendere due autobus, un tram e quattro metro per raggiungere le quattro mura dove passate le vostre giornate per guadagnarvi da vivere. Eppure il problema non è il lavoro in realtà, quello non vi dispiace o addirittura è un sogno nel cassetto che avete realizzato dopo anni di studio.

La verità è che se solo poteste cambiare qualcosa della vostra quotidianità…

Si sa: “nella vita è tutto possibile”… e allora perché non fare un tuffo nella realtà da freelance?

Per iniziare bastano coraggio, determinazione e tanta buona volontà!

In cambio potrete finalmente essere padroni del vostro tempo e gestirvelo come vi pare e piace. Quale miglior modo di vivere le vostre giornate, organizzandovi il lavoro in base ai vostri impegni, bisogni e necessità? In professioni creative, come ad esempio quella del web designer, capita molto spesso che non sia la giornata giusta e, come se non bastasse, con orari di ufficio scanditi da pause pranzo e riunioni, la vostra creatività si rassegna. Ma quanto riuscireste a lavorare meglio se solo poteste scegliere quando creare, indipendentemente dal fatto che al mattino vi piace svegliarvi presto o invece stare sotto le coperte?

La giornata non può che iniziare bene quando avete il potere di poter scegliere a che ora svegliarvi e non dovete abbinare la cravatta giusta all’abito o indossare quelle scomode décolleté con una gonna che deve per forza essere diversa da quella del giorno prima. Saltate tutto questo e mettetevi subito al lavoro in pigiama, vicino alla vostra tazza di caffè e i vostri biscotti preferiti.

Sia chiaro, la vita da freelance non è soltanto una questione di autogestione del tempo a proprio piacimento. Se siete dei traduttori, ad esempio, saprete molto bene che una disciplina ferrea negli orari di lavoro è un must per chi ambisce ad arrivare a fine mese senza dover chiedere prestiti.

In questo caso siete avvantaggiati perché l’autodisciplina sarà sicuramente già parte della vostra persona e sapete anche molto bene che per fare una qualsiasi traduzione ci vuole molta concentrazione, esattamente quella che a volte in un ufficio manca. Tra l’altro in un ufficio non potrete mai disporre di tutti i dizionari, glossari e vecchie traduzioni già fatte che, invece, sono sistemati nella libreria di casa vostra.

E allora quale miglior posto della scrivania nel soggiorno di casa dove potrete stare finalmente in silenzio con i bambini a scuola e il partner in uno dei suoi viaggi per lavoro? Non vi resta che provare l’ebbrezza di essere finalmente liberi, non legati a orari e luoghi dove dover per forza lavorare.

Questo vale anche per programmatori, graphic designer, editors e tanti tanti altri.

Certo la vita da freelancer non è tutta “rose e fiori” e il settore non è un paese delle meraviglie, ma d’altronde neanche la vita da impiegati lo è. Bisogna pur sempre considerare i lati positivi e negativi prima di prendere una qualsiasi decisione e così, anche nel caso dei freelancer, ci sono alcuni nodi che, prima o poi, verranno al pettine. Il nodo più noto è probabilmente quello del pagamento, che non sempre avviene o a volte richiede

numerose sollecitazioni da parte del freelance. I più esperti sono già abituati a questo tipo di cose e sicuramente vi consiglieranno nel migliore dei modi.

Già, i consigli, infatti nella realtà da freelance è importante anche la rete di conoscenze che vi faciliteranno la risoluzione di problemi che da soli non riuscireste a risolvere. E’ molto importante mantenere contatti con ex colleghi, amici, conoscenti, anche non esperti del vostro campo, che potrebbero aiutarvi in qualsiasi situazione.

E per iniziare? Dovrete innanzitutto farvi conoscere. Come? Ad esempio potrete adoperare diverse piattaforme dove verrete a conoscenza delle novità di un mondo che non avreste mai pensato di poter definire così dinamico.

Un consiglio? Date un’occhiata a twago e fate un salto nel futuro del lavoro!

Uno dei compiti più ardui che un web designer deve affrontare ogni giorno è la compatibilità con i diversi browser presenti sul mercato. Infatti quasi sempre una bella interfaccia grafica che si visualizza in maniera perfetta su Mozilla Firefox o Google Chrome non viene visualizzata correttamente in Internet Explorer! Purtroppo è difficile da pensare ma è un browser anche Internet Explorer e nonostante il profondo odio che tutti i web designer provano verso di esso non può essere non considerato anche perchè aimè sono ancora tantissimi gli utilizzatori.

Ma Per fortuna esistono dei piccoli script che agiscono come estensione alle proprietà standard css e che ci aiutano a visualizzare alcuni elementi non compatibili in IE. Lo script che vi descriverò oggi è Css3PIE.

Quante volte abbiamo sognato di avere la trasparenza dei png in Internet Explorer 6 oppure i box con gli angoli tondi e l’effetto ombra?! Bene oggi lo potete fare sfruttando Css3PIE. Vediamo come utilizzarlo con un esempio.

Esempio

Facciamo finta che volessimo creare un box di colore arancione con angoli tondi e ombreggiatura, e che sia correttamente visualizzato in tutti i browser, compreso IE. Quindi il codice che utilizzeremo sarà il seguente:

.moduletable-box2{
-moz-border-radius: 3px;
-moz-box-shadow: 0 0 3px 0 #666666;
box-shadow: 0 0px 3px 0 #666666;
border-radius: 3px;
-webkit-box-shadow: 0 0px 3px 0 #666666;
-webkit-border-radius: 3px;
background: none repeat scroll 0 0 #E6623C;
}

Notate come il codice box-shadow (per l’ombra) e border-radius (per creare li angoli tondi) è ripetuto 3 volte per la compatibilità con Firefox e Chrome, aggiungendo rispettivamente il prefisso -moz e -webkit, ma non ancora compatibile per Internet Explorer, perchè nonostante gli avessimo messo le proprietà queste non vengono riconosciute. A questo punto quello che vedremo sarà:

In pratica

Come potete vedere dallo screenshot sopra, in Internet Explorer ancora non viene applicata nessuna proprietà.
A questo punto richiamiamo tramite la proprietà behavior lo script css3PIE che scarichiamo da qui. Scompattato l’archivio, copiamo il file PIE.htc all’interno del nostro sito, e in coda alle proprietà css dell’esempio aggiungiamo

behavior: url("tuo_path/PIE.htc");

Ricordiamoci di specificare il giusto path al file PIE.htc, e stop! finito. Quello che vedremo anche in internet explorer sarà la stessa ed identica interfaccia:

Conclusioni

Sul sito dello script è spiegato anche come risolvere eventuali problemi di utilizzo come ad esempio in alcuni casi è opportuno inserire la proprietà position:relative; all’interno del blocco delle proprietà insieme al behavior. E poi come utilizzare la versione javascript dello stesso script.
Ricordiamoci che la proprietà la dobbiamo richiamare in ogni blocco in cui abbiamo bisogno di compatibilità in IE. Credo che questo sia un modo semplice ed efficace per ovviare a questi piccoli problemi che spesso ci fanno dannare!

WordPress è la piattaforma più utilizzata dai blogger proprio per la sua semplicità di utilizzo ed adattabilità ai diversi contesti, infatti partendo con il tema giusto possiamo creare un blog professionale, elegante e che rispecchia la nostra tematica, i blog infatti sono per lo più creati per parlare di una tematica ben precisa come la grafica nel mio caso, o in altri casi di pesca sportiva o di ricette e così via.

Bene, per coloro che desiderano incentrare il loro blog  sul gioco del poker, il sito PokerListings ha creato una toplist con i migliori 5 temi di poker per WordPress. Tra i temi più interessanti che potrete scaricare (ma non tutti sono gratis) ci sono:

1 – Spades: oggi mi sento Phil Ivey

Il tema è tutto quello che vi serve per partire, un codice pulito, una grafica elegante e poi ampio spazio ai contenuti! Funzionalità interessante è quella di integrare i vostri account di Twitter e Facebook direttamente dall’admin.

Unica pecca il tema è a pagamento, ma non costa poi così tanto se avete già in mente qualcosa più di un blog.

Demo & Download

2 – Megasino

E’ uno dei migliori temi per un blog dedicato al gioco del poker online. Il tema è ben strutturato e pulito. Supporta fin da principio l’integrazione con account  Twitter e video da YouTube ed offre anche un plugin per visualizzare la proprie photogallery in 3D nella sidebar. Il tema è gratuito!

Demo & Download

3- Poker News

Anche questo non è sicuramente da sottovalutare, molte caratteristiche sono comuni al precedente, l’interfaccia è semplice e il verde richiama il tavolo da gioco! Il tema è gratuito.

Demo - Download

4 – Casino Site 5

Come dice la descrizione di PokerListings probabilmente la foto delle tre ragazze svestite nell’immagine dell’header è uno dei motivi di maggior successo di questo tema. Potreste cambiarla con qualcos’altro, ma perché darsi pena? ;) Anche questo tema gratuito!

Demo – Download

5 – Table Poker Pro Mag

Tema interessantissimo anche quest’ultimo con una utilissima feature in homepage, quella di visualizzare i post più interessanti in testa a tutti. Il tema è gratuito!

Demo - Download

Conclusioni

Concludo dicendo che tutti questi temi sono ben organizzati e graficamente accattivanti, ma non sono tutto, il template è solo la base per poi costruire qualcosa di vostro, con i vostri plugin e i vostri contenuti! Perché è questo che rende un blog di successo! Quindi in bocca al lupo e alla prossima con una nuova raccolta di Template Tematici!

Si avvicinano le vacanze di Natale e tutti i blog e siti famosi cambiano il loro logo aggiungendo qualche dettaglio natalizio, un modo carino per augurare un buon natale a tutti gli utenti! Ma il solito cappellino natalizio è ormai trapassato, perché non aggiungere invece qualcosa di originale? vediamo in pochi minuti come aggiungere le luci natalizie intorno al nostro logo!

Il procedimento è veramente facile, basta un po’ di inventiva e poi Illustrator per disegnare il tutto.

Step 1: disegniamo le lampadine

La prima cosa da fare è disegnare le lampadine da aggiungere come decorazione al nostro logo, o header dove volete voi.

Aprimo un nuovo documento di Illustrator e con lo strumento penna iniziamo a creare base e vetro della nostra lampadina, in maniera molto veloce, non è importante fare un lavoro di precisione, perché applicate nel sito nelle dimensioni piccolissime non si riesce a percepire il dettaglio. Coloriamo con un riempimento sfumato con colori accesi.

Step 2: disegniamo il filo

Step successivo è quello di disegnare il filo della corrente attorno al nostro logo, quindi sempre con strumento pennino e dimensione tratto di 2px, iniziamo a disegnare dentro e fuori le gambette della scritta come se il filo fosse attorcigliato, quindi tagliando in maniera veloce i pezzi di linea che devono capitare dietro il logo e lasciando quelli avanti. Diamo alla linea il tipico colore verde scuro delle luci natalizie.

Step 3: applichiamo le luci

Ultimo step è quello di applicare le lampadine, in maniera casuale e con direzione diverse, sul filo appena creato.

Video del tutorial

Conclusioni

Ci sono diversi modi per rendere più originale l’elemento decorativo sotto le feste di natale, questo è uno dei tanti e come avete potuto vedere è molto facile realizzarlo. Possiamo anche dare diverse forme e dimensioni alle luci per caratterizzare ancora più la decorazione.

…e con questo GraphiCal vi augura un Buon Natale e Felice Anno Nuovo!

Con questo tutorial andrò a spiegare tutti i passaggi fondamentali per realizzare un template da zero, spiegando la struttura di base, quindi i file che lo compongono e le righe di codice necessarie per le funzioni tipiche di un blog in WordPress. Nel seguente tutorial non spiegheremo come applicare la grafica e il css, ma solo la struttura, il tutorial si completerà con la seconda fase appunto quella del design partendo ad esempio da un file photoshop, ma che vedremo nel prossimo post!

Abbiamo già visto come installare wordpress in locale, utilizzaremo quindi le conoscenze già acquisite per lavorare nel nostro ambiente di sviluppo locale, in modo da poter provare e riprovare senza creare danni. Iniziamo!

Introduzione

Il template che andremo a creare è un semplice tema a 2 colonne, che si compone degli elementi tipici di un sito/blog, quindi un header, un footer, il main content e la sidebar. Per seguire il tutorial non è necessario essere un mago della programmazione, bastano solo le basi per il resto spero di spiegare tutto nella maniera più accurata possibile.

La struttura

Il modello logico per lo sviluppo di un tema WordPress è basato essenzialmente su una struttura a pagine. Ogni pagina corrisponde ad un tipo di visualizzazione per il contenuto ed ogni tipo di visualizzazione corrisponde ad un file fisico (php) che dopo andremo a vedere uno per uno. Questo significa che per ogni tema ci potrebbe essere una file di visualizzazione per la lista dei post, per la vista singola o le pagine. Questi file sono indipendenti l’uno dall’altro e ogni uno contiene pezzi di codici e funzioni che nell’insieme costituiscono il sito come fosse un puzzle. Questo facilita di gran lunga il lavoro dello sviluppatore che lavora su singole porzioni di codice per modificare l’intera struttura di un template.

Non tutte le visualizzazioni però richiedono una visualizzazione diversa, avvolte la visualizzazione degli archivi è uguale a quella dei post, questo significa duplicazione di codice inutile. Per risolvere questo problema  il template è organizzato secondo una struttura gerarchica con la quale i file più generici rimpiazzano quelli più specifici. Quindi se nella struttura manca la parte di codice relativa agli archivi, verrà utilizzata la visualizzazione di default e cosi via. Il file di default che ci deve assolutamente essere in una struttura di template è index.php accompagnato da un file css che serve a dare la giusta formattazione agli elementi.

I file del template

Banalmente i file necessari per la costruzione di un template sono 7 (in realtà l’unico indispensabile come abbiamo detto è index.php), ma per costruire qualcosa di più articolato e scalabile è bene aggiungere più file dove ogni uno si occupapa di un’aspetto specifico del blog:

1. index.php: è la visualizzazione di default, l’homepage.
2. header.php: contiene la parte superiore del blog (il logo e il top menù)
3. footer.php: contiene la parte inferiore del blog (copyright, e altre info generiche sul sito).
4. page.php: è il template delle pagine interne del blog (come chi sono, contatti).
5. sidebar.php: la seconda colonna del sito contiene tutti i moduletti come le categorie, gli archivi dei post o in generale, i widgets per WP.
6. single.php: è il template per la pagina che contiene un singolo post (questa dal quale leggete il tutorial per intenderci)
7. style.css: è il file di stile che serve a dare la formattazione a tutti gli elementi del template.

E’ possibile anche aggiungere altri file per modificare altre parti di codice, come i commenti (comments.php), la ricerca (search.php) etc… per una guida completa leggere Template Hierarchy.

Step 1 – Creiamo i file

Iniziamo a creare la cartella che conterrà il nostro template e se stiamo sviluppando nel nostro ambiente locale con WAMP come abbiamo visto, la creiamo sotto C:/wamp/www/mioblog/wp-content/themes/  e la chiamiamo genericamente “wonderful” che sarà il nome del nostro template.

All’interno della cartella creiamo i primi 2 file della struttura, quindi creiamo un file di testo e lo rinominiamo index.php lo stesso facciamo con style.css. Più avanti andremo a vedere come riempire con il codice ogni singolo file.

Step 2 – Diamo un nome al Template

In teoria il nostro tema è già disponibile per essere attivato dal pannello di WordPress. Soltanto che è vuoto, non visualizzerà nulla se non una pagina completamente bianca, inoltre non avrà un nome ne un’immagine, un link, nessuna informazione sul tema creato. Quindi iniziamo a inserire queste informazioni semplicemente inserendo le righe di codice di seguito riportate all’interno del file style.css dove ogni tag è facilmente intuibile a cosa corrisponde.

/*
Theme name: Wonderful
Theme url: http://www.graphical.it
Description: Template sviluppato per il tutorial su GraphiCal
Version: 1.0
Author: <a href="http://www.graphical.it" title="Wonderful">Davide Calignano</a>
Author url: http://www.graphical.it
Tags: 2 colonne, clean, minimal
*/

Quando il nostro template sarà finito graficamente e vogliamo inserire una thumbnail nel riquadro predisposto, basterà inserire l’immagine rinominata screenshot.png all’interno della cartella del template.

Step 3 – Creiamo il layout

A questo punto iniziamo a scrivere il codice necessario a creare la struttura portante del nostro template. Iniziamo a lavorare su un singolo file per il momento e predisponiamo tutti i tag per poi riempirli successivamente con le funzioni wordpress.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Wonderful Blog</title>
</head>
<body>
  <div id="contenitore">
    <div id="header">
      <div id="logo"></div>
      <div id="menu"></div>
    </div>
      <div id="content"></div>
      <div id="sidebar"></div>
  </div>
  <div id="footer"></div>
  </div>
</body>
</html>

La nostra struttura è completa. Spieghiamo brevemente cosa sono quei div, innanzitutto un div è un contenitore come una scatola, che contiene al suo interno altre scatole, quindi raggruppa più div. Creare dei contenitori ci aiuta a dare una corretta formattazione agli elementi.

Dal codice si nota infatti che il div “contenitore” raggruppa tutto il resto. In questo modo tramite il css possiamo dire che il div contenitore deve avere ad esempio una larghezza di 900 pixel e deve stare al centro della pagina, in questo modo tutti i div in esso contenuti si adattano alle dimensioni della scatola e seguono lo stile del div padre.

Ricapitolando di seguito vediamo lo schema dei div utilizzati:

Step 4 – Header

Abbiamo detto che il template è composto da pezzi di codice che nell’insieme formano la struttura. Quindi a questo punto vediamo come suddividere il codice appena scritto in vari file. Partiamo dall’header.

Creiamo un nuovo file di testo e lo rinominiamo header.php al suo interno conterrà tutti gli elementi che si ripeteranno in ogni pagina del blog, quindi logo e menù oltre ai tag tipici di una struttura html ed eventuali script. Copiamo l’intestazione della pagina di codice creata prima, sino alla chiusura del div <header>, non ci preoccupiamo di chiudere tutti i div, resteranno aperti perché poi verranno chiusi successivamente nel resto dei file, infatti bisogna sempre lavorare tenendo in mente la visione completa della struttura e alla fine tutti i div devono ritornare chiusi. Quindi il nostro file header sarà così composto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Wonderful Blog</title>
</head>
<body>
  <div id="contenitore">
    <div id="header">
      <div id="logo"></div>
      <div id="menu"></div>
    </div>

Step 5 – Index, Page e Single

La vista index, page, e single sono apparentemente uguali, ma solo come div, in realtà poi ogni una andrà personalizzata con delle funzioni specifiche di wordpress. Per il momento saranno così composte:

<div id="content"></div>

Step 6 – Sidebar

La sidebar sarà formata dal div relativo:

<div id="sidebar"></div>
  </div>

Step 7 – Footer

Allo stesso modo dell’header il footer conterrà la parte finale del nostro blog/sito che si ripeterà ad ogni pagina, per cui sarà così composto:

  <div id="footer"></div>
  </div>
</body>
</html>

Step 8 – Style

Ed in fine ci occupiamo dello stile che lo vedremo in maniera non approfondita, ma ci servirà soltanto per dare le dimensioni giuste hai vari div in modo da iniziare a vedere la struttura del template, quindi in cosa alle informazioni del template scriviamo:

/*

Theme name: Wonderful

Theme url: http://www.graphical.it

Description: Template sviluppato per il tutorial su GraphiCal

Version: 1.0

Author: <a href="http://www.graphical.it" title="Wonderful">Davide Calignano</a>

Author url: http://www.graphical.it

Tags: 2 colonne, clean, minimal

*/

@charset "utf-8";

/* CSS Document */

body {

color:#333333;

font-family:Arial, Helvetica, sans-serif;

font-size:12px;

background-color:#CCCCCC;

}

div {

width:100%;

float:left;

}

a:link {

color:#fff;

}

a:hover {

color:#6666FF;

}

#contenitore {

width:900px;

margin:0 auto;

float:none;

min-height:100%;

height:100%;

background:#214b93;

}

#header{

background:#179594;

width:900px;

padding:15px;

}

#logo {

font-size:18px;

font-weight:bold;

background:#06dd42;

}

#logo h1 {

text-transform:capitalize;

font-size:18px;

margin:5px 0 0 0;

padding: 5px;

}

#logo a {

text-decoration:none;

padding: 5px;

}

#logo h5 {

margin:5px 0;

padding: 5px;

}

#menu {

margin-top:5px;

background:#08f5cb;

}

#menu ul {

list-style-position: inside;

list-style-type: none;

padding: 0px;

}

#menu li {

margin:0px 0 10px 10px;

padding: 0px;

list-style-type: none;

float:left;

}

#body {

margin-top:5px;

width:930px;

}

#mainBar {

width:730px;

background:#f5a100;

padding:10px;

}

#sidebar {

width:160px;

padding:10px 0 10px 10px;

margin-left:10px;

background:#d83a1d;

}

#sidebar form {

display:block;

margin:20px 0;

}

#sidebar h3, #sidebar h4 {

font-size:13px;

margin:10px 0 0 0 ;

}

#sidebar ul {

list-style-position: inside;

list-style-type: none;

padding: 0px;

}

#sidebar li {

margin-bottom:10px;

padding: 0px;

list-style-type: none;

}

#footer {

margin-top:5px;

padding:20px 0;

background:#faed00;

text-align:center;

width:930px;

}

#footer a{

color:#b00;

}

Step 9 – Le funzioni PHP

A questo punto non abbiamo fatto altro che disegnare la struttura, ma di fatto se facciamo una preview del template non visualizzeremo nulla perché ancora il nostro template non dialoga con wordpress.

Per far si che il tutto interagisca dinamicamente, c’è bisogno del PHP e wordpress ci mette a disposizione moltissime funzioni molto utili con le quali messe al posto gusto ci permetteranno di estrapolare le informazioni dal database e presentarle nel nostro template in maniera corretta.

Tra le più importanti c’è la bloginfo() la quale ci fornisce molti dati in base al valore della variabile passata come parametro. Vediamole in dettaglio:

• name -> restituisce il titolo del blog
• description -> è il motto del blog
• url -> l’indirizzo url
• rdf_url -> l’url del feed RDF/RSS 1.0
• rss_url -> l’url del feed RSS 0.92
• rss2_url -> l’url del feed RSS 2.0
• atom_url -> l’url del feed Atom
• pinback_url -> l’url di pingback
• admin_email -> l’indirizzo email dell’amministratore del blog
• charset -> il tipo di Encode utilizzato
• version -> la versione di WordPress installata
• wpurl -> l’url dell’installazione di WordPress
• template_directory -> l’url della directory del template in uso
• stylesheet_url -> l’url del foglio di stile style.css
• stylesheet_directory -> l’url della directory contenente il foglio di stile, e più in generale la root del vostro tema

Per una guida completa visitare: http://codex.wordpress.org/Template_Tags

Quindi se noi scriviamo <?php blogInfo(‘name’); ?> il browser ci restituirà il nome del nostro blog. Quindi verrà utilizzata nel nostro file header.php come segue:

<div id="logo"><h1><a href="<?php echo get_option('home'); ?>"><?php bloginfo('name'); ?></a></h1> <h5><?php bloginfo('description'); ?></h5></div>

Per capire più a fondo come funziona un tema WordPress, è necessario introdurre i concetti di “loop”.

Il loop è il ciclo attraverso il quale vengono estratti i dati di ogni post (o lista di post), e si compone praticamente di un ciclo while simile a questo:

<pre><?php if (have_posts()) : while (have_posts()) : the_post(); ?>
// output dei dati del post
<?php endwhile; endif; ?></pre>

La parte fondamentale di questo codice è rappresentata dalla funzione the_post(), che inizializza un oggetto PHP globale $post che contiene tutti i dati della pagina. Visto che tutte le funzioni per la visualizzazione e formattazione dei dati si appoggiano all’oggetto $post, il loop è necessario anche per visualizzare un singolo post.

Per una guida completa sullo sviluppo dei temi fte riferimento a questo indirizzo.

Questa funzione sarà utilissima per estrarre tutti i post e visualizzarli in home, per cui è necessario aggiungere quelle 2 righe di codice all’interno del nostro index.php e all’interno tutta la formattazione necessaria dei dati, che diventerà così:

</div>

</div>

<div class="storycontent">

<?php the_content('Read more &raquo;'); ?>

</div>

<small class="metadata">

<span class="category">Filed under:

<?php the_category(', ') ?>

<? if(!is_single()) echo "|"; ?>

<?php edit_post_link('Edit', '', ' | '); ?>

<?php comments_popup_link('Comment (0)', ' Comment (1)', 'Comments (%)'); ?>

</span>

<?php if ( function_exists('wp_tag_cloud') ) : ?>

<?php the_tags('<span class="tags">Article tags: ', ', ' , '</span>'); ?>

<?php endif; ?>						  </small>

</div>

<!-- fine elenco post -->

<?php comments_template(); // mostra l'include dei templates ?>

<?php endwhile; ?>

<div class="navigation">

<div class="alignleft">

<?php next_posts_link('&laquo; Previous Entries') ?>

</div>

<div class="alignright">

<?php previous_posts_link('Next Entries &raquo;') ?>

</div>

</div>

<?php else : // se non sono presenti i post mostra questo codice  ?>

<h2 class="center">Not Found</h2>

<p class="center">Sorry, but you are looking for something that isn't here.

</p>

<?php endif; ?>

</div>

<?php get_sidebar(); ?>

Il nostro index è diventato sicuramente più articolato, perchè presenta tutto il cuore del template, con tutte le funzioni per la corretta formattazione degli elementi estratti dal db.

Da notare anche l’aggiunta in testa e in cosa delle funzioni get_header() e get_footer(). Infatti, come dicevamo, queste funzioni permettono di inglobare il codice presente nel file relativo header.php e footer.php, in sostanza non c’è bisogno di riscrivere tutto il codice ma solo la funzione per includerlo, in questo modo si realizza la scalabilità di cui parlavamo all’inizio.

Risultato finale:

Conclusioni

Già soltanto con questi pochi elementi, studiando il codice che parzialmente è stato spiegato e capendo la logica che sta dietro è possibile costruire template abbastanza articolati. Non ho spiegato tutti i file e tutte le funzioni altrimenti mi sarei dilungato troppo, ma metto a disposizione  lo zip con il template appena realizzato in modo che potiate vedere il risultato finale e il codice nel suo intero. Nel prossimo Post andremo ad applicare la grafica e quindi font, colori ed immagini.

Dopo aver spiegato in pochi è semplici passi come installare wordpress in locale, e come comprare uno spazio web oggi vedremo il terzo ed ultimo step per pubblicare il nostro lavoro da locale a remoto e viceversa quindi andremo a sviluppare tutti i passaggi fondamentali e qualche trucchetto per farlo in maniera meno laboriosa possibile e veloce!

Innanzi tutto come abbiamo già detto nei precedenti post, WordPress è composto essenzialmente da file e da un DB, quindi per pubblicare tutto il lavoro online occorre recuperare questi due elementi.

Step 1

Recuperiamo i file che per chi ha installato il pacchetto WAMP per Windows si trovano in C:/wamp/www/, mentre in Linux con LAMP si trovano in var/www/. Identifichiamo la cartella del nostro progetto che abbiamo chiamato blog e creiamo un archivio zip della cartella blog (l’archivio zip ci semplifica i tempi per l’operazione di upload che dopo vedremo).

Step 2

Recuperiamo il DB esportandolo tramite l’utility di gestione database, phpMyAdmin. Se non è già avviato facciamo partire il nostro web server, quindi doppo click su WAMP Server nella cartella dei programmi, lui si occpuerà di far partire tutti i servizi necessari. Dall’icona di WAMP Server nella barra delle applicazioni facciamo click con il tasto sinistro del mouse e dal menù di scelta che viene fuori selezioniamo phpMyAdmin.

Dal pannello di phpMyAdmin nella colonna sinistra selezioniamo il database relativo al progetto che vogliamo pubblicare online, e nella colonna destra clicchiamo su Esporta si aprirà una nuova schermata per settare le opzioni di esportazione. Se non sono già selezionate facciamo attenzione a selezionare tutte le tabelle con l’apposito link Seleziona tutto e settiamo SQL come formato di esportazione, il resto lasciamo come di default. In fondo alla pagina selezioniamo la casella di spunta Salva con nome e proseguiamo con il pulsante Esegui. Abbiamo salvato il nostro DB che sarà un file con estensione sql.

Step 3

A questo punto che abbiamo il pacchetto dati e il pacchetto DB, passiamo a configurare l’ambiente remoto. Nel precedente post abbiamo visto come comprare uno spazio web, ora dobbiamo configurarlo in modo che sia pronto ad ospitare il nostro database.

Quindi accediamo al pannello di amministrazione dell’host, clicchiamo sull’icona di gestione DB e dalla procedura guidata  del nostro pannellino creiamo un nuovo database e associamogli un utente che avrà  un nome utente e una password. Cerchiamo di inserire una password abbastanza complessa, con numeri, lettere e simboli, che non sia uguale al nome del database o all’utente FTP. Bene abbiamo appena creato un nuovo DB vuoto, appuntiamoci le informazioni che abbiamo configurato, quindi ricapitolando:

• il nome del database
• l’utente associato al DB
• e la password del’utente

Queste informazioni ci serviranno in seguito quando dovremmo configurare wordpress dopo l’importazione dei dati sull’host.

Dal pannello di gestione DB importiamo il pacchetto sql del nostro sito tramite l’apposita funzione import. Se tutto è andato bene dovremmo vedere il nostro db popolato con le tabelle e i dati.

Step 4

Ora passiamo a caricare il pacchetto zip dei  file di wordpress nel nostro spazio host, ricordo che nel precedente post, abbiamo visto come configurare un nuovo utente FTP e come accedere all’host tramite il client FileZilla.

Quindi apriamo FileZilla, connettiamoci all’host, menu File > Gestore Siti > “nome-blog” > Connetti, dovremmo avere nella parte destra dell’applicazione tutte le cartelle che sono presenti sull’host, quindi individuiamo la root del dominio, che generalmente è www o public_html entriamo in quella cartella, mentre nella parte sinistra individuiamo l’archivio zip che abbiamo creato precedentemente nello step 1, che se non è stato spostato lo dovremmo trovare sotto C:/wamp/www. Ora facciamo un semplice drag and drop dello zip dalla parte locale alla parte remota, spostandolo nella cartella www.

Ora dobbiamo decomprimere l’archivio zip e questo tramite FTP non si può fare, quindi lo facciamo tramite il file manager del pannello di amministrazione dell’host.  Quindi accediamo al pannello, individuiamo il file manager, e tramite questo strumento che ci aiuta a navigare tra le cartelle presenti sull’host, individuiamo il pacchetto appena caricato, lo selezioniamo e  tramite l’opzione relativa lo decomprimiamo.

Non sempre il file manager ha questa opzione, in genere in cPanel c’è, ma ad esempio nel pannello proprietario di Aruba no! In questo caso possiamo utilizzare un trucchetto, che di seguito vi spiego:

1. Scaricate questo il file unzip.zip e ringraziamo Davide De Simone per la condivisione.
2. Decomprimete l’archivio e caricate la cartella unzip sull’host remoto in www tramite filezilla.
3. Posizionate il file zip da estrarre nella sottocartella upload, e richiamate il file index.php all’interno della cartella unzip (quindi dalla barra degli indirizzi del vostro browser andate su www.tuodominio.it/unzip/index.php), verrà creata nella stessa cartella upload una cartella con il file zip estratto con lo stesso nome del file, al termine l’archivio verrà rimosso.
4. A questo punto spostiamo i file di wordpress di 2 livelli superiori, in modo che siano nella root del dominio, in www/.
5. Possiamo eliminare la cartella unzip.

In poco tempo siamo riusciti a caricare tutto il sito sull’host con notevole guadagno di tempo.

Step 5

Abbiamo finito di caricare tutti gli elementi necessari, ma il sito non è ancora visibile perché la configurazione non è stata aggiornata con le nuove impostazioni del db. Quindi procediamo quanto segue.

Editiamo il file wp-config.php nella root del dominio. Wp-config.php è il file di wordpress che contiene tutte le informazioni per creare la connessione al Database. E siccome il database è cambiato perchè ne abbiamo creato un nuovo, dobbiamo di conseguenza aggiornare il file.

Le righe di condice da aggiornare sono le seguenti:

• define('DB_NAME', 'wordpress'); Inserite il nome del nuovo db
• define('DB_USER', 'userdatabase'); Inserite il nome utente associato al db creato prima
• define('DB_PASSWORD', 'dI0ò%a2jh7'); La password dell’utente
• define('DB_HOST', 'mysql.netsons.com'); Questo dipende dal vostro hosting, solitamente quest’informazione è esplicitata nella mail di configurazione inviata dal provider nel momento che lo acquistate.

Fine! Se avete eseguito tutti i passaggi correttamente, ora dovreste vedere il vostro sito pubblicato online!

Esportare un sito da remoto a locale

Per esportare il sito da remoto a locale, basta che eseguiamo tutto il procedimento al contrario, quindi:

Recupero del pacchetto DB esportandolo tramite phpMyAdmin.

Recupero dei file di wordpress scaricandoli dal’host remoto in locale tramite FileZilla.

In locale avvio tutti i servizi di server web e db con WAMP

Ricreo il database importando quello nuovo.

Posiziono i file di wordpress sotto il percorso locale C:/wamp/www

Modifico il file di configurazione di wordpress, wp-config.php, con le nuove impostazioni, ricordando che

• user: ‘root’
• pass: ‘ ‘
• host: ‘localhost’

Abbiamo il nostro sito in locale! ;)

Conclusioni

Spero che questa guida sia stata utile per chi come me qualche anno fa si affacciava in questo mondo e non aveva la minima idea da dove cominciare. Se pensi che sia stato così ringraziami condividendola in rete ;)