SlideShare ist ein Scribd-Unternehmen logo
Client Technologien

Ein Überblick für Usability Engineering Professionals
SwissUPA/SwissCHI Event: Zürich, 28. April 2011




                                                        Folie 1
                                                        26. April 2011




                                                        Dr. Thomas Memmel et al.

                                                        © Zühlke 2011
Softwarelösungen, Produktinnovation
und Managementberatung

                              •   Mehr als 7000 Projekte in
                                  Europa realisiert
                              •   70 Mio. CHF Umsatz (2010)
                              •   400 Mitarbeitende (Ende 2010)
                              •   In Deutschland, Grossbritannien,
                                  Österreich und in der Schweiz
                              •   Gründung 1968,
 Wir beraten,                     im Besitz von Partnern
 entwickeln und
                              •   ISO 9001 und 13485 zertifiziert
 integrieren
 aufgabengerecht –
 mit überzeugender
 Qualität und
 Wirtschaftlichkeit.
Eine Idee mehr. Und Zühlke.                                4. März 2011   Folie 2   © Zühlke 2011
Unser Leistungsangebot


                                  Management Consulting
 Consulting                   •
                              •   Technologieberatung & Methodik
                              •   Team Training

                                  Softwarelösungen
 Development                  •
                              •   Produktentwicklung


                                  Enterprise Integration
 Integration                  •
                              •   Methodischer Baukasten
                                  mit Best Practices




Eine Idee mehr. Und Zühlke.                            4. März 2011   Folie 3   © Zühlke 2011
Zühlke und Client Technologien


Zühlke Group
•      Beratung bei der Wahl der richtigen Client
       Technologie
•      Know-How in einer großen Bandbreite an Client und
       Server Technologien


Zühlke Competence Center Client Technologien
•      Ständige Auseinandersetzung mit neuen
       Technologien
•      Technologie-Scouting
•      Ausbildungsplanung der Mitarbeiter
Client Technologien | Dr. Thomas Memmel et al.      26. April 2011   Folie 4   © Zühlke 2011
Competence Center Client Technologie
User Interface Development Today




Client Technologien | Dr. Thomas Memmel et al.   26. April 2011   Folie 5   © Zühlke 2011
Die Wahl der richtigen Client Technologie
Beispiel aus dem Projektalltag


Ein Anbieter von Druckdienstleistungen für Presseagenturen
möchte seinen Kunden einen Client anbieten, mit dem
Kunden Pressefotos in ein Online Archiv hochladen können.
Zwecks einfacher Verteilung und Aktualisierung der Software
schwebt dem Anbieter ein Web-Client vor, der in allen
gängigen Browsern funktioniert.
Aussehen und anfühlen soll sich die Applikation aber wie eine
moderne Desktop-Anwendung. Die Usability der Applikation
ist für die Akzeptanz und den Erfolg massgeblich.


Welche Client Technologien kommen in Frage?



Client Technologien | Dr. Thomas Memmel et al.    26. April 2011   Folie 6   © Zühlke 2011
Richtige Client Technologie
…oder Pech gehabt?

•      «…ist mit dieser Technologie nicht möglich»
•      «…so ein Widget gibt es nicht»
•      «…eine Animation kann man hier nur mit sehr viel Aufwand umsetzen»
•      «…leider kann diese Art der Tabelle nur Text anzeigen»
•      «…wenn wir das gewusst hätten, hätten wir von Anfang an eine andere
       Technologie empfohlen»




Client Technologien | Dr. Thomas Memmel et al.   26. April 2011   Folie 7   © Zühlke 2011
Usability Beratung & Client Technologien


Stetig wachsende Auswahl an Client Technologien
Verschiedene Technologie-Lieferanten, z.B.
•      Microsoft
•      Adobe
•      Java Sun / Oracle


Die Wahl der Client Technologie hat z.B. Auswirkung auf
•      Umsetzbarkeit von Funktionalität
•      Komplexität der Entwicklung, Flexibilität
•      Usability und User Experience (Ziele)
Client Technologien | Dr. Thomas Memmel et al.     26. April 2011   Folie 8   © Zühlke 2011
Die Wahl der richtigen Client Technologie
    Benutzerinteraktion vs. Ausführung
  Web




                                                       Keine Installation

                                                       Applikation aktuell




                                                                                                       Ständige Datenerfassung
                                                                                Ständige Interaktion
                                                     An jedem PC verfügbar
Ausführung

                Daten lesen




                                                        Lokale Dienste
  Standalone




                                                     Hohe Rechenleistung

                                                       Offline benutzbar
                                                                                                                                 Quelle: Kaintantzis, Nikolaos (2010): «Wie steht
               einfach                               Benutzerinteraktion     komplex/hoch                                        es um RIA?» Vortrag anlässlich des RIA-Kickoffs,
                                                                                                                                 JUGS-Vortrag. Online unter:
                                                                                                                                 http://www.zuehlke.com

    Client Technologien | Dr. Thomas Memmel et al.                            26. April 2011                                     Folie 9                  © Zühlke 2011
Die Wahl der richtigen Client Technologie
    Komplexität: Java Client Technologien und Produkte



              Struts Spring Web Flow                      JSF ICEfaces RichFaces
Web




             Grails Struts2 Spring MVC RoR
                                                               qooxdoo Dojo RAP
                                   Ultra Thin, Thin
                                                                Wicket DWR GWT
                                                                    RIA (Ajax)               RIA (Plug-in)
Ausführung




                                                                      ULC Thinlets
                                                                      Java FX            Applet Flash
                                                                            CaptainCasa
                                                                                    RIA (ohne Browser)
Standalone




                                                                     Fat, Rich, Smart      Eclipse RCP
                                                         Swing Application Framework NetBeans RCP
                                                                  SWT JFace Swing Spring Desktop
                                                                                                             Quelle: Kaintantzis, Nikolaos (2010): «Wie steht
             einfach                                 Benutzerinteraktion                komplex/hoch         es um RIA?» Vortrag anlässlich des RIA-Kickoffs,
                                                                                                             JUGS-Vortrag. Online unter:
                                                                                                             http://www.zuehlke.com

    Client Technologien | Dr. Thomas Memmel et al.                                       26. April 2011      Folie 10                 © Zühlke 2011
Die Wahl der richtigen Client Technologie
Rolle des Usability Professionals



Einbindung in Client Technologie Entscheid


Grundkenntnisse zu Client Technologien zur Impact-
Abschätzung


Durchgängigkeit UI Prototyping  Produkt
•      Zukunftstrend: Durchgängigkeit, Werkzeugketten
•      Werkzeuge für GUI-Prototyping in Zieltechnologien
•      Evolutionäres Prototyping


Client Technologien | Dr. Thomas Memmel et al.   26. April 2011   Folie 11   © Zühlke 2011
Thin, Rich oder RIA?
Verschiedene Client Strategien




Client Technologien | Dr. Thomas Memmel et al.   26. April 2011   Folie 12   © Zühlke 2011
Thin Client Technologie (1/2)


•      Applikationskomponenten sind auf Server
       gespeichert
•      GUI wird zur Laufzeit in einem
       Webbrowsers angezeigt und bedient
•      Verarbeitung findet auf Server statt
•      Geringe Anforderungen an Soft- und
       Hardware
•      Geeignet für einfache Applikationen mit
       hoher Verbreitung
•      Eingeschränkte Dynamik und
       Funktionalität

Client Technologien | Dr. Thomas Memmel et al.   26. April 2011   Folie 13   © Zühlke 2011
Thin Client Technologie (2/2)


Thin Client Technologien: ASP, ASP.NET,
PHP, Ruby, JSF.
Beispiele
                                                 Amazon.com




                                                 Ebay.com




Client Technologien | Dr. Thomas Memmel et al.                26. April 2011   Folie 14   © Zühlke 2011
Rich Client Technologie (1/2)


•      GUI und Logik sind lokal verfügbar
•      Zugriff auf andere lokale Inhalte und
       Applikationen
•      Geeignet für hochinteraktive und
       grafiklastige Anwendungen
•      Maximum an Dynamik
•      Potentielle Probleme
       – Installationszwang
       – Verteilung und Aktualisierung
       – Aufwand für Integration in IT-Landschaft




Client Technologien | Dr. Thomas Memmel et al.      26. April 2011   Folie 15   © Zühlke 2011
Rich Client Technologie (2/2)


