3.1 Webseiten ins Netz stellen

Wie stelle ich es an, dass jeder Mensch mit Internetanschluss meine selbst geschriebenen HTML-Seiten in einem Browser betrachten kann?

3.1.1 Allgemein

Wir erinnern uns: Wenn ein Benutzer eine Internetseite in seinem Browser aufruft, schickt der Browser eine Anfrage mit einem bestimmten Adresse (eine URL, die auch einen Dateipfad enthalten kann) ins Internet. Im Internet wird ein Server identifiziert, der diese Anfrage bekommt.

Der Server geht auf ein bestimmtes Verzeichnis und sucht nun nach dem in der Anfrage angegebenen Pfad. Wenn der Pfad ein Verzeichnis ist, wird nach einer Datei namens index.html gesucht. Ist die Datei gefunden, schickt der Server diese HTML-Datei zurück an den Browser des Benutzers.

Anfrage und Antwort

Prinzipiell müssen Sie also Ihre HTML-Datei (später werden es mehrere Dateien sein) auf einen Server hochladen. Dieser Server hat einen großen Speicher, der ähnlich organisiert ist wie Ihre Festplatte. Wenn Sie sich auf dem Server "eingemietet" haben, bekomment Sie ein bestimmtes Unterverzeichnis zugeordnet.

3.1.2 Server der Hochschule Augsburg

Als Student/in der Hochschule Augsburg haben Sie ganz automatisch ein Unterverzeichnis im System des Rechenzentrums, das so heißt wie Ihr Login-Name, z.B. "schmidt". Innerhalb Ihres Verzeichnis gibt es ein weiteres Verzeichnis namens "WWW". Dies ist das Verzeichnis, das der Hochschulserver durchsucht, wenn jemand die URL

www.hs-augsburg.de/~schmidt

in den Browser eingibt. Bei obiger URL ergänzt der Browser automatisch ein "index.html". Der Benutzer kann aber beliebige Pfade eingeben, z.B.

www.hs-augsburg.de/~schmidt/multimedia/testseiten/foo.html

Bei dieser URL würde der Server in Ihrem Benutzerverzeichnis nach der Datei

multimedia/testseiten/foo.html

suchen.

3.1.3 Dateien hochladen mit FTP

(Schauen Sie auch gern beim Rechenzentrum direkt nach unter Eigene Homepage.)

Wie bekommen Sie Ihre Datei(en) jetzt in Ihr Benutzerverzeichnis auf dem Hochschulserver? Dazu nutzen Sie einen Dienst namens FTP (File Transfer Protocol) oder - besser - SFTP (Secure FTP). Dazu benötigen Sie eine Software wie FileZilla (Windows, Mac, Linux) oder WinSCP (nur Windows).

Wir zeigen hier, wie man mit FileZilla verfährt.

Schritt 1: FileZilla starten

Nach dem Start der Software sehen Sie die Oberfläche:

FileZilla

Schritt 2: Servermanager öffnen

Klicken Sie auf das Icon für den Servermanager:

FileZilla

Schritt 3: Server anlegen

Jetzt öffnet sich dieses Fenster:

FileZilla-Servermanager

Klicken Sie auf "Neuer Server" und geben Sie im linken Teil dem Server einen Namen (z.B. "Hochschule Augsburg"). Wenn Sie weitere Server in Anspruch nehmen (z.B. einen kommerziellen Provider), können Sie hier weitere Server anlegen.

Dann füllen Sie rechts die Felder "Server", "Protokoll", "Verbindungsart", "Benutzer" und "Passwort" wie im Screenshot aus. Verwenden Sie Ihre RZ-Kennung und -Passwort. Setzen Sie das Feld Protokoll auf SFTP (= sicheres FTP). Klicken Sie dann auf "Verbinden".

In Zukunft müssen Sie nur noch den Servermanager öffnen, den von Ihnen angelegten Server auswählen und auf "Verbinden" klicken.

Schritt 4: Dateien hochladen

Sobald die Verbindung steht, sehen Sie:

FileZilla, verbunden

Die linke Seite zeigt die Inhalte Ihrer Festplatte, die rechte Seite die Inhalte Ihres Bereichs auf dem Hochschulserver.

Wichtig: Erstellen Sie als erstes auf der rechten Seite innerhalb Ihres Home-Verzeichnisses (z.B. "schmidt") ein Unterverzeichnis namens WWW (Großschreibung beachten).

Alle Datein, die Sie dort hinein kopieren, sind jetzt weltweit lesbar! Achten Sie also auf Copyright-Fragen. Gehen Sie also auf der linken Seite auf Ihr Projekt und kopieren Sie die gewünschten Dateien auf die rechten Seite (inklusive Unterverzeichnisse z.B. für Bilder). Sie können Ihre Dateien von Ihrer Festplatte (linker Bereich) direkt per Drag-and-drop in den Speicher des Servers (rechter Bereich) ziehen.

