Titel

Die Schnittstelle zwischen Entwickler und Computer ist ein Texteditor. Es gibt kein Werkzeug, mit dem Entwickler so viel Zeit verbringen. Suchen, nachsehen, ändern, speichern. Alles passiert mit dem Texteditor.

Die Arbeit an Webseiten bedeutet eine besondere Herausforderung an den eingesetzten Texteditor, weil man es mit zwei sehr unterschiedliche Arten von Text zu tun hat:

Prosa.

Der eigentlichen Inhalt der Seiten, soweit es sich um Text handelt, ist in einer natürlichen Sprache geschrieben, Deutsch zum Beispiel.

Formale Sprache.

Die Strukturierung und Formatierung des Inhalts erfolgt in einer formalen Sprache, wie HTML, CSS oder JavaScript.

In den eigentlichen HTML Dateien existiert dieser Mix auch noch innerhalb ein und derselben Datei.

Die Texteditoren, die mit GNU/Linux Systemen als "Hauseditoren" ausgeliefert werden, sind alles gute Werkzeuge. Sie sind aber in erster Linie für die Bearbeitung von einzelnen, kurzen Dateien gedacht.

Für die Arbeit mit formalen Sprachen in Verbindung mit dem Erstellen wortgewaltiger Prosa gibt es Editoren, die für diesen Spagat besser geeignet sind, weil sie speziell für die Arbeit an Web-Dateien ausgelegt wurden.

Kate

Kate ist der Hauseditor von KDE und mit mehr Funktionen ausgestattet, als die Brüder und Schwestern anderer Desktops.

code-oss / VSCodium

code-oss ist der Arbeitsname des Projektes, in dem der Open Source Teil von Visual Studio Code entwickelt wird. VSCodium bietet dessen kompletten Funktionsumfang, ohne dass man die proprietären Zusätze von Microsoft gleich mit schlucken muss.

Sublime-Text

Sublime-Text ist unübersehbar das Vorbild moderner Texteditoren (Atom, Brackets, VSCode ...), kommt aus Australien, ist nicht Open Source, aber für den privaten Gebrauch ohne Lizenz benutzbar.

Bluefish

Bluefish ist das Urgestein, wenn es um HTML Editoren geht. Von der Oberfläche her etwas veraltet, aber gerade für Neulinge ein guter Partner.

Seamonkey

Seamonkey ist der Nachfolger von Netscape Navigator Gold und beinhaltet einen WYSIWYG Editor für HTML Dateien. Seamonkey ist zwar deutlich moderner als sein Großvater Netscape, ist aber definitiv etwas für "Vintage" Liebhaber.

Selbstverständlich kann man für die Web-Entwicklung auch den Vi oder Emacs benutzen. Und erwähnen möchte ich auch noch cudatext, den neuen "shooting star" unter den Editoren.

Eine ausführliche Beschreibung von Texteditoren für diese Aufgabenstellung findet sich in Überblick über Texteditoren. Wer sich die Zeit nehmen will ...

Die Installationsanweisungen für diese Tools finden sich in den Spickzettel.

Manchmal kommt auch die Aufgabe auf einen zu, ein Bild leicht zu verändern. Manchmal geht es schon mit einem der Bildbetrachter oder auch dem Bildschirmfoto-Schieß-Werkzeug. Aber meist braucht man einen Grafikeditor.

Für das zurechtschneiden von Bildern und für leichte Änderungen an Pixel basierten Grafiken liefern alle Repositories diverse Werkzeuge.

Drawing

gehört zu GNOME, ist einfach und ist einfach zu bedienen. Absolut alltagstauglich.

Kolourpaint

gehört zu KDE. Zielt auf Alltagstauglichkeit.

MyPaint

ist ein eigenständiges Werkzeug mit gehobenem Funktionsumfang.

Wirkliches Grafikdesign - auch auf einer niedrigen Ebenen - ist nicht Gegenstand dieser Dokumentation.

