21.04.2009: Netbook-Optimierungen (fwolf.info)

Da ich die letzte Woche durchgehend mit meinem Netbook unterwegs war, ist mir aufgefallen, dass auf meiner Infosite (fwolf.info) die Navigation aufgrund der Länge (und dem "position: fixed") quasi nicht benutzbar war.

Habe ich jetzt geändert. Ab einer Höhe weniger als 700 Pixeln wird die Navigation (mittels jQuery) automatisch zusammengeklappt. Die jeweilige Subnavigation öffnet sich dann beim Mouseover- bzw. Hover-Event.

08.04.2009: Habari 0.6 ist draußen

Sehr fein ... den letzten Checkouts zufolge hat es ja auch nicht mehr lange bis zum offiziellen Release dauern können - und seit dem 06.04. ist dem nun auch tatsächlich der Fall: Habari 0.6 ist draußen und liegt zum Herunterladen bereit :-)

U.a. haben es folgende Features mit in das neue Release geschafft:

  • ACL (Access Control Lists) - Benutzergruppen und granulare Rechtevergabe
  • HiEngine - Unterstützung von HiEngine, einem lt. Release Info "einfacheren" Template-System, dass weniger auf die "rohe" PHP-Materie zurückgreifen soll als der Standard-rawphpengine
  • Importierung von WordPress-Daten bis inkl. Version 2.7.1 via Importer-Plugin möglich

Weitere Änderungen und Neuerungen finden sich in den 0.6er Release Notes.

02.04.2009: Übergängliches bei K & M Elektronik

K & M Elektronik haben endlich mal ihre Website erneuert - leider immer noch nicht zum Guten, auch wenn es auf den ersten Blick so aussah.

Ich sage nur: Mehrfach benutzte IDs im HTML-Quellcode, Inline Styles, Layouttabellen und Spacer GIFs - insgesamt ein grässlicher Mix aus Web 1998 und dem verzweifelten Versuch, alles auf "Web 2.0", runde Ecken, Tabs usw. zu trimmen.

Da war wohl der Azubi oder Praktikant am Werk, zzgl. Frontpest Express und einigen völlig veralteten Büchern über "Webdesign" und HTML 4 - mal wieder am falschen Ende gespart. Dabei hätte doch ein Blick in SELFHTML völlig ausgereicht...

Wenn ich da mal so auf die Konkurrenz schiele: Bei Arlt ist der Quelltext zwar auch nicht optimal, aber von Tabellenlayout und mehrfach verwendeten IDs keine Spur - obendrein ist erstgenannter auch noch vernünftig lesbar und nicht so ein trauriges Kuddelmuddel und Querfeldein wie bei K & M. Da fragt man sich doch schon: Sieht der zugrunde liegende PHP-Code genauso schrecklich aus? Also richig klassischer Spaghetti-Code, damit die Java-Fuzzis wieder was zum Lästern haben gegenüber uns PHP-Entwicklern?

Da will ich mich lieber gleich gar nich näher mit dem Thema Sicherheit eingehen - z.B. SQL Injections, falls dort überhaupt ein klassisches LAMP-System läuft, und nicht irgendein Bastard aus MS SQL, PHP 4 und IIS.

Nachtrag: Dank Firebug weiß ich nun auch, dass die Jungs noch lange nicht im Jahr 2009 angekommen sind - Unterbau ist folgendes System: Apache/2.2.4 (Unix) mod_ssl/2.2.4 OpenSSL/0.9.7d DAV/2 PHP/4.4.6. Ob sich die Jungs darüber im Klaren sind, dass PHP 4 seit bald einem Jahr nicht mehr weiterentwickelt wird? Ewig gestrig halt. Von den Sicherheitslücken in PHP 4.4.6 mal ganz abgesehen.

Insgesamt sehr schade, denn irgendwie sind mir die K & M-Mitarbeiter immer kompetenter und vor allen Dingen begeisterter vorgekommen als die von anderen Firmen .. Dumm nur, dass dies bei dieser Website nicht wirklich rüberkommt :-/

21.03.2009: Benutzungstipp: Zoomen in Google Maps ohne Mausrad

Habe ich vor kurzem per Zufall rausgefunden: Doppelklicks auf einen Kartenabschnitt mit der linken Maustaste vergrößert den Kartenausschnitt, ein Doppelklick mit der rechten Taste verkleinert ihn. Das funktioniert auch - und ist vor allen Dingen sehr praktisch - in eingebetteten Karten, die i.d.R. keine Mausradbewegungen erfassen (können).

Drübergestolpert bin ich dank des Touchpads meines Netbooks, welches manchmal recht träge reagiert - dadurch habe ich an einer Stelle versehentlich doppelt geklickt - und auf einmal kam mir die Karte so groß vor :D

