Il presente articolo è stato tradotto automaticamente.

Creazione di applicazioni con HTML5

Nessun Browser lasciato: Una HTML5 adozione strategia

Brandon Satrom

Scaricare il codice di esempio

È disponibile una grande quantità di essere entusiasti con HTML5. Con nuovo markup, funzionalità CSS e JavaScript API, nell'ambito delle straordinarie potenzialità sul Web sta crescendo a leaps e bounds. A ciò si aggiunge la costante one-upmanship tra i fornitori di browser e l'elenco delle funzionalità interessanti si espande in quasi ogni giorno. Dalle generazioni ogni notte a dev rilascia canale e le anteprime di piattaforma regolari, i browser sono in rapida evoluzione e ovunque sia necessario agli sviluppatori Web desiderino per la giostra exhilarating.

Ma, come le Comunità di sviluppo e il browser effettua il push implementazione del sistema di HTML5 fino a un passo di febbre, la maggior parte delle persone sul Web non si utilizza il browser nuovissima e che siamo. Se sei uno sviluppatore Web in un reparto di sviluppo di grandi dimensioni o in un'azienda con una base di utenti di grandi dimensioni, è noto in questo. Anche se si lavora con un piccolo reparto o di avvio che fornisce alcuni servizi tramite il Web, è impiegata una grande quantità di tempo assicurandosi che il sito si occupa di tutti i browser e le versioni di browser possibili.

Data questa realtà, è facile vedere HTML5 non in termini di se di pronto per essere utilizzato, oggi, ma se si è pronta per stamparlo. Si supponga, ad esempio, è opportuno che si crea una pagina con alcuni dei nuovi tag semantici (ad esempio <header> e <article>), alcune nuove funzionalità CSS (ad esempio, raggio bordo e ombreggiatura casella) e anche aggiunto un <canvas> elemento da disegnare un logo HTML5 sulla pagina.

Nei browser più recenti quali 9 di Internet Explorer, Firefox, 4 e versioni successive o Google Chrome, questo verrà eseguito il rendering come illustrato nella nella figura 1. Ma se si tenta di caricare la pagina in Internet Explorer 8 o versioni precedenti, si otterrà un risultato più simile a nella figura 2: una pagina scopriranno altre interrotta.

Figura 1 A semantica pagina con stili e un HTML5 <canvas> Elemento, eseguire il rendering in Internet Explorer 9

Figura 2 la stessa semantica pagina, il rendering in Internet Explorer 8 con gli stili di No e non <canvas>

Si blame non sarebbe se sono state descritte tutte le principali funzionalità di HTML5 e, dopo avere un'esperienza di questo tipo, detto personalmente la scelta migliore è stata di attesa. È giunto alla conclusione che, pronto o non facile, HTML5 non è ancora pronto per se stessi o gli utenti.

Prima di effettuare la decisione di impostare una data nel 2022 per esaminare un'altra HTML5, chiedo leggere il resto di questo articolo. Il mio obiettivo questo mese è di fornire le strategie pratiche per il modo in cui è possibile adottare tecnologie HTML5 oggi senza arrivare al tipo di degradazione graceless illustrato nella nella figura 2. In questo articolo si parlerà:

1. Rilevamento delle feature e agente utente (UA) lo sniffing
2. Polyfilling con JavaScript
3. Graduale degradazione

Questi tre argomenti dovrebbero indicare la maggior parte di ciò che è necessario conoscere per la creazione di siti Web per un'ampia gamma di browser. Il momento in cui siamo finiti, che avrete una solida strategia per l'adozione di tecnologie di HTML5 con tranquillità e senza indugio. È possibile anche alcuni strumenti che è possibile utilizzare per migliorare progressivamente siti per i browser più recenti, mentre normalmente effetti negativi per gli altri utenti.

L'importanza di rilevamento delle Feature

