Utilizzare gli strumenti dal layout CSS e dal 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 le regioni CSS, le forme CSS e i filtri personalizzati CSS promettono un panorama creativo molto esteso. Adobe ha una lunga esperienza di collaborazione con creator di contenuti appassionati di layout e design, quindi si è impegnata attivamente nell'applicazione di queste conoscenze al web con il suo contributo a molti standard web in continua evoluzione.
Con l'aiuto di National Geographic, abbiamo utilizzato i contenuti della funzionalità, intitolata "Forest Giant", per creare un prototipo che mostra come queste caratteristiche possano consentire un layout web avanzato e tecniche reattive. Questo articolo mostra come abbiamo creato alcune caratteristiche particolarmente interessanti del sito. Per una panoramica sintetica, ti consigliamo di guardare questo video qui sotto in cui Christian Cantrell illustra le varie funzionalità del sito.
Sottili del layout
Ciò che costituisce un ottimo layout e le caratteristiche alla base possono essere discreto, quindi abbiamo creato un "overlay dell'editor" che mette in evidenza le funzionalità più degne di nota. Per attivare i segni dell'editor, fai clic sulla barra alla fine dell'articolo.
Indipendente dal layout
Oggi sul web il layout è spesso dettato dai nostri contenuti, con contenitori che si ingrandiscono verticalmente per adattarsi al testo. Durante la creazione di layout complessi, le modifiche al testo o ad altri contenuti possono avere un impatto indesiderato sul layout generale, rendendo necessario riprogettare i contenuti in base a modifiche impreviste. Con le regioni possiamo davvero separare i nostri contenuti dal layout definendo un elemento come contenuto e quindi specificando le parti del layout in cui devono essere trasmessi i contenuti.
Nell'esempio di "Forest Giant" abbiamo la storia racchiusa in un unico elemento. In tutta la pagina abbiamo il nostro layout scaffolding, composto da foto e aree di testo. Con CSS definiamo gli elementi attraverso i quali vogliamo che siano trasmessi i contenuti. Quando la copia raggiunge la fine di un elemento, continua a quella successiva nell'ordine DOM. Questo ci permette di essere davvero creativi con le nostre colonne, distribuendole e adattando la loro altezza in base al design, senza preoccuparci di se il testo si adatterà o supererà l'altezza dell'elemento. Inoltre, ci permette di inserire elementi all'interno del nostro layout, come immagini a larghezza intera, mentre la storia continua a fluire.
#storyContent {
flow-into: story;
}
.story {
flow-from: story;
}
Nel CSS qui sopra, stiamo creando un flusso denominato "story". Il contenuto di questo flusso denominato è l'elemento con l'ID "storyContent". In questo modo, vengono attraversati tutti gli elementi con il nome della classe "story". Le regioni CSS sono un ottimo strumento per il design adattabile e consentono funzionalità come colonne a più colonne e colonne spostate per un layout avanzato su schermi di grandi dimensioni e con una regolazione del layout a colonna singola su schermi più piccoli. Con le regioni puoi anche impostare le dimensioni della regione con unità adattabili come vw o vh. Questa opzione può essere utilizzata per garantire che le colonne non superino l'altezza dell'area visibile nel layout, senza preoccuparti che i contenuti vengano tagliati, poiché confluiranno naturalmente nell'elemento successivo della catena di regioni.
Cuffie
Le esclusioni CSS ci consentono di disporre il testo intorno o all'interno di forme irregolari. Questo può essere utile per effetti di design, come i gocce d'acqua. Le maiuscole sono una pratica comune di progettazione, in cui la prima lettera di una storia o di un capitolo viene ingrandita, consentendo al resto del testo di avvolgersi intorno al contorno del personaggio. Questo effetto è molto simile al modo in cui i contenuti in linea vengono aggregati intorno a elementi mobili; tuttavia, con le esclusioni, non siamo più limitati ai riquadri rettangolari. Utilizzando la forma all'esterno di un oggetto float, possiamo definire la geometria che consente ai nostri contenuti di essere strettamente correlati alla forma del nostro personaggio.
.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 essere caduti intorno alla forma circolare. Inoltre, poiché stiamo utilizzando unità relative per la forma, la modifica delle dimensioni dell'elemento si rifletterà su quella della forma.
Forme
Insieme alle maiuscole, le esclusioni offrono la possibilità di mandare a capo il testo all'interno delle forme utilizzando l'interno delle forme. Utilizziamo questa funzione in tutto il sito, in particolare con didascalie di immagini di grandi dimensioni, e utilizziamo lo spazio negativo delle foto per inquadrare il testo. Ci consente anche di mandare a capo il testo lungo il contorno di altre immagini e di layout grafici che emulano precedenti operazioni molto difficili da realizzare sul web.
Le forme possono funzionare anche con i layout adattabili utilizzando unità relative per definire la forma. In questo modo possiamo creare forme che si estendono in base al contenitore o all'area visibile e persino utilizzare query supporti per cambiare completamente la forma o rimuoverla poiché è tutto definito in CSS. Di seguito è riportato un esempio di 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%);
}
Testo bilanciato
Testo bilanciato è una funzionalità che esamina l'intero blocco di testo all'interno di un elemento quando invii le righe, anziché parola per parola. Evita situazioni in cui abbiamo una o due parole su una singola riga spezzando righe di testo per ottenere linee di dimensioni uniformi all'interno di un elemento. Questo livello di controllo ci consente di creare facilmente blocchi di testo esteticamente piacevoli, in particolare per le brevi corse come virgolette in stile pull o sottotitoli.
È esattamente qui che usiamo il testo bilanciato all'interno dell'articolo. Poiché questa funzionalità è uno standard proposto da Adobe, stiamo usando un polyfill creato da Randy Edmunds per ottenere gli stessi risultati. Questa funzionalità viene visualizzata al meglio nelle richieste di risposta. Quando ridimensioni il browser, noterai che il blocco continua a bilanciare il testo in modo da generare righe con larghezza approssimativa. L'uso del polyfill di testo bilanciato è semplice, poiché è un plug-in jQuery, tutto quello che dobbiamo fare è applicare "balanceText()" a un selettore quando il layout cambia per ottenere un testo ben bilanciato, che appare come questo:
$('.balance').balanceText();
Filtra transizioni
Le transizioni sono uno strumento importante per attirare l'attenzione dell'utente e comunicare lo stato delle cose all'interno del sito. Abbiamo visto che l'opacità, e più recentemente le trasformazioni 3D, vengono utilizzate per creare transizioni e animazioni accattivanti man mano che gli utenti scorrono o interagiscono con parti del tuo sito. Ora abbiamo dei filtri che possono essere utilizzati per lo stesso scopo.
In "Forest Giant" utilizziamo i filtri per sfumare dalla scala di grigi a quella colorata, man mano che vengono visualizzate alcune immagini. Questi filtri possono essere combinati con l'opacità o altri filtri per creare complessi effetti di immagine e transizioni. Possiamo usare i filtri personalizzati per aggiungere effetti ancora più spettacolari.
I filtri personalizzati vengono scritti utilizzando GLSL, lo stesso linguaggio di ombreggiatura di WebGL. Ti consentono di applicare questi Shadr agli elementi DOM tramite CSS, creando effetti di fusione complessi e distorsioni 3D. In fondo al sito, quando fai clic su " Explore the President Tree", vedrai la pagina piegata verso l'alto per mostrare un'altra sezione sotto. Questo è solo un esempio di come i filtri personalizzati possano consentire transizioni avanzate tra i contenuti. L'animazione può essere ottenuta utilizzando le transizioni CSS. Tuttavia, se preferisci usare animazioni o interazioni più efficaci di quanto consentito dalle transizioni, puoi trasmettere i valori allo strumento di analisi impostando lo stile con JavaScript, come puoi vedere di seguito. Questo può consentirti di avere un controllo più granulare sull'easing o persino di metodi di input dell'utente per manipolare lo Shadr.
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 sta rasterizzando i contenuti come texture sulla GPU per applicare l'effetto. Per questo motivo, dobbiamo assicurarci di rimuoverlo al termine, altrimenti i nostri contenuti potrebbero apparire sfocati.
$("#map").css("webkitFilter", "none");
I filtri personalizzati CSS attivano effetti interessanti come il wrapping di pagine che assomiglia a una pagina capovolta in 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 i parametri e su come utilizzarli, consulta questo fantastico tutorial.
Pre-rendering delle texture in WebGL
Il gioiello di questo articolo è stata la prima immagine completa del "Presidente", ritenuto il secondo albero più grande del mondo in termini di volume. Questa immagine è stata creata unendo centinaia di foto dell'albero per creare un'immagine intera. Volevamo simulare questo processo suddividendo l'immagine in un gruppo di piccole foto che volano in posizione per creare il quadro completo. Per ottenere questo risultato, si utilizza WebGL, in particolare la libreria Three.js, un wrapper API di livello superiore attorno a WebGL.
Il rendering di un numero elevato di texture può causare rapidamente problemi di prestazioni ogni volta che una nuova texture viene disegnata sullo schermo, per non parlare di richieste di rete aggiuntive. Per ridurre questo problema, abbiamo reso le texture più grandi possibile e le abbiamo sfalsate per ogni riquadro. Questa tecnica è spesso definita come mapping sprite ed è comune nello sviluppo di giochi. In questo modo sono state create tre grandi texture per l'intero albero. Per eliminare il picco di prestazioni ogni volta che una delle texture diventa visibile per la prima volta sullo schermo, eseguiamo il rendering di quadrati di 1 px con ciascuna texture prima dell'inizio dell'animazione, spostando l'hit da prestazioni all'inizio. In questo modo possiamo sorvolare l'intera altezza dell'albero e animarla in modo fluido, anche su un tablet.
Per sfalsare le texture, stiamo modificando i raggi 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 texture. Lo stesso effetto può essere ottenuto con un materiale GLSL personalizzato per ottenere un offset delle 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 attivare tutti i flag menzionati per Chrome Canary in questo sito web.
Dopo aver installato Chrome Canary e configurato correttamente, guarda la demo. Tieni presente che l'intero progetto è open source e disponibile su GitHub.
Conclusione
Abbiamo anche studiato come potrebbero essere utilizzate queste funzionalità nel contesto delle app mobile, più che altro sulla scia di un ebook. Puoi vedere questo prototipo in corso e come stiamo utilizzando i diversi paradigmi di interazione e tocco per mostrare queste funzionalità su un tablet.
Con il layout del browser web in costante evoluzione, vediamo il desiderio di mantenere il valore di produzione e la qualità del layout a cui ci siamo abituati in passato con i contenuti di lettura legacy. Con funzionalità come le regioni CSS, le esclusioni, il testo bilanciato, i 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 permetterà entrambi.