Manifest jednoduché rozhraní stránky

Original: http://itsnat.sourceforge.net/php/spim/spi_manifesto_en.php

spirála Počátky webových technologií

Když Tim Berners Lee vynalezl web hledal systém publikovat vědecké dokumenty vzdáleně přístupné, vizuálně atraktivní, snadno kód a snadné použití pro non-technické osoby.

Ve vědeckém dokumentu, externí cituje do jiných dokumentů je nezbytné, aby se čtenář může případně rozvíjet téma se jedná.

Z těchto důvodů je World Wide Web byl koncipován jako strana (dokument) systému založeného s hypertextové odkazy.

Zpočátku web byl svět statických stránek a odkazů, ale brzy generování dynamických stránek a obecně využívání webu jako podporu pro navrhování webových aplikací komplikované všechno.

spirála Příchod webových aplikací

Po mnoho let tam byla silná snaha přizpůsobit web paradigma stran a odkazy na vývoj aplikací. Ve webové aplikaci neexistují Berners’ pohled na statických dokumentů a jednoduchých vazeb.

Různé přístupy pro vývoj aplikací byly děje:

  • Model 1: Přímý překlad z původního modelu stránek a odkazů, kde se dynamicky generovaných stránek.
  • Model 2 o MVC: Nyní odkazy nejsou přímo ukazuje na cílovou stránku betonu, v tomto případě regulátor rozhodnout, jaké další stránky v závislosti na provozu proběhly v strana přechodu.
  • MVC založené na komponentách (Model 3?): Je sofistikovaná verze Modelu 2 simulovat, jak desktop aplikace fungují. Je založen na komponenty a událostí, takže každý uživatel akce vyžaduje kompletní sestavení a znovu stránky částečně mění některé části podle s akcí provedena. Stránka a str přechod je nyní řízena komponent, které to, co se nyní změní se uskuteční v souladu s případě, simulovat, jak komponenty pracují na programování desktop GUI.

V posledních letech se AJAX technika byla zavedena tato technika s pomocí JavaScriptu umožňuje dílčí změny ve stránkách získání nových dat ze serveru bez překládky. I přes částečnou změnu stránky techniky je již dlouho před zavedením XMLHttpRequest v aplikaci Internet Explorer (základ programování AJAX), to bylo zvýšení jeho masivní použití.

Nyní miliony webových stránek a webových aplikací pomocí AJAX, aby poskytovaly lepší zážitek pro koncové uživatele díky vstřícnější uživatelskými rozhraními částečně vyhnout nepříjemné opětovné načítání stránky.

I přes masivní používání AJAX, můžeme říci, že Web následuje model rozvoje bychom mohli pojmenovat jako „model 2 (MVC), obohacený o AJAX“. Při použití AJAX, „Model 3“ nemá moc smysl, protože AJAX do značné míry snižuje potřebu správy stránek založených na komponentách. Vzhledem k tomu, AJAX se obvykle používá spolu s částí (ne nutně představovat je v příkladu 2), můžeme klasifikovat současný stav techniky vývoje webových jako model 3.5, je-li strana navigace částečně zabránit v případě menších přechody stavů prováděných AJAX a JavaScript.

spirála Jaké jsou nevýhody strana založená navigace a vývoje?

Každý webový vývojář ví, jak problematické je navigace stránkami ve webové aplikaci, nabízí kromě pásma plýtvání a doba trvání procesu přestavby celých stránek více problémů, aby vývoj webových aplikací bolestivé jako nechtěné ukládání do mezipaměti, zpět/vpřed tlačítka, desynchronized formy způsobené „Automatické vyplňování formulářů“ rys některých prohlížečích a tak dále. To není neobvyklé, že vidí webové aplikace, které se skrývají v menu a tlačítka prohlížeče nebo pomocí rámy nebo iframe (např banky), aby se zabránilo problému tlačítek vpřed/vzad.

Vývoj na základě Page vynutí styl kódování podivné, opakující (dostatek zahrnuje) a neefektivní (i šířku pásma a výpočetní výkon) nebyl nalezen ve vývoji plochy.

spirála Co je to, co brání intenzivní využití AJAX?

V oblasti vývoje webových aplikací jsme zvyklí rozlišovat dva druhy internetových řešení: webových aplikací a webových stránek.