Per fornire esperienze stabile e coerente nei vari browser, gli sviluppatori spesso devono avere alcune informazioni sul browser dell'utente. In passato, era comune per determinare tali informazioni con JavaScript simile al seguente:

var userAgent = navigator.userAgent;
 
if (userAgent.indexOf('MSIE') >= 0) {
  console.log("Hello, IE user");
} else if (userAgent.indexOf('Firefox') >= 0) {
  console.log("Hello, Firefox user");
} else if (userAgent.indexOf('Chrome') >= 0) {
  console.log("Hello, Chrome user");
}

Questa tecnica, nota come UA lo sniffing, è ampiamente utilizzata per determinare il tipo di browser richiede la pagina. La logica è che conoscendo il browser (Internet Explorer 7, ad esempio), è possibile prendere decisioni di runtime sulle caratteristiche del sito per attivare o disattivare. Lo sniffing UA equivale alla dicitura al browser: "Chi sei?" (Per un'analisi approfondita UA sniffing e altre tecniche di rilevamento, vedere bit.ly/mlgHHY.)

Il problema di questo approccio è che i browser è possibile apportare a giacere. La stringa UA è un'informazione configurabile dall'utente che non forniscano un quadro preciso al 100 percento del browser in questione. In più, come questa tecnica è diventato hanno avuta ampia diffusione, molti fornitori di browser aggiunto contenuto aggiuntivo per le proprie stringhe UA come modo per indurre script in un disegno supposizioni non corrette sulla quale browser è stato in uso, pertanto routing intorno a rilevamento. Alcuni browser includono ora anche una funzionalità che consente agli utenti di modificare la stringa UA con poche semplici operazioni.

L'obiettivo di "sniffing" UA non era mai conoscere anche se il browser dell'utente e la versione. E sicuramente non è stata concepita per offrire un avenue su avvisare gli utenti di "go scaricare un altro browser" se desiderata non sono stati utilizzati, anche se tale tecnica è utilizzata da alcuni. Gli utenti dispongono di una scelta nel browser utilizzato, ma è nostra responsabilità come gli sviluppatori per fornire l'esperienza più coerenza e affidabile, non per imporre un parere di preferenza browser al momento della loro. L'obiettivo di sniffing della UA era sempre per dare un quadro accurato della capacità o funzionalità che possono essere utilizzati all'interno il browser dell'utente corrente. La conoscenza del browser stesso è semplicemente un mezzo per tali informazioni.

Oggi esistono alternative a UA "sniffing" e quello che è sempre più, grazie anche parti jQuery e Modernizr, viene chiamato l'oggetto o la funzionalità di rilevamento. Le condizioni della maggior parte dei casi sono intercambiabili, ma verrà attaccato a "rilevamento feature" di questo articolo.

L'obiettivo di rilevamento delle feature consiste nel determinare se una determinata caratteristica o funzionalità è supportata dal browser corrente dell'utente. Se lo sniffing UA è come la formulazione del browser "chi sei," dotati di rilevamento è come la formulazione del browser "what are in grado di", ovvero una domanda molto più diretta e un modo più affidabile fornire agli utenti funzionalità condizionale. È molto più difficile per gli utenti e i browser fake o erroneamente il supporto delle funzionalità report, supponendo che gli script di rilevamento feature sono stati implementati correttamente.

Rilevamento manuale delle Feature

Pertanto, rilevamento delle feature aspetto, a differenza di esempio sniffer UA? Per rispondere, diamo un'occhiata a risolvere i problemi insorti durante la visualizzazione di una pagina di HTML5, rappresentato in nella figura 1, in Internet Explorer 8 invece di Internet Explorer 9. Il codice per questa pagina è elencato nella figura 3.

Figura 3 pagina con i nuovi commenti HTML5 semantica

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>My Awesome Site</title>
  <style>
    body { font-size: 16px; font-family: arial,helvetica,clean,sans-serif;  }
    header h1 { font-size: 36px; margin-bottom: 25px; }
    article 
    {
      background: lightblue;
      margin-bottom: 10px;
      padding: 5px;
      border-radius: 10px;
      box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    }
    article h1 { font-size: 12px; }
  </style>
</head>
<body>
  <header><h1>My Awesome Site</h1></header>
  <article>
    <header><h1>An Article</h1></header>
    <p>Isn't this awesome?</p>
  </article>
  <canvas width="250" height="500"></canvas>
</body>
<script src="../js/html5CanvasLogo.js" type="text/javascript"></script>  
</html>

Le differenze tra 9 di Internet Explorer e Internet Explorer 8, come illustrato nella le figure 1 e 2, drastiche. Per i principianti, la pagina è completamente senza stili, come se il foglio di stile CSS per questa pagina non esiste. In più, mancano lo scudo HTML5 decorativo nella parte inferiore della pagina. Ciascuno di questi problemi può essere risolto facilmente e rilevamento delle feature è il primo passo per identificare il problema.

La causa di entrambi i problemi è semplice: <header>, <article> e <canvas> non sono elementi HTML validi per quanto riguarda Internet Explorer 8 e, di conseguenza, non è possibile utilizzarli. Per risolvere <canvas> il problema, invece di utilizzare UA "sniffing" per determinare quale versione del browser/è in uso, I like to chiedere al browser tramite JavaScript, se <canvas> elemento e l'API JavaScript sono supportati. Mio controllo funzionalità per la tela ha il seguente aspetto:

!!document.createElement('canvas').getContext

Questa istruzione non un paio di cose. In primo luogo, doppia negazione (!) viene utilizzato per imporre i valori non definiti esplicitamente false. Quindi, viene creato un nuovo elemento canvas manualmente e allegarlo a DOM. Infine, lo richiamerà getContext, una nuova funzione disponibile per <canvas> elementi come un modo per manipolare l'API di tela tramite JavaScript. Se si utilizza Internet Explorer 9, l'istruzione seguente restituirà true. Se si utilizza Internet Explorer 8, getContext restituirà "indefinito," che modificheranno la negazione di double su false.

Questo è il rilevamento delle feature nella sua forma più semplice. Con questa istruzione e altre analoghe, ora è disponibile un modo più affidabile per il supporto di funzionalità di query all'interno del browser. Per ulteriori informazioni sul rilevamento delle feature manuale, visitare diveintohtml5.info/everything.html.

Utilizzo di Modernizr per il rilevamento delle funzionalità

Rilevamento delle feature manuale è certamente un miglioramento rispetto a UA lo sniffing, ma questo approccio restano comunque all'utente di svolgere il lavoro pesante per rilevare la disponibilità di una feature e decide cosa fare se tale funzionalità non è presente. E mentre l'esempio canvas era un semplice che richiede una sola riga di codice, è possibile che si desidera rilevare tutte le feature in caso contrario, né è il codice di rilevamento identico in tutti i browser. Rilevamento del supporto per i CSS3 moduli precedenti, raggio bordo e ombreggiatura casella, ho utilizzato, ad esempio, può essere un po' più complicato.

Fortunatamente, Modernizr (modernizr.com) offre un approccio più efficace. Modernizr è una libreria JavaScript che "… rilevi la disponibilità delle implementazioni native per le tecnologie Web di prossima generazione, vale a dire funzionalità che derivano dalle specifiche HTML5 e CSS3". Aggiungere un riferimento a Modernizr nelle pagine fornisce quattro funzioni principali:

1. Un elenco completo delle funzionalità supportate che periodico dei dati viene aggiunto al tag, che consente le definizioni CSS condizionale.
2. Un oggetto JavaScript che consente di rilevamento delle feature basata su script.
3. Tutti i nuovi tag HTML5 aggiunti al modello DOM in fase di esecuzione, a beneficio di Internet Explorer 8 e precedenti di Internet Explorer browser (più avanti).
4. Un caricatore di script per il caricamento in modo condizionale di polyfills nelle proprie pagine.

Esamineremo il primo elemento ulteriormente in questo articolo, anche se ti suggeriamo di testa rispetto a modernizr.com e consultare la documentazione su questo e il resto delle funzionalità.

Il secondo elemento è la funzionalità che consente di attivare la seguente riga di codice:

!!document.createElement('canvas').getContext

In questa riga di codice:

Modernizr.canvas

Restituisce un valore booleano che indica se l'elemento canvas è supportata nella pagina. La cosa più bella utilizzando Modernizr come anziché in sequenza un rilevamento delle feature è che Modernizr è una libreria ben collaudata, robusto e ampiamente utilizzata che effettua il lavoro pesante per voi. Twitter, Google, Microsoft e innumerevoli altri utilizzano Modernizr ed è possibile troppo. Con ASP.NET MVC 3 strumenti Update (rilasciato nell'aprile 2011) Microsoft viene fornito anche Modernizr nella casella con la nuova applicazione Web ASP.Applicazioni NET MVC. Naturalmente, tutti ho realizzato a questo punto è rilevare se <canvas> elemento supportato. Ho non ho detto nulla sulle operazioni da eseguire successivamente. Dato delle conoscenze, tramite il rilevamento delle feature, che una caratteristica è o non è disponibile per un browser, comune nella fase successiva consiste nel creare una logica condizionale che impedisce l'esecuzione se non esiste una funzionalità o viene eseguito un percorso alternativo, simile al seguente codice particolare:

 

