Wiki-Workshop 02.04.2022

[Matthias Scharwies]

Servus!

Wir laden zu einem Online-Workshop am 02.04.2022 von 16:00 bis 21:00 (über Discord) ein. Dieser richtet sich ausdrücklich auch an Newbies und Interessierte! Jede(r) ist herzlich willkommen!

Thema: fertige Layouts

Wir haben …

• das HTML Grundgerüst
• CSS/Tutorials/Grid/mehrspaltige_Layouts
• 13 fertige Layouts

Wir wollen gemeinsam direkt in den Kursen, z.B. im Mehrspaltenlayout und bei CSS/Tutorials/Einstieg/Gestaltungstipps ein komplettes Layout entwickeln, das sich dann bei den fertigen Layouts wiederfindet.

Ablauf

1. Kickoff-Meeting (16:00 Dauer 30min)
   • Einführung
   • Youtube-Video "Arbeiten mit dem SELFWiki"
   • mögliche Themen
2. Erarbeitungs / Recherchephase (30min)
   • Vorhandenes sichten und überlegen, was verbessert werden soll
3. gemeinsamer Zwischenbericht (30min)
4. Workshops (alle zusammen oder miteinander)
5. Feedback gegen 20:00

Ergebnis

Wie Helmut Kohl schon sagte "Wichtig ist, was hinten rauskommt!" - Es sollten abends (oder am Sonntag) dann einige Seiten verbessert dastehen.

Discord

Wer noch nie im SELFHTML-Discord war: hier lang!

Es ist möglich, Discord browserbasiert zu nutzen. Dabei ist ein Eintreten über diesen Link nur einige Male möglich.

Empfehlenswert ist es jedoch, sich Discord herunterzuladen, anzumelden ud den Selfhtml-Kanal zu suchen.

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Hier 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 fehlt ein gutes Beispiel.

@Michael S hat uns dankenswerterweise erlaubt, den Entwurf seiner Webseite als Beispiel zu verwenden.

Ein neutraler Entwurf ist bereits unter bplaced.net/design03 online.^[1]

Dieser soll dann das bestehende design03 ersetzen: CSS/fertige_Layouts/Design03

1.1 Content is king!

Der „große Sinn von CSS“ 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
• 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 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 eine Absprache empfehlenswert wäre.
  • 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 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 - 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, 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 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

---

1. (Webseiten mit mehreren Dateien und externen Bildern sind nur schwierig als Beispiele im Wiki zu realisieren.) ↩︎

[Matthias Scharwies]

ZIP-Download entfernt

[Matthias Scharwies]

Tom's Webseite als PDF:

http://svg.bplaced.net/Model-Website.pdf

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Servus!

CSS/Tutorials/Hintergrund/Gestaltung_mit_CSS#animierte_Hintergrundbilder

Herzliche Grüße

Matthias Scharwies

[Raketenwilli]

Mit dem Bild ist keine Aussage verknüpft. Es macht aber viel Mühe, solche zu bauen… deshalb zeige ich, was ich mal gemacht habe:

Test: https://home.fastix.org/Tests/teufel.html

Animated Portable Network Graphics

[Matthias Scharwies]

https://codepen.io/gunnarbittersmann/pen/VwyrQzK

Herzliche Grüße

Matthias Scharwies

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

meine Adaption in das index.html von heute ist im general-Channel des Discord Servers.

Rolf