• Subito dopo aver caricato i file di Wordpress via FTP, accedendo alla cartella del sito vedremo subito questo messaggio:

E’ un messaggio di avviso per la creazione del file wp-config.php. Questa procedura funziona su tutti i principali host. Nel passaggio successivo avremo questa schermata:

In questa sezione vengono caricate informazioni fondamentali, perchè permettono a Wordpress di collegarsi al database MySQL. Tutte queste informazioni vengono poi salvate nel file wp-config.php:

define('DB_NAME', 'database-name');
define('DB_USER', 'database-username');
define('DB_PASSWORD', 'database-password');
define('DB_HOST', 'localhost');

L’host predefinito è localhost. Uno dei trucchi più simpatici è l’abilità di riconoscere in automatico l’host del proprio database, utilizzando questa stringa:

define('DB_HOST', $_ENV{DATABASE_SERVER});

Naturalmente questa stringa va inserita manualmente nel file wp-config.php.

Chiavi di sicurezza

Le chiavi di sicurezza in Wordpress sono delle variabili random che migliorano la protezione delle informazioni salvate nei cookie degli utenti. Nelle versioni precedenti alla 3.0, bisognava configurare queste chiavi manualmente all’interno del file wp-config.php. Con Wordpress 3.0, usando l’installazione guidata, le chiavi saranno aggiunte automaticamente. Inoltre, ora le chiavi disponibili sono ben 8 (a differenza delle precedenti versioni, che ne contavano soltanto 4) e sono le seguenti:

define('AUTH_KEY', 'put your unique phrase here');
define('SECURE_AUTH_KEY', 'put your unique phrase here');
define('LOGGED_IN_KEY', 'put your unique phrase here');
define('NONCE_KEY', 'put your unique phrase here');
define('AUTH_SALT', 'put your unique phrase here');
define('SECURE_AUTH_SALT', 'put your unique phrase here');
define('LOGGED_IN_SALT', 'put your unique phrase here');
define('NONCE_SALT', 'put your unique phrase here');

Prefisso del database

Nell’installazione guidata di Wordpress, una delle opzioni è quella di selezionare il prefisso delle tabelle. Questo valore è salvato nel file wp-config.php come:

$table_prefix = 'wp_';

Personalmente vi raccomanderei di cambiare il valore di default ‘wp_’ con qualcosa di diverso, e di farlo all’inizio della prima configurazione. Farlo successivamente prevederebbe altri passaggi che magari vi spiegherò in un successivo articolo.

Configurazione della lingua

La lingua predefinita per Wordpress è l’inglese, ma può essere modificato in queste righe:

define('WPLANG', '');
define('LANGDIR', '');

Il file di traduzione (.mo) deve essere copiato nella directory di default (wp-content/languages) e successivamente nella cartella include (wp-includes/languages).  Come si può vedere dalle due stringe, possiamo anche cambiare la cartella di default con i file di lingua. Per cercare le varie lingue disponibili per Wordpress, si può visiare la pagina ufficiale Wordpress Codex.

Debug in Wordpress

Per favorire il lavoro di tutti gli sviluppatori, Wordpress utilizza una direttiva apposita, settata di default su “false”, ma che in fase di sviluppo andrebbe tenuta sempre su “true”:

define(‘WP_DEBUG’, false); // disable debugging mode by default
define(‘WP_DEBUG’, true); // enable debugging mode

Indirizzo del sito/blog

Nei parametri di configurazione di Wordpress è possibile modificare l’indirizzo Wordpress e l’indirizzo del sito. Sono parametri aggiunti direttamente nel database, ed ogni qualvolta viene richiamato all’interno di un template, esegue una query. Dal Wordpress 2.2 questi due parametri sono stati aggiunti anche nel file wp-config.php e bypassano automaticamente quelli inseriti nel database (permettendo quindi modifiche e test senza cambiare i parametri originali):

define('WP_HOME', 'http://www.wpbeginner.com');
define('WP_SITEURL', 'http://www.wpbeginner.com');

Aggiungendo queste due direttive, riduciamo automaticamente il numero di query al database, migliorando le performance del nostro sito basato su Wordpress.

Bypassare i permessi ai file

