ZuiScat. Entstehung einer neuen Internetwelt? Web 2.0, Prinzipien und grundlegende Techniken

Transkript

1 Entstehung einer neuen Internetwelt? ZuiScat Web 2.0, Prinzipien und grundlegende Techniken Universität Konstanz HCI Fredrik Gundelsweiler Folie 1

2 Inhalt des Vortrags + Vision Web Unterschiede zu Web Prinzipien und Hintergrund + Usability und das Web Grundlegende Technologien und Entwicklungen die Web 2.0 ermöglichen + Ajax (Asynchronuous Javascript and XML) + RSS, Newsfeeds + SVG (Standard Vector Graphics) + Entwicklungsumgebungen + Flex 2 (Nachfolger Adobe Flash) + WPF (Microsoft Windows Presentation Foundation),.NET OpenLazlo Folie 2

3 Vision Web 2.0 ZuiScat Folie 3

4 Web Vision + Trend Entwicklung des Internets: + Browser als Alleskönner + Keine statischen, sondern interaktive Webanwendungen + Datenhaltung im Web + Informationen immer aktuell, freie Datenzugänglichkeit + Vernetzung, Anwender, Community, Anbieter + Benutzbarkeit und Erreichbarkeit für Jedermann + Der gläserne Anwender (Profile im Internet: myspace, openbc, studivz, private homepage,...) Folie 4

5 Web 1.0 versus Web Web 1.0: Altes Web + Webseiten statisch + Laden, Zeit + Feedback, Interaktivität schlecht + Wertschaffung Anbieter + Abrufen von Information (Pull) + Web 2.0: Altes Web + AJAX Webseiten dynamisch + Intelligentes Laden + Schnelles Feedback & Interaktivität + Wertschaffung Benutzer & Anbieter + Freie Information, APIs + Push Informationsdienste + Web Services (SOA, WSDL, SOAP, UDDI) + Community, Nutzer im Vordergrund Folie 5

6 Web 2.0 aktueller Stand und Vision RSS Newsreader Grafik aus What_puts_the_2_in_Web_20.pdf Folie 6

7 Google + Startseite, Mail, Newsreader, Kalender,... Folie 7

8 Bittorrent Filesharing + Filesharing, Cohen Protocol, Community, verteilte Daten Folie 8

9 Del.icio.us, digg.com + Bookmarking, News, Community, Sharing Folie 9

10 Flickr API Beispiel Retrievr + Bildersuche, Verwendung der Flickr API, Community, Sharing Folie 10

11 Technologien ZuiScat Folie 11

12 Web 1.0 Grafik aus wikipedia.de Folie 12

13 Web AJAX Grafik aus wikipedia.de Folie 13

14 Ajax - Aufbau + bekannte Technologien XML und Javascript + interaktive, desktopähnliche Webanwendungen + Zustandslose Webanwendungen + Ajax-Anwendung basiert auf: + HTML (oder XHTML) + Document Object Model zur Repräsentation der Inhalte + JavaScript - Manipulation des Document Object Models dynamische Darstellung der Inhalte. + JavaScript auch Schnittstelle zwischen Komponenten Folie 14

15 Ajax - Entwicklung Frameworks: viele weitere, Frameworks zur Datenaufbereitung interessant (XML), in Verbindung mit offenen APIs + Folie 15

16 Ajax - Anwendungen + (Windows Manager) + (Produktsuche) + (Online Excel) + (Bildersuche) + (Searchmash - Websuche) +... Folie 16

17 RSS - Newsfeeds + mehrere Versionen (0.90, 0.91, 0.9x, 1.0, 2.0) + RSS 2.0 (Firma UserLand 2002) Standard für Web Steht für: Really Simple Syndication + Konkurrierendes Format Atom (auch XML basiert) + RSS und Atom: + Nicht kompatibel Host: Webserver + Konvertierung einfach möglich Newsreader Programme Clients im Internet Folie 17

18 RSS 2.0 Aufbau XML Datei <?xml version="1.0" encoding="iso "?> <rss version="2.0"> <channel> <title>titel des Feeds</title> <link>adresse der Webpräsenz</link> <description>kurze Beschreibung des Feeds</description> <language>de-de</language> <copyright>urheberrechtliche Informationen</copyright> <pubdate>datum der Erstellung</pubDate> <image> <url>url der einzubindenen Grafik</url> <title>titel des Bildes</title> <link>adresse, mit der das Bild verknüpft werden soll</link> </image> <item> <title>titel des ersten Artikels</title> <description>eine kurze Zusammenfassung des Artikels</description> <link>adresse zur Gesamtansicht des Artikels</link> <author>autor des Artikels < -Adresse></author> </item> </channel> </rss> <link rel="alternate" type="application/rss+xml" title="rss" href=" /> Folie 18

