Heute habe ich damit aufgehört, die geänderten Dateien in den Ordner Archiv zu kopieren. Das hat zwar den Vorteil eines niedrigen Speicherplatzverbrauches gehabt, aber dafür mussten die einzelnen Dateinamen immer von mir angepasst werden. Als Ersatz dafür, werde ich das Projektverzeichnis komprimieren, mit einem Datumsstempel versehen und die Zip-Datei im Ordner Archiv ablegen.

Unter Linux einfach die Shell (das Terminal) öffnen und mit Hilfe von zip den kompletten Projektordner komprimieren und abschließend die Datei im Sicherungsordner ablegen. Lauten die Quelle "/home/mmustermann/projekt_2024/" und das Ziel "/media/mmustermann/backup/backup-projekt_2024-20240320_0.zip", so ergibt sich daraus der folgende Befehl:
zip -r /media/mmustermann/backup/backup-projekt_2024-20240320_0.zip /home/mmustermann/projekt_2024

Der Parameter -r steht dabei für "rekursiv" und bedeutet, dass wirklich alle Dateien (auch die aus etwaigen Unterordnern) ausgewählt werden sollen. Als Ergebnis erhalten wir die neue Datei /media/mmustermann/backup/backup-projekt_2024-20240320_0.zip. Die erstellte Zip-Datei enthält alle Dateien aus sämtlichen Unterordnern unseres Projekt-Ordners. Den Datumsstempel den ich bislang im Dateinamen selbst manuell hinzufüge, kann auch das System setzen. So habe ich etwas weniger Tipparbeit und kann mich auch nicht im Datum irren! Dafür benutze ich einfach das date Kommando mit einer formatierter Ausgabe in Form von "`date +%Y%m%d`". Somit lautet der vollständige Aufruf zum Erstellen der Zip-Datei wie folgt:
zip -r /media/mmustermann/backup/backup-projekt_2024/projekt_2024-`date +%Y%m%d`_0.zip /home/mmustermann/projekt_2024. Das Rückgabe des Kommandos "`date +%Y%m%d`" lautet heute, am 20.3.24, 20240320. Die Zeichenkette _0.zip füge ich am Ende dem Dateinamen noch hinzu. Ist die fortlaufende Nummer des heutigen Tages schon vorgeben, so wähle ich die darauf folgende Nummer.

Und auch das könnten wir noch weiter automatisieren. Denkbar wäre ein kurzes Bash-Script, in dem alle Schritte der Reihe nach ausgeführt werden.

• Das Erstellen einer frischen Kopie des Backup-Ordners inform der komprimierten Zip-Datei.
• Der Upload der zuvor erstellten Zip-Datei auf den Webserver. Mit Hilfe von scp oder sftp.
• Schreiben einer kurzen Logdatei.
• Öffnen der zugehörigen Dateien im Editor.
• ...

In den folgenden Bildern seht ihr die Startseite meiner Website. Ich habe gemaß des Leitsatzes "mobil first" zunächst die Ansicht für das iPhone und iPad jeweils horizontal und vertikal optimiert. Bei einer geringen Breite wird die obrige Navigationsleiste ausgeblendet und die Inhalte stehen in einer Spalte untereinander. Ist mehr Platz verfügbar, so wird die horizontale Navigationsleiste am oberen Rand eingeblendet und der Inhalt auf mehrere Spalten verteilt. Abschließend folgen noch größere Ansichten für Notebooks und PCs.

Ich habe die Datei index.html nach Fehler durchsuchen lassen. Es gab einige kleine Fehler, die wiederum Folgefehler ausgelöst haben. Manche Fehler scheint der Webbrowser wohl zu ignorieren. Ich sollte mir angewöhnen, die HTML-Validierung öfter auszuführen.

Ich habe für die einzelnen Änderungsvermerke die Grid-Area news eingeführt. Die jeweiligen Vermerke werden jetzt in einzelne Grids wandern. Die neuen Inhalte (Artikel) werden im Grid news abgelegt.

Es hatten sich ein paar Fehler eingeschlichen. Ein Teil der Navigation ist im Quellcode teilweise mittendrin eingefügt worden. Wie genau das passiert ist, ist mir allerdings noch nicht klar. Dies Betraf nahezu alle Seiten. Die habe das Codefragment entfernt. Weiterhin habe ich die id=oben in den Body-Tag gesteckt und die Sprungpunkte neu verlinkt in der Footer-Navigation.

Auf der Seite Quellen habe ich ganz unten eine weitere Tabelle hinzugefügt. Diese enthält Link-Listen mit:

• dem Anbieter der Website,
• dem Link zur Website,
• den angebotenen Themen,
• der Sprachunterstützung und weiteres.

Folgende Punkte habe ich soeben geändert:

• Der Navigator im Footer hatte noch eine Serifenschrift. Das habe ich geändert. Die Schriftzuordnung ist nun auch im Stylesheet für die Navigation.
• Für den Medientyp print gilt genau das Gegenteil - der Druck erfolgte mit einer serifenlosen Schrift. Dort habe ich eine Schriftfamilie mit Serifen hinterlegt, damit das Lesen einfacher fällt.
  font-family: 'Times New Roman', Times, Georgia, serif !important;
• Das Hamburger-Menü klappt nun etwas sachter auf. Im Selektor dafür ist folgende Anweisung hinzugekommen:
  transition: max-height 1s ease;

Ich habe die Navigation angepasst. Dazu habe ich ein neues Stylesheet nur für die Navigation angelegt. Ebenso gibt es eine neue Media Query für den Bildschirm mit mindestens 600 Pixel Breite. Hier wird die Menüleiste horizontal angezeigt, ansonsten über das bekannte Hamburger-Menü.

Für Leser die bestimmte Inhalte ausdrucken möchten, habe ich ganz unten im Stylesheet eine Medienabfrage hinzugefügt:

@media print {
* {
	box-shadow: none !important;
	text-shadow: none !important; 
	background-color: white !important;  
	color: black !important; }

nav {display: none !important;} 
}

Ich habe dem Stylesheet eine sogenannte "Media Query" hinzugefügt. Diese heißt print, die ich mit "@media print" definiert habe. Anschließend habe ich Elemente die beim Druck nicht notwendig oder störend sind einfach herausgenommen.

Zunächst werden umgebende Schatten von Boxen und Texten entfernt. Danach werden die farbigen Hintergründen mit den Wert weiß und die Texte mit schwarz überschrieben. Abschließend wurde die Navigation gänzlich ausgeblendet.

Die Medienabfrage print kommt nur dann zur Anwendung, wenn im Browser der Druckdialog gestartet wird.

Unter Quellen sind nun die beiden Bereiche Bücher und Zeitschriften hinterlegt.

