Jeden Stránka Rozhraní Manifest

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

Single Page Interface Manifest

Aktualizováno: Září. 21, 2015

spirála Původ webové technologie

Když Tim Berners Lee vynalezl web hledal systém pro publikování vědeckých dokumentů vzdáleně přístupné, vizuálně atraktivní, snadno kódu a snadné použití pro non-technické osoby.

Ve vědeckém dokumentu, vnější cites na jiné dokumenty, je nezbytné, aby čtenář může případně rozvíjet téma.

Z těchto důvodů World Wide Web byl koncipován jako stránka (dokument), na základě systému s odkazy.

Zpočátku byl Web na světě pro statické stránky a odkazy, ale brzy generování dynamických stránek a stránek se v obecné použití Webu jako podpora pro tvorbu webových aplikací založených na všechno složité.

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

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

Odlišný vývoj aplikací přístupy byly děje:

  • Model 1: přímý překlad původního modelu stránky a odkazy, kde jsou stránky dynamicky generovány.
  • Model 2 o MVC: teď odkazy nejsou přímo odkazující na konkrétní cílovou stránku, v tomto případě správce rozhodnout, jaké další stránky je v závislosti na operace proběhla ve straně přechodu.
  • MVC založené na komponenty (Model 3?): je sofistikovanější verze Modelu 2 simuluje, jak desktopových aplikací pracovat. Je založen na komponenty a události, takže každá akce uživatele znamená kompletní přestavbu a reload stránky částečně mění některé části v souladu s provedenou akci. Stránka a stránka přechod je nyní spravované součásti, které se teď, jaké změny probíhají v závislosti na události, které simuluje, jak součásti, práce na desktop GUI programování.

V posledních letech AJAX technika byla zavedena, tato technika s pomocí Javascriptu umožňuje dílčí změny na stránkách, získání nových dat ze serveru bez překládky. Navzdory částečné stránky změnit techniku je dlouho před zavedením XMLHttpRequest v aplikaci Internet Explorer (základní AJAX programování), bylo zvýšení jeho masivní použití.

Nyní miliony webových stránek a webových aplikací pomocí AJAX poskytovat lepší zážitek pro koncové uživatele díky více citlivé uživatelské rozhraní částečně vyhnout otravné stránku načte.

I přes masivní použití AJAX, můžeme říci, že Web kopíruje model rozvoje, který bychom mohli pojmenovat jako “Model 2 (MVC) obohacený s AJAX”. Při použití AJAX, “Model 3” nemá moc smysl, protože AJAX do značné míry snižuje potřebu stránka řízení na základě složek. Protože AJAX je obvykle používán společně s komponenty (ne nutně přítomné v Modelu 2), můžeme klasifikovat aktuální stav umění, vývoj webových aplikací, jako Model 3.5, kde stránka navigace je částečně vyhnout v případě menších státní přechody prováděny pomocí AJAX a JavaScript.

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

Každý webový vývojář ví, jak problematické je stránka navigace ve webové aplikaci, kromě plýtvání šířku pásma a čas procesu přestavby celé stránky více problémů, aby se vývoj webu bolestivé jako nežádoucí ukládání do mezipaměti, zpět/vpřed tlačítka, desynchronizovanou formy způsobené “automatické vyplňování formulářů” funkcí některých prohlížečů 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í snímků nebo prvky iframe (např. banky), aby se zabránilo problému Zpět/Vpřed tlačítka.

Stránka založena rozvoj síly, styl kódování divné, opakující se (spousta zahrnuje) a neefektivní (jak na šířku pásma a výpočetní výkon) nebyl nalezen v ploše rozvoje.

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

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

V prvním případě AJAX je stále více a více používán, protože tento druh aplikace nesdílejí některé náležitosti uložených pro webové stránky. Ve webové servery s intenzivním využitím AJAX je problém.