E’ possibile bypassare manualmente i permessi dei file (soprattutto nel caso di hosting particolarmente rigidi). Non servirà a tutti, ma eccovi le direttive:

define('FS_CHMOD_FILE', 0755);
define('FS_CHMOD_DIR', 0644);

Requisiti:

• Un iPhone 3G o un iPod Touch 2G con iOS 4.0 installato
• iTunes 9.2 installato sul PC/Mac
• Firmware 4.0 salvato anche sul desktop del proprio computer

Dispositivi supportati:

• Potete eseguire questa guida soltanto sugli iPhone 3G e iPod Touch 2G.

Download:

• Redsn0w per Windows.
• Redsn0w per Mac.

Guida

• Collegate l’iPod Touch/iPhone al vostro Mac con il cavetto USB.
• Lanciate Redsn0w e cliccate su Browse. Selezionate il Firmware 4.0 originale (precedentemente scaricato sul desktop dal sito Apple) dal desktop e successivamente cliccate su Next.

• Inizierà un processo autmatico (e molto veloce) nel quale verrà caricato e patchato il kernel.

• Apparirà ora una nuova schermata dalla quale dovrete selezionare i package da installare. Selezioniamo Cydia e, in caso lo volessimo, anche la spunta per attivare il Multitasking e la possibilità di cambiare lo sfondo anche alla SpringBoard.

• Verrà richiesto di mettere l’iPod Touch/iPhone 3G in DFU. Per farlo bisogna:
  • Premere il tasto Home + Accensione per 10 secondi esatti dopodichè rilasciare il tasto Accensione continuano a premere soltanto Home finchè non apparirà una schermata tutta bianca (circa 30 secondi).
• Si avvierà, quindi, un altro processo automatico che in pochissimo tempo eseguirà il jailbreak.
• Una volta completato, al restart l’iPod Touch/iPhone 3G sarà sbloccato e funzionate, ma probabilmente vedrete l’icona Cydia tutta bianca e senza repository. Lanciate l’applicazione, entrate in Manage -> Sources -> Edit -> Add ed aggiungete:
  • http://apt.saurik.com/cydia-3.7
• Una volta aggiunta, dovrebbe tornare tutto perfettamente funzionante, compreso il logo di Cydia e le altre repository ufficiali: BigBoss, ModMyi ed ovviamente iSpazio.

BubbleUp

Il plug-in BubbleUp permette la visualizzazione delle immagini inserite in una lista con l’ingrandimento delle stesse al passaggio del mouse, grazie ad un’animazione fluida, con un effetto molto simile alla dock di un sistema Mac.

Spritely

Spritely è un plug-in jQuery realizzato da Artlogic per la creazione di background e personaggi animati, utilizzando HTML e javascript.

jQuery-Notes

jQuery-Notes è un plug-in jQuery semplice ed intuitivo, e vi permette di aggiungere delle note ad ogni immagine sul vostro sito web o sul vostro blog.

Quicksand

Questo plug-in rimette in ordine e filtra i vari oggetti con una piacevole animazione. Basta specificare il contenitore sorgente e la destizionazione che prenderà il posto di quella originale. I nuovi elementi appariranno con un gradevole doppio effetto di scaling e trasparenza, mentre quelli vecchi andranno a scomparire nello stesso tempo.

YoxView

YoxView è un visualizzatore di immagini con pop-up, creato con jQuery 1.4. E’ piuttosto semplice ed altrettanto potente e completo. Le caratteristiche principali sono:

• Le immagini posso essere ridimensionate per rientrare nella finestra del browser
• Le immagini possono essere caricate preventivamente
• Possono essere usate diverse istanze all’interno della stessa pagina, e questo è ideale per articoli di un blog, ad esempio
• E’ completamente configurabile ed ogni istanza puù avere una differente configurazione.

Masonry

Masonry è un plug-in jQuery per la gestione del layout. Consideratelo pure una specie di sistema di gestione di blocchi fluttuanti.Il plug-in permette di risistemare gli elementi a proprio piacimento, sistemando automaticamente sia in orizzontale che in verticale, seguendo una griglia di base.

Ttabs

Ttabs modifica il codice html e richiama la funziona UI Tabs. Non c’è bisogno di indicare la lista di tab prima della prima sezione. Il plug-in lo crea dall’inizio, e nel caso è possibile specificare le etichette dei vari tab nel codice javascript.

