.net numero 2 by Massimiliano Zagaglia

N UO VA !

scopri progetta sviluppa

la rivista più venduta al mondo per web designer numero 002

Rivoluzione su Internet

002

NUMERO

Due storie di successo Intervista a Liquida e PayPal

Vuoi 100.000 nuovi visitatori?

tariffa r.o.c. - poste italiane spa - sped. in abb. post. d.l. 353/2003 (conv. in l. 27/02/2004 n.46) art. 1, comma 1, dcb milano In caso di mancato recapito inviare al CMP di Roserio per la restituzione al mittente

Scopri come ottenerli a prezzi stracciati

pagine di guide pratiche

SITI WEB REATTIVI CSS E GRIGLIE PER creare SITI ADATTI A TUTTI GLI SCHERMI

Inoltre

Professionisti alle prese con un progetto reattivo Interfacce perfette per le app iPhone Immagini stupende grazie ai CSS

Tutorial > Un aspetto rétro alle pagine Web Interfacce zoomabili con i CSS Pulsanti eleganti con Photoshop Applicazioni Web veloci con Node.js Condividi il codice dei tuoi script con Git Effetti “sfoglia pagina” d’impatto

Cover_NET_02_DEF_R.indd 1

Siti Internet a velocità luce! Se il tuo sito si carica in più di 2 secondi perdi utenti: ecco i trucchi per renderlo più rapido .net - N° 2 - BIM. - anno 2 - 2012 - € 6,90

16/12/11 10.28

.net business_e_web

business e Web Le notizie dal mondo di Internet

news per immagini

> Le notizie lampo

Corriere Mobile Tutta l’informazione del Corriere della Sera in questa nuova app sviluppata da Mobiquity.

Acquisito Gowalla Il social network mobile dedicato al turismo è stato acquistato da Facebook.

Giornalettismo fa Banzai! Banzai Media acquisisce la quota di maggioranza del sito di notizie

SalamWorld Dalla fantasia dii giovani imprenditori turchi nasce il primo social network musulmano.

Marchi online Secondo lo studio Calcio 2.0 solo tre club, inglesi, hanno un sito dal valore di più di un milione di dollari.

Esploso nel 2010 come una delle principali testate giornalistiche sul Web, il sito Giornalettismo (www. giornalettismo.com) che nasce nel 2008 come blog collaborativo. Diretto da Alessandro D’Amato e ora ha addirittura una redazione vera e propria. Con una crescita annua del 150% e un “patrimonio” di due milioni e mezzo di contatti al mese, secondo i dati dell’ottobre 2011, Giornalettismo non poteva proprio passare inosservato. D’altra parte il sito di informazione deve il proprio successo alla sua capacità di integrarsi con la realtà sempre più diffusa dei social network del calibro di Facebook e Twitter, che creano addirittura la

metà del traffico del sito. Era quindi inevitabile che un simile gioiello potesse fare gola a molti. Banzai Media, la divisione di pubblicità multimediale del Gruppo Banzai, ha comprato la maggioranza delle azioni della società Da.ma.to s.r.l (che è diventata Giornalettismo s.r.l.), proprietaria della testata online. Con questa operazione, il sito beneficia di due vantaggi immediati. Il primo deriva dalle competenze del Gruppo Banzai riguardo alla progettazione e alla gestione dei portali Web. Il secondo riguarda la capacità manageriale di Banzai Advertising che si occuperà dell’espansione pubblicitaria del sito. C’è anche

un terzo aspetto, più strettamente giornalistico. Infatti il Gruppo Banzai possiede già un sito di informazione, quel Liquida. it di cui parlaimo a pagina 10. Secondo il piano che sta alla base dell’acquisizione del pacchetto di maggioranza di Giornalettismo s.r.l., le due redazioni lavoreranno a stretto contatto per rendere il loro prodotto sempre più appetibile. Dalle parole di Alessandro D’Amato e dell’amministratore delegato di Banzai Media, Andrea Santagata, trapela un chiaro entusiasmo per questa operazione. Entrambi sono convinti che contribuirà alla crescita della testata che parte già da basi più che mai lusinghiere e che ha una redazione molto brillante.l

.net

NETI_02_04_07_b2b_web 4

12/12/11 22.49

.net business_e_web

