Sei sulla pagina 1di 84

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

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

Starter Edition 2011 42 JavaScript parte 2: array e funzioni


Effetto fuoco 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
In copertina 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

OR
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

I
navigazione elegante

64 Realizzare fantastici siti web con la


suite Muse di Adobe
Esaminiamo in dettaglio la beta per realizzare siti web

I Web workshop
Ricreare gli stili più trendy del web
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 68
copia di Web Designer in formato
digitale, puoi scaricare i file
necessari da Internet, a partire 68 Sequenze video HTML5 a tutto
dall’indirizzo: schermo
“http://bit.ly/webdescd”. Alcuni suggerimenti per creare esperienze
Questa pagina contiene i link per coinvolgenti ispirandoci al sito The Bullitt Agency
scaricare i file dei tutorial di ogni 76
singolo numero ed è costantemente Portfolio 70 Stili cartoon per il web
aggiornata con le nuove uscite. 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 linguaggio di programmazione che si va ad aggiungere a
algoritmi; tuttavia, offre un elenco di domande che indicano quelli già esistenti? Sono molte le alternative tra cui scegliere
come vengono scritti gli algoritmi che distinguono i siti di alta e, a meno che Dart non riesca a offrire qualcosa di veramente
qualità da quelli di livello inferiore (vedere box nella pagina unico, sembra che in futuro l’opzione più popolare sarà jQuery.
a fianco).

<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 stesso account. Se per esempio se devi sostituire il tuo
App Store l’applicazione per iPad Web iPad, potrai scaricare nuovamente i numeri già
Designer Magazine. L’app è gratuita e acquistati senza ulteriori addebiti.
permette di vedere un’anteprima di ogni
numero, che comprende sempre il Un nuovo modo di leggere
sommario con l’elenco di tutti gli articoli, Tutti i numeri acquistati saranno sempre disponibili sul
per avere un’idea dei contenuti prima di tuo iPad ogni volta che vorrai, per riempire un tempo di
acquistare il numero, a prezzo super attesa imprevisto o per avere sempre a portata di mano
scontato. Un numero della rivista costa un riferimento veloce alle tecniche spiegate sulla rivista.
infatti solo 2,99 euro. L’abbonamento per un anno (8 Puoi sfogliare la rivista in orizzontale (due pagine
numeri) costa 19,99 euro, mentre quello per sei mesi (4 affiancate) o in verticale (una sola pagina), zoomando
numeri) costa 9,99 euro. sui testi o sui particolari delle immagini con i gesti tipici
Gli acquisti si effettuano direttamente dall’applicazione dell’iPad. Dal menu in basso si può accedere a un scaricare liberamente i file dei tutorial dall’indirizzo:
attraverso il proprio account iTunes. Oltre a essere sommario testuale dei contenuti del numero, o a una http://bit.ly/WDtutorial
semplice e sicuro, permette quindi di trasferire i propri vista sulle miniature delle pagine, per trovare a colpo Gli accordi con sviluppatori dei software, texture, font e
acquisti anche su un altro dispositivo abbinato allo 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 Zinio.com EZ-Press UltimaKiosk
avere una copia della rivista Un’edicola che Una piattaforma Un’edicola virtuale che
anche sul tuo pc, Mac o su un distribuisce riviste da italiana che condivide la stessa
altro tipo di lettore? Nessun tutto il mondo. Permette di sfogliare vende riviste piattaforma dell’applicazione di Web
problema. Web Designer le riviste con un qualsiasi browser digitali in formato Pdf, compatibile Designer, e quindi gli anche gli
Magazine è infatti disponibile web che supporti Flash, oppure con i programmi e i dispositivi che acquisti effettuati, ma in cui troverete
anche su Windows, Mac, Linux, attraverso un’applicazione Adobe Air utilizzano il sistema di protezione anche le altre testate di Play Media
Android, Web OS e altri compatibile con Windows, Mac OS, Drm Adobe Digital Editions. Company e altri editori. Disponibile al
dispositivi compatibili con il Linux e Web OS. Esistono poi app Dispone anche di app specifiche momento solo per iPad, ma a breve
sistema Adobe Digital Editions. specifiche per Apple iPad e Android. per iPad e Android. compatibili con altri dispositivi.
Trovi tutte le opzioni su www. www.playedicola.it http://play.ezpress.it/ http://www.ultimakiosk.it
playedicola.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 <sopra>
• La sezione Media offre diverse pubblicità visibili su YouTube e interpretate da famosi comici • Il componente per la ricerca del ristorante è ben integrato nel sito e mostra che, quando vi trovate
hollywoodiani 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
Tecnologie di sviluppo JavaScript, Flash

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 anche senza Flash, ma il tempo e gli sforzi
Designer abbiamo necessari non sarebbero valsi la pena.
parlato del fatto che il Sarebbe stato un peccato lasciarsi sfuggire il
design basato su Flash risultato, che dimostra che è stato eseguito
potesse avere una un lavoro superlativo per consentire
seconda possibilità. all’utente di immergersi in un prodotto. <sopra>
Questo microsito Sfruttando il proprio istinto di fotografo per • Tamron Island è un lussureggiante ambiente
virtuale creato con straordinarie immagini 2D
promozionale realizzato esplorare e catturare, l’obiettivo è raccogliere e arricchito con piccoli spezzoni di animazione
dall’agenzia tedesca di scatti di un’isola esotica e guadagnare Flash

marketing interattivo abbastanza punti per poter vincere un <sotto>


• Con qualche semplice tecnica di animazione
Netzbewegung è un premio. Gli scenari sono ambienti 2D che il Flash, lo scorrimento parallasse e la cattura
degli input dell’utente, i designer hanno
esempio del nostro vostro avatar può attraversare muovendosi ideato un’esperienza estremamente
retaggio, e dimostra che è possibile definire con i tasti freccia, mentre il cursore agisce da coinvolgente
• Il sito vi invita a registrarvi a ogni accesso,
un’area del web design che mescola mirino della macchina fotografica. Un timer sebbene fortunatamente possiate anche
divertimento e pubblicità con risultati di e alcuni sfondi progettati in modo diabolico visualizzare i contenuti come ospite

grande effetto. Le agenzie sono ancora in rendono l’impresa ardua, tuttavia la sfida è
grado di sfornare questo tipo di esperienze assolutamente coinvolgente. Il concetto di
di intrattenimento in modo rapido e a costi base può non essere una novità, ma la
competitivi che riflettono la natura a buon perfetta esecuzione del lavoro Flash si sposa
mercato del contenuto. Si sarebbe potuto in modo straordinario con la composizione
realizzare qualcosa come Tamron Island grafica, e il risultato è magnifico.


Sfruttando il proprio istinto di
fotografo per esplorare e catturare,
l’obiettivo è raccogliere scatti di
un’isola esotica”
12w������������������������������������������ web gallery

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

Cronaca di un design___________________________________17
18 _____________________________________________speciale
C
i sforziamo sempre di distinguerci dagli altri, la user experience. Man mano che il tempo passa, sempre
Photoshop è dal modo di vestire al tipo di pizza che più persone stanno imparando a programmare e
l’elemento chiave ordiniamo. Vogliamo essere unici e vogliamo progettare, contribuendo così a rendere più ricco e

per la creazione di creare progetti che dimostrano chiaramente le nostre


capacità. I designer sono una specie rara per il fatto che
ampio il settore del web design. Anche se sono molte le
differenze tra graphic e web design, ciò che in pratica
temi di pagina sono preparati a lavorare molte ore per ottenere i risultati abbiamo sono due gruppi di persone che realizzano siti

superlativi e ad migliori, nella speranza di ricevere il massimo compenso


per i loro sforzi. A volte i desideri diventano realtà, ma
web. Cosa succede quindi quando questi due mondi
entrano in contatto e c’è un print designer che lavora su
elevato contenuto altre volte dobbiamo accettare la realtà. Tuttavia, come un sito web? Nella maggior parte dei casi non ci saranno

grafico. L’esperto esseri umani in un mondo dove i ruoli lavorativi sono


sconcertanti tanto quanto descrittivi, nel settore del
problemi, a meno che questa persona non sia tentata di
usare nel suo processo l’ultima applicazione di Adobe,
Radim Malinic ci design si respira un senso di cameratismo. Come lettori di Muse. La solida pratica di creare siti web di successo
fornisce una guida questa rivista, il vostro ruolo lavorativo potrebbe essere
‘web designer’ o ‘sviluppatore’. In questo caso, vi potete
deriva da una fusione tra software grafico e
programmazione HTML. Adobe, uno dei leader nei due
sulla teoria e gli considerare una di quelle persone appartenenti a un settori, offre diversi pacchetti software innovativi, che di
strumenti pratici gruppo in continua crescita di soggetti con la stessa
passione che potrebbero tranquillamente spuntare la
recente hanno celebrato il loro ventesimo anniversario.
Tutti i programmi di design introducono regolarmente
fondamentali per casella ‘bilingue’ sul Censimento, dal momento che aggiornamenti e nuove funzioni che aiutano gli utenti a
un processo di parlate fluentemente sia l’HTML che la vostra lingua trasformare le loro idee in realtà. Due dei programmi più

design completo. madre.


Altri lettori della rivista potrebbero appartenere al
importanti sono ovviamente Photoshop e Illustrator. Le
applicazioni lavorano in perfetta armonia, completandosi
settore del graphic design, da un mondo in cui presse da l’un l’altra e allo stesso tempo velocizzando il flusso di
stampa, inchiostro e carta giocano ancora un ruolo lavoro degli utenti. Anche se il mondo della stampa era il
fondamentale, insieme alla produzione digitale. Nei libri principale destinatario di queste due applicazioni, sono
di design di queste persone sono presenti capitoli che state rapidamente apprezzate e sfruttate anche dai web
spiegano come aggiungere margini extra ai documenti, designer.
colori Pantone specifici e altre magie che si possono Alcuni dei più staordinari siti presenti oggi sul web
ottenere solo con la stampa. Il settore del graphic design sono il risultato di una combinazione di Photoshop e
ha una storia molto vasta che dura da vari decenni e che HTML. Creare un sito da zero può sembrare un lavoro
ha assistito alla creazione di lavori mozzafiato. Per contro, spaventoso, che può diventare terrificante se si aggiunge
Internet e, come potete immaginare, il web design hanno Photoshop all’equazione, soprattutto se non avete
solo vent’anni di vita. Due decenni possono sembrare esperienza nel campo della programmazione. Le
un’eternità, ma alcuni dei principali progressi in questo prossime pagine vi forniranno un’introduzione a
settore sono stati fatti solo negli ultimi anni. Novità come Photoshop e vi illustreranno come sfruttare al massimo i
HTML5, CSS e WordPress hanno arricchito enormemente 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
Potete vedere gli esempi di design finale è assolutamente
di template realizzati da Radim e
riportati in queste pagine
fantastica, soprattutto
analizzando le risorse presenti sul in un momento in cui
CD o visitando le seguenti pagine: vengono immessi sul
http://sites.brandnu.co.uk/raw/test,
http://sites.brandnu.co.uk/raw/final
mercato ogni giorno
(fotografia del modello originale di nuovi dispositivi e
Nathalie Gordon) piattaforme”
Radim Malinic

speciale _____________________________________________19
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
www.charlescarterhair.com
vari concetti in Photoshop, prima che i file
occorre prendere in
Prima di iniziare a sviluppare un sito passassero allo sviluppo web
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
www.incrediblefta.com

vono trarre
Incredible FTA offre ai suoi clienti la possibilità

, da do v e de di fare acquisti sul sito, con una gamma di

template
sfondi diversi

r?
iniziale i designe
I creativi di qualsiasi tipo tendono a spingersi Dopo aver terminato il sito, dovrete bombardare il
oltre i confini del web design che conosciamo, web annunciando la notizia ovunque. Vorrete che tutti
sebbene in modi diversi. Qualsiasi idea o elemento vedano il vostro capolavoro, non perché vi siete limitati
insolito, indipendentemente dal fatto che provenga a mettere insieme un sito web ma perché avete
da un lavoro fatto 1.000 anni fa o ieri, può essere realizzato qualcosa di così diverso spinti dalla voglia di
ripresa da qualcun altro che si trova dall’altra parte del essere unici. Come sappiamo, durante il processo
pianeta e sviluppata ulteriormente. Non stiamo creativo alcuni clienti ce la metteranno tutta per
assolutamente incoraggiando nessuno a rubare le sabotare alcune delle vostre migliori idee, ma poi
idee degli altri; si tratta di partire da ciò di cui già lasceremo che siano loro a pagare il nostro caffè. Fa
disponiamo e aggiungere inventiva e personalità. tutto parte del gioco.
Tutti noi programmiamo nello stesso linguaggio e Cinque anni fa il settore creativo è stato testimone www.kokou.co.uk
tutti abbiamo una tastiera, un mouse e magari un 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
tablet. Photoshop è diventato una delle armi principali del qui per il marchio di hair technology Kokou
Nel senso più ampio, le regole sono uguali per design digitale e da allora conserva il suo primato.
tutti, quindi come mai i lavori realizzati sono così L’applicazione è stata la chiave per la nascita di nuove
diversi? Naturalmente, dipende tutto dalla singola idee innovative estremamente complesse. Anche i
persona. Non prendiamoci in giro, ci saranno sempre progressi dei linguaggi di programmazione hanno
lavori mediocri, siti web appariscenti e rozzi; che ci avuto la loro parte nel processo di evoluzione. Quando
piaccia o no, nessuno di noi può cambiare questo. ci troviamo davanti a una pagina (o pagina web) vuota,
Tuttavia, questa situazione fornisce un metro di possiamo riempirla con tutto ciò che abbiamo
misura per creare risultati unici che faranno la imparato dai nostri progetti precedenti. Ogni sito web
differenza. deve avere la sua identità e un aspetto unico. I migliori
I designer non si possono più nascondere dietro la uniscono elementi che normalmente non vengono
scusa che i loro clienti non hanno le idee chiare. associati alla complessità di un linguaggio di
Questa è la giustificazione di un designer senza programmazione. Dal punto di vista visivo, il design di
ispirazione che non sa produrre idee personali. Avete un sito può essere adattato così che sembri una scatola
mai sentito di una proposta di sito web fantastica ed di origami, un cartone del latte o un barattolo di
economica che è stata rifiutata dal cliente? Se non caramelle, o qualsiasi altra cosa. Alcuni dei siti web più
sforate il budget e presentate un progetto con uno interessanti usano invece idee insolite. Per esempio,
stile unico, tutti vincono. Ogni nuova commissione è una prospettiva fuori dall’ordinario o una profondità
un’opportunità per affinare le vostre abilità e venite tridimensionale possono avere successo se bilanciate
pagati per sedere alla vostra scrivania, bere ettolitri di correttamente con una gerarchia delle informazioni
caffè (naturalmente da includere nella vostra parcella) ben congegnata. Le opzioni sono virtualmente
e realizzare il miglior sito web della vostra vita. illimitate.

