Übung 03 ist die erste Übung mit sinnvollem Inhalt, zum Thema Wintersport, und mit Fotos. Die Fotos und der Text können hier heruntergeladen werden: Materialien

• Den lokalen Site-Ordner \uebung03 anlegen, ebenso den Foto-Ordner \fotos
• Den Materialien_Ordner anlegen (uebung03_materialien) und die Materialien dowloaden und im Materialien-Ordner entpacken
• Die Seite index.html erstellen
• Die Seite alpin.html erstellen
• Die Seite nordisch.thml erstellen
• Bei allen drei Seiten passende Titel eintragen

• Die Inhalte aus der Textdatei text_inhalt in die drei Seiten kopieren und die Formate zuweisen (sind in Klammern angegeben)
• Unterhalb des Textes jeweils die Namen für die Links eintragen:
  Wintersport | Alpin | Nordisch
• Die Verlinkung durchführen, Ziel ist jeweils _self

Die Fotos vorbereiten und einfügen

• Die Fotos alpin.jpg, home.jpg und nordisch.jpg in Photoshop öffnen und ihre Größe reduzieren:
  Breite: 900 px
• Die drei bearbeiteten Fotos im Ordner \fotos speichern
• Zu DW wechseln und die index.html auswählen
• Mauszeiger an den Anfang des ersten Absatzes stellen
• Über Einfügen / Foto home.jpg einfügen, bei Alternativtext Wintersport eintragen
• Speichern
• Zu alpin.html wechseln und das Foto alpin.jpg einfügen
• Zu nordisch.html wechseln und nordisch.jpg einfügen

Formatierungen

• h1, h2 und p formatieren (nach eigenen Vorstellungen Schriftart, Größe und Farbe festlegen)
• Die Hyperlinks formatieren:
  a
  a:visited
  a:hover

In der Übung 02 geht es um die Formatierung der Schriften (Feinlayout). Zum Verständnis der Methode ist der Artikel Zusammenspiel von HTML -und CSS heranzuziehen.

In Übersicht: Die Formatierung der Schriften (Feinlayout) geschieht in einer eigens anzulegenden Datei mit der Endung .css (z. B. kann sie style.css genannt werden). In diese werden die Formatierungen eingetragen, z. B. Überschrift 1 soll grün sein, Überschrift 2 soll rot sein usw.

An jede einzelne HTML-Seite muss das Stylesheet style.css angefügt werden.

Schritte zur Übung 02:

• Anlegen der Seite index.html
• Einfügen von Text:
  “Überschrift 1” (als Überschrift 1 formatieren)
  Einige Sätze Dummy-Text einfügen
  “Überschrift 2” einfügen (als Überschrift 2 formatieren)

• Über Datei / Neu ein leeres Stylesheet anlegen
• Mit dem Namen style.css speichern

• Zur index.html wechseln
• Rechts im Eigenschaftsfenster das Symbol für Stylesheet anfügen suchen und aktivieren
• Durchsuchen wählen und style.css auwählen, OK und Speichern
  Die Seite und das Stylesheet sind jetzt verbunden, sobald im Stylesheet ein Format eingetragen wird, wirkt es auf der Seite.

Formatierungen für Überschrift 1 (h1), Absatztext (p) und Überschrift 2 (h2) vornehmen

Im Stylesheet folgenden Text eintragen, in dieser Formatierung mit den Zeilenschaltungen und Einzügen. Dabei unbedingt die Begriffe aus der Liste, die DW automatisch öffnet, mit Enter übernehmen:

h1{
   font-family:Arial, Helvetica, sans-serif;
   font-size:36px;
   color:red;
}

h2{
  font-family:Arial, Helvetica, sans-serif;
  font-size:26px;
  color:green;
} 

p{
  font-family:Arial, Helvetica, sans-serif;
  font-size:16px;
  color:#000000; 
}

• Wenn der Text eingetragen ist, speichern.
  Ab jetzt wird der Texte von index.html wie im Stylesheet festgelegt angezeigt.

Das sind die Schritte für Übung 01:
Als weitere Hilfe können die Artikel Adobe Dreamweaver und und Teile von Eine Website programmieren – Schritte heranzgehogen werden.

