Il presente articolo è stato tradotto automaticamente.

Creazione di applicazioni di HTML5

Utilizzo del linguaggio HTML5 per creare esperienze "mobile"

Brandon Satrom

Scaricare il codice di esempio

Il mese scorso, ho introdotto alle query supporti CSS3 (msdn.microsoft.com/magazine/hh882445), un nuovo modulo che consente di adattare stili di pagina in base alle regole condizionali. Se le query di mezzi di comunicazione hanno ampia applicabilità tutta la gamma di dispositivi, sei spesso menzionati nel contesto della costruzione di applicazioni e siti di telefonia mobile. Cioè l'introduzione alle query supporti nel precedente articolo fu incastrato intorno alla creazione di tavoletta ed esperienze mobile.

Considerando le difficoltà di costruire siti di telefonia mobile e apps presents, è meraviglia che le query supporti sono decollato. Rispetto alle alternative indesiderabili come sniffing (a volte denominate dispositivo rilevamento del browser) e dover creare esperienze mobile su una base per-piattaforma, le query supporti sembrano un vero regalo. They're moduli brillante, di sicuro, e il motivo che scritto su di loro il mese scorso è perché si dovrebbe utilizzare li oggi.

Progettazione Web reattiva, rivisitato

Ma c'è di più per la storia: Query supporti CSS sono grandi, ma sono solo un pezzo di che cosa si ha realmente bisogno creare grandi esperienze Web mobile. Il mese scorso, ho citato il termine reattiva Web design, un termine coniato da Ethan Marcotte nel suo articolo seminale lo stesso nome (bit.ly/9AMjxh). Marcotte si concentra sulle query di mezzi di comunicazione, ma egli sottolinea anche due altre pratiche necessarie: immagini flessibile e griglie di fluidi. Media query sono i motori che guidano i siti reattivi, adattivi, ma sono efficaci solo quando il design del sito è anche reattiva e adattivo. Questo mese, io sarò presentarvi alcune idee intorno a questi altri due pilastri di reattivo Web design. Inizierò con una panoramica di alcuni moduli di layout CSS emergenti e poi discutere alcune tecniche per la fabbricazione di elementi non testuali, quali immagini e video incorporato adattivo pure. Lungo la strada, avrete notato alcuni quadri e librerie che aiuteranno a adottano queste tecniche. Sarò anche menzionare alcuni noti framework per la creazione di applicazioni Web mobili e avvolgere con una breve discussione sull'utilizzo di HTML5 per costruire applicazioni "native". Quando che hai finito di questo articolo, si dovrebbe avere una solida base per l'implementazione di Web design sensibile nelle applicazioni personalizzate.

Layout e griglie fluidi

Utilizzando una griglia per tipografiche design è una pratica che è stato intorno in qualche forma o in altra per secoli, anticipando anche l'invenzione di tipo mobile. Che struttura bidimensionale, fatta di assi verticali e orizzontali che si intersecano permette una finestra di progettazione allineare e organizzare gli elementi in modo visivamente piacevole su un layout, come illustrato nella Figura 1. Negli ultimi anni, Web designer hanno cominciato a molti degli stessi principi applicare al loro lavoro digitale e un numero di quadri popolari, come il sistema di griglia 960 (960. gs) e il sistema di griglia semantico (semantic.gs), ora rendere accessibile a tutti i layout di griglia.

Figura 1 griglia tipografica

Tuttavia, l'applicazione diretta di una griglia tipografica sul Web ha un difetto fondamentale: layout di stampa sono fissi, layout Web non sono. In più, molte implementazioni di griglia non sono terribilmente semantiche, che significa che essi richiedono l'aggiunta di markup per definire la griglia, mescolando la presentazione con un contenuto in pagine HTML.

Che ci porta al "fluido" in "Fluida griglia" di Marcotte. Per essere veramente reattiva, griglie (o layout) dovrebbe adattarsi alle mutevoli esperienze. Come ho discusso il mese scorso, le query supporti aiutano a definire le regole per il riposizionamento di elementi, ma per essere efficaci, tali elementi in primo luogo devono essere definiti in un contenitore flessibile o fluido. Gli strumenti che ho citato in precedenza (così come molti altri) affronta questo problema sia in modo nativo (la griglia semantico) o attraverso l'uso di una libreria complementare (Adapt.js per la griglia di 960 —adapt.960.gs), ma ci sono anche nuovi ed emergenti moduli CSS che contribuire alla creazione di layout fluido.

Si noti che sto prendendo qualche libertà con termine di Marcotte griglie fluidi da esso ribadendo come layout fluido. Sto facendo il modo perché ancora alcuni dei nuovi moduli CSS, che però non si basa su una griglia, può aiutare a creare contenitori fluide, adattabile.

