Wordcloud AI Awareness Workshop März 2025

index.html

<div id="app">
  </div>

script.js

// Stelle sicher, dass Vue 3 in den CodePen JS Settings hinzugefügt ist!
const { createApp } = Vue;

// --- Daten ---
// Die Wörter für die Cloud (bleiben gleich)
const wordsData = [
  { id: 1, text: 'Inspiration', size: 3 },
  { id: 2, text: 'Design', size: 3 },
  { id: 3, text: 'GPT', size: 2 },
  { id: 4, text: 'Texting', size: 2 },
  { id: 5, text: 'Prozessoptimierung', size: 4 },
  { id: 6, text: 'Effizienzsteigerung in wiederkehrenden Arbeiten', size: 5 },
  { id: 7, text: 'schnelles Skizze', size: 3 },
  { id: 8, text: 'Zeit', size: 2 }, // Korrigiert von Ueit
  { id: 9, text: 'Perfektion', size: 3 },
  { id: 10, text: 'Zeitersparnis', size: 4 },
  { id: 11, text: 'Magnific', size: 2 },
  { id: 12, text: 'Qualitätssteigerung', size: 4 },
  { id: 13, text: 'Effizienz', size: 3 },
  { id: 14, text: 'Eigenständigkeit', size: 3 },
];

