btk-fh FB Informations- & Interfacedesign Dynamic Data Lecture 01 Dynamic Data im Web Publishing

Transkript

1 Dynamic Data im Web Publishing

2 Grundsatz Laut dem Medien-Theortiker Lev Manovich besteht jede Anwendungen der neuen Medien aus einem Interface das über Algorithmen mit einer Datenbank (einer Sammlung von Daten) interagiert. Das bedeutet, dass es im Gegensatz zu den traditionellen Medien (Malerei, Fotografie, Film) ein front-end und ein back-end gibt. Klassische Medien : Interface und Inhalt sind eins Neue Medien : Interface ist das Gateway zum Inhalt

3 Back-end vs. Front-end oder Client-Server-Architektur Das WWW ist ein so genanntes distributed network, bei dem man grundsätzlich zwischen einem Server (dem Rechner auf dem die eigentlichen Daten liegen) und einem Client (dem Rechner, bzw. Browser, der die Daten anfordert) unterscheidet. Den Server bezeichnet man auch als backend, den Client als frontend innerhalb einer Anwendungsumgebung. Beide Komponenten können ihren Beitrag zu einer dynamischen Darstellung von Daten leisten diese sind aber qualitativ unterschiedlich. Back-end (Server) Front-end (Client)

4 Front-End-Dynamisierung Front-end (auch client-side) Scripting (wie etwa JavaScript) wird traditionell eingesetzt um die Präsentation (meist in Beziehung zu einer Benutzer-Aktion, etwa einem Maus-Klick) zu modifizieren. Das (pseudo)dynamische Verhalten tritt wie der es erzeugende Code innerhalb der eigentlichen Applikation auf und alle Zustände (etwa der aktive oder inaktive Zustand eines Buttons) sind bereits als potentielle Darstellungs-möglichkeiten vorprogrammiert. Server liefert alle Informationen Benutzer ändert Front-end

5 Back-End-Dynamisierung Back-end (auch server-side) Scripting (wie etwa PHP) wird hauptsächlich eingesetzt um den Inhalt zu modifizieren. Die dynamische Zusammenstellung von Inhalten basiert auf verschiedenen individuellen Sortierungs-Kriterien (z.b. alphabetisch, zeitlich, nach Kategorie, usw.). D.h. verschiedene Benutzer können auf der gleichen Website verschiedene Inhalte (oder gleiche Inhalte in verschiedener Sortierung) sehen. Server liefert eine Variante für Benutzer A......und eine andere für Benutzer B

6 Dynamic Data Zwei Definitionen: Daten, die nach dem Laden einer Anwendung während der Laufzeit (at runtime) in oder nahe Echtzeit verändert werden können (dynamic vs. persistent) --> Front-End Veränderliche Daten, die in einer Anwendung aus verschiedenen Datenquellen (z.b. einer Kombination von Datenbank, Spreadsheet oder Textdatei) bei der Kompilierung (at compile time),dynamisch zusammengesetzt werden (dynamic vs. static) --> Back-End

7 Dynamic Data vs. Persistent Data (Laufzeitdefinition) Dynamic Data beschreibt in dieser Definition ein Informationskonzept bei dem computerisierte Daten zeitlich unabhängig (asynchron) in eine Applikation geladen werden können und dort unmittelbar dargestellt werden. Persistent Data beschreibt dagegen ein Informationskonzept bei dem computerisierte Daten mit dem Starten (oder Öffnen) einer Applikation geladen werden, aber während der Laufzeit nicht mehr verändert werden können.

8 Dynamic Data vs. Persistent Data (Laufzeitdefinition) Dynamic: Veränderungen in der Datenquelle werden zur Laufzeit im System aktualisiert und dargestellt. Persistent: Veränderung in der Datenquelle nach Laden der Anwendung werden nicht berücksichtigt.

9 Dynamic Data vs. Static Data (Erstellungsdefinition) In dieser Defintion ist Dynamic Data ein Informationskonzept bei dem computerisierte Daten aus mehreren Datenquellen zusammengesetzt werden und die Datenquellen für Struktur, Funktionalität und Inhalt voneinander getrennt sind. Static Data beschreibt dagegen ein Informationskonzept bei dem Struktur, Funktionalität und Inhalt einer Anwendung aus einer einzigen Datenquelle stammen.

10 Dynamic Data vs. Static Data (Erstellungsdefinition) Dynamic: Gerüst, Design und Inhalt einer Applikation setzen sich aus mehreren Quellen zusammen. Static: Gerüst, Design und Inhalt werden in einem einzigen Dokument definiert

11 Rückblick: Internet Progression

12 ARPANET (1969) Charley Kline schickt am 29. Oktober 1969 das erste Datenpaket über das damalige ARPANET von der UCLA zum Stanford Research Institute: Das Wort Login. Allerdings crashed die Anwendung vor dem Buchstaben g. LOGIN

