Entstehung einer neuen Internetwelt? ZuiScat Web 2.0, Prinzipien und grundlegende Techniken Universität Konstanz HCI Fredrik Gundelsweiler gundelsw@inf.uni-konstanz.de Folie 1
Inhalt des Vortrags + Vision Web 2.0 + Unterschiede zu Web 1.0 + Prinzipien und Hintergrund + Usability und das Web 2.0 + 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 3.0 + OpenLazlo Folie 2
Vision Web 2.0 ZuiScat Folie 3
Web 2.0 - 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
Web 1.0 versus Web 2.0 + 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
Web 2.0 aktueller Stand und Vision RSS Newsreader Grafik aus http://www.adaptivepath.com What_puts_the_2_in_Web_20.pdf Folie 6
Google + Startseite, Mail, Newsreader, Kalender,... Folie 7
Bittorrent Filesharing + Filesharing, Cohen Protocol, Community, verteilte Daten Folie 8
Del.icio.us, digg.com + Bookmarking, News, Community, Sharing Folie 9
Flickr API Beispiel Retrievr + Bildersuche, Verwendung der Flickr API, Community, Sharing Folie 10
Technologien ZuiScat Folie 11
Web 1.0 Grafik aus wikipedia.de Folie 12
Web 2.0 - AJAX Grafik aus wikipedia.de Folie 13
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
Ajax - Entwicklung + http://www.ajax-community.de + Frameworks: + http://www.clearnova.com/ + http://code.google.com/webtoolkit/ + http://developer.yahoo.com/yui/ + http://www.adobe.com/cfusion/entitlement/index.cfm?e=labs%5fspry + http://www.zkoss.org/ + http://www.robertnyman.com/ask/ +... viele weitere, Frameworks zur Datenaufbereitung interessant (XML), in Verbindung mit offenen APIs + http://ajaxpatterns.org/ Folie 15
Ajax - Anwendungen + http://www.winlike.net/ (Windows Manager) + http://www.valoony.de/digitalkamera.html (Produktsuche) + http://www.spreadsheet.google.com (Online Excel) + http://labs.systemone.at/retrievr/ (Bildersuche) + http://www.searchmash.com/ (Searchmash - Websuche) +... Folie 16
RSS - Newsfeeds + mehrere Versionen (0.90, 0.91, 0.9x, 1.0, 2.0) + RSS 2.0 (Firma UserLand 2002) Standard für Web 2.0 + 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
RSS 2.0 Aufbau XML Datei <?xml version="1.0" encoding="iso-8859-1"?> <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 <E-Mail-Adresse></author> </item> </channel> </rss> <link rel="alternate" type="application/rss+xml" title="rss" href="http://www.example.net/feed.rss" /> Folie 18
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
SVG Beispiel <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/tr/2001/rec- SVG-20010904/DTD/svg10.dtd"> <svg width="150" height="100" xmlns="http://www.w3.org/2000/svg"> <g transform="translate(70,70)"> <path style="stroke:rgb(0,0,0);fill:none; stroke-width:2" d="m0 15 l0-15 l-10-30 l+20 +30 l+10-40 l+10 +40 l+20-30 l-10 +30 l0 +15 a30 10 0 0 0-40 0"/> <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
Entwicklungsumgebungen ZuiScat Folie 21
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:http://www.adobe.com/de/devnet/flex/index.html?tab:samples=1 + http://www.asfusion.com/apps/homelocator/ Folie 22
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 3.0 + 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
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
Fazit Web 2.0 +.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
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
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)7531 88-3547 fax: +49 (0)7531 88-4772 mail: Fredrik.Gundelsweiler@uni-konstanz.de Folie 27