// Die Inhalte für die Popups (überarbeitet & vollständig)
const wordContentsData = {
  'Inspiration': {
    title: '💡 KI für deine Inspiration',
    content: `Hängt deine Kreativität fest? Probier's mal damit:
      <ul>
        <li>Lass dir von Bild-KIs (wie Midjourney, Reve.art, Ideogram) einzigartige <b>Moodboards oder erste Visuals</b> für deine Ideen zaubern. Einfach beschreiben, was du sehen willst!</li>
        <li>Keine Ahnung für den nächsten Blogpost oder die nächste Story? Frag doch mal ChatGPT, Claude oder Gemini nach ein paar <b>coolen Themenvorschlägen oder ersten Entwürfen</b>.</li>
        <li>Du kannst sogar mit Tools wie Suno AI oder Udio <b>musikalische Skizzen</b> erstellen lassen, basierend auf deiner Beschreibung von Stimmung oder Genre!</li>
      </ul>`
  },
  'Design': {
     title: '🎨 KI als dein Design-Buddy',
     content: `KI kann dir im Designprozess unter die Arme greifen:
      <ul>
        <li>Zeichne eine grobe Skizze deiner App-Idee und lass Tools wie Uizard oder Visily daraus schon mal <b>digitale Wireframes oder Prototypen</b> bauen. Spart mega Zeit!</li>
        <li>Brauchst du schnell <b>Varianten für ein Logo, eine Grafik oder ein Icon</b>? Manche KIs helfen dir dabei auf Knopfdruck – super für Brainstorming.</li>
        <li>Visualisiere Produkte ruckzuck in verschiedenen Settings, ohne teure Fotoshootings. Lade ein Bild hoch und lass die KI <b>neue Hintergründe oder Szenen</b> generieren.</li>
      </ul>`
  },
   'GPT': {
    title: '🤖 GPT & Co. als Text-Booster',
    content: `Große Sprachmodelle (LLMs) sind mächtige Werkzeuge:
      <ul>
        <li>Lass dir lästige <b>E-Mails, Berichte oder sogar Code-Snippets</b> von der KI vorschreiben. Aber wichtig: Immer kritisch prüfen und anpassen!</li>
        <li>Riesen Dokument gelesen und keine Zeit für die Zusammenfassung? Gib's der KI, sie fasst dir <b>das Wichtigste schnell und verständlich</b> zusammen.</li>
        <li>Denk dran für <b>intelligentere Chatbots oder FAQ-Systeme</b> – damit kannst du Nutzern viel besser und schneller helfen.</li>
      </ul>`
  },
  'Texting': {
     title: '💬 KI für besseres Texting & Kommunizieren',
     content: `Auch beim Schreiben und Chatten hilft dir KI:
      <ul>
        <li>Nutze die <b>smarten Autovervollständigungen und Vorschläge</b> in deinen Mail-Programmen oder Messengern – das spart Tipparbeit.</li>
        <li>Mit Tools wie Grammarly (auch die kostenlose Version) kannst du checken, ob der <b>Ton und Stil</b> deiner Nachricht passt – super nützlich für wichtige Mails oder Bewerbungen.</li>
        <li>Kommuniziere leichter über Sprachgrenzen hinweg mit <b>Echtzeit-Übersetzungsfunktionen</b>, die oft schon in Apps integriert sind.</li>
      </ul>`
  },
   'Prozessoptimierung': {
     title: '⚙️ Mach deine Abläufe smarter mit KI',
     content: `Wo kannst du KI zur Prozessoptimierung einsetzen?
      <ul>
        <li>Verbinde deine Lieblingsapps mit Tools wie Zapier oder Make und lass KI Routineaufgaben übernehmen (z.B. <b>Mails automatisch sortieren, Daten in Tabellen eintragen</b>).</li>
        <li>In manchen Branchen (z.B. Produktion) kann KI sogar vorhersagen, wann eine Maschine gewartet werden muss (<b>Predictive Maintenance</b>) – spart Zeit und vermeidet Ausfälle.</li>
        <li>Für Lieferdienste oder Aussendienst: Lass die <b>optimale Route</b> von der KI berechnen, um Sprit und Zeit zu sparen.</li>
      </ul>`
  },
  'Effizienzsteigerung in wiederkehrenden Arbeiten': {
     title: '🚀 Nie wieder stupide Routinejobs!',
     content: `Befreie dich von monotonen Aufgaben:
      <ul>
        <li>Lass Rechnungen, Belege oder Formulare <b>automatisch auslesen</b> (z.B. mit Microsoft Power Automate oder spezialisierten Tools) – kein nerviges Abtippen mehr!</li>
        <li>Reduziere Fehler bei der Dateneingabe, indem du die KI die Daten <b>validieren oder sogar eintragen</b> lässt.</li>
        <li>Regelmässige Reports erstellen? Können oft <b>automatisch aus den vorhandenen Daten generiert</b> werden, z.B. in Excel mit Copilot oder über BI-Tools.</li>
      </ul>`
  },
    'schnelles Skizze': {
    title: '✍️ Ideen blitzschnell sichtbar machen',
    content: `Visualisiere deine Konzepte in Rekordzeit:
      <ul>
        <li>Beschreib deine Idee (z.B. "Ein roter Sportwagen im Cyberpunk-Stil") und lass Bild-KIs dir in Sekunden <b>mehrere visuelle Entwürfe</b> liefern. Perfekt für den Start!</li>
        <li>Kritzel deine App- oder Website-Idee grob aufs Papier und Tools wie Visily machen dir einen <b>digitalen, klickbaren Prototypen</b> draus.</li>
        <li>Auch für Architekten oder Innendesigner super: Schnelle <b>Konzeptbilder oder Renderings</b> von Gebäuden oder Räumen erstellen lassen.</li>
      </ul>`
  },
  'Zeit': { // Korrigiert von Ueit
    title: '⏱️ Das Wichtigste: Zeit gewinnen!',
    content: `KI als dein persönlicher Zeitspar-Helfer:
      <ul>
        <li>Viele KI-Tools sind direkt darauf ausgelegt, dir Zeit zu sparen, indem sie Aufgaben einfach <b>schneller erledigen als du es manuell könntest</b>.</li>
        <li>Recherchiere effizienter oder lass dir <b>komplexe Informationen oder lange Texte schnell zusammenfassen</b> (z.B. mit Perplexity AI oder den Zusammenfassungs-Features von LLMs).</li>
        <li>Nutze KI als dein "Kollegen", der dir hilft, z.B. beim <b>Programmieren (Code schreiben, Fehler finden)</b> oder beim Formulieren von Texten, um schneller ans Ziel zu kommen.</li>
      </ul>`
  },
  'Perfektion': {
    title: '🎯 Streben nach (fast) Perfektion mit KI',
    content: `KI kann dir helfen, Fehler zu minimieren und Ergebnisse zu verfeinern:
      <ul>
        <li>Lass die KI nach Fehlern suchen: Sie kann <b>Tippfehler in Texten, Bugs im Code oder sogar winzige Fehler auf Produktbildern</b> in der Qualitätskontrolle erkennen.</li>
        <li>Bekomme <b>Verbesserungsvorschläge für deinen Code</b>: KI-Tools (wie GitHub Copilot Chat) können dir helfen, Code effizienter, lesbarer oder sicherer zu machen.</li>
        <li>Verpasse deinen Texten den letzten Schliff mit Tools, die nicht nur Grammatik, sondern auch <b>Stil, Klarheit und Tonalität prüfen</b> und Vorschläge machen.</li>
      </ul>`
  },
  'Zeitersparnis': {
    title: '⏳ Konkrete Zeitfresser eliminieren',
    content: `Wo kannst du direkt Zeit sparen?
      <ul>
        <li>Keine Lust auf Meeting-Protokolle? Tools wie Microsoft Teams Premium <b>fassen dir Meetings automatisch zusammen</b> und listen Action Items auf. Sogar auf Schweizerdeutsch!</li>
        <li>Richte <b>automatisierte Antworten</b> auf häufig gestellte Fragen per E-Mail oder Chatbot ein.</li>
        <li>Nutze <b>Recherche-Assistenten</b> wie Perplexity AI oder Consensus, um schnell fundierte Antworten (oft sogar direkt mit Quellenangaben) auf deine Fragen zu bekommen.</li>
      </ul>`
  },
   'Magnific': {
    title: '🖼️ Bilder aufmotzen mit KI (z.B. Magnific AI)',
    content: `Verbessere dein Bildmaterial gezielt:
      <ul>
        <li>Hast du ein Bild nur in kleiner Auflösung? KI-Upscaler (wie Magnific AI, krea.ai) können es oft <b>erstaunlich gut vergrössern und Details hinzufügen</b>.</li>
        <li>Füge <b>mehr Details, bessere Texturen oder mehr Realismus</b> zu niedrig aufgelösten oder KI-generierten Bildern hinzu.</li>
        <li>Entferne automatisch <b>Bildrauschen oder schärfe</b> deine Fotos, um die technische Qualität zu verbessern.</li>
      </ul>`
  },
   'Qualitätssteigerung': {
    title: '🌟 Mach deine Arbeit oder Produkte noch besser',
    content: `Nutze KI, um die Qualität zu steigern:
      <ul>
        <li>Setze KI zur <b>Fehlererkennung</b> ein – sei es bei der Prüfung von Texten auf Konsistenz, beim Aufspüren von Bugs in Software oder bei der visuellen Kontrolle von Produkten.</li>
        <li>Biete deinen Kunden oder Nutzern ein <b>persönlicheres Erlebnis</b> durch KI-gesteuerte Empfehlungen (wie bei Netflix oder Amazon) oder individuell angepasste Lernpfade.</li>
        <li>Optimiere Designs oder Produkte: Lass die KI Tausende von Varianten durchrechnen, um z.B. die <b>Aerodynamik, Materialfestigkeit oder Energieeffizienz</b> zu verbessern.</li>
      </ul>`
  },
   'Effizienz': {
    title: '⚡ Mehr schaffen mit weniger Aufwand',
    content: `Steigere deine Effizienz durch KI-Unterstützung:
      <ul>
        <li>Setze Ressourcen (Mitarbeiter, Maschinen, Budget) <b>optimaler ein</b> mit KI-basierten Planungs- und Prognosetools.</li>
        <li>In manchen Bereichen hilft KI, <b>Energie zu sparen</b>, z.B. durch intelligente Steuerung von Heizung und Licht in Gebäuden oder Optimierung von Produktionsprozessen.</li>
        <li><b>Teste Software schneller und umfassender</b>, indem du KI nutzt, um Testfälle zu generieren oder Testergebnisse automatisch zu analysieren.</li>
      </ul>`
  },
   'Eigenständigkeit': {
     title: '💪 Werde unabhängiger (oder lass die KI machen)',
     content: `KI kann dich befähigen oder dir Arbeit abnehmen:
      <ul>
        <li>Nutze KI als deinen <b>persönlichen Assistenten</b> für Terminplanung, Erinnerungen und die Organisation einfacher Aufgaben (viele Standard-Tools können das schon!).</li>
        <li>Spannende Zukunft: <b>KI-Agenten</b>, die bald vielleicht komplexere, mehrstufige Aufgaben (wie "Recherchiere die besten E-Bikes unter 3000 CHF und erstelle eine Vergleichstabelle") für dich erledigen.</li>
        <li>Denk auch an <b>Barrierefreiheit</b>: KI kann Menschen mit Einschränkungen enorm helfen, z.B. durch bessere Screenreader, automatische Bildbeschreibungen oder Transkriptionen.</li>
      </ul>`
  },
};