20 _____________________________________________speciale
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 È sempre consigliabile provare qualcosa prima di
numerosi elementi, colori e illustrazioni. Dovete renderla definitiva e questo vale soprattutto per le Area visibile
ricordare però che si tratta sempre di trovare il giusto immagini stock, che rappresentano la grande Se ignorate gli elementi esistenti dei pacchetti
compromesso tra una pagina non troppo vuota né maggioranza delle grafiche di un sito web. Un sito con preformattati e realizzate un sito web con un design
troppo piena. Può essere utile suddividere il lavoro in un tema richiede un’ampia collezione di elementi personalizzato, potete realmente avere un grande
fasi nel corso di qualche giorno. Per esempio, un’idea provenienti dalle librerie di immagini stock e questo impatto sui visitatori. Questa è una nuova forma di
che un giorno può sembrare fantastica potrebbe non significa spendere soldi. Prima di presentare al cliente la ribellione a un mondo pieno di template noiosi e
funzionare per niente il giorno dopo. Lo stesso vale proposta finanziaria finale, potete provare a lavorare ripetitivi. Quando realizzate un sito web da zero
per dimensionamento e posizionamento degli con le immagini composite, che possono essere completamente personalizzato, potete anche decidere
oggetti. Ricordatevi sempre del compromesso tra scaricate gratuitamente da qualsiasi libreria, anche se a come verranno formattati e visualizzati i contenuti. Una
contenuti scritti e immagini del sito. Quando lavorate bassa risoluzione. Raccogliete tutte le composizioni in delle regole principali da ricordare è assicurarvi che la
con i temi per blog, potete concentrarvi una cartella e poi trascinatele nel documento di navigazione principale sia visibile indipendentemente
principalmente sull’header del sito, inserendo poi Photoshop. In questo modo, oltre a risparmiare tempo dalla piattaforma di visualizzazione. Prima di passare al
qualche altro oggetto più in basso nella pagina. Il per la singola apertura di ciascuna immagine, il nome design finale, accertatevi di aver lavorato nell’area
tema può continuare nel footer, conferendo così al del file verrà automaticamente visualizzato nella palette visibile. Testate i mockup e visualizzateli su iPhone, iPad
design un aspetto più coerente. Livelli. Qui, potete decidere quali immagini tenere 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
modificato con lo strumento Selezione diretta e, come in come in Illustrator, si tratta di disegnare una selezione
Illustrator, è possibile aggiungere punti di ancoraggio dei punti di ancoraggio e delle linee vettoriali. L’opzione
supplementari per creare forme più elaborate. I livelli Curva di Bezier consente di disegnare nonostante una
Affinate le vostre tecniche forma possono anche essere copiati e incollati da scarsa presenza di punti di ancoraggio, eseguendo un
Illustrator, dove è più facile disegnare forme più tracciato intuitivo intorno alle linee curve. All’inizio può
complesse. risultare complesso, ma con un po’ di pratica la Penna
Oggetti vettoriali avanzati diventerà uno strumento indispensabile e affidabile. Da
Se non sapete come mantenere perfetti i vostri Metodi di fusione un contorno finito, eseguite una selezione e poi
elementi, soprattutto dopo averli ingranditi e La maggior parte dei siti web è bidimensionale, ma è applicate lo strumento Maschera veloce o create una
rimpiccioliti più volte, Photoshop vi offre la funzione molto semplice dare maggiore profondità a qualsiasi copia dell’oggetto selezionato.
Oggetti vettoriali avanzati. A causa della risoluzione layout. Non dovete essere un illustratore o un designer
predefinita a 72dpi per il web design, le immagini o gli esperto per creare ombre perfette e una prospettiva Ritocco rapido
elementi bitmap ritagliati perdono di qualità perché le tridimensionale. Quando applicate i metodi di fusione, Indipendentemente dalle vostre capacità di
informazioni sui pixel si riducono. Potete trasformare in potete separare ciascuna opzione dal livello principale realizzazione di un contorno, a volte un oggetto può
oggetto vettoriale avanzato qualunque elemento attraverso la funzione Crea livello. Nei casi in cui portarsi dietro dei colori provenienti dall’immagine
proveniente da Illustrator, oppure applicare la funzione desiderate aggiungere un’ombra allungata e sfumata, originale. Dipende praticamente tutto dallo sfondo
a qualsiasi livello esistente, consentendovi così di partite dall’opzione Ombra esterna. Con questa funzione originale. Quando avete poco tempo o soldi, e dovete
conservare l’oggetto nella sua dimensione e definizione come livello separato, ora potete decidere la direzione comprare le immagini stock, è un problema. Tuttavia,
originale, ed evitando la distorsione derivante dalla della fonte di luce, che guiderà tutte le ombre extra del questi colori o texture indesiderati possono essere
manipolazione. Potete anche aggiungere agli oggetti design. Attraverso il set di strumenti Modifica>Trasforma rapidamente eliminati. Per evitare di toccare il livello
alcuni filtri avanzati, particolarmente utili per applicare è possibile ridimensionare e ruotare l’ombra per renderla principale, eseguite tale operazione su un nuovo livello,
sfocature e disturbi supplementari. più realistica. Anche sperimentare le varie gradazioni di aggiunto attraverso una maschera di ritaglio. In questo
opacità aiuterà a renderla più credibile. modo verrà copiata la forma dell’oggetto principale e le
Livelli forma informazioni extra rimarranno nascoste. Con il livello in
Sebbene Photoshop sia stato progettato per la modifica Tecniche di selezione posizione, usate lo strumento Timbro clone o un
di immagini bitmap basate sui pixel, offre anche alcune Non tutti gli elementi possono essere facilmente separati pennello morbido dalla punta arrotondata. Campionate
opzioni vettoriali. I livelli forma offrono impostazioni dallo sfondo. Se un oggetto è circondato da uno sfondo il colore dalla parte principale dell’immagine e
predefinite di tipo geometrico, come forme rettangolari, di un unico colore, per catturare solo l’oggetto desiderato applicatelo alla zona contaminata.

speciale ____________________________________________ 23
Questo tipo di maschera è
perfetto per controllare
velocemente l’aspetto di
un’immagine

Scegliete una sezione del design e


raggruppate i livelli assegnando al gruppo
un’etichetta chiara “Dovete sempre assicurarvi
che i vostri file possano
essere compresi da
chiunque li usi dopo di
voi”

Il sito è estremamente
leggibile, anche nel
Un’anteprima con browser di un piccolo
orientamento verticale dispositivo come questo
sull’iPhone che mostra
tutte le parti importanti Un’anteprima con
del sito web orientamento orizzontale
sull’iPhone che evidenzia Ecco l’anteprima del sito diviso in sezioni, operazione
l’immagine illustrativa del sito facilmente eseguibile grazie alla funzione Sezioni da
web e il menu di navigazione guide

essere applicata a qualsiasi processo di design.

TUenTteTprOobIN Oi RDINE Salva per web


È il modo più veloce per mostrare a un cliente con poca

Ni lem 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
Maschera veloce web. Lo strumento Sezione offre la possibilità di usare le
Quando durante le fasi di test lavorate con le forme base, guide per le sezioni, tutto con un semplice clic. Prima di
il passo successivo consiste nel vedere come si adattano salvare il design in forma di bozza, potete anche
le vere immagini al concetto. Solitamente si aprono le modificare le impostazioni delle immagini da JPEG e GIF
immagini, si imposta la loro dimensione finale e poi si a PNG trasparenti a 8 o 24 bit, per esempio se lavorate
posizionano nel documento PS. Tuttavia, esiste con sfondi a tinta unita.
un’alternativa più veloce: selezionate un oggetto del
livello forma che agisca da segnaposto per l’immagine e Ordine dei livelli
poi trascinate il file di immagine direttamente sul canvas. L’anteprima nel browser Safari non evidenzia Quando lavorate insieme a uno sviluppatore o fate parte
problemi. Ora il sito può essere passato allo
Nello stack dei livelli, la grafica verrà automaticamente sviluppatore per la programmazione finale di un team, dovete sempre assicurarvi che i vostri file
posizionata sopra il livello forma. Premete poi possano essere compresi da chiunque li usi dopo di voi.
Clic+Comando/Ctrl+Opzione/Alt+G per applicare una Non c’è niente di più frustrante del lavorare con centinaia
maschera di ritaglio attraverso il livello sottostante. dei clienti, vale sempre la pena conservare una copia di di livelli senza nome. Non occorre dare un nome a ogni
Eseguite poi una trasformazione libera dell’immagine ciascun PSD che rappresenta ogni fase del design. Nei singola texture o forma dell’immagine, ma raggruppare
per una visualizzazione immediata in anteprima. progetti che durano settimane o mesi, si ricevono insieme i livelli simili vi consentirà di non farvi dei nemici!
spesso i feedback relativi alle diverse fasi, soprattutto Quando cambiate le impostazioni di Selezione
Salvare spesso quando avete a che fare con un consiglio/commissione automatica su Gruppo, potete riordinare lo stack molto
Il progetto di un sito web può portare con sé diverse di persone. Tuttavia, se avete salvato man mano ciascun più rapidamente senza dover ‘collegare’ singolarmente
modifiche e ripensamenti, indipendentemente dalla progresso non dovrete mettervi le mani nei capelli tutti i livelli. Dovrete poi rinominare solo il gruppo e non
perfezione del vostro lavoro. A causa dell’imprevedibilità perché tutto è ancora reperibile. Questa regola deve tutti i livelli al suo interno.

24 _____________________________________________speciale
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
OR
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
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
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
tra loro in modi nuovi. Un a tutto ciò in cui ci imbattiamo. Il social networking tre dei nomi più famosi del social networking,
tempo i siti erano pressoché si basa su tali principi per fornire a gruppi di utenti concentrandoci soprattutto sul nuovo concorrente.
isolati, la connessione tra loro era ampiamente la stessa possibilità di definire nuove relazioni tra i Google+ spera di fare concorrenza a Twitter e
protetta e si basava sul passaggio da un nodo contenuti web, sfruttando varie tecniche per Facebook e l’utilizzo dei suoi servizi gli consentirà di
all’altro attraverso dei clic sui collegamenti. Fino alla collegare i servizi a qualunque destinazione. Marchi renderlo più popolare sul web. Questa guida vi
nascita del portale e poi del motore di ricerca, non popolari come Twitter, Facebook, Digg e Reddit aiuterà a stabilire quali funzioni vengono offerte e
esisteva un senso collettivo del contesto di un sono diventati famosi grazie a pulsanti che come potete beneficiarne sui vostri siti;
contenuto o delle relazioni che esistevano. Google possiamo cliccare per votar e condividere le nostre identificheremo inoltre le tecniche più importanti
si è data molto da fare per cambiare questa pagine preferite. Alcuni sono andati oltre fornendo per la loro integrazione.

26 ____________________________________________ Speciale
OR
I
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 Videoritrovi
integrati nella nostra vita online, è lecito chiedersi cosa Le applicazioni per le chat video online esistono da
cci sia da offrire che non abbiamo già... Perché dovrebbe un po’ di tempo, ma Videoritrovi di Google+ è
nascere un’altra applicazione di tipo sociale e non essere dedicata a incontri spontanei con amici e follower.
percepita come ‘un altro strumento per duplicare i A differenza delle normali chat, che solitamente
contenuti’ o ‘un altro strumento per perdere tempo’? consentono la comunicazione tra due sole perone
Quali altri vantaggi può offrire G+ ai singoli utenti e alle (con alcune eccezioni come Skype), Videoritrovi
aziende? permette fino a un massimo di nove persone di
Google sta lanciando il progetto Google+ sottolineando collegarsi tra loro e sostenere una conversazione
il fatto che viene condivisa la vita reale. Attraverso attraverso la webcam.
Google+ le persone hanno ora la possibilità di interagire In pratica, il concetto di Videoritrovi si basa sulla
in eguale misura con amici, colleghi e conoscenti grazie nozione della tipica conversazione da pausa caffè,
onoscerete certamente Google e a un portale, che consente loro di restare in contatto, dove tutti gli amici della vostra cerchia possono
siamo sicuri che avete usato uno condividere informazioni e idee e partecipare a partecipare e parlare di qualsiasi cosa con voi e con
dei suoi servizi almeno una volta discussioni su qualsiasi argomento. chiunque sia connesso al momento. Qui lo scopo di
nella vostra vita. Infatti, se avete Come creativi professionisti dell’industria del web, Google è eliminare lo spirito distaccato delle
mai pronunciato le parole ‘motore di sviluppatori e designer hanno una maggiore possibilità normali chat web e offrire un ambiente più familiare
ricerca’ o se parlando con qualcuno di personalizzare i contenuti web e promuoverli e disinvolto.
gli avete menzionato il fatto che avete cercato qualcosa attivamente attraverso il servizio sociale online per trarre Videoritrovi sta anche per implementare la
online, molto probabilmente nella stessa frase avrete vantaggi in diversi campi. Un fattore importante è la condivisione di appunti, schizzi e schermate, oltre
citato anche Google. Il nome e il marchio dell’azienda diffusione delle informazioni e dei contenuti con la che l’integrazione di Google Docs, così da
sono diventati sinonimo di risultati della ricerca online e possibilità di diventare visibili non solo nell’ambiente G+, migliorare l’aspetto di lavoro collaborativo offerto
indicizzazione, e per alcune persone il fatto che esistano ma anche attraverso altri prodotti e servizi Google, tra dal servizio.
altri provider è ridondante. cui l’importante motore di ricerca e le sue classifiche.
Con una simile influenza e quota di mercato nel settore È corretto supporre che la maggior parte delle persone
della ricerca globale, sembra quasi assurdo che Google che usa le nuove applicazioni di tipo sociale di Google, in
abbia deciso di entrare nel mondo del social networking, qualche momento ha anche sfruttato le sue funzioni di
e non da adesso. In passato Google ha provato (con più ricerca e gli strumenti di sviluppo web. La relazione tra


o meno successo) a creare un servizio sociale/interattivo indicizzazione del sito e catalogazione delle informazioni
attraverso Orkut, Google Buzz e Google Wave. da parte del gigante della ricerca è sempre stata molto Google sta lanciando
Istintivamente la comunità web è attratta da qualsiasi forte e, da un punto di vista commerciale, Google ha
servizio offerto da Google, e qualsiasi nuovo progetto è svolto un ottimo lavoro nel collegare tra loro tutte le il progetto Google+
sempre atteso con impazienza, digerito e criticato. A applicazioni e i servizi. Qui ha creato una serie di
volte, per il fatto di avere il marchio Google, le aspettative pacchetti che fungono da blocchi da costruzione sottolineando il fatto
sono così alte che le critiche si sprecano e questo non utilizzabili per migliorare e uniformare l’esperienza degli
può che portare alla mancata adozione del prodotto e a utenti. Cosa offre quindi il progetto? Esaminiamo le sue che viene condivisa la


una sua rapida “morte”. Addio, Wave. funzioni principali.
Ovviamente, lo scetticismo era alle stelle quando vita reale

Cerchie
Le cerchie vi permettono di condividere contenuti
e articoli solo con le persone da voi desiderate. Messenger
L’idea di base e il design dell’applicazione si basano Per chi usa già un’applicazione Google come Gmail o
sul concetto degli ambiti sociali, e sul fatto che iGoogle, la funzionalità incorporata per le chat non
generalmente interagiamo e condividiamo le rappresenta niente di nuovo. Tuttavia, Messenger
informazioni solo con alcune persone. consente di impostare e partecipare all’invio di
Questo significa che potete condividere contenuti messaggi di gruppo con chiunque faccia parte della
importanti con persone importanti, senza il rischio cerchia da voi selezionata. Volete decidere con i vostri
di pubblicare qualcosa di banale (o imbarazzante) amici il ristorante per la serata? O parlare di progetti di
per i vostri familiari o conoscenti e intasare i loro lavoro con i colleghi? Messenger è stato creato per
flussi con i vostri aggiornamenti. Dividendo i fornirvi questo tipo di interazione, ancora una volta
contatti in gruppi attraverso Cerchie, avrete un senza infastidire tutti i vostri amici con discussioni in cui
maggiore controllo su chi vede cosa e sul modo in non desiderano essere coinvolti. A differenza di
cui condividete le informazioni. Videoritrovi, Messenger è una chat esclusivamente
basata sul testo, senza l’elemento video.