V prvním případě AJAX je stále více a více používají, protože tento druh aplikací nesdílejí některé náležitosti uložené na webových stránkách. Na webových stránkách intenzivní využívání AJAX je problém.

Ve veřejných webových stránek koncoví uživatelé používají na stránku s konceptem, vázaný na stránkách některé potřeby a služby jsou vyžadovány v jakékoliv webové stránky, jako je:

  1. Záložky: Každá webová stránka má jinou adresu URL, toto URL lze uložit jako záložku. Vzhledem k tomu, AJAX mohou částečně změnit stránku URL je stejný, může koncový uživatel nemůže uložit jako záložku konkrétní pohled (stát) stránky.
  2. Optimalizace pro vyhledávače (SEO): Každá webová stránka chce být plně indexovány pomocí vyhledávačů, jako je Google Search. Současné roboti viz web jako web 1.0, to znamená, že kód JavaScript zcela ignorovány, čímž se všechna částečná změna provádí pomocí AJAX načten ze serveru není spuštěn, potom není indexovány roboti procházejících webové stránky.
  3. Služby na bázi návštěv stránky: Například inzertních služeb, jako je Google AdSense a stránku s návštěvou sledování, jako je Google Analytics, v obou případech je důležitý počet načtení stránky. Proto jakákoliv částečná změna provedena AJAX nepočítá jako novou návštěvu.
  4. Příležitostné potřeba pop-mláďat oken.

Vzhledem k tomu, tyto náležitosti intenzivní AJAX se odradit na webových stránkách.

Nicméně rozdíl mezi „web“ a „webové aplikace“ je stále menší, protože téměř jakékoliv webové stránky, je jakýmsi „webové aplikace“ …

spirála Měli bychom se vzdát AJAX aplikace náročné?

NO.

Existují technická řešení pro všechny výše uvedené náležitosti.

spirála Tvorba webových stránek na základě jedné webové stránky (SPI), je to možné?

ANO!

To je čas začít tento přechod, vývojáři a koncoví uživatelé všechny z nás získají. Máme technologie a moderní prohlížeče jsou kvalifikováni k dosažení tohoto cíle.

Chcete-li uspět v této „nové“ způsob vývoje webových aplikací musíme splnit všechny předchozí náležitostí jakékoliv webové stránky.

spirála Stránky sbohem, vítejte stavy

V webové aplikace bez JavaScriptu, stav sekvence je ekvivalentní stránek v aplikaci SPI jakákoliv částečná změna znamená novou „stav“ a „stránky“. Mezi státy můžeme rozlišit dvě kategorie stavů:

  • základní stavy
  • sekundární stavy

Odlišení mezi oběma typy stav je velmi důležitý, protože základní státy budou v případě potřeby stávají webové stránky. Základní a sekundární diferenciace je závislá na webové stránky.

Aby bylo možné lépe porozumět oba typy států můžeme studovat skutečný příklad: login ověření.

V klasické straně je aplikace založené na typické login vytvořena pomocí dvou stránek, jeden pro uživatele a hesla a jeden ukazující uživatelské možnosti, pokud login validation bylo správné; přihlašovací stránka bude znovu načíst ukazuje některé chybové zprávy spolu s přihlašovacím formulářem, když vstup přihlášení je špatné.

V SPI webu úvodní login a stránky uživatelské možnosti by mohla být základní stavy a chybová hlášení podél přihlášení může být sekundární stavy.

Dalším příkladem, webové stránky na základě stránek, které mají být převedeny na SPI, v tomto případě základní stavy budou stránky a sekundární stavy budou stránka státy s drobnými změnami, které nejsou dostatečně důležité pro vytváření záložek, nebo která se má pohybovat roboti.

spirála Jednotlivé rozhraní a záložky strana

Různé stránky mají různé adresy URL, tyto trasy SPI Jak můžeme změnit stav a zároveň URL bez překládky, aby tento nový stav může být záložkou koncoví uživatelé?

K dispozici je trik pomocí část „referenční“ URL („hash fragment“, shebang nebo hashbang), toto je poslední částí, pokud je přítomen, následující znak #. Tento odkaz se používá k rolování stránky k betonovému místě určeném některými <a name=”ref”> </a> značkou. Tato referenční část, pokud ke změně nebude znovu načte stránku, tedy je-li referenční URL změnit pomocí  window.location společně se státem stránku (v tomto případě, že tento nový stát je „základní“) s JavaScriptem a AJAX, pak je prováděna žádná Obnovit. Vzhledem k tomu, URL a fundamentální stav změnily, mohou koncoví uživatelé uložit tuto adresu URL, nějakým způsobem, který obsahuje nové státní informace, jako záložku.

