norman KLEIN max CARLSON mit glenn MacEWEN LASZLO IM EINSATZ »Jeder Laszlo-Entwickler sollte ein Exemplar dieses Buches haben«ryan Stewart, Adobe

Transkript

1 norman KLEIN max CARLSON mit glenn MacEWEN LASZLO IM EINSATZ»Jeder Laszlo-Entwickler sollte ein Exemplar dieses Buches haben«ryan Stewart, Adobe

2 Inhalt Vorwort...XV Danksagungen...XVII Über dieses Buch...XIX Teil 1: Die Grundlagen Der Turbolader für die Webtechnologie Laszlo für das Design und Erstellen von RIAs Benutzerzentriertes Design Die Entdeckung von Laszlo: Die Geschichte eines Entwicklers Ein kurzer Rückblick OpenLaszlo: Open Source und für alle verfügbar Ein erster Vorgeschmack auf Laszlo LZX Animation von Hello Laszlo Ausführung auf Flash oder DHTML Deployment einer Laszlo-Applikation Server-Modus Stand-alone-Modus Zusammenfassung Die deklarative Welt von LZX Unterstützung durch die Architektur Die dreischichtige Struktur von Laszlo Laszlo als Interface für einen Webserver Kommunikation zwischen Publisher und Subscriber Die Kombination von Vererbungsmodellen LZX-Klassen Die Klasse LzNode Die Klasse LzView Definieren von Klassen in LZX VII

3 Inhalt 2.3 Die Grundlagen der Tags Hierarchische Adressierung Propagation der Eltern-Kind-Attribute Flache Tag-Hierarchien Integriertes Event-Handling Event-Handling mit Constraints Animation der deklarativen Tags Tags an XML-Daten binden Zusammenfassung Zentrale Regeln der LZX-Sprache Die Grundlagen von LZX Debugging Code-Kommentare Wohlgeformte XML-Dateien...55 Erstellung von Objekthierarchien Die deklarative Benennung von Objekten Die dynamische Erstellung von Knoten mit JavaScript Das Unterknoten-Array Werte in Attributen speichern Attributtypen Typausdrücke in JavaScript Methoden und Event-Handler Schreiben von Methoden Das Schreiben von Event-Handler-Methoden Deklarative Constraints Die Grundlagen der Constraints Der Modifikator once JavaScript und das script-tag Zusammenfassung Die große Rundreise durch Views und Benutzerklassen Die Features von Views Steuerung der Sichtbarkeit von Views Steuerung der Sichtbarkeit durch Animation Animation mit Rotation Multimedia-Ressourcen Der Umgang mit Font-Spezifikationen Steuerung des Cursors Interaktion mit einer View Empfangen von Benutzer-Events Lokalisierung von Views Lokalisierung von absoluter und relativer Bildschirmposition Lokalisierung einer View Instanziierung von LFC-basierten Objekten Benutzerdefinierte Klassen VIII

4 Inhalt Überschreiben einer Methode in einer Subklasse Die Verwendung des classroot-parameters mit Klassen Instanziierung von LZX-basierten Objekten Zusammenfassung Das Design von Laszlo Market Prototyping der Anwendung Erstellung von Wireframes Übergänge mit Storyboards erstellen Coding des Prototyps Das Fenster als Prototyping-Tool Organisation mit Libraries Konfiguration des Checkout-Bildschirms Einen virtuellen Bildschirm einschieben Stapeln der Seiten Zentrale Steuerung der Bildschirmdarstellung Design der Bildschirmübergänge Auslösen von Bildschirmübergängen Refakturierung des Code Ersetzen des Animators Eine allgemein gültige Architektur Tests mit LzUnit Unit-Tests mit LzUnit Test von Laszlo Market Tests über einen URL-Abfragestring Zusammensetzung der Einzelteile Zusammenfassung Teil 2: Prototyping von Laszlo Market Das Layout für Laszlo Market Allgemeine Layout-Probleme Grundlegende Layouts Dehnbare Layouts Dynamische Layoutmodifikatoren Aus Layouts ausbrechen Erstellen eigener Layouts Erweiterung der LzLayout-Klasse Layout einer Flugzeugformation erstellen Formulare anlegen Eingabefelder mit Bezeichnungen Näheres über formlayout Identifikation des Klassentyps mit instanceof Zusammenfassung IX

