Een Inleiding tot het gebruik YUI 3 in offline toepassingen »Yahoo User Interface Blog (YUIBlog)

Een Inleiding tot het gebruik YUI 3 in offline toepassingen

27 mei 2010 om 1:53 pm door Alexander Kessels | In ontwikkeling | 9 Reacties

Over de auteur: Alex Kessels werkt als een front-end engineer bij Yahoo verleden werkzaam als front-end, hij geniet van het werken op de gehele stack. Hij besteedt ook veel tijd door met lezen, curator, en schrijven over het internet, sociale media en het bouwen van websites. U vindt alle daarvan op zijn website alexkessinger.net . U kunt hem ook zien op twitter @ voidfiles .

Ik zou kunnen zeggen dat HTML5 is stoom gebouw, maar die tijd is voorbij: HTML5 is hier. Mobiel is nu al enorm, is WebKit groeit snel, en het aantal mensen dat zal een HTML5-browser op hun telefoon en / of laptop hebben in de komende jaren zal leiden tot een "nieuwe normaal" in die HTML5 mogelijkheden zijn de norm.

Een van de geweldige functies in HTML5 is de Application Cache , waardoor websites de mogelijkheid om cache de browser vertellen welke bestanden van en naar bestanden in de cache gebruiken wanneer de browser geen verbinding hebt een netwerk. U kunt gebruik maken van de Application Cache om ervoor te zorgen dat een gebruiker in staat zal zijn om ten minste een deel toegang krijgt tot je app terwijl hij offline is. In het geval van apparaten zoals telefoons of tabletten (of zelfs ouderwetse apparaten zoals laptops), zou dit betekenen dat uw gebruikers in staat zijn om je applicatie te gebruiken terwijl op een vliegtuig. Ondertussen krijg je te blijven bouwen van uw applicatie met web technologieën en niet zozeer het leren van Objective-C.

Naast de Application Cache , zijn er ook andere API's beschikbaar in HTML5 dat de ervaringen geven webontwikkelaars de tools offline te creëren nuttig. Er zijn twee permanente opslag API's beschikbaar in de meeste nieuwere browsers. Een daarvan is een simpele sleutel / waarde gegevens op te slaan, de zogenaamde localStorage . De tweede is een SQL-database . Beide kunnen worden benut terwijl de gebruiker offline is.

Met deze concepten in gedachten, ga ik naar de evergreen te verkennen "to do list" applicatie, te gebruiken als een springplank om te kijken hoe we kunnen gebruikmaken van de Application Cache en permanente opslag in een app die voortbouwt op alles wat we graag over YUI 3, met inbegrip van de YUI 3 Galerij.

Markup

Markup is altijd een geweldige plek om te beginnen bij het bouwen van alles met betrekking tot het internet. De basis van onze shell HTML5 pagina:

  <! 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">
     <script src="yui-min.js"> </ script>
     <script src="base.js"> </ script>
 </ Body>
 </ Html>

Hoewel we het opbouwen van een offline-applicatie klaar is, volgens de beste praktijk, maar zetten CSS in het hoofd, en Javascript net vóór de afsluitende body-tag. Zelfs als uw pagina gaat offline beschikbaar zijn, moet de eerste pagina te laden kunnen inspelen. (Merk op dat we de waanzinnig eenvoudige HTML5 doctype even gebruikt.)

De app heeft wat tijdelijke opmaak:

 <! DOCTYPE HTML> <html> <head> <title> YUI ToDo </ title> <link rel = "stylesheet" href = "base.css" type = "text / css" media = "screen" title = "no titel "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"> door Alex Kessels </ 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"> Toevoegen </ a> </ p> </ form > </ div> </ div> <div class="bd"> <div class="yui-main"> <div class="yui-b"> <div class="todo_items"> <h2> Todo Items </ h2> <ul> <li class="no_items"> ophalen ToDo items ...</ li> </ ul> </ div> </ div> </ div> </ div> <div id = " debug "> </ div> <! - Initialisatie proces //--> <script src="yui-min.js"> </ script> <script src="base.js"> </ script> </ div> </ body> </ html>

Dit laat de gebruiker weten dat we van plan om een aantal gegevens voor hen toen ze voor het eerst de app te laden. Het zet ook ons podium, een DOM-structuur voor onze Javascript aan de slag.

Een opmerking over Progressive Enhancement