Speciale ____________________________________________ 27
Giochi Cos’è +1?
Tutti i siti di interazione sociale online sono in Indipendentemente dal fatto che abbiate accesso
qualche modo degli ammazzatempo, e Google+ al progetto Google+, avrete certamente iniziato a Come funziona?
non fa eccezione alla regola. L’app fornisce una sala notare la presenza di un nuovo pulsante in diversi In pratica, il concetto +1 è molto semplice: approvando
giochi molto ampia. Allo stesso modo delle siti web, blog e risultati di ricerca. In passato e assegnando un +1 all’URL state votando il
applicazioni di gioco di terze parti di Facebook, a b b i a m o già assistito alla comparsa di tali collegamento o l’articolo e lo rendete visibile a tutti i
anche i giochi di Google+ offrono la pulsanti con Digg, Technorati e, più vostri follower, consentendo anche a loro di assegnare
possibilità di interagire con il vostro recentemente, con i pulsanti Mi piace un ‘+1’ e di ‘approvare’ il contenuto. È possibile impostare
profilo e le cerchie e di pubblicare e Condividi di Facebook. Se usate un pulsante +1 così che mostri un valore numerico delle
informazioni per rendere la vostra Google per eseguire una ricerca, vi approvazioni ricevute. Quando visualizzate i risultati
esperienza ancora più sociale e per sarete accorti del pulsante +1 della ricerca, potete anche vedere se qualcuno dei vostri
condividere/promuovere i giochi vicino a ciascun risultato, anche tra amici di Google+ ha apprezzato uno dei risultati.
con cui vi divertite. Ora tutti gli elenchi di ricerca a pagamento. Dal punto di vista della visualizzazione, Google ha il
possono vedere il vostro punteggio +1 è un’approvazione pubblica di controllo completo su chi può vedere e vedrà qualsiasi
di Angry Birds. Al momento la sala un URL. L’obiettivo è quello di rendere +1 relativo al contenuto preferito basandosi su alcune
giochi non è aperta agli sviluppatori allo pubblica l’approvazione, dal momento che connessioni sociali che solitamente vengono definite
stesso modo di quella di Facebook, ma la qualsiasi URL consigliato attraverso questo sistema attraverso i servizi di Google, come le persone presenti
possibilità di creare giochi di terze parti offre varie apparirà nel vostro flusso Google+ e sarà nella vostra chat list di Google Talk, i membri delle
opportunità a specialisti in branding e quindi visibile a tutti. Questo vi vostre cerchie Google+, i vostri contatti di
concessionari di pubblicità. Considerando il fatto consente di approvare solo i Google Contacts e le persone che
che Google Wave era stato considerato ‘troppo collegamenti ‘+1’ desiderati e a seguite su Buzz o attraverso Google
primitivo’, e certamente la sopravvivenza di un cui siete contenti di essere Reader.
network dipende dalla sua comunità, sarà associati.
interessante vedere se Google abbia fatto
progressi da quel punto di vista.

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

Speciale ____________________________________________ 29
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
Con oltre 21 milioni di utenti Facebook solo in codice seguente dopo il tag <body> di apertura:
Italia, non è mai stato così importante assicurarsi
che il proprio sito web utilizzi il maggior numero 001 <div id=”fb-root”></div>
possibile di funzioni offerte dalla piattaforma 002 <script>(function(d, s, id) {
Facebook. In questa sezione vi mostreremo come 003 var js, fjs = d.getElementsByTagName(s)[0];
implementare nel vostro sito i diversi elementi di 004 if (d.getElementById(id)) {return;}
Facebook, dai pulsanti Mi piace a completi sistemi di 005 js = d.createElement(s); js.id = id;
login. 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’));
Cos’è Graph? 009 </script>
Facebook Graph sono in pratica i dati veri e propri che
costituiscono Facebook. Sono nel formato JSON, e per Sostituite ‘YOUR_APP_ID’ con l’Application ID fornitovi. Avete attivato l’SDK JavaScript di Facebook sulla
ottenere i dati personali di un utente serve un certo livello vostra pagina e nel resto del codice sorgente potete eseguire le chiamate relative.
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 Pulsante Mi piace
di azioni che si possono eseguire con la piattaforma I pulsanti Mi piace di Facebook sono diventati onnipresenti e rappresentano il modo più
Facebook, e più avanti ne parleremo in maniera più semplice per condividere i contenuti del vostro sito web con gli amici Facebook di un visitatore.
dettagliata. Nel frattempo, osserveremo come usare gli Questo pulsante è estremamente flessibile: potete infatti applicarlo a singoli pezzi di contenuto,
strumenti forniti da Facebook per aggiungere al vostro sito per esempio un unico post del blog, o all’intero sito web. Facebook offre strumenti che
le funzioni del social network. Iniziamo con il pulsante Mi consentono di generare rapidamente il codice per implementare nel sito le funzioni sociali.
piace. 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
Attraverso il sistema di registrazione di Facebook pulsante Condividi. La differenza tra Condividi e Mi piace è che l’utente può selezionare singoli
potete ridurre la quantità di campi richiesta nei amici di Facebook con cui condividere il contenuto invece di postarlo a tutti sul suo wall.
vostri moduli, e la maggior parte dei contenuti
verrà trasferita da Facebook Web Designer Likes this

30 ____________________________________________ Speciale
Find Friends Home OR
I
dovete creare uno script che vi consenta di processarli.
“Mi piace” per singoli pezzi di contenuto Create un nuovo documento PHP che fungerà da pagina di
Finora abbiamo visto come aggiungere il Mi piace a un intera pagina destinazione una volta che l’utente ha premuto il pulsante per la
web (singolo URL); esamineremo adesso come inserire questa funzione registrazione. Aggiungete quindi il codice seguente:
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. 001 <?php
A seconda del servizio di blog usato, esistono alcuni plug-in che 002 define(‘FACEBOOK_APP_ID’, ‘your_app_id’);
supportano questa funzione; una ricerca su Google vi metterà sulla 003 define(‘FACEBOOK_SECRET’, ‘your_app_secret’);
strada giusta. Se scrivete a mano il codice del vostro blog, basta sostituire 004
il secondo snippet di codice dell’esempio precedente con quanto segue: 005 function parse_signed_request($signed_request, $secret) {
006 list($encoded_sig, $payload) = explode(‘.’, $signed_request, 2);
001<div class=”fb-like” data-href=”<?= $_SERVER[‘HTTP_HOST’] . $_ 007
SERVER[‘PHP_SELF’] . $_SERVER[‘QUERY_STRING’]; ?>” data- 008 // decode the data
send=”true” data-width=”450” data-show-faces=”true”></div> 009 $sig = base64_url_decode($encoded_sig);
010 $data = json_decode(base64_url_decode($payload), true);
Assicuratevi di salvare questa pagina come file PHP e non come HTML.
L’obiettivo è quello di prendere l’indirizzo corrente della pagina e Dovrete sostituire ‘your_app_id’ e ‘your_app_secret’
aggiungerlo allo snippet di codice di Mi piace di FB; lanciate la pagina e con l’ID e l’informazione segreta. Dal momento che
osservate il codice sorgente per vederlo in azione. Se non volete state programmando in PHP, l’informazione
trasformare la pagina in PHP, potete usare la funzione JS window.location. segreta non verrà inclusa nel codice sorgente.
Sul CD il resto
Salvate il file come ‘formsubmit.php’. Se ora del codice
Commenti aprite il modulo di registrazione, compilate i di questo
Continuando con l’esempio precedente, possiamo aggiungere al sito campi e premete il pulsante di registrazione, speciale
una casella per i commenti Facebook con il seguente snippet di codice: apparirà lo script precedente, che mostra i campi
del modulo non codificati.
001<div class=”fb-like” data-href=”<?= $_SERVER[‘HTTP_HOST’] . $_

“ Facebook ha creato
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à un proprio set di istruzioni


di markup

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…
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.
Una volta integrata la casella dei commenti, gli utenti potranno
Questo spezzone di codice mostrerà una data nel formato POSIX.
esprimere la loro opinione e allo stesso tempo pubblicizzare i
Da Gennaio 2012 Facebook non supporta più FBML ed è passato a
vostri contenuti
HTML5 e iFrames. Tutte le app create usando FBML devono ora
usare le nuove chiamate Graph utilizzate in precedenza.
Registrazione Un altro linguaggio di markup creato da Facebook è FBJS (Facebook
Potete usare la piattaforma Facebook per registrare gli utenti, e questo JavaScript). È una versione semplificata di JavaScript, ma usa molte
significa che potete raccogliere i dati da Facebook invece di doverli delle chiamate standard di JS. Il motivo dell’eliminazione delle
inserire nuovamente, operazione che semplificherà il processo di funzioni JavaScript riguarda la sicurezza: si impedisce infatti agli
registrazione. Inserite quanto segue nell’SDK JavaScript: sviluppatori di eseguire JS in un app in cui non dovrebbero, oltre
che consentire le chiamate ai dati Graph.
001 <fb:registration Il markup finale di Facebook è FQL (Facebook Query Language),
002 fields=”name,birthday,gender,location,email” anch’esso molto simile a SQL standard. Ecco un esempio di
003 redirect-uri=”FULL_URL/formsubmit.php” chiamata FQL:
004 width=”530”>
005 </fb:registration> 001 SELECT name FROM user WHERE uid = me()

Il testo ‘formsubmit.php’ rappresenta la destinazione che dovranno Il codice restituisce semplicemente il nome dell’utente
raggiungere gli utenti una volta registrati; dovete sostituire FULL_URL correntemente collegato. Ulteriori informazioni su FQL sono
con l’URL assoluto del server. Deve ovviamente essere una pagina che reperibili all’indirizzo http://developers.facebook.com/docs/
elabora i dati del modulo; i dati che vengono passati sono sicuri, quindi reference/fql.

Speciale _____________________________________________31
Search

Web Intents Cosa sta succedendo?

S
L’API di Twitter permete di creare applicazioni
complesse per interagire con i servizi e tutti gli utenti, icuramente negli ultimi anni la popolarità di con persone o organizzazioni che condividono i
e librerie open source gratuite da usare con qualsiasi Twitter è cresciuta enormemente man loro interessi e tenere traccia di qualsiasi post o
linguaggio di scripting. Quando avete a che fare con mano che sempre più persone lo usano contenuto importante condiviso con il mondo.
dati utente e aggiornamenti di stato dell’applicazione per i motivi più diversi: per post Per i creativi e i professionisti del web, Twitter può
dovete affrontare le questioni di autenticazione e promozionali, richieste di aiuto e marketing, fino al rivelarsi uno strumento fondamentale. Ci consente
sicurezza, che consistono nello svolgere l’ingrato semplice utilizzo per restare in contatto con altre di rimanere in contatto con i membri delle comunità
compito di gestione dell’autenticazione attraverso il persone. online che ci interessano, di conoscere le ultime
protocollo OAuth e nell’uso di chiavi di accesso, token Il limite di 140 caratteri comporta che le informazioni novità, demo, release e tecnologie, e ci offre la
e permessi utente. devono essere concise e sfruttare al massimo possibilità di promuovere i nostri servizi, lavori e
Per qualsiasi sviluppatore che desideri offrire sul suo qualsiasi spazio. Grazie alla sua architettura ben qualunque cosa desideriamo far conoscere ai nostri
sito un’applicazione un po’ più interattiva senza dover strutturata, è estremamente facile seguire gli utenti, amici.
affrontare queste complesse questioni di condividere i tweet, rispondere o indicare come Come tale, raccogliere e mantenere i follower è la
autenticazione, Twitter ha lanciato Web Intents. È un preferito un tweet interessante. Per gli utenti, Twitter chiave per assicurarci che ci stiamo rivolgendo alle
set di funzioni che aiutano a integrare la funzionalità è un ottimo modo per trovare, seguire e collegarsi masse e non al nulla.
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 Feed
possono comunque sfruttare le funzioni Twitter. Le Uno dei modi più semplici per farsi seguire su Twitter è inserire sul vostro sito un feed Twitter, così
opzioni disponibili comprendono la pubblicazione di che i visitatori capiscano subito di cosa parlate. Twitter disponde di un’API dettagliata con metodi
tweet o la risposta a un tweet, la condivisione di un e funzioni per gli sviluppatori. Per ottenere la timeline pubblica di un utente in JSON, basta
tweet o la possibilità di indicare un tweet come chiamare l’URL: http://twitter.com/statuses/user_timeline/NOME_ACCOUNT.json.
preferito, oltre al ‘segui’. Viene utilizzata l’API User Timeline di Twitter, ma dal momento che viene restituita come JSON
Per implementare la funzionalità Web Intents bastano dobbiamo eseguire il parsing dei risultati per ottenere un risultato più pulito. Qui possiamo usare
due semplici passaggi. Innanzitutto, dovete includere jQuery e il suo metodo getJSON per eseguire la chiamata e adattare i risultati così da includere
il file JavaScript del widget (lo stesso usato per le qualsiasi collegamento presente nell’aggiornamento dello stato.
funzioni di Twitter); successivamente, dovete
aggiungere l’azione Web Intents. Le azioni non sono 001 <script src=”http://code.jquery.com/jquery-latest.js”></script>
altro che semplici collegamenti a specifici URL, che 002 <script>
variano a seconda del risultato che desiderate 003 $(document).ready(function() {
ottenere. Facendo clic sul collegamento apparirà una 004
finestra con la chiamata relativa all’azione, che l’utente 005 // Here you can set the Twitter account name you wish to obtain the tweet for
può poi completare attraverso il sito. 006 var user = ‘coldfumonkeh’;
007
001 <script src=”http://platform.twitter.com/ 008 // jQuery will help with its getJSON method to obtain the user’s public timeline and
widgets.js” type=”text/javascript”></script> return the latest tweet
002 <p><a href=”http://twitter.com/intent/ 009 $.getJSON(‘http://twitter.com/statuses/user_timeline.json?screen_name=’ + user +
user?screen_name=webdesignermag”>Follow ‘&count=1&callback=?’, function(data) {
&amp; Mini Profile</a></p> 010
003 <p><a href=”http://twitter.com/intent/ 011 // Assign result to variable
tweet”>Send a Tweet</a></p> 012 var status = data[0].text;
004 <p><a href=”http://twitter.com/intent/ 013
tweet?in_ 014 // Process the status
reply_to=126644035745095681”>@Reply to a 015 // Replace and define any URLs for inclusion in the output
Tweet</a></p> 016 status = status.replace(/((https?|s?ftp|ssh)\:\/\/[^”\s\<\>]*[^.,;’”>\:\s\<\>\)\]\!])/g,
005 <p><a href=”http://twitter.com/intent/ function(url)
retweet?tweet {
id=126644035745095681”>Retweet 017 return ‘<a href=”’+url+’”>’+url+’</a>’;
a Tweet</a></p> 018 }).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
006 <p><a href=”http://twitter.com/intent/ 019 // Include a link to any users mentioned within the tweet itself
favorite?tweet_id=126644035745095681”> 020 return reply.charAt(0)+’<a href=”http://twitter.com/’+reply.
Favourite a Tweet</a></p> substring(1)+’”>’+reply.
substring(1)+’</a>’;
La facilità d’uso e di sviluppo elimina i problemi di 021 });
integrazione. Per maggiori informazioni andate su: 022
https://dev.twitter.com/docs/intents. 023 // Display the result

