HTML5 include un elemento emozionante chiamato CANVAS. Ha molti usi, ma per usarlo, devi imparare un po' di JavaScript, HTML, e qualche volta CSS.
Questo rende l'elemento CANVAS un po' scoraggiante per molti designer e, in effetti, la maggior parte probabilmente lo ignorerà l'elemento finché non ci sono strumenti affidabili per creare animazioni e giochi CANVAS senza saperlo JavaScript.
Per cosa viene utilizzata la tela HTML5?
L'elemento HTML5 CANVAS può essere utilizzato per molte cose che in precedenza dovevi utilizzare un'applicazione incorporata come Flash per generare:
- Grafica dinamica
- Giochi online e offline
- Animazioni
- Video e audio interattivi
In effetti, il motivo principale per cui le persone usano l'elemento CANVAS è la facilità con cui è possibile trasformare una semplice pagina web in un'applicazione web dinamica e poi convertirla in un'applicazione mobile per l'uso su smartphone e compresse.
Se abbiamo Flash, perché abbiamo bisogno di tela?
Secondo il Specifiche HTML5, l'elemento CANVAS è: "...una tela bitmap dipendente dalla risoluzione, che può essere utilizzata per il rendering di grafici, grafica di giochi, arte o altre immagini visive al volo."
L'elemento CANVAS ti consente di disegnare grafici, elementi grafici, giochi, arte e altri elementi visivi direttamente sulla pagina Web in tempo reale.
Potresti pensare che possiamo già farlo con Flash, ma ci sono due grandi differenze tra CANVAS e Flash:
- L'elemento CANVAS è incorporato direttamente nell'HTML. Gli script che disegnano su di esso sono nell'HTML o in un file esterno collegato. Ciò significa che l'elemento CANVAS fa parte del modello a oggetti del documento (DOM).
- Flash è un file esterno incorporato. Utilizza l'elemento EMBED o OBJECT per la visualizzazione e non può interagire direttamente con gli altri elementi HTML. Poiché l'elemento CANVAS fa parte del DOM, può interagire con il DOM in molti modi.
- Ad esempio, potresti creare un'animazione che cambia quando si interagisce con un'altra parte della pagina, ad esempio la compilazione di un elemento del modulo. Con Flash, il massimo che potresti fare sarebbe avviare il Filmato in flash o animazione, ma con CANVAS puoi creare molti effetti diversi, anche aggiungendo il testo dal campo modulo all'animazione.
- L'elemento CANVAS è supportato nativamente dai browser web. Affinché gli utenti possano effettivamente utilizzare Flash, il loro browser deve avere il plug-in installato. Questo è spesso un problema per la maggior parte delle persone a causa di installazioni Flash obsolete o del fatto che il loro sistema operativo semplicemente non lo supporta.
- Un tempo ogni browser aveva il plug-in installato, ma non è più così e molti stanno persino rimuovendo il plug-in a causa di difficoltà. Inoltre, non è nemmeno disponibile sul popolare piattaforma iOS.
La tela è utile anche se non hai mai pianificato di usare Flash
Uno dei motivi principali per cui l'elemento CANVAS è così confuso è che molti designer si sono abituati a una rete completamente statica. Le immagini potrebbero essere animate, ma è fatto con GIFe, naturalmente, puoi incorporare video nelle pagine ma, ancora una volta, è un video statico che si trova semplicemente sulla pagina e forse si avvia o si interrompe a causa dell'interazione, ma questo è tutto.
L'elemento CANVAS ti consente di aggiungere molta più interattività alle tue pagine web perché ora puoi controllare la grafica, le immagini e il testo in modo dinamico con un linguaggio di scripting. L'elemento CANVAS ti aiuta a trasformare immagini, foto, grafici e grafici in elementi animati.
Quando prendere in considerazione l'utilizzo dell'elemento Canvas
Il tuo pubblico dovrebbe essere la tua prima considerazione quando decidi se utilizzare l'elemento CANVAS.
Se il tuo pubblico utilizza principalmente Windows XP e IE 6, 7 o 8, quindi la creazione di una funzione di tela dinamica sarà inutile poiché quei browser non la supportano.
Se stai creando un'applicazione che verrà utilizzata solo su macchine Windows, Flash potrebbe essere la soluzione migliore. Un'applicazione da utilizzare su computer Windows e Mac potrebbe trarre vantaggio da un'applicazione Silverlight.
Tuttavia, se la tua applicazione deve essere visualizzata su dispositivi mobili (sia Android che iOS) oltre che moderni computer desktop (aggiornati alle ultime versioni del browser), quindi l'utilizzo dell'elemento CANVAS è una buona scelta.
Tieni presente che l'utilizzo di questo elemento ti consente di avere opzioni di fallback come immagini statiche per i browser meno recenti che non lo supportano.
Tuttavia, non è consigliabile utilizzare la tela HTML5 per tutto. Dovresti mai usalo per cose come il tuo logo, titolo o navigazione (anche se usarlo per animare una parte di uno di questi andrebbe bene).
Secondo le specifiche, dovresti usare gli elementi più adatti a ciò che stai cercando di costruire. Quindi l'utilizzo dell'elemento HEADER insieme a immagini e testo è preferibile all'elemento CANVAS per l'intestazione e il logo.
Inoltre, se stai creando un pagina web o un'applicazione che deve essere utilizzata in un mezzo non interattivo come la stampa, dovresti essere consapevole che l'elemento CANVAS che è stato aggiornato dinamicamente potrebbe non essere stampato come previsto. Potresti ottenere una stampa del contenuto corrente o del contenuto di riserva.