Er is geen reden dat een aanvraag niet kan worden gebouwd met de beginselen van de geleidelijke verbetering en nog steeds ter beschikking voor offline gebruik. In deze verkenning, ik ben het weglaten van de extra complexiteit die betrokken zou zijn bij PE in om zoveel mogelijk focussen op de technieken die nodig zijn voor offline ondersteuning. Sommigen zullen misschien kritiek die benadering, en ik ben sympathie voor dit argument.

Aanvullende eigenschappen voor de behandeling mobiele apparaten

iPhoneOS en Android browsers kan omgaan met de meeste webpagina's zonder speciale aandacht, maar bij het omgaan met mobiele apparaten is de moeite waard te onderzoeken hoe de inhoud wordt geperst zodat het past op het kleine scherm. Quirksmode heeft niet een , maar twee diepgaande artikelen over viewport die de moeite waard zijn uw tijd.

Kortom, er is een meta tag, genaamd viewport. Het ziet er ongeveer als volgt uit:

  <META name="viewport" value="">

Het doel van de viewport tag is om te helpen mobiele browsers erachter te komen hoe een echt grote webpagina weer te geven op een klein scherm. Mobiele apparaten hebben hulp nodig, omdat de meeste apparaten proberen 700-1100px inhoud squeeze op een 300-500px scherm. Ook, wanneer we onze breedten vastgesteld op 100%, de browser neemt haar beste gok op hoe groot de webpagina moet worden, en vervolgens schalen ervan uit dat groot om te passen binnen de afmetingen van het apparaat.

Om te helpen kunnen we de viewport bij deze.

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

Dit vertelt het apparaat aan de breedte van onze pagina ingesteld op de breedte van het scherm van het apparaat. Als we ervoor zorgen dat onze pagina vloeistof, dan onze pagina zal het scherm te vullen op de meeste mobiele apparaten. Dit betekent ook dat als de telefoon heeft een landscape-modus de pagina uit te breiden tot de extra ruimte op te vullen.

Er zijn andere dingen die we kunnen doen om de viewport ook. Als je hebt gewerkt met mobiele browsers, je weet dat ze u toestaan om in te zoomen. Als u de tijd om een website om het hele scherm mag u niet wilt dat een gebruiker in staat om in te zoomen vullen bouwen. Als we onze viewport naar iets als het volgende zal de gebruiker niet in staat zijn om in te zoomen of uit. Op een apparaat zoals de iPhone kan dit maken het gevoel meer inheemse. Maar als je dit doet, zorg ervoor dat de inhoud van uw app geeft de gebruiker geen enkele reden om ooit wilt zoomen (bijv. kleine letters), anders zal dit een frustrerende bruikbaarheid beperking worden.

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

De viewport is niet een W3C-standaard, maar is een algemene conventie. Het is momenteel niet ondersteund door WebKit browsers op de iPhone en Android-besturingssysteem. Fennec , de mobiele browser van Mozilla, zal waarschijnlijk ook ondersteunt dit verdrag.

CSS

Meer dan ooit, met behulp van CSS vermogen om vloeiend en dynamisch is belangrijk. Wanneer we kijken naar de brede waaier van telefoons, tablets en andere kleine schermen, ontwikkelaars van toepassingen moeten zich ervan bewust dat onze applicaties zijn gebruikt gaan worden over een groot aantal apparaten. Ook al is er geen toverstokje kunnen we zwaaien naar alles gewoon te laten werken, voor de meeste toepassingen die we niet kunnen moeten pixel perfect op elk apparaat. Vlak na de beste praktijken kan ons het grootste deel van de weg naar de meeste apparaten te ondersteunen.

Te beginnen met het instellen van de breedte van onze app op haar basis in% is een goede start. Met behulp van em is tot het instellen font-groottes is ook nuttig omdat EMS zijn berekend op basis van de gerenderde webpagina. Een ander ding dat helpt is om ervoor te zorgen dat u de kolombreedte te baseren op percentages ook. Zelfs kolom goten kan worden ingesteld in em's.

Een geweldige plek om, te beginnen zonder te werken doe heel veel van een CSS-kader. YUI grids CSS 2 is natuurlijk een van onze favorieten, en het helpt ons denken aan onze pagina in termen van ratio's in plaats statische breedte blokken.

Dus bouwen off YUI 2 CSS Grids hier is het uitgangspunt CSS voor mijn app.

  . Todo_items {
     padding-top: 1em;
 }

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

 . ToRight {
      text-align: right;
 }

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

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

