Die Einzelseite Schnittstelle Manifesto

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

Ursprünge der Web-Technologie

Wenn Tim Berners Lee erfunden Bahn wurde er für ein System, wissenschaftliche Dokumente aus der Ferne zugänglich, optisch ansprechende, einfach zu Code und einfach, für eine nichttechnische Person nutzen zu veröffentlichen suchen.

In einer wissenschaftlichen Dokument, externe zitiert auf andere Dokumente ist unerlässlich, damit der Leser kann optional das Thema in Frage zu entwickeln.

Aus diesen Gründen wurde das World Wide Web als eine Seite (document) basiertes System mit Hyperlinks konzipiert.

Zunächst wird das Web war eine Welt von statischen Seiten und Links, aber bald die Erzeugung von dynamischen Seiten und in der Regel die Verwendung des Web als Unterstützung für die Gestaltung von Web-basierten Anwendungen kompliziert alles.

Spirale Die Ankunft von Web-Applikationen

Seit vielen Jahren hat es ein starkes Bestreben, die Web-Paradigma der Seiten und Links für die Anwendungsentwicklung anzupassen. In einer Web-Anwendung Ansicht von statischen Dokumenten und einfache Verbindungen des Berners ‚gibt es nicht.

Es wurden verschiedene Anwendungsentwicklungsansätze passiert:

Modell 1: direkte Übersetzung der Original-Modell der Seiten und Links, wo Seiten werden dynamisch generiert.
Modell 2 o MVC: Jetzt Links nicht direkt, die auf eine konkrete Zielseite, in diesem Fall einen Controller entscheiden, was die nächste Seite zu den Operationen in Seitenübergang genommen abhängig.
MVC bezogen auf die Komponenten (Modell 3?): Ist die ausgefeilte Version des Modell 2 simuliert, wie Desktop-Anwendungen arbeiten. Es basiert auf Komponenten und Ereignisse auf der Grundlage, so dass jeder Benutzer Aktion impliziert die komplette wieder aufzubauen und neu zu laden der Seite teilweise zu ändern, einen Teil nach mit der Aktion durchgeführt. Die Seite und Seitenübergang wird nun von Komponenten, die nun, welche Änderungen erfolgen nach der Veranstaltung, die Simulation, wie die Komponenten arbeiten auf Desktop-GUI-Programmierung verwaltet.

In den letzten Jahren die AJAX-Technik wurde eingeführt, diese Technik mit Hilfe von JavaScript erlaubt partielle Änderungen der Seiten erhalten neue Daten vom Server ohne Nachladen. Trotz der teilweise Seitenwechsel Technik ist lange vor der Einführung von XMLHttpRequest in Internet Explorer (Basis der AJAX-Programmierung), war es der Boost seiner massiven Einsatz.

Jetzt Millionen von Websites und Web-Anwendungen verwenden AJAX, um eine bessere Erfahrung für die Nutzer dank reaktions Benutzeroberflächen teilweise Vermeidung der lästige Seite neu geladen zu beenden ist.

Trotz der massiven Einsatz von AJAX, können wir sagen, dass die Web folgt ein Entwicklungsmodell konnten wir als „Modell 2 (MVC) mit AJAX angereichert“ zu nennen. Bei der Verwendung von AJAX „Modell 3“ hat nicht viel Sinn, weil AJAX weitgehend reduziert die Notwendigkeit von Seite Management auf Basis von Komponenten. Da AJAX ist in der Regel neben Komponenten (nicht unbedingt in Modell 2 zu präsentieren), so können wir den aktuellen Stand der Technik der Web-Entwicklung als Modell 3.5, wo Seitennavigation ist teilweise bei nur geringfügigen Zustandsübergänge von AJAX und JavaScript geführt vermieden einzuordnen.
Spiral Was sind die Nachteile der Seite gestützten Navigations- und Entwicklung?

