Passare da Flash a HTML, CSS e JavaScript

Negli anni 2000 era normale vedere siti Web creati utilizzando Flash. Visualizzando l'origine di un sito Web, spesso vedresti pochissimo HTML e un file SWF incorporato. Questo significava alcune cose. Innanzitutto, il browser non supportava Flash in modo nativo, quindi è stato necessario scaricare il plug-in Flash. I browser hanno trovato difficile accedere all'SWF per leggere il contenuto. Tra le altre cose, ciò ha avuto un effetto negativo sulla SEO e sull'accessibilità.

Nel 2007 è stato rilasciato l'iPhone. Non supportava Flash. Nel 2015, Google ha spostato tutti i suoi video di YouTube in HTML5. Nel luglio 2017, Adobe ha annunciato ufficialmente che avrebbe smesso di funzionare su Flash entro il 2020. Le persone usavano Flash perché poteva fare cose che HTML, CSS e JavaScript non potevano fare in quel momento. È incredibile vedere fino a che punto sono arrivati ​​gli standard web (e cosa sta arrivando).

Oggi possiamo fare molto che prima era possibile solo con Flash. Non solo, ma possiamo farlo in un modo molto più accessibile e performante. Esaminerò alcune delle cose rivoluzionarie che Flash potrebbe fare e come possiamo realizzarle oggi.

Disclaimer : adoro Flash e avrà sempre un posto nel mio cuore, ma almeno per me il suo tempo è passato. Nel caso ve lo stiate chiedendo: ci sono ancora così tante interfacce e motori in esecuzione in Flash, specialmente per i giochi, e questo articolo affronta alcuni dei problemi che sono molto rilevanti.

video

Una delle grandi cose annunciate da Flash era il video, che offriva supporto di base già nel 2002. Solo nel 2009 il tag <video> è stato introdotto in Chrome, Safari e Firefox. Inoltre, Internet Explorer (IE) 8 non supportava il tag <video> e solo nel 2011, quando è stato rilasciato IE 9, ha ottenuto il supporto.

Flash utilizzerà il tag <object> , in questo modo:

 <object class codebase="https://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,16,0" width="320" height="400"> <param name="movie" value="filename.swf"> <param name="quality" value="high"> <param name="play" value="true"> <param name="LOOP" value="false"> <embed src="video-filename.swf" width="320" height="400" play="true" loop="false" quality="high" pluginspage="https://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed> </object>

Non è il più bello del codice, ma ha funzionato.

Ora possiamo semplicemente scrivere <video src="filename.mp4" /> , anche se è importante essere consapevoli dei diversi formati video nei browser, i più popolari sono MP4, Ogg e WebM. Facendo un ulteriore passo avanti, è possibile non solo supportare il tag <video> , ma anche offrire fallback e alternative utili:

 <video width="320" height="400"> <source src="filename.mp4" type="video/mp4" /> <source src="filename.webm" type="video/webm" /> <source src="filename.ogv" type="video/ogg" /> <!-- Flash fallback --> <object type="application/x-shockwave-flash" data="flash-player.swf?videoUrl=filename.mp4" width="320" height="400"> <param name="movie" value="flash-player.swf?videoUrl=filename.mp4" /> <param name="allowfullscreen" value="true" /> <param name="wmode" value="transparent" /> <param name="flashvars" value="controlbar=over&image=placeholder.jpg&file=flash-player.swf?videoUrl=filename.mp4" /> </object> <!-- Text Fallback --> <p>No video support found. Please download the video below, or upgrade your browser: https://browsehappy.com/</p> </video> <ul> <li><a href="linktomovie.mp4">MP4 format</a></li> <li><a href="linktomovie.ogv">Ogg format</a></li> <li><a href="linktomovie.webm">WebM format</a></li> </ul>

Sfondo video

Poiché YouTube utilizza il tag <video> e dispone di un'API, è possibile creare un video di sfondo a schermo intero. Prendi il seguente codice di collegamento video di YouTube, ad esempio:

 https://www.youtube.com/embed/iMhq63PX8cA?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&mute=1

Utilizzando i diversi parametri è possibile modificare il comportamento del video.

 controls=0 Hides the controls. showinfo=0 Hides extra information. rel=0 Hides related content. autoplay=1 Auto plays the video when the site is loaded. loop=1 Loops the video. mute=1 Mutes the sound.

Per un elenco completo, controlla l'API IFrame Player.

