Ed eccoci finalmente al secondo appuntamento di iSpazio DevResources dedicato allo sviluppo Web. Quest’oggi inizieremo ad addentrarci nei meandri del linguaggio di markup che descriverà le pagine del web del futuro, HTML 5!
Come anticipato nello scorso appuntamento, questo nuovo approfondimento si occuperà dell’attuale supporto da parte dei browser delle nuove caratteristiche e funzionalità che l’HTML 5 porta con sè.
Questo appuntamento sarà strutturato in due sezioni per semplificare lacomprensione dell’argomento, difatti:
- La prima parte affronterà nello specifico il supporto dei singoli browser al nuovo standard,
- La seconda parte invece, ci consentirà di capire come scrivere degli script in grado di individuare se le funzionalità utilizzate sono supportate dal browser che si sta utilizzando.
.
Situazione attuale relativa al supporto dell’HTML 5 da parte dei Browser
Dall’alba dei tempi in cui Internet faceva la sua comparsa nei confronti del vasto pubblico, uno dei più grandi problemi che gli sviluppatori hanno riscontrato nello sviluppo web è stata la “chimera” chiamata Sviluppo “Cross-Browser”.
Per Sviluppo “Cross-Browser” si intende la possibilità di creare pagine web che possano essere interpretate correttamente da qualunque browser.
L’adozione degli standard da parte dei produttori dei browser avrebbe dovuto favorire lo sviluppo di questo genere, evitando agli sviluppatori di incorrere in enormi e svariati problemi di compatibilità con le proprie pagine web (cosa che tuttavia accade ancora con Internet Explorer della Microsoft).
Spesso quindi, si è dovuto ricorrere a fix, workaround, rinunce e magie di tutti i generi per far sì che le nostre pagine web potessero essere visualizzate in maniera corretta e senza troppe differenze dai vari Internet Explorer, Opera, Firefox, Safari, etc.
Con l’avvento dell’HTML 5 però, questa situazione dovrebbe cambiare.
L’HTML 5 attuale, integra già tutte quelle le caratteristiche di largo uso supportate dai grandi produttori di browser. Con il rilascio delle ultime release è infatti possibile sfruttare quasi tutte le caratteristiche di HTML 5, (con qualche grave mancanza ancora da parte di Internet Explorer).
Per verificare lo stato d’adozione dello standard è possibile trovare svariate risorse sul web, come ad esempio:
E’ inoltre possibile effettuare dei test sulla versione installata del browser attualmente in uso da tutti voi, direttamente da:
In ogni modo è abbastanza ovvio che per poter usufruire della maggior parte delle caratteristiche dell’HTML 5 (e di CSS 3) è necessario affidarsi alle versioni più recenti dei browser, se non addirittura alle versioni Nightly Build, Beta e RC (ovviamente in ambito di sviluppo e di test).
Allo stato attuale l’adozione migliore è offerta dalle seguenti versioni:
Versioni Stabili
| Browser | V. Stabile | V. Beta, RC o Nigthly Builds | |
|---|---|---|---|
 |
Microsoft Internet Explorer | 9 | – |
 |
Mozilla Firefox | 3.6 | 4.0 RC1 |
 |
Apple Safari | 5.03 | 5.1 |
 |
Opera | 11.1 | 11.5 |
 |
