Amüsante Bugs

Fehlermeldungen insbesondere deutlich erklärende Fehlermeldungen sind sinnvoll und nötig. Die Meldung sollte so eindeutig wie möglich sein, damit Nutzer auch wissen, was genau sie tun müssen und an welcher Stelle.

Das ist das gewünschte Endergebnis. In der Entwicklungsphase eines Projekts klappt das nicht immer ganz perfekt. Wir nutzen ein auf Cake-PHP basierendes System, welches wir selbst entwickelt haben: miradlokit. Grundlage der Texte des System ist immer Englisch, das hat Vorteile, denn häufig ergeben sich daraus zunächst weniger Probleme.

Die Übersetzungen ins Deutsche werden nicht pro Meldung innerhalb des Quellcodes gemacht, sondern mittels Sprachdateien an zentraler Stelle. Das ist grundsätzlich sinnvoll. Während des Übersetzens fehlt jedoch zuweilen der Zusammenhang und es entstehen Fehlermeldungen, die jenseits aller Logik liegen:

Im Feld Vorname oder Spitzname (schon das passte an dieser Stelle nicht, da es in dieser Webapplikation keinen Spitznamen geben soll) wurde nichts eingegeben. Gut, es erscheint die Fehlermeldung, die sollte jetzt einen nutzerfreundlichen und verständlichen Hinweis auf den fehlenden Vornamen geben. Nun, sollte…

Bitte die Breite eingeben!

Wir haben laut gelacht, denn diese Meldung hat keiner von uns erwartet. Manche Fehler haben also durchaus Unterhaltungswert.

• Auf der Suche nach Werkzeugen und Programmen zur Webentwicklung? Ich schrieb ja schon mal über die Werkzeuge, die ich nutze. Bei Pixelgraphix gab es grad die Frage zu Webwerkzeugen, schaut euch die Kommentare an, da gibt es unzählige Tipps, für alle gängigen Betriebssysteme.
• Interview: Wie sieht man als Blinder das Internet? Vier stark sehbehinderte Internetexperten erzählen über ihre Sicht des Internets, sehr empfehlenswert!
• So wirklich bewusst war mir Doodle bisher nicht aufgefallen, aber ich finde das Umfragetool wirklich praktisch, jede/r kann sehr einfach mal eben eine Umfrage erstellen:
  

  “Wie funktioniert Doodle?

  Erstellen Sie eine Umfrage.
  Leiten Sie den Link zur Umfrage an die Teilnehmenden weiter.
  Verfolgen Sie online, wofür die Teilnehmenden stimmen.”

• Flocke schrieb: 
  

  “Liebes @drwebmagazin: Bitte sprecht mir nach: “Es gibt weder einen ALT-Tag, noch einen Canonical-Tag!” Canonical ist ein Attributwert!!!”

• Diese Woche habe ich vergleichsweise wenig gebloggt, da ich unter anderem mit buecherbrett.org ziemlich beschäftigt war, worüber ich ja auch schon schrieb. Sehr erfreulich aber etwas überraschend waren die rund 50 Anmeldungen innerhalb weniger Tage nach Start des Autorenportals.
  • Ich schreibe über die Nutzung des buecherbretts, also auch ganz allgemein über BuddyPress und WordPress möglichst in Schritt-für-Schritt-Anleitungen auf dem Portalblog.
  • Oliver schreibt übers Bücherbrett und gibt Tipps zur Nutzung in der Bücherbrett-Hausmeisterei
  • Wir nutzen außerdem Gruppen in dem sozialen Netzwerk des Bücherbretts, welches auf BuddyPress basiert, um weitere Unterstützung gerade für die Autoren zu bieten, die noch nicht soviel Erfahrung mit Netzwerken und Blogs haben. Die von mir betreute Gruppe Systeminfos bietet Hinweise und Infos, Oliver iniitierte die Gruppe Mitglieder helfen Mitgliedern. Gern genutzt werden außerdem die Pinnwände, die jedes Mitglied hat. Positiv überrascht hat mich, dass es von Anfang an klappte, dass sich die Mitglieder auch gegenseitig halfen, klasse!
  • Erschreckend finde ich, dass der Code von buddypress mit Standardeinstellungen nicht validiert, offensichtlich war ich da zu naiv, da muss ich noch intensiver ran… Selbst die Original-Projektseite hat 40 Validierungsfehler.
  • Sehr gefreut habe ich mich über den ein oder anderen Artikel, die ein oder andere Erwähnung, wie z.B. bei Literarchie.
  • Dazu passt mal wieder eine Meldung von WordPress-Schwachstellen, die zwar in der neuen Version WP 2.8.1 nicht mehr enthalten sind, aber in WPMU noch nicht gefixt wurden.

Zum Feeds lesen kam ich diese Woche fast gar nicht, die Links sind überwiegend vom Microbloggen, was einfach mal nebenbei geht, während ich grad auf etwas warte. Nicht ganz vollständig sind dieses Mal die Quellen der Links, wer identi.ca und/oder twitter nutzt, kann ja mal schauen, wen ich so lese…