Streaming su Facebook È partito il progetto di Cubovision per vedere film gratuitamente sul social network Bellissima sorpresa per tutti i fan della pagina Facebook di Cubovision, la piattaforma di Telecom per il digitale terrestre e la Web TV, gratuita e a pagamento, normalmente visibile con l’iconico dispositivo a forma di cubo. Con il film Il favoloso mondo di Amelie , diretto da Jean-Pierre Jeunet, ha avuto inizio un’operazione che di sicuro piacerà a molti cinefili. Infatti è la prima volta che in Italia vengono trasmessi film in streaming su Facebook. L’appuntamento con il cinema online, marcato Cubovision, sarà per il momento settimanale. Tutti coloro che si iscriveranno alla pagina potranno così godersi gratuitamente la programmazione. Ma non basta! Infatti non saremo solo utenti passivi: potremo commentare i film in tempo reale e partecipare alla programmazione, indicando il nostro titolo preferito tra quelli proposti per la settimana successiva. Tutti i film potranno essere rivisti gratuitamente nelle successive 48 ore, collegandosi alla sezione dedicata presente nel sito www.cubovision.it. l

Sempre più in alto la pubblicità online ZenithOptimedia prevede una crescita del 15,9% annuo tra il 2011 e il 2014

Sarà che il Giappone si sta rialzando dalle recenti catastrofi subite, sarà che tra il 2012 e il 2014 si svolgeranno importantissimi eventi internazionali, come gli Europei di calcio e le Olimpiadi, sta di fatto che ancora una volta Internet si dimostra come il soggetto più in crescita del panorama pubblicitario. Le proiezioni compiute da ZenithOptimedia per il periodo 2012-2014 non lasciano dubbi. Sarà quindi questo mezzo di comunicazione, che ormai fa parte del quotidiano della maggior parte di noi, ad accaparrarsi una fetta ingente, pari a oltre il 20%, dei 464 miliardi di dollari stimati come investimenti pubblicitari mondiali per il 2012. In alcuni paesi europei come Danimarca, Norvegia, Regno Unito e Svezia, la quota di pubblicità assorbita dal Web è addirittura superiore al 25% e per gli ultimi tre si prevede che sfonderà il tetto del 30% entro il 2014. A farla da padroni saranno i social network, come Facebook e Twitter, e i video online. Ma anche giganti come Google se la passeranno molto bene. Infatti il motore di ricerca domina già l’85% del mercato di sua competenza. l

Il Kindle parla italiano

Il famoso lettore di libri elettronici di Amazon arriva ufficialmente in Italia con un catalogo di 16.000 titoli. Gli autori indipendenti possono anche mettere in vendita le versioni digitali dei loro libri sul negozio di Amazon, che trattiene il 30% su ogni copia venduta. Il Kindle costa 99 euro ed è la versione con Wi-Fi. www.amazon.it

Sportal per MSN.it Nasce il nuovo portale sportivo per gli italiani Quando due importantissime realtà della Rete come msn.it e sportal.it decidono di collaborare, il risultato non può passare sotto silenzio. Nasce così il nuovo portale sportivo (MSN Sport), pensato per soddisfare i gusti degli italiani, a cui possiamo collegarci all’indirizzo http://sport.it.msn. com. La parola d’ordine del sito è coinvolgimento totale degli utenti, che possono condividere le notizie su Twitter e Facebook, oltre che commentarle direttamente. È quindi chiaro che si tratta di un progetto nato per attirare una buona fetta della già vasta utenza sportiva del nostro Paese, famelica di notizie aggiornate in tempo reale. Di conseguenza, un portale come MSN Sport diventa una grossa attrattiva per le campagne pubblicitarie, anche grazie alle nuove tecnologie applicate, come Filmstrip, una forma di banner non invasivo che media tra le esigenze dello sponsor di farsi notare e le nostre di non essere disturbati mentre fruiamo dei contenuti del sito. l

Numeri

I dati importanti del Web e del mobile >> 20 milioni Sono gli smartphone che circolano nel nostro paese, secondo i dati Audiweb. Identica è la cifra in euro degli investimenti pubblicitari, pari al 2% del budget totale dedicato al Web.

>> 1.500 Sono gli ebook di RCS Libri in catalogo nel Kindle Store italiano di cui parliamo nella notizia qui a fianco. Tra gli autori disponibili abbiamo Dacia Maraini e lo scrittore più letto al mondo in formato ebook, Stieg Larsson.

