IT- und Medientechnik

(1)

IT- und Medientechnik

Vorlesung 6: 22.11.2021

Wintersemester 2021/2022 h_da

Heiko Weber, Lehrbeauftragter

(2)

Teil 1: IT- und Medientechnik

Themenübersicht der Vorlesung

 Hardware und Software

 Hardware: CPU, Speicher, Bus, I/O, ...

 Software: System-, Unterstützungs-, Anwendungssoftware

 Software-Entwicklung

 Quellcode, Programmiersprachen, Dokumentation

 Software-Entwicklungsphasen, -Entwicklungsmethoden, -Komponenten, -Lizenzen

 Digitalisierung von Inhalten und Informationen

 Daten: Informationen, Bits, Bytes, Binärsystem, Hexadezimalsystem

 Dateien, Dateisysteme, Datenformate, Kompression

 Netzwerke und Internet

 Netzwerk-Strukturen, Geschichte des Internets, Techniken der Datenübertragung

 Protokolle und Technologien, WWW, Standards, Cloud, IoT

(3)

Dynamische HTML-Inhalte

 meistens bestehen Webseiten nicht nur aus statischen Inhalten

 dynamische Inhalte können im Client und im Server generiert werden:

 im Webbrowser

● z. B. mit JavaScript

● wird verwendet um die Bedienung der Webseite zu verbessern

 im Webserver

● z. B. mit PHP

● wird verwendet um benutzerspezifische Daten zu generieren und um Daten aus Datenbanken und anderen Unterstützungs-Systemen zu nutzen

(4)

Formatierung

 bisher: Inhalt und Formatierung gemischt

 Vorteile der Trennung von Inhalt und Formatierung:

 erhöhte Lesbarkeit

 bessere Wiederverwendbarkeit (Modularisierung)

 unterschiedliche Formate für unterschiedliche Ausgabegeräte möglich

(5)

Cascading Style Sheets (CSS)

 https://www.w3.org/Style/CSS/

 für die Formatierung von HTML-Seiten entwickelt

 ermöglicht eine strenge Trennung von Inhalt und Formatierung

 erlaubt unterschiedliche Formatierungen für unterschiedliche Ausgabemedien

 kann direkt in die HTML-Seite oder über eine Referenz eingebunden werden

 mehrere Formatierungsregeln können nacheinander auf ein Objekt angewandt werden (deswegen das „Cascading“)

(6)

CSS Übersicht

 mittels CSS können HTML-Inhalte formatiert und positioniert werden

 im Rahmen dieser Vorlesung werden wir uns nur auf einen kleinen Auszug der vielseitigen Möglichkeiten beschränken

 <span> vs. <div>

 Schriftformatierung

 Abstände

 Hintergrundfarbe

 Umrandung

 ...

 gute Quelle mit weiterführenden Infos zu CSS:

https://wiki.selfhtml.org/wiki/CSS

(7)

<span> vs. <div>

 mittels CSS können Formate definiert werden – damit diese Formate auf Bereiche einer HTML-Seite angewandt werden können, müssen spezielle HTML-Tags existieren, mit denen die Formatierung im HTML angegeben werden kann

 <span>

 Ein Inline-Tag welches eine Menge von HTML-Inhalten umgibt, um eine spezielle Formatierung

anzuwenden. Es führt zu keinem Zeilenumbruch. Innerhalb eines <span>-Tags dürfen nur Inline-Tags liegen (also z. B. keine Absätze).

 <div>

 Ein Block-Tag welches eine Menge von HTML-Inhalten umgibt, um eine spezielle Formatierung anzuwenden. Es führt zu einem Zeilenumbruch.

 beide HTML-Tags können beliebig verschachtelt werden

(8)

<span> vs. <div>

<p>Die ist ein kleiner Test um die Funktionsweise von

<span style="font-weight:bold; color: green;">span</span> und <span

style="font-weight:bold; color: blue;">div</span> zu demonstrieren.</p>

</div>

<p>Ein zweiter Kasten.</p>

</div>

(9)

Einbinden von Style-Beschreibungen im Header

 die komplette Style-Beschreibung kann zentral im Header definiert werden

 klare Trennung von Inhalt und Formatierung

<html>

<head>

