SELFWiki: Übersichtsseiten mit Cards

[Matthias Scharwies]

Servus!

@Tabellenkalk schrub hier

es wurde da mal was vorbereitet: SVG im Wiki. Das ist die Übersichtsseite

Für eine Übersichtsseite ist die ziemlich unübersichtlich.

Ich habe da mal aufgeräumt und die im April schon mal besprochenen Cards eingebaut. ^[1]

Was haltet ihr davon?

Die Schrift ist nicht scharf, da die png-Vorschau natürlich rastert; der "Text entlang einer Bézierkurve" wird nicht gerendert. 😟

Für Nichtsehende müssend zwingend gute alt-Texte vorhanden sein.

---

Im Test-Wiki habe ich mich mal ausgetobt: Wie fange ich an?

Die Cards zu HTMl, CSS, Grid und transform sind HTML-Monster aus lauter spans, die Cards zu SVG, der Trennung von Inhalt und Verhalten sind SVGs mit allen ihren oben besprochenen (künftigen) Vor- und (heutigen) Nachteilen.

Die rechte JS-DOM-Card besteht aus Grafik und Text - es kann aber immer nur eins von beiden gehovert werden. (wäre aber nicht so schlimm, oder?)

Bei den beiden Cards zu Animation und Größenangaben rechts unten müsste man die optimale Strichdicke der Randlinie diskutieren.

Ich wollte eigentlich das Wiki-Makeover abwarten, starte jetzt aber schon mal die hoffentlich lebhafte Diskussion.

Herzliche Grüße

Matthias Scharwies

---

1. Das Design auf kulturbanause.de/blog/ finde ich gut: Bild + untenstehender Link-Text ↩︎

[Tabellenkalk]

Hallo,

@Tabellenkalk schrub hier

es wurde da mal was vorbereitet: SVG im Wiki. Das ist die Übersichtsseite

Für eine Übersichtsseite ist die ziemlich unübersichtlich.

Das ist so nicht korrekt, sondern zumindest irreführend zitiert. Von mir ist nur der Teil, der ins Wiki verlinkt, die Kritik ist nicht von mir.

Aber vielen Dank für deine unendlichen Bemühungen im Wiki! Das ist toll!

Gruß
Kalk

[Matthias Scharwies]

Guten Morgen,

wie gestern besprochen ziehe ich die Cards mal vor. (Eigentlich müsste man das Wiki-Makeover abwarten, damit die SVGs als SVG und nicht als png-Vorschau gerendert werden.)

• wiki.selfhtml.org/wiki/CSS

Oben rechts hätte ich gerne eine „typische“ Infografik - da gab's schon mal die Frage, was denn CSS-typisch wäre.

Nach dem Einführungssatz kommen wie auf der SVG-Portalseite Links zu den Referenzen. Die Links zu media queries und zu den Wertetypen stören imho nicht, passen da aber auch nicht wirklich hin - eher rechts eine Card zu den fertigen Layouts. Wie die aussehen sollte, weiß ich aber auch nicht.

CSS/Tutorials

wird ja gleich in CSS mit eingebunden.

Enthält nun unsere drei „Vorzeige-Tutorials“ als Cards. Der Rest muss neu sortiert werden.

Gestern war mir nicht klar, wie das Stimmungsbild ist:

a. Nur Cards für den Einstiegskurs

b. Card und zusätzlich noch eine Liste mit ausführlicheren Linktexten:

c. nur die Linktexte ohne die Cards, die optische Umweltverschmutzung sind.

---

Design-Vorgaben

Sollte man für die Cards die SELFHTML:Farbtabelle nehmen oder kunterbunt durchmischen?

Hier kann man sehen, dass die im Standalone-SVG-Tutorial verwendeten Grundfarben sich mit den SELF-Farben etwas beißen. So lassen?

Wenn einheitlich mit SELFHTML:Farbtabelle, sollte man für HTML, CSS und JS jeweils eine „typische“ Farbe nehmen? (Das orange aus dem SVG-Logo entspricht fast unserem gelb, das wird aber hier ebenfalls für JS verwendet.

Ich wollte eigentlich das Wiki-Makeover abwarten, starte jetzt aber schon mal die hoffentlich lebhafte Diskussion.

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

optische Umweltverschmutzung

Damit habe ich mich aber nicht auf die Cards bezogen, sondern generell auf Webseiten, die skrupellos Farben und Fonts in schwerer Menge verwenden, statt auf Klarheit zu setzen. Deine Cards sind eher als Identifikationssymbol eines Themas zu sehen. Auf einer Übersichtsseite kommt es deshalb ggf. zu einem Farb-/Fontmix, den ich nicht kritisieren würde.

Rolf

[Matthias Scharwies]

Servus!

Hallo Matthias,

optische Umweltverschmutzung

Damit habe ich mich aber nicht auf die Cards bezogen, sondern generell auf Webseiten, die skrupellos Farben und Fonts in schwerer Menge verwenden, statt auf Klarheit zu setzen.

Ja, ich fand den Ausdruck aber gut. Wir müssen bei den Cards eben auch den Mittelweg finden, die Seite(n) optisch aufzuwerten ohne in Klicki-Bunti zu verfallen.

Deine Cards sind eher als Identifikationssymbol eines Themas zu sehen. Auf einer Übersichtsseite kommt es deshalb ggf. zu einem Farb-/Fontmix, den ich nicht kritisieren würde.

Ok, so aufgenommen! 😀

Herzliche Grüße

Matthias Scharwies

[Der Martin]

Hallo Matthias,

Gestern war mir nicht klar, wie das Stimmungsbild ist:

a. Nur Cards für den Einstiegskurs

b. Card und zusätzlich noch eine Liste mit ausführlicheren Linktexten:

c. nur die Linktexte ohne die Cards, die optische Umweltverschmutzung sind.

mein Favorit wäre b: Die Cards als Eyecatcher und Link auf ein Einstiegskapitel zum Thema, und weiterführende Links darunter. So wie dargestellt.

Sollte man für die Cards die SELFHTML:Farbtabelle nehmen oder kunterbunt durchmischen?

Mein Vorschlag: Weitgehend bei der SELFHTML-Farbtabelle bleiben, aber hier und da mal ein Akzent in einer abweichenden Farbe wäre schon okay.

Hier kann man sehen, dass die im Standalone-SVG-Tutorial verwendeten Grundfarben sich mit den SELF-Farben etwas beißen. So lassen?

Empfinde ich gar nicht so. Ich finde eher die Farbkomposition innerhalb der Cards nicht so ganz glücklich, z.B. das Grün des Tannenbaums mit dem kräftig-blauen Hintergrund. Und die buntkarierte Textur des SVG-Schriftzugs ist zwar eine beeindruckende Demonstration, was alles möglich ist - im Ergebnis aber eher abschreckend.

Wenn einheitlich mit SELFHTML:Farbtabelle, sollte man für HTML, CSS und JS jeweils eine „typische“ Farbe nehmen?

Das wirft wieder die Frage auf: Was ist denn typisch? 😉

Einen schönen Tag noch
 Martin