Raccontare il prima e dopo: il terremoto in Giappone

Tutte le principali testate d’informazione on line aprono in questi giorni con le notizie relative al terremoto e allo tsunami in Giappone. Moltissime foto e video per raccontare questi eventi, ma anche numerosi tentativi di utilizzare strumenti più interattivi.

Una soluzione che è piaciuta a molti è questa specie di “foto comparativa” con la quale è possibile confrontare due foto scattate dal satellite sulla stessa zona ma in due diversi momenti, prima e dopo la catastrofe.
Trascinando il cursore (che nell’immagine qua sotto vedete in blu, proprio al centro) si scopre la foto del “prima” e si copre allo stesso tempo la foto del “dopo”, e viceversa. In questo modo si possono confrontare facilmente le due immagini e rendersi conto della devastazione che quei luoghi hanno subito.

Il New York Times ne pubblica otto, una dietro l’altra, in questa pagina: Satellite Photos of Japan, Before and After the Quake and Tsunami.
Troviamo lo stesso tool su Der Spiegel (con l’aggiunta di un menu per muoversi tra le varie foto disponibili): Tsunami-Satellitenbilder: Der Tod kam aus dem Meer, sul Guardian: Japan tsunami – before and after pictures e sull’Herald Sun Before-and-after interactive photos from the Japan earthquake and tsunami.
Alcune sono fatte in flash, altre in html+javascript.

Venendo in Italia, anche il Corriere.it ne fa una gallery: Prima e dopo il sisma, le foto interattive, e rispetto agli altri – a parte la solita tremenda pratica di aprire la pagina in una popup – troviamo un dettaglio in più: in ogni visualizzazione ci sono due link che permettono di passare da una foto all’altra e viceversa molto rapidamente, senza dover fare drag’n'drop, amplificando l’efficacia del confronto tra le due foto.
È una scelta azzeccata, perché la velocità e la naturalezza della transizione è fondamentale per rendere l’idea del cambiamento. Mi viene in mente un’altra foto interattiva, Signs of Occupation, nella quale per dare risalto alle conseguenze dell’occupazione USA di Baghdad, Maps of war aveva optato semplicemente per una dissolvenza incrociata comandata da un pulsante “change view”, puntando tutto sull’immediatezza della transizione per aumentare il contrasto tra le due immagini.

Posted in information design, Interactive | Tagged , , , | Leave a comment
html5-web-app

Perchè (e come) il futuro delle app è HTML5

Segnalo, a chi non l’avesse ancora letto, Verso un mondo di (web) apps: un post di Matteo Barbero, che parte dalla constatazione di Chris Anderson e Micheal Wolf “the web is dead” per mostrare come invece ci potrebbe attendere un … Continue reading

Posted in Mobile, Segnalazioni, Webdesigner | Tagged , | Leave a comment
css3-gradient-buttons

Pulsanti con pattern di sfondo, tutto con CSS3

Lea Verou in questo post ha spiegato una tecnica interessante per applicare semplici pattern su elementi html sfruttando CSS3. La tecnica si basa sull’attributo color-stop che viene specificato per il gradiente: indicando due color-stop con la stessa posizione, è possibile … Continue reading

Posted in Webdesigner | Tagged , , , | Leave a comment
censure-workflow

La censura su internet in cinque grafici

Yuxiyou.net pubblica una slideshow che racconta lo stato della censura di internet. L’ironico titolo iniziale “So you still think the Internet is free” precede cinque bellissimi grafici che uno dopo l’altro raccontano in quali paesi e a che livello la … Continue reading

Posted in Infografica, information design, Webdesigner | Tagged , , , , | Leave a comment
ipad-gui

Malditesta da iPad+HTML5

Miller Medeiros pubblica un post dal titolo “iPad is the new IE6″. Secondo Medeiros i designer si aspettano molto da HTML5, ma i browser (in particolare Safari iOS, quello dell’iPad) non lo supportano perfettamente e sono pieni di bug. Sta … Continue reading

Posted in Mobile, Segnalazioni, Webdesigner | Tagged , , , , | Leave a comment
guardian-obama-speech

La presentazione interattiva del discorso sullo stato dell’unione, sul Guardian

