Uvod u korištenje YUI 3 u offline aplikacije

27. svibanj 2010 u 13:53 Aleksandar Kessinger | U razvoj | 9 Komentari

O Autor: Alex Kessinger radi kao front-end inženjer Yahoo prošlosti radio kao front-end, on uživa radeći na cijeli stog. On je također troši puno vremena za čitanje, curating, i pisanje o internetu, društvenim medijima, te izgradnju web stranice. Možete pronaći sve to na svoje web stranice alexkessinger.net . Također možete ga pronaći na Twitteru @ voidfiles .

Mogao bih reći da HTML5 je zgrada pare, ali to vrijeme je prošlo: HTML5 je ovdje. Mobitel je već ogroman, WebKit ubrzano raste, a broj ljudi koji će imati HTML5-sposoban web preglednika na telefonu i / ili prijenosno računalo u narednih nekoliko godina će stvoriti "nova normalan", u kojem HTML5 mogućnosti su standardne.

Jedan od Awesome značajke u HTML5 je aplikacija Cache , što daje mogućnost da web preglednik reći koja datoteka cache i korištenje spremljene datoteke kada preglednik ne imate mrežnu vezu. Možete koristiti Cache Zahtjev kako bi se osiguralo da korisnik će biti u mogućnosti pristupiti na barem dio svog app dok je odsutan. U slučaju uređaja poput telefona ili tablete (ili čak i starinski uređaja poput laptopa), to bi moglo značiti da korisnici mogu koristiti svoj app, a na zrakoplov. U međuvremenu, možete doći do nastaviti izgradnju svoje aplikacije s web tehnologijama, a ne učenje Objective-C.

Osim primjene Cache , postoje i druge API dostupan u HTML5 koje daju web programere alata za izradu korisnih offline iskustva. Postoje dvije trajne pohrane API dostupan u većini novijih preglednika. Jedan od njih je jednostavan ključ / vrijednost za spremanje podataka, zove localStorage . Drugi je SQL baza podataka . Oba može utjecati dok je korisnik odsutan.

S tih pojmova na umu, ja ću istražiti zimzelene "Da li popis" aplikacije, koristeći ga kao odskočnu dasku za pogledati kako možemo iskoristiti Primjena Cache i trajne pohrane u app koji se nadovezuje na sve što o ljubavi YUI 3, uključujući i YUI 3 galerije.

Markup

Marža je uvijek veliko mjesto za početak kada zgrada ništa se odnose na webu. Osnovna ljuska našeg HTML5 stranice: 

 <! DOCTYPE HTML> <HTML <head> <title> YUI ToDo </ title> <vode rel = "stylesheet" href = "base.css" type = "text / css" medija = "zaslon" title = "bez naslova "charset =" utf-8 "> </ head> <body class="yui-skin-sam"> <script src="yui-min.js"> </ script> <skripta src =" base.js " > </ script> </ body> </ html>

Iako ste gradimo offline spreman aplikacije, slijedite najbolje prakse, ali stavljajući CSS u glavu, i JavaScript neposredno prije zatvaranja tag tijelo. Čak i ako vaše stranice će biti dostupne izvan mreže, početno opterećenje stranici bi trebao biti odgovarajući. (Imajte na umu da smo koristeći zastrašujuće jednostavan HTML5 DOCTYPE ovdje.)

App treba neki rezervirano obilježja: 

  <! DOCTYPE HTML>
 <html>
 <head>
    <title> YUI ToDo </ title>
    <link rel="stylesheet" href="base.css" type="text/css" media="screen" title="no title" 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"> Alex Kessinger </ a>
             <div class="item_entry">
                 <form class="entry_form">
                     <input type="text" name="todo_item_input" class="todo_item_input">
                     <p class="toRight"> <a class="addItem" href="#add"> Dodaj </ a> </ p>
                 </ Form>
             </ Div>
         </ Div>
         <div class="bd">
             <div class="yui-main">
                 <div class="yui-b">
                     <div class="todo_items">
                         <h2> Todo stavke </ h2>
                         <ul>
                             <li class="no_items"> Dohvaćanje ToDo Stavke ...</ li>
                         </ Ul>
                     </ Div>
                 </ Div>
             </ Div>
         </ Div>
         <div id="debug"> </ div>
         <- Početni postupak //-->
         <script src="yui-min.js"> </ script>
         <script src="base.js"> </ script>
     </ Div>
 </ Body>
 </ Html>

To će pustiti korisnik znati da smo na planiranje uzimajući neke podatke za njih kada su prvi opterećenje app. Ona također postavlja našu pozornicu, DOM struktura za naše Javascript da počnete raditi sa.