Let's Guarda prima a modulo di Layout flessibile CSS3 Box (o Flexbox), che può essere trovato alla bit.ly/yguOHU. Flexbox è stato progettato per aiutarvi a creare contenitori di layout per elementi che automaticamente la posizione di bambini in un flusso orizzontale o verticale e fornire automatizzato di spaziatura (Goodbye "li ul {float: destra; }”!). Questo modulo è supportato — con prefissi vendor — in Internet Explorer 10 Platform Preview, Firefox, Chrome, Safari, Safari iOS e Android (check-out caniuse.com/flexbox per ulteriori informazioni).

Iniziamo applicando Flexbox alla Galleria fotografica del sito mi intro­Disher mese scorso. Dato il CSS in Figura 2, si può vedere il risultato, in stile fino un po ' scopo illustrativo, in Figura 3. Si prega di notare che il CSS in Figura 2 sta usando solo il prefisso vendor "-ms-". Nell'esempio di codice disponibili on-line (archive.msdn.microsoft.com/mag201205HTML5), comprendono i prefissi di altri vendor (-webkit, - moz, -o), e si dovrebbe fare questo per i siti come bene.

Nella figura 2 CSS per usando il modulo Flexbox

ul.thumbnails {
  width: 100%;
  background: #ababab;
  display: -ms-box;
  -ms-box-orient: horizontal;
  -ms-box-pack: center;
  -ms-box-align: center;
}
ul.thumbnails li {
  -ms-box-flex: 1;
}

Figura 3 foto Gallery immagini con Flexbox applicata

Questo è bello, ma naturalmente assomiglia a quello che avevamo già. Per illustrare il flex in Flexbox, ridimensionare la finestra del browser oppure aprire la pagina in un emulatore di mobile o su un dispositivo. Non ci sono query supporti definita in questo esempio e il layout agisce ancora un po ' più fluida. Combinare i due moduli e sarete in grado di creare contenitori fluidi che, allineano e spazio e spostamento degli elementi in maniera sensibile. Per esempio, è possibile creare un media regola query per gli schermi più piccoli di 480 pixel, modificare casella un orientamento verticale e voilà — vi sono l'inizio di un layout mobile.

CSS Layout di griglia (o solo CSS Grid), che può essere trovato alla bit.ly/ylx7Gq, è una specifica più recente, presentare­ted per il World Wide Web Consortium (W3C) CSS Working Group nel mese di aprile 2011 e attualmente implementato solo in Internet Explorer 10 Consumer Preview. L'idea è di fornire supporto robusta griglia in modo nativo all'interno del browser. Per gli sviluppatori e designer, il risultato è una griglia tipografica ricca senza bisogno di layout di tabella o la presenza di markup semanticamente neutrale.

La griglia di CSS consente di definire un layout di pagina con predefinite di righe e colonne, nonché le regole che specificano come contenuto fluisce in e attraverso quegli elementi. Il primo passo è quello di definire un contenitore di griglia, specificando "griglia" come la proprietà display per gli elementi selezionati:

body {
  display: -ms-grid; // A vendor prefix is required.
}

Io sto selezionando l'elemento body qui, che significa che mio griglia riempirà l'intero documento. Questo non è richiesto, e ho potuto facilmente creare una griglia da una più piccola sezione della pagina o anche definire più griglie in una singola pagina. Una volta che ho definito la griglia, bisogno di definire le dimensioni delle righe e le colonne:

body {
  display: -ms-grid;
  -ms-grid-rows: 50px 30% 20% auto;
  -ms-grid-columns: 75px 25px 2fr 1fr;
}

Qui, io sto specificando una griglia di quattro colonne e quattro righe, rendendo la dimensione assoluta in alcuni casi (50px, 75px, per esempio), relativa alle dimensioni della finestra per pochi (30%, 20%) e automatico basato sulla larghezza del suo contenuto (auto). Sono anche utilizzando la nuova unità di valore di frazione, fr, definita nella specifica CSS Grid come "… una frazione dello spazio disponibile." Frazione valori sono calcolati dopo dimensioni fisse sono assegnate e poi diviso proporzionalmente tra tutte le righe e le colonne definite con questi valori. Nel contesto del mio esempio, ciò significa che una volta 100 pixel sono accantonati per colonne uno e due, due terzi dello spazio rimanente sarà dato colonna tre e quattro colonna sarà data un terzo.

Con la griglia definita, è facile posizionare gli elementi figlio all'interno della griglia assegnando valori di riga e di colonna, in questo modo:

