Un'introduzione all'utilizzo di YUI 3 in applicazioni off-line

27 Maggio 2010 alle 13:53 da Alexander Kessinger | In Sviluppo | 9 Commenti

Circa l'autore: Alex Kessinger lavora come ingegnere front-end passato a Inizio a lavorare come un front-end, si diverte lavorando sulla intero stack. Passa anche un sacco di tempo a leggere, curatela, e la scrittura su Internet, social media, e la costruzione di siti web. Potete trovare tutto questo sul suo sito web alexkessinger.net . È anche possibile trovarlo su Twitter @ voidfiles .

Potrei dire che HTML5 sta costruendo a vapore, ma che il tempo è passato: HTML5 è qui. Mobile è già enorme, WebKit è in rapida crescita, e il numero di persone che hanno un browser HTML5-capable sul loro telefono e / o computer portatile nei prossimi anni di creare una "nuova normalità", in cui funzionalità sono lo standard HTML5.

Una delle caratteristiche più impressionanti in HTML5 è la cache dell'applicazione , che dà dei siti web la possibilità di dire al browser quali file di cache e di utilizzare i file memorizzati nella cache quando il browser non dispone di una connessione di rete. È possibile utilizzare la cache dell'applicazione per garantire che un utente sarà in grado di accedere almeno una parte della vostra applicazione, mentre lui è in linea. Nel caso di dispositivi come telefoni cellulari o compresse (o anche di dispositivi vecchio stile come i notebook), questo potrebbe significare che gli utenti siano in grado di utilizzare la tua applicazione mentre su un aereo. Nel frattempo, si arriva a continuare a costruire la tua applicazione con tecnologie web piuttosto che imparare Objective-C.

Oltre alla cache dell'applicazione , ci sono anche altre API disponibili in HTML5 che consentono agli sviluppatori Web, gli strumenti per creare esperienze offline utile. Ci sono due API di memorizzazione persistente disponibile nella maggior parte dei browser più recenti. Uno è una semplice chiave / valore di memorizzare i dati, chiamato localStorage . Il secondo è un database SQL . Entrambi possono essere utilizzati mentre l'utente è offline.

Con questi concetti in mente, ho intenzione di esplorare la sempreverde "To Do list" applicazione, utilizzandolo come trampolino di lancio per guardare come si possa sfruttare la cache di applicazione e stoccaggio persistente in una applicazione che si basa su tutto ciò che amiamo di YUI 3, tra cui la Galleria YUI 3.

Markup

Markup è sempre un ottimo punto di partenza quando costruire nulla collegato al Internet. La scocca di base della nostra pagina HTML5:

  <! DOCTYPE HTML>
 <Html
 <head>
     <title> YUI ToDo </ title>
     <link rel="stylesheet" href="base.css" type="text/css" media="screen" title="Non title" charset="utf-8">
 </ Head>
 <body class="yui-skin-sam">
     src="yui-min.js"> <script </ script>
     src="base.js"> <script </ script>
 </ Body>
 </ Html>

Anche se stiamo costruendo un'applicazione offline-ready, seguire la migliore prassi, ma mettendo in testa CSS, Javascript e appena prima del tag body di chiusura. Anche se la vostra pagina sarà disponibile non in linea, il caricamento della pagina iniziale deve essere rapida. (Si noti che stiamo usando la doctype incredibilmente semplice HTML5 qui.)

L'applicazione ha bisogno di markup segnaposto:

 <! DOCTYPE HTML> <html> <title> YUI ToDo </ title> <link rel = "stylesheet" href = tipo "base.css" = "text / css" media = titolo "screen" = "non > titolo "charset =" utf-8 "> </ head <body class="yui-skin-sam"> <div id="doc3"> <div class="hd"> <h1> ToDo App </ h1 > <a class="callout" href="http://alexkessinger.net" target="_blank"> da Alex Kessinger </ a class="item_entry"> div> <form ingresso class="entry_form"> < = nome tipo "text" = classe "todo_item_input" = "todo_item_input"> <p class="toRight"> <a class="addItem" href="#add"> Aggiungi </ a> </ p> </ form > </ div> </ div> <div class="bd"> <div class="yui-main"> <div class="yui-b"> <div class="todo_items"> <h2> elementi di attività </ h2> <ul> <li class="no_items"> Recupero di elementi di attività ...</ li> </ ul> </ div> </ div> </ div> </ div> <div id = " debug "> </ div> <! - processo di inizializzazione src="yui-min.js"> <script //--> </ script> <script src="base.js"> </ script> </ div> </ body> </ html> 

