Ajaxschmiede.de

Im März berichtete ich bereits über ein Microsoft-Programm namens SuperPreview, dass sich derzeit in der Entwicklung befindet und Web-Designern und -Entwicklern beim Erstellen von Homepages Darstellungsunterschiede der einzelnen Browser aufzeigen soll.

Am gestrigen Mittwoch stellte Adobe mit dem eigenen BrowserLab ein von der Funktionalität her ähnliches Tool zur Verfügung, das ebenso die Website-Gestaltung in bezug auf Browserprobleme vereinfachen soll.

Im Gegensatz zu Microsofts Anwendung wird Adobe BrowserLab als Online-Dienst angeboten. Vorerst wird dieser sogar kostenlos verfügbar sein. Adobe möchte sein Tool jedoch später zu einem kostenpflichtigen Dienst umstellen. Wann dies geschehen soll, ist noch offen.

Im BrowserLab ist es zum einen möglich eine Homepage auf zwei verschiedenen Browsern oder sogar Betriebssystem nebeneinander oder überlagend darzustellen, wodurch es recht einfach ist, Unterschiede der einzelnen Renderer auszumachen.

Bisher werden folgende Browser unterstützt (weitere folgen):

• Internet Explorer 6 (Windows XP)
• Internet Explorer 7 (Windows XP)
• Firefox 2 (Windows XP)
• Firefox 3 (Windows XP)
• Firefox 2 OS X
• Firefox 3 OS X
• Safari 3 OS X

Seit einiger Zeit bietet Finn Rudolph sein Javascript-Tool ImageFlow in Version 1.1 an.

Im Vergleich zur Version 1.0.1, über die wir im Oktober des vergangenen Jahres berichtet hatten, ergeben sich nachfolgende Änderungen und Neuerungen:

• zusätzliche onClick-Option öffnet Bilder in einem neuem Fenster
• Überarbeitung der Evaluierung der individuellen Einstellungen
• Pfeiltasten werden nun in allen Browsern unterstützt, jedoch nur in einer Imageflow-Instanz
• zusätzliche Option scrollbarP (Breite des Scrollbalken in Prozent)
• Fehlerbehebung in der Option imageFocusM in Firefox und Safari
• unload-Fehler im Internet Explorer gefixt
• Verbessertes Bild-Resampling im IE7
• zusätzliche Option aspectRatio zum Anpassen des Verhältnisses von Höhe und Breite des ImageFlow-Containers
• zusätzliche Option zum Festlegen der Bildausmaße: imagesHeight, imagesM, percentOther und percentLandscape

Viel Spaß beim Einbauen. Wir helfen euch auch gern dabei!

Wer kennt sie nicht, die Eigenheiten der Browser. Welches Web-Entwickler ist nicht genervt von unterschiedlichen CSS- und HTML-Implementierungen der Browser, wodurch man gezwungen ist, das eigene Projekt auf unzähligen (virtuellen und realen) System mit den unterschiedlichsten Browsern und deren Versionen zu testen.

Microsoft präsentierte nun auf der in Las Vegas stattfindenden Messe MIX mit SuperPreview ein neuartiges Programm zur Web-Entwicklung aus dem MS Expression Web-Bereich.

SuperPreview erlaubt es, eine Homepage gleichzeitig in verschiedenen Browsern und deren Modi anzeigen zu lassen und zu vergleichen. In der für jedermann verfügbaren Vorabversion scheint jedoch nur (zumindest auf meinem Windows7-System) der IE8 im Standard- und IE7-Kompatibilitätsmodus zum Testen zur Verfügung zu stehen.

Zur Darstellung kann man die Renderergebnisse nebeneinander oder – was ich sehr nützlich finde – auch übereinander mittels overlay anzeigen lassen, wodurch eine pixelgenaue Analyse der gerenderen Website möglich ist, um Unterschiede festzustellen. Dies kann man im zweiten, angehängten Bild am Beispiel von Ajaxschmiede deutlich erkennen.

Ein echter Nutzen entsteht aber erst, wenn man auch – wie auf dem ersten Bild, das eine weiterentwickelte, interne Version zeigt, erkennbar  – auch alternative Render-Engines wie die von Opera, Firefox und Safari auswählen kann.

