02
www.yourinspiration-magazine.com
Web
USER E XPERIE NCE: come sono le azien messe d italiane e ?
Web Semantico: quali le sfide e le opportunità
Accessibilità: quali sono gli errori più comuni?
Title e Description:
Freelance: Trovare nuovi clienti in tre lezioni e mezzo
i tag fondamentali per ottimizzare le nostre pagine web
Web
Tutorial
Pensieri e Parole
Form 3.0:
CSS3:
l'evoluzione della specie
I Vantaggi dei colori RGBA
Dalle collaborazioni occasionali ai contratti a progetto
SHOWCASE Quando il web design è un’arte che osa e che sa stupire
Settembre 2010 ·· N° 2 sito web: www.yourinspiration-magazine.com
Editoriale ·· Settembre 2010 ·· N° 2 ·· ·· www.yourinspiration-magazine.com ·· ·· info@yourinspiration-magazine.com ··
AUTORI: ·· Simone D'Amico ·· ·· Web Designer ··
·· Maurizio Tarchini ·· ·· Programmatore ··
“L’unione fa la forza” non è solo una frase fatta senza arte né parte, ma una vera e propria realtà che ha saputo prendere forma nelle pagine di questa rivista. L’abbiamo attesa con trepidazione e infine eccola qua: l’edizione di Settembre di Your Inspiration Magazine è finalmente disponibile per il download.
·· Sara Presenti ·· ·· Web Designer ··
La qualità degli articoli pubblicati ci lascia davvero senza parole e si commenta da sé: non esageriamo nel dire che non esiste qualcosa di simile né sul web né nelle edicole italiane.
·· Tommaso Baldovino ·· ·· Web Designer ··
La competenza con cui sono stati trattati gli argomenti e la professionalità con cui autori, revisori e grafici si sono coordinati per realizzare il tutto nelle tempistiche previste
·· Federico Pian ·· ·· Inesegnante Informatico ··
è sbalorditiva, a dimostrazione che “L’unione fa la forza” non è solo una frase fatta senza arte né parte, ma una vera e propria realtà che ha saputo prendere forma nelle pagine
·· Luca Panzarella ·· ·· Imprenditore Creativo ··
di questa rivista. In questo numero si parla molto di usabilità, argomento cardine della professione spesso trascurato o completamente ignorato. Abbiamo voluto dare uno sguardo
·· Michela Chiucini ·· ·· Web Designer ··
anche alle nuove specifiche CSS3 e HTML5 (ancora in fase di bozza) con un tutorial interamente realizzato utilizzando appunto queste tecnologie che promettono di semplificare
·· Emanuela Pitassi ·· ·· Informatico ··
notevolmente il nostro lavoro. Che altro dire: web semantico, accessibilità, SEO, imprenditoria, freelance, fisco e molto altro tra gli argomenti trattati.
·· Cristian Angelini ·· ·· Informatico ··
Infine, con questo numero di YIM inauguriamo la rubrica: “La Posta di Your Inspiration Magazine” dove ogni mese troveranno risposta alcune domande poste direttamente dai lettori
·· Simone Economo ·· ·· Studente ··
della rivista. Non mi resta che augurarti buona lettura!
Nando Pappalardo
·· Alessandra Alberti ·· ·· Commercialista ··
·· Salvatore Sodano ·· ·· Web Designer ··
PROGETTO GRAFICO ·· Salvatore Giuliano ·· ·· Web & Graphic Designer ·· ·· www.giulianosalvatore.com ··
Direttore Responsabile: Nando Pappalardo Progetto Grafico: Salvatore Giuliano Your Inspiration Magazine non è una Testata Giornalistica poichè i contenuti della rivista stessa non hanno una periodicità recolare e quindi ai sensi della legge n. 62/2001 non può essere considerata un prodotto editoriale
Your Inspiration Magazine è una rivista dedicata al web design che offre materiale (risorse, articoli di ispirazione e di dibattito, tutorial, guide) realizzato da diversi professionisti del settore. Un punto d’incontro ideato e progettato da e per i web designer italiani, per offrire informazioni utili in un vero e proprio magazine, assicurandone la portabilità dei contenuti anche offline.
Somm Contenuti IN QUESTO NUMERO
04 08 12 16 20 24 28 32 40 60 66
DALLE COLLABORAZIONI OCCASIONALI AI CONTRATTI A PROGETTO INTERACTION DESIGN: PER L’UTENTE, L’INTERFACCIA È IL PRODOTTO TROVARE NUOVI CLIENTI IN TRE LEZIONI E MEZZO WEB SEMANTICO: QUALI LE SFIDE E LE OPPORTUNITÀ TITLE E DESCRIPTION, I TAG FONDAMENTALI PER OTTIMIZZARE LE NOSTRE PAGINE WEB USER EXPERIENCE: COME SONO MESSE LE AZIENDE ITALIANE? ACCESSIBILITÀ: QUALI SONO GLI ERRORI PIÙ COMUNI?
60··
FORM 3.0: L'EVOLUZIONE DELLA SPECIE
LA NOSTRA RACCOLTA DI TECNICHE E TUTORIAL DATE UNO SGUARDO ALLE NOSTRE GALLERIE PER PRENDERE ISPIRAZIONE DOMANDE E RISPOSTA: LA POSTA DI YOUR INSPIRATION MAGAZINE
02 ·· your inspiration magazine
TROVARE UN CLIENTE IN TRE LEZIONI E MEZZO
PENSIERI E PAROLE
12··
Numero
ario
02
TUTORIAL
42
XML:
46
Usabilità:
50
Gimp:
54
Css:
Conoscere i feed RSS [Parte 1] Come progettare una home page che funzioni Guida a Gimp: Grafica professionale a costo zero CSS3: I vantaggi dei colori RGBA
A colpo d’occhio Parola 04 Passa Dalla Collaborazione occasionale
GALLERY
ai contratti a progetto
20 Web Title e Description, i Tag fondamentali per ottimizzare le nostre pagine web
e Risposte 66 Domande La posta di Your Inspiration Magazine
USER EXPERIENCE: COME SONO MESSE LE AZIENDE ITALIANE
WEB
24··
60··
·· 03
LINK: http://bit.ly/a1KoC6
PENSIERI E PAROLE DALLE COLLABORAZIONI OCCASIONALI AI CONTRATTI A PROGETTO
•• È il passaggio sognato da molti webdesigner: far fruttare appieno l'abilità acquisita e l'esperienza maturata – per lavoro o per pura passione – e lasciar emergere dal bozzolo dello “smanettone” amatoriale un professionista freelance del settore. Accade piú spesso di quanto si pensi: gli anni trascorsi a smontare siti e masticare codice (girovagando tra forum e comunità virtuali) portano inevitabilmente una certa visibilità
Autore: Alessandra Alberti
e quest’ultima vale il primo potenziale cliente: a quel punto, meglio farsi trovare preparati.
Dottore Commercialista, esercita la professione a Siena presso un studio legale–commerciale di giovani professionisti. Dal 2007 è Moderatrice nel Forum GT, la cui area “Fisco e Leggi” è osservatorio privilegiato per approfondire gli aspetti tecnici e fiscali delle professioni del Web.
Immaginiamo allora che un web designer si trovi di fronte alla richiesta di realizzare
www.linkedin.com/in/alessandraalberti
un template, elaborare del materiale grafico, creare un logo, installare un CMS, gestire una campagna AdWords, lavorare a un portale e via dicendo; il tutto, magari per la prima volta, emettendo fattura (o altra regolare documentazione) e preoccupandosi della sua posizione contributiva e fiscale. Non è difficile immaginare tutti i dubbi che immediatamente attanagliano il (o la) freelance, magari desideroso semplicemente di trasformare una passione in qualcosa di più concreto e – perché no? – redditizio. Innanzitutto: quante e quali imposte pagare? A quali enti? Come farsi legalmente saldare il lavoro senza però vedere tutti i soldi svanire tra imposte e balzelli? Quale veste formale dare alle collaborazioni spesso occasionali e “una tantum” tipiche di questo mondo? Proveremo in questo spazio a delineare dei possibili percorsi fiscali nell’ambito delle professioni web, offrendo alcune risposte alle precedenti domande allo scopo di minimizzare i rischi dell'improvvisazione la quale, in questo campo come altrove, può facilmente far perdere molto tempo e denaro.
04 ·· your inspiration magazine
Dalle collaborazioni occasionali ai contratti a progetto Codice Tributario: corso-base di “programmazione fiscale”
Cominciamo oggi col proporre una sintetica panoramica su alcune
Dunque non si deve in alcun modo rispettare un orario di lavoro
possibilità di collaborazione che la legge offre a un webdesigner
e spesso la prestazione viene svolta al di fuori della struttura
in attesa di valutare l’apertura di una partita IVA;
del cliente; è previsto che l'opera sia realizzata a regola d'arte
esamineremo nello specifico:
ed è sempre bene che venga stilato un contratto che ne precisi chiaramente gli aspetti tecnici e fiscali cosi da inquadrare
il contratto d'opera (ovvero la collaborazione meramente
correttamente il rapporto.
occasionale); la collaborazione coordinata e continuativa occasionale;
Si ricorda che non è possibile avvalersi di questo strumento
la collaborazione coordinata e continuativa nella modalità
se si è iscritti a un albo professionale o se titolari di partita IVA.
cosiddetta “a progetto”.
Oltre ciò non è previsto, come spesso erroneamente si crede, alcun limite oggettivo legato al compenso o al tempo necessario
IL CONTRATTO D'OPERA
a realizzare il progetto: non è corretto dire che le prestazioni
È uno strumento utile che ben si adatta ad alcuni incarichi,
perché in realtà la soglia dei 5.000,00 euro non incide sulla
sebbene spesso ne venga fatto un uso eccessivo e improprio;
possibilità di fruire di questo strumento, ma segna solo l'obbligo
cerchiamo di comprenderne potenzialità e limiti.
di iscrizione alla Gestione Separata INPS.
occasionali “vanno bene per compensi fino a 5.000,00 euro”
Si tratta innanzitutto di quella che viene comunemente chiamata “prestazione occasionale”; è regolamentata dall'art. 2222
Il webdesigner potrebbe dover realizzare un'opera per la quale
e seguenti del codice civile, che lo definisce come il contratto
viene pattuito un compenso di 6.000,00 euro;
tramite il quale una persona si obbliga a realizzare un'opera
in tal caso scatterà l’obbligo di pagare contributi solo su 1.000,00
o un servizio a fronte di un corrispettivo, prevalentemente
euro poiché i primi 5.000,00 euro sono una franchigia per la quale
con lavoro proprio e senza che si instauri alcun vincolo
non è dovuto alcun contributo.
di subordinazione.
·· 05
PENSIERI E PAROLE
DALLE COLLABORAZIONI OCCASIONALI AI CONTRATTI A PROGETTO
Per quanto riguarda la tassazione di questi redditi (si tratta
la prima ipotesi si avrà verosimilmente quando non ci siano altri
di redditi diversi ex. art. 67 lett. l del DPR 917/1986 - TUIR)
redditi oltre a quelli da prestazioni occasionali mentre, in caso
occorre fare molta attenzione perché, qualora si lavori già come
di altri redditi, potrebbe esserci l’obbligo di pagare delle imposte
dipendente, vi è l’obbligo di presentare la dichiarazione dei redditi
a saldo. Infine, la tassazione prevista è quella dovuta in base
l’anno successivo.
al proprio scaglione IRPEF.
Sebbene all’atto del pagamento venga già effettuata una ritenuta
È importante ricordarsi di questi obblighi e conservare
d’acconto del 20%, questa non esaurisce gli obblighi impositivi:
con cura copia delle ricevute di incasso che vengono rilasciate
la ritenuta d’acconto è infatti una somma trattenuta (e poi versata)
ai committenti, poiché esse andranno consegnate a chi farà
come acconto delle imposte effettivamente dovute, se dovute.
la dichiarazione.
Dalla dichiarazione potrebbero poi profilarsi due possibilità:
Precisiamo infine che comprendere se si rientra all'interno
che il webdesigner sia a credito o che sia a debito verso lo Stato;
del contratto d'opera oppure no sta al professionista e all'analisi che questi farà caso per caso (meglio se in occasione di un breve confronto con un commercialista). Dovrebbe essere chiaro fin d’ora, però, che non si può pensare di realizzare numerosi siti web, lavorando per tutto l’anno e con committenti diversi, poiché è evidente che in ipotesi del genere – continuità, sistematicità, professionalità – si ricade nell’obbligo di aprire la partita IVA.
LA COLLABORAZIONE COORDINATA E CONTINUATIVA OCCASIONALE Questa tipologia di collaborazione (detta anche “mini co.co. co.”) è definita dal D. Lgs. 276 del 2003 che all'art. 61 descrive le prestazioni occasionali come «rapporti di durata
06 ·· your inspiration magazine
complessiva non superiore a trenta giorni nel corso dell'anno
Per quel che concerne gli aspetti previdenziali, tali prestazioni sono
solare con lo stesso committente, salvo che il compenso
soggette a contribuzione nei confronti della Gestione Separata
complessivamente percepito nel medesimo anno solare
INPS.
– sempre con il medesimo committente – sia superiore
Un altro obbligo previsto per queste collaborazioni
a 5.000,00 euro».
è la comunicazione preventiva che il consulente del lavoro deve
Ciò vuol dire che quand’anche un solo incarico sforasse la durata
effettuare presso il Centro per l’Impiego in fase di instaurazione,
di trenta giorni o la cifra di 5.000,00 euro, verrebbe a cadere
trasformazione e cessazione del rapporto; questo obbligo è stato
la possibilità di utilizzare questo strumento e bisognerebbe optare
previsto per evitare un uso improprio dello strumento a scopo
per altre ipotesi, come il contratto a progetto.
fraudolento.
Ciò che caratterizza queste collaborazioni è la presenza di un coordinamento: il lavoro potrebbe essere svolto ad esempio nell’azienda del cliente sotto la coordinazione di un responsabile.
LA COLLABORAZIONE COORDINATA E CONTINUATIVA NELLA COSIDDETTA MODALITÀ A PROGETTO
Si tratta di un’ipotesi molto simile al contratto a progetto, da cui però si distingue per la limitata portata e per la non
Si tratta di collaborazioni la cui caratteristica principale
necessità appunto di un progetto.
è l’esistenza di «uno o piú progetti specifici o programmi
Caso tipico: il webdesigner è chiamato a lavorare in un’azienda
di lavoro o fasi di esso determinati dal committente e gestiti
– avvalendosi di risorse e mezzi interni – per ristrutturarne
autonomamente dal collaboratore in funzione del risultato,
il sito gestito da un addetto organico all’azienda (quest’ultimo
nel rispetto del coordinamento con l'organizzazione
è appunto il coordinatore del lavoro).
del committente e indipendentemente dal tempo impiegato per l'esecuzione dell'attività lavorativa».
I redditi derivanti dalla collaborazione “mini co.co.co.” sono assimilati a quelli da lavoro dipendente;
È prevista anche in questo caso la coordinazione da parte
come tali vengono erogati tramite busta paga (al netto
del datore di lavoro ma non ci sono più i limiti temporali
delle trattenute dovute per legge) e riepilogati l’anno successivo
e di reddito sopraesposti; non occorre nemmeno rispettare
nel Modello CUD tramite il quale potrà essere effettuata
un orario di lavoro e, qualora ciò venisse chiesto, si ricadrebbe
la dichiarazione dei redditi.
nell’ipotesi di lavoro dipendente vero e proprio. Il D. Lgs. 276 del 2003 e alcune circolari regolamentano nel dettaglio il contratto a progetto, escludendolo ad esempio per i soggetti iscritti agli albi professionali. Per le collaborazioni a progetto è prevista l’iscrizione alla Gestione Separata INPS e la comunicazione preventiva al Centro per l’Impiego. Da un punto di vista fiscale la tassazione viene applicata ancora una volta in base alla progressività degli scaglioni IRPEF. Raccomandiamo, nell’ipotesi ad esempio che un’agenzia pubblicitaria contatti il webdesigner proponendo questa forma di contratto, di valutarne attentamente gli aspetti tecnici con un consulente del lavoro. La materia è molto vasta e tanto resta ancora da dire; avremo modo di proseguire con approfondimenti e altri dettagli, oltre che con nuovi temi di interesse. Alla prossima e... fatturate, gente, fatturate! ••
·· 07
LINK: http://bit.ly/bFt33g
PENSIERI E PAROLE INTERACTION DESIGN: PER L’UTENTE, L’INTERFACCIA È IL PRODOTTO
•• Oggi più che mai ci troviamo di fronte ad un mondo dove l’impatto con persone e oggetti è dato, prima di ogni altra cosa, dalle apparenze. Le espressioni del volto, la postura, la retorica possono pesantemente influenzare il nostro giudizio. Analogamente la superficie liscia di un oggetto, le forme sinuose e i colori sono fattori in grado di interferire con i nostri bisogni e la nostra volontà.
Autore: Simone Economo In effetti, possiamo sezionare un servizio (o un prodotto) in un’interfaccia Co-fondatore dell'UX Camp Italia e membro del progetto TIA (Translation of Information Architecture), nel tempo libero è studente di Ingegneria Informatica presso l'università La Sapienza di Roma. Nel 2006 apre LineHeight, un nonblog dove occasionalmente recensisce libri e riflette su usabilità, interaction design, user experience e architettura dell'informazione.
www.lineheight.net
08 ·· your inspiration magazine
(ciò che appare) e nella sua essenza (ciò che è). Mentre è chiaro che l’insieme delle possibilità e delle caratteristiche offerte col servizio fanno parte della sua essenza, la percezione di quest’ultime è pesantemente influenzata dal modo in cui il servizio viene presentato all’utente (che lo consuma e ne usufruisce). In un certo senso, risulta evidente che al di là degli sforzi compiuti per offrire un servizio più completo degli altri, ciò che maggiormente interferisce con la volontà dell’utente è proprio l’interfaccia che, come dice la parola, si occupa di interagire con l’utente e fungere da intermediario per qualsiasi tipo di operazione.
Interaction Design: per l'utente, l'interfaccia è il prodotto Capire in tre esempi il potere delle interfacce utente
Da un lato il progettista, consapevole di tutti i meccanismi interni
Questa è invece una bozza preparata da Oliver Reichenstein1,
e dei dettagli tecnici, percepisce il servizio come un oggetto a tutto
autore della Web Trend Map e noto architetto dell’informazione,
tondo, fatto di essenza e di forma. Dall’altra l’utente ne percepisce
con l’intento di “creare un’interfaccia simile a quella
solo la forma, ignaro di cosa succeda dietro all’interfaccia.
di un’applicazione per la posta elettronica [...] che separi
La membrana sottile che separa l’essenza dalla forma è anche
chiaramente il filtro, il flusso delle informazioni e la reazione
la membrana a partire dalla quale il servizio viene percepito
[a ciascuna notizia, N.d.T]”
da chi lo consuma. Ci rendiamo dunque conto che l’utente ha solo una consapevolezza parziale del servizio e che, a prescindere dalle possibilità e dalle funzionalità promesse, è l’interfaccia a stabilire cosa si può e cosa non si può fare. Volendo essere più precisi, l’interfaccia mostra (o nasconde) determinate funzionalità che possono (o non) essere fondamentali per l’utente. Attraverso tre esempi ti mostrerò che un servizio può essere percepito in maniera differente a seconda dell’interfaccia, suggerendo ogni volta nuove modalità d’uso e stimolando nell’utente nuovi modelli di comportamento.
ESEMPIO: FACEBOOK L’attuale interfaccia di Facebook si presenta più o meno in questo
Mentre il servizio è chiaramente lo stesso (“Facebook ti aiuta
modo:
a connetterti e rimanere in contatto con le persone della tua vita”), esso viene percepito in maniera completamente differente a seconda dell’interfaccia. In particolare, la bozza di Oliver presenta un’interfaccia più lineare che suddivide la navigazione sulla base del concetto di granularità: A sinistra appare la navigazione primaria con le principali informazioni sul profilo (questa barra è la più generale e sarà esente da cambiamenti a prescindere dalla pagina che si sta visitando); Al centro appare il contenuto principale, che varia in base al profilo utente che stiamo consultando (questa colonna è più specifica rispetto a quella a sinistra);
1 http://bit.ly/aPulNdctGbQx
·· 09
PENSIERI E PAROLE
INTERACTION DESIGN: PER L’UTENTE, L’INTERFACCIA È IL PRODOTTO
A destra c’è la colonna delle reazioni, ovvero i commenti
di un prodotto senza fare altro che aggiungere una semplice
a ciascuna notizia.
domanda e tracciarne le risposte. Oggi, per ciascun prodotto,
Questa porzione di pagina è destinata ad aggiornarsi più spesso
trovi in homepage le migliori e le peggiori recensioni, e sulla base
delle altre due, poiché deve concedere spazio alla discussione
di essere puoi chiederti “Perché dovrei o non dovrei comperare
(questa è la colonna più specifica di tutte, perché varia
questo prodotto?”.
in base alla notizia selezionata). Assieme all’interfaccia, è cambiato anche il modo di interpretare l’applicazione. Nella prima schermata si insiste di più sulla condivisione delle notizie e la ricerca di nuovi amici,
Sì stimò che tale aggiunta nell’interfaccia comportò
mentre nella seconda si vuole incoraggiare di più il consumo
a un guadagno complessivo di quasi 3 miliardi di dollari
e la discussione delle notizie. Facebook ovviamente fa tutto
all’anno2. Una cifra spaventosa che, d’altro canto, dimostra
questo e molto altro, ma tu in che modo lo percepisci?
quanto Amazon sia attento all’esperienza dei propri consumatori.
A te il giudizio su quale delle due interfacce sia la migliore. Un altro fatto curioso è che, mentre per Amazon quella semplice
ESEMPIO: AMAZON
domanda fu l’inizio di una vera e propria fortuna, per altri siti di e-commerce che lo imitarono il disastro fu totale. Questi servizi,
Un caso eclatante è quello di Amazon. Il servizio permette
infatti, erano molto meno popolari rispetto ad Amazon e pertanto
agli utenti di commentare un prodotto e valutarlo su una scala
non potevano vantare lo stesso numero di clienti e di visitatori.
da 1 a 5. La grande mole di utenza che quotidianamente visita
Questa distinzione fu importante al punto che l’implementazione
Amazon ha portato il servizio ad accumulare un gran numero
di questa funzionalità portò solo ed esclusivamente a recensioni
di recensioni di qualità per alcuni dei prodotti più venduti.
negative. D’altronde, quanti di noi avrebbero la pazienza
Un esempio è “Harry Potter e i Doni della Morte”
di recensire su un sito un prodotto che funziona come
con le sue 3500+ recensioni.
ci si aspetta? In proporzione, le lamentele per un prodotto scadente sono molto più comuni e facili da trovare. E’ importante, insomma, comprendere appieno il contesto in cui si opera per capire quanto una scelta vittoriosa per altri possa esserlo altresì anche per noi.
ESEMPIO: TWITTER E TWEETDECK Un ultimo esempio nasce dalle considerazioni di Joshua Porter, Tuttavia, l’emergere di tali cifre ha costretto i progettisti
noto user experience designer e autore del libro “Social Design”.
ad apportare col tempo alcune modifiche all’interfaccia.
In un suo articolo3, l’autore scrive:
Inizialmente nella homepage del prodotto comparivano solo le recensioni più recenti, che non sempre erano le più
Nel Web 2.0 le informazioni possono essere accedute
apprezzate. Per risolvere il problema, sotto a ciascuna recensione
da chiunque. La parola chiave in questo caso è
venne aggiunta la domanda “Questa recensione ti è stata
“pubblicamente”. Quando gli sviluppatori possono
utile?”.
mettere le loro mani sui dati di qualcun’altro attraverso delle API, la sfida principale non è più accedere alle
Tanto più una recensione veniva considerata utile, tanto più alta
informazioni, ma innovare l’interfaccia a quelle stesse
era la possibilità di vederla nella homepage del prodotto.
informazioni. Poiché l’accesso è garantito a tutti, il
Il grande afflusso di visitatori permise ai progettisti di Amazon
campo di gioco è limitato su un asse ma aperto su un
di raccogliere informazioni interessanti sulla qualità
altro. Il nuovo asse di innovazione? L’interfaccia.
10 ·· your inspiration magazine
2 http://bit.ly/Uhlqc
3
http://bit.ly/3Vuk3
Pensaci un secondo: Twitter.
SINTESI
Quanti cloni ne esistono?
In sintesi, ecco quali considerazioni puoi estrarre dalla lettura di
Una manciata, ma più comune è trovare quelli che vengono
questo articolo:
definiti “clienti” di questo servizio: applicazioni che reinventano
[1] All’esterno conta l’esperienza del singolo utente ed è su tale
l’interfaccia, giocano con le informazioni fornite dalle API e creano dei “mashup” con lo scopo di migliorare e arricchire l’esperienza utente.
esperienza che va incentrata la progettazione.
[2] Quando cambia l’interfaccia, cambia la percezione del servizio. [3] Tanto più una caratteristica è prominente in un’interfaccia, tanto più verrà percepita come importante dall’utente.
Non a caso, TweetDeck è diventato molto popolare: dispone di una versione desktop, una mobile e una per iPad. Il modello di interazione è coerente su tutti i dispositivi e l’interfaccia permette di “twittare” aggiungendo con facilità
[4] L’utente giudica il servizio (o il prodotto) sulla base di ciò che percepisce perché non ha la conoscenza e gli strumenti necessari per comprenderne i meccanismi interni.
[5] Tecnologia e interfaccia non evolvono con gli stessi ritmi.
immagini, link e video, senza perdere d’occhio gli aggiornamenti
La sfida di oggi resta innovare l’interfaccia, sulla base
distribuiti sulle varie colonne, in perfetto stile Facebook.
della tecnologia esistente. ••
·· 11
LINK: http://bit.ly/aCnVfK
PENSIERI E PAROLE TROVARE NUOVI CLIENTI IN TRE LEZIONI E MEZZO
foto di Ben Heine - http://bit.ly/EZotZ
•• Nel 2006 ero fresco di master e non vedevo l’ora di cominciare la mia carriera da web designer freelance. Mi trovavo a Roma, avevo aperto da poco una partita iva e rispondevo agli annunci di Portaportese e lavoricreativi.it1.
Autore: Luca Panzarella
ìI clienti che arrivavano da lì, diciamola tutta, erano pessimi. Pagavano in ritardo, volevano tutto ciò che gli occorreva al prezzo più basso possibile.
Imprenditore creativo esperto di user experience, in giro per l'Italia, l'Inghilterra e l'America, ma sopratutto online. Ama raccontare, imparare e creare. Nuovo socio di Figmenta, web agency di Firenze, non fa in tempo a concludere una presentazione di sé stesso che diventa già vecchia.
www.lucapanzarella.it www.lucapanzarella.it/blog
LA PRIMA LEZIONE La prima lezione che imparai fu questa: gli affitti di Roma sono troppo cari. Non c’entra niente con questo articolo, ma tant’è. Decisi così di spendere il mio tempo analizzando tutti i siti dei freelance italiani. Guardavo al giorno decine di siti, li studiavo e cercavo di paragonare le loro esperienze alle mie, la loro comunicazione alla mia. Dovevo conoscerli tutti. Un paranoico insomma, diciamolo pure. Modificai il cv prendendo spunto dalla comunicazione dei freelance che mi piacevano, e lo mandai a tutte le aziende di informatica romane. Tutte. Le avrei prese per sfinimento. Nella lettera di presentazione mi rendevo disponibile per un giorno di prova gratis, nel quale avrei potuto dimostrare le mie capacità. Beh, alla fine un’azienda rispose. E diventò il mio principale cliente a Roma.
12 ·· your inspiration magazine
Trovare nuovi clienti in tre lezioni e mezzo Confessioni semiserie di 4 anni di vita da freelance
LA SECONDA LEZIONE La seconda lezione che stavo per imparare era: se chiedi di lavorare gratis, anche solo per un giorno, trovi clienti che vogliono pagare poco, o nulla. La favola del ranocchio che si trasforma in un principe non funziona. Se un cliente ti cerca perché sei economico, sarà per sempre così. Nonostante la dura lezione il cliente mi permetteva di sopravvivere, lavoravo tantissimo facendo la mia bella gavetta. Cominciai ad andare a qualsiasi seminario o evento sul web 2.0 e simili, non tanto per trovare clienti, ma perché mi interessavano i contenuti.
Questo significò rischiare molto, spendere tempo e denaro. Gestire i soldi e il tempo degli altri. Rischiare che i tuoi
Questo obiettivo mi rendeva molto più sereno quando conoscevo
collaboratori ti sottraggano il cliente appena voltate le spalle.
qualcuno, a cui non solo non chiedevo lavoro,
Insomma non è stata facile.
ma al contrario cercavo di rifilargli tutti i progetti in eccesso che non volevo fare.
Ma sentivo che quella strada mi avrebbe portato anche delle cose positive, e alla lunga ne ricavai solo vantaggi.
Una volta che la strada si era aperta era facile per me prendere più progetti di quanti ne potessi realmente realizzare,
Così qualcuno dei programmatori a cui avevo dato del lavoro
per questo accettavo commesse su cui non avevo le competenze
cominciò a ricontattarmi quando c’era da fare della grafica.
e puntualmente davo il lavoro a chi avevo conosciuto in quei
E poi un altro. E un altro ancora.
seminari.
E pian piano arrivava del lavoro che per me era oro, perché non dovevo gestire il cliente ed era esattamente quello che sapevo fare
Ancora non lo sapevo, ma mi stavo comportando da imprenditore.
meglio: web design.
O da incosciente, che è un po’ la stessa cosa. Non ero più io a chiamare, ma loro a cercarmi.
LA TERZA LEZIONE
Una pacchia. Il file del mio cv cercava di suicidarsi buttandosi nell’icona del cestino accanto a sé.
Imparai così la mia terza lezione, la più importante: se cerchi lavoro, dai lavoro.
E qui si conclude la favola: se sei un web designer freelance contento del tuo lavoro,
Metto le mani avanti dicendo che questa è stata la lezione
potresti anche finire la tua lettura qui. Le cose più importanti le hai
più difficile da imparare.
imparate, ora è il momento di camminare con le tue gambe.
L’esperienza mi dice che gli italiani sono un popolo
Non so se la mia esperienza è adattabile in tutti i casi, anzi,
di diffidenti che non sa lavorare insieme e poco portati
sarebbe interessante conoscere quello che tu hai imparato
alla condivisione (per quanto sia di moda definirsi il contrario).
sul campo.
·· 13
PENSIERI E PAROLE TROVARE NUOVI CLIENTI IN TRE LEZIONI E MEZZO
Se però pensi che ci sia dell’altro, qualcosa di oscuro, dietro questo fantastico quadretto, beh, sei stato avvisato. Si continua allora. Eravamo rimasti al periodo di pacchia. Essendo il mio animo per sua natura incontentabile, dopo qualche mese cominciai ad essere stufo. Tutti parlavano del mio come un lavoro creativo, ma non mi sentivo tale. Applicavo solo delle tecniche che avevo imparato negli anni, ed erano tutti lì pronti ad applaudire qualsiasi cosa facessi, come un leone in un circo. Mi deprimevo a guardare i fantastici lavori dei colleghi americani, normalmente più giovani di me di una decina d’anni. Un cliente una volta mi disse: “Per favore, fai qualcosa di meno
Trovai un ottimo collaboratore a progetto che lavorava per me.
creativo”.
Era la prima volta che ricevevo cv anziché inviarli.
Ecco, forse in quel punto sentii di aver toccato il fondo.
Utilissimo per capire come ragiona chi cerca risorse umane.
Allora, solo allora, cominciai ad aumentare la mia tariffa oraria
Avevo annullato ogni differenza tra tempo libero e lavoro, tra casa
pesantemente.
e fuori.
Era una guerra aperta tra me e i clienti, non so se capisci.
Ovunque andavo mi portavo con me il pc e alcune idee e soluzioni
Sentivo il bisogno di fare qualcosa. Qualsiasi cosa.
mi venivano mentre ballavo Ska in qualche locale romano.
Cominciai quindi a organizzare degli eventi di networking
COM'È FINITA?
con Upstart Roma2. 3
Realizzai la mia prima startup . Smisi di pensare da web designer: non m’interessava più perdere
Arriviamo così a quattro mesi fa, periodo in cui mi sono
pomeriggi a scegliere font, colori, angoli arrotondati o squadrati.
trasferito a Londra.
Volevo creare community, portali. M’innamorai dell’estrema usabilità dei siti americani.
Come in tutti i grossi cambiamenti che ho fatto, anche questo ha portato degli ottimi miglioramenti: ho cominciato a lavorare
Volevo incidere sulla vita delle persone che navigavano i miei
quasi esclusivamente da casa, ho un socio, sto creando una
siti. Non dovevano trovarli necessariamente belli: volevo che
web agency, ho fatto consulenze per aziende inglesi, ho una
li trovassero utili, semplici, veloci.
partnership con un’azienda londinese. Con soci cinesi. Mi sento un McDonald’s, sarà per questo che ho cominciato
LA TERZA LEZIONE E MEZZO
ad andarci più spesso.
Andavo su e giù per l’Italia tra Bologna, Milano e Firenze.
Ogni tanto la gente mi chiede: mi dai un consiglio per trovare
Spendevo sempre di più ma per qualche oscura ragione riuscivo
nuovi clienti? E io rispondo in due modi diversi, a seconda se
a guadagnare di conseguenza.
la persona mostra un vero interesse oppure pretende il solito trucchetto spiegato in 5 minuti.
Stavo pure per teorizzare la quarta lezione: più spendi, più guadagni.
La prima risposta è: vai su lavoricreativi.it e rispondi agli annunci.
Ma non so, mi sembrava di averla sparata grossa. Direi che vale solo metà, lascio a te il rischio di verificarla.
14 ·· your inspiration magazine
La seconda: sediamoci, ti racconto una storia. ••
1 http://bit.ly/39jTbX
2 http://bit.ly/2BD9gn
3 http://bit.ly/8XpN0p
LINK: http://bit.ly/cvM9FC
PENSIERI E PAROLE WEB SEMANTICO: QUALI LE SFIDE E LE OPPORTUNITÀ
•• In questi ultimi anni si è molto sentito parlare di Web Semantico o Web 3.0, definito anche da alcuni come web intelligente. L’obiettivo di questo articolo è quello di fare un po’ di chiarezza sull’argomento, che è certamente molto vasto e complesso, ma sicuramente molto interessante e stimolante poiché ancora completamente in evoluzione.
Autore: Emanuela Pitassi In generale oggi il World Wide Web è una struttura scarsamente organizzata e le analisi Emanuela Pitassi si laurea nel 2005 in Tecnologie Web e Multimediali: da allora progetta e sviluppa applicazioni web. Nel 2009 consegue la laurea specialistica in Tecnologie dell’Informazione con una tesi sul web design emozionale. Oggi è appassionata di web 2.0 e 3.0
www.emanuelapitassi.it
dei documenti sono basate sulla ricerca per parole chiave. Sarebbe difficile costruire un motore di ricerca in grado di soddisfare completamente una query del tipo: “Dimmi quali vini dovrei comprare da servire con ogni portata del menu. E ricorda che non mi piace lo Chardonnay”. Per supportare questo calcolo è necessario andare oltre le parole chiave e specificare il significato delle risorse reperibili sul web, ovvero la loro semantica. Una prima definizione di Web Semantico è stata data da Tim Berners Lee1: si tratta di una rete globale, in cui tutte le informazioni non sono semplicemente comprensibili agli esseri umani, ma possono essere facilmente comprese anche dai computer. Ciò diventa possibile nel momento in cui a tutti i documenti e le informazioni presenti in rete, si riesce ad associare un preciso significato. Possiamo quindi definire il Web Semantico come un insieme di tecnologie e strumenti capace di permette ai calcolatori di interpretare la semantica delle informazioni sul web. Come si può quindi aggiungere un significato unico ai documenti che pubblichiamo sul web?
16 ·· your inspiration magazine
1 http://bit.ly/Nda0o
Web semantico: quali le sfide e le opportunità Il futuro del web tra ontologie e microformati, un'introduzione
Il Web Semantico, anche se non è ancora ufficialmente definito dal W3C2 ha visto nascere diversi progetti in questi ultimi dieci anni. In questo articolo ne introduciamo brevemente due: la creazione di un linguaggio in grado di definire delle ontologie; l’utilizzo di microformati, definiti anche come lowercase semantic web.
xmlns:xsd=http://www.w3.org/2001/XMLSchema# xmlns=http://www.w3.org/TR/2004/REC-owlguide-20040210/wine# xmlns:vin=http://www.w3.org/TR/2004/REC-owlguide-20040210/wine# >
Successivamente si inserisce l’etichetta owl:Ontology dove si raggruppano affermazioni generali riguardanti l'ontologia (commenti, controllo della versione, inclusione di altre ontologie)
LE ONTOLOGIE: IL LINGUAGGIO OWL Innanzitutto ci chiediamo che cos’è un’ontologia: si tratta della descrizione, attraverso uno schema concettuale esaustivo e rigoroso, di un dato dominio attraverso la creazione di entità e di relazioni tra esse. Grazie ad un linguaggio ontologico
<owl:Ontology > <rdfs:comment>Esempio di un ontologia di vini </rdfs:comment> <owl:priorVersion rdf:resource="http://www.w3.org /TR/2003/ PR-owl-guide-20031215/wine" />
i calcolatori possono processare ed integrare automaticamente
L’efficacia di un’ontologia consiste nel identificare le classi a cui gli
le informazioni disponibili sul Web.
individui appartengono e da cui erediteranno specifiche proprietà.
Il Web Ontology Language (OWL) è un linguaggio definito
Per esempio possiamo definire la classe dei Vini:
dal W3C nel 2004, nato per definire e istanziare Ontologie Web: in pratica si aggiunge semantica ai documenti reperibili in rete,
<owl:Class rdf:ID="Vini"/>
classificando i concetti in classi, definendo i loro individui
e associarvi come suoi individui lo Chardonnay e il Moscato
e le proprietà caratterizzanti. A tal proposito si utilizza
attraverso la proprietà rdf:type
un markup specifico, OWL infatti dipende da particolari costrutti definiti mediante RDF, RDFS e tipi di dato di XML Schema: quando si utilizza un loro prefisso, ci si riferisce a questi spazi. La componente iniziale di un’ontologia consiste perciò in un insieme di dichiarazioni dello spazio dei nomi XML (XML Namespace) a cui fare riferimento per interpretare in maniera non ambigua i vari identificatori utilizzati. Ecco un esempio di intestazione di un ontologia di vini:
<owl:Thing rdf:ID="Chardonnay" /> <owl:Thing rdf:about="#Chardonnay"> <rdf:type rdf:resource="#Vini"/> </owl:Thing> <owl:Thing rdf:ID="Moscato" /> <owl:Thing rdf:about="#Moscato"> <rdf:type rdf:resource="#Vini"/> </owl:Thing>
<rdf:RDF
Una volta definita un’ontologia è necessario un meccanismo
xmlns:owl=http://www.w3.org/2002/07/owl# xmlns:rdf=http://www.w3.org/1999/02/22 -rdf-syntax-ns# xmlns:rdfs=http://www.w3.org/2000/01/rdf-schema#
2 http://bit.ly/Mu9AG
3 http://bit.ly/11l9PJ
di ragionamento, che possa quindi manipolare e gestire l’informazione così com’è stata definita. Esistono diversi progetti3, alcuni di essi gratuiti e liberamente scaricabili online, per gestire e manipolare ontologie OWL.
·· 17
PENSIERI E PAROLE WEB SEMANTICO: QUALI LE SFIDE E LE OPPORTUNITÀ
Tim Berners Lee
Tuttavia se il Web 2.0, caratterizzato dalla creazione e condivisione
un vocabolario di concetti utili a descrivere documenti,
di contenuti da parte di tutti gli utenti web, è diventato realtà
e va quindi esplicitato nel markup web il riferimento a questa
a distanza di pochi anni dalla sua "predizione", per il Web
serie di definizioni: <div xmlns:dc="http://purl.org/dc/elements/1.1/">
Semantico c’è ancora molto da fare. In generale, infatti, gli utenti del Web 2.0 non necessariamente hanno le competenze informatiche sufficienti per manipolare linguaggi complessi
l’attributo about per indicare esattamente a quale pozione di sito web/blog fa riferimento uno specifico contenuto,
come OWL. A questo punto possiamo introdurre i cosiddetti
utile nel caso in cui autori diversi scrivono sulla stessa
microformati.
piattaforma; diverse proprietà quali typeof=“foaf:Person”
I MICROFORMATI O LOWERCASE SEMANTIC WEB
property=“foaf:name”, rel=“foaf:homepage”, tutte relative al vocabolario Friend-Of-A-Friend per utilizzare il quale è sufficiente aggiungere alla porzione di codice
4
L'utilizzo di microformati semplifica la difficoltà degli autori
di interesse:
nello scrivere i loro contenuti e, contemporaneamente, inserisce
<div typeof="foaf:Person" xmlns:foaf="http://
un po' di semantica. Il cosiddetto lowercase semantic web
xmlns.com/foaf/0.1/">
può essere visto come passo intermedio tra il Web 2.0 e il Web Semantico, capace di codificare le entità provenienti da ontologie
Uno dei vantaggi di RDFa consiste nel fatto che nulla
quotidiane a cui possano avere accesso i software di ogni giorno.
di completamente nuovo è stato creato, ma si è andati
In pratica gli autori-creatori di contenuti per blog ed altri siti
a potenziare ed ampliare alcuni aspetti dell’XHTML per aggiungere
web 2.0 non devono fare eccessiva fatica per caricare sul web
un significato ai documenti utile tanto all’uomo quanto
documenti che siano comprensibili non solo agli “esseri umani”,
ai computer.
ma anche ai “calcolatori”. In questo spirito il W3C ha proposto
Alcuni esempi di microformati sono: hCalendar6 per condividere
RDFa5, un'estensione dell'XHTML che permette agli utenti
un calendario di eventi o appuntamenti; hCard7
di esprimere la semantica di pagine web, estendendo di fatto
per le informazioni personali di contatto; hReview8
alcuni degli attributi di tag già esistenti. Nelle specifiche di questo
per condividere recensioni di prodotti, servizi, attività e molto altro
formato, sono stati inseriti ad esempio:
(ancora in versione draft); l’estensione dell’attributo
gli attributi property=“dc:author”
rel di un hyperlink come rel=license9 e rel=tag10 che permettono
e property=“dc:title” per indicare chiaramente
di specificare come destinazione di un collegamento
qual è l’autore e il titolo di un articolo; le lettere dc fanno
una specifica licenza o una “categoria di riferimento”; XFN11
riferimento alla community Dublin Core che ha già definito
per la rappresentazione delle relazioni interpersonali, ecc...
18 ·· your inspiration magazine
4 http://bit.ly/cdCFi5
5 http://bit.ly/16V4i
6 http://bit.ly/AbiRK
7 http://bit.ly/12PVT2
Ci sono vari altri microformati, ancora in via di sviluppo,
Queste sono solo alcune delle classi possibili, ma ce ne sono molte
ma per capire più da vicino come funzionano ecco un breve
altre che possono arricchire il nostro appuntamento
esempio relativo a hCalendar, utilizzabile per condividere uno
(si può aggiungere una descrizione, ma anche specificare latitudine
o più eventi sul web, inserendo la semantica degli appuntamenti
e longitudine del luogo).
a livello di markup. Se ad esempio volessimo scrivere: YIM organizza una conferenza il 2010-09-20 presso l’Hotel Italia
Concludendo, dopo una breve introduzione delle motivazioni
di via Augusto, Roma (Italia), il markup da inserire nel nostro blog
alla base del Web Semantico abbiamo analizzato,
diventerà il seguente:
anche se brevemente, le tecnologie che permettono oggi - e sicuramente sempre di più in futuro- di organizzare i contenuti
<span class="vevent">
del web in modo da essere comprensibili anche dai calcolatori.
<span class="summary">YIM organizza una conferenza</span> il
Queste tecnologie lasciano molte domande aperte su quale sarà
<span class="dtstart">2010-09-20</span> presso
l’evolversi del nostro caro amato Web. Non ci resta che aspettare
l’Hotel Italia di
fiduciosi e stare a vedere quel che accadrà sia all’interno
<span class="location">via Augusto, Roma (Italia) </span>
della comunità accademica e di ricerca, sia tra i professionisti e utilizzatori quotidiani del web. ••
</span>
In questo esempio vediamo che il nostro appuntamento è contenuto dalla classe predefinita vevent, ed inoltre abbiamo definito: il contenuto dell’evento attraverso un sommario (summary), la data di inizio (dtstart segue il formato data ISO8601) dove si terrà (location).
8 http://bit.ly/EMlMB
9 http://bit.ly/sVQlp
10 http://bit.ly/4F7FTL
11 http://bit.ly/BeUH
·· 19
LINK: http://bit.ly/c2EWFi
WEB TITLE E DESCRIPTION, I TAG FONDAMENTALI PER OTTIMIZZARE LE NOSTRE PAGINE WEB
•• Trattare un tema vasto, complesso e in perenne evoluzione come la SEO (Search Engine Optimization) e soprattutto farlo bene non è semplice. Eppure non si può ignorare l’argomento che maggiormente influenza l’esito di qualsiasi progetto web. Infatti possiamo avere il sito più bello del mondo, con effetti e contenuti da far rimanere a bocca aperta il più scettico dei visitatori, ma se non abbiamo curato
Autore: Salvatore Sodano
il posizionamento e le nostre pagine non vengono trovate avremo un sito bello da vedere ma completamente inutile.
I primi segni di squilibrio li manifesta a 9 anni, quando al contrario degli altri bambini, andare dal dentista lo rendeva euforico, solo perché il dottore gli lasciava guardare il computer. La sua sete di informatica viene in parte appagata nel 2001 quando inizia a svolgere l’attività di web designer poco dopo affiancata da quella di graphic designer. Negli ultimi anni la passione per Seo e web marketing lo spinge a curare oltre all’estetica dei siti anche funzionalità, usabilità e ottimizzazione per i motori di ricerca. Da un anno gestisce yesWEBcan blog dove condivide articoli su web design e seo.
www.yeswebcan.it
20 ·· your inspiration magazine
Ecco perché è fondamentale conoscere i parametri utili ad aumentare il volume di traffico che il nostro sito web può ricevere dai motori di ricerca. In questo articolo parliamo del Title Tag e del Meta Tag Description, due variabili per motivi diversi fondamentali nell’ottimizzazione delle nostre pagine.
IL TAG TITLE “Toglietemi tutto ma non il tag title”, questo sarebbe lo slogan ideale per una campagna Pro Seo. Il title tag è fondamentale per ottimizzare le nostre pagine, si tratta del titolo della pagina web, quello che compare nella barra in alto nel browser, e in blu nei risultati dei motori di ricerca.
Title e Description, i tag fondamentali per ottimizzare le nostre pagine web Il Title Tag è una delle variabili più importanti nel posizionamento, il Meta Tag Description è invece fondamentale per il CTR. Ecco come sfruttare al meglio questi due importanti parametri
Come mostrato nell’immagine, qualunque sia la keyphrase
In pratica, cerchiamo di evitare titoli del genere : ‘Photoshop :
che cercheremo, i risultati saranno così composti:
Tutorial Photoshop per aggiungere i capelli a yesWEBcan
la prima parte corrisponderà al title tag della pagina web;
con Photoshop‘.
la seconda parte (formata da due righe nel caso vengano sfruttati almeno cento caratteri) corrisponde alla descrizione o snippet;
E se il mio title ottimizzato per i motori di ricerca diventa poco leggibile per gli utenti?
la terza parte contiene il link alla pagina. Indipendentemente dal processo di ottimizzazione, un titolo
Come deve essere un title ottimizzato?
poco leggibile per gli utenti non è un buon titolo, quindi è inutile riempirlo di keyword confuse. Il titolo giusto
Un buon tag title contiene le parole chiave primarie con le quali
non è solo quello che compare primo nei risultati dei motori
intendiamo posizionarci nei motori di ricerca, non è troppo lungo
di ricerca ma quello che riesce anche a persuadere l’utente
(la lunghezza ottimale è 63 caratteri spazi inclusi), è diverso
a cliccare sul nostro link piuttosto che sugli altri presenti in SERP
per ogni pagina e deve formare una frase di senso compiuto.
(Search Engine Results Page - la pagina dei risultati del motore
Le chiavi principali vanno inserite tra le prime parole del titolo
di ricerca).
(più a sinistra possibile), ecco perché è preferibile usare la forma “titolo pagina – titolo sito” e perché sarebbe ottimo che il titolo
Maiuscole, minuscole e caratteri speciali
iniziasse proprio con la chiave principale. Cominciamo con lo sfatare una leggenda metropolitana: Per scegliere le key giuste possiamo affidarci a “Strumento per
usare caratteri in maiuscolo non serve assolutamente a migliorare
le parole chiave di Google Adwords1” o a “Google suggest”
il posizionamento. I motori di ricerca non fanno questo tipo
ma i risultati possono servire solo per avere un’idea orientativa.
di distinzione e chi utilizza i caratteri in maiuscolo al massimo
Il consiglio può sembrar banale ma è pensare con la testa
può sperare che il suo Title nella SERP attiri maggiormente
dell’utente medio, immedesimandoci nei modi di fare del nostro
gli utenti. Per quanto riguarda i caratteri speciali invece,
target di visitatori. Poniamoci questa domanda: se io cercassi con
non c’è prova che siano causa di penalizzazione da parte
Google questo argomento, quali keyword utilizzerei?
di Google, anzi in molti casi i caratteri speciali vengono utilizzati
Diamo alla nostra risposta un senso compiuto, e avremo ottenuto
per dar risalto al titolo nella SERP.
il titolo della nostra pagina.
Ad esempio il forum.giorgiotave.it utilizza il carattere
Attenzione a non commettere errori di Keyword Stuffing cioè
speciale: “<<”
di ripetere più volte la keyword nel titolo, c’è il rischio che queste
Autostima.net invece utilizza [¯|¯] per gli ebook e √
vengano interpretate come spam dai motori di ricerca.
per le altre pagine.
1
http://bit.ly/c7yXqR
·· 21
WEB
TITLE E DESCRIPTION, I TAG FONDAMENTALI PER OTTIMIZZARE LE NOSTRE PAGINE WEB
Ovviamente i caratteri esadecimali allontaneranno le key
Dobbiamo fare in modo che la keyword cercata dall’utente
dalla parte sinistra del title quindi se vogliamo provare a utilizzarli
sia presente anche nel contenuto del Tag Description altrimenti
non bisogna esagerare.
Google ignorerà quest’ultimo.
A proposito, si stima che molti utenti effettuano le proprie ricerche
Quindi abbiamo avuto modo di vedere, il Meta Description,
su google in forma interrogativa e utilizzando frasi nelle forme tipo
è un ottimo strumento per il SEM (Search Engine Marketing)
“come fare” o “cosa fare”, possiamo perciò tenere conto anche
anche se fondamentalmente inutile per il ranking del sito.
di questo quando creiamo i nostri title.
Due consigli da seguire:
IL TAG DESCRIPTION Inseriamo le keyword utilizzate nel title e sulle quali puntiamo, Il meta tag description - troppo spesso ignorato perchè non
anche nella description, rendendo lo snippet una sorta
contribuisce nel posizionamento - , è in realtà uno strumento
di approfondimento del titolo e un’anteprima di quel che
fondamentale per ottenere più visitatori. Questo tag se usato in modo efficace è estremamente persuasivo sugli utenti, che tenderanno a visitare le nostre pagine piuttosto che quelle
gli utenti leggeranno visitando la pagina. Scriviamo un meta description diverso per ogni pagina cercando di utilizzare frasi ad effetto e che persuadano gli utenti.
dei nostri competitor. Tornando all’immagine notiamo che la seconda parte del risultato ottenuto corrisponde alla description
Due errori da evitare:
(o snippet); quindi, il meta description non viene visualizzato dagli utenti nella pagina, ma essendo contenuto nel codice HTML viene letto dagli spider e visualizzato nella SERP con la funzione di descrizione del link a cui è associato. Attenzione però lo snippet non sempre è il contenuto del Tag
Lasciare il Tag Description vuoto, oppure utilizzare lo stesso testo in tutte le pagine. Scrivere un meta description che non ha niente a che vedere con il reale contenuto della pagina.
Description, ma può essere formato in uno di questi tre modi: Se la keyword cercata è presente all’interno del meta tag description, Google ne visualizza i primi 160 caratteri. Se la keyword cercata non è presente all’interno del meta tag
Abbiamo visto quanto sia importante sfruttare al meglio questi due Tag per districarsi nella sempre più garbugliata SERP, ancora troppo piena di pagine “Documento senza nome”
description, Google potrebbe decidere di usare una o più
e snippet formati da testi senza senso. Inoltre abbiamo anche
sezioni del testo della pagina che corrispondono alla query,
imparato una regola fondamentale che vale quasi sempre
col rischio però che il risultato sia una frase senza alcun senso.
nel mondo della SEO e da tenere bene a mente perché ci terrà
Se la keyword non viene trovata nel tag e nel testo, Google
lontano da penalizzazioni di Google: non esagerare. ••
visualizza la descrizione presente all’interno della directory Dmoz2 (se il sito è presente in questa directory).
22 ·· your inspiration magazine
2 http://bit.ly/sfxfH
LINK: http://bit.ly/cfRRES
WEB USER EXPERIENCE: COME SONO MESSE LE AZIENDE ITALIANE?
•• Chiunque lavori nel web sa benissimo che non ci si può improvvisare da un giorno all’altro esperto del settore; in questo mestiere conta moltissimo l’esperienza e la voglia di imparare e restare sempre aggiornati. Non tutte le agenzie che si occupano di web e comunicazione, però, svolgono questo lavoro nella maniera corretta e sono tantissime quelle che offrono dei prodotti di qualità molto scadente.
Autore: Simone D'Amico
Le caratteristiche qualitative più famose che contraddistinguono un prodotto web sono
Web Designer & Developer from Frosinone. Adora tutto quello che ha a che fare con l'User Experience e con lo sviluppo di applicazioni per il web. Condivide articoli di web design sul suo blog e da circa un anno scrive per Html.it e per alcuni blog stranieri.
“visibili” e “misurabili”, ovvero esistono norme e strumenti che le regolano e che
sicuramente l’accessibilità e il rispetto degli standard web. Si tratta di caratteristiche
http://blog.simonedamico.com
ne determinano in maniera inequivocabile la conformità dell’applicazione web ad esse. Esiste però un'altra caratteristica non direttamente misurabile e soprattutto "invisibile" che la maggior parte delle agenzie italiane e dei web-addicted ignora del tutto ma che è fondamentale per il giusto successo di un'applicazione web: la User Experience.
COS’È LA USER EXPERIENCE La User Experience (UX) è una disciplina che si occupa della progettazione e realizzazione di sistemi a misura di utente attraverso l’interazione diretta tra essi. Non è una materia inerente alla sola realizzazione di applicazioni web ma può essere applicata ad ogni settore allo scopo di realizzare prodotti che facilitino l’esperienza dell’utente. In alcune università, ad esempio il Politecnico di Milano, viene insegnata UX all’interno di corsi di laurea di Disegno Industriale proprio perché è fondamentale per un’azienda realizzare dei prodotti che semplifichino la vita agli utenti. L’esperienza utente è soggettiva, i bisogni, le necessità, i gusti, le scelte di ogni utente che utilizzerà il sistema non sono direttamente misurabili, quindi non può essere
24 ·· your inspiration magazine
1 http://bit.ly/9qKtgV
User Experience: come sono messe le aziende italiane? Quanto le web-agency italiane sono al passo con i tempi e con i reali bisogni degli utenti
realmente “progettata”. Ci sono però modelli e tecniche che consentono di avvicinarsi quanto più possibile alle esigenze di ogni utente o classe di utenza che utilizzerà il prodotto finale. Uno strumento importantissimo nello User Experience Design sono i test di usabilità. Tali test, infatti, permettono l’interazione diretta tra gli utenti e il sistema ed aiutano quindi a determinare le soluzioni più adatte in ogni situazione.
LA SITUAZIONE DELLE AGENZIE ITALIANE Come detto pocanzi, la User Experience è una disciplina fondamentale per la realizzazione di applicazioni web funzionali e usabili. Durante la redazione della mia tesi, incentrata sui modelli di sviluppo web-oriented, ho contattato diverse aziende italiane ed estere per studiarne il modello di lavoro al proprio interno. I risultati di tale studio, purtroppo, sono stati disarmanti e lasciano molto da pensare riguardo la situazione delle web-agency italiane. di modelli di sviluppo è emerso che la principale è la mancanza Vediamo insieme un po’ di dati emersi dall’indagine.
di formazione. Spesso i progetti vengono gestiti da personale
La scelta delle aziende è stata effettuata in base a conoscenze
proveniente da altri settori (soprattutto tipografico) senza
personali ma, soprattutto, in base all’influenza che esse ricoprono
preparazione adeguata alla materia.
sul web attraverso blog aziendali, posizionamento sui motori di ricerca, social network, conferenze, ecc;
Un’altra motivazione importante è data dal ruolo che il sito web
ovvero tutti quei canali che consentono ad un potenziale cliente
ricopre nel prodotto offerto dall’azienda. Alcune, infatti, offrono
di raggiungere e contattare l’azienda. Non sempre però influenza
un prodotto più complesso in cui il sito web rappresenta solo
sul web corrisponde a lavoro di qualità e il problema principale
una piccola parte, a volte opzionale. Sono per lo più aziende che
risiede nella scarsa capacità del cliente di avere un metro
offrono servizi di comunicazione, pubblicità e posizionamento sui
di giudizio del metodo di lavoro dell’azienda se non prima
motori di ricerca in cui la realizzazione dell’applicazione web
della realizzazione del lavoro.
è vista come un’unica fase realizzata senza metodo e,
Il primo dato importante emerso, infatti, è stato che l’82%
nella maggior parte dei casi, senza formazione e rispetto
delle aziende italiane contattate non utilizza al proprio interno
degli standard. Queste aziende hanno definito “troppo
alcun processo. Non parliamo di metodi antiquati ma proprio della
dispendioso” effettuare delle fasi di analisi e ricerca prima
mancanza di un modello all’interno dell’azienda.
di iniziare lo sviluppo di un progetto e, soprattutto, non hanno
Analizzando le motivazioni che spingono le aziende a non fare uso
alcuna preparazione di base su argomenti fondamentali.
·· 25
WEB
USER EXPERIENCE: COME SONO MESSE LE AZIENDE ITALIANE?
Sembra quindi del tutto superfluo chiedersi il loro livello
alla mancanza di informazione del cliente finale.
di formazione riguardo la User Experience.
Il cliente, infatti, non ha un metro di misura per valutare la qualità
Come detto in precedenza, l’82% delle agenzie italiane
del prodotto offerto da tali agenzie quindi, finché gli utenti
non utilizza alcun metodo di lavoro al proprio interno.
non acquisiranno la consapevolezza e le corrette conoscenze,
Il restante 18% è composto da aziende che realizzano prodotti
queste aziende non percepiranno l’esigenza di adattarsi agli attuali
di qualità medio - alta. Anche qui, però, la situazione non è molto
standard qualitativi.
rosea. E’ vero che sono molto attente a caratteristiche come
Per un’azienda integrare al proprio interno un modello
validazione del codice, cross-browsing, progressive enhancement,
per la progettazione dell’esperienza utente viene visto solo come
alcune all’accessibilità anche in quelle applicazioni web
un costo. Costi di formazione iniziale, rallentamenti del processo
non destinate a Pubbliche Amministrazioni ma molte di esse
interno nei primi periodi di adozione, personale qualificato,
hanno importantissime lacune riguardo la UX. Bisogna ammettere
team di utenti per i test di usabilità sono solo alcuni dei costi
che alcuni dei principi di questa disciplina vengono messi in atto
che l’azienda dovrebbe sostenere e questo fa sicuramente
da queste aziende anche inconsapevolmente però resta ancora
desistere le poche che vorrebbero adeguarsi.
troppo basso il numero di aziende che ha un’adeguata formazione
Bisogna tenere conto però che i due modelli più utilizzati
al proprio interno.
per la progettazione della UX, User-Centered Design1 e Agile UX2 (o Agile UXD), sono stati realizzati con l’obiettivo
CONCLUSIONI
di eliminare i costi di manutenzione delle applicazioni. Un’applicazione web che contiene al proprio interno errori
Rispetto all’estero, la situazione italiana attuale è davvero critica.
di progettazione e di usabilità necessita di continue modifiche
Si vedono dappertutto presunti web designer che, avendo letto
e patch in corso d’opera. Queste operazioni di manutenzione
un manuale di HTML, aprono il loro sito web spacciandosi
ovviamente hanno un costo per l’azienda, spesso elevato.
per agenzia web con esperienza decennale.
Costo che però verrebbe drasticamente ridotto affidandosi
Neppure quando si ha a che fare con agenzie che gestiscono
a modelli per la progettazione dell’esperienza utente consentendo
progetti medio - grandi le cose migliorano e, tuttora, la maggior
anche di coprire in breve tempo le spese iniziali dovute
parte di esse utilizza metodi antiquati che non soddisfano
alla formazione e all’adozione del modello all’interno
correttamente tutte le esigenze di una web application.
dell’azienda. ••
Il problema principale è da attribuire, molto probabilmente,
26 ·· your inspiration magazine
2 http://bit.ly/c8MnVQ
LINK: http://bit.ly/chT61M
WEB ACCESSIBILITÀ: QUALI SONO GLI ERRORI PIÙ COMUNI?
•• Cosa significa accessibile? Riferendosi ad un sito web, la parola indica il rispetto di specifici requisiti che possono rendere i contenuti del sito stesso fruibili da chiunque. Analizzando la rete per scoprire quali siano i siti veramente accessibili, si hanno spesso rivelazioni interessanti. Purtroppo non sono sorprese positive, perché gran parte del web è ancora inaccessibile, ma non è mai troppo tardi per imparare dagli errori
Autore: Tommaso Baldovino
(sì, anche da quelli altrui) ed agire di conseguenza. Preoccuparsi degli errori mostrati in questo articolo non significa rendere il proprio sito
Fiorentino, 30 anni, ha iniziato occupandosi di graphic design per poi diventare web designer specializzato nella realizzazione di siti web usabili ed accessibili. Dal 2006 gestisce il sito tomstardust, scrivendo articoli su web design, nuove tecnologie e accessibilità, con approfondimenti dedicati alla piattaforma WordPress.
accessibile, ma è comunque un buon modo per avvicinarsi all’argomento ed iniziare
www.tomstardust.com
è invece importante inserirlo, per consentire a tutti di comprendere il contenuto
a interessarsene, contribuendo a rendere migliore il web.
TESTO ALTERNATIVO ASSENTE SULLE IMMAGINI E’ fondamentale che le immagini che comunicano un messaggio (non decorative) abbiano un testo alternativo. Proprio per questo esiste l’attributo alt, che viene letto dagli screenreader e viene visualizzato sulla pagina web quando un’immagine non è raggiungibile. Molto spesso capita di trovare immagini significative senza testo alternativo: di una pagina web. Come scrivere il testo alternativo, e quando farlo? Il modo più semplice è immaginare di dover descrivere al telefono la pagina web ad un amico. Se un elemento grafico comunica un messaggio, troverete anche le parole giuste per trasmetterlo. Altrimenti lasciate l’attributo alt vuoto o non inseritelo affatto, a meno che non stiate usando una doctype di tipo XHTML.
28 ·· your inspiration magazine
Accessibilità: quali sono gli errori più comuni? I problemi di accessibilità più diffusi sul web, ed alcuni consigli per evitarli.
USO DEI CAPTCHA I captcha possono essere utili per evitare ondate di spam, ma sono un ostacolo spesso insormontabile per gli utilizzatori di screen-reader. A volte esistono delle alternative audio, ma non sempre sono comprensibili: gli utenti non vedenti che ho conosciuto hanno spesso avuto problemi in questo senso. Se vuoi utilizzare un filtro per evitare lo spam, cerca soluzioni intelligenti ed evita i captcha. Un esempio? Chiedere la soluzione di semplici operazioni matematiche, o la risposta ad una domanda di pubblico dominio. Attenzione però a non esagerare: un’operazione matematica troppo complessa potrebbe creare delle difficoltà.
LINK NON RICONOSCIBILI I collegamenti ipertestuali devono essere sempre ben distinguibili dal resto del testo. Capita di imbattersi in siti web dove i link sono riconoscibili solo al mouseover, o dove sono differenziati dal resto solamente tramite il colore: sono tutti esempi di siti non accessibili. Per evitare problemi, la soluzione più solida è quella classica:
CONTRASTO TRA TESTO E SFONDO NON SUFFICIENTE
utilizzare la sottolineatura sui link testuali, distinguendoli dal resto anche tramite il colore. Se non vuoi sottolinearli, trova comunque un altro modo oltre al colore per distinguerli
Considerando che l’8% degli uomini e l’1% delle donne
dagli altri contenuti testuali, come il grassetto o il corsivo.
ha una percezione dei colori diversa dalla media, un sito accessibile deve preoccuparsi anche di avere contenuti leggibili indipendentemente dai colori utilizzati.
CAMPI DEI FORM NON ASSOCIATI ALLE LABEL
Per questo motivo esistono numerosi strumenti che consentono di controllare se il contrasto utilizzato tra un testo ed il colore
I moduli sono una parte importante di un sito web, ma vengono
di sfondo siano ottimali. Se hai dei dubbi a riguardo,
spesso sottovalutati. Un form dove le label non esistono
puoi controllare la differenza di luminosità tra due colori usando
o non sono associate ai relativi campi, non è accessibile.
il Colour Contrast Ratio Analyser1, o verificare un’intera pagina
Chi utilizza un lettore di schermo ha gli strumenti per scorrere
2
web su Check My Colours . Evita di usare colori troppo vicini
le etichette di un modulo e compilare i campi corrispondenti,
tra loro per testo e sfondo, molti visitatori te ne saranno grati.
ma senza una pagina ben formattata non saprà dove inserire i
1 http://bit.ly/Kirq
1 http://bit.ly/r0XpW
·· 29
WEB
ACCESSIBILITÀ: QUALI SONO GLI ERRORI PIÙ COMUNI?
propri dati. Se il form è legato all’acquisto di un prodotto
di differenziare i campi obbligatori. Distinguerli con il rosso
o all’utilizzo di un vostro servizio, l’utente semplicemente
(o con qualsiasi altro colore) non è una soluzione accessibile:
non comprerà quello che gli offrite o non si iscriverà
molto meglio usare anche un asterisco accanto alla label.
alla vostra newsletter. I problemi evidenziati sono quelli più diffusi, ma è comunque
USO ERRATO DELLE INTESTAZIONI HTML
importante sapere che non sono gli unici. Per avere un quadro completo e realizzare un sito accessibile, oltre a seguire queste raccomandazioni il primo riferimento sono le WCAG 2.0 3,
Le intestazioni sono fondamentali per dare un ordine ai contenuti
e per le Pubbliche Amministrazioni italiane è fondamentale
ed organizzarli in sezioni. Considerando che l’h1 è spesso il modo
la legge Stanca ed i relativi requisiti tecnici4.
migliore per evidenzare il titolo della pagina, tutte le altre possono essere utilizzate per dare un senso ai contenuti sottostanti.
Realizzare un sito accessibile non è sempre immediato,
L’errore più comune è saltare un livello, passando ad esempio
ma i vantaggi sono innegabili. Non è solo una scelta ideologica,
da h1 ad h3. Questo è un problema per chi si orienta saltando
l’accessibilità è anche un’opportunità: basta saperla sfruttare.
da un’intestazione all’altra come fanno gli utilizzatori di screen-
Il web è nato per essere di tutti, utilizzare gli strumenti esistenti
reader.
per renderlo veramente accessibile è la scelta corretta. ••
VEICOLARE INFORMAZIONI TRAMITE IL COLORE Fare affidamento sui colori per comunicare un messaggio è sbagliato, perché non tutti potrebbero percepirli allo stesso modo. E’ un problema tipico dei moduli quando si tratta
30 ·· your inspiration magazine
3 http://bit.ly/8n4hRH
4 http://bit.ly/aisDw4
LINK: http://bit.ly/9DajgR
WEB
FORM 3.0: L'EVOLUZIONE DELLA SPECIE
•• Croce e delizia di ogni sito che si rispetti, le form costituiscono il mezzo essenziale per mettere in contatto gli utenti del sito ai loro gestori. Croce di due generazioni di web designer ed editor, alle prese con le difficoltà di disegnare e produrre moduli di contatto e buoni d’ordine esteticamente accattivanti, funzionali e compatibili tra browser e sistemi operativi differenti. E delizia del cliente proprietario del sito, che nel modulo vede
Autore: Cristian Angelini
compiersi l’obiettivo finale: il contatto profilato da aggiungere alla lista marketing, l’ordine per gli articoli del suo e-commerce.
Cristian è un informatico freelance, specializzato nella progettazione e produzione di siti web e, più in generale, nelle tecnologie internet e correlate diavolerie.
Le form vivono a cavallo di due mondi: da una parte, la composizione di html e javascript che presenta e controlla campi di input di varia natura. Dall’altra, lo script sul server che riceve ed elabora i campi, per poi restituire i risultati all’utente sotto forma di altro html. Più di ogni altro elemento, la form richiede conoscenze approfondite di informatica tradizionale: il controllo dei campi in input, la loro messa in sicurezza, le elaborazioni
http://www.cangelini.com/sito-it/
necessarie per salvare i dati su database o trasformarli in qualcosa di utile sia per il gestore del sito che per l’utente.
C’ERA UNA VOLTA LA SEMPLICITÀ: IL MODELLO STANDARD La nascita delle form è contemporanea alla nascita dell’html vero e proprio, e come tale ne ricalcano, nella struttura e nelle capacità, semplicità di creazione quanto indipendenza dalla loro rappresentazione: nell’ideale del primo html, la rappresentazione di ogni elemento prescinde dalle funzionalità dell’elemento in se ed è lasciata totalmente al controllo del browser. Ovviamente, un concetto del genere è quanto di più distante dalle idee di un designer, che vuole poter definire accuratamente l’aspetto di ogni
32 ·· your inspiration magazine
Form 3.0: l’evoluzione della specie Storia, attualità e futuro dei moduli di contatto
dettaglio e disporlo come e dove preferisce all’interno della pagina.
di tutte e tre le tipologie, con le loro necessità: il designer,
Nel mondo avventuroso del web ante CSS e modelli standard,
che richiedeva il posizionamento preciso degli elementi;
disporre l’HTML significava immergersi in cervellotici ed insensati
l’informatico, che doveva mostrare risultati di ricerca,
(agli occhi dei professionisti odierni) ammassi di tabelle nidificate,
messaggi di conferma, messaggi d’errore; infine l’editor,
spesso a livelli che sfidavano la geometria di un gomitolo di lana
che doveva intermediare tra le forme dell’uno e la sostanza
alle prese da troppi giorni con un gatto annoiato.
dell’altro producendo il codice HTML necessario.
Il guazzabuglio risultante accontentava in parte le esigenze dei designer, che acquisivano possibilità elementari di controllo dell’aspetto della form − restavano, ed in parte restano pure oggi,
I PROBLEMI DEL MODELLO PRE STANDARD
da risolvere i problemi legati all’aspetto diverso dei campi di input tra i diversi browser − al prezzo di creare mostri di codice HTML
Nel medioevo del web, età oscura popolata da browser lenti
che diventavano ben presto ingestibili: la creazione
quanto incapaci e problematici che possiamo collocare
di un modulo complesso poteva richiedere ore o giorni di lavoro,
a cavallo del passaggio del millennio, e che vede la sua massima
notti e weekend spesi nei giorni prima della consegna a rifinire,
rappresentazione nei gomitoli di codice tabellare e nell’esplosione
spostare e riannidare, ed apocalissi professionali quando il cliente,
del Flash come prima ribellione, il mondo del web design si trova
ispirato dal vedere i primi risultati, richiedeva modifiche
a conoscere ed affrontare i problemi legati al modello
tali da stravolgere l’impianto di base del modulo:
pre-standard:
rimettere il gomitolo in ordine era spesso fuori questione, meglio
la complessità e la manutenzione pressoché impossibile
ripartire da un nuovo gomitolo...
del codice, che cresceva in forma esponenziale sulla base
La creazione dell’aspetto visivo del modulo era comunque
delle dimensioni delle form e delle idee dei designer:
solo il primo passo, le prime due gambe del cavallo: le altre due,
molto spesso, le prime proporzionali alle capacità quanto
poggianti sul lato server, erano spesso di competenza di informatici puri, spesso con interessi e capacità diametricalmente opposte
all’ego dei secondi; la difficoltà nel far lavorare professionisti di estrazione molto
a web designer e web editor. Ma la natura del primo HTML
differente su un punto che riguardava contemporaneamente
è tale per cui dati e rappresentazione non sono separati.
arti visive quanto informatiche, un pupi e secchione di gruppo
Ogni form tradizionale genera una nuova pagina HTML:
ante litteram: necessità incomprensibili del reparto marketing
questa pagina visualizza i risultati, o anche solo un messaggio
del cliente, desideri visivi dei designer al confine dell’utopia,
di conferma o di errore:
restrizioni di editor html pallidi dopo troppe notti in bianco, e stretti e rigorosi formalismi logico−matematici degli informatici che guardavano in modo torvo all’esibizione eccessiva tra colori e forme dei risultati del loro lavoro; i problemi funzionali del modello basato sull’http puro: l’invio di una form significava, essenzialmente, uscire dalla pagina corrente e caricarne una nuova. Passaggio che poteva fallire, e lasciare l’utente da solo, in mezzo al guado, alle prese con un codice d’errore strano figura 1 ••
e senza alcuna assistenza sull’avvenuto successo o meno della sua richiesta. Cosa significa questo messaggio?
Nelle pagine di risposta dovevano essere presenti i lavori
Sarà partito, il mio modulo? Sono arrivate, le mie richieste?
·· 33
WEB
FORM 3.0: L'EVOLUZIONE DELLA SPECIE
Cosa faccio ora? In termini di esperienza di navigazione,
di M.C. Escher che all’eleganza geniale degli originali:
qualcosa di molto lontano dal minimo ideale:
ora il designer può sbizzarrirsi, seppure senza esagerare,
l’utente che termina in una “zona non controllabile”
l’editor può dormire e tornare tra coloro che vedono
è un utente abbandonato a se stesso.
la luce del sole (ogni tanto), l’informatico disinteressarsi di concetti alieni come forme e colori;
La conseguenza: tempi di produzione spropositati rispetto
allo stesso tempo, variare e posizionare gli elementi delle form
al resto del sito, costi proporzionalmente eccessivi, qualità visiva
diventa un lavoro molto più semplice, seppure ancora laborioso
spesso non eccelsa e notevoli difficoltà ad eseguire manutenzioni
ma non differente dal variare posizione e dimensione
successive alla produzione del sito. Ma nel mondo pre standard,
di qualunque altro elemento html, e quantificabile,
molti dei problemi delle form erano condivisi da molti altri settori dell’html: posizionamenti, dimensioni e compatibilità multi
in termini di tempo e ore e quindi di costi, allo stesso modo; l’imporsi di tecnologie asincrone permette alla form di essere
browser valevano per ogni elemento, foto piuttosto che testi
inviata “in background”, senza dover ricostruire la pagina
o ancora menù.
di risposta: l’utente non ha la sensazione di “abbandonare” il sito, e può essere guidato o informato con precisione nel caso
Il medio evo, fortunatamente, si conclude nel giro di pochi anni:
di problemi, sul destino dell’operazione che ha richiesto.
l’avvento di nuovi browser e nuovi modi di pensare il web apre
Per la massima gioia dell’esperto in comunicazione ed usabilità!
la strada alle soluzioni di molti dei problemi riscontrati e definiti negli ultimi anni dello scorso millennio, e nei primi di questo.
Seppure il passo sia da gigante, e di quelli ben vogliosi di camminare, non tutti i problemi sono risolti e non siamo ancora
IL MODELLO STANDARD: WEB 2.0
nell’eden assoluto del design visivo: l’aspetto dei campi di input, in particolare check-box,
L’Illuminismo nel web, in realtà, nasce ancora nel bel mezzo
radio e select, è ancora molto diverso a seconda dei browser
dell’era buia: i quattro punti cardinali su cui si poggia - html 4,
e soprattutto dei sistemi operativi;
css 2, javascript e modelli posizionali standard- sono in realtà
le funzionalità semantiche di certi tipi di campi - date,
definiti già nel 2001. Ma per l’uso sistematico e produttivo
indirizzi email, per citarne un paio - non sono ben definite
di queste tecnologie dovrà passare ancora qualche anno:
e molto spesso il loro uso inganna l’utente. Alcuni tipi di campi
computer più potenti e browser più evoluti, creati attorno
molto usati nel design delle UI, come i contatori o i combo box,
ai nuovi standard tecnologici anziché adattati da basi primitive, sono gli strumenti su cui verranno costruiti i nuovi modi
non sono definiti; le transazioni, ovvero l’invio delle form in background, possono
di pensare internet: social network, blog, i concetti
non risultare molto chiare o visibili al navigatore, che necessita
di accessibilità e usabilità applicati su larga e piccola scala.
sempre di un feedback relativo alle azioni che ha intrapreso
Molto di questo progresso si deve soprattutto all’imporsi
la sicurezza dei dati trasmessi, o l’utilizzo delle form in modo
come, appunto, cliccare sul pulsante di invio della form; dei cosiddetti framework: la nascita di strumenti come jQuery,
malizioso atto a sovvertire il funzionamento del sito,
mooTools e prototype permettono, finalmente, di lavorare
non è assolutamente impedito ed è spesso trascurato,
concentrandosi più sui problemi del progetto anziché su quelli
specialmente nei team di lavoro dove non sono comprese figure
dei browser, sfruttando appieno nuove tecnologie come AJAX
informatiche o non sono allocate le ore necessarie alla messa
senza doversi preoccupare di come queste lavorino
in sicurezza ed al controllo del codice scritto.
su un browser o su un altro. E le form, di tutto questo fiorire di tecnica “ragionevole”, beneficiano in modo generoso:
Per quest’ultimo punto, data la complessità dell’argomento
separando i dati dalla loro presentazione, e rendendo
rimando al tutorial sulla sicurezza sui siti web1
questa completamente posizionabile, si abbandona
che ho pubblicato sul sito di Your Inspiration Web.
senza rimpianti la stagione delle tabelle improprie
Per il resto, nell’attesa di ulteriori miglioramenti su html,
e di codice più simile alla complessità cervellotica
css e javascript, alcuni già in dirittura d’arrivo, è comunque
di mal riuscite imitazioni delle opere
possibile intervenire e sviluppare le nostre form tenendo conto
34 ·· your inspiration magazine
1 http://bit.ly/dkih5B
e spesso risolvendo in modo soddisfacente questi problemi.
JQUERY E LE FORM
Ad esempio, riducendo al minimo necessario i campi di input
In aggiunta ai metodi normali ed applicabili a tutti gli elementi,
e trasformandone altri in campi “custom”, di cui possiamo
per quanto riguarda i campi di input jQuery mette a disposizione
decidere l’aspetto mantenendone la funzionalità, possiamo dare
metodi e classi specifici per la manipolazione e la selezione
una mano al reparto grafico, e magari guadagnarci qualche
degli elementi2.
cappuccino a fronte di maggiore flessibilità che gli concediamo
Il metodo .val() restituisce o cambia il valore del campo.
nello sviluppo dei layout! Vediamo come può aiutarci jQuery.
Questo include i campi di testo, anche nascosti, le textarea e le select (ma occorre prestare attenzione ai campi radio
LA STRUTTURA DI UNA FORM
e checkbox: questi ultimi cambieranno il valore, ma non lo stato). Per verificare se un campo radio o checkbox è settato, occorre
Nell’HTML classico, una form è composta da tutti gli elementi
usare lo pseudoselettore :checked :
compresi dal tag <form>. All’interno di questo tag possono essere compresi sia tag HTML normali come <a>, <b>, <ul>, sia tag specifici e relativi ad una form: <fieldset>, <label> ed ovviamente <input> e tutti i vari derivati come <textarea>, <button>, etc.
if ($(“input.privacy:checked”).length > 0) alert(“privacy approvata!”);
oppure usare la proprietà DOM checked:
La form è dotata di attributi che consentono di specificare: l’URL che viene chiamata per eseguire il submit della form; il metodo, GET o POST, che identifica lo scopo della form ed il sistema usato per passare i campi della form; variazioni particolari sul metodo, usate soprattutto per indicare
if ($(“input.privacy”)[0].checked) alert(“privacy approvata!”);
quest’ultima è comoda soprattutto quando lo stato di un checkbox o di un radio deve essere alterato:
che nella form sono presenti file in upload, tramite l’attributo enctype; altri attributi, standard o meno, per definire la classe, lo stile, l’id o la finestra di target dell’operazione di submit.
$(“input.privacy”)[0].checked = false;
L’uso di jQuery per la manipolazione delle form ci da accesso a capacità significative: non solo possiamo manipolare i contenuti dei campi di input, ma anche riferirci agli altri elementi HTML
La form, e gli elementi della form, generano inoltre eventi peculiari
non strettamente di form, come paragrafi di testo statici o link,
e specifici all’oggetto a cui si riferiscono: ad esempio,
in relazione alla loro gerarchia con gli elementi di input stessi.
eventi di click per i pulsanti, eventi di change per i campi di testo
L’utilizzo del framework riduce nettamente la differenza
e l’evento submit per le form.
tra il cambio del contenuto di un campo di input o quello
A livello di javascript, tutte le form sono conservate
del contenuto di un <div>: questo rende decisamente più semplice
tradizionalmente nell’oggetto document.forms.
non utilizzare campi di input, ad esempio, per i campi “readonly”
A sua volta, ogni elemento di document.forms contiene tutti
utilizzati tradizionalmente per quello scopo. Rispetto ad un campo
gli oggetti che rappresentano i campi di input, i loro valori
di input, l’elemento html normale è molto più semplice da definire
di default e quelli correnti. In modo speculare, le forms ed i relativi
come aspetto: questo può rendere più semplice ed efficace
elementi sono rappresentati nel modello DOM del documento:
disegnare la form, poiché dà più strumenti in mano al designer.
quindi, è possibile usare jQuery per manipolare ed usare le form esattamente come se si trattasse di normalissime parti di HTML:
Facciamo un esempio concreto: un modulo d’ordine. Le funzionalità sono queste:
$(“form.ordine>fieldset.anagrafica>label.nome>input”). hide() $(“p”,$(“#cognome”).parent()).html()
e chiaramente anche gestirne gli eventi:
su ogni riga compare la descrizione di un articolo ed il prezzo unitario, e si lascia al cliente la possibilità di variare la quantità; alla variazione della quantità, si varia il prezzo totale dell’articolo e del totale del modulo d’ordine. Il codice html “tradizionale” potrebbe essere questo
$(“input[type=checkbox]”).click(console.log);
2 http://bit.ly/9v8Gf1
(ridotto, per motivi di chiarezza e semplicità, al minimo funzionale:
·· 35
WEB
FORM 3.0: L'EVOLUZIONE DELLA SPECIE
totale += parseInt($(this).val());
mancano, ad esempio, le label per i campi!):
}); <form class="modulo" method="post" action="ordina. php">
$("input[name='totale']").val(totale); });
<fieldset> <span>Articolo 1</span> <input class="prezzo" name="prezzo_1"
});
È possibile vedere una form funzionante a questo indirizzo3 [Figura 2]:
value="10" readonly="readonly" /> <input class="quantita" name="quantita_1" value="1"/> <input class="totale_articolo" name="totale _articolo_1" value="" readonly="readonly"/> </fieldset>
<fieldset> <span>Articolo 2</span>
figura 2 ••
<input class="prezzo" name="prezzo_2" value="15" readonly="readonly" /> <input class="quantita" name="quantita_2" value="1"/> <input class="totale_articolo" name="totale _articolo_2" value="" readonly="readonly"/> </fieldset>
Ora, per rallegrare il reparto grafico già alle prese con le nostre restrizioni in termini di risoluzione massima e di font, possiamo decidere di ridurre al minimo indispensabile i poco estetici campi di input. Quali sono i campi che possiamo eliminare? tutti i campi che non devono essere modificabili dall’utente; tutti i campi che non devono essere necessariamente trasmessi allo script che riceve la form.
<fieldset> <input name="totale" value="" readonly="readonly"/> </fieldset> </form>
Normalmente, i campi calcolati possono essere tranquillamente omessi. A volte dobbiamo trasmettere il totale per verificare che il javascript abbia eseguito il calcolo corretto e sia lo stesso che l’utente ha approvato: supponiamo questo non sia il caso.
Per una form di questo tipo, possiamo facilmente scrivere
Riscriviamo, quindi, la form sostituendo ai campi calcolati, semplici
un handler che ricalcoli i totali in automatico al variare
marcatori span:
delle quantità del modulo, semplicemente legandolo alla variazione dei campi quantità:
<form class=”modulo” method=”post” action=”ordina. php”>
$(function(){ $("form.modulo input.quantita").change(function(){
<span>Articolo 1</span> <fieldset>
var $fieldset = $(this).parent();
<span class=”prezzo” value=”10”></span>
$("input.totale_articolo", $fieldset).val(
<input class=”quantita” name=”quantita_1”
parseInt($("input.prezzo", $fieldset).val()) * parseInt($("input.quantita", $fieldset).val()) );
var totale=0; $("form.modulo input.totale_articolo").each(function(){
36 ·· your inspiration magazine
value=”1” /> <span class=”totale_articolo”></span> </fieldset>
<span>Articolo 2</span> <fieldset> <span class=”prezzo” value=”15”></span>
3 http://bit.ly/9BRdIw
<input class=”quantita” name=”quantita_2” value=”1” />
A questo punto ... è possibile personalizzare altri controlli? La risposta è sì, ma ... l’argomento dei campi custom
<span class=”totale_articolo”></span>
è estremamente ampio, ed esce dai confini stabiliti
</fieldset>
per questo articolo.
HTML5 E LE FORM
<span class=”totale”></span>
</form>
L’avvento dell’HTML5, tra i tanti cambiamenti che apporterà,
E variamo l’handler jquery di conseguenza:
aggiungerà funzionalità importanti anche sul lato form. Ma lavorare in HTML5 oggi significa dover fare i conti anche
$("form.modulo input.quantita").change(function(){ var $fieldset = $(this).parent();
con la massa enorme di browser non compatibili e spesso anacronistici che popolano comunque la maggioranza dei PC.
$("span.totale_articolo", $fieldset).text(
Considerata la tendenza di questi anni, è altamente improbabile
parseInt($("span.prezzo", $fieldset).text()) * parseInt($("input.quantita", $fieldset).val()) );
che tutte queste installazioni improvvisamente migrino verso lidi migliori, più sicuri e più puliti - meglio la spiaggetta nota con tanta gente, anche se popolata da brutti ceffi, con panorama sulla ferrovia e malridotta, che quelle migliori
var totale=0;
e più pulite ma che non conosco. Quindi, dobbiamo
$("form.modulo
necessariamente tenere in considerazione la maggioranza,
span.totale_articolo").each(function(){
non solo l’elite, e procedere di conseguenza.
totale += parseInt($(this).text());
L’HTML5, in generale, segue la tendenza di “semanticizzazione”
});
del linguaggio. Le form non sfuggono a questa logica, ed i campi
$("span.totale").text(totale);
di input, che nell’HTML4 erano campi generici come testo, radio,
});
checkbox, select, acquistano una serie di nuovi tipi semantici5:
});
È possibile vedere una form funzionante a questo indirizzo4
<input type=”datetime” name=”appuntamento” /> <input type=”date” name=”nascita” />
[Figura 3]:
<input type=”tel” name=”cellulare” /> <input type=”email” name=”destinatario” /> <input type=”number” name=”quantita” />
La bella notizia è che possiamo usare questi tipi già ora, e persino sui browser più datati. Perché? Perché questi browser trattano tutti i tipi che “non comprendono” come fossero campi di testo. Quindi, ci troviamo in questa situazione: i browser più recenti comprenderanno i nuovi tipi, figura 3 ••
ed eseguiranno la validazione al momento del submit della form. In certe piattaforme, questi campi verranno facilitati
I vantaggi:
in input: ad esempio, visualizzando un calendario nei campi
i campi di span sono molto più semplici da decorare rispetto
di data, o tastierini numerici ridotti per i campi number quando
a quelli di input;
visualizzati su smartphone;
vengono trasmessi allo script solo i campi necessari;
i browser più datati li useranno come puri e semplici campi
viene diminuito l’uso di names/ids all’interno del documento;
di testo: dovremo pensare noi a validarli, e se necessario
e tutto a fronte di modiche veramente triviali.
agganciare controlli particolari come, appunto, il calendario
Possiamo considerare questa tecnica come un vero e proprio campo di testo read only “custom”.
4 http://bit.ly/ddYXHe
5 http://bit.ly/a6gdda
per le date. A questo punto, è nostro compito rendere ai browser più datati
·· 37
WEB
FORM 3.0: L'EVOLUZIONE DELLA SPECIE
più semplice la gestione dei campi in questione. Il primo passo
per i campi search: in questo caso, però dobbiamo fare una scelta.
da fare, è rilevare se il tipo viene o meno supportato.
Visualizziamo il facilitatore solo per i browser non-html5
Per questa funzione, utilizziamo una caratteristica della proprietà
o per tutti? In quest’ultimo caso, rischiamo di avere due facilitatori,
type dei campi di input: non può contenere valori non validi,
il nostro e quello del browser. Le scelte, in questo caso, devono
ma contiene sempre il tipo effettivo dell’oggetto visualizzato
essere fatte basandoci sulla piattaforma e non attivando
(o undefined, per i browser più anacronistici). Se dichiariamo
il facilitatore caso per caso. Ne vale la pena?
in HTML un campo type=”email”, in javascript la proprietà type
Dipende dal progetto ... la scelta è basata su parametri
dell’oggetto relativo conterrà email solo se effettivamente
quali budget e target del sito. Anche in questo caso,
supportato dal browser. A questo punto, possiamo ancora
l’argomento facilitatori meriterebbe articoli a parte.
una volta affidarci alle magie di jQuery: if ($(“input.destinatario”).attr(“type”) == ‘email’) alert(“Usi un browser moderno”);
AJAX E LE FORM Quindi, dopo aver guadagnato i favori del reparto grafico e reso
Le validazioni della form in javascript (che, ricordo, devono sempre
più intuitive le nostre form modernizzandone l’aspetto,
essere replicate anche dal lato server!) devono sempre essere
è ora di far felici gli esperti della comunicazione e gli informatici
effettuate al momento del submit . Con jQuery, questo è un gioco
del gruppo eliminando l’effetto di “uscita dal sito” che si ha
da ragazzi:
quando si esegue il submit delle form tradizionali - e migliorando la comunicazione tra browser e server php ... ma facciamo
$(“form”).submit(function(){
una cosa per volta. Per tutte le nostre necessità asincrone,
var $numeri = $(“input.quantita”);
jQuery ci mette a disposizione il metodo .ajax, che eseguirà
if ($numeri.attr(“type”) != ‘number’) {
per noi tutto il lavoro sporco di gestione multi browser, pulizia
for (var i=0;i<$numeri.length;i++)
dei parametri e gestione dei timeout. Il nostro compito è fornirgli
// verifichiamo che sia un numero: eventualmente possiamo permettere di lasciare il campo vuoto, in aggiunta al controllo del numero, o ignorare gli spazi: il controllo usato qui è ristretto per questioni di semplicità!
un indirizzo di destinazione, il metodo di chiamata, le variabili e due funzioni aggiuntive che verranno chiamate in caso di successo e in caso di errore della chiamata. Ora, possiamo unire le funzionalità specifiche delle form con quelle ajax, in un modo davvero semplice ed ingegnoso
if (parseFloat($numeri.eq(i).val()) !=
per ottenere un submit completamente asincrono.
$numeri.eq(i).val()) {
Per prima cosa, gestiamo l’evento submit della form, come
// se ritenuto necessario, cambiano stile al
abbiamo già visto sopra. Per evitare di “caricare” lo script, ci basta
controllo ‘errato’, o visualizziamo un messaggio
ritornare false:
di errore, a nostra scelta: ma blocchiamo il submit $(“form”).submit(function(){
ritornando false
var $form = $(this);
return false; }
// ...
} });
return false;
Per un esempio funzionante, guardate qui6 [Figura 4]:
});
All’interno dell’oggetto $form, sono già presenti due dei parametri figura 4 ••
Oltre le validazioni, possiamo certamente sbizzarrirci creando facilitatori: un calendario da attivare con il focus sui campi date, un tastierino telefonico per i campi telefonici, indici dinamici
38 ·· your inspiration magazine
necessari: il metodo e l’indirizzo di destinazione: $(“form”).submit(function(){ var $form = $(this); var metodo = $form.attr(“method”);
6 http://bit.ly/cAh5dG
var destinazione = $form.attr(“action”);
L’uso di uno o più di questi modi dipende chiaramente dal progetto, e dalle idee folli dei grafici che lo progettano
// ...
− ditegli che si può fare qualcosa del genere e vi garantisco che avrete le soluzioni più originali ed ingegnose
return false; });
(e cervellotiche, dal punto di vista del programmatore che dovrà implementarle ...). Per semplicità didattica, userò
Dobbiamo solo preparare le variabili per la form:
un semplice cambio di cursore del mouse che sarà a clessidra
e jQuery ci fornisce all’uopo il metodo .serializeArray.
durante il submit, e banali alert javascript per i messaggi:
Questo metodo costruisce un array associativo utilizzando i campi dell’oggetto form su cui viene applicato, utilizzando le stesse regole utilizzate dai browser: i campi devono avere
$(“form”).submit(function(){ var $form = $(this);
obbligatoriamente l’attributo name, essere attivi ed in uso. Il risultato del metodo si adatta perfettamente alle necessità del metodo .ajax:
$(“html”).css({cursor: “wait”}); $.ajax({ type: $form.attr("method"), url: $form.attr("action"),
$(“form”).submit(function(){ var $form = $(this);
data: $form.serializeArray(),
$.ajax({
error: function(xhr,tipoerr,e){ $(“html”).css({cursor: “auto”});
type: $form.attr("method"),
alert(“Errore nel submit:”+xhr.statusText);
url: $form.attr("action"),
},
data: $form.serializeArray(),
success: function(risultato){
error: function(xhr,tipoerr,e){
$(“html”).css({cursor: “auto”});
...
alert(“Form inviata con successo!”);
},
},
success: function(risultato){
});
... }, });
return false; });
return false;
Un esempio funzionante7[Figura 5]:
});
Rimane un ultimo meccanismo da mettere a punto. Se eseguite il submit della form con questa funzione, noterete un particolare non indifferente: l’utente non ha feedback di nessun genere − preme il pulsante di submit, e per qualche secondo (o molti secondi, se l’elaborazione è complessa), figura 5 ••
non succede nulla. Occorre dare all’utente l’impressione che qualcosa stia succedendo, ed in ogni caso comunicare
Tutto bene? Quasi. C’è un limite da considerare, ed un
eventuali errori o il successo dell’operazione: cosa che possiamo
opportunità da sfruttare. Il limite: la bellezza di questo sistema è
gestire tramite le due funzioni error e success passate come
che si può applicare universalmente a tutte le form, eccetto quelle
parametri alla chiamata su .ajax.
che devono inviare files in upload. Per queste, non c’è rimedio se
Esistono molti modi per dare all’utente l’idea di occupato:
non utilizzando i tradizionali metodi barbarici (ma efficaci) a base
impostando il cursore del mouse a “clessidra”;
di iframe e target sulle form. Spesso, può essere conveniente in
riducendo l’opacità della form;
questi casi separare le fasi di submit in due: prima quelle normali
visualizzando qualche gif animata in stile “attendere prego”.
in ajax, poi l’upload dei files con i metodi di cui sopra. ••
7 http://bit.ly/buDeGZ
·· 39
40 路路 your inspiration magazine
SOMMARIO TUTORIAL
42
Xml ·· Conoscere i feed RSS
46
42 46 50 54
CONOSCERE I FEED RSS. [PARTE 1] COME PROGETTARE UNA HOME PAGE CHE FUNZIONA GUIDA A GIMP: GRAFICA PROFESSIONALE A COSTO ZERO CSS3: I VANTAGGI DEI COLORI RGBA
Come progettare una home page che funziona
50
54
Gimp ·· Guida a Gimp: grafica professionale a costo zero
CSS ·· I vantaggi dei colori RGBA
·· 41
LINK: http://bit.ly/bC9XmM
TUTORIAL ·· XML CONOSCERE I FEED RSS (PRIMA PARTE)
XML
•• Grazie a loro siamo sempre aggiornati sulle novità pubblicate dai nostri siti preferiti. Tutti ne conosciamo ed apprezziamo i vantaggi, ma come funzionano veramente i feed? In questo tutorial vedremo cosa sta dietro ad un feed, con una breve introduzione al linguaggio XML grazie al quale è possibile implementare questa importante funzionalità. In seguito ci concentreremo sulla struttura che dovrà avere un file XML
Autore: Maurizio Tarchini
contenente le informazioni di un feed RSS. Alla fine di questo articolo, per te non sarà più un mistero come avviene il passaggio
Maurizio Tarchini è un programmatoretuttofare. Qualche mese fa è stato rapito e da allora vive ridotto in stato di schiavitù nello scantinato della redazione di YIW. Scrive su questo magazine contro la sua volontà al soldo di una ciotola di riso per articolo.
www.mtxweb.ch
delle informazioni tra un sito ed un lettore di feed.
LA CHIAVE DI ACCESSO É XML, QUESTO SCONOSCIUTO Purtroppo si parla veramente poco di questo potente linguaggio che sta alla base, tra le altre cose, dell’argomento che stiamo trattando. Dunque vediamo brevemente cos’é XML e come funziona. XML é un linguaggio di markup formalmente simile all’HTML ma nel quale siamo noi a definire i tag. É utilizzato per l’interscambio di dati in quanto la sua portabilità é assoluta. Non esiste infatti linguaggio di programmazione che non abbia delle API per analizzare i file in questo formato. Poniamo ad esempio che un tour operator voglia tenere costantemente informate le agenzie di viaggio rispetto alle offerte last minute. Potrebbe implementare un sistema in grado di creare un file XML che rappresenti l’elenco di queste offerte, e sviluppare
difficoltà: media tempo: 45min
42 ·· your inspiration magazine
un software in grado di leggere ed elaborare questo file da distribuire alle varie agenzie.
Conoscere i feed RSS [parte 1]
Cosa sta dietro un feed? Introduzione al linguaggio XML ed alla struttura per definire un feed.
E’ dunque sufficiente che il sistema che trasmette i dati e quello che li riceve utilizzino uno standard comune (struttura, tag, ...). Facciamo subito un esempio di file xml in modo da capire come é strutturato. Poniamo che si voglia rappresentare Your Inspiration Network: al suo interno vi saranno Your Inspiration Web e Your
<YourInspirationMagazine> <url>http://www.yourinspirationmagazine.com</url> <descrizione>La rivista dedicata al mondo del web design</descrizione> <autori> <autore> <nome>Sara Presenti</nome>
Inspiration Magazine;
<target>Grafica</target>
per ognuno di questi due siti vogliamo indicare l’URL,
<target>Grafica</target>
una breve descrizione e gli autori; per ogni autore inoltre desideriamo indicare il nome e l’argomento elettivo.
</autore> <autore> <nome>Cristian Angelini</nome>
La rappresentazione XML di tutto questo potrebbe essere
<target>Sicurezza web</target>
la seguente:
</autore> [xml]
</autori>
<YourInspirationNetwork> <YourInspirationWeb> <url>http://www.yourinspirationweb
.com</url> <descrizione>Blog di ispirazione nel campo del Web Design</descrizione> <autori> <autore> <nome>Maurizio Tarchini</nome> <target>Programmazione</target>
</YourInspirationMagazine> </YourInspirationNetwork> [/xml]
Come vedi il principio é molto logico. YIN contiene YIW e YIM che a loro volta contengono i tag url, descrizione e autori. Il tag autori contiene diverse volte il tag autore il quale contiene i tag tag nome e target. A questo punto, come detto, possiamo analizzare questo file attraverso qualsiasi linguaggio ed in qualsiasi piattaforma. In PHP, ad esempio, passando il file per la funzione
</autore> <autore> <nome>Nando Pappalardo</nome> <target>Web Design</target> <target>Web Design</target> </autore> <autore> <nome>Giustino Borzacchiello</nome> <target>Web Design</target> </autore> </autori> </YourInspirationWeb>
·· 43
TUTORIAL - XML CONOSCERE I FEED RSS (PRIMA PARTE)
simplexml_load_string1 potrò visualizzare l’URL di YIW semplicemente così: [php] $xml->YourInspirationWeb->url [/php]
Vediamo ora come dovrà essere strutturato il file XML di un feed.
STRUTTURA DI UN FILE XML PER LA DEFINIZIONE DI UN FEED RSS Ovviamente, se vogliamo che il nostro file abbia un senso, dovrà avere una forma predefinita e conosciuta da chi dovrà leggerlo. Per questa ragione i feed hanno una struttura standard con dei tag predefiniti. Vediamone i principali.
TAG DA UTILIZZARE PER DEFINIRE L’INTESTAZIONE DEL FEED sul feed. Al suo interno dobbiamo obbligatoriamente dichiarare
TAG DA UTILIZZARE PER LA VISUALIZZAZIONE DEGLI ARTICOLI
i seguenti tag:
Ogni articolo va racchiuso tra i tag item e deve contenere
title: Il nome del sito.
obbligatoriamente i seguenti tag:
link: l’URL del sito.
title: il titolo dell’articolo;
description: La descrizione del sito.
link: Il link dell’articolo;
Channel: è il tag principale che contiene tutte le informazioni
description: la descrizione o la parte introduttiva Possiamo poi aggiungere una serie di informazioni opzionali,
dell’articolo.
come: language: la lingua nella quale é scritto il sito (es. IT_it).
Anche il tag item ha diversi tag opzionali, vediamo i principali:
Questa informazione può rivelarsi utile ad esempio
author: l’autore dell’articolo;
per gli aggregatori.
pubDate: la data di pubblicazione dell’articolo in questo
managingEditor: l’email del responsabile dei contenuti del sito. webMaster: l’email del responsabile tecnico del sito.
formato standard “Sun, 19 May 2002 15:21:36 GMT".
Fino qui abbiamo visto l’intestazione del feed, ora vediamo come
UN ESEMPIO PRATICO
inserire i vari aricoli.
Proviamo ora a scrivere un feed di YIW contenente un paio di articoli in modo da vedere esattamente come dovrebbe apparire la struttura. Dobbiamo innanzitutto aprire il tag rss passando la versione (noi utilizziamo la versione 2.0 dei fedd RSS, che è quella attuale2), in questo modo: [xml] <rss version="2.0"> [/xml]
In seguito apriamo il tag channel ed iniziamo a passare le informazioni generali:
44 ·· your inspiration magazine
1 http://bit.ly/bUjZCT
2 http://bit.ly/16GNNI
[xml]
abbiamo visto un po’...</description>
<channel>
<author>nando@...</author> <pubDate>Tue, 13 Jul 2010 09:15:18 GMT
<title>Your Inspiration Web</title>
</pubDate>
<link>http://www.yourinspirationweb.com</link> <description>Il tuo blog di ispirazione
</item>
</description>
<item> <title>Gli stili nel web design:
<language>IT_it</language>
le caratteristiche dello stile organic
<webMaster>nando@yiw.com</webMaster>
</title>
[/xml]
<link>http://www.yourinspirationweb
Ed in seguito, per ogni articolo che vogliamo inserire nel feed,
.com/2010/07/12/gli-stili-nel-web-design
apriamo un tag item ed inseriamo le informazioni che desideriamo
-le-caratteristiche-dello-stile-organic/
pubblicare, in questo modo:
</link> [xml]
<description>Procediamo con la rubrica
<item>
dedicata agli stili del web design:
<title>Come Creare Template Personalizzati per le
due settimane fa abbiamo...</description>
Pagine di WordPress?</title>
<author>sara@...</author>
<link>http://www.yourinspirationweb
<pubDate>Mon, 12 Jul 2010 10:34:09 GMT
com/2010/07/13/come-creare-template-
</pubDate>
personalizzati-per-le-pagine-di-wordpress/</link>
</item>
<description>Nella lezione precedente abbiamo
<item> eccetera
visto un po’...</description>
</item>
<author>nando@....</author> <pubDate>Tue, 13 Jul 2010 09:15:18 GMT</pubDate>
</channel>
</item>
</rss>
[/xml]
[/xml]
Vediamo come si presenta il file alla fine:
Ecco, questo è un file XML correttamente formattato per rappresentare un feed RSS 2.0.
[xml] <rss version="2.0">
CONCLUSIONE
<channel> <title>Your Inspiration Web</title> <link>http://www.yourinspirationweb.com</link> <description>Il tuo blog di ispirazione </description> <language>IT_it</language> <webMaster>nando@yiw.com</webMaster> <item>
In questo articolo abbiamo visto il principio della struttura di un file xml ed in seguito siamo entrati più nel dettaglio analizzando la forma di un file xml utilizzato per la realizzazione di un feed. Nel prossimo numero vedremo come procedere qualora volessimo dare la possibilità di sottoscrivere un feed sul nostro sito (naturalmente se utilizzi un CMS questa opzione é già ampiamente prevista). Nell’ultimo articolo di questa serie
<title>Come Creare Template Personalizzati
vedremo invece la procedura per leggere un feed di qualsiasi sito
per le Pagine di WordPress?</title>
tramite PHP. ••
<link>http://www.yourinspirationweb. com/2010/07/13/come-creare-templatepersonalizzati-per-le-pagine-diwordpress/</link> <description>Nella lezione precedente
·· 45
LINK: http://bit.ly/dxpg4n
TUTORIAL ·· USABILITÀ COME PROGETTARE UNA HOME PAGE CHE FUNZIONI
USABILITÀ
•• Realizzare un buon sito web, efficace e funzionale, è un’impresa assai ardua. Ma Il primo vero scoglio di ogni progetto web riguarda la predisposizione di una home page che funzioni, ossia di una pagina principale che colpisca il target visivamente e velocemente, che lo informi, e che faccia entrambe le cose nel migliore dei modi. In Italia si parla ancora poco di User Experience e i web designer freelance,
Autore: Sara Presenti
che il più delle volte si ritrovano a dover ricoprire più ruoli in modo abbastanza superficiale, raramente sanno come accostare alla progettazione dell’interfaccia grafica
Lavora nel campo della grafica e dello sviluppo web e oltre a collaborare con diverse web agency gestisce con successo la sua attività di freelance sotto il nome di mascara design. Come molti freelance si è abituata a gestire più ruoli, spaziando dalla grafica cartacea allo sviluppo del codice xhtml e css; nonostante questo la sua passione rimane, sempre e comunque, la grafica per il web.
i concetti avanzati di questa disciplina, fondamentale per il successo del sito web.
COME PROGETTARE IN MODO SEMPLICE UNA HOME PAGE CHE FUNZIONI? Questa è una domanda che, soprattutto se sei alle prime armi, ti sarai sicuramente posto più di una volta. Ovviamente non c’è una regola fissa e i contenuti di ogni home page variano sulla base del target e del messaggio che intende comunicare. Seguendo alcuni principi di usabilità e altri dettati esclusivamente dall’esperienza e da una buona dose di logica, possiamo tuttavia definire alcuni elementi che - a prescindere dal tipo di sito
www.mascaradesign.it
che stiamo progettando - dovremmo sempre valutare di inserire in home page, cosi da aumentarne le effettive potenzialità. Vediamo insieme quali sono.
UNA DESCRIZIONE DEL SITO O DEL PRODOTTO Sono veramente poche le attività che possono concedersi il lusso di essere volutamente
46 ·· your inspiration magazine
Come progettare una home page che funzioni Usabilità e senso logico al servizio di una home page funzionale ed efficace.
criptiche sulla natura dei loro prodotti. Solo in rari casi (come per
In suo aiuto viene anche l’utilizzo di una tagline adatta,
il portfolio di un fotografo) la descrizione può essere sostituita
secondo elemento che andiamo ad analizzare.
da immagini o foto che diano alla pagina non solo un contesto grafico ma anche un valido significato concettuale, senza l’ausilio
UTILIZZO DI UNA TAGLINE EFFICACE
di alcun testo descrittivo. Prendiamo per esempio il sito “Ht”1 [Figura 1], trovato per caso in una gallery: la home page è
Un altro elemento da non trascurare in una buona home page
gradevole e in un certo modo accattivante, ma… quali sono
è, infatti, una tagline efficace; che nel sito vada inserito il logo
i servizi o i prodotti che il sito offre agli utenti? Ti sfido a capirlo!
dell’azienda è abbastanza ovvio, ma in pochi accostano ad esso una tagline di impatto che riassuma in poche parole la mission del sito. L’importanza di una buona tagline è fortemente sottovalutata e in molti pensano che si tratti di una tendenza ormai tramontata: è un gran peccato perché, al contrario, questa consente all’utente di inquadrare in modo immediato il sito e di comprendere in modo semplice e veloce che cosa ha da offrirgli. Prendiamo come esempio il sito WordPress Farmer3 (Figura 3).
figura 1 •• Home page del sito Ht
Aggiungere due righe di descrizione non avrebbe compromesso l’equilibrio estetico della pagina e avrebbe fatto in modo che la home page di questo sito fosse utile e non solo bella da vedere. Al contrario, la home page del sito di Saul Santos Diaz2 [Figura 2] nonostante si basi interamente sul menù di navigazione e su una foto in background, non è comunque equivoca e in un lasso di tempo relativamente breve è facile intuire che si tratta di un portfolio fotografico. figura 3 •• Home page del sito di WordPress Farmer
Al primo sguardo l’utente capisce che il soggetto del sito è WordPress, il cui logo viene richiamato un po’ ovunque anche nell’illustrazione vettoriale. Ma per comprendere che si tratta di un servizio che trasforma in un tema di WordPress il codice HTML o un file in PSD occorre necessariamente leggere la descrizione del sito posta sulla destra. Questo sicuramente non è un errore ma fa figura 2 •• Home page del sito di Saul Santos Diaz
1 http://bit.ly/cdNSSi
2 http://bit.ly/cieMMg
3 http://bit.ly/dg58PS
si che l’utente debba investire più tempo nella comprensione della
·· 47
TUTORIAL - USABILITÀ
COME PROGETTARE UNA HOME PAGE CHE FUNZIONI
home page. Con una piccola tagline posta sotto il logo, come
SCORCIATOIE
nella simulazione della Figura 4 sarebbe stato molto più semplice e immediato capire il servizio offerto da WordPress Farmer.
Apposite “scorciatoie”, testuali o grafiche, che consentano di raggiungere con un solo click determinate sezioni del sito che desideriamo valorizzare anche in home page. Infatti, grazie a questi collegamenti, l’utente e’ stimolato visivamente a visitare alcune pagine del sito, quelle cui noi – per un motivo o per un altro – decidiamo di dare maggiore risalto. Il sito dell’allevamento Bergedorf5 (Figura 6) utilizza una scorciatoia inserendo in home page una selezione di foto e indirizzando gli utenti verso la pagina gallery, pagina presente anche nel menù di navigazione in alto.
figura 4 •• L’aggiunta di una tagline permette di comprendere immediatamente lo scopo del sito
NAVIGAZIONE CHIARA ED ESAUSTIVA Già dalla home page l’utente dovrebbe rendersi conto di quali sono le diverse sezioni del sito ed avere la possibilità di accedervi in modo semplice. Il menù di navigazione dovrebbe essere inserito il più possibile in alto, vicino al logo, ed è preferibile che offra una panoramica non solo delle pagine principali ma anche
figura 6 •• La scorciatoia nel sito dell’allevamento Bergedorf
delle eventuali sotto pagine del sito: a nessuno piace che il sito visitato si comporti come una matrioska e che ad ogni click
CALL-TO-ACTION
del mouse sorgano altre pagine interne da visitare, ognuna delle quali non contemplata dal menù principale. Il sito Formoda4
Le call-to-action sono, letteralmente, “inviti a compiere
(Figura 5) utilizza una navigazione chiara e intuitiva che offre
un’azione”: si tratta in pratica di elementi visivi che inducono
all’utente una visualizzazione dettagliata di tutte le pagine
l’utente a compiere un’azione, come ad esempio l’iscrizione
di secondo livello, semplificando cosi la fruizione dei contenuti
ad una newsletter o la compilazione di un modulo.
del sito.
Contrariamente a quanto si possa credere, le call-to-action
figura 5 •• Navigazione chiara e intuitiva che semplifica la fruizione dei contenuti del sito
48 ·· your inspiration magazine
4
http://bit.ly/3XIrci
5 http://bit.ly/a7vq7r
non sono utili solo per i siti di e-commerce che vogliono spingere
del layout. In fase di design sarai troppo impegnato a seguire
l’utente all’acquisto online, ma possono rivelarsi dei validi
l’ispirazione e a costruire l’impostazione grafica della pagina
strumenti per qualsiasi tipologia di sito: basti pensare al classico
per rimanere concentrato sui contenuti e la disposizione
pulsante che invita l’utente a contattare per un preventivo
di quest’ultimi: senza un canovaccio da seguire,
gratuito o per richiedere maggiori informazioni e che in questo
è facile commettere errori.
modo favorisce l’interazione tra l’azienda e un potenziale cliente interessato ad acquistarne i servizi/prodotti. Un esempio di utilizzo di call-to-action in home page? Il sito Kinedo6 (Figura 7) ne utilizza addirittura tre, invitando gli utenti a consultare due diversi cataloghi e a contattare telefonicamente il servizio clienti per maggiori informazioni.
figura 7 •• Le call-to-action del sito Kinedo
Limita il contenuto testuale della home page all’essenziale: figura 7 •• Le call-to-action del sito Kinedo
pochi cerimoniali e frasi fatte, a favore di un testo stringato che riassuma in modo efficace e con parole semplici chi o che cosa
Abbiamo visto alcuni degli elementi che potrebbero rendere
rappresenta il sito e quali sono i servizi/prodotti offerti.
la tua home page più funzionale ed usabile; ovviamente quelli analizzati sono solo alcuni dei numerosi aspetti che occorre
CONCLUSIONI
prendere in considerazione durante la fase di progettazione: molto probabilmente parleremo degli altri nei prossimi numeri
La home page è la vera vetrina del sito web che stai progettando,
della rivista, in ogni caso prima di concludere vorrei darti qualche
e per questo oltre ad essere accattivante visivamente è essenziale
piccolo consiglio, sperando che possano tornarti utili.
che essa sia usabile, semplice da comprendere e fortemente intuitiva. Con una buona progettazione e qualche piccolo
QUALCHE CONSIGLIO PRATICO PRIMA DI INIZIARE
accorgimento, ti assicuro che non è poi cosi difficile realizzare una buona home page che raggiunga il suo scopo e che attragga l’utente dandogli allo stesso tempo stimoli e massaggi chiari e
Quelli che seguono sono alcuni consigli che scaturiscono dalla mia
coerenti. Una sfida che ogni web designer può vincere, non credi?
esperienza personale: piccole tattiche che, in fase di progettazione di una home page, possono determinarne il successo.
LETTURE CONSIGLIATE
Cerca sempre di evitare le intro, siano esse in flash o statiche: indipendentemente dalla loro efficacia prettamente estetica,
Call-to-action: best practices ed esempi - http://bit.ly/3Pigg4Y
sono inutili e obbligano l’utente ad un’azione aggiuntiva per
Una buona navigazione permette di ricevere le informazioni in
raggiungere l’effettiva home page del sito. Con una home page gradevole e curata, una intro non ha alcuna funzionalità. Prima di disegnare il layout della home page, crea un mockup
modo istantaneo - http://bit.ly/2R0xYi 10 pillole di usabilità per una pagina web migliore - http://bit. ly/bL9kgS ••
(su carta o digitale, secondo le tue preferenze) della stessa che tenga traccia della disposizione dei vari elementi all’interno
6 http://bit.ly/cc0QTi
·· 49
LINK: http://bit.ly/908QWh
TUTORIAL ·· GIMP GUIDA A GIMP: GRAFICA PROFESSIONALE A COSTO ZERO
GIMP
•• Se ti stai avvicinando adesso al mondo della grafica e non hai modo (o voglia) di investire una cifra abbastanza consistente per la licenza di Photoshop, Gimp fa al caso tuo. Sto parlando di uno dei migliori programmi di fotoritocco open source, che si è diffuso negli anni in modo esponenziale fino a diventare un’ottima alternativa al software di casa Adobe.
Autore: Federico Pian
Grazie a questo e ai successivi articoli, impareremo a conoscere e ad apprezzare questo programma: da un semplice ritaglio, fino alla realizzazione del layout grafico per un sito.
Laureato in tecnologie web e multimediali e prossimo alla laurea specialistica in tecnologie dell’informazione. Lavora come insegnante di informatica e web designer freelance. Inoltre è autore del blog fedeweb.net, dove parla di tutorial e risorse sul web design.
www.fedeweb.net
In questo articolo vedremo come scaricare e installare il programma, come impostarne in modo ottimale le finestre e daremo inoltre uno sguardo in modo generale agli strumenti che Gimp ci mette a disposizione.
SCARICHIAMO E INSTALLIAMO GIMP Scarichiamo Gimp dal sito ufficiale gimp.org1, nella pagina dei download2 troveremo le versioni per Windows, Mac e Linux (premi su “show other downloads” per visualizzare le altre versioni). Una volta scaricato, per installarlo basterà procedere come per qualsiasi altro programma, seguendo le istruzioni della procedura guidata di installazione.
IMPOSTIAMO LE FINESTRE AL MEGLIO La prima volta che apriremo Gimp, probabilmente ci si troverà spaesati: infatti non si presenta come un classico programma, in un’unica finestra, ma in tre finestre separate. Questo a prima vista sembra uno svantaggio, ma in realtà la possibilità
50 ·· your inspiration magazine
1
http://www.gimp.org/
2
http://www.gimp.org/downloads/
Guida a Gimp: Grafica professionale a costo zero Impariamo a conoscere il miglior programma di grafica open source
figura 2 ••
figura 1 ••
di gestire le finestre come meglio si preferisce è un enorme vantaggio. Nella [Figura 1] possiamo vedere come si presenta il programma appena aperto. Nella finestra di sinistra, in alto ci sono gli strumenti (1) e in basso le opzioni dello strumento attivo (2). La finestra centrale è l’area di lavoro (3), mentre la finestra di destra consente la gestione dei livelli, dei canali, ecc (4). Cerchiamo di trovare un’impostazione ottimale seguendo questi piccoli accorgimenti: Chiudiamo la finestra Livelli, Canali, Tracciati, Annulla (4). Nella finestra di sinistra, premiamo sull’etichetta in grassetto nelle opzioni dello strumento (1) e trasciniamo fuori il pannello (2), portandolo alla destra della finestra principale [Figura 2]. Poi riduciamo la larghezza della finestra degli strumenti fino ad avere due strumenti per riga. Aggiungiamo infine la finestra dei livelli: vai nel menù Finestre - Pannelli Agganciabili - Livelli e trasciniamo la finestra (1) sotto le opzioni dello strumento (2), come mostrato
figura 3 ••
nella [Figura 3].
·· 51
TUTORIAL - GIMP
GUIDA A GIMP: GRAFICA PROFESSIONALE A COSTO ZERO
Se si è seguito correttamente tutta la procedura si dovrebbe avere
selezionato all’inizio in regioni non contigue;
la disposizione delle finestre così come mostrata nella [Figura 4].
6
Dopo aver visto come personalizzare la disposizione delle finestre,
Forbici intelligenti: permette di selezionare i contorni di un soggetto nella foto;
diamo uno sguardo agli strumenti che il programma mette
è efficace quando c’è un contrasto elevato
a disposizione.
tra il soggetto e lo sfondo; 7
Strumento di selezione primo piano: permette di estrarre il soggetto in primo piano, rispetto allo sfondo.
STRUMENTI DI DISEGNO Gli strumenti di disegno [figura 6] consentono di effettuare figura 4 ••
dei disegni da zero, oppure di modificare l’immagine.
GLI STRUMENTI DI GIMP
1
Riempimento: permette di riempire una selezione
Gimp possiede un elevato numero di strumenti;
con un colore o una trama;
se andiamo nel menù degli Strumenti notiamo che questi
2
sono stati divisi in cinque categorie:
Sfumatura: permette di riempire un’area con una sfumatura, usando di base i colori
Strumenti di selezione;
di primo piano e di sfondo;
Strumenti di disegno;
3
Matita: viene utilizzato per disegnare linee
Strumenti di trasformazione;
a mano libera, non supporta i tratti sfocati
Strumenti di colore;
e l’antialiasing;
Altri strumenti.
4
Andiamo a conoscerli più da vicino, ricordando che per ognuno esistono ulteriori possibilità di personalizzazione grazie al pannello delle opzioni dello strumento.
5
Gomma: cancella le zone interessate di un livello, una selezione o un’immagine;
figura 6 ••
6
STRUMENTI DI SELEZIONE Gli strumenti di selezione [figura 5] permettono di selezionare una
Pennello: permette di effettuare qualsiasi tipo di disegno e supporta i tratti sfocati e l’antialiasing;
Aerografo: permette di disegnare con effetto aerografo;
7
Stilo: permette di disegnare con stile amanuense;
8
Clona: permette di disegnare utilizzando come
porzione dell’immagine, in modo più o meno preciso a seconda
pennello una porzione di immagine;
dello strumento scelto.
molto utile per correggere i difetti di una foto; 9
1
Selezione rettangolare: permette di selezionare zone rettangolari nell’immagine;
2
Selezione ellittica: permette di selezionare zone ellittiche;
Cerotto: strumento molto simile al clona e anche questo permette di correggere difetti presenti in una foto;
10 Clona in prospettiva: permette di clonare secondo la prospettiva desiderata;
3
Selezione lazo: permette di effettuare delle selezioni a mano libera;
o contrastare elementi dell’immagine,
4
Selezione fuzzy: più conosciuto come bacchetta
grazie all’utilizzo del pennello;
magica. Permette di selezionare regioni contigue,
figura 5 ••
in base alla somiglianza dei colori; 5
Selezione per colore: permette di selezionare tutti i pixel che hanno un colore simile al pixel
11 Sfoca/contrasta: permette di sfocare
12 Sfumino: permette di creare l'effetto che si ha quando premiamo e trasciniamo col dito del colore fresco; 13 Scherma/Brucia: permette di rendere un’area più luminosa o più opaca.
52 ·· your inspiration magazine
STRUMENTI DI TRASFORMAZIONE
3 Colorazione: permette di modificare la colorazione
Gli strumenti di trasformazione permettono di modificare l’aspetto
4 Luminosità-Contrasto: consente di modificare i livelli
di un’immagine; dell’immagine, della selezione o del livello attivo.
di luminosità e di contrasto; 5 Soglia: riduce l’immagine a due colori, usando una soglia;
1
Spostamento: permette di spostare i livelli o selezioni nella foto;
2
o più scura, per cambiare il contrasto o per correggere
Allineamento: permette di allineare in modo preciso i livelli presenti nell’immagine;
3
Taglierino: serve a ritagliare una specifica area
5
Rotazione: permette di ruotare il livello,
cercando di mantenere l’aspetto originale; 9 Desaturazione: converte tutti i colori in scala di grigi.
Scala: permette di ridimensionare il livello,
ALTRI STRUMENTI
la selezione o il tracciato; 6
Inclina: permette di inclinare il livello, Vediamo quali sono gli altri strumenti.
la selezione o il tracciato; 7
delle immagini; 8 Posterizzazione: consente di ridurre il numero di colori,
la selezione o il tracciato figura 7 ••
una dominante di colore; 7 Curve: è lo strumento più indicato per regolare le tonalità
rimuovendo il resto dell’immagine; 4
6 Livelli: viene usato per rendere un’immagine più chiara
Prospettiva: permette di modificare la prospettiva del livello, della selezione o del tracciato;
8
Riflessione: permette di riflettere il livello, la selezione o il tracciato.
STRUMENTI DI COLORE Questi strumenti permettono di alterare la distribuzione dei colori figura 9 ••
nelle immagini.
1 Tracciati: permette di tracciare dei “cammini” punto per punto, modificabili in qualsiasi momento; 2 Prelievo colore: serve per prelevare un determinato colore nell’immagine; 3 Zoom: permette di ingrandire l’immagine, potendo lavorare meglio sui dettagli; 4 Misurino: permette di sapere in modo preciso la distanza tra due punti nell’immagine; 5 Testo: consente di inserire del testo nell’immagine.
CONCLUSIONI figura 8 ••
1 Bilanciamento del colore: permette di regolare la distribuzione dei colori;
Come abbiamo avuto modo di vedere già da questa prima introduzione, Gimp ha ben poco da invidiare ai più noti software commerciali e, all’occorrenza, può rivelarsi un’ottima alternativa anche per progetti grafici più complessi. ••
2 Tonalità-saturazione: viene utilizzato per gestire i livelli di tonalità, saturazione e luminosità di un’immagine, una selezione o un livello;
·· 53
LINK: http://bit.ly/bsynMa
TUTORIAL ·· CSS CSS3: I VANTAGGI DEI COLORI RGBA
CSS
•• Grazie ai CSS3, è possibile ottenere numerosi effetti speciali, ma in questo articolo vedremo come, attraverso una semplice proprietà, è possibile velocizzare il nostro lavoro e arricchire l’esperienza utente “premiando” quei visitatori che utilizzano un browser moderno, ossia mettendo in pratica quello che viene definito progressive enanchement1. Con questo termine infatti ci si riferisce al fatto che i contenuti e le
Autore: Michela Chiucini
funzionalità di base di un sito devono poter essere accessibili a tutti, ma chi dispone di tecnologie più avanzate (nel nostro caso un browser di ultima generazione) avrà
Web designer freelance della costa Toscana, ama il design a 360°, la tecnologia CSS e il markup semantico. Il suo obiettivo è far convivere in armonia estetica e funzionalità. Oltre al suo portfolio gestisce un blog in lingua inglese. I suoi lavori sono stati pubblicati su importanti pubblicazioni del settore come .NET, Web Designer magazine, Web Design Index, Speaking in Styles.
un’esperienza più ricca e piacevole visitando il sito. Fino ad oggi la pratica più comune per specificare il colore nei nostri fogli di stile è stata senza dubbio attraverso il formato esadecimale: body {background : #000; }
Lo stesso risultato può essere ottenuto specificando i valori RGB (Red, Green, Blue): body {background : rgb(0,0,0); }
Con entrambe le dichiarazioni otterremo lo stesso colore, che sarà un colore solido, senza trasparenza. Con i CSS3, il color model RGB è stato esteso per consentire di specificare
www.colazionedamichy.it
anche il grado di opacità di questo colore, infatti RGBA è l’acronimo per Red Green Blue Alpha. Vediamo subito in pratica la sintassi di questa nuova proprietà: body { background : rgba(0,0,0,.5);}
Il quarto valore permette di definire vari livelli di opacità del colore, con valore 1 avremo il difficoltà: media tempo: 45min
54 ·· your inspiration magazine
100% di opacità, con .5 il 50% e così via.
1 http://bit.ly/2YOw5b
CSS3: I vantaggi dei colori RGBA Come apportare modifiche in pochi minuti alla nostra pagina web senza aprire programmi di grafica
UN ESEMPIO REALE Ma quali possono essere gli utilizzi creativi di questa proprietà? E come può migliorare il nostro lavoro? Per questo esempio ho creato un template (sviluppato in HTML5) molto semplice dove ho volutamente concentrato alcuni possibili utilizzi del colore RGBA. Una live demo è disponibile all’indirizzo: http://bit.ly/bYFOeB figura 2 ••
Ho ipotizzato il layout di una home page per due fotografi, Jo e Anna. Avrò bisogno di una grafica molto leggera sia per dare
Ho utilizzato un’immagine in bianco e nero perché questo
risalto ai loro scatti, sia perchè le foto stesse del loro portfolio
mi permette di cambiarne il colore soltanto con i CSS.
occuperanno banda.
Ho deciso di mantenere il sito su toni di grigio, quindi basterà
Diamo un’occhiata al risultato finale
applicare al background del body la proprietà RGBA. Qui abbiamo una doppia dichiarazione del background, la prima serve per i browser che ancora non supportano questa proprietà e quindi ignoreranno la seconda riga. In particolare mi riferisco ad Internet Explorer fino alla versione 8, infatti sembra che con la 9 ci saranno notevoli miglioramenti, fra cui il supporto dei colori RGBA. La seconda regola infine sovrascrive la prima nel caso di browser con supporto RGBA. body { background : #252525 url('images/body-bg.jpg') repeat-x; background : rgba(37,37,37,.65) url('images/bodybg.jpg') repeat-x; figura 1 ••
.... }
Ma vediamo nel dettaglio l’implementazione di questo layout.
LA TEXTURE DI SFONDO
L’HEADER Anche nell’header della home page sono stati utilizzati effetti
Questa tecnica si presta bene ad utilizzare textures e/o immagini di
di trasparenza.
sfondo. Ho quindi creato una texture da ripetere sull’intera pagina. html { background : #888 url('images/page-bg.jpg'); }
figura 3 ••
·· 55
TUTORIAL - CSS CSS3: I VANTAGGI DEI COLORI RGBA
Per quanto riguarda il titolo, ho utilizzato un rosso con opacità
Anche in questo caso ho desaturato e salvato una PNG
all’85% che diventa solido al passaggio del mouse.
con opacità al 30%. Una parte di questa immagine,
Certo, poteva essere fatto anche con il formato esadecimale,
opportunamente posizionata, sarà lo sfondo del nostro header
ma in questo modo si fonde in modo più gradevole
con un bell’effetto di sovrapposizione.
con l’immagine di sfondo. header.branding{ ...
header.branding h1 a {
background : transparent url('images/photo-bg.
color : #ab0000;
png') left 75px no-repeat;
color : rgba(171,0,0,.85); }
}
header.branding h1 a:hover {
L’IMMAGINE DI SFONDO
color : rgba(171,0,0,1); }
Continuiamo con l’immagine di sfondo che deve proseguire
Veniamo ora all’immagine di sfondo sulla sinistra.
anche al di sotto dell’header. E’ sufficiente utilizzare lo stesso principio del posizionamento per far proseguire l’immagine anche sotto
figura 5 ••
figura 4 ••
#main-content{ ...
Mi piaceva l’idea di scrivere il testo su questa immagine che prendesse anche parte dell’header.
background : transparent url(images/photo-bg.png) left -75px no-repeat; }
56 ·· your inspiration magazine
section.photos > ul {
LA GALLERY
padding : 10px; background : #8c8c8c;
Nel sito di un fotografo non può mancare una galleria di immagini.
background : rgba(255,255,255,.25);
Nel nostro esempio abbiamo quattro album fotografici raggruppati
...
per categorie, ognuna con un’immagine di copertina.
}
L’effetto che vogliamo ottenere al passaggio del mouse sulle foto di copertina è una semitrasparenza che lasci intravedere sia la foto che il nome dell’album.
figura 6 ••
<section class="photos"> <ul>
figura 7 ••
<li class="animali"> <a href="#" title="Animali">Animali</a> </li>
Per ottenere questo effetto ogni elemento della lista ha impostato come sfondo l’immagine della copertina corrispondente
<li class="paesaggi"> <a href="#" title="Paesaggi">Paesaggi</a>
.animali{
</li> <li class="natura"> <a href="#" title="Natura">Natura</a> </li>
background : transparent url('images/animali. jpg') 10px 10px no-repeat; } .paesaggi{
<li class="biancoenero">
background : transparent url('images/paesaggi.
<a href="#" title="Bianco e nero">Bianco
jpg') 10px 10px no-repeat;
e Nero</a></li>
}
</ul>
.natura{
</section>
Sfruttando la nostra texture unita alla proprietà RGBA creiamo al volo una cornice per l’album:
background : transparent url('images/natura. jpg') 10px 10px no-repeat; }
·· 57
TUTORIAL - CSS CSS3: I VANTAGGI DEI COLORI RGBA
.biancoenero{ background : transparent url('images/ biancoenero.jpg') 10px 10px no-repeat; }
SOCIAL BOOKMARKS Già che ci siamo, perchè non sfruttare questa proprietà anche per le icone in modo che si fondano meglio con l’insieme?
Adesso è sufficiente fare in modo che il link occupi tutto lo spazio
Ecco il markup
dell’elemento della lista in modo da rendere l’intera immagine cliccabile:
<ul class="social"> <li class="twitter">
section.photos a{
<a href="#" title="seguici su Twitter">
display : block;
<img src="images/twitter-icon.png"
border : 3px solid #ccc;
alt="twitter" /></a>
width : 194px;
</li>
height : 194px;
<li class="facebook">
padding : 10px;
<a href="#" title="seguici su Facebook" >
}
<img src="images/facebook-icon.png" alt="facebook" />
Vogliamo che il testo descrittivo appaia solo al passaggio
</a>
del mouse insieme al leggero oscuramento della foto, la proprietà
</li>
text-indent permette di nascondere il testo senza comprometterne l’accessibilità.
</ul>
In questo caso, le icone sono due immagini PNG a cui andremo Qui abbiamo anche un’altra proprietà,-webkit-transition,
ad applicare uno sfondo con opacità ridotta.
che permette di definire la modalità in cui si passa allo stato hover,
Prendiamo come esempio l’icona di Twitter, con opacità al 40%
in questo caso avremo una transizione più morbida e graduale,
permette di intravedere ancora la nostra texture.
una specie di effetto fade. Come suggerisce il prefisso, tale proprietà al momento
.twitter img{ background : #36cdff;
è supportata solo dai browsers che utilizzano il motore
background : rgba(54,205,255,.4);
di rendering WebKit2, ossia Chrome e Safari. }
Abbiamo così un classico esempio di progressive enanchement:
Con il passaggio del mouse non facciamo che aumentare l’opacità.
perchè non dare quel tocco in più a chi utilizza un browser moderno?
.twitter img:hover{ background : rgba(54,205,255,.8);
section.photos a{
}
text-indent : -1999em; -webkit-transition : background .3s linear; }
E PER FINIRE...
Al passaggio del mouse infine otteniamo l’effetto desiderato
E se il cliente volesse un colore diverso? Sappiamo benissimo
con poche righe di CSS sempre dichiarando prima la proprietà
che non è una possibilità molto remota.
esadecimale per Explorer.
Chi di noi non si è mai trovato a provare le infinite sfumature di una texture?
section.photos a:hover{ text-indent : 0;
In questo caso basta cambiare una singola riga nel nostro foglio di stile.
background : #000; background : rgba(0,0,0,.5); }
58 ·· your inspiration magazine
body { ...
2 http://bit.ly/1b8Lts
background : rgba(0,37,37,.65) url('images/bodybg.jpg') repeat-x; .... }
ed ecco quello che otteniamo:
o semplicemente lasciare il colore solido, l’importante è che i contenuti siano comunque accessibili. Per maggiori dettagli sul supporto della proprietà RGBA sui vari browsers: http://bit.ly/XN17j
figura 8 ••
Ovviamente a seconda del colore scelto le righe da modificare
CREDITI
saranno più di una, ma il tempo risparmiato rimane comunque notevole.
Le fotografie e il template utilizzati in questo esempio possono essere utilizzati solo a scopo didattico.
CONCLUSIONI Le fotografie sono state gentilmente concesse da: I vantaggi di questa soluzione sono più che evidenti: un sito più
Piervincenzo Madeo di Wegraphics - http://bit.ly/9XOEnD
leggero, risparmio di banda ed estrema facilità di manutenzione.
Valeria Menici - http://bit.ly/c7a2jd ••
Rimane il problema di Internet Explorer che non supporta la proprietà RGBA. A questo punto le opzioni sono diverse, molto dipende dalla scelta del progettista. Possiamo decidere di usare delle PNG, i commenti condizionali con i filtri proprietari Microsoft
·· 59
LINK: http://bit.ly/9LAPqb
GALLERY QUANDO IL WEB DESIGN È UN’ARTE CHE OSA E CHE SA STUPIRE
•• Il web design é comunicazione, il web design é funzionalità ed interazione. Ma non solo. Nel panorama internazionale si sta sempre più sviluppando un’altra concezione, forse più effimera, quasi frivola potremmo dire, di ciò che si intende con il termine web
Autore: Sara Presenti
design. Arte digitale, dice qualcuno, e quindi un altro modo per manifestare ed indurre emozioni, per liberare il proprio estro creativo e dare una forma grafica alle idee.
Lavora nel campo della grafica e dello sviluppo web e oltre a collaborare con diverse web agency gestisce con successo la sua attività di freelance sotto il nome di mascara design. Come molti freelance si è abituata a gestire più ruoli, spaziando dalla grafica cartacea allo sviluppo del codice xhtml e css; nonostante questo la sua passione rimane, sempre e comunque, la grafica per il web.
Perciò, ultimamente, i web designer di tutto il mondo hanno deciso che é ora di osare. Layout fortemente estrosi e volutamente stravaganti, colori vivaci o acidi in netto contrasto tra di loro, forme geometriche asimmetriche, immagini paradossali e un uso quasi sconsiderato di font particolari, per una tipografia che stupisce e che, in pratica, la fa da padrone. Uno stile che uno stile non é, poiché - proprio come dovrebbe essere nell’arte - ogni sito é diverso dall’altro ed ha una propria impronta e nel caos di design e parole, un suo particolare modo per comunicare con gli utenti che si trovano a visitarlo.
www.mascaradesign.it Confusionari? Audaci? Poco usabili, forse? O forse un nuovo modo, sensuale e fuori dalle righe, di disegnare il web. ••
60 ·· your inspiration magazine
Quando il web design è un’arte che osa e che sa stupire Giochi di colore, contrasti e asimmetrie per siti fuori dal comune che vogliono attirare l’attenzione
1 http://bit.ly/dajch8 2 http://bit.ly/2RV3LE 3 http://bit.ly/4Ao4gn
2
1 3
·· 61
GALLERY QUANDO IL WEB DESIGN È UN’ARTE CHE OSA E CHE SA STUPIRE
4
4
http://bit.ly/QCgjC
5
http://bit.ly/bmDwuq
6
http://bit.ly/ccM2Dy
7
http://bit.ly/ijfss
8
http://bit.ly/TDCin
9
http://bit.ly/dABw7l
5
10 http://bit.ly/9121YX
6
7
8
9
62 ·· your inspiration magazine
10
11
12
11 http://bit.ly/4gyV3z 12 http://bit.ly/c6le 13 http://bit.ly/UEZHq 14 http://bit.ly/9ixYZb 15 http://bit.ly/3Dlk03 16 http://bit.ly/Oh5mq 17 http://bit.ly/d0i1Vk
13
15
14
16
17
路路 63
GALLERY QUANDO IL WEB DESIGN È UN’ARTE CHE OSA E CHE SA STUPIRE
18 http://bit.ly/bOoBUB
19
19 http://bit.ly/9x9IgL 20 http://bit.ly/a9DkhG 21 http://bit.ly/1zrfO 22 http://bit.ly/2FS0k9 23 http://bit.ly/9DQx12
18
64 ·· your inspiration magazine
20
21
22
23
24
24 http://bit.ly/zu3TI 25 http://bit.ly/15FyoB 26 http://bit.ly/AK3WM 27 http://bit.ly/9oughG 28 http://bit.ly/blDQtj 29 http://bit.ly/8XJVrV
25
26
27
28
29
路路 65
LINK: http://bit.ly/aMlLcl
DOMANDE E RISPOSTE LA POSTA SI YOUR INSPIRATION MAGAZINE
La figura del web designer è ancora abbastanza diffusa nel mercato del lavoro? E’un mestiere più adatto al freelancing oppure presenta buoni margini anche per il lavoro dipendente ?
figura del web designer freelance. In questo modo l’azienda paga solo per il lavoro richiesto, isolando cosi i costi di progettazione al singolo progetto. Pro e contro in entrambi i casi, com’è ovvio:
•• La figura del web designer nasce – in Italia come negli altri
ciò che conta è che la figura del web designer – dipendente,
paesi – come quella del classico dipendente chiamato a svolgere
freelance, a progetto, in telelavoro e cosi via - si sta sempre più
più ruoli all’interno di un team (creativo o di sviluppo);
affermando anche nel mercato del lavoro italiano, fino a poco
negli ultimi tempi – da quando, cioè, anche il nostro paese
tempo fa ritenuto ancora immaturo per tutte le discipline e le
ha deciso di aprirsi alla rivoluzione informatica – la figura
figura professionali collegate alla progettazione per il web ••
professionale del web designer in sede, vincolato da un regolare contratto di lavoro, è richiesta un po’ ovunque, anche e soprattutto dalle aziende di medio/grandi dimensioni che hanno un flusso di lavoro costante che gli permetta di stipendiare regolarmente i propri dipendenti.
Creare un logo è un lavoro da design ma difenderli?? vorrei sapere di più sulla tutela e diritti dei, marchi, costi, regolamentazione etc…
I vantaggi di questa scelta sono palesi: primi tra tutti l’abbattimento dei costi e un maggior controllo –
La registrazione e la tutela del logo rientra nella normativa relativa
della qualità del lavoro e delle tempistiche, ad esempio –
al marchio ed è disciplinata sia dall’ordinamento nazionale
in fase di progettazione.
(precisamente dagli Artt.2569-2574 del Codice Civile e dal Codice
Per le aziende che ancora non operano stabilmente nel panorama
della proprietà industriale) sia da quello internazionale.
del web design italiano o che per un motivo o per un altro
Il processo di registrazione (e conseguenti azioni di tutela
preferiscono evitare l’assunzione diretta, si sta facendo sempre più
o di rivendicazione) sono concetti molto vasti che meriterebbero
strada l’outsourcing, modalità di lavoro legata a doppio nodo alla
un vero e proprio approfondimento in uno spazio ben maggiore
66 ·· your inspiration magazine
da quello che questa rubrica ci offre. Ma vediamo comunque di dare una risposta ai tuoi interrogativi. Il diritto all’uso esclusivo di un logo può acquistarsi mediante
Com’è la situazione del mercato grafico italiano al giorno d’oggi, è facile o sempre più difficile trovare clienti? Sono disposti a pagare bene? Quali sono i costi medi proposti da chi offre servizi grafici?
l’uso di fatto oppure mediante la registrazione. Nel primo caso, quindi, si acquista il diritto all’uso esclusivo
•• Purtroppo il mercato grafico, rispetto a quello prettamente
del logo semplicemente ponendo lo stesso sui propri prodotti
dedicato alle aree di sviluppo o di marketing, arranca ancora
(insegne, cartellonistica, materiale aziendale, ecc..).
un po’: forse in Italia manca ancora la cultura della comunicazione
In questo caso, tuttavia, se l’uso del logo è avvenuto in modo
visiva, o forse a scarseggiare è quel pizzico di buon gusto
da rendere lo stesso noto solo in una parte circoscritta del territorio
che permette al cliente di riconoscere (e apprezzare) un buon
dello Stato, il diritto acquisito riguarda solo ed esclusivamente
progetto grafico che funziona ed è realmente efficace.
quella determinata parte del territorio. Per esempio una pasticceria
Rispetto ai prezzi applicati negli altri paesi Europei l’Italia
che utilizza per la sua attività sita a Roma un logo senza averlo
si mantiene piuttosto bassa, anche se quantificare tariffe e costi
registrato, non potrà impedire che a Milano un’altra pasticceria
è sempre una situazione abbastanza spinosa.
utilizzi lo stesso logo, e che magari questa lo registri ottenendone cosi il diritto all’uso in tutto il territorio nazionale.
Da una stima effettuata nel forum di Grafici Creativi1,
Il logo non registrato gode quindi di una tutela minore
una della community tematiche più frequentata del web, il prezzo
di quello registrato in quanto chi ottiene la registrazione gode
medio per la realizzazione di un logo sembra essere di 450 euro,
di una protezione estesa a tutto il territorio nazionale,
mentre per un coordinato grafico completo la spesa si aggirerebbe
colui che vanta soltanto un preuso deve innanzitutto dimostrarlo
sulle 200 euro e cosi via: i prezzi sono abbastanza contenuti,
(non avendo alcuna documentazione ufficiale che lo attesti)
ma tuttavia, anche volendoli prendere con le pinze,
e riceve una tutela limitata all’ambiente entro il quale il preuso
credo che rispecchino la reale situazione del mercato grafico
è avvenuto.
italiano, un mercato che nel nostro paese non si è ancora affermato del tutto ••
Per chi desideri quindi una tutela completa è preferibile registrare il proprio logo tramite l’Ufficio Brevetti e Marchi presso la Camera di Commercio. La modulistica è relativamente semplice da compilare e i costi sono variabili ma si aggirano sulle 150,00/200,00 euro e il diritto all’uso esclusivo dura 10 anni dalla registrazione. Esso è tuttavia rinnovabile, sempre con efficacia decennale, per un numero illimitato di volte. Solo per i marchi registrati è prevista la tutela penale rappresentata dal reato di contraffazione, alterazione ed uso di marchi alterati o contraffatti (art. 473 del codice penale). Il titolare di un logo che subisce un’usurpazione illegittima dei diritti sullo stesso, può rivolgersi all’autorità giudiziaria agendo nei confronti di chi usi un logo uguale o simile per prodotti/attività dello stesso genere. Nello specifico egli può esercitare un’azione di rivendicazione (nei casi di abusiva registrazione del logo da parte di un non avente diritto), un’azione di usurpazione (rivolta ad ottenere l’accertamento dell’abusiva riproduzione/ contraffazione del logo) e infine un’azione di risarcimento
anda, Se vuoi porci una dom a bacheca nostr puoi farlo tramite la Twitter, di Facebook o tramite eguente il s aggiungendo al quesito hashtag:
#yim2010.
del danno, per condannare l’usurpatore al risarcimento dell’eventuale danno.
1 http://bit.ly/cByXEY
·· 67
·· web: www.yourispiration-magazine.com ·· ·· mail: info@yourispiration-magazine.com ··
SABATO SIANI ALESSANDRO RISSO SCARFI ANTONINO HANNO COLLABORATO ALL’IMPAGINAZIONE DEL MAGAZINE:
ALESSANDRA IACOVELLA SALVATORE SODANO