13 (1972), Telnet (1972), FTP (1973), TCP/IP (1980) Erste Electronic Mails werden über ARPANET verschickt. Ray Tomlinson setzt ein um zwischen Benutzername und Addresse zu unterscheiden. Via Telnet und dem RFC (Request for Comments) Protokoll kann man sich auf vernetzten Computern einloggen. Das File Transfer Protocol (FTP) erlaubt es Dateien auf remote Server zu laden.tcp/ip (heute noch im Einsatz) löst ab 1980 ältere Netzwerkprotokolle als de facto Standard

14 GOPHER (1990) Das an der University of Minnesota entwickelte Gopher Protokoll, ist eines der ersten client/server Anwendungen des Internets. Die Idee beim client/server Paradigma ist es, den Rechenaufwand zwischen einem zentralen Server und vielen client PCs (Endnutzer-Computern) aufzuteilen (ein so genanntes distributed system), anstatt wie üblich dem Zentralrechner (mainframe) die ganze Arbeit aufzulasten.

15 Geburt des World Wide Web (1990) Basierend auf den Vorschlägen von Tim Berners-Lee wird 1990 der Begriff World Wide Web für die Vernetzung von weltweiten Computern geprägt. Der erste WYSIWYG (What you see is what you get) Browser/Editor wird auf einem NeXT Computer entworfen. Berners-Lee entwickelt HTML (Hypertext Markup Language). CERN registriert die allererste Web-Domain.

16 Erste Mulitmedia-Anwendungen (1991/1993) Die Trojan Room Coffee Pot Camera wird an der Universität von Cambridge installiert. Eine Server-Anwendung liefert alle drei Minuten an verschiedene Clienten (Computer von Mitarbeitern) in der Umgebung ein Bild der Kaffee- Maschine wird dieser Live-Feed ins Netz gestellt und ist damit angeblich die erste multimediale Anwendung, die über das WWW vertrieben wurde.

17 Java (1991) Sun entwickelt mit Java eine objekt-orientierte Programmiersprache die ursprünglich für Geräte aus der Konsumerelektronik gedacht ist. Die daraus resultierende Charakteristik, dass Java Programme unabhängig von der jeweiligen Hardware-Plattform kompiliert werden können (über eine sogenannte virtual machine) sollte es fast unfreiwillig zu einer Parade-Anwendung für das WWW machen.

18 ColdFusion, Perl, JSP, ASP, PHP (alle Mitte-Ende der 90er) Verschiedene Unternehmen (Sun, Microsoft, Allaire u.a.) arbeiten an Protokollen mit denen Datenbank-Inhalte über server-seitige Skript- oder Programmiersprachen in Hypertexte eingebunden werden können. Bereits 1994 entwickelt Rasmus Lerdorf die Vorform von PHP, den sogenannten Hypertext Pre-Processors als Open-Source Variante einer server-seitigen Sprache.

19 Web 1.0 Das Read-only -Medium Publisher Consumer(s)

20 Web 1.0 New Media Naivité

21 Web 1.0 New Media Naivité

22 Web 1.0 New Media Naivité

23 Web 1.0 New Media Naivité

24 Web 1.0 Keine Trennung von Design und Inhalt Die erste Generation von Websites (ab ca. 1995) waren auf Grund der Technologiebeschränkungen nahezu alle statisch und persistent. Weder gab es ausgereifte technische Möglichkeiten Daten at runtime zu modifizieren, noch setzten sich die Seiten aus verschiedenen Datenquellen zusammen. Es gab somit keinerlei Trennung von Design und Inhalt. Beide wurden in einem einzigen (HTML) Dokument angelegt.

25 Web 1.0 Keine Trennung von Design und Inhalt Die Nachteile dieses Datenmodels sind evident: unübersichtlich und unnötig komplex schlecht skalierbar redundant Veränderungen im System werden nicht registriert und müssen händisch vorgenommen werden (= grosser Pflegeaufwand) statische, broschürenhafte Präsentation Browser-Reload um Änderungen zu registrieren (= reine Pull-Technologie) Keine Medienimmanenz (= schlechte Nutzung der technischen Möglichkeiten) Fehler in einem Template-Dokument müssen in allen anderen Dokumenten behoben werden

26 Paradox OS vs. Web Die Tatsache, dass sehr statische digitale Anwendungen (Websites) in einem hochdynamischen Betriebssystem liefen, führte zu einem gewissen Paradox in der Benutzer-Erfahrung. Website Browser OS

27 Front-End-Dynamisierung: Inline Images (Mosaic, 1993) Der von einem Team um den späteren Netscape Gründer Marc Andreesen entwickelte Mosaic Browser konnte inline Bilder im GIF oder JPG Format darstellen.

28 Front-End-Dynamisierung: Java Applets (1995) Die von Sun ursprünglich für elektronische Haushaltsgeräte entwickelte Programmier-Sprache Java konnte über eine speziell für die Einbindung in HTML-Seiten entwickelte Variante (sogenannte applets) dynamische Visualisierungen erzeugen (als erstes im Netscape 2.0 Browser).