19 SVG Scalable Vector Graphics + Scalable Vector Graphics (SVG, deutsch Skalierbare Vektorgrafiken) + Standard zur Beschreibung von 2D Vektorgrafiken in XML + SVG wird von den meisten Browsern unterstützt + IE benötigt Plug-In (z. B. SVG-Viewer) + Animationen per SMIL + XML für zeitsynchronisierte, multimediale Inhalte + Verknüpfung mit CGI, Java usw. möglich + Plug-In notwendig Folie 19

20 SVG Beispiel <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" " SVG /DTD/svg10.dtd"> <svg width="150" height="100" xmlns=" <g transform="translate(70,70)"> <path style="stroke:rgb(0,0,0);fill:none; stroke-width:2" d="m0 15 l0-15 l l l l l l l0 +15 a "/> <circle cx="-20" cy="-40" r="3" /> <circle cx="20" cy="-50" r="3" /> <circle cx="56" cy="-40" r="3" /> </g> </svg> Folie 20

21 Entwicklungsumgebungen ZuiScat Folie 21

22 Adobe Flex 2 + Datenanbindung über + AJAX + PHP und andere serverseitige Skriptsprachen + Java + Adobe Server + Grafische Entwicklungsumgebung (MXML und Actionscript 3.0) + Keine grafisch aufwendigen Anwendungen möglich (3D) + Flashplayer 9 Browser Plugin notwendig + Beispiele: + Folie 22

23 WPF Windows Presentation Foundation + Teil des.net 3.0 Frameworks von Microsoft + Datenanbindung über + Direkt über Programmiersprache C#, C++,... + AJAX + PHP und andere serverseitige Skriptsprachen + Verschiedene Werkzeuge zur Entwicklung in.net Entwicklungsumgebung (XAML und C# o.a.) + grafisch aufwendige Anwendungen möglich (3D) + Einschränkung auf IE 7 und Windows + In Zukunft plattformunabhängiges Plug-In geplant Folie 23

24 OpenLazlo + Plattform zur Erstellung von Rich Internet Applications + kalifornische Firma Lazlo Systems + seit 7. Oktober 2004 Common Public License und damit Open Source + gleiches Prinzip wie Flex oder WPF + Eigene XML-Sprache für Anwendungen bzw. visuelle Komponenten + LZX Dateien (XML + ECMA Script) + LZX-Dateien on-the-fly per Java in z.b. Flash Bytecode übersetzt, Ausführung dann durch Flash-Plugin Folie 24

25 Fazit Web com Blase 2000 als erster Hype + rasante Entwicklung von Webangeboten, Diensten und Portalseiten + Jetzt Web 2.0: + altes Web + AJAX und andere Technologien (XML, RSS, SVG,...) + weniger technische Weiterentwicklung aber andere Art der Nutzung + gesellschaftliches bzw. philosophisches Phänomen + Buzzword oder Hype? + späte allgemeine Erkenntnis: der Mensch steht im Vordergrund + Bedürfnisse erkennen und bedienen + Besserer Nutzen für alle + Bessere wirtschaftliche Ergebnisse + Benutzerbedürfnisse: Aufgaben, Kommunikation, Austausch + Einfachheit soll überzeugen, Web für jedermann intuitiv benutzbar Folie 25

26 Web 3.0? Gibt s das? + Zukünftig Web 3.0? + Semantische Netze + Automatische Verknüpfung der Inhalte + Onthologien, intelligente Verknüpfung von Informationen + Weitere Vernetzung und bessere Integration von Multimedia und Anwendungen, auch komplexe Aufgaben über Webbrowser + Pull und Push Modelle +...? Folie 26

27 Ende Bei Fragen können Sie sich gerne an mich wenden: Universität Konstanz Informatik and Informationswissenschaft Mensch-Computer Interaktion Fredrik Gundelsweiler (M.Sc.) tel: +49 (0) fax: +49 (0) mail: Folie 27