32 ____________________________________________ Speciale
Home Profile Messages OR
I
024 $(“#tweet”).html(status); impostare la larghezza e l’allineamento del pulsante e di cambiare le
025 }); opzioni per il colore così da adattarlo al design del vostro sito. Per
026 ulteriori informazioni sulla personalizzazione, leggete la
027 }); documentazione a questo indirizzo:
028 </script> https://dev.twitter.com/docs/follow-button.
029 Anche inserire vicino al pulsante una chiamata diretta a un messaggio
030 <h1>Latest Tweet</h1> o a un’immagine di azione può aiutare ad attirare l’attenzione
031 <div id=”tweet”></div> sull’elemento consentendovi di convertire e aumentare il numero dei
follower.
In alternativa, Twitter dispone di alcuni file JavaScript con cui ottenere lo Twitter non è altro che comunicazione e interazione e fare in modo che
stesso risultato ma che forniscono più di un risultato sullo stato: il vostro messaggio venga notato nel traffico può essere difficile,
quindi aiutate gli altri ad aiutarvi. Solitamente, gli aggiornamenti di
001 <h1>Latest Tweets</h1> stato o i tweet vengono generati dalla pagina principale del profilo di
002 un utente o attraverso un’applicazione desktop o mobile dedicata. Per
003 <ul id=”twitter_update_list”> facilitare la comunicazione, potete aggiungere un pulsante Tweet al
004 <li><p></p></li> vostro sito web per permettere ai visitatori di condividere i vostri
005 </ul> contenuti senza uscire dal sito. Si tratta in pratica di convogliare il
006 traffico sul vostro sito e aumentare la visibilità.
007 <script type=”text/javascript” src=”http://twitter.com/ Di nuovo, è facile implementare questa funzione grazie al file JavaScript
javascripts/blogger.js”></script> del widget fornito da Twitter. Facendo clic sul pulsante, all’utente verrà
008 <script type=”text/javascript” src=”http://twitter.com/ per prima cosa chiesto se desidera eseguire il login a Twitter o, nel caso
statuses/user_timeline/coldfumonkeh. l’operazione sia già stata effettuata, gli verrà mostrato il messaggio da
json?callback=twitterCallb aggiornare, che può essere modificato e migliorato prima della
ack2&amp;count=5”></script> pubblicazione.

Con l’uso di alcuni semplici CSS per rifinire l’aspetto della vostra presenza 001 <a href=”https://twitter.com/share” class=”twitter-
web, è possibile inserire questi script allo scopo di rendere share-button” data-text=”Check this out:”
immediatamente visibile a tutti il vostro feed Twitter. Solo questo è data-count=”vertical” data-
abbastanza per convincere i visitatori a seguirvi. via=”coldfumonkeh” data-
related=”monkehTweets:ColdFusion
Twitter API”>Tweet</a><script type=”text/
Pulsanti javascript” src=”//
Un’altra opzione disponibile per fornire agli utenti un modo per interagire platform.twitter.com/widgets.js”></script>
con voi su Twitter è il pulsante Segui, indicato da Twitter come un mezzo
per rafforzare il rapporto con il vostro pubblico. È stato estremamente Per impostazione predefinita, per creare il messaggio
semplificato grazie al fatto che Twitter offre tali funzioni attraverso una lo stato userà l’URL e il titolo della pagina corrente. Potete anche
libreria JavaScript di widget, ospitata sui suoi server. Per il pulsante Segui, decidere di visualizzare una casella dei conteggi, che mostrerà
che è molto facile da creare personalmente, su Twitter viene offerto esattamente quante volte è stato twittato l’URL specifico: l’ideale se
anche un generatore online che lo realizza automaticamente, insieme volete informare gli utenti della popolarità del contenuto.
ad altre risorse che vi aiutano ad aumentare la vostra visibilità Il pulsante Tweet offre anche un modo semplice per estendere
nel mondo dei social network. Per conoscere le varie risorse qualsiasi opportunità di marketing possibile fornendo un account
disponibili digitate http://twitter.com/about/resources. facoltativo, che verrà mostrato agli utenti dopo che hanno pubblicato
Il pulsante Segui è uno dei widget disponibili che l’aggiornamento di stato dal vostro sito. Il pulsante Tweet può essere
consentono agli utenti di seguire facilmente il vostro personalizzato allo stesso modo di Segui così da adattarsi all’estetica
account Twitter da qualsiasi pagina web in cui è stato del sito e del design. È uno strumento semplice ed efficace che
inserito. Il codice generato automaticamente è molto consente di eseguire aggiornamenti interattivi dal vostro sito e di
semplice. L’elemento anchor contiene l’URL all’account Twitter, con sfruttare le più importanti opportunità di marketing. Per ulteriori
uno specifico attributo di classe impostato su twitter-follow-button informazioni sulla personalizzazione, consultate la documentazione
necessario perché il codice JavaScript del widget possa trasformare con all’indirizzo https://dev.twitter.com/docs/tweet-button.
successo il collegamento nel pulsante. Se sul borwser dell’utente non è
attivo JavaScript, ci si può comunque collegare all’account del profilo.
@Anywhere
001 <a href=”https://twitter.com/coldfumonkeh” class=”twitter- @Anywhere è una soluzione facile per inserire nel vostro sito la
follow-button” data-show-count=”true”>Follow @coldfumonkeh</a> piattaforma Twitter. Le funzioni di @Anywhere sono dettagliate e
002 <script src=”//platform.twitter.com/widgets.js” type=”text/ potenti e consentono di creare tweet dal vostro sito, generare e
javascript”></script> visualizzare informazioni dettagliate sul profilo dell’utente e convertire
gli username di Twitter in collegamenti cliccabili ai profili relativi.
Si possono eseguire ulteriori configurazione e personalizzazioni fornendo Sebbene il servizio sia facile da implementare, per usare @Anywhere
nel codice i valori per attributi di dati specifici, che consentono di 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 Il design del blogazine Pulchry cattura l’attenzione LBOI è un ottimo esempio di blog che si concentra sul
centrale di testo, ma la disposizione del contenuto, i con una manciata di post personalizzati. Table of contenuto, integrando contemporaneamente abbastanza
font, la palette dei colori e alcuni tocchi casuali Contents non spiega cosa troverete all’interno della elementi estetici da renderlo un’esperienza invitante dal
catturano l’attenzione del visitatore. Un esame più sezione, ma una volta entrati vi troverete davanti ad punto di vista visuale. Un insieme di texture e colori di
attento rivela che c’è molto di più da vedere: texture, alcuni post realizzati in modo egregio. Leggeteli tutti sfondo offre un contenitore di base, completato dal logo. I
pattern e sfondi sono stati inseriti nel design per creare e non dimenticatevi di visitare How Leaves use Color post sono delle singole entità e usano uno dei font
un contenitore moderno e completo per i contenuti. Profiles. Istruttivo, colorato, creativo ed elegante. 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 spazi vuoti e i font in grassetto di grandi dimensioni Un blog pieno di azione con una particolare attenzione
gli standard di un blog, ma sono i colori, gli elementi catturano subito l’attenzione dell’utente, ma non sono gli per il design industriale. Il layout è composto da due
eleganti, i font e le immagini che attirano il visitatore. unici elementi che caratterizzano un’esperienza vivace e sole colonne, ma l’uso intricato di bordi e colori di
Le grafiche ben incorniciate, i font retro e i brevi post coinvolgente. L’uso di immagini ben realizzate, unito a font sfondo separa i contenuti e migliora la leggibilità. Il font
accompagnati da fotografie dimostrano buon gusto, scelti attentamente intrattengono l’utente e lo invitano a del logo infonde subito personalità alla pagina e gli
e anche le pubblicità si integrano molto bene nel continuare a leggere la pagina per scoprire cosa ha ancora elementi di navigazione semplici ma creativi dimostrano
design. da offrire. l’ottimo lavoro svolto per realizzare questo sito.

blog beautiful ________________________________________37


<Tutorial>
Imparare a programmare con JavaScript

Imparare a 01 Creare un semplice file


HTML

programmare
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

con JavaScript
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

In questa nuova serie di tutorial


un piccolo file CSS, necessario ad applicare lo stile
alla pagina; inoltre, è stata scritta una semplice

esamineremo le basi di questo sezione body contenente un titolo e un <div> vuoto,


a cui è stato assegnato l’id bottles.
linguaggio estremamente SUL CD
importante • index.html:
HTML e
JavaScript
001 <!doctype html>
002 <html lang="en">
strumenti | tecnologie | tendenze Editor di testo (Dreamweaver, Blocco • style.css: CSS 003 <head>
• Codice completo
Note o simile) & browser web (Safari o simile) dei passaggi 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>

C
010   <div id="bottles">
ol passaggio di HTML da una tecnologia 011   </div>
usata per scrivere semplici pagine web a 012 </body>
una per costruire vere applicazioni web, 013 </html>
JavaScript sta diventando un linguaggio
essenziale. Infatti, JS è l’unico modo per
02 Aggiungere un elemento
sfruttare al massimo tutte le nuove API di <script>
HTML5. In questa serie, quindi, vi illustreremo È arrivato il momento di aggiungere il codice
le basi di JavaScript e, come nella maggior JavaScript. Una questione che confonde molti
parte dei tutorial, partiremo dall’inizio. programmatori JS principianti è dove inserire i loro
<sopra>
JavaScript è famoso per la sua cattiva fama di semplice script. Vanno posizionati nella sezione <head> o
• Ecco la nostra pagina HTML di linguaggio di scripting, ma la verità è che JS è un linguaggio <body>, all’inizio del file o alla fine? Per ora
esempio nella finestra di codice di
Dreamweaver CS5, che offre ottimi dinamico molto potente e si sta affermando in vari settori. Sta aggiungeremo lo script alla sezione body del
strumenti di scrittura e debugging. anche ricevendo l’attenzione di alcune delle più brillanti documento HTML; più avanti nella serie parleremo
Tuttavia, questo tipo di supporto non
è fondamentale: potete anche usare menti dei linguaggi di programmazione e, di conseguenza, la di dove inserire il codice e di come scegliere la
gli editor di testo standard, basta che sua velocità di esecuzione è enormemente migliorata. Se posizione migliore. Iniziamo quindi aggiungendo i
rispettiate la sintassi.
conoscete appena il codice JS, o se non avete mai avuto tag <script> di apertura e chiusura al <div> della
l’occasione di scriverlo personalmente, in questa serie pagina. Per ora lo script contiene un semplice
descriveremo tutto ciò che si deve sapere non solo per commento, che non è altro che una nota e che
scrivere JavaScript, ma per scrivere e comprendere il codice verrà ignorato dall’interprete JS. Il vero codice verrà
JavaScript che interagisce con il browser e le sue API. Anche inserito a breve.
se avete un po’ di esperienza nel campo della Se siete abituati a studiare il codice JS, avrete
programmazione, in questo tutorial potrete trovare alcuni notato che nel tag dello script abbiamo tralasciato
suggerimenti. Alla fine dell’articolo conoscerete variabili, l’attributo type (che solitamente è type=
condizionali, iterazione e come interagire con il DOM del ”JavaScript”). Questo perché il nuovo standard
browser. Iniziamo quindi; tutto ciò che vi serve è un editor di HTML5 considera JavaScript il linguaggio di
testo e il vostro browser web. scripting predefinito. In altre parole, se usate
JavaScript non è più necessario fornire il tipo
dello script.

In questa serie vi illustreremo le basi di 001 <div id="bottles">


002 <script>
JavaScript e, come nella maggior parte dei 003    // Your JavaScript code will go here
004 </script>
tutorial, partiremo dall’inizio 005 </div>

38 _____________________________________________ tutorial
<Tutorial>
Imparare a programmare con JavaScript

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>

<sopra>
• Visualizzare il valore di una variabile usando la funzione JavaScript alert()
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

03 Variabili nuova variabile viene dichiarata con la parola chiave ‘var’. E queste operazioni finché terminano le bottiglie. A questo
Avrete ormai scoperto che la nostra applicazione per dichiarare completamente una variabile avete bisogno scopo useremo il ciclo while, che offre un modo per
è la famosa canzone tradizionale americana 99 Bottiglie Di di assegnarle un nome e un valore. Chiameremo la nostra ripetere un pezzo di codice finché viene soddisfatta una
Birra. Ecco come la implementeremo: inizieremo con 99 variabile ‘bottles’ e imposteremo il suo valore su 99. qualche condizione. Nel nostro caso la condizione è
bottiglie di birra, creeremo un verso della canzone, l’esaurimento delle bottiglie. Osserviamo il ciclo while
sottrarremo una bottiglia e poi ripeteremo l’intero 001 <script> nel codice:
processo. 002 var bottles = 99;
La prima cosa utile è una variabile che contenga il 003 </script> 001 <script>
numero di bottiglie rimanenti. Una variabile non è poi così 002 var bottles = 99;

04 Avvisare l’utente
diversa da quelle usate negli esercizi di matematica; 003 while (bottles > 0) {
tuttavia, come vedrete in questa serie, le variabili possono Ora che la variabile ha un valore, potete usarla nel 004     alert(bottles);
contenere molto più dei numeri, ma per non complicare codice e, mentre non disponete ancora di altro codice, 005 }
subito le cose partiremo con delle cifre. In JavaScript una potete testarla con la funzione alert di JavaScript per 006 </script>

Variabili ed espressioni moltiplicarlo per ottenere 28 come valore di dogYears. Qui, abbiamo invecchiato il cane di un anno
In JavaScript una dichiarazione è una riga di codice Osserviamo qualche altra espressione. aggiungendo 1 al suo valore corrente. Se dogsAge era
che termina con un punto e virgola, mentre 5, dopo questa dichiarazione sarà 6.
un’espressione è solitamente ciò che appare sul lato 001 var x = 3; Naturalmente le espressioni possono lavorare
destro del segno =. Quindi, ogni volta che vedete una 002 var y = 2; anche con valori non interi. Per esempio:
dichiarazione come 003 var z = x - y;
001 var dollars = 20.25;  
001 var bottles = 99; Qui ci sono tre espressioni: 3, 2 e x - y. 3 e 2 sono
facili da calcolare; per ottenere il valore di x – y, In questo caso, stiamo assegnando alla variabile dollars
quella a destra di = è l’espressione. Per scoprire il valore sottraete il valore corrente di y dal valore corrente di un numero a virgola mobile, che poi potremo usare in
dell’espressione, dovete calcolarla. Per esempio, se x, rispettivamente 2 e 3, per avere 1 che è il valore che un’espressione, così:
avete una dichiarazione come viene assegnato a z.
Potete cambiare il valore di una variabile dopo 001 var pounds = dollars * 0.6267; 
001 var dogYears = 4 * 7; averla impostata assegnandole il valore di un’altra
espressione. Per esempio, Per ottenere il valore di pounds, calcoliamo
l’espressione è 4 * 7, e potete scoprire il valore l’espressione dollars * 0.6267.
semplicemente moltiplicando 4 per 7. In JavaScript la 001 dogsAge = 5; Le espressioni possono anche calcolare valori true e
moltiplicazione è rappresentata da un asterisco (*). false, come nell’esempio seguente:
Supponete di avere questo codice: imposta il valore di dogsAge sul valore dell’espressione
5. Quindi dogsAge era stata inizializzata sul valore di 4, 001 var isMiddleAge = dogsAge > 5
001 var dogsAge = 4; ma ora le abbiamo assegnato un nuovo valore.
002 var dogYears = dogsAge * 7; Potete anche riassegnare un nuovo valore a una Qui a isMiddleAge viene assegnato il valore true se
variabile, in questo modo: dogsAge è uguale o maggiore di 6. Esistono altri valori
Per ottenere il valore dell’espressione dogsAge * 7, che possono essere assegnati alle variabili, ma ce ne
dovete sostituir il valore corrente di dogsAge, 4, e poi 001 dogsAge = dogsAge + 1; occuperemo nelle prossime puntate della serie.