>> 40.000 Sono gli interventi registrati da Blogmeter sulle pagine Facebook dei principali tour operator italiani. Primo in classifica Visit Trentino con 12.004, mentre al secondo posto c’è Alitalia con 11.809.

>> 70% Sarà la percentuale sulle vendite che otterranno gli sviluppatori delle applicazioni che verranno pubblicate nel Windows Store, che aprirà i battenti il prossimo febbraio in ben 231 paesi.

.net

NETI_02_04_07_b2b_web 5

12/12/11 22.49

Andrea Santagata, Liquida.it

Storie di successo

NON SOLO NEWS... Una delle sfide di chi usa Internet per leggere notizie e avere informazioni sulla sua città, sul suo Paese e sul mondo in generale è filtrare la quantità ingestibile di notizie che escono tutti i giorni e trovare solo quello che il poco tempo che abbiamo ci permette di leggere. Liquida.it è qui per questo... Non parlate a quelli di Liquida di aggregatori! La definizione che raggruppa portali e siti che raccolgono news da siti di notizie e da blog di informazione per fornire in un unico luogo un panorama dell attualità sta stretta al portale italiano liquida.it. Non è solo quello che ci dice Andrea Santagata, CEO di Liquida, ma è la sensazione che si ha navigando le pagine del portale. Liquida si autodefinisce come un “portale italiano di informazione 2.0 interamente composto da User Generated Content. Un valorizzatore dei contenuti generati dai blog”. Non solo, è “una piattaforma per dare visibilità e fare emergere i migliori blogger italiani”. Già dal primo accesso il concetto è chiaro: la homepage è più ricca di quella del tradizionale sito di informazioni; la quantità di notizie e la profondità degli argomenti trattati è straordinaria. Per capire meglio come funziona un portale di questo tipo e per scoprirne i segreti abbiamo parlato con Andrea Santagata al quale abbiamo anzitutto chiesto come nasce un servizio come questo e quali obiettivi si deve prefiggere. ”Liquida nasce per offrire agli utenti

Internet i migliori contenuti user-generated e offrire punti di vista indipendenti e alternativi ai canali informativi tradizionali. Offre la possibilità a chi vuole approfondire i grandi temi di attualità di conoscere le opinioni dei migliori blogger italiani e internazionali, ma anche di scoprire informazioni originali, curiosità e ultimi aggiornamenti sui temi trattati da migliaia di persone che scrivono ogni giorno per pura passione. Insomma Liquida vuole valorizzare quanto di meglio c’è nella cultura del Web: condivisione, passione, voglia di esprimersi”. Quando Santagata parla di valorizzare “il meglio” della cultura del Web non esagera: il sistema di gestione dei contenuti è impressionante... “Liquida analizza in tempo reale oltre 50.000 contenuti pubblicati ogni giorno dalle oltre 126.000 fonti blog italiane e internazionali scelte secondo criteri qualitativi che privilegiano i contenuti originali di opinione, informazione e approfondimento, arricchiti con analisi e notizie provenienti da Twitter e dai migliori newspaper online”, racconta Santagata. “Questa preziosa mole di contenuti è organizzata con tecnologie semantiche in modo efficace e imparziale”.

Ricchezza di contenuti Liquida.it offre una quantità sterminata di contenuti. La struttura ordinata della pagina rende facile trovare quello che si vuole leggere.

.net

NETI_02_12_13_liquida 12

14/12/11 12.19

.net storie_di_successo Il progetto Smarter City

Sviluppo sostenibile Uno dei progetti che Liquida realizza per terze parti è Smarter City, sviluppato in collaborazione con IBM. Il sotto-portale raccoglie tutte le notizie e i contenuti realizzati ex-novo sul tema della crescita sostenibile, dallo sviluppo “verde” delle città moderne al miglioramento di trasporti e sanità. Secondo Santagata, questo tipo di lavoro aiuta le aziende a “stimolare il passaparola sui loro prodotti e servizi, diffondere contenuti e informazioni e interagire con gli utenti”.

