Präsentation herunterladen
Die Präsentation wird geladen. Bitte warten
1
Web 2.0!? /TU Freiberg/Internet Multimedia/Konrad Froitzheim
Konrad Froitzheim, TU Freiberg, Germany WWW == (Web 0.5 | Web 1.0) Webapplikationen AJAX Web 3.0?
2
/Eine kurze Geschichte des WWW/Ursprung
Hypertext nichtlineare Dokumente Ted Nelson: Xanadu Bill Atkinson: Hypercard Hochenergiephysik am CERN Conseil Européen pour la Recherche Nucléaire Dokumentation, Veröffentlichungen elektronische Bibliothek World Wide Web Berners-Lee und Cailliau verteiltes HyperText-System html = Text + <a> tag, ohne Grafik Server - Internet - Client Mosaic und Netscape Click -> HttpGETRequest Server Client request response
3
/Eine kurze Geschichte des WWW/Web 1.0
Produzent und Konsument Das WWW der Wissenschaftler Publizieren Links sammeln, Nützliches anbieten Web-Präsenzen Meta-Seiten Yahoo's Linksammlung Suchmaschienen (Altavista, Google, …) Statische Webseiten makro-interaktiv Datenbank-Webseiten ('Web 1.5') Zeitungen Warenwirtschaft -> Versandhandel Amazon als Existenzbeweis Content Management Systeme
4
/Erfolgreiche Web-Dienste/Kommerziell
Ebay Transaktionssystem Handelsplattform Regeln Kassieren Amazon ISBN und Inhalt vom Buchhandel Logistik- und Zahlungssystem Benutzerkommentare Auswertung des Kaufverhaltens Amazon Web Services E-Commerce Service Elastic Compute Cloud Simple Storage Service
5
/Erfolgreiche Webdienste/Vorkommerziell
Sourceforge Blogs Selbstgeschriebene Kommentare Kommentare von Lesern (=Leserzuschriften) Wikipedia Problem Qualitätskontrolle Medien Sharen Napster, Kazaa, eMule Flickr YouTube Tagging (social bookmarking) del.icio.us Bookmarks sharen Tag clouds
6
/Erfolgreiche Webdienste/Gemeinsamkeiten
Infrastruktur für Benutzer Benutzer erstellen den eigentlichen Inhalt Benutzer schaffen die Werte Benutzer arbeiten lassen Auktion erstellen Artikel beschreiben Rezensionen schreiben bloggen und kommentieren Benuterbeiträge kanalisieren Regeln erstellen und durchsetzen (Gesetze, 'Anstand', …) Beiträge automatisch kontrollieren Kontrolle durch 'Peers'
7
/Thesen von Tim O'Reilly
Einzigartige Daten explizit und implizit vom Benutzer Beispiel Amazon 'kollektive Intelligenz' 'bändigen' Wikipedia, Google, Sourceforge, Blogs tagging Services anstelle von Softwarepaketen Google statt Netscape Web-Plattformen: Amazon, Google, … Servicebasierte Software das Ende der Pakete und Versionen Leichtgewichtige Entwicklung User als Co-Entwickler Plattformunabhängigkeit: Hardware, OS 'Rich User Experience' im Web
8
/WebApplikationen Mikro-interaktiv Benutzeroberfläche Server Scripting
Browser html mit Grafiken als Substrat individuelles Verhalten: JavaScript Server Datenbank Geräte Apache und Apache-Module Scripting client-side: Javascript, Java Applets server-side: ASP, php, Java und Beans Beispiele rr.informatik.tu-freiberg.de Shopping-Seiten
9
/Webapplikationen/Programmierparadigmen
Infrastruktur Server:(Apache+php|JavaBeans) Server:Datenbank Client:(InternetExplorer|Firefox|Safari) Krümelware kleine, vorgefertigte Bauteile (-> Objekte) abgeleitete (erweiterte) Objekt inkrementelles Programmieren Einfügen und Erweitern statt Bauen Gesamtkonzept? Architektur? AJAX Asynchronous JavaScript And XML maps.google.com flickr.com - ajaxWrite.com
10
/Webapplikationen/AJAX/Architektur
Programm im Browser(Client) JavaScript AJAX-Libraries Server Webserver, Datenbank Server-side Scripte Leichtgewichtige Kommunikation XMLHttpRequest synchron und asynchron Server Client GET-request html, img, js XMLHttpRequest XML html, img js php DB Server Client request response request response request response
11
Beispiel: Windowgröße verändern
/AJAX/JavaScript Beispiel: Windowgröße verändern Programmfragmente in HTML Verbesserung von HTML-Seiten Klienten-Seite von Netscape definiert Fenstergröße und -Gestaltung Menus, Effekte, … Interpreter im Browser Eingebettet in HTML script-Tag <html><head><title>Test</title> </head><body onload="window.resizeTo(1024, 768)"> </body></html> <html><head><title>Test</title> <script language="JavaScript"> <!-- alert("Hallo Welt!"); //--> </script> </head><body> </body></html>
12
Beispiel 'Taschenrechner'
/AJAX/JavaScript Beispiel 'Taschenrechner' Eventhandler Attribut in html-Tags Ausführungsbedingung Funktionsaufruf onLoad, onUnLoad, … onClick, onMouseover, … Sprache Notation von Java inspiriert Anweisungen Zuweisungen Bedingte Anweisungen, Schleifen Funktionsaufrufe Klammern mit {} <html> <head> <title>JavaScript-Test</title> <script language="JavaScript"> <!-- function Quadrat(Zahl) {Ergebnis = Zahl * Zahl; alert("Das Quadrat von " + Zahl + " = " + Ergebnis); } //--> </script> </head> <body> <form> <input type=button value="Quadrat von 6 errechnen" onClick="Quadrat(6)"> </form> </body> </html> zahl = 0; zahl++; zahl+=1; if (Zahl<0) zahl = 0; while (idx<100) {…; idx++} for(i = 1; i <= 100; i++) alert("Und hier ein kleiner Hinweis"); if (Ergebnis > 100) { Ergebnis =0; Neustart();
13
/AJAX/JavaScript Variablen Objekte Funktionen
kein ordentliches Typenkonzept Vereinbarung mit 'var' Typ Zahl oder String wird bei der ersten Zuweisung festgelegt global oder in Funktion lokal Objekte selbstdefiniert vordefiniert in Umgebung window, document, … Methoden zur Manipulation Funktionen Anweisungsblock mit Variablen Aufruf aus anderen Funktionen und in Eventhandlern var Antwort = 42; var Frage = "The Question for god …" neuesFenster = new.window; neuesFenster.open(); <!-- function Quadrat(Zahl) {Ergebnis = Zahl * Zahl; alert("Quadrat von "+Zahl+" = "+Ergebnis); } //-->
14
/AJAX/XMLHttpRequest
JavaScript Klasse erstmals in IE 5 Interface für Http ohne Benutzerinteraktion synchron und asynchron Properties readystate, status onreadystatechange responseText Methoden open send function createXMLHttpRequest() { try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {} try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} try { return new XMLHttpRequest(); } catch(e) {} alert("XMLHttpRequest not supported"); return null;} var xhReq = createXMLHttpRequest(); xhReq.open("get", "sumget.phtml?num1=10&num2=20", true); xhReq.onreadystatechange = function() { if (xhReq.readyState != 4) { return; } var serverResponse = xhReq.responseText; ...}; xhReq.send(null);
15
XML: eXtensible Markup Language
/AJAX/Das X in AJAX Markup Markup: Trennung Struktur - Inhalt logische Struktur der Seite Bsp: Überschriften, Absätze, Zitate, … XML: eXtensible Markup Language Syntax für Markup Semantik in XSL oder CSS Document Object Model DOM baumartige Struktur der Dokumente Zugriff auf Dokumenteninhalt (=Objekte) Inhalt, Struktur, Stil AJAX XML als ein Transfer-Format für Inhalt Manipuliert DOM-Knoten Einfügen, Löschen, Ändern Browser 'rendert' Dokument <table> <thead> <tr> <th>Vorname</th> <th>Name</th> </tr> </thead> <tbody> <td>Donald</td> <td>Duck</td> </tbody> </table> Quelle: de.wikipedia.de/wiki/Document_Object_Model
16
/Social Services Kommunikation Communities Virtuelle Präsenz Exchange
Chat, IP-Telephony, iChat Kommunikation einleiten ICQ, AOL-Buddylist Communities Online Games Second Life Virtuelle Präsenz CoBrow, lluna, … Exchange Blogs Flickr, YouTube, …
17
/Web 2.0/Literatur und Links
Tim O'Reilly: Web 2.0; 2005. M. Eernisse: Build your own AJAX Web Applications; 2006. M. Mahemoff: Ajax Design Patterns; 2006.
18
/Web 3.0 Aspiranten 3D Sozialer Kontakt Allgegenwärtiges Web
bessere Suchmaschinen Semantisches Web, Inhalte Verstehen, KI, … triple play 3D 3D Bilder virtuelle Realität Sozialer Kontakt natürliche Interaktion echte Menschen treffen (-> SL) Avatare und Bilder Web zur Steuerung der Kommunikation Allgegenwärtiges Web 'eingebettet' wie Papier
Ähnliche Präsentationen