Rich Client Technologien
•      Java Swing
•      Eclipse RCP
•      Windows Presentation Foundation
•      Windows Forms




Client Technologien | Dr. Thomas Memmel et al.   26. April 2011   Folie 16   © Zühlke 2011
Rich Client Technologie
Fallbeispiel: ZEUS Airport Management




Video zu ZEUS: http://www.youtube.com/watch?v=o9nlMy5LCBo
Client Technologien | Dr. Thomas Memmel et al.              26. April 2011   Folie 17   © Zühlke 2011
Rich Client Technologie – WPF
Windows Presentation Framework



Rollenbasierte Werkzeugkette – Durchgängigkeit vom Design bis zum Code

       Expression Design                           Expression Blend                           Visual Studio




      Zielgruppe:                                Zielgruppe:                           Zielgruppe:
      • Gestalter                                • Interaction Designer                • Entwickler
                                                 • Gestalter


Client Technologien | Dr. Thomas Memmel et al.                        26. April 2011     Folie 19         © Zühlke 2011
Rich Client Technologie – WPF
Diskussion


Umfassendes                                      Hürden / Risiken
Präsentationssystem
                                                 •   Plattformabhängigkeit
Gestalterische Freiheiten
                                                 •   Gestalter arbeiten weiterhin
•      Individuelle Komponenten                      mit Adobe (und nicht
       (neu oder kombiniert)                         Expression Design)
•      Gestaltung über Themes,                   •   Gefahr durch zu hohe
       Styles und Templates                          Freiheitsgrade:
                                                     GUIs werden abseits der
Umfangreiche Schnittstellen
                                                     Standards ohne
für Multimedia
                                                     ausreichendes Testing
Viele Erweiterungen                                  entwickelt
verfügbar (z.B. Ribbon)
Umwandlung nach RIA
(Silverlight) möglich
Client Technologien | Dr. Thomas Memmel et al.                         26. April 2011   Folie 20   © Zühlke 2011
Rich Client Technologie – Swing
Synthetica BlackEye Look & Feel




                                  Quelle: http://www.jyloo.com/synthetica/screenshots/blackeye/
Dr. Thorsten Büring                   6. September 2010       Folie 21               © Zühlke 2011
Rich Client Technologie – Swing
Flamingo UI-Control Extension




                                                      Quelle: https://flamingo.dev.java.net/
Dr. Thorsten Büring               6. September 2010   Folie 22                 © Zühlke 2011
Rich Client Technologie – Swing
GUI Prototyping



Napkin für „sketchy“ Prototypen                  JFormsDesigner
                                                 •      Standalone oder als Plug-in
                                                 •      UI Entwurf unabhängig von
                                                        der Programmierung
                                                   Quelle: http://www.formdev.com/


Quelle: http://napkinlaf.sourceforge.net




Client Technologien | Dr. Thomas Memmel et al.   26. April 2011         Folie 23     © Zühlke 2011
Rich Client Technologie – Eclipse RCP
Zühlke Kundenprojekt mit der SBB



                                                                        © SBB 2010




                                                                                      Siehe auch: Thomas
                                                                                      Memmel, Markus
                                                                                      Flückiger, Médard
                                                                                      Fischer (2011): «User
                                                                                      Experience & Agile
                                                                                      Development». In: UX
                                                                                      Best Practices How to
                                                                                      Achieve More Impact
                                                                                      with User Experience,
                                                                                      Kapitel 7.
                                                                                      Englisch McGraw-Hill
                                                                                      Professional.



User Interface Engineering in der Praxis | Dr. Thomas Memmel   1. Mai 2011           Folie 24                 © Zühlke 2011
Rich Client Technologie – Eclipse RCP
Diskussion



Häufig verwendete Alternative zu Java Swing
Native Darstellung der GUI Elemente (Look & Feel des OS)
GUI Editor
•      Aber: Code muss in der Regel noch überarbeitet werden
•      Möglichkeit zum GUI Prototyping
•      Programmierkenntnisse sind notwendig für die Umsetzung von interaktivem
•      Keine medienbruchfreie Einbinden von Design Artefakten, wie z.B. Bitmap-
       oder Vektorgrafiken




Client Technologien | Dr. Thomas Memmel et al.   26. April 2011   Folie 25   © Zühlke 2011
Rich Client Technologie – Eclipse RCP
Visual GUI Editor


                                                                  Quelle: http://www.eclipse.org




Client Technologien | Dr. Thomas Memmel et al.   26. April 2011         Folie 26                   © Zühlke 2011
Rich Client Technologie – Eclipse RCP
SWT Prototyping mit Balsamiq Mockup Extension




                                           Quelle: http://blogs.balsamiq.com/product/2009/05/13/swt-bmml-an-interesting-
                                           new-mockups-extension/




UI Prototyping Tools | Dr. Thomas Memmel                         20. Mai 2011            Folie 27               © Zühlke 2011
Rich Client Technologie – Eclipse RCP
Diskussion



Geeignet für sehr aufwändige GUIs
Erstellen von Custom Widgets (Eclipse SWT)
Vielzahl von Bibliotheken/Erweiterungen
•      Beispiel: Nebula Framework
•      Erhöht die Auswahl an GUI Elementen
•      Aber: nicht alle bereit gestellten GUI Elemente können einfach angepasst
       und kontrolliert werden


Vorsicht: UIs können sehr schnell aussehen wir eine Entwicklungsumgebung!
•      Einsatz von RCP sollte seitens UX Experte hinterfragt werden

Client Technologien | Dr. Thomas Memmel et al.    26. April 2011   Folie 28   © Zühlke 2011
Rich Client Technologie – Eclipse RCP
GUI Elemente: Nebula Project




                                                                  Quelle: http://www.eclipse.org/nebula/

Client Technologien | Dr. Thomas Memmel et al.   26. April 2011   Folie 29               © Zühlke 2011
RIA Client Technologien


•      Über Webbrowser angezeigt und bedient
•      Aber: Teile der Präsentations- und
       Businesslogik werden zur Laufzeit auf den
       Client Computer geladen
•      Höhe Dynamik des GUIs – nicht jeder
       Input hat eine Serverabfrage zur Folge
•      Potentielle Probleme
       – Teilweise wird Plugin benötigt
       – Kollaboration mit OS nur eingeschränkt
       – Browser-Funktionen wie Vor und Zurück
         funktionieren eventuell nicht




Client Technologien | Dr. Thomas Memmel et al.     26. April 2011   Folie 30   © Zühlke 2011
RIA Client Technologien


Überblick, zum Beispiel:
•      GWT
•      ASP.NET mit AJAX
•      ASP.NET MVC
•      JSF mit AJAX
•      JavaFX
•      Microsoft Silverlight
•      Adobe Flash / Flex




Client Technologien | Dr. Thomas Memmel et al.   26. April 2011   Folie 31   © Zühlke 2011
RIA Technologie – Microsoft Silverlight
Zühlke Projekt: Inversion Viewer



Siehe: http://inversion.innetag.ch/




Client Technologien | Dr. Thomas Memmel et al.   26. April 2011   Folie 32   © Zühlke 2011
RIA Technologie – Microsoft Silverlight


Nutzt Teil des WPF und .Net Frameworks
•      Gleiche Werkzeugkette
•      Wiederverwendung von Know-how und Code
•      Ähnliche Freiheitsgrade bei der Gestaltung
Silverlight Toolkit zur Erweiterung der GUI Library
Teilweise Hardwarebeschleunigung möglich
Out-of-the-Browser Features: Grenzen zwischen RIA & Rich Clients
verschwimmen
Cross-Plattform, auch Mobile (Windows Phone 7)
Direkter Konkurrent zu Adobe Flash

Client Technologien | Dr. Thomas Memmel et al.      26. April 2011   Folie 33   © Zühlke 2011
RIA Technologie – Adobe Flash / Flex


Flash                                            Flex
•      Von Animationen zu Applikationen          •   Entwickler ansprechen
•      Traditionelles Stammklientel: Designer    •   Trennung Präsentation und Logik: MXML
                                                     versus Action Script