Business e dintorni Qual è quindi il modello di business di un servizio che fa informazione in questo modo? “Il modello di business di Liquida è principalmente basato sulla vendita di display advertising. Abbiamo però anche un’area di business dedicata a iniziative speciali per permettere alle aziende di stimolare il passaparola sui loro prodotti e servizi, diffondere contenuti e informazioni, interagire con gli utenti in spazi dedicati alla condivisione di esperienze attraverso la realizzazione di magazine verticali di contenuti user generated. Il caso più emblematico è il progetto Smarter City (smartercity.liquida.it) realizzato per IBM. Infine Liquida offre le proprie tecnologie semantiche e di search ai portali del Gruppo Banzai e nei progetti del Gruppo realizzati per clienti esterni. Quest’anno, per esempio, Liquida ha realizzato per Treccani il nuovo motore di ricerca per i contenuti della più importante enciclopedia italiana online, il tutto basato su tecnologie semantiche proprietarie”. Quali sono allora le competenze che oggi servono a un professionista del Web? In altre parole, per lavorare con Liquida che cosa deve poter offrire un professionista? “Le figure professionali che cerchiamo devono avere i requisiti normalmente richiesti in ogni azienda a elevato tasso di innovazione: un mix equilibrato di competenze tecniche, capacità di lavorare

in team, capacità di adeguarsi a scenari che mutano molto in fretta e ovviamente passione per il mondo del Web e dell’informazione online. Cerchiamo professionisti con un background tecnico di punta accompagnato dalla capacità di guardare al prodotto finale con un occhio attento alla qualità del risultato finale e con capacità propositiva sia nella scelta di tecnologie innovative che nell’ideazione di nuovi servizi per gli utenti”. Come funziona una giornata tipica del gruppo di lavoro che segue Liquida? Come si gestisce un lavoro in un mercato dell’informazione così dinamico? “L’attività lavorativa del team di Liquida si divide tra le azioni di miglioramento continuo della qualità del prodotto e dei processi e l’innovazione vera e propria. Uno dei nostri punti di forza è la capacità di tradurre in breve tempo un’idea promettente in un nuovo servizio agli utenti, questo è uno degli aspetti di cui siamo più fieri: chi lavora nel nostro team può vedere una sua buona idea realizzata online in meno di due settimane. Processi decisionali snelli e apertura all’innovazione sono per noi una forte leva per motivare le persone a innovare”. Il discorso cade infine inevitabilmente sull’aspetto tecnico... “Il cuore di Liquida si basa su tecnologie Open Source, il team tecnologico partecipa attivamente alla comunità del software libero proponendo patch e miglioramenti. Il motore

di ricerca è basato su Lucene/Solr di Apache Foundation, il motore Open Source utilizzato tra gli altri da LinkedIn, Apple e IBM. Il backend di Liquida e i sistemi semantici sono basati interamente su software sviluppato dal team, principalmente in Python e Java, abbiamo un middleware orientato su paradigmi MOM (Message Oriented Middleware), realizzato con ActiveMQ - un progetto di Apache Foundation - per la parallelizzazione dei processi che ci permette di gestire in modo elastico la crescita costante delle informazioni processate. Il frontend è sviluppato in PHP, utilizziamo JQuery e HTML5 per la compatibilità con il mondo mobile”. Insomma, che nessuno parli di aggregatori a quelli di Liquida, è chiaro che il loro progetto ha una visione, una passione e una competenza tecnologica sufficienti a farne un vero valorizzatore di contenuti a 360°.

Andrea Santagata Dal 2005 a fine 2007, il CEO di Liquida è stato Responsabile marketing del portale Virgilio.it. Co-fondatore della piattaforma blog Splinder e di Sitonline, con precedenti esperienze nei portali Giallo.it e Libero, è attualmente anche Amministatore delegato Banzai Media.

Nella pagina dei trend, Liquida mette a disposizione in modo immediato tutti gli argomenti più caldi in un periodo di tempo selezionabile.

NETI_02_12_13_liquida 13

.net

14/12/11 12.19

.net reattivitĂ

REATTIVO Il crescente interesse per i cellulari ha portato alla ribalta la progettazione reattiva. C'Ă¨ ben altro in gioco oltre ai layout adattabili. Scoprite con noi come funziona...

.net

NETI_02_16_21_NET221.f_responsive 16

13/12/11 00.57

.net reattività

