SlideShare ist ein Scribd-Unternehmen logo
1 von 34
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?

Weitere ähnliche Inhalte

Ähnlich wie Webtechnologien - ein kurzer Überblick

Webtechnologien Grundlagen und Auswahl geeigneter Web Rahmenwerke
Webtechnologien Grundlagen und Auswahl geeigneter Web RahmenwerkeWebtechnologien Grundlagen und Auswahl geeigneter Web Rahmenwerke
Webtechnologien Grundlagen und Auswahl geeigneter Web Rahmenwerkeadoubleu
 
Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Jürg Stuker
 
HTML+CSS für Einsteiger - Vom Doctype zum Style
HTML+CSS für Einsteiger - Vom Doctype zum StyleHTML+CSS für Einsteiger - Vom Doctype zum Style
HTML+CSS für Einsteiger - Vom Doctype zum StyleGino Cremer
 
Internet-Geschichte und Webtechnologie (Historisches Dokument)
Internet-Geschichte und Webtechnologie (Historisches Dokument)Internet-Geschichte und Webtechnologie (Historisches Dokument)
Internet-Geschichte und Webtechnologie (Historisches Dokument)Eric Eggert
 
MVHS: So realisieren Sie Ihren Webauftritt erfolgreich
MVHS: So realisieren Sie Ihren Webauftritt erfolgreichMVHS: So realisieren Sie Ihren Webauftritt erfolgreich
MVHS: So realisieren Sie Ihren Webauftritt erfolgreichThomas Kraehe
 
Event-Streaming in Echtzeit: Der MongoDB-Kafka-Connector in Action!
Event-Streaming in Echtzeit: Der MongoDB-Kafka-Connector in Action!Event-Streaming in Echtzeit: Der MongoDB-Kafka-Connector in Action!
Event-Streaming in Echtzeit: Der MongoDB-Kafka-Connector in Action!confluent
 
Good by Server... Hello Client!
Good by Server... Hello Client!Good by Server... Hello Client!
Good by Server... Hello Client!Sandro Sonntag
 
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?adesso AG
 
Anforderungsanalsyse - Prototyping mit JavaScript
Anforderungsanalsyse - Prototyping mit JavaScriptAnforderungsanalsyse - Prototyping mit JavaScript
Anforderungsanalsyse - Prototyping mit JavaScriptChristian Baranowski
 
Top 10 Internet Trends 2001
Top 10 Internet Trends 2001Top 10 Internet Trends 2001
Top 10 Internet Trends 2001Jürg Stuker
 
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...Karionis
 
Push-Benachrichtigungen in SharePoint via SignalR
Push-Benachrichtigungen in SharePoint via SignalRPush-Benachrichtigungen in SharePoint via SignalR
Push-Benachrichtigungen in SharePoint via SignalRChristian Heindel
 
Entwicklung mit Volt MX und Co. | Teil 1
Entwicklung mit Volt MX und Co. | Teil 1Entwicklung mit Volt MX und Co. | Teil 1
Entwicklung mit Volt MX und Co. | Teil 1DNUG e.V.
 
Einführung in .NET
Einführung in .NETEinführung in .NET
Einführung in .NETAndreas Heil
 
2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend ArchitekturNico Steiner
 

Ähnlich wie Webtechnologien - ein kurzer Überblick (20)

Webtechnologien Grundlagen und Auswahl geeigneter Web Rahmenwerke
Webtechnologien Grundlagen und Auswahl geeigneter Web RahmenwerkeWebtechnologien Grundlagen und Auswahl geeigneter Web Rahmenwerke
Webtechnologien Grundlagen und Auswahl geeigneter Web Rahmenwerke
 
Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Top 10 Internet Trends 2006
Top 10 Internet Trends 2006
 
HTML+CSS für Einsteiger - Vom Doctype zum Style
HTML+CSS für Einsteiger - Vom Doctype zum StyleHTML+CSS für Einsteiger - Vom Doctype zum Style
HTML+CSS für Einsteiger - Vom Doctype zum Style
 