• Mal wieder ein nettes, kleines Analysetool, um zu sehen, welches System nutzt eine Seite, welche Services werden angeboten, welche Eigenschaften hat die Seite usw. Sympathisch finde ich, dass Webmastercoffee.com damit wirbt: ” Kostenlose Homepage-Analyse. Für den Webmaster. Für die Webmistress.” Wer die Webmistress explizit erwähnt bekommt von mir einen Pluspunkt. via Frank
• Ich habe mich ja auch schon über Sinn und Unsinn von fixen, fluiden und elastischen Layouts ausgelassen. Allerdings nicht so ausführlich und gut bebildert, wie das Smashing-Magazine diese Woche (englischer Artikel) Inzwischen lohnt es sich bei der Entscheidung auch immer mehr an mobile Geräte wie das ichphone zu denken…
• Man braucht sie meist nicht täglich, aber immer mal wieder, nur wenige sind topfit, meist liest man mal eben nach, eine tolle Übersicht zu Regulären Ausdrücken gibts im Essential Guide to Regular Expressions vom Smashing Magazine.
• Zur ominösen IE8 Kompatibilitätsliste gibts Erklärungen und Hinweise in Gizas Blog via Flocke und ebenfalls von Jens den Hinweis zu gaaaanz tollen Bugs des neuesten Browsers von Microsoft.
• Zunächst nur als Gerücht gehandelt, nicht von allen geliebt, siehe auch Kommentar von Dennis bei Frank, scheint es jetzt laut t3n doch sicher, dass WordPress und WPMU vereint werden. Aus meiner Sicht die einzig sinnvolle Entscheidung.
• Achso ja, falls uns jemand sucht, wir sind beim Barcamp Dornbirn.
• Falls jemand die Diskussion auf Guggat emol zum Thema Software neu erstellen oder optimieren bezogen auf ein Newssystem mit verfolgen möchte, insbesondere in den Kommentaren (Übrigens in diesem, wie in allen von unseren Blogs kann man Kommentare auch per Mail abonnieren, auch dann wenn man selbst nicht kommentiert hat, den Kommentar-Feed gibts natürlich außerdem…):
  • Wieso will ich das Newssystem nicht als WP-Plugin erstellen?
  • Variante 1 Eigenentwicklung
  • Variante 2 mit WordPress kombinieren
  • Variante 3 als WP-Plugin

Was ist daran falsch?

Aus Sicht des Programmierers war alles super. Wir hatten es einfach und der Datenfluss war 100% unter Kontrolle. Die Kommunikationsmuster können wir uns noch sehr gut vorstellen. Der Anwender ist mit dem Programmfluss geschaltet und er muss seine Arbeitsweise an das Programm anpassen.

Wie bitte? Der Anwender muss sich anpassen?

Hm… Da ist glaube ich das Problem. Der Businessprozess sieht unter Umständen überhaupt nicht vor, dass der Anwender auf die Antwort vom Server warten soll. Vielleicht will der Anwender gleich mit dem Bearbeiten von Kundeninformationen, wie Lieblingsfarbe und Lieblingsauto weiter machen. Und er möchte gar nicht auf den Server warten.
Viel schlimmer noch. Der Anwender wird genötigt zu warten und wird aus seinen Gedankengängen herausgeworfen. Und das ist nun wirklich schlecht.

Rettung naht mit AJAX usw.

Jaja, wir kennen das. Dann bauen wir halt was Modernes ein und kommunizieren asynchron. Wir lassen den Anwender weiter machen und alles ist prima.
Aber jetzt kommt unser Problem der neuen Welt.

Wie informieren wir unseren Anwender?

Wir überlassen also die Korrektur und Testerei der eingegebenen Daten unserem asynchronen Prozess. Der macht das prima und unser Anwender tippt fröhlich weiter.
Mitten in der Eingabe der Lieblingsfarbe poppt aber eine Fehlermeldung auf die da sagt: “Bitte geben Sie einen Namen ein“.
Und der Anwender wird aus seinem Businessprozess und seinen Gedanken herausgeschleudert.
Na schön, da er sowieso direkt zum Namen zurückgeführt wird (der Fokus ist wieder auf dem Namensfeld) gibt er den Namen halt ein.
Blöd ist nur, dass er mittlerweile aber auch noch eine falsche Farbe eingegeben hat, da die Applikation ihn ja aus seiner Farbeingabe herausgerissen hat.
Also kaum ist er mit dem Namen fertig, oder er tippt noch am Namen rum, poppt schon wieder eine Fehlermeldung auf: “Bitte geben Sie eine korrekte Farbe ein“.
Oha!
Wir haben hier wohl was falsch programmiert gelle?
Klar, solche Probleme muss man schon irgendwie anders lösen. Aber bevor man an eine hoch interaktive Webseite herangeht, sollte man sich darüber im Klaren sein.

War’s das schon?

Nein, es gibt noch tollere Probleme.
Stellt euch vor wir sitzen in einer größeren Firma, oder wir arbeiten sogar an verschiedenen Standorten (was im Web ja gewünscht ist) und zwei Editoren arbeiten zur Zeit am gleichen Datensatz.
Der Eine will die Lieblingsfarbe der Person ändern, da eine E-Mail vorliegt ,in der der Kunde sagt, dass seine Lieblingsfarbe rot sei, und gleichzeitig ruft der Kunde einen zweiten Mitarbeiter an und sagt, seine Lieblingsfarbe sei doch blau.
Beide Mitarbeiter tippen also an der Farbe herum.
Und was geschieht nun?
Der Mitarbeiter mit der roten Farbe editiert einen veralteten Datensatz. Da er ein wenig länger braucht, wird zuerst die blaue Farbe der Telefonanfrage abgespeichert und dann die rote Farbe.
Beide Editoren sehen unter Umständen nicht, dass der andere Editor auch auf dem Datensatz sitzt.
Also wird die Eingabe noch komplexer.

Wie kann dass gehen?