• Im Windows-Dateiexplorer den lokalen Stammordner für die Übung 01 anlegen: \uebung01
• Im Ordner \uebung01 den Unterordner \fotos anlegen
• Auf gleicher Ebene wie \uebung01 den Materialien-Ordner anlegen: \uebung01_materialien
  (Er dient dazu, Materialien für die Website zunächst zu sammeln, z. B. Fotos und Texte. Erst die vorbereiteten Fotos werden später im Ordner \fotos gespeichert.

• Adobe Dreamweaver starten
• Im Hauptmenü Site / Neue Site wählen
• Unter Site-Name Übung01 eintragen
• Unter Lokaler Site-Ordner mit dem Symbol Ordner suchen den Ordner \uebung01 auswählen und bestätigen und Speichern.
  Jetzt speichert DW automatisch im Ordner \uebung01.

• Im Startfenster von DW eine leere HTML-Seite erstellen
• Mit Strg+S sofort speichern/Namen vergeben: index.html
  Es muss darauf geachtet werden, dass die Dateiendung .html auch dort steht.
• Text eingeben bzw. kopieren:
  Willkommen! – Enter für neuen Absatz
  Ein paar Sätze Dummy-Text einfügen (von der Website blindtextgenerator.com kopieren) – Enter für neuen Absatz
• Namen für die Hyperlinks eingeben:
  Home | Über mich | Kontakt
• Willkommen! als Überschrift 1 formatieren: im Eigenschaftsfenster unten links unter Format Überschrift 1 auswählen
• In der Symbolleiste unter Titel den Titel der Seite eintragen: Willkommen!
• Speichern nicht vergessen.

• Die Seite uebermich.html erstellen
• Überschrift: eigener Name (als Überschrift 1 formatieren)
• Einen Einleitungssatz zu den eigenen Hobbies schreiben
• Eine Aufzählung mit einigen Hobbies machen:
  Im Eigenschaftsfenster unten Ungeordnete Liste wählen und schreiben
• Am Ende der Liste mit zweimaligem Enter die Liste beenden und so zum nächsten Absatz gelangen
• Ein paar Sätze Dummy-Text einfügen
• Die Namen für die Navigation einfügen

• Die Seite kontakt.html erstellen
• Überschrift: Kontakt
• Dann Kontaktdaten einfügen: Name, Strasse, PLZ Ort, Telefon, Email
  Zwischen Strasse und PLZ Ort kommt eine neue Zeile: Umschalt+Enter, ebenso zwischen Telefon und Email
• Schließlich wieder die Namen für die Hyperlinks

Verlinkung der drei Seiten

• Mit der Seite index.html beginnen
• Das Wort Home exakt markieren
• Im Eigenschaftsfenster mit dem Symbol Auf Datei zeigen (Spule) auf die Datei index.html rechts im Dateien-Fenster ziehen und loslassen
• Im Eigenschaftsfenster bei Ziel _self einstellen
• Über mich markieren und mit der Spule zu uebermich.html ziehen und als Ziel _self auswählen
• Schließlich noch Kontakt
• Speichern nicht vergessen
• Das Gleiche ist mit den zwei weiteren Seiten uebermich.html und kontakt.html zu tun

Beim Desktop-Publishing handelt es sich um das Vorbereiten und Veröffentlichen von Inhalten in gedruckter Form. Beim Online-Publishing geht es um die Vorbereitung und Veröffentlichung von Inhalten im Internet (die nach der Veröffentlichung “online” sind). Veröffentlichen im Internet geschieht beim Posten von Inhalten in sozialen Netzwerken, von Kommentaren zu Artikeln, von Filmen auf Videoplattformen, und beim Gestalten von Websites, wenn sie auf Webservern veröffentlicht (hochgeladen) werden.

Begriffe

WEBSITE

---

(alle Inhalte, die meist auf einzelne Seiten aufgeteilt sind)

(die einzelnen Seiten sind miteinander verlinkt)

---

Webserver

Ein Webserver ist ein Computer,

• der ständig mit dem Internet verbunden ist (braucht eine leistungsfähig Anbindung, besonders auch eine hohe Uploadgeschwindigkeit),
• der über das Internet erreichbar ist (öffentlich, durch öffentliche und statische (gleichbleibende) IP-Adresse; die IP-Adresse ist die eigentliche Adresse, mit der der Server gefunden wird; vgl. die Postadresse; jede IP-Adresse darf nur einmal weltweit verwendet werden),
• der die Inhalte einer Website gespeichert hat (z. B. in Form von einzelnen HTML-Seiten)
• und der diese auf Anforderung durch einen Benutzer/eine Benutzerin, auch Client genannt) ausliefert.

  Der Client verwendet dafür einen Webbrowser, der die Anforderung nach der Website schickt und die ausgelieferten Inhalte am Bildschirm darstellt. Der Server braucht für dieses Handling auch spezielle Software (Apache-Webserver, MS Internet-Informatons-Server (IIS)).