Internet-Geschichte und Webtechnologie (Historisches Dokument)
Internet-Geschichte und Webtechnologie (Historisches Dokument)Internet-Geschichte und Webtechnologie (Historisches Dokument)
Internet-Geschichte und Webtechnologie (Historisches Dokument)
 
MVHS: So realisieren Sie Ihren Webauftritt erfolgreich
MVHS: So realisieren Sie Ihren Webauftritt erfolgreichMVHS: So realisieren Sie Ihren Webauftritt erfolgreich
MVHS: So realisieren Sie Ihren Webauftritt erfolgreich
 
Event-Streaming in Echtzeit: Der MongoDB-Kafka-Connector in Action!
Event-Streaming in Echtzeit: Der MongoDB-Kafka-Connector in Action!Event-Streaming in Echtzeit: Der MongoDB-Kafka-Connector in Action!
Event-Streaming in Echtzeit: Der MongoDB-Kafka-Connector in Action!
 
Kevin Hofer
Kevin HoferKevin Hofer
Kevin Hofer
 
Good by Server... Hello Client!
Good by Server... Hello Client!Good by Server... Hello Client!
Good by Server... Hello Client!
 
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
 
CMS Kurs-Glossar
CMS Kurs-GlossarCMS Kurs-Glossar
CMS Kurs-Glossar
 
Anforderungsanalsyse - Prototyping mit JavaScript
Anforderungsanalsyse - Prototyping mit JavaScriptAnforderungsanalsyse - Prototyping mit JavaScript
Anforderungsanalsyse - Prototyping mit JavaScript
 
Top 10 Internet Trends 2001
Top 10 Internet Trends 2001Top 10 Internet Trends 2001
Top 10 Internet Trends 2001
 
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
 
Push-Benachrichtigungen in SharePoint via SignalR
Push-Benachrichtigungen in SharePoint via SignalRPush-Benachrichtigungen in SharePoint via SignalR
Push-Benachrichtigungen in SharePoint via SignalR
 
Entwicklung mit Volt MX und Co. | Teil 1
Entwicklung mit Volt MX und Co. | Teil 1Entwicklung mit Volt MX und Co. | Teil 1
Entwicklung mit Volt MX und Co. | Teil 1
 
Webtechnologien - Technische Anforderungen an Informationssysteme
Webtechnologien - Technische Anforderungen an InformationssystemeWebtechnologien - Technische Anforderungen an Informationssysteme
Webtechnologien - Technische Anforderungen an Informationssysteme
 
Ajax, Comet & Co.
Ajax, Comet & Co.Ajax, Comet & Co.
Ajax, Comet & Co.
 
Einführung in .NET
Einführung in .NETEinführung in .NET
Einführung in .NET
 
2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur
 
Barrierefreiheit
BarrierefreiheitBarrierefreiheit
Barrierefreiheit
 

Mehr von Claus Brell

Vortrag Substitution Beteiligung KI 200911
Vortrag Substitution Beteiligung KI 200911 Vortrag Substitution Beteiligung KI 200911
Vortrag Substitution Beteiligung KI 200911 Claus Brell
 
Poster brell-kuron-muelder-ki-substituiert-akteurbeteiligung-lwda2020
Poster brell-kuron-muelder-ki-substituiert-akteurbeteiligung-lwda2020Poster brell-kuron-muelder-ki-substituiert-akteurbeteiligung-lwda2020
Poster brell-kuron-muelder-ki-substituiert-akteurbeteiligung-lwda2020Claus Brell
 
Empirische Methoden 3 Auswertung 200502
Empirische Methoden 3 Auswertung 200502Empirische Methoden 3 Auswertung 200502
Empirische Methoden 3 Auswertung 200502Claus Brell
 
Empirische Methoden 1 Erkenntnistheorie 200501
Empirische Methoden 1 Erkenntnistheorie 200501Empirische Methoden 1 Erkenntnistheorie 200501
Empirische Methoden 1 Erkenntnistheorie 200501Claus Brell
 