Jeder Web-Entwickler weiß, wie problematisch ist Seitennavigation in einer Web-Anwendung, neben der Bandbreite verschwenden und Prozesszeit Wiederaufbau ganze Seiten mehr Probleme machen Web-Entwicklung schmerzhaft wie unerwünschte Caching, Vor / Zurück-Buttons, desynchronisiert Formen durch die „Form auto-fill“ verursacht Merkmal einigen Browsern und so weiter. Es ist nicht ungewöhnlich, um Web-Anwendungen, die die Menüs und Schaltflächen des Browsers oder mit Frames oder iFrames (zB Banken), um das Problem der Back / Forward-Tasten zu vermeiden verstecken sehen.

Seite basierte Entwicklung zwingt einen Stil der Codierung seltsam, sich wiederholenden (reichlich enthält) und ineffizient (sowohl Bandbreite und Rechenleistung) nicht in Desktop-Entwicklung gefunden.
Spirale Was ist das, was verhindert, dass intensive Nutzung von AJAX?

Im Bereich der Web-Entwicklung sind wir verwendet, um zwei Arten von Web-Lösungen unterscheiden: Web-Applikationen und Web-Sites.

Im ersten Fall AJAX wird mehr und mehr verwendet werden, da diese Art von Anwendungen nicht teilen einige Voraussetzungen für Web-Sites eingeführt. In Web-Seiten intensive Nutzung von AJAX ist ein Problem.

In öffentlichen Websites Endanwender auf die Seite Begriff verwendet, um die Seiten einige Requisiten und Dienstleistungen werden in jedem Web-Site wie erforderlich gebunden:

Bookmarking: Jede Webseite hat eine andere URL, kann diese URL als Lesezeichen gespeichert werden. Da AJAX können teilweise die Seite der URL ist die gleiche zu ändern, kann der Endbenutzer nicht als Bookmark speichern einen konkreten Ausblick (state) der Seite.
Search Engine Optimization (SEO): Jede Website will vollständig von Suchmaschinen wie Google-Suche indiziert werden. Aktuelle Crawler finden Sie im Web als Web 1.0, das heißt, dass JavaScript-Code vollständig ignoriert, wodurch jede Teiländerung via AJAX geführt vom Server geladen wird nicht dann ausgeführt, nicht von Raupen Durchlaufen der Website indiziert.
Dienstleistungen basierend auf Seite Besuche: Zum Beispiel advertisement Dienste wie Google AdSense und Seiten Besuch Überwachung wie Google Analytics, in beiden Fällen ist die Zahl der Seite geladen wird, ist wichtig. Daher ist jede teilweise Änderung von AJAX getan nicht als neuer Besuch zu zählen.
Gelegentliche Notwendigkeit von Pop-pup-Fenster

Da diese Voraussetzungen intensive AJAX ist in Websites abgeraten.

Aber der Unterschied zwischen einem „Web-Site“ und „Web-Applikation“ wird immer kleiner, weil fast jede Website ist eine Art von „Web-Applikation“ …
Spiral Sollten wir aufgeben AJAX intensive Anwendungen?

KEINE.

Es gibt technische Lösungen für alle oben aufgeführten Voraussetzungen.
Spirale Entwicklung von Web-Seiten auf der Grundlage einer einzigen Web-Seite (SPI) ist es möglich?

JA!

Dies ist die Zeit, um diesen Übergang, Entwicklern und Endverbrauchern werden wir alle gewinnen zu starten. Wir haben die Technologie und modernen Browser qualifiziert sind, um dieses Ziel zu erreichen.

Um in diesem „neuen“ Weg der Web-Entwicklung müssen wir auf alle vorherigen Requisiten der jede Website zu erreichen erfolgreich zu sein.
Spiralwiedersehen Seiten, willkommen Staaten

In einer Web-Anwendung ohne JavaScript ist Zustandsfolge äquivalent zu den Seiten, in einem SPI-Anwendung jede Teiländerung impliziert eine neue „Zustand“ von „der Seite“. Zwischen den Staaten können wir zwei Kategorien von Staaten unterscheiden:

Grundzustände
Sekundär Staaten

Differencing zwischen beiden Statustypen ist sehr wichtig, weil Grund Staaten werden Web-Seiten bei Bedarf zu werden. Fundamental und sekundäre Differenzierung Website abhängig.

Beide Arten von Staaten besser zu verstehen, können wir ein reales Beispiel untersuchen: anmelden Validierung.

