Seminar / Proseminar Prototyping und Visualisierung im Authoring und in der Softwareentwicklung Sommersemester 2005 Graphische Datenverarbeitung Prof. Dr. Krömker Betreuer: Silvan Reinhold, Ashraf Abu Baker

Seminar / Proseminar Prototyping und Visualisierung im Authoring und in der Softwareentwicklung 2/46 Übersicht Aufgabenstellung Visualisierung im Überblick Themen Allgemeine Tips Seminartermine

Seminar / Proseminar Prototyping und Visualisierung im Authoring und in der Softwareentwicklung 3/46 Übersicht Aufgabenstellung Visualisierung im Überblick Themen Allgemeine Tips Seminartermine

Seminar / Proseminar Prototyping und Visualisierung im Authoring und in der Softwareentwicklung 4/46 Aufgabenstellung (1) Einarbeitung in das gestellte Thema Sie erhalten als Ausgangspunkt ggf. Artikel/Papers an die Hand Suchen Sie im Internet und in Bibliotheken alle relevanten Informationen über Ihr gewähltes Thema Machen Sie eine umfangreiche State-of-the-Art-Analyse Finden Sie Defizite, überlegen Sie sich Möglichkeiten zur Verbesserung und tun Sie einen Blick in die Zukunft!

Seminar / Proseminar Prototyping und Visualisierung im Authoring und in der Softwareentwicklung 5/46 Aufgabenstellung (2) Verständnis des Themas ausgeteilte Artikel, Links oder Suchbegriffe reichen i.d.R. nicht aus und sollten nur als Startpunkt verstanden werden! Beschaffung weiterer Informationen zum Füllen von Lücken notwendig –aus den angegebenen Quellen –aus dem Internet –Bibliothek –Software evtl. selbst ausprobieren –etc.

Seminar / Proseminar Prototyping und Visualisierung im Authoring und in der Softwareentwicklung 6/46 Aufgabenstellung (3) Anfertigung einer schriftlichen Ausarbeitung Umfang: Seiten pro Person Sprache: Deutsch Es handelt sich um eine wissenschaftliche Arbeit (Ausdrucksweise!) Form, Rechtschreibung und Grammatik sind wichtig Pro Teilnehmer mindestens 10 Literaturreferenzen

Seminar / Proseminar Prototyping und Visualisierung im Authoring und in der Softwareentwicklung 7/46 Aufgabenstellung (4) Präsentation in Form eines Vortrags vor Publikum Pro Person 20 Minuten –15 Minuten Vortrag –5 Minuten anschließende Diskussion und Fragen Sprache: Deutsch Mit PowerPoint o.ä. in elektronischer Form für Beamer aufbereitet

Seminar / Proseminar Prototyping und Visualisierung im Authoring und in der Softwareentwicklung 8/46 Übersicht Aufgabenstellung Visualisierung im Überblick Themen Allgemeine Tips Seminartermine

Seminar / Proseminar Prototyping und Visualisierung im Authoring und in der Softwareentwicklung 9/46 Was ist Visualisierung? Vorgang der Sichtbarmachung von Materie, Energie, Information oder Prozessen In der Informatik reduziert auf –Daten –Informationen –Modelle –u.ä.

Seminar / Proseminar Prototyping und Visualisierung im Authoring und in der Softwareentwicklung 10/46 Warum Visualisierung? Erforschung großer Datenmengen (Millionen von Meßwerten) Betrachtung strukturell komplexer Daten Erkennung von Mustern und Zusammenhängen in Datenbeständen Wir können mehr sehen, als wir uns mental vorstellen können „In der Tat ist der Mensch ein Augentier“

Seminar / Proseminar Prototyping und Visualisierung im Authoring und in der Softwareentwicklung 11/46 Das Visualisierungsproblem

Seminar / Proseminar Prototyping und Visualisierung im Authoring und in der Softwareentwicklung 12/46 Was ist dies?

Seminar / Proseminar Prototyping und Visualisierung im Authoring und in der Softwareentwicklung 13/46 oder dies?

Seminar / Proseminar Prototyping und Visualisierung im Authoring und in der Softwareentwicklung 14/46 Die 2D-sinc Funktion

Seminar / Proseminar Prototyping und Visualisierung im Authoring und in der Softwareentwicklung 15/46 Unscharfe Trennung (nach Card, Mackinlay, Shneiderman) (Scientific) Visualization The use of computer-supported, interactive, visual representations of data to amplify cognition. Daten sind oft technischen, naturwissenschaftlichen Ursprungs (Messung, Simulation)  oft existiert „natürliche“, naheliegende räumliche Repräsentation Information Visualization The use of computer-supported, interactive, visual representations of abstract data to amplify cognition. „allgemeinere“ Daten: Geschäftsdaten, Finanzdaten, „Dokumente“... oder Datenbankinhalte = strukturierte abstrakte Daten ohne „natürliche“, naheliegende räumliche Repräsentation