Když koncový uživatel chce, aby se vrátil znovu do záložkou, cílový stav je uvedeno v referenčním části adresy URL, bude server požadovat, bohužel se referenční část, která nebyla odeslána na server, protože reference součástí nemá nic společného s vzdáleného místa pomocí protokolu HTTP, proto budeme muset proces post-zatížení.

Server vrátí úvodní stránku, ve které není zadaný cílový stav, avšak window.locationobjekt obsahuje původní adresy URL, včetně referenčního dílu. Při načítání cílové stránky, můžeme detekovat pomocí JavaScriptu, zda window.locationobsahuje referenční díl a zda tento odkaz má požadovaný cílový stav informací, pokud je to pravda, můžeme přepsat URL přidání nějaké normální parametru specifikovat cílový stav načíst. Vzhledem k tomu, URL skutečně změnil nový požadavek server spuštěn, tentokrát stát načíst v parametru a server vrátí nová stránka s požadovaným stavem.

Další možností, lepší než hashbangs vyvstává s příchodem HTML 5, HTML 5 History API.

spirála Single Interface Page a optimalizace pro vyhledávače (SEO)

Nejjednodušší způsob, jak se dostat na naše webové stránky je zpracována roboti vyhledávačů je nabízet dva různé režimy navigace, SPI pro koncové uživatele, stránek pro webové roboti.

Následující příklad ukazuje souvislost s touto myšlenkou:

<a href=”URL page” onclick=”return false”> … </a>

Tento odkaz bude dělat nic, v prohlížeči se zapnutým JavaScriptem, protože navigace je zakázán „return false“ vonclickatributu, ale když bot indexy odkaz ignoruje onclickatribut, protože kód JavaScript se neprovede a bude zpracovávat zadané URL jako další stránku zpracovat.

V oblasti aplikace SPI, URL se používá pro strana/státní navigace musí obsahovat cílového stavu, stejný typ URL používaných v SPI záložek, která je při použití referenční část pro označení cílového stavu, nebo cíl je přímo psaný jako normální parametr, později je výhodný, protože se vyhýbá požadavku na serveru, samozřejmě „hezké URL“ mohou být také použity.

V současné době Google už leze „Ajax URL“, to znamená, že adresy URL, které obsahují cílový stav v referenčním rámci následující  #! jak je uvedeno v  Making AJAX aplikace procházet , v tomto případě je webová stránka/ zádost musí vrátit očekávaný stránku žádán s _escaped_fragment_ parametrem.

Zároveň webový framework SPI můžete přidat specifický kód obslužné rutiny onclick dříve return false nebo se může vázat událost posluchač na odkaz se používá pro státní/navigaci na stránce, zapsaná addEventListenernebo attachEvent v závislosti na prohlížeči. Tato událost posluchač vykoná nějakou akci na příkaz server, obvykle pomocí AJAX, pro změnu stránky stavu. Při kliknutí na odkaz se tato změna stát není nová stránka, protože atribut onclick="... return false"vyhne výchozí chování.

Tato technika je popsáno výše, je nejjednodušší a okamžité pomocí viditelné odkazy kompatibilních s roboty a SPI. Můžete někdy oddělit obě funkce, například pomocí skrytých odkazů pro koncové uživatele, ale ne pro roboty spolu s dalšími klikací prvky ke změně SPI stavy pomocí JavaScript neviditelné pro roboty.

Nejdůležitějším rysem, který je schopen rámce SPI je generování stránky ve formátu HTML s požadovaným stavem o vkládání času a zároveň stejná změna stavu je nutno provést s JavaScriptem a částečným stránku aktualizovat. Tyto předpoklady jsou zásadní pro poskytnutí SPI a strana simulace.

spirála Tlačítka SPI a zpět/vpřed

Zpět/vpřed tlačítka jsou zdrojem problémů konvenčních stránce založené webové stránky a je třeba se vyhnout co nejdříve. Navzdory uživatelů se používají, aby se zabránilo tlačítka Zpět a Vpřed při odeslání formuláře s uživatelskými daty (protože s sebou nese riziko nákupu dvakrát ve stejné rovině zaškrtnutou nebo knihu), použití tlačítek vpřed/vzad je velmi rozšířený.