5 Inhalt 7 Die Laszlo-Komponenten Grundlegende Komponentenklassen Steuerung des Fokus Die Arbeit mit Datenkomponenten Erstellen eines mehrseitigen Fensters Coding der Seite mit den Lieferinformationen Die Steuerung der Platzierung Erstellen des Bereichs für die Lieferadresse Validierung der Eingabefelder Die Arbeit mit Validatoren Erstellen eines neuen Validators Erstellen des Bereichs für die Liefermethode Implementierung der Seite für die Rechnungsinformationen Coding des Wireframes für die Rechnungsmethode Koordinierung mehrerer Seiten Formularvalidierung Zusammenfassung Dynamisches Verhalten von Events und Delegates Die Funktionsweise von Event-Handlern und Constraints Die Funktionsweise von Event-Handling und Constraints Die Arbeit mit Events Die Arbeit mit Delegates Hinzufügen von dynamischem Verhalten Die delegate-zentrierte Perspektive Die event-zentrierte Perspektive Delegates mit Layouts verwenden Dynamisches Einbauen von Attributen Komplexes Verhalten mit Attribut-Settern steuern Zusammenfassung Die Arbeit mit den Laszlo-Diensten Überblick über die Dienste Unterschiedliche Nutzung von Diensten Aufruf einer Dienstmethode Dienst-Events über Registrierungsmethoden empfangen Dienst-Events über deklarative Referenzen empfangen Erstellen einer Stoppuhr Vorstellung der Dienste über ein Anmeldefenster Steuerung des Maus-Cursors Fenster in Sequenzen mit LzModeManager anlegen Tastatureingaben mit LzKeys annehmen Erstellen eines Drag & Drop-Netzwerks Erkennen von lokalen und globalen Maus-Events Kontinuierliches Tracking mit LzIdle generieren Fortgeschrittenes Drag & Drop mit LzTrack Zusammenfassung X

6 Inhalt Teil 3: Die Datensätze von Laszlo Arbeiten mit XML-Datensätzen Einführung in die XML-basierten Datensätze Die XML-Elemente Über XPath Datenelemente auswählen Deklarative Tags an XML-Elemente binden Kontext für Datenpfad etablieren Die Constraint-Notation $path{} Aktualisierung eines Datensatzes Der Umgang mit ontext-events Aktualisieren mit der Methode applydata Die Arbeit mit lokalen Datensätzen Mehrere passende Datenelemente Datensätze sortieren Einfache Sortierung Eigene Sortierung Datensatz-Prototypen für Laszlo Market Der Datensatz Bilder mit korrektem Seitenverhältnis verkleinern Prototyping mit Rastern Die Arbeit mit Rastern Verarbeitung der Auswahl eines Benutzers Zusammenfassung Die Arbeit mit dynamischen Datensatzbindungen Verknüpfen von Datenknoten und Datenzeigern Die LzDataNode-Klassen Die abstrakte Superklasse LzDataNode Datensätze mit LzDataElements erstellen Zentrale Methoden von LzDataElement Die Arbeit mit den Textknoten von LzDataText Erstellen von XML-Strukturen mit Powertools Navigieren mit LzDatapointer und LzDatapath Navigieren mit Datenzeiger Zugriff auf Daten- und Textknoten Navigation eines Datensatzes Erstellen und Modifizieren von Datensätzen Arbeiten mit dem Tag datapath Konvertieren zwischen Datenzeigern und Datenknoten Updates mit rerunxpath überprüfen Fortgeschrittene Themen beim Replikationsmanager Filtern mit onnodes Kloninstanziierung mit onclones prüfen Das Entwurfsmuster Master-Detail Implementierung von Master-Detail in Laszlo Market XI

