HTML/AJAX/jQuery/CSS/PHP/Silverlight/WordPress

LE BASI DELLA
PROGRAMMAZIONE TUT
Una nuova serie dedicata a JavaScript per COV ORIAL
muovere i primi passi nella programmazione web E
Com R FLO
fanta realizzar W
e
s e
di na tici menu
vigaz
anim ione
ati
Poste Italiane S.p.A. - Spedizione in Abbonamento Postale - D.L. 353/2003 (conv. in L. 27/02/2004 n. 46) Art. 1, Comma 1, LO/MI

¤ 6,99
Febbraio 2012 :: Mensile :: N. 56

Le più importanti API per i social
network Google+, Facebook, Twitter
COME
Migliorare gli sfondi con i CSS3
Realizzare post WordPress a tutta larghezza
Creare indimenticabili visualizzazioni per Twitter
Usare la suite Muse di Adobe per costruire siti web
 56
Numero 56 - Mensile – Febbraio 2012
Registrazione presso il Tribunale di Tivoli
con il n. 32/2008 del 26/11/08
ISSN 1724-4692
MAGAZINE TEAM
Direttore Responsabile: Alessandro Ferri
Publisher: Andrea Grassi
Consulente Editoriale: Stefania Furnari
Redazione: Silvia Leoni, Dario Orlandi
Segreteria di Redazione: Paola Gavazzi
Art Director: Giorgio Meo
Designer: Francesca Giorgioli, Chiara Fallani
Grafici: Federica Aschi, Stefano Caldari, Enrica Casciotti,
Giona Ciammetti, Luca Galassi
Realizzazione CD/DVD: Marco Bianchi
Hanno collaborato: Giuseppe Lentini
Redazione
Viale E. Forlanini, 23 - 20134 Milano
Tel. 02/45472867 - Fax. 02/45472869
Servizio Arretrati
Play Media Company Srl
Roma: Tel. 06/33221250 - Fax 06/33221235
email: arretrati@playmediacompany.it
Servizio Abbonamenti
Diffusione Editoriale Srl
Via Raffaele De Cesare, 88 - 00179 Roma
Tel. 06/78147311 - 06/7802017 - Fax 06/7826604
Email abbonamenti@diffusioneeditoriale.it
www.diffusioneeditoriale.it
Stampa:
D’Auria Printing S.p.A. - Ascoli Piceno
Distributore esclusivo per l’Italia:
Parrini S.p.A.
Via di Santa Cornelia, 9 - 00060 Formello (RM)
Centr. Tel. 06.90778.1
Viale E. Forlanini, 23 - 20134 Milano
Centr. Tel. 06.90778.1
Concessionaria esclusiva pubblicità:
Play Media Company S.r.l.
Viale E. Forlanini, 23 - 20134 Milano
Tel. 02/45472867 - Fax 02/45472869
Area vendite:
Romano Scabini romano.s@playmediacompany.it
PLAY MEDIA COMPANY SRL
Sito web: www.playmediacompany.it
Presidente: Uberto Selvatico Estense
Amministratore Delegato: Alessandro Ferri
Direttore Generale: Rosanna Di Francesco
Ufficio Produzione: Loredana Bambina, Costanza
Barbantini, Enrica Corradini, Roberta Stolfi, Daniela Dei,
Giuseppina Settembre
Responsabile Amministrativo: Francesco Perpetua
Ufficio Amministrativo: Nella Del Ciello,
Carolina Marinelli
Controllo di Gestione: Veronica Belotti
Direttore Marketing: Luca Carta
Ufficio Stampa: Luca Carta
email: ufficiostampa@playmediacompany.it
EDITORIALE
E quindi, alla fine, anche i Vip italiani sono sbarcati su Twitter. La stampa generalista
se ne è accorta e sono arrivate le masse di fan, curiosi e persone comuni che finora
ritenevano che l’espressione social network fosse sinonimo di Facebook. Per i web
designer che progettano siti che devono essere integrati con i social network e che
finora – giustamente – si sono concentrati solo su Facebook negli ultimi due anni,
questo significa una cosa: dover adeguare tutti i siti per contemplare la possibilità
di condividere contenuti su Twitter, permettere l’autenticazione degli ospiti con
OAuth 2.0 (usata appunto da Twitter), comunicare con i loro profili, integrare gli
ultimi cinguettii del proprietario del sito, o quelli che corrispondono a un certo
hashtag.
Ovviamente, i clienti vogliono tutto fatto entro domani, però fatto bene. Per
sviluppatori e designer, i social network sono insidiosi, perché il loro successo, e
quindi la loro importanza nelle funzionalità da considerare in un sito, può essere
repentino e inaspettato. Un giorno Twitter è un servizio di nicchia, usato solo da
geek e appassionati di internet, e il giorno dopo è su Sorrisi e Canzoni TV. Chi
ha scelto una piattaforma web attivamente sviluppata, da una grande comunità
di sviluppatori, è in vantaggio: basterà trovare una soluzione già realizzata da
qualcuno (un plug-in di WordPress, un modulo Joomla...) e in breve tempo il lavoro
è fatto. Chi ha realizzato una soluzione ad hoc, o usa una piattaforma meno reattiva
ai cambiamenti, potrebbe impiegare un po’ più di tempo. Tutti quanti, comunque,
dovremo prendere dimestichezza con le Api (Application Programming Interface)
dei social network, per scoprire quali sono le potenzialità della loro integrazione in
un sito. A questo è dedicato il nostro speciale Go for It di pagina 26. La dipendenza
da servizi esterni, che necessitano di intervenire a livello di programmazione,
anche se in modo semplificato, porta con sé un’altra considerazione. È sempre più
difficile progettare il layout di un sito senza sapere quali sono le funzioni da gestire.
Per questo, inauguriamo con questo numero una nuova serie di tutorial dedicata
all’apprendimento dei rudimenti della programmazione, o per lo meno dei suoi
aspetti necessari al lavoro di un web designer. Buona lettura.
STEFANIA FURNARI
PLAY MEDIA COMPANY SRL Edizione Italiana © 2012 Play Media Company Srl
Sede legale, Direzione e Amministrazione:
Via di Santa Cornelia, 5/A - 00060 Formello (RM) Iva assolta dall’Editore Art. 74 DPR 633/72 e successive
Tel. 06/33221250 - Fax 06/33221235 modifiche I comma lett. C.
email: info@playmediacompany.it Esente da bollo Art. 6 II comma DPR 642/72.
This magazine is published under licence from Imagine
Publishing Limited. All rights in the licensed material, LA PLAY MEDIA COMPANY SRL PUBBLICA ANCHE:
including the name, belong to Imagine Publishing Limited Android Magazine
and it may not be reproduced, whether in whole or in part, App! Mania
without the prior written consent of Imagine Publishing CHIP Computer & Communications
Limited. © 2012 Imagine Publishing Limited Photoshop Magazine
La Play Media Company Srl non sarà in alcun modo Photografare in digitale
responsabile per danni diretti e/o indiretti derivanti Guide Digitali
dall’utilizzo dei programmi contenuti nel CD-ROM e/o per Total Technology
eventuali anomalie degli stessi. Nessuna responsabilità è iCreate
inoltre assunta dalla Play Media Company Srl per danni o iPad Magazine
altro derivanti da virus informatici non riconosciuti dagli Total Linux
antivirus ufficiali all’atto della masterizzazione del supporto. iPhone Magazine
<meta>

sommario
In questo numero...

La guida completa ai contenuti di Web Designer Magazine

All’interno...
10 Web Gallery In copertina
Denny’s e Tamron Island

36 Blog Beautiful
Sei dei migliori blog di design

74 Design Cloud
Menu di navigazione

76 Portfolio
In questo numero parliamo
di Elandré Franck e Andreas Shabelnikov

78 Trend map
Milano: la città in cui la moda non è tutto

80 Opinione
Migliorare l’accessibilità
18 Un esame dettagliato
81 Prossimo numero del processo creativo
Cosa vi proporremo il prossimo mese da seguire per realizzare
sulla rivista con Photoshop template
di pagina mozzafiato

14 78
10 Cronaca di un design Trend map: Milano
LBi Denmark racconta come è stato realizzato La città in cui la moda non è tutto
l’incredibile sito MAERSKFLEET.COM

<header>
Le opinioni dal mondo
del Web Design
6 Google a caccia di qualità
Il re della ricerca aggiorna i suoi criteri per la
classificazione delle pagine e si concentra
sui “siti web di alta qualità”
64 60
7 WebP: il nuovo JPEG? Lavorare con Muse Menu Cover Flow
Google introduce il nuovo formato di immagine Concentriamoci sul design invece che sulla Imitiamo la popolare navigazione di iTunes
per velocizzare il web programmazione

4 ________________________________________________ meta
 Nel CD
82 L’elenco dei contenuti che troverete
all’interno del cd
I file usati dai tutorial
Una raccolta di texture grunge
Immagini vettoriali in stile tatuaggio
Set completo di font Megafont
Starter Edition 2011
Effetto fuoco
In copertina
OR
I
I Web workshop
Le più importanti API
per i social network e
come integrarle
nel sito
26
Guida completa e codice per aggiungere i servizi Google+,
Facebook e Twitter ai vostri siti web
I FILE DEI TUTORIAL
DA SCARICARE
Alcuni tutorial richiedono file che
sono presenti sul CD allegato alla
rivista. Se hai acquistato questa
copia di Web Designer in formato
digitale, puoi scaricare i file
necessari da Internet, a partire
dall’indirizzo:
“http://bit.ly/webdescd”.
Questa pagina contiene i link per
scaricare i file dei tutorial di ogni
singolo numero ed è costantemente
aggiornata con le nuove uscite.
< tutorial>
Ecco cosa vi hanno consigliato
in questo numero i nostri esperti
38 Imparare a programmare
con JavaScript
Prima puntata di una serie dedicata all’apprendimento
delle basi del linguaggio di programmazione
42 JavaScript parte 2: array e funzioni
56 Seconda puntata: usiamo il codice JS per realizzare
una presentazione fotografica rotante
48 Controllare gli sfondi con i CSS3
Impariamo a sfruttare al massimo gli sfondi
52 Creare animazioni interattive
da un feed Twitter
Vivacizziamo i nostri tweet con questa incantevole
visualizzazione
56 Post a tutta larghezza per i temi
WordPress
Suggerimenti per eliminare le barre laterali e non
trascurare gli spazi
60 Creare un menu Cover Flow
con jQuery e i CSS3
Utilizziamo le trasformazioni 3D per creare una
navigazione elegante
64 Realizzare fantastici siti web con la
suite Muse di Adobe
Esaminiamo in dettaglio la beta per realizzare siti web
Ricreare gli stili più trendy del web
68
68 Sequenze video HTML5 a tutto
schermo
Alcuni suggerimenti per creare esperienze
coinvolgenti ispirandoci al sito The Bullitt Agency
76
Portfolio 70 Stili cartoon per il web
In difesa di web designer talentuosi, Vi mostriamo come usare uno stile illustrativo per
indipendenti e prolifici “ammorbidire” la vostra web identity
meta ________________________________________________ 5
 Notizie,

<header>
commenti,
crowdsource

Gli argomenti più importanti del mondo del web design

SERVE
Google stringe la