Seminar / Proseminar Prototyping und Visualisierung im Authoring und in der Softwareentwicklung 16/46 Beispiel: Scientific Visualization

Seminar / Proseminar Prototyping und Visualisierung im Authoring und in der Softwareentwicklung 17/46 Beispiel: Informationsvisualisierung Hierarchische Daten Hyperbolic Browser

Seminar / Proseminar Prototyping und Visualisierung im Authoring und in der Softwareentwicklung 18/46 Übersicht Aufgabenstellung Visualisierung im Überblick Themen Allgemeine Tips Seminartermine

Seminar / Proseminar Prototyping und Visualisierung im Authoring und in der Softwareentwicklung 19/46 Themenüberblick 1. Visualisierung von Softwaresystemen, Web-Strukturen und komplexen Daten - 2. UML - Unified Modeling Language Daniela (Seminar) 3. Moderne Software-IDEs und GUI-Builder Hana, Lei 4. Adaptive Spatial Hypertext Lukas G. 5. Usability und E-Learning Tim, Jing 6. Erstellung multimedialer Inhalte für das Web Linda, Vincent/Christian 7. Fault Localization via Visualization Timon 8. Software-Visualisierung Philipp 9. Visualisierung in der OO-Softwareentwicklung Han (Seminar) 10. Visualization of Time-Varying Data for Source Code Version Control Visualisierung und Animation von Algorithmen Max//Lukas K., Andreas (Seminar), Svetlana

Seminar / Proseminar Prototyping und Visualisierung im Authoring und in der Softwareentwicklung 20/46 1. Visualisierung von Softwaresystemen, Web- Strukturen und komplexen Daten Komplexe Anwendungssysteme, Klassenbibliotheken, Web-Strukturen sind schwer überschaubar Visualisierung kann Strukturen oder Veränderungen aufzeigen und Zusammenhänge verdeutlichen Verschiedene Ansätze: Software Landscapes, Cone Trees, Treemaps, Hyperbolic Trees, Spatial Views, Perspective Walls, WebTOC etc.

Seminar / Proseminar Prototyping und Visualisierung im Authoring und in der Softwareentwicklung 21/46 2. UML - Unified Modeling Language Software-Entwicklungsprozess: Kommunikationsproblem zwischen Fach- und Technologieexperten sowie zwischen Entwicklern untereinander Vereinheitlichte und allgemeiner verständliche Notation zur Darstellung von OO-Systemen Darstellung eines SW-Systems auf unterschiedlichen Abstraktionsstufen und aus verschiedenen Blickwinkeln Theoretischer Überblick und praktischer Einsatz im konkreten Verwendungskontext

Seminar / Proseminar Prototyping und Visualisierung im Authoring und in der Softwareentwicklung 22/46 3. Moderne Software-IDEs und GUI-Builder Verwendung von GUIs und Visualisierung in der SW-Entwicklung Syntax Highlighting, Code Completion, CASE-Tools, GUI-Builder etc. Auch Web-IDEs müssen mehr und mehr technische Aspekte berücksichtigen Evaluierung aktueller IDEs und Tools, Abstrahierung und Verallgemeinerung, Vergleich

Seminar / Proseminar Prototyping und Visualisierung im Authoring und in der Softwareentwicklung 23/46 4. Adaptive Spatial Hypertext Weiterentwicklung des WWW- Hypertextsystems Adaptive Hypertext: Modifikation von Inhalt und Struktur gemäß Benutzerprofil Spatial Hypertext: Darstellung möglicher Beziehungen und impliziter Links Einsatz bei der Vermittlung visueller Zusammenhänge Anwendungsmöglichkeiten, Nutzen, Abgrenzung und Bewertung

Seminar / Proseminar Prototyping und Visualisierung im Authoring und in der Softwareentwicklung 24/46 5. Usability und E-Learning Usability ist an der Schnittstelle zwischen Anwendung und Endnutzer zentral Wichtig in der Softwareentwicklung Besondere Relevanz für E-Learning-Entwickler: Benutzer ist Anwender und gleichzeitig Lernender Überblick über den Themenbereich, Begriffsklärung Hervorhebung von Herausforderungen im Allgemeinen sowie im Speziellen Kontext E-Learning