16.03.2009: Usability gone wrong: DB-Website

Die neue Website der Bahn: Kurz mal ein paar Navigationswege, wie man bei der neuen, so superduper WebZwoNulligen (oder auch nur NULLigen) Website der Deutschen Bahn a) zum "Verkaufsstellenfinder", b) zur "Bahnhofssuche" und c) zur Auskunft darüber, wieviel es kostet, wenn man seine Karte im Zug lösen muss, weil kein Automat in der Nähe ist, der Fahrkarten für ICs und ICEs auch mit Barzahlung ausgibt (und das "Reisezentrum" um die Uhrzeit noch zu hat):

a) Wo finde ich die Öffnungszeiten des "Reisezentrums" in Karlsruhe-Durlach Bahnhof - also im Klartext: Wann macht die Schalterhalle frühmorgens auf?

  1. bahn.de: Menüpunkt "Services"
  2. Services: Untermenü "Während der Reise" > Menüpunkt "Deutschlands Bahnhöfe"
  3. Deutschlands Bahnhöfe: Button "Zum Bahnhofsportal" (öffnet sich in einem neuen Fenster - warum auch immer)
  4. Subsite "Bahnhöfe in Deutschland" (bahnhof.de): Menüpunkt "Bahnhofssuche Deutschland"
  5. Bahnhofssuche Deutschland: Menüpunkt "Verkaufsstellenfinder"
  6. Verkaufsstellenfinder: Am Ende der Seite, Link "Anwendung öffnen" (öffnet natürlich wieder in einem neuen Fenster .. wirklich sehr überzeugend ;->)
  7. Subsite "DB Verkaufsstellensuche": Eingabefeld ohne Namen (das einzige Eingabefeld auf der ganzen Seite) => Karlsruhe-Durlach Bahnhof
  8. Fehlermeldung: Ihre Eingabe ist nicht eindeutig (Wie bitte?!? Eindeutiger gehts kaum noch!) => Durlach Bahnhof, Karlsruhe
  9. Ergebnis: Reisezentrum Karlsruhe-Durlach (komisch, jetzt heißts auf einmal wieder Karlsruhe-Durlach???) - macht erst um 7 Uhr morgens auf, auch gut.

Insgesamt also 8 Schritte, um bis ans Ziel zu kommen, auf 3 verschiedenen Websites. Und ich habe nur durchgehalten, weil ich a) diese Info wirklich dringend brauche (morgen früh geht's Richtung NRW) und b) weiß, dass die DB-Website auch schon vorher wichtige Informationen an den unmöglichsten Stellen vergraben hat. Allerdings habe ich vor der Umstellung Ende 2008 nur 5 Schritte (inklusive Ergebnis) gebraucht, um an mein Ziel zu kommen. Wenn es dann 2009 oder 2010 noch nen Relaunch gibt, werde ich die Info dann erst nach 12 Einzelschritten finden - wenn überhaupt?

Aber auf zum nächsten Stück Information:

b) also muss ich meine Karte wohl am Automaten ziehen - schauen wir also mal, wie man zur Bahnhofssuche findet. Wir wiederholen dazu entweder Schritt 1 bis 4 von gerade eben, oder wechseln gleich auf die nun bekannte Subsite bahnhof.de:

  1. bahnhof.de: Menüpunkt "Bahnhofssuche Deutschland"
  2. Bahnhofssuche Deutschland: Menüpunkt "Bahnhofssuche"
  3. Bahnhofssuche: Eingabefeld "Bahnhofsname" => Karlsruhe-Durlach
  4. Liste: Karlsruhe-Durlach (oh, wow - diesmal keine Fehlermeldung?)
  5. Ergebnis: Bringt mich nicht weiter (Fahrkartenverkauf: siehe Verkaufsstellenfinder - da könnte man doch einfach einen dümmlichen kleinen, aber direkten Hyperlink darauf setzen!), außerdem stimmen die gelieferten Infos zur Hälfte nicht, z.B. ÖPNV: Nein - falsch! In 2 Gehminuten Entfernung kommt man zur Staßenbahn, Linie 1 und 2!

Immerhin: nur noch 4 Schritte - allerdings kannte ich bahnhof.de vorher gar nicht, ergo würde Otto-Normal-Verbraucher wohl auch die anderen 4 Schritte vorher durcharbeiten müssen - insgesamt also ebenfalls 8 Schritte.

c) Nun muss ich die doofe Karte wohl oder übel in der Bahn ziehen; also im IC oder ICE. Nur das zu finden, war nicht wirklich einfach. Nach fünf Versuchen ging es dann mit dem sehr generischen Schlüsselwort "Fahrkarte" => "7 Wege zur Fahrkarte". Und tatsächlich: Die gewünschte Info ist - wie üblich - ganz am Ende zu finden:

