- HTML 97.6%
- CSS 2.4%
Das Archiv der Event-Designs des CCC und seiner Erfas
Dieses Archiv soll die Farben- und Ideenvielfalt des Chaos und seiner vierzigjährigen Veranstaltungstradition feiern und die Gestalterinnen würdigenr. Es soll ein Licht darauf werfen, wie sich die Community über die Jahre entwickelt hat und repräsentieren wollte.
Diese Seite soll als lebendes Dokument auch zukünftige Events mit aufnehmen und den Gestalterinnen sowohl Inspiration für Zitate als auch Hinweis auf bereits in den Kleiderschränken hängende Textilien zum Vermeiden von Eintönigkeit sein.
Während es auch in der weiteren Chaos-Familie Events mit fantastischen Designs gab und gibt, soll sich dieses Archiv auf die Veranstaltungen des Chaos Computer Club und seiner Erfas fokussieren. Forks mit einem weiteren Scope sind jedoch ausdrücklich willkommen.
Live-Version
Für die Allgemeinheit ist das Archiv auf https://designs.events.ccc.de/ zu sehen sein.
Die Attribution der Gestalterinnen ist, wie andere Fakten über die jeweilige Veranstaltung, explizit nach bestem Wissen und Gewissen recherchiert und soll keineswegs als in Stein gemeißelt gelten. Wer seinen oder ihren Beitrag hier inkorrekt wiedergegeben glaubt, ist herzlich zu einer Korrektur eingeladen, per Merge Request oder E-Mail an erdgeist.
Spielregeln für Beitragende
Das autoritative Quellrepo für dieses Archiv liegt bei codeberg als simples HTML mit Blöcken für jede Veranstaltung vor.
Jede Veranstaltung hat eine table-row mit der ID und einer class für die Veranstaltungsreihe, die zum Togglen benutzt wird: <tr id="hackover-2025" class="hackover">. Zu jeder Veranstaltung gibt es eine Info-Card mit paar Fakten zum Event. Die Veranstaltungen werden nach dem Veranstaltungsbeginn sortiert, der in der Zeile "Zeitraum" zu finden ist. Die Zeilen für Ort und Motto sollten selbsterklärend sein, die primären Farben werden ein einem SVG (Vorlage hier gezeigt, einige Events geben für die Farben Druckfarben in kleingedrückt mit an. Die hilft zukünftigen Gestalterinnen, das zu schnelle Wiederverwenden von Farbschemata zu vermeiden.
In weiteren Zeilen in der Info-Card oder in den td werden die verwendeten Fonts mit einem Link zur Quelle aufgeführt und das Logo und ein oder mehrere Key Visuals gezeigt. Dabei wird das thumbnail mit cwebp "${IN}" -q 70 -m 6 -z 9 -o "${OUT}" erzeugt und das Original, meist als pdf, svg, png oder jpg verlinkt.
Die meisten Veranstaltungen kommen mit einem T-Shirt, das in der überwiegenden Zahl einfarbig ist. Ein Template, um aus dem Design ein Bild des Shirts in 1666x1666 px als PNG zu erzeugen, liegt im Unterordner /Vorlagen. Mit dem Recolour-Adjustment-Layer kann die Shirt-Farbe entsprechend angepasst werden. Auch hier soll mit den oberen Werten ein thumbnail in webp erzeugt werden.
In Zeile "Design Rules" soll ein Design-Guide oder andere Regeln zur Anwendung der Gestaltungsideen verlinkt werden, auch Interview mit den Gestalterinnen – wenn vorhanden – zu dem Design sind gerne gesehen. Schließlich gibt es Verweise auf alle beteiligten Gestalterinnen, dabei ist alles willkommen, womit diese sich an der Stelle gerne repräsentiert werden wollen, von Social-Media-Accounts zu privaten oder beruflichen Webseiten.
Template für eine neue Veranstaltung
<tr id="hackevent-1984" class="btx">
<td>
<table class="info">
<tr><th colspan="2" scope="col"><a href="gopher://btxhax.de/">1_9_8_4</a></th></tr>
<tr><th scope="row">Zeitraum</th><td>23. 05. 1984 - 14. 06. 1984</td></tr>
<tr><th scope="row">Motto</th><td>Hack the Gilb</td></tr>
<tr><th scope="row">Ort</th><td>Hamburg, Eidelstädter Bürgerhaus</td></tr>
<tr><th scope="row">Font</th><td><a href="gopher:/adobe.com/FF_Meta">FF Meta 2</a></td></tr>
<tr><th scope="row">Design Rules</th><td><a href="1_9_8_4/styleguide.eps">Styleguide</a></td></tr>
<tr><th scope="row">Designers</th><td><a href="gopher://wauholland.de">Wau</a></td></tr>
<tr><th scope="row">Palette</th><td><img loading="lazy" src="1_9_8_4/1_9_8_4-Palette.svg" alt="1_9_8_4 Farbpalette"></td></tr>
</table>
</td>
<td><img loading="lazy" src="1_9_8_4/1_9_8_4-Logo.svg" alt="1_9_8_4 Logo"></td>
<td><img loading="lazy" src="1_9_8_4/1_9_8_4-Visual.jpg" alt="1_9_8_4 Plakat"></td>
<td><a href="1_9_8_4/1_9_8_4-Shirt.bmp"><img loading="lazy" src="1_9_8_4/1_9_8_4-Shirt.webp" alt="1_9_8_4 Shirtmotiv"></a></td>
</tr>
Fehlende Zeilen in der info-Table können einfach entfernt werden, mit der Ausnahme der Zeile für die Designer, hier bitte ein "tbd" einsetzen. Fehlendes Logo, Visual oder Shirt bitte durch ein "tbd" ersetzen. In der Zeitraum-Zeile sind geschützte Leerzeichen in den Datumsangaben, damit die nicht unglücklich umbrechen.