TipTip

TipTip è un comodo plug-in jQuery per la gestione di tooltip customizzati. Non usa immagini ed è totalmetne configurabile via CSS. Inoltre pesa soltanto 3.5kb!!!

jQuery Photoshoot

jQuery PhotoShoot ci permette di convertire qualunque div presente sulla pagina web in uno “scatto fotografico”, e comprende anche un visualizzatore degli scatti in tempo reale.

jqFancyTransitions

jaFancyTransitions è un plug-in jQuery semplice da usare ed implementare, e consiste nella gestione di immagini con un effetto slideshow pieno di effetti eleganti. E’ compatibile e perfettamente testato con Safari 2+, Internet Explorer 6+, Firefox 2+, Google Chrome 3+, Opera 9+.

Se finora non vi siete ancora lanciati alla scoperta di questo nuovo mondo, quale migliore occasione che scoprire 10 template web gratuiti realizzati in HTML 5 e CSS 3, pronti per essere studiati e analizzati.

HTML5 Started Pack

HTML5 Starter Pack è un ottimo template, perfettamente modellabile ad ogni situazione. Questo template è cross-browser (incluso IE6), già ottimizzato per i tablet e i netbook, può avvalersi di Cufòn e include alcune classi ri-usabili. Inoltre include anche un file PSD con il layout.

Gotta’ love HTML5 & CSS3

Un layout da galleria immagini basato su HTML5 e CSS3, che include:

• transizioni animate (come ad esempio una descrizione animata attivata all’hover sull’immagine) usando soltanto il CSS;
• un interfaccia tabellare per le varie gallerie usando l’elemento :target di CSS3.

A Free HTML5 and CSS3 Theme

Questo template prevede una sub-page e un form per contatti con validazione server-side e codice (in PHP) per l’invio della mail. Utilizza 960.gs ed include l’uso di un font custom chiamato Chunkfive (sfruttando la funzione @font-face di CSS3).

Coding a HTML 5 Layout From Scratch

Questo template è un’ottima vetrina dimostrative per gli elementi header, footer, section, etc.
E’ stato utilizzato anche hCard microformat per definire il creatore del template. Per il CSS3 troviamo l’utilizzo dell’ombra per i testi e altre funzioni.

52framework

52framework è uno strumento completo che potrà aiutarvi a costruire un sito in HTML5 e CSS3 utilizzando i nuovi tag, i campi form, gli angoli arrotondati, ombre testuali, e tanto altro ancora. Include un sistema a griglia e un CSS reset (modificato per HTML5).

iPhone App. Website With HTML5

Un tutorial completo e dettagliato per la creazione di un’applicazione iPhone in formato sito web usando CSS3 e HTML5. Il template in oggetto utilizza i nuovi tags, quali section, aside, header e footer.

Create an Elegant Website With HTML5 And CSS3

Questo tutorial consiste nella creazione di una semplice pagina web in HTML5 e CSS3 e condivide anche il risultato finale con un comodo download. Sono stati utilizzati molti elementi nuovi ed è stato integrato Modernizr per la compatibilità con IE.

Free HTML5 Template

Un layout HTML presentato in versione 2 colonne  e 3 colonne. Include inoltre anche il file PSD.

HTML5 & CSS3 One-Page Template

Un template a singola pagina che sfrutta il jQuery per le slide animate. Viene fornita anche una versione in HTML semplice.

FlipThru HTML5 and CSS3 Template

Questo è un template semplice, ma elegante, e che sfrutta buona parte delle caratteristiche dell’accoppiata HTML5-CSS3. Prevede anche l’uso di uno slider Accordion realizzato tutto in CSS3.

Che cos’è l’HTML semantico

La semantica è la scienza che studia il significato, di come viene generato e applicato ai segni. “Perchè X significa Y?” è una questione di semantica. L’HTML è un linguaggio di marcatura usato per realizzare pagine web, ed è interpretato dai browser web, e da altri tipologie di “agenti”, quali cellulari, motori di ricerca, etc.

L’HTML consiste di due tipologie di elementi:

• i Tag
• il contenuto testuale

Alcuni tag possono essere contenuti di se stessi (vedi le immagini, i filmati in Flash o i metadata), ma la maggior parte è usata per creare una struttura per il contenuto.