Der Navigator hatte vereinzelt noch keine Quellen hinterlegt. Das habe ich korrigiert. Der Fließtext in allen Artikeln ist nun etwas dünner. Die Einstellung "font-weight: 300;" und "font-family" sind in den Selektor main.site-content gewandert.

Auch im Fließtext habe ich die Schriftfamilie angepasst. Die Reihenfolge und Auswahl ist zunächst wie beim vorherigen Beispiel.

Der Artikelkopf ist nun blau. Der Artikelhintergrund ist jetzt in Beige. Als Schriftfamilie ist die Geräteschrift hinterlegt. Weiterhin ist die Überschrift im Kopf etwas dünner.

Beispiel:

font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif ;
font-weight: 400;

Der Navigator hat jetzt ein mouseover Event. Ist der Mauszeiger über einem Navigationselement, so wird dieses in der Farbe leicht verändert und die Box bekommt einen gepunkteten Ober- und Unterstrich.

Beispiel:

nav a:hover { 
 color: rgb(255, 255, 255);
 border-top: 1px dotted rgb(255, 255, 255);
 border-bottom: 1px dotted rgb(255, 255, 255); }	
	

Die Hyperlinks habe ich umformatiert. Die Unterstreichung ist nur noch 1px groß und etwas nach unten gerutscht. Begangene Links sind nun tiefblau, nicht begangene blau. Der Selektor geht auf die Klasse ".site-content" und auf die Pseudo-Klassen a:visited und a:link.

Beispiele:

.site-content a:visited { 
	color: rgb(24, 8, 68);
	text-decoration: underline;  
	text-decoration-thickness: 1px;}

.site-content a:link {     
	color: rgb(0, 119, 187);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.1875em;}

Es gibt verschiedene Pflichten die ein Website-Betreiber einhalten muss. Wer eine Website betreibt, muss Auskunft über die gesammelten Nutzerdaten und deren Verwendung geben. Dies ist Teil der Datenschutzgrundverordnung (DSGVO) und muss Bestandteil jeder Website sein. Desweiteren muss es ein Impressum geben. Aus dem Impressum muss der Ansprechpartner samt seiner Kontaktdaten hervorgehen. Weiterhin soll ein Kontaktformular eine leichtere Kontaktaufnahme ermöglichen.

Alle drei Punkte habe ich meiner Seite hinzugefügt. Zum Datenschutz und zum Impressums habe ich mir Hilfe vom Datenschutz-Generator.de geholt. Diese Seite wird von Dr. Thomas Schwenke betreut und ist eine große Hilfe.

Ich habe den Punkt Quellen eingepflegt. Dort werde ich nach und nach für mich relevante Quellen hinzufügen. Das werden Fachbücher, Präsentationen, Videos oder Hörbücher sein.

Im CSS habe ich das langsame, sanfte Scrolling fürs Blättern von Oben nach Unten und umgekehrt genutzt. Das beißt sich aber leider mit dem Lazy Loading. Da der Browser durch das Lazy Loading Bilder erst dann anfordert, wennn der Benutzer diese tatsächlich braucht (das Bild den Focus hat), stoppt das langsame Scrollen bereits schon zuvor. Sind erstmal alle Bilder Bilder übertragen worden, funktioniert auch das sanfte Scrolling wieder.

Hier müsste ich das Verhalten wohl durch JavaScript steuern. Das möchte ich aber zu diesem Zeitpunkt nicht und somit entferne ich das die Regel wieder aus dem Stylesheet.

Im Navigator, also im nav Element habe ich auf der jeweils angezeigten Seite, dem li Element die Klasse="current"migegeben. Als CSS-Regel habe die für diese Klasse folgendes definiert: .current a {text-decoration: underline;} Somit wird auf der angezeigten Seite immer der Sprungpunkt unterstrichen, sodass man weiß wo man sich auf der Website befindet. In diesem Fall auf der Startseite.

Die folgende CSS-Regeln erstelle ich für den Navigator mittels verschiedener Element-Selektoren:

nav li {  /*Die einzelnen Nav-Einträge stehen jetzt nebeneinander mit etwas breiteren Abstand zueinander */
	display: inline;
	margin-right: 0.5rem;}

nav ul { 
	padding: 0;
	margin: 0;}

nav {   /* Ausrichtung, Abstand und Hintergrundfarbe für den oberen und unteren Navigator */
	background-color: rgb(45,45,45);
	border-radius: 15px;
	padding: 0.5rem;
	margin: 0.5rem 0rem -0.8rem;
	text-align: center;}
			  
nav a { /* Die Einträge im Navigator sind jetzt weiß und die Unterstreichung der Links ist ausgeschaltet */
	color:white;
	text-decoration: none;}

Die folgenden fehlenden HTML-Dateien wurden erstellt:

• archiv.html
• kontakt.html
• datenschutz.html
• impressum.html

Heute starte ich mit der Erstellung einer sehr einfachen Navigation. Eine befindet sich direkt nach dem header, die zweite ganz unten auf der Website. In HTML gibt es hierfür den nav Bereich. Innerhalb des nav Elements verwende ich eine ungeordnete Liste, also das ul Element. Die einzelnen Navigationspunkte stehen dann im li Element. Das Element nav darf mehrmals auf der Webseite verwendet werden.

Meine Einträge der oberen Navigation lauten:

• Startseite
  Dieser Punkt bringt mich zurück auf die Seite index.html.
• Archiv
  Mit der Zeit verschiebe ich ältere Einträge von der Startseite. Die Seite nenne ich archiv.html.
• Unten
  klicken wir auf den Punkt unten, so springen wir ans Ende der Startseite. Hier gibt es nur einen Sprungpunkt in Form von #unten. Das untere nav Element erhält die id unten.

	<nav id="oben">
	  <ul>
		<li><a href="index.html">Startseite</a></li>
		<li><a href="archiv.html">Archiv</a></li>
		<li><a href="#unten">Unten</a></li>
	  </ul>
	</nav>						

Meine Einträge der unteren Navigation lauten:

• Kontakt
  Hier komme ich zur Kontaktseite kontakt.html die meine Kontaktdaten samt einem Kontaktformular enthält.
• Datenschutz
  Der stehen alle notwendigen Inhalte zum Datenschutz gemäß Datenschutzgrundverodnung sind in der Datei datenschutz.html.
• Impressum
  Die Seite heißt impressum.html und beinhaltet ein Impressum, wie erstaunlich.
• Oben
  Mit dem Punkt oben springt man an den Anfang der Startseite. Hier gibt es den Sprungpunkt in Form von #oben. Das obere nav Element erhält die id oben.

<nav id="unten">
  <ul>
	<li><a href="kontakt.html">Kontakt</a></li>
	<li><a href="datenschutz.html">Datenschutz</a></li>
	<li><a href="impressum.html">Impressum</a></li>
	<li><a href="#oben">Oben</a></li>
  </ul>
