Erste Schritte mit Microsofts Expression Web SuperPreview

Seit dem 2. September können Entwickler Microsofts Expression Web SuperPreview herunterladen. MEWSP ist ein Werkzeug zur Darstellung von Webseiten in mehreren Browsern, im Standard in den Internet Explorer-Versionen 6, 7 und 8. Entwickler sind ohnehin besonders bei der Gestaltung der Webseiten von den unterschiedlichen Interpretationen der Browserversionen gebeutelt. Microsoft versucht, mit MEWSP eine Unterstützung anzubieten.Vor einigen Wochen hatte ich schonmal die Beta heruntergeladen, die ich aber dank fehlendem XP ServicePack3 nicht installieren konnte. Die aktuelle Version läuft nun auch auf XP ServicePack 2, benötigt aber ein installiertes .NET Framework 3.5. Um die IE8-Vorschau verwenden zu können ist zusätzlich eine IE8-Installation notwendig – verständlich.Trotz vieler Ansätze (Virtual Machines, MultipleIE) im Internet habe ich für mich nie DAS Werkzeug zum browserübergreifenden Test finden können, dementsprechend gross war meine Hoffnung, vielleicht von Microsoft selbst mit einer Lösung versorgt zu werden. Und – nach den ersten Stunden mit dem Expression Web Super Preview – bin ich recht zuversichtlich, etwas gefunden zu haben. Zumindest die gröbsten Probleme lassen sich leicht mit der Software ermitteln und beheben.

Ein paar Screenshots

Nach einer reibungslosen Installation, wenig Konfiguration und dem ersten Start nimmt das Tool recht schlicht seine Arbeit auf. MEWSP startet mit einem geteilten Fenster und einer Browserauswahl. Am oberen Rand befindet sich eine Adressleiste, mit der öffentlich verfügbare Seiten aufgerufen werden können. Gibt man eine Adresse ein, wird die Seite in den beiden Browsern geladen.

Leider ist kein “browsen” möglich, d. h. geladen werden nur Abbilder der Seite. Das DOM ist da und ich kann Elemente analysieren, aber ich kann keine Links verwenden. Ein Klick auf ein Element oder einen Link führt nur zu einer Detailanzeige der Elementinformationen. Macht aber im Grunde nix, das ist ohnehin schon viel besser, als alle Lösungen, die ich bisher gesehen habe. Trotz korrekter Einstellung meines Internet Explorers habe ich es jedoch leider noch nicht geschafft, lokale Seiten aus einem lokalen Webserver (localhost) aufzurufen.JavaScript scheint in diesem Rahmen auch nicht zu funktionieren, bzw. ausgeführt zu werden. Schade, auch JavaScript ist browserübergreifend manchmal schmerzhaft, aber dafür gibt’s ja jQuery ;)

MEWSP erlaubt zusätzlich einen Overlay beider Fenster, wodurch Unterschiede in den Layouts nun einwandfrei zu Tage treten. Sehr tolle Sache, das. Jede Menge weiterer Funktionen erleichtern den Überblick über das Layout: Zoom-Funktionen, ein Browser für das DOM, ein Lineal und Hilfslinien, die ich auf die jeweiligen Screens legen kann.

Ein erstes Fazit

Trotz einiger Schwächen (kein echter Browser, kein JavaScript) ist Microsofts Expression Web SuperPreview eine gute Alternative zum browserübergreifenden Test von Layouts – vorausgesetzt, man kann sich auf die IE6-Interpretation verlassen. Auf meinen Flickr-Account habe ich ein paar erste Screenshots hochgeladen.

Veröffentlicht unter Tipps & Tricks, Web-Entwicklung | Verschlagwortet mit , , | 2 Kommentare

jQuery Anti-Patterns für eine bessere Performance

Das t3n-Magazin veröffentlicht einen Kurzbericht über die jQuery-Konferenz, die am vergangenen Wochenende in Boston stattfand (ein paar Fotos gibt’s natürlich bei Flickr). Neben vielen interessanten Präsentationen ist auch der Vortrag von Paul Irish zum Thema jQuery Anti-Patterns for Performance & Compression verlinkt. (Genau der Paul Irish, der vor kurzem den Artikel Bulletproof @font-face veröffentlichte, der durch viele Blogs ging).Paul präsentiert in seinen Folien sehr wissenswerte Ansätze über die Optimierung des Codes beim Einsatz von jQuery. Manche Sachen sind offensichtlich – wenn man sie erstmal sieht, manche Ansätze sind neu, teilweise überraschend und sollten beim nächsten jQuery-Projekt dringend in Betracht gezogen und geprüft werden. Sehr lesenswert.Hier geht’s zur Präsentation auf Slideshare und hier findet sich eine gesamte Auflistung der Präsentationen und Vorträge der jQuery Conference.

