Apple-Auswahl

[Antji]

Hallo miteinander,

bei Apple bin ich auf die folgende Seite gestoßen:
http://www.apple.com/de/itunes/

Kann mir jemand sagen, mit welcher Technik ich dieses "Produkte - ITunes und mehr - Zubehör"-Menu realisieren kann? Flash ist es nicht und sieht im Quellcode nach CSS aus - kennt zufällig jemand die Quelle dessen oder kennt ein ähnliches Menu, zu dem er mir den Link geben kann?

Vielen Dank, Gute Nacht!

[Tunnel85]

Nabend,
ist ne Mischung aus CSS und AJAX, siehe Zeile 27, da steht die Ajaxfunktion. Einen Link zu einem Tutorial dazu kann ich Dir leider nicht bieten.
Die jeweiligen includeten JS-Dateien stehen oberhalb Zeile 27.

Gruß
Tunnel85

PS:Links werden im Forum übrigens eingestellt, indem man den Button Links betätigt.(Siehe im Text-Editor unterhalb des Feldes Thema)

[Tim Tepaße]

Hallo,

Kann mir jemand sagen, mit welcher Technik ich dieses "Produkte - ITunes und mehr - Zubehör"-Menu realisieren kann?

Apple nutzt auf seiner Webseite das Javascript-Framework Prototype, das Arbeit in JS etwas leichter macht. Zu Prototype gibt es als Add-On das Animations-Framework Scriptaculous, mit dem man einfacher mit JS animieren kann. Die Animationen sind dabei Zuweisungen von CSS-Stilen über JS. Unter der Haube geschieht das mit Zuweisungen an das die CSS-Eigenschafts-Attribute des style-Attributes von HTML-DOM-Objekten. Aber das ist sehr abstrahiert und in Funktionen und Methoden eingepackt. Prototype pimpt seine HTML-Elemente darstellende Objekte mit einer Methode namens setStyle(). Scriptaculous verpackt mehrere solcher Stilanweisungen dann in Funktionen wie Effect.Move(). Du siehst, da wird vom mit vielen kleineren Befehlen, größeres aufgebaut. Wie immer eigentlich.

Apple hat nun aufbauend auf den erweiterten Komfort-Funktionen von Prototype und Scriptalicious sich wieder etwas eigenes gebaut das wiederverwendbare JS-Objekt AC.ProductBrowser. "AC" ist dabei nur ein Namensraum von Apple-Funktionen, damit diese niemanden anderes in die Quere kommen. Steht wahrscheinlich für "Apple Computer", auch wenn Apple schon länger nicht mehr so heisst. Wiederverwendbar ist praktisch, weil sie diesen Produktbrowser ja auch auf anderen Seiten verwenden. Das ganze ist also wieder eine Abstraktion auf der Abstraktion der Einzeln-Animationen von Scripalicious auf der Abstraktion des komfortableren JS-Zugangs von Prototype.

Letztendlich wird das ProductBrowser-Objekt mit der Prototype-Funktion Event.Observe() beim Laden des Dokumentes an mit nur noch ein paar Optionen initalisiert, so das dieses sich dann an die passenden HTML-Bereiche im Dokument dranhängt und die Elemente, die Slider und ähnliches symbolisieren mit den passenden JS-Funktionen ausstatten, die dann woanders anderes animieren.

Und wenn man Abstraktion auf Abstraktion auf Abstraktion packt, kann man so etwas durchaus einfach realisieren. Man sollte sich nur mit den unterliegenden Abstraktionen auskennen, damit man den Überblick nicht verliert. Die Luft ist dünn da oben. ;)

Tim

[Def]

Hi,

(...) Das ganze ist also wieder eine Abstraktion auf der Abstraktion der Einzeln-Animationen von Scripalicious auf der Abstraktion des komfortableren JS-Zugangs von Prototype. (...) Und wenn man Abstraktion auf Abstraktion auf Abstraktion packt, kann man so etwas durchaus einfach realisieren. (...)

leidet bei derartig vielen Abstraktionsebenen nicht eigentlich zwangsläufig die Effizienz (CPU-Belastung, RAM-Auslastung...)? Wenn also eine Abstraktionsebene die nächste aufruft, und die dann wieder eine andere, und dann nochmal und so weiter, bis dann endlich der JavaScript-Interpreter zum Zuge kommt und dem Prozessor den *eigentlich* auszuführenden Programmcode zukommen lässt...
Aber wahrscheinlich spielt das bei der heutigen Hardware eh keine Rolle mehr, oder? ;-)
Würde mich aber schon mal ein bisschen interessieren, ob man bei sehr alten Computern einen Unterschied bemerken würde zwischen direkter Programmierung mit den eigentlichen Browserobjekten oder mit mehreren Abstraktionsebenen. Wie alt müsste ein Computer ungefähr sein, dass man diese Dinge tatsächlich spürt? Oder sind die Browser geschickt genug programmiert, dass es praktisch wirklich keinen Unterschied ausmacht?

Viele Grüße
Def