3.1.4 Eigene Domain

Wenn Sie eine eigene Domain wie "www.harald-schmidt.de" oder "www.designclubaugsburg.net" haben möchten, auf der Ihre Webseite stehen soll, dann müssen Sie an einen Provider wenden, um diese zu mieten. Korrekt heißt dieser Internet Service Provider oder ISP oder - auf Deutsch - Internetdienstanbieter. Man sagt auch, der Provider hostet Ihre Webseite (die Dienstleistung wird Webhosting genannt).

Um einen Provider zu finden, suchen Sie einfach nach Vergleichsberichten (Stichworte Provider, Webhosting, Vergleich) und schauen Sie sich die Kosten und evtl. Erfahrungsberichte an.

Wichtig ist der Unterschied zwischen dem Provider (eine Firma mit Servern und Festplatten im Keller) und der Domäne (z.B. harald-schmidt.de). Die Domäne mieten Sie nämlich eigentlich bei der zuständigen Registratur. Die Zuständigkeit ergibt sich aus der Top-Level-Domäne (zum Beispiel ist "de" eine Top-Level-Domäne oder auch "org"). Hier einige für Sie wichtige Zuständigkeiten:

Obwohl für alle .de Domänen die DENIC zuständig ist, regelt der Provider alles für Sie. Sie suchen sich eine (freie) Domäne aus und schließen beim Provider einen Vertrag ab. Der Provider meldet Sie bei der DENIC an und sorgt dafür, dass Aufrufe der Domäne auf ein für Sie eingerichtetes Verzeichnis gelenkt werden.

Sie sollten wissen, dass Sie bei der DENIC Ihren Namen und Ihre Anschrift hinterlegen müssen. Diese Daten sind dann öffentlich. Jeder kann auf den Seiten der DENIC für jede .de Domäne die jeweils registrierte Person, inklusive Adresse, nachschlagen. Dieser Service heißt auch whois. Natürlich können Sie bei der DENIC auch nachschauen, ob eine bestimmte Domäne bereits vergeben ist.

Der Provider gibt Ihnen Zugang zu diesem Verzeichnis per FTP, dies entspricht dem WWW-Verzeichnis am RZ, d.h. auch dort können Sie per FileZilla einfach Dateien hochladen, dann unter z.B. unter www.harald-schmidt.de prüfen.

3.2 Zeichenkodierung

Computer können nur mit Zahlen umgehen, nicht mit Buchstaben. Alle Buchstaben, die Sie in Ihrem Browser, Editor oder PDF-Viewer sehen, (bzw. generell alle "Zeichen") werden beim Speichern in eine Datei in Zahlen umgewandelt. Umgekehrt werden beim Lesen diese Zahlen wieder in Buchstaben umgewandelt. Das bedeutet, es muss eine Tabelle geben, wo jedem Zeichen eine Zahl zugeordnet ist. Diese Zahl wird Code genannt. Eine solche Tabelle nennt man Zeichenkodierung.

Ein Ausschnitt aus einer solchen Tabelle könnte so aussehen (ASCII-Kodierung):

Zeichen Code
a 97
b 98
c 99
... ...

Denken Sie auch daran, dass auch Ziffern Zeichen sind und i.d.R. nicht gleichzeitig ihr eigener Code sind. Hier ein Beispiel (ebenfalls ASCII):

Zeichen Code
0 48
1 49
2 50
... ...

Sie können Sie diese Zahlen z.B. mit Processing anschauen. Entweder für ein bestimmtes Zeichen mit folgendem Programm:

println((int) 'a');

Oder Sie möchten bei Tastendruck den Code der gedrückten Taste ausgeben lassen - dann müssen Sie in den aktiven Modus gehen und die Systemvariable keyCode verwenden:

void draw() {
}

void keyPressed() {
  println(keyCode);
}

Die Zahlen, die Sie sehen, entsprechen sowohl der ASCII-Tabelle als auch der Latin-1-Tabelle (dazu kommen wir gleich).

Wie groß ist eine solche Tabelle?

Sie müssen alle 26 Buchstaben von A bis Z als Groß- und Kleinbuchstaben (2 x 26) kodieren, alle Ziffern 0 bis 9, Interpunktions- und Sonderzeichen (Prozent, Dollar, Hash ...). Eine andere Überlegung ist, dass Sie ungefähr doppelt so viele Zeichen brauchen, wie Sie Tasten auf Ihrer Tastatur haben (doppelt wegen der Umschalt/Shift-Taste). Da kommt einiges zusammen, aber mit so 100 Zeichen müsste man eigentlich auskommen, oder?