Veröffentlicht unter JavaScript, Web-Entwicklung | Verschlagwortet mit , , , | Hinterlasse einen Kommentar

Snow Leopard und Apache, PHP und MySQL

Die Veröffentlichung von Apples neuer Betriebssystem-Version Snow Leopard hat für Web-Entwickler auch einige Neuerungen mitgebracht. Unter anderem wurde auch der Apache und die PHP-Version aktualisiert. Wer wie ich nicht MAMP verwendet, hat eventuell ebenfalls eine böse Überraschung erlebt: Die angepasste Apache-Konfiguration und alle PHP-Einstellungen sind nach einem Update einfach weg, bzw. zurückgesetzt.Nach wie vor lässt sich der docroot des Webservers über ein http://localhost/~username aurufen, aber PHP läuft dort nicht mehr und ein installiertes MySQL unter /usr/local/ ist auf den ersten Blick auch nicht mehr da. Was ist passiert?

Der neue Apache

Der Apache Webserver wurde auf die Version 2.2.11 aktualisiert. Damit wurden jedoch die Einstellungen in der httpd.conf und vor allem unter /extra/httpd-vhosts.conf zurückgesetzt. Das bedeutet, trotz eines mitgelieferten PHP 5.3 funktionieren PHP-Dateien im docroot unter /Users/{username}/Sites/ erstmal nicht. Eine Abhilfe schafft ein kurzer Sprung in die Konsole, um in der Apache-Konfiguration das Laden des PHP-Moduls wieder zu aktivieren (Bei solchen Sachen lohnt es sich, immer mal ein Backup der aktuellen Konfiguration anzulegen):

#~> sudo cp /private/etc/apache2/httpd.conf .~/backup/httpd.conf.20090909.001
#~> sudo vi /private/etc/apache2/httpd.conf

In der Datei suchen wir nach der Zeile, in der das PHP-Modul geladen wird. Die Zeile muss etwa so aussehen:

#LoadModule php5_module    libexec/apache2/libphp5.so

Durch Entfernen des vorangestellten #-Zeichens und einem Neustart des Apaches wird nun das PHP-Modul geladen. Danach sollte eine im docroot des Webservers abgelegte PHP-Datei mit dem Aufruf der Funktion phpinfo() brav die nagelneue Version 5.3 anzeigen.

Aktivieren der php.ini

Bei einem Blick in die Aufstellung in der PHPInfo stellen wir fest, dass keine php.ini-Datei geladen wird. Stattdessen verwendet das Modul die Standardeinstellungen. Im Verzeichnis /private/etc/ finden wir aber mehrere inaktive Versionen, die wir schnell aktivieren können:

#~> ls /private/etc/php.in*
/private/etc/php.ini.default
/private/etc/php.ini-5.2-previous
/private/etc/php.ini.default-5.2-previous
#~> cd /private/etc/
#~> sudo cp php.ini.default php.ini
#~> sudo chmod u+w php.ini
#~> sudo apachectl restart

Jetzt können wir an der Datei Änderungen vornehmen. Eine wichtige Neuerung in PHP5.3 ist sicherlich das Date/Timezone-Objekt. Das wirft nämlich massenweise Kompatibilitätsfehler aus, wenn Applikationen noch mit den date()-Funktionen von PHP5.2 und kleiner arbeiten. Um diese Fehler zu verhindern, sollte in der php.ini zumindest die Standard-Timezone gesetzt werden. Die unterschiedlichen Angaben (für Europa) findet man in der PHP-Dokumentation. Man öffnet die php.ini, sucht die Definition für date.timezone im Abschnitt [date], setzt den Wert entsprechend (bei mir Europe/Berlin) und kommentiert die Zeile aus. Nach Speichern der Datei und eines Neustarts des Apaches sollten die Fehler verschwunden sein. Ich rate jedoch jedem Entwickler, sich die Definition des neuen Date/Timezone-Objektes anzusehen.

