Das digitale Bild 2b – Farbmodi, Farbmodelle, Pixel- und Vektorgrafiken

Farbmodi

Photoshop kennt mehrere Farbmodi (Bild / Modus). Die gängigsten sind:

Farbmodus Merkmale
RGB Rot: 8 Bit – 256 Abstufungen
Grün: 8 Bit – 256 Abst.
Blau: 8 Bit – 256 Abst.
Summe: 24 Bit – über 16 Millionen Farben
Indizierte Farbe Farbe
Graustufen 256 Graustufen
Bitmap Schwarz und Weiß

Farbmodelle

RGB-Farbmodell

Die Darstellung von Farben am Bildschirm erfolgt über das RGB-Farbmodell. Digitalkameras und Scanner arbeiten ebenso nach dem RGB-Farbmodell. Die Grundfarben dieses Modells sind Rot, Grün und Blau.

RGB-Farbmodell

Jede Farbe wird aus verschieden hohen Anteilen der drei Grundfarben Rot, Grün und Blau zusammengesetzt. Die Anteile der Grundfarben an der Mischfarbe werden durch einen Wert zwischen 0 und 255 oder eine Prozentangabe festgelegt.

Rot, Grün und Blau werden als additive Primärfarben bezeichnet, da sie nicht durch Mischen anderer Farbtöne erzeugt werden können. Mischt man zwei additative Primärfarben, so wird jeweils eine Sekundärfarbe (Cyan, Magenta oder Yellow) erzeugt.

Rot + Grün: Gelb
Grün + Blau: Cyan
Rot + Blau: Magenta

CMYK-Farbmodell

CMYK-Farben

Das CMYK-Farbsystem besteht aus den Farben Cyan (einem hellen, grünlichen Blau), Magenta (ein violettes Rot), Gelb (helles, bis mittleres Gelb) und Schwarz (K: das K leitet sich von Keyplate, Schlüsselplatte ab, das ist die schwarz druckende Platte, an der die drei farbigen Platten ausgerichtet werden). Das schwarz soll die Druckqualität des Farbmodells erhöhen. Theoretisch ergibt zwar die Mischung von CMY eine schwarze Farbe, die ist jedoch in der Praxis kein reines Schwarz, da die drei Grundfarben meist nicht ganz rein sind.

Dieses Modell wird beim Druck verwendet. Cyan, Magenta und Yellow sind subtraktive Primärfarben.  Der Druck nach diesem Modell wird als Vierfarbdruck bezeichnet.

Aus den Grundfarben Cyan, Magenta und Yellow werden alle Farben gemischt:

CMYK-Farbmodell

Cyan + Magenta: Blau
Magenta + Yellow: Rot
Cyan + Yellow: Grün
Cyan + Magenta + Yellow: Schwarz

Farbräume

[Farbmodelle unterschieden sich auch im Umfang der darstellbaren Farben (Farbraum). Der Farbraum des CMYK-Modells ist kleiner als der des RGB-Modells. Besonders im grünen und blauen/violetten Farbbereich sind sind im RGB-Modell mehr Farbabstufungen möglich. Das CMYK-Farbmodell tut sich in diesen Bereichen schwer, die Farben korrekt darzustellen, bzw. kann dies nicht. Daher können Farben am Bildschirm brilliant aussehen, am Ausdruck fehlt diese Brillianz. ]

Farbräume

Übung:

  • Lege ein leeres Bild mit der Größe von 800 x 600 px im RGB-Modus an.
  • Wähle im Farbwähler reines Blau aus (R: 0, G: 0, B: 255)
  • Wähle das Füllwerkzeug aus und klicke ins Bild, sodass es blau eingefärbt wird.
  • Stelle den Bild-Modus auf CMYK (Bild / Modus / CMYK-Farbe) und achte auf die Änderungen!

Vektorgrafiken und Pixelgrafiken

[Innerhalb der Computergrafik wird zwischen zwei Gruppen von Grafikformaten unterschieden: Vektorgrafiken und Pixelgrafiken.

Vektorgrafiken

Bei Vektorgrafiken werden mit Hilfe von Punkten in einem Koordinatensystem Linien, Kurven (so genannte Bezierkurven), Objekte und Schrift durch mathematische Funktionen definiert.

Vektorgrafiken sind verlustfrei skalierbar; man kann sie vergrößeren bzw. verkleinern, ohne dass die Qualität leidet. Bei Größenänderungen berechnet das Programm die Objekte neu.

Vgl. http://www.on-design.de/tutor/ebv/wissen.html

Pixelgrafiken

Ein Pixel (picture element, Bildpunkt) ist die kleinste Einheit eines als Bitmap gespeicherten Bildes. Pixelbilder bestehen aus einer festen Anzahl von quadratischen Bildpunkten, die rasterförmig angeordnet sind.
Digitaler Kamera und Scanner liefern Pixelbilder. ]




Das digitale Bild 2a – Farbe, Farbtiefe und Dateiformate

Für Pixelbilder gibt es eine Reihe von Dateiformaten (Speicherformaten), die sich in der Farbtiefe, der möglichen Verwendung u. a. unterscheiden. Häufige Dateiformate sind die folgenden:

