Species in Pieces

C’è stata una lunga evoluzione da quando il CSS (Cascade Style Sheets) è nato per rendere più conveniente l’arrangiamento delle immagini in una pagina web.
Dal 1996 si è evoluto dal semplice set di regole per formattare le immagini di pagine HTML ad una serie di ricche animazioni e complesse interazioni.
Il Designer Bryan James si è spinto oltre e ha voluto realizzare un CSS complesso che è allo stesso tempo showcase e luogo di sensibilizzazione.

www.species-in-pieces.com

Si parla infatti di 30 specie in via di estinzione ed ognuna di queste creata con 30 poligoni. “E’ stata una sfida” dichiara il designer “All’inizio creare animali con questa limitazione non è stata facile, ma infine ho battuto i miei limiti.”
Motionographer.com ha intervistato il creatore del sito e di seguito riportiamo la traduzione italiana della breve intervista.


M: “In Pieces” è insieme un progetto di sensibilizzazione ambientale che un uno showcase di tecnica e design. Stavi cercando un modo di mostrare il potere dei poligoni in CSS e sei in qualche modo arrivato a trattare le specie? Oppure è successo il contrario?
B: E’ stato un po’ entrambi. L’idea è nata dal tentativo di capire se i poligoni in CSS avrebbero lavorato bene con le transizioni CSS e con mia grande gioia hanno funzionato. Da lì ho deciso di creare un animale, che in seguito divenne il primo pezzo, Il corvo hawaiano. Mentre completavo il primo pezzo mi è venuto in mente un associazione di idee con animali in pezzi, in rovina, e da li è stato un turbinio di idee ed eccoci qua.

M: Per i meno tecnici, potresti spiegare in breve cosa sono i poligoni CSS?
B: I poligoni CSS sono una linea di codice che richiama essenzialmente una forma di un insieme di coordinate con valori X e Y per ciascun punto. Si puo’ avere una quantità di punti qualsiasi, io ne ho ovviamente scelti 3 dato che ho usato dei triangoli. Queste coordinate sono basate da un rettangolo che puoi ridimensionare in qualunque maniera desideri e i poligoni si adatteranno come se fossero delle percentuali di coordinate.
Spero questo abbia senso!

M: Quali sono i benefici dell’utilizzo della animazione in CSS sopra qualcosa come WebGL e/o tecniche canvas?
B: Beh, dipende da con chi stai parlando.
Personalmente so che i lavori in WebGL e Canvas sono assolutamente incredibili e che la padronanza delle tecniche richiedono anni di esperienza e una infinita conoscenza. Per me, credo che se il CSS è sufficiente non servono terze parti. Il CSS costituisce la base di internet e quindi lavorare con esso è molto più puro e semplice, dove possibile.
Ognuno ha le sue preferenze, non c’è una risposta esatta.

M: “In Pieces” funziona brillantemente su mobile. Quanto tempo hai passato a riadattare il layout per i diversi schermi mobili?
B: Per il mobile è stato molto più il problematica l’ottimizzazione delle prestazioni più che il layout. Avevo già in mente dall’inizio come sarebbero sembrati tutti i dispositivi, quindi non ricordo un momento in cui il layout ci abbia bloccato nello sviluppo. L’adattamento dell’immagine (scaling) è dinamico e non importa il dispositivo e addirittura, dato che è più piccolo lo schermo, le performance sono migliori.

M: Quanto tempo hai speso per il progetto?
B: Dall’inizio alla fine ci sono voluti 5 mesi da ottobre, tutto nel mio tempo libero al di fuori del mio lavoro full time, e nel primo mese ero abbastanza lento nel progetto. Verso la fine ho fatto molte notti in bianco e i miei occhi sembravano quelli di un minatore appena tornato alla luce.

M: Quali sono le limitazioni che detta la progettazione del design degli animali in CSS.
B: Il fatto è conoscere i propri limiti. Per esempio sapevo che non potevo usare dell’ombreggiatura all’interno di un singolo frammento, perché proprio non puoi farlo. Se avessi usato un immagine Flat avrei potuto usare sfumature più dettagliate all’interno dei poligoni stessi. La maggior parte del lavoro è stata progettare con la limitazione in 30 parti. A volte, soprattutto all’inizio della progettazione delle specie, è stato molto impegnativo, ma alla fine mi sono abituato e ho sconfitto il problema.

M: Hai mai usato uno strumento di terze parti o un “middleware” per la progettazione delle figure degli animali?
B: No, ho provato! Ci sono un paio di “disegnatori di poligoni in CSS” ma nessuno faceva quello che avrei voluto facessero, dato che avevo bisogno di un approccio più basato sulle percentuali, che mi permetteva di tracciare le specie dopo l’illustrazione. Quindi ho creato uno JavaScript funzionale per gestire i tracciati.

M: Pensi che servirebbero maggiori programmi che aiutino le animazioni grafiche in CSS? O rimane il codice il miglior approccio?
B: Dipende dall’approccio personale, credo. Qualche anno fa, ti avrei detto di si, dato che sono stato un grande estimatore del Flash quando ero in università! Ad ora, penso che scrivere in codice direttamente, ti permetta di avere un controllo istantaneo sull’oggetto costruito.

M: Hai avuto qualche problema inaspettato o una qualche sfida durante la realizzazione?
B: Le proprietà dei poligoni in CSS hanno alcuni svantaggi quando si parla del rendering con altri elementi. Ad esempio, qualsiasi opacità nella regione sembrava dare dei problemi a volte.
Per un lungo periodo Safari era particolarmente lento, e ho scoperto che usare le vignette dietro le animazioni peggiorava drasticamente la performance. La stessa cosa per il retina. Retina è in generale concentrato per far migliorare le prestazioni nel modo migliore possibile. Quindi credo che la vera sfida fosse rendere ogni performance buona per più dispositivi possibili. Spero vada bene su tutti.

M: Aspetti del progetto di cui vai più fiero?
B: Difficile a dirsi, riflettendoci credo che lo scaling sempra fatto bene, ma forse semplicemente non avevo realizzato in partenza. Sono specialmente fiero della ricerca che ho fatto, perché alcune specie erano molto difficili. In generale, sono soprattutto fiero che la gente sembra toccata dalla mia missione, a parte il punto di vista della tecnica usata, ma del messaggio. E’ un sentimento molto speciale.

M: Non è il tuo primo lavoro. Nonostante tu abbia solo 28 anni, hai già una carriera alle spalle. Cosa ti motiva ad andare avanti?
B: Beh, non lo so con certezza. Ho ancora una lunga strada da fare prima di arrivare dove voglio. Ultimamente, progetti come questo che vanno bene e hanno reazioni genuine, soprattutto emotive, sono un bel colpo. Non c’è miglior sensazione di quando sai che qualcuno ha provato un emozione per qualcosa che hai fatto.

Ringraziamo Motionographer.com per averci permesso di tradurre l’articolo di cui linkiamo l’originale in seguito e un ringraziamento speciale a Bryan James per l’ottimo lavoro svolto, a cui auguriamo il meglio.