</nav>						

Das Programm schlägt uns auf der ersten Seite vor, mit den ersten Schritten fortzufahren. Ich wähle also das Feld aus und starte damit.

Ich wähle im ersten Schritt die Farbgebung meiner Oberfläche aus. Es gibt helle sowie dunkle Layouts, beide auch mit hohem Kontrast. Passt keines der vier vorgeschlagenen Layouts, so kann ich mir noch weitere durch das Drücken des Buttons "Farbdesigns durchsuchen" anzeigen lassen.

Hier kann ich weitere Layout auswählen und habe als letzten Punkt noch die Möglichkeit, weitere Layouts zu installieren.

Ich bleibe bei meiner Auswahl und wähle den nächsten Punkt aus. Rechts werden mir die bereits unterstützten Programmiersprachen angezeigt. Aktuell sind für mich HTML/CSS und später JavaScript interessant. Ich habe aber auf der linken Seite auch die Möglichkeit, weitere Programmiersprachen hinzuzufügen. Da ich das im Moment aber nicht brauche, springe ich zum nächsten Schritt.

Als nächster Punkt steht die Optimierung von Einstellung an. Um zu starten drücke ich auf den Button Optimieren der Einstellungen.

Auf der rechten Seite werden mir Optimierungen verschiedenster Art angezeigt. Die Liste ist lang aber glücklicherweise sortiert nach den beliebtesten Einstellungen. Ich ändere ersteinmal nichts und springe zum nächsten Punkt.

Im nächsten Schritt haben wir die Möglichkeiten, bestimmten Arbeitsschritten eigene Tastaturkürzel zu geben.

Durch das Klicken auf Befehlspalette öffnenerhälten wir alle Befehle die wir zuordnen können. Bereits vorhandene Zuweisungen erscheinen rechts. In der ersten Zeile können wir nach bestimmten Befehlen/Aktionen suchen.

Bereits vorhandene Zuweisungen erscheinen rechts mit dem zugewiesenden Tastenkürzel. Ich gehe ich auf den Befehl Alle auswählen und klicke rechts davon auf das Zahnrad, um ein Tastenkürzel zu konfigurieren.

Nach der Auswahl siehen wir das Konfigurationsfenster. Hier steht anfangs wie der interne Befehl lautet - hier @command:editor.action.selectAll. Darunter ist zu sehen wie die Tastenzuordnung bereits lautet. Durch das Klicken auf eine bestehende Tastenzuordnung kann ich eine neue Kombination eintragen und diese mit der Bestätigung der Eingabetaste festlegen. Hier breche ich aber mit der Taste ESC ab und gehe zum nächsten Schritt.

Im nächsten Schritt füge ich meinen Projektordner hinzu. Dort wo später mein Code liegen soll. Abschließend kommt eine Sicherheitsabfrage. Hier wird eine Vertrauensfrage eingeblendet - möchte ich den Autoren in diesem Verzeichnis vertrauen? Damit ist gemeint, ob die hier hinterlegten Quellcode-Dateien aus einer vertrauenswürdigen Quelle stammen und somit keinen Schadcode aufweisen. Ich bestätige die Vertrauensfrage, da nur ich allein mit dem Editor arbeite und alle Dateien selbst von mir erzeugt wurden.

Der erste Teil ist nun abgeschlossen, doch könnte ich mir noch weiteres erarbeiten. Dazu fahre ich mit den Grundlagen fort. Da ich es hierbei erstmal belassen möchte, stoppe ich an dieser Stelle.

Vor über einer Woche hatte ich mir den neuen Editor VSCodium installiert. Und dann? Doch nicht aufgehört meinen alten Nano zu nutzen. Die Funktionen und Arbeitsweise sind halt bekannt und es benötigt etwas Mut und Zeit sich auf etwas neues einzulassen. Da sind wir also ... heute steige ich um - nein - heute versuche ich umzusteigen!

Der erste Aufruf sieht wie folgt aus:

Schön aufgeräumt aber ich störe mich etwas an der englischen Beschriftung. Glücklicherweise bin ich damit nicht alleine.

Es gibt die Möglichkeit das Programm durch eine Vielzahl von Erweiterungen zu ergänzen. Dazu klicke ich einfach auf den letzten Button auf der linken Seite.

Die Erweiterung um eine deutsche Oberfläche zu bekommen nennt sich German Language Pack for Visual Code. Ich gebe im Suchfeld german ein und starte die Suche. Anschließend wahle ich das Paket aus und drücke auf den Button Install.

Nach erfolgter Installation bestätoge ich den Button unten rechts. Damit wird die Anzeigesprache auf deutsch gestellt und das Programm automatisch neu gestartet.

Nach abschließendem Neustart zeigt sich VSCodium mit deutscher Oberfläche. Auf der rechten Seite ist ein Fenster, das die ersten Schritte beschreibt - bestimmt eine schlechte Idee sich das anzuschauen.

Das Element address ist dafür da, Kontaktadressen eines Autors anzugeben. Das kann eine Postanschrift des Verantwortlichen der Website, aber auch ein Name mit Link ins Impressum sein. Innerhalb eines Artikels kann das address Element beispielsweise auch dazu genutzt werden dessen Autor anzugeben.

Beispiel mit Postanschrift:

<address>
 <p>Max Mustermann<br>
    Musterstraße 17<br>
    12345 Musterstadt
 </p>
 <p>Telefon: <a href="tel:010.123.4567">010 123 4567</a>
 </p>
</address>

Ausgabe:

Beispiel mit Artikelkopf:

<header>
 <p>
  <address>
   Autor: <a href="ueber_uns.html">Sven Heinze</a>
  </address> 
  | Datum: <time datetime="2024-02-28">28.02.2024</time>
 </p>
</header>

Ausgabe:

Datumsangaben finden wir an vielen Stellen. Auch hier auf meiner Website steht in der ersten Zeile die letzte Aktualisierung der Website und im Kopf eines jeden Artikels nocheinmal eine Angabe zur Erstellung. Aber das ist bislang nur als ganz normaler Text vorhanden. Soll heißen, es ist keinerlei Formatierung hinterlegt und somit sind diese Angaben für Programme nicht einfach auswertbar. Beispielsweise erkennt ein Screenreader nicht, dass der Artikel schon 5900 Tage alt ist und somit nicht mehr das aktuelle Tagesgeschehen spiegeln kann. Oder der angebotene Termin vom Friseur nicht in Frage kommt, da er erst in 16 Monaten ist.

Zum Glück bietet uns HTML aber hierfür das time Element an. Eine genaue Angabe von Datum und Uhrzeit für Berlin in UTC+1 und weitere Kurzformate sind in der folgenden Tabelle enthalten:

Hinweis: Die Definition eines Datums erfolgt zunächst mit dem Attribut datetime. Dies ermöglicht eine "maschinenauswertbare" Lösung. Anschließend steht dann im Text was immer wir wollen. Es ist also nicht so, dass durch die formatierte Angabe in datetime automatisch eine Ausgabe nach diesem Muster im HTML erfolgt.

In HTML gibt es das Element br (break). Es handelt sich um ein leeres Element ohne Inhalt und benötigt somit kein schließendes Tag. Mit der Eingabe von <br> erzwingen wir einen Zeilenumbruch.

Das Vorgehen kennen und benutzen wir zur Genüge. Bei einer Webseite wissen wir in der Regel aber nicht, wann der Zeilenumbruch wirklich stattfindet. Ein altes Smartphone hat einen viel kleineren Bildschirm als ein Neues, ein Tablet ist kleiner als ein 27' Monitor. Wir können also zuvor fast nie wissen, wann die Zeile automatisch umgebrochen wird. Und da wir das schon nie genau wissen können, sollten wir auch beim Einsatz von <br> sparsam damit umgehen.

Beim Anschauen der abgelegten Muster CSS-Vorlage auf einem ipad sind mir unbekannte Sonderzeichen aufgefallen:

Ich habe den aktuell genutzten Stylesheet erweitert. Dieser gibt jetzt dem Text links und rechts etwas mehr Platz zum Rand (margin). Außerdem wurde die Klasse .blockzitat aufgenommen, um Blockzitate besser zur Geltung zu bringen (siehe vorherigen Artikel).

Ich habe das Stylesheet als aktuelle Schablone unter dem Namen styles-vorlage-0001.css ins Verzeichnis vorlagen gelegt.

Ich habe folgende zwei CSS-Regeln zur Darstellung von Blockzitaten hinzugefügt:

• blockquote Element-Selektor

  Für das HTML-Element blockquote habe ich einen Element-Selektor dem Stylesheet styles.css hinzugefügt. Dies ist ein sehr einfacher Selektor, der alle blockquote Elemente auswählt. Seine Deklaration ist wie folgt: margin: 0;

  Der Eigenschaft margin weise ich den Wert 0 zu. Damit überschreibe ich das Browser-Stylesheet, der äußere Rahmen wird auf 0 gesetzt und der störende Einzug links verschwindet.

• Klassen-Selektor .blockzitat

  Der Klassen-Selektor ist spezifischer als der Element-Selektor. Ich spreche nicht wie zuvor mit dem Element-Selektor alle blockquote Elemente an, sondern nur das Element mit dem Namen blockzitat. Ganz egal, um was das für ein HTML-Element es sich dabei handelt. Den Namen blockzitat hatte ich zuvor im HTML einem figure Element gegeben, indem ich <figure class="blockzitat"> zugewiesen hatte.

  In diesem Fall wurde nur ein einziges Element mit diesem Namen selektiert, da es nur eines gab. Würden mehrere Elemente mit dem Namen blockzitat existieren, wären auch alle selektiert worden. Ein Klassenname kann und wird in der Regel mehrmals vergeben.

  Im Klassen-Selektor .blockzitat habe ich folgende Deklarationen vorgenommen:

  						
  .blockzitat {
    background-color: rgb(220,220,220);
    padding: 1rem;
    border-left: 5px solid rgb(140,140,140);
    margin: 0; }
  						
  

  Die Hintergundfarbe geändert, dem Text etwas mehr Luft verschafft (Innendurchmesser), dem Rahmen links eine 5 Pixel dicke dunkelgraue durchgängige Linie gegeben und abschließend noch den äußeren Abstand auf 0 gesetzt.

Außerdem habe ich erstmals eine andere Farbdefinition benutzt. Die vordefinierten HTML Farbnamen sind eigentlich eine tolle Sache, aber ihre Namensgebung ist schon etwas besonders. Für Primärfarben wie rot, grün und blau ist das kein Problem. Suche ich aber Farben dazwischen, die nicht mit dark- oder light- beginnen/enden, so muss ich mir jedenfalls eine Farbtabelle zur Hand nehmen. Für mich ist dann die Angabe von rgb(rot,grün,blau) einfacher. Aber das nur vorab - ich muss mir die verschiedenen Möglichkeiten noch näher anschauen.

Für die Darstellung von Zitaten in HTML gibt es die folgenden drei Elemente:

• blockquote

  Mit Hilfe des Elements blockquote ist es möglich einen bestimmten Bereich zu umschließen, der ebenfalls ein Blockelement wie beispielsweise einen Absatz in sich trägt. Der ganze umschlossende Bereich ist dann ein Zitat und wird entsprechend formatiert. Im Standard wird das Blockzitat links etwas eingerückt.

  <blockquote>
  <p>Ich bin ein Blockzitat!</p>
  </blockquote>
  

• q

  Das Element q steht für quote. Es umschließt ebenso das Zitat, ist jedoch ein inline Element. Somit kann es mitten im Fließtext stehen und erzeugt selbst keinen Zeilenumbruch.

  <p>Peter sagte: <q>Auch nach der tiefsten Dunkenheit, folgt steht's das Licht.</q></p>
  

• cite

  Das Element cite dient als Quelle für das Zitat. Laut Definition dient es einzig dazu, eine URL anzugeben. Es dient nicht dazu, den Autor zu benennen. Das Element muss außerhalb des blockquote stehen. Es bietet sich an, dieses mit Hilfe von figure zu kapseln.

<figure class="blockzitat">
  <blockquote>
    <p>Hyperlinks sind die Fäden, mit denen das World Wide Web gesponnen wird.</p>
  </blockquote>

   <figcaption>
         Peter Müller - Rheinwerkverlag, 2022
	 <cite>
	  <a href="https://www.rheinwerk-verlag.de/5560">Einstieg in HTML und CSS</a>
	 </cite>
   </figcaption>	
</figure>
				

Ein sehr gutes Vektorgrafik-Programm, dass für viele Plattformen verfügbar ist, heißt Inkscape. Inkscape ist kostenlos und open Source. Es gibt eine große Community, eine gute Dokumentation und es wird regelmäßig weiterentwickelt.

Schade ist, dass das Repository im apt unter Ubuntu 23.10 schon etwas älter ist. Aus dieser Grund habe ich es als snap installiert, hier steht Inkscape als Version 1.3.1 zur Verfügung. Zu beachten ist, dass die snap Version mit 350 MB leider nicht grade klein ist. Es besteht auch die Möglickeit das Repository mit einer ppa zu erweitern, ein AppImage herunterzuladen oder den Source Code selber zu übersetzen.

Die Installation erfolgt mit sudo snap install inkscape