Questo permetterà all'utente di sapere che stiamo pensando di ottenere alcuni dati per loro la prima volta che carico l'applicazione. Essa stabilisce inoltre il nostro stadio, una struttura DOM per la nostra Javascript per iniziare a lavorare con.

Una nota sugli progressive enhancement

Non c'è ragione che la domanda non può essere costruita con i principi di valorizzazione progressiva e ancora disponibile per l'utilizzo offline. In questa esplorazione, sto tralasciando la complessità aggiuntive che sarebbero coinvolti in PE al fine di concentrare il più possibile sulle tecniche necessarie per il supporto offline. Qualcuno potrebbe criticare questo approccio, e io sono favorevole a tale argomento.

Proprietà aggiuntive per la gestione dei dispositivi mobili

iPhoneOS browser e Android in grado di gestire più pagine web senza alcuna attenzione speciale, ma quando si tratta di dispositivi mobili vale la pena di indagare come il contenuto viene compresso per essere adattata sullo schermo più piccolo. Quirksmode non uno ma due approfonditi articoli su viewport che vale la pena il vostro tempo.

In breve, c'è una meta-tag, viewport chiamato. Sembra qualcosa di simile:

  <meta name="viewport" value="">

Lo scopo del tag viewport è quello di aiutare i browser mobile a capire come visualizzare una pagina web molto grande su un piccolo schermo. I dispositivi mobili hanno bisogno di aiuto perché la maggior parte dispositivi cercare di spremere 700-1100px di contenuti su uno schermo 300-500px. Inoltre, quando abbiamo impostato il nostro larghezza al 100%, il browser deve il suo migliore immaginare quanto grande è la pagina web dovrebbe essere, e poi le scale che da grande per essere dentro la dimensione del dispositivo.

Per aiutare potremmo impostare la finestra a questo.

  <meta name="viewport" value="width=device-width">

Questo dirà il dispositivo per impostare la larghezza della nostra pagina alla larghezza dello schermo del dispositivo. Se ci assicuriamo la nostra pagina è fluido, allora la nostra pagina riempie lo schermo sulla maggior parte dei dispositivi mobili. Questo significa anche che se il telefono è dotato di una modalità paesaggio la pagina si espanderà per riempire lo spazio extra.

Ci sono altre cose che possiamo fare per la viewport pure. Se avete lavorato con i browser mobili, sai che ti permettono di ingrandire. Se si stanno prendendo per il tempo di costruire un sito web per riempire l'intero schermo non si può decidere che un utente essere in grado di zoom. Se abbiamo impostato il nostro viewport di essere qualcosa di simile alla seguente, l'utente non sarà in grado di ingrandire, o fuori. In un dispositivo come l'iPhone, questo può farlo sentire più nativo. Ma se si esegue questa operazione, assicurarsi che il contenuto della vostra applicazione offre all'utente alcuna ragione di voler sempre per lo zoom (ad esempio, testo di piccole dimensioni), altrimenti questo sarà un vincolo di usabilità frustrante.

  <meta name="viewport" value="width=device-width,user-scalable=no">

La finestra non è uno standard W3C, ma è una convenzione comune. E 'attualmente supportata dai browser WebKit su iPhone e sistema operativo Android. Fennec , il browser mobile di Mozilla, probabilmente anche sostenere questa convenzione.

CSS

Più che mai, usando i CSS è la capacità di essere fluido e dinamico, è importante. Se si guarda alla vasta gamma di telefoni, tablet e altri piccoli schermi, gli sviluppatori di applicazioni devono essere consapevoli che le nostre applicazioni stanno per essere utilizzato su una pletora di dispositivi. Anche se non esiste la bacchetta magica che possiamo onda per rendere il tutto solo di lavoro, per la maggior parte delle applicazioni non è necessario essere perfetti pixel su ogni dispositivo. Proprio seguendo le best practices può portarci più il modo di sostenere la maggior parte dei dispositivi.

