Facelift
Das Design von markusbauer.info ist zwar erst wenige Monate alt, es gab aber noch ein paar Kleinigkeiten, die mir selbst nicht ganz gefielen. Weil mir gerade danach war, habe ich noch einige Veränderungen vorgenommen.
- Der Kopfbereich ist flacher und in der Breite begrenzt.
- Auf das langweilige Grau im Kopf wird zugunsten eines angedeuteten Himmels, der sich über der Wiese aus dem Seitenfuß fortsetzt, verzichtet.
- Die Wiese selbst wandert vom linken Rand in die Seitenmitte.
- Durch die Begrenzung der Gesamtbreite, nachdem sich der Kopfbereich nicht mehr nach rechts ausdehnt, kann das gesamte Layout zentriert werden, was - nicht zuletzt vor dem Hintergrund immer höhrerer Monitorauflösungen - wohl zeitgemäßer ist.
Zum Vergleich: eine Gegenüberstellung der Startseite
Startseite in version zweiUnd…
Neue Startseite in version zwei.fünfJetzt mit Lichtkasten
Merken: Wenn was in Javascript nicht funktioniert, könnte es am Zusammenspiel mit XHTML 1.1 liegen.
Bei einer kritischen Prüfung dieser Seite durch die Programmierer dort, wo ich arbeite, fiel auf, dass Bilder bislang nur auf die Großversion verlinken, statt diese in optisch ansprechender Form zu präsentieren. Sowas wird in letzter Zeit immer öfter gemacht. Die Technik nennt sich Lightbox, und dabei wird ein Bild innerhalb einer Webseite über den Text gelegt. Realisiert wird das Ganze über ein Javascript.
Als jQuery-Fan habe ich mich für die darauf basierende Thickbox entschieden, die unglaublich flexibel einsetzbar ist. Ich habe einige Anpassungen vorgenommen, um die Anzeige einzudeutschen. Das optische Pimpen mache ich bei Gelegenheit mal. Vielleicht. Irgendwann.
So richtig ganz unkompliziert war die Implementierung aber nicht, sondern hat mich einiges an Tüftelei gekostet. Immer wenn ich mehrere Bilder als Set gekennzeichnet habe (mittels rel-Attribut) erhielt ich statt eines Lichtkastens nur einen Javascript-Fehler.
Jetzt, ein paar Tage später hab ich entdeckt, dass das an Entitäten wie > oder im Javascript liegt, die eigentlich in den HTML-Code geschrieben werden sollten. Irgendwie gibt es beim Zusammenspiel solchen Entitäten im Skript und dem Dokumenttyp XHTML 1.1 wohl Probleme weil sie fehlinterpretiert werden. Das erklärt auch den einleitenden Merksatz.
Eine weitere Besonderheit: Die JS-Datei musste ich als UTF-8 mit Signatur abspeichern, so dass auch Webkit-basierte Browser (Google Chrome, Safari) mit den deutschen Sonderzeichen darin zurecht kommen.
Beispiele für die neue Funktion gibt es hier oder auch hier.
Na, ihr Programmierer, was sagt ihr jetzt?
Alle mögen jQuery
Wie heise online neulich berichtete, setzen zukünftig auch Nokia und Microsoft auf das hervorragende Javascript-Framework jQuery. Auch ich bin seit einiger Zeit begeisterter Nutzer dieses sehr nützlichen Scripts, das mittlerweile Grundlage für unzählige praktische Anwendungen ist.
Hier benutze ich jQuery bislang nur für einige einfache DOM-Manipulationen. Sobald ich mal Zeit habe, wird aber z.B. eine Lightbox für das komfortable Betrachten von Fotos eingbaut, und dafür habe ich mit jQuery jetzt schon einen soliden Grundstein.
In einem anderen Projekt, an dem ich gerade arbeite, bildet jQuery die Grundlage für AJAX und dient zum Pimpen der Benutzeroberfläche.
Anbei noch eine ungeordnete Sammlung von nützlichen Links zum Thema:
- jQuery and JavaScript Coding: Examples and Best Practices
- Best of jQuery-Tutorials
- Firefox3-Extenison für jQuery
- Unzusammenhängende jQuery-Links
Neues Microsoft Frontpa… äh, Expression Web
Wer hat nicht in der Frühzeit des Internets ein bisschen mit Microsofts Frontpage experimentiert? Ich schon. Aber bereits nach kurzer Zeit waren meine Ansprüche zu hoch, als dass ihnen der IE-exklusive, nicht-standardkonforme, aufgeblähte Quelltext, den die Software ausspuckte hätte genügen können.
Seitdem ist viel passiert, der kommende Internet Explorer soll standardkonformer arbeiten als alle Vorgänger zusammen und Microsoft ist bemüht die Sünden der Vergangenheit vergessen zu machen. Heute wurde ich per Newsletter informiert, dass das neue Microsoft Expression Studio 2 verfügbar sei. Da war ich neugierig.
Von Designern für Designer - Da bin ich skeptisch gewordenNach kurzem Blick auf die Highlights-Seite (teilweise sehr unterhaltsam), möchte ich ein paar Anmerkungen loswerden:
Dass sich Microsoft neuerdings um Standards kümmert ist schön. Als nächstes sollte man sich unbedingt über Semantik informieren. Auch schön, dass man endlich auf tabellenbasierte Layouts verzichtet. Aber x-fach verschachtelte divs und Quelltext, der mehr ID-Attribute als Elemente enthält… das ist noch nicht ganz das, was modernes Webdesign ausmacht.
Vielleicht ist es aber auch einfach nicht möglich, all die Feinheiten, die guten HTML-Code ausmachen in eine Software zu packen, und dabei flexibel zu bleiben. Dann werden Designer, die hochwertige Webseiten erstellen möchten, wohl weiterhin in HTML und CSS fit sein müssen.
Wie SAP die Tagcloud erfunden hat
Witziges Erlebnis vor einigen Wochen auf der SAP Skills Conference: Das Unternehmen stellt “neue Collaborationfunktionen” im Netweaver Portal vor. So gibt es z.B. die Möglichkeit an Dokumente, Bilder und alle denkbaren Arten von Daten sogenannte Tags heften. Und dann gibt es einen Tag-Explorer, wo man alle verwendeten Tags angezeigt bekommt. Und je öfter einer verwendet wurde, desto größer erscheint er in der konglomerierten Darstellung.
Die anwesenden Spezialisten waren begeistert davon, was sich SAP da ausgedacht hatte, und voll des Lobes. Nur einer war sich sicher, so etwas schon mal irgendwo gesehen zu haben.
Was sind das eigentlich für Menschen, die Portale andere Online-Präsenzen entwickeln und so weit entfernt sind, vom modernen Internet, dass sie noch nie eine Tagcloud oder Begriffswolke gesehen haben. Wie kann man von solchen Menschen erwarten, ihre Kunden bezüglich aktueller Entwicklungen zu beraten?
Ich frag ja nur.
Jedenfalls hab ich ja auch so ein modernes Tag-Ding. Und ich bin sicher, dass es nicht von SAP erfunden wurde.
Maßnahmen zur Browserkompatibilität
Der ursprüngliche Plan für diese Seite war, ausschließlich standardkonform zu entwickeln, und sich nicht um die möglicherweise “andersartige” Darstellung im Internet Explorer zu kümmern. Leider sind die Einschränkungen, die eine Nutzung dieses Browsers (v.a. in älteren Versionen) mit sich bringt, nicht jedem bekannt, was zu dem Trugschluss führen könnte, der Entwickler hätte Mist gebaut und hat keine Ahnung. Weil ich es langsam leid bin, das immer wieder richtig zu stellen, habe ich keine Mühen gescheut, dass diese Seite auch in prähistorischen Browsern okay aussieht.
- Korrektur-Stylesheet für astreine Darstellung im Internet Explorer 7
- Noch ein Korrektur-Stylesheet für richtige Präsentation in älteren IEn (getestet mit Version 6)
- Javascript für Transparenzeffekte bei PNG Grafiken (IE<7)
- Javascript für absolute Positionierung bestimmter Grafiken, die sonst das Seitenlayout zerlegen (IE<7)
- Javascript für kosmetische Effekte, die den CSS-Selektor :first-child nachbilden (IE<7)
Was jetzt noch passieren kann, ist die Kombination alter IE & deaktiviertes Javascript. Für den Fall bekommt der geneigte Nutzer einen dezenten Hinweis angezeigt, auf den ich an dieser Stelle nicht näher eingehen möchte. Das kostet zwar genau genommen bei jeder Seite ein bisschen Bandbreite, aber die Leute lassen einem Entwickler ja keine andere Wahl.
Was für ein genialer Hintergrundeffekt!
Bemerkenswert, was man mit ein paar Hintergrundbildern machen kann: webleedDesign
Gesehen bei WebDesignerWall.
Endlich live!
Nach Wochen, Monaten der Ankündigung ist meine neue Seite nun endlich live.
Allerdings muss ich gleich dazu sagen, dass sie an vielen Stellen noch nicht fertig ist. Aber ich wollte nicht mehr länger warten, weil ich gemerkt hab, wie mich die Motivation schon wieder verlässt.
Jetzt ist erst mal der Druck ein wenig weg, aber es gibt noch viel zu tun:
- Suchfunktion einbauen
- Bilder ersetzen
- Quelltext und Programmcode optimieren
- Stylesheets um Definitionen für bestimmte Elemente erweitern
- Server aufräumen
- Weitere Plugins integrieren
- Und viel viel mehr
Aber nun zu dem, was schon da ist: Wie findet ihr es?
Ich wollte längst live sein!
Nachdem ich in den letzten Wochen zahlreiche Alternativen (Textpattern, Serendipity usw.) getestet habe, kommt diese meine neue Seite nun doch wieder mit Wordpress als Motor daher. Hauptgrund ist die doch recht hohe Flexibilität des Systems und die zahlreichen Features.
Trotzdem bin ich ein wenig verstimmt, weil ich am Wochenende einige Stunden (Samstag Nacht bis 3) damit verbracht habe, einen Bug zu suchen und auszumerzen bzw. zu umgehen.
Wordpress bietet zahlreiche Möglichkeiten die URL-Generierung für Einträge im Weblog zu beeinflussen. Ich habe mich für die einfache - und schon im Hinblick auf Suchmaschinen wohl beste - Variante entschieden, Seitennamen nach dem Schema /weblog/titel-des-posts zu vergeben.
Zugegeben, in der Dokumentation wird davor gewarnt, dass das zu Problemen führen kann, aber wenn die das schon wissen, warum macht dann niemand was dagegen? (… oder beschreibt wenigstens, wie sich diese Probleme darstellen, dass meinereiner gleich weiß, woran es liegt?)
Das Problem ist das folgende: Wordpress verfügt intern über einen eigenen Rewrite-Mechanismus, der alle Anfragen an den Server, für die es keine Datei gibt, an das System weiterleitet und dort auswertet. Bei der Auswertung kommen zahlreiche Regeln zum Einsatz, die reguläre Ausdrücke verwenden um die angefragte URL einer Seite, einem Eintrag oder einer Funktion zuzuordnen.
Scheinbar ist die Reihenfolge dieser Ausdrücke nicht ganz durchdacht, denn wenn man innerhalb der Übersichtsseite des Blogs blättert und so eine URL wie /weblog/page/2 aufruft, denkt das System witzigerweise man würde die 2. Seite eines Eintrags mit dem Titel page sehen wollen. Die gibt es natürlich genauso wenig wie den Eintrag. Deshalb erhält man statt einer weiteren Übersichtsseite mit älteren Einträgen nur eine Fehlerseite. Die Regel, die explizit nach der Angabe page sucht und entsprechend verarbeitet steht erst weiter unten in der Liste und wird in diesem Fall garnicht beachtet.
Dass das Problem nicht nur bei mir auftritt, lässt sich auch im originellen Blog von Vorsprung durch Webstandards nachvollziehen.
Nach Prüfung zahlreicher programmierter Lösungen, die teilweise eine Änderung des Wordpress-Codes erfordert hätten und damit mit dem nächsten Update verloren und vergessen worden wären, habe ich mich dazu entschlossen, Einträge in einen eigenen (virtuellen) Ordner zu legen und damit das Problem zu umgehen. Die URL sieht dann so aus: /weblog/eintrag/titel-des-posts.
Ärgerlich nur, dass sich dadurch meine Liveschaltung verzögert. Und durch Tippen dieses Eintrags gleich nochmal! Kann das nicht mal jemand korrigieren?
Schon in den Top 5!
Vor wenigen Wochen find ich damit an, meine neue Domain markusbauer.info mit Inhalten zu füllen. Besonders viel ist seitdem nicht passiert. Erklärtes Ziel des Ganzes ist die verbesserte Auffindbarkeit meiner Person über Suchmaschinen. Mit einem wirklich häufigen Namen wie dem meinen sollte das garnicht so leicht sein.
Umso überraschter war ich, als ich gerade festgestellt habe, dass ich bei einer Google Suche nach Markus Bauer schon jetzt in den Top 5 lande, und das obwohl die Qualität der Seite noch alles andere als hochwertig ist.
Dass allein der Domainname einen solchen Einfluss hat, hätte ich ja nicht gedacht.