#main {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  -ms-grid-row-span: 2;
  -ms-grid-row-align: center;
}

Qui, sto ponendo il mio elemento sezionamento "principale" presso la seconda riga e la colonna della griglia. Io sto permettendo tale elemento in modo da occupare due righe e sto centrare il contenuto all'interno del contenitore. Il sito di Microsoft Internet Explorer Test Drive Demo utilizza l'implementazione del CSS Layout di griglia nel creare un'implementazione esatta del sito popolare sistema di rete, thegridsystem.org, e si può controllare voi stessi a bit.ly/gEkZkE.

Se hai mai provato qualcosa di simile con il markup e CSS, hai visto senza dubbio la flessibilità che può fornire la griglia di CSS. In più, quando combinato con le query di mezzi di comunicazione, la griglia di CSS consente di creare layout adattivo che sono facili da tweak con numero di modifiche regola gli utenti regolare l'orientamento e le dimensioni del dispositivo.

La specifica disposizione finale ti presento è il CSS modulo di Layout multi-colonna, che troverete a bit.ly/yYEdts. Il multi-column CSS è allo stato "Candidato raccomandazione" (bit.ly/x5IbJv) e gode di un ampio sostegno in tutti i browser, compreso il supporto programmato per Internet Explorer 10. Come sembra, multi-column permette di definire colonne su una pagina senza posizionamento manuale o galleggia. Tutto ciò che serve è quello di applicare la proprietà "della larghezza delle colonne" (con prefissi, dove richiesto) su un contenitore, in questo modo:

article {
  width: 960px;
  column-width: 240px;
}

Con questa regola, elementi articolo saranno suddivisa in colonne di 240 pixel, creando delle colonne come molti come il contenitore consente (in questo caso, ci vogliono quattro colonne di 240-pixel per riempire il contenitore 960 pixel). Potrei anche usare la proprietà count colonna per definire un numero fisso di colonne, nel qual caso la colonna larghezze sarebbero state distribuite in modo uniforme nella larghezza del mio contenitore.

Come con i moduli Flexbox e Grid, che unisce il modulo con le query supporti permette rapidamente definire regole semplici, adattabile per offrire un'esperienza utente ideale per gli utenti mobili.

I tre moduli che ho descritto hanno molto in comune, e ciascuno ha caratteristiche è possibile utilizzare per creare il tipo di layout fluido, che sono un requisito per i siti Web veramente reattive. Io vi incoraggio a ricerca e giocare con ogni modo che potete scegliere il modulo appropriato quando risolvere una sfida dato layout.

Ti consigliamo di controllare i quadri emergenti che si avvalgono di tali specifiche. Usando uno di questi può essere un bel Jump-Start alla costruzione di un layout fluido per i propri siti. Due importanti quadri sono scheletro (getSkeleton.com) e Bootstrap (twitter.github.com/bootstrap), uno starter kit di luogo pieno da Twitter. Recentemente ricostruito uno dei miei siti con l'aiuto dello scheletro (check it out a html5tx.com).

Media reattiva

Nel Regno di reattivo Web design — mobile in particolare — media è il wicket sticky. Iniziamo con le immagini. Uno dei modi più semplici per le immagini di stile per renderli più reattivo è quello di aggiungere quanto segue alla vostra i fogli di stile:

img {
    max-width: 100%;
  }

Questa regola sempre scalerà le vostre immagini (su o in giù) per adattarsi all'interno del contenitore padre di quell'immagine. Così, se gli elementi contenitore sono sensibili (magari utilizzando una delle tecniche descritte in precedenza), le immagini sono pure.

La sfida con questo metodo è che le immagini sul tuo sito devono essere sufficientemente grande da scalare in qualsiasi dimensione che essi plausibilmente potrebbe aver bisogno di essere. Nel sito Photo Gallery che sto usando, immagini raw sono abbastanza grandi e quindi possono gestire viene ridimensionata.

L'uso di immagini di enorme, ridimensionabile, tuttavia, porta a un problema enorme per il mobile: sovraccarico e quindi di esperienze mobile potenzialmente povere. Anche se stai ridimensionamento di un'immagine di grandi dimensioni per adattarsi a una finestra di 320 x 240, l'immagine viene trasferita al dispositivo. Questo significa che si potrebbe potenzialmente inviando una foto 2 MB quando una foto 10 KB è tutto il dispositivo richiede. In un mondo mobile, larghezza di banda ancora questioni, così la strategia di dispositivo larghezza deve essere soppiantata con altri approcci.

