Diese "WebInfo" Webapplikation ist eine sogenannte "Single page application" (SPA). Das bedeutet, dass diese Anwendung nicht wie herkömmliche Webanwendungen aus mehrere Webseiten besteht, die durch Links (URL's) miteinander logisch verknüpft werden. Sondern sie besteht technisch gesehen nur aus einer Webseite, deren Aussehen zur Laufzeit dynamisch ergänzt wird. Vorteile einer Singel Page Applikation (SPA) sind:
  • Das Coding der Applikation findet im wesentlichen auf dem Client statt.
  • Der Datenverkehr zwischen Server und Client und damit die Wartezeiten auf Serverantworten verringern sich.
  • Der Zustand der Applikation kann auf dieser einen Webseite komplett abgebildet und gespeichert werden. Es kann z.B. auf Cookies verzichtet werden.
  • Der Server wird entlastet, was für hoch frequentierte Apllikationen aber auch für das anwenderfreundliche Verhalten von Vorteil ist.
  • Das verwendte Framework "AngularJs" bildet mit seinem "Routing Mechanismus" den Browserverlauf ab. Es kann also im Browser vor und zurück geplättert werden. Dadurch ist dieser oft genannte Nachteil von SPA's beseitigt.
Der einzig noch bekannte Nachteil ist, dass SPA-Anwendungen sich schlechter für die Suchmaschinen Optimierung (SEO) eignen. Hier bleibt nur "selber machen". Erste Hinweise kann man z.B. hier finden. "SEO selber machen" Zur Unterstütztung habe ich eine Generierungsfunktion für die von den Suchmaschinen verwendeten sitemap.xml Dateien integriert. (vgl. 'Spezielle Funktionalitäten')
In der vorliegenden Applikation werden 2 Frameworks verwendet: Im folgenden Bild ist der grundsätzliche Aufbau der "index.html" dargestellt, der über die gesamte Lebensdauer der Applikation angezeigt und nicht verlassen wird. Wer sich für das komplette Coding der Applikation interessiert, kann diese WebInfo auf GitHub einsehen.
Ein Ziel beim Design der Applikation war die vollständige Trennung zwischen dem technischen und dem Inhaltlichen Teil. Dies wurde einerseits durch eine strikte Trennung der Ressourcen erreicht. Die technische Umsetzung der Funktionalitäten ist im Verzeichnis '/app' abgelegt. Die inhaltlichen Dateien befinden sich im Verzeichnis '/content'. Die Verbindung der Applikation mit dem Content erfolgt mit Hilfe einer Direktive 'ea-load-json'. Beim Aufruf dieser Direktive wird der Pfad zum Content übergeben, der dann applikationsweit zur Verfügung steht. Außerdem wird der Folder der Json Dateien und die Liste der einzulesenden Json Datein übergeben. Jede Json Datei steht dann als gleichnamiges Objekt im Programmcode zur Verfügung.
Ein potentieller Anwender dieser WebInfo Applikation sollte zwei Dinge können.
1. Einfache HTML Dateien z.B. mit Unterstützung der Bootstrap-Klassen erstellen und
2. JSON Dateien fehlerfrei ausfüllen.
Das reicht aus, um eine eigene Applikation zu erstellen. Das Codieren der Anwendung mit dem AngularJs Framework ist erledigt. Es ist lediglich eigener Content anzulegen.
Folgende Parameter-Dateien sind im Content-Verzeichnis '.../json' zu erstellen:
  • imgBoxList.json - Auflistung der Bilder, die auf den einzelnen Webseiten mit Hilfe der Direktive 'eaImg' angezeigt werden.
  • naviList.json - Die gesamte Navigation über das Menü ist hier abgelegt
  • newsList.json - Parameter für die Darstellung von 'News' rsp. 'Archiv' die automatisch nach Start- und Endedatum angezeigt werden.
  • objBg.json - Liste der Hintergrundbilder oder -farben
  • paramsApp.json - Alle sonstigen internen Parameter der Applikation zur Sicherstellung der Funktionalitäten
Die erstellten Direktiven dienen einerseits der Übersichtlichkeit des Aufbaus der Applikation und sollen ein einheitliches Aussehen und Bedienungskonzept unterstützen. Es sind eine Reihe von Direktiven bereitgestellt, die das Erstellen von eigenen Html Seien vereinfachen sollen. Andererseits werden die Direktiven aber auch für die vollständige Trennung von Applikation und Content benötigt.
  • eaAccCoat und eaAccKey - Die Akkordionfunktion (z.B wie diese Webseite) wird mit zwei Tag's unterstützt. (<ea-acc-coat .../> und <ea-acc-key .../>)
    vgl. "Spezielle Funktionen" auf dieser Seite unten.
  • eaAddHtml - Das Nachladen von Html Dateien wird für die Trennung von Applikation und Content benötigt.
  • eaFooter - Stellt die Footer.html als fixen Footer dar.
  • eaImg und eaImgBox - Darstellung von Bilder oder Gruppen von Bildern (vgl. imgBoxList.json) in eigenen Html Dateien sowie deren Vollbilddarstellung.
    vgl. "Spezielle Funktionen" auf dieser Seite unten.
  • eaLoadParams - Liest alle JSON Dateien ein und legt sie in Javascript Objekten ab. Damit stehen sie für die Applikation jeder Zeit zur Verfügung.
  • eaNav - Stellt mit der Datei 'naviList.json' und der Css-Datei 'navDropdown.css' die komplette Navigation bereit und erzeugt das Navigationsmenü. Alternativ kann eine SiteMap generiert werden, die zur Anzeige in der Applikation verwendet wird.
  • eaVideo - Diese Direktive vereinfacht das Einbinden kleiner Videos, die gemeinsam mit dem eigenen Content abgelegt sind.
  • eaCookies - Diese Direktive unterstützt die Verwaltung von Cookies. Der gesamte Inhalt des Cookie-Banners ist in Parametern in der JSON Datei 'paramsApp.json' abgelegt. Mit dem Parameter (data-cookies-used="false") kann die Verwendung der Cookies ausgeschaltet werden. (Wie in dieser Applikation)
  • eaPathLink - Diese Direktive befindet sich am Anfang jeder Html-Seite und stellt den Link zu der aktuellen Seite mit seinen übergeordneten Seite dar.

    z.B. Diese Seite
    Hobbies Programmieren
Das eaAccordion dient der einfachen Verwendung eines vordefinierten "Accordeons" mit lediglich zwei Html-Tag's. Folgendes Beispiel zeigt, wie diese beiden zusammengehörenden Direktiven verwendet werden können. Diese Html-Seite ist mit dieser Technik erstellt und kann als Beispiel verwendet werden. Im Beispiel auf dem Bild ist der erste AccKey mit einem etwas komplexeren Html-Code versehen. Der zweite AccKey ist eher schlicht gehalten, einfach nur Text.
Beide Direktiven verfügen über einen Titel-Parameter, der immer angezeigt wird. In der Key-Direktive gibt es zusätzlich den Parameter "data-txt-len". Dieser dient der Festlegung der Länge eines Vorschautextes, der aus dem zugeklappten Teil gelesen und immer angezeigt wird. Auf dieser Seite habe ich für diesen Parameter 200 angegeben. Wenn man diese Funktionalität nicht wünscht, kann der Parameter weggelassen oder auf Null gesetzt werden. Für die Bedienung des Akkordions sind die beiden folgenden Zeichen vorgesehen: + -
Die beiden Direktiven eaImg und eaImgBox dienen einerseits der Darstellung von Bildern auf den eigenen Html-Seiten. Verwendet man statt des normalen <img ... > Tags den <eaImg ... > Tag, ist die Darstellung des Bildes im Vollbildmodus schon Codiert und funktioniert ohne weiteres Zutun. Um den Vollbildmodus aufzurufen, ist ein nur Click auf das anzuzeigende Bild erforderlich.
Die Direktive "eaImg" kann auf zwei Arten verwendet werden. Zunächst kann sie wie der Standard-img Tag angewendet werden.
Die zweite Möglichkeit besteht in der Definition einer Bildergruppe in der Datei "imgBoxListe.json". Beispielhaft kann das wie folgt aussehen:
Dann wird die gewünschte Imgedatei mit ihrer Indexnummer und dem Key (data-img-box-idx, data-img-box-key) angesprochen. Im Falle einer Bildergruppe, kann nach dem Aufruf eines Bildes im Vollbildmodus durch die gesamte definierte Gruppe navigiert werden.
Der News-Mechanismus ist mit einer Parameter-Datei "newsList.json" und dem Html-Tag <ea-news data-news-title="Aktuelles" data-news-mode="new" data-news-txt-len="200" data-news-init-idx = "1"> </ea-news> realisiert.
Dabei wird der übergebene Parameter 'data-news-title' innerhalb des <h2>-Tags als Überschrift dargestellt. Für den Parameter 'data-news-mode' sind folgende Werte möglich:
  • all - es werden alle Einträge bei denen das Datum 'newFrom' erreicht ist, unabhängig vom Datum 'newTo', angezeigt.
  • new - es werden alle Einträge angezeigt, bei denen das Datum 'newFrom' erreicht und 'newTo' noch nicht überschritten ist.
  • arc - es werden alle Einträge angezeigt, bei denen das Datum 'newFrom' erreicht und 'newTo' bereits überschritten ist.
Der Parameter 'data-news-txt-len' gibt die Anzahl der Zeichen an, die im zugeklappten Zustand des Newseintrages bereits angezeigt wird. Dieser Wert kann von 0 bis beliebig gewählt werden. Der Parameter 'data-news-limit' begrenzt die Anzahl der angezeigten News auf die angegebene Anzahl. Dies wird z.B. auf der Startseite verwendet. Der Parameter 'data-news-init-idx' gibt an, welcher Eintrag beim Start bereits aufgeklappt wird. Dabei bedeutet 0, es wird kein Eintrag aufgeklappt. Alle Werte zwischen 1-n bewirken, dass der entsprechende Eintrag aufgeklappt wird. Das Aussehen und die Bedienung sind mit dem Akkordion identisch.
Im folgenden ist ein Auszug aus der News-JSON Datei und ein Beispiel für einen Aufruf der eaNews Directive angegeben.
Wird die JSON-Datei "newsList.json" wie in dem Beispiel ausgefüllt, werden die datumabhängigen Einträge automatisch ermittelt und entsprechend der gewählten Parameter angezeigt. Mit diesem Mechanismus kann die Pflege von News zeitlich entzerrt werden, da "alte" Einträge automatisch aus dem Fokus der News-Datei verschwinden aber dann im Archiv immer noch verfügbar sind. Um alle in der news-JSON Datei erfassten Einträge anzuzeigen, muss der Author sicherstellen, dass mindestens auf einer Html-Seite entweder der Modus 'all' verwendet wird oder auf zwei Seiten einmal 'new' und einmal 'arc' ohne Einschränkung ('data-news-limit') ausgewählt wird.
Die Werte aus der JSON Datei werden nach folgender Vorschrift verarbeitet:
  • Wenn beide Felder "body" und "img" angegeben sind, wird die Darstellung automatisch zweispaltig.
  • Ist nur eins der beiden Felder angegeben, erfolgt die Darstellungt in einer Spalte.
  • Das Feld "imgBody" wird in jedem Fall als Bildunterschrift dargestellt.
  • Ist keines der beiden Felder "body" und "img" angegeben, wird dieser Teil der Darstellungt unterdrückt. Dann sollte es ein "href" Eintrag geben.
  • In dem Feld "href" kann optional eine Html-Seite angegeben werden, die an den oben definierten Teil angehägt wird. Das kann nötig werden, wenn z.B. ein Link dargestellt werden soll. Html Code kann im Feld "body" nicht dargestellt werden hier kann nur formatfreier Text verwendet werden.
Zur Unterstützung der Suchmaschinen Optimierung (SEO) ist auf der SiteMap Seite ein Button zur Generierung und dem Export der beiden Dateien "sitemap.xml" und "sitemapimage.xml" vorgesehen. Der Button wird sichtbar, wenn die SiteMap mit dem Parameter '?Admin' aufgerufen wird. Das sieht für meine WebInfo wie folgt aus: www.aleksander.de/#!/srv/smap?Admin Diese Dateien können dann in das Wurzelverzeichnis der Applikation kopiert werden. Mit der Datei 'robots.txt' können dann die Suchmaschinen die Seiten und Bilder indizieren.