Wissensmanagement
WissensmanagementWissensmanagement
WissensmanagementClaus Brell
 
Informationssicherheitsmanagment
InformationssicherheitsmanagmentInformationssicherheitsmanagment
InformationssicherheitsmanagmentClaus Brell
 
Projektmanagement 200420
Projektmanagement 200420Projektmanagement 200420
Projektmanagement 200420Claus Brell
 
Funktionshierarchiebaum 200409
Funktionshierarchiebaum 200409Funktionshierarchiebaum 200409
Funktionshierarchiebaum 200409Claus Brell
 
Zieldiagramm 200409
Zieldiagramm 200409Zieldiagramm 200409
Zieldiagramm 200409Claus Brell
 
Baumstruktur 200409
Baumstruktur 200409Baumstruktur 200409
Baumstruktur 200409Claus Brell
 
Flussdiagramme 200407
Flussdiagramme 200407Flussdiagramme 200407
Flussdiagramme 200407Claus Brell
 
2 1b-prozessmodellierung-eepk-erweiterung-200406
2 1b-prozessmodellierung-eepk-erweiterung-2004062 1b-prozessmodellierung-eepk-erweiterung-200406
2 1b-prozessmodellierung-eepk-erweiterung-200406Claus Brell
 
2 1a-prozessmodellierung-epk-einfuehrung-200406
2 1a-prozessmodellierung-epk-einfuehrung-2004062 1a-prozessmodellierung-epk-einfuehrung-200406
2 1a-prozessmodellierung-epk-einfuehrung-200406Claus Brell
 
Topologien verstehen und erstellen - Methoden der Wirtschaftsinformatik-200329
Topologien verstehen und erstellen - Methoden der Wirtschaftsinformatik-200329Topologien verstehen und erstellen - Methoden der Wirtschaftsinformatik-200329
Topologien verstehen und erstellen - Methoden der Wirtschaftsinformatik-200329Claus Brell
 
Organigramm - Modellierung mit ARIS 200327
Organigramm - Modellierung mit ARIS 200327Organigramm - Modellierung mit ARIS 200327
Organigramm - Modellierung mit ARIS 200327Claus Brell
 
Leichter imkern-191110
Leichter imkern-191110 Leichter imkern-191110
Leichter imkern-191110 Claus Brell
 
Wirtschaftsinformatik Basics für Betriebswirte und Ingenieure
Wirtschaftsinformatik Basics für Betriebswirte und IngenieureWirtschaftsinformatik Basics für Betriebswirte und Ingenieure
Wirtschaftsinformatik Basics für Betriebswirte und IngenieureClaus Brell
 
Raspberry Pi Lehrerworkshop
Raspberry Pi LehrerworkshopRaspberry Pi Lehrerworkshop
Raspberry Pi LehrerworkshopClaus Brell
 
Motivationstheorien 190524
Motivationstheorien 190524Motivationstheorien 190524
Motivationstheorien 190524Claus Brell
 
Vorgehensmodelle - Methoden der Wirtschaftsinformatik
Vorgehensmodelle - Methoden der WirtschaftsinformatikVorgehensmodelle - Methoden der Wirtschaftsinformatik
Vorgehensmodelle - Methoden der WirtschaftsinformatikClaus Brell
 

Mehr von Claus Brell (20)

Vortrag Substitution Beteiligung KI 200911
Vortrag Substitution Beteiligung KI 200911 Vortrag Substitution Beteiligung KI 200911
Vortrag Substitution Beteiligung KI 200911
 
Poster brell-kuron-muelder-ki-substituiert-akteurbeteiligung-lwda2020
Poster brell-kuron-muelder-ki-substituiert-akteurbeteiligung-lwda2020Poster brell-kuron-muelder-ki-substituiert-akteurbeteiligung-lwda2020
Poster brell-kuron-muelder-ki-substituiert-akteurbeteiligung-lwda2020
 