Format Farben/Farbtiefe Weitere Eigenschaften und Verwendung
GIF 256/8 bit vektorbasierende Vorlagen, große gleichfarbige Flächen (Texte, Cartoons, Logos, Vektorformen), Animationen, Transparenz, Anzeige im Webbrowser
JPEG 16,7 Mio/24 bit fotorealistische Bilder, Fotos, Farbverläufe, Komprimierung mit kalkulierbarem Detailverlust, Anzeige im Webbrowser, keine Transparenz
PNG 4,3 Mia/32 bit Alternative zu GIF und JPEG, MM Fireworks-eigenes Format, Webbrowser, Transparenz
TIF 4,3 Mia/32 bit Druck, Ebenen, verlustfreie Komprimierung, Transparenz
PSD 4,3 Mia/32 bit Druck, Ebenen, Montagen, immer ohne Verlust, Adobe photoshopeigenes Format, Transparenz

Speichere das gleiche Foto im TIFF-Format und im JPG-Format in höchster Qualität. Vergleiche die Dateigrößen!

Übungen

  1. Speichere ein Foto mit der Funktion Für Web speichern. Verändere im Dialogfenster die Qualität und achte, wie sich die Vorschau des Bildes und die Dateigröße ändert!
  2. Transparenz: Mache einen Bereich eines Bildes transparent (durchsichtig):
    1. Öffne das Bild tor.jpg
    2. Klicke in der Ebenen-Palette (rechts) zweimal auf Hintergrund.
    3. Im aufgehenden Dialogfenster gib als Name für die Ebene “tor” ein.
    4. Wähle in der Werkzeugleiste die Auswahlellipse.
    5. Ziehe mit gehaltener Umschalt-Taste an einer beliebigen Stelle einen Kreis auf (beliebige Größe).
    6. Schneide mit der Entfernen-Taste den markierten Bereich aus. Das entstandene “Loch” im Bild ist jetzt transparent (durchsichtig). Zeichen dafür ist das Karo.
      Wenn Du das Bild im TIFF-Format speicherst, bleibt die Transparenz, wenn Du es im JPG-Format speicherst, geht die Transparenz verloren (das Loch ist weiß und nicht mehr durchsichtig).
    7. Öffne das Bild tor.jpg
      Es ist 1080 x 1620 px groß. Die Auflösung ist auf 300 ppi eingestellt.
    8. Öffne das Bild ertl.jpg
      Es ist 2640 x 1980 px groß. Die Auflösung beträgt 72 ppi.
      Damit der Kopf durch das Loch schauen kann, muß die Auflösung auf 300 ppi eingestellt werden, das Bild beschnitten werden und dann noch verkleinert werden.
    9. Öffne das Bildgröße-Dialogfenster.
      Entferne den Haken bei Neu berechnen. Bestätige mit OK.
    10. Öffne wieder das Bildgröße-Dialogfenster.
      Wähle in der Werkzeugleiste das Auswahl-Rechteck und ziehe bei gehaltener Umschalt-Taste mit der Maus einen Rahmen auf, sodass der Kopf und etwas von der Umgebung in der Auswahl ist.
      Beschneide das Bild: Bild / Bild freistellen
    11. Öffne nochmals das Bildgröße-Dialogfenster.
      Setze den Haken bei Neu berechnen wieder.
      Gib bei Breite 400 px ein.
      Speichere das Bild unter dem Namen ertl_klein.jpg
    12. Wechsle zum Bild tor.jpg
      Platziere das Bild ertl_klein.jpg: Datei / Platzieren (navigiere zum Bild ertl_klein.jpg, wähle es aus und platziere es)
    13. Schiebe das kleine Bild an die transparente Stelle.
    14. Ziehe die Ebene tor in der Ebenen-Palette an erste Stelle (das Bild tor.jpg ist jetzt vorne, das Bild ertl_klein.jpg ist dahinter, schaut jedoch durch das transparente Loch.
    15. Speichere die Arbeit unter dem Namen torblick.tif (TIFF-Format).
  3. Speichere ein Foto im GIF-Format. Verändert sich die Qualität?
    Speichere ein Foto im GIF-Format und reduziere die Anzahl der verwendeten Farben auf 16.

Die Farbtiefe wird in bit angegeben und gibt die Anzahl der maximal darstellbaren Farben an:

Farbtiefe (in bit) Berechnung Maximal darstellbare Farben
1 bit 2 (schwarz und weiß)
8 bit 2⁸ 256 Farben
16 bit 2¹⁶ 65.536 Farben
24 bit 2²⁴ über 16 Millionen Farben
32 bit 2³² knapp 4,3 Milliarden Farben

Komprimierung mit kontrolliertem Detailverlust

Die Formate GIF, JPEG und PNG können in Webbrowsern dargestellt werden (sind webtauglich) und ermöglichen eine Komprimierung mit kontrolliertem Detailverlust. Bilder für das Internet sollen eine möglichst geringe Dateigröße aufweisen. Durch die Komprimierung mit kontrollierten Detailverlust kann ein Kompromiss zwischen Dateigröße und Detailgenauigkeit erreicht werden.

„Speichern für Web“ im Programm Photoshop (Elements) ermöglicht die Einstellung der Qualität. Geringere Qualität ergibt kleinere Dateigrößen. Die Qualität kann mit Hilfe des Vorschaubildes kontrolliert werden.

Die Farben

Die einfallende Belichtung erzeugt auf dem CCD-Chip einer digitalen Kamera oder eines Scanners elektrische Spannungen. Die Spannung ist abhängig von der Lichtmenge. Je mehr Licht einfällt, um so größer ist
die elektrische Spannung. Über den nachgeschalteten A/D-Wandler wird die Spannung in digital erfassbare Werte umgewandelt. Daraus ergeben sich 256 Abstufungen je Farbe von reinem Rot bzw. Grün bzw. Blau zu Schwarz (Schwarz = am Bildschirm keine Farbe). Die 256 Abstufungen sind für das Auge nicht erkennbar. Wir sehen einen harmonischen Farbverlauf.

RGB Farbabstufungen

Rot: 8 bit = 256 Stufen
Blau: 8 bit = 256 Stufen
Grün: 8 bit = 256 Stufen

Gesamt: 24 bit = 16,777 Mio Farben

Insgesamt ergeben sich 24 Bit Farbtiefe für eine beliebige Farbe. 1 Bit ist die kleinste Recheneinheit des Computers und kann nur „Schwarz oder Weiß“ darstellen. Mit den 8 Bits pro Farbe können 256 verschieden Abstufungen dargestellt werden. Bei drei Farben macht das 24 Bit oder auch 224, vereinfacht ausgedrückt: 16,777 Millionen Farben.

Eine Bilddarstellung mit 24 Bit Farbtiefe wird vom menschlichen Auge als harmonisch wahrgenommen, obwohl die Wahrnehmung des menschlichen Auges in der natürlichen Umgebung noch viel feiner ist.




Datenschutzerklärung für Websites nach der DSGVO

Nach Inkrafttreten der Datenschutz-Grundverordnung (DSVGO) müssen auch Website-Betreiber auf die Einhaltung der Bestimmungen der DSVGO achten, besonders, wenn von den BesucherInnen personenbezogene Daten erfasst und verarbeitet werden. Die Betreiber müssen in einer Datenschutzerklärung anführen, wo und wie personenbezogene Daten von den BesucherInnen erfasst werden.

Diese sollte folgende Erklärungen enthalten:

Essentiell

  • Allgemeine Erklärung über das Anliegen des Datenschutzes
  • Automatische Datenspeicherung: wie und ob der Webserver Besucherdaten speichert (IP-Adresse der BesucherInnen, besuchte Seiten und Unterseiten, Uhrzeit, davor besuchte Website, ob die Site durch eine Suchmaschine gefunden wurde)
  • Speicherung persönlicher Daten: ob persönliche Daten erfasst werden, z. B. in Kontaktformularen, Kommentaren
  • Rechte der BesucherInnen: Rechte auf Auskunft, Berichtigung, Löschung, Einschränkung, Datenübertragbarkeit, Widerruf und Widerspruch
  • TLS-Verschlüsselung mit https: dass die Daten verschlüsselt übertragen werden
  • Cookies: ob und wie Cookies verwendet werden
  • Google-Maps Datenschutzerklärung: ob Google-Maps verwendet wird und dass in diesem Fall Daten an Google übertragen werden
  • Google-Fonts Datenschutzerklärung: ob Google-Fonts verwendet werden und welche Daten in diesem Fall an Google übertragen werden (verwendete Fonts, CSS)

Website-Analyseprogramme

  • Google-Analytics Datenschutzerklärung: ob mit Google-Analytics Besucherdaten erfasst und verarbeitet werden
  • andere Analytik-Programme

Social Media

  • Facebook-Datenschutzerklärung: ob durch das Einbinden von Facebook-Funktionen (Plugins) Daten von BesucherInnen an Facebook übertragen und verarbeitet werden
  • Das Gleiche gilt für Youtube, Twitter, Instagram, Google+ usw.

Einen Datenschutzgenerator als Hilfe gibt es auf https://www.firmenwebseiten.at/datenschutz-generator/

Man wählt die zutreffenden und somit notwendigen Erklärungen aus und der Generator stellt den Text zusammen.

Beispiele für Datenschutzerklärungen:

www.hlwhollabrunn.ac.at
https://unterricht.ertl.today




Datenschutz-Grundverordnung (DSGVO)

Am 25. Mai 2018 trat die Datenschutz-Grundverordnung der Europäische Union (DSGVO) in Kraft.

  • Die DSGVO legt fest, wie vor allem Unternehmen personenbezogene Daten verarbeiten müssen, um die Privatsphäre und den Schutz der personenbezogenen Daten der Betroffenen zu gewährleisten.
  • Sie legt die Verantwortlichkeiten dafür fest,
  • weist den Betroffenen bestimmte Rechte zu
  • und gibt den Aufsichtsbehörden die Befugnis, Rechenschaft zu verlangen
  • und im Fall von Verfehlungen Strafen zu verhängen.

Die wichtigsten Forderungen der DSGVO

  1. Unternehmen, die personenbezogene Daten verarbeiten, müssen dies nach Rechtmäßigkeit, Treu und Glauben und Transparenz tun
    Rechtmäßig: die gesamte Verarbeitung muss auf einem legitimen Zweck beruhen
    nach Treu und Glauben: das Unternehmen muss sich verantwortlich zeigen und Daten nicht über den legitimen Zweck hinaus verarbeiten
    Transparent: das Unternehmen muss die betroffenen Personen über die Verarbeitungstätigkeiten bezüglich ihrer personenbezogenen Daten informieren
  2. Von den Unternehmen wird Zweckbindung, Daten- und Aufbewahrungsdauerbegrenzung gefordert
    personenbezogene Daten dürfen nur für den Zweck verwendet werden, für den sie legitim erhoben wurden
    es dürfen nur die für den legitimen Zweck notwendigen personenbezogenen Daten eingeholt erhoben werden
    die personenbezogene Daten müssen gelöscht werden, sobald der legitime Zweck, für den sie erhoben wurden, erfüllt ist
  3. Rechte der Betroffenen
    Betroffene haben das Recht
    zu erfahren, welchen Daten ein Unternehmen über sie hat
    was das Unternehmen mit diesen Daten tut
    eine Berichtigung zu verlangen
    der Verarbeitung zu widersprechen
    eine Beschwerde einzureichen
    die Löschung oder Übertragung der Daten zu verlangen
  4. Einwilligung zur Datenverarbeitung über den legitimen Zweck hinaus
    Für eine Datenverarbeitung über den legitimen Zweck hinaus müssen Betroffene ausdrücklich zustimmen. Die Zustimmung muss dokumentiert werden und kann jederzeit widerrufen werden.
    Für unter 16-Jährige ist die Zustimmung der Erziehungsberechtigten erforderlich.
  5. Umgang mit Datenschutzverletzungen
    Unternehmen müssen selber ein Verzeichnis von Schutzverletzungen personenbezogener Daten führen und die Aufsichtsbehörde und die Betroffenen je nach Schwere der Verletzung innerhalb von 72 Stunden nach Festellung der Schutzverletzung informieren.
  6. Vorbeugender Datenschutz
    Unternehmen sollen bei Veränderung und Entwicklung von Systemen und Prozessen organisatorische und technische Mechanismen einbauen, um personenbezogene Daten zu schützen.
  7. Datenschutz-Folgenabschätzung
    Wenn in einem Unternehmen Veränderungen durchgeführt werden (Verfahren,neue Projekte, neue Produkte, …), muss eine Datenschutz-Folgenabschätzung durchgeführt werden, sofern auch eine Veränderung der Verarbeitung personenbezogener Daten erfolgt.
  8. Verantwortung von Datenübertragungen an Dritte
    Wenn personenbezogene Daten an Dritte übertragen werden, ist das ursprüngliche Unternehmen dafür verantwortlich, dass die Bestimmungen des DSGVO eingehalten werden.
  9. Datenschutz-Beauftragte/r
    Wenn in einem Unternehmen bzw. einer Organisation eine erhebliche Verarbeitung personenbezogener Daten stattfindet, ist ein Datenschutz-Beauftragter/eine Datenschutz-Beauftragte zu ernennen, der/die die Einhaltung des DSGVO überwacht und gegebenenfalls die Unternehmensleitung zu informieren hat.



Webserver – Webhosting

Webhoster (z. B. World4you, one.com, easyname.com, 1&1) stellen gegen Bezahlung Webserver mit Anbindung ans Internet zur Verfügung. Das beginnt mit einfachem Speicherplatz für Webseiten mit Bildern und geht über Datenbanken bis zu Web-Content-Management-Systemen (z. B. WordPress, Typo3). Die Webserver-Software (Apache, Internet Informaton-Server) nimmt Anfragen nach Seiten entgegen und liefert diese aus.

Die Kunden bekommen einen Zugang zu ihrem Bereich am Webserver (Benutzername, Passwort), sodass sie ihre Inhalte auf den Server hochladen können oder Web-Anwendungen (z. B. WordPress) installieren können.

Im billigsten Fall (für einige Euros pro Monat) teilt man sich einen Webserver mit vielen anderen Kunden, was die Performance bremst. Im besseren Fall mietet man sich einen virtuellen Webserver (auf einem physischen Server laufen mehrere virtuelle Webserver) mit einem bestimmten Prozessor, Speicherplatz und Arbeitsspeicher. Im besten und teuersten Fall mietet man einen oder mehrere physische Server und hat deren gesamte Leistung für sich allein.

Links:

>Easyname Webhoster




Selektorenarten

Syntax von Selektoren || (1) Universal-Selektoren || (2) Typ-Selektoren || (3) Class-Selektoren (Klassen) || (4) ID-Selektoren

Syntax (Schreibweise)

Selektoren stellen die Verbindung zwischen den zentralen Formaten im Head-Bereich oder der externen Datei und den Elementen innerhalb der Seite dar, die formatiert werden sollen. Der Aufbau ist immer gleich: Selektor, geschweifte Klammer auf, Eigenschaft, Wert, geschweifte Klammer zu:

Selektor {Eigenschaft:Wert;}

Selektor{
   Eigenschaft1: Wert;
   Eigenschaft2: Wert;

   ...

}

1. Universal-Selektoren

Universal-Selektoren verknüpfen jedes vorhandene Element mit Stylesheetangaben. Wird z. B. die Schrift durch einen Universal-Selektor auf 18 px festgelegt, so ist die Schrift jedes Elementes mit 18 px formatiert.

* {
   font-size:14px;
   color:#ff0000;
}

2. Typ-Selektoren

Typ-Selektoren verknüpfen einen Elementtyp, also ein HTML-Tag mit einer Formatierung.

h1 {
   font-size:14px;
   font-style:italic;
}

p {
   color:#ff0000;
}

3. Class-Selektoren (Klassen)

Klassen sind Selektoren mit beliebigen Namen.

h1.gerahmt {
   border:1px solid #aaaaaa;
}

In diesem Beispiel wir zunächst H1 definiert; dann wird die Klasse h1.gerahmt festgelegt (Rahmen). Wird Sie angewandt, bekommt H1 zusätzlich einen Rahmen: Diese Klasse funktioniert nur in einem H1-Tag.

.gerahmt {
   border:1px solid #aaaaaa;
}

.einfachertext {
   font-size:14px;
}

Diese zwei Klassen in jedem Tag, weil vor dem Punkt (.) kein Tag angegeben ist.

4. ID-Selektoren

ID-Selektoren verknüpfen Elemente über das ID-Attribut mit einer Formatierung. ID-Selektoren beginnen mit einer # (Raute).

div#kopfbereich {
   position:absolute;
   top:100px; left:100px;
   width:120px; height:80px;
   background-color:#000;
}

