From 8b2bbc4b56f99498d08b7a3ce71694eae48334cb Mon Sep 17 00:00:00 2001 From: Denis Ergin Date: Fri, 18 Oct 2024 11:52:19 +0200 Subject: [PATCH] feat(knowledge-base): Build Web-Engineering-I introduction page with links to slides --- .vscode/settings.json | 3 +- src/components/mdx/Card.astro | 57 +++++++++ src/components/mdx/Spacer.astro | 8 ++ src/content/config.ts | 11 ++ src/content/dhbw/de/web-engineering-i.mdx | 120 ++++++++++++++++++ src/content/dhbw/de/web-engineering-ii.md | 14 ++ src/icons/arrow.svg | 3 + src/pages/knowledge-base/dhbw/[...slug].astro | 20 +++ src/styles/markdown.css | 3 + 9 files changed, 238 insertions(+), 1 deletion(-) create mode 100644 src/components/mdx/Card.astro create mode 100644 src/components/mdx/Spacer.astro create mode 100644 src/content/dhbw/de/web-engineering-i.mdx create mode 100644 src/content/dhbw/de/web-engineering-ii.md create mode 100644 src/icons/arrow.svg create mode 100644 src/pages/knowledge-base/dhbw/[...slug].astro create mode 100644 src/styles/markdown.css diff --git a/.vscode/settings.json b/.vscode/settings.json index 14ae2ef..cc4ccbf 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -4,6 +4,7 @@ "slides", "tasks", "landing", - "build" + "build", + "knowledge-base" ] } \ No newline at end of file diff --git a/src/components/mdx/Card.astro b/src/components/mdx/Card.astro new file mode 100644 index 0000000..c317255 --- /dev/null +++ b/src/components/mdx/Card.astro @@ -0,0 +1,57 @@ +--- +import { Icon } from 'astro-icon/components' +interface Props { + to: string; + color?: 'green' | 'rose' | 'violet' | 'blue'; +} + +const { color, to } = Astro.props; +--- + + + + + + + \ No newline at end of file diff --git a/src/components/mdx/Spacer.astro b/src/components/mdx/Spacer.astro new file mode 100644 index 0000000..75824fa --- /dev/null +++ b/src/components/mdx/Spacer.astro @@ -0,0 +1,8 @@ +
+ + \ No newline at end of file diff --git a/src/content/config.ts b/src/content/config.ts index 77bb3cf..e71229a 100644 --- a/src/content/config.ts +++ b/src/content/config.ts @@ -7,6 +7,17 @@ const skillCollection = defineCollection({ }), }); +const dhbwCollection = defineCollection({ + type: 'content', + schema: z.object({ + title: z.string(), + tags: z.array(z.string()), + staticPath: z.string(), + show: z.optional(z.boolean()), + }), +}); + export const collections = { 'skills': skillCollection, + 'dhbw': dhbwCollection, } \ No newline at end of file diff --git a/src/content/dhbw/de/web-engineering-i.mdx b/src/content/dhbw/de/web-engineering-i.mdx new file mode 100644 index 0000000..fe38281 --- /dev/null +++ b/src/content/dhbw/de/web-engineering-i.mdx @@ -0,0 +1,120 @@ +--- +title: "Web Engineering I" +tags: +- "dhbw" +- "web" +- "engineering" +- "html" +- "css" +- "javascript" +slug: "web-engineering-i" +staticPath: "knowledge-base/dhbw/" +show: true +--- +import Card from '../../../components/mdx/Card.astro'; +import Spacer from '../../../components/mdx/Spacer.astro'; + +# Modul: Web Engineering I + +In diesem Modul werden die Grundlegenden Konzepte erklärt, aus denen sich moderne Webseiten zusammensetzen. Insgesamt werden die Themen HTML, CSS und JavaScript näher gebracht und wie diese 3 Grundpfeiler miteinander zusammen arbeiten. Neben den eigentlichen Slides, gibt es für bestimmte Themenblöcke Aufgaben zu erledigen, die das Wissen vertiefen sollen. + +Kursteilnehmer können folgenden Link nutzen um auf eine Checklist für alle anfallenden Inhalte zu kommen. + +Zur *Web-Engineering I* Checkliste +
+ +--- + +## Einführung in HTML + +Mithilfe von HTML (Hypertext Markup Language) erzeugt man eine Struktur, in der die Inhalte einer Website platziert werden. Mithilfe verschiedener *"Tags"* werden unterschiedliche Inhalte definiert. Diese beginnen bei Überschriften, und strecken sich über Paragraphen, Visuellen Medien wie Bilder, Formulare, bis hin zu komplexen Grafiken, die aus verschiedenen Daten zusammengesetzt werden. +
+ +### # Geschichte der Internets + +Von den frühen Tagen, in denen das Internet und dessen Technologien noch in der Kinderschuhen steckten bis zu den rasanten Erweiterungen bis zum Jahr 2000. In diesen Slides gibt es einen schnellen Überblick, wie sich das Web entwickelt hat. + +Zu den Slides + + + +### # Möglichkeiten zum Mitarbeiten (Projekt-Setup) + +Abhängig vom aktuellen Thema gibt es verschiedene Arten, um *interaktiv* mitzumachen. +Dies beginnt bei einfachen Web-Apps, die eine Sandbox bereit stellen um *schnell* etwas auszuprobieren, bis hin zu einem komplett aufgesetzten Projekt in dem Stück für Stück weitere Inhalte hinzugefügt werden können. + +Zu den Slides +
+Docker Template + + + +### # HTML - Basics + +Nun aber ans eingemachte! Was genau ist nun HTML? Was sind Tags / Elemente? Wie nutzt man das alles? + +Wir werden das Grundgerüst jeder HTML-Seite betrachten und wie wir zusätzliche Attribute setzten können und uns mit dem `head` Element auseinandersetzen. + +Zu den Slides + + +### # Die verschiedenen Arten von HTML-Elementen (Tags) + +Nachdem das Grundgerüst gebaut wurde, werden wir die HTML-Seite nun endlich mit richtigem Inhalt füllen! Texte mit verschiedenen Nutzungs-Kontexten stehen hier an der Tagesreihe. +Weiterhin gibts hier einen Überblick, welche tagtägliche Tags existieren und auch ein paar speziellere für bestimmte Einsatzzwecke betrachtet. + +Grundsätzlich findet man in der folgenden Präsentation: +* Texte +* Überschriften +* Aufzählungen +* Landmarks + +Zu den Slides +
+Programmieraufgabe +
+Cheat-Sheet + + +### # Bilder in HTML einbetten + +Moderne Webinhalte bestehen nicht nur aus Texten. Nachdem wir uns überwiegend mit Textinhalten auseinander gesetzt haben, nehmen wir nun Bilder unter die Lupe. Was ist notwendig um ein Bild anzuzeigen, welche Attribute sollten mitgegeben werden und wie lassen sich Bilder für schmale und breite Bildschirme optimiert anzeigen? + +Zu den Slides +
+Programmieraufgabe +
+Cheat-Sheet + + +### # HTML-Dokumente verlinken + +Eine Website spielt sich nicht nur innerhalb einer einzelnen HTML-Datei ab. Eine Website lebt, indem sie Verlinkungen (intern, sowie extern) hat und damit zu weiteren Seiten weiterleitet. Je nachdem, was einen Nutzer der Webseite interessiert. +Wir schauen uns an, wie Links eigentlich aufgebaut sind und wie man seine Dateien struktuieren kann beziehungsweise soll. + +Zu den Slides +
+Programmieraufgabe +
+Cheat-Sheet + + +### # Tabellen + +Wenn auch ein etwas älteres "Konstrukt", sind Tabellen immernoch nützlich um große Datenmengen strukturiert anzuzeigen. Durch die natürliche *komplexere* Art von Tabellen, gibt es auch eine Menge Tags, die es zu benutzen gilt um eine Tabelle korrekt aufzubauen. + +Zu den Slides +
+Cheat-Sheet + + +### # Formulare + +Im letzten Abschnitt der HTML-Reihe widmen wir uns den ersten *Interaktiven* Elementen einer Webseite: den Formularen. Sei es ein einfaches Kommentarfeld oder ein komplexes Bezahlformular in dem man allerlei Daten angeben muss - Formulare begleiten uns bis in die verstecktesten Ecken des Webs. Hierzu schauen wir uns die von HTML gegeben (und zahlreichen) Möglichkeiten an, wie man Daten eingeben kann. + +Zu den Slides +
+Programmieraufgabe +
+Cheat-Sheet + diff --git a/src/content/dhbw/de/web-engineering-ii.md b/src/content/dhbw/de/web-engineering-ii.md new file mode 100644 index 0000000..683b2bf --- /dev/null +++ b/src/content/dhbw/de/web-engineering-ii.md @@ -0,0 +1,14 @@ +--- +title: "Web Engineering II" +tags: +- "dhbw" +- "web" +- "engineering" +- "html" +- "css" +- "javascript" +slug: "web-engineering-ii" +staticPath: "knowledge-base/dhbw/" +show: false +--- +# Hallo Welt! \ No newline at end of file diff --git a/src/icons/arrow.svg b/src/icons/arrow.svg new file mode 100644 index 0000000..d849aa8 --- /dev/null +++ b/src/icons/arrow.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/pages/knowledge-base/dhbw/[...slug].astro b/src/pages/knowledge-base/dhbw/[...slug].astro new file mode 100644 index 0000000..04a52bf --- /dev/null +++ b/src/pages/knowledge-base/dhbw/[...slug].astro @@ -0,0 +1,20 @@ +--- +import Layout from '../../../layouts/Layout.astro'; +import { getCollection } from 'astro:content'; +import '../../../styles/markdown.css'; + +// 1. Generate a new path for every collection entry +export async function getStaticPaths() { + const blogEntries = await getCollection('dhbw'); + return blogEntries.map(entry => ({ + params: { slug: entry.slug }, props: { entry }, + })); +} +// 2. For your template, you can get the entry directly from the prop +const { entry } = Astro.props; +const { Content } = await entry.render(); +--- + + + + \ No newline at end of file diff --git a/src/styles/markdown.css b/src/styles/markdown.css new file mode 100644 index 0000000..45db3a9 --- /dev/null +++ b/src/styles/markdown.css @@ -0,0 +1,3 @@ +.mb-1 { + margin-bottom: 1rem; +} \ No newline at end of file