•      Zeitleistenbasierte Grafik-Editor mit
       Skriptsprache                             •   Flex Builder: Klassische IDE (Eclipse Plugin




Client Technologien | Dr. Thomas Memmel et al.             26. April 2011   Folie 34   © Zühlke 2011
RIA Technologie – Adobe Flex
Zühlke Kundenprojekt Internet Datensafe




                                                                             Quelle:
                                                                             www.datainherit.com

Client Technologien | Dr. Thomas Memmel et al.   26. April 2011   Folie 35   © Zühlke 2011
RIA Technologie – Adobe Flex
Zühlke Kundenprojekt Internet Datensafe




                                                                             Quelle:
                                                                             www.datainherit.com

Client Technologien | Dr. Thomas Memmel et al.   26. April 2011   Folie 36   © Zühlke 2011
RIA Technologie – Adobe Flex
Zühlke Kundenprojekt Internet Datensafe




                                                                             Quelle:
                                                                             www.datainherit.com

Client Technologien | Dr. Thomas Memmel et al.   26. April 2011   Folie 37   © Zühlke 2011
RIA Technologie – Adobe Flash / Flex


Benötigt Browser-Plugin (aber weit verbreitet > 90%)
Funktionsumfang sehr ähnlich zu Silverlight
Adobe Air für Offline-Fähigkeit
Leider kein Flash Pendant zu SketchFlow
Ansonsten ausgereifte Werkzeug-Kette


Flash ist noch dominant für Internet Videos
•      75% aller Online-Videos werden im Flash Player
•      HTML5 als künftig starke Konkurrenz


Client Technologien | Dr. Thomas Memmel et al.   26. April 2011   Folie 38   © Zühlke 2011
RIA Technologie – Adobe Air
Fallbeispiel: eBay Desktop




                                                                  Quelle: http://desktop.ebay.com


Client Technologien | Dr. Thomas Memmel et al.   26. April 2011   Folie 39               © Zühlke 2011
RIA Technologie – Adobe Air
Fallbeispiel: Balsamiq Prototyping Tool




                                                                             Siehe:
                                                                             http://balsamiq.com/
Client Technologien | Dr. Thomas Memmel et al.   26. April 2011   Folie 40   © Zühlke 2011
Ausblick: Adobe Wallaby
Adobe Flex zu HTML5



Adobe Wallaby
•      Experimentelles Tool
•      Ermöglicht Nutzung der
       etablierten Developer Tools
•      Transformation nach HTML5


Die Zukunft ist HTML5?
•      Verschiedene Werkzeuge
•      Aber einheitlicher Standard

Siehe auch:                                      Quelle: http://www.chip.de/news/Adobe-Wallaby-Flash-zu-HTML5-
http://labs.adobe.com/downloads/wallaby.html     konvertieren_47684802.html
Client Technologien | Dr. Thomas Memmel et al.                         26. April 2011         Folie 41           © Zühlke 2011
RIA Technologie – JavaFX


Alternative zu Flash und Silverlight
•      Aber: deutlich geringere Verbreitung
JavaFX Anwendungen benötigen Java
Runtime (langsamer als Flash/Silverlight)                                    Quelle: http://www.javafx.com



Ausführung: Desktop (Web Start), Applet
Controls und Performance seit Version 1.3
geeignet, um gute GUIs zu entwickeln
GUI Builder stehen zur Verfügung: z.B.
NetBeans
JavaFX: UI Technologie von „Swing 2.0“?


Client Technologien | Dr. Thomas Memmel et al.   26. April 2011   Folie 42           © Zühlke 2011
RIA Technologie – JavaFX
Durchgängige Werkzeugkette



•      Durchgängigkeit
•      Integration von Design-Artefakten mit
       JavaFX 1.3 Production Suite
•      Aus Adobe Illustrator
       und Adobe Photoshop heraus




                                                                  Quelle: http://www.javafx.com
Client Technologien | Dr. Thomas Memmel et al.   26. April 2011   Folie 43               © Zühlke 2011
RIA Technologie – JavaFX
Beispiel: Geo View


                                                     Quelle: http://www.vancouver2010.com/olympic-medals/geo-view/




Client Technologien | Dr. Thomas Memmel et al.   26. April 2011         Folie 44              © Zühlke 2011
RIA Technologie – Google Web Toolkit
Beispiel Google Mail App




                                                                  Quelle: http://gwt.google.com/samples/Mail/Mail.html
Client Technologien | Dr. Thomas Memmel et al.   26. April 2011          Folie 45                © Zühlke 2011
RIA Technologie – Google Web Toolkit


GWT Compiler wandelt Java Code um
•      Web-Anwendung: HTML, CSS und JavaScript/AJAX
•      Benutzt Browser-Standards
•      Vielzahl an GWT Bibliotheken
Google Gears
•      Per Google Gears können GWT Anwendungen auf
       lokale Ressourcen des Clients zugreifen
•      Ähnlich der Sandbox von Java Applets
Kein Browser Plug-in notwendig
•      Einfacheres Deployment

Client Technologien | Dr. Thomas Memmel et al.   26. April 2011   Folie 46   © Zühlke 2011
RIA Technologie – Google Web Toolkit
Sencha Ext GWT Framework: GUI Komponenten




                                                       Quelle: http://www.sencha.com/examples/explorer.html
Client Technologien | Dr. Thomas Memmel et al.   26. April 2011       Folie 47           © Zühlke 2011
RIA Technologie – Google Web Toolkit
GUI Design



Gestaltung eigener GUI Elemente
•      HTML und CSS setzen die Grenzen
•      Bei GWT findet das GUI Rendering stets in HTML statt
•      Der GUI Designer muss die Browser-Kompatibiliät
       sicherstellen
Visuell ansprechende und stark interaktive
Benutzeroberfläche im Vergleich zu anderen RIA
Technologien schwierig
•      GWT eher ähnlich zu reinen Desktop Anwendungen
GUI Prototyping sehr aufwendig (Coding)
•      Wireframes oft die bessere Wahl
Client Technologien | Dr. Thomas Memmel et al.   26. April 2011   Folie 48   © Zühlke 2011
RIA Technologie – Google Web Toolkit
Sencha Ext GWT Framework, Beispiel Web Desktop




                                                                  Quelle: http://www.sencha.com/examples/desktop.html
Client Technologien | Dr. Thomas Memmel et al.   26. April 2011            Folie 49               © Zühlke 2011
Mobile Client Technologien
iOS, Android & Co.




Client Technologien | Dr. Thomas Memmel et al.   26. April 2011   Folie 50   © Zühlke 2011
Mobile Client Technologien
Neue Möglichkeiten mit HTML5




                                           HTML5,
                                           CSS3                                 PhoneGap


                              Moderne
     Sencha                    HTML-                PhoneGap
                                                               Sencha
                                                               Touch
     Touch
                              basierte
                             Mobile App                                                HTML5/ CSS3

                                             …




Herausforderungen von mobilen Apps | ruh                       20. April 2011      Folie 51     © Zühlke 2011
Mobile Client Technologien
Native vs. Web-Applikation



                                           Native App     Klassische Web          Moderne HTML-basierte Mobile
                                                          App                     App
  Plattform Look & Feel                    Ok             Nein                    Styling der UI Widgets (CSS3)
  Zugriff auf Device-Sensoren              Ok             Nein                    GPS (HTML5, PhoneGap)
  (GPS, Accelerometer, Kamera,                                                    Accelerometer, Kamera,
  Kompass, …)                                                                     Kompass (PhoneGap)
  Zugriff auf Device-Daten                 Ok             Nein                    Kontakte (PhoneGap)
  (Kontakte)
  Verkauf über Store möglich               Ok             Nein                    Ok (PhoneGap)
  Implementierungsaufwand                  je Plattform   einmalig                Einmaliger Aufwand
  Offlinefähigkeit                         Ok             Nein                    Ok (HTML5 Offline Applications
                                                                                  und Local Storage)
  Cooles interaktives UI                   Ok             Nein                    CSS3 (Transforms and
                                                                                  Transitions, Media Queries),
                                                                                  Sencha Touch, HTML5
                                                                                  Drag&Drop
Herausforderungen von mobilen Apps | ruh                         20. April 2011       Folie 52         © Zühlke 2011
RIA Technologie
HTML5 – Kurzüberblick


                                                                                  <canvas width="400" height="300"
Offline Storage                                                                   style="margin-left:-30px"></canvas>
                                                                                  <script> var context =
                                                                                  document.getElementsByTagName('canvas')

Canvas (2D/3D) und Video – Zeichnen mit JavaScript                                [0].getContext('2d'); var lastX =
                                                                                  context.canvas.width * Math.random(); var
                                                                                  lastY = context.canvas.height *
                                                                                  Math.random(); var hue = 0; function line() {
SVG Grafiken                                                                      context.save();
                                                                                  context.translate(context.canvas.width/2,
                                                                                  context.canvas.height/2); context.scale(0.9,
Local Database                                                                    0.9); context.translate(-
                                                                                  context.canvas.width/2, -
                                                                                  context.canvas.height/2);
Bidirektionale Kommunikation (Client/Server)                                      context.beginPath(); context.lineWidth = 5 +
                                                                                  Math.random() * 10; context.moveTo(lastX,
                                                                                  lastY); lastX = context.canvas.width *

Drag & Drop Mechanismen                                                           Math.random(); lastY =
                                                                                  context.canvas.height * Math.random();
                                                                                  context.bezierCurveTo(context.canvas.width
                                                                                  * Math.random(), context.canvas.height *
File Access (Drag/Drop File from/to Desktop, siehe Google Mail!)                  Math.random(), context.canvas.width *
                                                                                  Math.random(), context.canvas.height *
                                                                                  Math.random(), lastX, lastY); hue = hue + 10
Anpassung an Plattformen und Geräte mit CSS3                                      * Math.random(); context.strokeStyle = 'hsl('
                                                                                  + hue + ', 50%, 50%)'; context.shadowColor
                                                                                  = 'white'; context.shadowBlur = 10;
uvm.                                                                              context.stroke(); context.restore(); }
                                                                                  setInterval(line, 50); function blank() {
                                                                                  context.fillStyle = 'rgba(0,0,0,0.1)';
                                                                                  context.fillRect(0, 0, context.canvas.width,
                                                                                  context.canvas.height); } setInterval(blank,
  Mehr Infos zu HTML5 z.B. unter http://slides.html5rocks.com                     40); </script>
Client Technologien | Dr. Thomas Memmel et al.                  26. April 2011   Folie 53                 © Zühlke 2011
Schlusswort
 Client Technologien: Technologie- & Aufwandsgrenzen
Web




               Ultra Thin                         Thin              RIA
                                                                   (Ajax)                                    HTML5 wird die Grenze
                                                                                                                 verschieben

                                                                             RIA (Plug-in)


                                                                        RIA (ohne Browser)
Standalone




                                                                            Fat, Rich, Smart

                                                                                                      Quelle: Kaintantzis, Nikolaos (2010): «Wie steht
             einfach                              Benutzerinteraktion               komplex/hoch      es um RIA?» Vortrag anlässlich des RIA-Kickoffs,
                                                                                                      JUGS-Vortrag. Online unter:
                                                                                                      http://www.zuehlke.com

 Client Technologien | Dr. Thomas Memmel et al.                                      26. April 2011   Folie 54                 © Zühlke 2011
Zusammenfassung


•      Die Vielzahl an Client Technologien bietet zahlreiche Varianten in der UI
       Entwicklung
•      Die Umsetzbarkeit vieler GUI Konzepte und Designelemente hängt auch vom
       Einsatz bestimmter Client Technologien ab
•      Neue Technologien wie HTML5 werden die Technologie-Landschaft
       nochmals verändern
•      Technisches Verständnis oder ein Überblick über Vor- und Nachteile erlaubt
       Einflussnahme des UX Experten
•      Für Usability Experten ist es von Vorteil, sich mit verschiedenen Client
       Technologien auseinander-zusetzen
Mehr zum Thema:
http://www.zuehlke.com/de/software-product-engineering/kompetenzen/know-how/client-technologien.html

Client Technologien | Dr. Thomas Memmel et al.                   26. April 2011   Folie 55        © Zühlke 2011

Weitere ähnliche Inhalte

Andere mochten auch

Audience research
Audience researchAudience research
Audience research
Kelechi Okorie
 
Valoració esportiva
Valoració esportivaValoració esportiva
Valoració esportivabisbalbasquet
 
Expo de biotecnologia repro embrio
Expo de biotecnologia repro embrioExpo de biotecnologia repro embrio
Expo de biotecnologia repro embrio
Ronald Lozano Veloz
 
Proyecto integrador m1 s4
Proyecto integrador m1 s4Proyecto integrador m1 s4
Proyecto integrador m1 s4
jesus medellin
 
Deconstruction of lyrics
Deconstruction of lyricsDeconstruction of lyrics
Deconstruction of lyrics
Kelechi Okorie
 
El parrafoo
El parrafooEl parrafoo
BIL 102 WS 3 Powerpoint
BIL 102 WS 3 PowerpointBIL 102 WS 3 Powerpoint
BIL 102 WS 3 Powerpoint
glennjohnson
 
la amistad
la amistadla amistad
la amistad
katherine1994
 
Project Management with Usability Engineering Methods
Project Management with Usability Engineering MethodsProject Management with Usability Engineering Methods
Project Management with Usability Engineering Methods
Thomas Memmel
 
OGM qué son los organismos genéticamente seleccionados
OGM qué son los organismos genéticamente seleccionadosOGM qué son los organismos genéticamente seleccionados
OGM qué son los organismos genéticamente seleccionados
Ektwr1982
 

Andere mochten auch (13)

Audience research
Audience researchAudience research
Audience research
 
Valoració esportiva
Valoració esportivaValoració esportiva
Valoració esportiva
 
Expo de biotecnologia repro embrio
Expo de biotecnologia repro embrioExpo de biotecnologia repro embrio
Expo de biotecnologia repro embrio
 
DEGREE DISTINCTION
DEGREE DISTINCTIONDEGREE DISTINCTION
DEGREE DISTINCTION
 
Proyecto integrador m1 s4
Proyecto integrador m1 s4Proyecto integrador m1 s4
Proyecto integrador m1 s4
 
Steinemann Hermann
Steinemann HermannSteinemann Hermann
Steinemann Hermann
 
Deconstruction of lyrics
Deconstruction of lyricsDeconstruction of lyrics
Deconstruction of lyrics
 
El parrafoo
El parrafooEl parrafoo
El parrafoo
 
BIL 102 WS 3 Powerpoint
BIL 102 WS 3 PowerpointBIL 102 WS 3 Powerpoint
BIL 102 WS 3 Powerpoint
 
la amistad
la amistadla amistad
la amistad
 
Module Opdracht
Module OpdrachtModule Opdracht
Module Opdracht
 
Project Management with Usability Engineering Methods
Project Management with Usability Engineering MethodsProject Management with Usability Engineering Methods
Project Management with Usability Engineering Methods
 
OGM qué son los organismos genéticamente seleccionados
OGM qué son los organismos genéticamente seleccionadosOGM qué son los organismos genéticamente seleccionados
OGM qué son los organismos genéticamente seleccionados
 

Ähnlich wie Client Technologien - Ein Überblick für Usability Professionals

Weitere Dezentralisierung der BI - mehr Selbständigkeit der Fachbereiche durc...
Weitere Dezentralisierung der BI - mehr Selbständigkeit der Fachbereiche durc...Weitere Dezentralisierung der BI - mehr Selbständigkeit der Fachbereiche durc...
Weitere Dezentralisierung der BI - mehr Selbständigkeit der Fachbereiche durc...Business Intelligence Research
 
User Interface Engineering Praxis
User Interface Engineering PraxisUser Interface Engineering Praxis
User Interface Engineering Praxis
Thomas Memmel
 
Warum ANWENDUNGSBEREITSTELLUNG in der digitalen Wirtschaft so wichtig ist
Warum ANWENDUNGSBEREITSTELLUNG in der digitalen Wirtschaft so wichtig istWarum ANWENDUNGSBEREITSTELLUNG in der digitalen Wirtschaft so wichtig ist
Warum ANWENDUNGSBEREITSTELLUNG in der digitalen Wirtschaft so wichtig ist
Citrix
 
Zühlke Whitepaper Client Technologien
Zühlke Whitepaper Client TechnologienZühlke Whitepaper Client Technologien
Zühlke Whitepaper Client Technologien
Thomas Memmel
 
Apm best practices
Apm   best practicesApm   best practices
Apm best practices
rschuppe
 
Infrastruktur agil bauen - der DBA im SAFe-Umfeld
Infrastruktur agil bauen - der DBA im SAFe-UmfeldInfrastruktur agil bauen - der DBA im SAFe-Umfeld
Infrastruktur agil bauen - der DBA im SAFe-Umfeld
Daniel Steiger
 
Technische Dokumentation in der Cloud - Rolf Keller
Technische Dokumentation in der Cloud - Rolf KellerTechnische Dokumentation in der Cloud - Rolf Keller
Technische Dokumentation in der Cloud - Rolf Kellertecom
 
Client 2015 Strategie Short Version V0.52
Client 2015 Strategie Short Version V0.52Client 2015 Strategie Short Version V0.52
Client 2015 Strategie Short Version V0.52
Udo Schwartz
 
OC|Weekly Talk: "Das müsste man mal digitalisieren" - Mit Low-Code schnell zu...
OC|Weekly Talk: "Das müsste man mal digitalisieren" - Mit Low-Code schnell zu...OC|Weekly Talk: "Das müsste man mal digitalisieren" - Mit Low-Code schnell zu...
OC|Weekly Talk: "Das müsste man mal digitalisieren" - Mit Low-Code schnell zu...
OPITZ CONSULTING Deutschland
 
DOAG 2010: ADF Faces RC Best Practice
DOAG 2010: ADF Faces RC Best PracticeDOAG 2010: ADF Faces RC Best Practice
DOAG 2010: ADF Faces RC Best Practice
Ulrich Gerkmann-Bartels
 
CLOUDSERVICES FÜR ISVs
CLOUDSERVICES FÜR ISVsCLOUDSERVICES FÜR ISVs
CLOUDSERVICES FÜR ISVs
acentrix GmbH
 
Hosting Provider Summit Mai 2012
Hosting Provider Summit Mai 2012Hosting Provider Summit Mai 2012
Hosting Provider Summit Mai 2012Thomas Uhl
 
Dokumentenmanagement mit Alfresco
Dokumentenmanagement mit AlfrescoDokumentenmanagement mit Alfresco
Dokumentenmanagement mit Alfresco
Christoph Steinhauer
 
EOSD 2012: Deutsche Wolke
EOSD 2012: Deutsche WolkeEOSD 2012: Deutsche Wolke
EOSD 2012: Deutsche Wolke
Thomas Uhl
 
OC|Webcast "Java heute" vom 24.08.2021
OC|Webcast "Java heute" vom 24.08.2021OC|Webcast "Java heute" vom 24.08.2021
OC|Webcast "Java heute" vom 24.08.2021
OPITZ CONSULTING Deutschland
 
GreenIT BB Award 2012 - Cisco - Summit
GreenIT BB Award 2012 - Cisco - SummitGreenIT BB Award 2012 - Cisco - Summit
GreenIT BB Award 2012 - Cisco - SummitNetzwerk GreenIT-BB
 

Ähnlich wie Client Technologien - Ein Überblick für Usability Professionals (20)

Weitere Dezentralisierung der BI - mehr Selbständigkeit der Fachbereiche durc...
Weitere Dezentralisierung der BI - mehr Selbständigkeit der Fachbereiche durc...Weitere Dezentralisierung der BI - mehr Selbständigkeit der Fachbereiche durc...
Weitere Dezentralisierung der BI - mehr Selbständigkeit der Fachbereiche durc...
 
User Interface Engineering Praxis
User Interface Engineering PraxisUser Interface Engineering Praxis
User Interface Engineering Praxis
 
Warum ANWENDUNGSBEREITSTELLUNG in der digitalen Wirtschaft so wichtig ist
Warum ANWENDUNGSBEREITSTELLUNG in der digitalen Wirtschaft so wichtig istWarum ANWENDUNGSBEREITSTELLUNG in der digitalen Wirtschaft so wichtig ist
Warum ANWENDUNGSBEREITSTELLUNG in der digitalen Wirtschaft so wichtig ist
 
Zühlke Whitepaper Client Technologien
Zühlke Whitepaper Client TechnologienZühlke Whitepaper Client Technologien
Zühlke Whitepaper Client Technologien
 
mühlnickel beit_PechaKucha
mühlnickel beit_PechaKuchamühlnickel beit_PechaKucha
mühlnickel beit_PechaKucha
 
Apm best practices
Apm   best practicesApm   best practices
Apm best practices
 
Infrastruktur agil bauen - der DBA im SAFe-Umfeld
Infrastruktur agil bauen - der DBA im SAFe-UmfeldInfrastruktur agil bauen - der DBA im SAFe-Umfeld
Infrastruktur agil bauen - der DBA im SAFe-Umfeld
 
Service und Support In der OpenSource-Welt
Service und Support In der OpenSource-WeltService und Support In der OpenSource-Welt
Service und Support In der OpenSource-Welt
 
Technische Dokumentation in der Cloud - Rolf Keller
Technische Dokumentation in der Cloud - Rolf KellerTechnische Dokumentation in der Cloud - Rolf Keller
Technische Dokumentation in der Cloud - Rolf Keller
 
Client 2015 Strategie Short Version V0.52
Client 2015 Strategie Short Version V0.52Client 2015 Strategie Short Version V0.52
Client 2015 Strategie Short Version V0.52
 
OC|Weekly Talk: "Das müsste man mal digitalisieren" - Mit Low-Code schnell zu...
OC|Weekly Talk: "Das müsste man mal digitalisieren" - Mit Low-Code schnell zu...OC|Weekly Talk: "Das müsste man mal digitalisieren" - Mit Low-Code schnell zu...
OC|Weekly Talk: "Das müsste man mal digitalisieren" - Mit Low-Code schnell zu...
 
2011 05-05 activiti
2011 05-05 activiti2011 05-05 activiti
2011 05-05 activiti
 
DOAG 2010: ADF Faces RC Best Practice
DOAG 2010: ADF Faces RC Best PracticeDOAG 2010: ADF Faces RC Best Practice
DOAG 2010: ADF Faces RC Best Practice
 
CLOUDSERVICES FÜR ISVs
CLOUDSERVICES FÜR ISVsCLOUDSERVICES FÜR ISVs
CLOUDSERVICES FÜR ISVs
 
OSLC in Aktion
OSLC in AktionOSLC in Aktion
OSLC in Aktion
 
Hosting Provider Summit Mai 2012
Hosting Provider Summit Mai 2012Hosting Provider Summit Mai 2012
Hosting Provider Summit Mai 2012
 
Dokumentenmanagement mit Alfresco
Dokumentenmanagement mit AlfrescoDokumentenmanagement mit Alfresco
Dokumentenmanagement mit Alfresco
 
EOSD 2012: Deutsche Wolke
EOSD 2012: Deutsche WolkeEOSD 2012: Deutsche Wolke
EOSD 2012: Deutsche Wolke
 
OC|Webcast "Java heute" vom 24.08.2021
OC|Webcast "Java heute" vom 24.08.2021OC|Webcast "Java heute" vom 24.08.2021
OC|Webcast "Java heute" vom 24.08.2021
 
GreenIT BB Award 2012 - Cisco - Summit
GreenIT BB Award 2012 - Cisco - SummitGreenIT BB Award 2012 - Cisco - Summit
GreenIT BB Award 2012 - Cisco - Summit
 

Mehr von Thomas Memmel

Zühlke on Enterprise Apps @ Apple Developer Stage Zürich
Zühlke on Enterprise Apps @ Apple Developer Stage ZürichZühlke on Enterprise Apps @ Apple Developer Stage Zürich
Zühlke on Enterprise Apps @ Apple Developer Stage Zürich
Thomas Memmel
 
New User Interfaces & Channels for the Enterprise
New User Interfaces & Channels for the EnterpriseNew User Interfaces & Channels for the Enterprise
New User Interfaces & Channels for the Enterprise
Thomas Memmel
 
Innovation Leadership
Innovation LeadershipInnovation Leadership
Innovation Leadership
Thomas Memmel
 
Mobile User Experience
Mobile User ExperienceMobile User Experience
Mobile User Experience
Thomas Memmel
 
Agile Human-Centered Software Engineering
Agile Human-Centered Software EngineeringAgile Human-Centered Software Engineering
Agile Human-Centered Software Engineering
Thomas Memmel
 
Model-driven prototyping for corporate software specification
Model-driven prototyping for corporate software specification Model-driven prototyping for corporate software specification
Model-driven prototyping for corporate software specification
Thomas Memmel
 
Tool-Support for Interdisciplinary and Collaborative User Interface Specifica...
Tool-Support for Interdisciplinary and Collaborative User Interface Specifica...Tool-Support for Interdisciplinary and Collaborative User Interface Specifica...
Tool-Support for Interdisciplinary and Collaborative User Interface Specifica...
Thomas Memmel
 
Model-Based Visual Software Specification
Model-Based Visual Software SpecificationModel-Based Visual Software Specification
Model-Based Visual Software Specification
Thomas Memmel
 
Zühlke Usability Engineering Dienstleistungen
Zühlke Usability Engineering DienstleistungenZühlke Usability Engineering Dienstleistungen
Zühlke Usability Engineering DienstleistungenThomas Memmel
 
User Interface Prototyping - Low- and High-Fidelity Prototyping Today
User Interface Prototyping - Low- and High-Fidelity Prototyping TodayUser Interface Prototyping - Low- and High-Fidelity Prototyping Today
User Interface Prototyping - Low- and High-Fidelity Prototyping Today
Thomas Memmel
 
Integratives Usability Engineering
Integratives Usability EngineeringIntegratives Usability Engineering
Integratives Usability EngineeringThomas Memmel
 

Mehr von Thomas Memmel (11)

Zühlke on Enterprise Apps @ Apple Developer Stage Zürich
Zühlke on Enterprise Apps @ Apple Developer Stage ZürichZühlke on Enterprise Apps @ Apple Developer Stage Zürich
Zühlke on Enterprise Apps @ Apple Developer Stage Zürich
 
New User Interfaces & Channels for the Enterprise
New User Interfaces & Channels for the EnterpriseNew User Interfaces & Channels for the Enterprise
New User Interfaces & Channels for the Enterprise
 
Innovation Leadership
Innovation LeadershipInnovation Leadership
Innovation Leadership
 
Mobile User Experience
Mobile User ExperienceMobile User Experience
Mobile User Experience
 
Agile Human-Centered Software Engineering
Agile Human-Centered Software EngineeringAgile Human-Centered Software Engineering
Agile Human-Centered Software Engineering
 
Model-driven prototyping for corporate software specification
Model-driven prototyping for corporate software specification Model-driven prototyping for corporate software specification
Model-driven prototyping for corporate software specification
 
Tool-Support for Interdisciplinary and Collaborative User Interface Specifica...
Tool-Support for Interdisciplinary and Collaborative User Interface Specifica...Tool-Support for Interdisciplinary and Collaborative User Interface Specifica...
Tool-Support for Interdisciplinary and Collaborative User Interface Specifica...
 
Model-Based Visual Software Specification
Model-Based Visual Software SpecificationModel-Based Visual Software Specification
Model-Based Visual Software Specification
 
Zühlke Usability Engineering Dienstleistungen
Zühlke Usability Engineering DienstleistungenZühlke Usability Engineering Dienstleistungen
Zühlke Usability Engineering Dienstleistungen
 
User Interface Prototyping - Low- and High-Fidelity Prototyping Today
User Interface Prototyping - Low- and High-Fidelity Prototyping TodayUser Interface Prototyping - Low- and High-Fidelity Prototyping Today
User Interface Prototyping - Low- and High-Fidelity Prototyping Today
 
Integratives Usability Engineering
Integratives Usability EngineeringIntegratives Usability Engineering
Integratives Usability Engineering
 

Client Technologien - Ein Überblick für Usability Professionals

  • 1. Client Technologien Ein Überblick für Usability Engineering Professionals SwissUPA/SwissCHI Event: Zürich, 28. April 2011 Folie 1 26. April 2011 Dr. Thomas Memmel et al. © Zühlke 2011
  • 2. Softwarelösungen, Produktinnovation und Managementberatung • Mehr als 7000 Projekte in Europa realisiert • 70 Mio. CHF Umsatz (2010) • 400 Mitarbeitende (Ende 2010) • In Deutschland, Grossbritannien, Österreich und in der Schweiz • Gründung 1968, Wir beraten, im Besitz von Partnern entwickeln und • ISO 9001 und 13485 zertifiziert integrieren aufgabengerecht – mit überzeugender Qualität und Wirtschaftlichkeit. Eine Idee mehr. Und Zühlke. 4. März 2011 Folie 2 © Zühlke 2011
  • 3. Unser Leistungsangebot Management Consulting Consulting • • Technologieberatung & Methodik • Team Training Softwarelösungen Development • • Produktentwicklung Enterprise Integration Integration • • Methodischer Baukasten mit Best Practices Eine Idee mehr. Und Zühlke. 4. März 2011 Folie 3 © Zühlke 2011
  • 4. Zühlke und Client Technologien Zühlke Group • Beratung bei der Wahl der richtigen Client Technologie • Know-How in einer großen Bandbreite an Client und Server Technologien Zühlke Competence Center Client Technologien • Ständige Auseinandersetzung mit neuen Technologien • Technologie-Scouting • Ausbildungsplanung der Mitarbeiter Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 4 © Zühlke 2011
  • 5. Competence Center Client Technologie User Interface Development Today Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 5 © Zühlke 2011
  • 6. Die Wahl der richtigen Client Technologie Beispiel aus dem Projektalltag Ein Anbieter von Druckdienstleistungen für Presseagenturen möchte seinen Kunden einen Client anbieten, mit dem Kunden Pressefotos in ein Online Archiv hochladen können. Zwecks einfacher Verteilung und Aktualisierung der Software schwebt dem Anbieter ein Web-Client vor, der in allen gängigen Browsern funktioniert. Aussehen und anfühlen soll sich die Applikation aber wie eine moderne Desktop-Anwendung. Die Usability der Applikation ist für die Akzeptanz und den Erfolg massgeblich. Welche Client Technologien kommen in Frage? Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 6 © Zühlke 2011
  • 7. Richtige Client Technologie …oder Pech gehabt? • «…ist mit dieser Technologie nicht möglich» • «…so ein Widget gibt es nicht» • «…eine Animation kann man hier nur mit sehr viel Aufwand umsetzen» • «…leider kann diese Art der Tabelle nur Text anzeigen» • «…wenn wir das gewusst hätten, hätten wir von Anfang an eine andere Technologie empfohlen» Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 7 © Zühlke 2011
  • 8. Usability Beratung & Client Technologien Stetig wachsende Auswahl an Client Technologien Verschiedene Technologie-Lieferanten, z.B. • Microsoft • Adobe • Java Sun / Oracle Die Wahl der Client Technologie hat z.B. Auswirkung auf • Umsetzbarkeit von Funktionalität • Komplexität der Entwicklung, Flexibilität • Usability und User Experience (Ziele) Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 8 © Zühlke 2011
  • 9. Die Wahl der richtigen Client Technologie Benutzerinteraktion vs. Ausführung Web Keine Installation Applikation aktuell Ständige Datenerfassung Ständige Interaktion An jedem PC verfügbar Ausführung Daten lesen Lokale Dienste Standalone Hohe Rechenleistung Offline benutzbar Quelle: Kaintantzis, Nikolaos (2010): «Wie steht einfach Benutzerinteraktion komplex/hoch es um RIA?» Vortrag anlässlich des RIA-Kickoffs, JUGS-Vortrag. Online unter: http://www.zuehlke.com Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 9 © Zühlke 2011
  • 10. Die Wahl der richtigen Client Technologie Komplexität: Java Client Technologien und Produkte Struts Spring Web Flow JSF ICEfaces RichFaces Web Grails Struts2 Spring MVC RoR qooxdoo Dojo RAP Ultra Thin, Thin Wicket DWR GWT RIA (Ajax) RIA (Plug-in) Ausführung ULC Thinlets Java FX Applet Flash CaptainCasa RIA (ohne Browser) Standalone Fat, Rich, Smart Eclipse RCP Swing Application Framework NetBeans RCP SWT JFace Swing Spring Desktop Quelle: Kaintantzis, Nikolaos (2010): «Wie steht einfach Benutzerinteraktion komplex/hoch es um RIA?» Vortrag anlässlich des RIA-Kickoffs, JUGS-Vortrag. Online unter: http://www.zuehlke.com Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 10 © Zühlke 2011
  • 11. Die Wahl der richtigen Client Technologie Rolle des Usability Professionals Einbindung in Client Technologie Entscheid Grundkenntnisse zu Client Technologien zur Impact- Abschätzung Durchgängigkeit UI Prototyping  Produkt • Zukunftstrend: Durchgängigkeit, Werkzeugketten • Werkzeuge für GUI-Prototyping in Zieltechnologien • Evolutionäres Prototyping Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 11 © Zühlke 2011
  • 12. Thin, Rich oder RIA? Verschiedene Client Strategien Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 12 © Zühlke 2011
  • 13. Thin Client Technologie (1/2) • Applikationskomponenten sind auf Server gespeichert • GUI wird zur Laufzeit in einem Webbrowsers angezeigt und bedient • Verarbeitung findet auf Server statt • Geringe Anforderungen an Soft- und Hardware • Geeignet für einfache Applikationen mit hoher Verbreitung • Eingeschränkte Dynamik und Funktionalität Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 13 © Zühlke 2011
  • 14. Thin Client Technologie (2/2) Thin Client Technologien: ASP, ASP.NET, PHP, Ruby, JSF. Beispiele Amazon.com Ebay.com Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 14 © Zühlke 2011
  • 15. Rich Client Technologie (1/2) • GUI und Logik sind lokal verfügbar • Zugriff auf andere lokale Inhalte und Applikationen • Geeignet für hochinteraktive und grafiklastige Anwendungen • Maximum an Dynamik • Potentielle Probleme – Installationszwang – Verteilung und Aktualisierung – Aufwand für Integration in IT-Landschaft Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 15 © Zühlke 2011
  • 16. Rich Client Technologie (2/2) Rich Client Technologien • Java Swing • Eclipse RCP • Windows Presentation Foundation • Windows Forms Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 16 © Zühlke 2011
  • 17. Rich Client Technologie Fallbeispiel: ZEUS Airport Management Video zu ZEUS: http://www.youtube.com/watch?v=o9nlMy5LCBo Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 17 © Zühlke 2011
  • 18. Rich Client Technologie – WPF Windows Presentation Framework Rollenbasierte Werkzeugkette – Durchgängigkeit vom Design bis zum Code Expression Design Expression Blend Visual Studio Zielgruppe: Zielgruppe: Zielgruppe: • Gestalter • Interaction Designer • Entwickler • Gestalter Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 19 © Zühlke 2011
  • 19. Rich Client Technologie – WPF Diskussion Umfassendes Hürden / Risiken Präsentationssystem • Plattformabhängigkeit Gestalterische Freiheiten • Gestalter arbeiten weiterhin • Individuelle Komponenten mit Adobe (und nicht (neu oder kombiniert) Expression Design) • Gestaltung über Themes, • Gefahr durch zu hohe Styles und Templates Freiheitsgrade: GUIs werden abseits der Umfangreiche Schnittstellen Standards ohne für Multimedia ausreichendes Testing Viele Erweiterungen entwickelt verfügbar (z.B. Ribbon) Umwandlung nach RIA (Silverlight) möglich Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 20 © Zühlke 2011
  • 20. Rich Client Technologie – Swing Synthetica BlackEye Look & Feel Quelle: http://www.jyloo.com/synthetica/screenshots/blackeye/ Dr. Thorsten Büring 6. September 2010 Folie 21 © Zühlke 2011
  • 21. Rich Client Technologie – Swing Flamingo UI-Control Extension Quelle: https://flamingo.dev.java.net/ Dr. Thorsten Büring 6. September 2010 Folie 22 © Zühlke 2011
  • 22. Rich Client Technologie – Swing GUI Prototyping Napkin für „sketchy“ Prototypen JFormsDesigner • Standalone oder als Plug-in • UI Entwurf unabhängig von der Programmierung Quelle: http://www.formdev.com/ Quelle: http://napkinlaf.sourceforge.net Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 23 © Zühlke 2011
  • 23. Rich Client Technologie – Eclipse RCP Zühlke Kundenprojekt mit der SBB © SBB 2010 Siehe auch: Thomas Memmel, Markus Flückiger, Médard Fischer (2011): «User Experience & Agile Development». In: UX Best Practices How to Achieve More Impact with User Experience, Kapitel 7. Englisch McGraw-Hill Professional. User Interface Engineering in der Praxis | Dr. Thomas Memmel 1. Mai 2011 Folie 24 © Zühlke 2011
  • 24. Rich Client Technologie – Eclipse RCP Diskussion Häufig verwendete Alternative zu Java Swing Native Darstellung der GUI Elemente (Look & Feel des OS) GUI Editor • Aber: Code muss in der Regel noch überarbeitet werden • Möglichkeit zum GUI Prototyping • Programmierkenntnisse sind notwendig für die Umsetzung von interaktivem • Keine medienbruchfreie Einbinden von Design Artefakten, wie z.B. Bitmap- oder Vektorgrafiken Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 25 © Zühlke 2011
  • 25. Rich Client Technologie – Eclipse RCP Visual GUI Editor Quelle: http://www.eclipse.org Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 26 © Zühlke 2011
  • 26. Rich Client Technologie – Eclipse RCP SWT Prototyping mit Balsamiq Mockup Extension Quelle: http://blogs.balsamiq.com/product/2009/05/13/swt-bmml-an-interesting- new-mockups-extension/ UI Prototyping Tools | Dr. Thomas Memmel 20. Mai 2011 Folie 27 © Zühlke 2011
  • 27. Rich Client Technologie – Eclipse RCP Diskussion Geeignet für sehr aufwändige GUIs Erstellen von Custom Widgets (Eclipse SWT) Vielzahl von Bibliotheken/Erweiterungen • Beispiel: Nebula Framework • Erhöht die Auswahl an GUI Elementen • Aber: nicht alle bereit gestellten GUI Elemente können einfach angepasst und kontrolliert werden Vorsicht: UIs können sehr schnell aussehen wir eine Entwicklungsumgebung! • Einsatz von RCP sollte seitens UX Experte hinterfragt werden Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 28 © Zühlke 2011
  • 28. Rich Client Technologie – Eclipse RCP GUI Elemente: Nebula Project Quelle: http://www.eclipse.org/nebula/ Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 29 © Zühlke 2011
  • 29. RIA Client Technologien • Über Webbrowser angezeigt und bedient • Aber: Teile der Präsentations- und Businesslogik werden zur Laufzeit auf den Client Computer geladen • Höhe Dynamik des GUIs – nicht jeder Input hat eine Serverabfrage zur Folge • Potentielle Probleme – Teilweise wird Plugin benötigt – Kollaboration mit OS nur eingeschränkt – Browser-Funktionen wie Vor und Zurück funktionieren eventuell nicht Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 30 © Zühlke 2011
  • 30. RIA Client Technologien Überblick, zum Beispiel: • GWT • ASP.NET mit AJAX • ASP.NET MVC • JSF mit AJAX • JavaFX • Microsoft Silverlight • Adobe Flash / Flex Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 31 © Zühlke 2011
  • 31. RIA Technologie – Microsoft Silverlight Zühlke Projekt: Inversion Viewer Siehe: http://inversion.innetag.ch/ Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 32 © Zühlke 2011
  • 32. RIA Technologie – Microsoft Silverlight Nutzt Teil des WPF und .Net Frameworks • Gleiche Werkzeugkette • Wiederverwendung von Know-how und Code • Ähnliche Freiheitsgrade bei der Gestaltung Silverlight Toolkit zur Erweiterung der GUI Library Teilweise Hardwarebeschleunigung möglich Out-of-the-Browser Features: Grenzen zwischen RIA & Rich Clients verschwimmen Cross-Plattform, auch Mobile (Windows Phone 7) Direkter Konkurrent zu Adobe Flash Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 33 © Zühlke 2011
  • 33. RIA Technologie – Adobe Flash / Flex Flash Flex • Von Animationen zu Applikationen • Entwickler ansprechen • Traditionelles Stammklientel: Designer • Trennung Präsentation und Logik: MXML versus Action Script • Zeitleistenbasierte Grafik-Editor mit Skriptsprache • Flex Builder: Klassische IDE (Eclipse Plugin Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 34 © Zühlke 2011
  • 34. RIA Technologie – Adobe Flex Zühlke Kundenprojekt Internet Datensafe Quelle: www.datainherit.com Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 35 © Zühlke 2011
  • 35. RIA Technologie – Adobe Flex Zühlke Kundenprojekt Internet Datensafe Quelle: www.datainherit.com Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 36 © Zühlke 2011
  • 36. RIA Technologie – Adobe Flex Zühlke Kundenprojekt Internet Datensafe Quelle: www.datainherit.com Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 37 © Zühlke 2011
  • 37. RIA Technologie – Adobe Flash / Flex Benötigt Browser-Plugin (aber weit verbreitet > 90%) Funktionsumfang sehr ähnlich zu Silverlight Adobe Air für Offline-Fähigkeit Leider kein Flash Pendant zu SketchFlow Ansonsten ausgereifte Werkzeug-Kette Flash ist noch dominant für Internet Videos • 75% aller Online-Videos werden im Flash Player • HTML5 als künftig starke Konkurrenz Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 38 © Zühlke 2011
  • 38. RIA Technologie – Adobe Air Fallbeispiel: eBay Desktop Quelle: http://desktop.ebay.com Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 39 © Zühlke 2011
  • 39. RIA Technologie – Adobe Air Fallbeispiel: Balsamiq Prototyping Tool Siehe: http://balsamiq.com/ Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 40 © Zühlke 2011
  • 40. Ausblick: Adobe Wallaby Adobe Flex zu HTML5 Adobe Wallaby • Experimentelles Tool • Ermöglicht Nutzung der etablierten Developer Tools • Transformation nach HTML5 Die Zukunft ist HTML5? • Verschiedene Werkzeuge • Aber einheitlicher Standard Siehe auch: Quelle: http://www.chip.de/news/Adobe-Wallaby-Flash-zu-HTML5- http://labs.adobe.com/downloads/wallaby.html konvertieren_47684802.html Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 41 © Zühlke 2011
  • 41. RIA Technologie – JavaFX Alternative zu Flash und Silverlight • Aber: deutlich geringere Verbreitung JavaFX Anwendungen benötigen Java Runtime (langsamer als Flash/Silverlight) Quelle: http://www.javafx.com Ausführung: Desktop (Web Start), Applet Controls und Performance seit Version 1.3 geeignet, um gute GUIs zu entwickeln GUI Builder stehen zur Verfügung: z.B. NetBeans JavaFX: UI Technologie von „Swing 2.0“? Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 42 © Zühlke 2011
  • 42. RIA Technologie – JavaFX Durchgängige Werkzeugkette • Durchgängigkeit • Integration von Design-Artefakten mit JavaFX 1.3 Production Suite • Aus Adobe Illustrator und Adobe Photoshop heraus Quelle: http://www.javafx.com Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 43 © Zühlke 2011
  • 43. RIA Technologie – JavaFX Beispiel: Geo View Quelle: http://www.vancouver2010.com/olympic-medals/geo-view/ Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 44 © Zühlke 2011
  • 44. RIA Technologie – Google Web Toolkit Beispiel Google Mail App Quelle: http://gwt.google.com/samples/Mail/Mail.html Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 45 © Zühlke 2011
  • 45. RIA Technologie – Google Web Toolkit GWT Compiler wandelt Java Code um • Web-Anwendung: HTML, CSS und JavaScript/AJAX • Benutzt Browser-Standards • Vielzahl an GWT Bibliotheken Google Gears • Per Google Gears können GWT Anwendungen auf lokale Ressourcen des Clients zugreifen • Ähnlich der Sandbox von Java Applets Kein Browser Plug-in notwendig • Einfacheres Deployment Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 46 © Zühlke 2011
  • 46. RIA Technologie – Google Web Toolkit Sencha Ext GWT Framework: GUI Komponenten Quelle: http://www.sencha.com/examples/explorer.html Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 47 © Zühlke 2011
  • 47. RIA Technologie – Google Web Toolkit GUI Design Gestaltung eigener GUI Elemente • HTML und CSS setzen die Grenzen • Bei GWT findet das GUI Rendering stets in HTML statt • Der GUI Designer muss die Browser-Kompatibiliät sicherstellen Visuell ansprechende und stark interaktive Benutzeroberfläche im Vergleich zu anderen RIA Technologien schwierig • GWT eher ähnlich zu reinen Desktop Anwendungen GUI Prototyping sehr aufwendig (Coding) • Wireframes oft die bessere Wahl Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 48 © Zühlke 2011
  • 48. RIA Technologie – Google Web Toolkit Sencha Ext GWT Framework, Beispiel Web Desktop Quelle: http://www.sencha.com/examples/desktop.html Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 49 © Zühlke 2011
  • 49. Mobile Client Technologien iOS, Android & Co. Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 50 © Zühlke 2011
  • 50. Mobile Client Technologien Neue Möglichkeiten mit HTML5 HTML5, CSS3 PhoneGap Moderne Sencha HTML- PhoneGap Sencha Touch Touch basierte Mobile App HTML5/ CSS3 … Herausforderungen von mobilen Apps | ruh 20. April 2011 Folie 51 © Zühlke 2011
  • 51. Mobile Client Technologien Native vs. Web-Applikation Native App Klassische Web Moderne HTML-basierte Mobile App App Plattform Look & Feel Ok Nein Styling der UI Widgets (CSS3) Zugriff auf Device-Sensoren Ok Nein GPS (HTML5, PhoneGap) (GPS, Accelerometer, Kamera, Accelerometer, Kamera, Kompass, …) Kompass (PhoneGap) Zugriff auf Device-Daten Ok Nein Kontakte (PhoneGap) (Kontakte) Verkauf über Store möglich Ok Nein Ok (PhoneGap) Implementierungsaufwand je Plattform einmalig Einmaliger Aufwand Offlinefähigkeit Ok Nein Ok (HTML5 Offline Applications und Local Storage) Cooles interaktives UI Ok Nein CSS3 (Transforms and Transitions, Media Queries), Sencha Touch, HTML5 Drag&Drop Herausforderungen von mobilen Apps | ruh 20. April 2011 Folie 52 © Zühlke 2011
  • 52. RIA Technologie HTML5 – Kurzüberblick <canvas width="400" height="300" Offline Storage style="margin-left:-30px"></canvas> <script> var context = document.getElementsByTagName('canvas') Canvas (2D/3D) und Video – Zeichnen mit JavaScript [0].getContext('2d'); var lastX = context.canvas.width * Math.random(); var lastY = context.canvas.height * Math.random(); var hue = 0; function line() { SVG Grafiken context.save(); context.translate(context.canvas.width/2, context.canvas.height/2); context.scale(0.9, Local Database 0.9); context.translate(- context.canvas.width/2, - context.canvas.height/2); Bidirektionale Kommunikation (Client/Server) context.beginPath(); context.lineWidth = 5 + Math.random() * 10; context.moveTo(lastX, lastY); lastX = context.canvas.width * Drag & Drop Mechanismen Math.random(); lastY = context.canvas.height * Math.random(); context.bezierCurveTo(context.canvas.width * Math.random(), context.canvas.height * File Access (Drag/Drop File from/to Desktop, siehe Google Mail!) Math.random(), context.canvas.width * Math.random(), context.canvas.height * Math.random(), lastX, lastY); hue = hue + 10 Anpassung an Plattformen und Geräte mit CSS3 * Math.random(); context.strokeStyle = 'hsl(' + hue + ', 50%, 50%)'; context.shadowColor = 'white'; context.shadowBlur = 10; uvm. context.stroke(); context.restore(); } setInterval(line, 50); function blank() { context.fillStyle = 'rgba(0,0,0,0.1)'; context.fillRect(0, 0, context.canvas.width, context.canvas.height); } setInterval(blank, Mehr Infos zu HTML5 z.B. unter http://slides.html5rocks.com 40); </script> Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 53 © Zühlke 2011
  • 53. Schlusswort Client Technologien: Technologie- & Aufwandsgrenzen Web Ultra Thin Thin RIA (Ajax) HTML5 wird die Grenze verschieben RIA (Plug-in) RIA (ohne Browser) Standalone Fat, Rich, Smart Quelle: Kaintantzis, Nikolaos (2010): «Wie steht einfach Benutzerinteraktion komplex/hoch es um RIA?» Vortrag anlässlich des RIA-Kickoffs, JUGS-Vortrag. Online unter: http://www.zuehlke.com Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 54 © Zühlke 2011
  • 54. Zusammenfassung • Die Vielzahl an Client Technologien bietet zahlreiche Varianten in der UI Entwicklung • Die Umsetzbarkeit vieler GUI Konzepte und Designelemente hängt auch vom Einsatz bestimmter Client Technologien ab • Neue Technologien wie HTML5 werden die Technologie-Landschaft nochmals verändern • Technisches Verständnis oder ein Überblick über Vor- und Nachteile erlaubt Einflussnahme des UX Experten • Für Usability Experten ist es von Vorteil, sich mit verschiedenen Client Technologien auseinander-zusetzen Mehr zum Thema: http://www.zuehlke.com/de/software-product-engineering/kompetenzen/know-how/client-technologien.html Client Technologien | Dr. Thomas Memmel et al. 26. April 2011 Folie 55 © Zühlke 2011