7 Inhalt Wann ein statisches Layout verwendet werden sollte Zusammenfassung Das Scoreboard für den Warenkorb Wie ein Scoreboard funktioniert Neuimplementierung des Produktlistenfensters Erstellen der Titelkopfzeile Tabellenzeilen füllen Sortieren von Tabellenspalten Grundlagen der Scrollleiste Erstellen eines Selection-Managers Warenkorb und Scoreboard Das Fenster für den Warenkorb Implementierung von Scoreboard-Techniken Artikel in Warenkorb einfügen Erstellen des Warenkorbs Manuelle Aktualisierung des Mengenfeldes Unterstützung von Drag & Drop Die rechte Maustaste Zusammenfassung Teil 4: Integration von DHTML und Flash Das Nutzungserlebnis erweitern Animation von Übergängen Der Standard-Startbildschirm von Laszlo Ein eigener Startbildschirm Erstellen von veränderbaren Buttons Das Problem mit einfachen Buttons Erstellen von veränderbaren Buttons Erstellen von Buttons mit mehreren Zuständen Erstellen von anpassbaren, neunteiligen Panes Modale Fenster und Button-Interaktivität Grundlagen der Animation Visuelle Illusionen überzeugend vermitteln Die Verwendung von animator und animatorgroup Komplexe animierte Effekte Einen gestauchten Ball simulieren Interaktive Animation Verzögerung als Ausdrucksmittel Animation des Papierkorbs bei Laszlo Market Zusammenfassung XII

8 Inhalt 14 Branding einer Anwendung Das spezielle Aussehen für die Anwendung Vektor- und Bitmapgrafiken Unterschiede bei den Fonts Eine Schrift auswählen Die Wahl zwischen DHTML- und Flash-Implementierungen Branding mit eigenen Komponenten Die Komponente tabelement anpassen Eigene Scrollleiste erstellen Zusammenfassung Integration von DHTML und Flash Vorteile des hybriden Ansatzes Die Arbeit mit einem HTML-Wrapper Laszlo-Anwendungen in HTML einbetten Von Laszlo erstellte HTML-Dateien untersuchen Laszlo-Anwendungen in HTML einbetten Standard-Webseiten erstellen DHTML- und Flash-Anwendungen zusammenführen Die Output-Platzierung im HTML steuern Suchmaschinenfreundliche Anwendungen Browser-JavaScript durch Laszlo aufrufen Flash aus Laszlo heraus aufrufen Die System-Zwischenablage mit Flash setzen Zugriff auf die ActionScript-Objekte von Flash HTML in Laszlo einbetten Die Arbeit mit Video Streaming Media Die Arbeit mit dem Red5-Server Laszlo als Interface für einen Red5-Server Video in Laszlo Market einbauen Zusammenfassung Teil 5: Serverprobleme und Optimierung Datenquellen im Netzwerk Schnittstelle zum Webserver Datensätze und HTTP Gepufferte HTTP-Datensätze Pooling von Pufferdatensätzen Einen Datendienst erstellen Zugriff auf Session-Daten Einen Warenkorb mit Session-Bindung erstellen Artikel aus Warenkorb löschen Pflege von Server-Domänen Zusammenfassung XIII

9 Inhalt 17 Verwaltung großer Datensätze Die Arbeit mit alternativen Filtern Die Hintertür von setnodes setnodes-sortierung mit mehreren Schlüsseln Datensätze zusammenführen und mappen Optimierung der Datendarstellung Lazy Replication Erweiterbare Auflistungen Erweiterbare Darstellungen im Laszlo Market Pooling Seitenweise Datensätze für lange Auflistungen Paged Datasets in Laszlo Market einfügen Zusammenfassung Systemoptimierung mit Laszlo Optionale Elemente dynamisch laden Import von dynamischen Libraries Optionale Elemente mit dynamischen Libraries laden Optimierung kritischer Elemente Instanziierung von Objekten Initialisierung mit initstage manipulieren Steuerung der Initialisierung über initstage Reduzieren der Startup-Zeit von Laszlo Market Umverteilung der Initialisierung Optionale Elemente dynamisch laden Performance-Utilities Zeitmessung mit gettime Erstellen eines einfachen Timing-Frameworks Die Performance-Utilities von Laszlo Die Developer-Konsole nutzen Zusammenfassung Register XIV