if (Modernizr.canvas) {
  // Execute canvas code here.
}

Aggiunta di funzionalità per il sito in base alla presenza di funzionalità del browser aggiuntiva viene definito come "miglioramento progressivo", perché si migliorano l'esperienza per un browser che supporti più. Su altra estremità dello spettro è "graduale degradazione," in cui l'assenza di alcune funzionalità non causa il browser per errore o test non superato, ma piuttosto viene presentato all'utente alcune funzionalità di riduzione o funzionalità alternative. Per i browser meno recenti, graduale degradazione non deve necessariamente essere l'opzione predefinita. In molti casi, può anche risultare la soluzione migliore. Al contrario, con l'assistenza del Modernizr, è spesso possibile utilizzare uno dei molti browser disponibile in polyfills per aggiungere funzionalità simili a HTML5 non supporta i browser.

Che cosa sono Polyfills?

In base al sito Modernizr Web, un polyfill è "JavaScript shim che consente di replicare le API standard per i browser meno recenti." "API Standard" si riferisce a una determinata tecnologia HTML5 o a feature, come area di disegno. "shim JavaScript" significa che è possibile caricare dinamicamente codice JavaScript o le librerie che simulano le API nei browser che non li supportano. Ad esempio, un polyfill di Geolocation sarebbe aggiungere l'oggetto global geolocation oggetto navigator, come pure l'aggiunta della funzione getCurrentPosition e l'oggetto di richiamata "cavi", tutti come definito dall'API Geolocation World Wide Web Consortium (W3C). Poiché il polyfill simula un'API standard, è possibile sviluppare contro tale API in modo a prova di futuro per tutti i browser, con l'obiettivo di rimuovere il polyfill una volta supporto raggiunge la massa critica. Non sono necessarie ulteriori.