Ve veřejné webové stránky, koncoví uživatelé jsou zvyklí na stránce koncepce, směřující do stránek některé potřeby a služby jsou požadovány v jakékoli webové stránky, jako je:

  1. Záložky: Každá webová stránka má jinou adresu URL, tuto adresu URL lze uložit jako záložku. Protože AJAX může částečně změnit stránku URL je stejná, koncový uživatel nemůže uložit jako záložku konkrétní view (státní) části stránky.
  2. Optimalizace pro vyhledávače (SEO): Jakékoliv webové stránky, chce být plně indexovány pomocí vyhledávačů, jako je Google Search. Aktuální pásech viz Web jako Web 1.0, to znamená, že kód jazyka JavaScript je plně ignoroval, čímž se jakákoli dílčí změna provedena pomocí AJAX načíst z server není spuštěn, pak nejsou indexovány roboti křížení webové stránky.
  3. Služby na základě návštěvy stránek: například reklamní služby, jako je Google AdSense a stránku navštivte monitorování, jako je Google Analytics, v obou případech počet načtení stránky je důležité. Proto jakákoli dílčí změna provádí AJAX se nepočítá jako nová návštěva.
  4. Občas je třeba z pop-pup okna

Protože tyto náležitosti intenzivní AJAX je odradit webových stránek.

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

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

BEZ.

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

spirála Vývoj webových stránek založených na jedné Webové stránce (SPI), je to možné?

ANO !

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

Uspět v tomto “nový” způsob vývoje webových musíme splnit všechny předchozí potřeby jakékoli webové stránky.

spirála Sbohem stránek, vítejte státy

Ve webové aplikaci bez Javascriptu, státní posloupnosti je ekvivalentní stránek, v SPI aplikace jakákoli dílčí změna znamená nový “stát”, “stránky”. Mezi státy můžeme rozlišit dvě kategorie států:

  • Základní států
  • Sekundární státy

Odlišení mezi státní typů je velmi důležité, protože základní států budou webové stránky v případě potřeby. Základní a sekundární diferenciace je web závislý.

Pro lepší pochopení obou typů států můžeme studovat skutečný příklad: přihlášení ověřování.

V klasické stránce aplikace založené na typické přihlášení je postaven na dvě stránky, jednu pro uživatele a heslo a jeden ukazuje uživateli možnosti, pokud přihlášení ověření byl správný; přihlašovací stránka načte znovu ukazuje některé chybové zprávy se vedle přihlašovacího formuláře při přihlášení vstupu je špatně.

V SPI webu, úvodní přihlášení a uživatelské možnosti stránky by mohla být základní států, a chybové zprávy spolu login může být sekundární státy.

Další příklad, webové stránky, založené na stránky, které mají být převedeny na SPI, v tomto případě základních státy budou stránek a středních států bude stránka státy s menšími změnami, není dost důležité pro záložky nebo třeba projet prohledávače.

spirála jedné Stránce Rozhraní a Záložky

Různé stránky mají různé adresy Url, po SPI cesta, jak můžeme změnit stav a zároveň URL bez překládky aby tento nový stát může být záložkou do konce uživatelům?.

Existuje trik, pomocí “referenční” část adresy Url (“hash fragment”, výstroj nebo hashbang), tohle je poslední část, pokud je přítomen, následující znak#. Tento odkaz se používá k posouvání stránky na konkrétní umístění určeném některé <a name=”ref”></a> značka. Tento referenční část pokud se změnil nemá načte stránku, proto pokud URL odkaz je měnit pomocí window.umístění vedle stránce státu (v tomto případě tento nový stát je “základní”) s JavaScript a AJAX, pak žádný jiný se provádí. Protože URL a základní stav změnily, koncoví uživatelé mohou uložit tuto adresu URL, nějakým způsobem s obsahem nového státu info, jako záložku.

Pokud koncový uživatel chce, aby se vrátil znovu na stránku se záložkou, cílový stav je uvedena v referenční části URL, server bude požádán, bohužel referenční část není odeslán na server, protože referenční část nemá nic společného s vzdáleného umístění pomocí protokolu HTTP, proto budeme potřebovat post-procesu zatížení.

Server vrátí počáteční stránku, na které se cílový stav, není uvedeno, avšak window.umístění objekt obsahuje původní adresy URL, včetně referenční část. Při načítání cílové stránky můžeme detekovat JavaScript, zda window.umístění obsahuje referenční část a zda tento odkaz má požadovaný cílový stav info, pokud je to pravda, můžeme přepsat URL přidat nějaký normální parametr k určení cílového stavu, aby zatížení. Protože adresa URL má vlastně změnil požadavek na nový server je popraven, tento čas stát, aby se zatížení je v parametru, a server vrátí novou stránku s požadovanou státu.

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

