Praktisches Bearbeiten der Website

Arbeitsumgebung einrichten

Die Arbeit an der Website kann im Prinzip mit beliebigen (Web-)Editoren erfolgen; ich empfehle die Arbeit mit Visual Studio Code (kostenlos). Dazu gibt es zwei Möglichkeiten:

mit einem lokal installierten Visual Studio Code
in einem GitHub CodeSpace.

lokales Visual Studio Code

Download und Installation von Git
- Fragen bei der Installation im Zweifel auf der Standardeinstellung lassen
Download von der Website und Installation
Visual Studio Code starten
auf der Startseite Clone Repository wählen, falls vorhanden, und die URL des Github-Repositories, https://github.com/jltonline/jltonline.github.io/ eingeben / einkopieren, oder Strg+Umschalt+G bzw. das Source Control-Symbol in der Spalte am linken Rand wählen und dort auf Clone Repository klicken.
auf Nachfrage bei Github anmelden
auf die Frage »vertrauen Sie den Autor:innen« mit ja antworten
die empfohlenen Extensions installieren (es gibt eine Nachfrage)

Github Codespace

Codespaces sind ein Angebot von Github, um mit (z. B.) Visual Studio Code ohne Installation direkt im Browser arbeiten zu können. Dazu wird VSCode in einer von Github zur Verfügung gestellten virtuellen Maschine gestartet und über ein Browserinterface angeboten. Nur eine begrenzte Zahl von Stunden Arbeit mit Codespaces pro Monat ist kostenlos.

Bei Github einloggen und auf die Seite unseres Github-Repositories gehen
Rechts oben auf den grünen Button <> Code klicken
Tab Codespaces auswählen
ggf. aktiven Codespace wählen, oder Create codespace on main klicken.

Git-Repository: Grundsätzliches

Das Git-Repository enthält alle Daten der Website und deren komplette Versionsgeschichte. Durch das Klonen wird eine Kopie des Repositorys auf dem lokalen Rechner bzw. in dem Codespace angelegt und daraus die aktuelle Version als Arbeitskopie extrahiert, auf der man dann arbeitet.

Um eine Änderung auf die tatsächliche Website zu bringen, sind drei Schritte nötig:

Die Änderung muss in der Arbeitskopie durchgeführt und gespeichert werden
Die Änderung muss der lokalen Kopie des Repositories hinzugefügt und mit einem Bearbeitungskommentar committet werden
Die committeten Änderungen müssen auf Github gepusht werden, d.h. die lokale Kopie des Repository wird mit der Kopie bei Github synchronisiert.

Kurze Zeit später sind die Änderungen dann auch auf der publizierten Website sichtbar.

Seite bearbeiten in VSCode

Beispiel: Es soll ein Konferenzbericht von Renate Muster zur Conference on JLT Maintenance (2024) eingestellt werden. Dazu muss auf der Konferenzberichte-Seite auch noch ein neuer Eintrag für 2024 angelegt werden.

Ganz links in VSCode mit dem obersten Symbol den Explorer aktivieren (Strg+Umschalt+E). Dort erscheint der Verzeichnisbaum der JLT-Webseite.
Rechtsclick auf den Eintrag conferences und Neuer Ordner auswählen. In der aufgehenden Eingabezeile 2024 eintippen und die Eingabetaste drücken.
Die Dateien für den Artikel – muster-jlt-maintenance.html und muster-jlt-maintenance.pdf – aus dem Betriebssystem-Dateibrowser in den gerade erstellten Ordner 2024 in VSCode ziehen
Die unter conferences einsortierte Datei index.html anklicken, sie geht dann im Editorbereich rechts auf.
Ans Ende vor die Zeile mit </ul> rollen und dort <li><a href="2024">2024</a></li> eintragen, um einen Link namens 2024 auf den gleichnamigen Ordner anzulegen. Tipp: Die Tabulatortaste ist hilfreich …
Diese Datei speichern (Strg+S).
Den Ordner 2024 mit der rechten Maustaste anklicken und Neue Datei wählen. Erneut index.html eingeben und die Eingabetaste drücken. Es öffnet sich ein neuer Editor mit der leeren index.html-Datei.
In diesem Editor < eintippen und aus der aufpoppenden Autovervollständigungsbox den Eintrag <html Leere JLTonline-Seite auswählen. Es wird eine Vorlage eingefügt, der Cursor steht im Titel. Nun mit der Tabulatortaste ⭾ durch die verschiedenen Formularstellen wechseln und entsprechend ausfüllen:
- Als Titel Conferences 2024
- in body class="issue" wählen
- in den Breadcrumbs die Einträge für die Elternseite hinzufügen:
```
<li><a href="/conferences" lang="en">Conferences</a></li>
<li><a href="/conferences" lang="de">Konferenzberichte</a></li>
```
- Noch den <h1>-Eintrag anpassen
- Cursor unter den h1-Eintrag setzen.
Nun einen Eintrag für den Beitrag von Frau Muster hinzufügen. Auch dafür gibt es eine Artikel, die vorgeschlagen wird, wenn man <article zu tippen beginnt. Wieder kann man mit der Tabulatortaste ⭾ durch die einzelnen vorgeschlagenen Felder gehen und sie entsprechend ausfüllen.

Wenn etwas an dem hinzugefügten Fragment nicht zum Eintrag passt, kann man es gerne direkt bearbeiten. Der Eintrag für den Konferenzbericht könnte am Ende z. B. so aussehen:
```
<article>
  <p class="title" lang="en" translate="no">Conference on JLT maintenance</p>
  <p class="authors">Renate Muster</p>
  <nav class="article-links">
    <a href="muster-jlt-maintenance.html" lang="en" hreflang="en" translate="no">HTML</a>
    <a href="muster-jlt-maintenance.pdf" lang="en" hreflang="en" translate="yes">PDF</a>
  </nav>
</article>
```
Datei speichern.

Vorschau

Die bearbeiteten HTML-Seiten können während des Bearbeitens jederzeit in einer Vorschau oder im Browser angesehen werden. Dazu gibt es rechts oben im Editorbereich einen Vorschau-Knopf (siehe Animation unten). Da der Vorschaubereich eher schmal ist, wird man dort voraussichtlich die mobile Ansicht sehen, über das Burgermenü kann die Vorschau jedoch auch im normalen Browser aufgerufen werden.

Änderungen mit Github synchronisieren

Für die folgenden Änderungen arbeiten wir auf dem Git-Tab des linken Seitenbalkens von VSCode (drittes Icon von oben):

Zunächst in der Zeile Änderungen den Knopf + Alle Änderungen bereitstellen wählen. Die geänderten und neuen Dateien erscheinen dann unter einer Überschrift wie gestagte Änderungen.
Dann oben in die Zeile einen Kommentar eingeben, der die Änderungen beschreibt.
Schließlich den grünen Commit-Button klicken.

Die Änderungen sind damit im lokalen Repository committet und der Button verändert sich in Änderungen synchronisieren.

Änderungen synchronisieren klicken. Die Änderungen landen dann auf Github und wenig später auf der Website.