Tja, während ein Editor die Farbe der E-Mail bearbeitet, muss der Datensatz für Veränderung gesperrt werden. Auch in einer wunderbaren AJAX-Superdupper-Anwendung.
Der zweite Editor, muss z.B. die Möglichkeit haben den ersten Editor zu informieren, dass neue Informationen vorliegen.
Oder es muss eine Prioritätendefinition vorhanden sein. Telefonbesprechungen müssen vor E-Mail Besprechungen gesetzt werden.
Oder es muss beschrieben werden, wer wann was wieso gemacht hat.
Weiterhin wäre es doch toll, wenn der Editor, der die E-Mail bearbeitet hat, über die Änderung informiert würde.
Das könnte so ablaufen, dass gerade geänderte Werte ihm noch einmal vorgelegt werden. Beispielsweise, falls innerhalb der nächsten zehn Minuten ein Wert von einer anderen Person geändert wurde, wird dieser Wert nochmals zur Überprüfung angezeigt.

Fazit

Sobald wir eine tolle, blinkende, asynchrone Eingabemöglichkeit für unsere Benutzer erstellen, begeben wir uns auf gefährliches Gebiet. Die Nebenläufigkeiten von asynchronen Eingaben sind extrem komplex und müssen im Einzelfall genau analysiert werden.
Interaktive und an den Geschäftsprozess angepasste Webapplikationen sind klasse. Aber die Schwierigkeiten und Gefahren sind ungleich höher als bei einer Einwegkommunikation. Natürlich können dort auch solche Gefahren lauern, der Prozess ist jedoch einfacher zu verwalten.

Und dann mache ich manchmal den Fehler und glaube meinen Einsteigern, dass sie alles verstanden haben. Hier ein paar Beispiele:

EVA ist doch soooo klar

Ich fang immer bei EVA (nicht bei Adam) an. Und ich meine damit, dass man in einem Computerprogramm zuerst etwas eingibt, dann verarbeitet und dann ausgibt.

Cool gell?

So, ich zeig also meinen Einsteigern wie man etwas eingibt. Dann erkläre ich ihnen, dass wir jeden Wert den man eingegeben hat, erst einmal auf seine Richtigkeit überprüfen muss. Und erst dann darf man ihn verarbeiten. Wenn das auch noch geklappt hat, gibt es eine Ausgabe. Die kann entweder direkt in einem Text, oder als Rückgabewert in einer Funktion oder in einem Datenbankeintrag oder in einem Schaltprozess für einen Motor erfolgen.

Meine Einsteiger nicken eifrig, schauen sich meinen Code an und legen los. Solange ich dabei bin, sieht es noch recht gut aus. Eine Woche später vergessen schon einige, dass die Eingaben überprüft werden sollen. Und einen Monat später fällt ihnen nicht einmal mehr ein wie man etwas verarbeitet.

Was ist passiert?

Sie haben zwar EVA verstanden, aber die Grundlagen wie man eine Überprüfung erstellt sind nicht verstanden worden. Blöderweise sind viele der Einsteiger auch noch von männlichen Geschlecht. Und viele Männlein dürfen nicht zeigen, dass sie etwas nicht können. Vorher quälen sie sich lieber und bauen viel Bockmist.

Testen ist easy

Auch ein Klassiker. Da bauen wir die ersten Testfälle und lassen unsere Systeme durchrattern. Einen Monat später haben meine Buben und Mädels dann vollkommen vergessen, dass es verschiedene Testmethoden gibt. Das Resultat ist, dass Programme ausgeliefert werden, die beim ersten Knopfdruck schon anfangen komisch zu vibrieren. Das ist ziemlich ätzend.

Und wieder steht das Problem im Vordergrund, dass nicht einmal klar ist was eine For-Schleife ist. Traurig aber wahr.

Hab ich eine Idee?

Da viele der Einsteiger, oder auch Fortgeschrittenen, sich nicht trauen zu sagen, dass sie etwas nicht verstanden haben, habe ich eine Artikelserie Grundlagen angefangen. Dort schreibe ich zu den Grundlagen der Programmierung immer wieder ein paar Artikel. Jeder kann in dem Schulungsblog ungestört lesen. Falls mal eine Frage auftauchen sollte, kann die mit Kommentaren an mich gestellt werden. Vielleicht hilft diese Serie ein paar Einsteigern und Fortgeschrittenen mit den Programmiergrundlagen einfacher fertig zu werden.

• eine Übersicht der von uns üblicherweise genutzten Werkzeuge gibts unter Software die Liste enthält Hinweise welches eher unter Windows bekannte Programm ähnliche Funktionen hat
• bezogen auf die Webentwicklung habe ich es im Artikel Webentwicklung mit Linux beschrieben
• immer mal wieder aktuell zu diversen Programmen stehen Artikel in der Kategorie Software
• Roland listet in seinem Blog die speziell für den Asus genutzte Software unter Installation und Softwarepakete auf, dort werden auch alle Programme etwas ausführlicher beschrieben

Software je nach Einsatzzweck wählen

Für mich ist es wichtig jeweils die passende Software für einen Zweck einzusetzen. Häufig haben verschiedene Programme die Möglichkeit etwas zu realisieren. Manches lässt sich auch unterschiedlich einstellen und so dann einfacher und schneller nutzen. Wie meine Arbeitsumgebung mit virtuellen Arbeitsflächen so in etwa aussieht habe im Artikel Arbeitsumgebung schon mal gezeigt.

Eclipse und Quanta