Aggiungendo un riferimento a Modernizr sulla pagina, viene visualizzato uno dei vantaggi immediati polyfilling relativo all'esempio in nella figura 3. La pagina viene eseguito il rendering unstyled perché Internet Explorer 8 non riconosce i tag come <article> e <header>. E poiché essa non vengano riconosciuti, da essa non sono state aggiungerli al modello DOM, che rappresenta la modalità di selezione di elementi per impostare lo stile CSS.

Quando si aggiunge un <script> tag e il riferimento a Modernizr alla pagina, il risultato è una pagina con stile, come in nella figura 4. Viene visualizzato questo vantaggio perché Modernizr consente di aggiungere manualmente tutti i nuovi tag HTML5 al modello DOM utilizzando JavaScript (documento.CreateElement('nav')), che consente il tag selezionato e lo stile tramite CSS.

Figura 4 una pagina di HTML5 in Internet Explorer 8, con l'ausilio di Modernizr

Oltre all'utilizzo per aggiungere il supporto per i nuovi elementi di HTML5 in Internet Explorer, la libreria di Modernizr non fornisce qualsiasi ulteriore polyfills fuori della finestra. Quelle fornite dall'utente, da script personalizzati o dall'elenco delle opzioni descritte sul sito Modernizr Web in continua crescita. Versione 2.0 Modernizr fornisce un caricatore di script condizionale (in base alle yepnope.js—yepnopejs.com) che consente in modo asincrono download polyfilling raccolte solo quando necessario. L'utilizzo di Modernizr con una o più librerie di polyfilling che forniscono le funzionalità che necessarie è uno strumento potente.