Partendo con l'impostazione della larghezza della nostra applicazione alla sua base in% è un ottimo inizio. Utilizzando EM per impostare font-dimensioni è utile anche perché EMS sono calcolate in base alla pagina web visualizzata. Un'altra cosa che aiuta è di assicurarsi che la larghezza delle colonne si basa sulle percentuali pure. Anche grondaie colonna può essere impostata in em.

Un ottimo punto di partenza, senza dover fare un sacco di lavoro è un framework CSS. YUI Grids CSS 2 è naturalmente uno dei nostri preferiti, e ci aiuta a pensare alla nostra pagina in termini di rapporti, invece di larghezza blocchi statici.

Così edificio off YUI Grids CSS 2: ecco il CSS di partenza per la mia app.

  . Todo_items {
     padding-top: 1em;
 }

 . Todo_items ul {
     padding: 0;
     margin: 0;
 }
 todo_items. li ul {
     margin: 0,125 em 0 .5 em 0;
     padding: 0,125 em 0 0 0;
     border-top: 1px solid # ccc;
     list-style: none;
     display: block;
     word-wrap: break-word;
     text-wrap: reprimere;
 }

 . ToRight {
      text-align: right;
 }

 . YUI3-console {
      text-align: left;
      margin-left: 10px;
 }

 corpo h1 {font-size: 200%;}
 corpo h2 {font-size: 150%;}

Javascript

Avanti per la nostra linea di cose da fare domanda è il JavaScript. Prima scaricare yui_min.js per la document root, e aggiungerlo al markup come abbiamo in precedenza. Poi mettere questo nel tuo base.js file:

  YUI (). Uso ('nodo', function (Y) {
     ("Todo_items h2"). Y.one setContent ("Sto volando").
 });

Oltre a Nodo, sto anche andando a includere il YUI 3 Reset CSS e YUI Grids CSS 2. Ho intenzione di includere un modulo da 3 YUI Gallery , Ryan Grove eccellente Storage Lite , che andrà a capo di tutti i possibili metodi di archiviazione dei dati locali in uno facile da usare-API.

  YUI (). Uso ('cssreset', 'yui2-reti', galleria-storage-Lite ',' nodo ', function (Y) {

   / / TO DO-APPLICAZIONE CODICE LISTA

 });

Nota: Non ho intenzione di fare un tuffo nel fare-code lista, né in alcune delle tecniche userei per rendere più facile eseguire il debug di questo tipo di progetto su dispositivi mobili. Potete trovare tutto questo in github: YUI3-todo . All'interno base.js troverete la totalità del app. È anche possibile vedere l'applicazione in funzione presso http://html5.alexkessinger.net/yui/ytodo/ . Qui, ho intenzione di concentrarsi sulle misure necessarie per migliorare questa semplice applicazione con funzionalità offline.

Cache Manifesto

Il primo passo per prendere una web app offline è la cache dell'applicazione . La cache di applicazioni possono dire al vostro browser quali file si desidera scaricare e tenere in linea. In questo esempio, so che voglio mantenere la mia JavaScript e CSS mia linea, così come la pagina HTML principale per l'applicazione. Con questo in mente, il mio manifesto cache sarà simile a questa:

  CACHE MANIFESTO

 index.html
 base.css
 yui_min.js
 base.js

Alcune cose da notare il manifesto di cache.

  • Si deve iniziare con la linea CACHE MANIFEST .
  • È necessario servire con un header Content-Type text / cache-manifesto

Se siete su Apache, è possibile aggiungere il seguente frammento di .htaccess per ottenere il tipo di contenuto a destra.

  AddType text / cache-manifesto. Manifesto 

Con quella in atto, con un qualsiasi file .manifest suffisso sarà servita con il text/cache-manifest -Type header Content.

Poi abbiamo bisogno di informare il browser del manifesto di cache, per fare questo si aggiunge un attributo alla nostra tag HTML:

  manifest="todo.manifest"> <html

Ora, se vai alla tua pagina in un browser che supporta applicazioni offline probabilmente vedrete una notifica che indica che il sito è richiesto l'accesso offline.

Offline / online

