Web Engineering.

Transkript

1 Verteilte und selbstorganisierende Rechnersysteme WS 11/12 07/08 Praktikum Web Engineering Dipl.-Inf. Olexiy Chudnovskyy Technische Universität Chemnitz Fakultät für Informatik Professur Verteilte und selbstorganisierende Rechnersysteme Foliensatz: Prof. Dr.-Ing. Martin Gaedke, Dipl.-Inform. Johannes Meinecke, Dipl.-Inf. Jens Wegener, Dipl.-Inf. Olexiy Chudnovskyy et al

2 Willkommen Praktikum Technologien für die Webanwendungsentwicklung in 3 Aufgaben Umsetzen der erlernten Technik in einem kleinen Projekt Ablauf heute Kurzführung zu Web Engineering Organisatorische Punkte Vorstellung der 1. Aufgabe 2

3 Verteilte und selbstorganisierende Rechnersysteme Teil 1 HYPERMEDIA, DAS WEB UND WEB ENGINEERING 3

4 Was ist Hypertext/-media? Konzept zur Organisierung von Wissen Hypertext eine Anwendung, die es einem Nutzer erlaubt durch einen Informationsraum mittels assoziativen Verlinkungen zu navigieren Nicht-lineare Informationsknoten Bücher und traditionelle Medien (z.b. Radio) sind linear ein einziger Weg durch das Material Hypertext stellt mehrere verschiedene Wege durch das Material zur Verfügung 4

5 Was ist Hypertext/-media? The glorified definition Multimedia Hypermedia Hypertext Hypermedia: Spielart von Hypertext unter expliziter Betonung des multimedialen Aspektes Informationsknoten können verschiedene Medien enthalten (Text, Grafik, Video, Ton, ). Hypertext-Community benutzt die Begriffe Hypertext und Hypermedia meist synonym. 5

6 Hypertext History 1945: Vannevar Bush Memex As we may think : Doug Englebart on Line Inventor of the Mouse (used in NLS) 1965: Ted Nelson Xanadu Coined Hypertext 1985: Bill Atkinson HyperCard First usable Hypertext application 6

7 Hypermedia - Vannevar Bush As We May Think. July 1945, Atlantic Monthly The human mind operates by association Memex Idea: Selection by association, rather than by indexing, may yet be mechanized. Device for individual use in which an individual stores all books, records, and communications supplement to user s memory

8 World Wide Web (WWW) 1989 initiated by Tim Berners-Lee at CERN Goal: Support the cooperation of distributed research teams (e.g. to exchange research documents) on top of a heterogeneous system environment 1991 originally proposed 8

9 WWW Der Anfang The WorldWideWeb browser (1 st Web Browser) 9

10 WWW Technische Konzepte Einheitliche Addressierung eindeutige weltweite Adressen abstrahiert die geografische Verteilung der Informationsknoten (Dokumente können lokal sein oder sich auf einem anderen Computer befinden) Einheitlicher Zugriff Browser bieten einen einheitlichen Zugiff auf alle Dokumente im WWW WWW is a collection of software, protocols, standards, and recommendations providing a Hypermedia system 10

11 Webanwendungsentwickl. heute Design- Modell HTML HTML HTML Implementierungs- Modell Code and Fix statt dizipliniertem Vorgehen Copy-and-Paste Paradigma Lücke zwischen Design-Modell und Implementierungs-Modell Design-Konzepte gehen im darunter liegenden Modell verloren viele kurze Lebenszyklen einer Web-Anwendung Probleme bei der Weiterentwicklung und Wiederverwendbarkeit Web-Krise 11

12 Systematischer Ansatz notwendig Die verschiedenen Anforderungen verlangen einen systematischen Ansatz. Kosteneffektive Entwicklung von Produkten hoher Qualität Ziel Produkt soll sein: Wartbar und leicht weiterentwickelbar Zuverlässig Effizient über eine zeitgemäße Benutzerschnittstelle verfügen (bezüglich Hypermedia) rechtzeitig fertiggestellt werden mit vorhersagbaren Kosten 12

13 Web Engineering Web Engineering: Die Anwendung systematischer, diziplinierter und quantifizierbarer Ansätze für die kosteneffektive Entwicklung und Evolution von qualitativ hochwertigen Anwendungen im World Wide Web. (Komponententechnik für Entwicklung und Evolution von Anwendungen im World Wide Web, Martin Gaedke, 2000) 13