<title>Eine kleine Demo-Seite</title>

h1 { font-family:arial; color:blue; } p { font-family:times; color:red; }

</style>

</head>

<body>

<h1>Eine blaue Überschrift</h1>

<p>Und hier ein kurzer Absatz.</p>

</body>

</html>

(10)

Einbinden von Style-Beschreibungen per Referenz

 die Style-Beschreibung kann in einer oder mehreren externen Dateien liegen

 auch klare Trennung von Inhalt und Formatierung

<html>

<head>

type="text/css" href="style1.css" />

</head>

<body>

</body>

</html> h1 { font-family:arial; color:blue; }

p { font-family:times; color:red; }

Datei: style1.css

(11)

Einbinden von Style-Beschreibungen im Element

 die Style-Beschreibung kann auch direkt in einem HTML-Tag angegeben werden

 keine Trennung von Inhalt und Formatierung

<html>

<head>

</head>

<body>

<h1 style="font-family:arial; color:blue;">Eine blaue Überschrift</h1>

<p style="font-family:times; color:red;">Und hier ein kurzer Absatz.</p>

</body>

</html>

(12)

Einbinden von Style-Beschreibungen - kombiniert

 die drei Varianten können auch kombiniert werden

<html>

<head>

h1 { font-family:arial; color:blue; }

</style>

</head>

<body>

<p style="font-family:times; color:red;">Und hier ein kurzer Absatz.</p>

</body>

</html>

(13)

CSS-Regeln

 Stylesheets bestehen aus Regeln, die für spezielle HTML-Tags Formate definieren

 eine Regel hat folgenden Aufbau:

Selektor { (Eigenschaft: Wert;)* }

 der Selektor selektiert den HTML-Tag, bzw. die HTML-Tags, für welche die angegebenen Eigenschaften gelten soll

 CSS definiert Eigenschaften und mögliche Werten

 z. B. Überschriften mit Schriftart „arial“ und in blau:

h1, h2, h3 { font-family: arial; color: blue; }

(14)

Schriftformatierungs-Eigenschaften

 font-family (Schriftart)

 wie bei dem face-Attribut in <font> können mehrere Schriftarten angegeben werden

 font-size (Schriftgröße)

 relative und absolute Angaben möglich (siehe nächste Folie)

 color (Textfarbe)

 Farbangabe wie bei dem color-Attribut in <font>

 font-style (Schriftstil)

 mögliche Werte: italic, oblique, normal

 font-weight (Schriftgewicht)

 mögliche Werte: bold, bolder, lighter, normal

 weitere Eigenschaften: font-variant, word-spacing, letter-spacing, text-decoration, text-transform, text-shadow, font-stretch

(15)

Größenangaben in CSS

 absolute Größenangaben

 pt: Punkt – entspricht 1/72 Inch

 pc: Pica – entspricht 12 Punkten

 in: Inch

 mm: Millimeter

 cm: Zentimeter

 px: Pixel

 relative Größenangaben

 em: bezogen auf die Schriftgröße des HTML-Tags bzw. wenn eine Angabe für

font-size gemacht wird, bezogen auf die Schriftgröße des Eltern-HTML-Tags

 ex: bezogen auf die Höhe des Kleinbuchstabens x des HTML-Tags bzw. des Eltern-HTML-Tags

 %: relative Prozent, bezogen auf die Größe des HTML-Tags, des Eltern-HTML-Tags oder eines allgemeineren Kontextes

(16)

Beispiel: Schriftformatierungs-Eigenschaften

Hier steht die erste Zeile<br />

Nur halb so groß und fett<br />

noch kleiner und diesmal auch rot </span>

</span>

</div>

da das zweite <span> unterhalb des ersten geschachtelt ist, bezieht sich die relative Angabe von

(17)

Außenabstand-Eigenschaften

Mit den margin-Eigenschaften kann der Außenabstand zwischen einem Element und seinem Eltern- oder Nachbarelement festgelegt werden.

 margin-top (Außenabstand nach oben)

 margin-right (Außenabstand nach rechts)

 margin-bottom (Außenabstand nach unten)

 margin-left (Außenabstand nach links)

 margin (Außenabstand allgemein)

erste Zeile

zweite Zeile</p>

