Layout web di nuova generazione - National Geographic Forest Giant

Christopher Gammon
Christopher Gammon

Utilizzare gli strumenti del CSS e del layout del browser può consentire visualizzazioni straordinarie per i contenuti web. L'utilizzo di funzionalità web come filtri CSS, WebGL, video HTML5, SVG, canvas e tecnologie future in evoluzione come regioni CSS, forme CSS e filtri CSS personalizzati promette un panorama creativo notevolmente ampliato. Adobe collabora da molto tempo con creator di contenuti appassionati di layout e design e, di conseguenza, si impegna attivamente ad applicare queste conoscenze al web, contribuendo a molti standard web in evoluzione.

Con l'aiuto di National Geographic, abbiamo utilizzato i contenuti della loro funzionalità "Forest Giant" per creare un prototipo che dimostri come queste funzionalità possono abilitare layout web avanzati e tecniche responsive. Questo articolo illustra come abbiamo creato alcune caratteristiche particolarmente interessanti del sito. Per una panoramica concisa, ti consigliamo di guardare questo video qui sotto, in cui Christian Cantrell illustra le varie funzionalità del sito.

Sfumature del layout

Le caratteristiche che rendono un layout eccellente possono essere sottili, quindi abbiamo creato un "overlay dell'editor" che mette in evidenza le funzionalità più importanti. Per attivare i segni dell'editor, fai clic sulla barra in fondo all'articolo.

Immagine degli indicatori dell'editor

Indipendente dal layout

Oggi, sul web, il layout è spesso dettato dai nostri contenuti, con i contenitori che si espandono verticalmente per adattarsi al testo. Quando crei layout complessi, le modifiche al testo o ad altri contenuti possono avere un impatto indesiderato sul layout complessivo, rendendo necessario riprogettare i contenuti in base a modifiche impreviste. Con le regioni, possiamo separare i contenuti dal layout definendo un elemento come contenuto e specificando le parti del layout attraverso le quali vogliamo che i contenuti vengano visualizzati.

Nell'esempio di "Forest Giant", la storia è contenuta in un singolo elemento. Poi, in tutta la pagina, abbiamo la struttura del layout, composta da foto e aree di testo. Con CSS definiamo gli elementi attraverso i quali vogliamo far scorrere i contenuti. Quando la copia raggiunge la fine di un elemento, passa a quello successivo nell'ordine DOM. In questo modo possiamo dare sfogo alla nostra creatività con le colonne, spostandole e adattandone l'altezza in base al design, senza preoccuparci che il testo si adatti o superi l'altezza dell'elemento. Ci consente inoltre di avere elementi all'interno del layout, come immagini a larghezza intera, mentre la storia continua a svolgersi.

#storyContent {
    flow-into: story;
}
.story {
    flow-from: story;
}

Nel CSS riportato sopra, stiamo creando un flusso denominato "story". I contenuti di questo flusso denominato sono l'elemento con l'ID "storyContent". Il valore viene poi passato a tutti gli elementi con il nome della classe "story". Le regioni CSS sono un ottimo strumento per il responsive design che consente funzionalità come più colonne e colonne offset per un layout avanzato su schermi di grandi dimensioni, adattandosi al layout a una colonna su schermi più piccoli. Con le regioni puoi anche impostare le dimensioni della regione con unità responsive come vw o vh. Questo può essere utilizzato per assicurarti che le colonne non superino l'altezza del viewport nel layout, senza preoccuparti che i contenuti vengano tagliati, poiché passeranno naturalmente all'elemento successivo nella catena di regioni.

Lettere iniziali maiuscole

Le esclusioni CSS ci consentono di inserire il testo all'interno o intorno a forme irregolari. Questa opzione può essere utile per elementi decorativi come le iniziali maiuscole. Le maiuscole iniziali sono una pratica di progettazione comune, in cui la prima lettera di una storia o di un capitolo viene ingrandita, consentendo al resto del testo di avvolgersi attorno al contorno del carattere. Questo effetto è molto simile al modo in cui i contenuti in linea si adattano ai float, ma con le esclusioni non siamo più limitati a caselle rettangolari. Utilizzando shape-outside su un elemento float, possiamo definire la geometria che consente ai nostri contenuti di avvolgersi perfettamente intorno alla forma del carattere.

.drop-caps {
    height: 100px;
    width: 100px;
    float: left;
    shape-outside: ellipse(50%, 50%, 50%, 50%);
}