10 1 1 Der Turbolader für die Webtechnologie Die Themen dieses Kapitels Die Ziele von Web 2.0 mit RIAs erreichen Die Wahl von Laszlo Die Animation einer Hello World -Anwendung Ausführung auf Flash oder DHTML Die meisten Menschen machen den Fehler zu glauben, dass es beim Design um das Aussehen geht. Das ist nicht unsere Auffassung von Design. Es geht nicht ums Look and Feel. Design ist, wie etwas funktioniert. Steve Jobs, Apple Computer Im vergangenen Jahrzehnt haben sich die HTML-basierten Webanwendungen unaufhaltsam in unseren Alltag gedrängt: Sie können einen Flug buchen, sich einen Anfahrtsweg zeigen lassen oder Waren kaufen alles im Internet. Obwohl diese erste Welle der Anwendungen unglaublich erfolgreich gewesen ist, wird sich die bereits anlaufende nächste Welle der sogenannten Rich Internet Applications (RIAs) als noch intensiver erweisen. Während HTML-basierte Anwendungen aufgrund der statischen Natur einer Seite eingeschränkt sind, sind die RIAs so geschmeidig, dass sie mit Desktop-Anwendung konkurrieren können. Sie fragen sich vielleicht, was eine RIA von einer HTML-basierten Anwendung unterscheidet. Bei HTML-Seiten gibt es eine Master-Slave-Beziehung, bei der die Verarbeitung auf einem Server geschieht, und der Browser des Clients nur die statischen Inhalte darstellt. Somit müssen die Anwendungszustände auf dem Server gespeichert werden. Also braucht jeder Schritt eine Hin- und Rücktour zum Server, damit der Zustand der Anwendung fortgeschrieben werden kann. Diese synchronisierte Kommunikation bewahrt den Gleichschritt zwischen Server und Browser. 3

11 1 Der Turbolader für die Webtechnologie RIAs erweitern dieses Design, indem sie im Browser einen Datencache einrichten, mit denen er seinen eigenen Zustand verwalten und als unabhängiger Client operieren kann. Somit bekommt der Anwender über die RIA ein vielfältigeres und besser reagierendes Interface. Diese umfassendere Funktionalität schließt alle Client-Dienste wie hoch entwickelte Fensterkomponenten, Drag & Drop-Services, vektorbasierte Grafiken, Audio und Video mit ein. Weil es keinen Kommunikationsbedarf mit einem Server gibt, kann eine RIA diese Dienste auf eine besser reagierende Weise präsentieren. Insgesamt führt das zu einer Performance, die es mit Desktop-Applikationen aufnehmen kann. Diese RIAs sind so vielversprechend, dass sie nicht einfach die Fähigkeiten des Webs erweitern, sondern es viel näher an die ursprüngliche Vision von Tim Berners-Lee bringen. Die Fachleute der Branche haben diese neue Bewegung als Web 2.0 bezeichnet. Obwohl viele der Zielsetzungen von Web 2.0 immer noch intensiv diskutiert werden, gibt es eine allgemeine Übereinstimmung darüber, dass folgende Ziele erreicht werden sollen: Webbasierte Anwendungen müssen so interaktiv sein wie Desktop-Applikationen. Die Anwendungsentwicklung darf nicht nur auf große Entwicklungsteams beschränkt sein. Das auf Hypertext basierende Erbe des Webs muss bewahrt bleiben. Die Demokratisierung des Webs sollte den Anwendern mehr Teilnahme ermöglichen. Wie die anderen, das Web 2.0 formenden RIA-Systeme ist auch OpenLaszlo so entworfen, dass es diesen Zielen genügt. Doch obwohl OpenLaszlo ein Beispiel einer RIA ist, kann es aber auch als ein Ansatz für eine RIA-Architektur betrachtet werden. Als Folge davon ist das OpenLaszlo-System nicht an eine bestimmte Plattform wie Dynamic HTML (DHTML), Flash oder Java gebunden, sondern kann auf allen diesen Plattformen angewendet werden, weil es die offenen Standards befolgt. In gewisser Weise kann OpenLaszlo als das Unix der RIA-Systeme betrachtet werden, weil es so entworfen wurde, dass es auf andere Plattformen wie Silverlight von Microsoft portiert werden kann, wenn deren Verbreitung zunimmt. Mit geringen Ausnahmen kann der gleiche Code auf allen diesen Plattformen ausgeführt werden und produziert eine identische Darstellung. Besser noch: Sein Ansatz erlaubt hybride Anwendungen, die simultan auf verschiedenen Plattformen ausgeführt werden können. Somit können die problematischen Nachteile der einen Plattform von einer anderen ausgeglichen werden. Insbesondere werden Flashbasierte Anwendungen von Webcrawlern durchsuchbar, können DHTML-basierte Anwendungen auf Multimediaquellen wie Audio und Video zugreifen. So kann eine auf Wettbewerb beruhende Landschaft entstehen, bei der sich die besten Implementierungen von Komponenten durchsetzen werden. In diesem Kapitel werden wir versuchen, einige Ihrer Fragen über Laszlo vorwegzunehmen, indem wir uns mit dem Hintergrund des Laszlo-Systems beschäftigen, eine Einführung in LZX vornehmen (der auf XML basierenden Sprache von Laszlo), kurz diskutieren, wie Laszlo-Anwendungen deployt werden, und die Rollen von Flash und DHTML bei Laszlo erklären. 4