Bei Computern werden Zahlen oft im Binärsystem ausgedrückt, weil das die Repräsentation ist, die letztendlich auf der Hardware ankommt. Zur Erinnerung: Ein Bit ist eine 1-stellige Binärzahl, ist also entweder 0 oder 1. Ein Computer teilt seinen Speicher in 8-Bit-Einheiten auf, in sogenannte Bytes. Ein Byte besteht aus 8 Bit, ist also eine 8-stellige Binärzahl und kann somit 256 verschiedene Werte von 0 bis 255 darstellen.

Mit 7 Bit (0000000, 0000001, 0000010, 0000011, ...) kann man 128 verschiedene Werte ausdrücken, also könnte man eine Zeichenkodierung nach dieser Überlegung mit 7 Bits auskommen.

Gibt es es nur eine solche Tabelle weltweit?

Überlegen Sie, was passiert, wenn Sie zwei verschiedene Tabellen haben. Programm A schreibt den Text mit der folgenden Tabelle auf die Festplatte:

Zeichen Code
a 97
b 98
c 99
... ...

Programm B nimmt aber diese andere Tabelle, um den Text zu lesen:

Zeichen Code
a 1
b 2
c 3
... ...

Das Ergebnis ist natürlich Buchstabensalat.

Sollte man demnach eine einzige Tabelle für alle Schriftzeichen der Welt haben? Dann müssen Sie nicht nur Umlaute und französische und skandinavische Akzente hinzufügen, sondern auch sämtliche Schriftzeichen für Arabisch, Koreanisch, Chinesisch, Sanskrit etc. Dazu kommen wir beim Thema Unicode.

3.2.1 ASCII

Eine der ersten weltweit verwendeten Kodierungen wurde 1963 in den USA unter dem Namen ASCII (American Standard Code for Information Interchange) entwickelt. Es handelt sich um eie 7-Bit-Kodierung und hat somit theoretisch Platz für 128 Zeichen. Da dieser Code in den USA entwickelt wurde, enthält er z.B. keine Umlaute, kein ß und keine unteren Anführungszeichen.

Zeichen Code Code (binär, 7 Bit)
a 97 1100001
b 98 1100010
c 99 1100011
... ... ...

3.2.2 Latin-1

Für europäische Sprachen wurde ein ganzer Satz von Zeichenkodierungen entwickelt mit dem Oberbegriff ISO 8859. Die Unterfamilie ISO 8859-1 (auch bekannt als Latin-1) deckt alle westeuropäischen Sprachen ab, also auch Deutsch. Latin-1 war 2014 die zweithäufigste Kodierung von Websites. Wichtig beim Konzept dieser Kodierungen ist, dass sie kompatibel mit ASCII sind. Man hat ganz einfach die ASCII-Tabelle um z.B. Umlaute erweitert.

Schauen Sie sich den folgenden Ausschnitt der Latin-1-Tabelle an. Sie sehen, dass Sie an der Binärzahl ganz leicht sehen können, ob es sich um den "ASCII"-Teil der Tabelle handelt oder nicht: das erste Bit ist 0 bei ASCII und 1 bei den zusätzlichen Zeichen.

Zeichen Code Code (binär, 8 Bit)
a 97 01100001
b 98 01100010
c 99 01100011
... ... ...
ä 228 11100100
ö 246 11110110
ü 252 11111100

Wenn Sie also einen deutschen Text in einen Editor laden und die Umlaute nicht richtig dargestellt sind, dann kann das daran liegen, dass der Text in Latin-1 kodiert ist und der Editor denkt, er habe ASCII vor sich.

3.2.3 Unicode

Um das leidige Problem mit den Tabellen zu lösen, wurde Unicode entwickelt:

ein internationaler Standard, in dem langfristig für jedes Sinn tragende Schriftzeichen oder Textelement aller bekannten Schriftkulturen und Zeichensysteme ein digitaler Code festgelegt wird.

(Wikipedia, 10/2017)

Unicode ist ein allgemeiner Mechanismus zur Repräsentation von Schriftzeichen. Er wurde in Version 1 im Jahr 1991 verabschiedet, 1996 folgte Version 2 mit über 1 Million Codepunkten.

Um Unicode tatsächlich zu realisieren, gibt es drei wesentliche Zeichenkodierungen, die man in diesem Zusammenhang Unicode Transformation Format oder UTF nennt.

Im Internet hat sich UTF-8 durchgesetzt (UTF-8 wurde 1992 spezifiziert). Laut Wikipedia verwendeten 10/2017 89,9% aller Wesites UTF-8.

Die "8" deutet auf 8 Bit hin, heißt aber nur dass ein Zeichen im günstigsten Fall mit 8 Bit kodiert wird. UTF-8 ist nämlich ein Format mit variabler Länge, d.h. ein einziges Zeichen kann mit 1, 2, 3 oder 4 Byte kodiert werden müssen.