tutorial _____________________________________________ 39
<Tutorial>
Imparare a programmare con JavaScript

seguente; noterete che (per ora) abbiamo cambiato il


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

08 Test condizionale
Una volta calcolato il codice, il valore di 002 var bottles = 99;
fullName è ‘Arthur Dent’. Avrete notato che 003 var lyrics = ""; Se siete stati attenti (o se conoscete bene la
abbiamo aggiunto uno spazio tra il nome 004 while (bottles > 0) { canzone), avrete notato che alla fine del brano le parole
e il cognome semplicemente usando le 005     alert(bottles); non sono ‘0 bottles of beer on the wall’, ma ‘No more
virgolette tra uno e l’altro. 006     bottles = bottles - 1; bottles of beer on the wall’. Non preoccupatevi, ora ce
Se provate a concatenare una variabile 007 } ne occuperemo, abbiamo solo bisogno di un modo per
con un valore di stringa a una con un valore 008 </script> controllare se il valore delle bottiglie è maggiore di zero.
numerico, JavaScript convertirà il numero in In caso di esito positivo, aggiungiamo le parole come
stringa e concatenerà le due stringhe:
07 Creare le parole sempre; ma se il valore delle bottiglie è zero, inseriremo
Ora, per creare le parole, ogni volta che parte il nella stringa lyrics ‘No more bottles of beer on the wall’.
001 var answer = "My favourite number is: " ciclo aggiungeremo un verso della canzone alla A tale scopo potete usare una dichiarazione if. Ecco
+ 42; variabile lyrics, e per quando il ciclo while sarà l’aspetto di tale dichiarazione:
Il valore di answer è la stringa: ‘My favourite completo, tale variabile conterrà l’intero brano. Ecco la
number is: 42’. prima strofa: 001 if (bottles > 0) {
99 bottles of beer on the wall, 002    // do something here
99 bottles of beer, 003 }
Take one down, pass it around,
98 bottles of beer on the wall. Come il ciclo while, la dichiarazione if usa un test
La sintassi del ciclo while è composta dalla parola chiave Ora dobbiamo scrivere il codice relativo. condizionale tra parentesi, e il codice che viene calcolato
‘while’, da una condizione e dal codice, che si estende tra quando il test è true viene inserito nel corpo della
le parentesi graffe di apertura e di chiusura. Il codice tra 001 <script> dichiarazione if tra parentesi graffe. Riscriviamo quindi
parentesi è il ‘corpo’ del ciclo e contiene una o più 002 var bottles = 99; l’ultima riga di codice usando una dichiarazione if, come
dichiarazioni di codice che devono essere calcolate ogni 003 var lyrics = ""; mostrato di seguito:
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 001 <script>
while. In questo caso, mostreremo un avvertimento che the wall <br>"; 002 var bottles = 99;
indica quante bottiglie restano ogni volta nel ciclo. 006     lyrics = lyrics + bottles + " bottles of beer on 003 var lyrics = "";
Questo codice ha però un problema: non viene mai the wall <br>"; 004 while (bottles > 0) {
eliminata alcuna bottiglia, quindi la dichiarazione while     lyrics = lyrics + bottles + " bottles of beer <br>"; 005     lyrics = lyrics + bottles + " bottles of beer on
continuerà all’infinito mostrando ogni volta nella finestra 007     lyrics = lyrics + "Take one down, pass it around, the wall <br>";
di dialogo il numero 99. Ciò che dobbiamo fare è <br>"; 006     lyrics = lyrics + bottles + " bottles of beer
visualizzare la finestra e poi eliminare una bottiglia: basta 008     bottles = bottles - 1; <br>";
sottrarre uno dalla variabile bottle. Provate il codice 009     lyrics = lyrics + bottles + " bottles of beer on 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
015 position: fixed;
JavaScript 016 top: 0px;
Invece di posizionare il codice JavaScript direttamente 017 left: 0px;
nella pagina, useremo l’attributo src dell’elemento 018 }
<script> per puntare al file slideshow.js (riga 4), dove
scriveremo il codice. In questo modo potremo tenere
06 Gestire le transizioni
separati HTML e JavaScript, e questo rende il codice più Per gestire la dissolvenza in entrata/uscita tra le
leggibile e gestibile. immagini useremo una proprietà CSS3, transition (righe
È importante specificare un tag </script> di chiusura, 9-14), per influire sull’opacità della fotografia.
altrimenti alcuni browser non si comporteranno nel Specifichiamo l’opacità nella regola img.transparent,
modo corretto. quindi la transizione avrà luogo quando un elemento
ha la classe ‘transparent’. In img.transparent
<sopra> 001 <head> specifichiamo un’opacità di 0 (in altre parole,
• Il document object model (DOM) per la pagina HTML
della presentazione 002 <title>Beautiful Food Photo Slideshow</ completamente trasparente). Questo significa che ogni
title> volta che aggiungiamo a un’immagine la classe
003 <meta charset="utf-8"> transparent, la transizione verrà applicata e l’immagine
004 <script src="slideshow.js"></script> passerà da completamente opaca a completamente
Array 005 </head> trasparente nel giro di un secondo. Il metodo di easing
Un array è un insieme di valori. Invece di (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


out;
Gli elementi di un array hanno un ordine implicito, In slideshow.css assicuratevi che il <div> photo 011 -moz-transition: opacity 1s ease-in-out;
quindi in questo esempio l’elemento 7 viene per
riempia tutto lo schermo (righe 1-6) e posizionatelo 012 -o-transition: opacity 1s ease-in-out;
primo, seguito da 3 che a sua volta è seguito da 4. 013 -ms-transition: opacity 1s ease-in-out;
Per accedere a un elemento di un array dovete (righe 7-9). Impostate poi le immagini in modo che
specificare il suo indice (a base zero); in questo caso siano a tutto schermo, e assicuratevi che le loro 014 transition: opacity 1s ease-in-out;
l’elemento 7 si trova all’indice di array 0, 3 all’indice 1 dimensioni siano adatte a qualunque finestra del 015 }
e 4 all’indice 2. browser impostando le proprietà min-width e 016 img.transparent {
Una volta a conoscenza dell’indice di array, potete
min-height dell’immagine su 100% (righe 9-10) e 017 opacity: 0;
accedere a un elemento dell’array, così:
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
08 Creare array contenenti i 10 Caricare il codice
abbaiare? Invece di definire la variabile dogName nomi delle immagini e il testo Nel tutorial precedente abbiamo scritto il codice
nella funzione bark, possiamo passare il nome del Dopo aver creato l’HTML e il CSS, dovete aggiungere il in un elemento <script> nel corpo della pagina, che
cane in un parametro della funzione. In questo comportamento usando JavaScript. Per prima cosa veniva eseguito mentre il browser caricava la pagina
modo potete usare la funzione bark() per far definiremo un set di immagini con le descrizioni HTML. Questa volta inseriremo un file JavaScript nella
abbaiare qualsiasi cane, non solo Fido. Per usare un corrispondenti, e per eseguire questa operazione useremo sezione <head> della pagina. Nell’eseguire questa
parametro basta scrivere il nome della variabile del un tipo di dati chiamato array. Definiremo due array: uno operazione si potrebbe verificare un problema quando il
parametro tra parentesi, subito dopo il nome della contenente i nomi delle immagini per le fotografie e il browser inizia a calcolare il codice JavaScript nell’elemento
funzione, in questo modo: secondo con la descrizione che verrà mostrata sopra <head> prima di aver letto il resto della pagina; questo
ciascuna fotografia. perché il DOM non è stato del tutto creato.
001 function bark(dogName) {

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

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 dissolve l’immagine. Stiamo eseguendo una transizione sul nome della funzione:
Aggiungete una nuova variabile, photoIndex (riga dalla prima immagine alla seconda, quindi dovete
1), che conterrà l’immagine/descrizione successiva a cui si aggiungere la classe transparent alla prima immagine ed 001 window.onload = init;
passerà. Una buona posizione per questa variabile è sotto i eliminarla dalla seconda. Per inserire transparent nella Abbiamo anche usato la proprietà innerHTML
due array creati in precedenza. 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 var photoIndex = 0;
001 function transition() { 001 bottlesDiv.innerHTML = lyrics;

15 Creare una funzione per la


002 photoIndex = photoIndex + 1; Le proprietà sono simili alle variabili, a eccezione
transizione 003 if (photoIndex >= photos.length) { del fatto che vengono associate agli oggetti. Più
Ora scrivete una nuova funzione, transition, che 004 photoIndex = 0; avanti nella serie conoscerete a fondo gli oggetti,
aumenterà il valore di photoIndex di 1 (riga 4), a indicare la 005 } ma per ora pensate a un oggetto come a un
visualizzazione dell’elemento di immagine successivo 006 var currentImg = document. insieme di proprietà con valori. In JavaScript
nell’array. Dovete verificare se abbiamo raggiunto la fine getElementById("one"); esistono diversi oggetti incorporati che userete
dell’array; in caso di esito positivo, impostate photoIndex 007 var newImg = document. molto ogni volta che scrivete web app, come
su 0 così che la prossima volta che la funzione viene getElementById("two"); document, window ed element, che
chiamata parta dall’inizio dell’array. Per vedere se 008 newImg.src = photos[photoIndex]; rappresentano elementi come <div> o <img>.
photoIndex è troppo grosso, usate una proprietà dell’array, 009 var div = document. Potete anche creare oggetti personalizzati, ma di
length. 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. getElementById("description");
Per ora il codice supporta una sola transizione getElementById("two"); 016 div.innerHTML =
dalla prima immagine alla seconda. Per fare in modo che 013 newImg.src = photos[photoIndex]; descriptions[photoIndex];
continuino a verificarsi transizioni tra le immagini ogni 014 var div = document. 017 currentImg.setAttribute("class",
volta che fate clic nella finestra del browser, dovete getElementById("description"); "transparent");
lavorare ancora un po’. 015 div.innerHTML = 018 newImg.setAttribute("class", "");
Useremo una nuova variabile, current, che tiene traccia descriptions[photoIndex]; 019 }
dell’immagine attualmente visibile. Aggiungete la nuova 016 currentImg.setAttribute("class",
variabile al codice JavaScript, sotto a photoIndex, e "transparent"); In questo tutorial abbiamo creato una presentazione
inizializzatela sul valore ‘one’, che è l’id dell’immagine 017 newImg.setAttribute("class", ""); fotografica rotante con HTML e CSS, ma soprattutto,
visibile quando parte l’app (riga 2). 018 } 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 002 background: url(images/image.jpg) Collegare più sfondi
(larghezza) verrà ora stabilito dal secondo valore no-repeat
(altezza). Quest’ultima diventerà il valore statico 003 background-size: 100% auto;} 01 ��� Usare nomi predefiniti
Gli sfondi possono essere posizionati
e verrà automaticamente ridotta/aumentata in
attraverso nomi predefiniti, come per esempio
proporzione alla larghezza, mantenendo ancora
07 Larghezza e altezza centre, top, left, right. Sono perfetti per
una volta il rapporto larghezza/altezza. definite posizionamenti veloci, ma non offrono la
Impostando il primo valore (larghezza) su auto e posizione precisa dell’immagine.
001 #topsection{ il secondo (altezza) su 100%, i risultati non 001 body{
002 background: url(images/image.jpg) saranno soddisfacenti. Se applicato al tag body, 002 background: url(images/star. png),
no-repeat l’immagine si riduce a un’altezza minima. Per url(images/backblur1000.jpg) fixed;
003 background-size: auto 500px; funzionare bene lo sfondo deve trovarsi in un 003 background-position: center
004 } tag div con larghezza e altezza definite. top, bottom left;
004 background-repeat: no-repeat;
05 Percentuali
001 #topsection { 005 }
Per dare maggiore flessibilità alla 002 width: 1900px;
dimensione di un’immagine di sfondo è 003 height: 1500px;
004 background: url(images/backblur1000.jpg) 02 ��� Posizionamento preciso
possibile aggiungere i valori come percentuali. Per posizionare più sfondi in modo più
L’aggiunta di una percentuale come primo no- repeat;
accurato si possono inserire valori specifici al
valore, per esempio 50%, stabilisce che la 005 background-size: auto 100%; posto dei nomi. Per funzionare come
larghezza sarà pari al 50% dello schermo o del 006 } desiderato, essi devono essere aggiunti
nell’ordine corretto.
tag div contenitore. Il secondo valore (altezza)

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 { 001 body{


002 background: url(images/backblur1000.jpg) 002 margin: 0;
Giocare con le
no-repeat fixed;  003 background: url(images/backblur1000.jpg)
percentuali
003 background-size: 100% 1100px;}  no-repeat fixed; 
004 background-size: cover; Prima del supporto di background-

09 Immagini e colori
005 }  size, le immagini di sfondo erano
Una tecnica utilizzata per assicurarsi che limitate alle dimensioni assegnate
un’immagine di sfondo sia adatta a tutte le
13 Sfondi multipli loro durante la creazione
risoluzioni consiste nel mescolare l’immagine di Il comando background-size lavora anche dell’originale.
sfondo a un colore di sfondo; è un’operazione insieme a molte altre proprietà di Non c’era modo di regolare la
facile da implementare con background-size. Il sfondo che consentono l’uso dimensione di un’immagine di
nostro esempio occupa tutto lo schermo, quindi di più sfondi con sfondo; l’unica cosa che poteva
solo la parte inferiore dell’immagine, che è un l’aggiunta di poche Supporto fare un designer era ripetere
unico colore, deve corrispondere al colore di
sfondo.
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
10 Contain dovete
background-size, quindi i nell’usare i tag posizionati in modo
Esistono altri due valori per la proprietà innanzitutto assoluto, le percentuali delle
due possono lavorare
background-size: contain e cover. Il valore indicare le immagini e/o jQuery.
insieme. L’unica piccola
contain scala l’immagine di sfondo mantenendo posizioni. La Tuttavia, l’introduzione di
differenza è che la funzione
le proporzioni originali della grafica. Assicura prima posizione background-size offre agli
non è supportata fino a
che l’immagine sia il più larga possibile, ma è l’immagine che sviluppatori molta più flessibilità e
Opera 10.5.
potrebbe non coprire tutto lo sfondo, come nel si troverà in cima, un workflow migliore.
passaggio 6. quindi assicuratevi che Le immagini di sfondo,
l’immagine di sfondo soprattutto quelle associate al tag
001 body{ venga aggiunta per ultima. body, possono ora essere
002 margin: 0; implementate come desiderato
003 background: url(images/backblur1000.jpg) 001 body{ con alcuni semplici comandi.
no-repeat;  002 background: url(images/star.png), Tuttavia, i valori percentuali
004 background-size: contain; url(images/backblur1000.jpg) fixed; della proprietà background-size
005 }  003 }  funzionano solo quando larghezza
e altezza sono state dichiarate con