12 1.1 Laszlo für das Design und Erstellen von RIAs 1.1 Laszlo für das Design und Erstellen von RIAs Der einzige Zweck von Laszlo ist, das Design und die Konstruktion von Webapplikationen mit der Performance von Desktop-Software zu unterstützen. Laszlo entfernt viele der Barrieren, die Entwickler von Designern trennt. In der Vergangenheit wurden diese eigentlich gemeinsam arbeitenden Partner dazu gezwungen, in verschiedenen Welten zu leben, so ähnlich wie die rechte und die linke Gehirnhälfte. Doch Laszlo definiert diese Beziehungen neu, und somit können Entwickler an Designproblemen wie Usability und der Rolle von Emotionen teilhaben. Diese Themen sollte man nicht so betrachten, dass sie neue Aufgaben für Entwickler darstellen, sondern eher als umfassendere Palette, mit denen man die eigenen kreativen Visionen ausdrücken kann. Ein in diesem Buch grundsätzlich vertretener Standpunkt lautet, dass die effektive Entwicklung von GUIs von den Bedürfnissen der Anwender gesteuert wird. Es reicht nicht, dem Design gegenüber Lippenbekenntnisse abzulegen; Anwender und Designspezialisten sind schließlich wesentliche Bestandteile des Entwicklungsprozesses. Diese als benutzerzentriertes Design bezeichnete Philosophie dient als Antrieb für alle auf die Entwicklung bezogenen Aktivitäten. Die Prinzipien des user-zentrierten Designs werden durch die Entwicklung von Laszlo Market, einer Anwendung zum Online-Verkauf von Actionvideos, veranschaulicht. Diese Anwendung nimmt Material aus jedem Kapitel auf, um alle Facetten der Laszlo-Entwicklung zu demonstrieren. In diesem Kapitel werden wir mit der Erläuterung anfangen, warum wir uns für Laszlo entschieden haben. Zum Schluss werfen wir noch einen Blick auf die Geschichte von Laszlo und seiner Open Source-Copyright- Lizenz Benutzerzentriertes Design Benutzerzentriertes Design stellt den Anwender in die Mitte des Gestaltungsprozesses. Es konzentriert sich darauf, wie User mit einem Produkt interagieren. Dabei kann es sich um alles Mögliche handeln von einem Kartoffelschäler bis zur neuesten Softwareapplikation. Der Schwerpunkt liegt auf den beiden Hauptthemen Nützlichkeit und Anwendbarkeit (Usability). Nützlichkeit bezieht sich auf die Eignung: Wie gut passt ein Produkt zu den Bedürfnissen des Verbrauchers? Usability bezieht sich auf ergonomische Themen: Ist das Produkt intuitiv zu benutzen und bringt seine Anwendung Freude oder Befriedigung mit sich? Wenn diese Anforderungen erfüllt sind, führt das zum Erfolg des Designs insgesamt. Diese Gewichtung unterscheidet sich von den konventionellen Designstrategien, die sich auf die Maximierung der Performance konzentrieren. Das führt im Allgemeinen zu einem minimalen User-Interface, weil ein intuitives Interface Ressourcen erfordert, die die Performance belasten können. Benutzerzentriertes Design entkoppelt ein Interface von den Belangen der Hardware-Effizienz. Tatsächlich führt eine übertriebene Beschäftigung mit der Systemeffizienz nicht notwendigerweise zu einer erhöhten Produktivität. Nehmen wir folgendes Beispiel: Wie erhitzt man eine Tasse Wasser in einer Mikrowelle am schnellsten: in einer Minute und 10 Sekunden oder einer Minute und 11 Sekunden? Die richtige 5