dritte Zeile</p>

vierte Zeile</p>

(18)

Innenabstand-Eigenschaften

Mit den padding-Eigenschaften kann der Innenabstand zwischen dem Inhalt eines Elements und seinem Elementrand festgelegt werden.

 padding-top (Innenabstand nach oben)

 padding-right (Innenabstand nach rechts)

 padding-bottom (Innenabstand nach unten)

 padding-left (Innenabstand nach links)

 padding (Innenabstand allgemein)

<tr>

<td style="margin:0; padding:0; padding-top:1.0em;">erste Zelle</td>

</tr>

<tr>

<td style="margin:0; padding:0; padding-top:2.0em;">zweite Zelle</td>

</tr>

(19)

Hintergrundfarbe

für die ganze Seite und alle Elemente, die einen eigenen Absatz bzw. Block bilden, kann die Hintergrundfarbe mit der Eigenschaft background-color gesetzt werden

<tr>

die erste Zelle ganz in grün </td>

</tr>

<tr>

nun einzelne Worte in

</td>

</tr>

</table>

(20)

Stylesheets für unterschiedliche Ausgabemedien

 für unterschiedliche Ausgabemedien können unterschiedliche Stylesheets definiert werden, damit die Formatierung für das entsprechende Medium speziell angepasst werden kann

 CSS definiert verschiedene Medientypen, z. B.:

<html>

<head>

</head>

<body>

</body>

</html>

(21)

Was ist XML?

<html>

<head>Hello World</head>

<body>

<h1>Hello Word Page</h1>

<p>This is some sample Text...</p>

</body>

</html>

(22)

Was ist XML?

XML (eXtensible Markup Language)

 eine Markup-Sprache (Auszeichnungssprache)

 Daten und logische Informationen über die Daten (Markup) befinden sich in einem Dokument

 eine Metasprache zur Definition von Auszeichnungssprachen

 bekannte Beispiele: XHTML, SVG, OpenDocument, ...

 zahlreiche selbstdefinierte Sprachen

(23)

Eigenschaften von XML

 einfach: im Textformat, gut lesbar und verständlich für Menschen (im Gegensatz zu binären Formaten, die nur von Maschinen verarbeitet werden können)

 erweiterbar: Anzahl und Namen der Elemente und Attribute sind nicht beschränkt

 selbstbeschreibend: ein explizites Schema ist nicht erforderlich (obwohl es oft sinnvoll ist)

 maschinenlesbar

 standardisiert: vom W3C (diverse Standards und Spezifikationen existieren zudem rund um XML – im Wesentlichen herausgegeben vom W3C und OASIS)

(24)

Was ist ein Dokument?

 eigentlich zur Kommunikation zwischen Menschen eingesetzt

 Mensch-Mensch-Kommunikation

● natürliche (menschliche) Sprache wird verwendet, beinhaltet komplexe und irreguläre Strukturen

 elektronische Verarbeitung – auch für die Kommunikation

 Computer-Computer-Kommunikation

● datenzentriert

 Mensch-Computer-Kommunikation

● dokumentzentriert

 XML kann zur Darstellung und zum Transport dieser Informationen eingesetzt werden

(25)

Web-Standards – wieso?

 Das Internet und das World Wide Web haben sich so erfolgreich durchgesetzt, weil sie auf einfachen und offenen Standards aufbauen, die es ermöglichen, dass Benutzer von Software verschiedener Hersteller auf unterschiedlichen Hardware-Systemen

untereinander Daten austauschen können.

 Kern-Standards des Internets

 TCP/IP, IP-Adressen, URIs, TLS, FTP, SMTP, SSH,

 Kern-Standards des WWW

 HTTP, HTML, CSS, JavaScript, ...

(26)

Web-Standards – wer definiert die?

 typischerweise Zusammenspiel von

 Wirtschaft

 Hochschulen

 Forschungsinstituten

 wichtigste Standardisierungsgremien für Webtechnologien

 W3C

 OASIS

 IETF

 andere Wege sind möglich

 proprietäre Verfahren großer Firmen oder verbreiteter Produkte werden zu Standards oder Quasi- Standards

(27)