L’HTML semantico, o HTML semanticamente corretto, è il linguaggio HTML in cui i tag vengono studiati e selezionati appositamente per il significato del contenuto. Facciamo un esempio! Per creare una pagina che usi un HTML semanticamente corretto:

• Un tag paragrafo (<p></p>) dovrebbe trovare uso solo nel caso di un paragrafo (che è un concetto strutturale) e non per creare uno spazio in una pagina web. Mai usare una serie di tag <p> per creare spazio!
• I tag grassetto (<b></b>) e corsivo (<i></i>) non dovrebbe mai essere usati,  perchè hanno a che fare con la formattazione, ma non con il significato o la struttura del contenuto. Piuttosto, vanno usati i tag (<strong></strong) e (<em></em>) (che significa enfasi), che modificheranno rispettivamente il testo in grassetto o corsivo, aggiungendo anche un significato alla struttura del contenuto.
• I tag HTML non dovrebbe mai essere usati per applicare uno stile grafico, perchè questo è il lavoro principale del CSS (Cascading Style Sheets).

Perchè l’HTML semanticamente corretto è migliore

Scrivere codice HTML semantico comporta notevoli benefici:

• Facilità d’uso
• Accessibilità
• Ottimizzazione per i principali motori di ricerca
• Riutilizzo

Facilità d’uso

Prima di tutto, l’HTML semantico è un HTML pulito e chiaro. E’ decisamente più semplice e immediato leggere e modificare il codice senza aver a che fare con tanti tag extra e stili inline. Scrivere codice in questo modo ci permette anche di risparmiare tempo (e soldi) quando altre persone e/o collaboratori dovranno interagire con esso – ad esempio, uno sviluppatore web che deve implementare la nostra pagina all’interno di un CMS o di una web application. Infine, i file HTML semantici sono naturalmente anche più leggeri, e vengono caricati dai browser più velocemente.

Accessibilità

A meno che non dobbiate interagire con il codice HTML attraverso media diversi da un browser web, non è affatto scontato immaginare che le nostre pagine web hanno una vita anche fuori dalla finestra di Internet Explorer, ma spesso è così, perchè possono essere utilizzate e visualizzate anche da persone o dispositivi in maniere del tutto differenti.

Quando separiamo l’aspetto visuale (in questo caso, lo stile) dall’attuale significato di un documento, finiamo per ottenere un documento che significa sempre la stessa cosa. Cambia il modo in cui è presentato o in cui viene usufruito. Una delle tecniche più comuni tra i web designer è di applicare differenti CSS a seconda dei media usati. Ad esempio, possiamo applicare uno stile per la stampa su carta, un altro per la visualizazione su schermo, e un altro ancora per la visualizzazione su un browser che converte il testo in audio. Questi browser “speciali” riconoscono anche tag come <strong> o <em>, ma li trattano in maniera totalmente differente da un browser classico, cambiando il tono della voce o il volume, piuttosto che il contrasto o lo stile del testo, il che porta comunque allo stesso significato, ma in un contesto differente.

Ottimizzazione sui principali motori di ricerca

Gli spiders e i crawlers dei motori di ricerca, quale Googlebot, rappresenta un altra tipologia di dispositivo capace di interpretare HTML. Questi, inoltre, valutano anche il contenuto di una pagina web, per cercare di apprenderne il significato.

Quando un crawler trova una pagina web, salva un rapporto su ciò di cui tratta la pagina in un database indicizzato, da usare poi nel caso di corrispondenze nelle ricerche web. La domanda principale è: in base a cosa i motori di ricerca danno priorità ai vari termini ricercati sulle pagine risultanti?

Naturalmente, tutti utilizzano sistemi differenti, ma una delle chiave fondamentali dell’ottimizzazione è di usare il caro buon vecchio buon senso. Se fossimo un motore di ricerca, come ci muoveremmo? Se provassimo a immaginare i problemi che incontra un motore di ricerca, ben poche cose sarebbero chiare. Ad esempio, supponiamo di avere 2 pagine web con esattamente lo stesso contenuto (10 Kb). La seconda pagina ha 30 Kb di codice addizionale, markup superfluo fatto di stili inline, molti <div> annidati e immagini decorative. Naturalmente questa pagina apparirà sicuramente più gradevole ad un visitatore (forse), ma se ogni pagina contiene il termine di ricerca “bluebottle” 5 volte, quale pagina sceglieremmo (sempre supponendo di essere un motore di ricerca) come più adatta al risultato di una ricerca con termine “bluebottle”?