Beispielsweise kann man auch mit Eclipse HTML- und CSS-Dateien schreiben und bearbeiten, komfortabler geht das jedoch im Quanta. Dagegen ist Quanta nicht optimal, wenn es um PHP geht, selbst bei kleineren Änderungen verschluckt er sich und bietet auch keine direkte Fehleranzeige, wie Eclipse das kann.

Firefox, Seamonkey, Opera und Konqueror

Welche Software zum jeweiligen Zweck passt, hängt deshalb nicht nur von den persönlichen Vorlieben sondern auch von Fähigkeiten der genutzten Programme ab. Ähnlich gehe ich mit Browsern um, ich nehme als Standardbrowser den Firefox, weil er in vielen Fällen die besten und komfortabelsten Möglichkeiten bietet. Im ein oder anderen Fall passt es jedoch nicht. Sei es bei manchen Seiten, bei denen ich mehrere Accounts habe, womit Seamonkey besser klar kommt oder auch mal, weil meine Einstellungen im Firefox für manche Webseiten nicht funktionieren. Opera ist schnell und cacht exakt den Stand des letzten Aufrufs einer Website.

Bei manchen Domain habe ich verschiedene Zugänge mit unterschiedlichen Passwörtern, da ich gern bei einem Thema alle betroffenen Domains bearbeite, nutze ich auch deshalb verschiedene Browser.

• Alle Statistikinformationen der von mir betreuten Domains bekomme ich nach dem Klick auf eine Gruppe Tabs im Seamonkey. (Das ist mit ein Grund, warum ich Blogs jetzt doch wieder im Firefox verwalte und mir halt häufiges Speichern spare.)
• Auch die Blogs die da dabei sind und die andere Passwörter haben verlangen so keine erneute Eingabe, denn diese Passwörter verwalte ich im Firefox.
• Bei Opera sind die Domains, die Newsfunktionen haben und die dazu passenden Zugangsdaten gespeichert.
• Im Konqueror liegen alle FTP-Zugänge mit den jeweiligen Daten.

Jeder dieser Browser hat etwas andere Einstellungen, das ist praktisch beim Testen: Ein Browser hat kein Flash, einer blockt Flash, einer hat Flash, mal habe ich eine andere Hintergrundfarbe als das Standardweiß definiert, mal ist Grundschriftart vergrößert usw.

Gimp, Scribus und Inkscape

Ein weiteres Beispiel sind Grafiken, klar zunächst kann man nahezu alles im Gimp lösen, auch ein Logo lässt sich dort entwerfen. Inwieweit das jedoch sinnvoll ist hängt vom Einzelfall ab. Bei einem Logo bevorzuge ich Scribus, um etwas direkt als *.svg anzulegen. Warum Scribus und nicht Inkscape? Schlicht deshalb, weil ich mehrfach Mühe hatte ein SVG aus Inkscape nachher in Scribus einzubinden. Scribus ist jedoch für alles was an eine Druckerei geliefert werden soll, die beste Variante.

Tipp zum effizienten Arbeiten

Aus meiner Sicht ist es wichtig sich zu überlegen, was man erreichen möchte und auch beim Arbeiten möglichst Tätigkeiten zusammenzufassen.

Wenn ich grad Statistiken anschaue, dann nicht nur für eine Domain, sondern für alle betreuten. Dabei geht es in einem “Aufwasch” die Webalizer-Statistiken zu prüfen, dann die Blogstatistiken zu nehmen, die Ergebnisse fasse ich in einer OpenOffice.org-Calc-Datei zusammen, so habe ich zwischendurch nur eine Stelle an der ich nachschaue. Im Rahmen dessen passe ich auch noch die Statistiken an, die z.B. bei Trigami regelmäßig aktualisiert werden wollen.

So ähnlich mache ich das mit vielen Tätigkeiten, die sich gut zusammenfassen lassen. Beispielsweise Bilder für Blogbeiträge aussuchen, bearbeiten und anpassen geht wesentlich schneller, wenn ich es grad für mehrere Beiträge mache. Manch ein Beitrag ist zwar dann noch nicht ganz fertig, aber der Entwurf enthält schon mal die passenden Bilder.

Und da es so viele Programmierbeispiele gibt, möchte ich noch eines hinzufügen

Ute hat mich mal gefragt, ob wir eine Newsfunktion erstellen können, mit der man auch ein paar Bilder einfügen kann. Soll heißen, dass aktuelle Informationen auf einer Webseite so lange dargestellt werden, bis sie nicht mehr aktuell sind. Also Weihnachtsgrüße sollen nur automatisch zu Weihnachten erscheinen und kurz vor Ostern können wir die abstellen Aussehen soll es ihrer Vorstellung nach, in etwa wie folgt:

• Newssystem erstellen

Newsüberschrift Ostergrüße

Neben dem Bild einer News soll die jeweilige Überschrift einer Meldung oder Neuigkeit stehen und anschließend der dazugehörige Text. Weiterer Text oder die nächste Meldung folgt dann erst danach.
[Zumindest in standardkonformen Browsern klappt das... ]

Dieses Newssystem soll Bilder einpflegen können. Und da wir ja gerne komplizierte Sachen machen, sollen die Editoren, die die Texte schreiben, mit einem vernünftigen Rechtesystem ausgestattet sein.

Kurz gesagt: Wir wollen eine komplette Webapplikation bauen.