In questo modo verrà creata un'ellisse che consente ai contenuti di adattarsi alla forma circolare. Inoltre, poiché utilizziamo unità relative per la forma, la modifica delle dimensioni dell'elemento si rifletterà sulle dimensioni della forma.

Immagine di lettera maiuscola iniziale

Forme

Oltre alle iniziali maiuscole, le esclusioni offrono la possibilità di a capo il testo all'interno delle forme utilizzando shape-inside. Utilizziamo questa funzionalità in tutto il sito, in particolare con le didascalie delle immagini di grandi dimensioni, sfruttando lo spazio negativo delle foto per incorniciare il testo. Ci consente inoltre di a capo il testo lungo il contorno di altre immagini e grafica, emulando layout che in precedenza erano molto difficili da realizzare sul web.

Le forme possono essere utilizzate anche con i layout adattabili utilizzando unità relative per definirle. In questo modo possiamo creare forme che si estendono in base al contenitore o all'area visibile e persino utilizzare le query sui media per modificare completamente la forma o rimuoverla, poiché è tutto definito in CSS. Di seguito è riportato un esempio di una forma poligonale utilizzata all'interno del sito con i valori che definiscono i punti:

.shape {
    shape-inside: polygon(0 50%, 50% 0, 100% 0, 100% 100%, 0 100%);
}
Immagine di forme CSS

Testo bilanciato

Testo bilanciato è una funzionalità che esamina l'intero blocco di testo all'interno di un elemento quando le righe vengono a capo, anziché a capo parola per parola. Evita situazioni in cui abbiamo una o due parole su una singola riga spezzando le righe di testo per ottenere righe di dimensioni uniformi all'interno di un elemento. Questo livello di controllo ci consente di creare facilmente blocchi di testo esteticamente gradevoli, in particolare per tirature brevi come citazioni o sottotitoli.

È esattamente in questo contesto che utilizziamo il testo bilanciato all'interno dell'articolo. Poiché questa funzionalità è uno standard proposto da Adobe, utilizziamo un polyfill creato da Randy Edmunds per ottenere gli stessi risultati. Questa funzionalità è più efficace nei casi di risposta. Quando regoli le dimensioni del browser, noterai che il blocco continua a bilanciare il testo in modo da ottenere righe con la stessa larghezza approssimativa. L'utilizzo del polyfill di testo bilanciato è semplice, perché si tratta di un plug-in jQuery. Tutto ciò che dobbiamo fare è applicare "balanceText()" a un selettore quando il layout cambia e otterremo un testo ben bilanciato, come questo:

$('.balance').balanceText();
Immagine del testo bilanciata

Filtra transizioni

Le transizioni sono un modo importante per attirare l'attenzione dell'utente e comunicare lo stato delle cose all'interno del tuo sito. L'opacità e, più di recente, le trasformazioni 3D vengono utilizzate per creare transizioni e animazioni eleganti quando gli utenti scorrono o interagiscono con parti del tuo sito. Ora abbiamo filtri che possono essere utilizzati per lo stesso scopo.

In "Forest Giant", utilizziamo filtri per passare dalla scala di grigi al colore quando alcune immagini vengono visualizzate. Questi filtri possono essere combinati con l'opacità o altri filtri per creare transizioni ed effetti di imaging complessi. Possiamo utilizzare la potenza dei filtri personalizzati per aggiungere effetti ancora più sorprendenti.

I filtri personalizzati vengono scritti utilizzando GLSL, lo stesso linguaggio di shading di WebGL. Ti consentono di applicare questi shader agli elementi DOM tramite CSS, attivando effetti di fusione complessi e distorsione 3D. Nella parte inferiore del sito, quando fai clic su "Esplora l'albero dei presidenti", la pagina si arrotola per rivelare un'altra sezione sotto. Questo è solo un esempio di come i filtri personalizzati possono consentire transizioni efficaci tra i contenuti. L'animazione può essere ottenuta utilizzando le transizioni CSS. Tuttavia, se vuoi utilizzare animazioni o interazioni più efficaci di quelle consentite dalle transizioni, puoi passare valori allo shader impostando lo stile con JavaScript, come mostrato di seguito. In questo modo puoi avere un controllo più granulare sull'attenuazione o persino consentire ai metodi di input utente di manipolare lo shader.