Napomena o Progressive Enhancement

Nema razloga da se zahtjev ne može biti izgrađen s načelima progresivne dodatne opreme i još uvijek su dostupne za izvanmrežno korištenje. U ovom istraživanju, ja sam izostavljajući dodatne složenosti koji će biti uključeni u PE, kako bi se fokus što je više moguće o tehnikama potrebno za offline podršku. Neki bi mogli kritizirati taj pristup, a ja sam simpatički na tu tvrdnju.

Dodatna svojstva za rukovanje mobilne uređaje

iPhoneOS i Android preglednicima može nositi s većinom web stranice, bez posebnu pozornost, ali kada se bave mobilnim uređajima je vrijedno istražuju kako sadržaj dobiva stisnut da stane na manji zaslon. Quirksmode nije jedan nego dva in-depth članak na viewport koje su dobro vrijedi vaše vrijeme.

Ukratko, tu je meta oznaka, pod nazivom pogleda. To izgleda ovako: 

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

Cilj viewport oznaka za pomoć mobilne preglednike shvatiti kako prikazati stvarno velik web stranica na malom zaslonu. Mobilni uređaji potrebna pomoć, jer je većina uređaja pokušati ugurati 700-1100px sadržaja na 300-500px zaslona. Također, kada smo postavili naš širine na 100%, preglednik ima svoje najbolje pogoditi kako veliki web stranica bi trebao biti, a zatim ga ljuske iz te velike da stane unutar veličini uređaja.

Da bi smo mogli postaviti viewport na to. 

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

To će reći uređaj za postavljanje širine naše stranice na širini uređaja zaslona. Ako provjerite našu stranicu je tekućina, a zatim našoj stranici će popuniti ekran na većini mobilnih uređaja. To također znači da, ako telefon ima pejzažnom načinu stranica će se proširiti ispuniti dodatni prostor.

Postoje druge stvari možemo učiniti kako bi viewport kao dobro. Ako ste radili s mobilnim preglednicima, znate oni vam omogućiti da zumiranje. Ako ste uzimanje vremena da izgrade website za popunjavanje cijelog zaslona svibanj ne želite korisnik biti u mogućnosti za povećanje. Ako smo postavili naš pogleda da se nešto ovako, korisnik neće biti u mogućnosti za povećavanje ili van. Na uređaju kao što je iPhone je ovaj svibanj izraditi Internet više osjećati domaće. Ali, ako ste to učinili, provjerite je li sadržaj vaših app daje korisniku nema razloga da ikada željeli zoom (npr. mali tekst), u suprotnom, to će biti frustrirajuće upotrebljivosti ograničenje. 

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

Pogleda nije W3C standard, ali je zajednička konvencija. Trenutno podržavaju WebKit preglednika na iPhone i Android operativni sustav. Fennec , Mozilla mobilni preglednik, vjerojatno će također podržavaju ove Konvencije.

CSS

Više nego ikad, pomoću CSS-a sposobnost da se tekućine i dinamičan je važno. Kada se gleda na široki spektar telefone, tablete, i drugih malih ekrana, programeri aplikacija moraju biti svjesni da su naši aplikacije će se koristiti na mnoštvo uređaja. Iako ne postoji čarobni štapić možemo val da bi sve samo posao, za većinu aplikacija nam možda neće trebati biti piksela savršen na svakom uređaju. Samo sljedeće najbolje prakse može uzeti nas većinu puta za potporu većine uređaja.

Počevši s postavljanjem širine naših app u svojoj bazi u% je veliki početak. Em Koristeći se postaviti font-veličina je također koristan jer se EMS izračunavaju se na temelju donesene web stranicu. Još jedna stvar koja pomaže kako bi bili sigurni da ste bazu širine stupca na postotke kao dobro. Čak stupac oluke može se postaviti u em-a.

Veliko mjesto za početak, bez da to puno posla je CSS okvir. YUI 2 Rešetke CSS je, naravno, jedan od naših favorita, a to nam pomaže da naše stranice u smislu omjera umjesto statičkog širine blokova.

Tako zgrada od YUI 2 CSS Rešetke ovdje je početna CSS za moje cca. 

  . Todo_items {
     padding-top: 1em;
 }

 . Todo_items ul {
     padding: 0;
     margin: 0;
 }
 . Todo_items ul li {
     margin: 0,125 em 0 0,5 em 0;
     padding: 0,125 em 0 0 0;
     granica-top: 1px solid # ccc;
     Popis stilu: none;
     prikaz: block;
     riječ-wrap: break-riječ;
     tekst-wrap: potisnuti;
 }

 . ToRight {
      text-align: pravo;
 }

 . Yui3-konzole {
      text-align: left;
      margin-left: 10px;
 }

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