Javascript

Next up voor onze offline to-do applicatie is de JavaScript. Eerst downloaden yui_min.js naar uw document root, en voeg deze toe aan de opmaak zoals we hierboven hebben. Dan zet dit in je base.js bestand:

  YUI (). Gebruik ('node', function (Y) {
     Y.one (". Todo_items h2") setContent ("Ik vlieg").;
 });

Naast Node, ben ik ook naar onder meer de YUI 3 CSS Reset en YUI 2 CSS grids. Ik ga naar de include een module uit YUI 3 Galerij , Grove uitstekende Ryan Opslag Lite , dat zal wrap alle mogelijke lokale data-opslag methoden in een makkelijk te gebruiken API.

  YUI (). Gebruik ('cssreset', 'yui2-grids', 'galerie-storage-lite', 'node', function (Y) {

   / / To-Do List applicatie code

 });

Opmerking: Ik ga niet te duiken in de to-do lijst code, noch in enkele van de technieken die ik zou gebruiken om het gemakkelijker maken om het project debug dit soort op mobiele apparaten. Vind je dat allemaal op GitHub: YUI3-todo . Binnen base.js vindt u het geheel van de app. Zie je ook de app up and running op http://html5.alexkessinger.net/yui/ytodo/ . Hier, ik ga richten op de stappen die nodig zijn om deze eenvoudige app met offline uit te breiden.

Cache Manifest

De eerste stap naar het nemen van een web app offline is de Application Cache . De Application Cache kan vertellen uw browser welke bestanden u wilt downloaden en offline te houden. In dit voorbeeld, ik weet dat ik wil mijn JavaScript en CSS mijn offline, evenals de belangrijkste HTML-pagina voor de app te houden. Met dat in gedachten, zal mijn cache manifesteren als volgt uitzien:

  CACHE MANIFEST

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

Sommige dingen op te merken over de cache manifesteren.

Het moet beginnen met de lijn CACHE MANIFEST .
Je moet serveer het met een Content-Type header van tekst / cache-manifest

Als u op Apache, kunt u fragment voeg het volgende toe .htaccess te typen de juiste inhoud.

  AddType tekst / cache-manifest. Manifest

Met dat in de plaats, een bestand met een .manifest zal achtervoegsel worden geserveerd met de text/cache-manifest Content-Type header.

Vervolgens moeten we de browser op de hoogte van de cache manifest, om dat te doen hebben we een attribuut van onze HTML-tag toe te voegen:

  <html manifest="todo.manifest">

Nu als u naar uw pagina in een browser die offline apps je waarschijnlijk een melding te zien waarin staat dat deze webpagina is offline toegang verzoekende ondersteunt.

Offline / online

Met het manifest in de plaats te vertellen onze browser welke middelen in de cache, we zijn klaar om na te denken over wat er gebeurt in de online modus versus offline modus. Er zijn nu twee "boot-sequenties," waarvan de eerste de volledige sequentie online die we al hebben (en gedurende welke middelen de cache opgeslagen voor offline gebruik). Deze online-sequentie maakt gebruik van de Yahoo CDN het laden van de bestanden en de bestanden zijn combo-behandeld, zodat we slechts een paar HTTP-verzoeken te hebben.

Maar we bouwen ook een offline opstarten. We moeten in staat zijn om het feit dat de browser offline is te detecteren en vervolgens te initialiseren YUI goed aan te trekken uit de cache middelen.

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