spirála jedné Stránce Rozhraní a Optimalizace pro vyhledávače (SEO)

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

Další příklad ukazuje odkaz s touto myšlenkou:

<a href=”URL stránky” onclick=”return false”>…</a>
Tento odkaz bude dělat nic, v prohlížeči s podporou Javascriptu, protože navigace je vypnuta “false” <kód>onclick atribut, ale když bot indexuje tento odkaz ignoruje onclick atribut, protože JavaScript kód se neprovede a bude zpracovávat zadanou adresu jako další stránku procesu.

V oboru SPI aplikace, adresy Url se používá pro stránky/stavu navigace musí obsahovat cílový stav, stejný typ adresy Url používané v SPI bookmarking, který je pomocí reference k označení cílového státu, nebo cíl je přímo napsáno jako normální parametr, později je přednostní, protože to se vyhne serveru žádost, samozřejmě “hezká Url” mohou být také použity.

V současné době Google už prochází “AJAX Url”, to znamená, že adresy Url obsahující cílový stav v referenční části následující #!, jak je uvedeno v Tvorba AJAX Aplikací možné Procházet, v tomto případě webové stránky/aplikace musí vrátit očekává, že stránka je požadováno s _escaped_fragment_ parametr.

Zároveň SPI web framework můžete přidat specifický kód pro obslužnou rutinu onclick než return false nebo se může vázat posluchače události pro odkaz používány pro stát/navigace stránky, registrované s addEventListener nebo attachEvent v závislosti na prohlížeči. Tento posluchač událostí bude provádět některé akce na příkaz server, obvykle pomocí AJAX, pro změnu stránky státu. Když na odkaz kliknete na tento stav změnit není novou stránku, protože atribut onclick="... return false" se vyhýbá výchozí chování.

Techniku popsal dříve, než je nejjednodušší a okamžitou pomocí viditelné odkazy kompatibilní s roboty a SPI. Lze vůbec oddělit obě funkce, například pomocí skryté odkazy pro koncové uživatele, ale ne pro roboty spolu s dalšími klikací prvky změnit SPI státy pomocí Javascriptu neviditelný pro roboty.

Nejdůležitějším rysem SPI schopný rámec je generování stránky HTML s požadovanou státu na dobu načítání a zároveň stejnou změnu stavu, musí být provedena s JavaScript a částečné stránce aktualizace. Tyto potřeby jsou zásadní pro poskytnutí SPI a stránku simulace.

spirála SPI a Zpět/Vpřed tlačítka

Zpět/Vpřed tlačítka jsou zdrojem problémů na běžné stránky založené webové stránky a je třeba se vyhnout, jakmile je to možné. Navzdory uživatelé jsou používány, aby se zabránilo tlačítka Zpět a Vpřed při odeslání formuláře se data uživatele (protože to s sebou nese riziko nákupu dvakrát stejné rovině, odškrtli nebo knihy), použít Zpět/Vpřed tlačítka je velmi rozšířený.

Zřejmě SPI paradigma rozbije tradiční způsob navigace webu, protože v teorii, Zpět/Vpřed tlačítka nemá žádný smysl v SPI (ne stránky) a webových prohlížečích neposkytují dobrou kontrolu nad těmito tlačítky.

To není plně pravda, Zpět/Vpřed chování může být simulované, namísto stránky, navigace Zpět/Vpřed (a historie navigace obecně) mohou být použity ke změně současného stavu s předchozí/vpřed státu. V tomto případě kód jazyka JavaScript může detekovat, pokud referenční část URL změny a požadavky, žádosti o změnu státu. Protože prohlížeč nic nemění na stránce vaše aplikace je nyní plně zodpovědný Zpět/Vpřed chování vyhnout se typické problémy, nečekané Zpět/Vpřed pomocí koncových uživatelů při odeslání formuláře, nyní v SPI není tam žádná taková forma a žádné nekontrolované stránka navigace na webové aplikace/webové stránky.

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