13 1 Der Turbolader für die Webtechnologie ist die zweite Antwort (Sie wussten, dass es eine Fangfrage war, oder?), weil es schneller geht, eine Folge von Einsen einzutippen und nicht nach der Null suchen zu müssen. Die daraus zu lernende Lektion lautet, dass die Anwenderproduktivität in vielen Fällen wichtiger ist als die Hardware-Produktivität. Obendrein spürt der Anwender einen gewissen Grad der Zufriedenheit, wenn er eine Folge von Einsen eintippt, die einem die Suche nach der Null nicht bietet. Die Handlung, diese Einsen einzutippen, verleiht dem Anwender ein psychologisches Gefühl von Macht oder Leistungsfähigkeit, anstatt vom Suchen frustriert zu sein. Plötzlich ist das Erhitzen einer Tasse Wasser eine bereichernde Erfahrung statt Arbeit. Damit wird das Prinzip des emotionalen Designs veranschaulicht: wie wichtig es also ist, dass die Bedienung von Interfaces Spaß macht Die Entdeckung von Laszlo: Die Geschichte eines Entwicklers Wir sind der Ansicht, dass man Laszlo LZX am besten lernt und versteht, wenn man damit innerhalb eines Anwendungskontexts arbeitet. Also werden wir im Verlauf des Buchs eine echte Webanwendung namens Laszlo Market erstellen. Wir veranschaulichen anhand dieser Entwicklung auch die Vorteile eines benutzerzentrierten Ansatzes. Wir präsentieren dafür die Geschichte eines Entwicklers, um den Bedarf dieser Anwendung zu demonstrieren und zu zeigen, warum Laszlo die beste Lösung für die Implementierung dieser Anwendung ist Das Problem mit aktuellen Webanwendungen Sie haben den Traumauftrag bekommen, einen vorhandenen Online-Shop neu zu implementieren, und dürfen dabei die Technologien zur Implementierung selbst wählen: Java 2 Enterprise Edition (J2EE oder seit neuestem JEE) Tag Libraries, irgendeine Variante von Ajax oder einer anderen RIA-Sprache. Der aktuelle Shop leidet unter schlechten Verkaufszahlen, also wollen die Eigentümer einen kompletten Rebuild. Doch bevor Sie eine Technologie wählen können, ist es nötig, zuerst die Gründe für die Mängel des vorhandenen Shops herauszubekommen. Nach einigen Recherchen werden dessen Probleme offenbar. Aus der Verkaufsabteilung erfahren Sie, dass der Shop dauerhaft nicht die erwünschten Verkaufszahlen erreicht. Schlimmer noch, der Shop hinterlässt bei Kunden einen negativen Eindruck: Sie merken an, dass er anderen Shops zu ähnlich sei. Ihr nächster Besuch führt Sie zum Marketing, wo Sie erfahren, dass der Shop zwar einen guten Zulauf an Kunden hat, diese sich allerdings oft nur kurz im Shop aufhalten und wenige Interaktionen vornehmen. Anders gesagt ist die Aufenthaltszeit auf der Website (die sogenannte Stick Time) nur kurz und enthält nur wenige Aktionen. Noch alarmierender ist, dass 45 % der Kunden den Einkaufsvorgang mittendrin abbrechen. Das Problem nimmt nun Konturen an: Der Shop ist langweilig und unnötig kompliziert. 6