Sicuramente la prima pagina, più leggera, per una serie di motivi:

• La densità di keyword di una pagina più leggera è superiore. Ritroviamo infatti il termine 5 volte in 15 kb, al contrario della seconda, dove il termine ricorre 5 volte in 40 Kb. Qualunque sia il codice extra, sicuramente non riguarderà il termine “bluebottle”.
• Il termine apparirà sicuramente più volte più in alto nella pagina leggera che non in quella di 40 Kb. Naturalmente, prima troviamo la parola nel nostro documento, prima vuol dire che quel documento è esattamente quello che stavamo cercando o che il termine riguarda specificamente il contenuto di esso.
• Assumendo che la prima pagina sia scritto con HTML semantico, è probabile che il termine compaia all’interno di un tag di alto valore (quale può essere un tag heading o un link) in questa pagina piuttosto che nella pagina “graficamente ricca” (che potrebbe usare un’immagina come link, senza magari neanche il giusto attributo ALT).

Riutilizzo

Quando il nostro contenuto (ed il relativo significato) è separato dallo stile (CSS diversi a seconda del media), esso potrà essere compreso nello stesso modo da tutti i dispositivi. Questo vale anche per eventuali dispositivi a noi ignoti (come i crawlers automatici che raccolgono i feed RSS su determinati argomenti, oppure motori di ricerca specifici per immagini o video), o altri ancora che non sono stati inventati.

Negli ultimi due anni si è assistito all’uso di una miscelazione di contenuti come una delle principali caratteristiche di siti e applicazioni web. Tutto ciò avviene anche senza la consapevolezza del creatore dell’origine di questi contenuti, ma nella maggior parte dei casi questa libertà di “condivisione” porta solo ed esclusivamente benefici al creatore originale.

Spesso in queste situazioni il contenuto preso da una pagina web è formattato in maniera differente all’interno di una nuova pagina, il che obbliga a rimuovere ogni stile inserito all’interno. (Notare che gli stili inline, applicati quindi direttamente ai tag HTML, sovrascrivono le informazioni provenienti da CSS esterni, quindi dovrebbero essere rimossi sempre).

Ovvio che è decisamente più facile prendere e riutilizzare il contenuto web da altre fonti, e applicarle a vari media, quando questo contenuto non presenta informazioni di stile inserite specificamente all’interno e quando viene utilizzato al suo interno HTML semantico che può aiutare un programma a comprendere il significato e la struttura del contenuto stesso.

1. Creare una nuova pagina php, salvarla come wp404.php nella root della nostra installazione Wordpress.
2. Copiare e incollare il seguente testo:

<?php
// This is the default file for the site. Usually index.php
$default = 'index.php';

// The name of this file.
// Set this value for the URL in Custom Error Properties of your website in IIS.
// Goto: IIS Manager > Websites > [Site Name] > Properties > Custom Errors >
// 404 & 404;2 & 404;3 > URL (Requires a '/' prefix in IIS).
$thisfile = '404-handler.php';

$_SERVER['ORIG_PATH_TRANSLATED'] = str_replace($thisfile, $default, $_SERVER['ORIG_PATH_TRANSLATED']);
$_SERVER['SCRIPT_FILENAME'] = str_replace($thisfile, $default, $_SERVER['SCRIPT_FILENAME']);
$_SERVER['ORIG_PATH_INFO'] = str_replace($thisfile, $default, $_SERVER['ORIG_PATH_INFO']);
$_SERVER['SCRIPT_NAME'] = str_replace($thisfile, $default, $_SERVER['SCRIPT_NAME']);
$_SERVER['PHP_SELF'] = str_replace($thisfile, $default, $_SERVER['PHP_SELF']);
$_SERVER['PATH_INFO'] = false;

$qs =& $_SERVER['QUERY_STRING'];
$ru =& $_SERVER['REQUEST_URI'];
$pos = strrpos($qs, '://');
$pos = strpos($qs, '/', $pos + 4);
$_SERVER['URL'] = $ru = substr($qs, $pos);
$qs = trim(stristr($ru, '?'), '?');