Molti progettisti e sviluppatori Web conoscono ormai il celebre articolo pubblicato da Ethan Marcotte su A List Apart (alistapart.com/articles/ responsive-web-design). Questo breve testo ha introdotto un approccio alla progettazione per schermi di dimensioni diverse basato sull'uso combinato di media query CSS3 e layout e immagini flessibili. Tale metodo permette di creare progetti che si adattano alle dimensioni dello schermo del dispositivo usato per la visualizzazione. Potenzialmente, ciò potrebbe rendere obsoleta la necessità di creare progetti o siti distinti per i diversi dispositivi. Ma sarà davvero così? Nessuno userebbe un martello per mangiare, né una forchetta per piantare un chiodo. Allo stesso modo, le media query non vi aiuteranno ad adattare i contenuti agli utenti di dispositivi cellulari e una strategia relativa ai contenuti non renderà elegante e funzionale la vostra interfaccia su un dispositivo da 240 x 320 pixel. Per ogni compito esiste uno strumento specifico; o meglio, nel caso della progettazione Web, decine o centinaia di strumenti. L'articolo di Marcotte descrive uno dei compiti da svolgere quando si crea un sito per cellulari, un compito al quale si affiancano ovviamente altri compiti, con i relativi strumenti.

Dal desktop al cellulare? La nostra tendenza, o almeno quella dei nostri clienti, è di adattare ai dispositivi cellulari un sito pensato per il computer. Per farlo si può utilizzare l'approccio descritto nell'articolo di Marcotte. Può inoltre essere necessario rilevare il tipo di dispositivo che sta richiamando la pagina Web, inviandogli quindi una pagina su misura. Comunque la si voglia vedere, la progettazione e lo sviluppo per cellulari introducono elementi nuovi da considerare (oltre a reintrodurne alcuni già esistenti): l Dimensioni dello schermo: gran parte delle discussioni ruotano intorno a questo fattore, che è importante data la quantità di dispositivi diversi esistenti. l Risoluzione: 600 pixel su un telefono sono una cosa, 600 pixel su un computer desktop sono tutt'altro. l Densità pixel: è legata alla risoluzione ma non coincide con essa, indica il numero di pixel per pollice disponibili su un dato dispositivo. l Supporto media query: le media query sono perfette per modificare il layout in funzione di varie caratteristiche (tra cui la larghezza dello

NETI_02_16_21_NET221.f_responsive 17

.net

>>>

13/12/11 00.57

.net immagini

Migliora le immagini con CSS3 I moderni CSS permettono ai progettisti di migliorare l’aspetto e la gestione delle immagini sui siti Web: scoprite come farlo, con l’aiuto di progettisti che hanno già adottato CSS3 Spesso, quando si parla di nuovi standard Web, l’attenzione dei più si concentra sulla tipografia. Se i contenuti più importanti sono di tipo testuale, spesso però sono le immagini ad attirare gli utenti; e i CSS vi offrono numerosi strumenti per sfruttare al meglio le immagini del vostro sito. In questo articolo scoprirete alcune delle proprietà CSS e il modo di usarle per migliorare le vostre immagini. Troverete snippet di codice e informazioni dettagliate sul supporto dei browser, con casi di studio concreti illustrati da progettisti che hanno già adottato questa tecnologia. Paradossalmente, l’uso del CSS per migliorare la resa delle immagini

online implica spesso un uso più limitato delle immagini stesse. Può sembrare poco intuitivo; ma riflettete su come spesso inserite immagini ‘aggiuntive’ nei vostri progetti, allo scopo di creare effetti come ombre esterne e contorni complessi.

La gestione Con le immagini, anche l’aspetto gestionale può risultare impegnativo. Con il testo è sufficiente modificare l’HTML. Per modificare una complessa immagine di sfondo, invece, può essere necessario trovare nuove risorse originali, rielaborare un documento a più livelli e quindi ricaricare l’immagine modificata. Un maggiore uso dei CSS riduce di norma la necessità di interventi

.net

NETI_02_26_31_NET208.f_images 26

12/12/11 22.51

.net immagini

NETI_02_26_31_NET208.f_images 27

12/12/11 22.51

.net velocità