Auch interessant sind die ersten 128 Zeichen mit ASCII identisch. Ansonsten arbeitet UTF-8 mit Tricks, um den Speicherplatz pro Zeichen klein zu halten. Das heißt aber auch, dass Zeichensätze bestimmter Sprachen bevorzugt werden. Im Fall von UTF-8 sind dies westliche Sprachen. Zeichen anderer Sprachen verbrauchen wesentlich mehr Platz pro Zeichen.

Im Kopf Ihrer HTML-Seite geben Sie heutzutage immer UTF-8 als Zeichenkodierung an:

<meta charset="UTF-8"/>

3.3 Lizenzen

Wenn Sie sich mit Webseiten beschäftigen, stoßen Sie immer wieder auf Fragen wie "darf ich dieses (fremde) Bild auf meiner Seite veröffentlichen" oder "ich möchte es anderen Leuten erlauben, diese bestimmten Fotos von mir zu verwenden".

Als Nutzer fragen Sie sich, was Sie mit fremden Werken alles anstellen dürfen. Als Urheber fragen Sie sich, wie Sie genau festlegen können, was mit Ihren Werken passiert.

Zu den häufigsten Fragen gehört:

Zu diesem Zweck gibt es Lizenzen, die solche Dinge festlegen. Nun haben Urheber (Fotografen, Autoren, Programmierer etc.) oft weder Lust noch Zeit, sich mit rechtlichen Fragen auseinander zu setzen. Die Folge ist, dass gerade im Internet viel Material herumschwirrt, das man nicht verwenden darf, weil keine Lizenz "dran hängt", obwohl die Urheber vielleicht gar nichts dagegen hätten.

3.3.1 Creative Commons

Die Organisation Creative Commons (kurz CC) hat es sich zum Ziel gesetzt, eine Reihe möglichst leicht verständlicher Lizenzen zu entwickeln, um es Urhebern möglichst leicht zu machen, ihre Werk "frei" zu geben und dabei dennoch relativ genau kontrollieren können, unter welchen Bedingungen das Werk verwendet werden kann. Die Organisation wurde 2001 von Lawrence Lessing (Professor für Recht, zunächst in Stanford, jetzt in Harvard) und anderen gegründet. Mittlerweile gibt es auch eine deutsche Abteilung: Creative Commons Deutschland.

Creative Commons hat eine Reihe von modularen Lizenzen erstellt, die unter vier einfachen Leitfragen stehen, die jeweils eine griffige Abkürzung (BY, NC, ND, SA) haben:

BY Muss der/die Urheberin genannt werden? ("BY" wie in created by*)

NC Ist die kommerzielle Nutzung untersagt? ("NC" wie non-commercial)

ND Sind Änderungen untersagt? ("ND" steht für no derivatives, also keine "abgeleiteten" Werke)

SA Muss ein Werk, das ein anderes Werk verwendet/beinhaltet, unter die gleiche Lizenz gestellt werden? ("SA" steht für share alike)

Aus diesen vier Komponenten ergeben sich die folgenden sechs sinnvollen Kombinationen. Jede Kombination ist eine eigene CC-Lizenz:

Am besten lesen Sie sich weiterführende Informationen bei Creative Commons oder Creative Commons Deutschland durch.

Diese Ausführungen hier sollen Ihnen nur einen ersten Einblick geben und vielleicht Hemmschwellen abbauen, sich mit Lizenzen zu beschäftigen.

3.3.2 Public Domain und CC0

Als Nutzer gibt es Situationen, wo Sie gern Bilder, Musik etc. nutzen möchten, ohne einen Urheber nennen zu müssen. Es gibt auch solche sehr liberalen Lizenzen, die das nicht einfordern.

Der Begriff Public Domain bedeutet im angelsächsischen Raum "frei von Urheberrechten". Diese Begrifflichkeit scheint aber laut Wikipedia nicht ohne weiteres auf deutsches Recht übertragbar zu sein.

Daher hat Creative Commons die Lizenz CC0 erstellt, die keine Namensnennung einfordert.

3.3.3 Bildersuche bei Google

Bei Suchmaschinen wie Google können Sie gezielt nach Bildern mit bestimmten Lizenzen suchen. Gehen Sie dazu in die Bildersuche und wählen Sie Tools und schauen Sie dann unter "Nutzungsrechte".

Google-Bildersuche mit Tools

Dort finden Sie die Optionen:

Wichtig ist, dass Sie bei den dann gefundenen Bildern nochmal checken, ob die Lizenz stimmt.

Es gibt darüber hinaus auch Bilderdienste, die sich darauf spezialisiert haben, Bilder mit z.B. CC0-Lizenz zu sammeln und bereit zu stellen.