// Required for Wordpress 2.8+
$_SERVER['HTTP_X_ORIGINAL_URL'] = $ru;

// Fix GET vars
foreach ( $_GET as $var => $val ) {
if ( substr($var, 0, 3) == '404') {
if ( strstr($var, '?') ) {
$newvar = substr($var, strpos($var, '?') + 1);
$_GET[$newvar] = $val;
}
unset($_GET[$var]);
}
break;
}
include($default);
?>

3. Ora andiamo nel nostro pannello IIS, tasto destro su Websites -> Nome del sito -> Proprietà -> Custom Errors, e cambiamo le pagine assegnate agli errori 404, 404-2 e 404-3, utilizzando come tipo file URL (mi raccomando di inserire il simbolo “/” come prefisso al nome del file).

4. Nel pannello di amministrazione di Wordpress, da Impostazioni -> Permalink possiamo utilizzare uno dei permalink di base o costruirne uno personalizzato (in quest’ultimo caso vi consiglio di leggere caldamente una delle guide di Wordpress in proposito).

5. Et voilà! Potrete caricare finalmente il vostro frontend e magicamente, i link ai post, alle pagine e agli archivi saranno visibili in maniera elegante e google-friendly, e funzioneranno alla perfezione.

AVVISO IMPORTANTE

Io sono esonerato da qualsiasi responsabilità, la guida è stata realizzata per solo scopo informativo. E’ vostra la responsabilità dell’esecuzione di tale procedimento e delle eventuali conseguenze.

Guida completa passo passo:

1. Scarica la nuova versione, Blackra1n RC3 (risolti vari bug e in più sblocco per iPhone stranieri).

2. Dopo aver scaricato Blackra1n spostatelo nella directory C: del vostro PC.

3. Spegni il tuo iPhone e collegalo, con il cavo USB, al tuo PC (assicurati che il iPhone sia spento!!)

4. Adesso avvia blackra1n e ti uscirà questa schermata:

5. Premi il tasto “make it ra1n”.

6. Adesso accendiamo l’iPhone (sempre collegato al pc) e aspettiamo che si avvii.

7. Dovete aspettare (non toccate nulla): Adesso il programmino metterà il vostro iPhone in RECOVERY MODE e in poco tempo procederà con lo sblocco, potete incominciare ad utilizzare il vostro iPhone quando apparirà sullo schermo la LockScreen (schermata inziale dove lo sbloccate i tasti scorrendo con il dito verso destra).

8. Adesso potete ammirare l’icona di Blackra1n sulla vostra Springboard, prima di cliccare sopra l’icona di Blackra1n dopo eseguire un altro passaggio.

9. Andate su Impostazioni  >> Wi-Fi e collegatevi. Adesso fate partire l’applicazione (blackra1n) e potete decidere di installare: Cydia, Rock e Icy. Voi installate Cydia, basta selezionarlo e poi premere il pulsante in alto a destra: INSTALL:

PERFETTO! IL JALBREAK E’ STATO COMPLETATO!!

Secondo le ultime stime di Assocomunicazione, nel 2009 gli investimenti pubblicitari scenderanno del 21,5% nella stampa, del 10,2% nella tv, del  9,4% nella radio e del 13,9% nelle affissioni. «Alla luce del macro-scenario economico e considerando la flessione degli altri mezzi – ha detto Layla Pavone, presidente di IAB Italia – la crescita del 10,5% nell’advertising digitale è un dato estremamente positivo».

«Gli italiani sono sempre di più online e dedicano alla navigazione un tempo qualitativamente di valore, prestando grande attenzione ai messaggi e ai contenuti che provengono dalla rete», ha commentato Pavone. «È tempo di capitalizzare questo fenomeno di massa per dare impulso a nuovi servizi per i cittadini e per sviluppare business tradizionali su scala globale».

Risultato finale

Di seguito trovate l’immagine del layout definitivo che andremo a creare con questo tutorial.

Definiziamo il documento Photoshop

1. Creiamo un nuovo documento in Photoshop con le seguenti dimensioni: 1200px x 1160 px e settiamo i parametri dello stesso seguendo questa immagine:

Creiamo il background del Layout

2. Nel primo layer, creiamo il nostro background usando lo strumento Gradiente (G). Assicuriamoci che sia selezionato Gradiente Lineare come tipo gradiente. Settiamo il colore in primo piano a #9D6000 e il colore di sfondo a #FFFFFF.

Aggiungiamo una texture al background

3. Ora aggiungeremo alcune texture al nostro background sfumato. Scarichiamo da qui l’immagine da usare come texture. L’immagine è gratuita per uso personale e commerciale, ma non può essere rivenduta in nessun modo. Apriamo il file chiamato 3484741593_7575a6ebc7_b.jpg in Photoshop, File -> Apri (CTRL + O). Usiamo la funzione Trasforma (CTRL + T), e tiriamo la texture in modo da coprire tutto lo sfondo.

4. Usando un normale pattern gomma (E) con un diametro di 300px e l’opacità settata al 21%, cancelliamo il lato sinistro e tutta la parte bassa della texture. Nell’immagine successiva potrete vedere bene quali aree cancellare.

5. Scarichiamo da qui e apriamo il file 3484744611_f995d6c67f_b.jpg in Photoshop e trasciniamolo sul nostro piano di lavoro. Usiamo lo strumento Trasforma (T), ruotiamolo di 90 gradi in senso orario. Cambiamo la modalità di blending di questa texture in Luminosità e settiamo l’opacità del layer al 39%. Ripetiamo il passaggio numero 4 anche a questa texture, cancellando le stesse sezioni con un cancelletto soft.

6. Scaricate qui un interessante e utilissimo pacchetto di brush per Photoshop. Questo set è gratuito per uso personale e commerciale, ma non può essere rivenduto. Ora selezioniamo lo strumento Pennello (B) e selezioniamo questa brush cliccando sulla freccia, come nell’immagine seguente:

Non appena sarà aperto il pannello, cliccate sulla freccia (come da immagine seguente) e selezionate Carica Pennelli:

7. Ora crate un nuovo livello al di sopra delle texture. Settiamo il colore di primo piano a #000000, usiamo la sesta brush dal set che abbiamo appena installato (come da foto):

Una volta selezionato, clicchiamo sulla nostra immagine per “stampare” la brush, piazzandola non al centro, ma leggermente decentrata a sinistra, come da immagine seguente:

Cambiamo la modalità di questo livello a Sovrapponi e settiamo l’opacità al 52%, così da raggiungere questo risultato:

8. Ripetiamo tutto il passaggio numero 7, ma selezionando un’altra brush dal nostro nuovo set, quella con codice 2500:

Settiamo la modalità di questo livello a Sovrapponi e l’opacità al 41%. Dovremmo ottenere alla fine un risultato come il seguente:

9. Creiamo un altro livello, selezioniamo nuovamente la brush del passaggio 7 (la n. 2499), ma stavolta selezioniamo come dimensione 432 px e applichiamola in alto a sinistra del nostro canvas:

10. Su questo stello livello, utilizzando lo strumento Sfumino con una brush tonda morbida, clicchiamo e sfumiamo su quest’ultimo livello, trascinando verso il basso, fino ad ottenere un risultato simile al seguente:

11. Cambiamo adesso la modalità di questo livello su Sovrapponi, e l’opacità al 35%:

Settiamo le guide di Photoshop

12. E’ giunto il momento di inserire il contenuto. Per poter essere sicuro di inserire il materiale perfettamente al centro, inseriamo due guide equidistanti partendo dal lato sinistro e destro, per una larghezza di 1000 px, come da immagine:

Creiamo il logo

13. Utilizziamo lo strumento Testo Orizzontale (T), con un colore #3A0707, e aggiungiamo il titolo del sito web al nostro canvas. Come font possiamo utilizzare Stampete (scaricabile qui) o altri che potrete trovare qui. Sono tutti gratuiti per uso privato.

Creiamo la barra di navigazione

14. Sulla stessa riga del logo, ma sul lato destro, creiamo la barra di navigazione con i link principali del nostro sito web, utilizzando lo stesso font del logo, ma di dimensione ridotta:

15. Aggiungiamo un divisore tra le voci della barra di navigazione, utilizzando sempre lo strumento Testo Orizzontale (T), scrivendo I tra le voci utilizzando lo stesso font e lo stesso colore. Questo carattere farà da vero e proprio separatore. E’ consigliabile utilizzare una dimensione della I leggermente superiore, per rendere maggiormente evidente la separazione tra le varie voci.

Creiamo la sezione I MIEI LAVORI

16. Al di sotto della nostra “testata” (composta da logo e barra di navigazione), inseriamo la sezione I MIEI LAVORI, che sarà caratterizzata da un’immagine di un nostro lavoro rappresentativo (che servirà poi da miniatura e come link alla scheda dettaglio del lavoro), e la descrizione sul lato sinistro, utilizzando come titolo lo stesso font (nel nostro caso Stampete), e come testo descrittivo un più classico Arial.

Per l’immagine che abbiamo selezionato come miniatura del nostro lavoro, creiamo una traccia, utilizzando l’opzione di fusione Traccia, con colore #BA5009, e grandezza 12 pixel, come da immagine seguente:

Creiamo la sezione ALTRI LAVORI

17. Ora aggiungeremo una sezione “ALTRI LAVORI” appena sotto la miniatura del nostro lavoro principale. Come colore del titolo, utilizzeremo lo stesso della cornice al punto 16, #BA5009.

Per le immagini scelte, utilizziamo la stessa funzione del punto 16, ma con dimensione 16px e con colore #E7C788.

Creiamo la sezione “Informazioni sul sito”

18. Sul lato sinistro della sezione “I NOSTRI LAVORI”, creiamo una sezione, con titolo “Informazioni sul sito”. Come titolo utilizziamo colore e font della sezione a destra, mentre per il testo descrittivo il solito Arial.

Creiamo la seconda sezione contenuto

19. Sotto questa prima sezione contenuto, costituita da “Informazioni sul sito” e “Altri lavori”, creiamo una seconda sezione, dove inseriremo i riferimenti per i contatti (Get in touch), Flickr (con le foto di altri lavori o gallerie preferite) e Twitter. Utilizziamo come font e colori gli stesso del passaggio 18.

Creiamo il piè pagina

20. Alla fine del nostro canvass, sotto le tre sezioni che abbiamo creato, realizziamo il nostro piè pagina (footer). Creiamo un nuovo livello e utilizzando lo strumento Rettangolo (U) realizziamo un rettangolo in basso, e con il secchiello riempiamo il tutto con il colore #BA5009. Questa sezione conterrà le informazioni base sul copyright.

21. Usiamo lo strumento Gomma (E) e, selezionando uno qualunque dei brush installato precedentemente, creiamo un nuovo livello e riduciamo l’opacità del livello al 21% (come da immagine):

Ora cancelliamo alcune parti del rettangolo del nostro piè pagina, e appena finito inseriamo i dati sul copyright utilizzando il colore bianco e lo strumento Testo Orizzontale, scrivendo esattamente al centro del rettangolo.

Assicuriamo che al momento dell’aggiunta del testo sul copyright, la funzione di anti-aliasing testuale sia attiva, in modo da rendere i caratteri chiari e perfettamente leggibili.

Creiamo le linee divisorie orizzontali

22. Ora, per il tocco finale, creiamo le linee che separano le nostre sezioni. Creiamo un nuovo livello, utilizziamo lo strumento Matita (B), con un diametro di 2px e tracciamo una linea orizzontale tra la testata e prima sezione contenuti. E’ consigliabile tenere premuto il tasto Shift per tracciare una riga dritta e precisa.

23. Selezioniamo nuovamente lo strumento Gomma (E), selezioniamo una delle brush del nostro set, settiamo il diametro a 97 px e l’opacità al 40%. Cancelliamo un pò a caso sulla linea appena tracciata, per ammorbidirla e renderla più “grunge”.

24. Duplichiamo questo livello, cliccando con il tasto destro sul livello e selezionando “Duplica livello…” e utilizziamo le copie che ci servono per dividere le restanti sezioni, come nell’immagine seguente:

CONGRATULAZIONI! Avete completato il tutorial in maniera esemplare e ora potrete gustarvi il canvas web con stile grunge del vostro nuovo sito web. Al prossimo tutorial completo su Photoshop e Web Design.