Seminar / Proseminar Prototyping und Visualisierung im Authoring und in der Softwareentwicklung 25/46 6. Erstellung multimedialer Inhalte für das Web Multimedia gewinnt an Bedeutung, WWW- und E- Learning-Inhalte nicht mehr nur statisch Trennung von Inhalt und Präsentation Verwendung von Templates, Metainformationen, Stylesheet-Transformationen, audiovisuellen Präsentationen, semantischen und maschinenlesbaren Informationen Klassifikation und Überblick über existierende Standards wie XML, XSLT, CSS, SVG, RDF – SMIL, XAML – Flash, JavaScript, PHP, ASP.NET – etc.

Seminar / Proseminar Prototyping und Visualisierung im Authoring und in der Softwareentwicklung 26/46 7. Fault Localization via Visualization Programmtests sind integraler Bestandteil der Softwareentwicklung Test-Suites wie JUnit oder NUnit unterstützen den Entwickler beim Debugging Konkrete Visualisierungsmethoden können die Fehlersuche durch Mapping von graphischer Darstellung zu Test-Case-Ergebnissen erleichtern

Seminar / Proseminar Prototyping und Visualisierung im Authoring und in der Softwareentwicklung 27/46 8. Software-Visualisierung Taxonomien dienen der Strukturierung eines Themengebietes Sie stellen eine gemeinsame Sprache oder Terminologie zur Verfügung Spezielles Problemfeld hier: Systeme im Bereich der Visualisierung von Computersoftware Aufbauend auf einer von Price, Baecker und Small entwickelten Taxonomie

Seminar / Proseminar Prototyping und Visualisierung im Authoring und in der Softwareentwicklung 28/46 9. Visualisierung in der OO-Softwareentwicklung Visualisierungsmethoden in der Entwicklung und im Reengineering objektorientierter Softwareanwendungen Berücksichtigung von Granularität der Visualisierung sowie von Evolutionsaspekten und von Metriken Überblick, Anwendungsgebiete, Klassifizierung Recherche basierend auf einer Dissertation zum Thema

Seminar / Proseminar Prototyping und Visualisierung im Authoring und in der Softwareentwicklung 29/ Visualization of time-varying data for source code version control 10a.) Visualization using Flocking Boids Paper Time-Varying Data Visualization using Information Flocking Boids Andrew Vande Moere

11. Visualisierung und Animation von Algorithmen 11a.) Animation von Datenstrukturen, Graphalgorithmen, parallele Algorithmen, Sortieralgorithmen, Baumalgorithmen Paper: Marc H. Brown and Marc Najork Zeus: A System for Algorithm Animation and Multi-View Editing Marc H. Brown. 11b.) 3D-Algorithm Animation Paper: Algorithm Animation Using 3D Interactive Graphics Marc H. Brown and John Hershberger

Seminar / Proseminar Prototyping und Visualisierung im Authoring und in der Softwareentwicklung 31/46 11c.) Visualiseirung in Learnalgorithmen Paper: Using Algorithm Visualization to Improve Students' Understanding of Parameter Passing Methods Paper : Sonstige Quellen:

Seminar / Proseminar Prototyping und Visualisierung im Authoring und in der Softwareentwicklung 32/46 Übersicht Aufgabenstellung Visualisierung im Überblick Themen Allgemeine Tips Seminartermine

Seminar / Proseminar Prototyping und Visualisierung im Authoring und in der Softwareentwicklung 33/46 Allgemeine Tips Ziele des Seminars Erlernen akademischen Arbeitens, u.a. Auseinandersetzung mit aktuellen Forschungsarbeiten Verständliche Aufbereitung eines Themas Weitervermittlung des Themas an die anderen Seminarteilnehmer  rhetorisches Training Korrekte Referenzierung

Seminar / Proseminar Prototyping und Visualisierung im Authoring und in der Softwareentwicklung 34/46 Allgemeine Tips Finden von Quellen und Informationen Literaturrecherche im Internet, z.B. – –Informatik-Zeitschriften wie ACM –Google findet (fast) alles –Sprache: Englisch (z.B. „Visualisierung“ Hits,„visualization“ Hits)

Seminar / Proseminar Prototyping und Visualisierung im Authoring und in der Softwareentwicklung 35/46 Allgemeine Tips Finden von Quellen und Informationen Buchrecherche, z.B. Schumann/Müller: Visualisierung Grundlagen und Methoden Colin Ware: Information Visualization: Perception for Design (Academic Press 2000 / Morgan Kaufmann Publishers) Robert Spence: Information Visualization (ACM Press 2001 / Addison Wesley) Vorlesung „Visualisierung“ (Dr. Wolfgang Müller, WS04/05)

