Wiki-Workshop 02.04.2022
bearbeitet von Matthias ScharwiesHier noch einige Infos zum heutigen Workshop!
# 1. Themen
Es soll einerseits um eine allgemeine Einführung in die Arbeit mit MediaWiki gehen.
Andererseits soll es um ein konkretes Projekt gehen: Im Tutorial [CSS/Tutorials/Einstieg/Gestaltungstipps](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Gestaltungstipps) fehlt ein gutes Beispiel.
@Michael S hat uns dankenswerterweise erlaubt, den Entwurf seiner Webseite als Beispiel zu verwenden.
[![wireframe - wird noch gezeichnet](/images/f901c22e-b232-11ec-8f57-b42e9947ef30.jpg?size=medium "wireframe - wird noch gezeichnet")](/images/f901c22e-b232-11ec-8f57-b42e9947ef30.jpg)
Ein neutraler Entwurf ist bereits unter [bplaced.net/design03](http://svg.bplaced.net/design03/) online.[^1]
Dieser soll dann das bestehende design03 ersetzen: [CSS/fertige_Layouts/Design03](https://wiki.selfhtml.org/wiki/CSS/fertige_Layouts/Design03)
[^1]: (Webseiten mit mehreren Dateien und externen Bildern sind nur schwierig als Beispiele im Wiki zu realisieren.)
## 1.1 Content is king!
[Der „große Sinn von CSS“](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Stylesheets_einbinden#Trennung_von_Inhalt_und_Design) besteht in der Trennung von Inhalt und Design.
Eine HTML-Struktur kann man nur mit entsprechendem Inhalt erstellen. Wer möchte diesen Seiten gute Beispieltexte - evtl. aus dem Wiki kopiert (und wieder zurückverlinkt) - geben?
* [design03/was.html](http://svg.bplaced.net/design03/was.html)
* [design03/wie.html](http://svg.bplaced.net/design03/wie.html)
Ein zip-Ordner mit **allen** Dateien ist unter [svg.bplaced.net/design02-04.zip](bplaced.net/design02-04.zip) verfügbar (4.23MB).
## 1.2 CSS
Ausgehend von diesem *wireframe* wollen wir kurz eine moderne, aufgeräumte HTML-Struktur vorstellen und dann das passende CSS entwickeln:
0. Passende Farben, Formen und Schriften (Verzicht auf 3rd-Party-Content!)
1. Mobile first!
2. Mehrspaltenlayout bei größeren Viewports
3. Ein Dark Mode bei entsprechenden Einstellung im OS des Nutzers.
Das fertige Layout soll dann sowohl im Tutorial als auch unter [CSS/fertige Layouts](https://wiki.selfhtml.org/wiki/CSS/fertige_Layouts) präsentiert werden.
# 2. Ablauf
**16:00** Kickoff-Meeting (30min)
* kurze Vorstellung der Teilnehmer und des Projekts (30min)
* Youtube-Video "Arbeiten mit dem SELFWiki"
**16:30** Erarbeitungs / Recherchephase (30min)
* Wir sichten Vorhandenes im Wiki und überlegen, was verbessert werden soll.
* Ich bin in dieser Zeit über Discord ansprechbar.
**17:00** gemeinsamer Zwischenbericht (30min)
Brainstorming,
* welche Verbesserungen am Layout / Design durchgeführt werden.
* welche Verbeserungen im SELF-Wiki druchgeführt werden sollen.
evtl. Aufteilung in Arbeitsgruppen
**17:30 - 20:00** Erarbeitung II (150min)
* Ich bin in dieser Zeit über Discord ansprechbar
* Ich versuche gegen Ende alle Änderungen in das Online-Beispiel aufzunehmen.
* Wir alle können im SELF-Wiki Artikel verbessern, wobei für [CSS/Tutorials/Einstieg/Gestaltungstipps](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Gestaltungstipps) eine Absprache empfehlenswert wäre.
- [Vom_Regelsatz_zum_responsiven_Layout](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Gestaltungstipps#Vom_Regelsatz_zum_responsiven_Layout) soll das Design03 im Wiki erklären. **Sollte dieses Kapitel an den Anfang gestellt werden?**
- Das Kapitel [Guter_CSS-Stil](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Gestaltungstipps#Guter_CSS-Stil) würde ich eigentlich erst an 2. Stelle haben wollen.
- Wie geht es Weiter? und "Siehe auch" sollten zusammengeschmissen werden.
**20:00-21:00** Abschluss - Feedback
# 3. Zukunft
Vielleicht kann man das so alle 6-8 Wochen wiederholen?
## 3.1. [bplaced.net/design04](http://svg.bplaced.net/design04/) - impossible Shapes.
Unsere ***fertigen Layouts*** haben „immer“ mehrere Unterseiten; Beispiele für „moderne“ Templates sind „immer“ Single-Page-Webseiten.
Es gibt ein Tutorial [HTML/Tutorials/Single-Page_Webseite](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Single-Page_Webseite), das überarbeitet werden müsste.
Man könnte in einem weiteren Kapitel JS ins Spiel bringen, um Vor- und Zurück-Buttons einzufügen, mit dem Interaction Observer schauen, welche Bereiche aktuell sind.
Ich persönlich fände das auch als "**HTML-Präsentation als Alternative zu Powerpoint**" interessant.
--------------
## 3.2. Grid
Grid ist sehr attraktiv und umfangreich. Sollte man da mal rübergehen und den Kurs überprüfen?
So etwas [CSS/Tutorials/Grid/mehrspaltige_Layouts](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/mehrspaltige_Layouts) fände ich als Einstieg besser als diese Vorüberlegungen.
--------------
## 3.3 Spiele
Mein Sohn (10Jahre) möchte mit mir ein Spiel programmieren. Da wäre natürlich der erste Gedanke Scratch zu nehmen. Evtl geht da aber doch etwas mit JavaScript?
Herzliche Grüße
Matthias Scharwies
Wiki-Workshop 02.04.2022
bearbeitet von Matthias ScharwiesHier noch einige Infos zum heutigen Workshop!
# 1. Themen
Es soll einerseits um eine allgemeine Einführung in die Arbeit mit MediaWiki gehen.
Andererseits soll es um ein konkretes Projekt gehen: Im Tutorial [CSS/Tutorials/Einstieg/Gestaltungstipps](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Gestaltungstipps) fehlt ein gutes Beispiel.
@Michael S hat uns dankenswerterweise erlaubt, den Entwurf seiner Webseite als Beispiel zu verwenden.
[![wireframe - wird noch gezeichnet](/images/f901c22e-b232-11ec-8f57-b42e9947ef30.jpg?size=medium "wireframe - wird noch gezeichnet")](/images/f901c22e-b232-11ec-8f57-b42e9947ef30.jpg)
Ein neutraler Entwurf ist bereits unter [bplaced.net/design03](http://svg.bplaced.net/design03/) online.[^1]
[^1]: (Webseiten mit mehreren Dateien und externen Bildern sind nur schwierig als Beispiele im Wiki zu realisieren.)
## 1.1 Content is king!
[Der „große Sinn von CSS“](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Stylesheets_einbinden#Trennung_von_Inhalt_und_Design) besteht in der Trennung von Inhalt und Design.
Eine HTML-Struktur kann man nur mit entsprechendem Inhalt erstellen. Wer möchte diesen Seiten gute Beispieltexte - evtl. aus dem Wiki kopiert (und wieder zurückverlinkt) - geben?
* [design03/was.html](http://svg.bplaced.net/design03/was.html)
* [design03/wie.html](http://svg.bplaced.net/design03/wie.html)
Ein zip-Ordner mit **allen** Dateien ist unter [svg.bplaced.net/design02-04.zip](bplaced.net/design02-04.zip) verfügbar (4.23MB).
## 1.2 CSS
Ausgehend von diesem *wireframe* wollen wir kurz eine moderne, aufgeräumte HTML-Struktur vorstellen und dann das passende CSS entwickeln:
0. Passende Farben, Formen und Schriften (Verzicht auf 3rd-Party-Content!)
1. Mobile first!
2. Mehrspaltenlayout bei größeren Viewports
3. Ein Dark Mode bei entsprechenden Einstellung im OS des Nutzers.
Das fertige Layout soll dann sowohl im Tutorial als auch unter [CSS/fertige Layouts](https://wiki.selfhtml.org/wiki/CSS/fertige_Layouts) präsentiert werden.
# 2. Ablauf
**16:00** Kickoff-Meeting (30min)
* kurze Vorstellung der Teilnehmer und des Projekts (30min)
* Youtube-Video "Arbeiten mit dem SELFWiki"
**16:30** Erarbeitungs / Recherchephase (30min)
* Wir sichten Vorhandenes im Wiki und überlegen, was verbessert werden soll.
* Ich bin in dieser Zeit über Discord ansprechbar.
**17:00** gemeinsamer Zwischenbericht (30min)
Brainstorming,
* welche Verbesserungen am Layout / Design durchgeführt werden.
* welche Verbeserungen im SELF-Wiki druchgeführt werden sollen.
evtl. Aufteilung in Arbeitsgruppen
**17:30 - 20:00** Erarbeitung II (150min)
* Ich bin in dieser Zeit über Discord ansprechbar
* Ich versuche gegen Ende alle Änderungen in das Online-Beispiel aufzunehmen.
* Wir alle können im SELF-Wiki Artikel verbessern, wobei für [CSS/Tutorials/Einstieg/Gestaltungstipps](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Gestaltungstipps) eine Absprache empfehlenswert wäre.
- [Vom_Regelsatz_zum_responsiven_Layout](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Gestaltungstipps#Vom_Regelsatz_zum_responsiven_Layout) soll das Design03 im Wiki erklären. **Sollte dieses Kapitel an den Anfang gestellt werden?**
- Das Kapitel [Guter_CSS-Stil](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Gestaltungstipps#Guter_CSS-Stil) würde ich eigentlich erst an 2. Stelle haben wollen.
- Wie geht es Weiter? und "Siehe auch" sollten zusammengeschmissen werden.
**20:00-21:00** Abschluss - Feedback
# 3. Zukunft
Vielleicht kann man das so alle 6-8 Wochen wiederholen?
## 3.1. [bplaced.net/design04](http://svg.bplaced.net/design04/) - impossible Shapes.
Unsere ***fertigen Layouts*** haben „immer“ mehrere Unterseiten; Beispiele für „moderne“ Templates sind „immer“ Single-Page-Webseiten.
Es gibt ein Tutorial [HTML/Tutorials/Single-Page_Webseite](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Single-Page_Webseite), das überarbeitet werden müsste.
Man könnte in einem weiteren Kapitel JS ins Spiel bringen, um Vor- und Zurück-Buttons einzufügen, mit dem Interaction Observer schauen, welche Bereiche aktuell sind.
Ich persönlich fände das auch als "**HTML-Präsentation als Alternative zu Powerpoint**" interessant.
--------------
## 3.2. Grid
Grid ist sehr attraktiv und umfangreich. Sollte man da mal rübergehen und den Kurs überprüfen?
So etwas [CSS/Tutorials/Grid/mehrspaltige_Layouts](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/mehrspaltige_Layouts) fände ich als Einstieg besser als diese Vorüberlegungen.
--------------
## 3.3 Spiele
Mein Sohn (10Jahre) möchte mit mir ein Spiel programmieren. Da wäre natürlich der erste Gedanke Scratch zu nehmen. Evtl geht da aber doch etwas mit JavaScript?
Herzliche Grüße
Matthias Scharwies
Wiki-Workshop 02.04.2022
bearbeitet von Matthias ScharwiesHier noch einige Infos zum heutigen Workshop!
# 1. Themen
Es soll einerseits um eine allgemeine Einführung in die Arbeit mit MediaWiki gehen.
Andererseits soll es um ein konkretes Projekt gehen: Im Tutorial [CSS/Tutorials/Einstieg/Gestaltungstipps](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Gestaltungstipps) fehlt ein gutes Beispiel.
@Michael S hat uns dankenswerterweise erlaubt, den Entwurf seiner Webseite als Beispiel zu verwenden.
[![wireframe - wird noch gezeichnet](/images/f901c22e-b232-11ec-8f57-b42e9947ef30.jpg?size=medium "wireframe - wird noch gezeichnet")](/images/f901c22e-b232-11ec-8f57-b42e9947ef30.jpg)
Ein neutraler Entwurf ist bereits unter [bplaced.net/design03](http://svg.bplaced.net/design03/) online.[^1]
[^1]: (Webseiten mit mehreren Dateien und externen Bildern sind nur schwierig als Beispiele im Wiki zu realisieren.)
## 1.1 Content is king!
[Der „große Sinn von CSS“](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Stylesheets_einbinden#Trennung_von_Inhalt_und_Design) besteht in der Trennung von Inhalt und Design.
Eine HTML-Struktur kann man nur mit entsprechendem Inhalt erstellen. Wer möchte diesen Seiten gute Beispieltexte - evtl. aus dem Wiki kopiert (und wieder zurückverlinkt) - geben?
* [design03/was.html](http://svg.bplaced.net/design03/was.html)
* [design03/wie.html](http://svg.bplaced.net/design03/wie.html)
## 1.2 CSS
Ausgehend von diesem *wireframe* wollen wir kurz eine moderne, aufgeräumte HTML-Struktur vorstellen und dann das passende CSS entwickeln:
0. Passende Farben, Formen und Schriften (Verzicht auf 3rd-Party-Content!)
1. Mobile first!
2. Mehrspaltenlayout bei größeren Viewports
3. Ein Dark Mode bei entsprechenden Einstellung im OS des Nutzers.
Das fertige Layout soll dann sowohl im Tutorial als auch unter [CSS/fertige Layouts](https://wiki.selfhtml.org/wiki/CSS/fertige_Layouts) präsentiert werden.
# 2. Ablauf
**16:00** Kickoff-Meeting (30min)
* kurze Vorstellung der Teilnehmer und des Projekts (30min)
* Youtube-Video "Arbeiten mit dem SELFWiki"
**16:30** Erarbeitungs / Recherchephase (30min)
* Wir sichten Vorhandenes im Wiki und überlegen, was verbessert werden soll.
* Ich bin in dieser Zeit über Discord ansprechbar.
**17:00** gemeinsamer Zwischenbericht (30min)
Brainstorming,
* welche Verbesserungen am Layout / Design durchgeführt werden.
* welche Verbeserungen im SELF-Wiki druchgeführt werden sollen.
evtl. Aufteilung in Arbeitsgruppen
**17:30 - 20:00** Erarbeitung II (150min)
* Ich bin in dieser Zeit über Discord ansprechbar
* Ich versuche gegen Ende alle Änderungen in das Online-Beispiel aufzunehmen.
* Wir alle können im SELF-Wiki Artikel verbessern, wobei für [CSS/Tutorials/Einstieg/Gestaltungstipps](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Gestaltungstipps) eine Absprache empfehlenswert wäre.
- [Vom_Regelsatz_zum_responsiven_Layout](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Gestaltungstipps#Vom_Regelsatz_zum_responsiven_Layout) soll das Design03 im Wiki erklären. **Sollte dieses Kapitel an den Anfang gestellt werden?**
- Das Kapitel [Guter_CSS-Stil](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Gestaltungstipps#Guter_CSS-Stil) würde ich eigentlich erst an 2. Stelle haben wollen.
- Wie geht es Weiter? und "Siehe auch" sollten zusammengeschmissen werden.
**20:00-21:00** Abschluss - Feedback
# 3. Zukunft
Vielleicht kann man das so alle 6-8 Wochen wiederholen?
## 3.1. [bplaced.net/design04](http://svg.bplaced.net/design04/) - impossible Shapes.
Unsere ***fertigen Layouts*** haben „immer“ mehrere Unterseiten; Beispiele für „moderne“ Templates sind „immer“ Single-Page-Webseiten.
Es gibt ein Tutorial [HTML/Tutorials/Single-Page_Webseite](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Single-Page_Webseite), das überarbeitet werden müsste.
Man könnte in einem weiteren Kapitel JS ins Spiel bringen, um Vor- und Zurück-Buttons einzufügen, mit dem Interaction Observer schauen, welche Bereiche aktuell sind.
Ich persönlich fände das auch als "**HTML-Präsentation als Alternative zu Powerpoint**" interessant.
--------------
## 3.2. Grid
Grid ist sehr attraktiv und umfangreich. Sollte man da mal rübergehen und den Kurs überprüfen?
So etwas [CSS/Tutorials/Grid/mehrspaltige_Layouts](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/mehrspaltige_Layouts) fände ich als Einstieg besser als diese Vorüberlegungen.
--------------
## 3.3 Spiele
Mein Sohn (10Jahre) möchte mit mir ein Spiel programmieren. Da wäre natürlich der erste Gedanke Scratch zu nehmen. Evtl geht da aber doch etwas mit JavaScript?
Herzliche Grüße
Matthias Scharwies