Inzeráty služeb a stránku navštivte čítače jsou založeny na tom, kolik stránek bylo naloženo. V obou případech můžete použít hidden <iframe> prvky obsahující prázdnou webovou stránku s požadovanou skripty chcete-li provést tento druh služeb.

V případě reklamní služby jako Google AdSense, dynamické vkládání <iframe> znamená načítání nové reklamy, a proto každá změna by stát mohl znamenat nový reload <iframe> s reklamami. Google AdSense zdá se, zjistit, kdy AdSense skriptu je spuštěn v rámci <iframe> a bere v úvahu obsah nádoby stránce. To může být žádoucí, aby přidat nějaký parametr, který identifikuje základní stav, který je načítání <iframe>.

V případě návštěvy čítače, můžeme je použít ke sledování uživatele, návštěvy základních státy naší SPI webové stránky. V tomto případě potřebujeme hidden <iframe> obsahující prázdnou webovou stránku s monitorovací skripty. S jednoduchým parametr můžeme uvést základní státní navštěvují. Naše <iframe> by měla být globální (vždy stejné stránce). Když se stránka poprvé naloženo, základní státní naložením (uvedeno v URL) by měla být uvedena do <iframe> s parametrem. Po načítání stránky, každá zásadní změna stavu mohla být oznámena <iframe> změna URL přes JavaScript podle nových základních stát, tuto URL adresu změnit způsobí reload <iframe> (s uvedením novou návštěvu).

spirála SPI a pop-up okna

Když nová strana okna je vytvořen SPI model je rozbité. Fundamentalismus je špatné, není tam žádný problém, pokud se stát tohoto nového okna nemá nic společného se státem nadřazené okno, v tomto případě pop-up okna jsou v pořádku.

Problém nastává, když všechny akce provedené na pop-up okno (modální nebo ne modálních) má nějaký vliv na nadřazené okno, koordinace mezi stránkami je složité. Například neexistuje žádný webový standard pro vytváření modálních oken, protože stránka koncept již tradičně vždy nezávislý prvek, a proto jeho životní cyklus je obtížné koordinovat z jiné stránky.

Naštěstí tento problém má řešení pro nějaký čas v SPI, můžete simulovat modální nebo ne modálních oken uvnitř stejné stránce žádné nové skutečné stránky, okno je vytvořen. V případě non-modální okna, jakýkoliv HTML element s absolutní polohování může být “non-modální okno” a můžete vytvořit modální okna pomocí absolutní polohy, ovládání z-index a průhlednost prvků “nahoře” stránky (“modální vrstvy”). Tato řešení jsou platné v SPI kontextu.
S trochou úsilí, dokonce i státu, který modální okno může být základním stavu, a proto splavný o roboty vyhledávačů.

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

Většina webových vývojářů (a web frameworks), že se na Webu, jak na základě stránek, stránka zmenšení na jednu stránku znamená radikální změnu mysli a jak jsme se, aby webové stránky a aplikace. Tato změna není tak radikální díky AJAX, AJAX je dnes mainstream a snížila počet stránek typické webové stránky, v souhrnu, který nám přinesl u této “nové” SPI model rozvoje.

V novém SPI web <forma> tag zmizí a obecně je třeba sezení použity jako data manažeři následující stránce sekvence. Nyní protagonista je stránka klienta s nějakou symetrii v server (na straně serveru). Ve skutečnosti, protože jsme se zbavit stránka koordinace s relací jsme osvobozeni zdroje problémů, jako je špatné praxi někteří uživatelé, kteří otevřete několik oken se stejnou stránku, tato praxe obvykle přeruší zasedání a aplikace obecně.

SPI programování je založeno na události, stejně jako v ploše, protože v desktop většina aplikací běží ve stejném rámu okna, a když dítě windows existují tyto jsou plně řízeny hlavním okně a skutečně modální.

Následující paradigma evoluce, vývoj webových aplikací, tento “nový” přístup by mohl být s názvem Model 4.

spirála kulturní posun, který je pro koncové uživatele?