Javascript

Sljedeća se na naš offline obveza prijave je JavaScript. Prvo preuzimanje yui_min.js u dokument root i dodati ga obilježja kao što smo gore. Zatim stavite ovo u svoj base.js datoteku: 

  YUI (). Korištenje ('čvor', funkcija (Y) {
     Y.one ("todo_items H2"). SetContent ("Ja sam leteći").;
 });

Osim toga čvora, ja ću uključiti YUI Reset 3 CSS i YUI CSS 2 rešetke. Idem uključiti modul iz YUI 3 galerije , Ryan Grove je odličan za pohranu Lite , koji će obaviti sve moguće lokalne pohranu podataka metoda u jednom jednostavno za korištenje API-ja. 

  YUI (). Korištenje ("cssreset ',' yui2-mreža", "galeriju za skladištenje-lite", "čvor", funkcija (Y) {

   / / To-do list aplikacijskog koda

 });

Napomena: Ja sam ne idući zaroniti u to-do lista broj, niti u neke od tehnika bih koristiti kako bi se lakše ispravljanje ovu vrstu projekta na mobilnim uređajima. Možete pronaći sve da je na github: yui3-TODO . Unutar base.js ćete pronaći cjelinu cca. Također možete vidjeti app gore i trčanje na http://html5.alexkessinger.net/yui/ytodo/ . Evo, ja ću da se usredotočite na potrebne korake kako bi se poboljšala ovaj jednostavan app sa offline sposobnosti.

Cache manifest

Prvi korak u uzimajući offline web aplikacija je aplikacija Cache . Cache aplikacija može reći vaš preglednik ono datoteke koje želite preuzeti i zadržati offline. U ovom primjeru, ja znam želim da se pokorite mojim JavaScript i CSS mi offline, kao i glavni HTML stranice za cca. Imajući to na umu, mi očituje cache će izgledati ovako: 

  Cache očituje

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

Neke stvari na umu o cache manifestirati.

  • Ona mora započeti s linije CACHE MANIFEST .
  • Morate ga poslužiti s Content-Type zaglavlje teksta / cache memorije, manifestirati

Ako ste na Apache, možete dodati sljedeće isječak u .htaccess kako bi dobili pravo vrstu sadržaja. 

  AddType tekst / cachea-manifestirati. Očitovati

S tim u mjestu, bilo koju datoteku sa .manifest sufiks će biti poslužen s text/cache-manifest Content-Type zaglavlje.

Dalje nam je potrebno obavijestiti preglednik predmemorija objaviti, to smo dodali atribut u HTML oznake: 

  <html manifest="todo.manifest">

Sada, ako idete na stranicu u pregledniku koji podržava offline aplikacije vjerojatno će vam se obavijest navodi da ova web stranica zahtijeva offline pristup.

Offline / Online

S očituje u mjestu reći našim preglednik što sredstva za cache memorije, spremni smo razmišljati o tome što se događa u online modu u odnosu na izvanmrežni način rada. Tu su sada dvije "boot sekvence," prvi se puni line niz koji smo već (i tijekom kojeg su resursi spremljene za izvanmrežno korištenje). Ovaj online slijed koristi Yahoo CDN za učitavanje datoteka, a datoteke su kombinirani, obrađene tako da imaju tek nekoliko HTTP zahtjeva.

No, mi smo također izgradnju offline pokretanja postupka. Moramo biti u stanju otkriti činjenicu da je preglednik je odsutan, a zatim inicijalizirati YUI pravilno izvući iz spremljene resursa. 

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