Mercoledì 29 gennaio Obama ha tenuto il discorso sullo stato dell’Unione. Il presidente USA ha parlato per 71 minuti. I passaggi interessanti del discorso sono naturalmente tanti. Per cui il Guardian ha deciso di fornire ai suoi utenti una interactive … Continue reading

Posted in information design, Segnalazioni, Webdesigner | Tagged , | Leave a comment
jquery-confirm-box1

Personalizzare la finestra di dialogo aperta dalla funzione CONFIRM

La funzione javascript CONFIRM apre una finestra di dialogo predefinita dal browser e restituisce true o false, rispettivamente se l’utente OK oppure ANNULLA. l’aspetto della finestra è quello previsto dal browser che l’utente sta utilizzando. Nulla contro le impostazioni di … Continue reading

Posted in Segnalazioni, Tutorial, Webdesigner | Tagged , , , | Leave a comment
mubarak-nyt-timeline

Interattivo: la timeline della carriera di Mubarak sul NYT

Notevole timeline del New York Times che visualizza in un colpo d’occhio la presidenza di Mubarak in Egitto dal 1981 a oggi. . Cliccando sulle “milestone” in timeline, si apre un slide che presenta e spiega l’evento attraverso testi e … Continue reading

Posted in information design, Segnalazioni, Webdesigner | Tagged , | Leave a comment
qwiki-thumb

Qwiki, l’enciclopedia video

Visibile la versione alpha di Qwiki una video enciclopedia che si presenta con un’ambizioso claim “The information experience”. L’idea è di fornire una presentazione multimediale delle informazioni che l’utente sta cercando: quindi pochissimo testo, ma immagini, mappe, video, grafici, e … Continue reading

Posted in Infografica, Segnalazioni, Webdesigner | Tagged | Leave a comment
html5-infog-thumb

HTML5 in un’infografica

Focus.com pubblica una bella infografica che spiega gli aspetti fondamentali di html5. Dovendo scegliere mette in primo piano l’elemento canvas, l’elemento video, la geolocalizzaione, e le webapplication offline. Poi nel dettaglio viene visualizzato il supporto fornito dai maggiori browser alle … Continue reading

Posted in Infografica, Webdesigner | Tagged | Leave a comment
514px-Assortedcrayolas

L’esadecimale dei pastelli a cera

Rapida segnalazione per il webdsigner con il pallino dei pastelli a cera (e sono tanti): sulla pagina di wikipedia dei pastelli Crayola, i codici esadecimali e i valori RGB di ogni singolo pastello. Dopo attenta valutazione, posso dire che il … Continue reading

Posted in Mai dire mai, Webdesigner | Tagged , , | 1 Comment
Schermata 2011-02-06 a 18.27.19

Immagini da bianco e nero a colori per un effetto hover

Un effetto relativamente comune utilizzato per evidenziare un’immagine con un link è quello di far sì che l’imamgine raggiunga il 100% di opacità solo al passaggio del mouse, mentre in uno stato “normale”, non :hover, l’immagine è più o meno … Continue reading

Posted in Segnalazioni, Webdesigner | Tagged , , , , , | 2 Comments
Schermata 2011-02-06 a 18.25.32

Can You be a web designer?

Diciamo che questo grafico mi ha fatto venire voglia di tornare a postare… via sixrevisions

Posted in Tutorial, Webdesigner | 5 Comments

Il colore rosso e i messaggi di conferma

Quello che vedete è il messaggio di conferma, dell’avvenuto acquisto di un volo su edreams.it. A mio avviso sono del tutto inappropriati l’icona di allerta (pericolo generico…?) e soprattutto del colore rosso per indicare una transazione che in realtà è … Continue reading

Posted in Segnalazioni, Webdesigner | Tagged , , | 2 Comments

Richiamare jQuery o altri framework JS dai server Google

In questo post di dicembre 2008 Dave Ward ci ricorda tre buoni motivi per richimare jQuery dai server di Google, anzichè dal nostro server. Ci sono almeno tre valide ragioni per farlo. Innanzitutto sfruttare il Content Delivery Network di Google. … Continue reading

Posted in Webdesigner | Tagged , | 3 Comments