Utilizzo di Polyfills per simulare la funzionalità di HTML5

In caso di area di lavoro, è possibile polyfill supporto per Internet Explorer 8 e versioni precedenti con l'ausilio di Modernizr e una libreria JavaScript denominato excanvas, che aggiunge il supporto di tela a livello di API per Internet Explorer 6, Internet Explorer 7 e Internet Explorer 8. È possibile scaricare excanvas da bit.ly/bSgyNR e, dopo che è stato aggiunto alla cartella script, è possibile aggiungere del codice per un blocco di script nella pagina, come mostrato nella nella figura 5.

Figura 5 utilizzo Modernizr al supporto tecnico di tela Polyfill

 

Modernizr.load({
  test: Modernizr.canvas,
  nope: '../js/excanvas.js',
  complete: function () {
    Modernizr.load('../js/html5CanvasLogo.js');
  }
}]);

In questo caso, si utilizza il caricatore di script Modernizr per specificare tre elementi:

1. Un'espressione booleana per eseguire il test
2. Un percorso di uno script per caricare se l'espressione restituisce false
3. Un callback per eseguire una volta completato il caricamento del controllo o uno script

Nel contesto dell'area di lavoro, non che è necessario aggiungere alcune intelligenza e polyfilling alla mia applicazione. Modernizr caricamento asincrono di excanvas.js solo per i browser che non supportano la tela e quindi verrà caricata la libreria di script per disegnare il logo di HTML5 nella pagina.

Vediamo un altro esempio per sottolineare il valore di Modernizr. L'accurato tra si avrà notato che il sito con lo stile nella figura 4 non abbastanza equivale alla pagina originale, come viene eseguito il rendering in Internet Explorer 9 e rappresentato in nella figura 1. La pagina, come visto in Internet Explorer 8, non è presente un'ombreggiatura casella e angoli arrotondati e probabilmente non riuscivo spedire questo sito awesome senza entrambi, in modo che ci sarà attrarre Modernizr nuovamente per la Guida in linea.

Come con area di lavoro, Modernizr possibile avvisare che non sono supportati i moduli CSS3, ma spetta all'utente di fornire una libreria a polyfill esse. Fortunatamente, è una raccolta denominata TORTA (css3pie.com) che fornisce entrambi i moduli in un'unica libreria.

Per aggiungere il supporto per raggio bordo e ombreggiatura casella, posso aggiungere il codice in nella figura 6 allo script una volta ho scaricato a TORTA. In questo caso, verrà verificato se uno dei due i raggio bordo o Ombreggiatura casella moduli sono supportati (e non supponendo che entrambi sono sempre supportate o non) e se uno non è supportata, caricamento dinamico PIE.js. Una volta TORTA ha terminato il caricamento, procederà all'esecuzione di una porzione di jQuery per selezionare tutto mio <article> i tag e chiamare la funzione PIE.attach, che aggiunge il supporto per il raggio bordo e gli stili di ombreggiatura casella già definiti nel mio CSS. Il risultato finale viene rappresentato in nella figura 7.