Empirische Methoden 3 Auswertung 200502
Empirische Methoden 3 Auswertung 200502Empirische Methoden 3 Auswertung 200502
Empirische Methoden 3 Auswertung 200502
 
Empirische Methoden 1 Erkenntnistheorie 200501
Empirische Methoden 1 Erkenntnistheorie 200501Empirische Methoden 1 Erkenntnistheorie 200501
Empirische Methoden 1 Erkenntnistheorie 200501
 
Wissensmanagement
WissensmanagementWissensmanagement
Wissensmanagement
 
Informationssicherheitsmanagment
InformationssicherheitsmanagmentInformationssicherheitsmanagment
Informationssicherheitsmanagment
 
Projektmanagement 200420
Projektmanagement 200420Projektmanagement 200420
Projektmanagement 200420
 
Funktionshierarchiebaum 200409
Funktionshierarchiebaum 200409Funktionshierarchiebaum 200409
Funktionshierarchiebaum 200409
 
Zieldiagramm 200409
Zieldiagramm 200409Zieldiagramm 200409
Zieldiagramm 200409
 
Baumstruktur 200409
Baumstruktur 200409Baumstruktur 200409
Baumstruktur 200409
 
Flussdiagramme 200407
Flussdiagramme 200407Flussdiagramme 200407
Flussdiagramme 200407
 
2 1b-prozessmodellierung-eepk-erweiterung-200406
2 1b-prozessmodellierung-eepk-erweiterung-2004062 1b-prozessmodellierung-eepk-erweiterung-200406
2 1b-prozessmodellierung-eepk-erweiterung-200406
 
2 1a-prozessmodellierung-epk-einfuehrung-200406
2 1a-prozessmodellierung-epk-einfuehrung-2004062 1a-prozessmodellierung-epk-einfuehrung-200406
2 1a-prozessmodellierung-epk-einfuehrung-200406
 
Topologien verstehen und erstellen - Methoden der Wirtschaftsinformatik-200329
Topologien verstehen und erstellen - Methoden der Wirtschaftsinformatik-200329Topologien verstehen und erstellen - Methoden der Wirtschaftsinformatik-200329
Topologien verstehen und erstellen - Methoden der Wirtschaftsinformatik-200329
 
Organigramm - Modellierung mit ARIS 200327
Organigramm - Modellierung mit ARIS 200327Organigramm - Modellierung mit ARIS 200327
Organigramm - Modellierung mit ARIS 200327
 
Leichter imkern-191110
Leichter imkern-191110 Leichter imkern-191110
Leichter imkern-191110
 
Wirtschaftsinformatik Basics für Betriebswirte und Ingenieure
Wirtschaftsinformatik Basics für Betriebswirte und IngenieureWirtschaftsinformatik Basics für Betriebswirte und Ingenieure
Wirtschaftsinformatik Basics für Betriebswirte und Ingenieure
 
Raspberry Pi Lehrerworkshop
Raspberry Pi LehrerworkshopRaspberry Pi Lehrerworkshop
Raspberry Pi Lehrerworkshop
 
Motivationstheorien 190524
Motivationstheorien 190524Motivationstheorien 190524
Motivationstheorien 190524
 
Vorgehensmodelle - Methoden der Wirtschaftsinformatik
Vorgehensmodelle - Methoden der WirtschaftsinformatikVorgehensmodelle - Methoden der Wirtschaftsinformatik
Vorgehensmodelle - Methoden der Wirtschaftsinformatik
 

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 &
  • 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.
  • 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.
  • 11. 11Javascript Javascript ist eine Programmiersprache, um Abläufe (Prozesse) in Internetseiten zu bringen. Javascript wird durch im Browser ausgeführt (Laufzeitumgebung).
  • 13. 13jQuery jQuery ist eine (beliebte) von viele Bibliotheken für Javascript. jQuery vermindert Tipparbeit. jQuery schafft zusätzliche Abhängigkeiten.
  • 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?