Das img Element bietet durch die Einstellung loading="lazy" eine Möglichkeit den Netzwerkverkehr zu reduzieren und zu entzerren. Durch die Verwendung ruft der Webbrowser nun erst dann die einzelnen Grafiken ab, wenn diese auch im Viewport liegen, d.h. der Benutzer diese erstmals im Display sieht.

Somit werden nicht wie üblich sofort alle Grafiken auf einmal abgerufen, sondern erst nach und nach was Lastspitzen vermeidet. Entscheidet sich der Leser gleich nach der ersten Seite diese wieder zu verlassen, so werden alle späteren Grafiken erst gar nicht abgerufen. Das reduziert dann wiederum den gesammten Netzwerkverkehr.

Die Spalten Datei, Typ, Übertragen und Größe erklären sich von selbst. Interessant sind die Spalten Initiator und ganz rechts die zeitliche Abfolge. Der Initiator zeigt uns das Ereignis an, dass ausgelöst wurde um die entsprechende Datei zu übertragen. Werte mit lazy-imageset besagen, dass die Datei verzögert, bei Bedarf abgerufen wurde. Die zeitliche Darstellung ganz rechts gibt an, ab welchem Zeitpunkt die Datei heruntergeladen und wann beendet wurde.

Ein Mausklick auf beispielsweise die erste Zeile zeigt uns rechts die einzelnen Zeitintervalle der Anforderung.

In der Spalte Status ganz links im Bild wird der sogenannte HTTP-Statuscode angezeigt. Ein Wert von 200 bedeutet beispielsweise, dass die Anfrage fehlerfrei ausgeführt wurde. Einen Eintrag gibt es im Bild der den Status 404 trägt. Ein Statuscode von 404 bedeutet, dass eine abgeforderte Ressource, nicht oder nicht mehr verfügbar ist.

Es wurde versucht die Ressource favicon.ico zu laden, die ich aber bislang noch nicht erstellt habe. Hier handelt es sich um die kleine Grafik die in den Browsertabs und Favoriten genutzt wird. Der Fehler 404 ist somit für die fehlende Ressource völlig berechtigt.

Alle Grafiken stehen nun primär als WebP und sekundär als PNG zur Verfügung. Ich habe den HTML-Code entsprechend überarbeitet.

Mit Hilfe der Shell lässt sich ImageMagick sehr effektiv nutzen. Hierzu öffnen ich ein Terminal (Konsolenfenster) und wechsel ins Verzeichnis mit den zu verarbeitenden Bildern. Anschließend schreibe ich ein wenig Shellscript um der bash zu sagen, dass sie sich alle Dateien mit der Endung.png holt und diese dann mit Hilfe von ImageMagick in das WebP-Format wandelt. Der Dateiname bleibt dabei bis auf die Dateiendung gleich.

Der notwendige Befehl ist ein typischer Einzeiler: for i in *.png; do convert "$i" -quality 70 -define webp:lossless=false "${i%.png}.webp" ; done

Ich kopiere die neu erstellten Bilder in mein Verzeichnis Bilder. Anschließend erweitere ich die Aufrufe von img um die source scrset... und umschließe beide mit picture.

<figure>
   <picture>
      <source srcset="bild.webp" type="image/webp">
      <img src="bild.png" alt="Bildbeschreibung">
   </picture>
   <figcaption>Bildbeschreibung</figcaption>
</figure>

Ich ergänze nun alle Stellen im HTML-Code und schaffe dadurch einen Mehrwert. Neuere Webbrowser laden die deutlich kleinere WebP Datei nun schneller und ältere Browser werden nicht außen vor gelassen und bekommen die PNG Datei.

Im letzten Artikel ging es um die Einbindung verschiedener Bitmap-Formate in eine Webseite. Wie ich jedoch das übliche JPEG-Format ins PNG- oder ins neue WebP-Format überführt habe, habe ich jedoch vorweggenommen.

Sicherlich gibt es viele Möglichkeiten, ich habe mich für das Tool ImageMagick entschieden. Das ist ein kleines Tool, dass bereits über viele Jahre hinweg stets gepflegt und erweitert wurde. Zur Installation unter Ubuntu einfach in der Kommandozeile folgendes eingeben: sudo apt install imagemagick imagemagick-doc. Vorher wie immer nicht vergessen die Repositories samt der Abhängigkeiten zu aktualisieren: sudo apt update.

Das Tool hat eine kleine GUI, bietet aber auch alles in der Kommandozeile an. Das ist klasse wenn man nicht nur eine Datei anfassen möchte, sondern vielleicht 10 oder 10.000. ImageMagick besteht aus mehreren Kommandos mit noch mehr Argumenten. An dieser Stelle möchte ich nur das Kommando convert anführen. Habe ich eine Datei die original.jpg heißt und ich diese in einer noch guten Qualität als WebP-Format benötige, rufe ich einfach convert original.jpg -quality 70 -define webp:lossless=false feld-100.webp auf und erhalte kurze Zeit später die Datei feld-100.webp. Möchte ich die Grafikauflösung der Originaldatei beispielsweise auf 50% verkleinern, so rufe ich convert original.jpg -resize 50% -quality 70 -define webp:lossless=false feld-50.webp auf und erhalte die Datei feld-50.webp. Habe ich die Datei original.jpg und möchte die Auflösung auf 50% verkleinern und zudem noch die Qualität auf 70 regeln, so rufe ich convert original.jpg -resize 50% -quality 70 feld-50.jpg auf.

An dieser Stelle sei gesagt, dass noch wesentlich mehr mit ImageMagick geht. Bilddateien können mit compare verglichen werden, mit composite ein Wasserzeichen bekommen oder einfach mit identify alle Metadaten ausgeben.

Gestern habe ich euch drei verschiedene Bitmapformate vorgestellt. Was aber noch fehlte, ist die Umsetzung im HTML. Im folgenden Absatz zeige ich dies in Form der beiden Grafikformate Webp und JPEG. Ihr könnt natürlich genauso gut auch eine andere Kombination auswählen.

<figure>
   <picture>
      <source srcset="bild.webp" type="image/webp"> 
      <img src="bild.jpg" alt="Ein Bild, dass ein Getreidefeld kurz vor einem Gewitter zeigt">
   </picture>
   <figcaption>Ein Bild, dass ein Weizenfeld kurz vor einem Gewitter zeigt</figcaption>
</figure>

Im direkten Vergleich die verschiedenen Auflösungen mit Größenangabe in Form einer kleinen Tabelle.

Bislang habe ich zur Darstellung von Bildern die gängigen Bitmapformat JPEG und PNG genutzt. Das Format JPEG wurde erstmals 1992 der Öffentlichkeit vorgestellt. Der Namensgeber war die Joint Photographic Experts Group, die diesen Standard entwickelte. Bahnbrechend war seinerzeit die hohe Rate der Datenkompression bei relativ geringem Qualitätsverlust. Weiterführende Infos zu JPEG kannst du bei Wikipedia finden.