W3C (World Wide Web Consortium)

 Industriekonsortium mit über 400 Mitgliedsorganisationen

 www.w3.org

 entwickelt Standards und Richtlinien für das Web

 seit 1994 mehr als 100 Standards publiziert

 z. B.: XML, HTML, CSS, PNG, SVG

 Hauptziel: Web-Interoperabilität durch offene, nicht-proprietäre Standards für Websprachen und Protokolle

(28)

OASIS

(Organization for the Advancement of Structured Information Standards)

 Konsortium bestehend aus 5000 Teilnehmern aus über 600 verschiedenen Organisationen und Firmen

 www.oasis-open.org

 1993 gegründet.

 Fokus auf Standards rund um Web Services, Security und E-Business, aber auch weitere Bereiche

 z. B.: DocBook, MQTT, OpenDocument, SAML, XACML

(29)

IETF (Internet Engineering Task Force)

 Community von Internet-Anwendern und -Entwicklern

 www.ietf.org

 Mission Statement:

„The mission of the IETF is to make the Internet work better by producing high quality, relevant technical documents that influence the way people design, use, and manage the Internet.“

 1986 gegründet

 viele Basis-Standards für das Internet

 z. B.: TCP/IP, HTTP, SMTP, URL/URI/IRI, date-time, TLS

(30)

IANA (Internet Assigned Number Authority)

 globale Koordinierungsstelle von DNS, IP-Nummern und weiteren Internet-Protokoll-Ressourcen

 www.iana.org

 Domain-Namen

Root Zonen (TLDs),

Registry für .int und .arpa

 Nummer-Ressourcen

globale IP-Nummern

 Protokoll-Zuweisungen

Zertifikat-Typen, Media-Typen, …

 ...

(31)

Cloud

 der Begriff „Cloud“ ist ein Sammelbegriff für Angebote, die über ein Netzwerk, typischerweise das Internet, verfügbar sind

 grob wird unterschieden nach:

 Cloud-Storage

● Daten-Speicher im Netzwerk, z. B. iCloud, Amazon S3-Bucket

 Cloud-Computing

● virtuelle Computer oder sonstige Dienste im Netzwerk, die Daten verarbeiten

● z. B. Amazon EC2-Instanz, Microsoft Azure Virtual Computer

 weitere Cloud-Dienste

● z. B. Hochverfügbarkeitslösungen, virtuelle Netzwerke, ...

 die Cloud-Angebote können oft je nach Bedarf erweitert werden

 durch Standardschnittstellen für Cloud-Angebote, können die Anbieter von Cloud- Angeboten einfach durch andere ausgetauscht werden

(32)

On-Premise

 Unter „On-Premise“ wird der Betrieb von Software inkl. der erforderlichen Infrastruktur (Hardware- und Netzwerk-Infrastruktur) im eigenen Rechenzentrum bezeichnet.

 War vor einigen Jahren noch normal für große Firmen.

 Mittlerweile lagern aber auch große Firmen immer mehr ihrer Infrastruktur in Cloud- Umgebungen aus, bis hin zum Betrieb der fertigen Software-Lösungen.

 On-Premise-Betrieb erfordert nicht nur die Anschaffung der Infrastruktur und der Software, sondern auch Experten, die sich damit auskennen und jederzeit verfügbar sind.

(33)

Cloud-Konzept IaaS (Infrastructure as a Service)

 System wird von einem Anbieter auf einer Cloud-Umgebung betrieben.

 Systeme können sein:

 Hardware bzw. virtuelle Hardware

 Betriebssysteme

 Netzwerk-Komponenten und -Dienste

 Cloud-Dienstleister kümmert sich um die Funktion der Infrastruktur.

 z. B. stellt sicher, dass funktionsfähige Computer mit ausreichend Speicher, aktuellem Betriebssystem und schneller Internetanbindung vorhanden sind

 Cloud-Kunde konfiguriert die Infrastruktur und installiert die spezielle Software selbst

(34)

