KIT – Universität des Landes Baden-Württemberg und
nationales Forschungszentrum in der Helmholtz-Gemeinschaft
INFORMATIONS...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
2 Webtechnologien im Überblick
Webanwendungen: Statische ...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
3
Webanwendungen: Dynamische Webseiten
Dynamische Webseit...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
4
Webanwendungen: Anwendungen
Webseiten im Stil von Deskt...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
5
Inhalt
Einordnung
Webtechnologien - Informatiosinstegra...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
6
Einordnung
Webtechnologien - Informatiosinstegration un...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
7
BEISPIEL EINER UMFANGREICHEN
WEBANWENDUNG
Ii4sm – Inter...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
8
Ii4sm Patient Recruitment System
Domäne Pharma, Medikam...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
9
Online Recruitment Anwendungen
Prozessschritte Online R...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
10
PRS Registry
Verwaltung klinischer Studien / Benutzern...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
11
PRS Coding (Excel)
Technisch: es werden hierarchische ...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
12
PRS Validation (1)
Passende Kandidaten werden gesammel...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
13
PRS Validation (2)
Detailansicht Patientenakte
Webtech...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
14
Blick auf PRS Webanwendung
Verschiedene Web-Frontends ...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
15
GRUNDLAGEN
BASISTECHNOLOGIEN IM WEB
Worauf basieren We...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
16
http: Transportprotokoll im WWW
http: HyperText Transf...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
17
Adressierung mit http-Protokoll
URI: Uniform Ressource...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
18
Beispiel Messages
HTTP GET Request:
HTTP POST Request:...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
19
Beispiel Messages
HTTP Response Statuscodes: 5 Klassen...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
20
HTTP Request
GET/POST
Web Server
Setzt http-Protokoll ...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
21
Browser
Programm zum Abruf und zur Darstellung von Inh...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
22
Cache & Cookies
HTTP Response
HTTP/1.1 200 OK
Date: Su...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
23
Formatierungsanweisung: (X)HTML (1)
Hyper Text Markup ...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
24
XHTML(2)
Browser parst (X)HTML und zeigt dieses im Bro...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
25
Kommunikation zwischen Browser und
Webserver
Browser
S...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
26
Cascading Style Sheets
Legt fest, wie ein besonders au...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
27
Skripte in einer Webseite: Java Script
JavaScript (!= ...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
28
Java Script Beispiel
Javascript in HTML Text eingebett...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
29
Zusammenfassung Grundlagen
http: Protokoll im Internet...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
30
DESKTOP VS.
WEBANWENDUNGEN
... Die Unterschiede versch...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
31
Desktop vs. Webanwendungen (I)
Desktop-Anwendungen (oh...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
32
Desktop vs. Webanwendungen (II)
Desktop-Anwendungen (m...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
33
Desktop vs. Webanwendungen (III)
Browserbasierte Weban...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
34
Entwicklung: Desktopanwendungen im Web
Webanwendungen ...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
35
WEB-TECHNOLOGIEN FÜR
KLEINERE WEBSEITENPROJEKTE
… hier...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
36
Merkmale kleiner Webseitenprojekte
Hoher Anteil an sta...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
37
Vorgehen zur Erstellung dynamischer Seiten
Anwendung:
...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
38
Serverseitige Anwendungslogik und
Datenhaltung
Servers...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
39
3) Aufbau der DB-
Verbindung bei
jedem Aufruf
Verbindu...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
40
Die Old-School Variante: CGI
Gateway an Web-Server als...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
41
Optimierung durch API-basierte Ansätze
client HTTP-
Se...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
42
Beispiel: Java Servlet
Programm wird in den Adressraum...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
43
Server-Side Scripting
In HTML-Seiten werden zusätzlich...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
44
Variante 1: Interpretation zur Laufzeit
Interpretierte...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
45
PHP-Beispiel
<html>
<head><title>Login</title></head>
...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
46
PHP für große Projekte: Wikipedia
Praxisbeispiel
Wikip...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
47
Variante 2: Kompilierte Skriptsprachen
Kompilierte Skr...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
48
Java Servlets & JSP-Beispiel
Servlet wird kompiliert, ...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
49
beispiel.jsp
<html>
<head>
<%@ page import= “java.util...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
50
JSP  Servlet
Import java.io.*; import javax.servlet.*...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
51
Clientseitige Anwendungslogik
Motivation
Die Funktione...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
52
Browser Plugins
Erweiterung des Browsers um neue Softw...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
53
JAVA Applets
Motivation
Über ein Browser soll eine Des...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
54
Schichtenarchitektur mit Skripten und Plugins
Daten
An...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
55
Zusammenfassung: kleine Webanwendungen
Für kleine Anwe...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
56
WEB-RAHMENWERKE FÜR
UMFANGREICHE
WEBSEITENPROJEKTE
.. ...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
57
Umfangreiche Webanwendungen
Beispiele:
Ebay, Google (M...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
58
Rahmenwerke über
Tapestry Echo JSF Cocoon Millstone Cl...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
59
Welches Rahmenwerk verwenden?
Hauptfrage bei einem neu...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
60
Hauptparameter bei umfangreichen Projekten
Trennung vo...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
61
Model View Controller
Dreischichtenarchitektur trennt
...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
62
Web-Rahmenwerke
Prinzip
meist: Model - View - Controll...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
63
Anforderungen an umfangreiche Webanwendungen
und Web-R...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
64
Mehrsprachigkeit
Webseiten umfangreicher Projekte müss...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
65
Anforderungen an umfangreiche Webanwendungen
und Web-R...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
66
Datenintegration und Eingaben
Umfangreiche Datenintegr...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
67
Anforderungen an umfangreiche Webanwendungen
und Web-R...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
68
Zugangsbeschränkungen für geschützte
Bereiche
Gängige ...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
69
Anwendungen mit Desktopstil – AJAX
AJAX (asynchronous ...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
70
AJAX in der Praxis
Beispiele
Auto-Complete für Suchanf...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
71
AJAX integriert in Web-Frameworks
AJAX stellt umfangre...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
72
Anforderungen an umfangreiche Webanwendungen
und Web-R...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
73
Auswahl des geeigneten Rahmenwerks
Zusammenfassung Hau...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
74
KONZEPTE VON WEB-
RAHMENWERKEN
 Google Web Toolkit (G...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
75
Google Web Toolkit (1)
Programmiersprache: JAVA
Widget...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
76
Google Web Toolkit (2)
Entwickler benötigen (fast) kei...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
77
Google Web Toolkit Bewertung
+ Trennung von Anwendung ...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
78
Weitere Web-Rahmenwerke und Technologien
Apache Wicket...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
79
Weitere Web-Rahmenwerke und Technologien
(kleine Auswa...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
80
Zusammenfassung
Umfangreiche Webanwendungen erfordern ...
Informationsintegration und Web-Portale
Wintersemester 2014/2015
81
Literatur
(eine Auswahl hier, Vielzahl an Tutorien im ...
Nächste SlideShare
Wird geladen in …5
×

02 Webtechnologien - Informatiosinstegration und Webportale

575 Aufrufe

Veröffentlicht am

Webtechnologien - Informatiosinstegration und Webportale
Beispiel einer umfangreichen Webanwendung

Grundlagen Webtechnologien
Desktop vs. Webanwendungen
Webtechnologien für kleinere Webanwendungen
Anforderungen bei der Erstellung umfangreicher
Webanwendungen
Konzepte von Webrahmenwerken

Veröffentlicht in: Bildung
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
575
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
3
Aktionen
Geteilt
0
Downloads
1
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

02 Webtechnologien - Informatiosinstegration und Webportale

  1. 1. KIT – Universität des Landes Baden-Württemberg und nationales Forschungszentrum in der Helmholtz-Gemeinschaft INFORMATIONSINTEGRATION UND WEBPORTALE www.kit.edu KIT – Universität des Landes Baden-Württemberg und nationales Forschungszentrum in der Helmholtz-Gemeinschaft INFORMATIONSINTEGRATION UND WEBPORTALE www.kit.edu KIT – Universität des Landes Baden-Württemberg und nationales Forschungszentrum in der Helmholtz-Gemeinschaft INFORMATIONSINTEGRATION UND WEBPORTALE www.kit.edu Klick-And-Bau Informationsintegration und Webportale INFORMATIONSINTEGRATION UND WEBPORTALE Vorlesung # 01, 27.10.2014 : Web-Technologien im Überblick Dr. Andreas Walter mail@awalter.info
  2. 2. Informationsintegration und Web-Portale Wintersemester 2014/2015 2 Webtechnologien im Überblick Webanwendungen: Statische Webseiten Statische Webseiten: z.B. für eine Ferienwohnung 27.10.2014
  3. 3. Informationsintegration und Web-Portale Wintersemester 2014/2015 3 Webanwendungen: Dynamische Webseiten Dynamische Webseiten: z.B. Portale zur Flugbuchung Webtechnologien im Überblick27.10.2014
  4. 4. Informationsintegration und Web-Portale Wintersemester 2014/2015 4 Webanwendungen: Anwendungen Webseiten im Stil von Desktop-Anwendungen Webtechnologien im Überblick27.10.2014
  5. 5. Informationsintegration und Web-Portale Wintersemester 2014/2015 5 Inhalt Einordnung Webtechnologien - Informatiosinstegration und Webportale Beispiel einer umfangreichen Webanwendung ii4sm – Patient Recruitment System Grundlagen Webtechnologien Desktop vs. Webanwendungen Webtechnologien für kleinere Webanwendungen Anforderungen bei der Erstellung umfangreicher Webanwendungen Konzepte von Webrahmenwerken Webtechnologien im Überblick27.10.2014
  6. 6. Informationsintegration und Web-Portale Wintersemester 2014/2015 6 Einordnung Webtechnologien - Informatiosinstegration und Webportale Informationsintegration und Webportale - Webportale • Früher mehr eine Linksammlung zu interessanten Seiten eines Themas, z.b. Yahoo! Webkatalog • Heutzutage: umfangreiche Webanwendungen, die unter einheitlichem Look & Feel z.b. Waren zu einem Bereich verschiedener Lieferanten anbieten. • Informationsintegration • Integration / Speicherung nötiger Daten für eine Webanwendung • Aufbereitung / Verständnis für Daten • Verarbeitung von Events Vorlesung heute: Webtechnologien • Konzepte zum Aufbau umfangreicher Webanwendungen • Ziel ist Auslieferung von Inhalten auf unterschiedliche Devices Webtechnologien im Überblick27.10.2014
  7. 7. Informationsintegration und Web-Portale Wintersemester 2014/2015 7 BEISPIEL EINER UMFANGREICHEN WEBANWENDUNG Ii4sm – International Institue for the Safety of Medicinces, Basel Dr. Andreas Walter, Head of Development http://www.ii4sm.com Ii4sm - Patient Recruitment System Webtechnologien im Überblick27.10.2014
  8. 8. Informationsintegration und Web-Portale Wintersemester 2014/2015 8 Ii4sm Patient Recruitment System Domäne Pharma, Medikamentensicherheit • Pharma entwickelt neue Medikamente, erhält Patent Muss dann beweisen, dass Wirkung vorhanden, u.a. keine tödlichen Nebenwirkungenen => klinische Studien, Studienprotokolle • Klinische Studien werden in u.a. Krankenhäusern durchgeführt, erfordert Auswahl geeigneter Patienten, z.b. mit Pneumonie : manueller Prozess Ii4sm Patient Recruitment System • Automatisierte Suche geeigneter Patienten (Patent pending) Fokus nun (Ausschnitt): Online Recruitment Webtechnologien im Überblick27.10.2014
  9. 9. Informationsintegration und Web-Portale Wintersemester 2014/2015 9 Online Recruitment Anwendungen Prozessschritte Online Recruitment 1. PRS Serverinstallation in Krankenhaus (Datenintegration, Big data) 2. PRS Registry: Verwaltung von klinischen Studien / Benutzern, Krankenhäusern 3. PRS Coding: Patientendaten sind kodiert mit Terminologien (Ontologien) => semantische Integration. Coding: Erstellung eines semantischen Studienprotokoll 4. PRS Search: Aktivierung von Studienprotokoll in Registry PRS startet regelmässige Suche von Patienten in Patientendaten (Anmerkung: hier auch sehr viel Datenanonymisieurng integriert!) 5. PRS Validation: Passende Kandidaten werden gesammelt und in PRS Validation GUI angezeigt. Treffer werden validiert, wenn passend, Patienten angefragt, ob sie an Studie teilnehmen wollen Webtechnologien im Überblick27.10.2014
  10. 10. Informationsintegration und Web-Portale Wintersemester 2014/2015 10 PRS Registry Verwaltung klinischer Studien / Benutzern, Krankenhäusern Webtechnologien im Überblick27.10.2014
  11. 11. Informationsintegration und Web-Portale Wintersemester 2014/2015 11 PRS Coding (Excel) Technisch: es werden hierarchische Protokolle erstellt, Verknüpfung mit boolschen Operatoren. Umsetzung zur Suche auf Index (erfordert natürlich zuerst Aufbau von Indexen. Verteilt, semantisch, skalierbar, ...) Webtechnologien im Überblick27.10.2014
  12. 12. Informationsintegration und Web-Portale Wintersemester 2014/2015 12 PRS Validation (1) Passende Kandidaten werden gesammelt und GUI angezeigt Webtechnologien im Überblick27.10.2014
  13. 13. Informationsintegration und Web-Portale Wintersemester 2014/2015 13 PRS Validation (2) Detailansicht Patientenakte Webtechnologien im Überblick27.10.2014
  14. 14. Informationsintegration und Web-Portale Wintersemester 2014/2015 14 Blick auf PRS Webanwendung Verschiedene Web-Frontends nötig, einheitlicher Login (Single Sign On), einheitliche Darstellung der Seiten (Look And Feel) Mehrsprachigkeit: aktuell u.a. Installationen in Türkei, Schweiz, Deutschland – Erweiterung in andere Sprachen Permanente Notwendigkeit neuer Funktionen Waterfal Model hier unmöglich. In Praxis: Scrum, Sprint basiert auf Featuer Driven Development Umfangreiche Erstellung von Tests nötig – Quality Management Nicht alles muss ein Web-GUI sein Fachpersonal zur Erstellung von Protokollen ist Excel gewohnt => Excel als Frontend, Transformatoren zur Erstellung von Suchanfragen Verwendetes Webrahmenwerk: Google Web Toolkit Gründe u.a. : schnelle GUIs, einfache Erlernbarkeit für Entwickler Webtechnologien im Überblick27.10.2014
  15. 15. Informationsintegration und Web-Portale Wintersemester 2014/2015 15 GRUNDLAGEN BASISTECHNOLOGIEN IM WEB Worauf basieren Webanwendungen? Webtechnologien im Überblick27.10.2014
  16. 16. Informationsintegration und Web-Portale Wintersemester 2014/2015 16 http: Transportprotokoll im WWW http: HyperText Transfer Protocol (aktuell Version 1.1) Von W3C standardisiertes Protokoll zum Abruf und Senden von Daten von/an einen Web-Server (RFC 2616) Ursprünglich: Webseiten, Grafiken Mittlerweile: auch für WebServices, Skype (Telefonie) etc. Grund: Firewalls müssen Port 80 freigeben, um Abruf von Webseiten zu ermöglichen Protokoll auf TCP/IP basierend mit 3 wichtigen Eigenschaften: Verbindungslos: nach Anfrage trennt Client die Verbindung u. wartet auf Server-Antwort; Server muss Verbindung wieder aufbauen (http 1.1 ermöglicht „keep alive“ – nur für z.B. Chats sinnvoll) Medienunabhängig: jede Art von Datentypen kann versendet werden, solange Client u. Server damit was anzufangen wissen Zustandslos: Jeder Abruf von Daten erfordert neue Verbindung; Client kann keine Informationen zw. Anfragen/über Webseiten hinweg behalten Bereich MESSAGE HEADER: Für Metainformationen (z.B. Anfragemethode, Statuscodes, Dokumenttyp, Länge des Dokuments), Authentifizierung Bereich MESSAGE BODY: folgt dem HEADER, enthält eigentlichen Inhalt Webtechnologien im Überblick27.10.2014
  17. 17. Informationsintegration und Web-Portale Wintersemester 2014/2015 17 Adressierung mit http-Protokoll URI: Uniform Ressource Identifier Identifizierung und Adressierung von Ressourcen <Schema>://[<Benutzer>[:<Passwort>]@] <Server>[:<Port>][/<Pfad>][?<Anfrage>][#<Fragment>] Davon abgeleitet: Uniform Ressource Locator (URL) für http z.B. http://www.fzi.de (bedeutet http://www.fzi.de:80/) httpRequest GET: senden von Parametern, z.B. über Adressfeld des Browsers: http://www.fzi.de/search.php?autor=Braun&ordering=newest – Einsatz: für Seiten, die über ein Skript generiert werden und gebookmarkt werden sollen – Daten als Teil der URL bleiben erhalten httpRequest POST: senden von umfangreichen Datenmengen, Authentifizierung aus Formular heraus. Datenübertragung im BODY Bereich von http Keine Speicherung der übertragenen Daten möglich Webtechnologien im Überblick27.10.2014
  18. 18. Informationsintegration und Web-Portale Wintersemester 2014/2015 18 Beispiel Messages HTTP GET Request: HTTP POST Request: GET /search.php?autor=Braun&ordering=newest HTTP/1.1 Host: www.fzi.de POST /search.php HTTP/1.1 Host: www.fzi.de Content-type: application/x-www-form-urlencoded Content-length: 27 autor=Braun&ordering=newest Zum Anschauen von http-Anfrage/Antworten: http://web-sniffer.net/ HEADER BODY Webtechnologien im Überblick27.10.2014 Anmerkung: https (secured protocoll) – zusätzlich Austausch von SSL Zertifikaten
  19. 19. Informationsintegration und Web-Portale Wintersemester 2014/2015 19 Beispiel Messages HTTP Response Statuscodes: 5 Klassen 1xx – informatorisch 118 Connection timed out 2xx – erfolgreich 200 OK 3xx – Umleitung 301 Moved Permanently 4xx – Client-Fehler 403 Forbidden 5xx – Server-Fehler 503 Service Unavailable HTTP/1.1 404 Not Found Date: Sun, 23 Oct 2011 10:23:03 GMT Server: Apache/2.2.3 (CentOS) Connection: close Content-Type: text/html; charset=iso-8859-1 HTTP/1.1 200 OK Date: Sun, 23 Oct 2011 10:23:03 GMT Server: Apache/2.2.3 (CentOS) Connection: close Content-Type: text/html; charset=utf-8 <html xml:lang="de" … </html> Webtechnologien im Überblick27.10.2014
  20. 20. Informationsintegration und Web-Portale Wintersemester 2014/2015 20 HTTP Request GET/POST Web Server Setzt http-Protokoll um, erreichbar über Port (z.B. 80 default) Bearbeitung von Client Anfragen, bearbeitet diese und gibt wenn möglich einen Inhalt zurück, sonst http-Fehlercode Schematischer Aufbau HTTP Response Error oder Content Client Darstellung Web Server Anfrageverarbeitung Statische Ressourcen Gateway Anwendungen Webtechnologien im Überblick27.10.2014
  21. 21. Informationsintegration und Web-Portale Wintersemester 2014/2015 21 Browser Programm zum Abruf und zur Darstellung von Inhalten aus dem Internet z.B. Abruf von Webseiten über das Protokoll http, zumeist auch andere Protokolle wie z.B. ftp (file transfer) integriert. W3C Konsortium definiert Standards, welche alle Webbrowser können soll(t)en HTML, CSS, JavaScript, XSLT Cache: dient zur Speicherung von häufig verwendeten Inhalten, reduziert Datentransfer mit Server Cookies: Über http können z.B. sessionrelevante Inhalte im Browser abgelegt werden, z.B. sessionID, Username, bevorzugte Sprache Plugins: Browser sind über Plugins erweiterbar, z.B. Flash Webtechnologien im Überblick27.10.2014
  22. 22. Informationsintegration und Web-Portale Wintersemester 2014/2015 22 Cache & Cookies HTTP Response HTTP/1.1 200 OK Date: Sun, 23 Oct 2011 10:23:03 GMT Server: Apache/2.2.3 (CentOS) Set-Cookie: d7ae737f0e17da5a64121bfb8fbe92c0=j4hcsnpjhg2fbfpucb6242a9t0; path=/ Set-Cookie: lang=deleted; expires=Sat, 23-Oct-2010 10:28:48 GMT; path=/ Expires: Mon, 1 Jan 2001 00:00:00 GMT Last-Modified: Sun, 23 Oct 2011 10:28:50 GMT Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0 Pragma: no-cache Connection: close Content-Type: text/html; charset=utf-8 <html xml:lang="de" … </html> Webtechnologien im Überblick27.10.2014
  23. 23. Informationsintegration und Web-Portale Wintersemester 2014/2015 23 Formatierungsanweisung: (X)HTML (1) Hyper Text Markup Language Textbasierte Formatierungssprache zur Bestimmung der Darstellung von Inhalten wie Texten, Bildern und Hyperlinks zu anderen Dokumenten in einem Browser <HTML> <HEAD> <TITLE>Forschungszentrum Informatik</TITLE> <HEAD> <BODY> <IMG SRC=„logo.jpg“> … <A HREF=„kontakt.html“>Kontakt</A><BR/> … </BODY> </HTML> Kopf: Metadaten Body: SeiteninhaltBild Link Vgl. XML: XHTML wohlgeformt (HTML nicht) Webtechnologien im Überblick27.10.2014
  24. 24. Informationsintegration und Web-Portale Wintersemester 2014/2015 24 XHTML(2) Browser parst (X)HTML und zeigt dieses im Browser an Weitere wichtige Elemente: Tabellen, Ebenen, Formulare Webtechnologien im Überblick27.10.2014
  25. 25. Informationsintegration und Web-Portale Wintersemester 2014/2015 25 Kommunikation zwischen Browser und Webserver Browser Server Anfrage, z.B. www.fzi.de/ Anfrageverarbeitung Laden von index.html Parsen von index.html Darstellung Anfrage logo.jpg Anfrageverarbeitung Laden von logo.jpg … User klickt auf Link, z.B.Kontakt Anfrage, z.B. www.fzi.de/ kontakt.html Webtechnologien im Überblick27.10.2014
  26. 26. Informationsintegration und Web-Portale Wintersemester 2014/2015 26 Cascading Style Sheets Legt fest, wie ein besonders ausgezeichneter Inhalt oder Bereich einer Webseite dargestellt werden soll. Trennung von Inhalt (HTML, XML) und Darstellung CSS als eigene Ressource ladbar (z.B. stylesmobile.css) Ermöglicht unterschiedliche Ausgabe der gleichen Seite für verschiedene Medien (Browser, Tablet, Mobiltelefon, …) Beispiel: HTML: <span class=„demostyle“>text mit css</span> CSS: .demostyle {color:black;background:red;font-weight: bold;} Ausgabe: text mit css Widerverwendung von Darstellung: CSS Webtechnologien im Überblick27.10.2014
  27. 27. Informationsintegration und Web-Portale Wintersemester 2014/2015 27 Skripte in einer Webseite: Java Script JavaScript (!= JAVA!!!) ist objektbasierte Skriptsprache, direkt in HTML integrierbar oder als Ressource integrierbar Ermöglicht die Client-seitige Ausführung von Skripten, durch Browser interpretiert und umgesetzt, z.B. Eventhandling, z.B. Validierung von Formulareingaben Interaktive Menüs, Drag & Drop Funktionen Aktualisierung von Seitenteilen In Verbindung mit XML und httpRequest  AJAX (später) Problem: JavaScript ist schwer wartbar Ist objektbasiert, aber nicht typisiert oder wirklich objektorientiert Schwer zu organisieren, debuggen und testen Verhalten von JavaScript in Browsern nicht immer einheitlich Wiederverwendung von Bibliotheken statt Selbsterstellung von Scripten wann immer möglich! Webtechnologien im Überblick27.10.2014
  28. 28. Informationsintegration und Web-Portale Wintersemester 2014/2015 28 Java Script Beispiel Javascript in HTML Text eingebettet <script type="text/javascript"> function checkFormValues() { if (pw1 != pw2) { alert(„reenter password and pw are not equal“)> return false; } } <form name=„loginForm“ onSubmit=„checkFormValues()“> PW: <Input type=„password“ name=„pw1“/> Reenter: <input type=„password“ name=„pw2“/> <input type=„submit“ value=„login“/> </form> Skript bewirkt: Überprüfung von eingegebenen Passwörtern Webtechnologien im Überblick27.10.2014
  29. 29. Informationsintegration und Web-Portale Wintersemester 2014/2015 29 Zusammenfassung Grundlagen http: Protokoll im Internet, Adressierung mit URLs WebServer: Serverseite, erweiterbar (z.B. Gateways) Browser: Clientseite, dient zur Darstellung von Inhalten (X)HTML: dient zur Formatierung von Webseiten Kommunikation: zustandslos, Request – Response Prinzip CSS: dient zur Trennung von Inhalt und Formatierung JavaScript: ermöglicht Ausführung von Skripten im Browser Webtechnologien im Überblick27.10.2014
  30. 30. Informationsintegration und Web-Portale Wintersemester 2014/2015 30 DESKTOP VS. WEBANWENDUNGEN ... Die Unterschiede verschwinden Webtechnologien im Überblick27.10.2014
  31. 31. Informationsintegration und Web-Portale Wintersemester 2014/2015 31 Desktop vs. Webanwendungen (I) Desktop-Anwendungen (ohne Netzwerkkommunikation) „Fat-Client / Rich-Client“: Anwendungslogik, Darstellung (und ggf. Datenhaltung) in einer Software + Zustandshaltung, z.B. geöffnetes Worddokument + Umfangreiche Menüfunktionen + Schnelle Reaktion auf Eingaben durch Aktualisierung von einzelnen Teilen einer Seite. + Darstellung: Programmierer können Standardbibliotheken verwenden (Swing (JAVA) /… ) - Meist sehr umfangreiche Installation erforderlich (in Firmen hierfür Kontakt mit SysAdmin nötig) - Updates nur manuell Webtechnologien im Überblick27.10.2014
  32. 32. Informationsintegration und Web-Portale Wintersemester 2014/2015 32 Desktop vs. Webanwendungen (II) Desktop-Anwendungen (mit Netzwerkkommunikation) Datenhaltung und (Teile der) Anwendungslogik ausgelagert, Software auf Client dient zur Darstellung + Weiterhin clientseitige Zustandshaltung (z.B. einmaliges Laden von Terminen  Darstellung als Kalender) Kommunikation mit Server nur zur Synchronisation + Client weniger umfangreich, Aktualisierung der Software bei jedem Start möglich (z.B. JAVA Web Start) - Weiterhin lokale Installationen notwendig - Entweder Interpreter (z.B. kompatible JAVA-Version) - oder Plugins (z.B. Flash Player) Webtechnologien im Überblick27.10.2014
  33. 33. Informationsintegration und Web-Portale Wintersemester 2014/2015 33 Desktop vs. Webanwendungen (III) Browserbasierte Webanwendungen: Webbrowser auf Clientseite wird zur Darstellung der Anwendung verwendet, Server für die Datenhaltung und Anwendungslogik + Keine Installation von Software auf Clientseite nötig (Sämtliche Betriebssysteme für PCs beinhalten Browser) „Web 1.0“ Stil: Eine Webseite wird komplett aktualisiert für jede Anfrage (statisch) - Ermöglicht keine Anwendungen mit „Desktop-feeling“ „Web 2.0“ Stil Aktualisierung von Seitenteilen möglich („Desktop-feeling“) + Ermöglicht die Erstellung von umfangreichen Webanwendungen im Stile einer Desktopanwendung Webtechnologien im Überblick27.10.2014
  34. 34. Informationsintegration und Web-Portale Wintersemester 2014/2015 34 Entwicklung: Desktopanwendungen im Web Webanwendungen werden Desktopanwendungen immer ähnlicher, profitieren aber von den Vorteilen schlanker Clients Verwendung des Browsers zur Darstellung, keine Installation von Plugins oder eigenständiger Software Client immer auf neuestem Stand Hauptgründe und Techniken hierfür: JavaScript und CSS AJAX (Details später) Breitbandzugänge (schnelles Laden von Seitenteilen möglich) Webtechnologien im Überblick27.10.2014
  35. 35. Informationsintegration und Web-Portale Wintersemester 2014/2015 35 WEB-TECHNOLOGIEN FÜR KLEINERE WEBSEITENPROJEKTE … hier ist „skripten“ noch sinnvoll Webtechnologien im Überblick27.10.2014
  36. 36. Informationsintegration und Web-Portale Wintersemester 2014/2015 36 Merkmale kleiner Webseitenprojekte Hoher Anteil an statischen (gleich bleibenden) Webseiten Merkmale der dynamischen Webseiten Anwendungslogik ändert sich kaum bis selten, Wartbarkeit ist somit keine Anforderung Gleichzeitige Teilnehmerzahl für Nutzung von dynamischen Seiten gering – Skalierbarkeit also keine Anforderung Vorgehen generell Design der Webseite und statische Seiten erstellen (Grafiker) Programmierer wählt eine geeignete Skriptsprache aus und erstellt Anwendung Webspace bei Internetprovider anmelden, das Sprache unterstützt Aufladen der Dateien (Daten) und Skripte: Fertig! Webtechnologien im Überblick27.10.2014
  37. 37. Informationsintegration und Web-Portale Wintersemester 2014/2015 37 Vorgehen zur Erstellung dynamischer Seiten Anwendung: Für eine geplante Feier sollen sich Freunde und Verwandte online anmelden, um Catering planen zu können 1. HTML Formular erstellen, das Datenfelder beinhaltet z.B. Name, Kontakt, Anzahl Personen, Auswahl Menüs, Vegetarisches Essen gewünscht, … 2. Skript erstellen, das diese Werte einliest 3. Anwendungslogik: überprüfe, ob Teilnehmer bereits registriert ist wenn nein, speichere Daten ab 4. Dynamisches Generieren einer Antwortseite z.B. „Danke für Deine Registrierung“ oder „Du bist bereits registriert, möchtest du Deine Daten ändern?“ Webtechnologien im Überblick27.10.2014
  38. 38. Informationsintegration und Web-Portale Wintersemester 2014/2015 38 Serverseitige Anwendungslogik und Datenhaltung Serverseitige HTML-Generierung Aufruf von HTML- generierender Anwendung Einbettung HTML- generierender Skriptteile CGI API-basiert interpretiert kompiliert SSI ASP PHP JSP Webtechnologien im Überblick27.10.2014
  39. 39. Informationsintegration und Web-Portale Wintersemester 2014/2015 39 3) Aufbau der DB- Verbindung bei jedem Aufruf Verbindungsaufbau Die Old-School Variante: CGI client HTTP- Server Datenbank CGI Skript / Programm 2) Aufruf des Skriptes mit Parametern Initialisierung bei jedem Aufruf 6) Skript übermittelt HTML und beendet sich Anfrage 1) Betätigung Submit-Button <FORM METHOD="POST" ACTION="http://www.fzi.de/ cgi-bin/my-form"> 5) Skript generiert HTML Antwort 7) HTTP Server Antwortet SQL Anfrage 4) Skript stellt Anfrage an DB Ergebnis CGI Webtechnologien im Überblick27.10.2014
  40. 40. Informationsintegration und Web-Portale Wintersemester 2014/2015 40 Die Old-School Variante: CGI Gateway an Web-Server als Erweiterung zur Integration von Skriptsprachen oder Programmen, z.B. Python, Perl + Einzelne Aufrufe konkurrieren sich nicht, da jeder Aufruf in eigenem Prozess - Ein Prozess pro Anfrage (Ressourcenintensiv) - Keine Speicherung des Zustands (CPU intensiv) - Für jede DB-Anfrage Verbindung aufbauen und trennen (zeitintensiv) - Keine Trennung von Präsentation und Anwendungslogik (Wartbarkeit für größere Projekte kaum möglich) Webtechnologien im Überblick27.10.2014
  41. 41. Informationsintegration und Web-Portale Wintersemester 2014/2015 41 Optimierung durch API-basierte Ansätze client HTTP- Server Datenbank HTML-Generierung Programm Aufruf des Programms, Parameterübergabe Initialisierung bei ersten Aufruf (einmalig) Verbindungsaufbau Verbindungsaufbau zur DB beim ersten Aufruf (einmalig) Beliebig viele SQL Anfragen SQL Anfragen Ergebnisse Zustand Anfrage Betätigung Submit-Button <FORM METHOD="POST" ACTION="http://www.fzi.de/ cgi-bin/my-form"> Antwort HTML-Rückgabe Webtechnologien im Überblick27.10.2014
  42. 42. Informationsintegration und Web-Portale Wintersemester 2014/2015 42 Beispiel: Java Servlet Programm wird in den Adressraum des Servers geladen + Programm startet einmalig, nur eine Datenbankverbindungen erforderlich + Zustandshaltung möglich, z.B. durch Session-IDs + Anfragen werden in Threads statt Prozessen ausgeführt (deutlich Ressourcenschonender) - Installation von speziellem Web-Server zur Ausführung von Java- Servlets nötig, z.B. Apache Tomcat (für kleine Projekte ungeeignet) - Keine Trennung von Präsentation und Anwendungslogik  Für kleine Anwendungen zu aufwendig, für große ungeeignet Webtechnologien im Überblick27.10.2014
  43. 43. Informationsintegration und Web-Portale Wintersemester 2014/2015 43 Server-Side Scripting In HTML-Seiten werden zusätzliche HTML-generierende Quellen integriert Datenbank Scripting HTML Scripting HTML Anwendungs- Logik Webtechnologien im Überblick27.10.2014
  44. 44. Informationsintegration und Web-Portale Wintersemester 2014/2015 44 Variante 1: Interpretation zur Laufzeit Interpretierte Skriptsprachen: z.B. PHP • Skript wird direkt in eine HTML-Seite geschrieben • Bei Anfrage einer Seite wird Skript durch Interpreter interpretiert und HTML-Text geschrieben • Generiertes Dokument wird an Server zurückgegeben + einfache Art, Skripte einzubinden + Interpreter ist nur ein einzelner Prozess - CPU-Last bei jedem Seitenabruf durch Neuinterpretation - Keine Trennung von Präsentation und Logik  Für kleinere Webanwendungen sehr gut geeignet <html> <?php ...> </html> Anwendung erstellen Interpreter HTML- Dokument Laufzeit Webtechnologien im Überblick27.10.2014
  45. 45. Informationsintegration und Web-Portale Wintersemester 2014/2015 45 PHP-Beispiel <html> <head><title>Login</title></head> <body> <h3>Your login data </h3> <br/> <table> <tr><td>Name:</td><td><?=$_GET[„username“]?></td></tr> <tr><td>Password:</td><td><?=$_GET[„pwd“]?></td></tr> </table> </body> </html> Client HTTP- Server Datenbank PHP-Modul SQL Anfragen Ergebnisse PHP-SkriptAntwort Anfrage Webtechnologien im Überblick27.10.2014
  46. 46. Informationsintegration und Web-Portale Wintersemester 2014/2015 46 PHP für große Projekte: Wikipedia Praxisbeispiel Wikipedia.org verwendet PHP für ein sehr umfangreiches Projekt. Prinzip: Statisches Schreiben von Webseiten Verhältnis von Seitenabruf zu Seitenänderung sehr gering Anwendungslogik vergleichsweise gering: Seitenänderungen annehmen und protokollieren  Statisches Schreiben von Webseiten reduziert CPU-/ Ressourcenlast: HTML-Seite muss nur geladen werden ! Wenn möglich, sollten aus dynamischen Seiten statische Seiten generiert werden, um die Skalierbarkeit zu erhöhen Webtechnologien im Überblick27.10.2014
  47. 47. Informationsintegration und Web-Portale Wintersemester 2014/2015 47 Variante 2: Kompilierte Skriptsprachen Kompilierte Skriptsprachen z.B. JSP Erfordert Installation von JAVA-fähigem Web-Server Kompilierung erzeugt Servlets zur Ausführung der JSP-Seiten + JSP 1.1 ermöglicht durch „Tags“ klarere Trennung von Darstellung und Anwendung; noch besser mit Expression Language ab JSP 2.0 - JSP-Programmierung entspricht nicht den meisten Programmierern bekannte GUI-Programmierung (z.B. event- Verarbeitung Tutorial: http://www.jsptutorial.org/ <html> <jsp:...> </html> Anwendung erstellen Compiler Übersetzungs- zeit (einmalig) Servletgenerierung HTML- Dokument Laufzeit Webtechnologien im Überblick27.10.2014
  48. 48. Informationsintegration und Web-Portale Wintersemester 2014/2015 48 Java Servlets & JSP-Beispiel Servlet wird kompiliert, sobald es in den Servlet-Container geladen wird Servlet wird beim ersten Bedarf instanziiert und initialisiert Servlet-Instanz wird einem Request zugeordnet. Nach Beendigung der Bearbeitung bleibt die Instanz für weitere Requests verfügbar. JSP wird zum Servlet kompiliert, sobald sie in den Servlet-Container geladen wird .. dann weiter wie beim Servlet Client HTTP-Server Datenbank Servlet Container JDBC Ergebnisse JSP 1 Antwort Anfrage Servlet 1 JSP 2 Bean 1 Bean 2 Webtechnologien im Überblick27.10.2014
  49. 49. Informationsintegration und Web-Portale Wintersemester 2014/2015 49 beispiel.jsp <html> <head> <%@ page import= “java.util.Date“%> <title><=request.getParameter("name");></title> </head> <body> <%=request.getParameter("text");%> <br/> Hello, Time is <%=new Date()%> </body> </html> Webtechnologien im Überblick27.10.2014
  50. 50. Informationsintegration und Web-Portale Wintersemester 2014/2015 50 JSP  Servlet Import java.io.*; import javax.servlet.*; import javax.servlet.http.*; public class BeispielServlet extends HttpServlet { public void doGet (HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException { RequestDispatcher dispatcher = req.getRequestDispatcher("/beispiel.jsp"); dispatcher.forward(req, res); } } Webtechnologien im Überblick27.10.2014
  51. 51. Informationsintegration und Web-Portale Wintersemester 2014/2015 51 Clientseitige Anwendungslogik Motivation Die Funktionen im Browser reichen für geplante Anwendung nicht aus, z.B. gleichzeitiges Aufladen von Bildern aus einem lokalen Ordner für ein Fotoalbum (Sicherheitsbeschränkungen von http erlauben immer nur eine Datei auszuwählen  Umständlich für Benutzer) Abspielen von Multimedia (z.B. Videos) Die Anwendung soll sehr dynamisch sein, z.B. Produktwerbung (viele bewegte Bildsequenzen) Die Anwendung soll wie eine Desktop-Anwendungen wirken Vor ein paar Jahren gab es noch kein AJAX ;-) Webtechnologien im Überblick27.10.2014
  52. 52. Informationsintegration und Web-Portale Wintersemester 2014/2015 52 Browser Plugins Erweiterung des Browsers um neue Softwarekomponente am Beispiel von Adobe Flash Einsatz: sehr dynamische Anwendungen, Multimedia, Desktop Integrierte Skriptsprache: Action Script Teile oder komplette Anwendungslogik wird integriert Kommunikation mit Server über http oder soap Starten einer Plugin-Anwendung 1. Benutzer muss jeweils kompatible Version des Plugins haben 2. Eigener HTML-Tag (<object><embed>) zum Starten des Plugins in einer Webseite 3. Komplettes Programm wird zum Client übertragen 4. Plugin lädt Programm und stellt es dar + Verhalten der Software exakt vorhersagbar (mit HTML problematisch) - Plugin, speziell aktuellste Version nicht auf allen Client PCs (z.B. beschränkte Installationsrechte auf Firmen-PSs) - Erfordert Spezialisten im Umgang mit der jeweiligen Programmiersprache - Meist Wartung schwierig Webtechnologien im Überblick27.10.2014
  53. 53. Informationsintegration und Web-Portale Wintersemester 2014/2015 53 JAVA Applets Motivation Über ein Browser soll eine Desktopanwendung geladen werden Anwendungslogik komplett integrierbar Theoretisch auch Datenhaltung direkt ansprechbar (praktisch nicht: aus Sicherheitsgründen – erfordert dies Öffnung eines Ports direkt zur Datenbank !) + Entwicklung der Anwendung komplett in JAVA möglich + Saubere Trennung von Darstellung und Anwendungslogik möglich + Wiederverwendbarkeit von Komponenten - vgl. Plugins: Installationen notwendig <object classid="java:example.class" codetype="application/java-vm" width=„400" height="400"></object> Webtechnologien im Überblick27.10.2014
  54. 54. Informationsintegration und Web-Portale Wintersemester 2014/2015 54 Schichtenarchitektur mit Skripten und Plugins Daten Anwendung Präsentation Direkte Kommunikation mit Datenbank (SQL über DB-spezifisches Protokoll) Kommunikation über Middleware-Protokoll (RMI, IIOP, SOAP) 1. Plug-in- Anwendung mit direkter Datenbank- kommuni- kation 2. Plugin- Anwendung mit Zugriff über Middleware HTTP-basiertes Protokoll 3. HTML- Client Webtechnologien im Überblick04.11.2013
  55. 55. Informationsintegration und Web-Portale Wintersemester 2014/2015 55 Zusammenfassung: kleine Webanwendungen Für kleine Anwendungen Skalierbarkeit, Wartbarkeit und Wiederverwendbarkeit stellen keine Anforderung dar Plugins ermöglichen Spezialanwendungen Alle gezeigten Skriptansätze ermöglichen die Generierung von dynamischen HTML-Seiten. Erstellung von Anwendungen mit Desktop-Charakter hier nicht nötig Generierung von statischen Seiten ermöglicht auch umfangreiche Anwendungen bei geringen Ressourcen Umsetzung der Anwendung also entscheidend von Vorkenntnissen der Programmierer und den installierten Interpretern / Gateways auf einem Web-Space Webtechnologien im Überblick27.10.2014
  56. 56. Informationsintegration und Web-Portale Wintersemester 2014/2015 56 WEB-RAHMENWERKE FÜR UMFANGREICHE WEBSEITENPROJEKTE .. „Mal schnell ein Skript schreiben“ reicht da nicht mehr! Webtechnologien im Überblick04.11.2013
  57. 57. Informationsintegration und Web-Portale Wintersemester 2014/2015 57 Umfangreiche Webanwendungen Beispiele: Ebay, Google (Mail), Facebook, … Eigenschaften Hoher Anteil an dynamischen Seiten Komplexer Seitenaufbau Umfangreiche Anwendungslogik, häufige Änderungen und Erweiterungen Verschiedene Ausgabesprachen, Ausgabemedien Zuverlässiger Betrieb auf unterschiedlichsten Browsern Erstellung mit Web-Rahmenwerk Rahmenwerk, das Erstellung einer umfangreichen Anwendung ermöglicht Webtechnologien im Überblick27.10.2014
  58. 58. Informationsintegration und Web-Portale Wintersemester 2014/2015 58 Rahmenwerke über Tapestry Echo JSF Cocoon Millstone Click OXF Struts Cassandra WebWork SOFIA AppFuse WebOnSwing Xoplon Groovy Flex Genie Wicket Chiba Jaffa JBanana GWT Smile MyFaces JWarp Facelets Melati Eclipse RAP Japple Helma Dinamica ZK Liste unvollständig. Webtechnologien im Überblick27.10.2014
  59. 59. Informationsintegration und Web-Portale Wintersemester 2014/2015 59 Welches Rahmenwerk verwenden? Hauptfrage bei einem neuen Projekt Welches Framework verwendet man? Generelle Faktoren Programmiersprache: abhängig vom Team Lizenz: abhängig von Budget, Infrastruktur (z.B. Alles in Microsoft .NET -> Lizenzen für Server, Software etc nötig) Webtechnologien im Überblick27.10.2014
  60. 60. Informationsintegration und Web-Portale Wintersemester 2014/2015 60 Hauptparameter bei umfangreichen Projekten Trennung von Anwendungslogik und Darstellung Gründe Code gemischt mit HTML schwer lesbar und wartbar (in Skriptsprachen und JSP der Fall) Änderung der Darstellung können unabhängig von der Anwendungslogik gemacht werden. Gängige Umsetzungen Id-Marken in HTML-Text, die später durch HTML-Text ersetzt werden – z.B. <span app:id=„codehere“/> Web-Rahmenwerk bietet Standardkomponenten an, die verwendet werden können (Tables, Pulldowns, etc.) Formatierung durch CSS Wünschenswert: eigene Komponenten erstellbar Webtechnologien im Überblick27.10.2014
  61. 61. Informationsintegration und Web-Portale Wintersemester 2014/2015 61 Model View Controller Dreischichtenarchitektur trennt Präsentation Anwendung Datenhaltung Model View Controller trennt ähnlich View: Darstellung Controller: Request / Response Verwaltung Model: Daten  Saubere Trennung von Darstellung und Anwendung  Wiederverwendbarkeit der Anwendungslogik  Im Einsatz bei SWING und den meisten Web-Frameworks Webtechnologien im Überblick27.10.2014
  62. 62. Informationsintegration und Web-Portale Wintersemester 2014/2015 62 Web-Rahmenwerke Prinzip meist: Model - View - Controller Es gibt Fülle von Rahmenwerken … Welches nimmt man? Ziele Zusammenstellung von Anforderungen an ein Rahmenwerk Zusätzliche Anforderungen durch „AJAX-Trend“ GWT also Rahmenwerk für umfangreiche Anwendungen Webtechnologien im Überblick27.10.2014
  63. 63. Informationsintegration und Web-Portale Wintersemester 2014/2015 63 Anforderungen an umfangreiche Webanwendungen und Web-Rahmenwerke (1) Regelmäßige Umstrukturierung, z.B. Umbau / Erweiterung der Seite: Erfordert strikte Trennung von Anwendungslogik und Darstellung Unterstützung von einheitlichem Look & Feel Templates, auch für verschiedene Ausgabearten (PC, Tablet, Mobile, …) Betrieb der Webseite in mehreren Sprachen Automatisches Füllen von Textstellen in Webseiten mit Ländersprache Webtechnologien im Überblick27.10.2014
  64. 64. Informationsintegration und Web-Portale Wintersemester 2014/2015 64 Mehrsprachigkeit Webseiten umfangreicher Projekte müssen meist in mehreren Sprachen erstellt werden Manuelle Erstellung von sprachspezifischen Seitenteilen ist zeit- und pflegeaufwendig, macht schwer wartbare Quelltexte Anforderung Framework sollte sprachspezifische Textbausteine automatisch in Webseiten einfügen können Gängige Umsetzung: i18n Standard Verwendung von Properties-Dateien für länderspezifische Sprachbausteine, z.B. (response_en.properties) Dynamisches Laden der jeweiligen Properties-Datei durch das Web- Framework für die Spracheinstellungen eines Nutzers Webtechnologien im Überblick27.10.2014
  65. 65. Informationsintegration und Web-Portale Wintersemester 2014/2015 65 Anforderungen an umfangreiche Webanwendungen und Web-Rahmenwerke (2) Hoher Anteil an dynamischen Seiten, z.B. für Suchergebnisse, Shop-Systeme, Warenkörbe, … Erstellung von umfangreicher Anwendungslogik Umfangreiche Datenintegration / umfangreiche Dateneingaben Erfordert Einbindung von Frameworks zur Datenintegration Integrierte Prüfung der Konsistenz von Benutzereingaben mit Datenmodell und Anwendungslogik Webtechnologien im Überblick27.10.2014
  66. 66. Informationsintegration und Web-Portale Wintersemester 2014/2015 66 Datenintegration und Eingaben Umfangreiche Datenintegration Erweiterung mit speziellen Frameworks mit Objektmapping Hybernate, Spring (Details: Vorlesung am 09.12.2013) Umfangreiche Dateneingaben wenn nötig Transaktionen, Speicherung, … Durch Web-Rahmenwerk selbst oder in Verbindung mit Erweiterungen: Prüfung der Konsistenz von Benutzereingaben, z.B. PLZ hat fünf Ziffern Emailadresse muss „@“ beinhalten Webtechnologien im Überblick27.10.2014
  67. 67. Informationsintegration und Web-Portale Wintersemester 2014/2015 67 Anforderungen an umfangreiche Webanwendungen und Web-Rahmenwerke (3) Zugangsbeschränkungen für geschützte Bereiche User-Sessions und Weiterleitung auf Login-Seite Schnelle Reaktionszeiten auf Benutzeranfragen Zustandshaltung von aktuell benötigten Daten / Kontext eines Nutzers Anwendungen mit Desktopstil Einfache Intergrierbarkeit von AJAX-Techniken Webtechnologien im Überblick27.10.2014
  68. 68. Informationsintegration und Web-Portale Wintersemester 2014/2015 68 Zugangsbeschränkungen für geschützte Bereiche Gängige Verfahren (da http zustandslos) Rahmenwerk generiert nach einem erfolgreichen Login ein „Session-ID String“. z.B. jsessionid=0EEC1A1BE9980145F81DF6B99418B027 Rahmenwerk hält ein Session-Objekt pro Benutzer zur Bindung von Objekten eines Benutzers Nutzeridentifikation: Session-id als cookie (falls von Browser akzeptiert), sonst als GET Parameter in allen URLs der Webseite Bei jedem Seitenaufruf: Rahmenwerk sucht nach vorhandenem Session-Objekt Falls nicht vorhanden: Weiterleitung auf Login-Seite (falls die aufgerufene Seite eine geschützte Seite ist) Webtechnologien im Überblick27.10.2014
  69. 69. Informationsintegration und Web-Portale Wintersemester 2014/2015 69 Anwendungen mit Desktopstil – AJAX AJAX (asynchronous JavaScript and XML) Ermöglicht die Aktualisierung von Seitenteilen Somit muss nicht immer die ganze Seite neu geladen werden und die Anwendung bekommt desktop-feeling Bestandteile: Über JavaScript wird ein „XMLHttpRequest“ an Server geschickt Server verarbeitet Request und gibt XML oder HTML zurück JavaScript nimmt Request entgegen und verarbeitet diesen, meist durch Aktualisierung eines Seitenbereichs (z.B. Layers)  Keine wirklich neue Technologie, sondern eine Kombination von bestehenden Techniken Webtechnologien im Überblick27.10.2014
  70. 70. Informationsintegration und Web-Portale Wintersemester 2014/2015 70 AJAX in der Praxis Beispiele Auto-Complete für Suchanfragen Pop-Up Fenster (in Seite integriert) Drag & Drop Direkte Fehlermeldungen auf Falscheingaben in Formularen Best Practices AJAX-Funktionen manuell zu erstellen ist zeitaufwendig und fehleranfällig (Nur für JavaScript Experten)  Verwendung eines geeigneten Rahmenwerks Bei Aktualisierung von Seitenteilen: Aktion dem Benutzer anzeigen (z.B. durch Ladebalken) AJAX nicht wahllos einsetzen! Webtechnologien im Überblick27.10.2014
  71. 71. Informationsintegration und Web-Portale Wintersemester 2014/2015 71 AJAX integriert in Web-Frameworks AJAX stellt umfangreiche Anforderungen an ein Web-Framework Ohne AJAX: es wird eine ganze Seite generiert und Komponenten, Zustände der Seite komplett geändert Mit AJAX: Webtechnologie sollte möglichst schnell und unkompliziert die Aktualisierung von Seitenteilen unterstützen Komplexität der JavaScript Aufrufe verbergen Methoden für AJAX-Calls anbieten Aktualisierung von Seitenteilen / Komponenten ermöglichen AJAX Unterstützung möglichst direkt in einem Framework (und nicht über viel „Hackerei“ eingebunden)  Für zeitgemäße Webanwendungen: AJAX Support in Framework zwingend erforderlich Webtechnologien im Überblick27.10.2014
  72. 72. Informationsintegration und Web-Portale Wintersemester 2014/2015 72 Anforderungen an umfangreiche Webanwendungen und Web-Rahmenwerke (4) Weitere Anforderungen • Objektorientierte Programmierung der Anwendung mit für Entwickler vertrauten Prinzipien (vgl. Swing: Datenbindung, Events, etc) • Schnelle Erlernbarkeit der Webtechnologie, Abstraktion von zugrundeliegenden Techniken (z.B. Details von http) • Durchführung von automatischen Funktionstests (vgl. JUnit Tests) Grund: manuelle Tests zeitaufwendig! Webtechnologien im Überblick27.10.2014
  73. 73. Informationsintegration und Web-Portale Wintersemester 2014/2015 73 Auswahl des geeigneten Rahmenwerks Zusammenfassung Hauptkriterien Erfüllung der genannten Anforderungen, Fokus auf AJAX-Support Erweiterbarkeit Trennung von Anwendung und Darstellung Lizenzierung: Proprietär vs. open-source Programmiersprache (im Folgenden: Focus auf JAVA) Zeitaufwand zur Erstellung von Web-Anwendungen Support: Qualität der Mailinglisten-Antwortzeit Webtechnologien im Überblick27.10.2014
  74. 74. Informationsintegration und Web-Portale Wintersemester 2014/2015 74 KONZEPTE VON WEB- RAHMENWERKEN  Google Web Toolkit (GWT)  Weitere Web-Rahmenwerke und Technologien Webtechnologien im Überblick27.10.2014
  75. 75. Informationsintegration und Web-Portale Wintersemester 2014/2015 75 Google Web Toolkit (1) Programmiersprache: JAVA Widget Library: Verhalten von GUI Komponenten wie in Swing programmierbar (Events, Container-Zuordnung, …) Verhalten der Komponenten wie in Applets (mittels AJAX), d.h. möglichst alles im Client Proprietärer Compiler generiert daraus sämtlichen XHTML und JavaScript Code für AJAX, welcher zum Client gesendet wird Saubere Trennung von Darstellung und Anwendungslogik Webtechnologien im Überblick27.10.2014
  76. 76. Informationsintegration und Web-Portale Wintersemester 2014/2015 76 Google Web Toolkit (2) Entwickler benötigen (fast) keine HTML-Kenntnisse (nur wenige Host-HTML Seiten werden benötigt) Design der Komponenten über CSS anpassbar (Aufruf von CSS über Host-HTML Seite) Spring, Hybernate für Datenhaltung integrierbar Für Anwendungen in der Cloud mit Google App Engine GWT auch nur zur GUI-Erstellung (Webseiten-Frontend) nutzbar Webtechnologien im Überblick27.10.2014
  77. 77. Informationsintegration und Web-Portale Wintersemester 2014/2015 77 Google Web Toolkit Bewertung + Trennung von Anwendung und Darstellung + Einfach erlernbar und schnell anwendbar + Stetig wachsende Community – guter Support - Getrennte Betrachtung von Client und Serverseite (Bereitstellung von Daten durch SOAP basierte RPC Calls) - Proprietärer Compiler - Generiertes JavaScript ist kryptisch (proprietär), Debugging nur in Java  Tutorial: https://developers.google.com/web-toolkit/gettingstarted Webtechnologien im Überblick27.10.2014
  78. 78. Informationsintegration und Web-Portale Wintersemester 2014/2015 78 Weitere Web-Rahmenwerke und Technologien Apache Wicket Offizielles Apache Projekt, open source Performante Event-getriebene Architektur Strikte Trennung von Anwendungsentwicklung mit JAVA Objekten und Seitendesign mit HTML Integration von Komponenten mit HTML Tags (<wicket:id=“..“ .. >) Umfangreicher AJAX-Support Allerdings AJAX-Calls seriell Spring, Hybernate für Datenhaltung integrierbar Keine Widget Library; GUI-Komponenten müssen selbst erstellt werden Hohe Serverlast – jeder Klick geht zum Server Webtechnologien im Überblick27.10.2014
  79. 79. Informationsintegration und Web-Portale Wintersemester 2014/2015 79 Weitere Web-Rahmenwerke und Technologien (kleine Auswahl) Eclipse Rich Application Client (RAP) Entwicklung von „richtigen“ Desktop-Anwendungen mit Eclipse Interessant für schnelle Portierung von Desktop-Anwendungen ins Web Tutorial: http://www.vogella.com/articles/EclipseRAP/article.html Alles nur mit XML / XSLT / … (eher nur noch im Backend) Webtechnologien im Überblick27.10.2014
  80. 80. Informationsintegration und Web-Portale Wintersemester 2014/2015 80 Zusammenfassung Umfangreiche Webanwendungen erfordern Web-Rahmenwerke Ermöglichen langfristige Wartung einer Anwendung Trennung von Darstellung und Anwendung wichtig Verdecken Komplexität der zugrunde liegenden Webtechnologien Umfangreiche Anforderungen an ein Web-Rahmenwerk Integration von AJAX in ein Rahmenwerk ermöglicht die Erstellung von Anwendungen mit Desktop-Charakter Auswahl des „richtigen“ Rahmenwerks Bei neuen Projekten: Prüfen, ob aktuelle Rahmenwerke die Anforderungen besser/direkter/schneller erfüllen können Webtechnologien im Überblick27.10.2014
  81. 81. Informationsintegration und Web-Portale Wintersemester 2014/2015 81 Literatur (eine Auswahl hier, Vielzahl an Tutorien im Web verfügbar) Buch: Web-Technologien von Heiko Wöhr von Dpunkt Verlag (Taschenbuch - Mai 2004) Buch: Web-Technologien: Grundlagen, Web-Programmierung, Suchmaschinen, Semantic Web Christoph Meinel, Harald Sack von x.media.press (2013) JSP http://www.jsptutorial.org/ AJAX http://www.w3schools.com/ajax/default.asp Google Web Toolkit http://code.google.com/webtoolkit/ Eclipse RAP http://www.eclipse.org/rap/ Webtechnologien im Überblick27.10.2014

×