In den Repositories aller Distributionen finden sich für Grafikdesigner oder die, die es werden wollen, auch Werkzeuge für den gehobenen Anspruch.

Krita

ist das KDE Grafik-Flaggschiff. Kann sehr viel, braucht sehr viel Einarbeitung.

gimp

ist ein wirklich mächtiges! Werkzeug für Grafikbearbeitung. Braucht mächtige Einarbeitung.

Inkscape

ist schlicht DIE Software für SVG Grafiken. Wer SVG Grafiken erstellen will, kommt an InkScape nicht vorbei. Braucht Einarbeitung.

Ohne Bilder ist alles nicht so schön bunt.

Auch wenn man eine eher nüchterne Webseite bauen will, ist das eine oder andere Bild ganz nett. Es muss sich dabei ja nicht gleich um Kunstwerke aus der Marketingabteilung oder die eigene Urlaubsbildergalerie handeln.

Screenshooter

Jede Desktopumgebung liefert ein Werkzeug, um Bildschirmfotos zu machen. Wenn es richtig integriert ist, reagiert es auf die Tasten Druck und Alt+Druck.

Die Screenshotprogramme unterscheiden sich erheblich in Funktionsumfang und Bedienkomfort. gnome-screenshot ist das einfachste und sehr weit verbreitet, das Pendant von KDE - spectacle - hat den größten Funktionsumfang.

Wenn man nur über Druck ab und zu eine Screenshot erzeugen will, ist es egal, welches Werkzeug dahinter steht.

Wenn man aber eine ganze Serie herstellen oder die Bilder nach der Aufnahme bearbeiten will, spielt das Werkzeug schon eine Rolle.

Screenshot

aus der GNOME Umgebung ist einfach, ist aber bei der Arbeit mit Massenware unhandlich, weil es bei jedem Foto einiges an manuellem Aufwand erfordert, das Bild zu speichern.

Screengrab

aus der LxQt Umgebung ist immer noch einfach, aber auch für Massenabfertigung geeignet. Leider ist es unter Fedora nicht vorhanden.

Screenshooter

kommt von Xfce, ist im Funktionsumfang mit screengrab vergleichbar und überall verfügbar.

Spectacle

ist von KDE und - wie alle KDE Programme - mit vielen Funktionen ausgestattet. Man kann geschossene Bilder bearbeiten und in diversen Formaten speichern.

Bildbetrachter (image viewer)

Jede Desktopumgebung enthält so ein Werkzeug und alle tun, was sie sollen. Zum Ansehen von Bildern reichen alle völlig aus und es ist in diesem Kontext egal, was man benutzt.

Konvertierungswerkzeuge

Im Zusammenhang mit Grafiken im Netz sollte man sich Gedanken über das physische Format zu machen. Das Format hat zum Teil drastische Auswirkungen auf die Größe der Datei und damit auf die Ladezeiten.

Was Ladezeiten und Traffic angeht sind .png oder - noch schlimmer - .bmp Bilder einfach nicht gut. Diese Bilder sind nicht komprimiert, deshalb unverhältnismäßig groß und man sollte damit nicht online gehen.

Das Standardformat für Bilder im Netz ist .jpg, ein Format, das eine Kompression ohne große Qualitätseinbußen realisiert. Ein noch besseres Verhältnis von Kompression und Qualität wird bei dem Format .webp erreicht.

Häufig bekommt man aber Bilder als .png oder .bmp von Freunden oder aus der eigenen Kamera. Dann muss man konvertieren.

Einzelne Bilder kann man z.B. mit dem KDE Bildbetrachter gwenview oder mit manchen Grafikeditoren konvertieren. Das geht dann so:

• Das Original laden,
• dann Speichern unter ... drücken,
• das Format und evtl. die Kompression wählen,
• abspeichern.

Für einzelne Bilder ist das wunderbar. Hat man aber viele Bilder zu konvertieren, ist das viel zu umständlich. Dann braucht man Werkzeuge, die so etwas gleich massenhaft durchführen. Diese Möglichkeit bietet z.B. immagemagick mit seiner Kommandozeilenschnittstelle.

