Martin Bommeli, 08.04.08

Hinter den Kulissen: nadine-imboden.ch (Flashsite mit SEO, Deeplinking und Statistik)

Die Flash-Website nadine-imboden.ch kommt sehr schlicht daher. Für mich persönlich sind jedoch die Features im Hintergrund die "wahren" Highlights.

Scroll Wheel für Mac's
Wenn man mit dem Mac auf einer Flashsite den Inhalt mit dem Scrollwheel oder dem TouchPad scrollen will, klappt dies leider nicht. Es gibt in AS2 zwar eine "onMouseWheel" Funktion die man mittels eines Listeneners adden kann, aber dieses funktioniert nur auf Windows.

mouseListener = new Object();
mouseListener.onMouseWheel = function (delta){
    MouseWheelInt = scrollbar._height / 100;
    scrollbut._y -=  MouseWheelInt * delta;
}
Mouse.addListener(mouseListener);

Pixelbreaker stellt genau für dieses Problem ein JavaScript und eine ActionScript Klasse zur Verfügung (SWFMacMouseWheel). Der Code dazu sieht dann in etwa so aus:
import com.pixelbreaker.ui.MouseWheel;

MouseWheel.addListener(this);

function onMouseWheel(delta:Number):Void {
	MouseWheelInt = scrollbar._height / 100;
	scrollbut._y -=  MouseWheelInt * delta;
};

Deeplinking
Normaler weise kann man nicht auf eine Unterseite einer Flashsite verlinken. Das heisst man kann z.B keine E-Mails versenden mit einem Link der direkt zur Kontaktseite führt. Mit dem "SWFAddress" von asual ist dies jedoch möglich. Hier ein Beispiel einer solchen URL:
http://www.nadine-imboden.ch/#/contact/

Statistik
Das schöne am SWFAddress ist, dass es das Urchin JavaScript von Google Analytics unterstützt. So gibt es eine Normale Statistik der Flashsite wie bei einer normalen XHTML/CSS Seite.

SEO (Search engine optimization)
Damit diese Flashsite auch bei Google auftaucht, haben wir noch extra "Suchmaschinen Optimierungen" vorgenommen. Wenn ein Bot, wie z.B der GoogleBot, auf die Seite kommt bekommt dieser einen Alternativen Inhalt zur Flashsite. Dieser beinhaltet unter anderem die Links zu den Unterseiten. Also nicht zu den Links mit dem Hash (z.B: /#/contact/) sondern zu einem "vollen Pfad" (z.B: /contact/). Dort wiederum wird abgefragen ob der User-Agent ein Bot oder ein Browser ist. Wenn es ein Bot ist bekommt er natürlich den Inhalt der jeweiligen Unterseite. Ansonsten wird der User weitergeleitet auf den "Hash-Link (z.B: /#/contact/).

- zur Website von Nadine Imboden
- download SWFMacMouseWheel
- download SWFAddress 2.0
- download SWFObject 2.0
- zu Google Analytics

blog comments powered by Disqus