11 Cover 14 Ripetere e posizionare dimensioni fisse, per esempio


Il valore cover funziona allo stesso modo Per assicurarsi che le immagini non si 1.900 x 1.200px.
di contain, ma invece di essere contenuta nel tag ripetano, la proprietà background-repeat deve Se la larghezza di un tag div
accompagnatorio l’immagine si espande per essere impostata su no-repeat. Il passo successivo viene definita con un valore
riempire il tag. Il valore usa la dimensione più consiste nel posizionare le immagini che devono percentuale, le percentuali di
piccola e si espande per riempire il tag/finestra. essere aggiunte. Basta usare la proprietà background-size non
Questo significa che parte dell’immagine di background-position. Il primo valore è l’asse funzioneranno come desiderato.
sfondo potrebbe non essere visualizzata. Un’altra orizzontale, mentre il secondo è quella verticale. La situazione varia leggermente
cosa da notare è che l’immagine non scala con la nel tag body, dove vengono
finestra del browser. 001 body{ accettati valori percentuali per la
002 margin: 0; larghezza, anche se non è stata
001 body{ 003 background: url(images/star.png), definita.
002 margin: 0; url(images/backblur1000.jpg) fixed;
003 background: url(images/backblur1000.jpg) 004 background-position: 400px 50px, 0px
no-repeat;  0px;
004 background-size: cover; 005 background-repeat: no-repeat;
005 }  006 } 

12 Immagine fissa a tutto 15 Dimensionare le immagini


schermo Infine, la dimensione di ciascuna immagine
Il valore cover è perfetto per designer e viene stabilita dalla proprietà background-size. 001 body{
sviluppatori che desiderano avere un’immagine a Essa può contenere un valore, per esempio 200px, 002 margin: 0;
tutto schermo usando un’unica riga di codice. o una parola chiave come auto o cover. Di nuovo, i 003 background: url(images/star.png),
Tuttavia, l’immagine di sfondo si muove ancora valori aggiunti devono essere posizionati url(images/backblur1000.jpg) fixed;
verticalmente, e questo può causare problemi nell’ordine corretto per assicurare che gli sfondi 004 background-position: 400px 50px, 0px 0px;
con il contenuto, quindi vi consigliamo di appaiano come desiderato. Se viene aggiunto un 005 background-repeat: no-repeat;
impostare la posizione dello sfondo su fixed, per valore singolo, per esempio 100px, si presuppone 006 background-size: 100px, cover;
mantenere l’effetto a tutto schermo. che l’altro valore sia uguale. 007 } 