Deutlich einfacher zu verstehen und zu benutzen als immagemagick ist das von Google entwickelte Programmpaket webp. Dieses Paket ist genau für Konvertierungen dieser Art gedacht und lässt sich gut in kleinen Skripten verwenden.

Sie Installationsanweisungen für diese Tools finden sich in den Spickzetteln

Die Welt sieht sich eine Webseite mit einem Browser an. Die gängigsten Browser, die auf jedem Betriebssystem laufen, sind Google Chrome und Firefox. Unter Windows gibt es dann noch Edge und es gibt Safari, der nur auf Mac läuft.

Es ist nicht mehr so, dass man man böse Überraschungen erlebt, wenn man sich seine Webseite mal mit einem anderen Browser ansieht, aber ganz 100% Prozent kompatibel sind die Browser auch heute noch nicht.

Die innerer Maschine eines Browsers ist die rendering engine, oder HTML Engine oder der Renderer (ich weiß wirklich nicht, wie ich das übersetzen soll).

Die rendering engine ist dafür verantwortlich, wie eine HTML Seite im Browser abgebildet wird, sie macht aus dem HTML und den CSS Angaben das Layout der Seite.

Stand heute sind drei dieser Engines verbreitet:

Gecko

Werkelt im Firefox und anderen Mozilla Produkten.

Blink

Von Google im Chromium Projekt entwickelt, arbeitet sie in Google Chrome, in Edge, in Opera. Die große Stärke von Blink ist die JavaScript Unterstützung.

WebKit

Ganz früher als KHTML von KDE entwickelt, dann von Apple im Safari eingebaut. Da läuft sie immer noch. Auch der neueste GNOME Browser epiphany läuft damit.

Diese Engines finden sich in den folgenden unter GNU/Linux verfügbaren Browsern wieder.

Firefox

Ist bei allen GNU/Linux Systemen der Standardbrowser und sollte schon installiert sein. Arbeitet mit Gecko.

Chromium

Ist der Browser des gleichnamigen oss Projektes, auf dem Google Chrome beruht. Er sieht auch aus wie Chrome, hat allerdings einige proprietäre Features nicht. Arbeitet mit Blink.

Web

Wird von GNOME unter dem Namen epiphany entwickelt und unter dem schlichten Namen Web ausgeliefert. Klein und einfach. Hmm. So sieht er aus, kann aber viel mehr. Arbeitet mit WebKit.

Da die rendering engine für den Aufbau der Seite verantwortlich ist, hat man mit diesen drei freien Browsern schon mal die drei gängigen Engines eingefangen und kann, wenn man sich seine Produkte in den drei Browsern angesehen und für gut befunden hat, einigermaßen hoffnungsvoll davon ausgehen, dass ein großer Teil der mit dem Internet verbundenen Menschheit das genau so sieht.

Es ist allerdings wichtig zu wissen, dass Schriftarten nicht "gerendert" werden. Schriftarten werden geladen und so, wie sie sind, verwendet. Auf den optischen Eindruck einer Seite hat die Schriftart einen sehr großen Einfluss. Und da wird es kritisch:

Bei den unterschiedliche Betriebssystem sind unterschiedliche Schriftarten als Standard eingestellt. Es gibt außerdem Schriftarten, die nicht auf allen Systemen vorhanden sind. Dann werden zwar von den Browsern vergleichbare Schriftarten herangezogen, aber vergleichbar ist nicht gleich. Vergleichbare Schriftarten unter GNU/Linux und Windows und Apple sind unter den drei Systemen vielleicht ähnlich, aber nicht identisch.

Der langen Rede kurzer - und ernüchternder - Sinn ist:

Wer wissen will, wie seine Seite unter Apple oder Windows aussieht, muss sie sich unter Windows oder Apple ansehen. Das geht nicht anders.

Hier die Installationsanweisungen für die Browser unter Linux.