7. Fahrkarten im Zug

Wenn Sie es besonders eilig haben, können Sie in den Fernzügen der Bahn ihre Fahrkarten zum Bordpreis kaufen, der etwas höher ist als der reguläre Preis beim Kauf vor Fahrtantritt. Bezahlen können Sie entweder bar oder per Kreditkarte. Einige Sonderangebote sind dort allerdings nicht erhältlich. Wichtig: Bei Zahlungsbeträgen ab 50,- Euro ist neben der Kreditkarte ein amtlicher Lichtbildausweis (Personalausweis oder Reisepass) oder alternativ die BahnCard vorzulegen.

Zu guter Letzt: In Nahverkehrszügen und in der S-Bahn müssen Sie Ihre Fahrkarte auf jeden Fall vor der Abfahrt gelöst haben.

Ach ja .. letzteres habe ich schon länger rausgefunden. Diese Info hat mich allerdings 50 Euro gekostet, weil es zu diesem Zeitpunkt nirgendswo fein plakatiert worden ist (heute auch noch nicht der Fall, aber naja .. der Fahrgast muss das doch selber wissen ;->).

13.03.2009: Analyse: GNOME Web Photographer

Kurze Analyse des GNOME Web Photographer (wird u.a. in Shutter verwendet, um Screenshots von Webseiten zu erstellen):

Aus den Debian-Paketen geht nicht hervor, wie die Webfunktionalität bewerkstelligt wird - allerdings aus den Original-Quelldateien. Gefunden in der Datei README:

GNOME Web Photographer is a tool to generate full-size image
files and thumbnails from HTML files and web pages.

Requirements:
* gtk+
* libpng
* mozilla or firefox trunk build from 2005-07-19 or later

Also mittels des Gecko-Engines.

09.03.2009: Notiz: UI 1.5 und Habari

Hm .. womöglich bekomme ich es hin, NUR mittels Habari meine neue Website aufzuziehen. Immerhin gibt es da diese Sache mit den Page-spezifischen Templates - da läge es doch noch nahe, folgendes zu versuchen:

- Portfolio, Leistungen und Kontakt sind allesamt einzelne Pages, die mittels Page Template ihre verschiedenen Funktionen erfüllen
- Weblog ist diese Seite hier

Mal grübeln, vielleicht bekomme ich das ja irgendwie hin - wär ne tolle Sache ;)

11.02.2009: Meine Arbeitsmittel

Da mir in letzter Zeit des Öfteren die Frage gestellt worden ist, mit was ich denn so arbeite, folgend mal eine ausführliche Aufschlüsselung meiner Werkzeuge :-)

Entwicklungsumgebungen:

  • Workstation: AMD DualCore-System mit 2 GB RAM, 500 GB HDD, Ubuntu 8.04.2 LTS (XFCE), Firefox 3.0, Opera 10, Midori, Konqueror, w3m, links2, VirtualBox 2.1x
    1. Windows Vista Business, IE 7, DebugBar, IETester, SRWare Iron, Firefox 3.1b
    2. Windows 7 Beta Build 7000, IE 8
  • Netbook: Asus EeePC 1000H, Intel Atom-CPU (1,6 GHz), 1 GB RAM, 160 GB HDD, Eeebuntu 2.0 mit Array-Kernel/Windows UMPC-Dualboot (noch), Firefox 3.0, Opera 10, Epiphany (Webkit), w3m, links2, VirtualBox 2.1x
    1. Windows XP SP3, IE 7, SRWare Iron
  • Firefox-Erweiterungen:
    • Firebug - mit den zusätzlichen Erweiterungen Firecookie, FireRainbow, YSlow (nur auf dem Netbook und unter Windows)
    • Web Developer Toolbar
    • Scuttle - zur zentralen Ablage und Zugriff auf meine Bookmarks

    Editoren/IDEs:

    • Linux: Kate, gedit, PDT, mcedit
    • Windows: Notepad++, PDT

    Frameworks:

    • JavaScript: jQuery, mootools
    • CSS: blueprintcss, bluetrip, YAML
    • PHP: eigene Frameworks, CakePHP, Kohana

    Server:

    • Workstation: XAMPP 1.68a (PHP 5.2.6, PHP 4.4.9, MySQL 5.0)
    • Netbook: XAMP 1.7 (PHP 5.2.8, MySQL 5.1)
    • Hoster #1: PHP 5.2.6 (Hardened PHP), MySQL 5.0, Linux/SuSE (Kernel 2.6.22.19)
    • Hoster #2: PHP 5.2.8 (Hardened PHP), MySQL 5.0, Gentoo Linux (Kernel 2.6.26.2)

