Technologie

Design

Ich entschloss mich, die ganze Homepage mit Open Source Software zu entwickeln. Ich benutze keine Frameworks und verlasse mich vollständig auf die Basistechnologie, d.h. Apache Webserver, PHP und MySQL auf der Server Seite und Javascript auf der Client Seite (im Browser). Die Nosco Homepage wird von einem öffentlichen Provider auf einem Unix System mit Apache/PHP/MySQL gehostet.

Der Entwurf und die Erscheinung der Seiten sind möglichst einfach. Alle Seiten sind fertig gestellt, es gibt keine Seiten "in Bearbeitung". Ich habe lieber eine Seite weggelassen, als eine unvollständige Seite publiziert. Grosse Aufmerksamkeit widmete ich einer guten Benutzerfreundlichkeit. Die Seiten und insbesondere die Schrift sollten ohne jegliche Verzerrungen skalierbar sein.

Viele Seiten schrieb ich in zwei Sprachen: Deutsch und Englisch. Ein Grund war wiederum eine erweiterte Benutzerfreundlichkeit. Ein anderer Grund war, dass ich mit der Implementierung von mehrsprachigen Seiten experimentieren wollte. Ich sollte bemerken, dass die mehrsprachigen Seiten nicht eine exakte eins zu eins Übersetzung sind; sie sind "semantisch" äquivalent. Einige Seiten sind nur in einer Sprache vorhanden und sie werden nicht in die andere Sprache übersetzt. Der Benutzer schaltet zwischen den Sprachen um, indem er auf das entsprechende Symbol (DE oder EN) auf der Seite oben klickt. In der ersten Version übergab ich die gewählte Sprache mit einem URL Parameter (?lang=en oder ?lang=de) von Seite zu Seite. In der jetzigen Version unterhalte ich für die zwei Sprachen verschiedene Zweige (.../en/... und .../de/...) im Filesystem. Ich denke, dass dieser Ansatz besser ist.

Die Basisnavigation zwischen den Seiten geschieht durch Pull-down Menus, die auf allen Seiten konsistent aufgebaut sind. Die Menus sind mit dem CSS Hover Effekt implementiert. Diese elegante Realisierung funktioniert leider nicht im Internet Explorer 6 (und darunter), sodass für diesen Browser eine Unterstützung mit Javascript nötig ist.

Die Seiten werden über das Protokoll HTTP/GET angefordert. Eine Ausnahme bildet die Kontakt Seite: ein Benutzerkommentar wird über das HTTP/POST übermittelt. Ajax Techniken werden angewendet, wenn die Rechner Seite mit dem Server kommuniziert und wenn ein Sudoku Rätsel verlangt wird.

Auf der Kontakt Seite habe ich einen CAPTCHA Sicherheitscode eingebaut, mehr aus Neugier als aus Notwendigkeitsgründen. Ich wollte wissen, wie ein CAPTCHA implementiert wird und stellte fest, dass es mit True Type Schriften und GD Graphik in PHP sehr einfach ist.

Programmierumgebung und Implementierungstechniken

Ich entwickle die Homepage auf einem PC mit Windows XP. Ich benutze das ausgezeichnete xampp Paket mit Apache, PHP, MySQL, usw. als einen lokalen Webserver auf Windows. Dies ermöglicht mir, die Seiten komplett auf Windows zu entwickeln und zu testen.

Ich schreibe die meisten Seiten (HTML, PHP, Javascript) mit dem schlanken Crimson Texteditor. Ich debugge HTML und Javascript mit den Debuggern, die in modernen Browsern integriert sind (Firebug in Firefox 3.6, Developer Tools in Internet Explorer 8, Developer Tools in Google Chrome 4). Einfache PHP Programme debugge ich mit echo/print Statements, für kompliziertere PHP Programme verwende ich NetBeans. Ich wechselte von Eclipse zu NetBeans, da die Integration von PHP Plugins völlig nahtlos ist, und ich habe keine Probleme mit fehlenden Paketen, wie ich das oft in Eclipse hatte. Ich benutze NetBeans auch für die verschiedenen offline Entwicklungen in C++ und Java (und selten Python).

Für administrative Aufgaben verwende ich meistens Unix Werkzeuge unter Cygwin. Ich schreibe Bash Skripts nur für die allereinfachsten Aufgaben, alles andere schreibe ich in Python. Ich lernte Python vor kurzem und ziehe es Perl vor, das ich vorher benutzte. Python ist eine sehr elegante Sprache, die einem Mathematiker besonders gefällt. Python Programme werden nicht nur einfach geschrieben, sondern auch - im Unterschied zum Perl - einfach gelesen und unterhalten.

Ich teste alle Webseiten so weit wie möglich lokal auf meinem PC. Ich kontrolliere die HTML Struktur mit einem einfachen, selbst geschriebenen Python Programm, das die HTMLParser Klasse verwendet. Ich überprüfe die Rechtschreibung mit GNU Aspell. Die entsprechenden Aufrufe in der Bash Shell sind:

aspell check --mode=html -d en_US ENGLISH_FILE.html
aspell check --mode=html -d de_CH --encoding=iso-8859-1 GERMAN_FILE.html 

Javascript Programme überprüfe ich mit den "Lint" Programmen JSLint und JavaScript Lint. JSLint wird in einer Windows ("DOS") Shell gestartet:

C:\Windows\System32\cscript C:\Programs\Javascript\jslint.js < FILE.js

JavaScript Lint wird in einer Cygwin (Bash) Shell gestartet:

/cygdrive/c/Programs/Javascript/jsl-0.3.0/jsl.exe -process FILE.js

Bevor ich die Seiten zum Server hochlade, kompiliere ich alle Javascript Programme mit dem Google's Closure Compiler. Der Aufruf in der Cygwin Shell ist:

java -jar C:\Programs\Javascript\Closure\compiler.jar \
--compilation_level ADVANCED_OPTIMIZATIONS \
--js=FILE_1.js \
--js=FILE_2.js \
--js=FILE_N.js \
--js_output_file=FILE.jsc

Ich unterhalte die Software Versionen mit Subversion und dem Tortoise GUI.

Nachdem ich die Webseiten auf den Internet Webserver hochlade, überprüfe ich sie mit dem W3C Validator. Alle Seiten sind gültige XHTML 1.0 Dokumente. Siehe dazu auch die Nosco Sitemap.