Figura 6 utilizzando Modernizr e a TORTA per aggiungere il supporto per CSS3

Modernizr.load({
  test: Modernizr.borderradius || Modernizr.boxshadow,
  nope: '../js/PIE.js',
  callback: function () {
    $('article').each(function () {
      PIE.attach(this);
    });
  }
});

Figura 7 supporto per CSS3 con Modernizr e a TORTA

Utilizzo di Polyfills per gli aiuti in graduale degradazione

Oltre a utilizzare le tecniche di polyfilling descritte qui, è inoltre possibile utilizzare Modernizr per assistere nei casi in cui si desidera normalmente un peggioramento dell'applicazione, invece di polyfilling in un'altra libreria.

Si supponga che dispone di un controllo Bing Maps in una pagina Web e desidera utilizzare Geolocation, che verranno trattati in modo approfondito in un altro articolo, per trovare la posizione corrente dell'utente e quindi inserire tale posizione come simboli sul controllo mappa.

Geolocation è supportato nelle versioni più recenti di tutti i browser, ma non è supportato in browser meno recenti. È anche un po' più complicato fornire il supporto completo di Geolocation API esclusivamente tramite JavaScript e anche se sono presenti polyfills per Geolocation, ho deciso invece normalmente un peggioramento dell'applicazione. Nei casi in cui il browser dell'utente non supporta Geolocation, fornirò una maschera che utilizzabile per immettere manualmente il percorso che si utilizzerà quindi per posizionare e bloccare la mappa.

Modernizr, è una chiamata semplice il carico su uno dei due script che hai creato, come illustrato nella nella figura 8. In questo caso, verificare la proprietà Modernizr.geolocation. Se è vero ("Sì"), caricando lo script fullGeolocation.js, che verrà utilizzata l'API Geolocation per individuare la posizione (con l'autorizzazione) e inserirlo in una cartina, come illustrato nella nella figura 9. Se, d'altro canto, la prova di false classi ("WMI"), caricando uno script di fallback che visualizza una maschera di indirizzo della pagina. Quando l'utente invia il modulo, si utilizzerà l'indirizzo fornito al centro e il pin della mappa, come illustrato nella nella figura 10. In questo modo, la pagina offre una grande esperienza per i browser moderni, mentre deteriorare normalmente in un'alternativa ragionevole per quelli meno recenti.

Figura 8 Utilizzo di Modernizr per garantire la graduale degradazione

Modernizr.load({
  test: Modernizr.geolocation,
  yep: '../js/fullGeolocation.js',
  nope: '../js/geolocationFallback.js'
});

Figura 9 Mapping con Geolocation

Figura 10, offrendo un supporto di Geolocation Fallback

È facile da prendere in considerazione alcune delle funzionalità avanzate di HTML5 e, di fronte a un'utenza ancora in browser meno recenti, decidere che il sito non è ancora pronto per loro. Tuttavia, esistono soluzioni già disponibili che non solo semplificare la graduale degradazione, ma anche la possibilità di portare i browser meno recenti nell'attuale in modo che gli utenti possono riscontrare HTML5 subito. Nel corso del presente articolo, si è visto che con rilevamento delle feature, Modernizr e polyfilling, è possibile adottare HTML5 senza indugio per il segmento in continua crescita degli utenti con i browser attuali, ovvero tutto il tempo prestando attenzione a non lasciare base dietro gli altri utenti.

Brandon Satrom funziona come un evangelista developer per Microsoft in Austin, Texas. Un blog he al UserInexperience.com e sono disponibili su movimenti in twitter.com/BrandonSatrom.

Grazie ai seguenti esperti tecnici per la revisione di questo articolo: Damian Edwards, Cacciatore di Scott e Clark comincia a vendere