Und wir sind Wiederholungstäter. In den letzten Jahren haben wir diverse Webapplikationen erstellt. Diesmal gehen wir jedoch einen etwas anderen Weg. Ich habe unter Newssystem erstellen beschrieben, wie das Newssystem aussehen soll und wir diskutieren dort im Internet über die Erstellung. Falls ihr mitmachen wollt, seid ihr herzlich eingeladen.

Es geht darum, ein wirklich rundes und großes System zu erstellen mit dem wir später auch noch was anfangen können. Die Entwicklung wird wohl etwas langsamer vorwärts gehen, als wenn ich das Teil alleine schreiben würde. Aber vielleicht erfinden wir hier ein paar schönere und bessere Komponenten bei denen wir alle was lernen?

Beispielsweise wäre es nicht sehr ratsam ein Dach so zu konstruieren, dass das Wasser nicht abläuft sondern zur Mitte des Dachs hinfließt. Ein weiteres nicht ratsames Beispiel wäre es eine Decke so zu konstruieren, dass sie sich nicht selbst tragen könnte. Wenn man dann noch auf die Idee kommt, auf diese Decke einen Stuhl zu stellen, findet man sich höchstwahrscheinlich ein Stockwerk tiefer wieder.

Unsere Vorfahren haben also Architekturmuster erfunden. Daneben haben wir vor ein paar tausend Jahren auch noch das Rad erfunden. Wir empfanden das als ziemlich praktisch. Man kann mit so einem Rad die Reibungsverluste beim Schieben verringern. Und heute sagen wir immer wieder mal, dass wir das Rad nicht neu erfinden sollen.

Wie sieht das in der IT aus?

Die IT ist ein relativ neues Themengebiet. Vor ein paar Jahren erfand jeder Entwickler seine Räder jeden Tag nochmals. Irgendwie haben viele von uns, dann viele Stunden verbracht auf Problemen rumzunagen, die es eigentlich schon längst nicht mehr geben sollte.

Und genau hier setzen Architekturmuster und Design Patterns an.

Wir generieren heute eine Webapplikation, indem wir die Architektur auf den Browser, den Webserver, den Datenbankserver und das Netzwerk verteilen.

Wir verwenden Factory Patterns um bestimtme Objekte zu erzeugen.

Wir mixen die diversen Observer, Strategy und Composite Patterns und erstellen Model View Controller Patterns.

Das einzige Problem mit all den schönen Patterns ist, dass die Dinger ziemlich unverständlich sein können. Wenn ein neuer Entwickler anfängt, ist er mit Schleifen, if-Abfragen und anderen Schweinereien schon ziemlich ausgelastet. Wenn dann noch ein Roland vorbei kommt und ihm sagt “heute bauen wir mal ein Singleton”, dann fühlt sich der Anfänger irgendwie nicht wohl. Deshalb habe ich bei guggat emol Blog eine Designpattern Einführung erstellt. Ich werde nicht noch einmal alle Design Patterns, die zur Genüge beschrieben wurden, beschreiben. Ich werde hier die Design Patterns, die ich in den Programmierbeispielen verwende, erläutern. Später werden diese Patterns dann für reelle Aufgaben verwendet.

Wer weiß, vielleicht bauen wir in ein paar Jahren weniger IT-Decken die sich nicht selbst tragen können?

Nun gut also drei… Mir wären noch ein paar eingefallen, aber das sind die, von denen ich meine, wer sich mit einem der Themen befasst muss diese Bücher gelesen haben…
Zwei der Bücher habe ich gefunden. Da gab’s mal wieder so einen Tag mit einem Bummel durch große Buchhandlungen in irgendeiner großen Stadt. Empfehlenswert sind da hier in der Gegend Freiburg und Stuttgart, die haben schöne große Buchläden. Das andere Buch war ein Tipp von jemand, solche Bücher bestelle ich bei meiner örtlichen Buchhandlung, ich habe da sogar den Service es gebracht zu bekommen, der Vorteil, wenn eine gute Freundin dort arbeitet…

Usability (Benutzerfreundlichkeit)

Gelesen habe ich die Ausgabe von mitp von 2002 des Autors Steve Krug: Don’t make me think! Web Usability: Das intuitive Web Irgendwann einmal vorher hatte ich Nielsen gelesen, dessen Ausführungen zur Benutzerfreundlichkeit gut und korrekt sind, meist jedenfalls. Was ihm fehlt, ist dabei zu begeistern, zu faszinieren und bei aller Therorie auch zu unterhalten. Ähnlich ging es mir bei weiteren Autoren.

Ganz anders dagegen Steve Krug, leicht, locker, nachvollziehbar und mit Spannung erklärt er, was das bedeutet: “Don’t make me think!” schon nach den ersten Seiten wird klar, was er damit meint. Niemand soll überlegen müssen, sondern das Web muss einfach und intuitiv bedienbar sein.

Mit Freude am Thema und Humor erklärt und zeigt er nicht nur worum es geht, sondern gibt auch Tipps, wie sich Webseiten testen und verbessern lassen. Für mich ist das _die_ Pflicht- und Spaßlektüre für alle, die mit Websites zu tun haben.

Progressive Enhancement (stufenweise Verbesserung von Websites)

Gesehen – haben wollen – Preis gesehen – geschluckt – anderes angeschaut – gekauft! Schon die Optik, der erste Eindruck wenn man es in der Hand hat, klasse gemacht! Das Buch Transcending CSS – Neue kreative Spielräume im Webdesign von Molly Holzschlag udn Andy Clarke habe ich in der Ausgabe von Addison-Wesley 2007 gelesen. Ich konnte gar nicht anders das musste einfach mit. Trotz des recht hohen Preises habe ich es keinen Moment bereut.