In einem klassischen Seite basierten Anwendungen typischen Login unter Verwendung von zwei Seiten, eine für Benutzer und Passwort und einen Benutzeroptionen, die, wenn Login-Validierung korrekt war gebaut; Die Login-Seite wird erneut geladen, die einige Fehlermeldungen neben dem Login-Formular, wenn Login-Eingabe ist falsch.

In einer SPI web könnte Erstanmeldung und der Benutzer-Optionen Seite werden die Grundzustände und Fehlermeldungen neben Login könnte Sekundär Staaten.

Ein weiteres Beispiel, eine Website basierend auf den Seiten, um SPI konvertiert werden, in diesem Fall Grundzustände werden die Seiten und Mittelstaaten werden Staaten Seite mit geringfügigen Änderungen, nicht wichtig genug für Bookmarks oder durch Crawler durchlaufen werden können.
Spirale Einzelseiten-Schnittstelle und Bookmarking

Verschiedene Seiten haben unterschiedliche URLs nach dem SPI Route wie können wir einen Zustand der URL ohne Nachladen, damit dieser neue Zustand kann durch Endbenutzer vorgemerkt werden, zu ändern und zur gleichen Zeit ?.

Es gibt einen Trick, mit der „Referenz“ Teil des URLs („Hash-Fragment“, shebang oder Hash-Bang), das ist der letzte Teil, falls vorhanden, nach dem Zeichen #. Diese Referenz wird verwendet, um die Seite an den von einigen Marke angegebenen konkreten Ort zu blättern. Dieser Referenzteil verändert, wenn nicht die Seite neu geladen, damit, wenn das URL-Referenz wird durch die Verwendung window.location neben der Seite Zustand geändert (in diesem Fall diese neue Staat ist „fundamental“) mit JavaScript und AJAX, dann nicht reload durchgeführt wird. Da der URL und der Grundzustand geändert haben, können Endbenutzer diese URL zu speichern, in gewisser Weise, die den neuen Staat info, als Bookmark speichern.

Wenn Endbenutzer wieder zur Seite mit Lesezeichen kommen will, wird der Soll-Zustand in dem Referenzteil der URL angegeben wird, wird der Server angefordert werden, leider ist der Referenzteil ist nicht an den Server gesendet, weil Referenzteils tut nichts damit zu tun, entfernten Ort unter Verwendung von HTTP, daher benötigen wir eine post-Ladevorgang.

Der Server wird eine erste Seite in dem der Soll-Zustand ist nicht der angegebene zurückkehren, aber die window.location Objekt enthält die Original-URL einschließlich des Referenzteils. Beim Laden der Zielseite können wir erkennen, ob JavaScript window.location enthält einen Verweis Teil und ob diese Referenz über die erforderliche Soll-Zustand-Info, wenn wahr, können wir die URL Zugabe eine Art von normalen Parameter bestimmen Sie die Zielzustand zu laden neu zu schreiben. Weil die URL tatsächlich verändert eine neue Serveranfrage ausgeführt wird, ist diese Zeit der Zustand zum Laden in einen Parameter und gibt der Server eine neue Seite mit den gewünschten Zustand.

Eine andere Möglichkeit, besser als hashbangs stellt sich mit dem Aufkommen von HTML 5, die HTML 5 History API.
Spirale Einzelseiten-Schnittstelle und Search Engine Optimization (SEO)

Der einfachste Weg, unsere Website zu bekommen ist von Suchmaschinen-Crawler verarbeitet ist, um zwei verschiedene Navigations-Modi, SPI für Endbenutzer, Seiten für die Web-Crawler zu bieten.

Das nächste Beispiel zeigt einen Link mit dieser Idee:

Dieser Link wird nichts in einem Browser mit JavaScript zu tun aktiviert, da die Navigation durch deaktiviert „return false“ der onclick-Attribut, aber wenn ein Bot Indizes Link die onclick-Attribut ignoriert, weil JavaScript-Code wird nicht ausgeführt, und die angegebene URL als nächster zu verarbeiten Seite zu verarbeiten.

