Home

Untersuchung, Konzeption und Realisierung eines Flex

image

Contents

1. aktualisieren Die Breite der Bereiche Mailing Auswahl und Dashboard sind durch die Verwen dung der Komponente lt mx HDividedBox gt skalierbar Somit kann der Anwender das Dashboard auf die komplette Breite des Browserfensters vergr ern Dashboard Aktualisieren Fenster Ausrichten Alle schlie en 1D 4339 Prozentualer Anteil der Klicks D X 10 4339 Klicks pro Stunde ur 800 90 a a so F 700 H H E 70 g 600 z aj ii 60 E 500 so 8 Z 418 3 8 400 _ N a zZ H Zo 8 E 7 a u 300 il 282 Zen 258 244 H 200 L 20 5 e a 100 10 D i u H o H ke K E EN RE E E IH 1 2 3 4 5 6 7 8 9 10 11 12 1 4 5 6 7 8 9 Stunde Stunde 1D 4339 Response Ubersicht X 1D 4339 Geo Tracking ee HardBounce 730 0 1 Klicks 4872 0 5 7 Keine 90217 Response Ubersicht ffnungen J Klicks E SoftBounce BR HaraBounce EB Keine Antwort Versenden Abbildung 5 6 Dashboard 5 2 5 Reportingfunktionen Die folgenden Abbildungen stellen Beispiele f r Reportingfunktionen dar e Response bersicht Die Response bersicht wird als Kreisdiagramm visualisiert vgl Abb 5 10 um die prozentuale Verteilung zu verdeutlichen Die Farben der einzelnen Seg mente spiegeln das arvato Design wider Die einzige Ausnahme stellt die Ka tegorie Hard Bounce dar f r welche die Signalfarbe Rot verwendet wird Der 74 5 2 Darstellung Kunde soll auf diese Weise verst rkt auf ung ltige Empf nge
2. e Positiv Besonders positiv fiel die Baumstruktur auf welche die Navigation wesentlich bersichtlicher gestaltet als im eigentlichen eLettershop Zudem wurde die Visualisierung der Graphen und die generell fl ssige Darstellung gelobt Das Design des Prototyps entspricht nicht der endg ltigen Optik jedoch stie diese bereits auf hohe Akzeptanz Negativ Abgesehen von der Filternutzung und der Drag and Drop Funktion wurden keine negativen Kritikpunkte ge u ert Optimierungen Die W nsche einiger Probanden wurden aufgegriffen um den Reportingcli ent weiter zu verbessern Zum Einen wurde vorgeschlagen dass die Knoten in der Baumstruktur auch durch Doppelklick ge ffnet werden k nnen und je de Hierarchieebene zudem durch ein spezielles Bild repr sentiert wird Zum Anderen wurde angeregt Fenster im Dashboard frei positionieren zu k nnen In dem Prototypen wird die Komponente Tile verwendet welche die Fenster automatisch kachelt Im nachfolgenden Kapitel werden die von den Probanden ge u erten Kritikpunkte und Anregungen ber cksichtigt und in ad quater Weise technisch umgesetzt 68 5 Realisierung Das vorliegende Kapitel gliedert sich in drei Abschnitte Zun chst werden einige verwendete Programmierkonzepte erl utert Daran anschlie end erfolgt die Pr sen tation der Oberfl che anhand von Screenshots In diesem Zusammenhang werden die implementierten Bedienkonzepte vorgestellt und deren Einflu auf die Usability bew
3. t elettershop de pix gif 132 68 12 62 82 93 http templates elettershop de asy abmeldung htm 16 15 2 78 18 29 http templates elettershop de asy ical dortmund ics 3 3 0 56 3 66 http templates elettershop de asy lcal speyer ics 0 H 0 00 0 00 Abbildung 5 7 Auflistung der Links Neben den einzelnen Reportingdarstellungen lassen sich ebenfalls mehrere Mailings in einem gemeinsamen Diagramm vergleichen vgl Abb 5 12 Diese Funktion ist lediglich f r die Graphendarstellungen sinnvoll Die hinzugef gten Datens tze k n nen ber einen speziellen Button vgl Abb 5 13 der als Titel die ID des Mailings siehe http earth google de 75 5 Realisierung 1D 4111 Prozentualer Anteil der Klicks ox 10 4323 Klicks pro Stunde ox 360 1 DS 340 Assad D Feb eg Ee Eege zunn g S 179 124 80 64 61 58 43 45 38 i i i E 1 2 3 4 5 6 7 8 9 10 11 12 Stunde Stunde Abbildung 5 8 Liniendiagramm Anteil Abbildung 5 9 Balkendiagramm Klicks der Klicks pro Stunde 10 3952 Response bersicht SOX SoftBounce 269 3 6 Abbildung 5 10 Kreisdiagramm Abbildung 5 11 Geo Tracking Lokalisie Response bersicht rung der Empf nger 76 5 3 Pitfalls 10 4339 Klicks pro Stunde Lax 10 4339 ichs pro Stunde ex 800 7 700 625 443 387 Za 341 300 251 Se 217 200 ZS 193 159 7 s 53 e 153 43 143 100 5 o o u 12 2 3 4 5 6 s s 10 u 12 Stunde Gan 4307 A
4. 2 4 3 1 3 2 3 3 3 4 3 9 3 6 3 7 3 8 4 1 4 2 4 3 4 4 4 5 4 6 4 7 4 8 4 9 4 10 4 11 4 12 4 13 4 14 4 15 4 16 4 17 Reporting im Regelkreis Internationaler MT V Webauftritt 1997 0 0 0 0 0 00 Deutscher MT V Webauftritt 2009 0 002 000 000 2 Model View Controller Konzept 2 2 222mm nn Flex Architektur Die bermittlung einer Tracking Ablauf Silverlight Architektur JavaFX Plattform RIA Vergleich E Mail 2u 0 8 amp ives en E Integration von Flex und PHP e Ablauf eines RPCs Aufbau einer SOAP Nachricht 2 2 2 m m nn nn RIA Data Benchmark Class Mapping Projektskizzierung Baumstruktur Combobox und Liste Ablauf der Filterung Kreisdiagramm Baumstruktur mit Repo rtingfunktionen Baumstruktur Drag and Dron Aktivit tendiagramm Mailingvergleich 2 222 222202 ValueObject erhalten Remote Objekt in Flex erstellen 2 2 2 2 222 n nennen CHAP 3 Wege Handshake 2 2 2 2 rn nn nn Papier Prototyp Layout der Tile Komponente 2 2 2 2 2 Emm berpr fung auf W3C Standardkonformit t Usability Test M ndlicher Vortrag Usability Test Aufgabenstellung Usability Test Mailings 85 Abbildungsverzeichnis 86 5 1 5 2 5 3 5 4 9 0 5 6 5 7 5 8 5 9 5 10 5 11 5 12 5 13 Al A 2 A3 Der Beportmgchent 2 0 0 0 0 00 00200 eee ee 70 Men leist
5. Februar 2009 Asynchronous JavaScript and XML Ajax bezeichnet die asynchrone Daten bertragung zwi schen Webbrowser und Webserver unter Verwendung von JavaScript und XML 12 gl http www linux mag com id 3308 zugegriffen am 3 M rz 2009 1 Einleitung 2 Grundlagen In den folgenden Abschnitten sollen relevante Methoden Konzepte Technologien und Dienste f r die vorliegende Arbeit beschrieben werden Dazu geh ren neben den technischen Grundlagen wie z B Programmiersprachen auch spezielle Infor mationen zum Bereich Reporting 2 1 PHP Hypertext Preprocessor Um die Unzul nglichkeiten statischer Webseiten zu vermeiden wurde bereits in einer sehr fr hen Entwicklungsphase des WWW die Skriptsprache PHP entwickelt Das rekursive Akronym steht f r PHP Hypertext Preprocessor und wird auf der offiziellen Webseite wie folgt beschrieben eine weitverbreitete Open Source Skriptsprache speziell f r Web entwicklungen PHP l t sich in HTML einbinden Die Syntax erinnert an C Java und Perl und ist einfach zu erlernen Das Hauptziel dieser Sprache ist es Webentwicklern die M glichkeit zu geben schnell dyna misch generierte Webseiten zu erzeugen PHP ist im Bereich der Webentwicklung stark verbreitet Aktuell befindet sich die Sprache in der Version 5 und unterst tzt mittlerweile die objektorientierte Programmierung Es existieren zahlreiche vorgefertigte und frei benutzbare Module die von Open Source Ge
6. min 16 amp Empf ngerliste ansehen Erstellung Geplant Startzeit Endzeit EFT Seem Fortschritt Empfangerimy eer 100 Fortschritt Versand be Se 0 00 0 Vorscha Q Tesmat an Sena template gt Abbildung A 2 Mailing ansehen E berblick dl Domanenvertellung Downloads amp Anzeigen Mailingdaten Reminder Einladung zum IT_breakfast am 15 Mal 2009 Ben def Feld 1 Erstellung Mo 04 05 2009 18 38 Startzeit Mi 06 05 2009 14 00 Dauer 00 01 42 Response bersicht Anzahl Hard Bounces 57 3 90 Anzahl Bounces gesamt 78 5 34 Abbildung A 3 Reporting ansehen 82 B CD Inhaltsverzeichnis B CD Inhaltsverzeichnis Demo Vorstellung des Programms Video_Bedienung avi Video_Bedienung mov Dokumentation LaTeX LaTeX Quelldateien ChristianDA pdf Die eigentliche Dokumentation Elektronische_Literatur AMF3 Spezifikation pdf eLettershop_Benutzerhandbuch pdf IS0_9241 10 pdf MihaiCorlan_Presentation_Flex_AIR_and_PHP pdf NielsonNormanGroup_RIA usability pdf Verwendete_URLs html Flex release Die kompilierte Version mit HTML Einbettung src Quellcode FlexProjekt zip Flex Projekt Datei PHP Quelldateien aus dem PHP Backend MailingVO MailingRemoteVO php Remote php ReportingVO Remote php ReportingRemoteVO php UserVO Remote php UserRemote php initFlex php LIESMICH TXT 83 Anhang 84 Abbildungsverzeichnis 1 1 1 2 1 3 2 1 2 2 2 3
7. tigung einer Mailingld mit Hilfe der Enter Taste Die Bedienung ist hierbei ergonomischer als beim Wechsel von der Tastatureingabe zur Maussteuerung 5 2 3 Mailings Die Mailings werden wie in Abbildung 5 5 erkennbar als Baumstruktur abgebil det Der Usability Test hat best tigt dass diese Form der Mailingdarstellung ber sichtlich und strukturiert ist Die Struktur in Form eines Baums wird in Abschnitt 4 1 1 n her erl utert Zus tzlich zu dieser Aufteilung werden spezifische Symbole Zeng f r Vorlage 72 Fitter von 13 04 2009 E bis 23 04 2009 FH SHIPMENT_FINISHED v live v arvato systems NMI TA v Abbildung 5 3 Filtereinstellungen 5 2 Darstellung von 07 04 2009 al April 2009 LE Lee woo rss d d 5 Mandant 1 2 6 7 8 9 10 11 12 MallingId 13 14 15 16 17 18 19 20 21 22 23 24 25 26 E3 Mailings 27 28 29 30 Abbildung 5 4 Datumsauswahl verwendet Sie weisen auf die Kategorie bzw jeweilige Funktion hin Da gut ge w hlte Bilder schneller aufgefasst werden k nnen als zu lesender Text wird die Bedienung hierdurch intuitiver und die Ged chtnislast minimiert Das Aufklappen der Ebenen ist in dieser Tree Komponente nativ ber ein verh ltnism ig kleines Dreieck Symbol implementiert Dieses Bedienelement unterminiert in bestimmten F llen z B Sehschw che Motorikst rung die Barrierefreiheit Die ohnehin be n tigte Beschriftungsfl che der Hierarchieebene wird
8. tragung und Darstellung von Bildinhalten und Animationen realisiert werden Zudem sind stufenlose Transformationen z B Skalierung Rotation etc ohne Qualit tsverluste m glich e Performance Ein wesentlicher Aspekt von Benutzerfreundlichkeit sind kurze Antwortzeiten Diese ergeben sich dadurch dass die Flex Applikation clientseitig verarbeitet resp gerendert wird Somit reduzieren sich sowohl die Serverlasten bei Inter aktionen innerhalb der Applikation als auch die notwendige Kommunikation Im Standardfall werden zun chst alle ben tigten Informationen auf den Client Vektorgrafiken werden im Gegensatz zu Rastergrafiken nicht mit Pixeln dargestellt sondern mit Hilfe von Linien Polygonen Kurven und Fl chen beschrieben Rendern bezeichnet in diesem Fall das Berechnen und Darstellen der anzuzeigenden Objekte 19 3 Untersuchung bertragen wodurch im Anschluss daran keine weitere Serverkommunikation mehr stattfindet muss Bei PHP Webseiten ohne Ajax Implementierung oder hnlichen Ans tzen wird der Quellcode bei Interaktionen stets komplett neu geladen Sicherheit Ein spezielles Problem des Internets ist das Ph nomen des so genannten Phis hing Dies geschieht h ufig durch Nachahmung einer Seite und hnlich ausse hender Internetadresse HTML Seiten k nnen mittels stets vorhandener Quell textanzeige dupliziert werden Der Nutzer gibt seine geheimen Daten in das vermeintlich authentische Frontend ein Die Entwickle
9. wendung des integrierten Pakets Zend_Amf an 3 5 Fazit Nach der Analyse der Schnittstellen wird deutlich dass das PHP Backend zu er weitern ist um die Verbindung mit Flex herstellen zu k nnen ber die Schnitt stelle kann kein ausf hrbarer Code bertragen werden Daher m ssen auf PHP Seite alle f r das Reporting relevanten Daten als Eigenschaften in einem Objekt zu Verf gung gestellt werden Die zu bertragenden Objekte werden allgemein als ValueObjects bezeichnet und mit VO abgek rzt Diese Abk rzung wird bei der Namensgebung von Klassen in der Regel als Suffix z B ReportingVO verwendet Die Flex Applikation ben tigt zus tzlich eigene VO Klassen welche die gleichen Ei genschaftsnamen besitzen wie die VOs auf PHP Seite Nachdem diese Architektur implementiert ist k nnen die Daten durch so genanntes Class Mapping bermit telt werden Dabei werden die Daten bereits auf PHP Seite in einer geeigneten Form in Objekten abgelegt so dass sie direkt vom Flex Client verwendet werden k nnen Der prinzipielle Ablauf ist in Abb 3 8 skizziert PHP Backend Eigenschaften KlasseVO Kommunikation Class Mapping l Flex Client Y Darstellung Eigenschaften KlasseVO Abbildung 3 8 Class Mapping Die ValueObjects k nnen sowohl empfangen als auch versendet werden F r das Reporting ist nur der Empfang solcher VOs relevant 35 3 Untersuchung 36 4 Konzep
10. 2 6 2 Tracking 2 6 3 Bounces 2 6 4 Status Data Warehouse Untersuchung Eignung von Flex 3 1 1 Vorteile 3 1 2 Nachteile Alternativen zu Flex 3 2 1 Silverlight 3 2 2 JavaFX 3 2 3 Fazit Kommunikation zwischen Flex und PHP 3 3 1 Webservice 3 3 2 Remoting und RPC w CO CON NN 10 10 11 11 12 12 13 13 13 14 14 16 16 17 19 19 19 21 21 22 23 24 26 27 27 Inhaltsverzeichnis vi 3 3 3 Serialisierung und Deserialisierung 28 3 3 4 Action Message Format AMF 28 3 3 5 Representational State Transfer REST 29 3 4 Schnittstellenvergleich 0 0 0 0 0 0 00000004 30 3 4 1 HTTPS CE e 42 22 42 a eb he oe me Re Be a g 30 3 4 2 Simple Object Access Protocol SOAP 31 34 3 AMFPHP 4 2 ea EE Ee he ee Bs 32 34 4 end AME 2 3 eso amp dene ddl ded Bsa hir 32 3 4 5 Vergleichsanalyse 33 310 chs VA on e A ke ert e ee eet 35 Konzeption 37 4 1 Grundfunktionen des Reportings 00 38 4 1 1 Darstellung von Mailings 38 4 1 2 Filterung der Mailings n nn 39 4 1 3 Status der Versendung 200 40 4 1 4 Klicks pro Stunde 2 2 En nn 42 4 1 5 Linkauswertung 000000 ee eee 42 4 1 6 Diagramme anzeigen und vergleichen 2 2 43 4 1 7 Mehrsprachigkeit 44 4 2 Geo Tracking 4 4 Ss nahen
11. 2009 23 3 Untersuchung Im Gegensatz zu Flex und Silverlight baut derjenige Teil welcher die Oberfl che beschreibt nicht auf XML bzw einem XML Derivat auf Stattdessen wurde eine spe zielle Skriptsprache namens JavaFX Script eingef hrt Im folgenden Code Beispiel wird die Erstellung eines Buttons dargestellt Button Komponente x 10 y 10 Positionierung text Klick mich Beschriftung action operation Funktion D NO ur WN ta Quellcode 3 2 Beispiel JavaFX Button In Abb 3 2 wird die JavaFX Plattform veranschaulicht 3 2 3 Fazit Nachfolgend sollen die Aspekte Performance und Eindruck sowie technische Voraus setzung auf Anwender und Entwicklerseite betrachtet werden Abschlie end wird der Einfluss der Open Source Philosophie diskutiert da die in dieser Arbeit be schriebenen Technologien in wesentlichen Teilen darauf beruhen Die drei beschriebenen Produkte stellen die zur RIA Entwicklung notwendigen Grundfunktionen zur Verf gung Die Komplexit t darauf aufbauender Funktionen wird bei keinem der drei Produkte konzeptionell begrenzt Wie sich eine zunehmen de Komplexit t auf die Performance auswirkt wurde im Rahmen dieser Recher che nicht untersucht Der subjektive Eindruck des Autors ist dass bei JavaFX die Darstellung stockend abl uft und die Ladezeiten selbst bei kleinen Applikationen ungew hnlich lang sind Dadurch kann angenommen werden dass sich die Produkte in diesem Punkt
12. Barrierefreiheit zu ber cksichtigen ist eine optionale Schriftvergr erung sinnvoll Lernf rderlichkeit Die Applikation sollte so einfach wie m glich aufgebaut sein um schnell er lernbar zu sein Schwer verst ndliche Komponenten werden durch Hilfetexte beschrieben die den Lernprozess des Nutzers unterst tzen 4 8 Usability Engineering Diese Grunds tze k nnen als Leitlinien f r die Erstellung und Bewertung von Benut zeroberfl chen eingesetzt werden Dabei sollte folgende Aussage beachtet werden Die Art und Weise in der jeder einzelne Grundsatz der Dialoggestal tung umgesetzt werden kann h ngt von den Merkmalen das Benutzers f r den das Dialogsystem gedacht ist den Arbeitsaufgaben der Arbeit sumgebung und der jeweils eingesetzten Dialogtechnik ab 9 In diesem Fall kann in Betracht gezogen werden dass die Bestandskunden den eLettershop und seine Benutzerf hrung bereits kennen 4 8 2 Heuristiken Jakob Nielsen hat zehn Heuristiken aufgestellt welche die Gebrauchstauglichkeit einer Software sicherstellen sollen vgl Nie94 Kapitel 5 In der folgenden Auf z hlung wird jede einzelne von ihnen kurz erl utert vgl Szw08 und auf den Reportingclient bezogen 1 Simple and Natural Dialogue Ein einfacher und nat rlicher Dialog zeichnet sich u A durch bersichtlich keit aus In der Benutzeroberfl che des Reportings werden dementsprechend m glichst wenig Elemente zur gleichen Zeit sichtbar sei
13. E Mail Programm die Anzeige von HTML unterst tzt e Multipart Eine Mischform stellt Multipart dar bei dem die E Mail in beiden der oben beschriebenen Formate bermittelt wird In welcher Form die Darstellung auf der Empf ngerseite erfolgt h ngt von der Konfiguration des verwendeten E Mail Programms ab Ist eine Darstellung im HTML Format nicht m glich so wird im Allgemeinen das Text Format angezeigt E Mails die nur im HTML Format vorliegen lassen sich in diesem Fall nicht anzeigen 2 6 Reporting Bevor auf den Versand von E Mails und deren Auswertung eingegangen wird ist zun chst der Begriff Reporting im Rahmen dieses Projektes zu definieren Er be zeichnet die Erhebung Speicherung Verarbeitung Analyse und Darstellung von Daten bez glich des E Mail Versands Mit Reportingfunktionen sind Darstellungen von gespeicherten und evtl verarbeiteten Reportingdaten gemeint 18 gl http tools ietf org html rfc5322 zugegriffen am 3 M rz 2009 13 2 Grundlagen 2 6 1 Mailing Der Begriff Mailing bezeichnet die komplette Abwicklung des E Mail Versands an eine definierte Empf ngerliste Es setzt sich neben dem E Mail Header z B Absenderangaben oder personalisierter Betreff haupts chlich aus folgenden beiden Komponenten zusammen e Empf ngerliste Dem Kunden wird erm glicht eine Empf ngerliste in Tabellenform zu impor tieren die neben den E Mail Adressen noch Namen und weitere personenspe zifisc
14. Flex und Flash wird sie verwendet um das Ver halten der Applikation festzulegen Im Gegensatz zu MXML erlaubt ActionScript das Hinzuf gen und Modifizieren zur Laufzeit Der Gro teil der Verbindungstech nologie zum PHP Backend des Reportingclients wird mit Hilfe von ActionScript realisiert Folgendes Beispiel legt die Aktion fest die durch Klicken des im Code Beispiel 2 1 erstellten Buttons ausgel st wird In diesem Fall wird lediglich ein Fenster resp Alert Box mit dem Text Geklickt ausgegeben private function handleClick void 2 Alert show Geklickt zeigt eine Alert Box 3 Quellcode 2 2 Beispiel ActionScript Funktion HIXML steht f r Extensible Markup Language und bezeichnet ein flexibles Textformat 10 2 4 Adobe Flex 2 4 3 Flex Builder Adobe bietet neben dem kostenlosen Eclipse Plugin noch die kostenpflichtige Ap plikation Flex Builder an Mit dieser integrierten Entwicklungsumgebung soll die Aggregation von Flex Komponenten durch Drag and Drop Funktionalit t ver einfacht werden Zus tzlich zu der normalen Quellcode Ansicht existiert die Design Ansicht die einem WYSIWYG Editor gleicht Neben einem vereinfachten Zugang f r Einsteiger bietet die Option der grafischen Programmierung z B Drag and Drop die automatische Codegenerierung bei Standardaufgaben Dieses Vorgehen ist in der Regel zeiteffizienter und weniger fehleranf llig als die manuelle Program
15. Konzeption besonders auf intuitive Be nutzung Wert gelegt werden Der Zweck der zu realisierenden Applikation n mlich die anschauliche Visualisierung von Reporting Daten entkr ftet Nielsens Argumen tation In diesem speziellen Fall macht man sich eben diese grafischen Optionen zu Nutze Die detaillierte Ausarbeitung bez glich des Designs wird im Kapitel 4 vor gestellt Im Folgenden werden jedoch zun chst bekannte Flash und Flex Probleme aufgelistet und in Bezug zu diesem Projekt gestellt e Flash Plugin erforderlich Obwohl die Kompatibilit t aufgrund der Plattformunabh ngigkeit als positiv dargestellt wird ist es dennoch nachteilig wenn der verwendete Browser zu s tzliche Voraussetzungen zu erf llen hat Trotz der gro en Verbreitung des Flash Plugins sind nicht alle Nutzer erreichbar F r die Browser einiger inter netf higer Mobil Telefone sind bislang noch keine Flash Plugins verf gbar e Der Flex Builder ist kostenpflichtig Wie in Abschnitt 2 4 3 bereits erw hnt l sst sich der WYSIWYG Editor Flex Builder nur mit Lizenz nutzen F r Studenten gibt es die M glichkeit durch Immatrikulationsnachweis eine kostenlose Lizenz zu erhalten 3 2 Alternativen zu Flex Neben Adobe existieren zwei weitere gro e Anbieter auf dem Markt f r RIA Entwicklungsframeworks namentlich Microsoft mit dem Produkt Silverlight und SUN mit JavaFX Im Folgenden werden diese beiden g ngigsten Alternativen vgl http www u
16. Skripts wird eine Datei generiert welche die notwendigen Sprachdaten enth lt Dieser Vorgang kann manuell oder automatisiert mit einer festgelegten Frequenz z B t glich ausgef hrt werden Dadurch erzeugt die Funktion der Mehrsprachigkeit keine weitere Netzwerklast Bei den Sprachtexten handelt es sich in der Regel um statische Daten so dass deren lokale Speicherung sinnvoll ist Der geringe Mehraufwand f r die Erstellung einer Sprachdatei rechtfertigt sich durch k rzere Antwortzeiten f r die Anwender 4 2 Geo Tracking Eine interessante Funktion stellt das so genannte Geo Tracking dar Hierbei werden die geographischen Lagedaten der Empf nger in Form von L ngen und Breitengra den zur ckverfolgt Das Tracking erfolgt wie bereits in Abschnitt 2 6 2 beschrieben ber einen Tracking Server Neben dem Datum wird zus tzlich die IP Adresse ge speichert Diese Angaben reichen aus um mit Hilfe eines kostenlosen Dienstes den geografischen Ort zu bestimmen Die Genauigkeit der Lagebestimmung h ngt von dem genutzten Service ab In der Regel bieten kostenpflichtige Dienste zur jeweili gen IP Adresse detailliertere Auskunft Das Geo Tracking dient dem in Abschnitt 2 7 beschriebenen Data Warehouse als Datenquelle Mit Hilfe dieser Datenerhebungen lassen sich z B Aussagen ber den Erfolg eines konkreten Mailings in einer bestimmten Region machen Solche und wei tere Aspekte flie en in Marketinganalysen ein wodurch sich die Strategieplanu
17. Warehouse Systeme Architektur Entwicklung Anwendung dpunkt Verlag 2008 Hel05 Jan Eric Hellbusch Barrierefreies Webdesign Praxishandbuch f r Web gestaltung und grafische Programmoberfl chen dpunkt verlag 2005 KW02 Michael Kuschke and Ludger W lfel Web Services kompakt Spektrum Akadademischer Verlag 2002 M0007 Colin Moock Essential ActionScript 3 0 O Reilly Media 2007 MS04 Christoph Meine and Harald Sack WWW Kommunikation Internetwor king Web Technologien Springer 2004 INA08 Joshua Noble and Todd A Anderson Flex 3 Cookbook O Reilly Media 2008 Nie94 Jakob Nielsen Usability Engineering Academic Press International 1994 Pit86 David H Pitt Category Theory and Computer Programming Springer 1986 RRO7 Leonard Richardson and Sam Ruby Web Services mit REST O Reilly 2007 Szw08 Gerd Szwillus Usability Engineering Vorlesung Universit t Pader born Fakult t f r Elektrotechnik Informatik und Mathematik Pader born 2008 Wid08 Simon Widjaja Rich Internet Applications mit Adobe Flex 3 Hanser Fachbuch 2008 89
18. auf dieses Objekt im Anschluss an das Remoting kritisch sein genau dann wenn die Daten noch nicht vollst ndig bermittelt wurden Solche vorschnellen Zugriffsversuche auf noch nicht vorhan dene R ckgabewerte werden blicherweise durch EventHandler vgl M0007 ver hindert Diese werden einem Objekt zugewiesen und erfordern in Flex mindestens zwei Parameter Sie beschreiben zum einen den Event z B ein Klick auf die linke Maustaste welcher abgefangen werden soll sowie zum anderen die Reaktion darauf Allerdings besitzt dieses Konzept einige Einschr nkungen bez glich der Angabe der R ckruffunktion Da Flex f r jedes Event einen fest vordefinierten Satz an Objekten zur ckgibt ist das Senden zus tzlicher Parameter nicht m glich Diese Restriktion erschwert den Umgang mit Events Eine elegante L sung der erl uterten Problema tik bieten die beiden Komponenten AsyncToken und ItemResponder var itemResp ItemResponder new ItemResponder 2 bei erfolgreicher bermittlung 3 function data Object token Object null void 4 Verwertung der Daten 5 var ValueObject KlasseVO KlasseVO data result 6 weitere Arbeiten mit dem ValueObject 7 8 bei Fehler in der bermittlung 9 function err Object token 0bject null void 10 Fehlerausgabe 11 Alert show err toString 12 13 14 var token AsyncToken remoteObject remoteFunction 15 token addResponder itemResp Quellcode 4 4 Beisp
19. com technologies flex sdk 2 Grundlagen Abbildung 2 2 veranschaulicht die Flex Architektur Flex kombiniert MXML und ActionScript Grunds tzlich ist es mit beiden Sprachen m glich Komponenten z B Bedien und Anzeigeelemente zu erzeugen Eine n here Erl uterung erfolgt in den n chsten beiden Abschnitten 2 4 1 MXML MXML ist eine beschreibende auf XML basierende Programmiersprache Ihr Co de wird zur Kompilierungszeit vom Flex Compiler in ActionScript Code bersetzt vgl Wid08 Zwar ist MXML f r die Objekterstellung in Flex nicht zwingend not wendig systematisiert jedoch den Entwicklungsprozess Indem versucht wird den Quellcode weitgehend in funktionelle und beschreibende Teile zu gliedern wird die bersichtlichkeit positiv beeinflusst Im folgenden Beispiel wird ein Button mit der Aufschrift Klick mich erstellt lt mx Button id button1 Komponente x 10 y 10 Positionierung label Klick mich Beschriftung click handleClick gt Funktion e o NH Quellcode 2 1 Beispiel MXML Komponente F r den funktionellen Part handleClick ist die befehlsorientierte Programmier sprache ActionScript verantwortlich welche im n chsten Abschnitt beschrieben wird 2 4 2 ActionScript Adobe Flex benutzt die befehlsorientierte Programmiersprache ActionScript welche sich derzeit in Version 3 befindet Sie stellt ein Derivat der Sprache JavaScript dar und hnelt ihr somit in der Syntax In
20. daher als Bedienelement zur ffnung der jeweiligen Knoten verwendet E3 Mallings wiglarvato systems NMI C Outsourcing Event v E chance it arvato systems de ae Sle sich ein und sichern sich die Vortelle von Managed IT Services Response bersicht gt lt Prozentualer Antell der Klicks lKlicks pro Stunde g Linkauswertung Geo Tracking patiaken Sie sich ein und sichern sich die Vortelle von Managed IT Services Abbildung 5 5 Baumstruktur Mailings 5 2 4 Dashboard In der Konzeptionsphase wurde das Layout der Reportingdarstellungen mit der Komponente lt mx Tile gt geplant Diese wird jedoch nicht allen Anforderungen z B das individuelle Platzieren einzelner Felder gerecht Daher wurde wahrend der Rea lisierungsphase im Rahmen einer Internetrecherche nach einer geeigneten Bibliothek gesucht Eine gute technische L sung stellt hierbei flexlib dar Diese bernimmt das Layout der einzelnen Fenster sowie zus tzliche Funktionen Hierzu z hlen u A das Verschieben einzelner Fenster und deren Maximierung resp Minimierung Im plementiert sind diese Funktionen in den Komponenten lt mx MDICanvas gt und lt mx MDIWindow gt welche im Reportingclient Verwendung finden siehe http code google com p flexlib 73 5 Realisierung H ufig ben tigte Funktionen k nnen durch Shortcuts ausgef hrt werden So lassen sich z B s mtliche angezeigten Reportingfunktionen mittels der Funktionstaste F5
21. der Regel direkt vom E Mail Server zur ckgewiesen Im Reporting werden die fehlgeschlagenen Versendungen lediglich in Soft und Hard Bounces kategorisiert da eine detaillierte Auflistung der einzelnen Bounce Gr nde im Reportingclient die bersichtlichkeit unterminiert 2 6 4 Status Eine wesentliche Eigenschaft eines Mailings ist dessen Status Er gibt an in wel chem Stadium es sich befindet Nachfolgend sind alle f r das Reporting relevanten Zust nde chronologisch gelistet 21 Quota bezeichnet in diesem Fall die Begrenzung des Speicherplatzes eines E Mail Postfachs 22engl f r abprallen 16 2 7 Data Warehouse e DISCOVERED Ein neues Mailing wurde in das System eingebracht Dies kann ber mehrere Schnittstellen geschehen Einige Kunden geben die relevanten Daten ber die Webschnittstelle ein andere bevorzugen die bermittlung per FTP e IMPORT RUNNING Hier wird der Inhalt der E Mail eingelesen e IMPORT FINISHED Die Ubermittlung von E Mail Body und Header an die Datenbank ist in die sem Status abgeschlossen e IMPORT RECIPIENT RUNNING Die Empf ngerliste wird standardm ig per csv Datei bertragen Sie ent h lt neben E Mail Adresse meist empf ngerspezifische Daten die mit in die personalisierte E Mail eingebunden werden e IMPORT RECIPIENT FINISHED Dieser Status gibt an dass die Empf ngerliste eingelesen wurde und das Mai ling versendet werden kann e SHIPMENT PLANNED Der Versandzeitpunk
22. eine klare Differenzierung der einzelnen Empf ngeraktionen zu erreichen werden in der folgenden Auflistung die m glichen Aktionen voneinander abgegrenzt e E Mail bermittelt Der Empfang einer E Mail l sst sich nicht immer verifizieren Andererseits in formiert ein auftretender Bounce siehe Abs 2 6 3 ber eine nicht zugestellte E Mail Eine eindeutige Empfangsbest tigung stellt das ffnen der E Mail bzw Klicken auf einen der in der E Mail enthaltenen Link dar engl f r Spurbildung 14 2 6 Reporting E Mail Empf nger Information rm Link Empf nger und Mailingld Tracking Server Weiterleitung Webserver Speicherung Reporting Datenbank Abbildung 2 4 Tracking Ablauf e E Mail ge ffnet Ein m gliches Verfahren das dem Sender den erfolgreichen E Mail Versand best tigen kann ist die in E Mail Programmen w hlbare Option Lesebest tigung anfordern Diese Lesebest tigung kann jedoch vom Empf nger unter dr ckt werden wodurch diese Option an Aussagekraft verliert Eine weitere M glichkeit die ffnung zu verifizieren ergibt sich ber das Ein binden einer Grafik die ber den Tracking Server geladen wird Es gen gt ein transparenter Pixel der keinen nennenswerten Traffic verursacht Diese Gra Dk wird ber eine URL eingebunden welche einen personalisierten Schl ssel enth lt Er setzt sich aus der ID des Empf ngers und des Mailings sowie der Zieladresse zusammen Hie
23. gen an die Visualisierung und Benutzerinteraktion stellt Aus der Kundenresonanz l sst sich schlie en dass die derzeitige technische Umsetzung der Reportingfunktio nen unzureichend ist Die wesentlichen Kritikpunkte betreffen die Darstellungsge schwindigkeit sowie die fehlenden Varianten der Darstellungsm glichkeiten Das in dieser Arbeit betrachtete Projekt hat daher zum Ziel eine intuitiv zu bedienende Applikation mit modernem Design zu erstellen die dem Kunden ein performantes und individuell anpassbares Reporting bietet Das vorliegende Dokument soll jenen Entwicklern als Erfahrungsbericht dienen die Flex und PHP kombinieren wollen Die Reportingapplikation stellt ein praxisnahes Fallbeispiel dar Es erlaubt anhand diverser Einzelbeispiele die konkrete technische Umsetzung mit Hilfe der Flex Technologie Begleitend dazu werden die Vor und Nachteile sowie Alternativen diskutiert Die Intention dieser Arbeit ist es dem Ent wickler die Technologie derart vorzustellen dass er die geschilderten Erfahrungen auf eigene Projekte bertragen kann Die Motivation die diesem Projekt zugrunde liegt ist die Weiterentwicklung der Reportingfunktionalit t Im nachfolgenden Abschnitt soll zudem die allgemeiner gefasste Motivation aus Kundensicht n mlich die Bedeutung des Reportings erl u tert werden Weitere Informationen zum eLettershop h lt das auf der CD befindliche Benutzerhandbuch bereit 1 Einleitung 1 1 Motivation Das I
24. m glichen Einfluss auf ihre seri se eMail Kommunikation Bescheid wissen Allgemein gilt dass sich mit zunehmendem Umfang der zugrundeliegenden Daten s tze die Belastbarkeit der Analyseergebnisse verbessert vgl http www ecin de marketing bildunterdrueckung zugegriffen am 13 April 2009 18 3 Untersuchung In den folgenden Abschnitten werden die Eigenschaften einer Flex L sung mit ih ren Vor und Nachteilen er rtert und Alternativen aufgezeigt Durch eine gezielte Recherche nach bekannten Problemen k nnen diese bereits in der Konzeptionspha se ber cksichtigt und sp tere Fehlentwicklungen vermieden werden Dabei liegt das Hauptaugenmerk auf den m glichen Schnittstellen zwischen Flex und PHP Neben der generellen Funktionsweise werden unterschiedliche Implementierungshilfen und Frameworks verglichen 3 1 Eignung von Flex Nachdem in Abschnitt 2 4 bereits grundlegende Informationen zu Flex vermittelt wurden sollen nun wesentliche Vor und Nachteile von Flex Applikationen diskutiert werden Zu ber cksichtigen ist dass es sich bei dem Ausgabeformat von Flex um eine Flash Datei handelt weshalb auch dieser Bereich zu betrachten ist 3 1 1 Vorteile Die Verwendung von Flex wurde durch den Auftraggeber vorgegeben der seine Entscheidung wie folgt begr ndet e Optik Flash Applikationen zeichnen sich besonders dadurch aus dass vektorbasierte Grafiken verwendet werden k nnen Dadurch kann eine sehr effiziente ber
25. me oe Be a 45 4 3 MVC Implementierung nn 46 4 4 Softwarearchitektur 2 2 2 0 0 0 020000 eee eee 46 4 4 1 Unified Modelling Language UML 46 4 4 2 Strukturierung 22222 Coon 47 4 5 Verbindungsaufbau zum PHP Backend 49 Aba Ablauf teen ook Ede re ele iren Men ergi e eck E 49 4 5 2 Remote Objekt 1 4 tal Pet hae ec re Da ee 49 4 6 Sicherheit te Tale 2 2 4 EE TEE Gl E es 52 4 6 1 Sicherheit ohne SI 53 4 6 2 Authentifizierung 204 53 4 6 3 SESSIONS seb hs we See eb dk eee ee ee AE a 54 7 Darstellung su tani 3 4 2204 a ai D we oe ade a 55 4 7 1 Anordnung der Hauptelemente 55 2 Dashboard exe s Meder Parka Bch ee Al Ps 56 4 7 3 Barrierearme Flash Applikationen 58 4 8 Usability Engineering 0 0 nn 59 4 8 1 Ergonomische Gestaltung 59 48 2 Heuristiken rar e Ban en dee en ea 61 4 8 3 Usability in Rich Internet Applications 2 2 2 63 4 9 Empirische Evaluierung 0 02 2 0 000002 ae 63 ZE Pr tb typr 2 422 a eTa ot ag BE hops ie kd ak aed ne d 63 4 9 2 Vorbereitung und Ablauf 2 64 4 9 3 Aufgabenstellung 02 220 00 65 4 9 4 Fazit und Analyse 5 Realisierung 5 1 Programmierung 5 1 1 Stylesheets 5 1 2 Ladezeiten 02 5 1 3 States und Transitions 5 2 Darstellung 521 Ment ee nen 522 Halters parai ea e
26. mierung Intuitiver gestaltet sich die Arbeit zudem durch die Verwendung von Pa rametermasken Diese zeigen dem Anwender direkt die zur Verf gung stehenden Funktionen Beim Erstellen eines neuen Flex Projekts wird der Entwickler durch einen Wizard unterst tzt Dieser fragt den Anwender welcher Applikationstyp erstellt werden soll Neben einer Webanwendung die im Flash Player l uft wird die Option angeboten eine Desktopanwendung zu erstellen welche mit Adobe AIR ausgef hrt werden kann 2 4 4 Flex Charting Als Erweiterung zum Flex SDK erlauben es die kommerziellen Flex Charting Komponenten Diagramme effizient zu implementieren Beispielsweise sind vorde finierte Kreis und Liniendiagramme verf gbar welche f r den zu realisierenden Reportingclient genutzt werden Das folgende Code Beispiel 2 3 zeigt anschaulich wie effizient die Erstellung eines Kreisdiagramms mit Hilfe von MXML erfolgen kann lt mx PieChart id pieCharti Komponente dataProvider pieDataProvider Datenbereitstellung lt mx series gt lt mx PieSeries id pieSeriesi Datensatz field Qdata gt Datenfeld lt mx PieSeries gt lt mx series gt lt mx PieChart gt o s Q a fF Go HM MH Quellcode 2 3 Beispiel Flex Kreisdiagramm Eclipse ist ein Open Source Editor mit Unterst tzung f r viele Programmiersprachen siehe http www eclipse org engl f r Ziehen und Fallenlassen bezeichnet eine Methode um auf einer Benut
27. on Blend 213 an Presentation Core Aktuell befindet sich Silverlight in der a Version 2 0 Seit M rz 2009 ist die Ver sion 3 0 im Beta Status erh ltlich Als ein Produkt vom Softwarehersteller Microsoft unterst tzt Silverlight nativ das Design einer Windows konformen Benutzerschnittstelle Dadurch verein Abbildung 3 1 Silverlight Architektur facht sich die Entwicklung von RIAs im Microsoft Windows Look and Feel Folgendes Code Beispiel zeigt die Erstellung eines Buttons in der Sprache XAML Networking Dom Scripting lt UIControls Button Komponente Canvas Left 10 Canvas Top 10 Positionierung Text Klick mich Beschriftung Click Funktionsname gt Funktion A o NH Quellcode 3 1 Beispiel Silverlight Button Die Silverlight Architektur wird in Abb 3 1 dargestellt siehe http www microsoft com NET Hsiehe http www python org vo http de wikipedia org wiki Microsoft_Silverlight zugegriffen am 21 April 2009 13siche http www microsoft com germany expression products Overview aspx key blend siehe http www microsoft com germany expression silverlight 15Die Bezeichnung Look and Feel steht fiir Designkonformit t 22 3 2 Alternativen zu Flex 3 2 2 JavaFX SUN als Entwickler der weit verbreiteten Programmiersprache Java ver ffentlichte im Dezember letzten Jahres JavaFX in Version 1 016 Wie der Name bereits vermu ten l sst basiert dieses Entwicklungsframewor
28. unterscheiden Die im Vergleich zum Flashplayer und dem Java Plugin geringe Verbreitung des Browserplugins Silverlight vgl Abb 3 3 f hrt dazu dass der Endanwender in der Regel die Technik nicht ohne zus tzlichen Installationsaufwand nutzen kann Die notwendigen Plugins sind f r alle g ngigen Browser kostenlos verf gbar wobei diese Browser wiederum auf der Mehrzahl der Betriebssysteme lauff hig sind Hierdurch ergibt sich eine de facto Plattformunabh ngigkeit Auf Entwicklerseite ergeben sich wenn auch nur geringe Einstiegsh rden aufgrund der neueingef hrten Objektbeschreibungssprachen Im Falle von JavaFX ist der in itiale Aufwand sich die Sprache JavaFX Script anzueignen aufgrund ihrer Anders artigkeit vgl Quellcode 3 2 bez glich bestehender Sprachen am gr ten Die technische Voraussetzung zur Entwicklung von RIAs mit der jeweiligen Techno logie sind entsprechende Programmierwerkzeuge Diese werden von den Herstellern im Wettbewerb um Marktanteile kostenlos zur Verf gung gestellt Zus tzlich wird ihre Attraktivit t gesteigert indem m glichst viele Plattformen unterst tzt werden Des Weiteren festigt sich der Trend hin zu Open Source Java Flex XML etc Mit dieser Philosophie gehen folgende gruppenspezifische Vorteile einher 24 3 2 Alternativen zu Flex Sprachen MXML XAML JavaScript Java P ActionScript ASP NET u weitere JavaFX Script u mind Adobe Flash Java Plugin mit Browser ben tigt Player 9 Si
29. CO arvato BERTELSMANN N UNIVERSIT T PADERBORN Die Universit t der Informationsgesellschaft Fakult t f r Elektrotechnik Informatik und Mathematik Fakult t f r Kulturwissenschaften Diplomarbeit Untersuchung Konzeption und Realisierung eines Flex basierten Reportingclients mit PHP Backend Moritz Christian Matrikelnummer 6361190 E Mail moritzchr gmail com Paderborn den 14 Mai 2009 vorgelegt bei Prof Dr Gerhard Szwillus und Martin K rner Ehrenw rtliche Erkl rung Hiermit versichere ich die vorliegende Arbeit ohne Hilfe Dritter und nur mit den angegebenen Quellen und Hilfsmitteln angefertigt zu haben Alle Stellen die aus den Quellen entnommen wurden sind als solche kenntlich gemacht worden Diese Arbeit hat in gleicher oder hnlicher Form noch keiner Pr fungsbeh rde vorgelegen Paderborn den 14 Mai 2009 Moritz Christian iii iv Inhaltsverzeichnis 1 Einleitung 1 1 Motivation 1 2 Die Entwicklung des World Wide Web WWW Grundlagen 2 1 PHP Hypertext Preprocessor Model View Controller IMMO 2 2 2 3 2 4 2 5 2 6 2 7 3 1 3 2 3 3 Zend Framework Adobe Flex 2 41 MXML 2 4 2 ActionScript 2 4 3 Flex Builder 2 4 4 Flex Charting E Mail e 2 5 1 Simple Mail Transfer Protocol SMTP 2 5 2 Kopfzeilen Header 2 5 3 Inhalt Body Reporting 2 6 1 Mailing
30. ESERVED d Login SUCHE ALLE STAR INFOS VON A Z Registrierer Suche in 22 645 Videos Go ABC GHIJKLMNOPQRS ewslett TUV z Suche auf MTV GOF NEWS TV MUSIC CHARTS VIDEOS FOTOS EVENTS BLOG VIDEOQUIZ GAMES WIN MESSENGER TOP VIDEO Oasis Supersonic live TOP VIDEO Miss Kitten 1000 Dreams AUFT mit Das Bo K Abbildung 1 3 Deutscher MTV Webauftritt 2009 1 2 Die Entwicklung des World Wide Web WWW W hrend HTML zur Abbildung statischer Inhalte bereits ausreicht ist es f r die Realisierung komplexerer Interaktionen ungeeignet Daher entstanden schon recht fr h erste Ans tze zum Aufbau dynamischer Webseiten vgl PHP Abs 2 1 welche auch die Einbindung von Datenbanken ber cksichtigten Trotz der dadurch erreichten Interaktivit t k nnen konventionelle Webapplikationen noch nicht den Funktionsumfang von Desktop Software bieten Aus verschiedenen Gr nden u A dem der Plattformunabh ngigkeit zeichnet sich seit einigen Jah ren der Trend zu desktop hnlichen Webapplikationen ab Solche Webanwendungen fallen in die Rubrik Rich Internet Application In Rich Internet Anwendungen RIAs vereinen sich die Funktionalit t und der Komfort von klassischen Windows Desktop Anwendungen mit dem breiten Einsatzspektrum und der preisg nstigen Bereitstellbarkeit von Webanwendungen Eine fr he Entwicklung in diese Richtung initiierte SUN mit so genannten Java Applets welche sich jedoch nicht durchsetzen konnten W
31. Fall noch nicht relevant da der Reportingclient zun chst 3 siche http www nngroup com reports flash Zuel Szw08 33Horizontales Prototyping wird in der fr hen Design Phase angewandt Es dient dem Test der grafischen Benutzerschnittstelle der Navigation im System sowie der Anordnung der einzelnen Funktionen 63 4 Konzeption mit Dummy Daten arbeiten kann Dabei ist zu beachten dass die Testumgebung zun chst keine nennenswerten Latenzzeiten verursacht Um den Usabilty Test rea listisch zu gestalten sind entsprechende Totzeiten zu simulieren wie sie durch die Datenverarbeitung des PHP Backends zu erwarten sind Dieses Verhalten bietet dem Probanden die M glichkeit des asynchronen Arbeitens und dem Entwickler die Untersuchung zweier Aspekte e Plausibilit tspr fung Es soll untersucht werden ob Probleme entstehen falls mehrere Prozesse in kurzer zeitlicher Abfolge initiiert und parallel ausgef hrt werden Neben der Software Technik die solche Aufgaben leisten muss ist das Verst ndnis des Anwenders diesbez glich zu untersuchen e Erwartungskonformit t Entscheidend f r die weitere Entwicklung ist dass der Nutzer die Funkti onsm glichkeiten erkennt Auf die Option bei Totzeiten weitere Funktionen ausf hren zu k nnen muss evtl hingewiesen werden Bei der Erstellung des Prototypen werden die bereits genannten Grunds tze ergo nomischer Gestaltung ber cksichtigt 4 9 2 Vorbereitung und Ablauf Der Usab
32. Mailings anzeigt wodurch eine kompakte und somit bersichtliche Ansicht erreicht wird Erwartungskonformit t Eine erwartungskonforme Applikation zeichnet sich dadurch aus dass die Ar beitsabl ufe in einer dem Nutzer bekannten Form gestaltet werden Die Be nutzer des Reportings kennen bereits das eLettershop Frontend Dort verwen dete Begriffe sollten daher im Reportingclient wieder aufgegriffen werden Die Darstellungsart wird nicht dem eLettershop Frontend gleichen da es nur ein geschr nkte M glichkeiten bietet Dennoch sollen die blichen Erfahrungen mit Webanwendungen und Desktopsoftware ausreichen um die Applikation intuitiv nutzen zu k nnen Fehlertoleranz Grunds tzlich sollten fehlerhafte Benutzereingaben abgefangen werden Hier bei kann es sich um Daten z B ung ltige Datumsformate wie auch unvor hergesehene Benutzeraktionen handeln Eine Ma nahme ist die gezielte Be nutzerf hrung In der Flex Applikation werden neben einer Datumsauswahl die ber einen Kalender erfolgt Comboboxen zur Visualisierung und Aus wahl anwendbarer Funktionen eingesetzt Falls dennoch Fehler auftreten sind aussagekr ftige Fehlermeldungen wichtig Das Benutzerverhalten darf unter keinen Umst nden die Stabilit t des Systems beeinflussen Individualisierbarkeit Individuelle Anpassungen der Applikation sollten unterst tzt werden Im Re portingclient sind relevante Anzeigeelemente frei skalierbar bis hin zur Voll bildanzeige Um die
33. Methoden aufgebaut werden Bevor jedoch auf den konkreten Schnittstellenvergleich eingegangen wird werden zun chst generelle Funktionswei sen unterschiedlicher Verbindungskonzepte zwischen Flex und PHP beschrieben 3 3 1 Webservice Webservices sind ber das Internet abrufbare Dienstleistungen z B Websuche Wa renlogistik Um die Nutzung dieser Services so einfach wie m glich zu gestalten setzen die Anbieter auf so genannte APIs Das sind auf offenen Standards basieren de Schnittstellen welche die Abh ngigkeit von bestimmten Programmiersprachen und Betriebssystemen zwischen Anbieter und Nutzer vermeiden vgl KW02 Die Daten werden generell ber das XML Format ausgetauscht Flex bietet f r die Nut zung von Webservices die Komponente lt mx HTTPService gt vgl Abs 3 4 1 an 3 3 2 Remoting und RPC Remoting beschreibt das Senden von Objekten und Methodenaufrufen an andere Systeme Im Gegensatz zu einem Webservice wird kein XML Format gefordert Flex unterst tzt das Remoting durch die lt mx Remote0bject gt Komponente Die so genannten RPCs sind ein Bestandteil des Remotings RPC steht dabei fiir Remote Procedure Call und bezeichnet eine Methode um Daten zwischen Client und Server zu kommunizieren Diese Technik wird verwendet wenn die Prozedur die aufgerufen werden soll sich in einem anderen Adressraum befindet So genannte Stubs setzen die Zugriffe auf das RPC Protokoll um vgl Abb 3 5 Im Stub erfol
34. Norm Ergonomische Anforderungen f r B rot tigkeiten mit Bildschirmger ten EN ISO 9241 10 8 werden die Grunds tze der ergonomischen Dialoggestaltung definiert Diese werden im Folgenden n her erl u tert Weiterf hrende Beispiele findet der geneigte Leser in Szw08 e Aufgabenangemessenheit Es sollten nur Objekte angezeigt werden die f r den Benutzer relevant sind Daher sind z B nicht verf gbare Reportingfunktionen einzelner Mailings aus zublenden vgl http www einfach fuer alle de podcast 2006 kw51 zugegriffen am 12 April 2009 Zeg http www interactive quality de site DE int pdf IS0_9241 10 pdf zugegriffen am 13 April 2009 59 4 Konzeption 60 e Selbstbeschreibungsfahigkeit Wesentlich f r die intuitive Benutzung ist die unmittelbare Verst ndlichkeit al ler Bedienelemente Die Benutzung der Applikation sollte ohne Handbuch oder andere externe Informationsquellen m glich sein Hilfe Texte oder Formatvor gaben sind zwei Mittel die helfen k nnen Missverst ndnissen vorzubeugen Au erdem sind nach Benutzerhandlungen sofern zweckm ig R ckmeldun gen zu geben Steuerbarkeit Dem Nutzer soll ein individueller Prozessablauf erm glicht werden Dazu ge h rt z B die Wiederaufnahme von abgebrochenen Dialogen Zudem sollte er Ansichten anpassen und die Ablaufgeschwindigkeit selbst bestimmen k nnen Im Reportingclient wird z B ein einstellbarer Filter existieren der nur die ge w nschten
35. Schnittstelle Parameter resultObject Sie Sie e See See eee Ee Funktion Abbildung 4 9 ValueObject erhalten 4 5 2 Remote Objekt Um ein Remote Objekt erstellen und nutzen zu k nnen werden neben dem PHP Backend folgende drei Bestandteile in Flex ben tigt 49 4 Konzeption e XML Datei services config xml In der Datei services config xml wird der Endpoint angegeben der den sp te ren Zugriff auf die PHP Klassen mittels Zend_ Amf erm glicht Der Endpoint muss mindestens die folgenden Code Zeilen enthalten um als Schnittstelle zu t12 fungieren 1 lt php 2 Den Server instanziieren 3 server new Zend_Amf_Server 4 response server gt handle 5 echo response 6 gt Quellcode 4 1 Zend_ Amf_ Server F r das Class Mapping wird ebenfalls der Endpoint verwendet Jede Klasse die von Flex direkt angesprochen wird muss in folgender Form eingetragen werden Klasse registrieren 2 server gt setClass eLettershop_User_Remote 3 Class Mapping f r das User Value Object 4 server gt setClassMap UserVO eLettershop_User_Remote Quellcode 4 2 Beispiel Class Mapping UserVO MXML Objekt lt mx Remote0bject gt In dem Remote Objekt werden neben der aufzurufenden PHP Funktion so ge nannte Handler angeben welche das Resultat entgegennehmen und verarbei ten Man unterscheidet zwei verschiedene Arten von Handler die nachfolgend bes
36. Service Komponen te nicht aus um mit der REST Architektur eine voll funktionierende Schnittstelle ber HTTP zu PHP aufzubauen vgl http amfphp sourceforge net zugegriffen am 24 M rz 2009 Ein Zirkelbezug entsteht falls voneinander abh ngige Objekte sich gegenseitig referenzieren Ejne Rekursion bezeichnet eine sich selbst aufrufende Funktion vgl http osflash org documentation amf3 zugegriffen am 10 April 2009 30In diesem Fall bezeichnet das Load Balancing die Lastverteilung auf parallel arbeitende Server 3 vol http code google com p resthttpservice zugegriffen am 27 M rz 2009 29 3 Untersuchung 3 4 Schnittstellenvergleich In diesem Abschnitt werden konkrete Methoden vorgestellt welche die Kommunika tion zwischen PHP und Flex erm glichen Nachdem die M glichkeiten beschrieben sind wird abschlie end ein Fazit gezogen 3 4 1 HTTPService Eine schnell und einfach umsetzbare Variante Daten aus einem PHP Backend zu erhalten ist die Nutzung der in Flex implementierten lt mx HTTPService gt Komponente Diese verwendet lediglich das HTTP Protokoll und ben tigt somit keine wei teren Implementierungen wie z B ein Gateway Es k nnen unterschiedliche Text Strukturen meist handelt es sich dabei um XML auf die unterschiedlichen XML Formatierungen soll hier jedoch nicht n her eingegangen werden bermit telt werden Die Abwicklung verl uft ber ein in der MXML Datei erstelltes HTTPService O
37. angezeigte Zeile Combobox Liste mit Mehrfachauswahl SHIPMENT_FINISHED B IMPORT_RECIPIENT_RUNNING Al IMPORT_RECIPIENT_FINISHED SHIPMENT_PLANNED N SHIPMENT_RUNNING N SHIPMENT_FINISHED v Abbildung 4 3 Combobox und Liste e Versendungstyp Im PHP Backend wird zwischen Live und Testmailing unterschieden Test mailings werden in der Regel an eine kleine Empf ngerzahl versendet um z B die Darstellung zu berpr fen Der Anwender soll im Reportingclient die M glichkeit haben lediglich Live oder Testmailings zu betrachten e Mandant Es gibt Nutzer welche f r ihre eigenen Kunden Mailings im eLettershop erstel len In diesem Fall ist der direkte eLettershop Kunde ein Mandant Es bietet sich erneut eine Combobox an da die Menge an Mandanten meist berschau bar ist Eine Auswahl geschieht so schneller als die Suche ber Mandanten ID oder Mandantenname Der Ablauf der Filterung wird in Abb 4 4 verdeutlicht Alle gesetzten Filterkriterien werden als Parameter ber ein Remote Objekt an das PHP Backend gesendet Dort k nnen diese verwendet werden um die gew nschten Mailings als VOs in einem Array an den Flex Client zu bermitteln Anschlie end werden die MailingVOs in der Baumstruktur abgebildet 4 1 3 Status der Versendung Dieser Status im eLettershop Response bersicht genannt spiegelt den aktuellen Stand der verschickten E Mails wider So werden z B bereits ge ffnete E Mails ausgewi
38. as Internet Message Access Protocol IMAP ist ein Anwendungsprotokoll f r den Zugriff und die Verwaltung von E Mails auf Mailservern vol http www webopedia com TERM S SMTP html zugegriffen am 3 M rz 2009 12 2 6 Reporting 2 5 2 Kopfzeilen Header Der E Mail Header besteht aus mehreren f r den Empf nger relevanten Daten Er kann mit den Informationen eines Briefumschlages verglichen werden In der Regel enth lt der Header neben Absender und Empf ngeradresse zus tzliche Informa tionen wie z B den Zeichensatz des Bodys siehe Abs 2 5 3 die durchlaufenen E Mail Server oder die Antwortadresse Neben einigen wenigen Pflichtfeldern sind die meisten Angaben im Header optional F r das Reporting wird ein spezieller Parameter die Mailingidentifikationsnummer Mailingld gesetzt Dieser erlaubt das Zuordnen jeder einzelnen E Mail zu einem konkreten Mailing siehe Abs 2 6 1 2 5 3 Inhalt Body Im E Mail Body ist der eigentliche Inhalt der E Mail gespeichert Es existieren drei verschiedene Formate in denen eine E Mail verschickt werden kann e Text Beim Text Format handelt es sich um Inhalt in unformatiertem Text Bilder k nnen lediglich als Anhang versendet werden Die Formatierungen des Textes werden durch das E Mail Programm des Empf ngers bestimmt e HTML E Mails im HTML Format erlauben die bermittlung von formatiertem Text und eingebundenen Grafiken Bei diesem Format ist zu beachten dass nicht jedes
39. ation Mehrdeutige Abl ufe oder schwer verst ndliche Bedienelemente k nnen mit Tool Tips versehen werden Eine weitere M glichkeit sind statische Hilfe Texte die den Dialog erkl ren Hierbei ist jedoch auf bersichtlichkeit zu achten Im Reportingclient soll dem Anwender m glichst viel Darstellungsfl che zur Verf gung stehen weshalb sich Tool Tips in diesem Fall besser eignen Die genannten Heuristiken sollen in der Konzeptionsphase dabei helfen die Appli kation benutzerfreundlich zu gestalten 30Ejn Tool Tip ist in der Regel ein Textfeld welches beim Verweilen der Maus ber einem Objekt erscheint und dar ber informiert 62 4 9 Empirische Evaluierung 4 8 3 Usability in Rich Internet Applications Im Gegensatz zu einer herk mmlichen HTML Webseite ergeben sich durch die Ver wendung einer RIA zus tzliche Interaktionsm glichkeiten Ob ihre Nutzung einen positiven Einfluss auf die Usability hat h ngt u A von der Umsetzung ab Es han delt sich meist um neuartige Bedienelemente die dem Anwender nicht vertraut sind was sich negativ auf die Erwartungskonformit t auswirken kann Um diesen Effekt zu kompensieren ist bei der Konzeption der Benutzerschnittstelle verst rkt auf die Selbstbeschreibungsf higkeit zu achten Falls keine intuitive Bedienung durch den Anwender m glich ist muss dieser entsprechend instruiert werden Im n chsten Abschnitt soll daher ein Usability Test durchgef hrt werden um die Benutz
40. bbildung 5 12 Balkendiagramm Meh Abbildung 5 13 Steuerungsfunktionen in rere Mailings einem Diagramm besitzt wieder entfernt werden Gleichzeitig dient dieser der Hervorhebung des ent prechenden Mailings im Diagramm Sobald sich die Maus tiber dem Button befindet werden die tibrigen Mailings transparent dargestellt Durch die doppelte Funktions belegung des Buttons wird eine effiziente Nutzung der Benutzeroberfl che erreicht und die Ubersichtlichkeit bleibt erhalten 5 3 Pitfalls Um Flex Entwickler auf m gliche Komplikationen vorzubereiten sollen in diesem Abschnitt typische Pitfalls erl utert werden Generelles Problem sind die unpr zisen Fehlermeldungen besonders bei Verbindungsfehlern ber AMF PHP Fehler werden generell nicht genau spezifiziert Der Zend _Amf Entwickler Wade Arnold merkte an dass nur dann detaillierte Fehlermeldungen an Flex gesendet werden wenn das Test und nicht das Produktivsystem des Zend Frameworks aktiv ist Otherwise we do not return that data as an exception could have sensi tive information that could create a security risk Especially in the case of a db connection failure F r eine geeignete Fehlerdiagnostik bietet sich ein Proxy Service z B das kos tenpflichtige Programm Charles an der die Daten bertragung zwischen PHP und Flex protokollieren und anzeigen kann Dadurch k nnen neben konkreten Problemen z B fehlerhaftes Class Mapping auch redundante Daten bertragu
41. ben einer grafischen Oberfl che lediglich einen Webbrowser und ein VoIP Programm zur Verf gung stellt Verfolgt man diesen Gedanken wei ter so reduziert sich die Funktion des Betriebssystems auf die Ansteuerung der Rechner Hardware so dass die Funktionalit t herk mmlicher Betriebssysteme durch im Browser ausgef hrte Applikationen bernommen wird Im Falle einer solchen Entwicklung stellen RIAs einen wesentlichen Bestandteil der zuk nftigen Informa tionstechnik dar Voice over IP VoIP erm glicht das Telefonieren ber Computernetzwerke 80 Anhang A eLettershop Oberfl che a Formular zur cksetzen Format Allgemeine Daten Inhalt Empf nger Versand Anh nge Zusammenfassung Hier richten Sie die allgemeinen Daten Ihres Mailings ein 1 Mandant arvato systems NMI TA x 2 Name des Mallings 3 Betreff ed 4 Absendername 5 Absenderadresse 6 Antwortname 7 Antwortadresse Wissen Sie nicht welter Dann schauen Sie doch mal in unseren Film Mailing erstellen In 7 Schritten Oder konsultieren Sie das Benutzerhandbuch eLettershop v1 0 1897 2009 05 08T10 13 35 304325Z Impressum Abbildung A 1 Mailing erstellen 81 Anhang Titel 1D J Inhalts Typ auto mailing test Text Status Kodlerung Empfangerimport beendet amp Details utf 8 Priorit t Tracking 6 deaktiviert liche Priorit t Lesebest tigung deaktiviert RZ Anzahl Empf nger Enimie
42. bereits gegen ber dem eLettershop authentifiziert hat Somit er brigt sich f r diesen Fall die Notwendigkeit einer Login Startseite in Flex Diese Funktion erfordert so genannte Sessions welche im n chsten Abschnitt behandelt werden Um die erste Login Funktion ohne Hilfe von SSL sicher gestalten zu k nnen eignet sich das Protokoll Challenge Handshake Authentication Protocol CHAP Es verwendet einen 3 Wege Handshake dessen Ablauf in Abbildung 4 11 schematisch skizziert ist In Flex l sst sich diese Variante wie folgt umsetzen MSSL ist die Abk rzung f r Secure Sockets Layer und bezeichnet ein Ubertragungsprotokoll dass die Daten verschl sselt bertr gt 53 4 Konzeption 1 Challenge Client 2 Response 3 Accept Reject Abbildung 4 11 CHAP 3 Wege Handshake 1 Challenge Das PHP Backend schickt einen generierten Zufallswert Challenge an den Flex Client 2 Response Der Flex Client bildet aus einer Kombination von Challenge und eingegebe nen Benutzerdaten einen so genannten Hashwert Dieser wird an das PHP Backend zur ck geschickt 3 Accept Reject Parallel zu diesem Vorgang bildet das PHP Backend auf gleiche Weise den Hashwert Die Authentifizierung ist nur dann erfolgreich wenn diese beiden getrennt voneinander berechneten Werte bereinstimmen Durch diese Methode wird eine verschl sselte bermittlung des Passworts erreicht Der anschlie ende Datenaustausch zwischen Fl
43. bjekt lt mx HTTPService gt Es verf gt ber die Methode send die beim Aufruf einen HTTP Request mit gew nschten Parametern zu der im Ob jekt angegebenen Zieladresse schickt Ohne Verwendung eines Proxies mit Proxy Nutzung ergeben sich weitere M glichkeiten sind jedoch hier nicht relevant k nnen ausschlie lich die HTTP Methoden GET und POST verwendet werden Damit wird auf PHP Seite bereits erm glicht Datenbankabfragen auszuf hren das Ergeb nis in XML Struktur umzuwandeln und die Daten per HTTP Antwort zur ckzu geben Das Ergebnis wird in dem Objekt event result gespeichert welches noch einer Typkonvertierung bedarf Diese l sst sich im Vorfeld durch den Parameter resultFormat vgl Quellcode 3 3 in dem HTTPService Objekt bestimmen lt mx HTTPService id httpServiceObjekt url phpDatei method POST result handleResult event fault handleFault event resultFormat text gt lt mx request gt lt username gt username text lt username gt lt mx request gt lt mx HTTPService gt ob o N Quellcode 3 3 Beispiel HTTPService Objekt Da das PHP Backend in diesem Projekt bereits vorhanden ist und die R ckgabe werte nicht im XML Format vorliegen handelt es sich bei dieser Umsetzung um einen erheblichen Mehraufwand Alle ben tigten Daten im PHP Backend m ssten in eine XML Struktur integriert werden um diese an den Flex Client bermitteln 32 Gateway bezeichnet in diesem Fa
44. ch jeweils nur auf einen speziellen Link im E Mail Body e Klicks gesamt Die gesamten Klicks spiegeln alle Klicks der Empf nger wider Es werden auch mehrere Klicks eines Empf ngers auf einen Link gez hlt e Klicks eindeutig Aus der Anzahl der eindeutigen Klicks wird nur ein Klick pro Empf nger gez hlt Mehrere Klicks eines Empf ngers auf den gleichen Link bleiben hier somit unbeachtet 42 4 1 Grundfunktionen des Reportings e Klickrate empfangene E Mails Die Klickrate gibt in diesem Fall an in welchem Verh ltnis die Klicks zu allen empfangenen E Mails stehen Klicks Klickrate 4 1 re Empfangene Mails 1 e Klickrate ge ffnete E Mails Bei dieser Klickrate wird lediglich das Verh ltnis der Klicks zu allen ge ffneten E Mails berechnet 4 1 6 Diagramme anzeigen und vergleichen Grunds tzlich werden f r die Anzeige sowie den Vergleich von Diagrammen drei Bereiche ben tigt e Auflistung der Mailings e Auflistung der Funktionen e Visualisierung der Ergebnisse An dieser Stelle ist die Ber cksichtigung der Usability sehr wichtig da die zu gestal tende Oberfl che die wesentliche Benutzerschnittstelle darstellt Sie soll kompakt intuitiv und flexibel sein Im einfachsten Fall wird nur eine Reportingfunktion auf nur ein einzelnes Mailing angewendet Intuitiv f ngt der Ablauf mit der Auswahl eines Mailings an Bevor die gew nschten Daten angezeigt werden wird noch die daf r vorgesehene Reporting funktion au
45. che zusammensetzt Das bedeutet dass mit der Aggregation der Oberfl che die Variablendefinition automatisch durch die Flex Umgebung erfolgt In Abb 4 1 wird der Projektrahmen skizziert um zu verdeutlichen welche Bereiche bereits implementiert und welche noch zu realisieren sind Das PHP Backend ist um die Remote Klassen zu erweitern Diese stellen die Repor tingdaten f r die Flex Applikation zur Verf gung In den folgenden Unterkapiteln wird auf m gliche technische Umsetzungen eingegangen 37 4 Konzeption BACKEND Remote Klassen Daten gt Flex SDK PHP Backend Darstellung Darstellung FRONTEND eLettershop Frontend Link gt Flex Reportingclient SW Bereits vorhanden U Zu realisieren Abbildung 4 1 Projektskizzierung 4 1 Grundfunktionen des Reportings In den folgende Abschnitten werden die Grundfunktionen der Reporting Applikation beschrieben Das Portfolio dieser Funktionen ist ma geblich durch Kundenw nsche gepr gt worden 4 1 1 Darstellung von Mailings Aufgrund der teilweise hohen Anzahl im System befindlicher kundenspezifischer Mailings wird eine geeignete Darstellungsform ben tigt Diese soll im neuen Repor tingclient effizienter bersichtlicher flexibler und intuitiver gestaltet sein Hierzu bietet sich die Darstellung als Baumstruktur an welche eine einfache Abbildung hierarchischer Strukturen erlaubt vgl Abb 4 2 F r die Kunden ist zudem der Vergleich von th
46. chrieben werden e ActionScript Funktionen resultHandler event faultHandler event Bei erfolgreicher Verbindung und bermittlung von Daten wird die resultHandler event Funktion ausgef hrt Die bergebene Variable event ist vom Typ ResultEvent Treten hingegen bermittlungfehler auf so wird die faultHandler event Funktion aufgerufen In diesem Fall werden Error Code und Fehlermeldung in einem FaultEvent Objekt zur ckgegeben In Abb 4 10 wird ein m glicher Ablauf f r die Erstellung eines Remote Objekts skizziert Die eigentliche Komponente lt mx RemoteObject gt wird im folgenden Code Beispiel dargestellt 12Beim Endpoint handelt es sich in diesem Fall um eine URL die den Verbindungsaufbau zu PHP initialisiert Handler sind Funktionen die aufgerufen werden sobald ein gewisses Ereignis eintritt In diesem Fall wird die Handler Funktion ausgef hrt wenn das Result Objekt vollst ndig empfangen wurde 50 4 5 Verbindungsaufbau zum PHP Backend XML Datei services config xml Soa Remoting Service erstellen Endpoint URL festlegen Remote Objekt erstellen MXML Objekt lt mx RemoteObject gt Zielfunktion registrieren Fault und Result Handler angeben ActionScript Funktionen resultHandler event faultHandler event zz Fault und Result Handler erstellen jeweils die Result Objekte verwerten Abbildung 4 10 Remote Objekt in Flex erstellen lt mx RemoteObject id am
47. cript und PHP mittels AMF realisiert Dieser geschieht im Gegensatz zu den bereits vorgestell ten bertragungstechniken bin r Serialisierung und Deserialisierung werden von AMFPHP im Hintergrund automatisch durchgef hrt AMFPHP allows thin client applications built in languages such as Flash Flex and AIR to communicate directly with PHP class objects on the server Zus tzlich zu Objekten und Arrays k nnen auch R ckgabewerte von Datenbankan fragen bertragen werden 3 4 4 Zend Amf Zend Amf ist ein Paket des Zend Frameworks Ebenso wie AMFPHP handelt es sich dabei um eine von Wade Arnold entwickelte Schnittstelle Sowohl Zend_ Amf wie auch AMFPHP erm glichen eine effiziente bin re Daten bertragung zwischen ActionScript und PHP However there will be one major change the core of AMFPHP will be built from the Zend Framework AMF library which is being maintained be myself and the rest of the Zend Framework community AMFPHP will have an additional code base that continues to make it simple for beginner to intermediate developers to start working That is really the only difference in functionality Let s face it if you were trying to use AMFPHP in an enterprise capacity it did not meet your needs Laut dem f hrenden Entwickler von AMFPHP ist dieses f r kleinere Projekte konzi piert und eignet sich aufgrund der einfachen Anwendung besonders f r den Einstieg gl http osflash org projects amfphp zugegrif
48. d in einem Aktivit tendiagramm siehe Abb 4 8 gezeigt welche Aktivit ten notwendig sind um eine Reportingfunktion zu nutzen Der Filter kann mit individuell eingestellten oder aber mit vordefinierten Werten angewendet werden Durch das Diagramm wird deutlich dass nachdem eine Repor tingfunktion gew hlt wurde dem Nutzer wieder alle Instanzen des vorher durchlau fenden Workflows direkt zu Verf gung stehen Diese Funktionalit t muss umgesetzt werden um dem Usability Aspekt der Steuerbarkeit vgl Abs 4 8 1 Rechnung zu tragen 4 4 2 Strukturierung Es gibt verschiedene Dateiformate die f r dieses Projekt relevant sind wie z B Grafiken oder eigene MXML Komponenten Diese Dateien gilt es in einer geeigne ten Verzeichnisstruktur abzulegen um bersichtlichkeit zu erreichen So erhalten z B die selbst erstellten MXML Komponenten einen eigenen Ordner components Durch einen Namespace kann den entsprechenden Komponenten ein beliebiger Pr fix zugewiesen werden In dem lt mx Application gt Tag k nnen durch folgenden Pa rameter Komponenten eingebunden und das Namespacing spezifiziert werden xmlns comp components F r Unterordner wird die Punkt Notation verwendet Somit k nnen alle Komponen ten im Ordner components mit dem Tag lt comp KomponentenName gt angesprochen werden Zus tzlich soll es eine Klasse Const geben die alle ben tigten Konstanten f r die Anpassung der Applikation beinhaltet So si
49. den k nnen wurde eine automatisch Aktualisierungsfunktion imple mentiert Sie sorgt daf r dass die Darstellung der Reportingdaten in quidi stanten Zeitschritten erneuert wird Um den Dialog mit dem Benutzer einfach und bersichtlich zu halten kann der Anwender die Aktualisierungsfrequenz erst einstellen nachdem die daf r vorgesehende Checkbox aktiviert wurde Damit die Serverbelastung clientseitig begrenzt wird betr gt der Aktualisie rungsabstand mindestens f nf Sekunden e Schriftgr en nderung Der Anwender kann in der Applikation zwischen drei Schriftgr en entschei den Die Bedienelemente sind stilisiert durch drei aufeinander folgende A s in aufsteigender Schriftgr e Diese Symbolik spiegelt auf intuitive Weise die Funktion wider und wird in der Regel auf barrierearmen Webseiten verwendet 71 5 Realisierung e Vollbildmodus Obwohl Flash Dateien in g ngigen Webbrowsern auch direkt ge ffnet und angezeigt werden k nnen bietet die Einbettung in HTML weitere Steue rungsm glichkeiten So kann im HTML Template z B der Parameter allowFullscreen im object Tag so gesetzt werden dass der Anwender die Flash Applikation im Vollbildmodus betrachten kann Um diese Funktion in der Flex Applikation nutzen zu k nnen wird ein Bedienelement implementiert welches folgenden Befehl aufruft systemManager stage displayState StageDisplayState FULL_SCREEN In diesem Modus werden keine Browserelemente dargestellt Hierd
50. der Aufgabenstel lung laut ge u ert und protokolliert werden W hrend des Tests ist die direk te Kommunikation zwischen Proband und Beobachter zu vermeiden um den Testverlauf nicht zu verf lschen Die R ckmeldungen erm glichen den Ab gleich zwischen der realisierten Benutzerf hrung und dem tats chlich eintre tenden Benutzerverhalten Auftretende Diskrepanzen erlauben R ckschl sse bez glich erreichter Selbstbeschreibungsf higkeit sowie Erwartungskonformi t t 5 Feedback Nachdem die Aufgabenstellung abgearbeitet wurde findet ein kurzes Gespr ch mit dem Probanden statt Dort hat dieser die M glichkeit Unklarheiten oder Schwierigkeiten bei der Abarbeitung sowie Kritik z B nderungsw nsche zu u ern 4 9 3 Aufgabenstellung Jeder Proband erh lt die gleiche Begr ung und das gleiche Suchproblem Folgende Einf hrung wird dem Probanden vorgetragen Hallo Diese Untersuchung findet im Rahmen meiner Diplomarbeit statt und dient der Aufdeckung von Usability Problemen Konkret geht es um den Test einer Reporting Applikation f r den E Mail Massenversand die das Empf ngerverhalten in Form von Graphen visualisiert Es soll z B dargestellt werden wie viele Empf nger die E Mail ge ffnet haben Mit Deiner Hilfe m chte ich feststellen ob das Programm ohne Vorkenntnisse und Hilfestellungen benutzbar ist Nicht du wirst getestet sondern das Programm Du kannst also ganz entspannt die Aufgabenstellung angehen Auf
51. der ihr zugrundeliegenden Technologien wird im n chsten Abschnitt gegeben Dieser stellt zudem einen kurzen geschicht lichen Abriss der Entwicklung des World Wide Web von der Ver ffentlichung der Sprache HTML bis hin zu den Rich Internet Applications dar 1 2 Die Entwicklung des World Wide Web WWW Die Bezeichnung World Wide Web wird h ufig als Synonym f r das Internet ver wendet obwohl es sich hierbei um lediglich einen von vielen Diensten E Mail FTP etc des Internet handelt Das World Wide Web in seiner heutigen Form wurde im Jahre 1989 von dem britischen Informatiker Sir Timothy John Berners Lee im Rahmen seiner T tigkeit bei der Europ ischen Organisation f r Kernforschung ent wickelt vgl MS04 Seit der Ver ffentlichung im April 1993 erfuhr es eine rasante Entwicklung Um am WWW partizipieren zu k nnen wird neben einer Anbindung zum Internet ein Webbrowser ben tigt Dieser stellt formatierte Texte und Grafiken dar welche von Webservern geladen werden Zudem erm glicht er mit Hilfe von Hyperlinks im Folgenden als Links bezeichnet die einfache Navigation zwischen Webseiten Zu s tzliche Funktionalit t wird durch die Verwendung von Browser Plugins erreicht Diese erlauben z B die Wiedergabe von audiovisuellen Daten Die ersten Webseiten wurden vollst ndig mittels der von Tim Berners Lee entwi ckelten Sprache HTML beschreiben und waren somit rein statisch Die entschei dende Funktionalit t dieser S
52. e ona a a we era eh Bo a a 71 Filtereinstellungen oaoa aaa 73 Datumsauswahl 2 52 2 22 EE 2 a ae ae E 73 Baumstruktur Mailings 2 22 Co oo oo nn 73 Dashboard Seet Zu 2 Gain dere Reg wa OG a ek 74 Auflistung der Links 2 2 0 nn 75 Liniendiagramm Anteil der Klicks 2 2222 2 76 Balkendiagramm Klicks pro Stunde 76 Kreisdiagramm Response Ubersicht 2222222 2 22 76 Geo Tracking Lokalisierung der Empf nger 76 Balkendiagramm Mehrere Mailings 77 Steuerungsfunktionen in einem Diagramm 77 Mailing erstellen mcs amp 8 ee ser dr Te EI 81 Mailing nsehen r 2 hn m ion ara ren 82 Reporting ansehen 82 Quellcodeverzeichnis 2 1 2 2 2 3 3 1 3 2 3 3 4 1 4 2 4 3 4 4 4 5 Beispiel MXML Komponente 00004 10 Beispiel ActionScript Funktion 0 4 10 Beispiel Flex Kreisdiagramm 11 Beispiel Silverlight Button 2 2 2 on nn nn 22 Beispiel JavaFX Button 24 Beispiel HTTPService Objekt 2 2 2 2m nenn 30 Zend Amf Server 50 Beispiel Class Mapping User 50 Beispiel RemoteObject 51 Beispiel AsyncToken und ItemResponder 52 Tile EC saits 0 te ie Hote sb adi Bhan ae re dpe ap sa al da 57 87 Quellcodeverzeichnis 88 Literaturverzeichnis ALBO8 Rob Allen Rick Lo and Stephen Brown Zend Framework in Action Manning Pubn 2008 BG08 Andreas Bauer and Holger G nzel Data
53. e Daten bin r bermittelt und sind somit nicht direkt lesbar jedoch sind die Spezifikationen f r AMF frei zug nglich Es besteht also die Gefahr dass die bermittelten Daten mitprotokolliert und bersetzt werden Besonders sensible Daten sind dabei Benutzernamen und Passw rter Falls diese abgefangen werden ist ein Missbrauch der Kundendaten nicht auszuschlie en Ei ne Option die Authentifizierung ohne SSL m glichst sicher abzuwickeln wird im n chsten Abschnitt erl utert 4 6 2 Authentifizierung Ein wichtiger Aspekt beim Aufbau einer Flex Applikation mit PHP Backend ist die Umsetzung der Authentifizierung Selbstverst ndlich sollen nur angemeldete Nut zer auf die Reportingoberfl che Zugriff haben Zudem sollen die Kunden nur ih re eigenen Mailings einsehen k nnen Um dies zu gew hrleisten bedarf es einer Login Funktion der die potentiellen Nutzer ihre Anmeldedaten bergeben Der Re portingclient ist sowohl direkt ber eine URL als auch ber das Webfrontend des eLettershops erreichbar Dieser Umstand erfordert zwei verschiedene Authentifizie rungsm glichkeiten e Login ber den Reportingclient Beim Start des Reportingclients werden zun chst die Anmeldedaten abgefragt Diese Daten m ssen allerdings ber das Internet verschickt werden und somit tritt die in Abschnitt 4 6 1 beschriebene Problematik ein e Authentifizierung mittels eLettershop Session In diesem Fall erkennt der Reportingclient dass der Nutzer sich
54. e shouldn t forget that Java really started as an RIA technology back in the late 90s with applets 1 Ein Durchbruch gelang mit der Webtechnologie Ajax die auf den bereits eta blierten Technologien JavaScript und XML basiert Mit Ajax ist es m glich die Aktualisierung einer Webseite auf bestimmte Bereiche zu beschr nken Folgendes Zitat fasst die daraus hervorgehenden Vorteile zusammen Recently and rapidly the combination of JavaScript and XML Ajax has improved the Web experience Using Ajax wholesale page reloads are unnecessary feedback is more immediate and browser bound app lications act more like desktop software 1 Zus tzliche M glichkeiten der effizienten grafischen Darstellung wurden mit der Entwicklung der Flash Technologie eingef hrt Anfangs wurden Flash Dateien in Webseiten eingebettet und dienten der Wiedergabe bewegter Inhalte Mittlerweile basieren einige Webangebote vollst ndig auf dieser Technik Die j ngste Entwicklung stellen Frameworks zur Realisierung von RIAs dar Eines hiervon ist Flex welches die performante Visualisierung der Flash Technologie nutzt und diese um interaktive Bedienelemente erg nzt Flex f hrt somit keine grundle gend neue Technologien ein sondern kombiniert bereits vorhandene und vereinfacht ihre Anwendung vgl http www ecomplexx com rich internet adobe flex aspx zugegriffen am 20 Februar 2009 10 gl http ajax sys con com node 768626 zugegriffen am 20
55. einstellungen traten lediglich in der Gruppe 2 auf Da die Nutzer des Repor tingclients mit den Begriffen vertraut sind und auch die Filterfunktion kennen ist diese Problematik f r die Bestandskunden nicht weiter relevant Neukunden steht ein entsprechendes Handbuch f r den eLettershop zur Verf gung welches grund legende Funktionen und Begriffe erkl rt Im Gegensatz dazu bedarf es im Falle der im Reportingclient vorgesehenen Drag and Drop Funktion einer Einweisung in Form von Hilfetexten oder eines Einf hrungsvideos Da Flex eine Komponen te lt mx VideoDisplay gt f r die Wiedergabe von Videos bereitstellt bietet es sich an eine kurze visuelle Demonstration zum Funktionsumfang des Reportingclients ein zubetten F r die Erzeugung des Videos eignet sich ein Screen Capture Programm welches die Programmoberfl che mit den Bewegungen der Maus aufzeichnet Der 67 4 Konzeption Transferaufwand f r den Benutzer wird dadurch gering gehalten indem das De monstrationsvideo mit Hilfe der tats chlichen Oberfl che des Reportingclients er stellt wird Um das Videomaterial mit weiteren Informationen anzureichern k nnen diesem Texte und Sprache hinzugef gt werden Um den Benutzer nicht zu entm n digen wird das Video nur aufgrund einer Benutzerinteraktion angezeigt und l sst sich zudem jederzeit abbrechen Die Probanden nutzten im anschlie enden Gespr ch die M glichkeit neben den laut ge u erten Gedanken weiteres Feedback zu geben
56. eiten auch sehbehin derten Menschen eine barrierearme Anwendung bieten Dies lasst sich z B umset zen indem g ngige Hilfsprogramme durch Flash Komponenten z B eingebettete Screen Reader oder Tastatursteuerung ersetzt werden Bei der technischen Um setzung ist besonders auf eine intuitive Bedienung zu achten Im g nstigsten Fall werden Rechner welche mit speziellen Hilfsprogrammen ausgestattet sind obsolet Der Anwender erlangt dadurch eine gr ere Unabh ngigkeit bez glich des verwen deten Rechners sowie des eingesetzten Betriebssystems Unter der Pr misse dass kein Anwender vom Zugang zu einer Webseite ausge schlossen werden soll sind die Begriffe Barrierefreiheit und Usability untrennbar miteinander verbunden Wie sich benutzerfreundliche Anwendungen entwickeln las sen wird im n chsten Abschnitt erl utert 4 8 Usability Engineering Szwillus definiert in Szw08 den Begriff Usability Engineering als systemati sches ingenieurm iges Entwickeln gut benutzbarer bzw gebrauchstauglicher Be nutzungsschnittstellen Die von Nielsen ge u erte scharfe Kritik bez glich der Usability von Flash Applikationen vgl Abs 3 1 2 soll im Folgenden entkr ftet werden Hierzu werden wesentliche Bereiche des Usability Engineerings angesprochen Dabei wird speziell auf den Reportingclient sowie in allgemeiner Form auf Flash Applikationen Bezug genommen 4 8 1 Ergonomische Gestaltung Im zehnten Teil der Europ ischen
57. ematisch hnlichen Mailings von Interesse Das bestehende Tool bietet jedoch lediglich eine nach Versanddatum sortierte Auflistung Somit ist eine entsprechende Gruppierungsfunktion umzusetzen Um indiviudelle Ansichten zu gew hrleisten wird ein multifunktionaler Filter im plementiert Dieser listet nur die Mailings auf welche die angegebenen Kriterien erf llen N heres zur Filterung wird im n chsten Abschnitt erl utert 38 4 1 Grundfunktionen des Reportings Absenderadresse Mailing Mailing Absenderadresse Mailing Abbildung 4 2 Baumstruktur 4 1 2 Filterung der Mailings Damit der Benutzer schnell und unkompliziert das gew nschte Mailing in der Baum struktur lokalisieren kann ist neben einer direkten Suchfunktion ein Filter erfor derlich Suchfunktionen nehmen Suchw rter als Argument entgegen und geben als Ergebnis alle Datens tze zur ck welche die bergebenen Begriffe enthalten Filter hingegen erlauben es die Suchergebnisse weiter einzugrenzen d h die Suche weiter zu spezifizieren In der folgenden Liste werden Kriterien nach denen gefiltert werden kann sowie die daf r geeigneten Darstellungskomponenten beschrieben e Versanddatum Der Filter f r das Versanddatum erlaubt die Angabe eines Zeitfensters dessen Beginn und Ende ber zwei Datumsfelder zu definieren sind Alle Mailings deren Versendungsdatum in diesen Zeitraum fallen werden entsprechend grup piert Das Flex SDK bietet ei
58. en welche in Ac tionScript 3 0 eingef hrt wurden nun auch unterstiitzt 3 3 5 Representational State Transfer REST Webseiten verwenden in der Regel Cookies oder Session IDs vgl Abs 4 6 3 um Zustande zu speichern Ein anderer Ansatz wird mit der REST Architektur ver folgt Das Akronym steht dabei fiir Representational State Transfer Die Zust nde vorheriger Botschaften werden weder server noch clientseitig gespeichert Alle fiir die Ubermittlung notwendigen Informationen wie z B auch Authentifizierungsda ten sind in jeder einzelnen Nachricht enthalten Einerseits erh ht dieses Konzept bei vielen unterschiedlichen Anfragen eines Clients die Datenlast Andererseits wird durch eine REST konforme Umsetzung ein einfaches Load Balancing vgl RRO7 welches wiederum die Performance erh hen kann Bei der Umsetzung mit Hilfe von Flex k nnen sich jedoch Schwierigkeiten ergeben wie das folgende Zitat belegt erm glicht The current Flex HTTPService component is severely lacking when it comes to making REST calls This component can only send GET and POST requests no PUT DELETE HEAD or OPTIONS without using a proxy and does not make available the HTTP status code returned in the response Rather it fires a fault event for any HTTP response that does not have a status code of 200 even a 201 created status is considered a fault condition Somit reichen die derzeit implementierten Funktionen der HTTP
59. erfreundlichkeit der Reporting Applikation zu berpr fen und ggf nde rungen zu implementieren Eine Orientierungshilfe f r das Usability Engineering in RIAs bietet der Nielsen Norman Group Report Usability of Rich Internet Applications and Web Based Tools Design Guidelines Based on User Testing of 46 Flash Tools 4 9 Empirische Evaluierung Um die Gebrauchstauglichkeit einer Applikation empirisch zu testen ist es sinnvoll Personen mit verschiedenen Vorkenntnissen zu involvieren Eine Liste von Heuristi ken wurde in Abschnitt 4 8 2 bereits erarbeitet F r eine professionelle heuristische Evaluation die Usability Experten involviert fehlen jedoch die finanziellen Mit tel Dennoch l sst sich im kleinen Rahmen eine empirische Evaluation durchf hren Voraussetzung daf r ist eine zumindest teilweise lauff hige Applikation 4 9 1 Prototyp Ein Software Prototyp wird erstellt um bereits in fr hen Entwicklungsphasen Feed back bez glich der Umsetzung zu erhalten Fr he Fehler sind teuer 2 Deshalb sollten strukturelle Fehler in der Benutzerf hrung m glichst fr hzeitig er kannt werden Hierf r kommt das horizontale Prototyping zum Einsatz Aus die sem Grund wird eine Version des Reportingclients entwickelt welche lediglich die Programmoberfl che und grundlegende Dialogabl ufe abbildet Der Flex Builder erm glich eine solche Umsetzung mit geringem Zeitaufwand Die Verbindung zum PHP Backend ist in diesem
60. ertet Abschlie end werden auf die wenigen aufgetretenen Pitfalls hingewiesen und alternative Wege aufgezeigt 5 1 Programmierung In diesem Abschnitt sollen einige grundlegende Programmierkonzepte in Flex auf gelistet werden die bei der Realisierung zum Einsatz gekommen sind 5 1 1 Stylesheets Unter bestimmten Bedingungen bietet es sich an grafische Formatierungen aus zulagern Dadurch sind diese u A f r mehrere Komponenten verwendbar und durch die zentrale Ablage leichter zu warten F r Entwickler die Flex in Kom bination mit PHP nutzen wollen bietet sich die M glichkeit bereits bestehende CSS Formatierungen bernehmen zu k nnen Flex unterst tzt CSS jedoch nicht vollst ndig So sind z B Vererbungen oder relative Positionierungen z B float noch nicht m glich 5 1 2 Ladezeiten Speziell bei Flex Anwendungen die gro e Datenmengen aus einem PHP Backend beziehen ist es empfehlenswert dem Anwender den Ladestatus mitzuteilen Zwar kann in der Regel keine genaue Voraussage ber die Dauer des Vorgangs gemacht werden jedoch kann eine R ckmeldung vgl Nie94 Heuristik Nr 5 dem Nutzer die Programmaktivit t signalisieren Neben der Parametereinstellung showBusyCursor true die den Mauszeiger als Uhr darstellt und von mehreren Komponenten z B lt mx RemoteObject gt unterst tzt wird kann eine zus tzliche Animation als Hintergrundbild der entsprechenden Kompo nente eingebunden werden Dies erweist sic
61. es Mediums E Mail Dieses soll anhand des folgenden Beispiels eines Discounters verdeutlicht werden Es soll die Standortfrage f r neue Filialen beantwortet werden Hierzu wird mit Hilfe des Geo Trackings siehe Abs 4 2 die geographische Verteilung der E Mail Empf nger und somit potentieller Kunden ermittelt Treten dabei H ufungspunkte auf an denen zudem keine Niederlassungen existieren so ist ein potentiell g nstig gelegener Standort gefunden Grunds tzlich ist bei der Analyse von Mailings die Zusammensetzung der Empf n gergruppe zu beachten Sie entspricht in der Regel nicht exakt der Gesellschaft Der in Abb 1 1 im Gesamtkontext eingebettete Reportingclient existiert f r den eLettershop bereits in einer PHP HTML Variante Dieser wird von Kunden zum Kennzeichen f r das Regeln ist der geschlossene Wirkungsablauf bei dem die Regelgr e im Wirkungsweg des Regelkreises fortlaufend sich selbst beeinflusst vgl DIN 19226 Teil 1 1 2 Die Entwicklung des World Wide Web WWW Einen hinsichtlich der mangelnden bersichtlichkeit kritisiert Des Weiteren fehlen nach Meinung der Anwender essentielle grafische Vergleichsfunktionen Diese sol len dem Auffinden von Kausalzusammenh ngen dienen Da die beiden wesentlichen Funktionen des Reportingclients die Visualisierung und Interaktion darstellen bietet sich f r seine technische Umsetzung eine Rich Internet Application RIA an Eine n here Erl uterung ihres Charakters sowie
62. esen Falls sich das Mailing noch im Versendungsprozess befindet l sst sich anhand eines Kreisdiagramms ablesen wie viele E Mails bereits verschickt wurden bzw noch zu versenden sind Verschickte E Mails lassen sich wie folgt kategorisieren 40 4 1 Grundfunktionen des Reportings PHP Flex Filter Status Al Mandant MailingVO Klasse Suchen bergebene Filter anwenden Array mit MailingVOs als R ckgabe Mailings Mailing 1 Mailing 2 Abbildung 4 4 Ablauf der Filterung e E Mail ge ffnet e Mindestens ein Link wurde angeklickt e SoftBounce e HardBounce e Noch keine Antwort erhalten E Mails in denen ein Link geklickt wurde stellen eine Submenge der Kategorie E Mail ge ffnet dar welche gesondert ausgewiesen wird ohne zu der Obermenge hinzugez hlt zu werden Auf diese Weise bietet sich dem Kunden eine detaillierte Response bersicht E Mails in der Kategorie Keine Antwort sind bermittelt je doch wurde noch keine Reaktion des Empf ngers registriert Genauere Information zu den beiden aufgelisteten Bounce Arten werden in Abschnitt 2 6 3 gegeben Durch die Darstellung als Kreisdiagramm l sst sich die prozentuale Verteilung gut erkennen Eine vereinfachte Form ist in Abb 4 5 dargestellt Im Reportingclient werden die einzelnen Segmente eingef rbt Hierdurch heben sie sich besser von einander ab Zudem wird der Vergleich e
63. ex Client und PHP Backend ist da durch jedoch noch nicht abgesichert Um dies zu erreichen bietet sich u A ein asynchrones Verschliisselungsverfahren an 4 6 3 Sessions Bei HTTP handelt es sich um ein zustandsloses Protokoll Um Zust nde auf dem Server speichern zu k nnen wird eine so genannte Session wird der Nutzer ber eine Session ID identifiziert Sie erlaubt es mehrere Zugrif fe ein und desselben Anwenders zusammenzufassen Alternativ zur serverseitigen Speicherung der Session Daten k nnen diese in Form von HTTP Cookies auf dem Client abgelegt werden verwaltet In dieser vol http www elektronik kompendium de sites net 0906171 htm zugegriffen am 13 M rz 2009 16Ejn Hashwert bezeichnet einen alphanumerischen Wert der durch eine Hashfunktion generiert wird Daten k nnen mit dieser Funktion verschl sselt werden jedoch k nnen die Daten ausge hend von ihren Hashwerten nicht wieder ermittelt werden Die asynchrone Verschl sselung erfordert zwei Schl ssel einen privaten und einen ffentlichen Der ffentliche Schl ssel wird benutzt um eine Nachricht an den Besitzer dieses Schl ssels zu senden Die verschl sselten Daten sind daraufhin nur noch mit dem privaten Schl ssel lesbar engl f r Sitzung SHTTP Cookies werden in der Regel bei langanhaltenden Sessions verwendet 54 4 7 Darstellung 4 7 Darstellung Ein wesentliches Ziel des Projektes ist die Entwicklung einer intuitiv zu bedienen de
64. fUserRemote source eLettershop_User_Remote destination zend fault faultHandler event gt lt mx method name getUserVO result handleResultUser event gt lt mx RemoteObject gt a a ES Go N e Quellcode 4 3 Beispiel RemoteObject Nach der Implementierung muss bei Nutzung einer Funktion des Remote Objekts beachtet werden dass das gewtinschte Result Objekt erst im Result Handler be reitgestellt wird Es gibt unterschiedliche Vorgehensweisen das Result Objekt zu verwerten Naheliegend ist eine Auswertung direkt in dem Result Handler im Quell code 4 3 handleResultUser event Falls eine im Remote Objekt angegebene PHP Funktion f r unterschiedliche Verwendungszwecke ben tigt wird eignet sich dieses Vorgehen nicht da der Result Handler wissen muss was mit dem R ckgabewert ge schehen soll Somit muss der R ckgabewert oder ein u erer Einfluss z B globale Variable das Verhalten bestimmen Eine weitere M glichkeit liegt in der Erstel lung eines globalen ValueObjects welches in dem Result Handler gesetzt wird Das RemoteObject kann innerhalb der Applikation von jeder Funktion aus ber die Eigen schaft id im Quellcode 4 3 amfUserRemote getUserV0 angesprochen werden Nach Aufruf einer dem RemoteObject bekannten PHP Funktion wird der R ckgabewert im Result Handler auf das globale Value Object bertragen Durch die asynchrone Ar 51 4 Konzeption beitsweise von Flex kann ein direkter Zugriff
65. fen am 23 M rz 2009 09 http amfphp sourceforge net zugegriffen am 23 M rz 2009 Jg http wadearnold com blog p 112 zugegriffen am 8 April 2009 32 3 4 Schnittstellenvergleich in diese Thematik Vor der Zend Framework Version 1 7 war das Zend_ Amf Paket separat als funk tionale Erweiterung zum Framework erh ltlich In j ngster Zeit konnte sich das Zend _ Amf Paket gut etablieren und ist mittlerweile fester Bestandteil des Frame works Um lediglich Zend_Amf ohne das komplette Framework nutzen zu k nnen werden die Pakete Zend_ Amf und Zend _ Server sowie die Exception php be n tigt Es sei an dieser Stelle darauf hingewiesen dass sich f r den Einstieg in Zend_ Amf eine von Richard Bates erstellte Hilfsapplikation CRUDdy Buddy gut eignet Diese ist in AIR geschrieben und generiert PHP ActionScript und MXML Code um Flex mit PHP ber Zend_ Amf zu verbinden 3 4 5 Vergleichsanalyse In diesem Abschnitt werden die Ergebnisse eines Performancevergleichs einiger zuvor beschriebener Verbindungsoptionen pr sentiert Die gezeigten Ergebnisse wurden mit Hilfe einer von James Ward geschrieben Flex Applikation namens Census generiert Server Exec Time Transfer Time Parse Time Render Time Data Bandwidth e Abbildung 3 7 RIA Data Benchmark 42Der Teil CRUD steht f r Create Retrieve Update Delete siehe http code google com p cruddybuddy 3siche http www jameswa
66. gen die Umsetzung auf eine netzwerktaugliche Darstellung und der Aufruf des RPC Protokolls 24 22 API ist die Abk rzung f r Application Programming Interface und bezeichnet eine Program mierschnittstelle engl f r Stumpf Aygl http www microsoft com germany technet datenbank articles 600855 mspx EYB zugegriffen am 23 April 2009 27 3 Untersuchung Argumente R ckgabewert Argumente R ckgabewert Client Stub Anfrage Antwort Anfrage Antwort tecCHANNEL Abbildung 3 5 Ablauf eines RPCs Es wird eine vorher definierte Methode lt mx method gt des lokalen Remote Objekts lt mx Remote bject gt aufgerufen die das Ergebnis ber die im Remote Objekt angege bene R ckruffunktion bermittelt Es ist also keine Kenntnis ber die spezifische Art wie die Daten gesendet und empfangen werden notwendig Die Details der RPC Implementierung sind so abstrahiert dass es f r den Programmierer wie ein Aufruf einer lokalen Funktion wirkt 3 3 3 Serialisierung und Deserialisierung Die beschriebenen Remote Procedure Calls erfordern das so genannte Serialisieren Dabei werden Objekte in Bits oder auch XML Daten konvertiert um diese spei chern oder in einem Netzwerk bermitteln zu k nnen Die zur ckgegebenen Daten sind vor ihrer Weiterverarbeitung zun chst durch Deserialisieren wieder in Objekte umzuwandeln Die bin re bermittlung wird mittels dem Action Message Format AMF das auch im Zend F
67. h oft als hilfreich da dem Anwender so mitgeteilt wird welche Komponente der Applikation sich in Bearbeitung befindet Cascading Style Sheets CSS ist eine beschreibende Sprache f r die Darstellung spezieller Ele mente oder Inhalte 69 5 Realisierung Bei der Animation ist zu beachten dass das im Internet h ufig verwendete ef Format von Flex nicht nativ unterst tzt wird Mit entsprechenden Programmen lassen sich diese jedoch in das swf Format konvertieren und anschlie end einbin den 5 1 3 States und Transitions In Flex gibt es die M glichkeit Zust nde zu definieren so genannte lt mx states gt Diese beschreiben die Gestalt von Komponenten sowie deren relative Anordnung zueinander Dadurch l sst sich die Programmoberfl che in Abh ngigkeit der zu leistenden Aufgabe mit sehr geringem Aufwand anpassen indem lediglich der ge w nschte Zustand gew hlt wird Dieses Konzept wurde f r die Login Funktion des Reportingclients verwendet welche beim Programmstart sowie bei Ablauf der Ses sion ausgef hrt wird Neben harten berg ngen lassen sich zudem mit Hilfe von lt mx transitions gt bergangseffekte zwischen den einzelnen Sichten definieren Beim angemessenen Einsatz dieser Effekte kann dadurch auf einfache Weise eine anspre chende Visualisierung erzielt werden 5 2 Darstellung In Abbildung 5 1 ist der Flex basierte Reportingclient mit drei unterschiedlichen Re portingfunktionen dargestellt Die folgende
68. he Daten enthalten kann Diese lassen sich dazu verwenden den Inhalt zu personalisieren und die E Mail dadurch individueller zu gestalten e Personalisierter Inhalt Die genannte Personalisierung wird durch Platzhalter realisiert z B Hallo VORNAME Diese werden unmittelbar vor dem Versand mit Hilfe einer Routine gegen die Daten aus der Empf ngerliste ersetzt Diese Funktionalit t stellt die notwendige Basis f r das in der Motivation beschriebene Optimie rungsverfahren dar Ziel ist es dass versendete E Mails m glichst hohe und positive Resonanz erzeugen Dies h ngt u A von der Gestaltung der E Mail ab Die Basis f r die Reportingfunktionen bildet das Tracking welches im folgenden Abschnitt erl utert wird 2 6 2 Tracking Um das Verhalten der E Mail Empf nger zu analysieren muss deren Handlung zu n chst protokolliert werden Die notwendige Methode daf r nennt sich Tracking Unter diesem Begriff versteht man das Beobachten und Speichern relevanter Aktio nen der Empf nger Abb 2 4 veranschaulicht den prinzipiellen Tracking Ablauf Der Prozess beginnt mit einem vom E Mail Empf nger ausgel sten Ereignis Dieses wiederum f hrt zu einer Anfrage an einen Webserver welche jedoch zun chst ber einen Tracking Server l uft Der Tracking Server observiert die Empf ngeraktionen und legt diese in der Reporting Datenbank ab Es existieren verschiedene Tracking Informationen die das Reporting wiedergeben soll Um
69. ibliothek die h ufig verwendete Standardkomponenten bereitstellt vgl NA08 Zus tzlich lassen sich eigene Kom ponenten Custom Components genannt entwerfen Diese k nnen als Quellcode sowie in kompilierter Form anderen Entwicklern zur Verf gung gestellt werden Adobe bietet neben der Entwicklung von Browserapplikationen noch die Option an mit dem Flex SDK Desktopanwendungen zu realisieren Hierf r wurde die plattfor munabh ngige Laufzeitumgebung Adobe Integrated Runtime AIR geschaffen AIR Dateien werden per Internetverbindung lokal auf dem Rechner installiert und k nnen wie herk mmliche Desktopanwendungen offline ausgef hrt werden Aktuell ist Flex stabil in Version 3 1 Stand April 2009 erh ltlich Der Nachfolger Flex 4 Codename Gumbo besitzt den Beta Status Adobe Flex SDK MXML ActionScript kompilieren Flash Datei swf anzeigen Webbrowser Flash Plugin mind Version 9 Abbildung 2 2 Flex Architektur Unter einem Software Developer Kit SDK versteht man im Allgemeinen eine Kollektion von Hilfsprogrammen welche der Software Entwicklung dienen engl f r Kompilierer Ein Computerprogramm das den Quellcode in das gew nschte semantisch quivalente Zielprogramm umwandelt Ein Debugger ist ein Werkzeug mit der Aufgabe Fehler in einem Programm zu finden und zu beheben Psiehe http opensource adobe com 10siehe http labs adobe
70. ichnung und nicht ber die Pfeile zu ffnen Da zu diesem Zeitpunkt noch keine Doppelklick Funktion implemen tiert war f hrte dies zu leichten Verz gerungen e Response bersicht anzeigen Diese Funktion haben alle Beteiligten ohne l ngere berlegungen ausf hren k nnen Den Probanden war das parallele Arbeiten w hrend der Datenan forderung vom Server nicht vertraut so dass sie die Totzeit nicht f r das Ausf hren weitere Funktionen genutzt haben e Klicks pro Stunde in einem Diagramm Diese Aufgabe konnten nur drei Probanden alle aus Gruppe 1 erf llen Ande re versuchten beide Diagramme separat anzuzeigen um anschlie end eines der Fenster dem anderen durch Verschieben hinzuzuf gen Die brigen Probanden resignierten relativ schnell bei dieser Aufgabe Die M glichkeit des Drag and Drop der Reportingfunktionen wurde somit weitgehend nicht erkannt Bei der Auswertung ist zu beachten dass es sich um eine geringe Anzahl von Test personen handelte und der eLettershop einigen Probanden noch fremd war Die Zielgruppe ist jedoch mit dem eLettershop vertraut und besitzt somit ein Grund verst ndnis f r Mailings und deren Reportingfunktionen Dennoch konnte ein klares Defizit bei der intuitiven Bedienung des Mailingvergleichs festgestellt werden da die Benutzer die Existenz der Drag and Drop Funktion nicht erwartet bzw falsch an gewendet haben Die Komplikationen mit unbekannten Begriffen z B Response bersicht und den Filter
71. iel AsyncToken und ItemResponder Der Vorteil dieses Vorgehes liegt in der erzwungenen sequentiellen Abarbeitung Da durch werden die R ckgabewerte erst dann verwendet wenn diese vollst ndig ber mittelt sind Hierbei ist zu beachten dass das Remote Objekt in der Regel ebenfalls eine Handler Funktion f r die erfolgreiche bzw fehlgeschlagene bermittlung ent h lt Dadurch wird bei erfolgreicher bermittlung der R ckgabewert sowohl vom ItemResponder als auch vom remoteObject verarbeitet was sich negativ auf die Perfor mance auswirkt Bei fehlgeschlagener bermittlung tritt dementsprechend eine dop pelte Fehlermeldung auf Um diese Redundanz zu vermeiden kann im ItemResponder auf das Verwerten des faultObject verzichtet werden Zudem muss im remote bject der resultHandler so angepasst werden dass keine doppelte Auswertung des Events stattfindet 4 6 Sicherheit Bei den Reportinginformationen handelt es sich um sensible Kundendaten so dass der Zugriff unauthorisierter Personen verhindert werden muss Um eine Flex Applikation vor ungewollten Zugriffen zu sch tzen gibt es mehrere Aspekte die 52 4 6 Sicherheit beachtet werden m ssen 4 6 1 Sicherheit ohne SSL Im eLettershop erfolgt jegliche Daten bertragung verschl sselt Falls keine M glich keit f r eine sichere Verbindung ber SSL besteht k nnen alle zwischen Client und Server ausgetauschten Daten beobachtet resp mitgelesen werden Mit Zend_ Amf werden di
72. ility Test soll Aufschluss ber m gliche Usability Probleme geben Im Fol genden werden n tige Vorbereitungen und Ablaufkriterien aufgez hlt 1 Probandenauswahl Wie bereits erw hnt sollen verschiedene Personengruppen an dem Usability Test teilnehmen Da der Test nur abteilungsintern durchgef hrt werden kann ist die Teilnehmeranzahl stark begrenzt 2 Vorkehrungen Laut Szwillus ist das oberste Ziel der Vorbereitung das Schaffen absolut glei cher Vorbedingungen f r alle Testpersonen Aufgabenstellung und Ausgangs situation sind daher f r alle Probanden identisch Der Test sollte nicht in einer Pr fungsatmosph re erfolgen Um das zu erreichen wird der Hinweis Fehler die Sie machen sind Schw chen des Produkts nicht Ihre von Tognazzini vgl Szw08 umgesetzt 3 Aufgabenstellung Der Inhalt der Aufgabe beschr nkt sich auf den Vergleich zweier Mailings Hierdurch werden die wesentlichen Funktionen des Reportingclients angewen det und gleichzeitig getestet 4Dummy Daten sind in der Regel willk rlich erstellte Daten die zu Testzwecken verwendet wer den 35 Bruce Tognazzini ist ein Berater im Bereich Usability und arbeitet in der Nielsen Norman Group die sich auf das Thema Mensch Computer Interaktion spezialisiert hat 64 4 9 Empirische Evaluierung 4 Beobachtung Die Probanden werden gebeten die Think Aloud Technik anzuwenden Das bedeutet dass die Gedanken des Nutzers in jedem Schritt
73. im Klaren dar ber sein dass PHP keinen ausf hrbaren Code an Flex senden kann Somit beschr nkt sich die Kommunikation zwischen Flex und PHP Backend auf den Austausch von Daten Im Abschnitt 3 5 wird der Umgang mit dieser Restriktion n her erl utert 78 6 Zusammenfassung und Ausblick Im Folgenden wird zun chst auf die Weiterentwicklung des Reportingclients ein gegangen Anschlie end wird die Bewertung speziell von Flex sowie allgemein von RIAs aufgrund der gemachten Erfahrungen und des gesammelten Wissens vorge nommen Den Abschluss bildet der Ausblick auf die sich abzeichnende Entwicklung von Webanwendungen Der Reportingclient konnte ausnahmslos um die vorgesehenen Funktionen erweitert werden Das Feedback der Probanden hinsichtlich des Designs der Performance sowie der Bedienung ist als beraus positiv zu bewerten Anhand dieses konkre ten Anwendungsfalls wurde gezeigt dass die Realisierung von grafiklastigen sowie interaktionsreichen Webanwendungen mittels Flex gut geeignet ist Ein Nachteil dieser Technologie ist das Fehlen einer nativen Datenbankunterst tzung Um diese Unzul nglichkeit zu beheben bedarf es einer serverseitigen L sung Ihre technische Umsetzung gestaltete sich aufwendiger als urspr nglich angenommen da hierzu das PHP Backend um zus tzliche Klassen VOs erweitert werden musste Bei der richtigen technischen Umsetzung einer Flex Applikation sind in den Berei chen Plattformunabh ngigkeit Usability Barrie
74. inzelner Response Arten unterschiedlicher Mailings erleichtert Die Relativ und Absolutwerte k nnen aus der Gr e der Seg mentfl chen nur unpr zise resp gar nicht abgelesen werden Daher wird zus tzlich zur Einf rbung jedes Segment mit zwei Zahlenwerten versehen welche eine absolute bzw relative Angabe zu den Responses macht Al 4 Konzeption ffnungen Link angeklickt Soft Bounce Keine Antwort Hard Bounce Abbildung 4 5 Kreisdiagramm 4 1 4 Klicks pro Stunde Im eLettershop werden die Klicks auf Links in zwei unterschiedlichen Varianten dar gestellt Beide visualisieren die registrierten Klicks pro Stunde Die folgende Auflis tung nimmt eine Abgrenzung der Varianten vor e Prozentualer Anteil der Klicks pro Stunde In dieser Reportingfunktion wird die prozentuale Verteilung der Klicks pro Stunde visualisiert So kann der Anwender sich dar ber informieren welcher Anteil der Gesamtklicks in welcher Stunde aufgetreten ist Hierf r eignet sich ein Liniendiagramm da so die S ttigung als Verlauf gut dargestellt werden kann e Anzahl der Klicks pro Stunde Bei diesem Diagramm werden die Klicks pro Stunde absolut ausgewiesen F r diese einzelne Ausweisung bietet sich ein Balkendiagramm an um die Vertei lung auf die jeweilige Stunde hervorzuheben 4 1 5 Linkauswertung Neben der allgemeinen Klickauswertung sollen die einzelnen Links der E Mail auf gelistet und ausgewertet werden Die folgenden Kategorien beziehen si
75. ion an sich einen klar erkennbaren Ausstiegspunkt z B Abbrechen Button anbieten Aktionen die mehr als zehn Sekunden in Anspruch neh men m ssen abbrechbar sein Durch das asynchrone Arbeiten einer Flex Applikation k nnen parallel zu Ladevorg ngen weitere Aktionen ausgef hrt werden Falls z B der Datenbank Server berlastet ist und die bermittlung der Klickdaten viel Zeit in Anspruch nimmt kann der Nutzer den Reporting client weiterhin nutzen Shortcuts F r versierte Nutzer einer komplexen Applikation ist es sinnvoll Shortcuts anzubieten um einen schnelleren Zugriff zu erm glichen In dieser Flex Applikation ist diese Heuristik nicht von gro er Bedeutung da nur wenige Zugriffspunkte existieren Dennoch werden Tastenkombinationen f r einige Aktionen zur Verf gung gestellt z B f r das Ausrichten der Fenster Good Error Messages Falls ein Anwendungs oder Systemfehler auftritt sollte der Nutzer das Pro blem nachvollziehen k nnen Hierf r bedarf es der Implementierung eindeuti ger und aussagekr ftiger Fehlermeldungen Prevent Errors Der Dialog mit dem Anwender ist so zu gestalten dass Anwendungsfehlern vorgebeugt wird Durch praxisnahe Usability Tests lassen sich ungeeignete Dialoge ermitteln Diese Informationen flie en in den Entwicklungsprozess ein Zus tzlich kann aus Erfahrungen im Umgang mit dem bereits existierenden HTML Reportingclient zur ckgegriffen werden Help and Document
76. itergeleitet wird Unter gewissen Umst nden erreichen E Mails nicht den gew nschten Empf nger Hierf r kann es verschiedene tempor re oder permanente Gr nde geben die im folgenden Abschnitt n her er rtert werden 2 6 3 Bounces E Mails erreichen nicht immer den gew nschten Empf nger da z B die Quota des Postfachs erreicht ist oder der E Mail Server die E Mail nicht entgegennimmt Nicht vollst ndig bermittelte E Mails fallen in die Kategorie Bounce Messages im Folgenden nur noch Bounces genannt Man unterscheidet zwei verschiedene Formen Soft und Hard Bounces die allerdings unterschiedlich von E Mail Servern klassifiziert werden Eine allgemeing ltige Definition dieser Bounce Arten existiert nicht Die Entwickler des eLettershop spezifizieren diese wie folgt e Soft Bounce Bei Soft Bounces handelt es sich um tempor re Zustellprobleme So kann es vorkommen dass eine E Mail den E Mail Server des Empf ngers erreicht die Empf ngeradresse somit g ltig ist diese aber dennoch vom Server zur ckge wiesen wird Gr nde hierf r k nnen u A eine tempor re Server berlastung oder eine berschreitung der erlaubten E Mail Gr e sein e Hard Bounce Ein Hard Bounce wird verursacht wenn ein permanentes Problem mit der Empf nger Adresse besteht Ein h ufig auftretender Grund daf r stellen un g ltige E Mail Adressen dar Falls die Dom ne nicht existiert oder Schreibfeh ler in der Adresse auftreten wird die E Mail in
77. k die Komponente lt mx ApplicationControlBar gt an e Navigation Wie in den meisten Anwendungen z B Web Windows OS werden die Ele mente zur Navigation linksseitig angeordnet Das Navigieren bezieht sich in diesem Fall jedoch nicht auf Seiten oder Dateien sondern auf Mailings welche in einer Baumstruktur angeordnet sind e Dashboard Im Dashboard werden die Reportingdaten visualisiert Als die wesentliche Funktion des Reportingclients erh lt dieser Bereich den gr ten Oberfl chen anteil Der Individualisierbarkeit als ein Usability Kriterium wird durch die Das Corporate Design ist ein Teilbereich der Corporate Identity engl f r Unternehmensidenti t t und bezeichnet eine einheitliche Unternehmungsdarstellung in Bezug auf ihr Erscheinungs bild 2l vol http www usability ch News_D farbwww htm zugegriffen am 2 April 2009 22Die Namensgebung Dashboard engl f r Armaturenbrett Instrumententafel wurde gew hlt da es sich um ein Feld handelt in dem unterschiedliche Diagramme und Tabellen angezeigt und auch modifiziert werden k nnen 55 4 Konzeption Filter Dashboard Mailings Abbildung 4 12 Papier Prototyp beiden folgenden Aspekte Rechnung getragen Zum einen kann der Anwender die Gr e der Darstellungselemente z B Graphen innerhalb des Dashboards frei skalieren Des Weiteren kann die Breite der Navigationsspalte variiert wer den so dass dem Dashboard die gesamte Fensterbreite zur Ve
78. k f r RIAs auf der objektorientierten Open Source Sprache Java In einem Artikel der PC Welt hei t es Sun kommt etwas sp t aber nicht zu sp t meint IDC Analyst R diger Spies Er r umt JavaFX Chancen im Kampf um den Web 2 0 Markt aufgrund seiner Offenheit und des Trend zu Software as a Service SaaS 7 ein 18 SUNs Aktivit ten auf dem Markt f r RIA Entwicklungsframeworks sind j nger als jene der Konkurrenten Adobe und Microsoft Der zu erwartende Boom bei SaaS macht die Notwenigkeit von inter aktiven Web Anwendungen nur gr er betont allerdings Spies Suns Neuerung komme da gerade rechtzeitig Damit k nnen die vorhandenen Java Anwendungen in SaaS Umgebungen aufgepeppt werden sieht der Analyst eine Chance f r JavaFX JavaFX Platform Application Framework E 4 0 0 Mobile TV Elements Elements Elements Common Elements Designer Tools Developer Tools JavaFX Runtime Java Virtual Machine li Abbildung 3 2 JavaFX Plattform 16 70 http blogs sun com javafx entry javafx_1_0_is_live zugegriffen am 21 April 2009 8 P D J y J zugeg D Software as a Service bezeichnet ein Gesch ftsmodell welches auf Dienstleistungen rund um Software basiert 18 vol http www pcwelt de start software_os online news 189120 javafx_startet_ offiziell_ins_rich_internet_rennen zugegriffen am 21 April 2009 vol http www javafx com about overview zugegriffen am 21 April
79. ktes ab Web Application Frameworks sind speziell f r dynamische Webseiten optimiert Das PHP Backend des eLettershops basiert auf dem Zend Framework Dabei han delt es sich um eine Open Source Software welche komplett in PHP 5 geschrieben ist Neben diversen Paketen ist das bereits beschriebene MVC Konzept implemen tiert vgl ALBO8 2 4 Adobe Flex Bei Adobe Flex handelt es sich um ein Entwicklungsframework f r die Erstellung von Rich Internet Applications Mihai Corlan Mitarbeiter von Adobe beantwortete die Frage What is Flex wie folgt Flex is just another way to create a Flash application Die mit Flex erstellten Applikationen sind Flash Dateien mit der Dateiendung swf die mittels HTML eingebunden werden um sie im Webbrowser darzustel 3vgl http de wikipedia org wiki Model_View_Controller zugegriffen am 4 Mai 2009 siehe http framework zend com vel http corlan org downloads Flex_AIR_and_PHP pdf zugegriffen am 23 M rz 2009 2 4 Adobe Flex len Das Adobe Flex SDK bildet die Grundlage f r Flex Es stellt die Compiler die Komponentenbibliothek sowie den Debugger zur Verf gung Mit der Ver ffent lichung von Version 3 Codename Moxie im Februar 2008 wurde der Quellcode von Adobe offengelegt Mit dem kostenlosen Open Source SDK und einem beliebi gen Editor lassen sich bereits komplette Flex Applikationen erstellen Das Flex SDK bietet dem Entwickler eine Klassenb
80. licks pro Stunde Versuche nun die Klicks pro Stunde beider Mailings in einem Diagramm zu vergleichen Abbildung 4 16 Aufgabenstellung mae Jegen Im Im 5221 10 03 09 info surf de Neue Surfbretter 5234 17 03 09 info surf de G nstige Surfbretter Abbildung 4 17 Mailings 4 9 4 Fazit und Analyse Acht Personen nahmen am Usability Test teil von denen f nf mit dem eLettershop und dem urspr nglichen HTML Reporting vertraut sind Gruppe 1 Bei den rest lichen drei Teilnehmern Gruppe 2 handelt es sich um zwei Praktikanten und eine Sekret rin Das Alter der Probanden liegt zwischen 19 und 37 Jahren Zun chst soll in einer Auflistung auf generelle Probleme die bei der Abarbeitung der Aufgaben protokolliert wurden eingegangen werden e Aufgabenstellung Die Probanden der Gruppe 2 waren mit dem Begriff Response bersicht nicht vertraut Dies hat zu leichten Verwirrungen innerhalb dieser Gruppe gef hrt 66 4 9 Empirische Evaluierung e Filtereinstellung Um die entsprechenden Mailings auszuw hlen musste die Datumseingrenzung angepasst werden Ein Praktikant hat dies zun chst nicht bedacht und konnte somit anfangs die Mailings nicht finden Generell waren f r Gruppe 2 die Filtereinstellungen verwirrend e Mailingauswahl Die Mailingauswahl konnte im Allgemeinen von beiden Gruppen schnell durch gef hrt werden Die meisten versuchten die einzelnen Knoten des Mailing Baums durch Doppelklick auf die Beze
81. likation lassen sich ber die Men leiste erreichen Da ihr Funktionsumfang berschaubar ist er brigt sich die Verwendung von Drop Down Men s Die Farbgestaltung lehnt sich an das Corpo rate Design von arvato an Daher wird die Men leiste im arvato typischen blau abgebildet Die folgende Auflistung erl utert die einzelnen Funktionen des Men s z pE e La a Be Abbildung 5 2 Men leiste e Link zum eLettershop Um dem Anwender die R ckkehr vom Reportingclient zum eigentlichen eLet tershop zu erm glichen wird die Startseite des eLettershops verlinkt Der Link beinhaltet das Logo von arvato systems und tr gt dadurch zur Corporate Iden tity bei e Einf hrungsvideo Der Usability Test hat aufgezeigt dass das Benutzer Interface in einigen Berei chen wenig intuitiv ist So ist z B die Existenz der Drag and Drop Funktiona lit t f r viele Anwender nicht direkt ersichtlich die eigentliche Anwendung der Funktionalit t hingegen schon Diese Unzul nglichkeit wird so behoben dass der Hinweis auf die Existenz direkt mit einem erkl renden Anleitungsvideo verbunden ist Unter ergonomischen Gesichtspunkten erscheint diese Umset zung sinnvoll da eine hohe Wahrscheinlichkeit besteht dass der Anwender die Funktion nicht kennt und zudem eine Erkl rung abrufen m chte Hierdurch wird ein flie ender Arbeitsablauf gew hrleistet e Datenaktualisierung Damit die Empf ngerreaktionen auf ein Mailing w hrend des Versands beob achtet wer
82. ll eine protokollunabh ngige Vermittlung 334g http livedocs adobe com flex 3 html help html content data_access_2 html zu gegriffen am 27 M rz 2009 34Ein Proxy stellt einen Vermittler dar der Anfragen entgegennimmt um diese ber seine eigene Adresse weiterzuleiten 35GET und POST sind Methoden f r HTTP um einer Webseite Informationen zu senden 36 vg http www adobe com devnet flex articles php_getstarted_04 html zugegriffen am 22 Februar 2009 30 3 4 Schnittstellenvergleich zu k nnen Die HTTPService Komponente eignet sich somit insbesondere nur f r die bertragung kleiner Datenmengen da die XML Struktur viel Text erfordert und dadurch eine hohe Netzwerklast entstehen kann 3 4 2 Simple Object Access Protocol SOAP Bei SOAP handelt es sich um ein Datenaustauschformat Seine Spezifikationen sind auf der offiziellen Webseite wie folgt beschrieben SOAP Version 1 2 SOAP is a lightweight protocol intended for exchan ging structured information in a decentralized distributed environment It uses XML technologies to define an extensible messaging framework providing a message construct that can be exchanged over a variety of underlying protocols The framework has been designed to be indepen dent of any particular programming model and other implementation specific semantics SOAP realisiert die Daten bertragung im XML Format In der Regel werden die Daten ber HTTP gesendet jedoch sind weitere Prot
83. lling Language UML UML Diagramme stellen eine wichtige Grundlage f r die strukturierte Umsetzung eines Softwareprojekts dar Auf der offiziellen Webseite dieser Modellierungssprache steht The Unified Modeling Language UML is OMG s most used spe cification and the way the world models not only application structure yg http livedocs adobe com flex 3 html help html content introbd_2 html zuge griffen am 28 M rz 2009 siehe http trac puremvc org PureMVC_AS3 Ssiehe http opensource adobe com wiki display cairngorm Cairngorm vgl http www uml org zugegriffen am 5 M rz 2009 Object Management Group OMG ist ein nicht kommerziell orientiertes Konsortium welches u A IT Spezifikationen entwickelt 46 4 4 Softwarearchitektur behavior and architecture but also business process and data struc ture Bei UML Elementen handelt es sich um Abstrahierungen von Funktionen und Ob jekten Mit ihrer Hilfe lassen sich Programmabl ufe oder z B Klassendiagram me kompakt und bersichtlich darstellen Es existieren Konventionen die die Ge stalt der UML Elemente und deren Bezeichnungen spezifizieren um Mehrdeutigkeit auszuschlie en Dadurch werden diese Diagramme zur universellen Ausdrucksform Dabei besitzt die UML Darstellung eine wesentlich geringere Komplexit t als das abzubildende reale System Auf diese Weisen werden Problembereiche einfacher er kennbar F r das betrachtete Projekt wir
84. lverlight Plugin JavaFX Erweiterung vgl http www riastats com Stand M rz 2009 Abbildung 3 3 RIA Vergleich e Anwender Der Anwender profitiert von einem guten Community Support Ihm wird freie und kostenlose Software zur Verf gung gestellt welche in der Regel qualitativ hochwertig ist Durch Offenlegung und Bereistellung des Quellcodes wird si chergestellt dass Programme auch zuk nftig prinzipiell durch einen gro en Personenkreis weiter entwickelt werden k nnen u A Bilden eines Forks Im Allgemeinen wird bei der Entwicklung von Open Source Software gro en Wert auf die Verwendung von Standards gelegt Dadurch erh ht sich die In teroperabilit t und die Abh ngigkeit des Anwenders von einer bestimmten Software resp eines Datenformats MS Word nimmt ab Insgesamt f hrt die Existenz von alternativen Open Source Programmen wel che mit kommerzieller Software konkurrieren zu mehr Wettbewerb um die Gunst des Kunden e Entwickler und Contentanbieter Alle die Anwender betreffenden Vorteile lassen sich auf Entwickler und Con tentanbieter bertragen Zus tzlich erm glicht die Quelloffenheit zum Einen die einfache Anpassung des Programms an individuelle Bed rfnisse Fork Bildung andererseits bieten frei verf gbare Software und Softwarekompo nenten Zeit und Kostenersparnis e Software Unternehmen Im Vergleich zu den beiden vorher genannten Gruppen f llt die Liste der Vor teile f r die Software Unter
85. meinschaften erstellt wurden F r viele Arten von Websei ten wie z B Blogs oder Online Shops stehen komplett entwickelte Anwendungen kostenlos zum Download bereit 2 2 Model View Controller MVC Bei Model View Controller MVC handelt es sich um ein Programmierkonzept welches sich f r die Realisierung gro er Softwareprojekte anbietet MVC zeichnet sich im Wesentlichen durch die Trennung von Daten Funktionen und Sichten sowie vorab definierte Schnittstellen aus In Abb 2 1 wird das Konzept skizziert wobei siehe http www php net vgl http de php net manual de preface php zugegriffen am 20 Februar 2009 2 Grundlagen die durchgezogenen Linien direkte und die gestrichelten indirekte Assoziationen dar stellen Durch diese Strukturierung lassen sich u A Inkonsistenzen wie sie bei der Controller Abbildung 2 1 Model View Controller Konzept gemeinschaftlichen Programmierung h ufig auftreten vermeiden Dieses tr gt zu einer effizienten Entwicklung Wartung und Erweiterung der Software bei 2 3 Zend Framework F r umfangreiche Softwareprojekte bietet sich in der Regel ein Framework an Es erleichtert die Programmierarbeit durch vorgefertigte anpassbare Workflows Meist werden Bibliotheken f r Datenbankanbindungen oder Sitzungsmanagement bereit gestellt Welches Framework im konkreten Fall genutzt wird h ngt von individuellen Pr ferenzen der Programmiersprache sowie von der Art des Softwareproje
86. n Zudem sollen nicht relevante Bereiche vom Anwender ausgeblendet werden k nnen Speak the Users Language Da die Abteilung NMI TA auch ausl ndische Kunden bedient wird die Ap plikation mehrsprachig aufgebaut Somit k nnen Nutzer die Texte in ihrer be vorzugten Sprache lesen Nielsen spricht allerdings nicht nur von der Sprache an sich sondern z B auch von der Vermeidung unbekannter Abk rzungen Minimize User Memory Load Um die Ged chtnisbelastung zu minimieren ist es u A empfehlenswert bei Datumseingaben das Format vorzugeben Der Nutzer sollte durch das Pro gramm gef hrt werden So erfolgt im Falle des Reportingclients die Datum seingabe ber einen integrierten Kalender Consistency Konsistenz kann z B durch statische Elemente die stets an der gleichen Stelle vorzufinden sind erreicht werden In der Flex Applikation wird sich das Auswahlmen wie im eLettershop stets links befinden Trotz Skalierbarkeit einzelner Elemente bleibt die Struktur des Layouts gleich Feedback Der Nutzer soll stets ber aktuelle Ereignisse informiert werden Bei l ngeren 29 vgl http www interactive quality de site DE int pdf IS0_9241 10 pdf zugegriffen am 12 April 2009 61 4 Konzeption 10 Ladezeiten oder aufgetretenen Fehlern muss der Nutzer klare R ckmeldungen vom System erhalten Clearly Marked Exits Um dieser Heuristik gerecht zu werden sollten alle Dialog Fenster und die Ap plikat
87. n optisch ansprechenden Benutzerschnittstelle Zudem soll diese potentere Dar stellungsm glichkeiten bieten als die bestehende HTML Variante Neben Usability Aspekten soll sich die Oberfl che an das Corporate Design anlehnen Eine voll st ndige Umsetzung des eLettershop Layouts ist ungeeignet da sich die Funktionen des Reportingclients wesentlich von denen des eLettershops unterscheiden Beim Reportingclient handelt es sich um eine eigenst ndige Applikation Das Corporate Design wird daher lediglich in Bezug auf die Farbwahl sowie die verwendeten Gra fiken ber cksichtigt Hiermit wird dem Wiedererkennungswert Rechnung getragen Dennoch sollte bei Verwendung der Farben folgendes beachtet werden Das Hauptziel der Farbdarstellung die Erleichterung der Informations verarbeitung wird erreicht wenn die gew hlte Farbe leicht feststellbar identifizierbar und unterscheidbar ist Zudem sollte die Bedeutungszu ordnung der Farbe aufgabenangemessen sein 4 7 1 Anordnung der Hauptelemente In Absprache mit dem Auftraggeber wird ein Papier Prototyp erstellt welcher das generelle Layout des Reportingclients festlegt Dieses ist in Abb 4 12 skizziert Das Applikationsfenster wird in drei Bereiche aufgeteilt e Men Um der Erwartungskonformit t gerecht zu werden wird das Einstellungsmen als Leiste wie bei konventionellen Desktopanwendungen oben ber die gesamte Fensterbreite platziert Flex bietet speziell f r diesen Zwec
88. n Abschnitte behandeln die wesentlichen Bereiche der Applikation und erl utern deren Konzept E Malling Auswahl Dashboard Aktualisieren Fenster Ausrichten P Finer t 1D 4145 Response bersicht O X 1D 4136 Geo Tracking SoftBounce von 20 04 2009 D bis 01 05 2009 9 16 2 4 Klicks Status v ive 8 1 2 _arvato systems NMI C Outsourci Mallingld op E3 mailings v Xchance it arvato systems de yagen Sle sich ein und sichern sich die Vortelle von Managed IT Services GD Response bersicht gt Prozentualer Antell der Klicks 1D 4136 Linkauswertung E Klicks pro Stunde E Weieen Link Klicks Total v Klicks Unique Klickrate ffnungsrate H Unkauswertun be 9 http t elettershop de pix gif 131 68 12 62 82 93 Geo Track ZS http templates elettershop de asy abmeldung htm 16 15 2 78 18 29 vagare Sie sich ein und sichern sich die hitp y t late lettersh a Mcal ydortmund l 3 3 0 56 3 66 Vorteile von Managed IT Services USE RATE Ee s Response bersicht http templates elettershop de asy lcal speyer ics H H 0 00 0 00 z i Prozentualer Antell der Klicks glaich pro Stunde F uinkauswertung 6eo Tracking amp Christian Moritz NMI TA Response Ubersicht ffnungen Klicks SoftBounce HardBounce Ji Keine Antwort Versenden Abbildung 5 1 Der Reportingclient 70 5 2 Darstellung 5 2 1 Men Die grundlegenden Optionen f r die Steuerung der App
89. nd z B Datumsformate und andere Darstellungsoptionen dort zu definieren um einen zentralen Steuerungspunkt f r den Entwickler zu schaffen Besonders hilfreich ist diese Variante f r Administra toren die die Applikation nicht n her kennen jedoch weitreichende Modifikationen vornehmen m chten Ihnen wird durch diese zentrale Konfigurationsm glichkeit ein schnelles Anpassen des Systems erm glicht So l sst sich dort z B das globale Da tumsformat definieren public static const DATE_FORMAT String DD MM YYYY HH SS Hengl f r Namensraum Namensr ume werden benutzt um Konflikte bei der Namensgebung zu vermeiden 47 4 Konzeption fehlgeschlagen erfolgreich Abbildung 4 8 Aktivit tendiagramm Mailingvergleich 48 4 5 Verbindungsaufbau zum PHP Backend 4 5 Verbindungsaufbau zum PHP Backend Der Verbindungsaufbau von Flex zu PHP geh rt zum wesentlichen Teil der Kon zeption Hier haben Sicherheit und Performance die h chste Priorit t 4 5 1 Ablauf In Abb 4 9 wird der Ablauf skizziert ein ValueObject zu erhalten Im PHP Backend wird die Funktion einer Klasse angesprochen In Flex bildet die Basis daf r das Remote Objekt in welchem der Funktionsname aus der PHP Klasse angegeben wird N heres zum Remote Objekt wird im n chsten Abschnitt er rtert Flex Remote Objekt Methode resultHandler Funktionsname faultHandler DH H 7 faultObject evil AMF
90. ne Komponente an die die Datumsauswahl ber einen Kalender im Tool Tip Format erm glicht Bei der bermittlung des Datums von Flex zu PHP muss das Format beachtet werden Es ist generell sinnvoll ei ne Konvertierungsfunktion f r die Datumsformate zu programmieren so dass durch einen Funktionsaufruf das ben tigte Format zur ckgegeben wird Flex kann wie auch PHP ein Datum mit der Unixzeit darstellen Hierbei ist zu ber cksichtigen dass Flex intern in Millisekunden rechnet PHP hingegen in Sekunden e Status Neben der zeitlichen Eingrenzung ist eine Filterung nach dem Status pra Die Unixzeit gibt ein Datum in Form von vergangenen Sekunden seit dem 1 Januar 1970 an siehe http www unixtimestamp com 39 4 Konzeption xisrelevant Mit dieser Funktionalit t kann sich der Kunde zum Beispiel alle aktiven d h in der Bearbeitung befindlichen Mailings bersichtlich anzei gen lassen Aus diesem Grund wird ein Statusfilter in Form einer Combobox welche alle relevanten Status enth lt implementiert Im Gegensatz zu einem Frei Text Feld sieht der Anwender in der Combobox die w hlbaren Status so dass die Ged chtnisbelastung minimiert wird Um eine Mehrfachauswahl zu erm glichen kann auch eine Auswahlliste lt mx List gt mit Parameterein stellung allowMultipleSelection true als Komponente in Betracht gezogen werden Der Nachteil liegt hierbei jedoch in dem zus tzlich ben tigten Platz vgl Abb 4 3 f r jede extra
91. nehmen k rzer aus Unternehmen profitieren von den freiwilligen Leistungen der Community in Bezug auf die Weiterentwick lung und Verbreitung von Software Konzepten und Sprachen Das Kernge sch ft verlagert sich teilweise von der Vermarktung eines Produkts hin zu 20Ein Fork bezeichnet in diesem Fall die unabh ngige Entwicklung eines Programms die auf dem Quellcode einer anderen Software aufbaut 25 3 Untersuchung Dienstleitungen um ein Produkt Consulting d h Konzeption von Software L sungen bzw einer Sprache kommerzielle Vermarktung von Entwicklungs umgebungen Aufgrund der Vorteile die sich f r Anwender Entwickler und Contentanbieter ergeben steigt deren Akzeptanz gegen ber Unternehmen die sich im Open Source Bereich engagieren Der einzige gravierende Nachteil welcher mit Open Source einher geht ist der f r Software Unternehmen zunehmende Wettbewerb 3 3 Kommunikation zwischen Flex und PHP In den folgenden Abschnitten werden verschiedene Konzepte der Kommunikation zwischen Flex und PHP erl utert Von Relevanz sind diese Verbindungen deshalb weil Datenbanken nicht direkt mittels Flex angesprochen werden k nnen Hierzu wird ein zus tzliches Backend ben tigt welches f r das betrachtete Projekt bereits in der Sprache PHP realisiert ist vgl Abb 3 4 MySQL External Data Source SWF data request Guraveruses na ram Ca a Customer Web Server PHP Developer Abbildung 3 4 I
92. ng optimieren l sst Um die geografischen Daten zu visualisieren wird eine digitale Weltkarte ben tigt Hierf r gibt es mehrere kostenlose Anbieter eLettershop verwendet Virtual Barth von Microsoft mit unterschiedlichen Funktionen Die ben tigten Daten f r das Geo Tracking werden vom PHP Backend als KML Datei zur Verf gung gestellt In Flex werden diese Informationen in Form von farbigen H ufungspunkten auf der eigentlichen Karte abgebildet Daraus ergibt sich eine Heat Map mit wenigen Farbabstufungen Mit Hilfe dieser Art der Visualisierung wird die geographische Empf ngerverteilung f r den Anwender direkt ersichtlich Der eLettershop verwendet die kostenlose Version GeoLite City von Maxmind siehe http www maxmind com app geolitecity siehe http www microsoft com virtualearth Die Keyhole Markup Language KML besitzt die XML Syntax und wird f r die Beschreibung von geographischen Daten verwendet siehe http code google com int1 de DE apis km1 documentation kmlreference html Eine Heat Map bezeichnet eine grafische ebene Darstellung von Daten deren Werte durch Farben repr sentiert werden 45 4 Konzeption 4 3 MVC Implementierung Im PHP Backend dieses Projekts ist die MVC Struktur implementiert Weitgehend bildet der Flex Client den View Bereich dieses Konzeptes ab Although you can consider a Flex application as part of the View in a distributed MVC architecture you can use Flex
93. ngen welche die Performance schw chen aufgedeckt werden Sengl f r Falle Fallgrube Dag http corlan org 2009 01 07 throwing an error when working with php and amf zugegriffen am 29 April 2009 Tsiehe http www charlesproxy com 77 5 Realisierung 5 3 1 Mehrsprachigkeit Bei Erstellung der Sprachdateien ist auf das Dateiformat zu achten Hier empfiehlt sich UTF 8 um auch Sonderzeichen darstellen zu k nnen Der Flex Builder gibt als Standard das Format ISO 8859 1 vor Bei der Verwendung des Standardformats wurden in diesem Projekt nach dem Einf gen der Sprachdaten s mtliche Sonder zeichen fehlerhaft dargestellt 5 3 2 Sessions Es existieren zwei M glichkeiten die Verbindung von Flex zu einem PHP Backend mit Zend Framework herzustellen Die am h ufigsten im Netz dokumentierte Vari ante ist die Verwendung einer PHP Datei als Endpoint Dabei wird jedoch lediglich der Zend_Amf Server initialisiert Das Session Handling muss in diesem Fall ma nuell erfolgen Die g nstigere Variante stellt daher die Initialisierung in einem Controller vgl Abs 2 2 dar Dabei wird die Verwaltung der Sessions von dem Zend Framework ber nommen Grunds tzlich l uft zwar jede Anfrage von Flex ber den Endpoint ist dieser jedoch im Controller lokalisiert so werden die im Zend Framework implemen tierten Standard Befehle u A f r das Session Handling automatisch ausgef hrt 5 3 3 Remote Objekte Der Entwickler sollte sich
94. ntegration von Flex und PHP Neben PHP erlaubt Adobe Flex die Verwendung weiterer Sprachen welche auch das Ansprechen von Datenbanken erm glichen Zu den g ngigsten z hlen ASP NET Python sowie Java Die Aufgabe besteht somit in der Entwicklung einer geeigne ten Schnittstelle Sie sollte den schnellen und sicheren Zugriff auf die PHP Klassen Zen http learn adobe com wiki display Flex Flex and PHP zugegriffen am 21 April 2009 26 3 3 Kommunikation zwischen Flex und PHP gew hrleisten Eine weitere wichtige Funktion der Schnittstelle ist die Trennung zwi schen datenverwaltendem resp verarbeitendem Backend sowie der Darstellung Wie bereits in Abschnitt 2 4 beschrieben kommt in Flex mit ActionScript und MXML ein hnliches Konzept zur Anwendung Im optimalen Fall erfolgt eine so strikte Auf teilung dass bei nderungen auf PHP Seite keine Modifikationen im Flex Client n tig sind Nachteilig ist sonst neben dem zus tzlichen Programmieraufwand das erforderliche Neukompilieren und Ver ffentlichen der Flex Applikation Ein wesentliches Merkmal der Kommunikation zwischen Flex und PHP ist dass jegliche Anfragen stets vom Flex Client an das PHP Backend gerichtet werden Der Grund hierf r ist dass die Aktionen vom Anwender ausgehen und dieser nicht di rekt auf das PHP Backend zugreifen kann Somit m ssen die Anfragen ber eine Verbindung vom Flex Client an PHP weitergeleitet werden Diese Verbindung kann mit unterschiedlichen
95. nternet bietet in Form des E Mail Versands eine Erg nzung zu den klassischen Instrumenten der Marktanalyse z B Telefonbefragungen Dieser erm glicht zu dem das Verhalten der Marktteilnehmer zu beeinflussen Durch Beobachtbarkeit und Steuerbarkeit sind die notwendigen Voraussetzungen f r eine Regelung vgl Abb 1 1 gegeben Mit ihrer Hilfe l sst sich die Wirkung von E Mail Kampagnen im Folgenden Mailings siehe Abs 2 6 1 genannt optimieren Der Markt stellt Strategieplanung Analyse gt Mailings Markt System Kausalzusammenh nge Reaktionen auf Mailings Visualisieren der Reaktionen Reportingclient Abbildung 1 1 Reporting im Regelkreis hierbei das zu regelnde und zu beobachtene System dar welches durch Mailings angeregt wird Die darauf erfolgenden Reaktionen der Empf nger werden im Re portingclient in der Art visualisiert dass sich die anschlie ende Analyse verein facht Ihr Ziel ist das Ermitteln von Kausalzusammenh ngen Dieses Wissen wird bei der Strategieplanung verwendet um die Parameter zuk nftiger Mailings wie z B Form der Anrede Gestaltung des Inhalts etc anzupassen Die R ckkopplung ergibt sich dadurch dass die so modifizierten Mailings verschickt und die Reaktio nen darauf ebenfalls ausgewertet werden Neben der Optimierung der eigentlichen Mailings kann die Beobachtungsfunktion als Grundlage f r weitere Marketingstrate gien dienen Ihre Ma nahmen berspringen dabei die Grenzen d
96. okolle denkbar wie z B SMTP Diese Untersuchung bezieht sich dabei nur auf das Protokoll HTTP Eine SOAP Nachricht ist im Grunde eine one way bertragung zwischen SOAP Knoten von einem SOAP Sender zu einem SOAP Empf nger Allerdings k nnen Applikationen SOAP Nachrichten so kombinieren dass vielschichtigere Interaktionsformen von einer einfa chen Anfrage Antwort Kommunikation bis hin zum multiplen wechsel seitigen Nachrichtenaustausch realisierbar sind SOAP Envelope SOAP Header SOAP Body Abbildung 3 6 Aufbau einer SOAP Nachricht Der Aufbau einer SOAP Nachricht wird in Abb 3 6 schematisch dargestellt vgl http www w3 org TR soap12 parti zugegriffen am 26 Februar 2009 38 yo http poseidon home tlink de w3c REC soap12 part0 20030624 de_DE L1161 zuge griffen am 26 Februar 2009 31 3 Untersuchung Ebenso wie bei der HT TPService Komponente erfolgt die Daten bertragung bei der Verwendung des XML Formats textuell Im Vergleich zur bin ren bertragung f hrt diese zu einer wesentlich h heren Netzwerklast Daher soll in den n chsten beiden Abschnitten eine Alternative zum XML Format er rtert werden 3 4 3 AMFPHP AMFPHP setzt sich aus den Abk rzungen AMF vgl Abs 3 3 4 und PHP vgl Abs 2 1 zusammen AMFPHP was the first open source Remoting gateway and continues 39 to be developed Es ist ein Instrument das den Datenaustausch zwischen ActionS
97. on e Reportingfunktion Abbildung 4 6 Baumstruktur mit Reportingfunktionen Drag and Drop Bedienung erreicht Der prinzipielle Ablauf dieses Vorgehens wird schematisch in Abbildung 4 7 dargestellt Dashboard Reportingfunktion Diagramm Reportingfunktion Zi Reportingfunktion Abbildung 4 7 Baumstruktur Drag and Drop 4 1 7 Mehrsprachigkeit Die Abteilung NMI TA betreut Kunden international was die Mehrsprachigkeit er fordert Das HTML basierte Reporting bietet bereits mehrere Sprachen an wobei f r jeden Kunden die gew nschte Sprache in einer MSSQL Datenbank gespeichert ist Zur Laufzeit werden die relevanten Sprachtexte aus dieser geladen Um ein kon sistentes Erscheinungsbild zu erreichen sollen die bereits vorhandenen Sprachdaten ebenfalls im Reportingclient verwendet werden Hierzu bieten sich zwei L sungsan s tze an e Datenbankabfrage zur Laufzeit Diese Variante hat den Vorteil dass nderungen an den in der Datenbank abgelegten Sprachtexten sofort im Reportingclient sichtbar sind Auf der an deren Seite wird der Traffic erh ht und die Antwortzeit verl ngert sich Grund hierf r ist die Notwendigkeit einer zus tzlichen Datenbankverbindung um die ben tigten Sprachtexte zu laden Dieses ist einmalig f r die Dauer einer Sessi on oder bei jeder neu hinzugekommenen textuellen Beschreibung erfoderlich 44 4 2 Geo Tracking e Erstellung lokaler Sprachdatei Mit Hilfe eines PHP
98. orm vgl Abb 4 14 Die restlichen 96 1 weichen von dem W3C Standard ab Valide Webseiten nach W3C Standard im deutschen Web wac 3 9 BW3Cc m nicht valide D 0372005 alidome nicht valide ar 96 1 www validome org Abbildung 4 14 berpr fung auf W3C Standardkonformit t so dass es potentiell zu Problemen bei der Verwendung von Hilfsprogrammen wie z B einem Screen Reader kommen kann Auch die deutsche Initiative Aktion Mensch befasst sich mit diesem Thema In einem Artikel ber die Verwendung von Flash stellt sie folgendes fest Wer h tte gedacht dass man mittlerweile Flash zusammen in einem Satz mit Barrierefreiheit erw hnen darf Das Programm hat sich von einer verp nten Spielwiese zu einem ernstzunehmenden Werkzeug f r 3Das World Wide Web Consortium W3C entwickelt Standards Richtlinien und Technologien f r das WWW siehe http www w3 org vgl http www w3 org WAI zugegriffen am 12 April 2009 vol http www validome org zugegriffen am 12 April 2009 26Ejn Screen Reader ist in diesem Fall ein Programm das Inhalte einer Webseite akustisch wider geben kann 58 4 8 Usability Engineering die Erstellung zug nglicher Rich Media Inhalte gemausert Der englische Accessibility Experte Mike Davies meint dazu Its time to admit Flash is part of the web accessibility toolbox 7 Flash Applikationen k nnen durch ihre audiovisuellen M glichk
99. prache stellt die M glichkeit dar Verweise in Form von eingebetteten Links auf andere Dokumente Webseiten geben zu k nnen So konnte ein weltweites Netzwerk aus Webseiten entstehen Wachsende Beliebtheit und die Aussicht auf eine zuk nftige Kommerzialisierung f rderten die Entwicklung verschiedener Technologien welche den Webnutzern ansprechendere Webauftritte bieten sollten Die Abbildungen 1 2 und 1 3 zeigen die Webseiten von MTV aus den Jahren 19977 und 20098 Anhand dieses Beispiels ist der allgemeine Trend zu mehr Grafikeinsatz und gesteigerter Interaktivit t erkennbar 3engl f r reichhaltige Internet Anwendung Programm um Webseiten betrachten und benutzen zu k nnen Bekannte Webbrowser sind z B Internet Explorer Mozilla Firefox sowie Safari 5Browser Plugins teilweise auch Add ons genannt sind Computerprogramme und erweitern die Funktionalit t eines Webbrowsers 6MTV steht f r Music Television und ist ein internationaler Musiksender im Fernsehprogramm siehe http www mtv de Ssiehe http web archive org web 19971015121450 http www mtv com 1 Einleitung Music Musicheads unite Reviews concerts bios Tubescan ews Welcome to MTVonline Local Musical guide to what s going down in your hometown Live Chat with online buds chat with celebrities chat with freaks Best experienced with and MTV Networks MTV and related marks are trademarks of MTV Networks ALL RIGHTS R
100. r der Phishingseite ge langen so an die sensiblen Anwenderdaten um diese anschlie end zu miss brauchen Bei Flash Dateien ist der Identit tsdiebstahl durch das Nachbilden einer Webseite mit wesentlich gr erem Aufwand verbunden da die Option der Quelltextanzeige deaktivierbar ist Zudem k nnen Multimedia Dateien in die Flash Datei eingebunden werden F r Contentanbieter bietet Flash dar ber hinaus die M glichkeit ihre Inhalte vor Vervielf ltigung effektiver zu sch tzen Kompatibilit t Viele Webentwickler k mpfen mit unterschiedlichen Darstellungsstandards in Webbrowsern Es werden Stylesheets verwendet die jedoch teilweise brow serabh ngig dargestellt werden Dieses Verhalten der Browser begr ndet sich in unterschiedlicher Interpretation von Darstellungsparametern oder fehlen der Unterst tzung einzelner Formatierungsoptionen z B ist die Eigen schaft border spacing f r den Internet Explorer unbekannt Da Flash Applikationen mit Hilfe eines Plugins ausgef hrt werden ergeben sich die genannten Darstellungsprobleme in diesem Fall nicht Laut Adobe war der Flash Player 9 im Dezember 2008 in ca 98 der in Europa installierten Webbrowser eingebunden Lizensierung Die Version 3 des Flex SDKs ist Open Source und kostenlos Durch die jah relange Pr senz von Flex konnten sich bereits Entwicklergemeinschaften bil den die weitere quelloffene Komponenten f r Flex anbieten Mit Hilfe des bestehenden Portfolios
101. radressen hinge wiesen werden Prozentualer Anteil der Klicks Der kumulierte prozentuale Anteil der Klicks pro Stunde wir als zeitlicher Verlauf dargestellt Dieser l sst sich gut durch ein Liniendiagramm abbilden vgl Abb 5 8 wobei der Graph in eine S ttigung l uft Klicks pro Stunde Diese Reportingfunktion teilt die insgesamt angefallenen Klicks in Stunden auf Hierdurch kann der Anwender erkennen in welcher Stunde nach dem Versand die Klickanzahl am gr ten war Die Darstellung als Balkendiagramm vgl Abb 5 9 bietet sich an da es sich bei den Daten um diskrete Werte handelt Linkauswertung Flex bietet die Komponente lt mx DataGrid gt an um Datens tze in Tabellenform abzubilden Zus tzlich sind Sortierfunktionen der einzelnen Spalten implemen tiert Diese kann der Anwender nutzen um die im Mailing enthaltenen Links vgl Abb 5 7 nach Klickanzahl zu sortieren Hierdurch ist eine erste einfache Analyse eines Mailings m glich Geo Tracking Das Geo Tracking zeigt mit Hilfe von H ufungspunkten die geographische Ver teilung der Empf nger F r die Darstellung wurde die digitale Karte Virtual Earth verwendet welche eine KML Datei mit Geo Daten abbilden kann vgl Abb 5 11 Im Gegensatz zu Google Earth ist diese auch f r kommerzielle Zwecke kostenlos verwendbar ID 4136 Linkauswertung SEA Link Klicks gesamt v Klicks eindeutig Klickrate empfangene Malis Klickrate ge ffnete Malls http
102. ramework mit dem Paketnamen Zend_ Amf siehe Abs 3 4 4 implementiert wurde unterst tzt Auf das genauere Verhalten wird im n chsten Abschnitt eingegangen 3 3 4 Action Message Format AMF Beim Action Message Format handelt es sich um ein bin res Format welches die Serialisierung und Deserialisierung von ActionScript Objekten bernimmt 25 Bei einer R ckruffunktion auch callback function genannt handelt es sich um eine Funktion die als Parameter einer anderen Funktion bergeben und unter entsprechenden Voraussetzun gen von dieser auch aufgerufen wird 28 3 3 Kommunikation zwischen Flex und PHP AMF allows for native data types and complex object mapping between the client and the server Enabling ActionScript and PHP developers to not worry about type casting between the two languages Dadurch k nnen Client und Server unterschiedliche Datentypen wie z D Arrays oder selbstdefinierte Objekte typsicher austauschen Die erste Version von AMF AMFO unterst tzt die Versendung von Objekten indem lediglich die Referenz bermittelt wird Dadurch werden redundante Instanzen vermieden Objektbezie hungen k nnen wiederhergestellt werden und Zirkelbez ge sind umsetzbar ohne endlose Rekursionen bei der Serialisierung zu erwarten Die aktuelle Version AMF3 ist Open Source und bietet zus tzlich die M glichkeit lediglich die Eigenschaften eines Objekts zu verschicken Au erdem werden neuere Datentyp
103. rd com census 33 3 Untersuchung In Abb 3 7 wird ein Vergleich der f r diese Untersuchung relevanten Schnittstellen dargestellt Konkret handelt es sich dabei um SOAP XML und AMF3 Gemessen wird neben der auftretenden Netzwerklast auch die ben tigte bertragungszeit f r die bermittlung von 5000 Datenbankzeilen Die Daten werden im Flex Client als ActionScript Objekte ben tigt Im Performance Test werden die bertragungszei ten in folgende Elemente untergliedert Server Exec Time Die Server Execution Time spiegelt die Verarbeitungszeit auf dem Server wi der In allen drei Testf llen ergeben sich keine nennenswerten Unterschiede Falls f r die bertragung GZip verwendet wird m ssen die Daten auf dem Server zun chst komprimiert werden Dieses Vorgehen reduziert einerseits das zu bertragende Datenvolumen wodurch die ben tigte bertragungs zeit Transfer Time verringert wird Andererseits erh ht sich die Serverlast durch das Ausf hren der Kompressionsalgorithmen Ob sich insgesamt eine Beschleunigung durch GZip erreichen l sst h ngt stark von der Beschaffen heit der Daten ab Transfer Time Die Transfer Time gibt die eigentliche bertragungszeit vom Server zum Client an Die Dauer der bermittlung unterscheidet sich aufgrund der Datengr e Bin r kodierte Daten ben tigen in der Regel weniger Speicherplatz als solche im XML Format Aus diesem Grund erlaubt AMF3 die schnellste Daten ber mittlung Par
104. rden da diese zus tzliche Aktivit t des Anwenders erfordern Laut Kundenbefragung werden maximal vier Diagramme gleichzeitig betrachtet Dieser Wert sollte jedoch keine feste Vorgabe darstellen da sich die Kundenanforde rungen ndern k nnen Die Implementierung erlaubt daher die gleichzeitige Anzeige von bis zu acht Feldern Eine h here Anzahl erscheint nicht sinnvoll da auf handels blichen Monitoren aus Platzgr nden keine nutzbare Darstellung erreicht werden kann In Abb 4 13 werden das Tile Layout skizziert und die relevanten Eigenschaf Tilebreite _ Feld 1 Feld 2 Feldh he ke Feldbreite Tileh he Abbildung 4 13 Layout der Tile Komponente ten dargestellt Es muss anhand der Diagramm Anzahl die universelle Feldgr e stets neu berechnet werden Da der Trend bei Bildschirmen in Richtung Widescreen geht bietet sich eine Anordnung an welche die Felder nebeneinander auflistet Ab drei Feldern soll eine zweite Zeile f r die Diagramme hinzukommen Die prinzipielle L sung dieser Aufgabe kann durch folgenden Pseudo Code beschrieben werden Die H he des Feldes bestimmen wenn AnzahlDiagramme gt 2 dann Feldh he Tileh he 2 zwei Zeilen sonst Feldh he Tileh he eine Zeile ende wenn Die Breite des Feldes bestimmen wenn AnzahlDiagramme gt 4 dann Spaltenaufteilung in zwei Zeilen bei gerader Anzahl oben und un
105. rdurch kann das ffnen einer E Mail eindeutig einem bestimmten Empf nger zugeordnet werden Diese Parameter werden verschl sselt bermittelt um das Manipulationsrisiko der Reportingdaten zu minimieren Wie auch die Lesebest tigung l sst sich das automatische Laden von Bildern in E Mail Nachrichten unterdr cken so dass eine ffnung zu keiner R ckmel dung f hrt Beide genannten Methoden sind unzureichend um verl ssliche Aussagen treffen zu k nnen Durch Klicken auf einen beliebigen Link in der E Mail best tigt der Empf n ger sowohl den Empfang als auch die ffnung der E Mail Dieses Verfahren wird im n chsten Punkt beschrieben e Link in der E Mail angeklickt Die Ermittlung der Klicks auf Links entspricht prinzipiell dem bereits be schriebenen ffnungs Tracking mittels einer eingebetteten Grafik Jeder Link besitzt eine Identit tsnummer und wird ber den Tracking Server geroutet Den Empf ngern wird ebenfalls eine eindeutige Id zugeordnet so dass konkret OURL ist die Abk rzung f r Uniform Resource Locator umgangssprachlich auch Internetadres se genannt 15 2 Grundlagen bestimmt werden kann wer zu welchem Zeitpunkt auf welchen Link geklickt hat Zus tzlich wird in diesem Fall der ffnungsstatus aktualisiert falls das Tracking Bild nicht geladen wurde Diese Informationen werden vom Tracking Server in die Reporting Datenbank geschrieben bevor der Anwender zu der gew nschten Internet Adresse we
106. refreiheit sowie Sicherheit und Per formance keine nennenswerten Probleme zu erwarten Die Akzeptanz der Anwender gegen ber dieser Technologie wurde anhand einer empirischen Evaluierung gezeigt Die Verwendung von RIAs ist grunds tzlich f r jede Anwendung m glich jedoch nicht immer sinnvoll Im Falle von schlichtgehaltenen Webseiten ist die Verwendung von RIAs tendenziell berdimensioniert Allerdings gilt dass komplexere Weban gebote z B Internet Shops Groupware komplexere Technologien zur effizienten Umsetzung erfordern Allgemein geht der Trend hin zu desktop hnlichen und somit komplexeren Weban wendungen Joseph Reger wagt bez glich der Betriebssystementwicklung folgende Zukunftsprognose Der Browser wird in diesem Umfeld zum Client sowie zum zentralen Programm das User bei der Arbeit am Computer benutzen Das Be triebssystem selbst r ckt dabei zunehmend in den Hintergrund Bei Groupware handelt es sich um kollaborative Webapplikationen wie z B Google Docs siehe http docs google com Joseph Reger ist Chief Technology Officer CTO von Fujitsu Siemens Computers vgl http pressetext de news 081113019 pc zukunft browser loest betriebssystem ab zugegriffen am 3 Mai 2009 79 6 Zusammenfassung und Ausblick Wie weit diese Entwicklung bereits fortgeschritten ist zeigt die spezielle Linux Dis tribution Splashtop Dabei handelt es sich um ein u erst schlankes eingebette tes System welches ne
107. rf gung steht Durch diese Anordnung der Hauptelemente soll eine intuitive Aufteilung gew hr leistet werden 4 7 2 Dashboard Der gr te Teil der Reportingoberfl che soll den Reportingdarstellungen zur Verf gung stehen Die Darstellungselemente werden in Fenstern platziert welche verscho ben in ihren Abma en frei skaliert sowie geschlossen werden k nnen Wie bereits in Abschnitt 4 1 6 erl utert wurde werden darzustellende Datens tze per Drag and Drop dem entsprechenden Darstellungselement hinzugef gt Die direkte Bearbei tung von Graphen z B das Entfernen eines Datensatzes geschieht mit Hilfe von Steuerelementen Diese werden zusammen mit den Darstellungselementen in grafi schen Modulen Fenstern gekapselt so dass die Zuordnung offensichtlich und die Bedienung entsprechend intuitiv ist Der Anwender kann mehrere Reportingfunktionen innerhalb des Dashboards be trachten und dadurch vergleichen F r die Umsetzung des Feldes eignet sich die Komponente lt mx Tile gt welche Darstellungsobjekte gekachelt anordnet F r die Gr e der einzelnen Felder resp Diagramme ergibt sich ein Layout Problem Jedes Feld in der Komponente Tile besitzt die gleichen Ma e die durch die Parameter 56 4 7 Darstellung tileHeight und tileWidth angegeben werden Diese m ssen zur Laufzeit so ange passt werden dass stets alle Diagramme sichtbar sind und der Platz im Dashboard effizient genutzt wird Scrollbalken sollten vermieden we
108. se Time Mit Parse Time ist die Dauer der Datenumwandlung gemeint Durch die Ver wendung von AMF3 erfolgt die Daten bertragung typsicher Somit werden ActionScript Objekte bermittelt wodurch keine Typkonvertierung erforder lich ist Dadurch ist die Parse Time gegen ber der Gesamt bertragungszeit marginal Render Time Die Datenbankzeilen werden mit Hilfe der Komponente lt mx DataGrid gt ange zeigt Hierf r sind die bertragenen Daten zu rendern Diese Aufgabe ge schieht lokal im Client weshalb die Darstellungsgeschwindigkeit u A von der Leistung des Rechners abh ngt Data Bandwidth Die bertragung mittels AMF3 erzeugt eindeutig die geringste Bandbreite Der Grund hierf r liegt in der bin ren Kodierung der Daten welche wesentlich speichereffizienter ist als das XML Format Der Vergleich verdeutlicht dass AMF3 sowohl beziiglich der Bandbreite als auch der Ubertragungsgeschwindigkeit die beste Performance besitzt Durch die kurze Bei GZip handelt es sich um ein Programm f r die Datenkompression 34 3 5 Fazit Verarbeitungszeit auf Serverseite Server Execution Time sowie der sehr geringen Parse Time konnten mit AMF3 5000 Datenbankzeilen innerhalb von 1 2 Sekunden bermittelt werden Beim Einsatz von SOAP ist der zeitliche Aufwand ca zehn mal h her Es sprechen somit mehrere Gr nde f r die Verwendung von AMF3 Da das PHP Backend bereits auf dem aktuellen Zend Framework aufbaut bietet sich die Ver
109. seit com alertbox 20001029 html zugegriffen am 20 Februar 2009 siehe http silverlight net siehe http javafx net 21 3 Untersuchung zu Flex kurz dargestellt Die Code Beispiele sollen einen Eindruck von Syntax und Semantik der jeweiligen Sprache vermitteln 3 2 1 Silverlight Microsofts Silverlight bezeichnet sowohl das Entwicklungsframework als auch das Browser Plugin das f r die g ngigsten Webbrowser verf gbar ist Das Framework erm glicht die plattform bergreifende Programmierung von NET Anwendungen Hierbei ist der Webentwickler nicht auf eine konkrete Sprache festgelegt Silverlight erlaubt u A den Einsatz von JavaScript und Python Die Oberfl che d h Anzeige und Be dienelemente wird mit Hilfe der Spra DLR che XAML eXtensible Application Meran WPF u Markup Language also letztlich in ei Web Control Languages nem XML Format beschrieben Durch geen oe aces Fr Si HTTP den grunds tzlichen Ansatz Darstel Generics Request VBx y q Jscript lung und Funktion zu trennen wird as 5 Int bei Silverlight die Bindung an eine be EEE 2 lt stimmte Programmiersprache vermie CLR Execution Engine g a den 4 UI Core JS Engine Neben dem kostenlosen Framework Verin A ne Controls und Plugin bietet Microsoft f r die Er Pa Fe MAX TeS Media g stellung einzelner Elemente in XAML Images See den kostenpflichtigen Editor Expressi
110. sgew hlt Die Mailings besitzen abh ngig von ihrem Status unterschied liche Reportingfunktionen Nur die bei denen Tracking aktiviert ist und der Status sich in SHIPMENT RUNNING oder SHIPMENT _ FINISHED befindet bieten alle Reportingfunktionen an Bei der Mailing und Funktionsauswahl handelt es sich jeweils um eine Auflistung Da der Funktionsumfang vom Mailing abh ngig ist bie tet es sich an die Funktionen als ste des Mailing Knotens in der Baumstruktur anzuzeigen vgl Abb 4 6 So werden lediglich die auf das Mailing anwendbaren Funktionen angezeigt wodurch der Anwender vor Fehlbedienungen bewahrt sowie eine gute visuelle Ergonomie erreicht wird Ein entscheidender Aspekt beim Anzeigen und Vergleichen von Diagrammen ist die Visualisierung der Ergebnisse In Abschnitt 4 7 2 wird ein Konzept vorgestellt das dem Anwender eine individualisierbare Fl che bietet Neben dem Vergleich einzelner Diagramme die sich in getrennten Feldern befinden soll der Nutzer die M glichkeit haben eine Reportingfunktion f r mehrere Mailings in einer gemeinsamen Darstel lung anzuzeigen Diese Option ist lediglich bei der Graphenansicht relevant Die Charting Komponenten in Flex erlauben das Plotten mehrerer Graphen innerhalb eines Diagramms was den direkten Vergleich der Datens tze erm glicht Das Hin zuf gen weiterer Datens tze zu einem bereits bestehenden Diagramm wird mitteles 43 4 Konzeption 1 Reportingfunktion H Reportingfunkti
111. t f r das Mailing wurde festgelegt Bis zum Versand k n nen noch nderungen an Inhalt und Empf ngerliste vorgenommen werden e SHIPMENT RUNNING Der E Mail Versand ist aktiv e SHIPMENT FINISHED Der Versandprozess wurde abgeschlossen Das Mailing ist abgearbeitet 2 7 Data Warehouse Data Warehouse bezeichnet eine spezielle Art von Datenbank welche ihre Daten aus mehreren Quellen bezieht und der weiteren Datenanalyse dient vgl BG08 Ziel dieser Analyse ist das Auffinden von Kausalzusammenh ngen Solche Korrelationen sind speziell f r das Reporting von Bedeutung da sie Entwicklungen herausstellen k nnen und Grundlage f r Marketingstrategien bilden Diese Behauptung l sst sich an einem projektnahen Beispiel verdeutlichen welches auf der Datenanalyse mittels eines Data Warehouse basiert Laut dieser werden in E Mails eingebettete Grafi ken von E Mail Programmen zunehmend unterdr ckt Da die Anbieter von E Mail Diensten kontinuierlich nach neuen Wegen zur Abwehr von Spam Viren und Spyware suchen hat sich eine anf nglich kaum verbreitete Funktion 3Das File Transfer Protocol FTP ist ein Protokoll f r die Datei bertragung im Internet 17 2 Grundlagen die standardm ige Unterdr ckung der Anzeige von Grafiken in ein all gegenw rtiges Ph nomen in der Auslieferungslandschaft f r eMails ver wandelt Vermarkter die ihre Kampagnen optimieren m chten m ssen ber diese Praxis und deren
112. ta Pan A 62 3 Mailings 16 2 2 ee ee a 5 2 4 Dashboard 5 2 5 Reportingfunktionen 5 37 Pitfalls 4 40 sock kde ee 5 3 1 Mehrsprachigkeit 5 3 2 Sessions 5 3 3 Remote Objekte 6 Zusammenfassung und Ausblick Anhang A eLettershop Oberfliche B CD Inhaltsverzeichnis Abbildungsverzeichnis Quellcodeverzeichnis Literaturverzeichnis Inhaltsverzeichnis 79 81 eh dis Maite Me Sea uals N ee 81 SER plage E E 83 85 87 89 vii Inhaltsverzeichnis viii 1 Einleitung Die vorliegende Arbeit findet in Kooperation mit arvato systems dem IT Dienstleister der Bertelsmann AG statt Dabei bedient die Abteilung NMI TA den Markt f r kommerziellen Nachrichtenversand haupts chlich E Mail Verkehr Das derzeitige Kernprojekt von NMI TA ist der eLettershop Er wurde urspr nglich intern genutzt um Massen E Mails im Kundenauftrag zu verschicken Aufgrund der gro en Nachfrage wurde das Portal f r die direkte Kundennutzung ge ffnet Im Zuge dessen erfolgte die Entwicklung eines benutzerfreundlichen Webinterfaces Die ses erlaubt den Kunden das eigenst ndige Erstellen und Versenden von E Mails an gro e Empf ngerlisten Diese Funktionalit t ist bereits mittels g ngiger Webtech nologien zufriedenstellend umgesetzt Des Weiteren lassen sich die Reaktionen der E Mail Empf nger in Form eines Reportings darstellen welches h here Anforderun
113. ten gleiche Anzahl bei ungerader Anzahl oben ein Diagramm mehr als unten Feldbreite Tilebreite Abrunden AnzahlDiagramme 1 2 sonst Feldbreite Tilebreite 2 zwei Spalten ende wenn oo oa o fF won MH KL bo bo bo bo a e N ra O a Quellcode 4 5 Tile Layout 57 4 Konzeption Der endg ltige in ActionScript Code programmierte Algorithmus ber cksichtigt einen zus tzlichen Aspekt Um einen Abstand zwischen den Feldern zu erreichen werden einige Pixel von der Tileh he und breite substrahiert vgl Abb 4 13 4 7 3 Barrierearme Flash Applikationen Im Internet k nnen unterschiedliche Barrieren auftreten Neben technischen Hinder nissen wie z B Plugins existieren auch personenspezifische Barrieren So kann eine Sehschw che dazu f hren dass eine Webseite mit zu kleinen Navigationselementen nicht bedienbar ist Dabei liegt die Verantwortung beim Entwickler die Webseiten so zu gestalten dass sie f r m glichst viele Menschen zug nglich sind vgl Hel05 Tim Berners Lee betont die Relevanz dieses Aspektes auf der Webseite f r die Web Accessibility Initiative WAI des W3 Konsortiums mit folgender Aussage The power of the Web is in its universality Access by everyone regard less of disability is an essential aspect 4 Laut einer Untersuchung zum deutschsprachigen Web von Validome einem Validierungs Service fiir HTML sind nur 3 9 der betrachteten Webseiten W3C konf
114. tion Im Anschluss an die Untersuchungen wird ein Konzept zur Realisierung des Repor tingclients in Form einer RIA Applikation entwickelt In diesem Kapitel wird auf spezielle Funktionen des Reportingclients eingegangen weshalb auch einige Varian ten des E Mail Reportings zu er rtern sind Anhand dieser konkreten Problemstel lung werden allgemeine Probleme bei der Erstellung von RIA erl utert Das bisherige Reporting hat wie in der Einleitung und Motivation erw hnt wur de einige Unzul nglichkeiten welche im neuen Reporting behoben werden sollen Zudem sind die alten Funktionalit ten um weitere zu erg nzen Im Gegensatz zur konventionellen Softwareentwicklung kann es beim Einsatz von Flex sinnvoll sein zuerst die Oberfl che zu gestalten und anschlie end die Funk tionen zu implementieren Das betrachtete Softwareprojekt stellt hierf r ein gutes Beispiel dar Hier wurde zun chst die Oberfl che entworfen um sie als Prototyp f r Usability Tests zu nutzen Zum einen erlauben solche Tests ein Feedback durch mehrere Probanden andere Entwickler ggf Kunden wodurch Unzul nglichkei ten in einer sehr fr hen Phase der Entwicklung identifiziert werden k nnen Aus Gr nden der Usability sollten die zu erwartenden Benutzerinteraktionen Werteein gabe Bet tigung von Buttons etc die Oberfl chenstruktur bestimmen und nicht umgekehrt Zudem ist die Mehrzahl der bestimmenden Variablen in den Objekten definiert aus denen sich die Oberfl
115. to implement the entire MVC architecture on the client Hierfiir eignen sich alle MVC Frameworks die die Programmiersprache ActionScript unterst tzen Zwei etablierte MVC L sungen fiir ActionScript sind PureMVC und Cairngorm Die vollst ndige MVC Implementierung eignet sich vornehmlich f r Projekte von komplexer Struktur Zwar basiert der eLettershop auf einer umfang reichen Klassenarchitektur diese ist jedoch vollst ndig im PHP Backend abgebildet Im Flex Client sind neben den Verbindungsmethoden haupts chlich Funktionen f r die Darstellungsart zu implementieren Erweiterungen der Reportingfunktionen sind im Wesentlichen im PHP Backend zu realisieren Aus diesen Gr nden bleibt die Pro grammstruktur berschaubar In diesem Fall wirkt sich eine MVC Implementierung negativ aus da sie zu einem erheblichen Mehraufwand bei der Entwicklung f hrt und die Komplexit t erh ht Wie eine geeignete Programmstruktur f r das betrach tete Projekt ohne Anwendung eines MVC Frameworks erreicht werden kann wird im folgenden Abschnitt erl utert 4 4 Softwarearchitektur Programmierung besteht im engeren Sinne aus der Erstellung von Quelltext vgl Pit86 Statt der Verwendung eines restriktiven MVC Konzeptes werden in dem betrachteten Projekt g ngige Methoden der Softwareentwicklung kurz vorgestellt Ihre konsequente Anwendung erleichtert die sp tere Wartung von ActionScript Programmcode und der MXML Komponenten 4 4 1 Unified Mode
116. tretende Probleme helfen mir die Applikation zu verbessern Es w re hilfreich wenn du deine Gedanken w hrend des Arbeitens aussprichst Also ruhig erw hnen was du gerade tust wie du es erreichen willst und was dabei unklar ist Der Ablauf wird folgenderma en verlaufen Ich bitte Dich zu versuchen gleich eine kleine Aufgabe zu bearbeiten Ich werde w hrend der Bearbeitung anwesend sein jedoch weder eingreifen noch Fragen beantworten um das Ergebnis nicht zu verf lschen Anschlie end findet eine kurzes Gespr ch statt in dem du mir deine Erfahrungen und evtl Verbesserungsvorschl ge mitteilen kannst Vorab schon mal vielen Dank f r die Teilnahme Abbildung 4 15 M ndlicher Vortrag 65 4 Konzeption Anschlie end soll folgende Aufgabenstellung Usability Probleme in der Reporting Applikation aufdecken Vor dir siehst du den Prototypen der Reporting Applikation Ab jetzt kannst du bereits laut denken also mir mitteilen was du siehst und was du davon h ltst Stell Dir vor der Besitzer einer Webseite zu sein die Surfbretter verkauft Am 17 03 09 hast Du ein Mailing mit dem Betreff Neue Surfbretter verschickt Eine Woche davor 10 03 09 hat die gleiche Empf ngerliste von dir eine E Mail mit dem Betreff G nstige Surfbretter erhalten Nun m chtest du die Reaktionen der Empf nger gerne vergleichen 1 Response bersicht Lass dir von beiden Mailings jeweils die Response bersicht anzeigen 2 K
117. urch steht der Applikation die volle Bildschirmfl che zur Verf gung und kann zudem wie eine Desktop Applikation wirken e Logout Funktion Das Ausloggen erfolgt ber einen Button welcher auf die gleiche URL verweist wie die Auslog Funktion des eLettershops Da sowohl der Reportingclient als auch der eigentliche eLettershop die gleiche Session verwenden bietet sich diese Umsetzung an Der Anwender gelangt beim Logout auf die eLettershop Startseite die den erfolgreichen Logout mit einem Informationstext quittiert 5 2 2 Filter Der Filter stellt die entscheidende Komponente f r die Steuerung der Mailingansicht dar Um den Aspekt der Individualisierbarkeit zu beachten kann der Anwender das Filterfenster ein und ausblenden siehe Pfeil in Abb 5 3 Beim Eingabefeld der MailingId wird ber die Parametereinstellung restrict 0 9 der Komponente lt mx TextInput gt die Eingabe von Buchstaben und Sonderzeichen unterbunden Hier durch wird dem Usability Kriterium der Fehlervorbeugung Rechnung getragen Die ser Aspekt wird auch an anderer Stelle der Datumseingabe ber cksichtigt Sie er folgt ber die Terminwahl innerhalb eines implementierten Kalenders Der Benutzer wird an dieser Stelle von der Einhaltung eines g ltigen Datumformates entbunden Gute Usability zeichnet sich nicht nur durch grundlegende Konzepte aus sondern l sst sich auch durch eine Vielzahl kleinerer Detaill sungen verbessern Ein Beispiel hierf r ist die Eingabe Best
118. wird die Realisierung von Rich Internet Applications beschleunigt 3Phishing ist eine Methode die ihren Namen aus Password und Fishing bekommen hat und auf das Ausspionieren von Passw rtern zielt Bei Stylesheets handelt es sich um Dateien oder Text mit Formatierungsangaben siehe http www css4you de browsercomp html standardbrowser vel html zugegriffen am 21 April 2009 20 http www adobe com products player_census flashplayer version_penetration 3 2 Alternativen zu Flex 3 1 2 Nachteile Nach Aussage von Jakob Nielsen im Oktober 2000 Flash 99 bad sind f r ihn 99 aller Flash Applikationen in Bezug auf Usability schlecht Nielsen begr ndet und relativiert seine Behauptung wie folgt None of these usability problems are inherent in Flash You can de sign usable multimedia objects that comply with the guidelines and are easy to use The problem is simply that current Flash design tends to encourage abuse Das Problem f r Nielsen liegt in den umfangreichen grafischen M glichkeiten einer Flash Applikation und dem Reiz diese berm ig zu verwenden Effekthascherei und ungew hnliche grafische Benutzerobjekte mindern f r ihn die Usability Die Probleme der Benutzertauglichkeit sind jedoch nicht in Flash verwurzelt Grund s tzlich lassen sich Flash Applikationen erstellen die die Richtlinien der Benutzer freundlichkeit erf llen Um Nielsens Kritik zu begegnen soll bei der
119. zeroberfl che Elemente durch Bewegung zu bedienen 4 What you see is what you get WYSIWYG bezeichnet eine Erstellungsvariante bei der das Endergebnis schon direkt beim Erstellen sichtbar ist 11 2 Grundlagen 2 5 E Mail Da sich das Reporting intensiv mit der Datenauswertung von E Mail Nachrichten befasst soll der Internetdienst E Mail in diesem Abschnitt n her betrachtet werden Einen berblick zur grunds tzlichen technische Umsetzung dieses Dienstes gibt die abstrahierte Darstellung in Abb 2 3 Mail Server 1 Mail Server 2 E Mail NE SMTP 4 Protokoll f r den Zugriff SE Postfachzugriff E Mail Postf cher f E Mail Programm Abbildung 2 3 Die bermittlung einer E Mail Neben dem Protokoll f r das Sendeverfahren SMTP werden noch die beiden in ternen Bestandteile einer E Mail Header und Body erl utert 2 5 1 Simple Mail Transfer Protocol SMTP Der E Mail Versand ist durch das Simple Mail Transfer Protocol SMTP definiert Dabei erfolgt der Datenaustausch nicht direkt zwischen Sender und Empf nger son dern ber spezielle Mail Server welche die versendeten Daten entgegennehmen Der Abruf erfolgt mit Hilfe eines E Mail Programms unter der Verwendung eines ber tragungsprotokolls Hierbei stellen POP und IMAP zwei standarisierte Proto kolle f r den E Mail Empfang dar Das Post Office Protocol POP ist ein bertragungsprotokoll f r den E Mail Empfang 16D

Download Pdf Manuals

image

Related Search

Related Contents

AFU 300/600 Gebrauchs- und Wartungsanleitung  Ginger 4706/PC Installation Guide  8070. Monographische Themen.  Spinner Unit LSM-200 User Manual  企画書をダウンロード  Optic Test Instruments  

Copyright © All rights reserved.
Failed to retrieve file