Con il manifesto in luogo raccontare il nostro browser quali risorse mettere in cache, siamo pronti a pensare a ciò che accade in modalità versus online in modalità offline. Ora ci sono due "sequenze di avvio", il primo è la sequenza completa online che già abbiamo (e durante la quale le risorse sono memorizzate per un uso offline). Questa sequenza online utilizza il CDN Yahoo per caricare i file, ei file sono combo-manipolate in modo abbiamo solo alcune richieste HTTP.

Ma siamo anche la costruzione di una procedura di avvio non in linea. Dobbiamo essere in grado di rilevare il fatto che il browser non è in linea e quindi inizializzare correttamente YUI di attingere risorse memorizzate nella cache.

  online var = (navigator.onLine)?  true: false; 

Adesso, abbiamo solo bisogno di scegliere un oggetto di configurazione basata su essere offline o online.

  var YUI_ONLINE_CONF = {},
     YUI_OFFLINE_CONF = {
         base: "yui3/build /",
         unire: 0,
         gruppi: {
             Galleria: {
                 base: 'yui3-gallery/build /',
                 modelli: {'gallery-': {}}
             },
             yui2: {
                 base: «2 in3/dist/2.8.0/build / ',
                 modelli: {
                     'Yui2-': {
                         configFn: funzione (me) {
                             if (/-pelle | reset | font | griglie | base / .test (me.name)) {
                                 me.type = 'css';
                                 me.path = me.path.replace (/ \ js /, 'css'..);
                                 me.path = me.path.replace (/ \ / yui2-pelle /, '/ assets/skins/sam/yui2-skin');
                             }
                         }
                     }
                 }
             }
         }
      },
      ONLINE = (navigator.online)?  true: false;
      CURRENT_CONF = (online)?  YUI_ONLINE_CONF: YUI_OFFLINE_CONF;

 YUI (CURRENT_CONF). Usare 'galleria-storage-lite' ('cssreset', 'yui2-reti', 'nodo', function (Y) {
     ...
 });

Il YUI_OFFLINE_CONF configurazione potrebbe essere necessario qualche spiegazione. In primo luogo, io sto cambiando la base per la mia radice documento + yui3/build/ . Ho inviato la distribuzione completa di YUI 3 al mio server, perché le specifiche del W3C afferma che la cache non in linea ha una sola origine politica rigorosa. Cache Tutte le risorse devono provenire dallo stesso dominio come fa il manifesto. Di conseguenza, non posso contare su Yahoo! o Google o qualsiasi altro CDN per servire il mio file - tutti devono essere disponibili per la memorizzazione nella cache dal mio server.

La parte successiva, combine:0 , racconta il caricatore YUI di combo non automaticamente i file, perché io non ho un combo-gestore installato sul mio server.

Infine, vorrei menzionare il groups di configurazione. Groups è una nuova funzionalità di YUI 3.1.1 che permette di definire gruppi interi di file che provengono dallo stesso luogo. È anche possibile configurare loro di essere combo'd dalla fonte. Ho impostato il YUI 3 Gallery qui per caricare da una copia locale ho della galleria-YUI3 repository su GitHub.

Quando siamo on-line, siamo in grado di bootstrap dal CDN Yahoo, ma in linea abbiamo bisogno di avere le copie locali dei file. Questo è facile da fare. È possibile scaricare i file bisogni in un file zip grande directory:

  docroot cd;
 http://yuilibrary.com/downloads/yui3/yui_3.1.0.zip wget;
 unzip yui_3.1.0.zip;
 mv yui YUI3;
 http://download.github.com/yui-yui3-gallery-gallery-2010.05.19-19-08-0-g2a49f06.zip wget;
 yui unzip-YUI3-gallery-gallery-2010.05.19-19-08-0-g2a49f06.zip;
 yui MV-YUI3-gallery-2a49f06 YUI3-gallery;
 http://download.github.com/yui-2in3-yui-2in3.3-0-gdf09025.zip wget;
 yui MV-2in3-yui-2in3.3-0-gdf09025 2in3;

Oppure si può clonare il repository git da github direttamente se git è installato sulla vostra macchina:

  docroot cd;
 git clone git: / / github.com/yui/yui3.git YUI3;
 git clone git: / / github.com/yui/yui3-gallery.git YUI3-gallery;
 git clone git: / / 2in3 github.com/yui/2in3.git;

