mawebsite3/first_try(33) Sprache: Deutsch


Ma_Website 3, erster Versuch

Ma_Website 3 (a2)
Version3 alpha2
Größe [KiB]8577
SHA2561e63c0c9f050abf9f25ec899e630ffd78c855a0e60104c18964eb0af7204664a
Downloadhttp://k007.kiwi6.com/hotlink/0z3g7219gb/mawebsite3p2.7z

Beschreibung

Die erste Ma_Website 3 hatte auf den ersten Blick ein deutlich ausgereifteres Layout, als ihre Vorgängervarianten. Dennoch konnte man auch die Designs der Vorversionen und einige Zusätzliche auswählen. Dabei konnte man für einige der Designs, auch die Farbe selbst festlegen. Die Ma_Website 3 nutze auch ein spezielles XML Format zum Speichern der Informationen. Das XML Format war dem normalen HTML aber sehr ähnlich. Außerdem nutzte die Ma_Website 3 erstmals eine MySQL Datenbank, in der auch ausführliche Fehlerinformationen, Feedbacks, Statistiken und ein Suchindex gespeichert wurden. Die Administrationsseite ermöglichte es, jede Inhaltsseite zu bearbeiten und sich über das installierte PHP zu informieren.

Obwohl die Seite nicht vollständig war, verfügte sie über viele Funktionen.

Ma\_Website 3 Projektübersichtsseite
Ma_Website 3 Projektübersichtsseite

Design Umschalter

Die Ma_Sys.ma Website 3 ermöglichte sowohl das Design umzuschalten, als auch für die meisten Designs eine eigene Farbe auszuwählen. Dabei wurden CSS Dateien für jewals eine der Grundfarben zu Verfügung gestellt, die dann eine bestimmte Funktion entsprechend der Farbauswahl des Benutzers umrechnete.

Dabei wurde davon ausgegangen, dass jede Farbe in einem Stylesheet an der Orginalfarbe orientiert ist. Wenn also in einem (im Orginalzustand) roten Stylesheet der Farbwert #ff0000 (also rot) auftaucht, muss dieser durch #0000ff ersetzt werden, wenn der Benutzer das Stylesheet benutzen will, aber die Farbe blau eingestellt hat. Der größte Farbwert wird also an eine andere Stelle verschoben. Das gleiche gilt für den zwei- und drittgrößten.

Um ein Stylesheet in ein Stylesheet der passenden Farbe umzuwandeln, wurde für jede Farbe im Stylesheet, die unten stehende Funktion aufgerufen, die aus der Zielfarbe ($color1) und der Orginalfarbe ($color2), die neue Farbe berechnete. Dabei wurde die Zielfarbe in Form eines englischen Farbnamens angegeben. Die Orginalfarbe musste als Hexadezimalcode vorliegen. Die Funktion arbeitete nicht sehr effizent und die Ergebnisstylesheets wurden nicht zwischengespeichert, weshalb diese Funktion für einen produktiven Einsatz der Ma_Sys.ma Website 3 umgeschrieben werden müsste.

<?php
function ma_progress_color($color1, $color2) {
        // Farbverschiebungsdefinition
        // 1 : Größter wert, 2 : mittlerer wert, 3: kleinster wert
        $clr_shiftings = array(
                "red"      => array(1, 2, 3), "green"  => array(3, 1, 2),
                "blue"     => array(3, 2, 1), "yellow" => array(1, 1, 3),
                "turkeese" => array(3, 1, 1), "violet" => array(1, 3, 1),
                "gray_1"   => array(1, 1, 1), "gray_2" => array(2, 2, 2),
        );
        // Eingabe Verarbeitbar machen
        $tmp_01 = str_split(str_replace("#", "", $color2), 2);
        // In Dezimalzahlen umwandeln
        for($i = 0; $i < 3; $i++) {
                $tmp_01[$i] = hexdec($tmp_01[$i]);
        }
        // Eingabe nach sortieren
        // Kleinsets Element zuerst, groesstes zuletzt.
        sort($tmp_01);
        // Nach dem Farbverschieben werden die Farben hier gespeichert
        $clr = array(0, 0, 0);
        // $clr_shiftings anwenden
        for($i = 0; $i < 3; $i++) {
                if($clr_shiftings[$color1][$i] == 1) {
                        $clr[$i] = $tmp_01[2];
                } elseif($clr_shiftings[$color1][$i] == 2) {
                        $clr[$i] = $tmp_01[1];
                } elseif($clr_shiftings[$color1][$i] == 3) {
                        $clr[$i] = $tmp_01[0];
                }
        }
        // Formatieren und zurueckgeben
        for($i = 0; $i < count($clr); $i++) {
                // Dafuer sorgen dass die Ausgabe immer zwei Ziffern hat
                // und in Hexadezimalzahlen umwandeln
                $clr[$i] = dechex($clr[$i]);
                if(strlen($clr[$i]) < 2) {
                        $clr[$i] .= "0";
                }
        }
        $ret = "#".$clr[0].$clr[1].$clr[2];
        return $ret; // $
}
?>