// --- WordCloud Komponente (Definition bleibt gleich) ---
const WordCloudComponent = {
  props: ['words'],
  emits: ['word-click'],
  template: `
    <div class="word-cloud-container">
      <span
        v-for="word in words"
        :key="word.id"
        class="word-item"
        :style="{ fontSize: calculateFontSize(word.size) }"
        @click="handleClick(word.text)"
        @keydown.enter="handleClick(word.text)"
        tabindex="0"
      >
        {{ word.text }}
      </span>
    </div>
  `,
  methods: {
    calculateFontSize(size) {
      return `${1 + (size - 1) * 0.35}em`;
    },
    handleClick(wordText) {
      this.$emit('word-click', wordText);
    }
  }
};

// --- Popup Komponente (Definition bleibt gleich) ---
const PopupComponent = {
  props: ['title', 'contentHtml'],
  emits: ['close'],
  template: `
    <div class="popup-overlay" @click="handleClose">
      <div class="popup-content" @click.stop>
        <button class="popup-close-button" @click="handleClose">&times;</button>
        <h2>{{ title }}</h2>
        <div v-html="contentHtml"></div>
      </div>
    </div>
  `,
  methods: {
    handleClose() {
      this.$emit('close');
    },
     handleEscKey(event) {
       if (event.key === 'Escape') {
         this.handleClose();
       }
     }
  },
  mounted() {
    window.addEventListener('keydown', this.handleEscKey);
  },
  beforeUnmount() {
    window.removeEventListener('keydown', this.handleEscKey);
  }
};