Im Bereich einer SPI-Anwendung, wobei URLs für Seite / Staat Navigation verwendet werden, müssen den Sollzustand, die gleiche Art von URLs in SPI bookmarking verwendet, die mit dem Bezugsteil, um den Soll-Zustand anzuzeigen, enthalten oder die Ziel direkt als geschrieben ein normaler Parameter, desto später wird bevorzugt, da er eine Serveranforderung natürlich vermeidet „ziemlich URLs“ kann auch verwendet werden.

Aktuelle Google schon kriecht „AJAX URLs“, das heißt, URLs, die den Soll-Zustand in dem Referenzteil nach #! wie in Erstellen AJAX Anwendungen gecrawlt, in diesem Fall angegeben die Website / Anwendung muss die erwartete Seite zurückkehren mit einem _escaped_fragment_ Parameter angefordert.

Zur gleichen Zeit die SPI-Web-Framework können spezifische Code in das onclick-Handler vor return false hinzuzufügen oder binden kann ein Ereignis-Listener, um die Verbindung, die für Staat / Seite Navigation verwendet, mit addEventListener oder attachEvent je nach Browser registriert. Diese Ereignis-Listener wird eine Aktion ausführen, um den Server zu befehlen, in der Regel unter Verwendung von AJAX, um die Seite Zustand zu ändern. Wenn der Link angeklickt wird diese Statusänderung ist nicht eine neue Seite, da das Attribut onclick = „… return false“ vermeidet das Standardverhalten.

Die oben beschriebene Technik ist die einfachste und sofort unter Verwendung von sichtbaren Verbindungen mit Bots und SPI kompatibel. Sie können immer beide Funktionen zu trennen, zum Beispiel mit versteckten Links für Endbenutzer jedoch nicht für Bots neben anderen anklickbare Elemente SPI Zustände mithilfe von JavaScript unsichtbar für Bots ändern.

Das wichtigste Merkmal eines SPI Lage Framework ist als HTML-Seite Generation mit den gewünschten Zustand zu Ladezeit und zur gleichen Zeit die gleiche Änderung Staat muss mit JavaScript und Teil Seite Aktualisierung durchgeführt werden. Diese Voraussetzungen sind grundlegend für SPI und Seite Simulation bereitzustellen.

Spiral SPI und Zurück / Vorwärts-Tasten

Zurück / Vorwärts-Tasten sind eine Quelle von Problemen auf herkömmlichen Seite basierte Web-Sites und sollte so bald wie möglich vermieden werden. Trotz der Benutzer verwendet werden, um zu vermeiden, Zurück und Vorwärts, wenn ein Formular mit Benutzerdaten ist die Verwendung von Back / Forward-Tasten sehr weit verbreitet (weil es das Risiko für den Kauf zweimal in der gleichen Ebene angekreuzt oder Buch trägt).

Anscheinend ist der SPI-Paradigma bricht die traditionelle Art der Navigation einer Website, weil in der Theorie Zurück / Vorwärts-Tasten hat keinen Sinn in SPI (folgende Seite) und Web-Browser nicht bieten eine gute Kontrolle dieser Tasten.

Das ist nicht ganz richtig, Back / Forward Verhalten simuliert werden können, statt Seitennavigation Back / Forward (und Geschichte Navigation im allgemeinen) können verwendet werden, um den aktuellen Stand zum vorherigen / vorwärts Zustand zu ändern. In diesem Fall kann ein JavaScript-Code zu erkennen, wenn der Referenz Teil der URL ändert, und fordert die Anwendung, den Status entsprechend ändern. Da der Browser nicht über die Seite Ihre Anwendung ist nun die volle Verantwortung der Back / Forward Verhalten vermeidet die typischen Probleme von unerwarteten Back / Forward Verwendung von Endbenutzern, wenn ein Formular, jetzt in SPI ändern gibt es keine solche Form und kein unkontrolliertes Seitennavigation durch die Web-Applikation / Website.

 

SPI und Dienstleistungen basierend auf Seitenbesuche

Eine Anzeige kostenlos und Seite Besuch Zähler auf, wie viele Seiten geladen wurden basierend. In beiden Fällen können Sie versteckte <iframe> Elemente, die eine leere Seite, die erforderlichen Skripte verwenden, um diese Art von Dienstleistungen auszuführen.