Das Buch ist nichts für die ersten Schritte mit CSS, es ist auch nichts für die reinen Praktiker. Ein bisschen Lust am Spielen mit den Möglichkeiten, die Webseiten bieten muss man mitbringen. Dann jedoch ein Traum und genau was die Kapitel versprechen:

• entdecken (was hat Inhalt mit Markup zu tun)
• Designprozess einfach und schnell (Prototypen erstellen und einsetzen)
• inspirieren lassen (Wege und Quellen für Ideen)
• Transzendenz (wie denn nun genau mit Beispielen und einem Blick in die Zukunft, stufenweise Verbesserung)

Nicht nur wunderschön, sondern ebenfalls hochinformativ, lasst es euch faszinieren.

Projektmanagement – Information mit Spaß daran

Schon mehrfach und immernoch fasziniert habe ich Tom DeMarcos Der Termin – Ein Roman ueber das Projektmanagement in der Ausgabe des Hanser-Verlags von 1997 gelesen. Aus einigen Vorlesungen, Skripten und anderen Büchern kannte ich das staubtrockene Thema, nötig aber nur in kleinen Mengen zu ertragen. Ganz anders ist es hier, wirklich wie ein Roman, von der Spannung her eher wie ein Krimi geht es um Projektmanagement in der Softwareentwicklung.

Alle wesentlichen Phasen werden anhand von guten und schlechten Beispielen angesprochen ohne jemals den Spaß an der Geschichte und die Spannung zu vergessen. Stück für Stück entwickelt sich das Projekt und DeMarco nimmt einen mit klar nachvollziehbaren Schritten auf dem Weg mit. Wichtiges wird nach jedem Kapitel nochmals zusammengefasst und eignet sich auch zum Nachschlagen. Beispielsweise im Vergleich zu eher theoretischem Wissen, so lassen sich klare Beispiele mit den theoretischen Informationen prima verknüpfen. Ich habe es auch fürs Lernen vor Prüfungen aus diesem Themenbereich gerne genutzt.

Ganz ohne IT-Know-how ist es wahrscheinlich nicht ganz so glasklar, wie genau und berechtigt jeder Schritt in diesem Buch die Mehrzahl der IT-Projekte beschreibt. Wer jedoch irgendwie mit IT zu tun hat, sollte sich mal Zeit nehmen um “Der Termin” zu lesen.

Wir nutzen inzwischen ein ganzes Basisprojekt, in dem die relevanten Templates und Strukturen bereits enthalten sind. Schritt für Schritt geht es um folgende Vorlagen:

CSS-Vorlage

Wohl die meisten, die häufiger ein neues Projekt beginnen, nutzen ein CSS-Template. Ich ändere diese Vorlagen immer mal wieder, aber im Grunde gehe ich prinzipiell immer von derselben Struktur aus:

• basis.css in dieser Datei definiere ich Grundelemente, wie z.B. Überschriften, Absätze usw.
• layout.css diese Datei ist fürs eigentliche Layout zuständig und enthält die Definitionen, der div-Container, wie sie bei uns möglichst immer eingesetzt werden. Ausnahmen gibt es nur, wenn es gar nicht anders geht, ansonsten nutzen wir:
• spezielles.css alle speziellen Definitionen stehen hier:
  • seien es genutzte Konstrukte, die stabil und browserübergreifend Bilder einbinden
  • die ein oder andere zusätzliche Klasse
  • ein spezieller zusätzlicher Container
• etwaige sonstige Stylesheets, z.B. für den Druck, zur Anpassung der Internet Explorer per Conditional Comments, oder was sonst eventuell nötig ist

In den Vorlagen dieser Dateien stehen Grundwerte, die so meist benutzt werden. Verändert wird das Layout, individuell sind Logo und Hintergrundbilder, angepasst werden noch Farben und einige weitere Kleinigkeiten pro Projekt.

Viel mehr ändert sich jedoch nur selten, denn der Hauptunterschied liegt ja im Layout des jeweiligen Projekts. Grundelemente werden immer benötigt und Farben eben ans Layout angepasst.

Der Vorzug einer Vorlage ist, dass ich es dort sofort nachziehen kann, wenn mir bei einem Projekt etwas spezielles auffällt, oder ich mal wieder was vereinfachen kann.

HTML-Vorlage

Eine Vorlage der Grundstruktur bieten natürlich auch bereits die meisten Editoren, z.B. der bei uns genutzte Quanta. Wir setzen jedoch so gut wie nie ausschließlich HTML ein. Meist gibt es entweder noch einige eigene Entwicklungen in PHP oder eine Software wird darüberhinaus eingesetzt.

Software-Vorlage ::: z.B. WordPress-Blog

Je nachdem, was man häufig nutzt, bei uns zur Zeit WordPress, ist es sinnvoll sich auch da die relevanten eigenen Anpassungen als Vorlage zu nutzen.

Es gibt eine Reihe von Plugins, die wir üblicherweise nutzen, da sich die jedoch sehr schnell ändern, packe ich ins Basisprojekt nicht alle relevanten Dateien. Keinesfalls gibt es dort das gesamte WordPress, sondern die jeweils aktuelle Version wird genutzt.

Extra sichere ich jeweils die in einem Plugin geänderten und angepassten Dateien, nur selten unterscheiden die sich pro Blog, meist sind diese Anpassungen für alle Blogs identisch.

