itdd ENGINEERING
System Administration & Management

Was ist ein Kolophon? Nun, historisch gesehen ist ein Kolophon ein Text am Ende eines Buches , in dem Informationen über das Buch enthalten sind. Das können z.B. sein: Ort und Zeit der Herstellung, Hersteller, Produktionsdetails wie Druckart, verwendete Schrift und Papier. Wenn Webseiten  einen Kolophon haben, werden hier häufig Informationen zu (X)HTML, CSS, Benutzerfreundlichkeit und Links zum Validieren der Seite angegeben.

Ich möchte hier etwas weiter ausholen:

Die Anfänge

Ende der 1990er Jahre kamen Politiker auf die Idee, die damals aufkommende "Scheinselbständigkeit" zu bekämpfen. Da wurden als Beispiel Fernfahrer einer Spedition dazu genötigt, sich ein Fahrzeug zu kaufen und dann im Auftrag der Spedition eigenverantwortlich Güter zu bewegen. Eigenverantwortung bezog sich vorwiegend darauf, das sie alle Kosten selber tragen mußten, ansonsten aber zu tun hatten, was die Auftraggeber wollten. An sich war die Bekämpfung dieser Ausbeutung eine gute Sache, nur wurden bestimmte Kriterien aufgestellt, die durchaus auch auf Freiberufler zutreffen konnten. Ein wichtiges Kriterium war damals, ob der Unternehmer für sein Unternehmen Werbung betrieb oder nicht. Viele Freiberufler in der IT hatten das gar nicht nötig; sie wurden regelmäßig von Agenturen kontaktiert und nach freien Kapazitäten angefragt. Gleichzeitig gab es Projekte, die über einige Jahre liefen und für sehr gute Verdienstmöglichkeiten sorgten - nur, solange "durfte" man gar nicht für einen Auftraggeber tätig sein, wollte man den Verdacht der Scheinselbständigkeit vermeiden. Wenn man nun noch alleine ohne Angestellte tätig war, sah es schon ganz schlecht aus. Welche Mitarbeiter braucht man z.B. als Systemadministrator mit Spezialwissen oder als freier SAP-Berater? Was tun? Eine Möglichkeit, Werbung zu schalten, war es, eine eigene Website zu erstellen. Einmal gemacht hatte man Ruhe. Ich habe mich dann auch daran gemacht und - es machte Spaß. Man konnte auf einmal kreativ sein! Und die Resultate der eigenen Arbeit sehen, was beim Betrieb von Datenbanken oder Rechnernetzen zumeist nicht der Fall ist.

Bis heute ist der Spaß an der Sache geblieben und deshalb biete ich immer noch die Erstellung von Internetseiten an. Und damit man nicht immer wieder von vorne anfangen muß, auf der anderen Seite aber auch verlässlich mit dem Stand der Technik mitgeht und eigene Produkte nicht laufend anpassen muß, mache ich das heute mit einem Content-Management-System, nämlich Joomla.

 

Der Name itdd

Was heisst itdd Engineering und was soll dieses seltsame Logo?

it steht für Informationstechnik und dd sind meine Initialien. Das Logo besteht aus Zahnrädern. Es soll zum einen die gegenseitige Abhängigkeit und zum anderen, wie auch der Begriff "Engineering", meine Herkunft als Maschinenbau-Ingenieur versinnbildlichen. Darüber hinaus steht die Größe der Zahnräder für die gleiche Wichtigkeit aller Mitglieder eines Teams zum Erreichen definierter Ziele.

 

Das Design

Bei der Erstellung der Website gab es eine Reihe von Vorgaben. Zunächst sollte alles einfach gehalten sein, mit klarer Linienführung und ohne Schick-Schnack. Eine gut lesbare Schrift sollte verbunden mit dezenter Farbgestaltung und Hell-Dunkel-Kontrasten den Text sowie den Anbieter in den Vordergrund stellen, ohne aufdringlich zu wirken. Die Website sollte von allen Browsern, die sich an Standards des W3C halten, unabhängig von der Bildschirmauflösung gut lesbar sein, ohne Anzeigeplatz zu verschenken und nach Möglichkeit ohne Scrollen zumindest einen Überblick über alle auf der jeweiligen Seite dargestellten Themen bieten.

Grundlage dazu kann nur der Vollbildmodus sein. Eine optimale Platzausnutzung bieten tabber (mehrere Seiten mit Reitern hintereinander gelegt) und slider (das gleiche untereinander), sie sind in Javascript programmiert. Sollte Javascript abgeschaltet werden, so werden die Inhalte der tabs oder slider untereinander ohne Verlust dargestellt.

Eine in Designerkreisen als am Bildschirm sehr gut zu lesend gehandelte Schrift ist die von Google frei zugängliche "Droid Sans". Das Joomla-plugin "HD Gfont" macht sie für die eigene Website verfügbar. Mit dem plugin kann bestimmt werden, welche CSS-Klassen in der gewünschten Schriftart dargestellt werden sollen, wobei bis zu 5 Schriften gleichzeitig möglich sind. Mit dem plugin sind weitere Schriften von Google einfügbar, momentan über 500.

 

Die techn. Umsetzung

Grundlage der technischen Umsetzung des angestrebten Design ist das CMS Joomla in der Version 2.5.6 Stable. In Joomla ist es möglich, sogenannte templates zu erstellen, die nach den eigenen Wünschen völlig frei gestaltet werden können. Sie werden dann in Joomla geladen, womit der Content, also die Inhalte der Web-Seiten, und seine Darstellung komplett voneinander getrennt sind.