Ne moc, s bookmarking a Zpět/Vpřed simulace koncových uživatelů se nebude rozlišovat SPI webové stránky a na stejné stránce se sídlem, dále SPI stránky budou více citlivé a typické blikání a posouvání navigace na stránce je odstraněn.

spirála Technické životaschopnost dnes

Tento manifest není prohlášení záměrů, ale výrazem touhy prosadit “nový” způsob budování webových stránek, které jsou již reálné. Výše uvedené technické studie měla vždycky Java web framework ItsNat jako technologickou základnu SPI vývoj webových stránek. Navzdory ItsNat byl koncipován od prvního dne, aby tento druh aplikací/stránek, předchozí techniky může být použita s jinými webovými rámců nebo tyto rámce mohl vyvíjet, poskytovat zázemí pro tento druh SPI webové stránky s stránka simulace požadavky.

Některé požadavky těchto SPI webových stránek, být schopen nahradit tradiční stránky založené webové stránky, jako je například stránka simulace základních státy na době zatížení, jsou jen možné s server orientované webové rámce, protože HTML rendering musí být provedeno v serveru na zatížení. HTML vykreslování na zatížení čas a stejné dynamicky načten a vloženy JavaScript jsou klíčové vlastnosti web rámec připraven postavit SPI webových stránek. Klient centric rámců může mít zásadní roli pro realizaci tzv. sekundárních států.

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

Na webu innowhere.com/jnieasy

Je vyroben s ItsNat v serveru a dobrý příklad SPI webové stránky, protože to shrnuje všechny požadavky SPI webové stránky, je vysvětleno v tomto dokumentu, být uspokojivá náhrada pro tradiční stránky. Ve skutečnosti, nový SPI verze nahrazuje, bez significative estetické funkční změna, předchozí verze založená na stránky. Je založen na hashbangs.

Vlastnosti

  • jedné Stránce Rozhraní: tlačítka Zpět a Vpřed jsou simulovány mění na předchozí nebo vpřed navštívil státě.
  • Základní států mohou být uloženy jako záložky.
  • SEO kompatibilní: základní stavy jsou dosažitelné s JavaScript zdravotně postižené, včetně modální okna.
  • hashbang #! je použit formát, který je, Google SEO kompatibilní “AJAX Url”, stránka se také požaduje po Google konvence <kód>_escaped_fragment_ parametr. Například stát je navštívena Google požadovat URL.
  • Pracuje s vypnutou podporou JavaScript.
  • Ukazuje reklamy banner na základě Google AdSense
  • Přesto, že SPI, procházení základních státech je sledován pomocí Google Analytics pomocí hidden <iframe>, které URL se změní, když se aktuální zásadní změny stavu.
  • simulované modální okno zabraňuje vytváření nového okna stránka, tento simulovaný okno je také dostupné s přímé URL nebo hashbang verze s textem již v označení na zatížení čas, proto kompatibilní SEO.

Na webu www.itsnat.org

To je také vyroben s ItsNat v serveru. V tomto případě JavaScript History API je používán. To je nejvíce ideální přístup, aby převést tradiční web SPI SEO kompatibilní verze. Pokud History API není podporován beton starý prohlížeč, konvenční stránka navigace je automaticky použít. Všechny moderní webové prohlížeče podporují JavaScript History API. SPI vlastnosti této webové stránky jsou v podstatě stejné jako předchozí příklad.

spirála Manifest v jiných jazycích.

španělština

Poznámka: tyto překlady mohou být mírně zastaralá, protože tento manifest je “živý”.

Ukrajinština díky Mario Pozner

ruština díky Andrey Geonya

Serbo-Croatian díky Jovana Milutinovich

Slovenský překlad díky Znalosti, Tým

německy díky Valeria Aleksandrova.

rumunský překlad poskytnuté Vědecký Tým.

makedonského díky Katerina Nestiv

angličtina díky Elana Pavlet

estonské díky Valerie Bastiaan

spirála Odkazy směřující na manifest

Diskuse na DZone

Diskuse na TheServerSide.com

Diskuse na YCombinator.com

Diskuse na JavaHispano.org (ve španělštině)

Moderní Principy v Web Development prezentace na základě SPI manifest