Fini di prova. Io a volte insieme ONLINE = false e verificare come i miei carichi sito. Se lo fai, e poi visitare la vostra applicazione in un normale browser, è possibile vedere ogni file che deve essere incluso individualmente. Per una corretta compila il nostro manifesto cache, è necessario prendere nota di ogni file di essere tirato dentro, usando qualcosa come Firebug. Poi nella cache manifesto vi elencherà ogni file per uno. Sarà simile a questo.

  CACHE MANIFESTO
 # Un commento
 index.html
 base.css
 base.js
 yui-min.js
 yui3/build/loader/loader-min.js
 yui3/build/widget/assets/skins/sam/widget.css
 yui3/build/console/assets/skins/sam/console.css
 yui3/build/oop/oop-min.js
 yui3/build/event-custom/event-custom-min.js
 yui3/build/intl/intl-min.js
 yui3/build/console/lang/console.js
 yui3/build/attribute/attribute-min.js
 yui3/build/event/event-base-min.js
 yui3/build/pluginhost/pluginhost-min.js
 yui3/build/dom/dom-min.js
 yui3/build/node/node-min.js
 yui3/build/event/event-delegate-min.js
 yui3/build/event/event-focus-min.js
 yui3/build/base/base-min.js
 yui3/build/classnamemanager/classnamemanager-min.js
 yui3/build/widget/widget-min.js
 yui3/build/substitute/substitute-min.js
 yui3/build/console/console-min.js
 yui3/build/cssreset/reset-min.css
 2in3/dist/2.8.0/build/yui2-grids/yui2-grids-min.css
 yui3-gallery/build/gallery-storage-lite/gallery-storage-lite-min.js
 yui3/build/json/json-min.js
 startup.png
 icon.png

A questo punto possiamo andare tutta la linea modo. Se avete un dispositivo iPhoneOS o Android (o qualsiasi altro browser HTML5-capable) è ora possibile visitare la vostra pagina web, lasciate finire il caricamento, e quindi ricaricare la pagina con accesso a Internet del dispositivo disabili.

IPhone extra-Specific

L'iPhone offre allo sviluppatore WebApp la capacità di dare la vostra applicazione po 'di spazio sullo schermo principale, proprio come tutte le altre applicazioni. Si può anche avere l'icona di un lucido e la schermata di avvio, come avresti avuto con una applicazione "nativa". In primo luogo, è necessario seguire le specifiche per l'icona e schermata di avvio. E poi si può aggiungere il seguente meta tag:

  <meta name="apple-mobile-web-app-capable" content="yes" />
 <meta name="apple-mobile-web-app-status-bar-style" content="white" />
 <link rel="apple-touch-icon" href="icon.png"/>
 <link rel="apple-touch-startup-image" href="startup.png" />

Le prime due etichette dire Safari Mobile che la tua pagina web è un WebApp HTML5 e che tu pallida il colore della barra di stato nella parte superiore di colore bianco. Questo rimuoverà anche tutti i cromo navigazione intorno finestra del browser. Il secondo punto due tag ai file che si desidera utilizzare per la vostra icona e schermata di avvio.

What's Next

Le specifiche HTML5 è ancora un bersaglio mobile. Tenete d'occhio per nuovi sviluppi. Detto questo, anche oggi ci sono fantastiche nuove funzionalità nei browser moderni. Come si può vedere da questo tutorial, non è difficile prendere una applicazione web offline, aumentando drasticamente è potenziale utilità. E, quando si va offline, non esitate a prendere YUI 3 con voi, insieme con tutto il potere si è abituato a dal 3 YUI Gallery e il 2 famiglia widget YUI.

Condividi e ampliare: Bookmark con del.icio.us | digg it! | reddit!

9 Commenti »