MySQL

Ich hatte vorher eine eigene MySQL-Installation unter /usr/local/mysql laufen. /mysql war dabei ein symbolischer Link auf die Bibliotheken unter mysql-5.0.1a-osx10.5-x86. Das Snow Leopard Update hat zwar die Bibliotheken wiederhergestellt, aber den symbolischen Link vergessen:

#~> cd /usr/local/
#~> sudo ln -s mysql-5.0.1a-osx10.5-x86 mysql

Nebenbei sollte ich die MySQL-Version vielleicht auch einmal aktualisieren – zunächst mal klappt aber wieder der Zugriff über den Client.PHP kann aber noch nicht auf MySQL zugreifen. Zunächst sind in der php.ini die entsprechenden mysql-Module freizuschalten (im Bereich Dynamic Extensions). Danach erscheint der Abschnitt MySQL zwar wieder brav in der phpinfo, es konnte jedoch immer noch keine Verbindung zur lokalen Datenbank hergestellt werden. Das liegt daran, das in der php.ini.default der Wert für das mysql.default_socket auf /var/mysql/mysql.sock steht. In meiner Installation liegt das Socket aber unter /private/tmp/mysql.sock. Schnell den Wert ändern, Apache neu starten und der Zugriff auf die lokale MySQL-DB klappt wieder:

mysql.default_socket = /private/tmp/mysql.sock
mysqli.default_socket = /private/tmp/mysql.sock

Von meinen virtuellen Hosts hatte ich ausreichend Backups, darum war die Wiederherstellung der httpd-vhosts.conf nicht so schwer. Wer lokale TLDs verwendet und die Zugriffe durch Einträge in der /private/etc/hosts ermöglicht, muss übrigens die hosts-Datei nicht noch einmal anfassen: Die Einträge darin werden von Snow Leopard übernommen.

Danke für die Hilfe

Sehr viel geholfen haben mir dabei die Einträge von tady im WordPress-Forum und der Artikel Snow Leopard: Umstiegshürden eines Web-Entwicklers in Wookkies Blog. Danke dafür.

Veröffentlicht unter Apache Webserver, Mac OS X, MySQL, PHP, Tipps & Tricks | Verschlagwortet mit , , , , , , | 10 Kommentare

Warum der Umstieg auf HTML 5 jetzt eine gute Idee ist

Gestern wurde der Firefox in der Version 3.5 veröffentlicht und zum Download freigegeben. Die neue Variante bietet interessante und sinnvolle Erweiterungen zur Unterstützung für benutzbarere Webseiten sowohl für Anbieter als auch für Benutzer. Letzte Woche schon publizierte Opera die Information zur zukünftigen Version 10 des beliebten Browsers, welche auch ein beachtenswertes Konzept enthält, welches den Aufenthalt im Internet bereichern könnte.Über HTML5 wurde in der letzten Zeit ebenfalls extrem viel geschrieben. So viel, dass sich das W3C als offizielle Organisation zur Aussage genötigt sah, dass HTML5 derzeit noch kein Standard sei. In der Tat, wenn man sich die derzeitigen Massnahmen der grossen Browserhersteller anschaut, so wird es noch dauern, bis HTML5 in notwendiger Breite unterstützt wird – und darauf kommt es letztlich an. Trotzdem entstehen allerortens Dialoge zum Thema HTML5, sogar erste professionelle Webseiten entstehen auf der durchaus vielversprechenden HTML5-Basis. Hacks und Workarounds, um Webseiten abwärtskompatibel zu gestalten, sind zu genüge zu finden.

Warum jetzt auf HTML5 umsteigen?

