Redaktionsleitfaden - OIC Bielefeld Website

Dieser Leitfaden erklärt, wie du Inhalte auf der OIC Bielefeld Website bearbeiten kannst. Die Website wird über GitHub verwaltet - keine Sorge, das ist einfacher als es klingt!

Übersicht: Wie funktioniert die Website?

Die Website basiert auf Jekyll und nutzt strukturierte Daten:

Alle Änderungen werden über GitHub gemacht und automatisch auf der Website veröffentlicht.

GitHub Grundlagen

Anmelden und Navigieren

  1. Gehe zu https://github.com/jensedler/oic-bielefeld-website
  2. Melde dich mit deinem GitHub-Account an
  3. Du siehst die Verzeichnisstruktur der Website

Dateien bearbeiten

  1. Klicke auf eine Datei, um sie zu öffnen
  2. Klicke auf das Stift-Symbol (✏️) oben rechts
  3. Nimm deine Änderungen vor
  4. Scrolle nach unten zu “Commit changes”

Teammitglieder bearbeiten

Datei: _data/team.yml

Neues Teammitglied hinzufügen:

- name: "Max Mustermann"
  role: "Position/Titel"
  image: "/assets/images/team/max.png"
  expertise:
    - "Fachgebiet 1"
    - "Fachgebiet 2" 
    - "Fachgebiet 3"
  email: "max.mustermann@bielefeld.de"
  animation_delay: 0.7

Wichtige Hinweise:

Teammitglied bearbeiten:

Finde den entsprechenden Eintrag und ändere die gewünschten Felder.

Events anlegen

Datei: _data/events.yml

Neues Event hinzufügen:

- title: "Titel des Events"
  description: "Beschreibung des Events..."
  date: "2025-08-15"
  time: "18:00"
  duration: "2 Stunden"
  location: "Innovation Office, Niederwall 23"
  category: "Workshop"  # oder "Vortrag", "Meetup", etc.
  target_audience: "Alle Bürger*innen"
  cost: "Kostenlos"
  booking_url: "https://pretix.eu/..."  # Optional
  link_text: "Jetzt anmelden"  # Optional, Button-Text anpassen
  featured: true  # oder false
  topic: "ki-zivilgesellschaft"  # Optional, für thematische Seiten

Button-Text anpassen:

Mit dem link_text Parameter kannst du den Text auf dem Anmelde-Button individuell gestalten:

Hinweis: Die Icon-Zeile wurde aus der Event-Struktur entfernt. Die SVG-Icons werden nicht mehr in den Event-Kacheln verwendet.

Thematische Event-Gruppierung (Topic):

Mit dem topic-Parameter kannst du Events thematisch gruppieren für spezialisierte Landing-Pages:

Verfügbare Topics:

Wichtige Hinweise:

Beispiel KI-Event:

- title: "KI Workshop für Vereine"
  description: "Lerne, wie KI deine Vereinsarbeit unterstützen kann"
  date: "2025-09-15"
  # ... andere Felder ...
  topic: "ki-zivilgesellschaft"  # Erscheint auf /ki/

Event ausblenden:

Setze # vor jede Zeile des Events (siehe auskommentiertes Beispiel in der Datei).

Blog-Beiträge schreiben

Verzeichnis: _beitraege/

Neuen Beitrag erstellen:

  1. Erstelle eine neue Datei: dateiname.md (z.B. mein-neuer-beitrag.md)
  2. Benutze für den Dateinamen nut Kleinschreibung. Statt Leerzeiche bitte Bindestriche benutzen.
  3. Verwende folgende Vorlage:
---
title: "Titel des Beitrags"
teaser: "Kurze Zusammenfassung für die Übersicht (1-2 Sätze)"
author: "Ihr Name"
category: "Tools"  # oder "Events", "Projekte", etc.
date: 2025-07-24
header_image: "/assets/images/bildname.png"  # Optional
---

## Hauptüberschrift

Hier beginnt Ihr Beitrag...

### Unterüberschrift

Weiterer Text...

Praktischer Tipp:

Vorlage kopieren: Öffne _beitraege/diese-website-wurde-mit-ki-erstellt.md, kopiere den Inhalt und passe ihn für deinen neuen Beitrag an.

Markdown Grundlagen

Markdown ist eine einfache Formatierungssprache:

# Hauptüberschrift
## Unterüberschrift  
### Kleine Überschrift

**Fett gedruckt**
*Kursiv*

- Aufzählungspunkt 1
- Aufzählungspunkt 2

1. Nummerierte Liste
2. Zweiter Punkt