Der Erscheinungstermin und ein Preis (sofern es kostenpflichtig ist) wurden nicht genannt.

Wer sich mit Suchmaschinenoptimierung (SEO) und der (Lade-)Geschwindigkeit der eigenen Website beschäftigt, sollte auch mal einen Blick auf das Verhältnis von Inhalt und Markup, also der Struktur, anschauen.

Stoyan Stefanov interessierte sich dafür und schrieb ein kleine Javascript-Funktion die genau dieses Verhältnis berechnet.

Nach dem Einbau in eine Homepage und dem Setzen des Funktionsaufrufes, erhält man neben den Werten Gesamt- und Inhaltsgröße (jeweils in Byte) zwei Zahlen zurück, die das Verhältnis vom gesamten Code zum Content ausdrücken.

Der erste Wert ist ziemlich hart, der zweite ist etwas „loyaler“, imdem dort alt-, title- und value-Attribute als Inhalt gezählt werden. Somit fällt dieser „fairer“ aus.

Wer Lust hat, kann es ja mal ausprobieren und uns die Werte eurer Seite als Kommentar hinterlassen. Ich werde Ajaxschmiede übers Wochenende auch mal testen. Bin gespannt, was da für ein Ergebnis rauskommt.

Seit wenigen Tagen ist die Bildergalerie Imageflow nun in Version 1.0.1 erhältlich.

Bereits in der Vergangenheit hatten wir mehrmals über dieses Script berichtet.

Lange war es still gewesen, was die Weiterentwicklung von Imageflow betrifft. Doch Programmierer Finn Rudolph war nicht untätig. Er hat, im Gegensatz zu den vorherigen Versionen, den gesamten Quellcode objektorientiert umgeschrieben.

Desweiteren bietet Version 1.0(.1) noch folgenden Mehrwert:

• Behebung mehrerer Fehler (Selection-Bug, Back-Button-Bug und 2 IE-spezifische Fehler)
• zeitigeres Anzeigen der Galerie durch Code-Ausführung direkt nach dem Laden des HTML-Codes
• auf 8kb komprimierbarer und leichter lesbarer Quellcode
• vereinfachte Installation und Integration
• echter Ladebalken
• alle Optionen sind nun optional
• Transparenz-Unterstützung
• Anpassbarkeit der Zoomgröße beim Fokussieren eines Bilder
• Einblendeffekt nach dem Initialisieren
• Opera + IE: Steuerung über Pfeiltasten
• Möglichkeiten zum Vorladen von Grafiken

Durch den Umstieg zum objektorientierten Programmierstil können nun auch mehrere Instanzen von imageflow auf einer Seite verwendet werden.

Der Einbau erfolgt nun wie folgt:

<!-- Einbau -->
<link rel="stylesheet" href="imageflow.css" type="text/css" />
<script src="imageflow.js" type="text/javascript"></script>
...
<!-- Bilderdefinition-->
<div id="unique_name" class="imageflow">
<img src="dir/image_1.jpg" longdesc="URL_1" width="w_1" height="h_1" alt="Text_1" />
<img src="dir/image_2.jpg" longdesc="URL_2" width="w_2" height="h_2" alt="Text_2" />
<img src="dir/image_3.jpg" longdesc="URL_3" width="w_3" height="h_3" alt="Text_3" />
</div>

Die Initialisierung geschieht nun durch den folgenden, vereinfachten Javascript-Code:

domReady(function()
{
var instanceOne = new ImageFlow();
instanceOne.init({ ImageFlowID: 'myImageFlow' });
});

Wer detailierte Informationen sucht, kann einen Blick in die leicht verständliche, englischsprache Dokumentation werfen.

Nach unzähligen Betas wurde nun die Version 1.2 des bekannten Javascript-Debuggers Firebug veröffentlicht.

Die größte Neuerung besteht in der Unterstützung des Firefox 3, der zum Leidwesen unzähliger Entwickler bisher außen vor blieb.

Desweiteren geht das als Firefox-Addon erhältliche Tool nun deutlich flotter zu Werke. Besonders die Kernanwendung, der Javascript Debugger, wurde beschleunigt.