Siti Internet a velocità luce Per rendere più veloce il vostro sito non occorre sacrificare i contenuti o la progettazione: basta riconfigurare alcuni elementi. Facciamo ordine nella giungla dei termini dell'ottimizzazione e vi mostriamo come fare! Il 9 aprile 2010, Google ha deciso di inserire la velocità dei siti nel suo algoritmo di ricerca. La velocità è da sempre importante per gli utenti e la missione di Google è promuovere i siti più utili e accessibili per gli utenti stessi. Nessun proprietario di siti può permettersi di ignorare questo sviluppo. La velocità è uno tra i fattori decisivi per il numero di visite ricevute da un sito. Spesso la prima impressione di un potenziale visitatore è determinata dal modo in cui il sito compare nei risultati della ricerca. Per questo esiste l'ottimizzazione per i motori di ricerca: titolo, header, parole chiave, contenuti. La seconda impressione, però, è data dalla velocità con cui il sito si apre

NETI_02_34_39_NET220.f_speed 34

dopo il primo clic. Potete anche aver creato uno schema cromatico accattivante, un'immagine di sfondo mozzafiato e un logo perfetto: ma se il sito impiega 5-6 secondi ad apparire, l'utente potrebbe stancarsi e passare sui due piedi al risultato successivo della ricerca. Questo articolo descrive vari semplici metodi (e qualcuno più complicato) per velocizzare il vostro sito. Notate che la maggior parte di essi non implica sacrifici in termini di contenuti o progettazione ma solo un po' di riconfigurazione e riorganizzazione degli elementi.

Google: il limite degli 1,5 secondi La soglia di Google per i siti veloci è un tempo di caricamento di circa 1,5 secondi. Per la valutazione del vostro sito

13/12/11 01.05

.net velocitĂ

NETI_02_34_39_NET220.f_speed 35

13/12/11 01.05

.net traffico

.net

NETI_02_40_42_NET220.f_traffic 40

12/12/11 22.53

.net traffico

Acquistare traffico Web Volete riuscire a ottenere 100.000 nuovi visitatori a prezzi stracciati? Ecco come... Chiunque possieda un sito desidera un traffico maggiore. Se offrite contenuti di qualità, è probabile che gli utenti vi troveranno e l'ottimizzazione per i motori di ricerca può migliorare le vostre chance. Che fare però quando nessuno dei metodi tradizionali funziona? Basta davvero sfoderare la carta di credito e comprare in moneta sonante il successo di un sito? In una parola, no. O almeno, non del tutto. Pagando un servizio di incremento del traffico online otterrete sì un traffico maggiore ma non certo i visitatori effettivamente interessati che potreste ottenere mediante un più tradizionale annuncio pubblicitario o un classico link reciproco (meglio se non a pagamento, come vedremo). Il traffico effettivo deriva dalla rete esistente dei siti di un'azienda e si ottiene tipicamente inserendo una finestra pop-under del sito in questione in una delle pagine. Esistono anche altri metodi, tra cui l'uso di server proxy che simulano il traffico e l'inserimento del sito direttamente su un URL estinto o digitato in modo errato e controllato dall'azienda. I pop-under, comunque, rimangono lo strumento più comune. Sono particolarmente efficaci in quanto, oltre al fatto che incidono sulle statistiche, il tempo necessario all'utente per chiuderli costituisce tecnicamente tempo attivo sul vostro sito, il che crea un'illusione di un coinvolgimento al di là della semplice visualizzazione. Il costo (CPM = costo per migliaia) del traffico a pagamento varia fortemente a seconda dell'azienda. Da una rapida perlustrazione in rete (citiamo solo a titolo di esempio), si apprende che buywebsitetrafficnow. com offre 100.000 visitatori a 320 dollari, superfastvisitors.com offre lo stesso a 235 dollari, mentre getwebsitetraffic.org ne chiede 299,95 ed evotraffic.co.uk 777.

La maggior parte dei servizi di questo tipo è molto chiara nello spiegare ciò che offre e come potete ottenerlo. Nella maggior parte dei casi è richiesto un extra per il traffico proveniente da Paesi specifici o da visitatori con interessi specifici (computer, auto… ). Il primo requisito è facilmente verificabile tramite l'indirizzo IP sul vostro server, mentre per il secondo occorre basarsi sostanzialmente sulla fiducia.

Pro e contro Esistono restrizioni relative a chi può acquistare traffico, acquisto che si può effettuare con PayPal e simili per evitare di rischiare usando la carta di credito. Perlopiù, i servizi chiedono un extra per le pagine che contengono suoni e rifiutano il link a qualsiasi pagina che produca prompt JavaScript o script che agiscano sul browser, generi pop-up propri o contenga materiale per soli adulti o illegale. Quanto alla severità dei controlli in merito da parte loro, è un altro paio di maniche. Per ciò che riguarda l'utilizzo continuativo dei servizi, ne esistono alcuni con formule di abbonamento ma nella maggior parte dei casi la sottoscrizione è mensile. Quasi tutti offrono garanzie nel caso in cui il traffico da voi acquistato non si concretizzi.