Google Chrome | 10.0.64 | *11.0.690 |
* La versione indicata in realtà è quella di Chromium, il progetto opensource sul quale è basato Chrome
In ogni approfondimento futuro su HTML 5 di iSpazio DevResources che tratteremo nelle prossime settimane sarà riportata una tabella di compatibilità dei browser per la caratteristica presa in oggetto, in modo tale da aiutare progressivamente gli utenti ad orientarsi ed eventualmente anche a scegliere il nuovo browser da utilizzare!
N.B. Oltre all’adozione dei vari standard da parte dei browser sarà necessario fare delle precisazioni sull’adozione dei vari codec audio e video che sono o saranno implementati al fine di garantire un pieno supporto ai file multimediali. Approfondiremo la questione in un appuntamento dedicato.
Regole per il detecting Javascript
Nella prima parte di questo secondo appuntamento con HTML 5 ci siamo occupati del supporto al linguaggio, da parte dei moderni browser, ma come possiamo fare, ad oggi, per creare delle pagine web che ci consentano di “capire” se il browser in uso è compatibile o meno con queste funzionalità?
Ecco a voi le possibili soluzioni:
Nella fase di rendering di una pagina web, il browser si occupa di generare il “modello ad oggetti del documento” chiamato DOM (Document Object Model).
Il DOM è una API di programmazione che offre una collezione di oggetti di tutti gli elementi che compongono la pagina stessa (oltre a degli oggetti globali) e che possono essere “gestiti” per mezzo di un linguaggio di scripting “DOM Oriented” come javascript.
Il DOM consente di recuperare, modificare, aggiornare ed eliminare parti del documento su cui si sta lavorando, fornendo metodi (che rappresentano le azioni che possono essere compiute da un oggetto) e proprietà (o attributi, che rappresentano i dati o le caratteristiche dell’oggetto ovvero le informazioni su cui i metodi possono eseguire le loro elaborazioni).
E’ Proprio per mezzo di queste proprietà e metodi che sarà possibile stabilire se determinate caratteristiche di HTML 5 e di CSS 3 sono supportate o meno dal browser in uso sfruttando delle semplici righe di javascript.
Fondamentalmente i modi per poter “valutare” le capacità del browser in uso possono essere riepilogate in 4 semplici regole generali, che vanno poi applicate in ogni caso specifico per individuare se determinate caratteristiche di HTML 5 o di CSS 3 sono utilizzabili o meno.
Generalmente lo si può fare attraverso queste regole:
- Valutare se un oggetto globale del DOM (come window o navigator) possiede una determinatà proprietà;
- Dopo aver creato un elemento desiderato, valutare se lo stesso possiede una determinata proprietà o metodo;
- Controllare il risultato che il metodo stesso restituisce;
- Valutare se il valore impostato è stato mantenuto.
Per ogni caso quindi sarà possibile applicare una di queste regole e capire se una determinata caratteristica è supportata o meno dal browser.
In ogni approfondimento che affronteremo nei prossimi appuntamenti sull’HTML 5 di iSpazio DevResources, analizzeremo prima di tutto come fare per capire tramite javascript se il browser in uso supporta o meno la caratteristica presa in esame!
Ad esempio uno dei casi che affronteremo sarà quello che consentirà di capire se un browser supporta o meno il nuovissimo TAG Canvas di HTML 5 (Tag che ci permette di disegnare direttemente sulla nostra pagina web. Noi arriveremo a fare anche questo).
Eccovi le poche righe di javascript necessarie:
Function Canvas_Compatible()
{
//Creo per mezzo dell’oggetto document un elemento di tipo Canvas
var canvas_test = document.createElement(“canvas”);
//Verifico se il metodo getContext è presente nell’oggetto Canvas
return “getContext” in canvas_test;
}
Il caso appena riportato applica la seconda regola di riconoscimento elencata in alto.
Difatti, abbiamo verificato semplicemente se il metodo getContext è presente dopo aver creato un oggetto di tipo canvas sfruttando il metodo createElement dell’oggetto globale document.
La funzione su indicata ritorna un valore booleano che indica quindi se è possibile (in caso di valore Vero) utilizzare il Tag Canvas, o meno (in caso di valore Falso).
Cio è possibile perchè i browser che non supportano il tag canvas creeranno comunque l’oggetto, ma non renderanno disponibile il metodo getContext proprio perchè non supportano il canvas!
I lettori vanno comunque tranquillizzati, dicendo che sul web sono già presenti molte librerie javascript che consentono di applicare facilmente tutti i controlli che ci permettono di stabilire se determinate caratteristiche sono supportate o meno dai browser. La più famosa e performante è attualmente Modernizr, che ci eviterà anche la fatica di scrivere una nostra libreria di riconoscimento per tutte le caratteristiche di HTML 5 e di CSS 3.
Concludiamo quindi questo nostro secondo appuntamento sperando di essere stati chiari ed esaurienti. Vi invitiamo a seguire il prossimo appuntamento in cui faremo una panoramica del linguaggio HTML ma con particolare attenzione alle differenze che intercorrono tra l’HTML 4.01 e l’HTML 5! Passo dopo passo entreremo sempre di più nel vivo di questo nuovo linguaggio con esempi pratici e linee di codice. Grazie per l’attenzione, a lunedì prossimo!
Leggi o Aggiungi Commenti