// --- Haupt Vue App Instanz (Definition bleibt gleich, nutzt die neuen Daten) ---
const app = createApp({
  components: {
    'word-cloud': WordCloudComponent,
    'popup': PopupComponent
  },
  data() {
    return {
      words: wordsData, // Verwendet die oben definierten Wörter
      wordContents: wordContentsData, // Verwendet die oben definierten Inhalte
      isPopupVisible: false,
      popupTitle: '',
      popupContentHtml: ''
    }
  },
  methods: {
    handleWordClick(wordText) {
      const content = this.wordContents[wordText];
      if (content) {
        this.popupTitle = content.title;
        this.popupContentHtml = content.content;
      } else {
        // Fallback, falls ein Wort nicht im Content-Objekt ist
        this.popupTitle = wordText;
        this.popupContentHtml = '<p>Ups, für diesen Begriff habe ich noch keinen Tipp parat.</p>';
      }
      this.isPopupVisible = true;
    },
    handleClosePopup() {
      this.isPopupVisible = false;
    }
  },
  template: `
    <header class="app-header">
      <h1>In welchem Bereich der KI siehst du für dich persönlich das grösste Potenzial?</h1>
      <p>(Klick auf ein Wort für ein paar Ideen & Tipps!)</p>
    </header>

    <main>
      <word-cloud :words="words" @word-click="handleWordClick"></word-cloud>
    </main>

    <popup
      v-if="isPopupVisible"
      :title="popupTitle"
      :contentHtml="popupContentHtml"
      @close="handleClosePopup"
    ></popup>

    <footer class="app-footer">
      AI Awareness Workshop (Alexander Naumer - Aroma AG) | Stand: März 2025
    </footer>
  `
});