Um diesen Aufruf zu erklären, muss ich gute 6 Jahre zurückblicken. Im Oktober des Jahres 2003 hiess der Firefox noch Firebird und war in einer frühen Version erhältlich. Flächendeckend war der Internet Explorer verfügbar und die Kommunikation zwischen Standard-Organisation (W3C), Browserherstellern und Webdesignern möchte ich einmal als dünn bezeichnen. Nielsens Alertbox war die Resource zum Thema Usability. Dennoch war es die Zeit in der Menschen wie Dan Cederholm von simplebits.com und Jeffrey Zeldman mit seinem Daily Report und viele andere durch die Verwendung von Weblogs Dialoge über Möglichkeiten und Notwendigkeiten transparent machten. Der CSSZenGarden entstand. Auf einmal bewegten sich Webseiten und deren Umsetzung über das oft (und leider immer noch) fälschlicherweise alleinstehend verwendete Merkmal Design hinaus. Die Trennung von Semantik und Layout wurde state-of-the-art – und zwar in erster Linie durch die Verwendung und damit der Erkennung der Vorteile in privaten und persönlichen Webseiten, vor allem Weblogs. Auf einmal traf man auf mehr und mehr Webdesigner, die ihren Schwerpunkt auf die Darstellungsebene ergänzten mit weiteren wichtigen Gesichtspunkten, unter der Haube, für den Benutzer auf den ersten Blick nicht sichtbar, im Code.Diese Bewegung, die offene Kommunikation und die auf der Hand liegenden Vorteile, die an vielen Stellen dargestellt wurden, können durchaus als ein wichtiger Motivator angesehen werden, der vor allem auch Browserhersteller beeinflusste und insgesamt zu einer stabileren Grundlage von Webseiten und Technologien beitrug. Eine perfekte Lösung, die insbesondere bei grösseren Webseiten Usability, Barrierefreiheit, Corporate Design und Identity und Kundenanforderungen zusammenbringt, wurde (und wird) nie erreicht. Webdesign ist auch heute immer eine Annäherungswissenschaft, die – je nach Kompromissbereitschaft des Umsetzenden – mehr oder weniger Absicht und Umsetzung miteinander vereint. Welche “grosse” Webseite verwendet nicht auch heute sogenannte Hacks, Conditional Comments oder andere Helferlein, um die Darstellung in den Browsern aller Hersteller zu vereinheitlichen?

Der Browserhersteller in Zugzwang

Diese Entwicklung hatte eines erreicht: Die Hersteller mussten die Notwendigkeit einsehen, auf derartige Bestrebungen Rücksicht zu nehmen. Und obwohl die Implementierung der vom W3C empfohlenen Standards in den Browsern selbst heute noch zu wünschen übrig lässt, näherten sich Webdesigner (durch die massenhafte Verwendung der Webstandards) und Browserhersteller (durch Nachbesserung an den Render-Engines) immer weiter an. Man kann sagen, die Motivation, die ein Hersteller von sich aus zur korrekten Implementierung trieb, wurde durch die Webseiten-Ersteller und Designer ergänzt.Heute, 6 Jahre später, ist man bei der Erstellung von Webseiten nach wie vor auf ein exaktes Wissen um die unterschiedlichen Render-Modelle der Browser angewiesen. Dies verlangt vom Webdesigner eine grosse autodidaktische Bereitschaft und mag vielleicht der Grund sein, warum Schulungsprogramme und Lehrpläne in Universitäten zu diesem Thema noch so absolut unterschiedlich ausfallen. Denn es gibt auch immer noch keinen XHTML-Standard und auch noch keinen HTML4-Standard. Ein Standard wäre grundlegend eine absolut identische Implementierung in jedem Browser dieser Welt. Das werden wir sicherlich auf lange Zeit noch nicht sehen.

Die HTML5-Implementierung ist entweder nicht da oder nicht perfekt – na und?

Wer sich also derzeit dem Umstieg auf HTML5 noch verschliesst und auf eine stabilere und flächendeckendere Umsetzung durch die Browserhersteller wartet, lässt sich zurückfallen in die (Stein-)Zeit von Tabellenlayouts und wird – wahrscheinlich – ziemlich lange warten. HTML5 wird kommen und bietet im Entwurf schon jetzt ein Funktionsportfolio, das uns befähigt, noch bessere, benutzbarere und barriereärmere Webseiten und -Applikationen zu bauen, als wir es jemals konnten. Wir müssen uns nur bewusst machen, dass wir nur durch den Einsatz von HTML5 in kleinen, persönlichen, aber auch grösseren, professionellen Projekten die Antriebskraft für die Hersteller liefern, HTML5 (und auch mal CSS3) früher oder später ausnahmslos zu unterstützen.Machen wir uns nichts vor. Auch wenn dieser Zeitpunkt irgendwann kommen wird, wird es Unterschiede in den Browsern geben. Man wird mit abgefahrenen Hacks auch weiterhin für einheitliche Erscheinungsbilder von Web-Oberflächen sorgen müssen. Man wird weiterhin für bestimmte Einsatzzwecke auf proprietäre Lösungen wie Flash zurückgreifen. Man wird weiterhin aufmerksam Unmengen Entwicklerblogs lesen müssen, um auf Stand zu bleiben und man wird sich auch weiterhin aktiv an der Diskussion zur Erkennung und Behebung bzw. Vermeidung von Schwachstellen in den Umsetzungen in den Browsern beteiligen müssen.Aber es gibt keinen Grund, nicht mit dem Einsatz von HTML5 zu beginnen. Im Gegenteil, jedes Projekt, was neu jetzt noch auf Basis von HTML4 oder XHTML online geht, ist ein Grund weniger für die Browserhersteller, sich zu bewegen.