[Link Text](https://example.com)

![Alt-Text](/assets/images/bild.png)
![Alt-Text](/assets/images/bild.png "Bildunterschrift für das Bild")

> Zitat oder wichtiger Hinweis

Bilder einfügne

Bilder ohne Bildunterschrift:

![Alt-Text für Barrierefreiheit](/assets/images/mein-bild.jpg)

Bilder mit Bildunterschrift:

![Alt-Text für Barrierefreiheit](/assets/images/mein-bild.jpg "Diese Bildunterschrift wird angezeigt")

Wichtige Hinweise:

Praktisches Beispiel:

![Teilnehmer*innen beim Workshop](/assets/images/workshop-2025.jpg "Intensive Diskussionen in der Gruppenarbeitsphase")

Ergebnis:

Bildergalerien erstellen

Neu seit Januar 2025: Du kannst jetzt einfach Bildergalerien in Blog-Beiträgen einbinden!

Galerie-Syntax:








<div class="image-gallery" data-gallery-id="gallery-8">
  
    
    
    
    
    
    
    
    
    
    
    <div class="gallery-item" data-index="0">
      <img src="/assets/images/events/workshop-2025/bild1.jpg" 
           alt="Beschreibung 1" 
           data-caption="Beschreibung 1" 
           data-gallery="gallery-8" 
           loading="lazy" 
           class="gallery-thumbnail">
      <div class="gallery-overlay"></div>
    </div>
  
    
    
    
    
    
    
    
    
    
    
    <div class="gallery-item" data-index="1">
      <img src="/assets/images/events/workshop-2025/bild2.jpg" 
           alt="Beschreibung 2" 
           data-caption="Beschreibung 2" 
           data-gallery="gallery-8" 
           loading="lazy" 
           class="gallery-thumbnail">
      <div class="gallery-overlay"></div>
    </div>
  
    
    
    
    
    
    
    
    
    
    
    <div class="gallery-item" data-index="2">
      <img src="/assets/images/events/workshop-2025/bild3.jpg" 
           alt="Bild3" 
           data-caption="Bild3" 
           data-gallery="gallery-8" 
           loading="lazy" 
           class="gallery-thumbnail">
      <div class="gallery-overlay"></div>
    </div>
  
</div>

Parameter:

Wichtige Hinweise:

Galerie-Features:

Beispiel einer Event-Galerie:

Hier sind Impressionen von unserem Workshop:








<div class="image-gallery" data-gallery-id="gallery-8">
  
    
    
    
    
    
    
    
    
    
    
    <div class="gallery-item" data-index="0">
      <img src="/assets/images/events/workshop-2025/eröffnung.jpg" 
           alt="Begrüßung der Teilnehmer*innen" 
           data-caption="Begrüßung der Teilnehmer*innen" 
           data-gallery="gallery-8" 
           loading="lazy" 
           class="gallery-thumbnail">
      <div class="gallery-overlay"></div>
    </div>
  
    
    
    
    
    
    
    
    
    
    
    <div class="gallery-item" data-index="1">
      <img src="/assets/images/events/workshop-2025/gruppenarbeit.jpg" 
           alt="Intensive Diskussionen in Kleingruppen" 
           data-caption="Intensive Diskussionen in Kleingruppen" 
           data-gallery="gallery-8" 
           loading="lazy" 
           class="gallery-thumbnail">
      <div class="gallery-overlay"></div>
    </div>
  
    
    
    
    
    
    
    
    
    
    
    <div class="gallery-item" data-index="2">
      <img src="/assets/images/events/workshop-2025/präsentation.jpg" 
           alt="Vorstellung der Ergebnisse" 
           data-caption="Vorstellung der Ergebnisse" 
           data-gallery="gallery-8" 
           loading="lazy" 
           class="gallery-thumbnail">
      <div class="gallery-overlay"></div>
    </div>
  
    
    
    
    
    
    
    
    
    
    
    <div class="gallery-item" data-index="3">
      <img src="/assets/images/events/workshop-2025/networking.jpg" 
           alt="Networking" 
           data-caption="Networking" 
           data-gallery="gallery-8" 
           loading="lazy" 
           class="gallery-thumbnail">
      <div class="gallery-overlay"></div>
    </div>
  
</div>

Event-Anmeldungen einbinden (Pretix-Widgets)

Neu seit Juli 2025: Du kannst jetzt Anmeldeformulare direkt in Blog-Beiträge einbinden!

Widget-Syntax:



<pretix-widget 
  event="https://pretix.eu/OIC-BIE/ki-zivil-4/"
  
  
  ></pretix-widget>
<noscript>
   <div class="pretix-widget">
        <div class="pretix-widget-info-message">
            JavaScript ist in Ihrem Browser deaktiviert. Um unseren Ticketshop ohne JavaScript aufzurufen, klicken Sie bitte <a target="_blank" rel="noopener" href="https://pretix.eu/OIC-BIE/ki-zivil-4/">hier</a>.
        </div>
    </div>
</noscript>

Erweiterte Optionen:



<pretix-widget 
  event="https://pretix.eu/OIC-BIE/ki-zivil-4/"
  items="123,124"
  voucher="GUTSCHEIN2025"
  ></pretix-widget>
<noscript>
   <div class="pretix-widget">
        <div class="pretix-widget-info-message">
            JavaScript ist in Ihrem Browser deaktiviert. Um unseren Ticketshop ohne JavaScript aufzurufen, klicken Sie bitte <a target="_blank" rel="noopener" href="https://pretix.eu/OIC-BIE/ki-zivil-4/">hier</a>.
        </div>
    </div>
</noscript>

Parameter:

Event-Namen herausfinden:

  1. Gehe zu deinem Event in Pretix (https://pretix.eu/OIC-BIE/)
  2. Die URL zeigt den Event-Namen: https://pretix.eu/OIC-BIE/ki-workshop-2025/
  3. Event-Name: ki-workshop-2025

Praktisches Beispiel:

---
title: "KI Workshop für die Zivilgesellschaft"
teaser: "Lerne, wie künstliche Intelligenz deine Vereinsarbeit unterstützen kann"
author: "Sarah Mueller"
category: "Events"
date: 2025-08-15
---

## Workshop Details

Am 15. August 2025 veranstalten wir einen spannenden Workshop zum Thema "KI in der Zivilgesellschaft". 

### Anmeldung

Melde dich jetzt direkt an:



<pretix-widget 
  event="https://pretix.eu/OIC-BIE/ki-zivil-4/"
  
  
  ></pretix-widget>
<noscript>
   <div class="pretix-widget">
        <div class="pretix-widget-info-message">
            JavaScript ist in Ihrem Browser deaktiviert. Um unseren Ticketshop ohne JavaScript aufzurufen, klicken Sie bitte <a target="_blank" rel="noopener" href="https://pretix.eu/OIC-BIE/ki-zivil-4/">hier</a>.
        </div>
    </div>
</noscript>

### Weitere Informationen

Der Workshop findet im Innovation Office statt...

Widget-Features:

Wichtige Hinweise:

YouTube-Videos einbetten

Du kannst einfach YouTube-Videos in Blog-Beiträge einbinden. Das Video wird als interaktives Thumbnail angezeigt und lädt erst beim Klick.

Video-Syntax:

<!-- YouTube Video Component -->
<!-- Usage: include youtube.html id="VIDEO_ID" title="Video Title" -->




<div class="youtube-video" data-video-id="VIDEO_ID">
    <div class="youtube-thumbnail">
        <img src="https://img.youtube.com/vi/VIDEO_ID/maxresdefault.jpg" 
             alt="Titel des Videos" 
             loading="lazy"
             onerror="this.src='https://img.youtube.com/vi/VIDEO_ID/hqdefault.jpg'">
        <div class="youtube-play-button"></div>
        
        <div class="youtube-title">Titel des Videos</div>
        
    </div>
</div>

Parameter:

Video-ID herausfinden:

  1. Öffne das Video auf YouTube
  2. Kopiere die URL: https://www.youtube.com/watch?v=dQw4w9WgXcQ
  3. Video-ID: dQw4w9WgXcQ (der Teil nach v=)

Praktisches Beispiel:

---
title: "Workshop Dokumentation"
author: "Maria Schmidt"
category: "Events"
date: 2025-08-15
---

## Rückblick auf unseren KI-Workshop

Hier ist die Aufzeichnung unseres Workshops:

<!-- YouTube Video Component -->
<!-- Usage: include youtube.html id="VIDEO_ID" title="Video Title" -->




<div class="youtube-video" data-video-id="dQw4w9WgXcQ">
    <div class="youtube-thumbnail">
        <img src="https://img.youtube.com/vi/dQw4w9WgXcQ/maxresdefault.jpg" 
             alt="KI Workshop für Vereine - Vollständige Aufzeichnung" 
             loading="lazy"
             onerror="this.src='https://img.youtube.com/vi/dQw4w9WgXcQ/hqdefault.jpg'">
        <div class="youtube-play-button"></div>
        
        <div class="youtube-title">KI Workshop für Vereine - Vollständige Aufzeichnung</div>
        
    </div>
</div>

### Was du gelernt hast

Im Workshop haben wir verschiedene KI-Tools vorgestellt...

Video-Features:

Wichtige Hinweise:

Ausführliche Referenz: Markdown Cheat Sheet

Bilder hochladen

Verzeichnis: assets/images/

Bildempfehlungen:

Upload-Prozess:

  1. Navigiere zu assets/images/
  2. Wähle das passende Unterverzeichnis (team/ für Teamfotos)
  3. Klicke “Add file” → “Upload files”
  4. Ziehe deine Bilder in das Upload-Feld
  5. Committe die Änderungen

Neue Ordner für Bilder erstellen:

  1. Navigiere zu assets/images/
  2. Klicke “Create new file”
  3. Gib ein: neuer-ordner/platzhalterdatei.md
    • GitHub erstellt automatisch den Ordner “neuer-ordner”
    • Die Platzhalterdatei kannst du später löschen
  4. Klicke “Commit new file”
  5. Jetzt kannst du Bilder in den neuen Ordner hochladen:
    • Gehe in den neuen Ordner
    • “Add file” → “Upload files”
    • Nach dem Upload die Platzhalterdatei löschen

Empfohlene Ordnerstruktur:

assets/images/
├── team/          # Teamfotos
├── events/        # Event-Bilder und Galerien
├── projekte/      # Projekt-Screenshots
├── blog/          # Blog-Header-Bilder
└── icons/         # Icons (bereits vorhanden)

Tipp für Event-Galerien:

Erstelle Unterordner für jedes Event:

assets/images/events/
├── workshop-2025-01/
│   ├── foto1.jpg
│   ├── foto2.jpg
│   └── foto3.jpg
├── hackathon-2025/
└── innovation-meetup-feb/

Arbeitsweisen

Schneller Weg (Direkt committen):

  1. Datei bearbeiten
  2. Bei “Commit changes” einen aussagekräftigen Titel eingeben
  3. “Commit directly to the main branch” wählen
  4. “Commit changes” klicken ✅ Änderungen sind sofort live!

Sicherer Weg (Pull Request):

Für Redakteurinnen (Änderungen vorschlagen):

  1. Datei bearbeiten
  2. Bei “Commit changes” einen aussagekräftigen Titel eingeben
  3. “Create a new branch” wählen
  4. “Propose changes” klicken
  5. “Create pull request” klicken
  6. Reviewerin informieren: Schicke den Link zum Pull Request an die zuständige Person

Für Reviewerinnen (Änderungen prüfen und freigeben):

  1. Pull Request öffnen: Klicke auf den Link oder gehe zu “Pull requests” im Repository
  2. Änderungen prüfen:
    • Klicke auf “Files changed” um zu sehen, was geändert wurde
    • Grüne Zeilen = neu hinzugefügt, rote Zeilen = gelöscht
    • Prüfe Rechtschreibung, Inhalt und Format
  3. Kommentare hinterlassen: Bei Fragen oder Anmerkungen klicke auf die Zeilennummer und schreibe einen Kommentar
  4. Freigeben oder Änderungen anfordern:
    • ✅ Freigeben: “Review changes” → “Approve” → “Submit review”
    • ❌ Änderungen nötig: “Review changes” → “Request changes” → Begründung schreiben → “Submit review”
  5. Merge (Veröffentlichen): Nach Freigabe klicke “Merge pull request” → “Confirm merge”
  6. Aufräumen: “Delete branch” klicken (der temporäre Branch wird nicht mehr gebraucht)

✅ Änderungen werden erst nach Review und Merge veröffentlicht

Pull Request Workflow im Team

Wann welchen Workflow nutzen?

Kommunikation:

Praktische Tipps

✅ Dos:

❌ Don’ts:

Häufige Fehler vermeiden:

Checkliste vor dem Veröffentlichen

Bei Problemen

  1. Syntax-Fehler: Vergleiche deine Einträge mit funktionierenden Beispielen
  2. Bilder werden nicht angezeigt: Prüfe den Pfad und ob die Datei hochgeladen wurde
  3. Website lädt nicht: Warte 2-3 Minuten - GitHub braucht Zeit zum Veröffentlichen

Technische Hilfe: Wende dich an Jens (jens.edler@bielefeld.de)

Rollen und Zuständigkeiten

Reviews

Eskalation:

Bei technischen Problemen oder Konflikten: jens.edler@bielefeld.de

*Erstellt: Juli 2025 Version 1.1*