Als Vorlage gibt es jedoch das Template, von dem ich üblicherweise ausgehe. Dieses habe ich mir aus der leeren und gut kommentierten Vorlage von texto.de erstellt. Bei gravierenden Änderungen in WordPress schaue ich mir die dort jeweils aktuelle Vorlage nochmal an und passe mein Template an. Das jeweilige Theme ist abhängig vom jeweiligen Blog, bzw. Webauftritt mit WordPress, die Grundstrukturen sind jedoch überwiegend wieder gleich.

PHP-Vorlage

Manches läuft bei uns auch in Projekten, die keine weitere Software einsetzen mittels PHP. Es ist einfach nicht sinnvoll reines HTML zu nutzen, da vieles automatisiert einfach besser geht. Jedes Projekt benötigt eine Navigation, automatisiert wird meist irgendwo ein Datum genutzt, Metadaten die nicht projektspezifisch sind werden für alle Seiten gleich eingebunden, es gibt ein Kontaktformular…

Diese Grundlagen, die immer dieselben sind, stehen in unserer PHP-Vorlage. Sobald wir Neues nutzen wird das auch hier nachgezogen, beispielsweise um Spam zu vermeiden, ändert sich regelmäßig etwas.

…noch eine Vorlage?

Ja, eine habe ich noch Nein, es ist nicht direkt “eine Vorlage” hilft aber trotzdem ungemein:

Layoutbildervorlage

Sinnvoll benannte Layoutbilder bilden zunächst einmal das Gerüst, mit dem bereits ein erstes Design möglich ist. Später können die Bilder einfach reinkopiert werden, unter demselben Namen, damit spart man sich das Anpassen der Pfade. Klappt auch für Favicons, Bilder auf Fehlerseiten und ähnliches, was man häufig nutzt.

Falls ich was vergessen hab, oder ihr noch einen praktischen Tipp habt, gerne…

Ich habe ja schon erwähnt, dass wir gut mit Open-Source-Software klarkommen, wenn es um Webentwicklung geht. Noch einfacher gehts mit einem Plugin für den Gimp, welches ich kürzlich bei Eckhard gefunden habe.

• Überblick Gimp mit Save for Web
• Plugin für den Gimp im Einsatz
• Spinnennetz im Baum das Bild des Beispiels

Das Plugin “Save for Web” (fürs Web speichern) für den Gimp bietet einige, sehr angenehme und einfache Optionen, um zu entscheiden, in welchem Format und in welcher Größe ein Bild oder eine Grafik am besten gespeichert werden.

In der Readme stehen kurz die Schritte, die man zum Installieren unter Gentoo braucht, wenige Minuten später ist das Plugin im Gimp integriert und nutzbar.

Umgang mit dem Plugin

Für jedes Bild, kann man ausprobieren, ob *.jpeg, *.gif oder *.png mit 8 bzw. 24 Bit besser geeignet sind. Gerade im Web geht’s ja immer um den Kompromiss zwischen Dateigröße und Qualität. Von wenigen speziellen Fotoseiten mal abgesehen, sind die Besucher nicht bereit lange zu warten, bis ein Bild geladen wurde. Andererseits erwarten die Nutzer schon auch gute Qualität, denn wenn es einerseits Videos gibt, die funktionieren, dann sollten Bilder ja noch einfacher möglich sein.

Im Beispiel habe ich jetzt ein Foto genommen, was ich im Juli aufnahm, als wir in Freudenstadt bei einem Waldspaziergang unterwegs waren. Da gab’s grad das aus Holzstämmen nachgebaute riesige Spinnennetz eines Künstlers. Bei diesem Bild war es einfach, wie die meisten Fotos ist ein komprimiertes *.jpg die beste Möglichkeit.

Geht es jedoch um Fotos von Grafiken, Zeichnungen oder um am Rechner erstellte Grafiken, dann ist ein *.jpg meist ungeeignet. Spätestens bei Transparenzeffekten ist es gar nicht möglich. Noch hat *.png im ein oder anderen Internet Explorer Probleme, es existieren jedoch Workarounds und aktuelle Browser kommen gut damit klar. Je nach Motiv kann jedoch auch ein *.gif das bestmögliche Format sein.

Abhängig vom eigenen Wunsch, bzw. der Dateigröße bieten sich Verfahren wie Interlace und Progressive an, die es ermöglichen schon einmal Teile des Bilds zu zeigen, auch wenn noch nicht alles geladen werden konnte. Wieviel an zusätzlicher Dateigröße ein Bild benötigt, berechnet das Plugin ebenfalls.

Insgesamt ein, wie ich finde, sehr nützliches und leicht zu bedienendes Plugin. Ich mag meinen Gimp ja sowieso, mit diversen Plugins fällt es noch leichter, ihn weiterhin zu nutzen. Übrigens ja, ich weiß Gimp steht für GNU Image Manipulation Programm und ja ich sag trotzdem der Gimp, wahrscheinlich, wegen Wilbur, der beim Start immer erscheint…

CMYK und Gimp

Separate, um nach CMYK zu exportieren ist ebenfalls sehr praktisch, wenn es um Druckerzeugnisse geht. Die Installation in Gentoo braucht einen kleinen Umweg, da es das Plugin nur als RPM gibt, aber dank rpm2targz lässt sich auch dieses Problem lösen.

Was machen wir mit den Anforderungen, wenn sie in schriftlicher Form vorliegen? Wir müssen die Informationen bündeln und in eine Form bringen, die wir für die Umsetzung verwenden können.

Warum müssen wir so vorgehen?