Die Funktion besteht im Wesentlichen aus einem Array, welches beschreibt, welche Farben auf welche Weise dargestellt werden. Bei rot, ist z. B. der größte Wert der erste, der rot-Anteil der neuen Farbe, ist der größte Anteil der Orginalfarbe, der zweitgrößte Wert ist der Zweite, der grün-Anteil der neuen Farbe, ist also der zweitgrößte Anteil der Orginalfarbe, usw.

Dass dadurch nicht immer ein optimales Stylesheet entsteht, ist klar. Aber vor allem bei Stylesheets, die im Orginal nur einen Farbton verwenden, klappt die Methode gar nicht schlecht, wie die Abbildung unten zeigt, in der die Ma_Sys.ma Website 3 in blau zu sehen ist.

Die Ma\_Website 3 in blau
Die Ma_Website 3 in blau

Datenformat

Das Ma_Website Datenformt war dem HTML Format sehr ähnlich, hatte aber einige Eigenheiten, die z. B. das Einfügen von Programmquelltexten und Screenshot-Galerien erleichterten. Im Folgenden ist die DTD der Ma_Website 3 angegeben.

<!ENTITY lt "&#38;&#60;">
<!ENTITY gt "&#62;">
<!ENTITY amp "&#38;&#38;">
<!ENTITY apos "&#39;">
<!ENTITY quot "&#34;">
<!ENTITY Auml "&#196;">
<!ENTITY auml "&#228;">
<!ENTITY Ouml "&#214;">
<!ENTITY ouml "&#246;">
<!ENTITY Uuml "&#220;">
<!ENTITY uuml "&#252;">
<!ENTITY szlig "&#223;">
<!ELEMENT page (menue?, content)>
<!ATTLIST page keywords CDATA #IMPLIED>
<!ELEMENT menue (link | plannings)*>
<!ELEMENT link (#PCDATA)>
<!ATTLIST link target CDATA #REQUIRED>
<!ATTLIST link type (internal | external | direct) "internal">
<!ELEMENT content (caption | text | table | list | code |
                                        gallery | image | usertext)*>
<!ELEMENT caption (#PCDATA)>
<!ELEMENT text (#PCDATA | linebreak | link)*>
<!ELEMENT image (#PCDATA | link | linebreak)*>
<!ATTLIST image src CDATA #REQUIRED>
<!ELEMENT linebreak EMPTY>
<!ELEMENT table (tr)*>
<!ATTLIST table summary CDATA #IMPLIED>
<!ELEMENT tr (td | th)*>
<!ELEMENT td (#PCDATA | link)*>
<!ELEMENT th (#PCDATA | link)*>
<!ELEMENT list (li)*>
<!ELEMENT li (#PCDATA | link | list | linebreak)*>
<!ELEMENT code EMPTY>
<!ATTLIST code archive CDATA #REQUIRED>
<!ELEMENT gallery EMPTY>
<!ATTLIST gallery start CDATA #IMPLIED>
<!ATTLIST gallery end CDATA #REQUIRED>
<!ATTLIST gallery base CDATA #REQUIRED>
<!ELEMENT usertext (#PCDATA)>
<!ELEMENT plannings EMPTY>

Wie eine typische XML Datei der Ma_Website aussah, zeigt der Quelltext unten am Beispiel der Seite über mazentral/1(33).

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE page SYSTEM "page.dtd">

<page keywords="mazentral 1, Ma_Zentral 1">
        <menue>
                <link target="mazentral" type="internal">Ma_Zentral</link>
                <plannings/>
        </menue>
        <content>
                <caption>Ma_Zentral 1</caption>
                <text>
                        Ma_Zentral 1 war das erste Ma_Zentral und
                        gleichzeitig das erste Programm des Ma_Sys.ma.
                        <!-- An dieser Stelle wurde gekürzt. -->
                </text>
                <caption>Screenshot</caption>
                <image src="mazentral_1_screenshot_1.png">
                        Ma_Zentral 1.0 (verbesserte Version) Screenshot.
                        Zu sehen sind Fehler beim Starten von
                        Programmen, die nicht vorhanden sind.
                </image>
                <caption>Quelltext</caption>
                <text>
                        Die erste Version von Ma_Zentral wurde erneut
                        als verbesserte Version implementiert, damit
                        man sehen kann, wie sich die
                        Prorgrammierkenntnisse des Ma_Sys.ma geändert
                        haben.
                </text>
                <code archive="mazentral1.zip" />
        </content>
</page>

Administration

Die Ma_Website 3 verfügte über eine sehr ausführliche Administrationsseite, die weitreichenden Zugiff auf die Webseite ermöglichte. In der Administration konnte man Feedbacks lesen, News verfassen, Fehler anzeigen und Seiten hinzufügen, entfernen oder bearbeiten. Dadurch konnte man die Seite fast ohne direkten Serverzugriff verwalten. Die Administrationsseite bestand aus einer einzigen Datei, die dann verschiedene Teile der Administrationsseite anzeigte, wenn man diese auf dem Seitenmenü auswählte.

Der wohl interessanteste Teil der Administrationsseite war der Editor, mit dem man die XML Dateien der Seiten bearbeiten konnte. Der Editor bestand aus einem <div>-Element für die Ausgabe und einem Eingabefeld, in das man die Tastatureingaben machte. Der Editor war vollständig in JavaScript geschrieben und reagierte deshalb nicht ganz so schnell, wie ein normaler Texteditor. Dafür hatte der Editor XML Syntax Highlighting, Tags wurden also hervorgehoben.

Der Ma\_Website 3 XML Editor
Der Ma_Website 3 XML Editor

Technik

Die Ma_Sys.ma Website 3 hatte noch einige weitere besondere Funktionen, die man aber (besonders als Benutzer) normalerweise nicht sah.

Caching
Sowohl formatierte Programmquelltexte, als auch Vorschaubilder wurden von der Ma_Website zwischengespeichert, damit diese beim nächsten Aufruf schneller zur Verfügung standen. Wäre die Ma_Website 3 fertig geworden, so wäre auch sicherlich noch eine Caching Funktion für die auswählbaren Designs eingebaut worden.
Sicherheit
Die Webseite hatte einige Sicherheitsfunktionen. So wurden bei zu wenig freiem Festplattenplaz automatisch alle Funktionen deaktiviert und die Webseite zeigte eine sehr drastische Fehlermeldung. Gleiches galt, wenn die Sicherheitsfunktionen von MySQL nicht zur Verfügung standen. Diese Fehlermeldung ließ sich nur durch Löschen einder speziellen Datei wieder beseitigen.
Fehlerbehandlung
Auftretende Fehler wurden dem Benutzer in einem speziellen CSS-Fehlerfenster angezeigt, von dem aus man leicht über den Schließen-Knopf zurück zur letzten Seite kommen konnte. Außerdem wurden alle Fehler in einer Datenbanktabelle gespeichert, damit man sie von der Administrationsseite aus lesen und beheben konnte.
Taglib
Die Webseite hatte eine Datei namens html.php, in der alle möglichen HTML Start- und Endtags gespeichert wurden. Dadurch konnten z. B. der Startteil und der Endteil der Seite zentral geändert und verwaltet werden.
News
Es gab ein (relativ einfaches) Newssystem, mit dem man von der Administration aus Nachrichten senden konnte, die dann unter News angezeigt wurden.
Feedback
Das Feedbackformular der Webseite war besonders einfach gehalten, um zu verhindern, dass es jemandem zu aufwändig war, ein solches auszufüllen. Es gab auch hier einen Mechanismus, der verhinderte, dass leicht Spam gesendet wurde. So konnte man nicht einfach per Reload-Button des Browsers, die gleiche Nachricht erneut senden. Beim Absenden wurde neben der Nachricht und einem Titel, auch der User-Agent des Absenders mitgespeichert, um Bugs einfacher reproduzieren zu können.
Browserstatistik
Die Ma_Sys.ma Webseite führte eine Besucherstatistik, die auch immer den Browser des Besuchers aufzeichnete und somit ermöglichte, die Seite auf bestimmte Probleme mit Browsern anzupassen, falls viele Leute mit einem bestimmten Browser kamen.

Zum Seitenanfang