Veröffentlicht unter HTML & CSS, Web-Entwicklung | Verschlagwortet mit , , , | Hinterlasse einen Kommentar

Meinungen zum Deutschen Multimedia Award

Jens Grochtdreis hat den prämierten Publizierungen des Deutschen Multimedia Award unter die Haube geschaut. Das Ergebnis ist ein ausführlicher Bericht, der Aufschluss gibt über den Stand der Dinge hinsichtlich der Webstandards.Lesebefehl!

Veröffentlicht unter Unsortiert | Verschlagwortet mit , , | Hinterlasse einen Kommentar

Shift

Im Laufe der 90er Jahre war es praktisch unmöglich, nicht über den genialen Output New Yorker Hardcore-Combos zu stolpern. In den frühen 90ern begannen junge, kompromisslose Bands aus dem grossen Agnostic Front-Schatten herauszutreten und weniger militant, aber nicht weniger aussagegewaltig ihre Musik in die Platten- und CD-Spieler dieser Welt zu liefern. Neben den vermeintlich bekannten Bands wie Sick of it all, Snapcase, Earth Crisis, Ignite und Shelter, gab es auch eine kleine, 3-köpfige Kombo namens Shift, die ich sehr in mein Herz geschlossen hatte. Ähnlich wie die grossartigen Refused aus Schweden, war die Musik von Shift trotz naturgemäß extrem harter Passagen mit vielen progressiven Spielereien versehen, was das Ganze ausserordentlich interessant machte.

samantha.jpg

Eine weibliche Schlagzeugerin war auch etwas Besonderes: Samantha

Drei Alben aus Vinyl stehen bei mir im Schränkchen. Durch bratoharas kürzliche Vergangenheitsbewältigung animiert, bin ich allerdings auf Suche gegangen und habe zumindest zwei der Schätzchen über MySpace und auf iTunes für wenig Geld aufgestöbert. Wer nochmal ein bisschen coole Musik aus dem New York der 90er sein Eigen nennen möchte, greift einfach zu.

Veröffentlicht unter Musik, Unsortiert | Verschlagwortet mit , , , | 2 Kommentare

Saubere ZIP-Archive auf dem Mac erstellen

Ich bin ein Webdesigner und -entwickler. Heute bin ich auf der Konsole remote in einem Debian aktiv, morgen auf einer SUSE Enterprise, übermorgen auf meinem Windows-Arbeitsrechner und danach sicherlich auch mal wieder auf meinem Mac. Mein Werkzeug wähle ich nach Möglichkeiten und abhängig von den Anforderungen. Deshalb aber eine Bitte an die Agenturen:Ich weiss, dass ihr alle in Mac OS X unterwegs seid und finde das auch ganz toll, aber bitte, bitte nehmt euch die paar Sekunden und erstellt saubere ZIP -Archive, die auf beliebigen Systemen einfach auspackbar sind. Ich verzweifle besonders, wenn es sich um komplexere Daten (wie z. B. Webseiten-Dummies oder Prototypen) mit mehreren Verzeichnissen und Dateien handelt.Ja, ich weiss mir selbst zu helfen, aber es erweckt bei mir immer den Anschein einer leichten Inkompetenz, wenn ich ein ZIP-Archiv entpacke und mir die Mac OS X-spezifischen Datei-Leichen entgegenhüpfen. Bitte packt eure Zips mit ausreichender Sorgfalt.Wie das geht, weiss Google, es gibt spezielle (und freie) Software dafür, es existieren auch einfache PlugIns für euren Automator. Das gilt natürlich auch für Windows-Nutzer, bei denen ich die ominöse Thumbs.db oder noch besser, eine picasa.ini finde.Unsaubere ZIP-Archive kommen bei mir direkt nach “Ausdrucken von E-Mails und Webseiten”.Das musste ich mal loswerden. Danke.