14 1.1 Laszlo für das Design und Erstellen von RIAs Das Ziel aller Online-Shops ist identisch: Verbindung mit Interessenten aufnehmen, sie in Kunden verwandeln und als Stammkunden behalten. Dafür müssen Sie deren Bedürfnisse kennen und verstehen. Damit unser Shop erfolgreich wird, müssen wir diese Ziele anhand der folgenden Schritte erreichen Das Kundengespräch Wenn ein Produkt versagt, liegt das in der Regel ursächlich an unzureichender Kommunikation mit den Anwendern. Wenn man keine Enduser befragt, führt das zu einer Anwendung, von der nur eine ausgewählte Zielgruppe angesprochen wird. Miteinander in Konkurrenz stehende Online-Shops bieten ähnliche Features und Preise an. Um sich davon abzuheben, ist Usability (die Anwenderfreundlichkeit) ein offensichtliches Ziel. Aber weil sich die mangelnde Stick Time und der Abbruch des Kaufvorgangs als die eigentlichen Probleme herausgestellt haben, wollen wir den Anwendern auch eine emotionale Reaktion entlocken. Das schafft einen positiven Eindruck bei den Anwendern, weil sie mit dem Besuch unseres Shops ein positives Gefühl verbinden. Somit muss für den Shop zuerst einmal ein bestimmter Tonfall etabliert werden. Weil die Demographie der elektronischen Medien und Ihre Gruppe der Interviewpartner besagt, dass die Zielgruppe hauptsächlich aus Männern im Alter zwischen 20 bis 30 besteht, legen Ihre Interviews einen High Tech/Comic -Tonfall nahe. Obwohl Sie sich nicht zu früh schon auf spezielle Themen konzentrieren wollen, ist das Problem des Verkaufsabbruchs finanziell wichtig genug, um besonders berücksichtigt zu werden. Also fragen Sie Ihre Anwender, warum sie den Einkaufsvorgang abbrechen würden Reduktion der Abbrüche des Kaufvorgangs Ihre Interviews produzieren erstaunlich ähnliche Antworten: Der Kaufvorgang ist zu kompliziert. Der aktuelle Shop basiert auf HTML, von daher benötigt ein Einkauf die in Abbildung 1.1 gezeigten sieben Schritte. Für jeden Schritt ist eine vollständige Kommunikation mit dem Server (für den Transfer der Daten hin und zurück) nötig, was eine weitere Gelegenheit bietet, den Kauf abzubrechen. Am schlimmsten ist es, dass eine Korrektur bereits eingegebener Informationen umständlich ist, und die Zurück-Schaltfläche nur noch weitere Verwirrung stiftet. Sie müssen traurigerweise zustimmen, dass es im aktuellen Shop kaum etwas gibt, was die Kunden mit Vertrauen erfüllt. Global Millenia Marketing hat kürzlich eine Umfrage durchgeführt und Kunden nach den fünf wichtigsten Gründen gefragt, warum sie einen Kaufvorgang abbrechen (www. imscart.com/ecommerce_software_article_1.htm): Hohe Lieferkosten (69 Prozent) Meinungsänderung (61 Prozent) Hohe Gesamtkosten (49 Prozent) Langer Prozess der Kaufabwicklung (41 Prozent) 7

