Antwort an „Matthias Scharwies“ verfassen

Cards im Wiki

Matthias Scharwies E-Mail-Adresse des Autors 14.02.2024 06:32 (Versionen)

wiki

Guten Morgen,

ich befürchte, wir reden aneinander vorbei.

Ausgangslage:

Wir haben Cards / wollen Cards haben, die einerseits einheitlich aussehen sollen, andererseits möglichst flexibel eingesetzt werden können.

Das (und die Cards auf den anderen Seiten) waren alles Tests, nach denen man jetzt sortieren sollte, was man braucht und wie man das einheitlich gestalten kann.

Die Unterteilung in Bild und Vollbild hast du am 11.02. eingeführt. Ich sehe da eher 2 Vollbild-Cards, die die gleichen Parameter erhalten sollten.^[1]:

Die dritte Card enthält (noch) kein Bild ^[2]

Cards 4-6 enthalten

eine Grafik, die als Icon rechts oben positioniert ist und
unten HTML enthält.

Ich traue mir zu, die unteren 9 Cards nach diesen Typen zu formatieren:

BTW: Die sehen doch auch mit blauem Titel bunt aus - müsste man für den Titel noch weitere Farben haben?

Jetzt müssen wir diese 2 Typen in eine Form gießen:

Vorlage: Card

Eine Vorlage sollte uns HTML ersparen und eben ein einheitliches Aussehen, das der Benutzer wiedererkennt, haben. Dies erleichtert ihm das Erfassen von Inhalten.

Ich möchte eigentlich vermeiden, dass man die Klassen, die das Cardverhalten steuern, im Wikitext kennen und zuordnen muss. Wer die Card-Vorlage verwendet, sollte von der Konstruktion der Cards möglichst nichts mitbekommen und schon gar nicht die verwendeten Klassen kennen.

Full Ack. Genau - und deshalb sollten wir eine einfache Struktur mit so wenig Parametern wie möglich finden!

Das ist imho keine Kopiervorlage, sondern eine Auflistung aller Möglichkeiten.

  {{Card|
    link...|                <<- Pflicht, Wikiseite auf die die Card verweist
    titel=...|              <<- Sollte genutzt werden, kann bei Vollbild-Card entfallen
    titelfarbe=...|         <<- Optional, Farbe für Titel
    hintergrund=...|        <<- background-Eigenschaft für Card
    farbe=...|              <<- color-Eigenschaft für Card
    icon=...|logo=...|      <<- Optional, nur eins von beiden verwenden
    neu=jjjjmmtt|           <<- Optional, jjjjmmtt=Tag an dem die Card hinzugefügt wurde
    inhalt=...|             <<- Wikitext
    bild=...|               <<- Wird unter Inhalt in Card-Breite angezeigt
    vollbild=...|           <<- Für Bilder, die die Card ganz ausfüllen. Inhalt und Teaser NICHT verwenden! 
                                Titel, Icon und Logo können verwendet werden und werden dem Bild überlagert.
    teaser=...|             <<- Nur Text, wird unter Inhalt und Bild angezeigt
    zeilen=...|spalten=...  <<- Optional, für Cards die größer als ein Rasterfeld sein sollen
  }}

Meine Vorschläge für Kopiervorlagen

Vollbild


  {{Card|
    link= ...|     <<- URL, auf die die Card verweist
    titel=...|     <<- Seitenname sollte genutzt werden, kann entfallen
    vollbild=...|  <<- Für Bilder, die die Card ganz ausfüllen. 
                       Inhalt NICHT verwenden! 
                       Titel, Icon und Logo können verwendet werden und werden 
                       dem Bild überlagert.
  }}

„normal“

  {{Card|
    link= ...|         <<- URL, auf die die Card verweist
    titel=...|         <<- Seitenname
    icon=...|logo=...| <<- Optional, nur eins von beiden verwenden
    inhalt=...|        <<- Wikitext mit näherer Beschreibung
  }}

HTML, das in "inhalt" notiert wird, nimmt die verfügbare Breite ein, eine class="teaser" ist nicht mehr notwendig

Bilder, die wir auf 100% Breite haben wollen, werden als vollbild notiert -

ein <p class="teaser"><img src... ></p> ist nicht mehr nötig.

Ich könnte "bild" und "teaser" entfernen und alle Inhalte über inhalt= zuordnen (oder dann sogar wieder auf {{{1}}} zurückgehen).

Ja. Würde ich machen!

Dann müsste ich aber mindestens eine Subvorlage {{Card/Bild|Foo.svg}} machen, die das img-Element korrekt erzeugt und beklasst. Ist das so viel hilfreicher?

Nein, siehe oben!

Ich würde bei Bildern 2 Regelsätze verwenden:

.card img {
  width: 100%
  height: auto;
}

.card img.icon {
  width: 110px;
  float: right;
  margin-left: 0.3em;
}

Im oberen Regelsatz wären die Vollbilder und auch Bilder in inhaltdrin;