30.01.2009: Umgestaltungsideen

Mal folgend meine Umgestaltungsideen, frisch aus meinem sog. struct file:

usability idealist 1.5 - struct:

- portfolio (startseite)
	- wird via habari verwaltet
	- tag: portfolio
	- sorting options
		- active, work in progress, offline => using tags
		- sort by date or alphabet (ascending, descending)
	- integration von ScrollTo / LocalScroll
	- bilddateien
		- fullsize: images/portfolio/[slug]/[##].jpg
		- midsize: images/portfolio/[slug]/[##].mid.jpg
		- thumb: images/portfolio/[slug]/[##].small.jpg
		
- leistungen
	- intern mittels IDs versehen, um navigation einblenden zu können
	- unterteilung (ggf. weniger):
		- design
		- programmierung
		- beratung - inhalt ließe sich womöglich in den anderen drei punkten unterbringen
		- webhosting
		
- journal -> habari
	- startseite
		- excerpt des aktuellsten eintrags
		- letzte 5 einträge
		- suche
		- scuttle-pullouts
		- empfehlungen / auszug aus blogroll
	- einzelansicht
		- zentriert, z.b. 80% der seite oder 950 px breite
		- links 2/3 bis 3/4 für inhalt, rechts seitenleiste
		- inhalt:
			- headline
			- post
			- tags
		- seitenleiste
			- evtl. sitewide navigation
			- suche
			- monatsarchiv (mit accordeon-pulldowns, wie auf bisheriger startseite)
			- tag cloud
			- blogroll
	- tag-ansicht
		- wie einzelansicht, evtl. ohne oder reduzierte seitenleiste
	- archivansicht
		- wie tag-ansicht
		
- kontakt
	- mit spam-protection
	- ohne tollen button-effekt beim submit-button
	- annäherung an kontaktformular von fwolf.info
	- ansonsten wie gehabt

--- global site changes:
- rss-/atom-feed in header
- jquery 1.3.1 zum ausprobieren, was noch alles läuft
- unobtrusive javascript, d.h. navigation wird rein technisch an den anfang der seite gelegt, und wenn JS aktiviert ist, ans ende der seite (position: fixed) gesetzt
- seitenaufbau:
	- header
		- enthält logo (annäherung an den header vom blog, damit später nur noch das blog-logo eingeblendet wird, man den übergang aber nicht so radikal mitbekommt => momentan sind die größen der logos unterschiedlich!)
		- link zur startseite
	- navigation
		- ohne JS: top-down
		- mit JS: bottom-up, footer folgt
		- visuell
			- tabauswahl mit leichtem button-effekt oder sonstiger hervorhebung (schatten, umrandung, whatever)
			- unterstrichene links, hover = text-decoration / border: none
			- ausgewähltes tab hat dieselbe farbe wie die subnavigations-leiste
			- ausgewählter menüpunkt ist fett formatiert
	- content / main
		- 80% / 950px breite
	- footer
		- gesamte seitenbreite, links anliegend, höhe z.b. 60px;
		- enthält copyright-daten + "powered by"-informationen - andere farbe als rest, z.b. fast schwarzer / grauschwarzer grünton, evtl. kleiner verlaufseffekt
		- ohne JS: ganz am seitenende
		- mit JS: position: fixed; bottom: 0; left: 0; => navigation wird darüber gesetzt, z.b. bottom: 60px, left: 0;

28.12.2008: Überarbeitung dieses Weblogs

Ich grüble grade, wie ich dieses Weblog sinnvoller benutzbar mache. Folgende Dinge stören mich ganz speziell:

  • Keine Quickbutton-Bar im Habari-Admin-Bereich
  • Die Links sind fast nicht vom restlichen Text unterscheidbar - Lösung: andere Farbe / Hervorhebung
  • keine durchgehende Logik für Links (mal unterstrichen, mal fett, mal andersfarbig) - stammt noch vom ursprünglichen Theme (Blossom-port für Habari)
  • Irgendwo hätte ich gern die neuesten 5 Links aus meinem Scuttle-Bookmark-Server ausgegeben - bei der jetzigen Struktur der Blog-Startseite würde es aber etwas überfüllt aussehen
  • Die Archiv-Funktion dieses Themes ist broken bzw. zeigt nicht alle Einträge des jeweiligen Monats an
  • Listen werden visuell schlecht erkennbar dargestellt (keine Aufzählungszeichen, grau statt schwarz / andere Farbe, etc.)
  • Quotes könnten auch besser visuell dargestellt werden (z.B. "speech bubble" mit Anführungsstricherl-Grafik) und anderer (Text)Farbe