15 ..NET 416 Add to Cart -Button 318, 321 < include> 394, 396 <body>, Tag 389, 393 <head>, Tag 403 A Abbruch des Einkaufsvorgangs 6 Absolute Positionierung 78 Absolute Referenz 56 Abstrakter Dienst 212 activate, Methode 231 adddelegate, Methode 202 addnodefrompointer, Methode 286 addsubview, Methode 204 addtimer, Methode 217 Adobe Flash 404 Agile Development 111 Ajax 9 Aktivitätsorientierter Webserver 416 Aktualisierung Datensatz 248 dynamische 22 Algorithmus, Simister Slide 357 align, Attribut 116, 157, 337 Alternativer Verarbeitungsfilter 436 Ändern-Button 130 Anfasser für Scrollleiste 377 Anforderungsspezifikation 111 Angehängtes Bild 86 Animation 9, 12, 19, 39, 333, 345 between-frame 347 Breite und Höhe 84 Easing in 349 Easing out 349 Easing-Konzept 349 Fortschrittsbalken 334 Frame 347 geskriptete 352 interaktive 352 Keyframe 347 komplexe Bewegungen 350 koordinierte Gruppe 357 Laszlo Market 359 Erweiterung des Produkteintrags 447 Papierkorb 360 Masse implizieren 347 Opazität 356 pausieren und neu starten 353 Scripting 133 Splash-Screen 334 Steuerung der Sichtbarkeit 82 Style Guide 345 System 20 Temperatur als Metapher 359 Tweening 347 Übergänge glätten 356 Verzögerung 355 visuelle Illusion 346 Zustand 353 animation, Methode 133, 347 Animator 39 begrenzte Ressourcen 350 deklarativer 133 Easing-Periode 350 integrierter 82 Klasse 134 animator, Tag 13, 133, 134, 347, 350 animatorgroup, Tag 13, 133, 347, 350 Anmeldefenster 126 Laszlo Market 217 Ansichtsschicht 19 Anwenderfreundlichkeit 7 Anwendung behäbiges Beispiel 466 eingebettete 392 erstellen 50 hybride 365, 383 Initialisierung 335 Schnittstellenelemente 49 Startup 335 statisches Layout 49 Zustand 131 Anwendungsfall 113 Apache 416 appendchild, Methode 271 appenddivid, Argument 395 Apple QuickTime 404 Applets 385 Application Mode 53 applied, Attribut 196 apply, Attribut 131 apply, Methode

16 applydata, Methode 250, 261 appstate, Attribut 126 Argument als Referenz übergeben 68 als Wert übergeben 67 appenddivid 395 Methoden 66 on+attribute 192 Array assoziatives 271, 278 delegatelist 202 loaded 455 loadedmodules 462 Subview 78, 102 Unterknoten 59 array, JavaScript-Typ 62 Assoziatives Array 271, 278 asynchronoustests, Flag 136 Attribut 61 align 116, 157, 337 applied 196 apply 131 appstate 126 auf Ressourcen bezogen 88 autoconnect 406 Basis 60 Behandlung 70 benutzerspezifisch 60 clickable 98 clickregion 98 clip 80, 310, 312 confirm 178, 187 currstate 126 cursor 95 datacontrolsvisibility 245 datapath 244, 279, 435 debug 51 defaultplacement 175 defaulttext 184 doesenter 167, 219 downkeysarray 225 downkeyshash 225 dynamisches 62 editable 184 enabled 186 end 150 error 424, 426 errorcount 177 final 61 fnum 339 focusable 98, 167, 312 focustrap 98 focusview 311 frame 91 framesloadratio 92 hasdefault 169 height 52, 84 hierarchische Propagation 34 href 120, 461 id 56, 61 immediateparent 174 initstage 464, 467, 468, 469, 471 inset 147 isdefault 169, 219 Kommunikation zwischen Tag und JavaScript 60 labelwidth 160 lastcolor 315 layout 181 loading 455, 456 loadratio 92 locked 194 LzDatapointer, Klasse 280 message 426 motion 349, 351 name 56, 61, 87, 461 nodetype 269 nur-lesen 61 on+attribute 207 ontimeout 422 opacity 82, 356 options 156, 337 ownerdocument 270, 271 parent 61, 174 parentnode 270 pathurl 424 persistent 335 pixellock 86 play 92 pooling 447 relative 351 repeat 353 replication 442, 443, 444, 449 request 420, 421 required 177 requirederrorstring 178 rerunxpath 291 resourceheight 88 resourcewidth 88 rotation 84, 152 runtime 371 sameas 185 scrollable 309 scrollattr 309 scrollmax 309 scrolltarget 309 sel 314 setcanvasattribute 392 slideduration 125 sortorder 255, 256 sortpath 255 spacing 125, 147, 184, 203, 442 speed 207 src 406, 418, 421 stage 461 stepsize 310 stretch 336 stretches 40, 89, 119, 336, 341 subnodes 61 target 134 text 94, 167, 183 timeout 422 tipalign 221 title 308 toggle 314 totalframes 90 type 120 unstretchedheight 89, 262 unstretchedwidth 89, 262 valign 116, 337 value 170 videoplayer 407 videoview 406 View 80 visible 82, 203, 356 Wert als Constraint ausgedrückt 64 Werte speichern 60 width 52, 84 xinset