im unteren die Bilder, die mit dem Icon/Logo-Parameter einbunden werden.

Ich muss nur durch die SVG-Bilder durchgehen und sie auf viewBox="0 0 0 600 400" anpassen. Zusätzlich schaue ich, dass Bild-Inhalte nicht durch einen Titel verdeckt werden.

Ausnahme, wenn man Cards anders formatieren will

{{Card|
  link=...|          <<- URL, auf die die Card verweist
  titel=...|         <<- Seitenname
  icon=...|logo=...| <<- Optional, nur eins von beiden verwenden
  inhalt=...|        <<- Wikitext mit näherer Beschreibung
  hintergrund=...|   <<- Optional, background-Eigenschaft für Card
  farbe=...|         <<- Optional, color-Eigenschaft für Card
  neu=jjjjmmtt|      <<- Optional, jjjjmmtt=Datum
  zeilen=...|spalten=...  <<- Optional, für Cards die größer als ein Rasterfeld sein sollen
  }}

Herzliche Grüße

Matthias Scharwies

--
Die Signatur findet sich auf der Rückseite des Beitrags.

Du schrubst: Und ich habe das Idee-Bild für "Vom der Idee zum Projekt" etwas niedriger gemacht, sonst war da zu viel Abstand drüber. Hätte ich auch lassen können, als "vollbild" wäre das viel einfacher gewesen. Aber das habe ich erst danach gebaut 🙄.
Ebent! Das geht alles mit dem vollbild-Parameter einfacher! Also weg mit bild! ↩︎
Dort werde ich ja den Screenshot des Seiteninspektors einfügen und sie dann auch zum Vollbild machen. ↩︎

Betreff

Autor

E-Mail-Adresse freiwillig, öffentlich sichtbar

Homepage freiwillig, öffentlich sichtbar

problematische Seite freiwillig, öffentlich sichtbar

Beitragstext

