Design
Das Design ist ein wesentlicher Bestandteil eines Internet-Auftritts.
Bei dbXwebApp ist es sehr einfach ein völlig individuelles Design zu entwickeln.Auch kann das System einfach seine Darstellung anhand verschiedener Designvorlagen unterschiedlich anzeigen.
Dabei ist es z.B. auch möglich von HTML/ XHTML zu WML durch einer entsprechende Design-Vorlage umzuschalten.
Ein Designer braucht bei dbXwebApp bezüglich der Umsetzung seiner Vorstellungen keinerlei systembedingte Abstriche machen.
Ein komplettes Design besteht aus mindestens einem HTML Design-Template. Dieses Design-Template ist eine komplette HTML (xHTML) Seite incl. Header Html und Body,
Grundsätzlich sollten alle Layout Formatierungen über CSS erfolgen.
Die grundsätzliche Verwendung der jeweiligen CSS Dateien erfolgt im Design-Template und ist dadurch quasi fest vorgegeben.
Allerdings kann jedes Modul bei Bedarf weiter CCS Dateien durch einen einfachen Befehl in die Ausgabe integrieren.
Ohne explizite Angabe eines Designs nutzt dbXwebApp immer das Design aus dem Ordner design/default/ .
dbXwebApp Design
Bei dbXwebApp ist der Inhalt vom Design komplett getrennt. Das Design wird durch die verwendeten Design-Templates und die verwendeten CSS-Dateien gesteuert.
Zur Demonstration können Sie das komplette System auch mit anderen Designs aufrufen.
- default Das Standart Design von dbXwebApp
- R-Green Test-Design in grün mit Menü rechts
- L-Blue Test Design in blau mit Menü links
Wie deutlich zu erkennen ist steuert einzig und allein die jeweils verwendete CSS-Datei das komplette Design der Seite.
Dadurch ist es sehr einfach das Design der Seite komplett zu ändern. Keine Zeile PHP-Code, nicht ein Inhalt, muss dafür bearbeitet werden. Nahezu alle Format-Anweisungen stehen in der CSS-Datei.
Das System läuft auch ohne JavaScript*. Dadurch ist im höchsten Maß eine Barrierefreiheit für das System möglich.
Insbesondere der Aspekt die Webseite auch anders formatiert für verschiedene Ausgabemedien (PC, Drucker, Handy u.s.w) zur Verfügung zu stellen ist dabei berücksichtigt.
Mit dbXwebApp brauchen Sie beim Design keinerlei systembedingte Abstriche machen. Design-Vorlagen können nahezu immer 1:1 umgesetzt werden.
Bei dbXwebApp gilt diese strikte Trennung von Design und Inhalt auch für Formulare und Listen. Das gesamte System erzeugt durch die internen PHP-Funktionen nur in seltenen Ausnahmefällen HTML-Code. Alles was HTML ist, ist bei dbXwebApp eine Vorlage.
Im Bereich Content-Management bietet dbXwebApp eine weitere zusätzlich Möglichkeit. Jeder Content kann vom System automatisch mit 1,2 oder 3 Spalten dargestellt werden.
Das System ermittelt dabei vollkommen automatisch eine möglichst optimale Verteilung des Inhaltes auf die Spalten. Dabei wird sogar eine unterschiedliche Spaltenbreite berücksichtigt.
Da Inhalte in Inhalte "includiert" werden können, kann das System jegliche Anzahl von Spalten darstellen. Für 4 Spalten werden halt 2 * 2 Spalten benötigt.
Alle Templates beinhalten keine Anwendungslogik. Die Logik, das z.B. bei einer Liste ein Kopf, dann n mal der Body für die einzelnen Datensätze und am Ende noch ein Fuss ausgegeben werden muss, stellt das jeweilige Modul zur Verfügung. Das Template selbst besteht aus purem HTML.
Ein Designer erstellt Design-Vorlagen. Der Designer muss zwar HTML und CSS kennen, benötigt aber nahezu keine Kenntnisse vom System und der Template-Engine. Mit Hilfe dieser Vorlagen (Templates) und den zugehörigen CSS-Anweisungen kann eine Seite optisch ansprechend dargestellt werden.
Im Falle eines Redesigns dieser Website müssen also lediglich einige wendige Design-Templates überarbeiten werden.
Wenn die grundsätzliche Struktur erhalten bleiben soll reicht es sogar aus die verwendeten CSS-Dateien anzupassen. So können Sie ihre Webpräsenz innerhalb kurzer Zeit auf ein neues Layout umstellen. dbXwebApp arbeitet nicht mit "statischen" Blöcken wie "Links", "Rechts", "Oben" und "Unten" wie viele andere Systeme.
Bei dbXwebApp können Sie immer und überall Funktionen und Modulausgaben (z.B. Eine Liste der Top-News) direkt in Ihren Inhalt (Content) durch einen einfachen Aufruf an der gewünschten Stelle einbinden. Das betrifft jegliches Modul. Auch Systemmodule wie z.B. das Menüsystem.
Es ist sehr einfach ein eigenes und völlig individuelles Design für eigene dbXwebApp Anwendungen zu erstellen.
Inhalt eines Design-Templates
001 <title>{dbxwebapp}- PHP open-source CMS Framework - {cms:title}</title>
002 <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
003 <meta http-equiv="language" content="{cms:language}" />
004 <meta name="date" content="2007-12-01" />
005 <meta http-equiv="cache-control" content="no-cache" />
006 <meta http-equiv="pragma" content="no-cache" />
007 <meta name="mssmarttagspreventparsing" content="true" />
008 <meta name="description" content="{-cms:description}" />
009 <meta name="keywords" content="{-cms:keywords}" />
010 <meta name="Generator" content="dbXwebApp! - Copyright (C) 2008 Open Source PCeinfach.de" />
011 <meta name="robots" content="index, follow" />
012 <meta name="author" content="Armin L. Braun" />
013 <meta name="publisher" content="{-dbxwebapp}" />
014 <meta name="audience" content="alle" />
015 <meta name="revisit-after" content="1 days" />
016 <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
017 <link href="css/layoutL.css" rel="stylesheet" type="text/css" />
018 <link href="css/menu.css" rel="stylesheet" type="text/css" />
019 <link href="css/modules.css" rel="stylesheet" type="text/css" />
020 <link href="css/editor.css" rel="stylesheet" type="text/css" />
021 <br />
022 <div id="Xheader">
023 [modul=dbx_menu,top]dbx_ul_id=nav&dbx_inline_sub=1&dbx_sub_onactiv=1&dbx_menu_span=0&dbx_menu_id=dbxmain
024 &override=1&dbx_menu_activ=1&left_dbx_menu_id=no&subtop_dbx_menu_activ=1[/modul]
025 </div>
026 <div class="Xcolmask Xleftmenu">
027 <div class="Xcolright">
028 <div class="Xcol1wrap">
029 <div class="Xcol1">
030 <!-- Column 1 start -->
031 {modul_content}
032 <!-- Column 1 end -->
033 </div>
034 </div>
035 <div class="Xcol2">
036 <!-- Column 2 start -->
037 [modul=dbx_design]op=show[/modul]
038 <br />
039 [modul=dbx_menu,left]dbx_ul_id=nav-secondary&dbx_inline_sub=0&dbx_sub_onactiv=1&dbx_menu_span=0
040 &dbx_menu_id=content-41&override=1&dbx_menu_activ=1&subleft_dbx_menu_activ=1[/modul]
041 <br />
042 <!-- Column 2 end -->
043 </div>
044 </div>
045 </div>
Ob Sie Ihr Layout mit Tabellen oder DIV Container oder auch ganz anders formatieren ist Ihnen völlig frei überlassen. Letztlich muss (sollte) es eine valide HTM / xHTML Seite sein.
Die hier angegebene CSS Datei "css/layoutb.css" und die JavaScript Datei "js/common.js" sind hier nur beispielhaft mit angegeben.,
entsprechen aber dem "default" Design von dbXwebApp.
Der Platzhalter {modul_content} wird vom System durch den Inhalt des jeweils aktiven Moduls (was über GET oder POST Parameter aktiviert wird) ersetzt.
Der Aufruf Modul ( mein_modul ) not found!
wird vom System durch die Ausgabe vom Modul "mein_modul" ersetzt, wobei dem Modul die Parameter "parameter1" und "parameter2" mit übergeben werden. Jedes Modul kann weitere Parameter vom System abfragen (z.B alle POST und GET Parameter).
Bei dbXwebApp erstellt das System nur in ganz wenigen Ausnahmefällen selbst HTML-Teile.
Alle Inhalte kommen als Rückgabewerte von den jeweils aufgerufenen Modulen. Der Aufruf [mudul=...../modul] wird dann jeweils mit dem "Content" des entsprechendem Moduls ersetzt.
Meistens nutzt das System Templates in das es "nur" die Daten (z.B den Inhalt einer NEWS) einmischt.
Auch werden (falls nicht ausgeschaltet) alle Modulausgaben in einem DIV Container mit der CSS Class des jeweiligen Moduls ausgegeben. Dadurch ist es recht einfach über die CSS Selektoren jedes Element anzusprechen und individuell zu designen.
Zusätzlich kann über das Modul dbx_jquery die Seite sehr einfach mit diversen Effekten erweitert werden.
* ohne JavaScript - Einige Module und auch einige Funktionen (sind optional) erfordern Javascript.