div#inhaltsbereich {
   position:absolute;
   top:150px; left:300px;
   width:120px; height:80px;
   border: 6px red solid;
}

Damit werden zwei Bereiche (Boxen) erzeugt, die mit Inhalten gefüllt werden können. Ihre Eigenschaften sind:

  • position (die Art wie ihre Position am Bildschirm festgelegt wird)
  • top (Abstand vom oberen Bildschirmrand)
  • left (Abstand vom linken Bildschirmrand)
  • width (Breite der Box)
  • height (Höhe der Box)
  • background-color (Hintergrundfarbe)
  • border (Rahmen um die Box)



Eine Website programmieren – Schritte

Vorgaben || Layout programmieren (CSS) || Erste Seite anlegen || Fotos vorbereiten || Kopfbild einfügen und Seite vervielfältigen || Seiten verlinken || Die Inhalte der Seiten einfügen || Hyperlinks formatieren || Fotos in die Inhaltsboxen einfügen || Fotos per Klasse ausrichten || Schriftformatierungen

Vorgaben

Website programmieren

Ziel

Ziel ist, eine Website mit drei einzelnen Seiten nach obigem Muster zu programmieren. Die einzelnen Seiten und ihre Inhalte:

Seite Fotos Text
index.html (Homepage) kopf.jpg affen.jpg AffenDie Größe der Affen schwankt zwischen dem Zwergseidenäffchen, das rund 100 Gramm erreicht, und den Gorillas, die stehend bis zu 1,75 Meter hoch werden und ein Gewicht von 200 Kilogramm erreichen können, und den Menschen mit einer Körpergröße von durchschnittlich 1,60 bis 1,80 und maximal etwa 2,00 Metern. Einige Arten haben einen ausgeprägten Geschlechtsdimorphismus, wobei die Männchen mancher Arten doppelt so schwer wie die Weibchen sein können und sich auch in der Fellfarbe unterscheiden können. Ihr Körper ist meist mit Fell bedeckt, dessen Färbung von schwarz über verschiedene Braun- und Grautöne bis zu weiß variieren kann. Die Handflächen und Fußsohlen sind meistens unbehaart, manchmal auch das Gesicht. Die Augen sind groß und nach vorn gerichtet, womit ein guter Gesichtssinn einhergeht. Als Trockennasenprimaten ist ihr Geruchssinn hingegen unterentwickelt.
gorillas.html kopf.jpg gorillas.jpg GorillasDie Gorillas (Gorilla) sind eine Primatengattung aus der Familie der Menschenaffen (Hominidae). Sie sind die größten lebenden Primaten und die ausgeprägtesten Blätterfresser unter den Menschenaffen. Sie sind durch ihr schwarzgraues Fell und den stämmigen Körperbau charakterisiert und leben in den mittleren Teilen Afrikas. Wurden früher alle Tiere zu einer Art zusammengefasst, so unterscheiden jüngere Systematiken zwei Arten mit jeweils zwei Unterarten: den Westlichen Gorilla (G. gorilla), der in den Westlichen Flachlandgorilla (G. g. gorilla) und den Cross-River-Gorilla (G. g. diehli) aufgeteilt wird, und den Östlichen Gorilla (G. beringei), bei dem zwischen dem Östlichen Flachlandgorilla (G. b. graueri) und dem Berggorilla (G. b. beringei) unterschieden wird.
paviane.html kopf.jpg paviane.jpg PavianeDie Paviane (Papio) sind eine Primatengattung aus der Familie der Meerkatzenverwandten (Cercopithecidae). Der Name Pavian taucht im deutschen Sprachraum im 15. Jh. zunächst als bavian auf und ist dem niederländischen baviaan entlehnt. Er leitet sich wohl vom altfranzösischen babine ab, was Lippe oder Lefze bedeutet und auf die vorspringende Schnauze der Tiere anspielt; andere Quellen sehen seinen Ursprung im französischen babouin für Dummkopf oder kleines groteskes Tier.[1] Über die Zahl der Arten herrscht Uneinigkeit; einige Autoren fassen alle Tiere in einer einzigen Art zusammen, während sie von anderen in sechs eigenständige Arten eingeteilt werden.