NETI_02_40_42_NET220.f_traffic 41

Fare spese I siti che vendono traffico Web sono numerosi – e alcuni hanno uno stile più professionale di altri.

.net

>>>

12/12/11 22.53

.net tecniche photoshop

Photoshop lo stile rétro L’illustratrice e progettista Naomi Atkinson vi svela alcuni trucchi di Photoshop e CSS per dare ai vostri progetti un tocco d’altri tempi Conoscenze richieste Photoshop livello intermedio, voglia di misurarsi con CSS Strumenti Photoshop, editor CSS Tempo 1 ora Si definisce rétro’ uno stile culturalmente superato o datato che ritorna alla ribalta dal punto di vista funzionale o superficiale. Di norma, prima che questo accada devono trascorrere almeno 15 anni. Possiamo essere tentati di usare uno stile rétro semplicemente perché appare ‘diverso’ o perché va di moda al momento; prima di mettere mano al blocco degli schizzi o a Photoshop, però, è importante domandarci perché vogliamo usare questo stile e se esso sia veramente adatto al progetto. Vi consiglio di porvi questa domanda: il marchio/prodotto/servizio in questione è in circolazione da tempo? Ripercorrendone la storia, è possibile trovare pubblicità o marchi che oggi avrebbero un aspetto rétro? Oppure si tratta semplicemente di un servizio che esisteva in passato più o meno come oggi, come la consegna del latte? Se la risposta è negativa, domandatevi: è possibile associare al passato il marchio/ prodotto/servizio? Pensate per esempio a un servizio di pulizie o di autisti, alla riproposizione di un vecchio prodotto (come il ‘maggiolino’ Volkswagen) o a una moda che ha riacquistato popolarità. Se la risposta a entrambe le domande è ‘no’, uno stile rétro potrebbe non rappresentare una scelta ideale.

Stile d’altri tempi Ho creato e programmato un semplice progetto che dimostra che cosa è possibile fare con quattro immagini e un po’ di CSS. Lo scopo di questo esempio è offrirvi qualche spunto su come creare uno stile rétro in modo

Scaricate i file! >

ssari Tutti i file nece per il tutorial si trovano su 5ozy tinyurl.com/7z7

facile e veloce, in modo da poter sfruttare queste idee nei vostri progetti. Prima di cominciare, però, c’è qualche considerazione da fare. La fase più importante prima di qualsiasi progetto è quella delle ricerche sullo stile di riferimento. ‘Rétro’ può riferirsi a qualsiasi periodo, da 15 anni fa fino a qualunque epoca siate in grado di raggiungere con la mente o con le vostre ricerche. Uno dei periodi che prediligo sono gli anni ‘20, un’epoca caratterizzata da un grande sviluppo della pubblicità. Gli elementi principali da considerare per l’ispirazione sono gli schemi cromatici, gli elementi tipografici, i pattern e lo stile delle illustrazioni.

Potete ottenere un effetto vecchio stile mediante una miscela di texture e pattern Anche la scelta del font è decisiva, poiché molti stili rétro fanno un uso incisivo di caratteri specifici. Date un’occhiata a qualche negozio di font online, tenendo sottomano i risultati delle ricerche in modo da poter confrontare i font che trovate con i vostri modelli. Vi suggerisco quindi di creare uno schizzo su carta. Il computer è solo uno strumento. Non mettetevi in testa di non poter progettare senza di esso: serve solo a tradurre i vostri progetti in realtà.

Mano a Photoshop Aprite il file PSD di esempio: come vedete, il progetto è semplicissimo. Nel crearlo a schermo avevo ben chiaro un punto: volevo riuscire

Pubblicità vintage I vecchi poster sono tra le mie fonti di ispirazione preferite. Questi sono attualmente esposti al Wolfsonian Museum di Miami (wolfsonian.org).

.net

NETI_02_50_52_NET216.tut_retro 50

12/12/11 22.53

.net tecniche photoshop