Zřejmě SPI paradigma rozbíjí tradiční způsob navigace webové stránky, protože teoreticky Back tlačítka/Forward nemá žádný smysl v SPI (bez stran) a webové prohlížeče neposkytují dobrou kontrolu nad těmito tlačítky.

To není úplně pravda, Back/Forward chování lze simulovat, namísto navigaci mezi stránkami vpřed/vzad (a historie navigace obecně) lze použít ke změně aktuálního stavu na předchozí/vpřed stavu. V tomto případě kód JavaScript může zjistit, kdy je referenční část adresy URL změní a bude žádat o uplatnění odpovídajícím způsobem změnit stav. Protože prohlížeč nemění stránku aplikace je nyní plně zodpovědná za vpřed/vzad chování vyhnout typické problémy nečekaným vpřed/vzad použití koncových uživatelů při odeslání formuláře, nyní v SPI není tam žádná taková forma a ne nekontrolované stránky navigace webovým application/webové stránky.

spirála SPI a služby na základě návštěv stránek

Reklamy služby a pulty stránky navštěvují jsou založeny na tom, kolik stránek bylo naloženo. V obou případech je možné použít skryté <iframe> prvky, které obsahují prázdnou webovou stránku s požadovanými skripty spustit tento druh služeb.

V případě reklamních služeb, jako je Google AdSense, dynamické vkládání <iframe> předpokládá načtení nové reklamy a proto každá změna stavu by mohlo znamenat novou reload <iframe> pomocí reklam. Google AdSense se zdá, rozpoznat, kdy je script AdSense provádějí v <iframe> a bere v úvahu obsah stránky kontejneru. Může být žádoucí přidat nějaký parametr, který určuje základní stav, který je načítání <iframe>.

V případě čítačů návštěvu, můžeme je použít ke sledování uživatelských návštěv základních stavů našich webových stránkách SPI. V tomto případě musíme skrytá <iframe> obsahující prázdnou webovou stránku s monitorovacími skripty. S jednoduchým parametrem můžeme naznačují, že základní stav je navštívil. Naše <iframe> by měla být celosvětová (vždy stejné části stránky). Je-li prvním načtení stránky, základním stavu naložením (uvedeno v URL) by měl být uveden do <iframe> s parametrem. Po načítání stránky, každá zásadní změna stavu by mohla být oznámena <iframe> změnou adresy URL pomocí JavaScriptu podle nového základního stavu, bude tato změna URL způsobit reload <iframe> (označující novou návštěvu).

spirála SPI a pop-up okna

Když je vytvořena nová stránka okno model SPI je přerušeno. Fundamentalismus je špatná, není žádný problém, pokud je stav tohoto nového okna nemá nic společného se stavem nadřazené okno, v tomto případě pop-up okna jsou v pořádku.

Problém nastává, když jakýkoliv úkon provádí na pop-up okna (modální nebo ne modální) má určitý vliv na nadřazené okno, koordinace mezi jednotlivými stránkami je složitá. Například neexistuje žádný webový standard vytvářet modálních oken, protože stránka koncept tradičně vždy nezávislý prvek a proto je jeho životní cyklus je obtížné koordinovat z jiné stránky.

Naštěstí tento problém má řešení na nějakou dobu v SPI, můžete simulovat modální nebo ne modálních oken uvnitř téže webové stránce, je vytvořena žádná nová real strana okno. V případě non-modálních oken, jakákoli HTML element s absolutní polohy může být „non-modální okno“ a můžete vytvářet modálních oken pomocí absolutní polohy, ovládání z-index a neprůhlednost prvků „nahoře“ stránky („modální vrstvy“). Tato řešení jsou platné v kontextu SPI.

S trochou snahy, dokonce stát, který zobrazuje modální okno může být základním stavu, a tudíž splavný roboty vyhledávačů.

spirála Kulturní posun pro webové vývojáře

Většina webových vývojářů (a webových frameworků) si myslí, že Web jako založené na stránkách, redukce strana na jedné straně znamená radikální změnu mysli a jak děláme webových stránek a aplikací. Tato změna není tak radikální díky AJAX, AJAX je dnes mainstream a snížila počet stránek typických webových stránek, v souhrnu to přinesl nás u tohoto „nového“ modelu rozvoje SPI.

