IT- und Medientechnik
Vorlesung 4: 6.11.2017
Wintersemester 2017/2018 h_da
Heiko Weber, Lehrbeauftragter
IT- und Medientechnik 6.11.20174-2 Heiko Weber
Teil 1: IT- und MedientechnikThemenübersicht der Vorlesung
Hard- und Software Hardware: CPU, Speicher, Bus, I/O, ... Software: System-, Unterstützungs-, Anwendungssoftware
Quellcode und Entwicklerdokumentation Programmiersprachen, Dokumentation Phasen der Softwareentwicklung, Software-Entwicklungsmethoden
Netzwerke und Internet Geschichte, Netzwerk-Strukturen Protokolle und Technologien, Standards, Cloud
Techniken der Datenübertragung Sockets, LAN vs. WAN, VPN
Digitalisierung von Inhalten und elektronische Übertragung Dateiformate, Kompression, Backups
IT- und Medientechnik 6.11.20174-3 Heiko Weber
HTML-Seiteneigenschaften
direkt im body-Bereich können einige Eigenschaften angegeben werden, die für die ganze HTML-Seite gelten
Hintergrundfarbe: bgcolor bgcolor="# [hexrot][hexgrün][hexblau]" | "[farbname]" z.B. #FFFF00, yellow, red, blue
Textfarbe: text text="# [hexrot][hexgrün][hexblau]" | "[farbname]"
IT- und Medientechnik 6.11.20174-4 Heiko Weber
Strukturierter HTML-Text
einzelne Textbereiche speziell hervorheben: strong z.B. „das ist <strong>sehr wichtig</strong>“
tiefergestellter Text: sub
höhergestellter Text: sup
Überschriften: h1, h2, h3, h4
IT- und Medientechnik 6.11.20174-5 Heiko Weber
HTML-Zeilen und -Absätze
Absatz: p z.B. <p>Dies ist ein Absatz</p>
Zeilenumbrüche fügt der Browser bei der Darstellung von Texten automatisch ein, wenn eine Zeile voll ist. Zeilenumbrüche werden in Leerzeichen-Bereichen oder bei Bindestrichen eingefügt.
forcierter Zeilenumbruch: br z.B. Zeile 1<br/>Zeile 2
IT- und Medientechnik 6.11.20174-6 Heiko Weber
HTML-Schriftstile
tt: Zeichen mit fester Breite
i: kursiv
b: fett
big: groß
small: klein
strike: durchgestrichen
u: unterstrichen
<font face="Namen" size="Größe">...</font> face: Liste von Schriftart-Namen size: absolute Größenwerte, z.B. 4
IT- und Medientechnik 6.11.20174-7 Heiko Weber
HTML-Listen
Arten von Liste: unsortierte: ul
Listenelemente mit li type: disc, circle, square
sortierte: ol Listenelemente mit li Type: 1, a, A, i, I
IT- und Medientechnik 6.11.20174-8 Heiko Weber
HTML-Linie
wird definiert mit hr (horizontal rule)
Attribute: align, noshade, size, width, color
z.B. <hr size="2" width="3" color="red" />
IT- und Medientechnik 6.11.20174-9 Heiko Weber
HTML-Grafiken
werden eingebunden mit img
Pflichtattribute: src, alt
Optionalattribute: height, width, border, align, hspace, vspace, ... align=bottom|middle|top|left|right
Beipiel: <img src="foto.jpg" alt="ein Foto von mir" />
unterstützte Grafikformate hängen vom Browser ab – normalerweise werden GIF, PNG, JPEG unterstützt
mit HTML 5 ist es auch möglich Grafiken direkt in einer HTML-Seite zu generieren
IT- und Medientechnik 6.11.20174-10 Heiko Weber
HTML-Formulare
<form action="Bearbeitungsziel" method="HTTP-Request-Methode">
input name, value, size, maxlength, readonly type=text|password|checkbox|radio|submit|reset|file|
hidden|image|button
select name Auswahloptionen mit option (value, selected)
textarea name, cols, rows
IT- und Medientechnik 6.11.20174-11 Heiko Weber
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
IT- und Medientechnik 6.11.20174-12 Heiko Weber
Cascading Style Sheets (CSS)
● http://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“)
IT- und Medientechnik 6.11.20174-13 Heiko Weber
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
● gute Quelle mit weiterführenden Infos zu CSS:● http://de.selfhtml.org/css/
IT- und Medientechnik 6.11.20174-14 Heiko Weber
<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
IT- und Medientechnik 6.11.20174-15 Heiko Weber
<span> vs. <div>
<div style="font-family:arial; border:3px solid red;"> <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><div style="font-family:arial; border:3px solid blue;"> <p>Ein zweiter Kasten.</p> </div>
IT- und Medientechnik 6.11.20174-16 Heiko Weber
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><style type="text/css">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>
IT- und Medientechnik 6.11.20174-17 Heiko Weber
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><title>Eine kleine Demo-Seite</title><link rel="stylesheet" type="text/css" href="style1.css" /></head><body><h1>Eine blaue Überschrift</h1><p>Und hier ein kurzer Absatz.</p></body></html>
h1 { font-family:arial; color:blue; }p { font-family:times; color:red; }
Datei: style1.css
IT- und Medientechnik 6.11.20174-18 Heiko Weber
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><title>Eine kleine Demo-Seite</title></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>
IT- und Medientechnik 6.11.20174-19 Heiko Weber
Einbinden von Style-Beschreibungen - kombiniert
● die drei Varianten können auch kombiniert werden
<html><head><title>Eine kleine Demo-Seite</title><style type="text/css">h1 { font-family:arial; color:blue; }</style></head><body><h1>Eine blaue Überschrift</h1><p style="font-family:times; color:red;">Und hier ein kurzer Absatz.</p></body></html>
IT- und Medientechnik 6.11.20174-20 Heiko Weber
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.:all, braille, handheld, print, projection, screen, …
<html><head><title>Eine kleine Demo-Seite</title><link rel="stylesheet" type="text/css" media="screen" href="screen1.css" /><link rel="stylesheet" type="text/css" media="print" href="print1.css" /></head><body><h1>Eine blaue Überschrift</h1><p>Und hier ein kurzer Absatz.</p></body></html>
IT- und Medientechnik 6.11.20174-21 Heiko Weber
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; }
IT- und Medientechnik 6.11.20174-22 Heiko Weber
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
IT- und Medientechnik 6.11.20174-23 Heiko Weber
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
IT- und Medientechnik 6.11.20174-24 Heiko Weber
Beispiel: Schriftformatierungs-Eigenschaften
<div style="font-family: arial; font-size: 20px;"> Hier steht die erste Zeile<br /> <span style="font-size: 50%; font-weight: bold;"> Nur halb so groß und fett<br /> <span style="font-size: 50%; color: red;"> noch kleiner und diesmal auch rot </span> </span></div>
● da das zweite <span> unterhalb des ersten geschachtelt ist, bezieht sich die relative Angabe von 50% auf die Schriftgröße aus dem darüber liegendem <span>
IT- und Medientechnik 6.11.20174-25 Heiko Weber
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<p style="margin: 0; margin-top: 2.0em;">zweite Zeile</p><p style="margin: 0; margin-top: 1.0em;">dritte Zeile</p><p style="margin: 0; margin-left: 2.0em;">vierte Zeile</p>
IT- und Medientechnik 6.11.20174-26 Heiko Weber
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)
<table border="1"> <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></table>
IT- und Medientechnik 6.11.20174-27 Heiko Weber
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
<table border="1"> <tr> <td style="margin:0; padding:0.2em; background-color:green;"> die erste Zelle ganz in grün </td> </tr> <tr> <td style="margin:0; padding:0.2em; background-color:red;"> nun einzelne Worte in <span style="background-color:yellow;">gelb</span> und <span style="background-color:white;">weiß</span> </td> </tr></table>
IT- und Medientechnik 6.11.20174-28 Heiko Weber
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 zu lesen
IT- und Medientechnik 6.11.20174-29 Heiko Weber
Internet-Kommunikations-Protokolle
HTTP: kennen wir ja schon
SMTP: E-Mails
FTP: beliebige Dateien übertragen
SSH: sicherer Zugang zu externen Computern
IT- und Medientechnik 6.11.20174-30 Heiko Weber
SMTP/MIME
SMTP = Simple Mail Transfer Protocol
funktioniert ähnlich wie HTTP – eine Mail-Nachricht hat einen Header und einen Body und im Header sind verschiedene Header-Felder, die Eigenschaften der E-Mail definieren
MIME = Multipurpose Internet Mail Extension ermöglicht es auch, mehr als nur einfachen Text in E-Mails
zu packen
IT- und Medientechnik 6.11.20174-31 Heiko Weber
FTP – File Transfer Protocol
zum Übertragen von beliebigen Daten
wird noch häufig verwendet, wenn z.B. Software aus dem Internet heruntergeladen wird
gilt als ziemlich unsicher, weil Username und Passwort und auch die Daten unverschlüsselt verschickt werden, deswegen gibt es nun auch SFTP (Secure FTP) mit SSL-Verschlüsselung
IT- und Medientechnik 6.11.20174-32 Heiko Weber
SSH – Secure Shell
eine „Shell“ ist eine Eingabeoberfläche, mit der auf einem externen System Befehle ausgeführt werden können
früher wurde hauptsächlich Telnet oder RSH (remote shell) verwendet, welche aber ähnlich wie FTP den Usernamen und das Passwort und auch die sonstigen Daten unverschlüsselt übertragen
heute wird hauptsächlich SSH verwendet, wenn auf externe System zugegriffen wird
quasi ein Telnet aber mit SSL-Verschlüsselung
IT- und Medientechnik 6.11.20174-33 Heiko Weber
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-Plattformen interoperieren können.
Kern-Standards des Internets TCP/IP, FTP, SMTP, Telnet, ...
Kern-Standards des WWW HTTP, HTML, ...
Kern-Standards des Web 2.0 XML/XHTML, RSS, CSS, ...
IT- und Medientechnik 6.11.20174-34 Heiko Weber
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
IT- und Medientechnik 6.11.20174-35 Heiko Weber
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● zum Beispiel:
● XML● HTML● CSS● RDF● SOAP● PNG
● Hauptziel: Web-Interoperabilität durch offene, nicht-proprietäre Standards für Websprachen und Protokolle
IT- und Medientechnik 6.11.20174-36 Heiko Weber
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
● Fokus auf Standards rund um Web Services, Security und E-Business, aber auch weitere Bereiche
● Beispiele:● WS-Security (SAML, XACML, ...)● DocBook● ebXML
IT- und Medientechnik 6.11.20174-37 Heiko Weber
IETF (Internet Engineering Task Force)
● Community von Internet-Anwendern und -Entwicklern
● www.ietf.org
● Mission Statement: „The goal of the IETF is to make the Internet work better. [...] The IETF will pursue this mission in adherence to the following cardinal principles: Open process [...] Technical competence [...] Volunteer Core [..] Rough consensus and running code [..] Protocol ownership [..]“
● viele Basis-Standards● z.B. HTTP, SMTP, URL/URI/IRI, date-time
● Standards-Dokumente● Internet-Draft● Request for Comments
(impliziert, dass ein Standard niemals final abgeschlossen sein wird)
IT- und Medientechnik 6.11.20174-38 Heiko Weber
IETF (Internet Engineering Task Force)
● Community von Internet-Anwendern und -Entwicklern
● www.ietf.org
● Mission Statement: „The goal of the IETF is to make the Internet work better. [...] The IETF will pursue this mission in adherence to the following cardinal principles: Open process [...] Technical competence [...] Volunteer Core [..] Rough consensus and running code [..] Protocol ownership [..]“
● viele Basis-Standards● z.B. HTTP, SMTP, URL/URI/IRI, date-time
● Standards-Dokumente● Internet-Draft● Request for Comments
(impliziert, dass ein Standard niemals final abgeschlossen sein wird)
IT- und Medientechnik 6.11.20174-39 Heiko Weber
IANA (Internet Assigned Number Authority)
● globale Koordinierungsstelle von DNS, IP-Nummern und weiteren Internet-Protokoll-Ressourcen
● www.iana.org
● Domain NamenRoot Zonen (TLDs), Registry für .int und .arpa
● Nummer Ressourcenglobale IP-Nummern
● Protokoll-ZuweisungenZertifikat-Typen, Media-Typen, ...
IT- und Medientechnik 6.11.20174-40 Heiko Weber
Was ist XML?
<html>
<head>Hello World</head>
<body>
<h1>Hello Word Page</h1>
<p>This is some sample Text...</p>
</body>
</html>
IT- und Medientechnik 6.11.20174-41 Heiko Weber
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: HTML, SVG, MathML, OpenDocument, ... zahlreiche selbstdefinierte Sprachen
IT- und Medientechnik 6.11.20174-42 Heiko Weber
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)
IT- und Medientechnik 6.11.20174-43 Heiko Weber
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
IT- und Medientechnik 6.11.20174-44 Heiko Weber
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