Veröffentlicht unter Mac OS X, Tipps & Tricks | Verschlagwortet mit | 2 Kommentare

Ein Newsticker: Ein- und Ausblenden von News mit jQuery

Nicht zuletzt durch die Apple.com-Seite ist so ein kleines Ein- und Ausblendeskript für Newsmeldungen ziemlich fein. Mit den gängigen JavaScript-Frameworks lässt sich das auch schön animieren, so dass die einzelnen Newsmeldungen wirklich dezent erscheinen und auch wieder ausgeblendet werden.Das Resultat ist visuell unaufdringlich und per jQuery leicht gebaut. Für ein aktuelles Projekt musste ich sowas eben zusammenstellen.

Erstmal das HTML

Als Grundgerüst dient eine einfache, unsortierte Liste:

<ul id="rotate">
    <li>Meldung Nr. 1</li>
    <li>Meldung Nr. 2</li>
    <li>Meldung Nr. 3</li>
</ul>

Man kann hier durchaus semantischer auszeichnen, aber für ein Beispiel reicht es erstmal.

Das Minimal-JavaScript

Wir brauchen jetzt eine rotate()-Funktion, die folgende Arbeit übernehmen soll:

  1. Die Elemente für die Ein- und Ausblendung werden ermittelt
  2. Wird ein bereits aktives Element gefunden, wird das nächste Element aktiviert
  3. Kein aktives Element gefunden (=Ursprungszustand): Erstes Element ermitteln
  4. Alle Elemente (einzeln) ausblenden
  5. Ermitteltes, aktives Element einblenden
  6. Die Funktion ruft sich selbst wieder auf

Eigentlich mag ich diese selbstaufrufenden Dinger nicht, wer weiss, wie gross der Workload für den Browserspeicher ist. Aber bei einer solchen Sache läßt sich die Rekursivität nicht verhindern. Starten wir also mit dem Grundgerüst, wir nutzen jQuery zum Selektieren, Traversieren und für die Animation.Zunächst müssen wir das eventuell aktive Element ermitteln:

function rotate(){
    // aktives element ermitteln
    var active_elem = $('#rotate li:visible');
}

Wir prüfen, ob exakt ein aktives Element vorhanden ist und ob das aktive Element das letzte seiner Reihe ist. Ist dem so, ist unser aktives Element für das Ein- und Ausblenden automatisch das erste Element der Liste:

...
// mehr als ein aktives Element oder letztes Element
if (active_elem.length != 1 || $(active_elem).next('li').length == 0) {
    // das erste element ist das aktive
    active_elem = $('#rotate li:first');
} else {
    // das naechste element ist das aktive
    active_elem = $(active_elem).next('li');
}
...

Prima, wir haben das Element ermittelt, welches wir als nächstes einblenden wollen. Vorher blenden wir aber noch brav alles aus – unabhängig davon, ob es der erste oder n-te Durchlauf der Funktion ist:

...
// alle elemente ausblenden
$('#rotate li:visible').hide();
// aktives element einblenden
$(active_elem).fadeIn('slow');
...

Schliesslich darf die Funktion sich noch selbst aufrufen:

...
window.setTimeout('rotate()', 2000);
...

Häppchenweise Verbesserung

Jetzt kann man noch ein paar kleine Verbesserungen einführen. Z. B. möchte ich beim Aufruf des Tickers gerne die Millisekunden übergeben, die zwischen den Blende-Vorgängen vergehen sollen. Weitere Verbesserungen sind denkbar:

  • Das Skript läuft nur ab, wenn das Element auch im DOM vorhanden ist
  • Das Skript erlaubt nicht nur die Millisekunden, sondern auch das ID-Attribut des zu rotierenden Elementes als Parameter im Funktionsaufruf
  • Die Funktion blendet auch langsam aus (dazu muss man Aus- und Einblenden verketten)
  • Man will natürlich noch eine No JavaScript-Variante, so dass per CSS das Layout auch mit mehreren News funktioniert.
  • News müssen nicht zwangsweise bereits im Dokument vorhanden sein, News können natürlich auch per AJAX nachgeladen werden.