function applyCurl(value) {
    $("#map").css("webkitFilter",
    "custom(url(page-curl.vs) mix(url(page-curl.fs) normal source-atop),"
    + " 50 50, transform perspective(1000) scale(1.0) rotateX(0deg) "
    + " rotateY(0deg) rotateZ(0deg), curlPosition "
    + value + " 0, curlDirection 104, curlRadius 0.2, bleedThrough 1.0)");
}

Il nostro filtro esegue la rasterizzazione dei contenuti come texture sulla GPU per applicare l'effetto. Per questo motivo, dobbiamo assicurarci di rimuoverlo al termine, altrimenti i nostri contenuti potrebbero risultare sfocati.

$("#map").css("webkitFilter", "none");

I filtri CSS personalizzati consentono di ottenere effetti interessanti, come il wrapping della pagina che sembra la pagina di un libro reale. Consentono a uno sviluppatore web di programmare effetti complessi in un linguaggio chiamato GLSL e di applicarli ai contenuti web. Per ulteriori informazioni sui dettagli dei filtri personalizzati, su tutti questi parametri e su come utilizzarli, consulta questo fantastico tutorial.

Immagine di capovolgimento pagina

Pre-renderizzare le texture in WebGL

Il gioiello di questo articolo è stata la prima immagine completa di "The President", ritenuto il secondo albero più grande del mondo per volume. Questa immagine è stata creata mediante l'unione di centinaia di foto dell'albero per creare un'immagine completa. Volevamo simulare questo processo suddividendo l'immagine in una serie di piccole foto che si inseriscono al posto giusto per creare l'immagine completa. Questo è stato ottenuto utilizzando WebGL, in particolare con la libreria Three.js, che è un wrapper dell'API di livello superiore per WebGL.

Immagine di un albero gigante

Il rendering di un numero elevato di texture può causare rapidamente problemi di prestazioni ogni volta che una nuova texture tenta di essere disegnata sullo schermo, per non parlare delle richieste di rete aggiuntive. Per ridurre questo problema, abbiamo creato texture il più grandi possibile e le abbiamo compensate per ogni riquadro. Questa tecnica è spesso indicata come mappatura sprite ed è comune nello sviluppo di giochi. Il risultato è stato tre texture di grandi dimensioni per l'intero albero. Per eliminare il calo del rendimento ogni volta che una delle texture diventa visibile per la prima volta sullo schermo, rendiamo quadrati di 1 pixel con ciascuna delle texture prima dell'inizio dell'animazione, spostando il calo del rendimento all'inizio. In questo modo possiamo volare e animare l'intera altezza dell'albero senza problemi, anche su un tablet.

Per compensare le texture, stiamo modificando le UV che mappano la texture alla geometria. In Three.js ha il seguente aspetto:

geometry.faceVertexUvs[0][0] = [
    new THREE.Vector2(xOffset, yOffset + 1),
    new THREE.Vector2(xOffset, yOffset),
    new THREE.Vector2(xOffset + 1, yOffset),
    new THREE.Vector2(xOffset + 1, yOffset + 1)
];

Qui puoi vedere che stiamo utilizzando una variabile per l'offset x e y della trama. Lo stesso effetto può essere ottenuto con un materiale shader GLSL personalizzato che compensa le coordinate disegnate sulla geometria.

Funzionalità sperimentali

Poiché alcune delle funzionalità utilizzate dalla demo sono ancora sperimentali, l'articolo deve essere visualizzato in Chrome Canary e devono essere attivati tutti i flag menzionati per Chrome Canary su questo sito web.

Dopo aver installato e configurato correttamente Chrome Canary, dai un'occhiata alla demo. Tieni presente che l'intero progetto è open source e disponibile su GitHub.

Conclusione

Stiamo anche valutando come queste funzionalità potrebbero essere utilizzate nel contesto delle applicazioni mobile, più nello stile di un e-book. Puoi vedere questo prototipo in fase di sviluppo e come utilizziamo i diversi paradigmi di interazione e tocco per mostrare queste funzionalità su un tablet.

Con il layout dei browser web in continua evoluzione, notiamo il desiderio di mantenere il valore di produzione e la qualità del layout a cui eravamo abituati in passato con i contenuti di lettura precedenti. Con funzionalità come regioni CSS, esclusioni, testo bilanciato, filtri personalizzati e WebGL, i creator di contenuti non dovranno più scegliere tra copertura e qualità del design. "Forest Giant" è un chiaro segnale che il web del futuro consentirà entrambe le cose.