> Guten Morgen,
> 
> ich befürchte, wir reden aneinander vorbei.
> 
> Ausgangslage:
> 
> Wir haben Cards / wollen Cards haben, die einerseits einheitlich aussehen sollen, andererseits möglichst flexibel eingesetzt werden können.
> 
> [![Cards](/images/962595c8-caf3-11ee-81ca-9c6b00263d9f.png?size=medium "Cards")](/images/962595c8-caf3-11ee-81ca-9c6b00263d9f.png)
> 
> Das (und die Cards auf den anderen Seiten) waren alles Tests, nach denen man jetzt sortieren sollte, was man braucht und wie man das einheitlich gestalten kann.
> 
> Die Unterteilung in Bild und Vollbild hast du am [11.02. eingeführt](https://forum.selfhtml.org/self/2024/feb/09/cards-im-wiki/1813483#m1813483). Ich sehe da eher 2 Vollbild-Cards, die die gleichen Parameter erhalten sollten.[^1]:
> 
> [^1]: Du schrubst: Und ich habe das Idee-Bild für "Vom der Idee zum Projekt" etwas niedriger gemacht, sonst war da zu viel Abstand drüber. Hätte ich auch lassen können, als "vollbild" wäre das viel einfacher gewesen. Aber das habe ich erst danach gebaut 🙄.  
> Ebent! Das geht **alles** mit dem `vollbild`-Parameter einfacher! Also weg mit `bild`!
> 
> Die dritte Card enthält (noch) kein Bild [^2]
> 
> [^2]: Dort werde ich ja den Screenshot des Seiteninspektors einfügen und sie dann auch zum Vollbild machen.
> 
> Cards 4-6 enthalten 
> * eine Grafik, die als Icon rechts oben positioniert ist und
> * unten HTML enthält.
> 
> Ich traue mir zu, die unteren 9 Cards nach diesen Typen zu formatieren:
> 
>  [![](/images/a67b8c56-caf4-11ee-8169-9c6b00263d9f.png?size=medium)](/images/a67b8c56-caf4-11ee-8169-9c6b00263d9f.png)
> 
> BTW: Die sehen doch auch mit blauem Titel bunt aus - müsste man für den Titel noch weitere Farben haben?
> 
> Jetzt müssen wir diese 2 Typen in eine Form gießen:
> 
> # Vorlage: Card
> 
> Eine Vorlage sollte uns HTML ersparen und eben ein einheitliches Aussehen, das der Benutzer wiedererkennt, haben. Dies erleichtert ihm das Erfassen von Inhalten. 
> 
> >> Ich möchte eigentlich vermeiden, dass man die Klassen, die das Cardverhalten steuern, im Wikitext kennen und zuordnen muss. Wer die Card-Vorlage verwendet, sollte von der Konstruktion der Cards möglichst nichts mitbekommen und schon gar nicht die verwendeten Klassen kennen.
> 
> Full Ack. Genau - und deshalb sollten wir eine einfache Struktur mit so wenig Parametern wie möglich finden!
> 
> Das ist imho keine Kopiervorlage, sondern eine Auflistung aller Möglichkeiten.
>  
> ~~~ html, bad
>   {{Card|
>     link...|                <<- Pflicht, Wikiseite auf die die Card verweist
>     titel=...|              <<- Sollte genutzt werden, kann bei Vollbild-Card entfallen
>     titelfarbe=...|         <<- Optional, Farbe für Titel
>     hintergrund=...|        <<- background-Eigenschaft für Card
>     farbe=...|              <<- color-Eigenschaft für Card
>     icon=...|logo=...|      <<- Optional, nur eins von beiden verwenden
>     neu=jjjjmmtt|           <<- Optional, jjjjmmtt=Tag an dem die Card hinzugefügt wurde
>     inhalt=...|             <<- Wikitext
>     bild=...|               <<- Wird unter Inhalt in Card-Breite angezeigt
>     vollbild=...|           <<- Für Bilder, die die Card ganz ausfüllen. Inhalt und Teaser NICHT verwenden! 
>                                 Titel, Icon und Logo können verwendet werden und werden dem Bild überlagert.
>     teaser=...|             <<- Nur Text, wird unter Inhalt und Bild angezeigt
>     zeilen=...|spalten=...  <<- Optional, für Cards die größer als ein Rasterfeld sein sollen
>   }}
> ~~~
> 
> Meine Vorschläge für Kopiervorlagen
> 
> ## Vollbild
> 
> ~~~
> 
>   {{Card|
>     link= ...|     <<- URL, auf die die Card verweist
>     titel=...|     <<- Seitenname sollte genutzt werden, kann entfallen
>     vollbild=...|  <<- Für Bilder, die die Card ganz ausfüllen. 
>                        Inhalt NICHT verwenden! 
>                        Titel, Icon und Logo können verwendet werden und werden 
>                        dem Bild überlagert.
>   }}
> ~~~
> 
> ## „normal“
> 
> ~~~
>   {{Card|
>     link= ...|         <<- URL, auf die die Card verweist
>     titel=...|         <<- Seitenname
>     icon=...|logo=...| <<- Optional, nur eins von beiden verwenden
>     inhalt=...|        <<- Wikitext mit näherer Beschreibung
>   }}
> ~~~
> 
> HTML, das in "inhalt" notiert wird, nimmt die verfügbare Breite ein, eine class="teaser" ist nicht mehr notwendig
> 
> Bilder, die wir auf 100% Breite haben wollen, werden als `vollbild` notiert - 
> 
> ein `<p class="teaser"><img src...  ></p>` ist nicht mehr nötig.
> 
> 
> >> Ich könnte "bild" und "teaser" entfernen und alle Inhalte über inhalt= zuordnen (oder dann sogar wieder auf {{{1}}} zurückgehen). 
> 
> Ja. Würde ich machen!
> 
> >> Dann müsste ich aber mindestens eine Subvorlage {{Card/Bild|Foo.svg}} machen, die das img-Element korrekt erzeugt und beklasst. Ist das so viel hilfreicher?
> 
> Nein, siehe oben!
> 
> Ich würde bei Bildern 2 Regelsätze verwenden:
> 
> ~~~ CSS
> .card img {
>   width: 100%
>   height: auto;
> }
> 
> .card img.icon {
>   width: 110px;
>   float: right;
>   margin-left: 0.3em;
> }
> ~~~
> 
> Im oberen Regelsatz wären die Vollbilder und auch Bilder in `inhalt`drin;
> 
> im unteren die Bilder, die mit dem Icon/Logo-Parameter einbunden werden.
> 
> Ich muss nur durch die SVG-Bilder durchgehen und sie auf `viewBox="0 0 0 600 400"` anpassen. Zusätzlich schaue ich, dass Bild-Inhalte nicht durch einen Titel verdeckt werden.
> 
> 
> ## Ausnahme, wenn man Cards anders formatieren will
> 
> ~~~
> {{Card|
>   link=...|          <<- URL, auf die die Card verweist
>   titel=...|         <<- Seitenname
>   icon=...|logo=...| <<- Optional, nur eins von beiden verwenden
>   inhalt=...|        <<- Wikitext mit näherer Beschreibung
>   hintergrund=...|   <<- Optional, background-Eigenschaft für Card
>   farbe=...|         <<- Optional, color-Eigenschaft für Card
>   neu=jjjjmmtt|      <<- Optional, jjjjmmtt=Datum
>   zeilen=...|spalten=...  <<- Optional, für Cards die größer als ein Rasterfeld sein sollen
>   }}
> ~~~
> 
> Herzliche Grüße
> 
> Matthias Scharwies
>

Tag 1
Tag 2
Tag 3

speichere die Identität in einem Cookie

Ihre Identität in einem Cookie zu speichern erlaubt es Ihnen, Ihre Beiträge zu editieren. Außerdem müssen Sie dann bei neuen Beiträgen nicht mehr die Felder Name, E-Mail und Homepage ausfüllen.

Formulieren Sie bitte höflich und wertschätzend.
Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
Ihr Beitrag wird dauerhaft archiviert.

abbrechen