Seminar / Proseminar Prototyping und Visualisierung im Authoring und in der Softwareentwicklung 36/46 Allgemeine Tips Mögliche Richtlinien Weitere Hilfestellungen (extern):

Seminar / Proseminar Prototyping und Visualisierung im Authoring und in der Softwareentwicklung 37/46 Allgemeine Tips Die Ausarbeitung Gliederung (frühzeitig) Form Rechtschreibung und Grammatik Literaturreferenzen Vortrag nicht vergessen!

Seminar / Proseminar Prototyping und Visualisierung im Authoring und in der Softwareentwicklung 38/46 Allgemeine Tips Die Ausarbeitung – Zitate Richtiges Verhältnis von Zitaten/Haupttext finden Wörtliche Zitate „in Anführungszeichen“ Bei sinngemäßen Zitaten auch stets die Quelle angeben! Beispiel: In einen Satz kann man „ein wörtliches Zitat“ (Müller et al. 2003, S. 32) einfügen. Mann kann aber auch den Originaltext sinngemäß wiedergeben (Müller et al. 2003, S. 33).

Seminar / Proseminar Prototyping und Visualisierung im Authoring und in der Softwareentwicklung 39/46 Allgemeine Tips Die Ausarbeitung – Referenzen Online Papers: T. J. Jankun-Kelly, Kwan-Liu Ma, (2003): Focus+Context Visualization and Interaction for Graphs with Visual Nodes IEEE Symposium on Information Visualization Bücher: Müller, H. (2003): Bioinformatik. Spektrum Akad. Verlag, Heidelberg. Aufsätze in Büchern: Müller, H. (2003): Visualisierung von Daten. In: Meier, P. (Hrsg.): Neue Methoden in der Bioinformatik. Wiley/VCH, Weinheim Webseiten*: Müller, H. (o.J.): Informationsvisualisierung. [ ].

Seminar / Proseminar Prototyping und Visualisierung im Authoring und in der Softwareentwicklung 40/46 Allgemeine Tips Die Ausarbeitung – Literaturangaben Literaturstellen alphabetisch sortieren nach Autor(en), dann nach Jahr Bei mehreren Publikationen der selben Autoren innerhalb eines Jahres wird „a“, „b“, „c“ usw. an die Jahreszahl gestellt (z.B. 2002a) Groß/Kleinschreibung englischer Titel: Jedes Sinnwort mit mehr als 3 Buchstaben wird groß geschrieben

Seminar / Proseminar Prototyping und Visualisierung im Authoring und in der Softwareentwicklung 41/46 Allgemeine Tips Der Vortrag Die anderen Teilnehmer sollen vom Vortrag profitieren Den Wissenshorizont der Zuhörer beachten Langsam und deutlich sprechen Zeitrahmen einhalten (am besten Marken setzen) Vortrag vorher einige Male üben (gibt Sicherheit) Rechtzeitig vorbereiten, Generalprobe sinnvoll

Seminar / Proseminar Prototyping und Visualisierung im Authoring und in der Softwareentwicklung 42/46 Allgemeine Tips Der Vortrag – Folien Folien nicht überladen Text sollte auch von weit hinten sichtbar sein Abbildungen einsetzen Kontrast maximieren auf Effekte verzichten (lenkt vom Inhalt ab) man sollte jederzeit sehen können, wo man gerade im Vortrag ist (Titel, Gliederungspunkt, Foliennr. etc.) nur die Informationen auf die Folien packen, die auch benötigt werden

Seminar / Proseminar Prototyping und Visualisierung im Authoring und in der Softwareentwicklung 43/46 Übersicht Aufgabenstellung Visualisierung im Überblick Themen Allgemeine Tips Seminartermine

Seminar / Proseminar Prototyping und Visualisierung im Authoring und in der Softwareentwicklung 44/46 Seminartermine – Themenvergabe – Gliederung und mindestens 5 Referenzen, per an den Betreuer – Pflichtabgabe einer Zwischenversion, als Ausdruck und per an den Betreuer – Abgabe der finalen Version, als Ausdruck und per an den Betreuer – bis Präsentationstag – bis Präsentationstag 2

Seminar / Proseminar Prototyping und Visualisierung im Authoring und in der Softwareentwicklung 45/46 Betreuer Silvan Reinhold Ashraf Abu Baker

Seminar / Proseminar Prototyping und Visualisierung im Authoring und in der Softwareentwicklung 46/46 Danke für die Aufmerksamkeit Silvan Reinhold (Raum 217) Ashraf Abu Baker (Raum 218) Carl Bosch-Haus Varrentrappstraße D Frankfurt am Main de