Das gesamte Erscheinungsbild von Firebug erfuhr ein grundlegendes Update, das etliche Fehler ausmerzt, ebenfalls erheblich fixer arbeitet und die Bedienung komfortabler gestaltet.

Vor allem die Konsole erhielt zahlreiche Verbesserungen, in Bezug auf mögliche Sicherheitsprobleme, die durch das Verwenden von Firebug auftreten könnten.

Damit steht die Entwicklung des Tools aber noch längst nicht still. Kaum sind die Arbeiten an der Bugfix-Version 1.2.1 angelaufen, wird auch an den Eckpfeilern des nächsten Hauptreleases 1.3 gefeilt.

John Resig, Mitarbeiter der Mozilla Foundation für JavaScript-Angelegenheiten und Kopf hinter der jQuery-Bibliothek, entwickelt derzeit mit Dromaeo an einem einheitlichen JavaScript-Benchmark für alle üblichen Browser.

Der Dromaeo-Test bedient sich dabei beim JavaScript-Benchmark SunSpider vom WebKit-Project, setzt diese Tests aber anders um. So werden zum Beispiel die Einzeltests nicht in iFrames umgesetzt, da durch Versuche bewiesen werden konnte, dass andere Browserkomponenten die Ergebnisse bei iFrames stark beeinflussen können.

Bisher läuft der Test auf folgenden Browsern:

• ab Firefox 2
• ab Safari 3
• ab Opera 9
• ab Internet Explorer 6

Das an dem Benchmarktest noch gearbeitet werden muss, zeigt sich zum Beispiel darin, dass der „DNA Sequence Alignment“-Einzeltest im IE6 und IE7 extrem langsam läuft (etwa 15-20 Minuten).

Wer mehr über Dromaeo erfahren will, dem empfehle ich einen Blick ins Mozilla Wiki.

Zwei Benchmarkvergleiche will ich unseren Lesern nicht vorenthalten: der erste zeigt einen Vergleich zwischen IE6, IE7 und IE8; der zweite zwischen Firefox 3 (beta5pre), Safari 3 (525.13) und Opera 9.50.

Kürzlich berichteten wir über den Einsatz von Lightview als Bildergalerie. Der Autor Nick Stakenburg hat jetzt die Version 2 seiner Script-Bibliothek veröffentlicht. Bisher konnten mit Lightview Bilder auf elegante Weise über einer Webseite eingeblendet werden, wie aus Lightbox bekannt. Lightview 2 geht einen Schritt weiter und ermöglicht diesen Effekt ebenso mit Quicktime Videos (.mov), Flash Videos (.swf), Ajax (in Form von ajax-gestützter Verarbeitung innerhalb von Lightview), Iframe und Inline-Content. Diese Funktionalität ist grundsätzlich nichts Neues und bereits aus anderen Javascript-Bibliotheken, wie z.B. ThickBox, bekannt.

Der Screenshot zeigt das Abspielen eines Quicktime Videos mit Lightview 2:

Weitere Informationen, Demonstrationen, die Dokumentation und den Download findet man auf der Lightview-Projektseite.

Jeder Webentwickler muss hin und wieder Eingabeformulare erstellen, deren Eingabe auswerten und weiterverarbeiten. Derartige Eingaben sollten vor jeder Weiterverarbeitung jedoch immer validiert werden. Für den Nutzer ist es hilfreich, schon wärend der Eingabe etwaige ungültig ausgefüllte Felder anzuzeigen.

Die kleine Open Source Javascript Bibliothek „LiveValidation“ bietet solch eine Validierung in Echtzeit. Die Syntax ist leicht verständlich, Namenskonventionen und Parameter der Validierungen sind ähnlich zu denen im Ruby on Rails Framework.

Während eine Eingabe wird der Nutzer sofort über das richtige oder falsche Ausfüllen des Formularfeldes informiert. Das hilft von vorn herein Eingabefehler zu vermeiden.

Es können verschiedene Validierungen definiert werden. Hier einige wichtige:

• Format – Ein Regulärer Ausdruck beschreibt die gültigen Werte.
• Numericality – Dieser Typ befasst sich mit sämtlichen nummerischen Eingaben, es lassen sich reine Integer-Eingaben, Eingaben von Zahlen in unterschiedlichen Formaten, Zahlen mit einem Mindest- oder Maximalwert, sowie einen Zahlenbereich deklarieren.
• Length – Ist ebenfalls ein umfangreicher Validierungs-Typ. Es lässt sich eine bestimmte Anzahl von Zeichen definieren, eine Mindestlänge, eine Maximallänge oder ein Bereich.
• Inclusion – Validiert nach einer Lister gültiger Werte, entweder nach einem axakten Wert oder einem in einer Zeichenkette enthaltenen Wert.
• Confirmation – Vergleicht zwei Formularfeld-Eingaben, ob sie identisch sind. Das ist besonders für eine wiederholte Eingabe eines Passwortes nützlich.
• Email – Prüft die eingegebene Email-Adresse auf syntaktische Korrektheit.

Weitere Möglichkeiten sind der LiveValidation-Beispielseite zu entnehmen. Auf jeden Fall deckt die Bibliothek die gängigsten Validierungsarten ab.

Trotz clientseitiger Javascript-Validierung sollte auf eine serverseitige Validierung (bspw. durch PHP) auf keinen Fall verzichtet werden. Die clientseitige Validierung ist als nützlicher Zusatz anzusehen, denn sie lässt sich durch Deaktivieren von Javascript im Webbrowser umgehen.

Vor wenigen Tagen veröffentliche Nick Stakenburg Version 1.1.0 seines Lightview-Tools, mit dessen Hilfe man eine sehenswerte Fotogalerie recht schnell auf die eigene Homepage zaubern kann.

Zu den Stärken dieses Javascript-Tools zählt sicherlich die hohe Browserunterstützung (Internet Explorer 6+, Firefox 1.5+, Safari 2+ and Opera). Es ist dafür ausgelegt, in allen Browsern ein sauberes Bild – ohne Flackern – zu erzeugen und passt sich automatisch der Bildschirmauflösung an.

Desweiteren lässt sich Lightview ohne große Vorkenntnisse in ein bestehendes Projekt einzubinden. Es können dabei sowohl einzelne Bilder als auch Galeriegruppen angesprochen werden, wobei es bei letzteren auch die Möglichkeit gibt, die Bilder in einer Diashow wiederzugeben.

Lightview setzt die kürzlich veröffentlichte Prototype-Version 1.6.0.2 voraus. Falls man Effekte nutzen möchte, benötigt man zusätzlich Scriptaculous 1.8.1.

Wie bei ähnlichen Frameworks werden im HTML-Kopf die erforderlichen Dateien geladen.

<link rel="stylesheet" type="text/css" href="css/lightview.css" />
<script type='text/javascript' src='js/prototype.js'></script>
<script type='text/javascript' src='js/scriptaculous.js?load=effects'></script>
<script type='text/javascript' src='js/lightview.js'></script>

Bis auf die scriptaculous.js, die benötigt wird, wenn man besondere Effekte einbauen will, sind alle anderen Dateien Pflicht.

Der Anwenden von Lightview auf ein einzelnes Bild geschieht über das class-Attribut.

<a href='image.jpg' class='lightview'>image</a>

Es ist ebenso möglich Bilder zu Gruppen zusammenzufassen. Dafür verwendet man zusätzlich das rel-Attribut mit dem Wert gallery[group], wobei group frei gewählt werden kann.

<a href='image.jpg' class='lightview' rel='gallery&#91;group&#93;'>image</a>
<a href='image.jpg' class='lightview' rel='gallery&#91;group&#93;'>image</a>

Desweiteren bietet Lightview die Möglichkeit Bilder mit Titeln und Untertiteln zu versehen. In beiden Fällen wird das title-Attribut benutzt. Als Trennzeichen zwischen Titel und Untertitel dienen zwei Doppelpunkte.

<a href='image.jpg' title='Eine Bildüberschrift' class='lightview'>image</a>
<a href='image.jpg' title='Eine Bildüberschrift :: und sogar ein Untertitel' class='lightview'>image</a>

Zum Veranschaulichen habe ich folgende Demonstrations-Seite erstellt.