Fotodownload

 

Das Layout programmieren (CSS)

Layout

  • Den Stammordner für die Website anlegen: affen
  • Im Ordner affen den Unterordner fotos anlegen
  • Auf gleicher Ebene wie affen einen Ordner für Materialien anlegen: affen_materialien (für unvorbereitete Fotos, Texte)
  • In Dreamweaver eine Site definieren: Site / Neue Site / Site-Name: Affen / Lokaler Site-Ordner: den Ordner affen auswählen
  • Neue Datei vom Seitentyp CSS anlegen und als style.css speichern
  • Die 3 Boxen kopf, navigation und inhalt definieren
@charset "utf-8";
/* CSS Document */

/* Boxen */

div#kopf{
	position:relative;
	width:800px; height:300px;
	margin-bottom:10px;
	margin-left:auto;
	margin-right:auto;
}

div#navigation{
	position:relative;
	width:796px; height:26px;
	border:2px #F90 solid;
	margin-bottom:10px;
	margin-left:auto;
	margin-right:auto;
}

div#inhalt{
	position:relative;
	width:796px; height:600px;
	border:2px #F90 solid;
	background-color:#FFC;
	margin-left:auto;
	margin-right:auto;
}
  • Zeile 4: ist ein Kommentar (kann genützt werden, um Überschriften oder Bemerkungen einzufügen)
  • Zeile 6: erzeugt die Box
  • Zeile 7: Positionierungsart (gibt an, wie man die Position der einzelnen Boxen am Bildschirm festlegt); relative (die Boxen werden der Reihe nach eingefügt, von oben nach unten; die genauere Positon wird mit margin-left, margin-right, margin-top, margin-bottom, float usw. bestimmt)
  • Zeile 9: bewirkt, dass die Box navigation von kopf um 10 px abrückt
  • Zeilen 10 und 11: zentriert die Box horizontal am Bildschirm
  • Zeile 16: Der Rahmen von 2 px vergrößert die Box auf 804 x 34 px; damit sie die endgültige Größe von 800 x 30 px erhält, müssen diese 4 px von der Breite und Höhe abgezogen werden (800 – 2 – 2 = 796) (30 – 2 – 2 = 26) Vgl. auch https://unterricht.ertl.today/layout-mit-dem-boxmodell/

