Li vedi ovunque. Figure animate che lampeggiano, rimbalzano o ruotano sullo schermo. I web designer non si sono imbattuti in questi trucchi. Hanno creato un toolkit per far apparire i contenuti senza danneggiare il browser. I principali attori? GIF animate, HTML dinamico, Java, Shockwave e Flash. Ognuno ha punti di forza. Ognuno ha dei difetti. Analizzeremo come funzionano. Vedremo anche cosa verrà dopo.
La guerra della larghezza di banda
La storia di Internet è breve. La sua evoluzione è veloce. Due forze si spingono l’una contro l’altra. Gli autori vogliono contenuti elaborati. I lettori hanno bisogno di caricamenti veloci.
All’inizio “veloce” significava modem telefonici. Le dimensioni dei file dovevano essere minuscole. La grafica complessa era un lusso che pochi potevano permettersi. Questa contraddizione ha costretto l’innovazione. Gli sviluppatori dovevano essere intelligenti. Avevano bisogno di trucchi per fornire contenuti multimediali su canali stretti.
Considera un’animazione Flash tratta da un articolo sulle radiazioni nucleari. È una figura complicata. Ma occupa meno di 7.000 byte. Questa è efficienza. Ecco come ciascuna tecnologia affronta questa sfida.
GIF animate
Gli albori della grafica e dell’animazione per il web
Il web non sarebbe quello che è senza il connubio tra testo e immagini. Tale integrazione si basava in gran parte sui file bitmap, un formato che mappa il colore di ogni singolo pixel in un’immagine. È un concetto semplice. Il problema? Questi file possono aumentare rapidamente di dimensioni. Per mantenere il caricamento delle pagine senza costringere gli utenti a fissare schermate vuote, gli sviluppatori si sono rivolti alle tecniche di compressione. Questo è il motivo per cui vedi JPEG e GIF dominare il panorama web iniziale.
Ma le immagini statiche raccontavano solo metà della storia.
Se l’animazione è semplicemente una rapida sequenza di immagini fisse, il passo logico successivo è stato quello di mettere insieme i file bitmap. Il browser li scorrerebbe attraverso. Ciò ha creato un’animazione GIF, nota anche come GIF89. È stata la prima vera esplosione di movimento sul web. Ha preso piede rapidamente. Rimane popolare oggi, nel bene e nel male.
Perché le GIF hanno vinto (e perché sono limitate)
L’appello era innegabile. Animazione GIF è stata incredibilmente semplice da realizzare. La maggior parte dei browser lo ha riconosciuto immediatamente. Non avevi bisogno di plugin complessi o software proprietario. Se eri su Windows, potresti aver utilizzato GIF Construction Set. Gli utenti Mac gravitavano verso GifBuilder. Il flusso di lavoro era lineare.
- Raccogli i tuoi singoli fotogrammi bitmap.
- Impilarli nel software.
- Carica il file finale.
Questo è tutto. Codifichi il tag esattamente come faresti per un’immagine statica.
Tuttavia, questa semplicità ha un limite rigido. Lo svantaggio principale è la dimensione del file. Poiché ogni fotogramma è un’immagine bitmap completa, l’aggiunta di più fotogrammi aumenta il peso. Puoi farla franca con quattro semplici frame. Trasmettono facilmente. Ma hai raggiunto i venti fotogrammi? La dimensione del file diventa spesso ingestibile per le connessioni Internet medie dell’epoca.
E c’è anche un problema di contenuti. Venti fotogrammi non sono sufficienti per un movimento fluido. I film si basano su almeno 24 immagini al secondo. Le GIF animate ti costringono a fare enormi salti tra gli stati. Il risultato è discontinuo. Ampolloso. Manca la fluidità del vero video. Puoi vedere questa limitazione in quasi tutte le prime animazioni web. È funzionale. È accattivante. Ma è tutt’altro che cinematografico.
Le GIF vanno bene per semplici loop o rapide decorazioni visive. Non sono, tuttavia, in grado di trasmettere narrazioni complesse. Quel che è peggio, tacciono. I web designer si scontrano rapidamente con un muro. Gli utenti volevano movimento. Volevano il suono. Impossibile consegnare le GIF.
Il problema principale con l’animazione GIF è l’ingrossamento dei file. Ogni fotogramma di un “filmato” aggiunge un peso significativo al download. È inefficiente. È lento.
HTML dinamico
La soluzione? Smetti di inviare frame. Invia semplicemente un’immagine. Quindi dì al computer di spostarlo.
Pensa al cursore del tuo mouse. Non scarichi una nuova immagine per ogni millimetro percorso dal puntatore. Il browser gestisce tale movimento localmente. L’HTML dinamico (dHTML) tenta di replicare questa efficienza sul web.
Le pagine web originali erano statiche. Il linguaggio di markup dell’ipertesto (HTML) definisce la struttura, non il comportamento. Una volta caricata, la pagina rimase lì. Morto. Ancora.
I designer lo odiavano. Volevano contenuti dinamici. Contenuti spostati dopo il caricamento della pagina. Inserisci dHTML.
Non è una tecnologia unica. È una combinazione di linguaggi di scripting come JavaScript che accedono al modello oggetto documento (DOM). Il DOM è la mappa interna della pagina del browser. Controlla ogni elemento.
La maggior parte dei browser moderni espongono il DOM agli script. Uno script può catturare un elemento. Cambia il suo colore. Spostare la sua posizione.
DHTML non è stato creato pensando all’animazione. È stato creato per manipolare gli elementi della pagina. L’animazione è un felice sottoprodotto.
Uno script può istruire un browser ad aggiornare costantemente le coordinate di un’immagine. L’immagine scorre sullo schermo. Fallo con più immagini e avrai un film grezzo.
Funziona nella maggior parte dei browser senza download aggiuntivi. Ma è pignolo. Il codice che funziona in Netscape potrebbe non funzionare in Internet Explorer. Creare manualmente un’animazione dHTML è doloroso. Hai bisogno di strumenti. Dreamweaver di Macromedia (e app simili) generano il codice script corretto per te.
Anche con gli strumenti, dHTML è limitato. Muove le immagini fisse. È più fluido di una GIF, ma meno efficace per scene complesse. Rappresenta il limite massimo di ciò che un browser può fare in modo nativo.
Per andare oltre, gli sviluppatori avevano bisogno di qualcosa di più pesante. Qualcosa di esterno.
Applet Java
Inserisci Java.
Java è un linguaggio universale, orientato alla rete. Consente ai programmatori di creare applicazioni scaricabili. Ma questi non sono programmi autonomi. Sono applet.
Le applet vengono eseguite all’interno del browser. Richiedono una macchina virtuale (VM). La VM funge da traduttore. Prende il codice Java e lo converte in istruzioni comprensibili al tuo sistema operativo specifico (Windows, MacOS, Unix).
La VM è essenzialmente un plug-in. Se non ce l’hai, l’animazione fallisce.
Le applet Java offrono flessibilità. Non sei bloccato con i fotogrammi bitmap. Puoi disegnare forme vettoriali al volo. Ciò mantiene le dimensioni dei file gestibili. Permette l’interattività. Un utente può fare clic, trascinare o passare il mouse e l’animazione risponde in tempo reale.
È potente. È multipiattaforma. È anche una dipendenza. Se nel browser dell’utente non è presente la Java VM, non viene visualizzato nulla.
Per i web designer tra la fine degli anni ’90 e l’inizio degli anni 2000, questa era la frontiera. Hai barattato la facilità d’uso con la capacità. Le GIF erano facili ma stupide. dHTML era nativo ma limitato. Java era complesso ma capace.
La scelta dipendeva dal tuo pubblico. Avevano i plugin installati? Si preoccupavano dei tempi di caricamento? O volevano semplicemente che il sito avesse un aspetto impressionante?
Il compromesso tra prestazioni e ricchezza ha definito il web per anni. Stiamo ancora sistemando il saldo oggi.
I primi anni Novanta cambiarono tutto. All’improvviso tutti creavano siti web. Non erano più solo fanatici della tecnologia. Volevano inserire contenuti multimediali nelle loro pagine. Suono. Video. Grafica fantasiosa.
I browser non sono in grado di gestire tutto immediatamente. Quindi gli sviluppatori sono diventati creativi. Hanno creato plug-in per il browser.
Pensa a un plug-in come a un’app di supporto. Funziona insieme al tuo browser per leggere tipi di file specifici. Questi programmi sono piccoli. Li scarichi velocemente. Fanno cose che i browser di base semplicemente non possono fare.
Come funziona realmente lo streaming video
I primi video web facevano molto affidamento su questo modello plug-in. Non stavi solo guardando un file. Stavi interagendo con un giocatore specializzato.
I progettisti hanno utilizzato script DHTML per verificare la configurazione. Avevi il plugin giusto? In caso contrario, il tuo browser ha generato un messaggio. Ti ha detto esattamente dove scaricarlo.
Questo processo è stato noioso. Ci è voluto tempo. È stato un importante punto di attrito per gli utenti.
Ma se avessi il plugin? La magia è avvenuta. Il browser ha avviato la riproduzione del film prima che il download del file terminasse.
Come? Compressione e streaming.
La Compressione semplifica i dati dell’immagine. Riduce le dimensioni dei file. Lo Streaming inizia la riproduzione durante il processo di download. Lettori come QuickTime e Media Player lo hanno utilizzato. Hanno mostrato una sequenza di immagini fisse. Proprio come una GIF animata, ma più veloce. E con il suono.
Il problema? Le connessioni lente hanno rovinato l’esperienza. Il caricamento dei file impiegava un’eternità. Oppure la qualità sembrava pessima.
Il dominio dell’animazione vettoriale
Quando si parla di animazione web, due nomi la fanno da padrone. Flash e Onda d’Urto. Entrambi provenivano da Macromedia.
Questi erano visualizzatori di animazioni 2D basati su vettori.
A differenza delle immagini raster, i vettori utilizzano equazioni matematiche. Ciò li ha resi scalabili. Sono rimasti croccanti a qualsiasi dimensione. Si caricavano incredibilmente velocemente tramite connessioni remote.
Questa tecnologia ha alimentato la maggior parte del web interattivo. L’animazione boomerang del nostro articolo precedente? Quello era Flash. Non era solo un file video. Era un codice. Era leggero. Era ovunque.
Macromedia ha costruito un impero su due formati che erano essenzialmente fratelli: Flash e Shockwave. Uno è diventato lo standard per l’animazione web; l’altro ha gestito il lavoro pesante per contenuti più complessi e interattivi. A differenza dei goffi file RealPlayer o QuickTime che apparivano in finestre separate, questi formati vivevano all’interno della pagina. Erano interattivi. Non hai semplicemente guardato; hai cliccato. Il lettore Shockwave non ha riprodotto solo un film. Leggeva l’input dell’utente e diceva al browser come rispondere.
L’anatomia della velocità
Perché questi file sono stati caricati così velocemente? Non era magia. Era matematica.
La maggior parte delle animazioni GIF sono basate su bitmap. Ogni pixel viene salvato individualmente. Se hai un cielo blu, ci sono migliaia di singole voci di pixel. I file Flash e Shockwave sono in gran parte basati su vettori. Invece di memorizzare i valori dei pixel, il software memorizza le istruzioni. Una linea retta non è una serie di punti. È una descrizione: angolo, coordinata, lunghezza.
La descrizione delle immagini in questo modo consente al programma di salvare ampie sezioni di un’immagine (sezioni che potrebbero consistere di centinaia di pixel in un file bitmap) come una coppia di figure.
Questo approccio riduce le dimensioni del file. Anche quando venivano utilizzate immagini bitmap, i webmaster potevano condensarle. Si spostavano sullo schermo tramite percorsi, simili all’animazione dHTML, mantenendo basso il peso totale dei dati. La maggior parte dei file Flash, tuttavia, erano puramente vettoriali. Ciò li ha resi eccezionalmente veloci da caricare.
C’è un altro asso nella manica: i fotogrammi tween.
Gli animatori non hanno bisogno di disegnare ogni singolo fotogramma. Il software calcola le modifiche geometriche tra i fotogrammi chiave. Si riempie nel mezzo. Ciò utilizza molto meno spazio rispetto alla memorizzazione di ogni fotogramma come immagine bitmap univoca. I calcoli fanno il lavoro pesante.
Streaming: inizia prima di finire
La vera innovazione non era solo il modo in cui erano strutturati i file. Era così che viaggiavano su Internet. I file Flash e Shockwave vengono trasmessi in streaming.
Non aspetti l’avvio dell’intero download. Il browser inizia a riprodurre il “film” mentre il resto è ancora in arrivo. Immaginatelo come una pagina web: il server invia prima il testo, poi le immagini. Un sito Flash può inviare un filmato introduttivo mentre la maggior parte del contenuto viene caricata in background.
I webmaster possono codificare il file per avviare la riproduzione una volta scaricata una percentuale specifica del file. La trasmissione è temporizzata in modo che ogni segmento arrivi prima che il giocatore ne abbia bisogno. È lo stesso meccanismo dietro lo streaming video.
Il monopolio di convenienza
Flash non ha vinto solo perché era bello. Ha vinto perché Macromedia lo ha reso onnipresente.
I plug-in venivano forniti in bundle con i principali browser e sistemi operativi. Se non lo avevi, l’installazione è avvenuta in background. Non era necessario chiudere il browser. Non dovevi affrontare un lungo processo. L’authorware per la creazione di questi file era costoso. Ma il giocatore? Gratuito.
Gli aggiornamenti sono stati indolori. Macromedia ha progettato i lettori per adattarsi alle modifiche future. Gli utenti non dovevano fare altro che scaricare un piccolo file. Se un sito rilevava che possedevi una versione precedente, il tuo browser ti avvisava e ti indirizzava alla pagina di download. I file erano sufficientemente piccoli da rendere il processo di aggiornamento quasi istantaneo.
L’effetto rete
Ogni formato di animazione ha dei punti di forza. Ogni formato ha dei punti deboli.
Tuttavia, molti webmaster hanno scelto Flash anche quando un altro formato sarebbe stato tecnicamente superiore. Perché? Perché sapevano che la maggior parte degli utenti aveva già questa capacità. E se non lo facessero, sarebbe stato banale ottenerlo.
L’universalità di Flash e Shockwave ha creato un ciclo di feedback. Altri webmaster hanno incluso il contenuto. Più utenti lo hanno riscontrato. L’accettazione è cresciuta. Non si trattava più solo di tecnologia. Si trattava del percorso di minor resistenza.
Provengono dalla stessa casa. Macromedia ha realizzato entrambi. Coprono un terreno simile. Tuttavia, il divario tra Flash e Shockwave non è solo legato al branding. È architettura. È storia. Devi conoscere la differenza se ti interessa come vengono caricati i tuoi contenuti o cosa puoi effettivamente creare con essi.
La causa principale? Storie di origine.
Director, il motore dietro Shockwave, è antecedente al web moderno. È stato creato per i CD-ROM. Roba pesante. Alta fedeltà. Con l’evoluzione del web, il Direttore si è aggiornato. Ha imparato a respirare online. Ma Flash? Flash è nato per il browser. Si è evoluto da Future Splash Animator. Macromedia lo ha ottimizzato per le linee telefoniche. Allora il dial-up era il re. La velocità era tutto.
Questa storia crea una doppia personalità nella tecnologia.
Velocità prioritaria del flash. L’onda d’urto ha dato priorità alla potenza.
Quale formato vince in velocità e compatibilità?
Se ti stai chiedendo quale formato ha una migliore compatibilità web, Flash detiene la corona con una valanga di voti.
Pensa ai plug-in. Flash? Installato su oltre il 90% degli utenti web. Onda d’urto? Poco meno del 60%. Si tratta di un’enorme fetta del tuo pubblico lasciata all’oscuro a meno che non installino il lettore Shockwave.
I tempi di caricamento seguono la stessa logica.
I file Flash sono snelli. Si caricano velocemente. I file Shockwave sono più pesanti. Richiedono più tempo per arrivare. Agli albori del web, era comune attendere dieci secondi per il caricamento di una clip. Oggi è inaccettabile. Flash lo capì istintivamente.
Ma la velocità non è tutto.
Dove Shockwave batte Flash
Non cancellare ancora Shockwave. È il sollevatore più pesante.
È più versatile. Vuoi giochi complessi? Onda d’urto. Hai bisogno di una profonda interattività? Onda d’urto. Animazione elaborata che non si preoccupa del tempo di caricamento? Onda d’urto.
C’è anche un problema di gerarchia. Puoi importare un file Flash in un filmato Shockwave. Funziona bene. Provare il contrario? Non è così. Shockwave è il formato genitore qui in termini di capacità.
Poi c’è il costo.
Il software per la creazione di flash costa circa $ 400. Il regista, per Shockwave, costa quasi $ 1.000. Per una startup o un piccolo studio, questa è una barriera significativa. Flash era accessibile. Il regista era per i professionisti.
Il segreto di Pulcinella: accessibilità del codice sorgente
Ecco un dettaglio che la maggior parte dei tutorial salta.
Flash è un formato open source. Puoi vedere come funziona. Puoi adattarlo. Puoi armeggiare con il coraggio. Shockwave utilizza un formato file compilato. È bloccato. Modificarlo è estremamente difficile. Se hai bisogno di decodificare o personalizzare profondamente, Flash ti dà le chiavi. Shockwave li tiene in una cassaforte.
Come realizzare filmati in entrambi gli ambienti
Entrambi gli strumenti sono progettati per essere sorprendentemente facili. Automatizzano il sollevamento pesante. Non è necessaria una laurea in informatica per realizzare un globo in movimento.
Il flusso di lavoro è simile, anche se i nomi sono diversi. Stai facendo tre cose:
- Crea e modifica immagini. Le materie prime.
- Disporre le immagini in fotogrammi. La sequenza.
- Ordina i fotogrammi in un filmato. Il prodotto finale.
Ma le interfacce? Lingue totalmente diverse.
In Flash, le risorse vengono archiviate nella libreria. In Shockwave, entrano nel cast. Stesso lavoro. Etichetta diversa.
Metti queste risorse sul palco. Questo è ciò che effettivamente vede l’utente. L’output finale.
Per controllare il movimento, utilizzi i fotogrammi chiave. Imposta il punto di partenza. Il punto finale lo imposti tu. Dici al software di riempire gli spazi vuoti. Flash chiama l’area di arrangiamento linea temporale. Shockwave lo chiama il punteggio.
“Se vuoi che un globo rotoli da un lato all’altro dello schermo, non devi animare ogni fotogramma. Devi semplicemente dire a Flash dove inizia e dove finisce il globo.”
Questa è la magia. Il software interpola il movimento. Gestisce i calcoli. Fornisci solo l’intento.
Si fonderanno mai?
Si stanno avvicinando.
Ogni aggiornamento aggiunge funzionalità web a Shockwave. Ogni aggiornamento aggiunge versatilità a Flash. I divari si stanno riducendo.
Alla fine, probabilmente si fonderanno in un unico formato completo. Ci vorrebbe il meglio di entrambi i mondi. Velocità e potenza. Accessibilità e complessità.
Fino ad allora, scegli in base ai tuoi vincoli.
Do you have a dial-up connection? Flash.
Do you have a $400 budget? Flash.
Do you need to hide your source code? Onda d’urto.
Do you need to build a AAA-level web game? Probabilmente Onda d’Urto.
Non è solo una questione di preferenze. Riguarda il mezzo. And the medium is still evolving.
Un filmato Flash dal nostro articolo sulle celle a combustibile.
A Flash animation from our engine article.
### The Shift to Interactive 3-D Web Graphics
L’animazione web bidimensionale è sempre stata un’esperienza diretta. Il designer decide esattamente cosa vedi, fotogramma per fotogramma. Rispecchia i cartoni animati televisivi tradizionali in cui il pubblico è passivo. La grafica web tridimensionale cambia completamente questa dinamica. Ottieni il controllo. È possibile ruotare un modello. You can trigger specific functions. In alcuni casi, puoi persino alterarne le dimensioni fisiche. Questo livello di interazione trasforma il contenuto da qualcosa che guardi in qualcosa che esplori.
Browser Plugins and Industry Standards
Come i precedenti strumenti 2D come Flash e Shockwave, la visualizzazione di grafica Web 3D richiede un plug-in del browser. Diverse aziende sono già entrate in questo spazio. Viewpoint ha riscontrato un certo successo. NxView offre un plug-in direttamente dal loro sito web.
The industry is also seeing major consolidation. A luglio, Macromedia e Intel hanno annunciato uno sviluppo congiunto di funzionalità 3D per Shockwave. Questa partnership sfrutta le risorse hardware di Intel e la consolidata infrastruttura di lettori multimediali di Macromedia. L’obiettivo è chiaro: rendere il formato Shockwave 3-D lo standard de facto per la grafica web. Gli utenti non avranno bisogno di nuovo software. Scaricheranno semplicemente un aggiornamento sui loro lettori Shockwave esistenti.
Ridimensionamento adattivo e gestione dei poligoni
Le prestazioni sono l’ostacolo più grande per il 3-D sul web. La tecnologia Shockwave risolve questo problema attraverso il scaling. Si adatta alla velocità di connessione dell’utente in tempo reale. Se hai una connessione più lenta, il lettore scarica un modello con meno poligoni. I poligoni sono le forme geometriche che si combinano per formare un modello 3D.
Questo non è solo un compromesso; è una caratteristica. You lose some fine detail. Non perdi la nitidezza dell’immagine. Il movimento rimane fluido. Ciò garantisce che gli utenti con connessioni remote o a banda larga non siano esclusi dall’esperienza.
E-commerce e prove virtuali
Questa tecnologia apre nuove possibilità per lo shopping online. Attualmente, gli acquirenti si affidano a immagini statiche. Indovinano la vestibilità e la consistenza. La grafica 3D consente loro di esaminare un prodotto da ogni angolazione. Imita l’esperienza in negozio.
Alcuni siti stanno spingendo oltre con i “camerini virtuali”. Gli utenti possono creare un modello 3D della propria forma corporea. Possono quindi vedere come i diversi vestiti si adattano a quello specifico avatar. Ciò riduce l’incertezza negli acquisti online.
Applicazioni didattiche e immersioni più profonde
Le piattaforme educative traggono notevoli benefici da questo cambiamento. Siti come How Stuff Works hanno già pubblicato articoli utilizzando la grafica 3D generata da NxView. Il piano è quello di sviluppare più contenuti.
Questi grafici forniscono chiarezza. Gli utenti possono guardare un motore da qualsiasi angolazione. Sembra che davanti a loro sia seduto un vero motore. Questa comprensione spaziale aiuta la ritenzione e la comprensione.
Il futuro dell’interazione web
Questa tecnologia probabilmente rivoluzionerà l’aspetto di Internet. Segue la stessa traiettoria delle immagini fisse e delle animazioni Flash. Internet continuerà ad evolversi a un ritmo vertiginoso.
Le connessioni a banda larga stanno diventando sempre più comuni. Questo guida la prossima ondata di idee di animazione. Un concetto è quello di rendere il web meno simile a un libro e più simile a un videogioco. Gli utenti accederebbero alle informazioni in un mondo 3D interattivo. Un’altra idea è renderla più simile alla televisione. Animazioni e video di alta qualità dominerebbero.
In definitiva, questo dipende da ciò che i web designer scelgono di costruire. Dipende anche da cosa richiedono gli utenti. Internet non è statico. Si sta muovendo verso qualcosa di più coinvolgente. Il prossimo passo è capire esattamente come funzionano questi motori sotto il cofano.
