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
&
2HTML
HTML
Browser, Client
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.
4CSS
HTML
Browser, Client
CSS
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.
6Wie kommen HTML und CSS in den Browser
HTML
Browser, Client
CSS
Webserver
xyz.html abc.css
http
?!
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.
8Wie kommt Javascript in den Browser?
HTML
Browser, Client
CSS
Webserver
xyz.html abc.css
http
Java-
script
?!
123.js
?!
9Wie kommt Javascript in den Browser?
Javascript wird als separate Datei vom Webserver geladen.
Oder Javascript ist schon im HTML-Quelltext eingebunden.
10Javascript
HTML
Browser, Client
CSS
Webserver
xyz.html abc.css
http
Java-
script
?!
11Javascript
Javascript ist eine Programmiersprache, um Abläufe (Prozesse) in
Internetseiten zu bringen.
Javascript wird durch im Browser ausgeführt (Laufzeitumgebung).
12jQuery
HTML
Browser, Client
CSS
Webserver
xyz.html abc.css
http
Java-
script
?!
123.js
?!
jQuery
13jQuery
jQuery ist eine (beliebte) von viele Bibliotheken für Javascript.
jQuery vermindert Tipparbeit.
jQuery schafft zusätzliche Abhängigkeiten.
14PHP
HTML
Browser, Client
CSS
Webserver
http
Java-
script
jQuery
PHP a1x.php
Formular
Antwort als HTML
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.
16Alternative zu PHP: Javascript auf dem Server
HTML
Browser, Client
CSS
Webserver
http
Java-
script
jQuery
PHP
node.js
Java-
script
17Alternative zu PHP: Javascript auf dem Server
Mit Javascript lassen sich auch Serverprogramme schreiben.
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
19Alternative Clients: .NET oder Java
HTML
Browser, Client
CSS
Webserver
http
Java-
script
jQuery
PHP
nodej.s
Java-
script
.NET Java
.NET
JavaJEE
20Alternative Clients: .NET oder Java
Mit dem .NET-Framework (Windows) und Java (Linux, Mac OS, Windows)
lassen sich Clients für webbasierte Anwendungen erstellen.
21Kommunikationsarchitekturen auf http
HTML
Browser, Client
CSS
Webserver
http
Java-
script
jQuery
PHP
nodej.s
Java-
script
.NET Java
.NET
JavaJEE
REST
SOAP
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.
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
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()
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.
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
27Szenarien für Webanwendungen
Webanwendungen: bevorzugt einfache, native Kommunikationsstrukturen
über REST.
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
29Szenarien für Komponentenbasierte Entwicklung mit .NET
.NET: bevorzugt einfache, native Kommunikationsstrukturen über REST.
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
31Szenarien für Game Design und Game Programmierung
Game Design und Programmierung: auch „echtzeitfähige“ Kommunikation
erforderlich.
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 ...
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(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?

Webtechnologien - ein kurzer Überblick

  • 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.
  • 3.
    3HTML 1. Hypertext MarkupLanguage (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.
  • 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 HTMLund CSS in den Browser HTML Browser, Client CSS Webserver xyz.html abc.css http ?!
  • 7.
    7Wie kommen HTMLund 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 Javascriptin den Browser? HTML Browser, Client CSS Webserver xyz.html abc.css http Java- script ?! 123.js ?!
  • 9.
    9Wie kommt Javascriptin den Browser? Javascript wird als separate Datei vom Webserver geladen. Oder Javascript ist schon im HTML-Quelltext eingebunden.
  • 10.
  • 11.
    11Javascript Javascript ist eineProgrammiersprache, um Abläufe (Prozesse) in Internetseiten zu bringen. Javascript wird durch im Browser ausgeführt (Laufzeitumgebung).
  • 12.
  • 13.
    13jQuery jQuery ist eine(beliebte) von viele Bibliotheken für Javascript. jQuery vermindert Tipparbeit. jQuery schafft zusätzliche Abhängigkeiten.
  • 14.
  • 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: .NEToder Java HTML Browser, Client CSS Webserver http Java- script jQuery PHP nodej.s Java- script .NET Java .NET JavaJEE
  • 20.
    20Alternative Clients: .NEToder 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 SimpleObject 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 Kommunikationmit 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 Kommunikationmit 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 KomponentenbasierteEntwicklung 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 KomponentenbasierteEntwicklung mit .NET .NET: bevorzugt einfache, native Kommunikationsstrukturen über REST.
  • 30.
    30Szenarien für GameDesign 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 GameDesign 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 einerster 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. WelcheKomponenten 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?