Purtroppo, questa è ancora una sfida e W3C non supporta ancora formalmente un approccio particolare. Esiste una serie di metodi per trattare con immagini sensible a reagire, ma tutti rientrano in due categorie: essi affrontare il problema sul server, o tentare di farlo su client. Molti approcci di server, come quello descritto in bit.ly/rQG0Kw, si basano sull'uso di immagini segnaposto 1 x 1 pixel, i biscotti di client e server-riscrivere le regole al fine di fornire la giusta immagine al dispositivo di destro. Cliente si avvicina, come quello descritto in bit.ly/tIdNYh, spesso utilizzano JavaScript, <noscript> i fallback, commenti condizionali e alcuni interessanti trucchi nei CSS. Entrambi gli approcci voglia hack (perché sono), ma rappresentano il meglio che siamo riusciti a venire con dato i vincoli del <img> Tag. A breve termine, si sarebbe saggio dare un'occhiata a entrambi gli approcci e decidere che lavora per le vostre applicazioni.

Nel lungo termine, tuttavia, potrebbe esserci speranza. In un articolo su Smashing Magazine, "HTML5 semantica" (bit.ly/rRZ5Bl), Bruce Lawson dell'Opera sostiene per l'aggiunta di un <picture> elemento che avrebbe si comportano allo stesso modo a <audio> e <video> Tag, che significa che gli sviluppatori avrebbero accesso a molteplici <source> elementi figlio all'interno dell'elemento padre <picture>. Quando combinato con le query di mezzi di comunicazione in linea, un nuovo <picture> elemento potrebbe fornire un bel modo per consegnare finalmente una soluzione robusta per immagini sensible a reagire:

<picture alt="cat gallery">
  <source src="nyan-high.png" media="min-width:800px" />
  <source src="nyan-med.png" media="min-width:480px" />
  <source src="nyan-low.png" />
  <!-- fallback for unsupporting browsers -->
  <img src="nyan-med.png" alt="cat gallery" />
</picture>

Anche se questa soluzione ha dimostrato di essere popolare, e un gruppo di comunità di W3C è stato formato intorno ad esso (bit.ly/AEjoNt), non non c'è nessun gruppo di lavoro formale che io sono consapevole di. Forse vedremo questo elemento lo rendono in tempo per HTML6.

Sfide simili esistono per l'aggiunta di video sensible a reagire a siti e applicazioni, anche se esistono soluzioni più robusti in HTML5 per video rispetto per le immagini. Per cominciare, i mezzi di comunicazione-query-enhanced <source> elemento — come illustrato con il già citato immaginario <picture> elemento — è valida per <video>, come illustrato di seguito:

<video>
  <source src="nyan-mashup-high.webm" media="min-width:800px" />
  <source src="nyan-mashup-med.webm" media="min-width:480px" />
  <source src="nyan-mashup-low.webm" />
  <!-- Insert Silverlight or Flash Fallback here -->
</video>

Se si sta servendo il video dal vostro proprio server o utilizza un servizio che offre più versioni per incorporare, mi raccomando con questa sintassi per garantire agli utenti di ottenere un'amichevole di dispositivo video.

Mentre questa soluzione vi aiuterà a risparmiare larghezza di banda degli utenti, è necessario pensare a ridimensionamento che quelli incorporati elementi video, proprio come si fa con le immagini. Con le query di mezzi di comunicazione, è facile da adattare gli elementi video basati su varie dimensioni di schermo, ma se siete alla ricerca di una soluzione che è un po' più automatizzato, dare un'occhiata a FitVids.js (fitvidsjs.com), un plug-in jQuery che farà automaticamente gli elementi video fluido e reattivo. Tenete presente, tuttavia, che, come un jQuery plug-in, che questa soluzione non funziona per gli utenti con JavaScript disabilitato.

Costruire applicazioni con HTML5 Framework Web Mobile

Ora che abbiamo coperto due pilastri di reattivo Web design, layout fluido e immagini flessibile, parliamo un po' di casi dove si sta costruendo non solo siti Web o applicazioni mobile-friendly — in particolare destinazione l'esperienza mobile.

Nel mondo di sviluppo, tradizionali desktop (o client) e paradigmi Web hanno dato modo di un terzo tipo di applicazione, spesso chiamate applicazioni native perché sono residente su un determinato dispositivo (smartphone basato su Windows Phone o iPad, per esempio), vengono sviluppate utilizzando specifiche del dispositivo quadri (iOS e Android) e vengono installate tramite un App Store o Marketplace.

Come ricco e robusta come questi quadri sono a volte gli sviluppatori desiderano fornire una sensazione simile"nativa" alle loro applicazioni Web mobile Web. Tali applicazioni ancora risiedono sui server e possono essere consegnate di fuori di un dispositivo di App Store o Marketplace.