Usando i CSS, possiamo impostare il video in modo che sia fissato in posizione e che riempia lo schermo.

 .video { background: #000; position: fixed; width: 100%; height: 100%; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; pointer-events: none; }

E con l'uso delle query multimediali, possiamo impostare il video in modo che sia centrato e possiamo aiutare a mantenere le proporzioni corrette.

 @media (min-aspect-ratio: 16/9) { .video { height: 300%; top: -100%; } } @media (max-aspect-ratio: 16/9) { .video { width: 300%; left: -100%; } }

Ecco l'esempio messo insieme, con lo stesso Mr. Smashing Magazine che presenta un discorso:

Interazione e gioco

Un'altra cosa in cui Flash eccelleva era l'interazione e il gioco. Il popolare sito Web Miniclip è stato fondato nel 2001 e ha ospitato un'ampia gamma di giochi Flash. Nel 2008 è stato valutato oltre 900 milioni di sterline e va ancora oggi.

SOLO UN RIFLETTORE

JUST A REFLEKTOR è un video musicale interattivo che rivaleggia e addirittura supera le capacità di Flash. Con l'uso di varie tecnologie web, ora è possibile interagire con il video utilizzando un dispositivo mobile, così come a un certo punto utilizzando la tua webcam in modo che tu stesso sia effettivamente apparso nel video musicale!

Cubo Slam

Oggi ci sono alcuni fantastici esperimenti di Chrome basati sul Web online, come Cube Slam. Cube Slam è un gioco che utilizza WebRTC (una tecnologia web aperta), che ti consente di chattare in video e giocare all'interno del browser. Sebbene Flash fosse ampiamente utilizzato per le chat video, presentava una serie di inconvenienti rispetto a WebRTC: si basava sul plug-in Flash, richiedeva un server multimediale e aveva varie implicazioni sulla sicurezza e scarse prestazioni.

Motori di gioco HTML5

Esistono numerosi motori di gioco HTML5 e JavaScript. Questo prossimo esempio fa uso di canvas e WebGL . WebGL (Web Graphics Library) è un'API costruita in JavaScript che consente la grafica 2D e 3D interattiva all'interno del tag <canvas> .

Come menzionato nel post di Good Boy Digital riguardo al progetto (i creatori dell'esempio):

"Star Wars Arcade spinge davvero i confini di ciò che è possibile con le tecnologie HTML5 e WebGL. Ciò consente la creazione di un'unica build che funziona perfettamente sia su browser desktop che mobili senza dover scaricare un'app; il vantaggio di questo è offrire un'esperienza simile a un'app su tutti i dispositivi in ​​modo che chiunque possa godersela all'istante. Nessuna password, nessun App Store, basta premere l'URL e giocare!"

— Goodboy digital, Case Study di Star Wars Arcade

Mi piace particolarmente questo pezzo: "Premi l'URL e gioca!" Uno dei miei primi ricordi "Wow" del Web è stato avere il mio sito Web nel 1999 e poter digitare quell'URL in qualsiasi computer connesso al Web e visualizzarlo. Mi sembrava assolutamente incredibile che ciò fosse effettivamente possibile (e continua a stupirmi ancora oggi!).

Supporto del browser

Uno dei vantaggi della creazione di qualcosa, in particolare un gioco, a causa della complessità aggiuntiva, in Flash che è ancora rilevante oggi è il supporto del browser. Il supporto del browser è generalmente abbastanza buono al giorno d'oggi e Can I Use può aiutarci a scoprire rapidamente lo stato del supporto del browser per una specifica specifica. Tuttavia, ci sono ancora discrepanze che potrebbero causare problemi. Quindi, se sei d'accordo con il supporto solo dei browser installati con il plug-in Flash con cui stai lavorando, è probabile che non si verifichino problemi tra browser diversi.

Tipografia

Flash è stato originariamente progettato come strumento di animazione. In quanto tale, aveva vari limiti con la tipografia.

Flash aveva un sistema di pixel-grid. Se la tipografia fosse posizionata sulla griglia a X:100.3 :100.7 e, quindi, non allineata alla griglia dei pixel, sembrerebbe sfocata.

Di conseguenza, ho scoperto che i caratteri pixel erano utili perché si trovavano sulla griglia e rimanevano nitidi. Un'altra limitazione qui sarebbe se si utilizza un carattere da 8 pixel ma lo si imposta su 10 pixel, non sarebbe allineato con la griglia e, ancora una volta, sarebbe sfocato.

Per fortuna, oggi in HTML e CSS abbiamo una serie di strumenti per aiutarci. Possiamo impostare i caratteri come unità assoluta in px (pixel) o, cosa più comune di questi tempi, usare ems e rems per aiutare con il responsive web design (ne parlerò più avanti).

Un altro problema con Flash e la tipografia erano i caratteri. Se un carattere non fosse disponibile sul dispositivo, verrebbe fornito un carattere di riserva. Per aggirare questo problema in Flash, puoi incorporare il carattere nel file .swf . In questo modo, tuttavia, hai aggiunto la dimensione del file e, quindi, il tempo necessario per il download e la visualizzazione del file SWF.

Detto questo, ciò che era possibile con Flash era Scalable Inman Flash Replacement (sIFR). sIFR ha consentito la sostituzione del testo HTML con Flash. Prima di questo, per utilizzare i caratteri personalizzati, abbiamo utilizzato le immagini. Tuttavia, l'utilizzo delle immagini non consentiva il testo selezionabile e significava che dovevi creare immagini manualmente. Passando da sIFR, gli sviluppatori hanno inventato Cufon. Cufon ha evitato l'uso di Flash utilizzando una versione SVG e VML di un font. Era più veloce di sIFR e non richiedeva il plug-in Flash; ma, ancora, con questa tecnica non era possibile selezionare il testo.

Oggi abbiamo la regola CSS @font-face e una serie di font web standard disponibili:

• Google Font
• Typekit
• Carattere Scoiattolo

In Chrome e Firefox (e, si spera presto, Safari), abbiamo font-display in CSS. Se stai utilizzando un carattere personalizzato, per impostazione predefinita il browser attenderà di ottenere il carattere personalizzato. Se non riesce a ottenere il carattere personalizzato, utilizzerà un carattere di backup (la velocità varia a seconda dei browser, ma di solito è di 3 secondi). Questo è noto come un lampo di testo invisibile (o FOIT). Per migliorare questo scenario, possiamo utilizzare quanto segue:

 @font-face { font-display: swap; }

Usando swap , vedremo immediatamente il testo usando il font di backup. Quando il carattere personalizzato viene caricato, il browser scambierà il backup con esso. In questo modo, l'utente può leggere il contenuto non appena è disponibile.

Animazione

Una delle cose che Flash ha fatto molto bene è stata l'interpolazione. L'interpolazione viene utilizzata per animare gli elementi. In Flash, puoi creare un elemento in un fotogramma chiave, duplicare quel fotogramma chiave lungo la sequenza temporale e quindi aggiungere un'interpolazione.

Con HTML e CSS, possiamo applicare la stessa animazione usando @keyframes , transform e animation .

 <div class="box"></div>

 .box { width: 100px; height: 100px; background-color: #333; } @keyframes move { from { transform: translateX(0); } to { transform: translateX(200px); } } div { animation-duration: 3s; animation-name: move; animation-iteration-count: infinite; animation-direction: alternate; } 

Con Chrome Developer Tools, possiamo ispezionare e regolare l'animazione andando su Chrome Dev Tools → Cmd + Shift + P → Animation .

È anche possibile eseguire il debug di potenziali problemi di prestazioni che possono sorgere quando si ha a che fare con l'animazione. Negli Strumenti per sviluppatori di Chrome è presente una scheda "Prestazioni". Facendo clic su questo, quindi sull'icona del cerchio "Registra", possiamo vedere una serie di informazioni utili. Questa tecnica mi ha aiutato molto quando ho creato il rapporto annuale 2012-13 di Mind, in particolare la sezione del sito Web che ha una mappa con cerchi animati che mostrano le posizioni dei negozi Mind. Inizialmente, la sezione della mappa è stata caricata all'inizio, il che ha causato problemi di riverniciatura. Utilizzando la scheda "Prestazioni", sono stato in grado di identificarlo e aggiornarlo, quindi la mappa ha iniziato ad animarsi solo quando era in vista.

Grafica vettoriale

Il Web ha beneficiato e beneficia ancora enormemente di un'attenta considerazione delle dimensioni dei file. All'inizio degli anni 2000, il Web veniva visualizzato principalmente su computer desktop, con modem dial-up lenti. Il caricamento di un'immagine semplice potrebbe richiedere secondi o addirittura minuti. Per aiutare in questo, Flash ha fatto un uso massiccio della grafica vettoriale. L'uso della grafica vettoriale, ove appropriato, al posto delle immagini JPEG o GIF, ha ridotto notevolmente le dimensioni del file e quindi si è caricato più rapidamente sul Web.

Negli ultimi anni, e in particolare grazie a Sara Soueidan, la grafica vettoriale scalabile (SVG) è diventata sempre più diffusa sul web. SVG è un markup basato su XML che ci consente di creare grafica vettoriale per il web. Funziona molto bene con l'animazione e ho avuto il piacere di creare alcuni siti web che ne fanno uso: il sito web Mind report (menzionato in precedenza) e How Clean Is England? che Sara ha menzionato su Twitter! Grazie Sara!

Web design reattivo

Una delle principali insidie ​​della creazione di un sito Web in Flash oggi è la mancanza di media query. Oggi, l'utilizzo di dispositivi mobili e tablet ha superato quello dei desktop. Per creare la migliore esperienza, dobbiamo creare un sito Web accessibile su tutti questi dispositivi. Su molti dispositivi, Flash semplicemente non si carica affatto e, anche se lo facesse, molto probabilmente violerebbe la larghezza del viewport o si ridimensionerebbe e sarebbe inutilizzabile.

Utilizzando le media query, possiamo creare un layout che risponda al contenuto. Ecco un esempio:

 <div class="someContent"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est excepturi enim id ratione blanditiis voluptate dolore necessitatibus culpa maxime eius assumenda eveniet dolores odit sunt repellat, rerum amet delectus vel.</p> </div>

 .someContent { color: green; } @media screen and (min-width: 400px) { .someContent { color: yellow; } } @media screen and (min-width: 600px) { .someContent { color: red; } } 

ActionScript e JavaScript

ActionScript viene utilizzato in Flash e, quindi, presenta la stessa trappola dei file SWF menzionata in precedenza, in quanto richiede il plug-in Flash. JavaScript, d'altra parte, è prontamente disponibile in tutti i browser moderni.

Diamo un'occhiata a un esempio di impostazione di una variabile in entrambi e le loro differenze:

 var x:Number = 42;

 var x = 42;

Con ActionScript dichiariamo che la variabile è un numero. Se alla variabile viene assegnato qualcos'altro, verrà visualizzato un errore. JavaScript è digitato liberamente, il che significa che potremmo assegnare la variabile come qualcos'altro, ad esempio una stringa:

 var x = '42';

In JavaScript, se volessimo verificare che sia un numero, potremmo usare typeof(x); , e questo genererebbe "numero". Un'altra opzione sarebbe quella di creare una function e utilizzare isNaN per rilevare se "non è un numero":

 function isNumber(value) { if (isNaN(value)) { return value + ' is not a number.'; } return value + ' is a number.'; } console.log(isNumber(42)); // "42 is a number." console.log(isNumber('forty two')); // "forty two is not a number."

Collaborazione

Con HTML, CSS e JavaScript (e molti altri linguaggi di codifica), Git e GitHub rendono la collaborazione estremamente semplice. Ad esempio, se volessi modificare l'HTML del "Modello dell'autore" di Smashing Magazine, tramite GitHub, potrei fare clic sul pulsante "Fork". Ciò creerebbe una versione dei file (nota anche come repository) con il mio nome. Potrei quindi apportare tutte le modifiche che mi piacciono e inviare una richiesta pull. Ciò darebbe al proprietario di Smashing Magazine la possibilità di rivedere la mia richiesta pull e accettarla o rifiutarla. Una volta accettato, il codice andrebbe nel repository principale.

Ci sono una serie di ottimi motivi per lavorare in questo modo: hai sempre un backup del tuo lavoro; puoi tornare alle versioni precedenti del tuo lavoro e la collaborazione diventa molto semplice. Qualcuno potrebbe lavorare su una sezione del sito Web o su CSS o JavaScript e, quando ogni membro del team ha terminato, è possibile rivedere le modifiche e inserirle secondo necessità.

Se provassimo lo stesso con Flash, sarebbe molto più difficile dover salvare e inviare ogni volta un file .fla . Se più persone lavorassero sullo stesso .fla , le cose potrebbero diventare molto confuse. Con HTML, CSS e JavaScript e' possibile fare una “differenza” sul codice, che ci permette di confrontare e rivedere il codice. Possiamo anche selezionare determinati blocchi di codice, inserirli o commentarli per ulteriori revisioni e lavori.

Conclusione

Flash è stato uno dei motivi per cui ho iniziato a creare siti web. È stato un pioniere in molte aree e questo ha portato le persone a creare cose straordinarie con esso. Nel corso degli anni, ha spinto molto il web in avanti. L'annuncio ufficiale di Adobe di abbandonare il supporto di Flash, tuttavia, solleva preoccupazioni. Sarebbe un vero peccato se milioni di siti Web che utilizzano Flash andassero persi. C'è una petizione per l'open source Flash e Shockwave. Spero che non lo perdiamo per sempre. Abbiamo avuto dei momenti fantastici e strani. Vi lascio con questo classico esempio dello “strano” a cui mi riferisco:

Ecco il testo, se ti va di cantare insieme.