Sada, samo trebamo odabrati konfiguraciju objekta na temelju biće offline ili online. 

  var YUI_ONLINE_CONF = {},
     YUI_OFFLINE_CONF = {
         baza: "yui3/build /",
         kombinirati: 0,
         skupine: {
             Galerija: {
                 Baza: 'yui3-gallery/build /',
                 obrasce: {"Galerija-': {}}
             },
             yui2: {
                 Baza: '2 in3/dist/2.8.0/build / ',
                 obrasce: {
                     'Yui2-': {
                         configFn: funkcija (mene) {
                             if (/ kožu | reset | Krstionica | rešetke | baza / .test (me.name)) {
                                 me.type = 'css';
                                 me.path = me.path.replace (. / \ js /, '. css');
                                 me.path = me.path.replace (/ \ / yui2-koža / '/ assets/skins/sam/yui2-skin');
                             }
                         }
                     }
                 }
             }
         }
      },
      ONLINE = (navigator.online)?  istina: false;
      CURRENT_CONF = (online)?  YUI_ONLINE_CONF: YUI_OFFLINE_CONF;

 YUI (CURRENT_CONF). Korištenje ("cssreset ',' yui2-mreža", "galeriju za skladištenje-lite", "čvor", funkcija (Y) {
     ...
 });

YUI_OFFLINE_CONF konfiguracija možda trebate neke objašnjenje. Prvo, ja sam mijenja baze dokument root + yui3/build/ . Poslao sam punu distribuciju YUI 3 na moj server, jer W3C specifikacija navodi da offline predmemorija je strogo jedan podrijetla politike. Svi spremljene resursi moraju dolaze iz iste domene kao što se očituje. Kao rezultat toga, ja ne mogu oslanjaju na Yahoo! ili Google ili bilo koje druge CDN služiti moje datoteke - svi oni moraju biti dostupni za caching iz mog servera.

Sljedeći dio, combine:0 , govori YUI utovarivač ne automatski kombinirani datoteke, jer nemam combo-rukovatelj instaliran na moj vlastiti poslužitelj.

Na kraju, želim spomenuti groups config. grupe je nova značajka u YUI 3.1.1 koji omogućava definiranje cijele skupine datoteka koje dolaze iz istog mjesta. Također možete konfigurirati ih da se combo'd iz izvora. Ja postaviti YUI 3 Galerija ovdje za učitavanje iz lokalnu kopiju sam od yui3-galeriju repozitorija na GitHub.

Kada smo on-line, možemo početno dizanje iz Yahoo CDN, ali offline moramo imati lokalne kopije datoteka. To je lako za napraviti. Možete preuzimanje datoteka treba u velikom zip datoteku na svoje direktoriju: 

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

Ili možete klon spremišta Git iz github direktno ako Git je instaliran na vašem računalu: 

  CD docroot;
 Git klon git: / / github.com/yui/yui3.git yui3;
 Git klon git: / / github.com/yui/yui3-gallery.git yui3-galerija;
 Git klon git: / / github.com/yui/2in3.git 2in3;

Za svrhe testiranja. Ponekad će postaviti ONLINE = false i provjeriti kako se moje stranice opterećenja. Ako ste to učiniti, a zatim posjetite app u normalnim pregledniku, možete vidjeti svaku datoteku koja treba biti uključena pojedinačno. Da bi pravilno ispunite naš predmemorija manifestirati, morate uzeti u obzir svaku datoteku se izdvajali u, koristeći nešto poput palikuća. Zatim u pričuvnoj memoriji očitovati ćete popis svakog datoteka po jedan. To će izgledati otprilike ovako. 

  Cache očituje
 # Komentar
 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

U ovom trenutku možemo ići sve do mreže. Ako imate iPhoneOS ili Android uređaj (ili bilo HTML5-sposoban browser), sada možete posjetiti Vašu web stranicu, neka završi učitavanje, a zatim ponovno učitati stranicu s uređaja onemogućen pristup internetu.

iPhone-Specifična artikli

IPhone pruža WebApp Developer mogućnost da daju svoje app neki prostor na početnom zaslonu baš kao i sve druge aplikacije. Možete čak imati sjajan ikona i početni zaslon kao što bi se s "izvornim" aplikacija. Prvo, morate slijediti specifikacije za ikone i početni zaslon. A onda možete dodati sljedeće meta oznake: 

  <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" />

Prve dvije oznake reći mobilni Safari da Vaša web stranica je HTML5 WebApp i da wan boja traci stanja na vrhu biti bijela. To će također ukloniti sve navigacija krom oko prozora preglednika. Druga dva oznake upućuju na datoteke koje želite koristiti za svoj simbol i početni zaslon.

Što je Sljedeća

HTML5 spec je još uvijek pokretnu metu. Držati oko za nove razvoje. To je rekao, čak i danas postoje fantastične nove mogućnosti u modernim preglednicima. Kao što možete vidjeti iz ovog tutorial, to nije teško uzeti offline web aplikacija, dramatično povećava se potencijal korisnost. A, kada idete offline, ne ustručavajte se uzeti YUI 3 sa sobom, zajedno sa svim moći ste navikli od YUI 3 galerije i YUI 2 dodatak obitelji.

Nađi razgovori: Bloglines | technorati

Udio i proširiti: Bookmark s del.icio.us | digg it! | reddit!

9 Komentari

  1. Znam da je točka ovdje je da demo, ali još uvijek treba vidjeti kod koji se može koristiti u stvarnom životu. Tu bi mogao biti bug na preglednike koji ne podržavaju navigator.online

    vam test na ovaj način
    var online = (navigator.online)? istina: false;

    pa IE će uvijek uzeti u obzir da je odsutan, jer imovina ne postoji, a zahtjev bi mogao raditi barem on-line

    Komentar od jpvincent - 28. svibnja 2010 #

  2. Zaustavljen čitanja u? istina: lažna.

    Komentar od HJ - 28. svibnja 2010 #

  3. Oba FF 3.6.3 i Chrome 6dev nema svojstvo navigator.online ali navigator.onLine. S velikim L.

    Komentar od Matjaž Lipuš - 28. svibnja 2010 #

  4. Volio bih da prihvate HTML5, ali, nije li to malo prerano za skok na HTML5 vagon?

    na temelju Wikipedia kaže:
    citat iz Wikipedije:

    "... HTML5 specifikacija, očekuje specifikacija do W3C fazi kandidat Preporuka tijekom 2012, i W3C Preporuka u godini 2022 ili kasnije ...."

    Komentar od Levan - 28. svibnja 2010 #

  5. @ Jpvincent navigator.onLine je u IE od 4,0.

    @ Matjaž Lipuš ste točni. To je zapravo slučaj svugdje ne samo na iPhone. Mi smo fiksne pogreška u članku, pa sam i ja ga fiksne u moj broj.

    @ Levan HTML5 je pokretna meta, ali preglednici imaju implementiran dijelove već. Također telefoni i drugih mobilnih uređaja s vjerojatno samo početi s HTML5 sposobnosti. Također, u budućnosti, čini se kao da standardi skupina se seli u novi broj ne-verzije niza. Tako je u suštini mi neće vidjeti nešto poput "HTML7" spec. će nastaviti evoluirao polako, a programeri će morati donositi odluke o pojedinim značajkama, umjesto da pokušavate odlučio hoće li ili ne oni su idući podržati cijelu stvar.

    Komentar Aleksandar Kessinger - 28. svibnja 2010 #

  6. [...] Uvod u korištenje YUI 3 u Online Prijave Jedna od Awesome značajke u HTML5 je primjena Cache, što daje mogućnost da web preglednik reći koja datoteka cache i korištenje spremljene datoteke kada pregledniku doesn ' t imati mrežnu vezu. Možete koristiti Cache Zahtjev kako bi se osiguralo da korisnik će biti u mogućnosti pristupiti na barem dio svog app dok je odsutan. (Tags: html javascript 2010) Scritto il 30/05/10 da giorgio_v. [...]

    Pingback od strane linkova za 2010/05/30 - ReFactor.it - 30. svibnja 2010 #

  7. Typo: "... i da wan boja na traci stanja ..."

    "WAN" S / B "žele"

    Komentar Kovacs - 30. svibnja 2010 #

  8. [...] Ili baze podataka za pohranu za pohranu vaše komponente. Alex Kessinger nedavno YUI blogu, Uvod u korištenje YUI 3 u offline aplikacije, može biti od interesa za YUI 3 razvijen s obzirom na to [...]

    Pingback od strane granice Mobile Browser Cache: Android, IOS i webOS »Yahoo User Interface Blog (YUIBlog) - 28. lipnja 2010 #

  9. Moja zapažanja o istoj podrijetla aspekt:

    Kao što je po mom testove, i čitanje specifikacija [1], istog podrijetla ograničenje odnosi se samo na izričit predmemoriju referentni upisa, ako ste pristupu očituje preko https (ili neki drugi siguran protokol).

    Tako u gornjem primjeru, čini se kao da bi bilo fino da će se povući iz YUI kod CDN. Još uvijek bi trebao dobiti spremljeno za izvanmrežno korištenje. Bih biti zainteresirani za znajući ako vidite drugačije.

    [1] HTML 5, Raščlanjivanje Offline Cache se manifestira (vidi točku 28: Raščlanjivanje tokene)

    Komentar od Satyen Desai - 12. listopada 2010 #

Nažalost, komentar oblik je zatvoren u ovom trenutku.

Hosted by Yahoo

Copyright © 2006-2011 Yahoo Inc Sva prava pridržana. Izjava o privatnosti - Uvjeti pružanja usluge

Powered by WordPress na Yahoo Web hosting .