1 Einleitung und Grundlagen

Transkript

1 1 Einleitung und Grundlagen Historie des WWW (Ref: Vannevar Bush: Memex, for memory extension, make and follow links between documents on microfiche 1960s Doug Engelbart prototypes an "online System" (NLS) which does hypertext browsing editing, , and so on. He invents the mouse for this purpose. Ted Nelson coins the word Hypertext Andy van Dam and others build the Hypertext Editing System and FRESS in Tim Berners-Lee writes a notebook program, "Enquire-Within-Upon-Everything", which allows links to be made between arbitrary nodes 1989 Tim Berners-Lee: Paper "HyperText and CERN" 1990 Tim writes a global hypertext system on a NeXT cube + line browser 1993 Marc Andreessen's Mosaic März: 0,1 % WWW Backbone Traffic Sept: 1% Okt: 200 WWW Server 1994 Gründung: "Mosaic Communications Corp" (later Netscape). MIT/CERN: W3 Org Dez: Netscape Browser 1995 Java Script G7 Meeting in Brüssel zum Thema WWW Win95 + IE 1996: Opera 1997: Mosaic wird eingestellt 2000: Aktien Crash beendet die Dot-Com-Blase: (Hot Mail wurde für 400 Mio$ von MS gekauft) 2003: Safari Browser 2005: AJAX / Web : Google Chrome Browser 1

2 Analyseaufgabe: Teil1: Schlechte Webseiten Suche nach den schlechtesten Webseiten. top 10 websites worst websites worst Was macht diese Seiten so schlecht? Teil2: Top Web Seiten Analyse von Top Seiten Fokus: Aufbau, Struktur, Techniken, Inhalten, Features, Nutzen, Zielgruppen Was sticht ins Auge? Gibt es Kritikpunkte? Themen Brainstorming Ergebnis: Mindmap am Whiteborard 2

3 2 Inhalte: Die Lehrveranstaltung Webengineering soll die Studierenden in die Lage versetzen, systematisch Webanwendungen zu entwickeln; im Detail lernen die Studierenden aktuelle Konzepte, Methoden, Techniken und Werkzeuge zur ingenieurmäßigen Entwicklung von Webanwendungen zu erarbeiten und in der Praxis anzuwenden. Gemeinsamkeiten und Unterschiede zwischen traditioneller Softwareentwicklung und Web- Anwendungsentwicklung zu erkennen potentielle Risiken bei der Entwicklung von Web-Anwendungen zu kennen Darüber hinaus werden auch zukünftige Entwicklungen im Bereich des Web Engineering diskutiert. Einführung und Grundbegriffe Kategorien von Webanwendungen Eigenschaften von Webanwendungen Technologien für Webanwendungen Webspezifische Softwareentwicklungsprozesse (Vorgehensmodelle) Requirements Engineering für Webanwendungen Design von Webanwendungen Workflow Design, Informationsdesign, Navigationsdesign, Präsentationsdesign, Architekturentwurf Barrierefreies Webdesign Tipps für Typografie im Netz Erfolgskontrolle mit dem Website Optimizer Probleme aufspüren mit Logfile-Analyse Adaption Lokalisierung Internationalisierung Personalisierung Implementierung, Deployment und Wartung Qualitätsmanagement Testen von Webanwendungen Usability Evaluation und Website-Usability optimieren Hosting und Content Management Marktübersicht Hosting-Angebote Instant Websites mit Desktop-CMS Content-Management-Systems (Typo3, Drupal,...) Weiterführende Themen: Suchmaschinenoptimierung (SEO) Websicherheit Semantisches Web 3

4 Management von Webprojekten 4

5 Web Engineering - Gliederung der Vorlesung: 1. Grundlagen Webanwendungen: Kategorien, Eigenschaften, Technologien Medientypen, Navigation (HTML, JS, JPG, PNG, CCS, XML, etc. Dynamisches Web: Server Side / Client Side 2. Web Projekt Management Vorgehensmodelle Requirements Engineering (UML, etc) Entwurf, Realisierung, Deployment und Wartung QM, Testing 3. Design Methoden Workflow Design, Informationsdesign, Navigationsdesign, Präsentationsdesign, Architekturentwurf Barrierefreies Webdesign Typografie Optimizer / Logfile-Analyse Adaption(Lokalisierung, Internationalisierung, Personalisierung) Suchmaschinenoptimierung (SEO) 4. Tools und Infrastrukturen Web Server, Management Betriebs- und Ausfallsicherheit (HA, Cluster, Hot Standby, Load Balancer, etc.) Web-Anwendungen PHP, J2EE, / Packages: Blogs, CMS, WIKIs / Rapid Development Tools Mobile Geräte Security, Zertifikate, Server Hardening 5. Weiterführende Themen Semantic Web Web Security Hosting, Cloud Computing Literatur: Die Vorlesung orientiert sich an folgendem Buch: Web Engineering. Systematische Entwicklung von Webanwendungen Kappel, Pröll, Reicj, Retschitzegger Dpunkt Verlag,

6 3 Web: Technologische Grundlagen HTTP Protokoll HTTP: Anwendungsprotokoll im Stack über TCP /IP Port 80 Zustandslos!! #-> Session: ID muss implementiert werden Request: GET, POST, HEAD, PUT, DELETE, TRACE, OPTIONS, CONNECT Web Services / SOAP / REST WebDAV Authentifizierung: Basic / Digest Access Protokoll Beispiel: Anfrage: GET /index.html HTTP/1.1 HOST: Antwort: HTTP/ OK Date: Mon, 21 Feb :54:09 GMT Server: Apache/ (Fedora) DAV/2 PHP/5.2.9 Last-Modified: Mon, 03 Jan :09:18 GMT ETag: "7207a-1b9-498f43657ab80" Accept-Ranges: bytes Content-Length: 441 Connection: close Content-Type: text/html; charset=utf-8 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta content="text/html; charset=iso " http-equiv="contenttype"> <title>index</title> </head> <body> <h1>welcome...</h1> </body> </html> Parmeter mit GET: GET /index.html?user=markus&skin=default HTTP/1.1 HOST: Parameter mit POST: POST /index.html HTTP/1.1 HOST: Content-Type: application/x-www-form-urlencoded Content-Length: 23 user=markus&skin=default 6

7 HTTP Status Codes: Die wichtigsten HTTP Status Codes: 1xx Informationen 2xx Erfolgreiche Operation 200 OK 201 Created 202 Accepted 3xx Umleitung 301 Moved Permanently 304 Not Modified, 4xx Client-Fehler 400 Bad Request 401 Unauthorized 403 Forbidden 404 Not Found 5xx Server-Fehler 500 Internal Server Error 502 Bad Gateway 503 Service Unavailable Anatomie WWW A n a t o m i e d e s W W W B r o w s e r H T T P 8 0 H T T P + H T M L W e b S e r v e r A P H P, P e r l, P y t h o n, J S F, J S P,. N E T R u b y n o - g o : C G I p p l i k a t i o n H T M L D a t e n Anatomie Web 2.0 A n a t o m i e + A J A X B r o w s e r S e i t e S c i p t H T T P H T M L + S c r i p t 8 0 W e b S e r v e r A p p l i k a t i o n a s y n c h r o n e S e r v i c e R e q u e s t s H T M L D a t e n 7

8 HTML Hypertext Modell Grundbestandteile Knoten: eine nicht weiter unterteilte und eindeutig identifizierbare Informationseinheit HTML Dokument über URL adressierbar Links: realisieren Verweise zwischen Knoten WWW: unidirektional Bedeutung der WWW Links ist nicht festgelegt Anker: Quell- und Zielbereiche innerhalb von Knoten Essenzielle Merkmale des Hypertext Paradigmas: Nicht-Linearität Folgeproblem: Desorientierung und kognitive Belastung des Benutzers Wege zur Problemminderung: Sitemaps History Breadcrumps HTML: verwendet SGML Spezifikation Elemente <element>... </element> <element/> Attribute <elemen attr=xyz;>... </element> werden in DTD beschrieben 1992 Urversion 1993 mit integrierten Bildern img und Auzeichnungen: fett, kursiv 1995 HTML 2.0: RFC u.a. mit Forms Jan 1997 HTML 3.2: Tabellen, Textfluss um Bilder, Applets Dez 1997 HTML 4.0: Stylesheets, Scripte, Frames, 1999 HTML 4.01 kleinere Korrekturen -> aktuell HTML sind Textdatein der Form: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> <title>titel</title> <!-- Kommentar --> </head> <body> <h1>überschrift</h1> <p>inhalt</p> </body> </html> 8

9 Link: <a href= >Linktext</a> Textauszeichnungen: <b>fett</b> <i>kusiv</i> <u>unterstrichen</u> <s>durchgestrichen</s> <tt>schreibmaschinenschrift</tt> _{hochgestellt</sup> <sup>tiefgestellt} Listen: <ul> <li>blah</li> <li>blub</li> </ul> nummeriert mit <ol> </ol> Vorformatierter Text <pre> </pre> Block <div align= center >... </div> Trennlinie <hr> Tabelle <table> <tr> <td>...</td> <td>...</td> </tr> </table> Grafik einbinden <img src= test.png > Schriftformatierung <font color= #AA99DD >... <font size= -1 >... </font> </font> <font style="font-family:avalon,wide Latin">... </font> 9

10 CSS: <html> <head> <title>titel</title> <style type="text/css">... </style> </head> <body> <h1>text</h1> <p>inhalt</p> </body> </html> <html> <head> <title>titel</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>überschrift</h1> <p>inhalt</p> </body> </html> Form: Selektor { Eigenschaft:Wert; } Beispiel: h1 { color:blue;; font-size:48px; } Schachtelungen: div i { color:red; } Attributbedingte Formatierungen: *[lang =en] { background-color:#ff0000; color:#ffffff; } <h1 lang= en >Test</h1> Format-Klassen:.hinterlegt { background-color:# } <h1 class= hinterlegt >Test</h1> Format-IDs #menu { position:absolute; top:100px; left:0px; width:300px; padding:10px; margin:0px; border:4px solid #E10000; } <div id= menu >. </div> Box Modell: margin = Außenabstand (jeweils margin-top, -bottom, -left, -right) border = Rahmen padding = Innenabstand width / heigth = Inhalt Maßeinheiten: in Inch 2,54 cm pt Punkt 1/72 Inches pc Pica = 12 pt px Pixel em Schriftgröße ex bezogen auf keines 'x' % bezogen auf Elternelement mm / cm 10

11 4 Motivation für Web Engineering Probleme von Web-Projekten (Cutter-Consortium Studie, 2000): 84 % verfehlen die gesetzten geschäftlichen Ziele 79 % verfehlen die Zeitvorgaben 63 % haben Probleme mit dem kalkulierten Budget 53% können nicht die angeforderten Funktionen liefern 52 % haben Qualitätsprobleme (Quelle: Web Krise analog zur Softwarekrise der 60er Jahre Was ist Engineering? kreativer Prozess wissenschaftliche Herangehensweise systematisches Vorgehen und Anwenden von Methodiken Design und Entwickeln von komplexen Strukturen Umsetzung von Spezifikationen Berücksichtigung von Ökonomie und Sicherheit Aufteilung in Disziplinen Web Engineering stellt eine neue Disziplin des Software-Engineerings dar. Grundprinzipien: Arbeiten mit klar definierten Zielen und Anforderungen Systematisches Vorgehen in Phasen saubere Planung und Projektmanagement 11

12 Kategorien von Webanwendungen Statische Sites, dokumentenzentrierte Websites, Web Casts, Web Radio Workflow-basierte Anwendungen Interaktiv Kollaboration Plattformen Chatroom E-Learning gemeinsamer Workplace Social Plattformen Portale und Online Shops Ubiquitäre Dienste personalisierbar ortsabhängig Multi-Client / Multi Plattform Delivery Service Orientierung semantisches Web / Wissensmanagement / Ontologie Management Eigenschaften von Webanwendungen Komplexität Dynamik Architektur, Struktur und Präsentation/Design Content Orientierung Integration Security Personalisierung Internationalisierung Produkteigenschaften (Web Server, Application Server, Application, Frameworks) Qualität Drei Dimensionen (ISO/IEC Standard) 1. Produkt 2. Nutzung und 3. Entwicklung 12