Erste Seite (HTML) anlegen

  • In Dreamweaver eine neue Seite vom Typ HTML anlegen und als index.html speichern
  • Oben den Titel für diese Seite eintragen: Affenarten (wird im Webbrowser im Registerblatt oder in der Titelleiste angezeigt)
  • Im Eigenschaftsfenster rechts das Stylesheet anfügen
  • Über das Menü Einfügen / Layoutobjekte / Div-Tag / ID die Box Kopf einfügen
  • Den Mauszeiger rechts von der Kopfbox stellen
  • Die Box navigation einfügen
  • Den Mauszeiger rechts von der Box navigation stellen
  • Die Box inhalt einfügen
  • In der Box kopf den Mustertext restlos löschen
  • Speichern (Strg + S)

Die Fotos vorbereiten

Für die Box kopf: 800 x 300 px Die Auflösung des Bildes kann unverändert bleiben (spielt am Bildschirm keine Rolle). Wenn es sich, wie hier, um ein Foto handelt, wird es im JPG- oder PNG-Format im Foto-Ordner gespeichert. Die Dateigröße soll so klein wie möglich sein. Für die Box inhalt: 400 x 300 px

Kopfbild einfügen und die Seite vervielfältigen

  • Das Foto kopf.jpg aus dem Dateienfenster rechts in die Box kopf ziehen, dabei einen Alternativtext eingeben
  • Die Seite in einem Webbrowser (Internet-Explorer, Firefox, Chrome) öffen und prüfen, ob sie korrekt angezeigt wird
  • Die Seite vervielfältigen: Menü Datei / Speichern unter / gorillas.html Menü Datei /Speichern unter / paviane.html
  • Speichern