Anche se certamente può costruire questi tipi di applicazioni a mano, è comune l'utilizzo di quadri di farlo. Una scelta popolare per applicazioni Web mobili è jQuery Mobile (jquerymobile.com), un framework di sviluppo mobile che fornisce un'interfaccia utente basata su HTML5 del sistema per il targeting quasi ogni piattaforma mobile. Figura 4 mostra un esempio di applicazione mobile per OpenTable.com, che è stata costruita utilizzando jQuery UI.

Figura 4 A campione Mobile Screen costruito con jQuery Mobile

Un'altra opzione popolare per la creazione di applicazioni mobili con un aspetto nativo è Kendo UI Mobile (kendoui.com), un quadro di HTML5, JavaScript e CSS da Telerik Inc. Kendo interfaccia utente consente di creare applicazioni mobili che sembrano completamente native su dispositivi basati su iOS e Android — e di farlo con una singola base di codice. Figura 5 e Figura 6 mostrare questa caratteristica in azione, che si può verificare voi stessi a bit.ly/wBgFBj.

Figura 5 A Kendo UI Mobile Demo applicazione visualizzati su un dispositivo basato su iOS

Applicazione Mobile figura 6 esempio Kendo dell'interfaccia utente visualizzati su un dispositivo basato su Android

Creazione di applicazioni Native con HTML5

Fornendo una sensazione nativa ad applicazioni Web è un ottimo modo per leva non solo le tue abilità come uno sviluppatore Web, ma anche per creare applicazioni conformi alle aspettative di un utente in un ambiente mobile. Eppure, queste applicazioni possono solo andare così lontano nel leveraging API e sensori nativi su tali dispositivi. Mentre alcune caratteristiche — come geolocation — mobile browser, vengono forniti molti — come l'accelerometro o video — non sono. Al fine di accedere a queste funzionalità, le applicazioni native sono ancora la strada da percorrere.

La grande notizia, tuttavia, è che la popolarità di programmazione Web è abilitata, HTML5, JavaScript e CSS "andare nativa," come se fosse. Popolare Framework come PhoneGap (phonegap.com) e titanio Appcelerator (appcelerator.com) consentono di utilizzare HTML5 e JavaScript per costruire applicazioni native per iOS, Android e Windows Phone, con le API di dispositivo di accesso per l'avvio. In più, Framework di sviluppo mobile come jQuery Mobile e Kendo UI Mobile funziona altrettanto bene in questi ambienti come fanno nel browser. Figura 7 viene illustrata un'applicazione nativa iOS costruita utilizzando PhoneGap e interfaccia utente di Kendo. Per ulteriori informazioni, controllare il post di blog in bit.ly/zpIAPY.

Figura 7 un iOS applicazione costruita con HTML, JavaScript e CSS

Microsoft ha conquistato lo sviluppo Web nativo ad un nuovo livello formalmente l'aggiunta del supporto per la creazione di applicazioni Windows 8 utilizzando HTML5, JavaScript e CSS, tutti senza ulteriori astrazioni o quadri necessari. È possibile controllare l'anteprima dei consumatori di Windows 8, così come i nuovi strumenti di sviluppatore per queste piattaforme, a dev.windows.com.

Quando si tratta di mobile Web, you've got scelte! Se sei un programmatore Web che vuole costruire esperienze native, completo di funzionalità di realtà aumentata, check out Windows 8 o un quadro, come PhoneGap o Appcelerator di titanio. Se stai solo cercando un tatto nativo nel browser, guarda jQuery UI e Kendo interfaccia utente Mobile. Infine, se il tuo obiettivo è quello di creare un singolo sito Web o un'applicazione che risponde a molte periferiche ed esperienze, provare le strategie reattive che ho discusso in questo e l'articolo del mese scorso. Non c'è alcun dubbio che mobile non è una delle piattaforme più scottante per sviluppo proprio ora. La soluzione migliore, non importa quale delle strategie o piattaforme sceglie, è di rendere mobile vostra priorità di sviluppo superiore.

Brandon Satrom è product manager per l'interfaccia utente di Kendo (kendoui.com), un HTML5 e toolset mobile da Telerik Inc. Ha blog a userinexperience.com, possono essere seguiti su Twitter a twitter.com/brandonsatrom ed è al centro della freneticamente scrivere il libro, "Costruzione della metropolitana stile Apps per Windows 8 in JavaScript," con Chris vende.

Grazie ai seguenti esperti tecnici per la revisione di questo articolo: Jon Box, Burke Holland e Sell Clark