Das Internet sehr vereinfacht

• Der Client (z. B. du) startet auf seinem Laptop den Webbrowser Firefox und gibt in der Adresszeile ein: www.orf.at
  www.orf.at ist die Domain des ORF. Der Webserver des ORF wird aber mithilfe seiner IP-Adresse gefunden.
  (Die Domains wurden erfunden, weil man sie sich leichter merken kann als Nummern.)
• Es wird als nächstes bei einem Dynamic-Name-Server (DNS-Server) angefragt, welche IP-Adresse der ORF-Server hat. Die DNS-Server kennen alle Domains mit den dazugehörigen IP-Adressen.
• Erst jetzt kann die Anfrage nach www.orf.at zum Webserver des ORF geschickt werden. Mitgeschickt wird die eigene IP-Adresse.
• Die angeforderte ORF-Seite wird zum Client (der aufgrund der IP-Adresse gefunden wird) geschickt und ist im Webbrowser zu sehen.

Vorratsdatenspeicherung

Unter Vorratsdatenspeicherung (kurz VDS) versteht man die Speicherung von personenbezogenen Daten, die bei der Telekommunikation anfallen, zur späteren Verwendung durch die Strafverfolgungs- und allenfalls durch die Sicherheitsbehörden. Die Vorratsdatenspeicherung soll grundsätzlich zur Aufklärung von schweren Straftaten dienen. Im Gegensatz zu anderen Formen der Datenbeschaffung zur Aufklärung von Straftaten wie Rufnummernrückerfassung, Abhören von Telefonen oder Lauschangriffen werden bei der Vorratsdatenspeicherung die Daten aller Kommunikationsvorgänge ohne konkreten Verdacht “auf Vorrat” gespeichert, damit sie später für Ermittlungen zur Verfügung stehen. Die Vorratsdatenspeicherung zielt nicht auf die Speicherung von Gesprächsinhalten ab, sondern auf die Speicherung von Verbindungs- und Ortungsdaten. (http://www.dsb.gv.at/site/7713/default.aspx)

Eine EU-Richtlinie, die 2006 im Geiste der Terrorbekämpfung verabschiedet wurde, verpflichtete alle EU-Staaten, ein Gesetz zur Speicherung bestimmter Daten auf Vorrat (Vorratsdatenspeicherung) auszuarbeiten.

Österreich kam der Verpflichtung nun nach. Im April 2012 trat in Österreich das Vorratsdatenspeicherungs-Gesetz in Kraft. Seitdem mußten Anbieter von Telekomdiensten die Kommunikationsdaten ihrer Kunden für mindestens ein halbes Jahr speichern – ob diese nun per Festnetz und Handy telefonieren, E-Mails und SMS verschicken oder im Internet surfen.
Justiz und Polizei wollten auf diese Daten zwecks Verbrechensbekämpfung zugreifen. Die Staatsanwaltschaft brauchte dafür eine richterliche Genehmigung, überdies musste die verdächtigte Tat mit mehr als einem Jahr Gefängnis bedroht sein. Die Polizei konnte in akuten Situationen – etwa Gefahr für Leib und Leben – aber auch ohne Zustimmung eines Richters Auskünfte von den Telekomfirmen verlangen. Jede Abfrage musste einem Rechtsschutzbeauftragten gemeldet werden.

Aus den gesammelten Daten ließ sich herauslesen, wer mit wem wann wie lange telefoniert hat – und auch wo, da sich Handys ja immer in eine lokale Funkzelle einwählen. Das Gleiche galt für verschickte SMS, MMS und E-Mails. Ebenso ließ sich eruieren, wann und wie lange sich ein bestimmter User ins Internet eingewählt hat. Inhalte wurden laut Gesetz nicht gespeichert.

Der österreichische Verfassungsgerichtshof hat die Bestimmungen zur Vorratsdatenspeicherung mit der Entscheidung G 47/2012-49, G 59/2012-38, G 62/2012-46, G 70/2012-40, G 71/2012-36 vom 27. Juni 2014 für verfassungswidrig erklärt.

( ► Vgl. http://derstandard.at/1333185073067/Der-Staat-speichert-mit-Was-man-ueber-die-Vorratsdatenspeicherung-wissen-muss)

Diskussion

Pro: Die Unterstützer finden sich bei der Polizei, den Geheimdiensten und Lieferanten der Überwachungstechnologie.

• Schwere Verbrechen können im Vorfeld verhindert werden
• schwere Verbrechen können aufgeklärt werden
• die Sicherheit für die BürgerInnen wächst

Contra:

• Unbescholtene BürgerInnen werden unter Generalverdacht gestellt und überwacht
• ihre Privatsphäre wird beeinträchtigt, was mehrfach gegen Verfassungsrecht verstößt
• für Kriminele ist es ein Leichtes, das Gesetz zu umgehen (die freie Software “Tor” schickt die Daten über verschiedene Umwege, sodass der Verkehr schwer nachvollziehbar ist; Email-Provider mit einem Jahresumsatz unter 277.000 Euro sind nicht zur Datenspeicherung verpflichtet, das gleiche gilt für VOIP-Anbieter, selbst betriebene Mailserver, Verwendung anonymer SIM-Karten kombiniert mit häufigen Handy-Wechseln, Verwendung eines VPN (Virtual Private Network), bei dem Daten über einen zwischengeschalteten Server gehen, der ev. nichts aufzeichnet, Gratis-WLANS, …)
• der Gewinn an Sicherheit, mit dem die Einschränkungen der Privatsphäre gerechtfertigt werden, dürfte gering ausfallen (Studien einiger europäischer Staaten belegen das)

ARGE Daten (Hans Zeger): Gut gemeint, aber …

“Das Ganze ist natürlich gut gemeint”, sagte Arge Daten-Leiter Hans Zeger. “Da klingt mit, dass es eigentlich nicht gut gemacht ist.” Praktikabel wäre seiner Ansicht nach nur, von der verdachtsunabhängigen Datenspeicherung völlig abzugehen. “Das ist auch die einzig langfristig grundrechtlich vertretbare Vorgangsweise”, sagte er. Die geplante Ausnahmeliste für Berufsgeheimnisträger sei zwar grundsätzlich positiv, aber unpraktikabel und bei weitem nicht ausreichend.

Anlassbezogene Datenspeicherung

Das Überwachungspaket der österreichischen Regierung von 2018 sieht als Alternative zur aufgehobenen Vorratsdatenspeicherung eine anlassbezogene Datenspeicherung in Verdachtsfällen vor. Telekommunikationsfirmen können beim Verdacht einer Straftat angewiesen werden, Daten bis zu zwölf Monate zu speichern (Quick-freeze). Sollte sich ein Anfangsverdacht nicht bewahrheiten, wird die Telekommunikationsfirma angewiesen, die Datenspeicherung zu beenden. Verdächtige müssen über diesen Vorgang informiert werden.

► Vgl. https://www.profil.at/oesterreich/ueberwachungspaket-regierungsplaene-detail-9120571

Weitere Überwachungsmöglichkeiten

• Überwachung von Messenger-Diensten wie Skype und Whatsapp:
  Da die Datenübertragung von solchen Diensten heute meist verschlüsselt erfolgt, müssen die Daten bei der Eingabe am Gerät vor der Verschlüsselung (Smartphone, Tablet, PC) abgegriffen werden. Das geschieht durch die unbemerkte Remote-Installation eines geeigneten Programms (“Bundestrojaner”) am Gerät. Voraussetzung: Straftaten mit einer Strafobergrenze von mehr als zehn Jahren, Verdacht auf terroristische Straftaten, Straftaten gegen Leib und Leben, Straftaten gegen sie sexuelle Integrität mit Strafobergrenzen von mehr als fünf Jahren.
• Ausweitung der Video- und Tonüberwachung:
  Öffentliche und private Einrichtungen, die einen öffentlichen Versorgungsauftrag erfüllen (Verkehrsbetreibe, Flughäfen, Bahnhöfe), müssen Video- und Tonaufnahmen vier Wochen speichern. Behörden dürfen auf diese Daten zugreifen. Damit gibt es eine zentrale, staatliche Kontrolle aller öffentlichen Plätze.
  Ebenso sollen Kennzeichenerkennungssysteme ausgebaut werden (Erfassung des Kennzeichens, der Automarke, des Typs, der Farbe). Privates Bild- und Videomaterial darf auch verwendet werden.
• Ortung von Handys, Verbot von anonymen Prepaid-Karten:
  Mit IMSI-Catchern dürfen Handys ohne Mithilfe des Netzbetreibers lokalisiert werden. Gesprächsinhalte sollen nicht abgehört werden, was aber Kritiker des Pakets doch befürchten. Ab 2019 sind anonyme SIM-Karten verboten. Käufer müssen ihre Identität registrieren.
• Lockerung des Briefgeheimnisses:
  Briefe dürfen schon beschlagnahmt werden, wenn eine Straftat auch nur mit mehr als einem Jahr Freiheitsstrafe bedroht ist.

► Vgl. https://derstandard.at/2000074708694/Regierung-beschliesst-Bundestrojaner-und-Ende-des-Briefgeheimnisses
► Vgl. https://derstandard.at/2000076972307/Verfassungsdienst-zerpflueckt-Ueberwachungspaket
► Vgl. https://www.wienerzeitung.at/dossiers/netzpolitik/955459_Verfassungsdienst-hat-Bedenken-wegen-Ueberwachungspaket.html

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.

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

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:

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

Ü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. ]

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

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 2²⁴, 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.

Wenn die Anzahl der Fotos in seiner Sammlung wächst, ist es wichtig, sie organisiert abzulegen, sodass bestimmte Fotos leicht gefunden werden können.

Ordnerstruktur

Eine Möglichkeit ist, sich eine Ordnerstruktur zu schaffen, die Fotos auffindbar machen.

Beispiel:

Datum_Titel
z. B. 2019-06-13_Zeugnisfeier der FW

Fotos verschlagworten (Taggen)

Eine Ordnerstruktur allein stößt bald an ihre Grenzen; denn es ist damit nicht möglich, einzelne Fotos, z. B. Fotos mit einer Blume, zu finden.

Für diesen Zweck gibt es Programme, mit denen jedem Foto Schlagworte (Tags) zugewiesen werden können. Diese Informationen werden in einer Datenbank gespeichert und/oder können auch in die einzelnen Fotodateien hineingeschreiben werden.

Beispiel:

Natur / Blume / Primel

Soziale Beziehungsnetzwerke

• sprechen ein breites Spektrum an Usern an
• sind nicht auf ein bestimmtes Thema oder eine bestimmte Zielgruppe festgelegt
• Kommunikation, Liken, Teilen von Inhalten, die dem eigenen Interesse entsprechen
• dadurch werden die Interessen von Usern nachvollziehbar und Werbung kann danach abgestimmt werden

Beispiel: Facebook 

• verdrängte das Ende 2005 erschienene deutschsprachige studiVZ (meinVZ, schülerVZ) in Deutschland/Österreich vom ersten Platz
• ist nach wie vor die unangefochtene Nummer 1
• wird von Firmen auch zum viralen Marketing eingesetzt und dieses funktioniert, sofern die Inhalte hochwertig und authentisch sind

Soziale Bildnetzwerke (Photo-Sharing-Plattformen)

• im Fokus stehen Bilder und Videos
• Kommentare nur als Beiwerk

Beispiel: Instagram

• klar im Mittelpunkt ist das Bild (im Unterschied zu Facebook)
• Bildbearbeitungsfunktionen der App
• Kategorisierung der Bilder durch Hashtags (# mit folgender Bildbeschreibung)
• Marketinginstrument für Unternehmen
• Produktplatzierung durch Influencer als Werbemethode
• seit 2016 Funktion “Instagram Stories”
• 2012 von Facebook aufgekauft

Beispiel: Pinterest

• Nutzer sammeln auf eigenen Pinwänden Bilder und Beiträge anderer, Möglichkeit der thematischen Strukturierung
• Funktion “Folgen” mit der Möglichkeit, neue Pins im Newsfeed zu erhalten
• stark in den Bereichen Mode, Wohnen, Lebensmittel oder Reisen/Tourismus
• fungiert als virtuelle Pinwand und nicht sosehr als Kommunikationsmittel
• für Firmen Mittel der Kundenbindung und zur Stärkung der eigenen Marke

Beispiel: Snapchat

• Image-Messaging-App zum Versand von Fotos und kurzen Videos
• die am Smartphone/Tablet gestaltet werden können und sich 10 Sekunden nach dem Abspielen automatisch löschen (mit Trick zu umgehen)
• “My-Story-Funktion” zur Bildung von Geschichten mit chronologisch gereihten Bildern, automatische Löschung nach 24 Stunden
• Versenden von Textnachrichten, (Video-)Telefonie
• für Marktetingzwecke schwer einsetzbar

Beispiel: Flickr

• für Profi- und AmateurfotografInnen
• Bilder und Kurzvideos, Verschlagwortung
• Kommentierfunktion

Blogging-Netzwerke

• Ursprung in der Blogging-Szene
• Weiterentwicklung in Richtung sozialer Netzwerke mit der Möglichkeit, Inhalte (News, Links, Bilder, Videos) zu teilen und Folgend-Funktion mit Timeline
• Einsehbarkeit aller Inhalte auch für nicht registrierte BenutzerInnen

Beispiel: Twitter

• Mikro-Blogging-Dienst mit Texten von maximal 280 Zeichen (ursprünglich 140)
• die eigenen Beiträge (Tweets) tauchen chronologisch im eigenen Profil auf, die der Abonnenten (“Follower”) im News-Feed
• durch das @ können NutzerInnen direkt angesprochen werden, durch # können Beiträge Themen zugeordnet werden
• Unternehmer nutzen Twitter zu Marketingzwecken, indem sie durch angehängte Links zu Fotos, Videos oder Netzadressen leiten
• Dominanz von Medien-Themen (TV, Internet, Musik)

Beispiel: Tumblr

• Blogging-Plattform für Texte in voller Länge und Bilder
• Tendenz zur Entwicklung in Richtig soziales Netzwerk, z. B. durch Einführung eines Messengers

Professionelle soziale Netzwerke

• zum Austausch zwischen Geschäftspartnern, Mitarbeitern sowie zwischen Bewerbern und Unternehmen (Unternehmen verbieten für diese Zwecke oft die Nutzung von Facebook)

Beispiel: Xing

• zum Ausbau des beruflichen Netzwerkes, der Jobsuche und Kontaktverwaltung
• Anlaufstelle für Headhunter, AuftraggeberInnen und ArbeitgeberInnen auf der Suche nach MitarbeiterInnen

Beispiel: LinkedIn

• zum Auf- und Ausbau des eigenen Netzwerkes
• zur Unterstützung bei der Weiterbildung und beruflichen Neuorientierung
• als interner Nachrichtendienst und zur Wissensvermittlung durch andere Mitglieder

Soziale Videonetzwerke

Beispiel: Youtube

• große Reichweite (6 Milliarden Stunden Videomaterial pro Monat, 100 Stunden pro Minute)
• Marketing
• Influencer

Vimeo

• professionellere und hochwertigere Filmproduktionen
• Marketing

Soziale Medien als Marketing-Instrument haben nur Sinn, wenn die Netzwerke eingesetzt werden, die zur Zielgruppe passen.

Vgl. https://www.ionos.at/digitalguide/online-marketing/social-media/die-wichtigsten-social-media-plattformen/