Anwendungen

Komplette Anwendung am Beispiel einer Account-Verwaltung


Auf der Folgeseite ist eine komplette Anwendung am Beispiel einer Accountverwaltung beschrieben.

Dabei wird JavaScript, DOM, AJAX, PHP und MySql verwendet.

Beispiele für Homepage


Einfache Homepage

Bei dieser Homepage werden keine HTML5 Tags verwendet.

Zur Anordnung der div-Eemente muss hier mit float gearbeitet werden.


Homepage mit Boxen

Bei dieser Homepage werden Tags aus HTML5 und Boxen aus dem Boxmodell von CSS3 verwendet.

Durch die Nutzung des Boxmodells ist hier kein float notwendig.


Homepage mit Boxen und Navigationsleiste

Bei dieser Homepage werden Tags aus HTML5 und Boxen aus dem Boxmodell von CSS3 verwendet. Zusätzlich ist hier eine Navigationsleiste enthalten.


Homepage mit Wrapper, Boxen und Nav-Leiste

Zusätzlich zu den Tags aus der Homepage mit Boxen und Navigationsleiste hat diese Seite direkt unter dem body Wrapper. Damit entsteht um die Seite ein Rand und die Seite wird nur bis zur angegebenen maximale Breite vergrößert. Dann wird der Rand breiter.

WEB-Seite mit Passwort schützen


Sollen WEB-Seiten nicht allgemein zugänglich sein, müssen sie mit einer Kennung und Passwort geschützt werden.

Dabei ist zu berücksichtigen, dass die Seite, die nach der Anmeldung und der Prüfung angezeigt wird, nicht durch die Eingabe der url im Browser aufgerufen werden kann.

Folgeseiten müssen natürlich auch geschützt sein und dürfen nicht durch die Eingabe der url im Browser aufgerufen werden können.

Auf dieser Seite sind Beispiele um eine WEB-Seite mit Passwort zu schützen.

Mehrsprachige WEB-Seite


Da ich bei meinen Lösungen meistens eine Datenbank habe, habe ich auf der Folgeseite eine Lösung für eine mehrsprachige Webseite mit JavaScript und AJAX realisiert.

Bildergalerie


Bilderngalerien können mit unterschiedlichen Mittel realisiert werden.

Auf der Folgeseite werden die Möglichkeiten mit CSS und JavaScript gezeigt.

Unterscheidung zwischen Smartphone und PC


Soll eine Seite auch auf einem Smartphone angezeigt werden, ist es meist erforderlich, dass sich die Seiten für PC und Samrtphone unterscheiden.

Gibt es unterschiedliche Seiten für PC und Smartphone muss dies beim Aufruf berücksichtigt werden.

Aufwendige Filme oder Bilder sollten beim Aufruf einer Seite über Smartphone unterdrückt werden.

Ich bevorzuge die Methode mit JavaScript und DOM und habe das auf der Folgeseite beschrieben.

Unterschied Smartphone PC

Datei, TAG, Funktion oder CSS-Abschnitt anzeigen


Bei den hier vorgestellten Lösungen ist es sinvoll und notwendig die TAGs, Funktionen oder den CSS-Abschnitt anzuzeigen.

Das geht zwar, indem man ein <pre> TAG verwendet und den Text in das HTML-Dokument kopiert. Das ist aufwendig und bei Änderungen wird schnell die Kopie vergessen.

Die hier vorgestellte Lösung bietet die Möglichkeit Dateien, oder aus Dateien bestimmte TAGs, Funktionen oder CSS-Abschnitte, anzuzeigen.

Die Anzeige erfolgt durch die Seite dateiLesen.html.

dateiLesen.html

In die Seite ist die JavaScript-Datei dateiLesen.js eingebunden. Hier passiert die ganze Verarbeitung, die in der Datei kommentiert ist.

dateiLesen.js

Für den Aufruf wird in dieser Seite (anwendungen.html) ein Link gesetzt und in der Datei anwendungen.js ein EventListener installiert.

Link auf dieser Seite:

  <a id="datanz-dateiLesenjs"
     class="applButton">dateiLesen.js</a>

Entsprechender EventListener in anwendungen.js:

  document.getElementById("datanz-dateiLesenjs").addEventListener("click", function() {dateiAnzeigen('datei','dateiLesen.js' );}, false);

Die Funktion dateiAnzeigen(), die vom EventListener aufgerufen wird, öffnet ein Fenster und ruft die Seite dateiLesen.html mit den Suchparametern auf.

dateiAnzeigen()

Die Buttons beziehen sich auf die Datei dateiTest.txt, die komplett mit dem Button Datei anzeigen gelesen werden kann.

Datei anzeigen (dateiTest.txt) TAG anzeigen (div) Funktion anzeigen (dataRead) CSS anzeigen (section) Bereich anzeigen (anzeige)