Die drei Seiten verlinken

  • In der Seite index.html den Mustertext aus der Box navigation löschen und ersetzen durch : Affen // Gorillas // Paviane
  • Das Wort Affen markieren und im Eigenschaftsfenster unten mit dem Symbol “Auf Datei zeigen” ins Dateienfenster ziehen zu5 index.html
  • Im Eigenschaftsfenster unter Ziel _self auswählen
  • Ebenso mit Gorillas und Paviane verfahren (Gorillas -> gorillas.html; Paviane -> paviane.html)
  • Speichern
  • Die gesamte Navigation kopieren (Markieren und Strg + C) und auf den zwei weiteren Seiten einfügen (Strg + V)
  • Im Webbrowser die Links testen

Die Inhalte der drei Seiten einfügen

  • Den Text für die index.html kopieren (hier von der Webseite, oben), in Dreamweaver über das Menü Bearberiten / Inhalte einfügen / Nur Text einfügen
  • Die Absätze, die beim Einfügen verloren gegangen sind, einfügen und „Affen“ als Überschrift 1 formatieren
  • Speichern
  • Bei den weiteren zwei Seiten ebenso verfahren
  • Bei gorillas.htm noch den Seitentitel „Gorillas“ eintragen, bei paviane.html „Paviane“

Hyperlinks formatieren

Hyperlinks können vier verschiedene Zustände haben, die jeweils anders formatiert werden können:

  • Ursprünglicher Link (a)
  • besuchter Link (a:visited)
  • Hover-Effekt (a:hover)
  • Aktiver Hyperlink (a:active)