V novém SPI webu <form> značky zmizí a obecně na potřebu sezení používají jako manažeři datových těchto stránek sekvence. Nyní protagonista je stránka, klient s nějakým symetrie serveru (stránka v serveru). Ve skutečnosti, protože se zbavíme koordinace stránku s relací jsme osvobozeni ze zdroje problémů, jako je špatné praxe některých uživatelů, kteří otevřít několik oken s stejné stránce, tato praxe obvykle rozbíjí relace a aplikace obecně.

Programování SPI je založen na událostech stejně jako v pracovní ploše, protože v ploše většina aplikací běží ve stejném rámu okna, a když existují podřízených oken jsou tyto plně řízen hlavním okně a skutečně modal.

V návaznosti na paradigmatu evoluce vývoj webových aplikací, tento „nový“ přístup by mohl být jmenován Model 4.

spirála Kulturní posun pro koncové uživatele?

Ne moc, se záložkami a vpřed/vzad simulace koncoví uživatelé nebudou rozlišovat webové stránky SPI a stejnou stránku založenou navíc místo SPI bude lépe reagovat a typické blikání a rolování stránek navigace je odstraněn.

spirála Technická životaschopnost dnes

Tento manifest není prohlášení o záměrech, ale vyjádřením touhy podpořit „nový“ způsob, jak budovat webové stránky, které jsou již reálné. Výše uvedená technická studie měla vždy webový framework Java ItsNat jako technologického základu SPI vývoj webových stránek. Navzdory ItsNat byl počat z jednoho dne na tento druh aplikací/stránek, by mohla být předchozí techniky aplikovány s jinými webovými rámců nebo tyto rámce mohly vyvíjet poskytnout zázemí pro tento druh webových stránek SPI s požadavky na stránky simulace.

Některé požadavky na těchto webových stránkách SPI, aby bylo možné nahradit tradiční strana na základě webových stránek, jako je stránka simulace základních stavů na nakládací doby jsou jen možné se serverovými centric webových frameworků, protože vykreslování HTML musí být provedeno v serveru, na dobu načítání. vykreslování HTML včas zátěže a stejně dynamicky načten a jsou vkládány JavaScript klíčové vlastnosti webového rámce připraven postavit webové stránky SPI. Klientské centric rámce mohly mít zásadní úlohu při realizaci takzvaných sekundárních stavů.

spirála Dva příklady reálného světa

Webový  innowhere.com/jnieasy

Je vyrobena s ItsNat na serveru a dobrý příklad webu SPI, protože shrnuje veškeré požadavky na webové stránky SPI, je vysvětleno v tomto dokumentu, za uspokojivý nahradit tradiční místa. Ve skutečnosti je nová verze SPI vyměnit, aniž náznakový estetický funkční změny, předchozí verze založená na stránkách. Je založen na hashbangs.

Charakteristika

  • Single Interface Page: tlačítka Zpět a Vpřed se simulují přechod na předchozí nebo dopředu navštíveného státu.
  • Základní stavy lze uložit jako záložky.
  • SEO kompatibilní: základní stavy jsou dosažitelné pomocí JavaScriptu zakázáno, včetně modální okno.
  • Hashbang #!formát je používán, to znamená, Google SEO kompatibilní „AJAX URL“, stránka se rovněž požaduje po sjezdu Google z _escaped_fragment_ parametru. Například tento stav  je navštívena Google požadující toto URL.
  • Pracuje se JavaScriptu zakázáno.
  • Ukazuje bannerové reklamy založené na Google AdSense
  • Přesto, že je SPI, procházení základních stavech je monitorován Google Analytics pomocí skrytá <iframe>, která URL se změní, když aktuální zásadní změny stavu.
  • Simulovaný modální okno zabraňuje vytváření nového okna stránku, to simulované okno je také dosažitelné s přímým URL nebo hashbang verze s textem již v značek na dobu načítání následně SEO kompatibilní.

Webový  www.itsnat.org

Vyrábí se také s ItsNat na serveru. V tomto případě se používá History JavaScript API. To je nejvíce ideální přístup ke konverzi konvenční webové stránky na kompatibilní verzi SPI SEO. Je-li historie API nepodporuje konkrétním starého prohlížeče, konvenční strana navigace se automaticky použije. Všechny moderní webové prohlížeče podporují rozhraní API historie JavaScript. Charakteristiky SPI této webové stránky jsou v podstatě stejné jako v předchozím příkladu.