Und auch das JPEG Format wurde mehr und mehr durch das PNG Format abgelöst. Dieses verfügt ebenso über eine gute Komressionsrate und bietet zudem noch die Möglichkeit einer Transparentsebene.

Wie sollte es denn auch anders sein - auch PNG wird mehr und mehr von WebP verdrängt. Ein weiteres Bitmapformat mit hohem Potential. Es bietet eine noch bessere Qualität bei geringerem Speicherbedarf, eine Transparentsebene und animierte Grafiken. Halbwegs aktuelle Webbrowser unterstützen das Format bereits seit längerem. Der MIME-Type heißt image/webp - die Dateiendung heißt .webp. Dennoch sollte man ältere Geräte durch die alleinige Verwendung von WebP nicht ausschließen und eine Alternative in Form von JPEG anbieten. Auf Geräten wie Screenreadern oder E-Bookreadern sind oft alte Browserengines im Einsatz und diese werden noch Jahre in Benutzung sein.

Eine gute Anlaufstelle, grade wenn es um die Unterstützung von Dateiformaten oder von HTML-Elementen der verschiedenen Webbrowser geht, ist die Webseite Can I use. Auf der folgenden Grafik seht ihr die Unterstützung von WebP durch die jeweiligen Webbrowser und deren Versionen.

Im sechsten Kapitel geht es um die Einbindung verschiedener multimedialer Formate. Das img Element mit seiner Kapselung durch figure hatte ich bereits beschrieben. Ebenso die Benennung der Bilder durch figcaption. Interessant sind aber beispielsweise die beiden folgenden Argumente des img Elements:

• srcset

  Mit srcset lässt sich beispielsweise ein weiteres Bild angeben, dass für hochauflösende Bildschirme gilt. Dabei bestimmt der Browser auf dem jeweiligem Gerät das zu ladene Bild. Hochauflösende Monitore setzen oft mehrere Gerätepixel ein, als Bildpunkte übergeben werden. Das Verhältnis wird dann DPR genannt - was für Device Pixel Ratio steht.

  <figure>
    <img src="bild-100.png"
            srcset="bild-200.png 2x" 
  	  alt="Anzeige der Webseite zum Projekt"
  	  width="100"
  	  height="40">
    <figcaption>Anzeige der Website zum Projekt</figcaption>
  </figure>
  

  Somit würde für ein normales Gerät ein Bild mit 100 Pixel Breite geladen. Handelt es sich jedoch um ein hochauflösendes Gerät mit einem DPR von 2 und mehr, so würde der Browser die Datei bild-200.png laden und diese dann auf 100 Pixel skalieren. Damit wäre das Bild doppelt so hoch aufgelöst und wieder scharf in der Darstellung. Die Erstellung weiterer Grafiken für eine DPR > 2 ist nach dem Autor - Peter Müller - nicht notwendig.

• loading

  Das Argument loading wird dazu genutzt dem Browser zu sagen, wann er Bilder laden soll. Mit loading="lazy" sagen wir dem Browser, dass er die Grafik erst dann laden soll, wenn diese auch am Bildschirm sichtbar ist. Beim Einsatz von sehr vielen großen Bildern können wir den gefühlten Ladezustand somit verbessern. Der Browser muss nicht erst alle Bilder laden müssen und zeigt somit schneller ein Ergebnis an. Bei Bedarf lädt er dann die notwendigen Bildern nach und nach.

Beim Laden einer Audiodatei gehen wir ähnlich vor wie bei Bildern. Das Element heißt hier aber nicht img, sondern audio. Das Argument controls ist optional und zeit die Steuerelemente an. Der Link nach dem <audio> Tag zeigt für ältere Webbrowser einen Link zum Download an, falls die Datei nicht geladen werden kann.

<figure>
  <audio scr="musik.mp3" controls>
    <p><a href="musik.mp3">Download</a></p>
  </audio>
  <figcaption>Peters Schlaflied</figcaption>
</figure>

Das Laden von Videodateien funktioniert ähnlich, dass Element heißt natürlich video. Durch poster="vorschaubild.jpg" wird im Browser zunächst nur ein Standbild angezeigt. Erst nach der Betätigung des Play-Buttons startet das eigentliche Video.

<figure>
  <video scr="musikvideo.mp4" width="1024" controls poster="vorschaubild.jpg">
    <p><a href="musikvideo.mp4">Download</a></p>
  </video>
  <figcaption>Peters Schlaflied</figcaption>
</figure>

Im siebten Kapitel des Buches Einstieg in HTML und CSS wurde der BODY-Bereich semantisch weiter unterteilt. Bislang hatte ich nur das header und das article Element benutzt. Folgende semantische Bereiche stehen im body zur Verfügung:

• Der Kopfbereich

  Der Kopfbereich wird durch das Element header ausgedrückt. Ein header Element kann mehrmals im body an beliebigen Positionen vorkommen. Er kann oben im body verwendet werden, genauso gut aber auch den Fußbereich einleiten. Bislang habe ich den header für den einleitenden Bereich innerhalb des article Elements verwendet. Üblicherweise wird er jedoch ganz oben im body Bereich verwendet, um einen sich wiederholenden Bereich zu definieren. Ein Slogan oder Logo kommt dort oft zum Einsatz.

• Der Navigationsbereich

  Der Navigationsbereich bildet die Hauptnavigation ab. Das Element nav kann an beliebigen Stellen im body stehen, durchaus auch mehrfach vorkommen. Vorstellbar ist eine Hauptnavigation zum Anfang der Website und ein weiterer Navigator könnte am Ende der Webseite stehen.

• Der Inhaltsbereich

  Der Inhaltsbereich wird durch das main Element umschlossen. Es darf nur einmalig auf jeder Webseite vorkommen. Als Elternelement sind nur body und div erlaubt. Im Inhaltsbereich steht der Hauptinhalt der Webseite.

• Der Fußbereich

  Der Fußbereich wird durch das footer Element umschlossen. Es steht am Ende der Seite und wird oft benutzt um Links wie "weiter nach oben" oder ein Impressum abzubilden.

• Der Zusatzinfo-Bereich

  Dieser Bereich wird durch das aside Element umschlossen. Es dafür da, zusätzlich ergänzende Informationen bereitzustellen. Das könnten bespielsweise Hinweise oder auch Ergänzungen sein.

• Der section-Bereich

  Dieser Bereich wird durch das section Element umschlossen und ist dafür da, inhaltliche Einteilungen in Abschnitten vorzunehmen.

