markusbauer.info

Alle Einträge zu Webentwicklung

Mehr Übersichtlichkeit

Datum: 2. März 2009
Tags: , ,
Reaktionen: 4 Kommentare

Neulich hat mich der stolze Besitzer einer tabellenbasierten Reptilienseite darauf aufmerksam gemacht, dass meine Startseite ganz schön unübersichtlich sei. Ich war überrascht. Beim Versuch, das Ganze einigermaßen objektiv zu betrachten fiel mir auf, dass durch die beiden recht flachen blau hinterlegten Boxen die Dreispaltigkeit des Layouts nicht so deutlich wurde, wie ich das beabsichtigt hatte.

Startseite mit zwei blau hinterlegten BoxenStartseite mit zwei blau hinterlegten Boxen

Kurzerhand wurde also die Kommentarbox entfernt und die Box mit dem jüngsten Posts vergrößert. Damit geht zwar der Effekt verloren, dass neue Kommentare meine Startseite aktualisieren, aber sie wird dadurch aufgeräumter. Und es ist ja auch nicht so, dass ich täglich Dutzende Kommentare bekommen würde. Noch nicht…

Kommentar dalassen


Browser benutzen – ohne Installation

Datum: 26. Februar 2009
Tags: ,
Reaktionen: Kommentare deaktiviert für Browser benutzen – ohne Installation

Wer Webseiten erstellt und das einigermaßen ernst nimmt, kommt um Tests in diversen Browsern nicht herum. Was mich daran nervt ist, dass jede zusätzliche Installation die Windows-Registry zumüllt, oder sonstwo Dateien ablegt.
Zudem lassen sich verschiedene Versionen des Internet Exploders, die man ja immer noch berücksichtigen sollte/müsste, nicht ohne weiteres parallel installieren.

Eine ziemlich schicke Lösung bietet die Firma Xenocode. Der Anbieter von Virtualisierungslösungen bietet kostenlose Sandboxversionen der gängigen Browser zum freien Download an, die ohne Installation direkt starten.

Funktioniert sehr gut, ist praktisch und reicht zum Testen völlig aus.

Einziges Manko: Bestimmte Dateien scheinen während der Nutzung doch lokal abgelegt zu werden (Cache, Firefox Add-Ons usw.). Dafür sind sie beim nächsten Start zwar noch da, liegen aber halt irgendwo rum. Naja, man kann nicht alles haben.

Kommentar dalassen


Selbe Seite – Halbe Größe

Datum: 5. Februar 2009
Tags: ,
Reaktionen: Kommentare deaktiviert für Selbe Seite – Halbe Größe

Heute in der Arbeit hatten wir eine lustige Diskussion, wie groß eine Startseite sein darf. Mit „groß“ ist damit die Datenmenge gemeint, die beim Laden an den Browser geschickt wird. Interessant ist das deshalb, weil nicht jeder mit einer Hochgeschwindigkeitsinternetverbindung gesegnet ist, und weil das Warten, dass sich eine Seite aufbaut, ein schönes Beispiel für Lebenszeitverschwendung ist.

Vorsichtige Berechnungen ergaben, dass wir mit den aktuell geplanten Änderungen mit einer Datenmenge von 600 kb rechnen müssten. Das Laden würde mit einer ISDN-Verbindung im Idealfall 75 Sekunden dauern, und das ist eine furchtbar lange, eigentlich inakzeptable Zeit. Die Referenzseite, von der sich unsere „Strategen“ haben inspirieren lassen, und die ich hier bewusst nicht verlinke, bringt es sogar auf knapp 2 Megabyte – oder sagen wir 256 ISDN-Sekunden.

Das war für mich der Anlass, meine eigene Startseite mal ein wenig zu optimieren. Das Ergebnis vorweg: 115 statt vorher 226 kb. Und das ohne erkennbare Unterschiede oder funktionale Einschränkungen.
Wie geht das?

Erstens: Das hübsche Bild von mir war bislang im PNG-Format abgespeichert, was einen transparenten Hintergrund ermöglicht, aber satte 77 kb gebraucht hat. Ich bin da noch nicht so fit, möglicherweise kriegt man das durch diverse Einstellungen kleiner, aber da ich in diesem Fall sowieso keine Transparenz brauche, ist es jetzt ein JPG – nur ein Zehntel so groß.

Die zweite Maßnahme war ein bisschen komplizierter. Die meisten Browser haben eine eingebaute Entpackerfunktion. Die wird jetzt genutzt, indem Javascripte und Stylesheets gepackt übertragen werden, wenn der Browser etwas damit anfangen kann.
Die meisten Webserver haben dafür die Möglichkeit, die Daten automatisch zu packen, was aber immer wieder passiert… und das muss nicht sein. Also hab ich auf meinem Server gepackte Versionen von allen Scripten und CSS-Dateien abgelegt und prüfe bei jeder Anfrage, ob lieber die gepackte oder die normale Version ausgeliefert werden sollte. Für Javascripte, die noch dazu in einem besonderen Ordner liegen, sieht das so aus:

RewriteCond %{HTTP:Accept-Encoding} .*gzip.*
RewriteRule ^scripts/(.*)\.js$ /bla/scripts/$1.gz.js [L]
RewriteRule ^scripts/(.*)$ /bla/scripts/$1 [L]

Dem Profi fällt auf, dass meine gepackten Dateien die Erweiterung .gz.js haben. Man würde es umgekehrt (.js.gz) erwarten. Da macht mir aber die vom Webhoster vorgegebene Serverkonfiguration einen Strich durch die Rechnung, die für .gz Dateien dem Browser verschweigt, dass es sich eigentlich um ein Script handelt… und das macht Probleme.
Also, Erweiterung umgedreht, etwas ungewöhnlich, aber es funktioniert – zumindest in allen Browsern, die ich zur Hand habe.

Ich finde, das Ergebnis kann sich sehen lassen. Auch wenn, oder gerade weil man eben keinen Unterschied sieht.

Kommentar dalassen


Facelift

Datum: 19. Oktober 2008
Tags: ,
Reaktionen: Ein Kommentar

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.

Zum Vergleich: eine Gegenüberstellung der Startseite

Startseite in version zweiStartseite in version zwei

Und…

Neue Startseite in version zwei.fünfNeue Startseite in version zwei.fünf

Kommentar dalassen


Jetzt mit Lichtkasten

Datum: 9. Oktober 2008
Tags: ,
Reaktionen: 3 Kommentare

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?

Kommentar dalassen


Alle mögen jQuery

Datum: 1. Oktober 2008
Tags:
Reaktionen: Kommentare deaktiviert für 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:

Kommentar dalassen


Neues Microsoft Frontpa… äh, Expression Web

Datum: 16. September 2008
Tags: ,
Reaktionen: 3 Kommentare

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 gewordenVon Designern für Designer - Da bin ich skeptisch geworden

Nach 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.

Kommentar dalassen


Wie SAP die Tagcloud erfunden hat

Datum: 15. September 2008
Tags: ,
Reaktionen: Kommentare deaktiviert für 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.

Kommentar dalassen


Maßnahmen zur Browserkompatibilität

Datum: 31. August 2008
Tags:
Reaktionen: Kommentare deaktiviert für 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.

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.

Kommentar dalassen


Was für ein genialer Hintergrundeffekt!

Datum: 25. August 2008
Tags: , ,
Reaktionen: Ein Kommentar

Bemerkenswert, was man mit ein paar Hintergrundbildern machen kann: webleedDesign

Gesehen bei WebDesignerWall.

Kommentar dalassen


« Ältere Einträge