IT- und Medientechnik - weber-vorlesung.de · für die ganze Seite und alle Elemente, die einen...

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


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]"


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


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


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


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


HTML-Linie

wird definiert mit hr (horizontal rule)

Attribute: align, noshade, size, width, color

z.B. <hr size="2" width="3" color="red" />


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


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


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“)


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/


<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


<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>


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>


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


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>


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>


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>


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; }


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


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


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>


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>


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>


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>


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


Internet-Kommunikations-Protokolle

HTTP: kennen wir ja schon

SMTP: E-Mails

FTP: beliebige Dateien übertragen

SSH: sicherer Zugang zu externen Computern


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


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


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


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, ...


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


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


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


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)


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, ...


Was ist XML?

<html>

<head>Hello World</head>

<body>

<h1>Hello Word Page</h1>

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

</body>

</html>


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


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)


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


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

IT- und Medientechnik - weber-vorlesung.de · für die ganze Seite und alle Elemente, die einen...

Documents

Transcript of IT- und Medientechnik - weber-vorlesung.de · für die ganze Seite und alle Elemente, die einen...