Beim ursprünglichen Hyperlink (wenn eine Seite erstmals geöffnet wird) werden alle gewünschten Eigenschaften formatiert. Bei den weiteren Zuständen wird nur formatiert, was anders werden soll (typischerweise die Farbe).

/* Hyperlinks formatieren */

a{
	font-family:"Arial Black", Gadget, sans-serif;
	font-size:16px;
	color:#900;
	margin-left:10px;
	text-decoration:none;}
	
a:visited{
	color:#9C0;}
	
a:hover{
	color:#C06;}

Fotos in die Inhalts-Boxen einfügen

Die Fotos affen.jpg, gorillas.jpg und paviane.jpg sind schon vorbereitet worden (s. o.) und liegen bereits im Fotoordner.

  • Gehe zur Seite index.html
  • Ziehe das Foto affen.jpg aus dem Dateienfenster rechts an den Beginn des Textes.
  • Trage einen passenden Alternativtext ein.
  • Verfahre ebenso auf den zwei weiteren Seiten

Fotos per Klasse ausrichten

Eine Klasse ist CSS-Code, der bei Bedarf angewandt werden kann, z. B. um ein Foto links auszurichten. Die Klassen beginnt mit einem Punkt (.), gefolgt vom frei zu wählenden Klassennamen und den Eigenschaften mit den gewünschten Werten. Das Stylesheet wird um folgenden Code erweitert:

/* Klasse zum Ausrichten von Fotos */

.bild_links{
	float:left;
	margin-right:10px;
	margin-top:4px;
	margin-bottom:6px;
}
  • Die Eigenschaft float schiebt das Fotos nach links und lässt den Text rechts vorbeifließen.
  • Die margins halten einen Abstand zwischen Foto und Text.

Die Klasse den Fotos zuweisen:

  • Jetzt muss die Klassen noch den drei Fotos zugeweisen werden.
  • Dazu wird das erste Foto (index.html) angeklickt und unten im Eigenschaftsfenster die Klasse .bild_links zugewiesen.
  • Ebenso wird auf den zwei weiteren Fotos verfahren.

Weitere Schriftformatierungen

/* Schriftformate */

h1{
	font-family:Arial, Helvetica, sans-serif;
	font-size:32px;
	color:#009;
	margin-left:10px; margin-right:10px;}
	
p{
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	color:#033;
	margin-left:10px; margin-right:10px;}
  • h1 ist die größte Überschrift (h1 bis h6 sind möglich). p ist die normale Absatztext.
  • margin-left und margin-right bewirkt, dass der Text vom Rand der Box abrückt.

Kommentare hier




2-Spalten-Layout

Hier ein Muster-Layout für ein 2-Spalten-Layout mit horizontaler Zentrierung:

2-Spalten-Layout

CSS

div#container{
 width:820px;
 height:auto;
 margin-left:auto; margin-right:auto;
 }

div#kopf{
 position:relative;
 width:820px; height:110px;
 margin-bottom:5px;
 background-color:#CFF;
 }

div#inhalt{
 position:relative;
 width:655px; height:500px;
 background-color:#3F0;
 float:left;
 }

div#navi{
 position:relative;
 width:160px; height:500px;
 background-color:#3F0;
 float:right;
}
Erklärungen:

Container

wird zur Zentrierung gebraucht und nimmt die anderen Boxen kopf, inhalt und navi auf. Er muss genauso breit sein, wie die Seite werden soll, hier 820 px.
Height kann man auf “auto” oder “100%” stellen, oder die Höhe wie sonst in px angeben (so hoch, dass die drei Boxen von der Höhe her Platz haben: hier 110 px + 5px + 500 px = 615 px; man kann die Box aber auch höher machen, da sie unsichtbar ist).

Inhalt

soll im Container links ausgerichtet werden und bekommt daher ein float:left.

Navi

soll im Container rechts ausgerichet werden und bekommt daher ein float:right.
Die Breite von navi ergibt sich aus: 655 px + 5px + ??? = 820 px.

HTML

div id="container">
   <div id="kopf"> …</div>
   <div id="inhalt"> … </div>
   <div id="navi"> … </div>
</div>
Erklärung

Zuerst wird container eingefügt. Dann folgt kopf (der Mauszeiger steht dazu in container!), dann inhalt (der Mauszeiger steht in container, aber nicht in kopf), dann navi (der Mauszeiger steht in container, aber nicht in kopf und inhalt).
Wenn das in der Entwurfsansicht nicht möglich ist, in die Codeansicht wechseln und dort die Boxen einfügen.




Leistungen von Providern (Internetdienstanbietern)

Internetzugang

Diese Leistung besteht aus der Bereitstellung von Internet-Konnektivität, also dem Transfer von IP-Paketen in und aus dem Internet. Ohne diese Leistung kann man das Internet nicht benutzen. Die Verbindung kann mit Funktechnik, Wählleitungen, Standleitungen oder Breitbandleitungen umgesetzt werden.

Manche dieser Provider betreiben nur globale Internetleitungen (Backbones), andere betreiben überregionale Leitungen und wieder andere nur lokale. Die kleinen Anbieter mieten sich Leistungskapazitäten bei den großen.

Links:

>Seekabel MS

>Seekabel Infos

>Interaktive Karte der Seekabel

Hosting

Webhosting (Webspace-Provider)