Das hier vorhandene template wurde von Grund auf neu erstellt. Ich wollte nicht für jedes Ausgabemedium neue CSS Dateien gestalten, sondern nach Möglichkeit alles auf einmal "erschlagen". Aus diesem Grund baut es auf dem 1140px CSS Grid System des australischen Designers und Entwicklers Andy Taylor auf. Dieses verwendet CSS3 media queries, um die Abmessungen des Anzeigemediums zu bestimmen und definiert ein Grid-System, um die Daten optimal auf dem jeweilgen Gerät anzuzeigen. Eine gute Einführung findet sich auf den Web-Seiten des elmastudios.

Joomla erzeugt, soweit ich das im für meine Website beschränkten Rahmen feststellen konnte, wohlgeformtes xhtml 1.0 Transitional. Leider sieht das bei den vielen Erweiterungen schon ganz anders aus. Im schon angesprochenen plugin zur Implementierung der Google-Schriften wird KEIN valides xhtml ausgegeben. Die Sourcen wurden von mir angepasst und sind unten unter dem Reiter "Sourcenänderungen" einsehbar. Somit bestehen alle Seiten dieser Website aus validem xhtml 1.0 Transitional.

Bei der Validierung der Cascading Style Sheets zeigte sich ein anderes Bild. Da einige Browser spezielle Mängel haben bzw. einige Dinge von verschiedenen Unternehmen verschieden definiert wurden, müssen heute sogenannte "hacks" dafür sorgen, daß die Anzeige "geradegebogen" wird - das hat natürlich mit Standards nichts mehr zu tun! Man könnte diese Browser aussen vor lassen oder eben die hacks in die jeweiligen CSS-Dateien hinzufügen, dann gibts aber Fehler bei der Validierung.

Weiterhin ist die Entwicklung der Browser weiter als die endgültige Definition von HTML5 , die sich noch im Entwurfsstadium befindet (deswegen wird ja auch noch gegen xhtml 1.0 validiert), und CSS3. So bieten viele Browserhersteller spezielle Erweiterungen an wie Schatten um boxen, die zwar in CSS3 definiert sind, aber noch vielfach (aus historischen Gründen) bei älteren Browsern anders heißen und dementsprechend pro Browser unter ihrem Namen ausgezeichnet werden müssen. Das führt dann zu *VIELEN* Fehlern bei der Validierung. Damit meine Seiten auch in diesen älteren, aber noch nicht veralteten Browsern "hübsch" angezeigt werden, verzichte ich momentan darauf, komplett valides CSS3 auszugeben. Man muß nicht immer den Vorreiter spielen, um Definitionen zu erfüllen. Manchmal ist es einfach sinnvoller, praxisgerecht zu agieren und den Fortschritt dann anzunehmen, wenn er sich auch als praktikabel erwiesen hat.

Entwickelt wurde diese Website auf einem 2xDualcore Opteron Rechner unter debian mit apache2, mysql und php, Joomla 2.5.6 stable unter Zuhilfenahme von phpmyadmin und vieler anderer tools.

Gehostet wird itdd im bytecamp auf FreeBsd.

 

 

Hinweise zu

Cookies

Das font-size Modul:

Das fontsize Modul setzt ein cookie mit der aktuellen schriftgröße.

Sourcenänderungen

Änderungen an Joomla-Erweiterungen:

Erweiterung: HD Gfont

Dateiname:  ~/itdd/plugins/system/HD_Gfont/HD_Gfont.php, Zeile 2537 bis 2556

HD Gfont: im Plugin zum Setzen der Google-Schriften sind Fehler. Die link-Anweisungen sind nicht wohlgeformt, es fehlen die abschließenden Schrägstriche. Die vorgenommenen Änderungen sind im Folgenden so  "/"gekennzeichnet.

$hd_gfont1 = '<link href="http://fonts.googleapis.com/css?family='. $goofurl_1.'" rel="stylesheet" type="text/css" />
<style type="text/css">'. $this->params->get( 'font-class-1' ).' {font-family: \''. $goofont1.'\', arial, serif; '. $this->params->get( 'font-css-1' ).'}</style>'
;

if ($activate_second=="1") {$hd_gfont2 = '<link href="http://fonts.googleapis.com/css?family='. $goofurl_2.'" rel="stylesheet" type="text/css" />
<style type="text/css">'. $this->params->get( 'font-class-2' ).' {font-family: \''. $goofont2.'\', arial, serif; '. $this->params->get( 'font-css-2' ).'}</style>'
;}
else {$hd_gfont2 = ' ';}

if ($activate_third=="1") {$hd_gfont3 = '<link href="http://fonts.googleapis.com/css?family='. $goofurl_3.'" rel="stylesheet" type="text/css" />
<style type="text/css">'. $this->params->get( 'font-class-3' ).' {font-family: \''. $goofont3.'\', arial, serif; '. $this->params->get( 'font-css-3' ).'}</style>'
;}
else {$hd_gfont3 = ' ';}

if ($activate_fourth=="1") {$hd_gfont4 = '<link href="http://fonts.googleapis.com/css?family='. $goofurl_4.'" rel="stylesheet" type="text/css" />
<style type="text/css">'. $this->params->get( 'font-class-4' ).' {font-family: \''. $goofont4.'\', arial, serif; '. $this->params->get( 'font-css-4' ).'}</style>'
;}
else {$hd_gfont4 = ' ';}

if ($activate_fifth=="1") {$hd_gfont5 = '<link href="http://fonts.googleapis.com/css?family='. $goofurl_5.'" rel="stylesheet" type="text/css" />