Nu, we hoeven alleen maar een configuratie te kiezen object op basis van zijn offline of online.

  var YUI_ONLINE_CONF = {},
     YUI_OFFLINE_CONF = {
         Base: "yui3/build /",
         combineren: 0,
         groepen: {
             Gallery: {
                 base: 'yui3-gallery/build /',
                 patronen: {'galerie-": {}}
             },
             yui2: {
                 Base: '2 in3/dist/2.8.0/build / ',
                 patronen: {
                     'Yui2-': {
                         configFn: functie (me) {
                             if (/-skin | reset | lettertypes | roosters | base / .test (me.name)) {
                                 me.type = 'css';
                                 me.path = me.path.replace (/ \ js /, 'css'..);
                                 me.path = me.path.replace (/ \ / yui2-skin /, '/ assets/skins/sam/yui2-skin');
                             }
                         }
                     }
                 }
             }
         }
      },
      ONLINE = (navigator.online)?  waar: false;
      CURRENT_CONF = (online)?  YUI_ONLINE_CONF: YUI_OFFLINE_CONF;

 YUI (CURRENT_CONF). Gebruik ('cssreset', 'yui2-grids', 'galerie-storage-lite', 'node', function (Y) {
     ...
 });

De YUI_OFFLINE_CONF configuratie nodig zou kunnen hebben enige uitleg. In de eerste plaats ben ik het veranderen van de basis om mijn document root + yui3/build/ . Ik heb gepost de volledige distributie van YUI 3 tot en met mijn server, omdat de W3C specificaties staat dat het offline cache beleid is een strikte interne oorsprong. Cached Alle middelen moeten komen uit hetzelfde domein als doet het manifest. Als gevolg daarvan kan ik niet beroepen op Yahoo! of Google of een andere CDN om mijn bestanden te dienen - allemaal beschikbaar moeten zijn voor caching van mijn server.

Het volgende deel, combine:0 , vertelt de YUI loader niet automatisch combo van de bestanden, want ik heb geen combo-handler geinstalleerd op mijn eigen server.

Tot slot wil ik noemen de groups config. groepen is een nieuwe functie in YUI 3.1.1, dat kunt u bepalen hele groepen van bestanden die afkomstig zijn uit dezelfde plaats. U kunt ook configureren om combo'd van de bron. Ik de YUI 3 Galerij hier om te laden van een lokale kopie heb ik van de YUI3-gallery repository op GitHub.

Als we online zijn, kunnen we bootstrap van het Yahoo CDN, maar offline moeten we lokale kopieën van de bestanden. Dit is gemakkelijk te doen. U kunt de bestanden downloaden behoeften in een grote zip-bestand naar uw directory:

  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-gallery-gallery-2010.05.19-19-08-0-g2a49f06.zip;
 mv yui-YUI3-gallery-2a49f06 YUI3-gallery;
 wget http://download.github.com/yui-2in3-yui-2in3.3-0-gdf09025.zip;
 mv yui-2in3-yui-2in3.3-0-gdf09025 2in3;

Of u kunt kloon het git repositories van github direct als git is geïnstalleerd op uw machine:

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

Voor testdoeleinden. Ik zal soms ingesteld ONLINE = false en check hoe mijn site laadt. Als je dat doet, en vervolgens uw app bezoek in een normale browser, kunt u zien elk bestand dat moet individueel worden opgenomen. Om goed te vullen op onze cache manifesteren, moet u nota te nemen van elk bestand dat wordt getrokken, met behulp van iets als Firebug. Dan in het cachegeheugen manifesteren zul je elk bestand een voor een lijst. Het zal er ongeveer zo uitzien.

  CACHE MANIFEST
 # Een opmerking
 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

Op dit punt kunnen we gaan helemaal offline. Als u een iPhoneOS of Android-toestel (of een HTML5-browser) kunt u nu een bezoek aan uw website, laat het af te laden, en herlaad vervolgens de pagina met een handicap van het apparaat toegang tot internet.

iPhone-specifieke Goodies

De iPhone biedt de webapp ontwikkelaar de mogelijkheid om je app te geven wat ruimte op het beginscherm net als alle andere apps. U kunt zelfs een glossy icoon en opstartscherm als je zou hebben met een "native" applicatie. Eerst moet je de follow specs voor de icoon en opstartscherm. En dan kun je de volgende meta tags:

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

De eerste twee tags te vertellen mobiele Safari dat uw web pagina is een webapp HTML5 en dat u wan de kleur van de statusbalk bovenin wit te zijn. Dit alles zal de navigatie chroom ook verwijderen rond browservenster. De tweede twee tags punt om de bestanden die u wilt gebruiken voor uw pictogram en opstartscherm.

What's next

De HTML5 spec is nog steeds een bewegend doel. Houd een oog voor nieuwe ontwikkelingen. Dat gezegd hebbende, zelfs vandaag de dag zijn er fantastische nieuwe mogelijkheden in de moderne browsers. Zoals je kunt zien in deze tutorial, het is niet moeilijk om een web-applicatie offline dramatisch te nemen, waardoor het potentiële nut. En terwijl je offline gaat, aarzel dan niet om YUI 3 mee te nemen, samen met alle kracht die je gewend bent uit de YUI 3 Gallery en de YUI 2 widget familie.

Delen en uit te breiden: Bookmark met Del.icio.us | digg it! | reddit!

9 Reacties »

RSS feed voor reacties op dit bericht. TrackBack URI

Ik weet dat het punt hier is demo, maar we moeten nog code die gebruikt kunnen worden in het echte leven zien. Er zou een bug op browsers die ondersteuning dont navigator.online
je test op deze manier
var online = (navigator.online)? waar: false;
dus een IE zal altijd van mening dat het offline, omdat het pand niet bestaat, terwijl de toepassing zou kunnen werken ten minste online
Reactie door jpvincent - 28 mei 2010 #
Gestopt lezing op? waar: vals.
Reactie door HJ - 28 mei 2010 #
Zowel FF 3.6.3 en Chrome 6dev geen eigendom navigator.online maar navigator.onLine. Met grote L.
Reactie door Matjaž Lipuš - 28 mei 2010 #
Ik zou graag omarmen, maar HTML5, is het niet iets te vroeg om te springen op HTML5 wagen?
gebaseerd op wikipedia staat:
Citaat van wikipedia:
"... HTML5 specificatie, verwacht dat de specificatie van de W3C Kandidaat Aanbeveling stadium te bereiken in 2012, en W3C aanbeveling in het jaar 2022 of later ...."
Reactie door Levan - 28 mei 2010 #
@ Jpvincent de navigator.onLine is in IE sinds 4.0.
@ Matjaž Lipuš je bent juist. Dit eigenlijk overal het geval niet alleen de iPhone. We hebben de fout is in het artikel, en ik heb ook vastgesteld in mijn code.
@ Levan HTML5 is een bewegend doel, maar browsers hebben geïmplementeerd gedeelten van het reeds. Ook telefoons en andere mobiele apparaten met waarschijnlijk gewoon begint met HTML5 mogelijkheden. Ook in de toekomst, het lijkt alsof de normen groep is verhuizen naar een nieuwe niet-nummer versiebeheer sequentie. Dus in wezen we wont ziet iets als "HTML7" de spec zal blijven geëvolueerd langzaam, en ontwikkelaars hebben om beslissingen te nemen over individuele kenmerken in plaats van te proberen om besloten of ze gaan de hele zaak te steunen.
Reactie door Alexander Kessels - 28 mei 2010 #
[...] Een Inleiding tot het gebruik YUI 3 in offline toepassingen Een van de geweldige functies in HTML5 is de Application Cache, waardoor websites de mogelijkheid om de browser die bestanden in de cache te vertellen en om de bestanden in de cache te gebruiken wanneer de browser doesn ' t over een netwerk aansluiting. U kunt gebruik maken van de Application Cache om ervoor te zorgen dat een gebruiker in staat zal zijn om ten minste een deel toegang krijgt tot je app terwijl hij offline is. (Tags: html javascript 2010) Scritto il 30/05/10 da giorgio_v. [...]
Pingback door links voor 2010-05-30 - ReFactor.it - 30 mei 2010 #
Typo: "... en dat je wan de kleur van de statusbalk ..."
"WAN" s / b "wil"
Reactie door Kovacs - 30 mei 2010 #
[...] Of opslag in een databank om uw componenten op te slaan. recente YUI Alex Kessels's blog post, An Introduction to YUI 3 gebruiken in de offline toepassingen, interessant kunnen zijn voor YUI 3 ontwikkelaars overweegt dit [...]
Pingback door Mobile browser cache Grenzen: Android, IOS en webOS »Yahoo User Interface Blog (YUIBlog) - 28 juni 2010 #
Mijn opmerkingen over de dezelfde oorsprong aspect:
Per mijn tests, en het lezen van de spec [1], dezelfde oorsprong beperking geldt alleen voor de expliciete verwijzing cache aantekeningen als je het manifest over https (of een ander beveiligd protocol) toegang.
Dus in het voorbeeld hierboven, lijkt het alsof het zou zijn geweest fijn om YUI-code te trekken van de CDN. Het moet nog steeds de cache opgeslagen voor offline gebruik. Ik zou willen weten als je ziet anders.
[1] HTML 5, parseren offline cache Manifests (zie punt 28: parseren Tokens)
Reactie door Satyen Desai - 12 oktober 2010 #

Laat een reactie achter

Yahoo User Interface Blog (YUIBlog)