mawebsite3/first_try(33) Sprache: Deutsch


Ma_Website 3, erster Versuch

----------------------------------------------------------------------[ Meta ]--

name		mawebsite3/first_try
section		33
description	Ma_Website 3, erster Versuch
tags		mawebsite programs scripts php
encoding	utf8
compliance	public
lang		de
attachments	main.png recolored.png editor.png
creation	2014/08/09 20:35:20
version		1.0.0.2
download	main
ddescr		Ma_Website 3 (a2)
dlink		http://k007.kiwi6.com/hotlink/0z3g7219gb/mawebsite3p2.7z
dver		3 alpha2
dsize		8577
dchcksm		1e63c0c9f050abf9f25ec899e630ffd78c855a0e60104c18964eb0af7204664a
copyright	Copyright (c) 2014, 2015 Ma_Sys.ma.
		For further info send an e-mail to Ma_Sys.ma@web.de.

--------------------------------------------------------------[ 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.

{\img{main.png}{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.

{\code{php}}

	<?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.

{\img{recolored.png}{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.

{\code{}}

	<!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).

{\code{xml}}

	<?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.

{\img{editor.png}{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