1.
1
Prof. Dr. rer. nat. Claus Brell, Wirtschaftsinformatik, Forschungsinstitut GEMIT
(Geschäftsprozessmanagement & IT), Kompetenzzentrum CLAVIS
(Informationssicherheit) Hochschule Niederrhein.
Mail: claus.brell@hs-niederrhein,de , Twitter: https://twitter.com/clausbrell
Web: https://cbrell.de , https://cbrell.de/naturwatch , http://claus-brell.de
Webtechnologien
&

2.
2HTML
HTML
Browser, Client

3.
3HTML
1. Hypertext Markup Language (HTML) ist eine Auszeichnungssprache für
Textdateien im Internet.
2. HTML wird durch den Browser gerendert und grafisch aufbereitet
dargestellt.
3. HTML beschreibt die Struktur eines Internet-Dokuments.
4. Das Aussehen wird mit CSS festgelegt.

4.
4CSS
HTML
Browser, Client
CSS

5.
5CSS
Cascading Style Sheets (CSS) ist eine Auszeichnungssprache für
Textdateien im Internet.
CSS wird durch den Browser interpretiert.
CSS beschreibt, wie Elemente eines HTML-Dokuments aussehen.
Mit HTML werden Inhalte strukturiert.
Mit CSS wird der strukturierte Inhalt formatiert.

6.
6Wie kommen HTML und CSS in den Browser
HTML
Browser, Client
CSS
Webserver
xyz.html abc.css
http
?!

7.
7Wie kommen HTML und CSS in den Browser
HTML-Dateien liegen als Textdateien auf dem Webserver.
HTML-Dateien werden über http vom Webserver geladen.
CSS-Dateien ebenso.
Oder CSS ist in HTML mit in eine Datei aufgenommen.

8.
8Wie kommt Javascript in den Browser?
HTML
Browser, Client
CSS
Webserver
xyz.html abc.css
http
Java-
script
?!
123.js
?!

9.
9Wie kommt Javascript in den Browser?
Javascript wird als separate Datei vom Webserver geladen.
Oder Javascript ist schon im HTML-Quelltext eingebunden.

10.
10Javascript
HTML
Browser, Client
CSS
Webserver
xyz.html abc.css
http
Java-
script
?!

11.
11Javascript
Javascript ist eine Programmiersprache, um Abläufe (Prozesse) in
Internetseiten zu bringen.
Javascript wird durch im Browser ausgeführt (Laufzeitumgebung).

12.
12jQuery
HTML
Browser, Client
CSS
Webserver
xyz.html abc.css
http
Java-
script
?!
123.js
?!
jQuery

13.
13jQuery
jQuery ist eine (beliebte) von viele Bibliotheken für Javascript.
jQuery vermindert Tipparbeit.
jQuery schafft zusätzliche Abhängigkeiten.

14.
14PHP
HTML
Browser, Client
CSS
Webserver
http
Java-
script
jQuery
PHP a1x.php
Formular
Antwort als HTML

15.
15PHP
Private Homepage Tools / PHP:
Hypertext Preprocessor (PHP) ist eine Scriptsprache, die Abläufe in Internet-
Anwendungen bringt.
PHP wird auf dem Webservers ausgeführt.
Javascript ist browserbasiert, PHP ist serverbasiert.

16.
16Alternative zu PHP: Javascript auf dem Server
HTML
Browser, Client
CSS
Webserver
http
Java-
script
jQuery
PHP
node.js
Java-
script

17.
17Alternative zu PHP: Javascript auf dem Server
Mit Javascript lassen sich auch Serverprogramme schreiben.

18.
18Alternative zu PHP: .NET oder Java auf dem Server
HTML
Browser, Client
CSS
Webserver
http
Java-
script
jQuery
PHP
nodej.s
Java-
script
.NET
JavaJEE

19.
19Alternative Clients: .NET oder Java
HTML
Browser, Client
CSS
Webserver
http
Java-
script
jQuery
PHP
nodej.s
Java-
script
.NET Java
.NET
JavaJEE

20.
20Alternative Clients: .NET oder Java
Mit dem .NET-Framework (Windows) und Java (Linux, Mac OS, Windows)
lassen sich Clients für webbasierte Anwendungen erstellen.

