Matthias Scharwies: Wiki-Workshop 02.04.2022

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 …

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

--
Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
  1. 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.

    wireframe - wird noch gezeichnet

    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?

    1.2 CSS

    Ausgehend von diesem wireframe wollen wir kurz eine moderne, aufgeräumte HTML-Struktur vorstellen und dann das passende CSS entwickeln:

    1. Passende Farben, Formen und Schriften (Verzicht auf 3rd-Party-Content!)
    2. Mobile first!
    3. Mehrspaltenlayout bei größeren Viewports
    4. 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.) ↩︎

    1. ZIP-Download entfernt

      1. Tom's Webseite als PDF:

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

        Herzliche Grüße

        Matthias Scharwies

        --
        Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
        1. Servus!

          CSS/Tutorials/Hintergrund/Gestaltung_mit_CSS#animierte_Hintergrundbilder

          Herzliche Grüße

          Matthias Scharwies

          --
          Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
          1. 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

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

    Herzliche Grüße

    Matthias Scharwies

    Herzliche Grüße

    Matthias Scharwies

    --
    Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
    1. Hallo Matthias,

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

      Rolf

      --
      sumpsi - posui - obstruxi