14 Verteilte und selbstorganisierende Rechnersysteme Teil 2 ORGANISATORISCHES 14

15 Praktikum Historie erstes Praktikum: SS99 (in Karlsruhe) mehr als 11 Generationen Fokus Web Technologie (W3C): XML, SOAP, Technische Plattform:.NET 4.0 (oder höher) Schwerpunkte: Komponenten und Web Services Web Engineering Prozess Teamarbeit 15

16 Praktikumstreffen 6 Termine (vorläufig!) Stellung der 1. Aufgabe: Stellung der 2. Aufgabe: :30 Stellung der 3. Aufgabe: Projekt Kick-Off: Projekt Zwischentreffen: Abschlusstreffen: Uhrzeit: 15:30 17:00 Uhr Konsultation: Montags 15:30 in der Woche zwischen den Abgabeterminen Ort: Raum 1/B203 16

17 Aufgaben Aufgabenstellung (Kurz-)Vorstellung in den Praktikumstreffen Details zu den Aufgaben sowie weitere Infos: Aufgaben nur für eingeloggte Benutzer sichtbar Abnahme der Aufgaben Freitags vor dem nächsten Treffen, ab 11:30 Vorführung je nach Aufgabenstellung einzeln oder in der Gruppe siehe Hinweise zur Abnahme in den Aufgabenstellungen 17

18 Bearbeitung Poolraum im FRIZ (1/B202) Notwendige Software ist vorinstalliert Zu Hause Im Rahmen der MSDN Academic Alliance bekommt man gratis Visual Studio.NET 2010 und Windows Einen Zugang erhält man im FRIZ (1/B202) IIS (Web-Server) sollte mit installiert werden Möglichst nicht mit Windows Home Edition arbeiten 18

19 Praktikumsserver Zentraler Web-Server (IIS): Upload über Subversion-Repository: Zugriff auf Rechner pauline nur aus dem Campusnetz der TU Chemnitz möglich, ggf. VPN benutzen: Freischalten von Verzeichnissen als Web- Anwendungen: über Praktikumsleitung 19

20 Aufteilung in Gruppen 20

21 Verteilte und selbstorganisierende Rechnersysteme Teil 3 AUFGABE 1 21

22 A1.1: Gruppen-Homepage Repräsentation der Gruppe im Web Verwendung von HTML zu Fuß Verwendung von CSS zur Trennung von Inhalt (HTML) und Präsentation (CSS) Einsatz von zwei Hypermedia Design Pattern, eins davon Breadcrumbs, nicht News Achten auf ansprechendes Design und Benutzbarkeit XHTML 1.0 Strict, keine Validierungsfehler Browserkompatibilität: Firefox 7.0, IE 9 Installation auf dem Praktikumsserver Gruppenbearbeitung 22

23 Statische Web-Seiten Technologien für statische Web-Seiten HTML: Inhalte CSS: Präsentation Entwurfsrichtlinien Hypermedia Design Patterns: Best Practices für die Entwicklung von Hypermedia- Anwendungen ein Pattern ist zum Beispiel: Index Navigation 23

24 Hypertext Markup Language (HTML) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <title>titel der Datei</title> <link rel="stylesheet" type="text/css" href="test.css"/> </head> <body> <h1>überschrift</h1> <p>normaler Text...</p> <p class="warning">achtung: Gefahr!</p> </body> </html> 24