Webhoster (z. B. World4you, one.com, easyname.com, 1&1) stellen gegen Bezahlung Webserver mit Anbindung ans Internet zur Verfügung. Das beginnt mit einfachem Speicherplatz für Webseiten mit Bildern und geht über Datenbanken bis zu Web-Content-Management-Systemen (z. B. WordPress, Typo3). Die Webserver-Software (Apache, Internet Informaton-Server) nimmt Anfragen nach Seiten entgegen und liefert diese aus.

Die Kunden bekommen einen Zugang zu ihrem Bereich am Webserver (Benutzername, Passwort), sodass sie ihre Inhalte auf den Server hochladen können oder Web-Anwendungen (z. B. WordPress) installieren können.

Im billigsten Fall (aber einigen Euros pro Monat) teilt man sich einen Webserver mit vielen anderen Kunden, was die Performance bremst. Im besseren Fall mietet man sich einen virtuellen Webserver (auf einem physischen Server laufen mehrere virtuelle Webserver) mit einem bestimmten Prozessor, Speicherplatz und Arbeitsspeicher. Im besten und teuersten Fall mietet man einen oder mehrere physische Server und hat deren gesamte Leistung für sich allein.

Links:

>Easyname Webhoster

 

Mail-Hosting

Mail-Hoster stellen Mail-Dienste von Mailservern zur Verfügung (z. B. Google, GMX, Microsoft, Yahoo, posteo.de (kostenpflichtig), protonmail.com (kostenpflichtig)). Meist bieten Webhoster auch Mail-Dienste an. Diese Dienste enthalten im Kern das Versenden und Empfangen von Emails (durchgeführt mittels Email-Client-Programmen oder über das Webinterface) und können auch Spam- und Virenschutz beinhalten.

Server-Hosting

Server-Hosting ist der Betrieb von virtuellen und dedizierten, also physischen, Servern (z. B. Webservern), optional mit wichtigen Zusatzleistungen wie Wartung und Datensicherung. Diese Server mieten üblicherweise nur Firmen. Als privater Websitebetreiber teilt man sich aus Kostengründen einen Server mit anderen Kunden.

Domain-Hosting

Domain-Hosting (Registrierung und Anbieten einer Domain) umfasst die Registrierung und meist zusätzlich auch den Betrieb von Domains innerhalb des Domain Name Systems (die Domain-Hoster stellen die Verbindung zwischen der IP-des Webservers und der Domain her, sodass der Webserver mit der Website gefunden werden kann).

Links:

>Godaddy Domainhoster

Content-Provider (Inhaltsanbieter)

Content-Provider stellten eigene redaktionelle Beiträge und Inhalte zur Verfügung oder veröffentlichen Inhalte von anderen.

Application Service-Provider

Ein Anwendungs-Anbieter (Application Service-Provider) stellt Anwendungen im Internet zur Verfügung (z. B. Office im Internet, Datenbankanwendungen).

[

>Siehe Cloud-Dienste

]

Links:

Vgl.: https://de.wikipedia.org/wiki/Internetdienstanbieter




Rechtliche Aspekte des Webdesigns

Urheberrechtliche Dinge

Ein Webdienstleister (Firma, die Websites gestaltet) kann sein Copyright-Vermerk auf einer Website anbringen, sofern diese Werkcharaker hat. Er muss es jedoch nicht, weil man als Schöpfer eines Werkes automatisch UrheberIn von diesem ist.

Wenn ein anderer Webdienstleister eine Website zur weiteren Betreuung übernimmt, darf er das Copyright-Vermerk des Urhebers nicht entfernen (solange das ursprüngiche Werk bestehen bleibt), kann aber den Zusatz “Bearbeitet von …” hinzufügen.

Haftung für Links zu anderen Websites

Links sind generell unbedenklich, soweit sie nicht den irreführenden Eindruck erwecken, der Inhalt der gelinkten Seite gehöre zur eigenen Website. Um das sicher zu gewährleisten, lässt man das Linkziel in einem neuen Browserfenster öffnen (target=”_blank”), was aber rechtlich nicht notwenig ist, oder man nennt im Linktext den Fremdanbieter (z. B. “Humanberuflich Schulen” auf hum.at). Letzteres empfiehlt sich bei Links auf PDF-Dateien.

Man darf grundsätzlich auch auf Musik-Dateien verlinken, wenn einem nicht bekannt ist, dass diese unerlaubt online gestellt sind. Wird einem das bekannt, muss man die Links löschen. Ähnlich verhält es sich mit Links auf Seiten mit rechtswidrigen Inhalten (illegale Downloadseiten, Seiten mit Tools zur Umgehung des Kopierschutzes). Hier kann man aber eher der Beihilfe zur Rechtsverletzung bezichtigt werden.

Zusammenfassend kann gesagt werden, dass mit Vorsatz und wissentlich auf unrechtmäßige Inhalte verlinken muss, um strafrechtlich belangt zu werden.

Haftung und Klage bei Urheberrechtsverletzungn

Man kann wegen Urheberrechtsverletzungen sofort geklagt werden, ohne vorher darauf hingewiesen zu werden (Unterlassungsaufforderung), auch wenn man das betreffend Werk sofort entfernt, weil automatisch Wiederholungsgefahr angenommen wird. Auch Unwissenheit (nicht Wissen, dass man gegen die Urheberschaft von jemandem verstößt) schützt nicht vor Strafe.