1 Einleitung und Grundlagen

Hochschule Rhein-Waal, Vorlesung Web Engineering
Markus Harms, 2011
1 Einleitung und Grundlagen
Historie des WWW (Ref: http://www.w3.org/History.html)
1945
• 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, email, 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 1967.
1980
• 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 / Web2.0
2008:
• Google Chrome Browser
1
Hochschule Rhein-Waal, Vorlesung Web Engineering
Markus Harms, 2011
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
1. http://www.verwaltung.bayern.de/
2. http://www.intstyle.com/
3. http://www.fortune.com
4. https://epetitionen.bundestag.de/
5. http://msn.com/
6. http://www.postbank.de/
7. http://www.wir-in-nrw-blog.de/
8. http://www.kamp-lintfort.de/
Fokus:
• Aufbau, Struktur, Techniken, Inhalten, Features, Nutzen, Zielgruppen
• Was sticht ins Auge?
• Gibt es Kritikpunkte?
Themen Brainstorming
Ergebnis: Mindmap am Whiteborard
2
Hochschule Rhein-Waal, Vorlesung Web Engineering
Markus Harms, 2011
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 WebAnwendungsentwicklung 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
Hochschule Rhein-Waal, Vorlesung Web Engineering
•
Management von Webprojekten
4
Markus Harms, 2011
Hochschule Rhein-Waal, Vorlesung Web Engineering
Markus Harms, 2011
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, 2003
5
Hochschule Rhein-Waal, Vorlesung Web Engineering
Markus Harms, 2011
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: www.test.de
Antwort:
HTTP/1.1 200 OK
Date: Mon, 21 Feb 2011 09:54:09 GMT
Server: Apache/2.2.14 (Fedora) DAV/2 PHP/5.2.9
Last-Modified: Mon, 03 Jan 2011 17: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-8859-1" 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: www.test.de
Parameter mit POST:
POST /index.html HTTP/1.1
HOST: www.test.de
Content-Type: application/x-www-form-urlencoded
Content-Length: 23
user=markus&skin=default
6
Hochschule Rhein-Waal, Vorlesung Web Engineering
Markus Harms, 2011
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
P H P , P e r l,
P y th o n ,
J S F , J S P , .N E T
R uby
n o -g o :
C G I
A n a to m ie d e s W W W
H TTP
B ro w s e r
80
H TTP + H TM L
W eb
S e rv e r
A p p lik a t io n
H TM L
D a te n
Anatomie Web 2.0
A n a to m ie + A J A X
B ro w s e r
S e ite
S c ip t
H TTP
80
H T M L + S c r ip t
W eb
S e rv e r
A p p lik a tio n
H TM L
D a te n
a s y n c h r o n e S e r v ic e
R e q u e s ts
7
Hochschule Rhein-Waal, Vorlesung Web Engineering
Markus Harms, 2011
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"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Titel</title>
<!-- Kommentar -->
</head>
<body>
<h1>Überschrift</h1>
<p>Inhalt</p>
</body>
</html>
8
Hochschule Rhein-Waal, Vorlesung Web Engineering
Markus Harms, 2011
Link:
<a href=“http://www.test.de/folder/file.html“>Linktext</a>
Textauszeichnungen:
<b>fett</b>
<i>kusiv</i>
<u>unterstrichen</u>
<s>durchgestrichen</s>
<tt>Schreibmaschinenschrift</tt>
<sub>hochgestellt</sup>
<sup>tiefgestellt</sub>
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 style="font-family:Avalon,Wide Latin">
...
</font>
</font>
9
Hochschule Rhein-Waal, Vorlesung Web Engineering
Markus Harms, 2011
CSS:
<html>
<head>
<title>Titel</title>
<style type="text/css">
....
</style>
</head>
<body>
<h1>Text</h1>
<p>Inhalt</p>
</body>
</html>
Form:
<html>
<head>
<title>Titel</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Überschrift</h1>
<p>Inhalt</p>
</body>
</html>
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:#000000 }
<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
border
padding
width / heigth
= Außenabstand
= Rahmen
= Innenabstand
= Inhalt
Maßeinheiten:
in
Inch
pt
Punkt
pc
Pica
px
Pixel
2,54 cm
1/72 Inches
= 12 pt
(jeweils margin-top, -bottom, -left, -right)
em
Schriftgröße
ex
bezogen auf keines 'x'
%
bezogen auf Elternelement
mm / cm
10
Hochschule Rhein-Waal, Vorlesung Web Engineering
Markus Harms, 2011
4 Motivation für Web Engineering
Probleme von Web-Projekten (Cutter-Consortium Studie, 2000):
•
•
•
•
•
84 %
79 %
63 %
53%
52 %
verfehlen die gesetzten geschäftlichen Ziele
verfehlen die Zeitvorgaben
haben Probleme mit dem kalkulierten Budget
können nicht die angeforderten Funktionen liefern
haben Qualitätsprobleme
(Quelle: http://www.cutter.com/research/2000/crb001107.html)
→ 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
Hochschule Rhein-Waal, Vorlesung Web Engineering
Markus Harms, 2011
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-9126-1-Standard)
1. Produkt
2. Nutzung und
3. Entwicklung
12