29 Front-End-Dynamisierung: JavaScript (NS 2.0, 1995) Der Netscape 2.0 Browser war auch der erste Browser, der JavaScript unterstützte. JavaScript ist eine von Netscape selbst entwickelte Skript-Sprache deren Syntax und Namenskonventionen an Java (und C) angelehnt sind, die allerdings funktional fast gar nichts mit Java (oder C) zu tun hat.

30 Front-End-Dynamisierung: JavaScript (NS 2.0, 1995) JavaScript wurde in seiner ursprünglichen Variante rein client-seitig eingesetzt, d.h. die durch JavaScript ausgeführten Funktionen wurden nur im Browser des Clienten ausgeführt. Da es dadurch sehr schnell war erlaubte es rudimentäre Interaktionen in Echtzeit über das sogenannte Document Object Model (DOM).

31 Front-End-Dynamisierung: Image Rollovers (NS 3.0, 1996) Der Netscape 3.0 Browser ermöglichte es als erster über das name Attribut des image tags in der HTML-Datei die Quell-Datei des Bildes dynamisch auszutauschen (durch ein entsprechendes JavaScript). Dadurch konnte man einen sogenannten MouseOver-Effekt erziehlen, der der Anwendung einen dynamischen Effekt verlieh.

32 Front-End-Dynamisierung: Plug-ins (1996) Ebenfalls in Netscape 3.0 wird der object tag dahingehend erweitert, dass verschiedene Anwendungen über eine plug-in Architektur im Browserfenster laufen können (z.b. Quicktime-Filme, VRML-Anwendungen oder Shockwave- Programme, letztere vor dem Aufkommen von Flash als reine MM-Director- Programme).

33 Front-End-Dynamisierung: Plug-ins (1996) Allerdings sitzen diese Anwendungen zunächst noch wie eine black box inmitten der HTML-Seiten, d.h. es findet weder ein Datenaustausch mit einem Server, noch mit den übrigen Elementen der Website statt.

34 Front-End-Dynamisierung: CSS und DHTML (ca. 1997) Internet Explorer 3 ist der erste Browser der Cascading Style Sheets unterstützt, und Netscape 4 führt mit Dynamic HTML (seinerzeit noch über den nicht standardkonformen layer tag) eine richtungsweißende Neuerung ein.

35 HTML, CSS, DB Trennung von Struktur, Design und Inhalt Mit der Einführung von CSS wird zum ersten Mal das Design von HTML Dokumenten von ihren eigentlichen Inhalten getrennt. CSS: Design HTML: Struktur Datenbank: Inhalt

36 Front-End-Dynamisierung: Flash (ca. 1996) Ursprünglich ein reines Animations-Programm konzipiert (genannt FutureSplash mit der noch heute existierenden Timeline) entwickelte sich das von Macromedia und später Adobe als Flash gebrandete plug-in zu einem nicht mehr wegzudenkenden Werzeug zur Erzeugung zunächst primär client-seitiger dynamischer Präsentationen.

37 Web-Dynamisierung: Flash mit Back-End-Anbindung (ca. 2003) Während fühere Versionen von Flash über die sogenannten FlashVars (einem name/value pair, dass mit entsprechenden Anweisungen in einer URL kommunizieren konnte) rudimentär dynamische Daten verarbeiten konnte, war eigentlich erst die Version 7.0 mit der entsprechenden XML Engine die Flash Version, die den Black Box Charakter der Anwendung aufbrach.

38 Web-Dynamisierung: AJAX (ca. 2005) AJAX steht führ Asynchronous JavaScript and XML und ist urspünglich eine Sonderform von JavaScript, die es erlaubt über XML und http Daten von einer remote source in eine Website zu laden nachdem diese bereits im Browser geladen wurde (daher das asynchron ).

39 Web-Dynamisierung: AJAX (ca. 2005) AJAX kommt oft bei sogenannten Widgets zum Einsatz, das sind kleine, separate Module innerhalb einer Website, die ständig veränderliche Daten kommunizieren (z.b. ein Börsenticker, oder eine Wetter-Anzeige).

40 Web-Dynamisierung: Rich-Internet-Applications PHP, Ajax, die moderneren Formen von Flash (sowie Flex und Microsofts Silverlight) leiten daher eine neue Ära im Web-Publishing ein, wonach es keine strikte Trennung mehr zwischen einer Front- und einer Backend-Dynamisierung gibt, sondern beide in einer Applikation (die nicht einmal mehr browser-basiert sein muss) nahtlos zum Einsatz kommen und im Idealfall eine stufenlose user experience liefern. Man nennt diese Anwendungen daher auch Rich Internet Applications (RIA). Die Aufhebung dieser Trennung war auch eine der Grundbedingung für die technische Umsetzung von Web 2.0 Website Browser OS

41 Web 2.0: Konvergenz von Publisher und Konsumenten Publisher Consumer(s)