Header Bereich (rot) / Menü Bereich (gelb) / Content Bereich (grün)

Vorraussetzungen: Java Skript aktiviert, Zugang zum WWW

Startdatei: a35_demo.php

Diese Datei dient als Beispiel für Ihre persönliche Corporate Design Dateistruktur. Sie ist eine Beispielbasis für den Einbau von a35 in eine bestehende Website.

Abhängige Dateien: ../scripts/a35css2.php ; a35ini.php ; diverse JQuery Skripte

Header Bereich (rot) / Menü Bereich (gelb) / Content Bereich (grün)

Vorraussetzungen: Server Side Include SSI

Startdatei: a35_katalog.htm

Header Bereich <!--#include virtual="/inc/header-a35-demo.inc" -->
Menü Bereich <!--#include virtual="/inc/menue-a35.inc" -->
Contentbereich <!--#include file="content-a35-tab.php" -->

Header Bereich - header-a35-demo.inc (Logos, Symbolbilder, UB Braunschweig Navigationsleiste)

Menü Bereich - menue-a35.inc (linke Navigationsleiste)

Content Bereich - content-a35-tab.php

Header Bereich (rot) / Menü Bereich (gelb) / Content Bereich (grün)

Startdatei: a35start.php

In der Startdatei a35start.php ist der Menü Bereich (Navigation) als Demomenü (JQuery Drop Down Menü) durch ein PHP Include der Datei a35menu.php (kann beliebig verändert / angepasst werden) eingebaut.

Der Header Bereich ist ebenfalls als PHP Include (include("$headpc");) in der a35start.php eingebettet. In der a35ini.php ist die Quelldatei für den Header Bereich definiert ($headpc= 'a35_head_pc1.php';). Dieses soll eine simple Variante für Ihr eignes Header Design darstellen das benutzerorientiert gestaltet werden kann. Im Demo Packet befinden sich zwei Varianten für den Header Bereich eine grafisch einfache Variante a35_head_pc2.php und eine etwas grafisch betontere Variante a35_head_pc1.php (Wechsel durch Änderung in der a35ini.php).

Der Content Bereich (eingebettet in a35start.php) ist beim PC Design in vier Quadranten aufgebaut die gleichzeitig abgebildet werden (Zielgruppe Datenbankexperten die bei der Neueingabe oder Datenverarbeitung einen größeren Überblick auf die Daten benötigen) Die einzelnen Qudranten können mit Hilfe von Funktionstasten leicht in Ihrer Anordnung und Größe veränderet werden.

Header Bereich (rot) / Menü Bereich (gelb) / Content Bereich (grün)

Startdatei: a35tab.php

In der Startdatei a35tab.php ist der Menü Bereich (Navigation) als Demomenü (JQuery Drop Down Menü) durch ein PHP Include der Datei a35menu.php (kann beliebig verändert / angepasst werden) eingebaut.

Der Header Bereich ist ebenfalls als PHP Include (include("$headtab");) in der a35tab.php eingebettet. In der a35ini.php ist die Quelldatei für den Header Bereich definiert ($headtab= 'a35_head_tab1.php';). Dieses soll eine simple Variante für Ihr eignes Header Design darstellen das benutzerorientiert gestaltet werden kann. Im Demo Packet befinden sich zwei Varianten für den Header Bereich eine grafisch einfache Variante a35_head_tab2.php und eine etwas grafisch betontere Variante a35_head_tab1.php (Wechsel durch Änderung in der a35ini.php).

Der Content Bereich (eingebettet in a35tab.php) ist beim Tablet Design analog zum Corporate Design Bsp. (Zielgruppe allgemeine Nutzer mit Endgräten größer Tablet

Tabmodell vier Tab Grundfelder ( Indexsuche, Ergebnislisten, Titeldaten, Extras) beliebig erweiterbar (Hilfe)

Tabs können frei angeordnet werden

Tab Grundgerüst (open Source Code) Quelle: http://jqueryui.com/tabs/

Sonderfall Intranet: JQuery Quelldateien auf eignen Server herunterladen Quelle:http://jqueryui.com/download/

Script zum Aktivieren eines Tabs in der ein Ergebnis angezeigt wird:

<script>
function active(n)
{
$('#tabs').tabs({active:n});
}
</script>

Indexsuche - active(0) - REG
Ergebnislisten - active(1) - EXT
Titeldaten - active(2) - INT
Extras - active(3) - INF
Hilfe - active(4) - HLP

Header Bereich (rot) / Menü Bereich (gelb) / Content Bereich (grün)

Startdatei: a35app.php

Der Header Bereich ist ebenfalls als PHP Include (include("$headmobile");) in der a35app.php eingebettet. In der a35ini.php ist die Quelldatei für den Header Bereich definiert ($headmobile= 'a35_head_mobile1.php';). Dieses soll eine simple Variante für Ihr eignes Header Design darstellen das benutzerorientiert gestaltet werden kann. Im Demo Packet befinden sich zwei Varianten für den Header Bereich eine grafisch einfache Variante a35_head_mobile2.php und eine etwas grafisch betontere Variante a35_head_mobile1.php (Wechsel durch Änderung in der a35ini.php).

Der Content Bereich (eingebettet in a35app.php) ist beim Mobile Design als jQuery Accordionstruktur aufgebaut.(Zielgruppe allgemeine Nutzer mit mobilen Endgräten kleiner als Tablets)

Accordionstruktur mit vier Sections (Indexsuche, Ergebnislisten, Titeldaten, Extras) beliebig erweiterbar (Hilfe)

Sections können frei angeordnet werden

Accordion Grundgerüst (open Source Code) Quelle: http://jqueryui.com/accordion/

Sonderfall Intranet: JQuery Quelldateien auf eignen Server herunterladen Quelle:http://jqueryui.com/download/

Script zum Aktivieren einer Section in der ein Ergebnis angezeigt wird:

<script>
function active(n)
{
$('#tabs').tabs({active:n});
}
</script>

Indexsuche - active(0) - REG
Ergebnislisten - active(1) - EXT
Titeldaten - active(2) - INT
Extras - active(3) - INF
Hilfe - active(4) - HLP