4 modi per creare esperienze Web più complete
Il Web si è evoluto molto dall'essere un semplice repository di documenti, e ora disponiamo di browser capaci di ricche interazioni visive sia su desktop che su dispositivi mobili.
Poiché mi piacerebbe parlare di dove si trova il Web in questo articolo, molte delle funzionalità che tratteremo potrebbero avere un supporto limitato, quindi è importante utilizzare risorse come caniuse.com che ha un robusto elenco di caratteristiche e grafici che specificano dove sono supportati.
Facciamo un tuffo nei quattro modi in cui puoi migliorare la tua UX del sito:
1. CSS
Il CSS è il linguaggio di stile per i nostri documenti, tendiamo a pensarci in termini semplici come cambiare la dimensione del carattere o il colore, ma sta diventando sempre più potente con funzioni come trasformazioni e animazioni. Stiamo anche ottenendo nuove funzionalità per renderlo ancora più potente.
Se hai utilizzato maschere vettoriali in strumenti come Photoshop, dovresti avere familiarità con l'idea alla base Percorsi clip CSS. Questa funzione consente di definire una forma in CSS che definisce le parti trasparenti e opache del contenuto HTML. Funzionano alla grande con Transizioni CSS per nascondere e rivelare elementi dell'interfaccia utente. Allo stesso modo le Maschere CSS si stanno facendo strada verso il Web, che ti consente di definire le parti trasparenti dei tuoi contenuti usando un'immagine. Ciò consente di utilizzare la trasparenza in modo più efficace nei progetti per interesse visivo o texture.
2. SVG
La maggior parte delle immagini che troviamo sul Web oggi sono immagini raster, composte da pixel. Ciò significa che mentre li ridimensioniamo o li visualizziamo su dispositivi ad alta risoluzione vengono visualizzati in pixel.
La grafica vettoriale è eccezionale perché sono costituiti da primitive geometriche che mantengono i loro bordi nitidi a qualsiasi dimensione.
SVG è il formato vettoriale per il Web. Possiamo usarlo per visualizzare grafici e persino manipolare e animare le sue proprietà con i CSS. Dove SVG diventa davvero potente è quando lo combiniamo con lo scripting. schiocco è una libreria JavaScript che facilita la manipolazione e l'animazione del contenuto SVG. Si concentra sui browser moderni, quindi supporta le funzionalità SVG più recenti come gruppi e percorsi di clip. Snap è open source su GitHub e l'abbiamo persino usato per creare un ricco banner animato, puoi leggere di più inil mio blog.
Ed ecco un esempio di un annuncio che abbiamo fatto usando SVG.
3. Canvas 2D
2D Canvas è un'altra potente funzionalità del Web ottimizzata per il disegno di forme e immagini. Fornisce un'API JavaScript che ti dà un controllo granulare sul tuo elemento canvas. Ti dà anche la libertà di integrare altre forme di media, come i video, creando il potenziale per ricchi pulsanti interattivi che riproducono, mettono in pausa o scrub il video. 2D Canvas ora supporta i metodi di fusione, che ti permettono di mescolare i colori dei livelli in modi visivamente interessanti, di cui puoi leggere di più Qui.
Stiamo anche iniziando a ottenere il supporto per i video alpha che ci consente di integrare più facilmente i video nei nostri contenuti. È un divertente esempio di video alfa OK Go's video musicale 'WTF' .
OK Go è noto per i video musicali elaborati e in questo particolare video girato coreografia di fronte a uno schermo verde. Quindi, l'utilizzo della post-elaborazione ha continuato a rendere il filmato su se stesso creando un effetto di eco freddo dove era la trasparenza. Possiamo riprodurre questo effetto utilizzando la tela 2D, ma possiamo fare un ulteriore passo avanti e renderlo interattivo utilizzando funzioni come le modalità di fusione tela per creare nuovi effetti visivi in tempo reale.
4. WebGL
WebGL fornisce un'API di basso livello per il disegno di grafica 2D e 3D accelerata dall'hardware. Le potenzialità qui sono i giochi in stile console, come Grand Theft Auto 5 che gira proprio all'interno del tuo browser. Come puoi immaginare, WebGL diventa piuttosto complicato, fortunatamente librerie open source come Three.js fornire un ottimo punto di ingresso con ottimi esempi per iniziare.
GitHub è diventata una grande risorsa per la comunità open source. Puoi trovare Three.js e Snap su GitHub così come altre grandi librerie che rendono più facile fare incredibili lavori sul Web. Spesso inserisco anche esperimenti e strumenti su GitHub, come a strumento spline della fotocamera Ho usato per creare percorsi di telecamere per Three.js per volare attraverso mondi 3D.
Come possiamo vedere il Web sta diventando sempre più vario e potente, è un momento emozionante per essere uno sviluppatore web. La varietà di tecnologie e risorse a cui abbiamo accesso sono in costante crescita ed è divertente vedere le ricche esperienze che le persone stanno creando con loro.