25 Cascading Style Sheets (CSS) body { background-color: #ffffff; font-family: arial, sans-serif; font-size: 10pt } h1 { } font-family: arial, sans-serif; font-size: 18pt; font-weight: bold.warning { font-style: italic; font-weight: bold; color: red; } 25

26 Yahoo Design Pattern Library Beispiel für ein Hypermedia Design Pattern: Title: Breadcrumbs Problem: The user needs to be able to navigate up (towards the root page) and have an understanding of where she is in relation to the rest of the site. 26

27 Hypermedia Design Patterns Solution: Display a horizontal list of labels starting with the topmost page and continuing down the site's hierarchy to the current page Labels Where possible, labels should match the title of their corresponding page. Use the rules of title capitalization for labels in the breadcrumb. Separate each label with a greater-than sign ( > ) or equivalent delimiter. Include the title of the current page as the last label in the breadcrumb. Do not use the label "Home" for the topmost page. Instead use the specific name for the topmost page (e.g. "Travel" or "Weather" rather than "Home".) Hyperlinks Hyperlink all labels in the breadcrumb except the last one (which corresponds to the title of the current page.) Never hyperlink the greater-than sign ( > ) or the spaces that separate the labels. The hyperlink should be styled the same regardless of whether it has been visited or not. 27

28 Hypermedia Design Patterns Discussion: Never display a breadcrumb on the site's topmost page. The breadcrumb sometimes corresponds to the user's recent browsing history, but is not equivalent to it. Dynamically include the titles of user-generated content pages as appropriate. 28

29 Hypermedia Design Patterns Example 29

30 Yahoo Design Pattern Library Mehr Pattern gibt es im Yahoo Design Pattern Library 30

31 A1.2: Einführung in XML Personenbeschreibungen in XML Ein XML-Dokument pro Student Anforderungen Informationen: Namen, -Addresse, Studiengang, Liste von Hobbies,... Nicht-triviale Verschachtelung von XML- Elementen Mindestens ein XML-Attribut Verwendung eines eigenen Namespaces Einzelbearbeitung 31

32 XML extensible Markup Language Untermenge von SGML erweiterbare Metasprache ermöglicht den Austausch von strukturierten Informationen für die Verwendung in anderen Anwendungen oder zur Präsentation XML macht Informationen Web-fähig. XML Dokumente können so formuliert werden, dass sie automatisch verifiziert werden können. 32

33 Beispiel: Person.xml <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet type="text/xsl" href="person.xslt"?> <p:person xmlns:p="urn:person"> <p:first>arthur</p:first> <p:last>dent</p:last> </p:person> person first Arthur last Dent 33

34 A1.3: Darstellung mit XSL(T) Rendern der XML-Persondaten in HTML Jeder entwickelt sein eigenes XSL(T) Mindestanforderungen Listen darstellen (z.b. Hobbies) Bedingte Darstellung (z.b. für optionale Felder) Anzeigen von URLs und -Adressen als HTML-Links Einzelbearbeitung 34

35 XSL extensible Stylesheet Language Sprachfamilie: XSLT, XPath, XSL-FO XSL Transformation (XSLT): Transformation von XML-Dokumenten Typische Anwendungen: Umwandlung einer XML-Datei von einem Format ein ein anderes Konvertierung von XML nach (X)HTML Darstellung der Daten einer XML-Datei in einem Browser 35

36 XPath Sprache um Teile eines XML-Dokumentes zu adressieren Pfadausdrücke analog zu Pfaden in hierarischen Dateisystemen Beispiele /person /person/first /d/person[2]/last person first last Arthur Dent 36

37 Beispiel: Person.xslt <?xml version='1.0' encoding='utf-8'?> <xsl:stylesheet version="1.0" xmlns:xsl= " xmlns:p="urn:person" xmlns=" exclude-result-prefixes="p"> <xsl:output method="html" indent="yes" doctype-public="-//w3c//dtd XHTML 1.0 Strict//EN" doctype-system=" <xsl:template match="/"> <html xmlns=" xml:lang="en"> <head><title>person</title></head> <body><xsl:apply-templates /></body> </html> </xsl:template> <xsl:template match="p:person"> <p> <b>vorname:</b> <xsl:value-of select="p:first"/><br/> <b>name:</b> <xsl:value-of select="p:last"/> </p> </xsl:template> </xsl:stylesheet> 37

38 Beispiel: Transformation 38

39 A1.4: News-Feed auf Homepage Ergänzen der erstellten Gruppenhomepage um einen News-Feed im RSS-Format Der Feed soll in Zukunft für Bekanntgaben der Gruppen verwendet werden. Der Feed soll so eingebunden werden, dass ein Browser auf der Eingangsseite der Homepage ihn automatisch detektiert. Die Newsbeiträge sollen außerdem auf der Homepage sichtbar sein. RSS Version 2.0 verwenden mind. zwei Newsbeiträge abrufbar Gruppenbearbeitung 39

40 Really Simple Syndication (RSS) 40

41 Really Simple Syndication (RSS) 41

42 Really Simple Syndication (RSS) 42

43 Nützliche Browser-Plugins Nützliche Browser-Plugins für die Webanwendungsentwicklung: Firefox: HTML Validator Firebug Internet Explorer (nicht getestet) Internet Explorer Developer Tools 43