Es gibt sicherlich noch weitere, intelligente Verbesserungen, für den Beispielansatz hier belasse ich es aber dabei. Hier die Funktion, komplett mit dem entsprechenden Aufruf nach dem Laden des Document Object Models:

function rotate(mseconds){
    var active_elem = $('#rotate li:visible');
    if (active_elem.length != 1 ||
        $(active_elem).next('li').length == 0) {
        active_elem = $('#rotate li:first');
    } else {
        active_elem = $(active_elem).next('li');
    }
    $('#rotate li:visible').hide();
    $(active_elem).fadeIn('slow');
    window.setTimeout('rotate('+mseconds+')', mseconds);
}

$(function(){rotate(6000);});

Ich habe ausserdem eine kleine Demo ins Netz gestellt, wo man sich alle Komponenten (HTML, CSS und Skript) einmal in Aktion ansehen kann. Also, klicken und Firebug, bzw. Quelltextanzeige anwerfen.

Veröffentlicht unter JavaScript, jQuery, Tipps & Tricks, Web-Entwicklung | Verschlagwortet mit , , , | 2 Kommentare

Der Spreeblick und ein Protest gegen Internetsperren oder: Von Laien regiert

Mannomann, die deutsche Blogosphäre hat wohl Aktionstage. Aber dieser Anlass ist ernster und im Grunde auch wichtiger als die “Herz für Blogs”-Aktion von gestern. Da ich nur jede Menge technisches Zeug in meinen Feedreader habe, ist der Spreeblick schon lange nicht mehr in meiner Liste. Aber über Twitter bekommt man natürlich trotzdem alles ins Ohr gezwitschert.

Der Spreeblick streikt

Aus aktuellem Anlass “Internetsperren” streikt der Spreeblick und ruft zur Online-Demo auf. Fein gemacht mit Outing der Demonstranten per Google Maps. Mal schauen, ob Server und API-Key das aushalten :) Ich möchte jedem empfehlen, sich das anzusehen, den Text zu lesen und eventuell sein Bekenntnis abzugeben.

Veröffentlicht unter Unsortiert | Verschlagwortet mit , , | Hinterlasse einen Kommentar

Fazit: Ein Herz für Blogs

Kais Aktion “Ein Herz für Blogs” ist gerade 24 Stunden alt und man sieht die enormen Kreise, die sie zieht. Anhand der Trackback-Liste zum Beitrag und auch an anderen Stellen (z. B. hier beim Ecki) kann man absehen, wie stark die Blogosphäre auch in Deutschland ist. Auch mein ohnehin schon viel zu voller Feedreader hat noch das eine oder andere Futter bekommen und ich freue mich jetzt schon auf die nächsten Wochen und interessante, neue Artikel.Zwischenzeitlich konnte ich mich tatsächlich durch die vielen Links und Blogs treiben lassen und mir sind so einige Ideen gekommen, die ich hier an hasematzel.de noch umsetzen möchte. Ich habe versucht, mich selbst zu beobachten: Wie reagiere ich auf die verschiedenen Elemente? Was bringt mich dazu, länger in einem Blog zu verweilen? Wenn ich verweile, welche Navigationsart nutze ich, um weitere Beiträge zu erreichen? Wann breche ich einen Besuch ab? Warum?

Related articles

Wenn ich beginne, einen Text zu lesen, lese ich ihn auch zu Ende. Am Fuss des Artikels findet sich oft eine unsortierte Liste mit verwandten Artikeln. Geschärft durch die zahllosen “10 beautiful Photoshop tutorials you shouldn’t miss”-Beiträge, bleibt mein Blick oft daran kleben und ich lasse mich leicht verleiten, darauf zu klicken. Gerade vor kurzem hatte das Smashing Magazine einen Beitrag, in der ein kleiner WordPress-Hack ganz ohne Plugin zu finden war, um eine solche Funktion zu bauen (Absatz Nr. 5).

Pagination

7 bis 10 Posts pro Seite sind für mich angenehm. Wichtig ist, dass die Überschrift gut überschaubar trennt, so dass man auch beim etwas schnelleren Scrollen den Wechsel mitbekommt. Unverzichtbar ist dann das Pager-Plugin am Fuss. Meist klicke ich darauf, um noch einen Blick auf Seite 2 (oder sogar 3, 4 oder 5) zu erhaschen. Das WP-PageNavi-Plugin richtet so eine Funktion ein.