Im Fall der Anzeige Dienste wie Google AdSense, dynamische Einfügen von <iframe> impliziert Laden Anzeigen daher jede Veränderung Staat könnte eine neue reload von <iframe> mit Anzeigen implizieren. Google AdSense scheint zu erkennen, wenn der AdSense-Skript wird in einem <iframe> ausgeführt und berücksichtigt den Inhalt der Container-Seite. Es kann wünschenswert sein, eine Art von Parameter, der den Grundzustand, der Laden wird das <iframe> identifiziert hinzuzufügen.

Im Fall der Besuch Zähler, können wir sie verwenden, um Benutzer besucht die Grundzustände unserer SPI Website zu überwachen. In diesem Fall brauchen wir eine versteckte <iframe> enthält eine leere Seite mit den Überwachungsskripts. Mit einem einfachen Parameter können wir zeigen, die Grundzustands besuchten. Unsere <iframe> sollten global (immer das gleiche in der Seite) sein. Wenn die Seite zum ersten Mal geladen, wobei der Grundzustand geladen (in URL angegeben) sollte auf die <iframe> mit einem Parameter angezeigt werden. Nach dem Laden der Seite, könnte jeder Grundzustandsänderung benachrichtigt werden <iframe> Ändern der URL via JavaScript nach der neuen Grundzustand, wird diese URL Änderung ein erneutes Laden von <iframe> (was einen neuen Besuch) verursachen.

Spiral SPI und Popup-Fenster

Wenn eine neue Seite Fenster erstellt die SPI-Modell ist gebrochen. Der Fundamentalismus ist schlecht, es ist kein Problem, wenn der Staat dieses neuen Fenster hat nichts mit dem Zustand des übergeordneten Fensters zu tun, in diesem Fall von Popup-Fenstern sind in Ordnung.

Das Problem entsteht, wenn eine Aktion auf dem Pop-up-Fenster (modal oder nicht modal) durchgeführt hat einen gewissen Einfluss auf das übergeordnete Fenster, wird die Koordination zwischen den Seiten zu kompliziert. Zum Beispiel gibt es keine ein Web-Standard, um modale Fenster zu erstellen, da die Seite Konzept hat traditionell immer ein unabhängiges Element und damit seinen Lebenszyklus ist schwierig, von einer anderen Seite zu koordinieren.

Glücklicherweise wird dieses Problem hat Lösung für einige Zeit in SPI können modal oder nicht modal Fenster innerhalb der Web-Seite zu simulieren, wird keine neue Echt Seite Fenster erstellt. Im Falle von nicht-modale Fenster kann jedes HTML-Element mit absoluter Positionierung ein „nicht-modalen Fenster“ und Sie können modale Fenster durch Verwendung absoluter Positionierung, Steuerung z-index und Opazität der Elemente „on top“ auf der Seite erstellen („modal Schichten“). Diese Lösungen sind in einem SPI Kontext gültig ist.

Mit ein wenig Aufwand, auch der Staat, der zeigt ein modales Fenster kann ein Grundzustand und damit schiffbar von Suchmaschinen-Bots können.

Spirale Ein Kulturwandel für Web-Entwickler

Die meisten Web-Entwickler (und Web-Frameworks) denke, das Web wie auf den Seiten der Basis, Seite Reduktion auf eine einzige Seite bedeutet eine radikale Veränderung des Geistes und wie wir Websites und Anwendungen. Diese Änderung ist nicht so radikal, dank AJAX ist AJAX heute Mainstream und hat die Anzahl der Seiten von typischen Web-Sites, in zusammenfass es uns in der Nähe von dieser „neuen“ SPI Entwicklungsmodell gebracht hat, reduziert.

In der neuen SPI web das Tag <form> wird ausgeblendet und im Allgemeinen die Notwendigkeit der Sitzungen als Datenmanager folgende Seite Sequenzen verwendet. Nun ist die Hauptfigur ist die Seite Client mit einer gewissen Symmetrie in-Server (die Seite in Server). In der Tat, weil wir uns von Seite Abstimmung mit Sitzungen sind wir einer Quelle von Problemen wie die schlechte Praxis einiger Benutzer, die mehrere Fenster mit der gleichen Seite zu öffnen befreit loszuwerden, diese Praxis bricht Regel die Sitzung und die Anwendung im Allgemeinen.