Tutto pronto Nei file del tutorial (tinyurl.com/7z75ozy) troverete tre texture

La selezione Ho selezionato parte dello sfondo per ricavarne un’immagine

ad applicargli uno stile mediante CSS, senza dover usare un’immagine. Intendevo usare font per il Web, perciò avrei avuto bisogno di immagini solo per le texture. Volevo inoltre evitare di usare immagini nell’HTML. Non mi definisco certo una programmatrice ma ritengo importante per un buon progettista Web conoscere e capire le possibilità (e i limiti) dei CSS. Un trucco pratico per progettare in funzione di CSS consiste nel sapere quali stili di livello di Photoshop coincidano meglio con gli stili creati con CSS. Eccovi alcuni suggerimenti:

un’immagine da esportare, il pattern a strisce usato nella parte superiore e in quella inferiore. Per crearlo ho semplicemente usato un riempimento pattern, che trovate nel PSD. Osservate l’immagine esportata nella cartella Images. Anche questa potrà essere iterata nel CSS.

gentilmente offerte da Simon Foster di simonfosterdesign.com

Stile livello: Traccia

iterabile, l’ho trasferita in un nuovo file e ho usato lo strumento Sposta.

Markup e CSS Il markup è ridotto all’osso; non servono molti div o classi. Nei file di esempio noterete che bastano tre div per definire gli stili. Nella pagina seguente trovate le proprietà che ho usato.

Proprietà CSS: -webkit-text-stroke, border

Stile livello: Bagliore Proprietà CSS: box-shadow (non l’ho usata nell’esempio ma vale la pena citarla)

Stile livello: Ombra esterna Proprietà CSS: text-shadow Consiglio: per ottenere un bagliore da 1 pixel alla base dei caratteri, provate queste impostazioni: Stile livello: Ombra esterna; 90 gradi, Distanza 1 px, Estensione 0, Dimensione 1 px Proprietà CSS: text-shadow: 1px 0 0 #color;

Texture e pattern Potete ottenere facilmente un effetto ‘invecchiato’ vecchio stile utilizzando una miscela di texture e pattern. Nel file PSD di esempio ho utilizzato tre immagini per la texture, gentilmente offerte da Simon Foster di simonfosterdesign.com/blog/my-work/texture-tutorial. Metodi di fusione e gradi di opacità sono essenziali per le texture, qualora si desideri usarle per creare le immagini invece di tentare di ricreare gli effetti mediante CSS. Notate che ho usato metodi di fusione e gradi di opacità diversi per ognuno dei due livelli immagine. Ottenuto un effetto soddisfacente, ho selezionato parte dello sfondo per ricavarne un’immagine ripetibile. L’ho trasferita in un nuovo file e ho usato lo strumento Sposta. Selezionate il livello che intendete ripetere, scegliete Filtro, quindi Altro e infine Sposta. Regolate i cursori a +50% o -50% delle dimensioni del quadro... ed ecco fatto! Potrebbe essere necessario qualche ritocco (magari con lo strumento Timbro). Una volta soddisfatta della texture (che ho collaudato definendo un pattern in Photoshop; potrete effettuare il collaudo anche mediante il codice), l’ho salvata per il Web come file JPEG ottimizzato. Ho quindi salvato altre due versioni del file: una più scura da usare sotto il pattern a strisce e una rossa da usare all’interno del cerchio. Non mi restava che

Font per il Web I servizi di font per il Web, come sapete, sono numerosi. Il servizio però è solo l’inizio: una volta trovato il font desiderato, capire come implementarlo può non essere facile. In questo caso, vi consiglio di usare @font-face generator di Font Squirrel. Da persona più creativa che logica (e immagino di non essere la sola qui), trovo questo servizio estremamente pratico. Caricate i vostri fonti e scaricate il vostro kit, completo di CSS e di tutti i file necessari. Facile, no? Altri servizi che offrono font per il Web: typekit.com webfonts.fonts.com myfonts.com

Ecco @font-face Trovate informazioni su Font Squirrel all’indirizzo fontsquirrel.com/fontface/generator

NETI_02_50_52_NET216.tut_retro 51

.net

>>>

12/12/11 22.53

.net dati_web

DATI WEB

S tatistiche Web Le statistiche di Internet per i siti e per i social network direttamente dalle agenzie di rating

Gli accessi dei grandi siti Web italiani

2.956.741

44.064