Egal ob wir mit Extreme Programming oder mit dem Wasserfallmodell arbeiten, wir können die Anforderungen nicht einfach nur heruntertippen. Das heißt, können kann man schon. Aber dann kommt eine Software dabei heraus, die garantiert nicht erweiterbar und wartbar ist.
Ich mußte einmal ein PHP-Projekt übernehmen, das direkt von den Anforderungen in Code geschrieben wurde. Das war eine tolle Erfahrung!

In einer .php-Datei war Javascript, CSS, HTML, SQL und PHP-Code vereint. Für einen Prototypen, um schnell mal dem Kunden zu zeigen, wo die Reise hingehen soll, mag das so passen. Wenn wir später nur eine Änderung an der Datei vornehmen wollen geht es schief. Die Aufwände für die Weiterentwicklung steigen ins Unermessliche und am Ende muss alles neu geschrieben werden.

Was muss gemacht werden?

Um wirklich stabile Software erstellen zu können, muss die Software einer Systemarchitektur genügen. Die Architektur muss so ausgewählt werden, dass sie die Anforderungen abdecken kann. So muss eine Applikation, die für die Verarbeitung von Formulardaten erstellt wird, viele parallele Eingaben verarbeiten können. In einer Software für die Fahrtsteuerung eines  Autos muss vor allem die Realzeitanforderung abgedeckt werden. Es wäre ziemlich unangenehm, wenn das Auto erst die Wand durchschlägt und dann der Computer nachträglich das Lenkmanöver einleitet

Die Kundenanforderungen beschreiben das System von der Kundenseite aus. Das Detailkonzept beschreibt, wie das zu erstellende System die Kundenanforderungen abdecken wird. Eine 1:1 Abbildung wird es nicht geben. Der Zwischenschritt über das Detailkonzept ist notwendig. Über den Umfang des Detailkonzepts kann man streiten. Soll wirklich alles zuerst beschrieben und dann umgesetzt werden? Manchmal ist das nicht zielführend. Jedoch muss so viel beschrieben sein, dass eine abschließend definierte Softwarearchitektur vorhanden ist.

Thomas hatte sich die beiden Familien angeschaut…

…und sich den Betrieb genauer betrachtet.

Im Fall von Hans, Karl und Orlando kann man nicht von einem klassischen Betrieb sprechen. Die drei sind Entwickler und Betreiber in Personalunion. Bei der zweiten Familie ist die Entwicklung und der Betrieb voneinander getrennt. Die Entwicklung erstellt ein Programm und übergibt es an den Betrieb. Eine vernünftige Dokumentation, wie das jeweilige Programm zu bedienen und warten ist, gibt es nicht. Wenn ein Fehler auftritt, handelt der Betrieb intuitiv. Wenn das nicht klappt, wird der Incident an die Entwickler übergeben.
Thomas will bei der Neugestaltung der gemeinsamen IT die beiden Betriebe zusammenlegen und einen möglichst stabilen Betrieb aufbauen.
Seine Überlegungen:
„Wenn ich den Betrieb permanent mit in das Projekt einbinde wird die Stakeholderliste unnötig groß. Jeder will mitreden und an eine Weiterentwicklung der Software ist kaum zu denken.“
„Wenn ich den Betrieb erst kurz vor der Abnahme einbinde, ist die Gefahr extrem hoch, dass die erstellte Software nicht betreibbar ist.“
Was für ein Dilemma!
Nach einigem hin- und her entschied sich Thomas für folgendes Vorgehen:
„Ich lass den Betrieb bei der Anforderungsanalyse all seine Anforderungen, die zu diesem Zeitpunkt bekannt sind, formulieren.“
Bekannte Anforderungen können sein:

• Bekannte Betriebssysteme, die von den Mitarbeitern verwaltet werden können
• Monitor-Elemente, die gesetzt sind und die eingebunden werden müssen
• Angaben, wie Projekte dokumentiert und Betriebshandbücher aufgebaut sein müssen
• Angaben, wie Artefakte an den Betrieb übergeben werden müssen
• …

„Zusammen mit den Anforderungen der Kunden erstelle ich die Architektur und das Detailkonzept. Das Detailkonzept wird vom Betrieb überprüft und anhand der detaillierten Informationen kann der Betrieb genauer angeben, was er wirklich braucht.“
„Danach lasse ich den Betrieb erst einmal wieder in Ruhe.“

Zu diesem Zeitpunkt werden im…

Projekt vor allem die neuen Komponenten

erstellt.

„Wenn ein testbares System vorhanden ist, muss der Betrieb wieder ran und kontrollieren ob alles für ihn in Ordnung ist.“
Zu testen sind hier

• Stabilität
• Auswirkungen auf andere Komponenten
• Installierbarkeit
• Konfigurierbarkeit
• Performance
• …

„Weiterhin werde ich die Betriebsmitarbeiter während dieser Tests schulen.“
Hier ist die Gefahr hoch, dass die Zeit für die Schulung nicht ausreicht, um die Mitarbeiter wirklich für den Betrieb fit zu machen.
Und da haben wir auch wieder das Dilemma. Entweder hat man über eine lange Zeit viele Mitarbeiter blockiert und dafür aber später gut ausgebildete Kollegen oder man kommt im Projekt schneller vorwärts und fährt das Risiko, dass sich die Betriebsübergabe verschiebt.
Ich selbst glaube, dass es hier keine ideale Lösung gibt.

Man muss sich für einen Mittelweg entscheiden. Wichtig ist jedoch, dass der Betrieb von Anfang an ausreichend informiert wird.