• Der article-Bereich

  Das article Element ist dafür gedacht, in sich abgeschlossene Inhalte abzubilden. Das könnten ein Blogeintrag oder auch ein Artikel sein. Ein bestimmter informeller Bereich, der keine direkten Abhängigkeiten zum ihn umgebenden Text hat und somit auch von einer anderen Seite oder einem Newsreader eingebunden werden kann.

So schön und einfach wie der Einsatz von nano auch im Terminal ist, ist nun der Zeitpunkt gekommen mir einen neuen Editor zu installieren. Im Internet gibt es eine schier endlose Zahl von Programmen. Nach folgenden Gesichtspunkten habe ich selektiert:

• Kostenlose Software
• Software die aktuell, gepflegt oder besser in der Weiterentwicklung ist.
• Software mit einer großen Community.
• Software die open Source ist (GPL,LGPL,BSD oder MIT)
• Software die auf möglichst vielen Betriebssystemen eingesetzt werden kann.
• Software die durch Plugins erweiterbar ist.
• Software die möglichst viele Programmiersprachen unterstützt. Wichtig für sind mich html,css,js,php,python,sql
• Software die möglichst englisch- und deutschsprachig ist.
• Software die gut mit der Tastatur zu bedienen ist.
• Funktionen wie Autovervollständigung, Syntaxhervorhebeung.
• Hilfe für die jeweilige Programmiersprache.
• Versionierung, bspw. durch Git.
• Upload und Download per sftp oder ftps.
• Möglichst keine Telemetrie eingebaut.
• Gemäßigter Ressourcenverbrauch

Aufgrund der obrigen Punkte habe ich mich für Visual Code von Microsoft unter Ubuntu 23.10 entschieden. Installiert habe ich aufgrund der fehlenden Telemetrie und der MIT Lizenz das Projekt VSCodium. Mehr Infos zum Projekt VSCodium. Auf GitHub können Pakete für die verschiedensten Distributionen heruntergeladen werden. Unter Ubuntu 23.10 steht im Snapstore das Paket codium zur Verfügung. Zwar ein paar Monate älter als das aktuelle Release, aber für mich reicht das aus.

Im Buch Einstieg in HTML und CSS von Peter Müller bin ich aktuell im vierten Kapitel angelangt. Ich habe einiges über neue Elemente und deren Nutzung gelernt. Folgende Informationen zu den vier benannten Elementen:

• img - Das Einbinden von Bildern
  Bilder habe ich zuvor auch mit dem Tag img eingebunden. Neu für mich war jedoch die Kapselung durch das <figure> Tag und deren Beschreibung mit Hilfe des Tags <figcaption>. <figcaption> nutzen wir für die Beschreibung des Bildes. Beides, d.h. das img und das figcaption, umschließen wir mit figure Tag. Dadurch können Geräte und Programme, beispielsweise ein Screenreader einer sehbehinderten Menschens den Inhalt besser aufbereiten und vorlesen.

  <figure>
    <img src="beispieldatei.png" alt="Anzeige eines Hundes">
    <figcaption>Eine Bespieldatei die einen Hund beim Sprung zeigt wird dargestellt.</figcaption>
  </figure>
  

• a - Das Verlinken von Inhalten
  Beim setzen eines Links sollte nicht das Wort "hier" als Beschreibung genutzt werden. Bei der Auswertung eines Links durch eine Suchmaschine ist das wenig produktiv. Für sehbehinderte Menschen kann diese Information auch schlecht ausgewertet werden, denn das Vorlesen von hier nutzt doch recht wenig. Somit ergibt es durchaus sinn, eine aussagekräftige Information zu verlinken. Das nutzt auch allen anderen Lesern.
• strong - Das Hervorheben von Inhalten
  <strong> dient dazu wichtige Informationen im Fließtext bereits vor dem Lesen hervorzuheben. Oftmals wird der umrahmte Text fett hervorgehoben.
• em - Das Hervorheben von Inhalten
  <em> dient dazu Informationen im Fließtext während des Lesens einen Inhalt hevorzuheben und wird oft kursiv dargestellt.

Die Vorlage der Webseite mit einem Beispielartikel wurde angepasst. Diese erhält nun im Kopfbereich den Viewport. Sie finden die neue Vorlage mit Namen index-vorlage-0002.html im Ordner vorlagen.

Um die Webseite mit einem zusätzlichem Browser testen zu können, habe ich die aktuelle Chromium Version 121.0.6167.160 über den snap installiert. Unter dem apt erfolgt der Hinweis, dass eine Installation über den snap store erfolgen sollte. Der snap-store ist eine Ubuntu eigene Anwendung, bzw. Anwendungsmanager.

Beim Gnome Screenshot-Tool unter Ubuntu 23.10 vermisse ich nun doch ein paar Funktionen. Im Internet lassen sich einige Alternativen finden. Ich habe mich für das Tool Shutter entschieden. Es lässt sich im Standard-Repository mit apt direkt installieren, aber leider startet es dann nicht sondern stürzt ab. So jedenfalls bei mir geschehen unter Ubuntu 23.10 - Linux 6.5.0-17-generic #17-Ubuntu SMP PREEMPT_DYNAMIC Thu Jan 11 14:01:59 UTC 2024 x86_64 x86_64 x86_64 GNU/Linux. Ich habe es deshalb wieder mit apt deinstalliert und mir die 0.99.4-6-all.deb von github heruntergezogen und diese per apt installiert.

setfacl -m u:_apt:rx . 
wget https://github.com/mvivarelli/shutter-on-wayland/raw/master/shutter-on-wayland_0.99.4-6_all.deb
sudo apt -f install ./shutter-on-wayland_0.99.4-6_all.deb 

• Die Formatierungen des img Elements wurden angepasst (die max. Breite).
• Weiterhin wurde das pre Element aufgenommen. Somit kann bei viel Quellcode jetzt innerhalb des Artikels gescrollt werden.

• sich seine installierten Anwendungen anzusehen.
• das Ubuntu System und die installierten Anwendungen aktuell zu halten und Updates sowie Patches einzuspielen.
• neue Quellen, sogenannte Repositories einzupflegen.
• nach neuen Anwendungen zu suchen.
• neue Anwendungen zu installieren.
• alte Anwendungen wieder loszuwerden.

Und einiges mehr. Ich habe hier beispielhaft nur Ubuntu aufgeführt - dies trifft auch auf andere Linux Distributionen zu. Die Distributionen können sich aber durch den jeweiligen Paketmanager unterscheiden. Ubuntu kommt standardmäßig mit dem apt daher. Zusätzlich bringt es das eigene Tool snap mit.

Apt steht für das Advanced Packaging Tool, ist eine Kommandozeilen-Anwendung und im Terminal aufzurufen. Es benutzt aber dennoch eine farbige Darstellung und verfügt über eine Fortschrittsanzeige und ist einfach zu bedienen.