// Die App an das HTML-Element mit der ID 'app' binden
app.mount('#app');

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.37/vue.global.prod.min.js"></script>

style.css

/* Globale Styles & App Container (aus App.vue <style>) */
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #f4f7f6;
  color: #333;
}

#app { /* ID des Root-Elements im HTML */
  text-align: center;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.app-header {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 30px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.app-header h1 {
  font-size: 1.8em;
  color: #2c3e50;
   margin-bottom: 5px;
}

.app-header p {
  font-size: 0.9em;
  color: #7f8c8d;
}

main {
  padding: 20px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.app-footer {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #ecf0f1;
  font-size: 0.8em;
  color: #95a5a6;
}

/* WordCloud Styles (aus WordCloud.vue <style scoped>) */
.word-cloud-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 15px 25px; /* Vertikaler und horizontaler Abstand */
  padding: 20px;
  min-height: 300px;
}

.word-item {
  display: inline-block;
  padding: 8px 15px;
  background-color: #e0f7fa;
  border-radius: 5px;
  color: #00796b;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
  font-weight: 500;
  text-decoration: none;
  border: none;
  text-align: center;
}

.word-item:hover,
.word-item:focus {
  transform: scale(1.1);
  background-color: #b2ebf2;
  color: #004d40;
  outline: 2px solid #00796b;
  outline-offset: 2px;
}

/* Optional: Farbwechsel */
.word-item:nth-child(5n+1) { background-color: #e0f7fa; color: #00796b; }
.word-item:nth-child(5n+2) { background-color: #e8f5e9; color: #2e7d32; }
.word-item:nth-child(5n+3) { background-color: #fff3e0; color: #ef6c00; }
.word-item:nth-child(5n+4) { background-color: #fce4ec; color: #ad1457; }
.word-item:nth-child(5n+5) { background-color: #ede7f6; color: #5e35b1; }

.word-item:nth-child(5n+1):hover, .word-item:nth-child(5n+1):focus { background-color: #b2ebf2; color: #004d40; outline-color: #00796b; }
.word-item:nth-child(5n+2):hover, .word-item:nth-child(5n+2):focus { background-color: #c8e6c9; color: #1b5e20; outline-color: #2e7d32; }
.word-item:nth-child(5n+3):hover, .word-item:nth-child(5n+3):focus { background-color: #ffe0b2; color: #e65100; outline-color: #ef6c00; }
.word-item:nth-child(5n+4):hover, .word-item:nth-child(5n+4):focus { background-color: #f8bbd0; color: #880e4f; outline-color: #ad1457; }
.word-item:nth-child(5n+5):hover, .word-item:nth-child(5n+5):focus { background-color: #d1c4e9; color: #311b92; outline-color: #5e35b1; }


/* Popup Styles (aus Popup.vue <style scoped>) */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 20px;
  box-sizing: border-box;
}

.popup-content {
  background-color: #ffffff;
  padding: 30px 40px;
  border-radius: 8px;
  max-width: 600px;
  width: 90%;
  position: relative;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  max-height: 80vh;
  overflow-y: auto;
}

.popup-content h2 {
  margin-top: 0;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

/* Styling für das per v-html eingefügte HTML (kein :deep() nötig) */
.popup-content ul {
  padding-left: 20px;
  line-height: 1.6;
  list-style: disc;
}

.popup-content li {
  margin-bottom: 10px;
}

.popup-content b {
  color: #00796b;
}

.popup-close-button {
  position: absolute;
  top: 15px;
  right: 15px;
  background: none;
  border: none;
  font-size: 1.8rem;
  color: #aaa;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

.popup-close-button:hover {
  color: #333;
}

wordcloud-ai-awareness-workshop-marz-2025.markdown

Wordcloud AI Awareness Workshop März 2025