R['QU

<div class=
SERVER['Q
<div cl
SERVER['Q

ERY_S
sua morsa sul web

as
<div class="fb-like" data-href="<?=

TRING
s=
UER

"fb-like" da -send="tru
<div class="fb-like" data-href="<?= $_SERVER['HTTP_H
UERY_STR

"fbY

SERVER['QUERY_STRING']; ?>" data-send="true" data-width="450"

']; ?>"
-li
_S ke
TR
" data-href=
ING']; ?>" d

d
ta-href="<?= e" dat
a
ING']; ?>" d

ta
Il re della ricerca sta gradualmente modificando

SERVE
< di
il suo algoritmo per fornire agli utenti risultati

"<?= $_
ata-send=

R['QU
v
ata-send=

<
SERVSE

cl
d

$_SERVaER
iv cl

as
ERY_S
migliori. Verranno presi in considerazione solo i

s=
ERRV

ass=
<div class="fb-like" data-href="<?= $_SERVER['HTTP_H

"f
"true" data-
['QER
SE

b-like" da?ta>" d
-w['H
"true" data-
<div c

T
RV

"
$_SERVER['HTTP_H

R
UERY_STR

idtTT
‘siti web di alta qualità’. Siete pronti? ER

IN
['HTT

-like
['Q

h=P_
G
UE

lass="

']

"45H0O" ST'] . $_
;
RY

" da
P_
G
_

width="450OST'] . $_SERVER['PHP_SELF'] =
ST

-hreaf=
H
Google Dart

ta-h
width="450OST'] . $_SERVER['PHP_SELF'] . $_ '] . $_SERVE

"<?= $_SERV
ING']; ?>" d
oogle è sinonimo di ricerca e con oltre l’80% degli RI

fb-like

data-s SERVER['PH width=H"O

NG

ST

ta-"<
'];

r
utenti che lo usa, è certamente il posto migliore in Anche se la ricerca è chiaramente l’obiettivo principale

e
']
?>

f
se?=
=
"d

. $_SERVER
" data
cui farsi notare. Per designer e sviluppatori è

how-f
di Google, non è comunque l’unica tecnologia a cui

"
nd$_
at

<
a

?
" data-sho
-se

="tSE
=
fondamentale occupare i primi posti nei risultati della ricerca. viene dedicata tutta l’attenzione. Google Dart è un

ata-send=
" data-sho
-href=

$_SE

ER['H
aces=
ruRV
Apparire nella prima pagina è pura utopia, ma è indubbio che tutti ‘nuovo linguaggio di programmazione basato sulle classi

e" ER
RVE
['PHP_SELF

TT
desiderino trovarsi tra i primi. per creare applicazioni web strutturate’. Dart è stato

data-'H
"<?= $

"true"
w

P_SELF'] . $_450T"'] d. a$t_S

['H

P_
R[ TTP_
"true" data-
All’inizio del 2011 Google ha introdotto il sostituto di Page Rank, sviluppato pensando a semplicità, efficienza e scalabilità, e

-f
w-faces="t

H
ac

O
></d']iv. $_SERVER['PHP_
T TPH
_SERV

Panda. Era un miglioramento dell’algoritmo del suo predecessore, per fornire un linguaggio familiare con una sintassi chiara e

es

ST
data-show-faces="true"></div>
="true"><

_ OST'] . $_SERVE
progettato per aiutare gli utenti a trovare ‘siti di più alta qualità’ leggibile.

'] . $_
ER['HT

>
durante la ricerca online. L’aggiornamento è solo una delle tante L’opinione pubblica è divisa sul nuovo linguaggio e

S
rue"></div

width "450
migliorie della ricerca previste da Google, ma è comunque un questa non è una novità; Google adora queste situazioni,
TP_OST']

/div>
. $_ data-show></div>
fattore importante quando si cerca di entrare nella prima pagina ma la comunità di design/sviluppo la pensa diversamente.

a-EsRhVo
HOST

grazie a un termine di ricerca. Martin Heller, sul sito InfoWorld afferma: “Sfortunatamente
>

"

EwR-[f'P
Attraverso il blog Webmaster Central, Google ha affermato che Dart sembra interessante, anche se è inutile a meno che
. $_SERVE

SE
ac_HeLFs '] . $_
chi pubblica un sito web deve ‘sforzarsi di offrire attraverso il non configuriate una VM Linux per costruire gli strumenti

P_
proprio sito la migliore user experience possibile e non soffermarsi dal codice sorgente. Col tempo, Dart potrà diventare utile
troppo sugli algoritmi o sui criteri usati da Google per la solo se diventerà uno standard ampiamente supportato
R['P_HP

classificazione’. Parole saggie, ma sono pochi gli indizi per scoprire prima che vengano colmate le mancanze di JavaScript.”
cosa costituisce per Google un ‘sito di alta qualità’. Come previsto, Ma gli sviluppatori hanno realmente bisogno di un altro
_

il re della ricerca non rivela i criteri di classificazione usati nei suoi
algoritmi; tuttavia, offre un elenco di domande che indicano
come vengono scritti gli algoritmi che distinguono i siti di alta
qualità da quelli di livello inferiore (vedere box nella pagina
a fianco).
linguaggio di programmazione che si va ad aggiungere a
quelli già esistenti? Sono molte le alternative tra cui scegliere
e, a meno che Dart non riesca a offrire qualcosa di veramente
unico, sembra che in futuro l’opzione più popolare sarà jQuery.

<Ultime notizie>
Brevi cenni sugli argomenti più
importanti del momento
Android Google
Adobe lancia sei nuove app Touch per
Su YouTube anche
il formato 1080p
Il famoso YouTube sta

Amazon Silk
la piattaforma Android
jQuery Mobile v1.0 è arrivata sperimentando il suo player

jQuery
jQuery ha lanciato la prima versione completa del suo HTML che andrà a sostituire
software mobile. Il framework è stato progettato per quello Flash. Recentemente
Il negozio online lancia il suo nuovo
lavorare su qualsiasi dispositivo mobile, tablet, browser Google ha aggiunto il supporto

Spotify
eReader e piattaforma desktop popolare. Il risultato è per la riproduzione di video nel
il frutto di un miglioramento progressivo, volto a La versione 3.3 comprende una nuova
formato full HD 1080p, oltre a
barra admin, menu a comparsa e un
offrire la maggiore compatibilità possibile. All’indirizzo media uploader migliorato diverse altre funzioni tra cui la
http://bit.ly/sUeX6s potete scaricare framework, semplificazione del processo di
demo, documentazione e l’elenco completo delle
piattaforme supportate.
WordPress Il servizio di musica digitale in streaming ha
guadagnato mezzo milione di utenti dopo essersi reso
disponibile attraverso Facebook
inserimento e condivisione
dei video.

6 ______________________________________________ header
 <header>
Notizie
SERVE

SERVER['QUERY_STR
SERVER

<div cl
SERVER['Q
R['QU VER['QUER

<div class="f
<div class="
SERVER
<div clas
<div class= class="fbd-laiktae-"sden -senss

<div

as
<['dQivUERY_STR
SER

s=
WebP: il
ERY_S

class="fb-lik
"f
['Q
c

Requisiti per un sito

l

b
s="

UERY_STR
assfb-l

-l
UEfb-l
<

ik
TRING

b-like" dING'];
="fbike"
d
"fb-like" da

RY_ike"

e"
di alta qualità
ING'];e?>"
iv

nuovo JPEG?
d
IN
-likedat
STRdat

at
Y_STR
']

G']; ?>" d

a-
;

" dare

Google Panda ha cambiato il modo in cui

ata- ?>" data-send="true" data-width="450"_SER
IN
?

" data

h
>

G']; ?>" "<?= ERVER['HT

il motore di ricerca classifica i risultati.

a-href=
"

data-send
taf=-h"<
a-h
ING'];

h
ta-href="< true"<

Ecco i criteri da prendere in considerazione...

re
-
ref=

Google introduce il nuovo formato di

h
ata"<?

re?=
f=
SERVER['QUERY_STRING']; ?>" data-send="true"

r
SERVE ERVESERR[ VER['Qfb

e
f="<
?

• Vi fidate delle informazioni presenti nell’articolo?

"<
data-sen
>

f
-s
"<?
=
$_S
"

?=
e
ata

• L’articolo è stato scritto da un esperto che conosce bene l’argomento o tratta del
immagine per velocizzare il web
<d

="true"
n
=

?=
d
d

=
a

$
ER$V_dER

soggetto in modo superficiale?

R

=
-h
t
iv

$_S
$_S
=

_S
a

?= $_S" EdRaV

$
<div <d<ivdiv class="fb-like" data
S
['QUE

"

"true" d
re

• Il sito contiene articoli doppi o ridondanti sullo stesso argomento o su soggetti

_
c

ER
S
la

ERV
f=

S=E"['H
E

N
simili, con alcune parole chiave leggermente diverse?
V
data-widt
R
d==""f
clas class

RtrVuTEeTR
ER
V
RY_ST _STRIN a-hr" edaat-ha-rseenf=d"="true" data-w

• Vi sentireste a vostro agio nel fornire i dettagli della carta di credito su questo sito? egli ultimi dieci anni JPEG è stato il formato di immagine più popolare
ER[
?= $_SEdRaV

E
'Q

['H
a
trb

• L’articolo presenta errori di battitura, di stile o di ortografia? del web, ma ora Google pensa di poter fare meglio. La premessa è
s="

t
'HT

"[d
taE-Rwid aE-Rw['iH

['
u

P
UERY e"TRdINaGt'];

a
<div

TH
'H
e

_HTP_
-like"Gd']a; ta

-w

• Gli argomenti trattati si basano su un reale interesse per i lettori del sito, o il sito che il suo nuovo formato, WebP (pronunciato ‘Weppy’), migliorerà la
Ta
"

T
R

TP_

T
UER

P
t
T
['HtThT=P"_HO 450"SdTa'] . $_SERV" EdRata- T-TwPid_tOhS=HTO']ST. $_SERV

id
OSTHO
I

h="450"
a
T

compressione attualmente fornita da JPEG. Google afferma che: “Webmaster

class="fb-like"

_H

genera contenuti al solo scopo di riuscire a ottenere una posizione più alta in
-liYk_S

P
-w
P
t
t

_
="fb

HO
h

classifica nei motori di ricerca? e sviluppatori web possono usare il formato di immagine WebP per creare
O
HH
id
=
'] .ST']
ST
O
"

• L’articolo fornisce contenuti, informazioni, rapporti, ricerche o analisi originali? grafiche più piccole e più belle che aiuteranno a velocizzare il web.”
t
ST']
4$5_S
?>-h

h
S
-like

S
dtThT=P"_HO nd=_"StrEuReV
450"SdT'] . $_StaE-R

']
T
=
T

• Quando confrontata con altre nei risultati di ricerca, la pagina fornisce un valore
G

La domanda che sorge spontanea è: abbiamo veramente bisogno di un

0". d
data-show
" dreaf=

.
']
"
']

. $_SERVER['PHP_S

$
4
ER

.
" da
;

tangibile? altro formato di immagine? È da molto tempo che i designer improvvisano

$_S
_S
5
?> t
data-href="<?=

$
?>" d

a ERVE

0
V

_
t

• Viene eseguito il controllo qualità sui contenuti?

ta-show
ERVE -faces="tr

ottimizzando ed eliminando qualche byte. Con la larghezza di banda in

"
a
-h

S
ata-sh shVoEwR-['faPcHe P_SPEi_dStEhL=F"']O4.S5$T0_5']0."] .d$a_tSaE-sRh

ER
data-width="450"

data-show
d
"<
-se?= $ ="EtRruVeE ER['H

E
f="< <$_SERVER['HTTP_H
ref=

• L’articolo illustra le due facce di una storia? costante crescita, qualche byte in più non farà certo la differenza. E i designer
a
RV
['P
ata-?s=e $_= $_SER

t
VEER
a

• Il sito è un’autorità riconosciuta sull’argomento di cui tratta? desiderano veramente usare un altro
H

-s
R['oPw
P
ow-fa

h
-faces="

['PH-faces

• Il contenuto viene prodotto in serie o la sua realizzazione è affidata a un vasto strumento di Google? Non ha già abbastanza
_S
n d

_ -faces
?

EL

numero di persone, oppure viene diffuso attraverso un’ampia rete di siti così controllo?
P_
S

F'
ces=" "true"']><. /$d_

en che le singole pagine o siti non ricevano la massima attenzione o cura?

]
data-show-faces="true"></div>

ELF

d=
ER"['RdH[a'THtT

ue"></div

• L’articolo è ben realizzato o sembra poco curato?

.

true">< >

" tr
$_'] r. u$_

ue
['PHw

• Se cercate risposte di tipo medico, vi fidate delle informazioni fornite dal

s
t

"d
V
idth="4OST']

at
a- sito?
e"></

wi
a

dt
/div>
P

• Riconoscereste questo sito come fonte autorevole quando chiamato per

L

h=
_
TH
50" d.at$_SERVER['PHP_SE

"4
T

50 nome?
P
H "4 '

"d
_

• L’articolo fornisce una descrizione completa e dettagliata

i

at
v

a-
a-show-fac

>

sh dell’argomento?
i v>
"

• L’articolo contiene analisi approfondite o informazioni interessanti

d$a_tSaE- VoEwR-[face

poco ovvie?
es="true">

• È il tipo di pagina che aggiungereste ai segnalibri, condividereste con

sRhVoEw 'P_HPs

gli amici o raccomandereste?

E

• L’articolo contiene un numero eccessivo di pubblicità che distolgono

LF'] . $_

R-[f'Paces_

l’attenzione o interferiscono con il contenuto principale?

</div>

• Vi aspettereste di trovare questo articolo in una rivista,

un’enciclopedia o un libro?
• Gli articoli sono troppo brevi, infondati o non contengono
specifiche utili?
• Le pagine sono state prodotte con cura e attenzione ai dettagli?
• Nel vedere le pagine di questo sito, gli utenti potrebbero lamentarsi?

Cosa ne pensate Carlo Mirco Lella Alessandro

del nuovo formato Non voglio un Cosa c’è che non WebP: perché un Google sta
di immagine? nuovo formato. va nel formato JPEG? altro formato? Ci sono cercando di
Perché averlo se i Funziona bene, già PNG JPEG, e così assumere il controllo
Ecco le opinioni
browser gestiscono i quindi non abbiamo via. completo delle
di alcuni lettori di
formati correnti? È bisogno di altro. A chi nostre vite online?
Web Designer
l’ego di Google a importa risparmiare Eviterò questo
sulla necessità di
spingerla così in là? qualche byte? formato per principio.
un altro formato
di immagine...

header _______________________________________________ 7
<magazine>
app per iPad

È arrivata l’app
di Web Designer
per iPad
Da oggi puoi leggere la tua rivista preferita e
abbonarti a prezzo super scontato direttamente
dall’applicazione per iPad

D
a qualche settimana è disponibile su
App Store l’applicazione per iPad Web
Designer Magazine. L’app è gratuita e
permette di vedere un’anteprima di ogni
numero, che comprende sempre il
sommario con l’elenco di tutti gli articoli,
per avere un’idea dei contenuti prima di
acquistare il numero, a prezzo super
scontato. Un numero della rivista costa
infatti solo 2,99 euro. L’abbonamento per un anno (8
numeri) costa 19,99 euro, mentre quello per sei mesi (4
numeri) costa 9,99 euro.
Gli acquisti si effettuano direttamente dall’applicazione
attraverso il proprio account iTunes. Oltre a essere
semplice e sicuro, permette quindi di trasferire i propri
acquisti anche su un altro dispositivo abbinato allo
stesso account. Se per esempio se devi sostituire il tuo
iPad, potrai scaricare nuovamente i numeri già
acquistati senza ulteriori addebiti.
Un nuovo modo di leggere
Tutti i numeri acquistati saranno sempre disponibili sul
tuo iPad ogni volta che vorrai, per riempire un tempo di
attesa imprevisto o per avere sempre a portata di mano
un riferimento veloce alle tecniche spiegate sulla rivista.
Puoi sfogliare la rivista in orizzontale (due pagine
affiancate) o in verticale (una sola pagina), zoomando
sui testi o sui particolari delle immagini con i gesti tipici
dell’iPad. Dal menu in basso si può accedere a un scaricare liberamente i file dei tutorial dall’indirizzo:
sommario testuale dei contenuti del numero, o a una http://bit.ly/WDtutorial
vista sulle miniature delle pagine, per trovare a colpo Gli accordi con sviluppatori dei software, texture, font e
d’occhio gli articoli che ti interessano. strumenti non ci consentono purtroppo di rendere
disponibili questi materiali via internet, per cui non
E i file dei tutorial si scaricano sono compresi nel file da scaricare, che risulta quindi
dal web anche molto più leggero.
L’edizione digitale non comprende ovviamente il
CD allegato a ogni numero della rivista, e che oltre Scarica subito l’app Web Designer Magazine gratis
a software dimostrativi e materiali da utilizzare
nelle proprie creatività, contiene i file necessari
alla realizzazione dei tutorial presentati nelle
pagine della rivista. http://bit.ly/wdmagazine
Chi acquista la rivista digitale può comunque

Le altre opzioni per leggere Web Designer in digitale

Non hai un iPad, o preferisci
soluzioni che permettano di
avere una copia della rivista
anche sul tuo pc, Mac o su un
altro tipo di lettore? Nessun
problema. Web Designer
Magazine è infatti disponibile
anche su Windows, Mac, Linux,
Android, Web OS e altri
dispositivi compatibili con il
sistema Adobe Digital Editions.
Trovi tutte le opzioni su www.
playedicola.it
Zinio.com
Un’edicola che
distribuisce riviste da
tutto il mondo. Permette di sfogliare
le riviste con un qualsiasi browser
web che supporti Flash, oppure
attraverso un’applicazione Adobe Air
compatibile con Windows, Mac OS,
Linux e Web OS. Esistono poi app
specifiche per Apple iPad e Android.
www.playedicola.it
EZ-Press
Una piattaforma
italiana che
vende riviste
digitali in formato Pdf, compatibile
con i programmi e i dispositivi che
utilizzano il sistema di protezione
Drm Adobe Digital Editions.
Dispone anche di app specifiche
per iPad e Android.
http://play.ezpress.it/
UltimaKiosk
Un’edicola virtuale che
condivide la stessa
piattaforma dell’applicazione di Web
Designer, e quindi gli anche gli
acquisti effettuati, ma in cui troverete
anche le altre testate di Play Media
Company e altri editori. Disponibile al
momento solo per iPad, ma a breve
compatibili con altri dispositivi.
http://www.ultimakiosk.it

8 ____________________________________________ magazine
 WEB GALLERY

<sopra>
• Una sezione del menu è colma di piatti molto invitanti, tuttavia, l’aggiunta di alcune
miniature segnaposto non potrebbe che migliorare la situazione
• La sezione Media offre diverse pubblicità visibili su YouTube e interpretate da famosi comici
hollywoodiani
<sopra>
• Il componente per la ricerca del ristorante è ben integrato nel sito e mostra che, quando vi trovate
negli Stati Uniti, nelle vicinanze c’è sempre un Denny’s

10w������������������������������������������ web gallery

 WEB GALLERY

PASSATO
E FUTURO Denny’s
Sebbene lo stile del sito evidenzi un’identità
del marchio abbastanza retro, la presenza di
www.dennys.com
Tecnologie di sviluppo .NET, HTML5, CSS, Ajax, JavaScript, jQuery
piccole transizioni dinamiche mostra anche
un lato moderno

Designer Gotham & Welikesmall

www.welikesmall.com
www.gothaminc.com
Una storica catena americana di
ristoranti resta fedele a una vecchia
<sopra>
• L’aspetto sociale della trattoria soddisfa le offerte dei network del
web, con stati Facebook e feed Twitter presentati in modo molto
elegante

<sinistra>
ricetta, aggiungendo però alcuni
• Il sito si apre con la sezione Welcome; tuttavia, sono visibili i
pannelli verticali su entrambi i lati, che restano nell’ombra finché
non vengono selezionati
ingredienti moderni

I
l primo ristorante da drive-in e macchine truccate che
#fce80c #fdb714 #e41e25 #fef7d3 #fdbe11 #4b4644
Denny’s venne aperto macinano chilometri. Offre anche una
nel 1954 da Harold straordinaria freschezza che stuzzica
Butler a Lakewood, l’appetito, fornendo così un sommo
California, e divenne esempio di potere del marketing e identità
subito un modello di del marchio molto persuasiva. Gran parte
trattoria americana. del sito è dedicata al cibo, con la sezione
Questo modello vive dedicata al menu zeppa di piatti appetitosi.
ancora oggi ed è Qui i designer hanno optato per un
ulteriormente rafforzato miscuglio insolito di scorrimento verticale e
dal nuovo design del sito orizzontale, dove le sezioni sono più simili a
web, che nel 2012 resta pannelli che a vere pagine. Pensate a
ancora fedele a uno stile tipico degli anni fotogrammi invisibili con una spruzzatina di
Cinquanta avvalendosi allo stesso tempo jQuery e otterrete la base: la pagina
delle tecnologie più moderne. Con uno contenitore resta statica ma consente
schema dei colori esageratamente giallo e comunque lo scorrimento. Se poi
uno sfondo a strisce su cui poggiano grossi aggiungete qualche simpatico effetto
titoli rossi che richiamano il famoso logo di JavaScript, menu a comparsa e transizioni di
Denny’s, il sito non è che un omaggio scorrimento, la ricetta non potrà che essere
visuale a cameriere in pattini a rotelle, film perfetta!

<sopra>
• Se fate clic su un particolare elemento del menu si aprirà un
pannello che mostra ulteriori dettagli sul piatto, come le
“ Pensate a fotogrammi invisibili con una
spruzzatina di jQuery e otterrete la base: la
pagina contenitore resta statica ma consente

”
informazioni nutrizionali

comunque lo scorrimento
web gallery___________________________________________ 11
 WEB GALLERY
Tamron Island
www.tamron-island.co.uk
Designer Netzbewegung Gmbh
www.netzbewegung.com
I fan del design basato su Flash sono di
nuovo tra noi con un sito di
intrattenimento estremamente piacevole
N
el numero 54 di Web
Designer abbiamo
parlato del fatto che il
design basato su Flash
potesse avere una
seconda possibilità.
Questo microsito
promozionale realizzato
dall’agenzia tedesca di
marketing interattivo
Netzbewegung è un
esempio del nostro
retaggio, e dimostra che è possibile definire
un’area del web design che mescola
divertimento e pubblicità con risultati di
grande effetto. Le agenzie sono ancora in
grado di sfornare questo tipo di esperienze
di intrattenimento in modo rapido e a costi
competitivi che riflettono la natura a buon
mercato del contenuto. Si sarebbe potuto
realizzare qualcosa come Tamron Island
“
Sfruttando il proprio istinto di
fotografo per esplorare e catturare,
l’obiettivo è raccogliere scatti di
un’isola esotica”
12w������������������������������������������ web gallery
Tecnologie di sviluppo JavaScript, Flash
anche senza Flash, ma il tempo e gli sforzi
necessari non sarebbero valsi la pena.
Sarebbe stato un peccato lasciarsi sfuggire il
risultato, che dimostra che è stato eseguito
un lavoro superlativo per consentire
all’utente di immergersi in un prodotto. <sopra>
Sfruttando il proprio istinto di fotografo per • Tamron Island è un lussureggiante ambiente
virtuale creato con straordinarie immagini 2D
esplorare e catturare, l’obiettivo è raccogliere e arricchito con piccoli spezzoni di animazione
scatti di un’isola esotica e guadagnare Flash
abbastanza punti per poter vincere un <sotto>
• Con qualche semplice tecnica di animazione
premio. Gli scenari sono ambienti 2D che il Flash, lo scorrimento parallasse e la cattura
degli input dell’utente, i designer hanno
vostro avatar può attraversare muovendosi ideato un’esperienza estremamente
con i tasti freccia, mentre il cursore agisce da coinvolgente
• Il sito vi invita a registrarvi a ogni accesso,
mirino della macchina fotografica. Un timer sebbene fortunatamente possiate anche
e alcuni sfondi progettati in modo diabolico visualizzare i contenuti come ospite
rendono l’impresa ardua, tuttavia la sfida è
assolutamente coinvolgente. Il concetto di
base può non essere una novità, ma la
perfetta esecuzione del lavoro Flash si sposa
in modo straordinario con la composizione
grafica, e il risultato è magnifico.
”
 WEB GALLERY

INQUADRATURA
Quando zoomate sull’immagine
che dovete fotografare entrano
in gioco alcune straordinarie
tecniche Flash che vi
consentono di scattare la
foto e giudicano con quanta
precisione avete impostato
l’obiettivo della fotocamera.

#e7d9b9 #479cd6 #85d3d3

#678803 #e61500 #3a2912

<a sinistra, in senso orario>

• Per illustrare ciascuno dei
cinque luoghi della mappa
viene usata una collezione di
straordinarie fotografie, che
trasmettono un senso di
appartenenza al luogo
• La funzione di zoom della
gamma di prodotti Tamron è il
vero punto focale del sito e
l’effetto simulato è alla base di
ciascun gioco
• La scelta delle immagini e i
colori vivaci ma attinenti la
natura trasmettono un qualcosa
di realmente esotico che instilla
il desiderio di immergersi
completamente in questo sito

web gallery___________________________________________13
 <Cronaca di un design>
LBi Denmark / Maersk Fleet

Cronaca di un design
Le fasi dello sviluppo

Progetto | Maersk Fleet,

www .maerskfleet.com
Società | LBi Denmark
Web | www.lbidenmark.com
i, che ha
la missione impossibile di Lb
In questo numero: Scopriamo del 201 1
i siti web più apprezzati
realizzato per Maersk uno de

Quando si tratta di indimenticabili

esperienze online, Maersk non è il
Rasmus Frandsen,
primo nome che salta in mente, creative director
soprattutto per la sua pronuncia, ma Noah Laux,
creative
l’anno scorso la marea è cambiata. Anders Kavcic, developer
art director
Ecco perché…
Nel numero scorso abbiamo scelto per la
nostra Web Gallery un sito che aveva già
ricevuto diversi elogi nel settore. Uno dei
motivi che lo rendevano così speciale e
intrigante era il fatto che non si trattava di
aziende di alto profilo come Nike o Levi’s, ma
di qualcosa di completamente diverso. Maersk,
il grande conglomerato danese sinonimo di
navi cargo internazionali, si è affidato
all’agenzia LBi per lanciare un sito ambizioso e
interattivo attraverso cui conoscere la sua
flotta di navi. A prima vista si potrebbe pensare
che il risultato possa attirare solo fan
stravaganti o investitori. Col senno di poi, il
progetto dimostra di avere un grande successo
nell’intrattenere gli utenti e renderli interessati
al marchio e alle attività di Maersk,
focalizzandosi su particolari che rendono la
flotta di navi così imponente. Sottolineando la
grandezza, interna ed esterna, delle navi, peso,
potenza e miglia percorse intorno al mondo
con contenuti dinamici ben realizzati, la
proposta è estremamente innovativa. Se poi
aggiungiamo l’impegno per il supporto
dell’iPad e l’uso progressivo delle nuove
tecniche HTML5, non possiamo che affermare
che la missione impossibile è stata portata a
termine...

14 __________________________________ Cronaca di un design

 <Cronaca di un design>
LBi Denmark / Maersk Fleet

so era
avesse succes
Perché il sito a e la
e so tto lin ea re la grandezz
important vi M ae rsk
flotta di na
potenza della

Fare in modo che i contenuti andassero bene sia per le

piattaforme desktop che per l’iPad è stato l’elemento
fondamentale per scegliere HTML invece di Flash

STAFF DEL
PROGETTO

Questi primi mockup digitali sono

9
PERSONE
molto simili al design finale, a
eccezione di alcune piccole modifiche
allo stile
e il sito
a stabilire un a dire zione chiara su com nte
ogetto er estremamente pote
La prima fase del pr chio di ni cc hi a m a
resentare un mar
avrebbe dovuto rapp
tivo è
esto metodo lavora
k “Il risu ltato iniziale di qu str are la
Maers to navale, per illu
ttore del traspor di una demo Flash
Rasmus: “Nel se ma linea stato lo sviluppo mo ancora
ov ati va . È in pri o punto non aveva
è una società de
l tutto inn
rdi a, nostra idea. A quest o HT ML . I progressi
ua rda tec nologie all’avangua o se rea lizzare il sito in Fla
sh
per qu an to rig
erciali. Volevamo
de cis diffusione dei
ile e tecniche comm wser e la grande
sviluppo sostenib fos se ne lle tecnologie dei bro pro pendere
atteristiche e ad, ci hanno fat to
ettesse queste car let, soprattutto l’iP
che il progetto rifl Desidera va mo tab
nto di vista visuale. per HTML.
interessante dal pu zienda. contatto con il clie
nte
risp ec ch ias se l’o rgo gli o de ll’a
“Ab bia mo lavorato a stretto ava mo
che il sito lor
lavorare con team
composti da e iniziali mentre esp
“In LBi siamo soliti ci pe r svi luppare alcune ide lm en te
e. Fin dall’inizio inizia
ializzazioni divers Le idee sono state
individui con spec direzioni diverse.
ate gia , cre ati vit à, tecnologia nte sot to for ma di semplici
cesso str presentate al clie
piace unire nel pro tto implicava che
i
a di questo proge rPoint o PDF.”
e us ab ilit à. La na tur presentazioni Powe
on e.
o concetto e direzi
creativi definisser

Cronaca di un design___________________________________15
<Cronaca di un design>
LBi Denmark / Maersk Fleet

DURATA
DEL PROGETTO
4
MESI

Queste linee guida si riferiscono allo stile del testo da

usare per il sito e suggeriscono l’impiego della
famiglia di font di Maersk: Zetta

Queste immagini
Le linee guida di Maersk sono state le panoramiche unite
offrono un tour
fondamenta da cui costruire il design completo delle
aree interne delle
visuale e le risorse per gli sviluppatori diverse navi della
flotta
Rasmus: “Parallelamente alla fase di
concetto, siamo partiti con il design visuale.
Volevamo creare un linguaggio di design,
radicato nelle linee guida del marchio Maersk,
ma che avesse uno stile più eccentrico, adatto a
questo tipo di progetto e che fosse usabile sui
tablet e i dispositivi touchscreen, insomma in
stile app. “Anche in questo caso si è trattato di
uno sforzo collaborativo, in cui i designer
lavorano a stretto contatto con gli sviluppatori
per esplorare tutte le possibilità. Gli obiettivi che
ci eravamo prefissati erano ideare diverse
soluzioni tecniche per le varie piattaforme e
browser. L’uso della riproduzione a tutto
schermo, dell’audio, del ridimensionamento
dinamico, dei font di Maersk e di molto altro
implicava un massiccio lavoro tecnico. In termini di scalabilità
“Io e l’art director Anders Kavcic ci siamo del design, questa
occupati delle presentazioni, dei design e dei immagine mostra una
layout, oltre che della gestione della produzione schermata in cui sono
annotate diverse
grafica. Abbiamo consegnato agli sviluppatori
dimensioni e sezioni
layout, linee guida grafiche e tutte le risorse importanti, che
necessarie. assicurano che il sito
“Durante la fase di produzione tendiamo a funzioni bene per tutte
le risoluzioni di
lavora in simultanea. Questo significa che
schermo
dobbiamo assicurarci che gli sviluppatori
ricevano le risorse di design e ciò di cui hanno
bisogno al momento giusto. In un progetto
come questo le difficoltà tecniche causano Come mostra questa
costanti modifiche dei dettagli. A volte si aprono mappa, tracciare le
nuove possibilità che possiamo sfruttare, e migliaia di rotte della
questo significa altre modifiche al design e allo flotta intorno al pianeta
si è rivelato un lavoro
sviluppo. Per tutti i partecipanti al progetto è
logistico di grande
questo il vero divertimento. Ognuno di noi ha impegno, per non
sempre e costantemente qualcosa di nuovo da parlare poi della sezione
aggiungere.” Live Map

16 __________________________________ Cronaca di un design

 <Cronaca di un design>
LBi Denmark / Maersk Fleet

“ Addentrarci in un nuovo
territorio è stata una
grande sfida tecnica
”
te su tutti i dispositivi abbiamo dovuto
Per offrire un’esperienza coinvolgen
ardo le tecnologie da usare
prendere decisioni fondamentali rigu va essere disponibile anche su
iPad,
Poiché il sito web dove
e HTML5, CSS3 e
Noah: “Il sito unisce rich media e spesso in ambienti senza conn
essione internet, abbiamo
funzionare su tutte le
JavaScript. È stato progettato per dovuto progettare l’inte ra arch itett ura basandoci
Il nost ro obie ttivo era creare zione e dati delle
piattaforme e i browser. sull’accesso offl ine, com pres e loca lizza
prim a ottenibile solo
un’esperienza coinv olge nte e ricca liere una soluzione HTML
navi, e abbiamo finito per sceg
ensionamento
con Flash, inserendo video, ridim comprendente dati JSON.
dissolvenze di pagina
dinamico, transizioni CSS3, musica, “Ciascuna pagina caricata in AJA
X dispone di uno
dei font. Addentrarci in un completo: a questo
e tecnologie per il rendering schema di tran sizio ne deg li elem enti
gran de sfi da tecnica. I
nuovo territorio è stata una ma in cui si possono
rdavano scalatura, scopo abbiamo creato un siste
più diffi cili da risolv ere rigua transizioni programmate e
problemi assegnare agli elementi HTML
patibilità con i browser. i dati JSON vengono
accesso offline, transizioni e com inserirle nei template jQue ry, dove
desig n che scala magicamente
“Abbiamo optato per un confrontati con la storia com plet a del browser.
ili e font pers onal izzat i che si allineano sima compatibilità in tutti i
con elementi mob “Dov evam o assic urar ci la mas
. Per fare la ‘magia’ sto ha richiesto un grande
e dimensionano automaticamente browser e dispositivi mobili. Que
ciascun elemento si isi al pixel su una vasta
abbiamo dovuto fare in modo che sforzo di produzione di layo ut prec
nto relat ivo attraverso classi zioni di fallback su quelli che
affidasse al dimensioname gamma di dispositivi, con solu
ce JavaS cript. La sfida
CSS basate su EM e un po’ di codi HTML5 all’avanguardia.”
non potevano offrire tecniche
tutti i dispositivi.
più importante era la coerenza su

Rasmus: “Una delle sfide che abbiamo dovuto

affrontare fin dall’inizio del progetto era la scarsità
di immagini della flotta di navi Maersk, sia relative
agli interni che dell’intera nave vista da fuori.
Abbiamo dovuto quindi metterci in contatto con gli
avvistatori di navi di tutto il mondo che chi hanno
spedito le foto. Ciò che inizialmente è stato percepito
come un ostacolo si è trasformato in un vantaggio: ci ha
fornito l’idea che il tour della nave dovesse comprendere
una funzione di upload, così che gli utenti possano
contribuire a caricare sul sito nuovi contenuti.
“Il sito web è stato lanciato internamente attraverso i
numerosi siti di Maersk alla fine di Settembre del 2011 e
da quel momento in poi ha rappresentato una parte
integrante della comunicazione dell’azienda. Le risposte
iniziali sono state molto positive. Per esempio, il settore
Risorse umane ha notato che il sito rappresenta il mezzo
perfetto per far conoscere l’azienda ai familiari degli
impiegati, ed è un ottimo strumento per far sapere loro
dove si trovano i propri cari.
“Sono stati tanti gli appassionati di navi che hanno
visto il sito e lo hanno consigliato ad altri. L’uso creativo
delle tecnologie ha consentito al sito di ricevere una
STRUMENTI
USATI:
HTML5, CSS3,
JAVASCRIPT
Le grandi immagini delle navi della flotta
Maersk in tutta la loro gloria hanno
rappresentato la base visuale da cui partire
per realizzare il design del sito, e hanno
fornito lo sfondo per la homepage
nomination a ‘Site of the Day’ da parte di TheFWA e
di Awwwards; inoltre è apparso in diversi blog e
gallerie online.
“Siamo fiduciosi del fatto che il sito continuerà ad
avere grande successo sia internamente che
esternamente. Al momento, il tempo medio passato sul
sito è di 14, 52 minuti, e questo ci suggerisce che gli
utenti esplorano e interagiscono con il contenuto. Per noi
significa aver raggiunto l’obiettivo prefissato.”

Cronaca di un design___________________________________17
18 _____________________________________________speciale
 C
i sforziamo sempre di distinguerci dagli altri,
Photoshop è dal modo di vestire al tipo di pizza che
l’elemento chiave ordiniamo. Vogliamo essere unici e vogliamo
per la creazione di creare progetti che dimostrano chiaramente le nostre
capacità. I designer sono una specie rara per il fatto che
temi di pagina sono preparati a lavorare molte ore per ottenere i risultati
superlativi e ad migliori, nella speranza di ricevere il massimo compenso
per i loro sforzi. A volte i desideri diventano realtà, ma
elevato contenuto altre volte dobbiamo accettare la realtà. Tuttavia, come
grafico. L’esperto esseri umani in un mondo dove i ruoli lavorativi sono
sconcertanti tanto quanto descrittivi, nel settore del
Radim Malinic ci design si respira un senso di cameratismo. Come lettori di
fornisce una guida questa rivista, il vostro ruolo lavorativo potrebbe essere
‘web designer’ o ‘sviluppatore’. In questo caso, vi potete
sulla teoria e gli considerare una di quelle persone appartenenti a un
strumenti pratici gruppo in continua crescita di soggetti con la stessa
passione che potrebbero tranquillamente spuntare la
fondamentali per casella ‘bilingue’ sul Censimento, dal momento che
un processo di parlate fluentemente sia l’HTML che la vostra lingua
design completo. madre.
Altri lettori della rivista potrebbero appartenere al
settore del graphic design, da un mondo in cui presse da
stampa, inchiostro e carta giocano ancora un ruolo
fondamentale, insieme alla produzione digitale. Nei libri
di design di queste persone sono presenti capitoli che
spiegano come aggiungere margini extra ai documenti,
colori Pantone specifici e altre magie che si possono
ottenere solo con la stampa. Il settore del graphic design
ha una storia molto vasta che dura da vari decenni e che
ha assistito alla creazione di lavori mozzafiato. Per contro,
Internet e, come potete immaginare, il web design hanno
solo vent’anni di vita. Due decenni possono sembrare
un’eternità, ma alcuni dei principali progressi in questo
settore sono stati fatti solo negli ultimi anni. Novità come
HTML5, CSS e WordPress hanno arricchito enormemente
Potete vedere gli esempi di design
di template realizzati da Radim e
riportati in queste pagine
analizzando le risorse presenti sul
CD o visitando le seguenti pagine:
http://sites.brandnu.co.uk/raw/test,
http://sites.brandnu.co.uk/raw/final
(fotografia del modello originale di
Nathalie Gordon)
la user experience. Man mano che il tempo passa, sempre
più persone stanno imparando a programmare e
progettare, contribuendo così a rendere più ricco e
ampio il settore del web design. Anche se sono molte le
differenze tra graphic e web design, ciò che in pratica
abbiamo sono due gruppi di persone che realizzano siti
web. Cosa succede quindi quando questi due mondi
entrano in contatto e c’è un print designer che lavora su
un sito web? Nella maggior parte dei casi non ci saranno
problemi, a meno che questa persona non sia tentata di
usare nel suo processo l’ultima applicazione di Adobe,
Muse. La solida pratica di creare siti web di successo
deriva da una fusione tra software grafico e
programmazione HTML. Adobe, uno dei leader nei due
settori, offre diversi pacchetti software innovativi, che di
recente hanno celebrato il loro ventesimo anniversario.
Tutti i programmi di design introducono regolarmente
aggiornamenti e nuove funzioni che aiutano gli utenti a
trasformare le loro idee in realtà. Due dei programmi più
importanti sono ovviamente Photoshop e Illustrator. Le
applicazioni lavorano in perfetta armonia, completandosi
l’un l’altra e allo stesso tempo velocizzando il flusso di
lavoro degli utenti. Anche se il mondo della stampa era il
principale destinatario di queste due applicazioni, sono
state rapidamente apprezzate e sfruttate anche dai web
designer.
Alcuni dei più staordinari siti presenti oggi sul web
sono il risultato di una combinazione di Photoshop e
HTML. Creare un sito da zero può sembrare un lavoro
spaventoso, che può diventare terrificante se si aggiunge
Photoshop all’equazione, soprattutto se non avete
esperienza nel campo della programmazione. Le
prossime pagine vi forniranno un’introduzione a
Photoshop e vi illustreranno come sfruttare al massimo i
suoi potenti strumenti per alzare il livello dei vostri design.
“Photoshop
rappresenta la
destinazione finale,
dove tutte le idee
vengono unite insieme
prima che inizi la
programmazione. La
possibilità di testare il
tutto prima di
prendere la decisione
finale è assolutamente
fantastica, soprattutto
in un momento in cui
vengono immessi sul
mercato ogni giorno
nuovi dispositivi e
piattaforme”
Radim Malinic
speciale _____________________________________________19

www.charlescarterhair.com
occorre prendere in
Prima di iniziare a sviluppare un sito
lo insolite, come mostra
considerazione strutture di modu
s Carter
questo sito del parrucchiere Charle
I R A Z I O N E I N I Z I A L E
ISP di cominciare a formulare le l’idisepeirapzieornile
Prima
vono trarre
, da do v e de
template
r?
iniziale i designe
I creativi di qualsiasi tipo tendono a spingersi
oltre i confini del web design che conosciamo,
sebbene in modi diversi. Qualsiasi idea o elemento
insolito, indipendentemente dal fatto che provenga
da un lavoro fatto 1.000 anni fa o ieri, può essere
ripresa da qualcun altro che si trova dall’altra parte del
pianeta e sviluppata ulteriormente. Non stiamo
assolutamente incoraggiando nessuno a rubare le
idee degli altri; si tratta di partire da ciò di cui già
disponiamo e aggiungere inventiva e personalità.
Tutti noi programmiamo nello stesso linguaggio e
tutti abbiamo una tastiera, un mouse e magari un
tablet.
Nel senso più ampio, le regole sono uguali per
tutti, quindi come mai i lavori realizzati sono così
diversi? Naturalmente, dipende tutto dalla singola
persona. Non prendiamoci in giro, ci saranno sempre
lavori mediocri, siti web appariscenti e rozzi; che ci
piaccia o no, nessuno di noi può cambiare questo.
Tuttavia, questa situazione fornisce un metro di
misura per creare risultati unici che faranno la
differenza.
I designer non si possono più nascondere dietro la
scusa che i loro clienti non hanno le idee chiare.
Questa è la giustificazione di un designer senza
ispirazione che non sa produrre idee personali. Avete
mai sentito di una proposta di sito web fantastica ed
economica che è stata rifiutata dal cliente? Se non
sforate il budget e presentate un progetto con uno
stile unico, tutti vincono. Ogni nuova commissione è
un’opportunità per affinare le vostre abilità e venite
pagati per sedere alla vostra scrivania, bere ettolitri di
caffè (naturalmente da includere nella vostra parcella)
e realizzare il miglior sito web della vostra vita.
20 _____________________________________________speciale
www.jonbriggs.com
La giusta miscela di colori si adatta
perfettamente al contenuto dedicato
a utenti business
www.urbanwarriors.co.uk
Un sito web personalizzato ideato provando
vari concetti in Photoshop, prima che i file
passassero allo sviluppo web
www.incrediblefta.com
Incredible FTA offre ai suoi clienti la possibilità
di fare acquisti sul sito, con una gamma di
sfondi diversi
Dopo aver terminato il sito, dovrete bombardare il
web annunciando la notizia ovunque. Vorrete che tutti
vedano il vostro capolavoro, non perché vi siete limitati
a mettere insieme un sito web ma perché avete
realizzato qualcosa di così diverso spinti dalla voglia di
essere unici. Come sappiamo, durante il processo
creativo alcuni clienti ce la metteranno tutta per
sabotare alcune delle vostre migliori idee, ma poi
lasceremo che siano loro a pagare il nostro caffè. Fa
tutto parte del gioco.
Cinque anni fa il settore creativo è stato testimone www.kokou.co.uk
della rinascita delle illustrazioni; una rinascita digitale. Il linguaggio del marchio di un’azienda può essere facilmente
trasformato da print design a tema del sito, come è stato fatto
Photoshop è diventato una delle armi principali del qui per il marchio di hair technology Kokou
design digitale e da allora conserva il suo primato.
L’applicazione è stata la chiave per la nascita di nuove
idee innovative estremamente complesse. Anche i
progressi dei linguaggi di programmazione hanno
avuto la loro parte nel processo di evoluzione. Quando
ci troviamo davanti a una pagina (o pagina web) vuota,
possiamo riempirla con tutto ciò che abbiamo
imparato dai nostri progetti precedenti. Ogni sito web
deve avere la sua identità e un aspetto unico. I migliori
uniscono elementi che normalmente non vengono
associati alla complessità di un linguaggio di
programmazione. Dal punto di vista visivo, il design di
un sito può essere adattato così che sembri una scatola
di origami, un cartone del latte o un barattolo di
caramelle, o qualsiasi altra cosa. Alcuni dei siti web più
interessanti usano invece idee insolite. Per esempio,
una prospettiva fuori dall’ordinario o una profondità
tridimensionale possono avere successo se bilanciate
correttamente con una gerarchia delle informazioni
ben congegnata. Le opzioni sono virtualmente
illimitate.
 BO ZZETTI E MOCKUP
Il duro lavoro di preparazione eseguito nelle prime fasi può
risultare fondamentale quando si definisce
la direzione che
deve prendere il design… La definizione del tema è una fase
chiave per dare un’identità alla
pagina web. Gli oggetti della
composizione digitale
Ovviamente, i clienti sono la parte essenziale del rappresentano gli argomenti
nostro lavoro. Soddisfano la domanda di lavoro e presenti nei contenuti del sito
web
come risultato ci sfamano e pagano i nostri mutui, ma
non prima che abbiamo combattuto 12 round di
pugilato per designer! Hanno varie forme e dimensioni,
e idee diverse rispetto a ciò che desiderano e al modo in
cui deve funzionare il loro sito. Si affidano ai web
designer per soluzioni di design pratiche e funzionali
che in alcuni casi non si devono allontanare troppo dalla
loro normale attività. Se siete fortunati, la persona
dall’altra parte della cornetta può dirvi qualcosa in più
del semplice fatto che ha bisogno di un sito web. E
anche se avete molto su cui lavorare, le domande
saranno innumerevoli.
Ed eccoci al primo round del match di web design.
Mentre un art director è impegnato a disegnare bozzetti
dell’ultima campagna pubblicitaria televisiva e su carta
stampata, i team di web designer, grandi o piccoli,
cercano di rispondere al primo giro di domande,
provando a realizzare un piano di azione su misura alla
base di qualsiasi decisione logistica futura. Con la sempre alcune bozze del tema del sito web. In una situazione A questo punto, il design provvisorio può essere
maggiore varietà di piattaforme e sistemi operativi, commerciale, solitamente il linguaggio del marchio salvato come documento HTML con le immagini,
niente deve essere trascurato. deve essere introdotto nel concetto. Può essere difficile pronto per essere caricato su un test server. Potete
Si sa che col tempo le scorciatoie non portano da inserire un’illustrazione elaborata nel modulo di base del inviare il link per l’anteprima a chiunque sia stato
nessuna parte, poiché prima o poi vi troverete davanti sito web prima di aver definito quale sarà il tema. Oltre al coinvolto nella fase di test. La possibilità di vedere come
un ostacolo che è il frutto di una pianificazione poco documento PSD ottimizzato per il web, è utile disporre si adattano le dimensioni ai dispositivi mobili o a una
attenta o di decisioni superficiali. In questa fase vale la di un layout separato in stile poster dove definire gli finestra del browser standard consentirà di avere le idee
pena sedersi e prendere nota di tutto ciò che vi viene in elementi e preparare il concetto generale. più chiare sulla pagina finale, ed è completamente
mente. Non solo sarete in grado di rispondere a tutte le Durante le fasi iniziali, per vedere di volta in volta in diverso dal ricevere un semplice PDF o una JPEG con la
domande che vi ha posto il cliente, ma riuscirete anche a anteprima il design nei vari browser web, utilizzate gli posta elettronica.
capire meglio cosa vi aspetta dal punto di vista del strumenti incorporati.
Dopo aver
progetto. La funzione Salva per web di realizzato un
È anche consigliabile visualizzare i vecchi lavori sulle Photoshop è stata introdotta come mockup del sit
o,
Salva per we
b
nuove piattaforme e mettere a punto i dettagli cruciali funzione base una decina di anni fa genera il codic
e
HTML con
che vi caratterizzano, soprattutto se state creando un e finora si è dimostrata un ottimo l’immagine, ch
e
solo sito web senza un’ulteriore app per i dispositivi strumento per velocizzare il può essere tes
tato
in qualsiasi
mobili. Per esempio, qualcosa che anni fa sembrava workflow. Suddividere in sezioni il browser per
assolutamente adatto, sui nuovi schermi più piccoli può vostro sito web in Photoshop è stanare even
tuali
problemi
apparire sproporzionato o leggermente ingombrante. un’operazione semplice grazie
Quando vi sedete davanti a un foglio di carta bianco e alla funzione Sezioni da guide
iniziate a pensare alle risoluzioni di schermo e al nelle opzioni dello strumento
posizionamento di base degli oggetti, è utile disegnare Sezione.

La navigazione è cruciale. Assicuratevi

che anche su dispositivi piccoli come
l’iPhone gli elementi della pagina
principale possano essere visualizzati
senza scorrimento

Dopo aver caricato i file sul server, Il test iniziale non rileva alcun
potete iniziare il test sulle varie problema; il sito viene visualizzato
piattaforme, compresi i browser nella finestra del browser senza intoppi
degli smartphone

speciale _____________________________________________21
PRODUZIONEIA: VE
LNoEn5peFrdAeteSImCaHi di vista il
traguardo…
Le guide sono una delle parti più importanti di qualsiasi sito web. È
Impostare il canvas fondamentale preparare il canvas in modo che corrisponda
esattamente alla dimensione finale
La parte più divertente del design di un sito web inizia
adesso. Ma qui è dove vengono anche commessi
alcuni tra gli errori più comuni, che però possono
essere evitati fin dall’inizio senza dover così perdere
tempo nella loro correzione. Photoshop offre la
possibilità di lavorare a qualsiasi risoluzione e con
qualunque dimensione di canvas. Le principali
piattaforme web operano a 72dpi, che è la risoluzione
da inserire quando si imposta un nuovo canvas in
Photoshop. Selezionate poi il metodo di colore RGB,
assicurandovi così che sul sito web i colori vengano Per ottenere
risultati
visualizzati come nell’applicazione. Sebbene il migliori, invece
di trascinare le
metodo di colore possa essere aggiunto/convertito guide sull’area
successivamente, vale la pena impostare tutto di lavoro
inserite
correttamente fin dall’inizio. manualmente
le dimensioni

Guide esatte

Dopo aver pianificato attentamente il vostro nuovo

sito web, le guide giocano un ruolo fondamentale
nell’assicurare che il sito sia perfetto al pixel. Durante
le fasi di pianificazione, prendetevi del tempo per
definire la struttura della griglia e annotate ogni
misura. Usate la larghezza totale come guida per i
vostri calcoli e stabilite la larghezza delle colonne e lo
spazio tra una e l’altra. Anche se può sembrare noioso,
è una delle parti più importanti per lavorare
tranquillamente in Photoshop su un sito web.
Aggiungete le guide una a una selezionando
Visualizza>Nuova guida. Inserite poi un’altra guida
con uno spazio extra tra le colonne finché saranno
presenti tutte le linee orizzontali e verticali.
ini,
di immag tezza
Successivamente, assicuratevi che i livelli siano eb pieni al
Nei siti w teriore spazio in
impostati su ‘Effetto calamita con Guide’, garantendo calcolate
ul riuscire a
rg he zz a così da ni
e in la ustrazio
il posizionamento perfetto di tutti gli oggetti. tutte le ill
ospitare

Header e footer Immagini stock prima di acquistare la versione in alta risoluzione.

Spesso siamo tentati di sovraccaricare il sito di
numerosi elementi, colori e illustrazioni. Dovete
ricordare però che si tratta sempre di trovare il giusto
compromesso tra una pagina non troppo vuota né
troppo piena. Può essere utile suddividere il lavoro in
fasi nel corso di qualche giorno. Per esempio, un’idea
che un giorno può sembrare fantastica potrebbe non
funzionare per niente il giorno dopo. Lo stesso vale
per dimensionamento e posizionamento degli
oggetti. Ricordatevi sempre del compromesso tra
contenuti scritti e immagini del sito. Quando lavorate
con i temi per blog, potete concentrarvi
principalmente sull’header del sito, inserendo poi
qualche altro oggetto più in basso nella pagina. Il
tema può continuare nel footer, conferendo così al
design un aspetto più coerente.
È sempre consigliabile provare qualcosa prima di
renderla definitiva e questo vale soprattutto per le
immagini stock, che rappresentano la grande
maggioranza delle grafiche di un sito web. Un sito con
un tema richiede un’ampia collezione di elementi
provenienti dalle librerie di immagini stock e questo
significa spendere soldi. Prima di presentare al cliente la
proposta finanziaria finale, potete provare a lavorare
con le immagini composite, che possono essere
scaricate gratuitamente da qualsiasi libreria, anche se a
bassa risoluzione. Raccogliete tutte le composizioni in
una cartella e poi trascinatele nel documento di
Photoshop. In questo modo, oltre a risparmiare tempo
per la singola apertura di ciascuna immagine, il nome
del file verrà automaticamente visualizzato nella palette
Livelli. Qui, potete decidere quali immagini tenere
Area visibile
Se ignorate gli elementi esistenti dei pacchetti
preformattati e realizzate un sito web con un design
personalizzato, potete realmente avere un grande
impatto sui visitatori. Questa è una nuova forma di
ribellione a un mondo pieno di template noiosi e
ripetitivi. Quando realizzate un sito web da zero
completamente personalizzato, potete anche decidere
come verranno formattati e visualizzati i contenuti. Una
delle regole principali da ricordare è assicurarvi che la
navigazione principale sia visibile indipendentemente
dalla piattaforma di visualizzazione. Prima di passare al
design finale, accertatevi di aver lavorato nell’area
visibile. Testate i mockup e visualizzateli su iPhone, iPad
e laptot di varie dimensioni.

22 _____________________________________________speciale
 Potete anche usare il contorno dell’oggetto come Per colorare i bordi allo scopo di
maschera di ritaglio, o modificare l’oggetto con una rimuovere qualsiasi contaminazione di
vasta gamma di tecniche PS colore, aggiungete un nuovo livello con
una maschera di ritaglio

La rosa a sinistra è stata convertita in un oggetto avanzato, che le

consente di conservare il suo aspetto, mentre quella di destra è
Gli strumenti Forma di Photoshop offrono varie stata ridimensionata e si è prodotta una distorsione
forme geometriche predefinite che velocizzano il
vostro workflow
circolari o personalizzate. Nonostante tali forme possano potete usare lo strumento Gomma magica. Tuttavia,
sembrare estremamente semplici, si prestano a vari non sempre i risultati che otterrete saranno i migliori. Il

GLI STRUMENTI
impieghi con il vantaggio di disporre di informazioni modo più sicuro per eliminare un oggetto dallo sfondo
vettoriali. Ciascun punto di ancoraggio può essere consiste nell’utilizzare lo strumento Penna. Proprio

A DISPOSIZIONE
Affinate le vostre tecniche
Oggetti vettoriali avanzati
Se non sapete come mantenere perfetti i vostri
elementi, soprattutto dopo averli ingranditi e
rimpiccioliti più volte, Photoshop vi offre la funzione
Oggetti vettoriali avanzati. A causa della risoluzione
predefinita a 72dpi per il web design, le immagini o gli
elementi bitmap ritagliati perdono di qualità perché le
informazioni sui pixel si riducono. Potete trasformare in
oggetto vettoriale avanzato qualunque elemento
proveniente da Illustrator, oppure applicare la funzione
a qualsiasi livello esistente, consentendovi così di
conservare l’oggetto nella sua dimensione e definizione
originale, ed evitando la distorsione derivante dalla
manipolazione. Potete anche aggiungere agli oggetti
alcuni filtri avanzati, particolarmente utili per applicare
sfocature e disturbi supplementari.
Livelli forma
Sebbene Photoshop sia stato progettato per la modifica
di immagini bitmap basate sui pixel, offre anche alcune
opzioni vettoriali. I livelli forma offrono impostazioni
predefinite di tipo geometrico, come forme rettangolari,
modificato con lo strumento Selezione diretta e, come in
Illustrator, è possibile aggiungere punti di ancoraggio
supplementari per creare forme più elaborate. I livelli
forma possono anche essere copiati e incollati da
Illustrator, dove è più facile disegnare forme più
complesse.
Metodi di fusione
La maggior parte dei siti web è bidimensionale, ma è
molto semplice dare maggiore profondità a qualsiasi
layout. Non dovete essere un illustratore o un designer
esperto per creare ombre perfette e una prospettiva
tridimensionale. Quando applicate i metodi di fusione,
potete separare ciascuna opzione dal livello principale
attraverso la funzione Crea livello. Nei casi in cui
desiderate aggiungere un’ombra allungata e sfumata,
partite dall’opzione Ombra esterna. Con questa funzione
come livello separato, ora potete decidere la direzione
della fonte di luce, che guiderà tutte le ombre extra del
design. Attraverso il set di strumenti Modifica>Trasforma
è possibile ridimensionare e ruotare l’ombra per renderla
più realistica. Anche sperimentare le varie gradazioni di
opacità aiuterà a renderla più credibile.
Tecniche di selezione
Non tutti gli elementi possono essere facilmente separati
dallo sfondo. Se un oggetto è circondato da uno sfondo
di un unico colore, per catturare solo l’oggetto desiderato
come in Illustrator, si tratta di disegnare una selezione
dei punti di ancoraggio e delle linee vettoriali. L’opzione
Curva di Bezier consente di disegnare nonostante una
scarsa presenza di punti di ancoraggio, eseguendo un
tracciato intuitivo intorno alle linee curve. All’inizio può
risultare complesso, ma con un po’ di pratica la Penna
diventerà uno strumento indispensabile e affidabile. Da
un contorno finito, eseguite una selezione e poi
applicate lo strumento Maschera veloce o create una
copia dell’oggetto selezionato.
Ritocco rapido
Indipendentemente dalle vostre capacità di
realizzazione di un contorno, a volte un oggetto può
portarsi dietro dei colori provenienti dall’immagine
originale. Dipende praticamente tutto dallo sfondo
originale. Quando avete poco tempo o soldi, e dovete
comprare le immagini stock, è un problema. Tuttavia,
questi colori o texture indesiderati possono essere
rapidamente eliminati. Per evitare di toccare il livello
principale, eseguite tale operazione su un nuovo livello,
aggiunto attraverso una maschera di ritaglio. In questo
modo verrà copiata la forma dell’oggetto principale e le
informazioni extra rimarranno nascoste. Con il livello in
posizione, usate lo strumento Timbro clone o un
pennello morbido dalla punta arrotondata. Campionate
il colore dalla parte principale dell’immagine e
applicatelo alla zona contaminata.

speciale ____________________________________________ 23

Scegliete una sezione del design e
raggruppate i livelli assegnando al gruppo
un’etichetta chiara
Un’anteprima con
orientamento verticale
sull’iPhone che mostra
tutte le parti importanti
del sito web
TUenTteTprOobIN Oi RDINE
Ni lem
Maschera veloce
Quando durante le fasi di test lavorate con le forme base,
il passo successivo consiste nel vedere come si adattano
le vere immagini al concetto. Solitamente si aprono le
immagini, si imposta la loro dimensione finale e poi si
posizionano nel documento PS. Tuttavia, esiste
un’alternativa più veloce: selezionate un oggetto del
livello forma che agisca da segnaposto per l’immagine e
poi trascinate il file di immagine direttamente sul canvas.
Nello stack dei livelli, la grafica verrà automaticamente
posizionata sopra il livello forma. Premete poi
Clic+Comando/Ctrl+Opzione/Alt+G per applicare una
maschera di ritaglio attraverso il livello sottostante.
Eseguite poi una trasformazione libera dell’immagine
per una visualizzazione immediata in anteprima.
Salvare spesso
Il progetto di un sito web può portare con sé diverse
modifiche e ripensamenti, indipendentemente dalla
perfezione del vostro lavoro. A causa dell’imprevedibilità
24 _____________________________________________speciale
Il sito è estremamente
leggibile, anche nel
browser di un piccolo
dispositivo come questo
Un’anteprima con
orientamento orizzontale
sull’iPhone che evidenzia
l’immagine illustrativa del sito
web e il menu di navigazione
L’anteprima nel browser Safari non evidenzia
problemi. Ora il sito può essere passato allo
sviluppatore per la programmazione finale
dei clienti, vale sempre la pena conservare una copia di
ciascun PSD che rappresenta ogni fase del design. Nei
progetti che durano settimane o mesi, si ricevono
spesso i feedback relativi alle diverse fasi, soprattutto
quando avete a che fare con un consiglio/commissione
di persone. Tuttavia, se avete salvato man mano ciascun
progresso non dovrete mettervi le mani nei capelli
perché tutto è ancora reperibile. Questa regola deve
Questo tipo di maschera è
perfetto per controllare
velocemente l’aspetto di
un’immagine
“Dovete sempre assicurarvi
che i vostri file possano
essere compresi da
chiunque li usi dopo di
voi”
Ecco l’anteprima del sito diviso in sezioni, operazione
facilmente eseguibile grazie alla funzione Sezioni da
guide
essere applicata a qualsiasi processo di design.
Salva per web
È il modo più veloce per mostrare a un cliente con poca
immaginazione i progressi del sito web senza scrivere
una singola riga di codice. L’esecuzione in Photoshop
dell’intera fase di design offre la possibilità di suddividere
il design in parti e salvarle come documento HTML con
immagini collegate attraverso la funzione Salva per
web. Lo strumento Sezione offre la possibilità di usare le
guide per le sezioni, tutto con un semplice clic. Prima di
salvare il design in forma di bozza, potete anche
modificare le impostazioni delle immagini da JPEG e GIF
a PNG trasparenti a 8 o 24 bit, per esempio se lavorate
con sfondi a tinta unita.
Ordine dei livelli
Quando lavorate insieme a uno sviluppatore o fate parte
di un team, dovete sempre assicurarvi che i vostri file
possano essere compresi da chiunque li usi dopo di voi.
Non c’è niente di più frustrante del lavorare con centinaia
di livelli senza nome. Non occorre dare un nome a ogni
singola texture o forma dell’immagine, ma raggruppare
insieme i livelli simili vi consentirà di non farvi dei nemici!
Quando cambiate le impostazioni di Selezione
automatica su Gruppo, potete riordinare lo stack molto
più rapidamente senza dover ‘collegare’ singolarmente
tutti i livelli. Dovrete poi rinominare solo il gruppo e non
tutti i livelli al suo interno.
Tecnologie Tendenze T e n ta z i o n i

“C'è vero progresso solo quando i vantaggi

di una nuova tecnologia diventano per tutti”

Henry Ford

Il futuro
TI ASPETTA
in edicola

a un po’ di tempo a questa
I
Dedichiamoci al sociale e integriamo nei nostri progetti di design
i servizi di networking, in particolare Google+, Facebook e Twitter
parte sul web sta succedendo
qualcosa di affascinante: le
pagine e i siti si connettono
tra loro in modi nuovi. Un
tempo i siti erano pressoché
isolati, la connessione tra loro era ampiamente
protetta e si basava sul passaggio da un nodo
all’altro attraverso dei clic sui collegamenti. Fino alla
nascita del portale e poi del motore di ricerca, non
esisteva un senso collettivo del contesto di un
contenuto o delle relazioni che esistevano. Google
si è data molto da fare per cambiare questa
26 ____________________________________________ Speciale
OR
situazione e colmare tali lacune, leggendo la
struttura di collegamenti per rivoluzionare i settori
ricerca, pubblicità e analisi. Questa è diventata il
collante che unisce le cose e dà un senso più ampio
a tutto ciò in cui ci imbattiamo. Il social networking
si basa su tali principi per fornire a gruppi di utenti
la stessa possibilità di definire nuove relazioni tra i
contenuti web, sfruttando varie tecniche per
collegare i servizi a qualunque destinazione. Marchi
popolari come Twitter, Facebook, Digg e Reddit
sono diventati famosi grazie a pulsanti che
possiamo cliccare per votar e condividere le nostre
pagine preferite. Alcuni sono andati oltre fornendo
un accesso più specifico attraverso le API per
sviluppatori e consentendo ai nostri siti o app di
esistere in un senso più ampio del termine. In
questo articolo esamineremo i metodi per sfruttare
tre dei nomi più famosi del social networking,
concentrandoci soprattutto sul nuovo concorrente.
Google+ spera di fare concorrenza a Twitter e
Facebook e l’utilizzo dei suoi servizi gli consentirà di
renderlo più popolare sul web. Questa guida vi
aiuterà a stabilire quali funzioni vengono offerte e
come potete beneficiarne sui vostri siti;
identificheremo inoltre le tecniche più importanti
per la loro integrazione.

onoscerete certamente Google e
siamo sicuri che avete usato uno
dei suoi servizi almeno una volta
nella vostra vita. Infatti, se avete
mai pronunciato le parole ‘motore di
ricerca’ o se parlando con qualcuno
gli avete menzionato il fatto che avete cercato qualcosa
online, molto probabilmente nella stessa frase avrete
citato anche Google. Il nome e il marchio dell’azienda
sono diventati sinonimo di risultati della ricerca online e
indicizzazione, e per alcune persone il fatto che esistano
altri provider è ridondante.
Con una simile influenza e quota di mercato nel settore
della ricerca globale, sembra quasi assurdo che Google
abbia deciso di entrare nel mondo del social networking,
e non da adesso. In passato Google ha provato (con più
o meno successo) a creare un servizio sociale/interattivo
attraverso Orkut, Google Buzz e Google Wave.
Istintivamente la comunità web è attratta da qualsiasi
servizio offerto da Google, e qualsiasi nuovo progetto è
sempre atteso con impazienza, digerito e criticato. A
volte, per il fatto di avere il marchio Google, le aspettative
sono così alte che le critiche si sprecano e questo non
può che portare alla mancata adozione del prodotto e a
una sua rapida “morte”. Addio, Wave.
Ovviamente, lo scetticismo era alle stelle quando
Cerchie
Le cerchie vi permettono di condividere contenuti
e articoli solo con le persone da voi desiderate.
L’idea di base e il design dell’applicazione si basano
sul concetto degli ambiti sociali, e sul fatto che
generalmente interagiamo e condividiamo le
informazioni solo con alcune persone.
Questo significa che potete condividere contenuti
importanti con persone importanti, senza il rischio
di pubblicare qualcosa di banale (o imbarazzante)
per i vostri familiari o conoscenti e intasare i loro
flussi con i vostri aggiornamenti. Dividendo i
contatti in gruppi attraverso Cerchie, avrete un
maggiore controllo su chi vede cosa e sul modo in
cui condividete le informazioni.
Google ha deciso di entrare nuovamente a far parte
della scena sociale con il suo ultimo progetto: Google+.
Con Facebook e Twitter ormai ben saldi, adottati e
integrati nella nostra vita online, è lecito chiedersi cosa
cci sia da offrire che non abbiamo già... Perché dovrebbe
nascere un’altra applicazione di tipo sociale e non essere
percepita come ‘un altro strumento per duplicare i
contenuti’ o ‘un altro strumento per perdere tempo’?
Quali altri vantaggi può offrire G+ ai singoli utenti e alle
aziende?
Google sta lanciando il progetto Google+ sottolineando
il fatto che viene condivisa la vita reale. Attraverso
Google+ le persone hanno ora la possibilità di interagire
in eguale misura con amici, colleghi e conoscenti grazie
a un portale, che consente loro di restare in contatto,
condividere informazioni e idee e partecipare a
discussioni su qualsiasi argomento.
Come creativi professionisti dell’industria del web,
sviluppatori e designer hanno una maggiore possibilità
di personalizzare i contenuti web e promuoverli
attivamente attraverso il servizio sociale online per trarre
vantaggi in diversi campi. Un fattore importante è la
diffusione delle informazioni e dei contenuti con la
possibilità di diventare visibili non solo nell’ambiente G+,
ma anche attraverso altri prodotti e servizi Google, tra
cui l’importante motore di ricerca e le sue classifiche.
È corretto supporre che la maggior parte delle persone
che usa le nuove applicazioni di tipo sociale di Google, in
qualche momento ha anche sfruttato le sue funzioni di
ricerca e gli strumenti di sviluppo web. La relazione tra
indicizzazione del sito e catalogazione delle informazioni
da parte del gigante della ricerca è sempre stata molto
forte e, da un punto di vista commerciale, Google ha
svolto un ottimo lavoro nel collegare tra loro tutte le
applicazioni e i servizi. Qui ha creato una serie di
pacchetti che fungono da blocchi da costruzione
utilizzabili per migliorare e uniformare l’esperienza degli
utenti. Cosa offre quindi il progetto? Esaminiamo le sue
funzioni principali.
Speciale ____________________________________________
OR
I
Videoritrovi
Le applicazioni per le chat video online esistono da
un po’ di tempo, ma Videoritrovi di Google+ è
dedicata a incontri spontanei con amici e follower.
A differenza delle normali chat, che solitamente
consentono la comunicazione tra due sole perone
(con alcune eccezioni come Skype), Videoritrovi
permette fino a un massimo di nove persone di
collegarsi tra loro e sostenere una conversazione
attraverso la webcam.
In pratica, il concetto di Videoritrovi si basa sulla
nozione della tipica conversazione da pausa caffè,
dove tutti gli amici della vostra cerchia possono
partecipare e parlare di qualsiasi cosa con voi e con
chiunque sia connesso al momento. Qui lo scopo di
Google è eliminare lo spirito distaccato delle
normali chat web e offrire un ambiente più familiare
e disinvolto.
Videoritrovi sta anche per implementare la
condivisione di appunti, schizzi e schermate, oltre
che l’integrazione di Google Docs, così da
migliorare l’aspetto di lavoro collaborativo offerto
dal servizio.
“
Google sta lanciando
il progetto Google+
sottolineando il fatto
che viene condivisa la
”
vita reale
Messenger
Per chi usa già un’applicazione Google come Gmail o
iGoogle, la funzionalità incorporata per le chat non
rappresenta niente di nuovo. Tuttavia, Messenger
consente di impostare e partecipare all’invio di
messaggi di gruppo con chiunque faccia parte della
cerchia da voi selezionata. Volete decidere con i vostri
amici il ristorante per la serata? O parlare di progetti di
lavoro con i colleghi? Messenger è stato creato per
fornirvi questo tipo di interazione, ancora una volta
senza infastidire tutti i vostri amici con discussioni in cui
non desiderano essere coinvolti. A differenza di
Videoritrovi, Messenger è una chat esclusivamente
basata sul testo, senza l’elemento video.
27
 Giochi
Tutti i siti di interazione sociale online sono in
qualche modo degli ammazzatempo, e Google+
non fa eccezione alla regola. L’app fornisce una sala
giochi molto ampia. Allo stesso modo delle
applicazioni di gioco di terze parti di Facebook,
anche i giochi di Google+ offrono la
possibilità di interagire con il vostro
profilo e le cerchie e di pubblicare
informazioni per rendere la vostra
esperienza ancora più sociale e per
condividere/promuovere i giochi
con cui vi divertite. Ora tutti
possono vedere il vostro punteggio
di Angry Birds. Al momento la sala
giochi non è aperta agli sviluppatori allo
stesso modo di quella di Facebook, ma la
possibilità di creare giochi di terze parti offre varie
opportunità a specialisti in branding e
concessionari di pubblicità. Considerando il fatto
che Google Wave era stato considerato ‘troppo
primitivo’, e certamente la sopravvivenza di un
network dipende dalla sua comunità, sarà
interessante vedere se Google abbia fatto
progressi da quel punto di vista.
Cos’è +1?
Indipendentemente dal fatto che abbiate accesso
al progetto Google+, avrete certamente iniziato a
notare la presenza di un nuovo pulsante in diversi
siti web, blog e risultati di ricerca. In passato
a b b i a m o già assistito alla comparsa di tali
pulsanti con Digg, Technorati e, più
recentemente, con i pulsanti Mi piace
e Condividi di Facebook. Se usate
Google per eseguire una ricerca, vi
sarete accorti del pulsante +1
vicino a ciascun risultato, anche tra
gli elenchi di ricerca a pagamento.
+1 è un’approvazione pubblica di
un URL. L’obiettivo è quello di rendere
pubblica l’approvazione, dal momento che
qualsiasi URL consigliato attraverso questo sistema
apparirà nel vostro flusso Google+ e sarà
quindi visibile a tutti. Questo vi
consente di approvare solo i
collegamenti ‘+1’ desiderati e a
cui siete contenti di essere
associati.
Come funziona?
In pratica, il concetto +1 è molto semplice: approvando
e assegnando un +1 all’URL state votando il
collegamento o l’articolo e lo rendete visibile a tutti i
vostri follower, consentendo anche a loro di assegnare
un ‘+1’ e di ‘approvare’ il contenuto. È possibile impostare
un pulsante +1 così che mostri un valore numerico delle
approvazioni ricevute. Quando visualizzate i risultati
della ricerca, potete anche vedere se qualcuno dei vostri
amici di Google+ ha apprezzato uno dei risultati.
Dal punto di vista della visualizzazione, Google ha il
controllo completo su chi può vedere e vedrà qualsiasi
+1 relativo al contenuto preferito basandosi su alcune
connessioni sociali che solitamente vengono definite
attraverso i servizi di Google, come le persone presenti
nella vostra chat list di Google Talk, i membri delle
vostre cerchie Google+, i vostri contatti di
Google Contacts e le persone che
seguite su Buzz o attraverso Google
Reader.

“ Tutti i siti di interazione sociale

online sono in qualche modo degli
ammazzatempo, e Google+
non fa eccezione alla regola.
”
Aggiungere un pulsante +1 001 <!-- Place
render -->
this tag where
you want the +1
Siamo felici di annunciarvi che l’implementazione di webmasters/+1/button/. button to
002 <g:plusone
un pulsante +1 nelle vostre applicazioni web esistenti Qui potete selezionare la dimensione del pulsante e annotation=”in
003 line”></g:pluso
è estremamente facile. Come previsto, sono come volete mostrare le informazioni +1. se ne>
004 <!-- Place
numerose le risorse disponibili per raggiungere desiderate personalizzare ulteriormente il pulsante, this render call
005 <script type where approp
questo scopo. sono disponibili diverse opzioni avanzate che vi =”text/javascrip riate -->
006 (function( t”>
Il portale ufficiale di Google offre un generatore di permettono di definire se le chiamate al servizio G+ ){
007 var po = do
pulsante che vi consente di creare il devono essere eseguite in modo asincrono e cument.createE
type = ‘text/ja lement(‘script’)
vostro pulsante e personalizzare come deve essere caricata la sintassi JavaScript. vascript’; po.a ; po.
008 po.src = ‘h sy nc = true;
layout, dimensione e livello di Ciascuna selezione eseguita con questo ttps://apis.goo
009 var s = do gle.com/js/plu
dettaglio; potete accedere a processo rigenererà lo snippet di codice così che cument.getElem sone.js’;
[0]; s.parentNod entsByTagNam
questa funzione da: http:// possiate facilmente copiarlo e incollarlo nel punto e.insertBefore( e(‘script’)
010 })(); po, s);
www.google.com/intl/it/ desiderato sul vostro sito.
011 </script>

28 ____________________________________________ Speciale
 OR
I
+Snippet API Videoritrovi
Potete facoltativamente decidere di differenziare il tipo Un’aggiunta estremamente potente alle API in cui potrete decidere con quali API Google
specifico di contenuto che desiderate condividere Google disponibili è sono le API di Videoritrovi (API
desiderate interagire e ottenere i dati. Tra esse
attraverso il pulsante +1, selezionando tra le altre cose Hangout), che consente di sviluppare applicazioni
troviamo Analytics, Latitude, Translate
tra articolo, blog, persona, evento, attività locale o collaborative che potete lanciare all’interno del
e Cloud Storage.
organizzazione. vostro videoritrovo Google+. Si può spaziare da
Quando sviluppate attraverso
una semplice schermata a tema per meeting di la console potete anche
001 <!-- Update your html tag to include the itemscope
gruppo specifici a un incontro completamente impostare i permessi per i
and itemtype attributes -->
interattivo e collaborativo. membri del team o per
002 <html itemscope itemtype=”http:// schema.org/
Le applicazioni di videoritrovo personalizzate
gli sviluppatori che
Blog”>
sono scritte in HTML standard, CSS e JavaScript
possono accedere al
003 <!-- Add the following three tags inside head -->
e come tali possono essere progettate pervideoritrovo per assistervi
004 <meta itemprop=”name” content=”A day in the
accogliere contenuti dinamici provenienti dalle
durante la fase di verifica, e
life of...”>
applicazioni lato server. Il componente di base del
una volta inseriti potete
005 <meta itemprop=”description” content=”A fun
videoritrovo personalizzato è il livello di condividere con loro il
post on what it’s like to be a web developer with an
interazione che si può ottenere lavorando concollegamento specifico per il
addiction to coffee.”>
l’API JavaScript. videoritrovo. Infine, per accedere al videoritrovo
006 <meta itemprop=”image” content=”http://i.
La vera applicazione in sé viene rappresentata in
personalizzato dovete pubblicare il file XML in un
telegraph.co.uk/multimedia/archive/01375/
un file XML, che definisce le preferenze e imposta
punto accessibile pubblicamente, insieme ad
coffee_1375711c.jpg”>
il contenuto iniziale nel nodo Content. L’XML alcune risorse extra. Nella console salvate poi il
Personalizzando ulteriormente queste opzioni i dati dell’applicazione è in pratica un descrittore di quali
percorso completo dell’URL nel file XML
che verranno condivisi attraverso +1, potrete fornire contenuti caricare e consente di specificare quali
descrittore e il vostro videoritrovo verrà pubblicato
maggiori dettagli su ciò che apparirà sul flusso funzioni devono essere incluse. e sarà pronto per la verifica.
Google+ una volta condiviso il contenuto. Se state sviluppando più di un’applicazione di
videoritrovo, potete scegliere quale caricare e
001 <?xml version=”1.0” encoding=”UTF-8” ?> testaree attraverso un menu a comparsa
002 <Module> disponibile sul lato destro dello schermo. Da
003  <ModulePrefs title=”Your App Name”> qui potete anche ricaricare e ripristinare lo
004    <Require feature=”rpc”/> stato dell’applicazione.
005    <Require feature=”views”/> L’API Hangouts contiene un set completo di
006  </ModulePrefs> funzioni di metodo utili per interagire con il
007  <Content type=”html”> videoritrovo stesso, oltre che per collaborare
008    <![CDATA[ con i partecipanti e ottenere informazioni
009      <script src=”//hangoutsapi.appspot.com/ sulle caratteristiche del dispositivo. L’elenco
static/ completo dei metodi è reperibile all’indirizzo
010 hangout.js”></script> http://tinyurl.com/googlehangouts.
011      <!-- Your application code -->
012    ]]>
013  </Content>
014 </Module>

Qualsiasi contenuto inserito nel nodo Content

verrà caricato in un iFrame all’interno del
videoritrovo. Una volta scritto il codice, dovete
registrare l’applicazione attraverso la Console API
di Google (https://code.google.com/apis/console)

Quali sono i vantaggi?

Nessun blogger o titolare di un negozio online
si lascerebbe sfuggire l’opportunità di
pubblicizzare qualcosa o “deviare” a suo favore
il traffico, soprattutto quando l’inserimento di
un pulsante è un’operazione molto semplice.
Se volete installare il pulsante +1 su un sito
WordPress, potete scaricare e installare un
plug-in senza preoccuparvi del codice.
Come per il pulsante Mi piace di Facebook,
Google +1 consente ai visitatori di condividere
con altri il sito, la pagina o il post e a voi di farvi
conoscere da un pubblico più vasto. Quando
un visitatore preme il pulsante +1, i vostri
contenuti saranno visibili pubblicamente nel
profilo. Gli amici avranno quindi l’opportunità
di leggerli e di fare clic su Google +1 e così via.
Inoltre, a differenza del pulsante Mi piace di
Facebook o di Segui di Twitter, Google +1 può
essere aggiunto alla pagina più volte e nelle
posizioni desiderate. Quando si trova in più
punti della pagina, prima o poi il lettore ci farà
clic sopra almeno una volta, aumentando così
i voti. Quanti pulsanti si possono definire
troppi? Non passerà molto tempo prima che
qualcuno risponderà esaustivamente a questa
domanda, ma per ora lasciamoci guidare dal
buon senso.

Speciale ____________________________________________ 29

Con oltre 21 milioni di utenti Facebook solo in
Italia, non è mai stato così importante assicurarsi
che il proprio sito web utilizzi il maggior numero
possibile di funzioni offerte dalla piattaforma
Facebook. In questa sezione vi mostreremo come
implementare nel vostro sito i diversi elementi di
Facebook, dai pulsanti Mi piace a completi sistemi di
login.
Cos’è Graph?
Facebook Graph sono in pratica i dati veri e propri che
costituiscono Facebook. Sono nel formato JSON, e per
ottenere i dati personali di un utente serve un certo livello
di autenticazione. Una volta autenticati potete usare i dati
di Graph per inserire le informazioni sul vostro sito web.
Questa operazione è una delle più avanzate nella gamma
di azioni che si possono eseguire con la piattaforma
Facebook, e più avanti ne parleremo in maniera più
dettagliata. Nel frattempo, osserveremo come usare gli
strumenti forniti da Facebook per aggiungere al vostro sito
le funzioni del social network. Iniziamo con il pulsante Mi
piace.
Attraverso il sistema di registrazione di Facebook
potete ridurre la quantità di campi richiesta nei
vostri moduli, e la maggior parte dei contenuti
verrà trasferita da Facebook
30 ____________________________________________ Speciale
Search
Impostare un’applicazione
Non è obbligatorio impostare un’applicazione in modo che utilizzi le funzioni del social network,
ma questo semplifica le cose. Implementando nella vostra pagina web l’SDK JavaScript di
Facebook, riducete la quantità di codice necessario per lanciare le funzioni Facebook; inoltre,
successivamente potrete connettervi ai dati Graph. Un altro vantaggio dell’aggiunta dell’SDK
JavaScript è che vengono attivate le funzioni HTML5 e XBML (il linguaggio di markup di Facebook).
Aprite innanzitutto https://developers.facebook.com/apps. Da qui, fate clic su Crea
applicazione e compilate i campi Nome visualizzato e App Namespace; possono essere
semplicemente il nome del vostro sito web.
Dopo aver inserito le informazioni, si aprirà la pagina Impostazioni avanzate; le uniche cose di cui
vi dovete preoccupare sono le sezioni App Domain e Website. Inserite i dettagli del vostro dominio
in entrambi i campi e selezionate Salva modifiche.
All’inizio della pagina appaiono App ID e App Secret; prendete nota di queste informazioni ma
non rivelate a nessuno App Secret. Non pubblicatela su Internet e non inseritela nel codice
sorgente. Aprite il software di editing HTML, create un nuovo file HTML vuoto e aggiungete il
codice seguente dopo il tag <body> di apertura:
001 <div id=”fb-root”></div>
002 <script>(function(d, s, id) {
003 var js, fjs = d.getElementsByTagName(s)[0];
004 if (d.getElementById(id)) {return;}
005 js = d.createElement(s); js.id = id;
006 js.src = “//connect.facebook.net/en_GB/all.js#xfbml=1&appId=YOUR_APP_ID”;
007 fjs.parentNode.insertBefore(js, fjs);
008 }(document, ‘script’, ‘facebook-jssdk’));
009 </script>
Sostituite ‘YOUR_APP_ID’ con l’Application ID fornitovi. Avete attivato l’SDK JavaScript di Facebook sulla
vostra pagina e nel resto del codice sorgente potete eseguire le chiamate relative.
Pulsante Mi piace
I pulsanti Mi piace di Facebook sono diventati onnipresenti e rappresentano il modo più
semplice per condividere i contenuti del vostro sito web con gli amici Facebook di un visitatore.
Questo pulsante è estremamente flessibile: potete infatti applicarlo a singoli pezzi di contenuto,
per esempio un unico post del blog, o all’intero sito web. Facebook offre strumenti che
consentono di generare rapidamente il codice per implementare nel sito le funzioni sociali.
Ora che disponete di un App ID, aprite http://tinyurl.com/likeplugin. Su questa pagina apparirà
una guida passo dopo passo su come generare il codice necessario per un pulsante Mi piace di
Facebook. È disponibile un certo livello di personalizzazione, ma se volete andare oltre dovete
entrare nei meandri degli hack CSS e di ulteriori librerie di codice. Inserite l’URL del sito web nella
casella URL to Like, personalizzate il pulsante come desiderato e al termine fate clic su Get Code.
Apparirà una finestra contenente il codice da inserire nel sorgente del sito web. Da notare che,
ora che disponete di un App ID valido, potete selezionare sia HTML5 che XBML. Assicuratevi che
l’app appena creata sia selezionata nel menu a comparsa di questa finestra.
Il passo successivo consiste nell’aggiungere alla pagina lo snippet di codice precedente; potete
inserirlo dove desiderato, ma per questo esempio lo aggiungeremo direttamente dopo il codice
dell’SDK JavaScript.
001<div class=”fb-like” data-href=”YOUR_URL” data-send=”true” data-width=”450” data-show-
faces=”true”></div>
A seconda delle opzioni selezionate, lo snippet di codice può avere un aspetto diverso. Eseguite
il codice in un browser per vedere i risulati. Il vantaggio dell’utilizzo del framework HTML5 è che
gli utenti, dopo aver premuto Mi piace, vedranno una casella per i commenti che consente loro
di dare un tocco personale al loro voto. Noterete anche che in questo esempio è presente un
pulsante Condividi. La differenza tra Condividi e Mi piace è che l’utente può selezionare singoli
amici di Facebook con cui condividere il contenuto invece di postarlo a tutti sul suo wall.
Web Designer Likes this
 Find Friends Home
“Mi piace” per singoli pezzi di contenuto
Finora abbiamo visto come aggiungere il Mi piace a un intera pagina
web (singolo URL); esamineremo adesso come inserire questa funzione
nei singoli elementi del sito. È utile se avete un blog e desiderate che gli
utenti possano condividere solo alcuni post e non l’intero sito.
A seconda del servizio di blog usato, esistono alcuni plug-in che
supportano questa funzione; una ricerca su Google vi metterà sulla
strada giusta. Se scrivete a mano il codice del vostro blog, basta sostituire
il secondo snippet di codice dell’esempio precedente con quanto segue:
001<div class=”fb-like” data-href=”<?= $_SERVER[‘HTTP_HOST’] . $_
SERVER[‘PHP_SELF’] . $_SERVER[‘QUERY_STRING’]; ?>” data-
send=”true” data-width=”450” data-show-faces=”true”></div>
Assicuratevi di salvare questa pagina come file PHP e non come HTML.
L’obiettivo è quello di prendere l’indirizzo corrente della pagina e
aggiungerlo allo snippet di codice di Mi piace di FB; lanciate la pagina e
osservate il codice sorgente per vederlo in azione. Se non volete
trasformare la pagina in PHP, potete usare la funzione JS window.location.
Commenti
Continuando con l’esempio precedente, possiamo aggiungere al sito
una casella per i commenti Facebook con il seguente snippet di codice:
001<div class=”fb-like” data-href=”<?= $_SERVER[‘HTTP_HOST’] . $_
SERVER[‘PHP_SELF’] . $_SERVER[‘QUERY_STRING’]; ?>” data-
send=”true” data-width=”450” data-show-faces=”true”></div>
Per un corretto funzionamento, lo snippet JS di Facebook si dovrà
trovare all’inizio della pagina, ma questo codice può essere inserito nel
sorgente nella posizione desiderata. Dovrete anche sostituire YOUR_
URL con l’URL del contenuto da commentare; anche questa operazione
può essere svolta in modo dinamico con il codice PHP $_SERVER.
Leave comment…
Una volta integrata la casella dei commenti, gli utenti potranno
esprimere la loro opinione e allo stesso tempo pubblicizzare i
vostri contenuti
Registrazione
Potete usare la piattaforma Facebook per registrare gli utenti, e questo
significa che potete raccogliere i dati da Facebook invece di doverli
inserire nuovamente, operazione che semplificherà il processo di
registrazione. Inserite quanto segue nell’SDK JavaScript:
001 <fb:registration
002 fields=”name,birthday,gender,location,email”
003 redirect-uri=”FULL_URL/formsubmit.php”
004 width=”530”>
005 </fb:registration>
Il testo ‘formsubmit.php’ rappresenta la destinazione che dovranno
raggiungere gli utenti una volta registrati; dovete sostituire FULL_URL
con l’URL assoluto del server. Deve ovviamente essere una pagina che
elabora i dati del modulo; i dati che vengono passati sono sicuri, quindi
OR
I
dovete creare uno script che vi consenta di processarli.
Create un nuovo documento PHP che fungerà da pagina di
destinazione una volta che l’utente ha premuto il pulsante per la
registrazione. Aggiungete quindi il codice seguente:
001 <?php
002 define(‘FACEBOOK_APP_ID’, ‘your_app_id’);
003 define(‘FACEBOOK_SECRET’, ‘your_app_secret’);
004
005 function parse_signed_request($signed_request, $secret) {
006 list($encoded_sig, $payload) = explode(‘.’, $signed_request, 2);
007
008 // decode the data
009 $sig = base64_url_decode($encoded_sig);
010 $data = json_decode(base64_url_decode($payload), true);
Dovrete sostituire ‘your_app_id’ e ‘your_app_secret’
con l’ID e l’informazione segreta. Dal momento che
state programmando in PHP, l’informazione
segreta non verrà inclusa nel codice sorgente.
Sul CD il resto
Salvate il file come ‘formsubmit.php’. Se ora del codice
aprite il modulo di registrazione, compilate i di questo
campi e premete il pulsante di registrazione, speciale
apparirà lo script precedente, che mostra i campi
del modulo non codificati.
“ Facebook ha creato
un proprio set di istruzioni
di markup
”
Markup di Facebook
Facebook ha creato un proprio set di istruzioni di markup sia per
limitare ciò che potete fare come sviluppatori, sia per consentirvi di
connettervi ai dati Graph in modo più semplice. Il primo di questi
linguaggi è FBML (Facebook Markup Language). È molto simile a
HTML, con l’unica differenza che state renderizzando funzioni
specifiche di Facebook.
Questo spezzone di codice mostrerà una data nel formato POSIX.
Da Gennaio 2012 Facebook non supporta più FBML ed è passato a
HTML5 e iFrames. Tutte le app create usando FBML devono ora
usare le nuove chiamate Graph utilizzate in precedenza.
Un altro linguaggio di markup creato da Facebook è FBJS (Facebook
JavaScript). È una versione semplificata di JavaScript, ma usa molte
delle chiamate standard di JS. Il motivo dell’eliminazione delle
funzioni JavaScript riguarda la sicurezza: si impedisce infatti agli
sviluppatori di eseguire JS in un app in cui non dovrebbero, oltre
che consentire le chiamate ai dati Graph.
Il markup finale di Facebook è FQL (Facebook Query Language),
anch’esso molto simile a SQL standard. Ecco un esempio di
chiamata FQL:
001 SELECT name FROM user WHERE uid = me()
Il codice restituisce semplicemente il nome dell’utente
correntemente collegato. Ulteriori informazioni su FQL sono
reperibili all’indirizzo http://developers.facebook.com/docs/
reference/fql.
Speciale _____________________________________________31

Web Intents
L’API di Twitter permete di creare applicazioni
complesse per interagire con i servizi e tutti gli utenti,
e librerie open source gratuite da usare con qualsiasi
linguaggio di scripting. Quando avete a che fare con
dati utente e aggiornamenti di stato dell’applicazione
dovete affrontare le questioni di autenticazione e
sicurezza, che consistono nello svolgere l’ingrato
compito di gestione dell’autenticazione attraverso il
protocollo OAuth e nell’uso di chiavi di accesso, token
e permessi utente.
Per qualsiasi sviluppatore che desideri offrire sul suo
sito un’applicazione un po’ più interattiva senza dover
affrontare queste complesse questioni di
autenticazione, Twitter ha lanciato Web Intents. È un
set di funzioni che aiutano a integrare la funzionalità
Twitter senza l’uso di chiavi e token, e che può essere
impostato con poche righe di codice incollate nel
sito. Queste funzioni sono adatte anche per i
dispositivi mobile quindi, indipendentemente dal
dispositivo usato dai visitatori per entrare nel sito, si
possono comunque sfruttare le funzioni Twitter. Le
opzioni disponibili comprendono la pubblicazione di
tweet o la risposta a un tweet, la condivisione di un
tweet o la possibilità di indicare un tweet come
preferito, oltre al ‘segui’.
Per implementare la funzionalità Web Intents bastano
due semplici passaggi. Innanzitutto, dovete includere
il file JavaScript del widget (lo stesso usato per le
funzioni di Twitter); successivamente, dovete
aggiungere l’azione Web Intents. Le azioni non sono
altro che semplici collegamenti a specifici URL, che
variano a seconda del risultato che desiderate
ottenere. Facendo clic sul collegamento apparirà una
finestra con la chiamata relativa all’azione, che l’utente
può poi completare attraverso il sito.
001 <script src=”http://platform.twitter.com/
widgets.js” type=”text/javascript”></script>
002 <p><a href=”http://twitter.com/intent/
user?screen_name=webdesignermag”>Follow
&amp; Mini Profile</a></p>
003 <p><a href=”http://twitter.com/intent/
tweet”>Send a Tweet</a></p>
004 <p><a href=”http://twitter.com/intent/
tweet?in_
reply_to=126644035745095681”>@Reply to a
Tweet</a></p>
005 <p><a href=”http://twitter.com/intent/
retweet?tweet
id=126644035745095681”>Retweet
a Tweet</a></p>
006 <p><a href=”http://twitter.com/intent/
favorite?tweet_id=126644035745095681”>
Favourite a Tweet</a></p>
La facilità d’uso e di sviluppo elimina i problemi di
integrazione. Per maggiori informazioni andate su:
https://dev.twitter.com/docs/intents.
32 ____________________________________________ Speciale
Search
Cosa sta succedendo?
S
icuramente negli ultimi anni la popolarità di con persone o organizzazioni che condividono i
Twitter è cresciuta enormemente man loro interessi e tenere traccia di qualsiasi post o
mano che sempre più persone lo usano contenuto importante condiviso con il mondo.
per i motivi più diversi: per post Per i creativi e i professionisti del web, Twitter può
promozionali, richieste di aiuto e marketing, fino al rivelarsi uno strumento fondamentale. Ci consente
semplice utilizzo per restare in contatto con altre di rimanere in contatto con i membri delle comunità
persone. online che ci interessano, di conoscere le ultime
Il limite di 140 caratteri comporta che le informazioni novità, demo, release e tecnologie, e ci offre la
devono essere concise e sfruttare al massimo possibilità di promuovere i nostri servizi, lavori e
qualsiasi spazio. Grazie alla sua architettura ben qualunque cosa desideriamo far conoscere ai nostri
strutturata, è estremamente facile seguire gli utenti, amici.
condividere i tweet, rispondere o indicare come Come tale, raccogliere e mantenere i follower è la
preferito un tweet interessante. Per gli utenti, Twitter chiave per assicurarci che ci stiamo rivolgendo alle
è un ottimo modo per trovare, seguire e collegarsi masse e non al nulla.
Feed
Uno dei modi più semplici per farsi seguire su Twitter è inserire sul vostro sito un feed Twitter, così
che i visitatori capiscano subito di cosa parlate. Twitter disponde di un’API dettagliata con metodi
e funzioni per gli sviluppatori. Per ottenere la timeline pubblica di un utente in JSON, basta
chiamare l’URL: http://twitter.com/statuses/user_timeline/NOME_ACCOUNT.json.
Viene utilizzata l’API User Timeline di Twitter, ma dal momento che viene restituita come JSON
dobbiamo eseguire il parsing dei risultati per ottenere un risultato più pulito. Qui possiamo usare
jQuery e il suo metodo getJSON per eseguire la chiamata e adattare i risultati così da includere
qualsiasi collegamento presente nell’aggiornamento dello stato.
001 <script src=”http://code.jquery.com/jquery-latest.js”></script>
002 <script>
003 $(document).ready(function() {
004
005 // Here you can set the Twitter account name you wish to obtain the tweet for
006 var user = ‘coldfumonkeh’;
007
008 // jQuery will help with its getJSON method to obtain the user’s public timeline and
return the latest tweet
009 $.getJSON(‘http://twitter.com/statuses/user_timeline.json?screen_name=’ + user +
‘&count=1&callback=?’, function(data) {
010
011 // Assign result to variable
012 var status = data[0].text;
013
014 // Process the status
015 // Replace and define any URLs for inclusion in the output
016 status = status.replace(/((https?|s?ftp|ssh)\:\/\/[^”\s\<\>]*[^.,;’”>\:\s\<\>\)\]\!])/g,
function(url)
{
017 return ‘<a href=”’+url+’”>’+url+’</a>’;
018 }).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
019 // Include a link to any users mentioned within the tweet itself
020 return reply.charAt(0)+’<a href=”http://twitter.com/’+reply.
substring(1)+’”>’+reply.
substring(1)+’</a>’;
021 });
022
023 // Display the result
 Home Profile Messages
024 $(“#tweet”).html(status);
025 });
026
027 });
028 </script>
029
030 <h1>Latest Tweet</h1>
031 <div id=”tweet”></div>
In alternativa, Twitter dispone di alcuni file JavaScript con cui ottenere lo
stesso risultato ma che forniscono più di un risultato sullo stato:
001 <h1>Latest Tweets</h1>
002
003 <ul id=”twitter_update_list”>
004 <li><p></p></li>
005 </ul>
006
007 <script type=”text/javascript” src=”http://twitter.com/
javascripts/blogger.js”></script>
008 <script type=”text/javascript” src=”http://twitter.com/
statuses/user_timeline/coldfumonkeh.
json?callback=twitterCallb
ack2&amp;count=5”></script>
Con l’uso di alcuni semplici CSS per rifinire l’aspetto della vostra presenza
web, è possibile inserire questi script allo scopo di rendere
immediatamente visibile a tutti il vostro feed Twitter. Solo questo è
abbastanza per convincere i visitatori a seguirvi.
Pulsanti
Un’altra opzione disponibile per fornire agli utenti un modo per interagire
con voi su Twitter è il pulsante Segui, indicato da Twitter come un mezzo
per rafforzare il rapporto con il vostro pubblico. È stato estremamente
semplificato grazie al fatto che Twitter offre tali funzioni attraverso una
libreria JavaScript di widget, ospitata sui suoi server. Per il pulsante Segui,
che è molto facile da creare personalmente, su Twitter viene offerto
anche un generatore online che lo realizza automaticamente, insieme
ad altre risorse che vi aiutano ad aumentare la vostra visibilità
nel mondo dei social network. Per conoscere le varie risorse
disponibili digitate http://twitter.com/about/resources.
Il pulsante Segui è uno dei widget disponibili che
consentono agli utenti di seguire facilmente il vostro
account Twitter da qualsiasi pagina web in cui è stato
inserito. Il codice generato automaticamente è molto
semplice. L’elemento anchor contiene l’URL all’account Twitter, con
uno specifico attributo di classe impostato su twitter-follow-button
necessario perché il codice JavaScript del widget possa trasformare con
successo il collegamento nel pulsante. Se sul borwser dell’utente non è
attivo JavaScript, ci si può comunque collegare all’account del profilo.
001 <a href=”https://twitter.com/coldfumonkeh” class=”twitter-
follow-button” data-show-count=”true”>Follow @coldfumonkeh</a>
002 <script src=”//platform.twitter.com/widgets.js” type=”text/
javascript”></script>
Si possono eseguire ulteriori configurazione e personalizzazioni fornendo
nel codice i valori per attributi di dati specifici, che consentono di
OR
I
impostare la larghezza e l’allineamento del pulsante e di cambiare le
opzioni per il colore così da adattarlo al design del vostro sito. Per
ulteriori informazioni sulla personalizzazione, leggete la
documentazione a questo indirizzo:
https://dev.twitter.com/docs/follow-button.
Anche inserire vicino al pulsante una chiamata diretta a un messaggio
o a un’immagine di azione può aiutare ad attirare l’attenzione
sull’elemento consentendovi di convertire e aumentare il numero dei
follower.
Twitter non è altro che comunicazione e interazione e fare in modo che
il vostro messaggio venga notato nel traffico può essere difficile,
quindi aiutate gli altri ad aiutarvi. Solitamente, gli aggiornamenti di
stato o i tweet vengono generati dalla pagina principale del profilo di
un utente o attraverso un’applicazione desktop o mobile dedicata. Per
facilitare la comunicazione, potete aggiungere un pulsante Tweet al
vostro sito web per permettere ai visitatori di condividere i vostri
contenuti senza uscire dal sito. Si tratta in pratica di convogliare il
traffico sul vostro sito e aumentare la visibilità.
Di nuovo, è facile implementare questa funzione grazie al file JavaScript
del widget fornito da Twitter. Facendo clic sul pulsante, all’utente verrà
per prima cosa chiesto se desidera eseguire il login a Twitter o, nel caso
l’operazione sia già stata effettuata, gli verrà mostrato il messaggio da
aggiornare, che può essere modificato e migliorato prima della
pubblicazione.
001 <a href=”https://twitter.com/share” class=”twitter-
share-button” data-text=”Check this out:”
data-count=”vertical” data-
via=”coldfumonkeh” data-
related=”monkehTweets:ColdFusion
Twitter API”>Tweet</a><script type=”text/
javascript” src=”//
platform.twitter.com/widgets.js”></script>
Per impostazione predefinita, per creare il messaggio
lo stato userà l’URL e il titolo della pagina corrente. Potete anche
decidere di visualizzare una casella dei conteggi, che mostrerà
esattamente quante volte è stato twittato l’URL specifico: l’ideale se
volete informare gli utenti della popolarità del contenuto.
Il pulsante Tweet offre anche un modo semplice per estendere
qualsiasi opportunità di marketing possibile fornendo un account
facoltativo, che verrà mostrato agli utenti dopo che hanno pubblicato
l’aggiornamento di stato dal vostro sito. Il pulsante Tweet può essere
personalizzato allo stesso modo di Segui così da adattarsi all’estetica
del sito e del design. È uno strumento semplice ed efficace che
consente di eseguire aggiornamenti interattivi dal vostro sito e di
sfruttare le più importanti opportunità di marketing. Per ulteriori
informazioni sulla personalizzazione, consultate la documentazione
all’indirizzo https://dev.twitter.com/docs/tweet-button.
@Anywhere
@Anywhere è una soluzione facile per inserire nel vostro sito la
piattaforma Twitter. Le funzioni di @Anywhere sono dettagliate e
potenti e consentono di creare tweet dal vostro sito, generare e
visualizzare informazioni dettagliate sul profilo dell’utente e convertire
gli username di Twitter in collegamenti cliccabili ai profili relativi.
Sebbene il servizio sia facile da implementare, per usare @Anywhere
dovete creare e registrare un’applicazione con Twitter, operazione
Speciale ____________________________________________ 33
 Search

js?id=API_KEY&v=1” type=”text/javascript”></script>
eseguibile al seguente indirizzo: http://twitter.com/apps/new. 007 </head>
Inserite un nome e una descrizione per l’applicazione e impostate i 008 <body>
permessi di accesso su lettura e scrittura per consentire agli utenti di 009
inviare gli aggiornamenti di stato. Dopo aver registrato l’applicazione, 010 <div id=”followMe”></div>
Twitter genererà i valori per la consumer key e il consumer token, da 011
cui dovete copiare e usare la consumer key. 012 <script type=”text/javascript”>
Non appena l’applicazione è stata generata e il valore della chiave è 013 twttr.anywhere(function (twitter) {
pronto all’uso, potete inizializzare l’API @Anywhere inserendo il file 014 twitter(“#followMe”).followButton(“webdesignermag”);
JavaScript richiesto e aggiungendo la chiave API (il valore della 015 });
consumer key) alla fine della stringa. 016 </script>
017 </body>
001 <!DOCTYPE HTML> 018 </html>
002 <html>
003 <head> L’utente vedrà una finestra contenente una
004 <meta http-equiv=”Content-type” content=”text/html; schermata di autenticazione sicura, gli verrà chiesto
charset=utf-8”> di eseguire il login a Twitter (se non lo ha già fatto)
005 <title>Anywhere Sample</title> e poi dovrà autorizzare l’accesso all’applicazione
006 <script src=”http://platform.twitter.com/anywhere. @Anywhere.
js?id=API_KEY&v=1” type=”text/javascript”></script> Si possono realizzare molte cose con
007 </head> l’account @Anywhere, tra cui ottenere e
008 <body> visualizzare i dati utente a seguito di un
009 </body> processo di autenticazione e
010 </html> autorizzazione andato a buon fine,
oltre che consentire agli utenti di
Il file JavaScript inserito definire un oggetto globale chiamato eseguire login e logout da Twitter,
‘twttr’, che useremo per fare riferimento all’API e chiamare i metodi ancora una volta evitando che
all’interno del codice HTML. Dopo aver inserito il file JavaScript, abbandonino il vostro sito e
possiamo accedere all’oggetto twttr globale e chiamare il metodo semplificando l’interazione tra i vostri contenuti
anywhere() dall’API con un parametro che fa riferimento e le ottime funzionalità fornite da Twitter.
all’oggetto da usare, simile all’oggetto ‘$’ di jQuery. Per maggiori informazioni leggete la documentazione
In questo esempio chiederemo alla piattaforma @ all’indirizzo https://dev.twitter.com/docs/anywhere.
Anywhere di collegare automaticamente qualsiasi
@usernames Twitter presente nel corpo della
pagina alle relative pagine del profilo. Possiamo Analytics
eseguire l’operazione usando semplicemente il Una recente aggiunta alla gamma dei servizi Twitter è stato Web
metodo linkify(), ma possiamo anche aggiungere Analytics. Lo scopo di questo strumento è aiutare gli sviluppatori e i
un livello ulteriore di funzionalità e fare in modo che proprietari di siti a comprendere meglio la percentuale di traffico che
sia l’API a generare una hovercard per ciascuno proviene da Twitter e l’efficacia dell’integrazione di Twitter nei loro siti
username che mostrerà le informazioni sul profilo e o applicazioni.
un pulsante Segui. Il servizio, sebbene attualmente sia disponibile solo a un gruppo
Potete usare l’API @Anywhere per inserire un ristretto di partner “di collaudo”, sarà alla fine accessibile a tutti gli
pulsante Segui e una casella Tweet, allo stesso modo dei widget utenti Twitter e fornirà una rappresentazione dei dati semplificata o
descritti in precedenza, ma con maggiore funzionalità e controllo un’infografica dei clickback (come quello mostrato in figura) e ll’attività
sui callback e sul modo in cui lavorate con i dati. del pulsante Tweet. Si parla anche di un’API che consentirà agli
I metodi esaminati finora hanno forniscono un metodo di sviluppatori di interagire con i dati.
integrazione pratico e semplice che evita di doversi preoccupare
di autenticazioni complesse e gestione degli utenti. @Anywhere
offre anche alcuni metodi per connettersi a Twitter e per
consentire agli utenti di accedervi dal vostro sito usando OAuth,
senza dover affrontare l’autenticazione. Nel codice seguente
creiamo un pulsante Segui per un account utente specifico.

001 <!DOCTYPE HTML>

002 <html>
003 <head>
004 <meta http-equiv=”Content-type” content=”text/html;
charset=utf-8”>
005 <title>Anywhere Sample</title>
006 <script src=”http://platform.twitter.com/anywhere.

34 ____________________________________________ Speciale
 OGNI MESE

148
PAGINE DI
APPROFONDIMENTI
per sfruttare
al massimo
il potenziale
del tuo pc

TUTTA
NUOVA
Sei dei migliori blog di design
I designer sono entusiasti di mettere in mostra il loro talento o quello di qualcun altro.

Un insieme di texture, immagini di

sfondo ed elementi di design sono
la chiave per creare il contenitore
su cui si basa Design Cubicle.

Pulchry ha una piccola selezione di

post che però sono tutti
straordinari: offrono stile e
sostanza e devono
assolutamente essere
letti.

The Design Cubicle Pulchry Little Box Of Ideas

www.thedesigncubicle.com www.pulchry.com/pulchryzine www.littleboxofideas.com
Piattaforma di sviluppo WordPress Piattaforma di sviluppo WordPress Piattaforma di sviluppo WordPress

Questo blog/sito è composto da un’unica colonna
centrale di testo, ma la disposizione del contenuto, i
font, la palette dei colori e alcuni tocchi casuali
catturano l’attenzione del visitatore. Un esame più
attento rivela che c’è molto di più da vedere: texture,
pattern e sfondi sono stati inseriti nel design per creare
un contenitore moderno e completo per i contenuti.
Il design del blogazine Pulchry cattura l’attenzione
con una manciata di post personalizzati. Table of
Contents non spiega cosa troverete all’interno della
sezione, ma una volta entrati vi troverete davanti ad
alcuni post realizzati in modo egregio. Leggeteli tutti
e non dimenticatevi di visitare How Leaves use Color
Profiles. Istruttivo, colorato, creativo ed elegante.
LBOI è un ottimo esempio di blog che si concentra sul
contenuto, integrando contemporaneamente abbastanza
elementi estetici da renderlo un’esperienza invitante dal
punto di vista visuale. Un insieme di texture e colori di
sfondo offre un contenitore di base, completato dal logo. I
post sono delle singole entità e usano uno dei font
migliori: ChunkFive.

36 ________________________________________ blog beautiful

 <Blog Beautiful>
Sei dei migliori blog di design

Abbiamo scelto sei blog sul design che offrono qualcosa di veramente speciale…

Gli elementi della navigazione

offrono un uso creativo.
Selezionando i collegamenti di
menu standard, nella finestra
sottostante appaiono
nuove storie.

Testi grandi e font diversi tra loro non

mancano. Il testo del titolo e un
corpo del testo ugualmente
grandi rendono la pagina
estremamente
leggibile.

Design*Sponge Design Intellection Core77

www.designsponge.com http://designintellection.com www.core77.com
Piattaforma di sviluppo WordPress Piattaforma di sviluppo HTML, CSS, jQuery Piattaforma di sviluppo HTML, CSS, jQuery

Il layout e il formato di Design*Sponge rispecchiano
gli standard di un blog, ma sono i colori, gli elementi
eleganti, i font e le immagini che attirano il visitatore.
Le grafiche ben incorniciate, i font retro e i brevi post
accompagnati da fotografie dimostrano buon gusto,
e anche le pubblicità si integrano molto bene nel
design.
Gli spazi vuoti e i font in grassetto di grandi dimensioni
catturano subito l’attenzione dell’utente, ma non sono gli
unici elementi che caratterizzano un’esperienza vivace e
coinvolgente. L’uso di immagini ben realizzate, unito a font
scelti attentamente intrattengono l’utente e lo invitano a
continuare a leggere la pagina per scoprire cosa ha ancora
da offrire.
Un blog pieno di azione con una particolare attenzione
per il design industriale. Il layout è composto da due
sole colonne, ma l’uso intricato di bordi e colori di
sfondo separa i contenuti e migliora la leggibilità. Il font
del logo infonde subito personalità alla pagina e gli
elementi di navigazione semplici ma creativi dimostrano
l’ottimo lavoro svolto per realizzare questo sito.

blog beautiful ________________________________________37

 <Tutorial>
Imparare a programmare con JavaScript
Imparare a
programmare
con JavaScript
In questa nuova serie di tutorial
esamineremo le basi di questo
linguaggio estremamente
importante
strumenti | tecnologie | tendenze Editor di testo (Dreamweaver, Blocco
Note o simile) & browser web (Safari o simile)
C
<sopra>
• Ecco la nostra pagina HTML di
esempio nella finestra di codice di
Dreamweaver CS5, che offre ottimi
strumenti di scrittura e debugging.
Tuttavia, questo tipo di supporto non
è fondamentale: potete anche usare
gli editor di testo standard, basta che
rispettiate la sintassi.
In questa serie vi illustreremo le basi di
JavaScript e, come nella maggior parte dei
tutorial, partiremo dall’inizio
38 _____________________________________________ tutorial
SUL CD
• index.html:
HTML e
JavaScript
• style.css: CSS
• Codice completo
dei passaggi
ol passaggio di HTML da una tecnologia
usata per scrivere semplici pagine web a
una per costruire vere applicazioni web,
JavaScript sta diventando un linguaggio
essenziale. Infatti, JS è l’unico modo per
sfruttare al massimo tutte le nuove API di
HTML5. In questa serie, quindi, vi illustreremo
le basi di JavaScript e, come nella maggior
parte dei tutorial, partiremo dall’inizio.
JavaScript è famoso per la sua cattiva fama di semplice
linguaggio di scripting, ma la verità è che JS è un linguaggio
dinamico molto potente e si sta affermando in vari settori. Sta
anche ricevendo l’attenzione di alcune delle più brillanti
menti dei linguaggi di programmazione e, di conseguenza, la
sua velocità di esecuzione è enormemente migliorata. Se
conoscete appena il codice JS, o se non avete mai avuto
l’occasione di scriverlo personalmente, in questa serie
descriveremo tutto ciò che si deve sapere non solo per
scrivere JavaScript, ma per scrivere e comprendere il codice
JavaScript che interagisce con il browser e le sue API. Anche
se avete un po’ di esperienza nel campo della
programmazione, in questo tutorial potrete trovare alcuni
suggerimenti. Alla fine dell’articolo conoscerete variabili,
condizionali, iterazione e come interagire con il DOM del
browser. Iniziamo quindi; tutto ciò che vi serve è un editor di
testo e il vostro browser web.
01 Creare un semplice file
HTML
Tutto il codice JavaScript che scriveremo in questa
serie viene eseguito in una pagina web, quindi
iniziamo creando una semplice pagina HTML
chiamata ‘index.html’, a cui nel passaggio 2
aggiungeremo il codice JavaScript. Partiremo dal file
HTML più semplice possibile e ci garantiremo che sia
conforme agli standard HTML5, come si può notare
dalla dichiarazione doctype semplificata e dagli
elementi HTML, meta e link. Da notare la presenza di
un piccolo file CSS, necessario ad applicare lo stile
alla pagina; inoltre, è stata scritta una semplice
sezione body contenente un titolo e un <div> vuoto,
a cui è stato assegnato l’id bottles.
001 <!doctype html>
002 <html lang="en">
003 <head>
004   <title>99 Bottles of Beer</title>
005   <meta charset="utf-8">
006   <link rel="stylesheet" href="style.css">
007 </head>
008 <body>
009   <h1>99 Bottles of Beer</h1>
010   <div id="bottles">
011   </div>
012 </body>
013 </html>
02 Aggiungere un elemento
<script>
È arrivato il momento di aggiungere il codice
JavaScript. Una questione che confonde molti
programmatori JS principianti è dove inserire i loro
script. Vanno posizionati nella sezione <head> o
<body>, all’inizio del file o alla fine? Per ora
aggiungeremo lo script alla sezione body del
documento HTML; più avanti nella serie parleremo
di dove inserire il codice e di come scegliere la
posizione migliore. Iniziamo quindi aggiungendo i
tag <script> di apertura e chiusura al <div> della
pagina. Per ora lo script contiene un semplice
commento, che non è altro che una nota e che
verrà ignorato dall’interprete JS. Il vero codice verrà
inserito a breve.
Se siete abituati a studiare il codice JS, avrete
notato che nel tag dello script abbiamo tralasciato
l’attributo type (che solitamente è type=
”JavaScript”). Questo perché il nuovo standard
HTML5 considera JavaScript il linguaggio di
scripting predefinito. In altre parole, se usate
JavaScript non è più necessario fornire il tipo
dello script.
001 <div id="bottles">
002 <script>
003    // Your JavaScript code will go here
004 </script>
005 </div>

<sopra>
• Visualizzare il valore di una variabile usando la funzione JavaScript alert()
03 Variabili
Avrete ormai scoperto che la nostra applicazione
è la famosa canzone tradizionale americana 99 Bottiglie Di
Birra. Ecco come la implementeremo: inizieremo con 99
bottiglie di birra, creeremo un verso della canzone,
sottrarremo una bottiglia e poi ripeteremo l’intero
processo.
La prima cosa utile è una variabile che contenga il
numero di bottiglie rimanenti. Una variabile non è poi così
diversa da quelle usate negli esercizi di matematica;
tuttavia, come vedrete in questa serie, le variabili possono
contenere molto più dei numeri, ma per non complicare
subito le cose partiremo con delle cifre. In JavaScript una
Variabili ed espressioni
In JavaScript una dichiarazione è una riga di codice
che termina con un punto e virgola, mentre
un’espressione è solitamente ciò che appare sul lato
destro del segno =. Quindi, ogni volta che vedete una
dichiarazione come
001 var bottles = 99;
quella a destra di = è l’espressione. Per scoprire il valore
dell’espressione, dovete calcolarla. Per esempio, se
avete una dichiarazione come
001 var dogYears = 4 * 7;
l’espressione è 4 * 7, e potete scoprire il valore
semplicemente moltiplicando 4 per 7. In JavaScript la
moltiplicazione è rappresentata da un asterisco (*).
Supponete di avere questo codice:
001 var dogsAge = 4;
002 var dogYears = dogsAge * 7;
Per ottenere il valore dell’espressione dogsAge * 7,
dovete sostituir il valore corrente di dogsAge, 4, e poi
Imparare a programmare con JavaScript
nuova variabile viene dichiarata con la parola chiave ‘var’. E
per dichiarare completamente una variabile avete bisogno
di assegnarle un nome e un valore. Chiameremo la nostra
variabile ‘bottles’ e imposteremo il suo valore su 99.
001 <script>
002 var bottles = 99;
003 </script>
04 Avvisare l’utente
Ora che la variabile ha un valore, potete usarla nel
codice e, mentre non disponete ancora di altro codice,
potete testarla con la funzione alert di JavaScript per
moltiplicarlo per ottenere 28 come valore di dogYears.
Osserviamo qualche altra espressione.
001 var x = 3;
002 var y = 2;
003 var z = x - y;
Qui ci sono tre espressioni: 3, 2 e x - y. 3 e 2 sono
facili da calcolare; per ottenere il valore di x – y,
sottraete il valore corrente di y dal valore corrente di
x, rispettivamente 2 e 3, per avere 1 che è il valore che
viene assegnato a z.
Potete cambiare il valore di una variabile dopo
averla impostata assegnandole il valore di un’altra
espressione. Per esempio,
001 dogsAge = 5;
imposta il valore di dogsAge sul valore dell’espressione
5. Quindi dogsAge era stata inizializzata sul valore di 4,
ma ora le abbiamo assegnato un nuovo valore.
Potete anche riassegnare un nuovo valore a una
variabile, in questo modo:
001 dogsAge = dogsAge + 1;
tutorial _____________________________________________
<Tutorial>
accertarvi che contenga il valore 99. Questa funzione,
incorporata in tutti i browser, visualizza il valore assegnato
in una finestra di dialogo. Useremo quindi alert per
mostrare il valore della variabile bottles. Proseguite
aggiungendo al codice la riga 3 e caricando la pagina in
un browser qualsiasi. Apparirà una finestra di dialogo con
il numero 99.
001 <script>
002 var bottles = 99;
003 alert(bottles);
004 </script>
05 Ripetere le operazioni
Ora che abbiamo impostato la variabile sul valore
di partenza, 99, abbiamo bisogno di un modo per cantare
una strofa (o, in realtà, visualizzarla sulla pagina web),
sottrarre uno dal conto delle bottiglie e poi ripetere
queste operazioni finché terminano le bottiglie. A questo
scopo useremo il ciclo while, che offre un modo per
ripetere un pezzo di codice finché viene soddisfatta una
qualche condizione. Nel nostro caso la condizione è
l’esaurimento delle bottiglie. Osserviamo il ciclo while
nel codice:
001 <script>
002 var bottles = 99;
003 while (bottles > 0) {
004     alert(bottles);
005 }
006 </script>
Qui, abbiamo invecchiato il cane di un anno
aggiungendo 1 al suo valore corrente. Se dogsAge era
5, dopo questa dichiarazione sarà 6.
Naturalmente le espressioni possono lavorare
anche con valori non interi. Per esempio:
001 var dollars = 20.25;  
In questo caso, stiamo assegnando alla variabile dollars
un numero a virgola mobile, che poi potremo usare in
un’espressione, così:
001 var pounds = dollars * 0.6267; 
Per ottenere il valore di pounds, calcoliamo
l’espressione dollars * 0.6267.
Le espressioni possono anche calcolare valori true e
false, come nell’esempio seguente:
001 var isMiddleAge = dogsAge > 5
Qui a isMiddleAge viene assegnato il valore true se
dogsAge è uguale o maggiore di 6. Esistono altri valori
che possono essere assegnati alle variabili, ma ce ne
occuperemo nelle prossime puntate della serie.
39
 <Tutorial>
Imparare a programmare con JavaScript

seguente; noterete che (per ora) abbiamo cambiato il

Cos’è una stringa?
Una stringa è una sequenza di caratteri.
Solitamente le scriviamo come un insieme di
caratteri tra virgolette, come ‘dog’ o ‘I’m
loving this JavaScript stuff ’. Potete assegnare
una stringa a una variabile, in questo modo:
001 var dogName = "Fido";
Potete usare una variabile contenente una
stringa come qualsiasi altra variabile. Per
esempio, se usate alert() per visualizzare la
variabile
001 alert(dogName);
apparirà una finestra di dialogo con il testo
‘Fido’. Potete anche unire le stringhe tra loro
usando l’operatore + di JavaScript:
001 var firstName = "Arthur";
002 var lastName = "Dent";
003 var fullName = firstName + " " +
lastName;
valore iniziale delle bottiglie da 99 a 3 così che non sarete
costretti a chiudere 99 finestre di dialogo (sarebbe molto
noioso).
001 <script>
002 var bottles = 3;
003 while (bottles > 0) {
004     alert(bottles);
005     bottles = bottles - 1;
006 }
007 </script>
06 Aggiungere una variabile
lyrics
L’uso della funzione alert ci ha consentito di osservare
attentamente come funziona il codice. Ciò che dovete
fare ora è creare le parole della canzone. Quindi, invece di
ricevere un avvertimento ogni volta che bevete una birra,
costruiremo una stringa di caratteri contenente tutte le
parole della canzone e poi la aggiungeremo alla pagina
così da renderle visibili. A questo scopo, dovete dichiarare
un’altra variabile che contenga le parole e che
chiameremo ‘lyrics’. E, per il valore iniziale, la imposteremo
su una stringa di caratteri vuota (consultare il box “Cos’è
una stringa?”).
001 <script>
the wall <br><br>";
010 }
011 </script>
Noterete che abbiamo aggiunto una riga di codice per
ciascuna riga della strofa e, in ognuna di esse, abbiamo
aggiornato le parole esistenti. Esaminiamo
attentamente il codice. La prima volta che parte il ciclo,
aggiungiamo la riga ‘99 bottles of beer on the wall’ (e in
ciascuna iterazione successiva del ciclo 99 diventa 98,
97, 96 e così via). L’operazione consiste nell’inserire la
stringa ‘bottles of beer on the wall <br>’ nella variabile
bottles. Per concatenare le stringhe tra loro potete
usare l’operatore +. Abbiamo anche fornito un tag
HTML di interruzione di riga alla fine della stringa, che
capirete come funziona quando più avanti
aggiungeremo le parole alla pagina. La seconda riga è
praticamente uguale alla prima, a eccezione del fatto
che stiamo concatenando il valore delle bottiglie alla
stringa ‘bottles of beer <br>’. La terza riga non contiene
alcun riferimento al numero di bottiglie. E, infine,
l’ultima riga ripete il codice della prima riga della strofa,
ma solo dopo che il valore delle bottiglie è stato
diminuito di uno, così che la prima volta che parte il
ciclo l’ultima riga aggiungerà ‘98 bottles of beer on the
wall <br><br>’ alla canzone.

Una volta calcolato il codice, il valore di 002 var bottles = 99;
fullName è ‘Arthur Dent’. Avrete notato che 003 var lyrics = "";
abbiamo aggiunto uno spazio tra il nome 004 while (bottles > 0) {
e il cognome semplicemente usando le 005     alert(bottles);
virgolette tra uno e l’altro. 006     bottles = bottles - 1;
Se provate a concatenare una variabile 007 }
con un valore di stringa a una con un valore 008 </script>
numerico, JavaScript convertirà il numero in
stringa e concatenerà le due stringhe:
07 Creare le parole
Ora, per creare le parole, ogni volta che parte il
001 var answer = "My favourite number is: " ciclo aggiungeremo un verso della canzone alla
+ 42; variabile lyrics, e per quando il ciclo while sarà
Il valore di answer è la stringa: ‘My favourite completo, tale variabile conterrà l’intero brano. Ecco la
number is: 42’. prima strofa:
99 bottles of beer on the wall,
99 bottles of beer,
Take one down, pass it around,
98 bottles of beer on the wall.
La sintassi del ciclo while è composta dalla parola chiave Ora dobbiamo scrivere il codice relativo.
‘while’, da una condizione e dal codice, che si estende tra
le parentesi graffe di apertura e di chiusura. Il codice tra 001 <script>
parentesi è il ‘corpo’ del ciclo e contiene una o più 002 var bottles = 99;
dichiarazioni di codice che devono essere calcolate ogni 003 var lyrics = "";
volta che la condizione è true. Qui, sempre che restino più 004 while (bottles > 0) {
di zero bottiglie, calcoleremo il codice nel corpo del ciclo 005     lyrics = lyrics + bottles + " bottles of beer on
while. In questo caso, mostreremo un avvertimento che the wall <br>";
indica quante bottiglie restano ogni volta nel ciclo. 006     lyrics = lyrics + bottles + " bottles of beer on
Questo codice ha però un problema: non viene mai the wall <br>";
eliminata alcuna bottiglia, quindi la dichiarazione while     lyrics = lyrics + bottles + " bottles of beer <br>";
continuerà all’infinito mostrando ogni volta nella finestra 007     lyrics = lyrics + "Take one down, pass it around,
di dialogo il numero 99. Ciò che dobbiamo fare è <br>";
visualizzare la finestra e poi eliminare una bottiglia: basta 008     bottles = bottles - 1;
sottrarre uno dalla variabile bottle. Provate il codice 009     lyrics = lyrics + bottles + " bottles of beer on
08 Test condizionale
Se siete stati attenti (o se conoscete bene la
canzone), avrete notato che alla fine del brano le parole
non sono ‘0 bottles of beer on the wall’, ma ‘No more
bottles of beer on the wall’. Non preoccupatevi, ora ce
ne occuperemo, abbiamo solo bisogno di un modo per
controllare se il valore delle bottiglie è maggiore di zero.
In caso di esito positivo, aggiungiamo le parole come
sempre; ma se il valore delle bottiglie è zero, inseriremo
nella stringa lyrics ‘No more bottles of beer on the wall’.
A tale scopo potete usare una dichiarazione if. Ecco
l’aspetto di tale dichiarazione:
001 if (bottles > 0) {
002    // do something here
003 }
Come il ciclo while, la dichiarazione if usa un test
condizionale tra parentesi, e il codice che viene calcolato
quando il test è true viene inserito nel corpo della
dichiarazione if tra parentesi graffe. Riscriviamo quindi
l’ultima riga di codice usando una dichiarazione if, come
mostrato di seguito:
001 <script>
002 var bottles = 99;
003 var lyrics = "";
004 while (bottles > 0) {
005     lyrics = lyrics + bottles + " bottles of beer on
the wall <br>";
006     lyrics = lyrics + bottles + " bottles of beer
<br>";
007      lyrics = lyrics + "Take one down, pass it

40_____________________________________________ tutorial
 <Tutorial>
Imparare a programmare con JavaScript

<sopra> <sopra>
• Il document object model (DOM) per la pagina web 99 bottles • Le parole generate da JavaScript e visualizzate nel browser

Le origini di
around, <br>"; 013     }
JavaScript
quindi il codice Con una sintassi e una
008     bottles = bottles - 1; 014 } così da struttura influenzate dal
009     if (bottles > 0) { 015 </script> incorporare le linguaggio C, JavaScript
010          lyrics = lyrics + bottles + " bottles of beer else va inserita subito dopo la parentesi graffa di chiusura righe da 15 a 17: prende anche in prestito da
on the wall <br><br>"; di if, e tutto ciò che va calcolato se la condizione è false Java le convenzioni di nome,
011     } deve essere inserito tra parentesi graffe dopo else. 001 <script>
ma è intrinsecamente
012 } 002 var bottles =
diverso
10 Visualizzare le parole sulla
013 </script> 99;
pagina web 003 var lyrics = "";
Ora, sempre che ci siano più di zero bottiglie, create le Se ora caricate questo codice nel browser, non apparirà 004 while (bottles > 0) {
solite parole. Ma se il numero di bottiglie corrisponde niente sulla pagina risultante. Perché? Perché stiamo 005     lyrics = lyrics + bottles + " bottles of beer on
esattamente a zero? Allora dobbiamo aggiungere ‘No costruendo una stringa con le parole, che però non the wall <br>";
more bottles of beer on the wall’. Occupiamoci di stiamo visualizzando da nessuna parte. Ciò che 006     lyrics = lyrics + bottles + " bottles of beer
questo compito. dobbiamo fare è aggiungere le parole alla pagina <br>";
attraverso il document object model (DOM) del browser. 007     lyrics = lyrics + "Take one down, pass it around,

09 La clausola else Pensate al DOM come alla rappresentazione interna del <br>";
Qui i casi sono due: dopo aver sottratto 1 dal browser della pagina. Più avanti nella serie esamineremo 008     bottles = bottles 1;
valore delle bottiglie alla riga 8, le bottiglie sono più di come funziona, ma per ora vi basterà pensare al DOM 009     if (bottles > 0) {
zero o esattamente zero (ricordate che il ciclo si arresta come a un modo per accedere e aggiornare gli elementi 010         lyrics = lyrics + bottles + " bottles of beer
dopo che il valore delle bottiglie ha raggiunto lo zero). della pagina HTML. on the wall <br><br>";
Quando ci sono due situazioni come questa, potete Ciò che dobbiamo fare ora è prendere il <div> che 011     } else {
usare una dichiarazione if-else, che dice: ‘if (se) qualcosa abbiamo posizionato nell’HTML all’inizio dell’articolo e 012         lyrics = lyrics + "No more bottles of beer on
è true, allora calcola il codice, ‘else’ (altrimenti) se non è inserire al suo interno le parole. Dobbiamo quindi per the wall. <br>";
true, calcola qualche altro codice. È proprio ciò di cui prima cosa riuscire ad accedere al <div>, poi vedremo 013     }
abbiamo bisogno qui. come aggiungere le parole. Ricordate che al <div> è 014 }
stato assegnato l’id ‘bottles’; usando questo id riusciremo 015 var bottlesDiv = document.
001 <script> ad accedere all’elemento <div> nel codice, in questo getElementById("bottles");
002 var bottles = 99; modo: 016 bottlesDiv.innerHTML = lyrics;
003 var lyrics = ""; 017 </script>
004 while (bottles > 0) { 001 var bottlesDiv = document.
005     lyrics = lyrics + bottles + " bottles of beer on getElementById("bottles"); Se ricaricate la pagina, vedrete tutte le parole che
the wall <br>"; sono state create in modo programmatico usando
006     lyrics = lyrics + bottles + " bottles of beer Questo codice prende l’elemento con l’id ‘bottles’ e ce lo JavaScript.
<br>"; restituisce. Una volta ottenuto l’elemento, possiamo In questa prima lezione della nuova serie di Web
007     lyrics = lyrics + "Take one down, pass it around, modificarlo impostando il valore del codice HTML Designer su JS avete appreso molte delle nozioni
<br>"; all’interno del <div>: fondamentali di JavaScript: variabili, espressioni,
008     bottles = bottles - 1; iterazioni e dichiarazioni condizionali e anche un
009     if (bottles > 0) { 001 bottlesDiv.innerHTML = lyrics; piccolo assaggio sul funzionamento del DOM. E ora
010         lyrics = lyrics + bottles + " bottles of beer che avete scritto la vostra prima vera applicazione,
on the wall <br><br>"; Qui stiamo impostando l’HTML del <div> sulle parole siete pronti per affrontare le funzioni JavaScript
011     } else { della canzone. Non appena terminata l’operazione, il descritte nel tutorial di pagina 42. Avete già usato
012         lyrics = lyrics + "No more bottles of beer on browser aggiornerà automaticamente e visualizzerà la alcune funzioni: alert() e document.getElementById(),
the wall. <br>"; pagina con il nuovo codice HTML aggiunto. Aggiornate ma lì inizieremo a creare le nostre funzioni.

tutorial ______________________________________________41
 <Tutorial>
JavaScript parte 2: array e funzioni

JavaScript N
el tutorial precedente
abbiamo iniziato a
prendere confidenza con
JavaScript e a conoscere

parte 2: array
variabili, espressioni
condizionali e iterazioni; in
questo articolo faremo un
passo avanti e parleremo

e funzioni
di funzioni e array.
Esamineremo in dettaglio anche il document object model
(DOM) del browser e impareremo a sfruttarlo attraverso
JavaScript. Inoltre, realizzeremo qualcosa di fantastico grazie
ai concetti appresi: una presentazione fotografica rotante. Ci

In questa seconda puntata della occuperemo per prima cosa della pagina della
presentazione, così da comprendere cosa stiamo costruendo.
serie sull’apprendimento dei In alcuni siti web all’avanguardia si possono trovare alcune di

fondamenti della queste presentazioni, composte da un’immagine a tutto

schermo usata per lo sfondo e del testo posizionato sopra la
programmazione web grafica. Spesso tali immagini cambiano automaticamente o

conosceremo le funzioni e i dati SUL CD

come conseguenza dell’input di un utente. Questi tipi di
pagine vengono impiegate nelle homepage di siti fotografici
delle variabili • File HTML e CSS o come copertine di album corredate di audio di sottofondo
• Codice JavaScript (l’audio verrà esaminato nei prossimi numeri quando
strumenti | tecnologie | tendenze Editor di testo (Dreamweaver, • ‘slideshow.js’:
parleremo delle API HTML5). Copiate i file dal CD allegato
TextMate, Blocco Note o simile) e browser web JavaScript
• Immagini (di (assicurandovi che le immagini vengano posizionate nella
Elisabeth Robson)
cartella Images), quindi aprite il file ‘slideshow.html’ per
vedere l’esempio completo. Sembra complicato? Per niente!
Vi forniremo tutto il codice e le istruzioni necessarie.

<sopra>
• L’app della presentazione fotografica

01 Markup HTML 02 Aggiungere le immagini

006 <link rel="stylesheet" href="slideshow.
Inizieremo con una semplice pagina HTML. Il css"> Ora aggiungete ai div due immagini; avremo
corpo contiene due <div>, il primo dei quali verrà usato per 007 <script src="slideshow.js"></script> bisogno di entrambe per eseguire la dissolvenza in entrata
lo sfondo della pagina (righe 8-9), mentre il secondo 008 </head> di una mentre l’altra effettua una dissolvenza in uscita (più
conterrà il testo descrittivo che verrà posizionato sopra lo 009 <body> avanti parleremo dell’effetto di dissolvenza). Se conoscete
sfondo (righe 10-11). 010 <div class="photo"> HTML avrete notato che nei tag <img> (righe 2, 3) non
011 <img id="one"> sono presenti attributi src: questo perché specificheremo
001 <!doctype html> 012 <img class="transparent" id="two"> le sorgenti delle immagini in modo dinamico con JS.
002 <html> 013 </div>
003 <head> 014 <div id="description"> 001 <div class="photo">
004 <title>Beautiful Food Photo Slideshow</ 015 </div> 002 <img id="one">
title> 016 </body> 003 <img class="transparent" id="two">
005 <meta charset="utf-8"> 017 </html> 004 </div>

42 _____________________________________________ tutorial
 <Tutorial>
JavaScript parte 2: array e funzioni

03 Aggiungere il codice
JavaScript
Invece di posizionare il codice JavaScript direttamente
nella pagina, useremo l’attributo src dell’elemento
<script> per puntare al file slideshow.js (riga 4), dove
scriveremo il codice. In questo modo potremo tenere
separati HTML e JavaScript, e questo rende il codice più
leggibile e gestibile.
È importante specificare un tag </script> di chiusura,
altrimenti alcuni browser non si comporteranno nel
modo corretto.
<sopra> 001 <head>
• Il document object model (DOM) per la pagina HTML
della presentazione 002 <title>Beautiful Food Photo Slideshow</
title>
003 <meta charset="utf-8">
004 <script src="slideshow.js"></script>
Array 005 </head>
Un array è un insieme di valori. Invece di
015 position: fixed;
016 top: 0px;
017 left: 0px;
018 }
06 Gestire le transizioni
Per gestire la dissolvenza in entrata/uscita tra le
immagini useremo una proprietà CSS3, transition (righe
9-14), per influire sull’opacità della fotografia.
Specifichiamo l’opacità nella regola img.transparent,
quindi la transizione avrà luogo quando un elemento
ha la classe ‘transparent’. In img.transparent
specifichiamo un’opacità di 0 (in altre parole,
completamente trasparente). Questo significa che ogni
volta che aggiungiamo a un’immagine la classe
transparent, la transizione verrà applicata e l’immagine
passerà da completamente opaca a completamente
trasparente nel giro di un secondo. Il metodo di easing
(ease-in-out) indica che la transizione si verifica in modo

04 Aggiungere il CSS
memorizzare un solo valore, come: lento e uniforme. Imposteremo la classe dell’immagine
Aggiungete un collegamento a un file CSS con JavaScript, così da poter controllare il momento in
001 var dog = "Fido"; chiamato slideshow.css (riga 4), che utilizza alcune cui si verifica la dissolvenza.
nuove funzioni dei CSS3 per gestire la transizione
possiamo usare un array in cui inserire più valori: visuale da un’immagine all’altra; più avanti esamineremo 001 img {
in dettaglio il file CSS. 002 min-width: 100%;
001 var dogs = ["Fido", "Rufus", "Spot"]; 003 min-height: 100%;
001 <head> 004 width: auto;
Qui è stato creato un array usando i caratteri [ e ] 002 <title>Beautiful Food Photo Slideshow</ 005 height: auto;
così da marcare l’inizio e la fine dello stesso, mentre title> 006 position: fixed;
ciascun elemento dell’array è stato separato con una 003 <meta charset="utf-8"> 007 top: 0px;
virgola.
In questo caso, l’array contiene stringhe, ma
004 <link rel="stylesheet" href="slideshow. 008 left: 0px;
potete anche creare un array che ospiti numeri, css"> 009 // We still need browser-specific
come questo: 005 <script src="slideshow.js"></script> versions of the transition, be careful to use
006 </head> this ordering
001 var ages = [7, 3, 4]; 010 -webkit-transition: opacity 1s ease-in-

05 Immagini a tutto schermo

Gli elementi di un array hanno un ordine implicito,
quindi in questo esempio l’elemento 7 viene per
primo, seguito da 3 che a sua volta è seguito da 4.
Per accedere a un elemento di un array dovete
specificare il suo indice (a base zero); in questo caso
l’elemento 7 si trova all’indice di array 0, 3 all’indice 1
e 4 all’indice 2.
Una volta a conoscenza dell’indice di array, potete
accedere a un elemento dell’array, così:
out;
In slideshow.css assicuratevi che il <div> photo 011 -moz-transition: opacity 1s ease-in-out;
riempia tutto lo schermo (righe 1-6) e posizionatelo 012 -o-transition: opacity 1s ease-in-out;
013 -ms-transition: opacity 1s ease-in-out;
(righe 7-9). Impostate poi le immagini in modo che
siano a tutto schermo, e assicuratevi che le loro 014 transition: opacity 1s ease-in-out;
dimensioni siano adatte a qualunque finestra del 015 }
browser impostando le proprietà min-width e 016 img.transparent {
min-height dell’immagine su 100% (righe 9-10) e 017 opacity: 0;
larghezza e altezza su auto (righe 12-13) e 018 }
posizionandole (righe 15-17).

07 Stile della descrizione

001 var name = dogs[2]; // here name
gets the value "Spot" 001 html, body, div.photo { Ora posizionate il div description così che si
002 width: 100%; trovi sopra la fotografia nella parte inferiore sinistra dello
Allo stesso modo, per accedere a un elemento 003 padding: 0px; schermo.
dell’array ages dovete scrivere: 004 margin: 0px;
005 } 001 div#description {
001 var fidosAge = ages[0]; // here 006 position: relative; 002 position: absolute;
fidosAge gets the value 7 007 } 003 font-family: Helvetica, sans-serif;
008 img { 004 font-size: 600%;
E, naturalmente, potete usare i valori degli elementi 009 min-width: 100%; 005 font-weight: bold;
dell’array in altre espressioni JS, come questa: 010 min-width: 100%; 006 color: white;
011 007 text-shadow: 1px 1px 3px #373737;
001 alert(dogs[1] + " is " + ages[1] + " years old."); 012 width: auto; 008 left: 30px;
013 height: auto; 009 bottom: 30px;
che mostra all’utente la stringa ‘Rufus is 3 years old’. 014 010 }

tutorial _____________________________________________ 43
 <Tutorial>
JavaScript parte 2: array e funzioni

Funzioni
Una funzione JS è rappresentata da un gruppo di
dichiarazioni JavaScript che vengono calcolate ed
eseguite ogni volta che chiamate la funzione.
Esistono molte funzioni JavaScript incorporate
pronte all’uso, come alert() e document.
getElementById(), ma potete anche creare funzioni
su misura.

001 function bark() {

002 var dogName = "Fido";
003 alert(dogName + " says Woof!");
004 }

La parola chiave function indica che state

definendo una funzione. Il nome della funzione è
<sopra>
bark, e deve essere seguito da parentesi tonde. Il
• L’immagine mostra le parti principali della funzione e i dati della variabile passati
corpo della funzione è il gruppo di dichiarazioni

“
JavaScript tra le parentesi graffe di apertura e

Questa volta inseriremo un file JavaScript

chiusura, { e }.

”
Per calcolare ed eseguire tali dichiarazioni, chiamate

nella sezione <head> della pagina

la funzione. Per chiamare bark(), dovete scrivere:

001 bark();

Viene eseguito il codice presente nel corpo della

funzione bark(), che mostrerà ‘Fido says Woof!’. E se
si desidera che sia un cane diverso da Fido ad
abbaiare? Invece di definire la variabile dogName
nella funzione bark, possiamo passare il nome del
cane in un parametro della funzione. In questo
modo potete usare la funzione bark() per far
abbaiare qualsiasi cane, non solo Fido. Per usare un
parametro basta scrivere il nome della variabile del
parametro tra parentesi, subito dopo il nome della
funzione, in questo modo:
001 function bark(dogName) {
08 Creare array contenenti i
nomi delle immagini e il testo
Dopo aver creato l’HTML e il CSS, dovete aggiungere il
comportamento usando JavaScript. Per prima cosa
definiremo un set di immagini con le descrizioni
corrispondenti, e per eseguire questa operazione useremo
un tipo di dati chiamato array. Definiremo due array: uno
contenente i nomi delle immagini per le fotografie e il
secondo con la descrizione che verrà mostrata sopra
ciascuna fotografia.
10 Caricare il codice
Nel tutorial precedente abbiamo scritto il codice
in un elemento <script> nel corpo della pagina, che
veniva eseguito mentre il browser caricava la pagina
HTML. Questa volta inseriremo un file JavaScript nella
sezione <head> della pagina. Nell’eseguire questa
operazione si potrebbe verificare un problema quando il
browser inizia a calcolare il codice JavaScript nell’elemento
<head> prima di aver letto il resto della pagina; questo
perché il DOM non è stato del tutto creato.

11 Scrivere una funzione

002 alert(dogName + " says Woof!"); 001 var photos = [
003 } 002 "images/Pears.jpg", Per risolvere il problema dobbiamo assicurarci che
003 "images/Salad.jpg", il codice non venga eseguito finché il resto della pagina è
Davanti al nome della variabile non serve la parola 004 "images/Cauliflower.jpg" stato caricato completamente. A questo scopo potete
chiave ‘var’ (è implicito). Ora, per chiamare la 005 ]; posizionare il codice in una funzione, come mostrato di
funzione bark() dovete passare il nome di un cane 006 var descriptions = [ seguito:
come argomento per il parametro: 007 "Asian Pears",
008 "Spinach Salad", 001 function init() {
001 bark("Fido"); 009 "Romanesque Cauliflower" 002 var img = document.
010 ]; getElementById("one");
Il valore di stringa ‘Fido’ è l’argomento che viene 003 img.src = photos[0];

09 Impostare l’attributo src con JS

passato nel parametro dogName. È come
impostare una variabile su un valore. Quando
chiamate bark(‘Fido’), dogName recupera il valore
Fido che verrà usato ovunque si trovi dogName nel
corpo della funzione. In bark() potete trattare un
parametro come una variabile.
Ora potete riutilizzare bark() per far abbaiare altri
cani, come mostrato qui:
Ora siete pronti a usare gli array per impostare le
immagini src degli elementi <img> nel codice HTML. A
questo scopo useremo document.getElementById() per
recuperare un elemento <img> e poi impostare il suo
attributo src. Qui abbiamo inizialmente impostato src per
la prima immagine sul valore dell’elemento 0 dell’array
photos, che è la stringa images/Pears.jpg.
004 }
Definendo una funzione, il codice viene confezionato in
modo da poter fare riferimento a esso attraverso init (per
ulteriori informazioni sulle funzioni consultate il box a lato).
Ogni volta che chiamate init(), viene calcolato il codice
definito nel suo corpo (quello tra le parentesi graffe).

001 bark("Rufus"); 001 var img = document.getElementById("one"); 12 La proprietà window.onload

Come fare in modo quindi che JavaScript aspetti
002 bark("Spot"); 002 img.src = photos[0]; che la pagina sia stata completamente caricata prima di

44_____________________________________________ tutorial
 <Tutorial>
JavaScript parte 2: array e funzioni

chiamare la funzione init? Basta usare la proprietà window.

onload, disponibile in tutti i browser. Se assegnate la 001 var photoIndex = 0; 010 div.innerHTML =
proprietà a una funzione, allora quest’ultima verrà 002 descriptions[photoIndex];
chiamata solo quando la pagina è stata completamente 003 function transition() { 011 currentImg.setAttribute("class",
caricata (e il DOM creato), che è esattamente ciò che 004 photoIndex = photoIndex + 1; "transparent");
desideriamo. Ecco come impostare la proprietà window. 005 if (photoIndex >= photos.length) { 012 }
onload: 006 photoIndex = 0;

18 Eliminare la classe
007 }
001 function init() { 008 } transparent dalla foto
002 var img = document. precedente
16 Cambiare le sorgenti di
getElementById("one"); La funzione setAttribute ha due argomenti: l’attributo da
003 img.src = photos[0]; immagine impostare e il valore dell’attributo. Ora la useremo per
004 } Ora recuperate dal DOM gli elementi <img> (righe 6-7). eliminare la classe transparent dalla seconda immagine,
005 window.onload = init; Ricordate che l’elemento <img> con l’id ‘one’ contiene utilizzando una stringa vuota per il valore (riga 12).
l’immagine correntemente visualizzata. L’immagine
Sulla riga 5, assicuratevi di scrivere ‘init’ e non ‘init()’. Perché? successiva è quella nell’array photos che si trova all’indice 001 function transition() {
Perché non state chiamando questa funzione, ma state con il valore corrente di photoIndex. Inserite questa 002 photoIndex = photoIndex + 1;
lasciando al browser il compito di chiamarla una volta che immagine nell’elemento <img> con l’id ‘two’ (riga 8). Il 003 if (photoIndex >= photos.length) {
la pagina è stata caricata. Se ora provate a caricare la testo corrispondente per tale grafica è la stringa all’indice 004 photoIndex = 0;
pagina, la fotografia apparirà nella finestra del browser. di array photoIndex in descriptions; inserite il testo nel 005 }
<div> description (righe 9-10).

13 Aggiungere un testo
descrittivo 001 function transition() {
A questo punto, viene mostrata l’immagine ma manca la 002 photoIndex = photoIndex + 1;
descrizione. Per visualizzarla dobbiamo recuperare 003 if (photoIndex >= photos.length) {
l’elemento <div> con l’id ‘description’ dal DOM (riga 4) e 004 photoIndex = 0;
poi impostare il suo contenuto, usando la proprietà 005 }
innerHTML, sul testo descrittivo presente nell’array 006 var currentImg = document.
descriptions (riga 5). Dopo aver aggiunto questo codice, getElementById("one");
ricaricate la pagina e la prima foto dovrebbe mostrare il 007 var newImg = document.
<sopra>
testo descrittivo. getElementById("two"); • La prima foto e la descrizione vengono aggiunte
alla pagina attraverso JavaScript
008 newImg.src = photos[photoIndex];
001 vfunction init() { 009 var div = document.
002 var img = document. getElementById("description");
getElementById("one"); 010 div.innerHTML = Proprietà
003 img.src = photos[0]; descriptions[photoIndex]; Finora abbiamo usato le proprietà un paio di
004 var div = document. 011 } volte. Per esempio, abbiamo impostato la
getElementById("description"); proprietà src dell’elemento image recuperato dal

17 Aggiungere l’effetto di
005 div.innerHTML = descriptions[0]; DOM:
006 } dissolvenza
007 window.onload = init; Quando aggiunte a un elemento <img> la classe 001 img.src = photos[0];
‘transparent’, viene avviata una transizione CSS che e abbiamo impostato la proprietà window.onload

14 Tenere traccia delle immagini
Aggiungete una nuova variabile, photoIndex (riga
1), che conterrà l’immagine/descrizione successiva a cui si
passerà. Una buona posizione per questa variabile è sotto i
due array creati in precedenza.
001 var photoIndex = 0;
dissolve l’immagine. Stiamo eseguendo una transizione sul nome della funzione:
dalla prima immagine alla seconda, quindi dovete
aggiungere la classe transparent alla prima immagine ed 001 window.onload = init;
eliminarla dalla seconda. Per inserire transparent nella Abbiamo anche usato la proprietà innerHTML
prima grafica (riga 11), usate la funzione setAttribute(); in degli elementi per impostare il contenuto di un
questo modo si verifica la dissolvenza. elemento:
001 function transition() { 001 bottlesDiv.innerHTML = lyrics;

15 Creare una funzione per la

transizione
Ora scrivete una nuova funzione, transition, che
aumenterà il valore di photoIndex di 1 (riga 4), a indicare la
visualizzazione dell’elemento di immagine successivo
nell’array. Dovete verificare se abbiamo raggiunto la fine
dell’array; in caso di esito positivo, impostate photoIndex
su 0 così che la prossima volta che la funzione viene
chiamata parta dall’inizio dell’array. Per vedere se
photoIndex è troppo grosso, usate una proprietà dell’array,
length.
002 photoIndex = photoIndex + 1; Le proprietà sono simili alle variabili, a eccezione
003 if (photoIndex >= photos.length) { del fatto che vengono associate agli oggetti. Più
004 photoIndex = 0; avanti nella serie conoscerete a fondo gli oggetti,
005 } ma per ora pensate a un oggetto come a un
006 var currentImg = document. insieme di proprietà con valori. In JavaScript
getElementById("one"); esistono diversi oggetti incorporati che userete
007 var newImg = document. molto ogni volta che scrivete web app, come
getElementById("two"); document, window ed element, che
008 newImg.src = photos[photoIndex]; rappresentano elementi come <div> o <img>.
009 var div = document. Potete anche creare oggetti personalizzati, ma di
getElementById("description"); questo argomento ci occuperemo in seguito.

tutorial _____________________________________________ 45
 <Tutorial>
JavaScript parte 2: array e funzioni

006 var currentImg = document.

getElementById("one");
007 var newImg = document.
getElementById("two");
008 newImg.src = photos[photoIndex];
009 var div = document.
getElementById("description");
010 div.innerHTML =
descriptions[photoIndex];
011 currentImg.setAttribute("class",
"transparent");
012 newImg.setAttribute("class", "");
013 }

19 Creare array contenenti nomi

<sopra>
• Sul CD sono presenti diverse immagini pronte per l’uso, ma potete anche usarne di vostre per dare un tocco più
e testi delle immagini personale alla presentazione
Ora dobbiamo fare in modo che, ovunque si faccia clic
nella finestra del browser, si verifichi la transizione tra le
immagini. A questo scopo, impostate la proprietà onclick
della finestra sulla funzione transition (riga 14). È simile a
21 Aggiornare la funzione di newImage così che utilizzi il nuovo valore di current
come avete impostato in precedenza la proprietà onload transition (riga 12). Se currentImg è impostato sulla prima immagine,
della finestra su init. Al termine, se fate clic nella finestra del Nella funzione transition(), quando recuperate dal DOM e poi facciamo diventare two il valore di current,
browser verrà chiamata la funzione transition(), la prima l’immagine correntemente visibile e la memorizzate nella newImage deve essere impostato sulla seconda
immagine eseguirà una dissolvenza in uscita e apparirà variabile currentImg, invece di usare il valore one per l’id, immagine (e analogamente, se currentImg è impostato
l’immagine successiva nell’array. sfrutterete quello della variabile current (riga 6). La prima sulla seconda immagine, newImage deve essere
volta che chiamate transition(), sarà one, ma la volta impostato sulla prima). Dopo aver eseguito questa
001 function transition() { successiva sarà two, perché dopo aver recuperato modifica e aver ricaricato la pagina, ora si dovrebbero
002 photoIndex = photoIndex + 1; currentImg, imposterete current su two. Ma non possiamo verificare le transizioni tra le immagini ogni volta che fate
003 if (photoIndex >= photos.length) { sempre impostarla su two perché, se currentImg è clic nella finestra del browser.
004 photoIndex = 0; attualmente two, dobbiamo reimpostarla su one. Quindi,
005 } per risolvere il problema useremo un test if; se current è 001 function transition() {
006 var currentImg = document. uguale a one, la impostiamo su two, diversamente (se cioè 002 photoIndex = photoIndex + 1;
getElementById("one"); è uguale a two), la impostiamo su one (righe 7-11). 003 if (photoIndex >= photos.length) {
007 var newImg = document. 004 photoIndex = 0;
getElementById("two"); 001 function transition() { 005 }
008 newImg.src = photos[photoIndex]; 002 photoIndex = photoIndex + 1; 006 var currentImg = document.
009 var div = document. 003 if (photoIndex >= photos.length) { getElementById(current);
getElementById("description"); 004 photoIndex = 0; 007 if (current == "one") {
010 div.innerHTML = 005 } 008 current = "two";
descriptions[photoIndex]; 006 var currentImg = document. 009 } else {
011 currentImg.setAttribute("class", getElementById(current); 010 current = "one";
"transparent"); 007 if (current == "one") { 011 }
012 newImg.setAttribute("class", ""); 008 current = "two"; 012 var newImg = document.
013 } 009 } else { 013 getElementById(current);
014 window.onclick = transition; 010 current = "one"; 014 newImg.src = photos[photoIndex];
011 } 015 var div = document.

20 Più di una transizione

012 var newImg = document.
Per ora il codice supporta una sola transizione getElementById("two");
dalla prima immagine alla seconda. Per fare in modo che 013 newImg.src = photos[photoIndex];
continuino a verificarsi transizioni tra le immagini ogni 014 var div = document.
volta che fate clic nella finestra del browser, dovete getElementById("description");
lavorare ancora un po’. 015 div.innerHTML =
Useremo una nuova variabile, current, che tiene traccia descriptions[photoIndex];
dell’immagine attualmente visibile. Aggiungete la nuova 016 currentImg.setAttribute("class",
variabile al codice JavaScript, sotto a photoIndex, e "transparent");
inizializzatela sul valore ‘one’, che è l’id dell’immagine 017 newImg.setAttribute("class", "");
visibile quando parte l’app (riga 2). 018 }
getElementById("description");
016 div.innerHTML =
descriptions[photoIndex];
017 currentImg.setAttribute("class",
"transparent");
018 newImg.setAttribute("class", "");
019 }
In questo tutorial abbiamo creato una presentazione
fotografica rotante con HTML e CSS, ma soprattutto,
abbiamo usato codice JavaScript importante. Nelle
prossime puntate della serie esamineremo a fondo

22 Completare l’app
001 var photoIndex = 0; JavaScript, il DOM, gli oggetti, le proprietà e altre funzioni
002 var current = "one"; Dovete anche fare in modo di aggiornare il valore per vedere come agiscono.

46_____________________________________________ tutorial
LA RIVOLUZIONE E’ INIZIATA
L’unico magazine interamente
dedicato all’ iPad

SCOPRITELA IN TUTTE LE EDICOLE A 4,99 EURO

 <Tutorial>
Controllare gli sfondi con i CSS3

Controllare S
in dalla nascita dei CSS le
immagini di sfondo hanno
avuto un ruolo
fondamentale nel web

gli sfondi
design: sono gli elementi
che danno personalità
alla pagina. Il loro grande
problema è la mancanza di

con i CSS3
flessibilità. Possono essere
ripetute, e sono perfette per le texture, e possono
essere posizionate così da restare fisse sullo schermo,
ma non possono essere ridimensionate. Questo
significa che gli sviluppatori che desiderano uno

I CSS3 offrono ai designer

straordinario canvas a tutto schermo, o
semplicemente più flessibilità, devono improvvisare
una maggiore flessibilità con i tag posizionati in modo assoluto, dimensioni di
immagine o codice. La proprietà background-size,
sulle immagini di sfondo. SUL CD
•-
appartenente al modulo Backgrounds and Borders dei

Osserviamo alcune delle CSS3, garantisce ai designer ampi margini di creatività

e un codice più pulito. E, con il supporto degli sfondi
proprietà chiave multipli, questa accoppiata vincente offre ai web
designer la possibilità di sfruttare al massimo i
strumenti | tecnologie | tendenze CSS3 loro sfondi.

Le immagini di sfondo sono gli elementi

che danno personalità alla pagina

01 Valore predefinito 02 Dimensioni

Il valore predefinito per la specifiche
proprietà background-size è auto. In Un’alternativa all’opzione auto
questo modo l’immagine viene consiste nell’indicare un set di
visualizzata alla sua dimensione dimensioni specifiche, per
originale, per esempio 1.000 x esempio 500 x 350px. Il primo
700px. background-size lavora valore si riferisce alla
insieme alla proprietà background, larghezza dell’immagine,
quindi se l’immagine è impostata su mentre il secondo all’altezza.
no-repeat apparirà solo un’istanza; Di nuovo, la proprietà repeat
per contro, se è impostata su repeat aiuta a stabilire come appare
l’immagine verrà ripetuta. lo sfondo.

48��������������������������������������������� tutorial
 <Tutorial>
Controllare gli sfondi con i CSS3

03 Altezza automatica
background-size consente di impostare
contemporaneamente dimensioni specifiche e
l’opzione auto. Se il primo valore (larghezza) è
impostato su 500px e il secondo su auto,
l’altezza verrà automaticamente ridotta in modo
proporzionale alla larghezza. In questo modo si
mantiene il rapporto originale larghezza/altezza
dell’immagine. Se viene aggiunto solo il primo <sopra>
• Il valore predefinito di background-size è auto.
valore, si presuppone che il secondo sia auto. Esso imposta l’immagine alle sue dimensioni
originali
001 #topsection{ <sinistra>
• Con la parola chiave cover di background-size
002 background: url(images/image.jpg) l’immagine di sfondo si espande per riempire lo
no-repeat schermo

003 background-size: 500px auto;

004 }

04 Larghezza automatica
L’aggiunta del valore auto cambia la
prospettiva di un’immagine. Il primo valore
(larghezza) verrà ora stabilito dal secondo valore
(altezza). Quest’ultima diventerà il valore statico
e verrà automaticamente ridotta/aumentata in
proporzione alla larghezza, mantenendo ancora
una volta il rapporto larghezza/altezza.
001 #topsection{
002 background: url(images/image.jpg)
no-repeat
003 background-size: auto 500px;
004 }
05 Percentuali
Per dare maggiore flessibilità alla
dimensione di un’immagine di sfondo è
possibile aggiungere i valori come percentuali.
L’aggiunta di una percentuale come primo
valore, per esempio 50%, stabilisce che la
larghezza sarà pari al 50% dello schermo o del
tag div contenitore. Il secondo valore (altezza)
002 background: url(images/image.jpg) Collegare più sfondi
no-repeat
003 background-size: 100% auto;} 01 ��� Usare nomi predefiniti
Gli sfondi possono essere posizionati
attraverso nomi predefiniti, come per esempio
07 Larghezza e altezza centre, top, left, right. Sono perfetti per
definite posizionamenti veloci, ma non offrono la
Impostando il primo valore (larghezza) su auto e posizione precisa dell’immagine.
il secondo (altezza) su 100%, i risultati non 001 body{
saranno soddisfacenti. Se applicato al tag body, 002 background: url(images/star. png),
l’immagine si riduce a un’altezza minima. Per url(images/backblur1000.jpg) fixed;
funzionare bene lo sfondo deve trovarsi in un 003 background-position: center
tag div con larghezza e altezza definite. top, bottom left;
004 background-repeat: no-repeat;
001 #topsection { 005 }
002 width: 1900px;
003 height: 1500px;
004 background: url(images/backblur1000.jpg) 02 ��� Posizionamento preciso
Per posizionare più sfondi in modo più
no- repeat;
accurato si possono inserire valori specifici al
005 background-size: auto 100%; posto dei nomi. Per funzionare come
006 } desiderato, essi devono essere aggiunti
nell’ordine corretto.

08 Combinazioni
sarà impostato su auto e la sua dimensione 001 body{
manterrà le proporzioni. La proprietà background- 002 background: url(images/star. png),
size consente di combinare url(images/backblur1000.jpg) fixed;
001 #topsection{ dimensioni fisse e 003 background-position: 500px
002 background: url(images/image.jpg) percentuali. Supporto 10px, 800px 50px;
no-repeat 004 background-repeat: no-repeat;
003 background-size: auto 500px;}
Impostando la
larghezza su
del browser 005 }
100% e l’altezza
Attualmente la
proprietà background-
06 A tutto schermo su una
size è supportata da 03 ��� Scorciatoie
Impostando il primo valore su 100%, dimensione fissa Il codice scritto viene solitamente definito nel
l’immagine di sfondo si estenderà per tutta la di 1.100px, vi
Firefox 4.0+, Safari 4.1+,
formato standard con l’impiego di alcune
larghezza del tag div contenitore o dello assicurate che
Chrome 3+, Opera proprietà. Per ridurre il peso della pagina e
schermo. Se applicato al tag body, l’immagine di l’immagine di 10.0+ e Internet produrre codice più efficiente, si possono
sfondo riempirà tutto lo schermo. L’altezza sfondo si estenderà Explorer 9+. usare le scorciatoie CSS.

dell’immagine di sfondo sarà stabilita dal per tutta la larghezza e 001 body{
rapporto larghezza/altezza dell’immagine. manterrà l’altezza 002 background: url(images/
Questo significa che non sempre l’immagine si selezionata. È una soluzione star.png) 500px 10px no-repeat,
estenderà fino alla parte inferiore dello schermo. perfetta per gli sfondi a tutto schermo, ma per url(images/backblur1000.jpg) 800px 50px
un risultato ottimale l’immagine deve avere no-repeat fixed;
001 #topsection{ dimensioni fisse. 003 }

tutorial ��������������������������������������������� 49
 <Tutorial>
Controllare gli sfondi con i CSS3
001 body {
002 background: url(images/backblur1000.jpg) 002 margin: 0;
no-repeat fixed; 
003 background-size: 100% 1100px;} 
09 Immagini e colori
Una tecnica utilizzata per assicurarsi che
un’immagine di sfondo sia adatta a tutte le
risoluzioni consiste nel mescolare l’immagine di
sfondo a un colore di sfondo; è un’operazione
facile da implementare con background-size. Il
nostro esempio occupa tutto lo schermo, quindi
solo la parte inferiore dell’immagine, che è un
unico colore, deve corrispondere al colore di
sfondo.
10 Contain
Esistono altri due valori per la proprietà
background-size: contain e cover. Il valore
contain scala l’immagine di sfondo mantenendo
le proporzioni originali della grafica. Assicura
che l’immagine sia il più larga possibile, ma
potrebbe non coprire tutto lo sfondo, come nel
passaggio 6.
001 body{
002 margin: 0;
003 background: url(images/backblur1000.jpg) 001 body{
no-repeat; 
004 background-size: contain;
005 } 
11 Cover
Il valore cover funziona allo stesso modo
di contain, ma invece di essere contenuta nel tag
accompagnatorio l’immagine si espande per
riempire il tag. Il valore usa la dimensione più
piccola e si espande per riempire il tag/finestra.
Questo significa che parte dell’immagine di
sfondo potrebbe non essere visualizzata. Un’altra
cosa da notare è che l’immagine non scala con la
finestra del browser.
001 body{
002 margin: 0;
003 background: url(images/backblur1000.jpg) 004 background-position: 400px 50px, 0px
no-repeat; 
004 background-size: cover;
005 } 
12 Immagine fissa a tutto
schermo
Il valore cover è perfetto per designer e
sviluppatori che desiderano avere un’immagine a
tutto schermo usando un’unica riga di codice.
Tuttavia, l’immagine di sfondo si muove ancora
verticalmente, e questo può causare problemi
con il contenuto, quindi vi consigliamo di
impostare la posizione dello sfondo su fixed, per
mantenere l’effetto a tutto schermo.
50t��������������������������������������������� tutorial
001 body{
Giocare con le
003 background: url(images/backblur1000.jpg)
percentuali
no-repeat fixed; 
004 background-size: cover; Prima del supporto di background-
005 }  size, le immagini di sfondo erano
limitate alle dimensioni assegnate
13 Sfondi multipli loro durante la creazione
Il comando background-size lavora anche dell’originale.
insieme a molte altre proprietà di Non c’era modo di regolare la
sfondo che consentono l’uso dimensione di un’immagine di
di più sfondi con sfondo; l’unica cosa che poteva
l’aggiunta di poche Supporto fare un designer era ripetere
righe di codice.
Per inserire più
di sfondi multipli un’immagine, fissarla in posizione
o mescolarla a un colore di sfondo.
Il supporto degli sfondi
immagini La soluzione consisteva
multipli è simile a
dovete
background-size, quindi i nell’usare i tag posizionati in modo
innanzitutto assoluto, le percentuali delle
due possono lavorare
indicare le immagini e/o jQuery.
insieme. L’unica piccola
posizioni. La Tuttavia, l’introduzione di
differenza è che la funzione
prima posizione background-size offre agli
non è supportata fino a
è l’immagine che sviluppatori molta più flessibilità e
Opera 10.5.
si troverà in cima, un workflow migliore.
quindi assicuratevi che Le immagini di sfondo,
l’immagine di sfondo soprattutto quelle associate al tag
venga aggiunta per ultima. body, possono ora essere
implementate come desiderato
con alcuni semplici comandi.
002 background: url(images/star.png), Tuttavia, i valori percentuali
url(images/backblur1000.jpg) fixed; della proprietà background-size
003 }  funzionano solo quando larghezza
e altezza sono state dichiarate con
14 Ripetere e posizionare dimensioni fisse, per esempio
Per assicurarsi che le immagini non si 1.900 x 1.200px.
ripetano, la proprietà background-repeat deve Se la larghezza di un tag div
essere impostata su no-repeat. Il passo successivo viene definita con un valore
consiste nel posizionare le immagini che devono percentuale, le percentuali di
essere aggiunte. Basta usare la proprietà background-size non
background-position. Il primo valore è l’asse funzioneranno come desiderato.
orizzontale, mentre il secondo è quella verticale. La situazione varia leggermente
nel tag body, dove vengono
001 body{ accettati valori percentuali per la
002 margin: 0; larghezza, anche se non è stata
003 background: url(images/star.png), definita.
url(images/backblur1000.jpg) fixed;
0px;
005 background-repeat: no-repeat;
006 } 
15 Dimensionare le immagini
Infine, la dimensione di ciascuna immagine
viene stabilita dalla proprietà background-size. 001 body{
Essa può contenere un valore, per esempio 200px, 002 margin: 0;
o una parola chiave come auto o cover. Di nuovo, i 003 background: url(images/star.png),
valori aggiunti devono essere posizionati url(images/backblur1000.jpg) fixed;
nell’ordine corretto per assicurare che gli sfondi 004 background-position: 400px 50px, 0px 0px;
appaiano come desiderato. Se viene aggiunto un 005 background-repeat: no-repeat;
valore singolo, per esempio 100px, si presuppone 006 background-size: 100px, cover;
che l’altro valore sia uguale. 007 } 
 Smartphone » Tablet » App » Accessori

IL MENSILE
PER ANDROID!
I test completi
di smartphone
e tablet
Consigli e tutorial
per usare al meglio il sistema
Le migliori applicazioni
Gli accessori indispensabili
Le applicazioni
da non perdere
La posta degli esperti
e molto altro

In edicola a soli € 4,99

 <Tutorial>
Creare animazioni interattive da un feed Twitter

<a sinistra>
• Il mockup è stato creato in Illustrator e si basa sulla
straordinaria visualizzazione di Tori’s Eye
<sopra>
• Qui usiamo l’API Twitter pubblica, ma se state
sviluppando un’applicazione completa potete
recuperare quella per sviluppatori

Creare
T
witter è un ottimo strumento per
ascoltare il mondo ed è così
diffuso che i principali media

animazioni
hanno iniziato a usare i tweet per
coinvolgere il pubblico. La
maggior parte degli utenti accede e
usa Twitter dal sito web http://

interattive
twitter.com, ma grazie all’API
pubblica ora possiamo recuperare i
dati da Twitter e fare qualcosa di diverso. Questo
tutorial si ispira allo straordinario sito Tori’s Eye,

da un feed
reperibile all’indirizzo http://toriseye.quodis.
com/#webdesigner. È una visualizzazione di un
flusso Twitter che aggiunge a un paesaggio
alcuni uccelli stilizzati, che volano sullo schermo

Twitter
per consegnare i cinguettii. Sfrutta l’API JSON di
Twitter per recuperare i tweet dalla timeline di
Twitter e un po’ di codice JavaScript per
presentarli in maniera interessante. Nella nostra
SUL CD
versione semplificheremo l’esecuzione, ma
• Mockup in

I feed Twitter non devono Illustrator

• Progetto HTML/
useremo gli stessi principi di base per creare
un’animazione sulla falsa riga di Tori’s Eye. Dopo
necessariamente essere lunghi
JavaScript/CSS
completo aver completato questo tutorial dovreste disporre
• Codice completo

elenchi noiosi: esistono vari modi dei passaggi delle conoscenze e degli strumenti necessari per
realizzare la vostra visualizzazione in modi nuovi
per visualizzare cosa si stanno e coinvolgenti.

dicendo le persone, basta un po’

di creatività… Possiamo recuperare i dati da
strumenti | tecnologie | tendenze Adobe Illustrator (o simile),
Dreamweaver (o simile), jQuery, HTML, CSS & Twitter Twitter e fare qualcosa di diverso
52 _____________________________________________ tutorial
 <Tutorial>
Creare animazioni interattive da un feed Twitter

01 Progettare il mockup
Inizieremo ispirandoci direttamente alla
visualizzazione di Tori’s Eye e progetteremo una replica in
Illustrator. Il file è reperibile sul CD, ma per ottenere le
texture usate dovete visitare www.sxc.hu e cercare le
immagini relative alla carta e al metallo arrugginito. Noi
abbiamo inserito lo sfondo e gli uccelli su livelli diversi per
poterli esportare più facilmente in seguito.
troppo le cose, gli stili e il codice dello script verranno
06 jQuery
inseriti in questo file. Visitate http://jquery.com e scaricate l’ultima
Per rapidità abbiamo inserito la pagina HTML di base versione della libreria. jQuery ci consente di interagire più
sul CD, basta aprire ‘start.html’. facilmente con i vari elementi della pagina e di creare le
animazioni. A questo scopo, lo installeremo in cima alla
001 <html> pagina e sotto imposteremo una funzione che accoglierà
002 <head> tutto il codice, così che la visualizzazione possa funzionare.
003 <title>Twitter Animation</title>
004 <style> 001 <script type="text/javascript"

02 Formato PNG
005 </style> src="scripts/jquery.js"></script>
Una volta soddisfatti dell’aspetto visuale, 006 </head> 002 <script type="text/javascript">
dobbiamo esportare le immagini in un formato adatto 007 <body> 003 $(document).ready(function(){
all’uso nel design HTML finale. Lo sfondo può essere una 008 <div id="container"> 004 // Your jQuery code will slot in here
semplice JPEG, poiché non necessita della trasparenza. 009 <div id="trees"> 005 });
Tuttavia, gli uccelli devono essere nel formato PNG. Dovete 010 <div id="tweetscontainer"> 006 </script>
isolare un uccello ed esportarlo: diventerà l’immagine da 011 </div>

07 Connessione a Twitter
cui partire. 012 </div>
013 </div> Twitter ha un’API accessibile pubblicamente. Se

03 Altri elementi
Nel sito Tori’s Eye gli alberi si trovano in un livello
separato sopra gli uccelli, così che questi ultimi possano
volare sotto di essi. Noi abbiamo deciso di non imitare
questo aspetto per questioni di semplicità, ma abbiamo
inserito gli alberi in un livello PNG trasparente nel caso più
avanti si volessero replicare i livelli. Tutte le immagini sono
reperibili sul CD allegato alla rivista.
014 </body> state creando un’applicazione completa, dovete usare una
015 </html> chiave API specifica per gli sviluppatori, ma per i nostri
scopi sarà sufficiente la versione pubblica. Possiamo
05 Aggiungere il CSS chiamarla con il metodo JSON di jQuery. Da notare che
Applicate il seguente CSS; il codice completo è viene passato un termine di ricerca che restituirà i tweet
reperibile sul CD. corrispondenti, quindi potete cambiarlo in base alle vostre
necessità. Il codice completo è reperibile sul CD.
001 body {
002 font-family: arial, helv, sans- serif; 001 var url = "http://search.twitter.com/

04 Creare la struttura HTML

003 font-size: 66%; search.jso n?q=iphone&rpp=15&callback=?";
Ora che abbiamo ordinato le immagini 004 background: #f9f9f9; 002 var tweets = $('<ul id="tweets">').
dobbiamo creare la struttura 005 padding: 20px; appendTo("#tweetscontainer");
Migliorare HTML di base. Inserite il 006 } 003 $.getJSON(url, function(data){
la ricerca codice del passaggio 007
008
#container {
position: relative;
004 // Do something with the data returned
Il codice funziona bene con in una nuova pagina
08 Esecuzione del parsing JSON
009 width: 1024px;
i termini di ricerca nel vostro editor
010 height: 700px;
implementati in fase di web. I dati vengono restituiti da Twitter come oggetto
011 margin: auto;
programmazione, ma Realizzeremo JSON. JSON è un modo semplice per includere i dati in un
012 background:
perché non consentire agli alcune regole array come set di chiavi e valori. Tutto ciò che dobbiamo
transparent url(styles/background.jpg) norepeat
utenti di inserirne di propri? CSS di base e, per fare è iterare nell’array restituito e generare il codice HTML
013 left;
Aggiungete una casella di non complicare dai valori per ciascun set di dati. A questo scopo
testo e recuperate il valore
con jQuery.

<sopra, da sinistra a destra>

• Per facilitare l’esportazione degli elementi in immagini diverse, abbiamo creato ciascuna
parte del design su livelli separati
• L’uccello ha una sua grafica personale: si userà per creare un volatile separato per ogni tweet

tutorial _____________________________________________ 53
 <Tutorial>
Creare animazioni interattive da un feed Twitter
<sopra>
• La nostra visualizzazione si ispira allo straordinario sito Tori’s Eye, che usa un ottimo stile di
animazione per presentare i tweet in modo innovativo e coinvolgente. Dategli un’occhiata
all’indirizzo http://toriseye.quodis.com/
<a destra, dall’alto verso il basso>
• Da Stock.XCHNG abbiamo scaricato gratuitamente alcune texture da usare nella pagina
• Potete farvi un’idea delle varie visualizzazioni che si possono realizzare cercando ‘Twitter
visualisations’ nel vostro motore di ricerca preferito
aggiungete il codice seguente; il codice completo è
reperibile sul CD.
001 $.getJSON(url, function(data){
002 $.each(data.results, function(i,item){
003 tweets.append('<li><div><img src="' + item.
profile_image_url +'" alt="' +
004 item.from_user + '" width="73"
height="73" /><p><a href="http://twitter.
com/'+item.from_user
005 +'/statuses/'+item.id+'" title="Click
here to view this on twitter">'+item.from_
user+'</a> at
006 '+item.created_at+': '+item.text.
replace(/(\w+:\/\/[A-Za-z0-9-_]+\.
[A-Za-z0-9-_:%&\?\/.=]+)/gi, '<a
007 href="$1">$1</a>').replace(/
[\@]+([A-Za-z0-9-_]+)/gi, '<a href="http://
twitter.com/$1">@$1</
09 Output dei risultati
Il codice genera una voce di elenco (<li>) per
ciascun tweet, inserendo i contenuti del tweet in un tag
<div>. Più avanti lo useremo per mostrare e nascondere il
tweet, ma per ora, non appena il codice ha terminato il
suo lavoro, dovreste avere 15 voci di elenco.
10 Verifica
Vale la pena assicurarvi che lo script carichi i
tweet e li mostri nell’HTML. Sebbene l’aspetto non sia
dei migliori, è un metodo rapido per verificare che tutto
funzioni a dovere. Dopo averlo caricato nel browser ed
esservi accertati che tutti i tweet vengono caricati,
potete passare al prossimo punto.
11 Applicare lo stile
Occupiamoci innanzitutto dell’aspetto. Ciascuna
voce di elenco diventerà un uccello che animeremo
54 _____________________________________________ tutorial
sullo schermo. Abbiamo già impostato il contenitore su
overflow:hidden, quindi potremo posizionare gli uccelli
in modo che partano esternamente all’area visibile e poi
animarli in posizione. Aggiungete il codice CSS seguente
per impostare la posizione iniziale di ciascun <li>. Il
codice completo è reperibile sul CD.
001 #tweets {
002 position: absolute;
003 top: 0;
004 left: 0;
005 width: 2000px;
006 margin-left: -300px;
12 Creare le variabili di velocità
per gli uccelli
Genereremo una variabile speed per ciascuna voce di
elenco ed eseguiremo periodicamente una funzione
per impostare la posizione dell’uccello. Ogni volta che la
funzione parte, useremo la variabile speed per
riposizionare la voce di elenco in base a un valore
definito, e ripeteremo l’esecuzione della funzione così
che le voci di elenco vengano animate sulla pagina.
13 Generare valori casuali
Per impostare la velocità di ciascun uccello
useremo numeri casuali, così che non volino sullo
schermo alla stessa velocità. JavaScript ci consente di
generare numeri casuali attraverso la funzione Math.
random(). Aggiungete il codice seguente per chiamare
un numero casuale compreso tra 0 e 9 che rappresenta
la velocità di ogni uccello.
001 var speed=Math.floor(Math.random()*10)+1;
14 Impostare la posizione di
partenza
Tuttavia, non vogliamo che tutti gli uccelli si trovino
nella stessa posizione verticale altrimenti l’animazione
sarà troppo monotona; per evitare quindi questa
situazione dobbiamo impostare una posizione iniziale
casuale. Dobbiamo anche memorizzare il valore speed
di ciascun uccello, operazione che può essere eseguita
con il metodo .data() in jQuery. Per impostare la
posizione verticale e memorizzare la velocità,
aggiungete il codice seguente. Per ciascun <li> abbiamo
anche impostato la posizione orizzontale su offset.
001 var offsettop=Math.floor(Math.
random()*400)+10;
002 $("#tweets li:last").data("speed",speed).
css({top:of fsettop,right:2000+(i*30)});
15 Muovere gli oggetti 1
Sebbene jQuery disponga del metodo
animate(), useremo una semplice funzione setInterval e
imposteremo la posizione di ciascun uccello
esclusivamente con i CSS. In questo modo potremo
controllare più facilmente la frequenza dei fotogrammi e
ottenere risultati più prevedibili. Per iniziare abbiamo
bisogno di una funzione che viene attivata
periodicamente: aggiungete il codice seguente per
crearla.
001 var t = setInterval(function(){
002 // we’ll set the position of each bird every 30
milliseconds
003 },30);
16 Muovere gli oggetti 2
Ogni volta che parte la funzione dobbiamo
aggiornare la posizione di ogni uccello in base al punto
in cui si trova sullo schermo. Aggiungete il codice di
questo passaggio per recuperare la velocità di ciascun
uccello dall’oggetto data() e aggiornare la sua posizione
di conseguenza. Il codice completo è reperibile sul CD.

001 var t = setInterval(function(){
002 $("#tweets li").each(function(){
003 // grab the speed variable
004 speed = $(this).data("speed");
005 // and the current position
006 xpos = $(this).css("left");
007 // if the bird is off the left hand side of the
screen, reset it to the right
17 L’ora della verità
È arrivato il momento di aprire la pagina e testarla.
Dovrebbe andare tutto bene: dopo una breve attesa
durante la quale il feed Twitter viene caricato, gli uccelli
dovrebbero volare sullo schermo accompagnati dai tweet.
Abbiamo quasi finito, ci manca solo qualche ritocco finale!
18 Momento di riflessione
La prima cosa che avrete notato è che risulta un
po’ difficile leggere i tweet mentre passano sullo schermo.
Dobbiamo fare in modo che gli uccelli si fermino quando
il cursore passa sopra di essi, e che ripartano quando il
mouse si allontana; a questo scopo aggiungiamo una
clausola alla funzione di animazione e una classe all’uccello
quando il cursore passa sopra di esso, per escluderlo
dall’animazione.
001 $("#tweets li").not(".hover").
each(functio…
002 $("#tweets li").hover(function(){
003 $(this).addClass("hover");
Conoscere gli oggetti e il parsing JSON
Per creare una visualizzazione Twitter ci
servono alcuni tweet con cui lavorare. Di
conseguenza, lo script deve caricare i dati dai
server Twitter, quindi dobbiamo trovare un
modo per richiedere e analizzare i dati, e poi
usarli sulla pagina. XML non può essere
processato da JavaScript tra domini diversi, ma
JavaScript può essere caricato senza problemi.
Per questo motivo, eseguiamo la richiesta
come oggetto JS che viene restituito come una
serie di chiavi e valori. Questo array di dati
viene considerato da JavaScript un semplice
oggetto e, una volta caricato attraverso il
metodo .json() di jQuery, possiamo iterare al
suo interno per recuperare i dati e usarli nello
script. Per saperne di più sul funzionamento di
JSON, visitate http://json.org.
<Tutorial>
Creare animazioni interattive da un feed Twitter
21 Ultimi ritocchi
004 $(this).css({zIndex:1000});
005 },function(){ Quando testate la pagina vi accorgerete
006 $(this).removeClass("hover"); probabilmente che occorre modificare alcuni dei valori,
007 }); sopratutto la generazione del numero casuale e il ritardo
di setInterval, dal momento che influiscono sulla velocità
19 Ancora stile
degli uccelli sullo schermo. Provate valori diversi per
Ora che gli uccelli volano sullo schermo, sarebbe vedere l’effetto che producono.
bello fare in modo che i tweet appaiano solo quando il
mouse passa sopra ciascuno di essi. Modificheremo
22 Un po’ di creatività
leggermente il modo in cui vengono mostrati La vostra visualizzazione dovrebbe ora essere
contemporaneamente i tweet. Aggiungete il codice CSS perfetta. Testate la pagina in tutti i browser di destinazione
seguente per nascondere i tweet finché non si verifica e verificate che tutto funzioni a dovere. Ora potete
l’evento di mouseover e conferire loro un aspetto migliore. considerare l’idea di estenderne la funzionalità così che gli
Il codice completo di questo passaggio è reperibile sul CD. utenti possano inserire i propri termini di ricerca, o in
modo che alcuni uccelli si muovano più velocemente/
001 #tweets li div { lentamente di altri: date libero sfogo alla vostra creatività!
002 display: none;
003 padding: 10px;
004 background: rgba(0,0,0,0.7);
005 color: #fff;
006 min-height: 93px;
Muovere
007 margin-top: 100px; gli alberi
Se desiderate che gli uccelli volino
fra gli alberi, realizzate ciascun
20 Altro rapido test albero come una PNG trasparente e
Se verificate nuovamente la pagina noterete che
separata e aggiungete un <div>
ora gli uccelli non sono accompagnati dai tweet e che,
extra per ciascuno di essi. Fate in
quando spostate il mouse sopra uno di essi, questo si
modo che ogni albero sia
ferma e sotto appare il “cinguettio”. Con tali modifiche
posizionato in modo assoluto e
riteniamo che la pagina sia più fluida, ed è più divertente
sistemateli in cima allo stack
interagire con i messaggi di Twitter!
z-index.
<sopra>
• La pagina finale carica i tweet e crea uccelli volanti. Quando passate il mouse sopra ogni volatile, il tweet appare
sotto in un riquadro ben realizzato
tutorial _____________________________________________ 55
 <Tutorial>
Post a tutta larghezza per i temi WordPress
Post a tutta
larghezza
per i temi
WordPress
A volte le barre laterali dei post
WordPress sono molto fastidiose.
Ecco come rimuoverle, dandovi
l’opportunità di decidere del loro
destino per ogni singolo post
strumenti | tecnologie | tendenze WordPress
A
<sopra>
• A volte la barra laterale è una parte
fondamentale del post, altre volte
occupa solo spazio prezioso. È
consigliabile conoscere una rapida
opzione per eliminare una barra
laterale
...potete decidere consapevolmente se
visualizzare o meno la barra laterale, a
seconda del contenuto
56 _____________________________________________ tutorial
SUL CD
• Tutti i file .PHP
del tema
necessari
• Codice completo
dei passaggi
lcuni temi hanno una barra laterale nella
singola finestra del post, mentre altri no.
Ma perché prendere questa decisione a
livello globale? Perché non stabilirlo per
ciascun post? In questo modo potete
decidere consapevolmente se visualizzare o
meno la barra laterale, a seconda del
contenuto e non perché il designer del
tema pensava fosse giusto così.
In questo tutorial impareremo innanzitutto a eliminare
la barra laterale dal file del template, e poi useremo un
campo personalizzato per decidere se deve essere
visualizzata o no. Infine, creeremo la nostra piccola casella
di spunta invece di affidarci al campo personalizzato che
potrebbe spaventare alcuni utenti. Il principio è lo stesso
per la maggior parte dei temi, quindi dovreste essere in
grado di applicare la soluzione a qualunque tema stiate
usando.
01 Recuperare i file del tema
Per i nostri scopi useremo una versione
speciale del tema per blog Notes, che solitamente
si trova su http://tdh.me/wordpress/notes. Il
tema è gratuito e con una licenza GPL così che
partendo da esso possiate costruire tutto ciò che
desiderate. Tutti i file necessari sono reperibili sul
CD allegato alla rivista.
02 Familiarizzare con single.
php
Dal momento che stiamo aggiungendo l’opzione
della barra laterale ai singoli post, dovete
familiarizzare con single.php, che comprende
l’header (header.php), cerca loop-single.php e, in
caso di insuccesso, si affida a loop.php. C’è poi la
barra laterale, (sidebar.php), che naturalmente è la
parte che ci interessa di più. Infine, il footer (footer.
php) chiude il cerchio.
001 <?php get_header(); ?>
002 <div id="content" class="widecolumn">
003 <?php
004 // Look for loop-single.php,
fallback to loop.php
005 get_template_part( 'loop', 'single' );
006 ?>
007 </div>
008 <?php get_sidebar(); ?>
009 <?php get_footer(); ?>
03 Eliminare la barra laterale
Iniziamo eliminando la barra laterale e
vediamo cosa succede. In single.php, impostate
come commento il tag get_sidebar(), usando la
seguente espressione:
001 <!-- ?php get_sidebar(); ? -->
La barra laterale destra è sparita dai singoli post
Ora nei singoli post non ci sarà alcuna barra
laterale, dal momento che abbiamo eliminato tale
elemento.
04 Lavorare in style.css
Ora che ci siamo sbarazzati della barra
laterale dobbiamo migliorare l’aspetto della
finestra del post; per esempio, dove prima c’era la
barra laterale adesso c’è un enorme spazio vuoto
che ovviamente non può rimanere lì. Per risolvere

il problema dobbiamo usare gli stili CSS, quindi aprite
style.css. Supponiamo di voler centrare il contenuto
della colonna: dovremo localizzare la seguente riga:
001 div.post, div.page, div.attachment, div.
hentry { margin: 20px 0 40px 20px; clear:both;
} /* 640 pixels */
05 Centrare il div del post
Proviamo ora a posizionare in single.php il
contenuto al centro. La larghezza completa a nostra
disposizione misura 960px, mentre la colonna del
contenuto è larga 640px. Questo significa che
dobbiamo spostare il contenuto di 160px dal margine
sinistro (al quale si allinea) così che appaia al centro.
Dobbiamo quindi sostituire la riga seguente:
001 div.post, div.page, div.attachment, div.
hentry { margin: 20px 0 40px 20px; clear:both;
} /* 640 pixels */
con questa:
001 div.post, div.page, div.attachment, div.
hentry { width: 640px; margin: 20px 0 40px
160px; clear:both; } /* 640 pixels */
06 Colonna a tutta larghezza
Tuttavia, questa operazione non è abbastanza
dal momento che è necessario che la colonna
#content occupi tutta la larghezza. In style.css trovate
la seguente riga (intorno alla riga 114):
001 div#content {float: left;}.
E aggiungete width: 100%; usando:
001 div#content {float: left; width: 100%;}.
Ora che la colonna #content occupa tutta la larghezza, il
div del post deve essere centrato.
07 Ripensamento
Questo formato funziona fino a un certo
punto, ma non è abbastanza dal momento che le
modifiche al CSS avranno conseguenze anche sul
resto del sito. Inoltre, a volte desideriamo che in alcuni
post la barra laterale sia visibile, quindi abbiamo
Post a tutta larghezza per i temi WordPress
<a sinistra>
• Come potete vedere, ora il contenuto è centrato
<sopra>
• Per applicare un campo personalizzato con nome e
valore definiti, basta inserire tali informazioni e fare
clic sul pulsante appropriato
<a destra>
• Questo post ha un campo personalizzato chiamato
sidebar con il valore impostato su nosidebar
bisogno di una soluzione più flessibile. Si tratta dei
campi personalizzati.
08 La soluzione
Nel tema useremo i campi personalizzati per
due motivi: il primo è che dobbiamo verificare se
l’utente ha deciso di nascondere o lasciare visibile la
barra laterale. Se è nascosta, dobbiamo usare stili
differenti così che il resto del sito non sia così diverso
da come è adesso. Creare un campo personalizzato è
semplice. Basta aprire la schermata Modifica articolo
dopo aver attivato la casella Campi personalizzati
attraverso il menu Impostazioni schermo in alto a
destra.
09 Controllo del campo
personalizzato
Per recuperare e reagire al valore di un campo
personalizzato e per controllare in single.php se
mostrare o meno la barra laterale, useremo get_post_
meta(). Sostituite il tag get_sidebar() con quanto
segue:
001 <?php
002 // Is sidebar NOT set to Off we'll output it,
otherwise not
003 $custom_field = get_post_meta($post->ID,
'sidebar', true);
004 $other_value = "nosidebar";
005 if ($custom_field != $other_value) {
006 get_sidebar();
007 }
008 ?>
Ciò che stiamo facendo è memorizzare il valore del
campo personalizzato sidebar $custom_field. Poi
controlliamo se il valore di $custom_field è diverso da
quello di $other_value, impostato su ‘nosidebar’.
Quindi, se è presente un campo personalizzato
chiamato sidebar con valore Off, il controllo if non sarà
true e con get_sidebar() non verrà mostrata la barra
laterale.
10 Aggiungere una classe
Abbiamo anche bisogno di una classe CSS con
cui lavorare, in modo da poter usare uno stile diverso
tutorial _____________________________________________
<Tutorial>
a seconda che la barra laterale sia presente o meno. La
inseriremo in #content, e il valore del campo
personalizzato chiamato sidebar verrà diramato nella
classe: questo significa che se è impostata potremo
usare la classe nosidebar.
001 <div id="content" class="widecolumn <?php
echo get_post_meta($post->ID, 'sidebar', true); ?>
11 Stile di div.nosidebar
Rivediamo ora style.css per sistemare gli stili.
Innanzitutto, eliminate width: 100%; da div#content e
aggiungete div.nosidebar con la larghezza completa.
001 div#content {
002 float: left;
003 }
004 div.nosidebar { width: 100%; }
12 Stile di div.post
Successivamente, dobbiamo fare in modo che
div.post torni normale per tutte le occasioni in cui è
presente la barra laterale. Questo è il codice:
001 div.post, div.page, div.attachment, div.
hentry { margin: 20px 0 40px 20px; clear:both;
} /* 640 pixels */
Grazie a div.nosidebar possiamo localizzare div.post
quando non c’è la barra laterale e centrarlo usando:
001 div.nosidebar div.post { width:640px;
margin-left: 160px; }
13 Sistemare i commenti
Avrete notato che il modulo dei commenti
non è allineato correttamente quando la barra laterale
non è presente. Il problema può essere facilmente
risolto ancora una volta con div.nosidebar. Basta
aggiungere a style.css il codice seguente:
001 div.nosidebar div#comments { margin-
left: 160px; }.
In questo modo vi assicurate che il div che contiene i
commenti venga allineato correttamente quando la
barra laterale è assente.
57
 <Tutorial>
Post a tutta larghezza per i temi WordPress
14 Testare
Questo è tutto ciò che dobbiamo fare così che
le cose funzionino. Sperimentate nel vostro browser
per verificare che tutto dia i risultati desiderati.
15 Aggiungere una casella di
controllo
I campi personalizzati non sono molto agevoli per gli
utenti, quindi creeremo un riquadro personalizzato
con una casella di controllo. Aprite functions.php e
inserite quanto segue:
001 // CUSTOM SETTINGS BOX
002 // Defining custom box for sidebar settings
003 // Add and save the data
004 add_action( 'add_meta_boxes',
005 'notesblogsidebar_add_custom_box' );
006 add_action( 'save_post', 'notesblogsidebar_
save_postdata' );
007 // Add the box on posts only, to the right (side)
008 function notesblogsidebar_add_custom_box() {
009 add_meta_box(
010 'notesblogsidebar_sectionid',
011 __( 'Hide sidebar?', 'notesblog' ),
012 'notesblogsidebar_inner_custom_ box',
013 'post',
014 'side'
015 );
016 }
Si aggiunge così l’azione per il riquadro ‘Hide sidebar?’
creato con add_meta_box(), e i dati vengono salvati.
Vogliamo che il riquadro appaia sul lato destro, quindi
in add_meta_box() usiamo il parametro side.
16 Funzionalità del riquadro
Visualizziamo il riquadro creando
notesblogsidebar_inner_custom_box() da add_meta_
box().
001 // Output custom box
002 function notesblogsidebar_inner_custom_box(
$post ) {
003 // Use nonce for verification
58 _____________________________________________ tutorial
<a sinistra>
• Un post senza la barra laterale
<a destra>
• Un post con la barra laterale
<sotto>
• Il nuovo riquadro, molto più intuitivo ed
elegante rispetto al campo personalizzato
004 wp_nonce_field( plugin_basename( __FILE__ ),
'notesblogsidebar_noncename' );
005 // The actual fields for data entry
006 echo '<label for="notesblogsidebar_new_
field">';
007 _e('Check box to hide the sidebar on this
post.', 'notesblog' );
008 echo '</label>';
009 $checked = get_post_meta($post->ID,
'sidebar', true);
010 echo '<br /><br /><input type="checkbox"
011 id="notesblogsidebar_new_field"
012 name="notesblogsidebar_new_field"
value="nosidebar" '.
013 ($checked ? 'checked="checked"' : '' ). ' />
<strong>Hide sidebar</strong>';
014 }
Dobbiamo anche salvare i dati ed evitare che l’azione
avvenga a ogni salvataggio automatico. A questo
scopo, inserite la seguente sequenza di codice.
001 // Save our custom data with post save
002 function notesblogsidebar_save_postdata(
$post_id ) {
003 // Don't submit form on autosave
004 if ( defined( 'DOING_AUTOSAVE' ) &&
DOING_AUTOSAVE )
005 return;
006 // Check permissions
007 if ( 'page' == $_POST['post_type'] )
008 {
009 if ( !current_user_can( 'edit_page', $post_id ) )
010 return;
011 }
012 else
013 {
014 if ( !current_user_can( 'edit_post', $post_id ) )
015 return;
016 }
17 Salvare i metadati
Infine, dobbiamo salvare i metadati allo
stesso modo, ma con update_post_meta() al posto
dell’operazione manuale. Noterete che il controllo
if/else si trova alla fine e salva 1 o 0 a seconda che
la casella di controllo sia spuntata o meno.
001 // Update (or create) post meta sidebar
002 update_post_meta( $post_id, 'sidebar',
($_ POST
003 ['notesblogsidebar_new_field'] ? 1:0) );
004 }
Con questo codice in functions.php otterremo un
riquadro separato con una casella di controllo e
non dovremo preoccuparci più del campo
personalizzato nella sezione admin di WordPress.
18 Rivedere single.php
L’uso di una funzione come questa
comporta la modifica del codice in single.php. Per
prima cosa dobbiamo verificare se il valore meta
sidebar contiene 1, e in caso affermativo inviare
nosidebar. Applicate questo codice:
001 <div id="content" class="widecolumn
<?php if ( get_post_meta($post->ID, 'sidebar',
true) == 1 ): echo 'nosidebar'; endif; ?>">
Dobbiamo anche cambiare ‘nosidebar’ nel
controllo per fare in modo che get_sidebar()
cerchi un valore di 1.
001 <?php
002 // Is sidebar NOT set to Off we'll output it,
otherwise not
003 $custom_field = get_post_meta($post-
>ID, 'sidebar', true);
004 $other_value = "1";
005 if ($custom_field != $other_value) {
006 get_sidebar();
007 }
008 ?>
Ora disponiamo della stessa funzionalità senza
dover usare il campo personalizzato così
temuto. Basta un clic per adattare il vostro
tema!
 PER RICEVERE GLI ARRETRATI:
• Il costo di ogni arretrato è pari al doppio • Invialo, insieme alla fotocopia della ricevuta
del prezzo di cover. di pagamento a:
• Compila il coupon in basso specificando PLAY MEDIA COMPANY - Servizio Arretrati -
il numero che desideri ricevere e le copie Via di S. Cornelia 5/a - 00060 Formello (RM).
richieste. Oppure via FAX al numero 06.33.22.12.35

WEB DESIGNER 34 WEB DESIGNER 35 WEB DESIGNER 36 WEB DESIGNER 37 WEB DESIGNER 39 WEB DESIGNER 40 WEB DESIGNER 41
:: Cattura e remixa i contenuti online :: Viral marketing :: I browser del futuro :: WordPress: storia completa, temi e :: Twitter: rivoluzione del web o :: Tutti i segreti dei CSS :: Photoshop per il web: le principali
:: Creare un sito per l’iPhone :: Panoramica di dreamweaver cs4 :: Semplifica il tuo sito guide pratiche moda passeggera? :: I blog e le aziende: il nuovo tecniche per un design moderno
:: Realizzare un dance game in Flash :: Effetti di testo realistici con :: Usare i nuovi tag di stile dei CSS3 :: Html 5: come usare i tag del nuovo :: Le magie di WordPress binomio del momento :: Spotify: segreti e retroscena
Photoshop linguaggio di markup :: Impariamo a conoscere :: I migliori sfondi di Twitter :: Sviluppa siti web per smartphone
:: Adobe CS4: alla scoperta Papervision 3D
dell’ultima suite di Adobe

Contenuto dinamico animato senza Flash?

POTENTE ? FLESSIBILE ? LEGGERO ? OPEN SOURCE

Scatena la potenza di questa fantastica libreria di codice JavaScript
SUL CD
OLTRE 50
PENNELLI E IMMAGINI
VETTORIALI
GRATUITE

DESIGN COME
PER iPad
Siamo pronti
Realizzare siti web mobile con bemoko
ad accogliere il tablet PC
Produrre straordinari siti portfolio da una pagina
di Apple? Creare layout a due colonne semplici e puliti basati sui CSS
Pubblicare gallerie di immagini WordPress
Giugno/Luglio 2010 :: Bimestrale :: N. 45 ¤ 6,99
E-COMMERCE A COLORI BLOGGARE CON STILE
Progettare un componente Produrre template vivaci
per la scelta del colore con Flash con Photoshop e Illustrator

WEB DESIGNER 42 WEB DESIGNER 43 WEB DESIGNER 44 WEB DESIGNER 45 WEB DESIGNER 46 WEB DESIGNER 47
:: I segreti per sviluppare :: Microsoft seduce i creativi :: Dai una scossa al tuo blog :: jQuery :: Adobe svela i segreti :: Tutti i segreti su HTML5 Open WEB DESIGNER 48
applicazioni per iPhone del web :: Codice più pulito con i CSS :: Design per iPad della nuova creative suite :: Realizzare grafici live con JQuery :: FontFace: rivoluzione per il web
:: La guida ai principali CMS :: Le 50 migliori tecniche Flash :: Mozilla Jetpack :: E-commerce a colori :: Grafica Pro :: Aggiungere un galleria di immagini a :: Ridefinire il bloging con Word Press 3
:: Progettare giochi in Flash :: Drag and Drop, integrazioni :: Joomla! e i blog :: Bloggare con stile :: iPhone e iPad, design in movimento un sito drupal :: Come lavorano le agenzie
avanzate di New York
iPad Design 9:23

iPadDesign

ProgeTTare
are
Per iPaD
PaD
Creare e oTTImIzzare Un SITo
abLeT
aFFInCHÉ SIa PerFeTTo Per Un TabLeT
Explorer 9
YouTube Twitter Facebook
?
(Il tuo sito)
MIRACOLO! MICROSOFT
TORNA SULLA RETTA VIA
DEGLI STANDARD WEB
COME
Progettare temi per blog con WordPress Da Photoshop a HTML 20 plug-in WordPress essenziali
Come migliorare il design di un blog
Creare sfondi futuristici in Photoshop
Integrare con successo HTML5 e Flash
Creare un microsito promozionale d’effetto Le tecniche e i segreti per produrre e imparare a realizzare widget professionali Realizzare pulsanti di grande effetto con CSS3
Costruire un’app per Windows Phone 7 pagine sempre più attraenti Progettare un sito per iPhone e Android con jQTouch

MOTION CONTROL CRONaCa Aprile/Maggio 2011 :: Bimestrale :: N. 50 ¤ 6,99

AGENZIA DEL MESE PROGETTARE ICONE Febbraio/Marzo 2011 :: Bimestrale :: N. 49 ¤ 6,99 Ecco come offrire dI uN dEsIgN
Siamo andati a Londra a trovare Usare la tecnologia vettoriale esperienze coinvolgenti I segreti di Shape
la R/GA, vincitrice del premio per per creare un’icona dai colori vivaci, con i nuovi metodi The Hive svelati Web Designer Magazine + Web Designer Magazine Presenta:
la campagna digitale del decennio ottima per un sito web o per un’app d’interazione da Kuro Modella il tuo corpo donna: ¤ 4,99 in più

WEB DESIGNER 49 WEB DESIGNER 50 WEB DESIGNER 51 WEB DESIGNER 52 WEB DESIGNER 53 WEB DESIGNER 54 WEB DESIGNER 55
:: Creare un sito perfetto per iPad :: Il nuovo Explorer 9 :: HTML5 La rivoluzione comincia qui :: Dal Web alle APP :: Speciale font: migliora l’aspetto :: Flash: la fine o un nuovo inizio? :: Sito superveloce
:: Creare app per Windows Phone 7 :: 20 plug-in essenziali per WorldPress :: Jquery è mobile :: JOOMLA! dei tuoi siti con font alternativi e :: Speciale Html 5 :: I 10 migliori strumenti online
:: Da Photoshop a HTML: pagine sempre :: Creare sfondi futuristici in Photoshop :: Dedign con Google :: Mutado regole CSS
più attraenti :: Tutti i segreti di Wordpress

PUOI EFFETTUARE IL PAGAMENTO TRAMITE:

• VERSAMENTO SU CONTO CORRENTE POSTALE Formello RM, specificando la causale
numero 99353005 intestato a Play Media Company Srl, “Arretrati Web Designer Magazine”
Via di Santa Cornelia, 5/a – 00060 Formello RM, specificando nella •ASSEGNO NON TRASFERIBILE
causale “Arretrati Web Designer Magazine” intestato a Play Media Company Srl
• BONIFICO BANCARIO e spedito a Play Media Company Srl,
SULLE SEGUENTI COORDINATE: Via di Santa Cornelia, 5/a – 00060 Formello RM
Banca del Fucino - codice IBAN: • ACQUISTO ONLINE TRAMITE CARTA DI CREDITO
IT91X0312403210000000232811 – intestato a: sul sito www.playmediacompany.it
Play Media Company Srl Via di Santa Cornelia, 5/a 00060 (in questo caso non è necessario compilare il coupon)

ORDINA I NUMERI ARRETRATI

COMODAMENTE DA CASA TUA SU
WWW.PLAYMEDIACOMPANY.IT

Ti preghiamo di scrivere i tuoi dati in modo chiaro, possibilmente in stampatello

Nome..................................................................................Cognome...........................................................................
Indirizzo............................................................................................................................................................N.............
Località..................................................................................Cap............................Prov............................................
Email..................................................................................Tel..................................................................
Scelgo di pagare con:
Versamento su CCP Bonifico bancario Assegno bancario
Esauriti da n. 1 a n. 26, da n. 28 a n. 32, n. 38
 <Tutorial>
Creare un menu Cover Flow con jQuery e i CSS3
Creare un
menu Cover
Flow con
jQuery e i CSS3
Utilizziamo le trasformazioni 3D
per realizzare un elegante menu
di navigazione
strumenti | tecnologie | tendenze Photoshop, Illustrator, Dreamweaver
o l’editor HTML di vostra scelta (HTML/CSS, JavaScript)
A
<sopra>
• Un sistema di navigazione in stile
Cover Flow sul vostro sito web è
elegante e intuitivo da usare, visto
che la maggior parte degli utenti
conosce bene quello di iTunes
Creeremo un menu di navigazione in
stile Cover Flow con trasformazioni 3D che
consentono di sfogliare le opzioni proprio
come in iTunes
60 _____________________________________________ tutorial
SUL CD
• Documento
HTML completo
• Tutte le
immagini e le
risorse
• Codice sorgente
dei passaggi
mmettiamolo, i CSS3 sono straordinari.
Per la prima volta dalla nascita del web,
oltre 20 anni fa, possiamo renderizzare gli
effetti speciali direttamente nel browser
senza doverci affidare a un plug-in o a script
complicati. Man mano che questo nuovo
standard viene adottato da tutti i browser,
abbiamo più possibilità di sfruttare i nuovi
strumenti a nostra disposizione, e questo
non può che portare a un livello di interattività più alto
senza doverci preoccupare delle prestazioni. Se usate
regolarmente iTunes, sicuramente conoscete l’effetto
Cover Flow usato per visualizzare tutte le copertine degli
album, che vi permette di fare semplicemente clic per
selezionare l’album da riprodurre o di sfogliare i vostri
lavori proprio come fareste nella realtà. Come concetto di
navigazione Cover Flow è interessante. Potete vedere
un’anteprima completa di quello che state selezionando, o
scorrere facilmente un lungo elenco di opzioni. E, inoltre,
tutto ciò avviene in un’area relativamente piccola dello
schermo. In questo tutorial useremo i CSS3 per creare un
menu di navigazione in stile Cover Flow con trasformazioni
3D che consentono di sfogliare le opzioni proprio come in
iTunes. Per non farci mancare niente, questo menu
supporterà sia il mouse che la tastiera.
01 Impostare la pagina
Iniziate con una pagina HTML5 di base
contenente un <div>. All’interno del <div> inserite un
elenco non ordinato con 20 voci. Ciascuna voce
contiene un’immagine e un collegamento, situazione
tipica per un menu di navigazione. Il documento
iniziale è reperibile sul CD allegato alla rivista.
02 Inserire le classi
Per l’animazione e il posizionamento vogliamo
sfruttare la funzione di rendering degli effetti nativa
del browser, poiché in questo modo le prestazioni
migliorano e il prodotto finale sarà più fluido. Questo
significa che abbiamo bisogno di un modo per
applicare gli effetti alle voci di elenco: in questo caso
useremo le classi, che possiamo applicare o rimuovere
dalle singole voci.
03 A sinistra…
Il nostro effetto Cover Flow richiama le voci a
sinistra del prodotto corrente in modo che si
sovrappongano a esso ruotando sull’asse Y, così da
produrre un effetto 3D. Dobbiamo creare un po’ di
prospettiva e impilare ciascuna voce in modo che si
trovi davanti a quella alla sua sinistra. Iniziamo con la
rotazione: aggiungete alla classe .left la seguente
regola:
001 .coverflow ul li.left {
002 -webkit-transform: rotateY( 45deg );
003 -webkit-transform-origin: 0px;
004 -moz-transform: scale(0.75, 0.75)
translateY(-20px);
005 }
04 …e a destra
Le voci a destra di quella corrente funzionano
come quelle a sinistra, ma si sovrappongono nel
senso contrario. Questo significa che dobbiamo
invertire la rotazione dell’asse così che le voci a cui è
stata applicata la classe .right continuino a
fronteggiare il prodotto corrente. Aggiungete alla
classe .right la seguente regola:
001 .coverflow ul li.right {
002 -webkit-transform: rotateY( -45deg );
003 -webkit-transform-origin: 400px;
004 -moz-transform: scale(0.75, 0.75)
translateY(-20px);
005 }
05 Un po’ di prospettiva
L’ultima cosa da fare prima di verificare il
nostro lavoro consiste nel dare un po’ di prospettiva
alla viewport. La aggiungeremo attraverso la regola
-webkit-perspective e la applicheremo al <div>
genitore. In questo modo ci assicuriamo che mentre
scorriamo le voci il punto prospettico rimarrà lo
stesso. Dobbiamo anche indicare a <ul> di conservare
l’effetto 3D. Aggiungete quindi le seguenti regole:
 <Tutorial>
Creare un menu Cover Flow con jQuery e i CSS3

<a sinistra>
•Il menu completo mostra la voce
correntemente selezionata davanti
a tutte le altre, con quelle a destra e
a sinistra dietro l’elemento centrale
<sopra, dall’alto verso il basso>
• La pagina iniziale è un semplice
elenco contenente 20 voci disposte
orizzontalmente attraverso
display:inline-block
• Abbiamo aggiunto le classi per
ruotare di 45 gradi le voci di elenco
sull’asse Y, a seconda che sia stata
applicata la classe .left o .right

aggiunta una proprietà transition per fare in modo

09 Impostare il movimento
001 .coverflow { che quando si passa da uno stile all’altro l’animazione
002 -webkit-perspective: 2000; abbia luogo: Ora che abbiamo impostato le classi,
003 -webkit-perspective-origin: 480px 300px; dobbiamo trovare un modo per applicarle alle varie
004 } 001 margin-left:-160px; voci mentre interagiamo con l’elenco. A questo scopo
005 .coverflow ul { 002 margin-right: -160px; useremo jQuery, quindi copiatelo dal CD (o visitate
006 margin:0; 003 text-align:center; http://jquery.com) e aggiungetelo alla pagina con il
007 padding:0; 004 -webkit-transition: all 0.5s ease-in-out; codice seguente (il nostro esempio presuppone che
008 width:50000px; 005 -moz-transition: all 0.5s ease-in-out; abbiate salvato la libreria jQuery in una cartella
009 webkit-transform-style: preserve-3d; 006 z-index:1; chiamata ‘Scripts’).
010 height:550px; 007 border:2px solid white;
011 } 001 <script src=”scripts/jquery.js”></script>

06 Assegnare le classi e testare
Dobbiamo assicurarci di non aver commesso
errori. Aggiungete una classe left alla prima voce
dell’elenco e una classe right alla terza voce, quindi
aprite la pagina in Google Chrome o Apple Safari per
verificare che la trasformazione funzioni come
previsto.
08 Precedenza
È tutto perfetto, ma la voce correntemente
selezionata, quella senza una classe left o right, si deve
trovare davanti a tutte le altre e deve anche essere un
po’ più grande per dimostrare la sua precedenza.
Creiamo una nuova classe e aggiungiamo alcune
trasformazioni per ottenere questo risultato. Inserite
nel foglio di stile il codice seguente:
10 Creare un documento JS
Abbiamo anche bisogno di un punto in cui
salvare i nostri script, così da poter aggiungere lo
scambio di classe alle voci: create quindi un
documento vuoto e salvatelo come ‘coverflow.js’ nella
cartella Scripts. Aggiungete al documento un
collegamento dalla sezione <head> della pagina,
come nel passaggio precedente:

07 Spazio negativo
001 .coverflow ul li.current {
Avrete notato che le voci si orientano 002 background: #fff; 001 <script src=”scripts/coverflow.js”>
correttamente ma che sono troppo lontane una 003 width:400px; </script>
dall’altra: per creare un effetto Cover Flow completo 004 margin-left:-100px;

11 Verifica del lavoro

abbiamo bisogno che gli elementi si sovrappongano.
Per risolvere il problema basta usare i margini negativi
per avvicinare le voci così che si sovrappongano
completamente. Aggiungete le regole seguenti agli
stili .coverflow ul li { }. Noterete che viene anche
005 margin-right: -100px;
006 -webkit-transform-origin: 200px; Se non lo avete già fatto, eliminate le classi dalle
007 -webkit-transform: translateZ(100px); voci di elenco e aggiungete al documento coverflow.js
008 z-index:1000; un po’ di nuovo codice, come mostrato di seguito. In
009 } questo modo potrete verificare che il documento sia

tutorial ______________________________________________61
 <Tutorial>
Creare un menu Cover Flow con jQuery e i CSS3

<sopra, da sinistra a destra>

• Introducendo i margini possiamo avvicinare tra loro le
voci, per ottenere un effetto Cover Flow migliore
• Ora con lo script abbiamo impostato la classe delle varie
voci, e questo ci consente di vedere tutti i prodotti allineati
uno di fianco all’altro
<a sinistra>
• Per navigare potete usare sia la tastiera che il mouse.
Premendo i tasti freccia su o giù vi spostate
rispettivamente sull’ultima o sulla prima voce, producendo
un effetto oscillante
<a destra>
• Per centrare le voce corrente nel div .coverflow, ogni
mezzo secondo viene avviata una funzione attraverso la
regolazione del margine del tag <ul>

Non sovrascrivete (“current”).removeClass(“right”). 016 // Return key

le impostazioni pronto per la
manipolazione, addClass(“left”); 017 if (e.keyCode == 13) {
predefinite quindi 003 $(this).nextAll(“li”).removeClass( 018 // get the URL of the currently
I visitatori che per navigare nel assegnate una “current”).removeClass(“left”). selected link
sito usano la tastiera non sono classe left a addClass(“right”); 019 url = $(“.coverflow ul li:eq
felici se sovrascrivete le ciascuna voce 004 $(this).removeClass(“left”). (“+index+”)”).find(“a”).attr(“href”);
scorciatoie da tastiera di elenco nel tag removeClass(“right”).addClass(“current”); 020 // redirect to the URL grabbed
predefinite. <ul>. Salvate e 005 }); 021 document.location.href=url;
testate. 022 }

14 Input da tastiera
023 $(“.coverflow ul li:eq(“+index+”)”).
001 $(document).ready(function(){ Consentiremo l’interazione sia del mouse che prevAll(“li”).removeClass(“current”).
002 // The document is ready to be della tastiera, quindi occupiamoci ora di ques’ultima. removeClass(“right”).addClass(“left”);
manipulated! Dobbiamo rilevare le pressioni dei tasti e, se 024 $(“.coverflow ul li:eq(“+index+”)”).
003 $(“.coverflow ul li”).each(function(){ corrispondono ai tasti assegnati, rispondere a esse nextAll(“li”).removeClass(“current”).
004 $(this).addClass(“left”); aggiornando la voce correntemente selezionata. removeClass(“left”).addClass(“right”);
005 }); Aggiungete il codice seguente per assegnare i tasti 025 }
006 }); freccia sinistra e destra al movimento in avanti e
indietro nell’elenco:
15 Su e giù
12 A sinistra e a destra… 001 $(document).keydown(function(e){
Già che ci siamo, possiamo anche aggiungere i
È arrivato il momento di fare sul serio. comportamenti per i tasti freccia su e giù facendo in
Supponiamo che la nostra voce corrente si trovi alla 002 index = $(“.coverflow ul li”). modo che il tasto freccia su selezioni la prima voce e
posizione X. A tutte le voci a sinistra di X (quelle che index($(“.current”)); che la freccia giù selezioni l’ultima dell’elenco. Si tratta
appaiono per prime nel codice sorgente) deve essere 003 length = $(“.coverflow ul li”). semplicemente di aggiungere un’altra clausola alle
assegnata una classe left, mentre a tutte quelle a length-1; dichiarazioni condizionali inserite nel passaggio
destra (quelle che appaiono dopo nel codice 004 // Left arrow precedente.
sorgente) deve essere assegnata una classe right. 005 if (e.keyCode == 37) {
Possiamo ottenere questo risultato usando i metodi 006 if (index>0) { 001 // Down arrow
prevAll() e nextAll() di jQuery. 007 index=index-1; 002 if (e.keyCode == 40) {
008 } 003 index = length;

13 Assegnare la classe corrente

009 } 004 }
Dobbiamo anche assegnare la classe corrente 010 // Right arrow (or tab key - be 005 // Up arrow
alla voce rimanente, quella attualmente selezionata. cautious doing this) 006 if (e.keyCode == 38) {
Impostiamo lo script in modo che assegni la classe 011 if (e.keyCode == 39) { // || e.keyCode 007 index = 0;
corrente a qualsiasi elemento venga cliccato, e poi == 9) { 008 }
assegni le classi left e right di conseguenza. 012 if (index<length) {

16 Migliorare il movimento del

013 index=index+1;
001 $(“.coverflow ul li”).click(function(){ 014 } mouse
002 $(this).prevAll(“li”).removeClass 015 } Avrete notato che al momento il movimento del mouse

62 _____________________________________________ tutorial
 <Tutorial>
Creare un menu Cover Flow con jQuery e i CSS3

non è fluido; il rilevatore di eventi di clic non sembra visualizzerà qualcosa in 2,5D. Aggiungete il codice
apprezzare molto le trasformazioni 3D (e nemmeno 007 timer = 1; seguente per impostare in modo programmatico lo
mouseover). Elimineremo quindi il gestore di eventi di clic 008 resettimer = zIndex per ciascuna voce dell’elenco.
e verificheremo il movimento del mouse in relazione al setTimeout(function(){timer=0;},1000);
<div> coverflow. 009 } 001 $(“.coverflow ul li:lt
010 if (xpos>((containerwidth- (“+index+”)”).each(function(){

17 Rilevare il movimento
itemwidth)/2+itemwidth) && index<length && 002 tmpindex = $(“.coverflow ul
Per rilevare il movimento del mouse rispetto al timer==0) { li”).index(this);
<div>, aggiungete il codice seguente. Introdurremo anche 011 index = index+1; 003 $(this).css({zIndex:tmpindex});
alcune funzioni matematiche che calcolano dove si trova il 012 timer = 1; 004 });
mouse. Se è a sinistra della voce corrente ci muoveremo 013 resettimer = setTimeout 005 $(“.coverflow ul li:gt
indietro nell’elenco, se invece è a destra ci muoveremo in (function(){timer=0;},1000); (“+index+”)”).each(function(){
avanti. 014 } 006 tmpindex = $(“.coverflow ul
015 $(“.coverflow ul li:eq li”).index(this);
001 $(“.coverflow”).mousemove (“+index+”)”).prevAll(“li”).removeClass 007 $(this).css({zIndex:100-
(function(e){ (“current”).removeClass(“right”). tmpindex});
002 xpos = e.pageX-$(this).offset(). addClass(“left”); 008 });
left; 009 $(“.coverflow ul li:eq

20 Testare e correggere
003 index = $(“.coverflow ul li”). (“+index+”)”).css({zIndex:1000}).focus();
index($(“.current”)); Se ora eseguite una verifica vi accorgerete che
004 length = $(“.coverflow ul li”). l’effetto è più controllabile. Potete regolare il timer a
length-1; vostro piacimento per introdurre un
005 if (xpos<((containerwidth- tempo di aggiornamento più lungo
itemwidth)/2) && index>0) { o più corto, a seconda della Fornire
006
007 }
index = index-1; vostra implementazione. A un’alternativa
questo punto dobbiamo Qui abbiamo usato
008 if (xpos>((containerwidth- anche sistemare alcune
itemwidth)/2+itemwidth) && index<length) {
tecniche avanzate che
cose: innanzitutto, la voce funzionano
009 index = index+1; correntemente selezionata
010 }
perfettamente nei
si deve trovare al centro browser webkit, quindi
della scena, quindi aggiungete stili
18 Stop! aggiungete una nuova alternativi per
Se avete provato il codice del passaggio funzione che si attiva circa ogni Firefox e IE.
precedente vi sarete accorti che ora abbiamo il problema mezzo secondo per aggiornare la
opposto: dal momento che la risposta al movimento del posizione del tag <ul>. Supporto dei browser
mouse è perfetta, è impossibile fermare l’elenco sulla voce
desiderata! Dobbiamo rallentare la risposta al movimento 001 t = setInterval(“centreit()”,500); I CSS3 sono nuovi e i membri del gruppo
del mouse in modo che l’utente abbia la possibilità di 002 function centreit(){ di lavoro stanno ancora definendo la
reagire. 003 $(“.coverflow”).each(function(){ specifica precisa. Di conseguenza, per
004 offsetleft = $(“.current”,this). evitare problemi in seguito, i produttori

19 Aggiungere un timer
offset().left; di browser stanno implementando già
Quando abbiamo aggiornato la voce 005 containeroffset = $(this).offset(). adesso il supporto dei CSS3, utilizzando
correntemente selezionata, per rallentare il movimento left; però prefissi specifici. Questo significa
abbiamo impostato un timer della durata di un secondo, e 006 offsetleft = offsetleft- che se in seguito la specifica cambierà,
non consentiremo alcun altro aggiornamento finché il containeroffset; molti siti web saranno comunque visibili.
timer non si ferma. In questo modo otteniamo una 007 target = (containerwidth/2)- Per questo motivo dovete abituarvi a
risposta al movimento del mouse, che però non è (itemwidth/2); usare una vasta gamma di prefissi
eccessiva. Aggiungete il codice seguente per introdurre 008 existingmargin = parseInt specifici dei produttori finché i CSS3
questo limitatore. ($(“ul”,this).css(“marginLeft”)); verranno completamente ratificati e
009 newmargin = existingmargin- verrà stabilita la specifica definitiva.
001 $(“.coverflow”).mousemove (offsetleft-target); Significa anche che non tutti i browser
(function(e){ 010 $(“ul”,this).stop().clearQueue(). offrono le funzioni più avanzate.
002 xpos = e.pageX-$(this).offset(). animate({marginLeft:newmargin},500); Attualmente solo i browser webkit come
left; 011 }); Safari e Chrome supportano le
003 index = $(“.coverflow ul li”). 012 } trasformazioni 3D. Questo è un fattore
index($(“.current”)); chiave, ma noi ne abbiamo tenuto conto

21 Organizzare lo spazio Z
004 length = $(“.coverflow ul li”). offrendovi un effetto per Firefox meno
length-1; Dobbiamo anche assicurarci che gli elementi a accattivante dal punto di vista visuale (e
005 if (xpos<((containerwidth- destra e a sinistra si impilino correttamente nello potete implementare soluzioni simili per
itemwidth)/2) && index>0 && timer==0) { spazio Z; in caso contrario, Safari non avrà alcun Opera, IE e così via).
006 index = index-1; problema di renderizzazione mentre Chrome

tutorial _____________________________________________ 63
 <Tutorial>
Realizzare fantastici siti web con la suite Muse di Adobe

Realizzare
È
lecito chiedersi se sia
necessario un altro
strumento di web
design. Esistono già

fantastici siti
numerosi editor di codice
che svolgono l’ottimo
lavoro di realizzazione del
codice per le pagine web.

web con la
Il problema con questi
editor è che dovete
conoscere l’HTML. Anche con Dreamweaver
dovete addentrarvi nel codice; la vista Design è

suite Muse
perfetta per aggiungere i contenuti, ma non
per comporre le pagine; quel compito spetta
al codice semantico, CSS e JavaScript per le
presentazioni. Per ottenere un sito “decente”,

di Adobe
La nuova beta per la pubblicazione
delle pagine sposta l’attenzione sul
un designer mediocre che conosce il graphic
design deve dedicare molto tempo all’aspetto
tecnico e grafico. È per questo motivo che è
stato lanciato Adobe Muse: è facile da imparare
se usate regolarmente InDesign, ed è
SUL CD
• Cartella Muse
estremamente potente. Non è dedicato ai
programmatori, e la maggior parte di essi
Assets
• Cartella Finished probabilmente sverrebbe se esaminasse
Site

design invece che sul codice l’HTML, ma serve allo scopo. Vale quindi la
pena dargli un’occhiata prima di esprimere
strumenti | tecnologie | tendenze Adobe Muse (beta) un giudizio.

01 Scaricare Muse
Copiate sul desktop le cartelle presenti sul
CD così da disporre delle risorse con cui lavorare.
Aprite poi il sito web di Muse (http://muse.
adobe.com) e premete il pulsante Get Muse.
Scaricate e installate il software, poi lanciatelo. Fate
clic su Create New>Site: si aprirà una finestra di
dialogo con le impostazioni per il sito.

02 Realizzare
un sito
Impostate la larghezza del
sito su 960px; l’altezza è
poco importante. Cambiate
il numero di colonne in 7 e
non toccate altro. Iniziate
definendo le pagine per il
sito. Noi ne abbiamo
inserite 3; fat clic sull’icona
+ per aggiungerle.

64_____________________________________________ tutorial
 <Tutorial>
Realizzare fantastici siti web con la suite Muse di Adobe

03 Aggiungere un’altra pagina

Chiamate la pagina ‘Portfolio’ e poi inseritene
un’altra chiamata ‘Contact’. Nella parte inferiore dello
schermo è presente una pagina master. Fate doppio clic
su di essa per modificarla; ora vi trovate nella modalità
Design. Trascinate la guida in alto sulla parte superiore
dello schermo e quella in basso sulla base del documento,
la guida dell’header a 125px e quella del footer a 440px.

04 Impostare l’header
Impostate l’opzione Browser Fill
su bianco. Con lo strumento Rectangle
(Stroke impostato su None), disegnate
un riquadro per l’header. Nel pannello
Fill, cercate ‘top.png’ nella cartella
Assets. Impostate su repeat horizontally
e il colore di sfondo su None.
05 Footer e sfondo
Usando lo stesso processo, create un footer e impostate
l’immagine di sfondo su ‘footer.png’. Disegnate un rettangolo sotto il
titolo (a 155px e largo tutto lo schermo), applicando ‘pattern.png’.
Mandatelo dietro come mostrato in figura. Fate clic sulla pagina e,
ancora una volta, impostate Stroke su None.

Pin di un’immagine

06 Aggiungere un 07 Impostare il menu Impostazioni

menu
Dal pannello Widgets Library trascinate
sulla scena un menu orizzontale. Nel
menu vengono automaticamente
inserite le pagine e i collegamenti a tali
pagine. Impostate la dimensione del
testo su 14px e il colore su bianco. Ora
aprite il pannello States. Fate doppio
clic sul menu finché viene evidenziato
Home e selezionate lo stato Rollover.
Dalle opzioni presenti in alto,
del widget
aggiungete un angolo arrotondato 01____ Cos’è il pinning?
Nell’angolo di tutti i Eseguire il pinning di un’immagine significa
in alto a sinistra e a destra del
widget è presente una prendere una grafica visualizzata e “liberarla”
pulsante. In Fill cambiate il colore
freccia blu che consente di dalla sua posizione fissa, in modo che appaia
di sfondo o aggiungete una sempre nello stesso punto sulla pagina,
aprire un menu indipendentemente dallo scorrimento.
sfumatura. Ripetete il processo per
contenente alcune
ciascuno stato e pulsante del
impostazioni relative al
menu. Potete sempre usare Preview
comportamento del
per vedere la pagina e selezionare
widget stesso.
Design per continuare con le modifiche.

08 Aggiungere il testo 09 Homepage

Incorporate ora il titolo usando lo strumento
Text e scegliendo un font personalizzato. Esso verrà
convertito in un’immagine; Muse non supporta
ancora i font incorporati con @font-face. Aggiungete
anche un testo al footer. Salvate il lavoro e ritornate
alla modalità Plan. Ora inseriremo nelle pagine i
contenuti, quindi fate doppio clic sulla homepage.
Dal menu Object scegliete Insert
Composition>Presentation. Fate clic sulla pagina per
aggiungerla e allineatela alla guida di destra. Fate clic due
volte su di essa, afferrate la maniglia sinistra, trascinatela
verso sinistra e riempite la pagina. Selezionate File>Place e
poi ‘presentation1.jpg’. Fate clic sulla presentazione ed essa
si sposterà sullo sfondo, come mostrato in figura.
02____ Aggiungere un’immagine
Posizionate un’immagine sulla pagina nel
punto in cui desiderate che appaia. Osservate
le opzioni in alto finché trovate quella relativa
al pinning, affiancata da un’icona a forma di
quadrato.

03____ Pin dell’immagine

Fate clic su una delle maniglie del quadrato. Se la
grafica si trova a sinistra e voi scegliete la maniglia
in alto a sinistra, significa che la misura verrà
sempre presa partendo da quel punto.

tutorial______________________________________________ 65
 <Tutorial>
Realizzare fantastici siti web con la suite Muse di Adobe

10 Completare la presentazione 11 Ritocchi finali

Cancellate l’immagine in primo piano. Ora modificate il testo così
che si adatti all’immagine. Fate clic sull’icona numero 2 nella
presentazione e aggiungete ‘presentation2.jpg’, ripetendo il processo
anche per ‘presentation3.jpg’. Ora selezionate la freccia blu per modificare
la presentazione.
Impostate Transition su Fading. Selezionate la
presentazione e aggiungete uno sfondo marrone chiaro e
un tratto di 12px sul bordo. Selezionate Rectangle e
disegnate vicino a uno dei bordi un riquadro largo quanto
la pagina. Trascinatelo sotto la presentazione per
allungare la pagina.

12 Stile del rettangolo

Eliminate il tratto dal rettangolo e usate il
pannello Fill per aggiungere una sfumatura. Disegnate
un altro rettangolo largo quanto lo schermo e
impostate l’altezza su 198px. Rendete trasparente lo
sfondo e ripetete l’immagine ‘pattern.png’, come
mostrato in figura. Ora usate File>Place per aggiungere
le grafiche da ‘small1.jpg’ a ‘small3.jpg’ su un’unica riga.

13 Pulizia
Sotto le immagini abbiamo aggiunto del testo
con lo strumento Text e una miniatura, chiamata ‘cam.
jpg’, presa dalla cartella Assets. Nel footer è presente una
piccola barra bianca, quindi selezionate la modalità Plan.
Premete Ctrl+clic con il tasto destro sulla pagina master,
duplicatela e chiamatela ‘B-Master’, quindi fate doppio
clic su di essa per modificarla.

14 Applicare il template
Nell’immagine del footer impostate
l’opzione per il colore di sfondo sullo stesso blu del
riquadro sulla homepage (potete copiare e incollare
il codice esadecimale). Ritornate alla vista Plan e
Aggiornare le risorse trascinate la pagina B-Master sulla homepage per
cambiarla. Come si può notare, questa operazione
Uno dei principali problemi nella serve a creare una serie di template.
creazione di siti è quello di cambiare
un’immagine. Solitamente questa
operazione richiede l’apertura di
Photoshop, la modifica dell’immagine e
il salvataggio. Questo processo resta lo
Pagine master
stesso quando lavorate con Muse, ma
Le pagine master
questa applicazione offre qualcosa di
provengono da Adobe
veramente straordinario. Normalmente,
InDesign e non sono così
quando salvate un’immagine essa viene
familiari nel mondo del
automaticamente aggiornata e questa
web. Pensate a esse
opzione è perfetta finché non cambiate
come a pagine
la dimensione della grafica: a quel punto
‘template’ senza
dovete ridimensionare manualmente o
contenuti.
cancellare l’immagine e reimportarla. In
Muse, invece, tutto ciò che dovete fare è
aprire il pannello Assets e premere 15 Ultimi perfezionamenti
Ctrl+clic con il tasto destro Se ora ritornate sulla homepage
sull’immagine, quindi scegliere Relink vedrete che alla fine della pagina master è stato
All Instances. Magicamente l’intero sito applicato un blu uniforme. Noi abbiamo
viene aggiornato con l’immagine aggiunto anche alcune immagini della cartella
appena ridimensionata. Muse può far Assets; potete inserire le stesse o altre di vostra
discutere nel mondo del web design, ma scelta, oppure leggere il prossimo passaggio e
questa funzione è davvero straordinaria! creare le pagine rimanenti.

66t��������������������������������������������� tutorial
 <Tutorial>
Realizzare fantastici siti web con la suite Muse di Adobe

16 Inserire una lightbox 17 Ancora immagini

Fate doppio clic sulla pagina Portfolio nella vista Plan per
aprirla. Aggiungete ora una lightbox selezionando Object>Insert
Composition. La pagina non si ingrandirà per ospitarla, quindi fate
clic sulla freccia blu e impostate Position su Stacked. Ora la pagina si
espande per contenere le immagini. Selezionate File>Place e
importate l’immagine ‘lightbox1.jpg’.
Fate clic nella lightbox per aggiungere
l’immagine, che viene inserita dietro la grafica
corrente. Fate clic finché verrà selezionata la prima
immagine e cancellatela per far apparire la vostra. Ora
selezionate la seconda miniatura e ripetete il processo,
aggiungendo ‘lightbox2.jpg’ e ‘lightbox3.jpg’.

18 Applicare le
miniature
Fate clic sulla prima miniatura e osservate il
pannello Fill. Cercate la grafica ‘thumb1.
jpg’ e impostatela come riempimento.
Ripetete il processo per le altre miniature.
A questo punto, potete aggiungere un
testo descrittivo e un titolo per la pagina, o
qualche altro tocco elegante.

19 Pagina dei contatti

Aprite la pagina Contact facendo clic sull’icona
Page nella vista Plan. Selezionate Object>Insert HTML.
Nella finestra che appare aggiungete la vostra mappa
Google o copiate ‘html.txt’ dalla cartella Assets e
incollatelo. Potete allo stesso modo aggiungere un
video YouTube o qualcosa di simile.

20 Far apparire
la mappa
Dopo aver fatto clic su OK, la
mappa viene caricata in una
miniatura e, quando fate clic
sulla pagina, apparirà a
dimensione reale. Noi la
abbiamo completata con un
paio di riquadri di testo e
un’immagine. Salvate il
lavoro con File>Save.

21 Pubblicare l’HTML
Selezionate File>Export as HTML. Vi verrà
chiesto dove desiderate esportare il lavoro. Scegliete
una cartella dedicata a questo progetto. Esportate i
file e decidete se volete visualizzare il sito; fate clic sul
pulsante e il sito verrà automaticamente caricato nel
vostro browser predefinito.

tutorial______________________________________________ 67
 <Tutorial>

Web Workshop
1
Sequenze video HTML5 DA NON PERDERE
Motion graphic
a tutto schermo Osservando il video introduttivo
del sito The Bullitt Agency
possiamo imparare molto.
Fonte: www.thebullittagency.com Innanzitutto la mancanza di

N
colore, importante dal punto di
on c’è niente di nuovo un pubblico di destinazione con vista della compressione. Meno
in un sito che offre abbastanza soldi da acquistare un colori ci sono, più può essere
video a tutto tablet fa gola a qualsiasi ufficio compresso il video, e ovviamente
schermo; va però marketing! Il sito web The Bullitt questo fattore è fondamentale per
sottolineato il fatto Agency esiste ormai da un po’ di evitare che gli utenti attendano
che molti dei nuovi tempo, e sembra che sia stato lui a troppo tempo e abbandonino il
siti web di questo tipo lanciare questa moda. Possiamo anche sito. Il secondo punto è la natura
si avvalgono di video quasi affermare che il team ispiratrice del video stesso. Non è
HTML5, che prendono spunto dai ha realizzato sequenze una semplice ripresa fatta con il
Pro e contro
coinvolgenti esempi Flash ma che introduttive telefonino di qualcuno. Si tratta di
dei video HTML5
possono essere visualizzati su ‘accettabili’, una Il rovescio della medaglia nell’uso di video
diverse immagini messe insieme a
qualsiasi dispositivo portatile. m o s s a HTML5 è che occorre codificare il video tre formare un’animazione, integrata
Questo è ovviamente il fattore chiave azzardata ma volte, rispetto a un plug-in che richiede con del testo. Questa tecnica è
per molti siti web di tipo promozionale: vincente. un’unica codifica. Tuttavia, la maggior parte conosciuta come motion graphic.
dei clienti è disposta a pagare un lavoro extra
sapendo che il video è visibile su una vasta
gamma di dispositivi moderni.
Precaricatore
Un precaricatore
consente di caricare il
sito e il video prima che
parta la riproduzione
del filmato. Esso

1
contiene un’immagine
in movimento che
permette agli utenti di
visualizzare i progressi
durante l’attesa.

3 Salta sempre
Si pensava che Skip
intro appartenesse
ormai alla storia, invece
questa opzione è rinata
e in questo caso offre ai
visitatori più assidui la
possibilità di passare
direttamente ai
contenuti.

Pochi colori
Una palette dei colori
limitata consente di
comprimere meglio il
video, che di conseguenza
viene caricato più
velocemente.
2 Adattamento alla
finestra
Il video si ridimensiona
per riempire la finestra
del browser così che
l’utente si immerga
completamente
nell’esperienza video;
anche senza un plug-in
Attirare l’attenzione Ottimizzare gli spazi
questo video è visibile
Video ispiratori in stile motion Oltre al fatto che il video è a tutto
su tablet e browser
graphic arricchiscono schermo, il contenuto è stato
moderni.
l’esperienza. Se dovete usare progettato tenendo conto della
un’introduzione, assicuratevi che dimensione del browser; di
faccia una buona impressione sul conseguenza nel design non
pubblico. appaiono pannelli vuoti.

68 _______________________________________ web workshop


Riproduzione su dispositivi diversi
“L’uso nel sito di video a tutto schermo è importante per la user experience
e per questo motivo i designer, Dilshan Arukatti e Sylvain Tran, non hanno
voluto escludere i visitatori che usano un determinato tablet. Di
<Commento> conseguenza, per assicurare un’esperienza a 360 gradi su tutte le
Gli esperti
dicono la loro piattaforme e a tutti i visitatori, nel sito hanno scelto di usare video HTML5.”
su questo sito Mark Shufflebottom, www.webspaceinvader.com
2 TECNICA Video HTML5 a tutto schermo
01 Usare jQuery per il
ridimensionamento
Per gestire il video e il suo ridimensionamento useremo un
plug-in per jQuery. Scaricatelo da http://syddev.com/
jquery.videoBG. Aprite Dreamweaver e create una nuova
pagina HTML5. Aggiungete il seguente tag div alla sezione
body del sito. Esso conterrà il video HTML5 a tutto
schermo; per fare in modo che riempia la finestra del
browser useremo i CSS.
001 <div id="fullBrowser"></div>
02 Impostare la pagina
Ora aggiungete alla sezione head della pagina
web il seguente codice CSS, che indica ai tag html e body
di riempire completamente in altezza la finestra del
browser. È una parte importante per fare in modo che il
tag div riempia la finestra del browser. Successivamente la
sezione body viene impostata così che abbia un margine
di 0 pixel e il nero come colore di sfondo.
001 <style type="text/css">
002 html, body {
003 height: 100%;
004 }
005 body {
006 margin: 0px;
007 background-color: #000;
008 }
03 Estendere il div
Qui il CSS si rivolge direttamente al tag div creato
nel passaggio 1. Viene indicato che deve avere un’altezza
Tecnica
Il video viene riprodotto nel browser a tutto
schermo e viene usato come elemento di
sfondo per il div: in questo modo il contenuto
può essere facilmente visualizzato sopra.
<Tutorial>
Sequenze video HTML5 a tutto schermo
3 TECNICA
Convertire il video
Uno dei principali problemi dei professionisti
del web è convertire i video nei formati
HTML5 necessari. MP4, Ogg Theora e WebM
sono i più importanti; ecco uno strumento
che consente la conversione.
minima corrispondente all’altezza della finestra del
browser e una larghezza tale da riempire la finestra del
browser. Il passo successivo consiste nell’assicurarsi che
venga nascosta qualsiasi eccedenza; in questo modo si
evita che in alcuni browser appaia una barra di
scorrimento che potrebbe rovinare l’esperienza
coinvolgente. 01 Recuperare il convertitore
Per convertire un video nei diversi
001 #fullBrowser { formati serve uno strumento adatto allo scopo
002 min-height: 100%; e fortunatamente Miro Video Converter è
003 width: 100%; disponibile sia per Mac che per PC (www.
004 overflow: hidden; mirovideoconverter.com). Entrate nel sito e
005 } scaricate il software per la vostra piattaforma.
006 </style>
04 Collegamento a JavaScript
Subito sotto il CSS nella sezione head, eseguite un
collegamento all’ultima versione di jQuery e al plug-in
video di jQuery. Consentirete così al plug-in di funzionare
e, di conseguenza, di caricare il video. I tag script vuoti
servono per inserire il codice nel prossimo passaggio.
001 <script type="text/javascript"
src="http://code.jquery.com/jquery-
1.6.4.min.js"></script>
002 <script type="text/javascript" 02 Scegliere il video
Dopo aver scaricato il software,
src="jquery.videoBG.js"></script> installatelo sul vostro computer. Lanciate il
003 <script> programma e apparirà una piccola finestra per
004 </script> l’app. Basta trascinare nel pannello centrale il
video che volete convertire.
05 Caricare il video
Per caricare il video nel tag div fullBrowser
aggiungete il codice seguente tra i tag script. Da notare i
tre diversi codec video per i differenti browser HTML5. È
anche presente un’immagine poster utile per i browser
più vecchi che non supportano i video HTML5. Salvate la
pagina; ora il vostro video dovrebbe apparire a tutto
schermo.
001 $(document).ready(function() {
002 mp4:'assets/intro.mp4',
003 ogv:'assets/intro.ogv',
004 webm:'assets/intro.webm',
03 Convertire il video
Nel menu a comparsa spostatevi in
005 poster:'assets/intro.jpg', basso e, in Other Devices and Formats, vedrete
006 scale:true, le opzioni MP4, Theora e WebM. Sceglietene
007 zIndex:0 una e premete il pulsante Convert. Ripetete
008 }); questo passaggio finché avete convertito il
009 }) video in tutti gli altri formati.
web workshop ______________________________________ 69
 <Tutorial>

Web Workshop
Stili cartoon per il web
Fonte: www.yipori.com

L
o stile cartoon per il web è
stato caldeggiato a lungo,
soprattutto nel settore
commerciale, oltre che da
chi cerca di alleggerire la
propria immagine
aziendale attraverso
immagini divertenti e da
chi desidera intrattenere un
pubblico giovane. Chris Alexander,
autore e proprietario del sito www.
yipori.com, è un perfetto esempio di
designer che ha voluto massimizzare
l’aspetto del suo sito attraverso questo
stile. Ha anche ricevuto diversi
riconoscimenti per il suo lavoro, come ci
spiega: “Sono molto felice di aver vinto
dei premi per il mio sito. Grazie alla sua
natura grafica, i CSS usati per alcuni
elementi del sito, come l’header, sono
limitati. Ma io adoro la flessibilità dei
CSS, che mi hanno aiutato a fare in
modo che il mio sito fosse originale, con
elementi come il footer composto da
nuvole che si sovrappongono.” Profondità
Alexander ritiene che i design web in Il design dei personaggi
stile cartoon siano attraenti perché si e gli stili illustrativi
differenziano dai soliti layout basati solitamente sono
bidimensionali. È
sulla griglia. “Sono estremamente
possibile dare maggiore
diversi dalla moltitudine di design profondità attraverso i
presente sul web,” continua. “Penso gradienti.
anche che l’inserimento in un sito di una
“mascotte” possa conferirgli un aspetto
più amichevole e umano e fornirvi un
motivo per essere ricordati.” Quando si
tratta di scelta dei colori, non si può
certo affermare che il suo lavoro manchi
di coraggio: la palette dei colori è
composta principalmente da toni Testo
Il testo caratterizzato dal
brillanti, smorzati da determinati font Arial standard
elementi. Come spiega Alexander: “Ho mescolato a uno stile
inserito numerosi colori accesi, quindi scritto a mano crea un
per non eccedere tutti gli elementi di senso di coerenza con i
vari personaggi illustrati.
sfondo sono leggermente più spenti e
usano colori naturali come il marrone,
mentre le voci di menu e i riquadri dei
contenuti hanno colori più saturi come
il rosa.”

Influenze CSS

2
Le immagini
“Ritengo che l’era dei giochi per computer a 16 bit abbia avuto una “pesanti” vengono
grande influenza, dal momento che tutto era caratterizzato da colori alleggerite da uno o
brillanti saturi. Adoro la vivacità di quegli elementi ed è qualcosa che due elementi CSS,
come il footer
cerco sempre di riproporre in tutti i miei design. Per quanto mi riguarda, composto da nuvole
<Commento> altre influenze provengono dal Giappone e da ciò che viene e l’header con nuvole
Gli esperti
dicono la loro su solitamente identificato come stile kawaii.” in movimento.
questo sito Chris Alexander, www.yipori.com

1 TECNICA
Da immagine
a cartone
I filtri di Photoshop offrono modi divertenti
per aggiungere effetti di stile. Molti
simulano i media tradizionali, e alcuni
possono anche essere mescolati per 01 Contorni poster 02 Filtro Effetto ritaglio 03 Migliorie
ottenere effetti più avanzati. Dal momento Posizioniamo per prima cosa Duplicate il livello e selezionate Per massimizzare l’effetto potete
che qui siamo alla ricerca di stili illustrativi, l’effetto di base attraverso l’opzione Filtro>Artistico>Effetto ritaglio. Anche eseguire varie modifiche: ridurre
il set di filtri Artistico offre tutto ciò di cui Contorni poster, reperibile nel menu questo filtro dispone di diversi l’opacità per rendere più nitidi i dettagli
abbiamo bisogno per prendere una Filtro>Artistico. Ciò che otterrete dalle indicatori. I valori specifici da applicare del bordo e/o applicare un livello di
fotografia e trasformarla in un cartone, che impostazioni sono bordi ben definiti dipendono dalla tonalità del vostro regolazione Luminosità/Contrasto, con
può poi essere ritagliato e usato come che separano i colori dello sfondo da modello, ma dovreste cercare di creare la Luminosità impostata su 10 e il
elemento nei vostri progetti di design. quelli della pelle. blocchi di colore. Contrasto su 30.

70 _______________________________________ web workshop

 <Tutorial>
Stili cartoon per il web

Pubblico
3 TECNICA
Uno stile cartoon si
può rivolgere a un
Set di strumenti
1 cartoon
pubblico più giovane,
ma può anche
Se volete ricreare personaggi vettoriali simili a
“alleggerire”
l’immagine di quelli del sito Yipori, Photoshop offre alcune
un’azienda, facendola funzioni adatte allo scopo che vi consentono di
apparire meno austera ottenere una figura carina e adorabile e allo
e più affidabile. Non stesso tempo mantenere l’usabilità.
esagerate però, vi
accorgerete subito se
il vostro marchio avrà
successo.

Colore

3
In questo sito non ci
sono limiti
all’applicazione del
colore e delle forme; 01 Strumenti Forma e Penna
l’obiettivo è quello di La Penna può essere applicata a forme
divertire e creare un specifiche con curve di Bezier e bordi uniformi,
senso di nostalgia. mentre Forma consente un ridimensionamento
rapido e facilita la modifica dei colori. Potete
anche creare i contorni con le maschere. Entrambi
offrono un modo semplice per realizzare forme
elementari per personaggi dalla forma mutevole.

Niente sorprese
Il sito di Alexander
presenta una versione
interattiva dei suoi lavori.
Questo significa che non
appena entrate nella
homepage vi fate subito
un’idea del contenuto
del sito.
02 Stili di livello
Si possono applicare ai livelli Forma dalle
opzioni di fusione della palette Livelli. I comandi
più adatti sono: Sovrapposizione sfumatura, che
crea una leggera ombra se viene impostato uno
stile da primo piano a trasparente con un valore di
opacità basso, e Traccia che aggiunge un sottile
contorno al personaggio i cui livelli sono stati uniti.

2 RISORSE
ToonIt! Photo
Se siete alla ricerca di un modo veloce per creare
stili cartoon con immagini stock, Digital Anarchy
offre il plug-in ToonIt!. Il programma lavora con
Photoshop (con una compatibilità retroattiva
fino alla versione 7), PS Elements e Aperture, e 03 Oggetti avanzati
consente agli artisti di evitare l’uso di tecniche Selezionando tutti i livelli potete premere
che richiedono tempo come l’applicazione Ctrl/clic con il tasto destro su un livello e
manuale dei colori e delle maschere. Lavorando selezionare Converti in oggetto avanzato. Potete
principalmente con un effetto cel-shaded, i suoi ridimensionare così un personaggio senza
controlli facilitano la personalizzazione con stili perdere informazioni sui pixel, mantenendo tutti i
di colore diversi, ombreggiature e molto altro. dettagli. Se in qualsiasi momento dovete eseguire
Prima dell’acquisto potete scaricare una demo qualche cambiamento, il nuovo livello unito può
gratuita da www.digitalanarchy.com. essere modificato.

web workshop ______________________________________ 71

 Web designer si diventa...
non perdere nessun numero di
IN OMAGGIO PER

12
NUMERI DELLA TUA
RIVISTA PREFERITA TUTTI GLI ABBONATI
PER TUTTI COLORO CHE

A SOLI 67,00 SOTTOSCRIVERANNO L’ABBONAMENTO

UN PRATICO MOUSEPAD
anzich 84,00 DAL DESIGN ORIGINALE FIRMATO
TUCANO

ABBONATI SUBITO!!
Non perdere questa straordinaria offerta!

Tappetini per il mouse di alta qualità realizzati con

superficie scorrevole e base in gomma antisdrucciolo

IN PIÙ PER TE
2 NUMERI DI
PHOTOSHOP
MAGAZINE
 u e sta st ra o rd in a ri a o cc asi o n e
Non perdere q
FATTI UN REGALO CHE DURA UN ANNO!
PREZZO BLOCCATO PER UN ANNO: ABBONARSI È SEMPLICE:
Compila in maniera leggibile e in ogni sua parte il coupon sottostante e spediscilo
pagando solo € 67,00 hai diritto a: Diffusione Editoriale Srl – Via Raffaele De Cesare 88 – 00179 ROMA
a ricevere 12 numeri della rivista senza
dover pagare più nulla. Questo significa Effettua il pagamento scegliendo tra le diverse modalità:
Versamento sul conto corrente postale n. 80721178 intestato
che il prezzo della rivista resterà a Diffusione Editoriale – Via Raffaele De Cesare 88 – 00179 ROMA
bloccato per un anno senza alcun specificando la causale “abbonamento Web Designer” da allegare
all’invio del coupon sottostante.
rischio di aumenti
Direttamente sul sito www.abbonatiweb.it
LA COMODITÀ DI RICEVERE Bonifico bancario IBAN IT90V0760103200000080721178
intestato a Diffusione Editoriale.
LA RIVISTA DIRETTAMENTE Ricevi la prima copia e poi paghi.
A CASA TUA: ogni mese, per un intero
Spedisci il coupon in busta chiusa e la copia del versamento a:
anno, riceverai direttamente a casa Diffusione Editoriale Srl - Via Raffaele De Cesare 88 – 00179 ROMA
la tua rivista preferita Oppure invia un fax al numero 06.78.26.604
o una mail ad abbonamenti@diffusioneeditoriale.it
NESSUN NUMERO PERSO:
con l’abbonamento hai la sicurezza Per ulteriori informazioni chiama i numeri
06.78.14.73.11 / 06.78.02.017
di ricevere tutte le copie che usciranno o invia una mail ad abbonamenti@diffusioneeditoriale.it
nel corso dell’anno
Per assicurarti il mousepad della collezione Tucano e i 2 numeri di Photoshop Magazine ricordati di compilare il coupon e di spedirlo assieme al pagamento di € 67,00

WEB DESIGNER 56
Offerta valida solo per l’Italia fino
ad esaurimento scorte

Scelgo di abbonarmi a Web Designer Magazine a soli ¤ 67,00 Scelgo di regalare l'abbonamento a Web Designer a:
(12 numeri della rivista e in regalo il mousepad Tucano + 2 numeri di Photoshop Magazine) (allegare copia del versamento)

I MIEI DATI: I DATI DEL BENEFICIARIO DELL'ABBONAMENTO:

Nome Nome

Cognome Cognome

Indirizzo Indirizzo

Località Località

Cap Prov. Cap Prov.

Tel. E-mail Tel. E-mail

Ti preghiamo di scrivere i tuoi dati in modo chiaro, possibilmente in stampatello

Scelgo di pagare con:

Versamento su CCP (allegare copia del versamento)
Bonifico bancario (allegare copia del versamento)
Bollettino di CCP che mi invierete allegato alla prima copia (opzione non valida in caso di abbonamento regalo)
INFORMATIVA E CONSENSO EX ART. 13 E 23 D.LGS 196/03 - La informiamo che i Suoi dati personali saranno da noi trattati manualmente e con mezzi informatici per finalità di: a) gestione organizzativa delle consegne
a domicilio del prodotto da Lei richiesto; b) marketing, attività promozionali, invio di materiale informativo e rilevazione del grado di soddisfazione della clientela da parte del Titolare dei dati: Play Media Company Srl.
Per le operazioni di mailing e di spedizione i dati potranno essere comunicati a società esterne incaricate dell’organizzazione delle spedizioni. I dati non saranno diffusi. Infine, Le ricordiamo che per maggiori informazioni o richieste
specifiche ex art. 7 (cancellazione, blocco, aggiornamento, rettifica, integrazione dei dati od opposizione al trattamento), potrà rivolgersi al Responsabile del Trattamento, scrivendo a Diffusione Editoriale Srl, Via Raffaele De Cesare 88,
00179 ROMA. Acconsento che i dati vengano messi a disposizione anche di altre società e avrò quindi l’opportunità di ricevere ulteriori vantaggiose offerte e informazioni commerciali.
 Menu di navigazione
Riuscire a orientarsi in un sito è fondamentale per il
suo successo. Abbiamo scelto alcuni esempi che
non solo sono funzionali, ma anche molto belli

74d����������������������������������������� design cloud

 <design cloud>
Menu di navigazione

01 02 03 Pagina di sinistra 13 14 15 Pagina di destra

1. www.veer.com 7. http://tntrailsandbyways.com 13. www.starbucks.com 19. www.transformology.com
04 05 06 16 17 18
2. www.wards-exchange.co.uk 8. www.smallstone.com 14. www.alexbuga.com/v9/#welcome 20. http://acko.net
3. http://onebuttonmouse.com 9. www.typejockeys.com 15. www.carls.no 21. www.deepfocus.net
07 08 09 19 20 21
4. www.blurgame.com 10. revolutiondrivingtuition.co.uk 16. http://spacecollective.org 22. www.rubytuesday.com
5. www.utah.travel 11. www.two24studios.com 17. http://inkd.com 23. www.jeremylevine.com
10 11 12 22 23 24
6. donq.com/masterofallskills 12. http://grupowprojects.com/ 18. www.showandtellsale.com 24. http://oink.elrellano.com
slang/heroesdelring/site/es

design cloud_________________________________________ 75
<portfolio> In difesa di web designer

Elandré Franck
web www.incognitodesign.co.za
Impiego attuale Designer e sviluppatore web
Istruzione Diploma in Graphic Design, master in Graphic
Design e diploma in Web Scripting
Competenze Photoshop, Illustrator, InDesign, After Effects,
Dreamweaver, HTML, CSS, JavaScript, WordPress,
marketing online
Clienti Stellenbosch University, Ryk Neethling
Swimming Academy, Emerald Outdoor
Advertising, Blinds & Bespoke, Metal Works
Twitter @IncognitoDS

Elandré Franck è un graphic e web ispirare e insegnare ad altri. Mi piace

designer, sviluppatore web e artista
digitale del Sud Africa. Adora
l’eleganza, il design innovativo e ama
creare esperienze web indimenticabili.
“Ho sempre apprezzato l’eleganza e il
design innovativo. Portarli sul web mi ha
permesso di migliorare come designer e
di creare qualcosa che funziona e che
lega il pubblico,” commenta. Il design e
lo sviluppo web hanno allargato i suoi
orizzonti e hanno spinto Elandré a
realizzare design straordinari, user
friendly accattivanti ed estremamente
pratici. “Poter trasformare i miei design
in esperienze web completamente
funzionali mi rende felice e mi ripaga
delle ore di lavoro spese. Adoro il fatto
che l’industria del web sia in continua
evoluzione; c’è sempre qualcosa di
nuovo da imparare, che mi permette di
creare design fuori dagli schemi e
trasformare un’idea ordinaria in
qualcosa di indimenticabile.”
Come figlia di diplomatici, Elandré ha
vissuto e viaggiato in tutto il mondo,
incontrato persone incredibili e visitato
luoghi incantevoli. Le sue spedizioni
intorno al mondo e i suoi soggiorni a
Londra e Parigi hanno influenzato il suo
lavoro e le consentono di affrontare
ogni nuovo progetto in modo diverso,
soddisfando i requisiti unici e
accontentando i clienti che di
conseguenza le commissionano altri
lavori. “Il web connette persone di tutto
il mondo. Il nostro lavoro come designer
e sviluppatori può essere visto da
milioni di persone; se si divertono è un
lavoro ben fatto [per quello che mi
riguarda].”

03 www.emeraldblinds.co.za
01 www.incognitodesign.co.za 02 www.evelynnefranck.co.za

01
Incognito Design Studio è il portfolio online di Elandré e
mostra i suoi lavori e i servizi che offre, consentendo ai
visitatori di sperimentare il suo stile di design unico.
02
Evelynne Franck è un’artista esperta in vari metodi di
pittura. Il sito offre una collezione di lavori originali come
parte del design, per mostrare il suo talento.
03
Questo sito mescola diversi elementi naturali,
sottolineando l’aspetto di vita all’aperto e
conferendo a prodotti e servizi di Emerald Outdoor
Blinds un tocco di freschezza.

76p�������������������������������������������� portfolio
talentuosi, indipendenti e prolifici portfolio

Andreas Shabelnikov
web www.andreasworks.com
I mpiego attuale Web designer e art director
Istruzione -
Competenze Photoshop, HTML, CSS, Flash, WordPress, design di
marchi
Clienti Saatchi & Saatchi, BBDO, Bacardi, Warner Bros,
Paramount Pictures, Universal e Disney
Twitter @ashabelnikov

01 www.apeswillrise.com
02 http://disney.go.com/disneypictures/marsneedsmoms
Nato in USSR e cresciuto in Lettonia,
Andreas ha iniziato a lavorare con
marchi famosi in giovane età. Essendo
uno dei primi web designer dell’Europa
dell’Est, ha acquisito lavori per aziende
americane ed europee. Andreas ha lavorato
con Saatchi & Saatchi e BBDO e ha lanciato
progetti interattivi per Bacardi, Warner Bros,
NBC, Universal, Paramount Pictures, 20th
Century Fox e Disney. Le sue interviste e i
suoi design sono stati pubblicati nelle
riviste di tutto il mondo. Ha anche lavorato
come art director in una delle principali
agenzie digitali di Mosca e ha partecipato
con successo a campagne di marketing per
diverse pop star russe. La sua ricetta per il
successo consiste nell’alternare periodi di
lavoro a momenti di riposo. Dopo aver
passato diverse ore al computer si avverte la
necessità di uscire: fare una passeggiata in
riva al mare, andare a cena con gli amici o
fare un po’ di sport. Trae ispirazione da
qualsiasi cosa: scatti fotografici casuali,
persone belle, film nuovi e classici, libri, città
e paesaggi mozzafiato. Come libero
professionista, Andreas si sente libero di
esprimere qualunque idea creativa o
inaspettata: un grande vantaggio per
restare indipendente. Tuttavia, ogni giorno
esplora nuove tecniche usate nell’industria
web. Blog e forum che parlano di creatività
e vengono costantemente aggiornati sono
una fonte preziosa per restare al passo con
le ultime tendenze.

03 www.bacardi.com/#/us/enus/originalmojito

04 www.universalpictures.com/devil/main.html
05 www.thelastairbendermovie.com

01
Rise of the Planet of the Apes. Ad
Andreas piaceva l’idea dell’occhio
di scimmia che guarda gli utenti. Il
menu è sempre in movimento.
02
Mars Needs Moms. E’ una
animazione digitale e i
personaggi sono eroi 3D che
aiutano a navigare nel sito.
03
Lo stile aziendale di questo
marchio è stato seguito con cura
e l’obiettivo è far assaporare il
gusto della bevanda rinfrescante.
04
Devil. Il concetto di questo sito
web si basa sul modello 3D di un
ascensore. Creato partendo da
bozzetti forniti dalla Universal.
05
Il giovane Avatar è in missione per
unire i quattro elementi. Per
illustrare l’esperienza online, il sito
usa l’idea delle quattro nazioni.

portfolio____________________________________________ 77
 TREND MAP
Le capitali mondiali del web design
Milano
La città in cui la moda non è tutto
5 1
4

2 3

Crocevia internazionale della

creatività, Milano è il motore
1 Mutado
dell’economia italiana. Centro
urbano che attrae e integra
intelligenza, eccellenza
professionale e talento, Milano è
un marchio in sé: la vera capitale
del design. È una metropoli
all’avanguardia e piena di
energia, e le opportunità che
offre in una vasta gamma di
settori attraggono milioni di
persone ogni anno.
www.mutado.com
Mutado è un’agenzia digitale
indipendente che adora le cose
semplici. La nascita di Mutado, nel 2004, è
stata dettata dal desiderio di rompere gli
schemi e distaccarsi dai tradizionali modelli
gerarchici e strutturati della comunicazione
on e offline. Mutado mescola l’esperienza e
la passione dei suoi fondatori, design grafico
e tecnologia, con il know-how nel settore
marketing. L’agenzia si occupa
principalmente di web e progetti visuali e
oltre un anno fa ha istituito un intero team
dedicato esclusivamente allo sviluppo
mobile.

M ilano è una città bellissima, piena di

persone produttive e determinate,
forti e orgogliose di essere italiane; la
metropoli sa come apprezzare la bellezza
e il valore estetico è visibile nei suoi
angoli più nascosti. Milano è sempre
interessante, culturalmente ricca e ha
un’anima globale: un punto di riferimento
all’avanguardia per attività culturali e creative,
in particolare nel settore del design. La città
ospita diverse aziende, tra cui agenzie
pubblicitarie e web nazionali e internazionali
che hanno trasformato Milano in un punto di
riferimento per il settore creativo e digitale. La
metropoli attrae agenzie creative che offrono
prospettive di carriera e consentono a
chiunque di ritagliarsi uno spazio proprio,
anche se la competizione è accanita. È da qui
che partiremo per conoscere più a fondo
alcune delle agenzie indipendenti che hanno
scelto Milano come loro base.

78 ___________________________________________trend map
 <Trend Map>
Le capitali mondiali del web design

2 KarmaSolution
www.karmasolution.it
L’attività principale di
KarmaSolution è ascoltare il
web. Si occupa di analisi web e lavora
con i suoi clienti alla realizzazione di
obiettivi specifici per progetti
digitali. SocialKarma si dedica al
monitoraggio e al marketing dei
social media. L’azienda crede
nell’importanza delle analisi per
garantire ai suoi clienti un
rendimento di investimento.
3 Kettydo
www.kettydo.com
Kettydo è un’agenzia web e di
comunicazione digitale nata nel
2004 con l’obiettivo di fornire soluzioni
per problemi basati sulla comunicazione.
La società si approccia alla tecnologia con
una prospettiva umanistica, creando
strumenti mirati per progetti il cui scopo è
quello di migliorare la vita delle persone.
Kettydo è specializzata in identità ed
e-Commerce.

4 Mikamai
http://mikamai.com
5 COOKIES ADV
www.ibiscotticomunicano.com
Mikamai è più di Piccola agenzia di comunicazione con un lungo elenco
un’azienda, è un gruppo di clienti nazionali e internazionali. Agenzia atipica, con
di persone appassionate. Mikamai un’anima italiana, approccia la pubblicità in modo innovativo.
cerca di essere sempre Le campagne di COOKIES si basano su messaggi chiari ma non
all’avanguardia dal punto di vista banali. Il progetto migliore realizzato dall’agenzia riguarda la
della tecnologia e vanta una sfera sociale, a livello nazionale e internazionale.
grande esperienza nei seguenti
settori: sviluppo web, motori di
ricerca, comunicazione e finanza.
Il Salone del
Mobile di Milano
è un evento annuale
nel settore del design,
accompagnato da
eventi che si svolgono
in tutta la città.
LUOGHI DI INTERESSE DELLA CITTA’
Triennale Design Museum Castello Sforzesco 10 Corso Como
Un museo dedicato al design e Un insieme di musei ed edifici Un santuario per shopping,
alla cultura storici e artistici e scenari mozzafiato cucina italiana, arti e design
www.triennale.org www.milanocastello.it www.10corsocomo.com

Nata come vetrina per le arti industriali e Il Castello Sforzesco è probabilmente il simbolo Arti, moda, musica, design e cucina si incontrano
decorative moderne, la Triennale è un punto di più importante di Milano. Situato nel Parco nel cuore di Milano. Fondato nel 1990 in un
riferimento della cultura artistica e architettonica e Sempione, il parco più grande della città, è elegante cortile, 10 Corso Como è il luogo migliore
luogo di confronto delle tendenze emergenti. anche uno dei luoghi più belli da visitare. per fare shopping e scoprire nuove tendenze.

trend map __________________________________________ 79

<header>
Opinione Sul web
Migliorare
l’accessibilità
Mark è un web designer freelance, oltre che
Accessibility Consultant di User Vision Ltd.
Fervente sostenitore dei siti web
accessibili, tra i suoi clienti troviamo lo
Spartans Football Club e la Scottish
Federation of Coarse Fishing.
Accessibilità: un fattore complesso ma fondamentale
da non dimenticare mai
D
i recente, la consapevolezza sull’accessibilità è aumentata fino
al punto che sta iniziando a essere un requisito fondamentale
nello sviluppo di progetti web. Il livello di rispetto del requisito è
molto più alto di un tempo, e quasi tutti i progetti mirano ormai a raggiungere
il livello AA.
La maggior parte dei designer conosce bene il concetto di Web Content
Accessibility Guidelines (WCAG, linee guida per l’accessibilità dei contenuti
web), tuttavia, tali indicazioni sono solo una tessera nel puzzle dell’accessibilità.
Conoscere le WCAG è utile, ma esse non bastano a realizzare un sito web
completamente accessibile. Esamineremo qui i fattori chiave da prendere in
considerazione quando lavorate al sito di un cliente che desidera soddisfiate
il requisito di accessibilità.
Innanzitutto, seguite le WCAG ma non fatevi accecare da esse.
Personalmente, ho lavorato a progetti in cui gli sviluppatori coinvolti
ritenevano che accessibilità significava semplicemente ‘spuntare le caselle’ e
seguire ciascuna linea guida. È un inizio, ma le WCAG non valgono in tutti i
casi. Concentratevi sulla creazione di un sito usabile per le persone
diversamente abili e non sull’ottenimento di particolari livelli di supporto. Un
sito tecnicamente accessibile può seguire le WCAG, ma non garantisce
l’accesso ai disabili. È possibile realizzare una pagina di form che soddisfa tutti
i requisiti tecnici per la creazione di moduli accessibili, tuttavia se tale form
contiene 100 campi sulla stessa pagina, sarà certamente meno usabile dalle
persone con difficoltà a inserire dati.
Molte questioni come quella appena sottolineata potrebbero non essere
ovvie per un designer che non è diversamente abile. Ecco perché suggerisco
di eseguire diversi test con gli utenti disabili. Raggiungere una valutazione di
un sito web attraverso una combinazione di linee guida, strumenti
automatizzati e una perizia manuale è un passaggio che deve far parte del
processo di sviluppo, tuttavia non c’è cosa migliore che un test svolto
avvalendosi del pubblico di destinazione.
Molto spesso gli utenti disabili riscontrano difficoltà in aree del sito che,
secondo le valutazioni tecniche basate sulle linee guida, sono state
identificate come quelle meno problematiche. Per contro, le aree di
funzionalità che ritenevo potessero creare seri problemi sono state a mala
“ Designer e sviluppatori possono evitare gran parte delle barriere di
accessibilità fin dalla fase iniziale del design
80 ____________________________________________ opinione
Mark Palmer
pena considerate per il fatto che in passato avevano già incontrato tali
difficoltà e le avevano superate. Se possibile, eseguite i test con gli utenti
disabili a casa: in questo modo vi assicurate che i “collaudatori” si sentano a
proprio agio e che per affrontare i problemi riscontrati usino la tecnologia di
supporto preferita.
I test con gli utenti disabili sono una lezione in sé dal punto di vista della
tecnologia assistiva. Per sapere realmente come realizzare un sito
completamente accessibile, è importante raccogliere informazioni sul modo
in cui tali utenti accedono al web e di quali tecnologie assistive si avvalgono.
Sapere come funzionano queste tecnologie di supporto vi consentirà di
sviluppare siti adatti non solo a utenti che usano questi strumenti, ma anche
di sfruttare tutto il potenziale di tali strumenti. Lavorare con chi si avvale degli
screen reader vi permetterà di capire esattamente il suono di determinati
elementi quando vengono letti attraverso tali applicazioni. Analogamente, i
test con gli utenti di dispositivi di input alternativi evidenzierà immediatamente
i problemi specifici riscontrati quando interagiscono con un’interfaccia.
Designer e sviluppatori possono evitare gran parte delle barriere di
accessibilità se fin dalla fase iniziale del design prendono in considerazione
questo fattore. Prima di aprire un editor di codice, l’eliminazione di potenziali
problemi durante la fase di design consentirà di rendere il sito finale ancora
più accessibile. Un modulo di ricerca chiaro, con aree cliccabili dalle dimensioni
decenti e con collegamenti di testo sensati sono alcune delle cose che si
possono realizzare fin dall’inizio. Ancora meglio, all’inizio di qualsiasi progetto
va sfruttata l’opportunità di influenzare il cliente. Uno degli errori più comuni
che si commette rispetto all’accessibilità è uno scarso contrasto di colore tra
gli elementi dello sfondo e quelli in primo piano. Come designer, potete
suggerire da subito al cliente palette di colori più vivaci. Infine, tenetevi
aggiornati sui progressi eseguiti nel campo dell’accessibilità. Sono passati
dieci anni tra la versione 1 e la 2 delle WCAG e, nel frattempo, i metodi di
implementazione e di design sono cambiati. È importante tenere traccia dei
metodi più nuovi come l’impatto di HTML5 e dei CSS3 e i progressi delle
tecnologie assistive. Inoltre, accrescere il livello di consapevolezza all’interno
della vostra azienda significa che, quando i clienti chiedono una presenza
online accessibile, vi troverete in una posizione avvantaggiata.
”
PROSSIMO NUMERO

SCEGLIERE IL TEMA
WORDPRESS PERFETTO
UNO SPECIALE DI 15 PAGINE SU FRAMEWORK,
PERSONALIZZAZIONE E SCELTA DEL DESIGN
MIGLIORE PER I PROPRI CONTENUTI

E INOLTRE…
DART: Google reinventa JavaScript
Realizzare una galleria di immagini in stile Polaroid
Personalizzare i temi WordPress con i widget
Pubblicare sui dispositivi mobili con Dreamweaver e Flash

Web Designer 57 in edicola

il 15 Marzo
<Contenuti CD>
Nel CD Programmi e risorse gratuite per i vostri progetti:
ecco cosa contiene il CD di questo numero.

Pacchetto di texture grunge

FONTE: HTTP://ARSENAL.GOMEDIA.US
Il Grunge Texture Pack contiene 15 insolite texture grunge ad alta risoluzione, perfette
per gli sfondi e che conferiscono immediatamente alla pagina un tocco ‘metropolitano’.
Molte di queste texture sono il frutto dell’unione tra la corrosione caotica della natura e
l’organizzazione strutturale dell’essere umano, per un aspetto davvero unico.

16 “tatuaggi” vettoriali
FONTE: HTTP://ELEGANTSEAGULLS.COM
Questa collezione di 16 immagini vettoriali disegnate a mano in stile “tatuaggio” ci
vengono gentilmente offerte da Ben Premium, una divisione di Elegant Skulls. Tra
queste immagini troviamo una selezione di tatuaggi retro rappresentati da teschi,
tigri, navi e decorazioni ornamentali.

COME LANCIARE IL CD il programma, dovrete registrarvi presso l’autore. I programmi freeware

possono essere utilizzati senza nessun costo. Le versioni di prova dei software
Lanciare il CD sono limitate temporalmente o hanno alcune opzioni disattivate.
Le caratteristiche minime per lanciare il CD di WebDesigner Magazine sono una risoluzione
dello schermo di 800 x 600, 32 MB di RAM, colori a 16 bit, sistema operativo Windows 95/98/
Me, processore Pentium Intel o P166 compatibile. Raccomandiamo di chiudere tutte le
altre applicazioni quando si manda in esecuzione il CD. Il CD parte in autoesecuzione sotto Posta: Web Designer Magazine
Play Media Company
Windows 95/98. Se non avete l’autorun abilitato selezionate Esegui dal menu Start, quindi
Via di Santa Cornelia 5/A 00060 Formello (RM)
digitate d:/ WDM.exe (sostituendo “d” con la lettera del vostro lettore CD) e premete Invio.
E-mail: webdesigner@playmediacompany.it
Licenze
Sito Web : www.playmediacompany.it
Tutti i software del CD-ROM sono shareware. Questo significa che se intendete utilizzare

Effetto fuoco
Fonte: www.ultrashock.com
Questo file
sorgente Flash
davvero unico
offertoci da
Ultrashock
“accende” qualsiasi clip filmato statico
(contenente testo, loghi e/o immagini).
L’effetto può essere perfezionato e
personalizzato modificando il codice
ActionScript 3.
CD danneggiati
Se, acquistando la rivista, scoprite
che il CD è graffiato, presenta
imperfezioni o incrinature,
restituitelo a: Play Media
Company - Via di Santa Cornelia,
5/A - 00060 Formello (RM)
per una sostituzione gratuita.
Se il CD non è presente,
inviate un’email all’indirizzo
webdesigner@playmediacompany.it.
Ve ne verrà inviato uno
senza costi aggiuntivi.
SkyAlbum Photo
Gallery Builder
Software freeware di facile utilizzo che
consente di creare straordinarie gallerie
fotografiche Flash in pochi clic e di caricarle
sullo spazio web gratuito SkyAlbum.
Condividere le vostre fotografie con amici
e parenti non è mai stato così facile.
<Contenuti CD>
Programmi e molto altro...
Wijmo
Fonte: http://wijmo.com
Wijmo è una raccolta di widget che
non devono mai mancare nell’arsenale
di un designer: dai menu interattivi a
splendidi grafici. È così facile da usare
che con una sola riga di codice jQuery
potete realizzare un’interfaccia utente
interattiva.
Digital Scroller 1.0
L’applet Java Digital Scroller è gratuita
e può essere facilmente incorporata
nelle vostre pagine web. Controllata
dai parametri forniti dal documento
HTML, consente di visualizzare una
serie di messaggi, di controllare il
colore e la velocità di scorrimento e
molto altro.
Megafont Starter
Edition 2011
Questo set
completo
di font è
perfetto per
chiunque,
dagli utenti business agli amatori. Offre
infatti una vasta gamma di design di font
adatti a qualsiasi situazione e occasione.
Aiuto
Per assistenza nell’uso
del CD-ROM, potete inviare
un’email allo stesso indirizzo.
La Redazione non fornisce
assistenza per il software una volta
installato. Tutto il software viene
controllato affinché non presenti
virus. La Play Media Company
declina qualsiasi responsabilità
per perdite o danni causati
direttamente o indirettamente
dall’uso del presente CD-ROM.
File dei tutorial
Per seguire al meglio
i tutorial illustrati
in questo numero,
sono inclusi tutti
i file sorgente e
le risorse necessarie per poter fare
pratica e apprendere in poco tempo
tutte le tecniche spiegate.
 da tutto il mondo su www.iStockphoto.it
Scopri le immagini di oltre 100.000 artisti

I tuoi progetti creativi meritano la giusta ispirazione.

Cercala su iStockphoto tra milioni di foto, illustrazioni, video
e file audio di qualità, a prezzi accessibili.

iStockphoto.it