Tagclouds

Mein Artikel “Ein Volkssport namens Tagging” ist sicherlich der meistverlinkteste dieses Blogs (ich bin sehr oberflächlich im analysieren meines privaten Blogs). Ich habe mich mittlerweile sehr mit Tagging, Tagclouds und sogenannter Informationsfindung per Asoziation beschäftigt und noch Stoff für mindestens 2 oder 3 weitere Artikel. Ich komme nur nicht dazu ;) Tagclouds sind sehr aussagekräftig über ein Blog und seinen Autor. Dazu muss ich ein bisschen ausholen:Wenn ich als Jugendlicher zu Besuch bei Unbekannten oder Halb-Unbekannten war, gab es immer eine Sache, die ich in der fremden Wohnung zuerst tat: Ab zum Plattenregal (heute auch: ZehDe!) und Sammlung anschauen. Anhand der Alben habe ich mir schnell mein Bildchen vom Gastgeber/den Gastgebern gezeichnet. Dabei kam es natürlich darauf an, welche Musik im Schrank stand, aber auch, wie die Sammlung strukturiert und sortiert war. Ich wusste nicht warum, aber nach dem Blick ins Regal hatte ich ein grundsätzliches Gefühl von Sympathie oder ein ziemliches Desinteresse. Das fundierte natürlich auf dem unbewussten Vergleich mit meiner Person, um Gleichheiten oder Gegensätze zu finden. So war mir doch nach einer Klassenfete mein Mathelehrer, der uns zu sich eingeladen hatte, auf einmal sympathisch – nur weil er den selben Scheiss hörte wie ich und weil er gleichsam akribisch mit seinen Scheiben umging, eine (für mich) sinnhafte Sortierung besass und offensichtlich Wert auf den ganzen Kram legte.Bei Tagclouds wiederholt sich das Ganze bei mir: Erstmal sollte eine Tagcloud vorhanden sein (ich weiss, die fehlt derzeit auf hasematzel.de auch, bzw. ist sehr versteckt – wird schnellstens korrigiert). Bei unterschiedlichen Grössen der Schrift kann man schnell den Schwerpunkt des Blogs und damit auch die Schwerpunkte des Autors erkennen und mit den eigenen vergleichen. Die Tagcloud ist dann für mich persönlich neben related articles und Pagination die dritte Möglichkeit, tiefer in ein Blog einzusteigen.

Weitere Elemente

Bei allen weiteren Elementen bin ich konservativ: Die Suche benutze ich so gut wie nie – wenn ich ein neues Blog besuche, wüsste ich auch gar nicht, nach was ich suchen sollte. Auch die beliebtesten Beiträge lassen mich zunächst mal kalt und bei den meistkommentierten Beiträgen muss ich auch nicht unbedingt noch mitreden.Die netten, benutzerfreundlichen Direktlinks auf Twitter, Tumblr, Delicious, Digg und Co. werden von mir ebenfalls geflissentlich ignoriert. Dafür habe ich Bookmarklets oder andere Helferlein. Der allgemeine RSS-Feed (natürlich mit ganzen Beiträgen und ohne Kommentare) könnte dafür lieber öfter als seltener zu finden sein. Ich mag nicht erst in den Quelltext gehen müssen, um mir den Feedlink herauszufischen. Also: Oben auf der Seite, vielleicht nochmal in Prosa rechts in der Spalte und im Fuss auch noch mal. Auch gerne noch einmal am Fuss der einzelnen Artikel.

Fazit

So ein Surf&Explore-Tag hat wirklich seine guten Seiten, wenn man sich über sein Surfverhalten, aber auch über das eigene Blog noch einmal klarwerden möchte. Das Stöbern in allen möglichen Arten von Layouts, die sich nicht zu sehr voneinander unterscheiden, lässt mich noch einmal einen kritischen Blick auf mein eigenes Blogdings werfen. Hat mir viel gebracht. Danke an Kai für seine Aktion und all’ die Blogger, die fleissig mitgeschrieben haben.

Veröffentlicht unter Unsortiert | Verschlagwortet mit , , , | 3 Kommentare