21.
21Kommunikationsarchitekturen auf http
HTML
Browser, Client
CSS
Webserver
http
Java-
script
jQuery
PHP
nodej.s
Java-
script
.NET Java
.NET
JavaJEE
REST
SOAP

22.
22Kommunikationsarchitekturen auf http
Simple Object Access Protocol (SOAP) ist ein Protokoll und ein (XML-
basiertes) Nachrichten-Design für die Kommunikation oberhalb eines
Anwendungsprotokolls.
„Simple“ ist irreführend, SOAP ist nicht einfach.
Representational State Transfer (REST) ist eine einfaches
Programmierparadigma für webbasierte Anwendungen.

23.
23Kommunikationsarchitekturen unterhalb http: Websockets
HTML
Browser, Client
CSS
Webserver
http
Java-
script
jQuery
PHP
node.js
Java-
script
.NET Java
.NET
JavaJEE
REST
SOAP
TCP / IP
Websockets

24.
24AJAX: asynchrone Kommunikation mit Webservices
HTML
Browser, Client
CSS
Webserver
http
Java-
script
jQuery
PHP
node.js
Java-
script
.NET Java
.NET
JavaJEE
REST
SOAP
TCP / IP
Websockets
XMLHttpRequest()

25.
25AJAX: asynchrone Kommunikation mit Webservices
Asynchronous JavaScript and XML (AJAX) ist ein Konzept der asynchronen
Kommunikation zwischen Browser und Webserver über http.
XML kann, muss aber nicht.
Häufig: JSON.

26.
26Szenarien für Webanwendungen
HTML
Browser, Client
CSS
Webserver
http
Java-
script
jQuery
PHP
node.js
Java-
script
.NET Java
.NET
JavaJEE
REST
SOAP
TCP / IP
Websockets

27.
27Szenarien für Webanwendungen
Webanwendungen: bevorzugt einfache, native Kommunikationsstrukturen
über REST.

28.
28Szenarien für Komponentenbasierte Entwicklung mit .NET
HTML
Browser, Client
CSS
Webserver
http
Java-
script
jQuery
PHP
node.js
Java-
script
.NET Java
.NET
JavaJEE
REST
SOAP
TCP / IP
Websockets

29.
29Szenarien für Komponentenbasierte Entwicklung mit .NET
.NET: bevorzugt einfache, native Kommunikationsstrukturen über REST.

30.
30Szenarien für Game Design und Game Programmierung
HTML
Browser, Client
CSS
Webserver
http
Java-
script
jQuery
PHP
node.js
Java-
script
.NET Java
.NET
JavaJEE
REST
SOAP
TCP / IP
Websockets

31.
31Szenarien für Game Design und Game Programmierung
Game Design und Programmierung: auch „echtzeitfähige“ Kommunikation
erforderlich.

32.
32Lesenswert
1. HTML: de.selfhtml.org
2. CSS, was ist das? http://de.html.net/tutorials/css/lesson1.php
3. CSS lernen: http://www.css4you.de
4. Javascript, was ist das?
https://developer.mozilla.org/de/docs/Web/JavaScript
5. Javascript lernen: bei Google nach „javascript lernen“ suchen ...

33.
33Lesenswert
6. Javascript ein erster Einstieg: http://www.webworker.club/javascript-
lernen-tutorial-teil-1-einstieg-in-die-programmiersprache/
7. jQuery lernen: https://www.w3schools.com/jquery/default.asp
8. PHP, was ist das? https://de.wikipedia.org/wiki/PHP
9. PHP lernen: http://www.selfphp.de/
10. Websockets in PHP: https://entwickler.de/online/websocket-
implementierung-mit-php-132012.html
11. AJAX Einführung: https://www.html-seminar.de/ajax-einfuehrung.htm

34.
34(Verständnis-) Fragen
1. Welche Komponenten für webbasierte Anwendungen (auch Spiele) gibt es für den
Client-Rechner (Frontend)?
2. Welche Komponenten für webbasierte Anwendungen (auch Spiele) gibt es für den
Sever-Rechner (Backend)?
3. Was ist der Unterschied zwischen pull und push bei der Datenkommunikation?
4. Was sind die beiden wesentlichen Unterschiede zwischen REST und
Websockets?
5. Welchen Vorteil bietet die Kommunikation über das Anwendungsprotokoll HTTP?