SPI-Programmierung basiert auf Ereignissen der gleiche wie bei Desktop-basierte, weil in den meisten Desktop-Anwendungen läuft auf die gleiche Rahmenfenster und als untergeordnete Fenster existieren diese vollständig von dem Hauptfenster und wirklich modal verwaltet.

Nach dem Paradigma Evolution der Web-Entwicklung könnte dieser „neuen“ Ansatz Modell 4 genannt werden.
Spirale Ein Kulturwandel für den Endverbraucher?

Nicht sehr viel, mit einem Lesezeichen und der Back / Forward-Simulation Endbenutzer nicht gehen, um eine SPI-Website und die gleiche Seite der Basis unterscheiden, ferner die SPI-Website zeigt mehr reagiert und die typische Blinken und Scrollen der Seite Navigation wird entfernt.


Spirale Technische Realisierbarkeit heute

Dieses Manifest ist keine Aussage über die Absichten, aber der Ausdruck des Wunsches, eine „neue“ Art und Weise bauen Websites, die bereits real sind zu fördern. Die obige technische Studie hatte schon immer die Java-Web-Framework ItsNat als technologische Basis von SPI Website-Entwicklung. Trotz ItsNat wurde vom ersten Tag an auf diese Art von Anwendungen / Webseiten konzipiert, könnte früheren Techniken mit anderen Web-Frameworks angewendet werden oder konnte diese Frameworks entwickeln, um Einrichtungen für diese Art von SPI Webseiten auf, Seite Simulation Anforderungen.

Einige Anforderungen dieser SPI-Websites in der Lage zu ersetzen traditionelle Seite basierte Web-Sites wie Seite Simulation von Grundzuständen auf die Ladezeit zu sein, sind nur mit Server-centric Web-Frameworks möglich, da HTML-Rendering muss im Server auf die Ladezeit durchgeführt werden. HTML-Rendering auf der Ladezeit und der gleichen dynamisch geladen und mit JavaScript eingelegt sind die wichtigsten Eigenschaften eines Web-Framework bereit, SPI-Websites zu bauen. Client centric Rahmenbedingungen könnte eine wichtige Rolle für die Realisierung von sogenannten Sekundär Staaten.
Spirale Ein Beispiel aus der Praxis

Das Web Innowhere.com/jnieasy mit ItsNat gemacht in Server und ein gutes Beispiel für SPI Website, weil es fasst alle Anforderungen an ein SPI Website, erklärte in diesem Dokument, um ein zufriedenstellendes Ersatz eines traditionellen Ort sein. In der Tat, ersetzt die neue SPI-Version, ohne significative Ästhetik der Funktionsänderung, die vorherige Version auf Basis von Seiten.

Charakteristik

Einzelne Seite Interface: Zurück und Vorwärts simuliert Änderung zur vorherigen oder vorwärts besuchten Staat.
Grundzustände können als Lesezeichen gespeichert werden.
SEO kompatibel: Grundzustände sind erreichbar mit JavaScript deaktiviert einschließlich eines modalen Fenster.
Google SEO kompatibel „AJAX URLs“ mit Hilfe der #! Format wird die Seite auch nach dem Google Konvention _escaped_fragment_ Parameter angefordert. Beispielsweise wird dieser Zustand durch Google Anforderung dieser URL gecrawlt.
Arbeiten mit JavaScript deaktiviert.
Zeigt ein Anzeigen-Banner auf Google AdSense auf Basis
Trotz der SPI, das Surfen auf Grundzustände wird von Google Analytics durch Verwendung überwacht eine versteckte <iframe> die URL ändert sich, wenn die Grundzustandsänderungen.
Ein modales Fenster simuliert vermeidet die Schaffung eines neuen Fenster Seite, ist diese simulierten Fenster auch erreichbar mit einer direkten URL mit Text bereits in Aufschlag auf die Ladezeit folglich SEO kompatibel.

Comments are closed.