RSS feed dei commenti a questo post. TrackBack URI

  1. So che il punto qui è di demo, ma abbiamo ancora bisogno di vedere il codice che potrebbe essere utilizzato nella vita reale. Ci potrebbe essere un bug nei browser che navigator.online sostegno dont

    si prova in questo modo
    var = online (navigator.online)? true: false;

    così un IE dovrà sempre considerare che è in linea perché la proprietà non esiste, mentre l'applicazione potrebbe funzionare, almeno in linea

    Commento di jpvincent - 28 Maggio 2010 #

  2. Smesso di leggere a? true: false.

    Commento di hj - 28 maggio 2010 #

  3. Entrambi 6dev FF 3.6.3 e Chrome non ha ancora navigator.online proprietà ma navigator.onLine. Con grande L.

    Commento di Lipus Matjaž - 28 Maggio 2010 #

  4. Mi piacerebbe abbracciare HTML5, ma, non è forse troppo presto per saltare sul carro HTML5?

    basata su wikipedia si dice:
    citazione da Wikipedia:

    "... Specifica HTML5, prevede il disciplinare per raggiungere la raccomandazione W3C Candidate stadio durante il 2012, e la raccomandazione del W3C per l'anno 2022 o più tardi ...".

    Commento di Levan - 28 Maggio 2010 #

  5. jpvincent @ il navigator.onLine è stato in IE dal 4.0.

    @ Matjaž Lipus lei ha ragione. Questo in realtà così dappertutto, non solo l'iPhone. Abbiamo corretto l'errore in questo articolo, e ho anche fissato nel mio codice.

    @ Levan HTML5 è un bersaglio mobile, ma i browser hanno implementato porzioni di esso già. Anche i telefoni e altri dispositivi mobili con probabile solo iniziare con capacità HTML5. Anche in futuro, sembra come se il gruppo di norme è spostato su un nuovo versioni non-numero di sequenza. Quindi, in sostanza si suol vedere qualcosa tipo "HTML7" la specifica continuerà a evoluta lentamente, e gli sviluppatori dovranno prendere decisioni su singole funzionalità invece di tentare di decidere se o non stanno andando a sostenere l'intera faccenda.

    Commento di Kessinger Alexander - 28 maggio 2010 #

  6. [...] Introduzione all'utilizzo YUI 3 in applicazioni offline Una delle caratteristiche più impressionanti in HTML5 è la cache dell'applicazione, che dà dei siti web la possibilità di dire al browser quali file di cache e di utilizzare i file memorizzati nella cache quando il browser doesn ' t hanno una connessione di rete. È possibile utilizzare la cache dell'applicazione per garantire che un utente sarà in grado di accedere almeno una parte della vostra applicazione, mentre lui è in linea. (Tags: html javascript 2010) scritto il 30/05/10 da giorgio_v. [...]

    Pingback da collegamenti per 2010/05/30 - ReFactor.it - 30 Maggio 2010 #

  7. Errore di battitura: "... e che si wan il colore della barra di stato ..."

    "WAN" s / b "voglio"

    Commento di Kovacs - 30 Maggio 2010 #

  8. [...] o di archiviazione di database per memorizzare i vostri componenti. Alex Kessinger recente post sul blog di YUI, un'introduzione all'uso di YUI 3 in applicazioni off-line, potrebbe essere di interesse per YUI 3 sviluppatori di considerare questa [...]

    Pingback da Mobile Browser Limiti Cache: Android, Ios, e webOS »Inizio User Interface Blog (YUIBlog) - 28 Giugno 2010 #

  9. Le mie osservazioni sull'aspetto stessa origine:

    Come per i miei test, e la lettura della specifica [1], lo stesso vincolo di origine si applica solo alle voci esplicito riferimento cache se si sta accedendo il manifesto su HTTPS (o qualche altro protocollo di sicurezza).

    Quindi, nell'esempio precedente, sembra che sarebbe andata bene per tirare codice YUI dal CDN. Si deve ancora ottenere memorizzata nella cache per l'utilizzo offline. Sarei interessato a sapere se si vede diversamente.

    [1] HTML 5, il parsing Offline Cache manifesti (vedi punto 28: analisi Tokens)

    Commento di Desai Satyen - 12 Ottobre 2010 #

Lascia un commento

Nota: I commenti sono moderati per la prima volta. Spam eliminato.

XHTML: <a href="" title="La <acronym title="La <abbr title="La <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Ospitato da Yahoo

Copyright © 2006-2011 Inizio Inc. Tutti i diritti riservati. Norme sulla privacy - Termini di servizio

Powered by WordPress su Yahoo! Web Hosting .