Markdown

Code-Dokumentation werden bei Code-Projekten standardmässig im Markdown-Format verfasst - eine Markup Langauge, welche weniger explizite Steuerzeichen als etwa HTML braucht aber bspw. Code-Blöcke gut darstellen kann.

Diese Seite...

Nice to know: Das gesamte Unterrichts-Material unserer EF-Seite ist in Markdown geschrieben 😎.

Tutorial

Bearbeiten Sie das Tutorial inkl. der Übungen zu Markdown auf der Seite

👉 https://commonmark.org/

und markieren Sie die Aufgabe anschliessend als erledigt.

Achtung

Im Tutorial wird eine Möglichkeit gezeigt, wie man neue Zeilen macht. Verwenden Sie die Option mit zwei Leerschlägen am Ende der Zeile, so dass Ihre Markdowns die grösstmögliche Kompatibilität aufweisen - ein \ wird nicht immer unterstüzt.

Bilder und relative Pfade

Im Tutorial haben Sie gesehen, dass man Bilder einfach einbinden kann - allerdings braucht es dazu nicht unbedingt ein Online-Bild mit einer https://-Adresse, sondern wir können auch ganz einfach Bilder aus unserem Projektordner einbinden. Dazu müssen wir die Bilder in einen Unterordner (z.B. images) speichern und dann den Pfad zu diesem Bild angeben.

Dazu kurz etwas Theorie zu relativen Pfaden:

In der Informatik werden Pfade oft auch relativ zu einem Verzeichnis angegeben. Dabei werden

• wie üblich Ordnernamen und Dateien mit einem Slash / getrennt.
• Ein . steht für das aktuelle Verzeichnis - ausgehend von der aktuell betrachteten Datei.
• Ein .. steht für das übergeordnete Verzeichnis - ausgehend von der betrachteten Datei der übergeordnete Ordner.

Beispiel

www

• static
  • logo.png 👈
• webseite
  • README.md 🟢
  • images
    • blume.png
    • sonne.jpg 👈

Ausgehend von README.md (🟢) ist der relative Pfad

• zu sonne.jpg (👈) ./images/sonne.jpg
• zu logo.png (👈) ../static/logo.png

Die Markdown-Syntax ausgehend von README.md wäre dann

![Sonne](./images/sonne.jpg)
![Logo](../static/logo.png)

Relative Pfade

Geben Sie für folgende Pfade von der aktuellen Datei (🟢 oder 🟠) zum Ziel (👈) die korrekten relativen Pfade (nur die Pfade, nicht die Markdown-Syntax) an:

webseite

• index.txt 🟢
• images
  • blume.png
  • sonne.jpg 👈

Laden...

webseite

• index.html 🟢
• pages
  • about.txt 🟠
  • cv.txt
  • images
    • me.png 👈

Laden...

Laden...

webseite

• index.txt
• images
  • blume.png 👈
  • sonne.jpg
• pages
  • about.txt
  • cv.txt 🟢

Laden...

Markdown-Quiz

Für diese Anzeigekomponente (Typ: quiz) ist eine Anmeldung erforderlich.

GitHub: Sneak Peak

Um unseren Code zu versionieren und synchronisieren, verwenden wir GitHub. Github ist aktuell der Quasi-Standard für Open Source Software und bietet Entwicklern kostenlos die Möglichkeit, sogenannte Repositories zu erstellen. Zu diesem Begriff später mehr.

Im Kickoff-Meeting vor den Sommerferien haben Sie bereits ein GitHub-Konto erstellt.

Steckbrief Light

In dieser Aufgabe fügen Sie Ihrem GitHub-Profil einen kleinen Steckbrief hinzu.

1. Schritt 1

   Loggen Sie sich auf 👉 https://github.com/ mit Ihrem vor den Ferien erstellten GitHub-Konto ein.

EF Repository

Obiges Repository muss öffentlich sein und dient als Willkommensseite auf Ihrem Github-Profil. Für das EF-Informatik erstellen wir nun aber ein separates Repository, um über Code zu schreiben (und später auch den geschriebenen Code hochzuladen). Bei diesem Repository entscheiden Sie selbst, ob es öffentlich oder privat ist - Sie können dies zu einem späteren Zeitpunkt auch noch ändern.

1. Erstellen Sie ein neues Repository mit dem Namen EF-Informatik und aktivieren Sie die Option Add README.

2. Ändern Sie in der URL die github.com zu github.dev (z.B. von https://github.com/bh0fer/EF-Informatik zu https://github.dev/bh0fer/EF-Informatik) und drücken Sie Enter. Es öffnet sich eine Web-Version von VS Code, in welcher Markdown-Dateien praktisch bearbeitet werden können.

   Berechtigun

   Um ein Repository im Webeditor zu öffnen, müssen Sie allenfalls beim erstmaligen Öffnen eine Berechtigung für den Zugriff auf Ihr Repository annehmen.

3. Vorschau öffnen
   Im Webeditor kann auch eine Live-Vorschau der Markdown-Datei geöffnet werden - Sie sehen immer live, wie Ihre Änderungen in der Datei aussehen werden.

   

Steckbrief

Persönlicher Steckbrief

Erstellen Sie nun einen etwas persönlicheren Steckbrief, der

• min. ein Bild enthält,
• min. 3 Unterüberschriften aufweist,
• einen kurzen Einblick zu Ihnen gibt (Hobbies, Codeprojekte, Lieblingsbücher, Lieblingsfächer, Léieblingsvereine, Lieblingsessen, Lieblingsmusik, Lieblings...?).

Bilder können Sie per Drag&Drop in den Webeditor ziehen.

Achten Sie darauf, alle Bilder in einen neuen Ordner images zu speichern.

Sie können sich für Ihren Steckbrief auch an unseren Steckbriefen orientieren:

• 👉 bh0fer/EF-Informatik
• 👉 SilasBerger/EF-Informatik

Um die veränderten/neuen Dokumente zu speichern, müssen Sie wie folgt vorgehen:

Halten Sie zudem die URL zu Ihrem Repository in der folgenden Antwortbox fest.

Laden...

Erster Report

Erster Report

Setzen Sie die folgende Struktur in Ihrem EF-Repository auf, um auch über unseren Code zu berichten.

Erstellen/Ergänzen Sie dazu folgende Ordnerstruktur:

EF-Informatik/
├── docs/
│   ├── images/
│   └── 01-einstieg.md
├── images/
└── README.md

1. Halten Sie im Dokument 01-Einstieg.md einen Erfahrungsbericht zu den bisherigen Aufgaben fest. Darin können Sie
   • einzelne neu gelernte Dinge
   • Stolpersteine
   • Tipps und Tricks
   • etc. festhalten.
2. Stellen Sie sicher, dass Sie in Ihrem Bericht sowohl Python-Formatierte Codeblocks wie auch inline-Code verwenden.
3. Laden Sie die Änderungen so hoch, wie im Video weiter oben gezeigt.
4. Markieren Sie die Aufgabe als erledigt.

Eine mögliche, nicht vollständige, Vorlage für einen ersten Report finden Sie hier: 👉 docs/01-einstieg.md

Leere Ordner

Falls bei Ihnen der Ordner EF-Informatik/docs/images leer ist, wird dieser Ordner nicht direkt auf GitHub erstellt. Dies ist eine Speicherplatzoptimierung von Git.