Unter Windows gibt es verschiedene Tools die das System, das System mit Microsoft Anwendungen und/oder fremde Anwendungen installieren. Gewohnt ist man dabei beim jeweiligen Anbieter die Software herunterzuladen oder ggf. noch diese in Form von DVDs zu erhalten. Anschließend startet man einen Installationsmanager der mit der Software ausgeliefert wird.

Unter Ubuntu (Debian) nutzt man das Tool apt um alles zu aktualisieren, dass heißt die installierten Anwendungen und das Linux System selber. Dabei werden die einzelnen Quellen in Form von Repositories eingebunden. Von diesen hinterlegten sicheren Quellen wird die jeweilige Software bezogen. Weiterhin prüft das apt mit der Installation auch die jeweiligen Abhängigkeiten die bestehen. Das könnten bestimmte Bibliotheken oder Programmversionen sein, die eine Software vorraussetzen kann. Hierzu ist es wichtig die Quellen samt ihrer Abhängigkeiten und Anwendungen zunächst mit sudo apt update zu aktualisieren. Ist das erfolgt, können Sie das System samt der installierten Anwendungen mit sudo apt full-upgrade aktualisieren.

apt list zeigt alle zur Verfügung stehenden Anwendungen bzw. mit apt list PAKETNAME das jeweilige Paket. Mit apt list --installed zeigen Sie alle bereits installierten Anwendungen an. apt search SUCHBEGRIFF durchsucht alle Paketbeschreibungen der Repositories nach dem Suchbegriff. apt show PAKETNAME zeigt alle Informationen zum gesuchten Paket an - beispielsweise eine Funktionsbeschreibung, die Größe und die Art der Lizensierung. sudo apt install PAKETNAME installiert das gewünschte Paket. Weitere Optionen erhalten Sie durch man apt.

Ubuntu spezifisch ist das Tool snap. snap ist ein Anwendungsmanager der komplett geschnürte Anwendungspakete betreut. Diese Pakete sind für sich unabhängig von anderer Software, dadurch aber auch bedeutend größer als die unter apt verfügbare Anwendung. Aber es hat auch den Vorteil, dass Sie beispielsweise verschiedene Versionen einer Applikation parallel installieren und benutzen können. Der Aufruf von snap erfolgt durch das Anwendungszentrum bzw. durch den Aufruf von snap in der Komandozeile. Da es hier jedoch um das apt geht ...

Gestern habe ich das Problem gehabt, unter Ubuntu einen passgenauen Bildschirmabschnitt zu erstellen. Das installierte Tool unter Ubuntu 23.10 heißt Bildschirmfoto 41.0. Der laufende Prozess dazu wird als gnome-screenshot bezeichnet. Leider bietet das Tool keine integrierte Lupenfunktion an. Für Menschen die nicht mehr so gut sehen können, ist das ein Problem. Die Lösung in Linux ist hier einmal mehr die Kombination zweier Anwendungen. Sie rufen den Screenshot auf. Hierzu können Sie die Druck-Taste betätigen. Die Taste befindet Sie meistens rechts neben der F12-Taste. Ist die Anwendung wie auf dem obrigen Bild sichtbar, rufen Sie die Lupenfunktion mit dem Tastenkürzel SUPER+ALT+8 auf. Danach wird der Bildschirm vergrößert dargestellt und Sie können die gewünschte Auswahl besser treffen. Vor dem Auslösen des Screenshots drücken Sie wieder die SUPER+ALT+8 Tastenkombination, damit die Lupe ausgeblendet wird. Unter Linux wird die "Windows-Taste" übrigens SUPER-TASTE genannt.

Bei der Erstellung von Screenshots unter Ubuntu vermisse ich die Lupenfunktion beim Standardtool. Es kann natürlich durchaus sein, dass ich bisher nur nicht auf die richtige Tastenkombination oder Einstellung in der Konfiguration dazu gefunden habe. Es nervt doch erheblich, wenn man nicht den kompletten Screen, bzw. das komplette Fenster ablichten möchte und deshalb einen Bereich auswählen muss. Mir passiert es immer wieder, dass ein oder zwei Pixel am Bildrand hängen, die ich gar nicht haben wollte und sich später als sehr störend herausstellen. Ich werde noch etwas weiter das Netz nach einer Lösung bzw. einem Tool durchsuchen. Wie immer, später mehr dazu.

Die Anwendung drawio liegt aktuell in der Version 23.02 vor. Sie gehört unter Ubuntu nicht zu den Standardtools die bereits installiert sind. In den Ubuntu Repositories fehlt sie ebenfalls. Im Anwendungszentrum steht diese als Snap-Image zur Verfügung.

Ich habe diese wie folgt direkt im Terminal mit snap installiert:

1. Terminalfenster öffnen - bspw. mittels der Tastenkombination Strg+Alt+t
2. Vorhandene Snaps samt snapstore aktualisieren: sudo snap refresh

   

3. Paket suchen: snap find drawio

   

4. Informationen zum Paket anschauen: snap info drawio

   

5. Anwendung installieren: sudo snap install drawio

Mittels des gestern installierten Grafiktools drawio habe ich verschiedene Icons erstellt und diese jeweils im Header der Artikel hinzugefügt. Durch die Icons soll es möglich sein, denn Inhalt der Artikel schneller einzuordnen. Die kleinen Grafiken sind alle vektorbasiert und demzufolge immer scharf, egal was für ein Bildschirm (Größe/Auflösung) zur Anzeige verwendet wird. Innerhalb von drawio sind alle Icons in einer Datei erfasst. Die jeweiligen Icons sind dann einzeln im SVG Format exportiert worden. Der Speicherplatz beträgt jeweils unter 2kb.

Ein Punkt auf meiner ToDo-Liste ist die Erstellung von Icons und Vektorgrafiken. Es gibt eine Vielzahl von Programmen, die sich dafür anbieten. So stellt sich mir die Frage, welches ich wohl nehmen sollte? Ein Designer würde jetzt wohl laut Illustrator sagen. Um genau zu sein Adobe Illustrator. Ein durchaus tolles Programm, was jedoch seinen Preis hat. Ältere Versionen konnte man noch käuflich erwerben - derzeit wird es jedoch nur noch als Abo für über 20 Euro im Monat vertrieben. Zudem wird es nur für die Beriebssysteme Microsoft Windows und Apple macOs vertrieben. Somit fällt diese Anwendung heraus, da ich nach etwas suche, dass unter Linux läuft, kostenlos und wenn möglichst Open Source ist.

Folgende Kandidaten habe ich gefunden:

• LibreOffice Draw - bereits unter Ubuntu vorinstalliert - mehr zum Programm LibreOffice Draw gibt es hier
• Inkscape - mehr zum Programm Inkscape gibt es hier
• draw.io - mehr zum Programm Drawio gibt es hier