50t��������������������������������������������� tutorial
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 troppo le cose, gli stili e il codice dello script verranno
06 jQuery
Inizieremo ispirandoci direttamente alla inseriti in questo file. Visitate http://jquery.com e scaricate l’ultima
visualizzazione di Tori’s Eye e progetteremo una replica in Per rapidità abbiamo inserito la pagina HTML di base versione della libreria. jQuery ci consente di interagire più
Illustrator. Il file è reperibile sul CD, ma per ottenere le sul CD, basta aprire ‘start.html’. facilmente con i vari elementi della pagina e di creare le
texture usate dovete visitare www.sxc.hu e cercare le animazioni. A questo scopo, lo installeremo in cima alla
immagini relative alla carta e al metallo arrugginito. Noi 001 <html> pagina e sotto imposteremo una funzione che accoglierà
abbiamo inserito lo sfondo e gli uccelli su livelli diversi per 002 <head> tutto il codice, così che la visualizzazione possa funzionare.
poterli esportare più facilmente in seguito. 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
014 </body> state creando un’applicazione completa, dovete usare una
Nel sito Tori’s Eye gli alberi si trovano in un livello 015 </html> chiave API specifica per gli sviluppatori, ma per i nostri
separato sopra gli uccelli, così che questi ultimi possano scopi sarà sufficiente la versione pubblica. Possiamo
volare sotto di essi. Noi abbiamo deciso di non imitare
05 Aggiungere il CSS chiamarla con il metodo JSON di jQuery. Da notare che
questo aspetto per questioni di semplicità, ma abbiamo Applicate il seguente CSS; il codice completo è viene passato un termine di ricerca che restituirà i tweet
inserito gli alberi in un livello PNG trasparente nel caso più reperibile sul CD. corrispondenti, quindi potete cambiarlo in base alle vostre
avanti si volessero replicare i livelli. Tutte le immagini sono necessità. Il codice completo è reperibile sul CD.
reperibili sul CD allegato alla rivista. 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 è sullo schermo. Abbiamo già impostato il contenitore su nella stessa posizione verticale altrimenti l’animazione
reperibile sul CD. overflow:hidden, quindi potremo posizionare gli uccelli sarà troppo monotona; per evitare quindi questa
in modo che partano esternamente all’area visibile e poi situazione dobbiamo impostare una posizione iniziale
001 $.getJSON(url, function(data){ animarli in posizione. Aggiungete il codice CSS seguente casuale. Dobbiamo anche memorizzare il valore speed
002 $.each(data.results, function(i,item){ per impostare la posizione iniziale di ciascun <li>. Il di ciascun uccello, operazione che può essere eseguita
003 tweets.append('<li><div><img src="' + item. codice completo è reperibile sul CD. con il metodo .data() in jQuery. Per impostare la
profile_image_url +'" alt="' + posizione verticale e memorizzare la velocità,
004 item.from_user + '" width="73" 001 #tweets { aggiungete il codice seguente. Per ciascun <li> abbiamo
height="73" /><p><a href="http://twitter. 002 position: absolute; anche impostato la posizione orizzontale su offset.
com/'+item.from_user 003 top: 0;
005 +'/statuses/'+item.id+'" title="Click 004 left: 0; 001 var offsettop=Math.floor(Math.
here to view this on twitter">'+item.from_ 005 width: 2000px; random()*400)+10;
user+'</a> at 006 margin-left: -300px; 002 $("#tweets li:last").data("speed",speed).
006 '+item.created_at+': '+item.text. css({top:of fsettop,right:2000+(i*30)});

12 Creare le variabili di velocità


replace(/(\w+:\/\/[A-Za-z0-9-_]+\.
[A-Za-z0-9-_:%&\?\/.=]+)/gi, '<a per gli uccelli 15 Muovere gli oggetti 1
007 href="$1">$1</a>').replace(/ Genereremo una variabile speed per ciascuna voce di Sebbene jQuery disponga del metodo
[\@]+([A-Za-z0-9-_]+)/gi, '<a href="http:// elenco ed eseguiremo periodicamente una funzione animate(), useremo una semplice funzione setInterval e
twitter.com/$1">@$1</ per impostare la posizione dell’uccello. Ogni volta che la imposteremo la posizione di ciascun uccello
funzione parte, useremo la variabile speed per esclusivamente con i CSS. In questo modo potremo

09 Output dei risultati riposizionare la voce di elenco in base a un valore controllare più facilmente la frequenza dei fotogrammi e
Il codice genera una voce di elenco (<li>) per definito, e ripeteremo l’esecuzione della funzione così ottenere risultati più prevedibili. Per iniziare abbiamo
ciascun tweet, inserendo i contenuti del tweet in un tag che le voci di elenco vengano animate sulla pagina. bisogno di una funzione che viene attivata
<div>. Più avanti lo useremo per mostrare e nascondere il periodicamente: aggiungete il codice seguente per
tweet, ma per ora, non appena il codice ha terminato il
13 Generare valori casuali crearla.
suo lavoro, dovreste avere 15 voci di elenco. Per impostare la velocità di ciascun uccello
useremo numeri casuali, così che non volino sullo 001 var t = setInterval(function(){

10 Verifica schermo alla stessa velocità. JavaScript ci consente di 002 // we’ll set the position of each bird every 30
Vale la pena assicurarvi che lo script carichi i generare numeri casuali attraverso la funzione Math. milliseconds
tweet e li mostri nell’HTML. Sebbene l’aspetto non sia random(). Aggiungete il codice seguente per chiamare 003 },30);
dei migliori, è un metodo rapido per verificare che tutto un numero casuale compreso tra 0 e 9 che rappresenta
funzioni a dovere. Dopo averlo caricato nel browser ed la velocità di ogni uccello.
16 Muovere gli oggetti 2
esservi accertati che tutti i tweet vengono caricati, Ogni volta che parte la funzione dobbiamo
potete passare al prossimo punto. 001 var speed=Math.floor(Math.random()*10)+1; aggiornare la posizione di ogni uccello in base al punto
in cui si trova sullo schermo. Aggiungete il codice di

11 Applicare lo stile 14 Impostare la posizione di questo passaggio per recuperare la velocità di ciascun
Occupiamoci innanzitutto dell’aspetto. Ciascuna partenza uccello dall’oggetto data() e aggiornare la sua posizione
voce di elenco diventerà un uccello che animeremo Tuttavia, non vogliamo che tutti gli uccelli si trovino di conseguenza. Il codice completo è reperibile sul CD.

54 _____________________________________________ tutorial
<Tutorial>
Creare animazioni interattive da un feed Twitter

21 Ultimi ritocchi
001 var t = setInterval(function(){ 004 $(this).css({zIndex:1000});
002 $("#tweets li").each(function(){ 005 },function(){ Quando testate la pagina vi accorgerete
003 // grab the speed variable 006 $(this).removeClass("hover"); probabilmente che occorre modificare alcuni dei valori,
004 speed = $(this).data("speed"); 007 }); sopratutto la generazione del numero casuale e il ritardo
005 // and the current position di setInterval, dal momento che influiscono sulla velocità

19 Ancora stile
006 xpos = $(this).css("left"); degli uccelli sullo schermo. Provate valori diversi per
007 // if the bird is off the left hand side of the Ora che gli uccelli volano sullo schermo, sarebbe vedere l’effetto che producono.
screen, reset it to the right bello fare in modo che i tweet appaiano solo quando il
mouse passa sopra ciascuno di essi. Modificheremo
22 Un po’ di creatività
17 L’ora della verità leggermente il modo in cui vengono mostrati La vostra visualizzazione dovrebbe ora essere
È arrivato il momento di aprire la pagina e testarla. contemporaneamente i tweet. Aggiungete il codice CSS perfetta. Testate la pagina in tutti i browser di destinazione
Dovrebbe andare tutto bene: dopo una breve attesa seguente per nascondere i tweet finché non si verifica e verificate che tutto funzioni a dovere. Ora potete
durante la quale il feed Twitter viene caricato, gli uccelli l’evento di mouseover e conferire loro un aspetto migliore. considerare l’idea di estenderne la funzionalità così che gli
dovrebbero volare sullo schermo accompagnati dai tweet. Il codice completo di questo passaggio è reperibile sul CD. utenti possano inserire i propri termini di ricerca, o in
Abbiamo quasi finito, ci manca solo qualche ritocco finale! modo che alcuni uccelli si muovano più velocemente/
001 #tweets li div { lentamente di altri: date libero sfogo alla vostra creatività!

18 Momento di riflessione
002 display: none;
La prima cosa che avrete notato è che risulta un 003 padding: 10px;
po’ difficile leggere i tweet mentre passano sullo schermo. 004 background: rgba(0,0,0,0.7);
Dobbiamo fare in modo che gli uccelli si fermino quando 005 color: #fff;
006 min-height: 93px;
Muovere
il cursore passa sopra di essi, e che ripartano quando il
mouse si allontana; a questo scopo aggiungiamo una 007 margin-top: 100px; gli alberi
Se desiderate che gli uccelli volino
clausola alla funzione di animazione e una classe all’uccello
fra gli alberi, realizzate ciascun
quando il cursore passa sopra di esso, per escluderlo
20 Altro rapido test albero come una PNG trasparente e
dall’animazione. Se verificate nuovamente la pagina noterete che
separata e aggiungete un <div>
ora gli uccelli non sono accompagnati dai tweet e che,
001 $("#tweets li").not(".hover"). extra per ciascuno di essi. Fate in
quando spostate il mouse sopra uno di essi, questo si
each(functio… modo che ogni albero sia
ferma e sotto appare il “cinguettio”. Con tali modifiche
002 $("#tweets li").hover(function(){ posizionato in modo assoluto e
riteniamo che la pagina sia più fluida, ed è più divertente
003 $(this).addClass("hover"); sistemateli in cima allo stack
interagire con i messaggi di Twitter!
z-index.

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 <sopra>
script. Per saperne di più sul funzionamento di • La pagina finale carica i tweet e crea uccelli volanti. Quando passate il mouse sopra ogni volatile, il tweet appare
JSON, visitate http://json.org. sotto in un riquadro ben realizzato

tutorial _____________________________________________ 55
<Tutorial>
Post a tutta larghezza per i temi WordPress

Post a tutta 01 Recuperare i file del tema


Per i nostri scopi useremo una versione
speciale del tema per blog Notes, che solitamente

larghezza
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

per i temi
CD allegato alla rivista.

02 Familiarizzare con single.


php

WordPress
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

A volte le barre laterali dei post barra laterale, (sidebar.php), che naturalmente è la
parte che ci interessa di più. Infine, il footer (footer.
WordPress sono molto fastidiose. php) chiude il cerchio.

Ecco come rimuoverle, dandovi SUL CD 001 <?php get_header(); ?>


l’opportunità di decidere del loro • Tutti i file .PHP
del tema
necessari
002 <div id="content" class="widecolumn">
003 <?php
destino per ogni singolo post • Codice completo
dei passaggi 004 // Look for loop-single.php,
fallback to loop.php
strumenti | tecnologie | tendenze WordPress
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

A
come commento il tag get_sidebar(), usando la
lcuni temi hanno una barra laterale nella seguente espressione:
singola finestra del post, mentre altri no.
Ma perché prendere questa decisione a 001 <!-- ?php get_sidebar(); ? -->
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
<sopra> tema pensava fosse giusto così.
• A volte la barra laterale è una parte
fondamentale del post, altre volte In questo tutorial impareremo innanzitutto a eliminare
occupa solo spazio prezioso. È la barra laterale dal file del template, e poi useremo un
consigliabile conoscere una rapida
opzione per eliminare una barra campo personalizzato per decidere se deve essere
laterale 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 La barra laterale destra è sparita dai singoli post

per la maggior parte dei temi, quindi dovreste essere in Ora nei singoli post non ci sarà alcuna barra
grado di applicare la soluzione a qualunque tema stiate laterale, dal momento che abbiamo eliminato tale
usando. elemento.

04 Lavorare in style.css
...potete decidere consapevolmente se Ora che ci siamo sbarazzati della barra

visualizzare o meno la barra laterale, a


laterale dobbiamo migliorare l’aspetto della
finestra del post; per esempio, dove prima c’era la

seconda del contenuto


barra laterale adesso c’è un enorme spazio vuoto
che ovviamente non può rimanere lì. Per risolvere

56 _____________________________________________ tutorial
<Tutorial>
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

il problema dobbiamo usare gli stili CSS, quindi aprite bisogno di una soluzione più flessibile. Si tratta dei a seconda che la barra laterale sia presente o meno. La
style.css. Supponiamo di voler centrare il contenuto campi personalizzati. inseriremo in #content, e il valore del campo
della colonna: dovremo localizzare la seguente riga: personalizzato chiamato sidebar verrà diramato nella

001 div.post, div.page, div.attachment, div. 08 La soluzione classe: questo significa che se è impostata potremo
Nel tema useremo i campi personalizzati per usare la classe nosidebar.
hentry { margin: 20px 0 40px 20px; clear:both; due motivi: il primo è che dobbiamo verificare se
} /* 640 pixels */ l’utente ha deciso di nascondere o lasciare visibile la 001 <div id="content" class="widecolumn <?php
barra laterale. Se è nascosta, dobbiamo usare stili echo get_post_meta($post->ID, 'sidebar', true); ?>

05 Centrare il div del post differenti così che il resto del sito non sia così diverso
Proviamo ora a posizionare in single.php il da come è adesso. Creare un campo personalizzato è
11 Stile di div.nosidebar
contenuto al centro. La larghezza completa a nostra semplice. Basta aprire la schermata Modifica articolo Rivediamo ora style.css per sistemare gli stili.
disposizione misura 960px, mentre la colonna del dopo aver attivato la casella Campi personalizzati Innanzitutto, eliminate width: 100%; da div#content e
contenuto è larga 640px. Questo significa che attraverso il menu Impostazioni schermo in alto a aggiungete div.nosidebar con la larghezza completa.
dobbiamo spostare il contenuto di 160px dal margine destra.
sinistro (al quale si allinea) così che appaia al centro. 001 div#content {

09 Controllo del campo


Dobbiamo quindi sostituire la riga seguente: 002 float: left;
personalizzato 003 }
001 div.post, div.page, div.attachment, div. Per recuperare e reagire al valore di un campo 004 div.nosidebar { width: 100%; }
hentry { margin: 20px 0 40px 20px; clear:both; personalizzato e per controllare in single.php se

12 Stile di div.post
} /* 640 pixels */ mostrare o meno la barra laterale, useremo get_post_
con questa: meta(). Sostituite il tag get_sidebar() con quanto Successivamente, dobbiamo fare in modo che
segue: div.post torni normale per tutte le occasioni in cui è
001 div.post, div.page, div.attachment, div. presente la barra laterale. Questo è il codice:
hentry { width: 640px; margin: 20px 0 40px 001 <?php
160px; clear:both; } /* 640 pixels */ 002 // Is sidebar NOT set to Off we'll output it, 001 div.post, div.page, div.attachment, div.
otherwise not hentry { margin: 20px 0 40px 20px; clear:both;

06 Colonna a tutta larghezza


003 $custom_field = get_post_meta($post->ID, } /* 640 pixels */
Tuttavia, questa operazione non è abbastanza 'sidebar', true); Grazie a div.nosidebar possiamo localizzare div.post
dal momento che è necessario che la colonna 004 $other_value = "nosidebar"; quando non c’è la barra laterale e centrarlo usando:
#content occupi tutta la larghezza. In style.css trovate 005 if ($custom_field != $other_value) {
la seguente riga (intorno alla riga 114): 006 get_sidebar(); 001 div.nosidebar div.post { width:640px;
007 } margin-left: 160px; }
001 div#content {float: left;}. 008 ?>
E aggiungete width: 100%; usando: Ciò che stiamo facendo è memorizzare il valore del
13 Sistemare i commenti
campo personalizzato sidebar $custom_field. Poi Avrete notato che il modulo dei commenti
001 div#content {float: left; width: 100%;}. controlliamo se il valore di $custom_field è diverso da non è allineato correttamente quando la barra laterale
Ora che la colonna #content occupa tutta la larghezza, il quello di $other_value, impostato su ‘nosidebar’. non è presente. Il problema può essere facilmente
div del post deve essere centrato. Quindi, se è presente un campo personalizzato risolto ancora una volta con div.nosidebar. Basta
chiamato sidebar con valore Off, il controllo if non sarà aggiungere a style.css il codice seguente:

07 Ripensamento true e con get_sidebar() non verrà mostrata la barra


001 div.nosidebar div#comments { margin-
Questo formato funziona fino a un certo laterale.
punto, ma non è abbastanza dal momento che le left: 160px; }.
modifiche al CSS avranno conseguenze anche sul
10 Aggiungere una classe In questo modo vi assicurate che il div che contiene i
resto del sito. Inoltre, a volte desideriamo che in alcuni Abbiamo anche bisogno di una classe CSS con commenti venga allineato correttamente quando la
post la barra laterale sia visibile, quindi abbiamo cui lavorare, in modo da poter usare uno stile diverso barra laterale è assente.

tutorial _____________________________________________ 57
<Tutorial>
Post a tutta larghezza per i temi WordPress

<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

14 Testare 004 wp_nonce_field( plugin_basename( __FILE__ ),


stesso modo, ma con update_post_meta() al posto
Questo è tutto ciò che dobbiamo fare così che dell’operazione manuale. Noterete che il controllo
le cose funzionino. Sperimentate nel vostro browser 'notesblogsidebar_noncename' ); if/else si trova alla fine e salva 1 o 0 a seconda che
per verificare che tutto dia i risultati desiderati. 005 // The actual fields for data entry la casella di controllo sia spuntata o meno.
006 echo '<label for="notesblogsidebar_new_

15 Aggiungere una casella di


field">'; 001 // Update (or create) post meta sidebar
controllo 007 _e('Check box to hide the sidebar on this 002 update_post_meta( $post_id, 'sidebar',
I campi personalizzati non sono molto agevoli per gli post.', 'notesblog' ); ($_ POST
utenti, quindi creeremo un riquadro personalizzato 008 echo '</label>'; 003 ['notesblogsidebar_new_field'] ? 1:0) );
con una casella di controllo. Aprite functions.php e 009 $checked = get_post_meta($post->ID, 004 }
inserite quanto segue: 'sidebar', true); Con questo codice in functions.php otterremo un
010 echo '<br /><br /><input type="checkbox" riquadro separato con una casella di controllo e
001 // CUSTOM SETTINGS BOX 011 id="notesblogsidebar_new_field" non dovremo preoccuparci più del campo
002 // Defining custom box for sidebar settings 012 name="notesblogsidebar_new_field" personalizzato nella sezione admin di WordPress.
003 // Add and save the data value="nosidebar" '.

18 Rivedere single.php
004 add_action( 'add_meta_boxes', 013 ($checked ? 'checked="checked"' : '' ). ' />
005 'notesblogsidebar_add_custom_box' ); <strong>Hide sidebar</strong>'; L’uso di una funzione come questa
006 add_action( 'save_post', 'notesblogsidebar_ 014 } comporta la modifica del codice in single.php. Per
save_postdata' ); Dobbiamo anche salvare i dati ed evitare che l’azione prima cosa dobbiamo verificare se il valore meta
007 // Add the box on posts only, to the right (side) avvenga a ogni salvataggio automatico. A questo sidebar contiene 1, e in caso affermativo inviare
008 function notesblogsidebar_add_custom_box() { scopo, inserite la seguente sequenza di codice. nosidebar. Applicate questo codice:
009 add_meta_box(
010 'notesblogsidebar_sectionid', 001 // Save our custom data with post save 001 <div id="content" class="widecolumn
011 __( 'Hide sidebar?', 'notesblog' ), 002 function notesblogsidebar_save_postdata( <?php if ( get_post_meta($post->ID, 'sidebar',
012 'notesblogsidebar_inner_custom_ box', $post_id ) { true) == 1 ): echo 'nosidebar'; endif; ?>">
013 'post', 003 // Don't submit form on autosave Dobbiamo anche cambiare ‘nosidebar’ nel
014 'side' 004 if ( defined( 'DOING_AUTOSAVE' ) && controllo per fare in modo che get_sidebar()
015 ); DOING_AUTOSAVE ) cerchi un valore di 1.
016 } 005 return;
Si aggiunge così l’azione per il riquadro ‘Hide sidebar?’ 006 // Check permissions 001 <?php
creato con add_meta_box(), e i dati vengono salvati. 007 if ( 'page' == $_POST['post_type'] ) 002 // Is sidebar NOT set to Off we'll output it,
Vogliamo che il riquadro appaia sul lato destro, quindi 008 { otherwise not
in add_meta_box() usiamo il parametro side. 009 if ( !current_user_can( 'edit_page', $post_id ) ) 003 $custom_field = get_post_meta($post-
010 return; >ID, 'sidebar', true);

16 Funzionalità del riquadro


011 } 004 $other_value = "1";
Visualizziamo il riquadro creando 012 else 005 if ($custom_field != $other_value) {
notesblogsidebar_inner_custom_box() da add_meta_ 013 { 006 get_sidebar();
box(). 014 if ( !current_user_can( 'edit_post', $post_id ) ) 007 }
015 return; 008 ?>
001 // Output custom box 016 } Ora disponiamo della stessa funzionalità senza
002 function notesblogsidebar_inner_custom_box( dover usare il campo personalizzato così
17 Salvare i metadati
$post ) { temuto. Basta un clic per adattare il vostro
003 // Use nonce for verification Infine, dobbiamo salvare i metadati allo tema!

58 _____________________________________________ tutorial
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 01 Impostare la pagina


Iniziate con una pagina HTML5 di base
contenente un <div>. All’interno del <div> inserite un

menu Cover
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.

Flow con 02 Inserire le classi


Per l’animazione e il posizionamento vogliamo
sfruttare la funzione di rendering degli effetti nativa

jQuery e i CSS3
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
SUL CD dalle singole voci.
Utilizziamo le trasformazioni 3D • Documento

per realizzare un elegante menu 03 A sinistra…


HTML completo
• Tutte le
immagini e le Il nostro effetto Cover Flow richiama le voci a
di navigazione risorse
• Codice sorgente
dei passaggi
sinistra del prodotto corrente in modo che si
sovrappongano a esso ruotando sull’asse Y, così da
strumenti | tecnologie | tendenze Photoshop, Illustrator, Dreamweaver produrre un effetto 3D. Dobbiamo creare un po’ di
o l’editor HTML di vostra scelta (HTML/CSS, JavaScript)
prospettiva e impilare ciascuna voce in modo che si
trovi davanti a quella alla sua sinistra. Iniziamo con la

A
rotazione: aggiungete alla classe .left la seguente
mmettiamolo, i CSS3 sono straordinari. regola:
Per la prima volta dalla nascita del web,
oltre 20 anni fa, possiamo renderizzare gli 001 .coverflow ul li.left {
effetti speciali direttamente nel browser 002 -webkit-transform: rotateY( 45deg );
senza doverci affidare a un plug-in o a script 003 -webkit-transform-origin: 0px;
complicati. Man mano che questo nuovo 004 -moz-transform: scale(0.75, 0.75)
standard viene adottato da tutti i browser, translateY(-20px);
abbiamo più possibilità di sfruttare i nuovi 005 }
strumenti a nostra disposizione, e questo
non può che portare a un livello di interattività più alto
04 …e a destra
senza doverci preoccupare delle prestazioni. Se usate Le voci a destra di quella corrente funzionano
<sopra> regolarmente iTunes, sicuramente conoscete l’effetto come quelle a sinistra, ma si sovrappongono nel
• Un sistema di navigazione in stile
Cover Flow sul vostro sito web è Cover Flow usato per visualizzare tutte le copertine degli senso contrario. Questo significa che dobbiamo
elegante e intuitivo da usare, visto album, che vi permette di fare semplicemente clic per invertire la rotazione dell’asse così che le voci a cui è
che la maggior parte degli utenti
conosce bene quello di iTunes selezionare l’album da riprodurre o di sfogliare i vostri stata applicata la classe .right continuino a
lavori proprio come fareste nella realtà. Come concetto di fronteggiare il prodotto corrente. Aggiungete alla
navigazione Cover Flow è interessante. Potete vedere classe .right la seguente regola:
un’anteprima completa di quello che state selezionando, o
scorrere facilmente un lungo elenco di opzioni. E, inoltre, 001 .coverflow ul li.right {
tutto ciò avviene in un’area relativamente piccola dello 002 -webkit-transform: rotateY( -45deg );
schermo. In questo tutorial useremo i CSS3 per creare un 003 -webkit-transform-origin: 400px;
menu di navigazione in stile Cover Flow con trasformazioni 004 -moz-transform: scale(0.75, 0.75)
3D che consentono di sfogliare le opzioni proprio come in translateY(-20px);
iTunes. Per non farci mancare niente, questo menu 005 }
supporterà sia il mouse che la tastiera.

05 Un po’ di prospettiva
Creeremo un menu di navigazione in
L’ultima cosa da fare prima di verificare il
nostro lavoro consiste nel dare un po’ di prospettiva

stile Cover Flow con trasformazioni 3D che


alla viewport. La aggiungeremo attraverso la regola
-webkit-perspective e la applicheremo al <div>

consentono di sfogliare le opzioni proprio


genitore. In questo modo ci assicuriamo che mentre
scorriamo le voci il punto prospettico rimarrà lo

come in iTunes
stesso. Dobbiamo anche indicare a <ul> di conservare
l’effetto 3D. Aggiungete quindi le seguenti regole:

60 _____________________________________________ tutorial
<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>

08 Precedenza
06 Assegnare le classi e testare È tutto perfetto, ma la voce correntemente
10 Creare un documento JS
Dobbiamo assicurarci di non aver commesso selezionata, quella senza una classe left o right, si deve Abbiamo anche bisogno di un punto in cui
errori. Aggiungete una classe left alla prima voce trovare davanti a tutte le altre e deve anche essere un salvare i nostri script, così da poter aggiungere lo
dell’elenco e una classe right alla terza voce, quindi po’ più grande per dimostrare la sua precedenza. scambio di classe alle voci: create quindi un
aprite la pagina in Google Chrome o Apple Safari per Creiamo una nuova classe e aggiungiamo alcune documento vuoto e salvatelo come ‘coverflow.js’ nella
verificare che la trasformazione funzioni come trasformazioni per ottenere questo risultato. Inserite cartella Scripts. Aggiungete al documento un
previsto. nel foglio di stile il codice seguente: 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. 005 margin-right: -100px;
Per risolvere il problema basta usare i margini negativi 006 -webkit-transform-origin: 200px; Se non lo avete già fatto, eliminate le classi dalle
per avvicinare le voci così che si sovrappongano 007 -webkit-transform: translateZ(100px); voci di elenco e aggiungete al documento coverflow.js
completamente. Aggiungete le regole seguenti agli 008 z-index:1000; un po’ di nuovo codice, come mostrato di seguito. In
stili .coverflow ul li { }. Noterete che viene anche 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
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
La nuova beta per la pubblicazione • Cartella Muse
estremamente potente. Non è dedicato ai
programmatori, e la maggior parte di essi
delle pagine sposta l’attenzione sul
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
05 Footer e sfondo
(Stroke impostato su None), disegnate Usando lo stesso processo, create un footer e impostate
un riquadro per l’header. Nel pannello l’immagine di sfondo su ‘footer.png’. Disegnate un rettangolo sotto il
Fill, cercate ‘top.png’ nella cartella titolo (a 155px e largo tutto lo schermo), applicando ‘pattern.png’.
Assets. Impostate su repeat horizontally Mandatelo dietro come mostrato in figura. Fate clic sulla pagina e,
e il colore di sfondo su None. ancora una volta, impostate Stroke su None.

Pin di un’immagine

06 Aggiungere un 07 Impostare il menu Impostazioni


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

08 Aggiungere il testo 09 Homepage


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

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ì Impostate Transition su Fading. Selezionate la
che si adatti all’immagine. Fate clic sull’icona numero 2 nella presentazione e aggiungete uno sfondo marrone chiaro e
presentazione e aggiungete ‘presentation2.jpg’, ripetendo il processo un tratto di 12px sul bordo. Selezionate Rectangle e
anche per ‘presentation3.jpg’. Ora selezionate la freccia blu per modificare disegnate vicino a uno dei bordi un riquadro largo quanto
la presentazione. 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 Fate clic nella lightbox per aggiungere
aprirla. Aggiungete ora una lightbox selezionando Object>Insert l’immagine, che viene inserita dietro la grafica
Composition. La pagina non si ingrandirà per ospitarla, quindi fate corrente. Fate clic finché verrà selezionata la prima
clic sulla freccia blu e impostate Position su Stacked. Ora la pagina si immagine e cancellatela per far apparire la vostra. Ora
espande per contenere le immagini. Selezionate File>Place e selezionate la seconda miniatura e ripetete il processo,
importate l’immagine ‘lightbox1.jpg’. 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.

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
Pochi colori Attirare l’attenzione Ottimizzare gli spazi
questo video è visibile
Una palette dei colori Video ispiratori in stile motion Oltre al fatto che il video è a tutto
su tablet e browser
limitata consente di graphic arricchiscono schermo, il contenuto è stato
moderni.
comprimere meglio il l’esperienza. Se dovete usare progettato tenendo conto della
video, che di conseguenza un’introduzione, assicuratevi che dimensione del browser; di
viene caricato più faccia una buona impressione sul conseguenza nel design non
velocemente. pubblico. appaiono pannelli vuoti.

68 _______________________________________ web workshop


<Tutorial>
Sequenze video HTML5 a tutto schermo

Riproduzione su dispositivi diversi


“L’uso nel sito di video a tutto schermo è importante per la user experience
3 TECNICA
e per questo motivo i designer, Dilshan Arukatti e Sylvain Tran, non hanno Convertire il video
voluto escludere i visitatori che usano un determinato tablet. Di Uno dei principali problemi dei professionisti
<Commento> conseguenza, per assicurare un’esperienza a 360 gradi su tutte le del web è convertire i video nei formati
Gli esperti
dicono la loro piattaforme e a tutti i visitatori, nel sito hanno scelto di usare video HTML5.” HTML5 necessari. MP4, Ogg Theora e WebM
su questo sito Mark Shufflebottom, www.webspaceinvader.com
sono i più importanti; ecco uno strumento
che consente la conversione.

2 TECNICA Video HTML5 a tutto schermo


01 Usare jQuery per il minima corrispondente all’altezza della finestra del
ridimensionamento browser e una larghezza tale da riempire la finestra del
Per gestire il video e il suo ridimensionamento useremo un browser. Il passo successivo consiste nell’assicurarsi che
plug-in per jQuery. Scaricatelo da http://syddev.com/ venga nascosta qualsiasi eccedenza; in questo modo si
jquery.videoBG. Aprite Dreamweaver e create una nuova evita che in alcuni browser appaia una barra di
pagina HTML5. Aggiungete il seguente tag div alla sezione scorrimento che potrebbe rovinare l’esperienza
body del sito. Esso conterrà il video HTML5 a tutto coinvolgente. 01 Recuperare il convertitore
schermo; per fare in modo che riempia la finestra del Per convertire un video nei diversi
browser useremo i CSS. 001 #fullBrowser { formati serve uno strumento adatto allo scopo
002 min-height: 100%; e fortunatamente Miro Video Converter è
001 <div id="fullBrowser"></div> 003 width: 100%; disponibile sia per Mac che per PC (www.
004 overflow: hidden; mirovideoconverter.com). Entrate nel sito e

02 Impostare la pagina
005 } scaricate il software per la vostra piattaforma.
Ora aggiungete alla sezione head della pagina 006 </style>
web il seguente codice CSS, che indica ai tag html e body
di riempire completamente in altezza la finestra del
04 Collegamento a JavaScript
browser. È una parte importante per fare in modo che il Subito sotto il CSS nella sezione head, eseguite un
tag div riempia la finestra del browser. Successivamente la collegamento all’ultima versione di jQuery e al plug-in
sezione body viene impostata così che abbia un margine video di jQuery. Consentirete così al plug-in di funzionare
di 0 pixel e il nero come colore di sfondo. e, di conseguenza, di caricare il video. I tag script vuoti
servono per inserire il codice nel prossimo passaggio.
001 <style type="text/css">
002 html, body { 001 <script type="text/javascript"
003 height: 100%; src="http://code.jquery.com/jquery-
004 } 1.6.4.min.js"></script>
005 body { 002 <script type="text/javascript" 02 Scegliere il video
Dopo aver scaricato il software,
006 margin: 0px; src="jquery.videoBG.js"></script> installatelo sul vostro computer. Lanciate il
007 background-color: #000; 003 <script> programma e apparirà una piccola finestra per
008 } 004 </script> l’app. Basta trascinare nel pannello centrale il
video che volete convertire.

03 Estendere il div 05 Caricare il video


Qui il CSS si rivolge direttamente al tag div creato Per caricare il video nel tag div fullBrowser
nel passaggio 1. Viene indicato che deve avere un’altezza 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
Tecnica
Il video viene riprodotto nel browser a tutto 006 scale:true, le opzioni MP4, Theora e WebM. Sceglietene
schermo e viene usato come elemento di 007 zIndex:0 una e premete il pulsante Convert. Ripetete
sfondo per il div: in questo modo il contenuto 008 }); questo passaggio finché avete convertito il
può essere facilmente visualizzato sopra. 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 è nuvole che si sovrappongono.” Profondità
stato caldeggiato a lungo, Alexander ritiene che i design web in Il design dei personaggi
soprattutto nel settore stile cartoon siano attraenti perché si e gli stili illustrativi
commerciale, oltre che da differenziano dai soliti layout basati solitamente sono
bidimensionali. È
chi cerca di alleggerire la sulla griglia. “Sono estremamente
possibile dare maggiore
propria immagine diversi dalla moltitudine di design profondità attraverso i
aziendale attraverso presente sul web,” continua. “Penso gradienti.
immagini divertenti e da anche che l’inserimento in un sito di una
chi desidera intrattenere un “mascotte” possa conferirgli un aspetto
pubblico giovane. Chris Alexander, più amichevole e umano e fornirvi un
autore e proprietario del sito www. motivo per essere ricordati.” Quando si
yipori.com, è un perfetto esempio di tratta di scelta dei colori, non si può
designer che ha voluto massimizzare certo affermare che il suo lavoro manchi
l’aspetto del suo sito attraverso questo di coraggio: la palette dei colori è
stile. Ha anche ricevuto diversi composta principalmente da toni Testo
Il testo caratterizzato dal
riconoscimenti per il suo lavoro, come ci brillanti, smorzati da determinati font Arial standard
spiega: “Sono molto felice di aver vinto elementi. Come spiega Alexander: “Ho mescolato a uno stile
dei premi per il mio sito. Grazie alla sua inserito numerosi colori accesi, quindi scritto a mano crea un
natura grafica, i CSS usati per alcuni per non eccedere tutti gli elementi di senso di coerenza con i
vari personaggi illustrati.
elementi del sito, come l’header, sono sfondo sono leggermente più spenti e
limitati. Ma io adoro la flessibilità dei usano colori naturali come il marrone,
CSS, che mi hanno aiutato a fare in mentre le voci di menu e i riquadri dei
modo che il mio sito fosse originale, con contenuti hanno colori più saturi come
elementi come il footer composto da 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 02 Stili di livello
appena entrate nella Si possono applicare ai livelli Forma dalle
homepage vi fate subito opzioni di fusione della palette Livelli. I comandi
un’idea del contenuto più adatti sono: Sovrapposizione sfumatura, che
del sito.
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 creare design fuori dagli schemi e
digitale del Sud Africa. Adora trasformare un’idea ordinaria in
l’eleganza, il design innovativo e ama qualcosa di indimenticabile.”
creare esperienze web indimenticabili. Come figlia di diplomatici, Elandré ha
“Ho sempre apprezzato l’eleganza e il vissuto e viaggiato in tutto il mondo,
design innovativo. Portarli sul web mi ha incontrato persone incredibili e visitato
permesso di migliorare come designer e luoghi incantevoli. Le sue spedizioni
di creare qualcosa che funziona e che intorno al mondo e i suoi soggiorni a
lega il pubblico,” commenta. Il design e Londra e Parigi hanno influenzato il suo
lo sviluppo web hanno allargato i suoi lavoro e le consentono di affrontare
orizzonti e hanno spinto Elandré a ogni nuovo progetto in modo diverso,
realizzare design straordinari, user soddisfando i requisiti unici e
friendly accattivanti ed estremamente accontentando i clienti che di
pratici. “Poter trasformare i miei design conseguenza le commissionano altri
in esperienze web completamente lavori. “Il web connette persone di tutto
funzionali mi rende felice e mi ripaga il mondo. Il nostro lavoro come designer
delle ore di lavoro spese. Adoro il fatto e sviluppatori può essere visto da
che l’industria del web sia in continua milioni di persone; se si divertono è un
evoluzione; c’è sempre qualcosa di lavoro ben fatto [per quello che mi
nuovo da imparare, che mi permette di riguarda].”

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

03
01 02 Questo sito mescola diversi elementi naturali,
Incognito Design Studio è il portfolio online di Elandré e Evelynne Franck è un’artista esperta in vari metodi di sottolineando l’aspetto di vita all’aperto e
mostra i suoi lavori e i servizi che offre, consentendo ai pittura. Il sito offre una collezione di lavori originali come conferendo a prodotti e servizi di Emerald Outdoor
visitatori di sperimentare il suo stile di design unico. parte del design, per mostrare il suo talento. 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
Nato in USSR e cresciuto in Lettonia, lavoro a momenti di riposo. Dopo aver
Andreas ha iniziato a lavorare con passato diverse ore al computer si avverte la
marchi famosi in giovane età. Essendo necessità di uscire: fare una passeggiata in
uno dei primi web designer dell’Europa riva al mare, andare a cena con gli amici o
dell’Est, ha acquisito lavori per aziende fare un po’ di sport. Trae ispirazione da
americane ed europee. Andreas ha lavorato qualsiasi cosa: scatti fotografici casuali,
con Saatchi & Saatchi e BBDO e ha lanciato persone belle, film nuovi e classici, libri, città
progetti interattivi per Bacardi, Warner Bros, e paesaggi mozzafiato. Come libero
NBC, Universal, Paramount Pictures, 20th professionista, Andreas si sente libero di
Century Fox e Disney. Le sue interviste e i esprimere qualunque idea creativa o
suoi design sono stati pubblicati nelle inaspettata: un grande vantaggio per
riviste di tutto il mondo. Ha anche lavorato restare indipendente. Tuttavia, ogni giorno
02 http://disney.go.com/disneypictures/marsneedsmoms come art director in una delle principali esplora nuove tecniche usate nell’industria
agenzie digitali di Mosca e ha partecipato web. Blog e forum che parlano di creatività
con successo a campagne di marketing per e vengono costantemente aggiornati sono
diverse pop star russe. La sua ricetta per il una fonte preziosa per restare al passo con
successo consiste nell’alternare periodi di le ultime tendenze.

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

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

01 02 03 04 05
Rise of the Planet of the Apes. Ad Mars Needs Moms. E’ una Lo stile aziendale di questo Devil. Il concetto di questo sito Il giovane Avatar è in missione per
Andreas piaceva l’idea dell’occhio animazione digitale e i marchio è stato seguito con cura web si basa sul modello 3D di un unire i quattro elementi. Per
di scimmia che guarda gli utenti. Il personaggi sono eroi 3D che e l’obiettivo è far assaporare il ascensore. Creato partendo da illustrare l’esperienza online, il sito
menu è sempre in movimento. aiutano a navigare nel sito. gusto della bevanda rinfrescante. bozzetti forniti dalla Universal. 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
www.mutado.com
dell’economia italiana. Centro Mutado è un’agenzia digitale
indipendente che adora le cose
urbano che attrae e integra semplici. La nascita di Mutado, nel 2004, è
intelligenza, eccellenza stata dettata dal desiderio di rompere gli
professionale e talento, Milano è schemi e distaccarsi dai tradizionali modelli
gerarchici e strutturati della comunicazione
un marchio in sé: la vera capitale
on e offline. Mutado mescola l’esperienza e
del design. È una metropoli la passione dei suoi fondatori, design grafico
all’avanguardia e piena di e tecnologia, con il know-how nel settore
energia, e le opportunità che marketing. L’agenzia si occupa
principalmente di web e progetti visuali e
offre in una vasta gamma di oltre un anno fa ha istituito un intero team
settori attraggono milioni di dedicato esclusivamente allo sviluppo
persone ogni anno. 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.
Mark Palmer

Accessibilità: un fattore complesso ma fondamentale


da non dimenticare mai

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

“ Designer e sviluppatori possono evitare gran parte delle barriere di


accessibilità fin dalla fase iniziale del design

80 ____________________________________________ opinione
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
<Contenuti CD>
Programmi e molto altro...
Wijmo
Effetto fuoco Fonte: http://wijmo.com
Megafont Starter
Fonte: www.ultrashock.com Wijmo è una raccolta di widget che Edition 2011
Questo file non devono mai mancare nell’arsenale Questo set
sorgente Flash di un designer: dai menu interattivi a completo
davvero unico splendidi grafici. È così facile da usare di font è
offertoci da che con una sola riga di codice jQuery perfetto per
Ultrashock potete realizzare un’interfaccia utente chiunque,
“accende” qualsiasi clip filmato statico interattiva. dagli utenti business agli amatori. Offre
(contenente testo, loghi e/o immagini). infatti una vasta gamma di design di font
L’effetto può essere perfezionato e adatti a qualsiasi situazione e occasione.
personalizzato modificando il codice
ActionScript 3.

CD danneggiati Aiuto
Se, acquistando la rivista, scoprite Per assistenza nell’uso
che il CD è graffiato, presenta del CD-ROM, potete inviare
imperfezioni o incrinature, un’email allo stesso indirizzo.
restituitelo a: Play Media La Redazione non fornisce
Company - Via di Santa Cornelia, assistenza per il software una volta
5/A - 00060 Formello (RM) installato. Tutto il software viene
per una sostituzione gratuita. controllato affinché non presenti
Se il CD non è presente, virus. La Play Media Company
inviate un’email all’indirizzo declina qualsiasi responsabilità
webdesigner@playmediacompany.it. per perdite o danni causati
Ve ne verrà inviato uno direttamente o indirettamente
senza costi aggiuntivi. dall’uso del presente CD-ROM.

SkyAlbum Photo Digital Scroller 1.0 File dei tutorial


Gallery Builder L’applet Java Digital Scroller è gratuita
e può essere facilmente incorporata
Per seguire al meglio
i tutorial illustrati
Software freeware di facile utilizzo che nelle vostre pagine web. Controllata in questo numero,
consente di creare straordinarie gallerie dai parametri forniti dal documento sono inclusi tutti
fotografiche Flash in pochi clic e di caricarle HTML, consente di visualizzare una i file sorgente e
sullo spazio web gratuito SkyAlbum. serie di messaggi, di controllare il le risorse necessarie per poter fare
Condividere le vostre fotografie con amici colore e la velocità di scorrimento e pratica e apprendere in poco tempo
e parenti non è mai stato così facile. molto altro. 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