Cloud-Konzept PaaS (Platform as a Service)

 Fertige Laufzeitumgebung für Software oder Software-Komponenten (z. B.

Microservices) wird von einem Anbieter auf einer Cloud-Umgebung betrieben.

 Cloud-Dienstleister kümmert sich um die Funktion der Laufzeitumgebung und allem was damit zusammenhängt (also alles, was bei IaaS auch geboten wird, speziell für die

entsprechende Laufzeitumgebung angepasst).

 Cloud-Kunde installiert seine spezielle Software oder Software-Komponenten in der bereitgestellten Laufzeitumgebung und hat gewisse Konfigurationsmöglichkeiten für die Laufzeitumgebung. Die Infrastruktur muss so genommen werden, wie der Cloud- Dienstleister sie bereitstellt, dabei kann in der Regel zwischen verschiedenen

Infrastruktur-Konfigurationen ausgewählt werden.

(35)

Cloud-Konzept SaaS (Software as a Service)

 Software wird von einem Dienstleister in einer Cloud-Umgebung betrieben.

 Die Nutzer der Software müssen sich typischerweise nicht um die grundlegende

Administration der IT-Infrastruktur kümmern, sondern nur noch um die Konfiguration der eigentlichen Endbenutzer-Funktionen.

 Die Kosten werden typischerweise pro Zeit und Volumen der Nutzung abgerechnet.

 Vorteil gegenüber lokal installierte Software:

 Weniger Kosten für IT-Administration, weil diese weitgehend vom SaaS-Anbieter übernommen wird.

 Einsatz der Software typischerweise viel schneller realisierbar.

 Nutzer können sich auf ihr Kerngeschäft konzentrieren.

 Nachteil gegenüber lokal installierter Software:

 Weniger Flexibilität, weil die Software oft als Standard-Service angeboten wird.

 Eventuell Datenschutz-Probleme, weil Daten nicht mehr innerhalb der eigenen IT-Infrastruktur

(36)

**Verantwortlichkeiten bei verschiedenen *aaS-Modelle**

Verantwortlichkeit On-

Premise IaaS PaaS SaaS

Anwendungsdaten

   

Endbenutzerverwaltung

   

Anwendungssoftware

    

Unterstützungssoftware

    

Systemsoftware / Betriebssystem

    

Physische Hardware

   

Physische Netzwerkinfrastruktur

   

Physisches Rechenzentrum

   

(37)

Das Internet der Dinge (IoT)

IoT = Internet of Things

 Dinge = Gegenstände des Alltags, die historisch gesehen nicht mit dem Internet verbunden waren – z. B. Fernseher, Videorecorder, Kühlschränke, Waschmaschinen, Autos, Uhren, Thermostate, Fitness-Armbänder und vieles mehr.

 Teilweise werden auch sehr dumme Dinge vernetzt – z. B. Sensoren auf Paketen oder RFID-Chips in Kleidungsstücken.

 Viele neue Geschäftsmodelle entstehen durch diese neue Vernetzung von Dingen mit weiteren Systemen.

 Durch diese Dinge fallen extrem viel mehr Daten und Informationen an und es stellen sich auch neue Sicherheits- und Datenschutz-Fragen.

(38)

Industrie 4.0

 Die vierter industrielle Revolution.

 1.0: Mechanisierung der Produktion (z. B. Webstuhl), Dampfmaschinen, ...

 2.0: Massenproduktion, Fließbänder, Elektromotoren

 3.0: Automatisierung, Computer, Elektronische Sensoren, Robotik

 4.0: Umfangreiche Vernetzung der Produktionsschritte. Umfassende Digitalisierung der industriellen Produktion, über die Grenzen der verschiedene Produktionsschritte und -standorte hinweg, bis hin zum Lebenszyklus der Produkte, die über diese Methode

produziert werden. Weitgehend selbstorganisierte und individualisierte Produktion soll dadurch ermöglicht werden.

 Die Neuerungen der Industrie 3.0, die dort auf einen speziellen Produktionsstandort oder Produktionsschritt beschränkt waren, werden über die kompletten Produktionsschritte bis hin zur Nutzung des Endprodukts angewandt.

(39)

Probeklausur

 Im Moodle und auf der Webseite (https://weber-vorlesung.de/) befindet sich eine Probeklausur.

 Diese Probeklausur deckt den Teil 1 (IT- und Medientechnik) der Vorlesung ab. Sie entspricht im Umfang und in der Art der Aufgaben der echten Klausur.

 Die Probeklausur gehen wir komplett am 29.11.2021 in der Vorlesung durch.