<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:media="http://search.yahoo.com/mrss/"><channel><title>Projekte auf Nicky Reinert</title><link>https://nickyreinert.de/tags/projekte/</link><description>Blog &amp; Projekte von Nicky Reinert (Institut für digitale Herausforderungen): Webentwicklung &amp; Software Development, KI, SEO &amp; Analytics, Hosting &amp; DevOps, WordPress &amp; Hugo, Tools &amp; Projekte, Datenschutz und digitale Kultur</description><generator>Hugo 0.167.0</generator><language>de</language><managingEditor>Nicky Reinert</managingEditor><webMaster>Nicky Reinert</webMaster><copyright/><lastBuildDate>Fri, 05 Jun 2026 11:34:56 +0000</lastBuildDate><atom:link href="https://nickyreinert.de/tags/projekte/index.xml" rel="self" type="application/rss+xml"/><item><title>F1LO - Fitness Logger</title><link>https://nickyreinert.de/2026/2026-06-05-f1lo---fitness-logger/</link><pubDate>Fri, 05 Jun 2026 11:34:56 +0000</pubDate><author>Nicky Reinert</author><dc:creator>Nicky Reinert</dc:creator><guid isPermaLink="true">https://nickyreinert.de/2026/2026-06-05-f1lo---fitness-logger/</guid><description>F1LO ist eine selbst entwickelte Fitness-Tracking-App, die im Browser oder als PWA läuft. Sie ermöglicht die Synchronisierung von Trainingsdaten über mehrere Geräte hinweg mittels Firebase und Google Sign-In. F1LO unterstützt das Trainingskonzept 'Grease the Groove' (GTG) mit einem Frühsport-Block und normalen Trainings-Blöcken, die aus Übungen, Sets und Wiederholungen bestehen. Die App enthält einen Gamification-Mechanismus zur Belohnung von Konstanz und ermöglicht die Erfassung von Supplements. Der Quellcode ist auf GitHub verfügbar, und die App wird auf Netlify gehostet.</description><content:encoded><![CDATA[<p>Irgendjemand hat irgendwo mal das &ldquo;<strong>Zeitalter der Personal Apps</strong>&rdquo; ausgerufen. Falls ihr nicht wisst, das was bedeutet, erkläre ich es mit diesem Beispiel:</p>
<p>Ich springe immer wieder von Fitness-App zu Fitness-App. Und irgendwas habe ich immer wieder auszusetzen. Entweder sie sind zu komplex, zu einfach oder - und das ist meistens der Grund - sie funktionieren nur mit einem Abo. Also habe ich den Coding-Agenten angeworfen und mir einfach selber was gebaut. Und das genau beschreibt das Konzept der &ldquo;Personal App&rdquo; sehr gut: Du baust es dir einfach selbst.</p>
<p>Ich stelle also vor: <strong>F1L0</strong>. Der Fitness Logger: 





  
  

  
  

  
  
  

  
    
      
    
  

  
  <a href="https://f1l0.nickyreinert.de?utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous" target="_blank" rel="noopener noreferrer">https://f1l0.nickyreinert.de</a>


</p>
<p>Du benutzt die App auf eigene Gefahr. Es gibt keine Tracking- oder Werbe-Features. Im Browser werden deine Trainingsdaten gespeichert. Wenn du die Synchronisierung nutzt, werden deine Trainingsdaten in einem Firebase-Backend gespeichert, das von Google bereitgestellt wird. Es gibt keine Weitergabe der Daten an Dritte.</p>
<h2 id="funktionen">Funktionen</h2>
<ul>
<li>läuft im <strong>Browser</strong> oder als <strong>PWA</strong> auf den meisten Geräten</li>
<li>unterstützt Synchronsierung über mehrere Geräte hinweg mittels <strong>Firebase</strong> bzw. <strong>Google Sign-In</strong></li>
<li>da das meinem Trainingskonzept &ldquo;<strong>Grease the Groove</strong>&rdquo; (GTG) entspricht: es gibt einen Frühsport-Block und normale Trainings-Blöcke</li>
<li>ein <strong>Trainingsblock</strong> besteht aus mehreren <strong>Übungen</strong> und beliebig vielen <strong>Sets</strong> und <strong>Wiederholungen</strong></li>
<li>du kannst weitere Trainingsblöcke hinzufügen und einen Cooldown definieren, die Idee von <strong>GTG</strong> ist es, so oft wie möglich zu trainieren, ohne sich zu überfordern</li>
<li>es gibt einen einfachen <strong>Gamification-Mechanismus</strong>, der vor allem Konstanz belohnen soll</li>
<li>ich kann meine Supplements erfassen</li>
</ul>
<figure>
  <a href="https://nickyreinert.de/2026/2026-06-05-f1lo---fitness-logger/image-2.png" target="_blank" class="image-link " title="Click to view full size">
    <img 
      src="https://nickyreinert.de/2026/2026-06-05-f1lo---fitness-logger/image-2.png" 
      alt="Screenshot der F1LO-App"
      width="200"
      loading="lazy"
    />
  </a>
  
</figure>

<h2 id="architektur">Architektur</h2>
<p>Du kannst dir das Repo schnappen und die App für dich weiterentwicklen:</p>
<p>





  
  

  
  

  
  
  

  
    
      
    
  

  
  <a href="https://github.com/nickyreinert/f1l0?utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous" target="_blank" rel="noopener noreferrer">https://github.com/nickyreinert/f1l0</a>


</p>
<p>Der ganze Bums wird auf <strong>netfliy</strong> gehostet. Im Prinzip funktioniert aber auch <strong>Github Pages</strong>, dann aber ohne Synchronisierung, weil die Authentifizierung für <strong>Firebase</strong> über Secret Keys läuft (und die müssen irgendwo sicher hinterlegt werden). Wenn du es selbst hosten willst, kannst du auch andere Authentifizierungsanbieter verwenden, z.B. über Apple oder Facebook.</p>
]]></content:encoded><atom:updated>2026-10-06T10:59:33+02:00</atom:updated><category>tools</category><dc:subject>Lesezeit: 5 Minuten Minuten</dc:subject><dc:type>blog</dc:type></item><item><title>Claude mit Channels per Telegram/Slack/Discord steuern</title><link>https://nickyreinert.de/2026/2026-03-28-claude-channels/</link><pubDate>Sat, 28 Mar 2026 00:23:45 +0000</pubDate><author>Nicky Reinert</author><dc:creator>Nicky Reinert</dc:creator><guid isPermaLink="true">https://nickyreinert.de/2026/2026-03-28-claude-channels/</guid><description>Kurzer “Produktivitäts-Hack” für Claude: Fernsteuern per Telegram/Slack/Discord, um Aufgaben zu bestimmten Zeiten auszuführen oder aus der Ferne zu starten (Claude nennt das Feature “Channels”).
0. Der Schritt ist optional aber wichtig, wenn du Claude unbeaufsichtigt auf deiner Maschine zum Laufen …</description><content:encoded><![CDATA[<p>Kurzer &ldquo;Produktivitäts-Hack&rdquo; für <strong>Claude</strong>: <strong>Fernsteuern</strong> per <strong>Telegram/Slack/Discord</strong>, um Aufgaben zu bestimmten Zeiten auszuführen oder aus der Ferne zu starten (Claude nennt das Feature &ldquo;<strong>Channels</strong>&rdquo;).</p>
<p><em>0. Der Schritt ist optional aber wichtig, wenn du Claude unbeaufsichtigt auf deiner Maschine zum Laufen bringen willst, weil du z.B. über SSH auf einem Headless-Server arbeitest. Entweder du nutzt dafür <code>screen</code> oder - was noch stabiler ist: Du installierst Claude als Service über <code>systemd</code>. Dann wird die Sitzung auch nach einem Neustart automatisch wieder gestartet. Ich beschreib das jetzt nicht im Detail - frag einfach Claude!</em> <code>(⌐■_■)</code></p>
<ol>
<li>Claude CLI App installieren</li>
</ol>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="ln">1</span><span class="cl">curl -fsSL https://claude.ai/install.sh <span class="p">|</span> bash
</span></span></code></pre></div><p>Shell-Scripte von irgendeiner Webseite installieren. Was soll schon schief gehen. Einfach machen. <code>⊂(◉‿◉)つ</code></p>
<ol start="2">
<li>
<p>Erstell deinen Bot. Bei Telegram geht das recht einfach mit dem 





  
  

  
  

  
  
  

  
    
      
    
  

  
  <a href="https://t.me/BotFather?utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous" target="_blank" rel="noopener noreferrer">BotFather</a>


. Am Ende bekommst du einen Token, den du später brauchst.</p>
</li>
<li>
<p>Das Plugin für deinen bevorzugten Messenger installieren - dazu Claude CLI einmal starten und erstmal das Plugin installieren.</p>
</li>
</ol>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="ln">1</span><span class="cl">/plugin install telegram@claude-plugins-official
</span></span></code></pre></div><p>(Eine Liste unterstützter offizieller Plugins findest du übrigens hier: 





  
  

  
  

  
  
  

  
    
      
    
  

  
  <a href="https://github.com/anthropics/claude-plugins-official?utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous" target="_blank" rel="noopener noreferrer">https://github.com/anthropics/claude-plugins-official</a>


 - wenn dein Messenger nicht dabei ist, lässt du dir den von Claude einfach selber bauen oder greifst auf inoffizielle Plugins zurück)</p>
<p>Die CLI-App danach wieder schließen.</p>
<ol start="4">
<li><strong>Bun</strong> installieren (ein Packagemanager inkl. JavaScript-Runtime, über den Claude CLI mit deinem Chatbot verbunden wird)</li>
</ol>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="ln">1</span><span class="cl">curl -fsSL https://bun.sh/install <span class="p">|</span> bash
</span></span></code></pre></div><ol start="5">
<li>Den <strong>Channel</strong> einrichten - hier wird das Auth-Token vom Messenger benötigt (<strong>Schritt 1</strong>). Wo du das genau einträgst, siehst du, wenn du <strong>Bun</strong> einmal startest - hier das Beispiel für <strong>Telegram</strong>:</li>
</ol>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="ln">1</span><span class="cl">bun run --cwd ~/.claude/plugins/marketplaces/claude-plugins-official/external_plugins/telegram --shell<span class="o">=</span>bun start
</span></span></code></pre></div><p>In der Regel handelte es sich um eine Datei wie diese hier: <code>~/.claude/channels/telegram/.env</code> - dort trägst du den Token ein, den du von deinem Bot bekommen hast. Claude kann nun Nachrichten zu deinem Messenger schicken. Uni-direktional - wenn man so will.</p>
<ol start="6">
<li>Claude CLI wieder starten - diesmal aber mit dem Verweis auf Channels:</li>
</ol>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="ln">1</span><span class="cl">claude --channels plugin:telegram@claude-plugins-official
</span></span></code></pre></div><p>Und einmal prüfen, ob die <strong>MCP-Verbindung</strong> zu <strong>Bun</strong> steht, das Kommando heißt schlicht <code>/mcp</code>:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="ln">1</span><span class="cl">    Built-in MCPs <span class="o">(</span>always available<span class="o">)</span>
</span></span><span class="line"><span class="ln">2</span><span class="cl">  ❯ plugin:telegram:telegram · ✔ connected
</span></span></code></pre></div><ol>
<li>Jetzt erlauben wir dem Messenger noch, Claude Anweisungen zu geben.  Dazu einfach eine beliebige Nachricht schicken. Die Antwort sollte in etwa so aussehen:</li>
</ol>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="ln">1</span><span class="cl">Pairing required — run in Claude Code:
</span></span><span class="line"><span class="ln">2</span><span class="cl">
</span></span><span class="line"><span class="ln">3</span><span class="cl">/telegram:access pair ABCD123
</span></span></code></pre></div><p>Also zurück zur Claude CLI und ggenau diesen Befehl ausführen. Claude wird dich dann fragen, ob die Zugriffs-Richtlinien in <code>access.json</code> angepasst werden dürfen und das am Ende in etwa so bestätigen:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="ln">1</span><span class="cl">Approved. Sender <span class="m">1234567</span> has been added to the allowlist and the approval notification has been queued.
</span></span></code></pre></div><p>Dein Chat-Bot wird das ebenfalls bestätigen. Und damit sind beide Endpunkt nun verbunden. Zack fertig.</p>
<p>Du kannst Claude nun über Telegram steuern, so als würdest du die CLI App selber bedienen. Klar, kannst du dazu auch die Claude App auf deinem Handy benutzen. Aber mit Telegram kannst du z.B. auch Nachrichten planen und so Aufgaben zu bestimmten Zeiten auführen lassen, um dein Token-Kontingent optimal zu nutzen, z.B. nachts.</p>
]]></content:encoded><atom:updated>2026-10-06T10:59:33+02:00</atom:updated><category>anleitungen</category><dc:subject>Lesezeit: 3 Minuten</dc:subject><dc:type>blog</dc:type></item><item><title>BitNet RTR - Und ein kurzer, flacher Ausflug in die Welt der 1-Bit-LLMs</title><link>https://nickyreinert.de/2026/2026-03-14-bitnet-rtr/</link><pubDate>Sat, 14 Mar 2026 11:34:56 +0000</pubDate><author>Nicky Reinert</author><dc:creator>Nicky Reinert</dc:creator><guid isPermaLink="true">https://nickyreinert.de/2026/2026-03-14-bitnet-rtr/</guid><description>BitNet ist ein Framework von Microsoft ( OpenSource! ), das die Nutzung von 1-Bit-LLMs relativ unkompliziert ermöglicht, und zwar auch auf günstiger Consumer-Hardware.
Der technische Hintergrund Was sind 1-Bit-LLMs? LLMs bestehen im Prinzip auf Millionen von Zahlen - die sogenannten Parameter und …</description><content:encoded><![CDATA[<p>BitNet ist ein Framework von Microsoft (





  
  

  
  

  
  
  

  
    
      
    
  

  
  <a href="https://github.com/microsoft/BitNet?tab=readme-ov-file&amp;utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous" target="_blank" rel="noopener noreferrer">OpenSource!</a>


), das die Nutzung von 1-Bit-LLMs relativ unkompliziert ermöglicht, und zwar auch auf günstiger Consumer-Hardware.</p>
<h2 id="der-technische-hintergrund">Der technische Hintergrund</h2>
<p>Was sind 1-Bit-LLMs? LLMs bestehen im Prinzip auf Millionen von Zahlen - die sogenannten Parameter und genauer genommen: Kommazahlen - vulgo <em>Floats</em>! Diese haben in der Regel eine Genaugkeit von 16-Bit oder eigentlich sogar 32-Bit. 32 Bit erlauben 7 Stellen nach dem Komma. Stell dir also mal Pi vor (weil heuteg ja World-Pi-Day ist): In 32 Bit könntest du Pi mit 7 Nachkommastellen speichern: 3.1415926. (Wie das ganze mit den Kommazahlen und binären Zahlen funktioniert, mit Exponenten und Mantissen, 





  
  

  
  

  
  
  

  
    
      
    
  

  
  <a href="https://nickyreinert.de/2024/2024-01-01-nerd-enzyklop%C3%A4die-43---0x5f3759df/?utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous" target="_blank" rel="noopener noreferrer">habe ich hier genauer erklärt</a>


).</p>
<p>Bei 1-Bit-LLMs werden die Parameter &ldquo;gerundet&rdquo; (bzw. eher quantisiert). Und damit gibt es nur noch -1, 0 oder 1. Anstatt 0.0280101 oder -0.259384 und so weiter.</p>
<p>Das spart erstmal Speicherplatz. Zwei Zustände lassen sich in einem Bit speichern - also 0 oder 1. Kennen wir alle. Dahinter steckt eine Formel und die lautet:</p>
<p>$\text{Anzahl der Bits} = \log_2(\text{Anzahl der möglichen Werte})$</p>
<p>Da wir nun aber drei Werte abbilden (-1, 0 und 1), sieht die Formel so aus:</p>
<p>$\text{Anzahl der Bits} = \log_2(3) \approx 1.58$</p>
<p>Und daher rührt auch der Name 1,58-Bit-LLM. Eine theoretische Genauigkeit, den natürlich kann man nicht 1,58 Bit speichern. Aber man kann mehrere Parameter in einem Byte speichern. Das nennt man <strong>Packing</strong>.</p>
<p>OK. Wenn du bis hierhin durchgehalten hast, stellst du dir sicher jetzt die Frage, warum man denn überhaupt 3 Werte braucht (Ternärsystem)? Weil 0 für unwichtig und 1 für wichtig in einem LLM nicht die erforderliche &ldquo;Qualität&rdquo; liefern würden. Im Ternärsystem kann -1 als &ldquo;total unwichtig&rdquo;, 1 als &ldquo;total wichtig&rdquo; und 0 als &ldquo;völlig egal&rdquo; interpretiert werden. Das ist ein wichtiger Erkenntnisgewinn, wenn es um Sprache geht.</p>
<p>Deswegen gibt es also 1-Bit-LLMs, die auf diesem Ternärsystem basieren. Und das BitNet Framework erleichtert die Nutzung solcher Modelle.</p>
<h2 id="bitnet-rtr">BitNet RTR</h2>
<p>Worum geht es eigentlich? Um einen leicht zu installierenden Wrapper für das BitNet-Framework, den ich gebastelt habe, um es direkt mal auf meinem kleinen, sparsamen NAS zu testen. Das Repo dazu findest du dort:</p>
<p>





  
  

  
  

  
  
  

  
    
      
    
  

  
  <a href="https://github.com/nickyreinert/bitNetRTR?utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous" target="_blank" rel="noopener noreferrer">https://github.com/nickyreinert/bitNetRTR</a>


</p>
<p>Und die Installation kannst du relativ einfach anstoßen:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="ln">1</span><span class="cl">curl -fsSL https://raw.githubusercontent.com/nickyreinert/bitNetRTR/main/install.sh <span class="p">|</span> bash
</span></span></code></pre></div><p>Was passiert hier?</p>
<p>Zunächst mal ziehst du dir das Repo auf deinen Computer, inklusive der Abhängigkeit (nämlich dem BitNet-Framework von Microsoft). Du erhälst dazu einen Docker-Container, in dem der ganze Spaß installiert wird - dein System bleibt sauber. Von draußen kannst du das ganze System steuern:</p>
<figure>
  <a href="https://nickyreinert.de/2026/2026-03-14-bitnet-rtr/image-0.png" target="_blank" class="image-link " title="Click to view full size">
    <img 
      src="https://nickyreinert.de/2026/2026-03-14-bitnet-rtr/image-0.png" 
      alt="BbtnetRTR.sh - Management Script"
      width="200"
      loading="lazy"
    />
  </a>
  <figcaption>BbtnetRTR.sh - Management Script</figcaption>
</figure>

<p>Und im Browser sieht das dann so aus:</p>
<figure>
  <a href="https://nickyreinert.de/2026/2026-03-14-bitnet-rtr/image.png" target="_blank" class="image-link " title="Click to view full size">
    <img 
      src="https://nickyreinert.de/2026/2026-03-14-bitnet-rtr/image.png" 
      alt="BitNet RTR - Webinterface"
      width="200"
      loading="lazy"
    />
  </a>
  <figcaption>BitNet RTR - Webinterface</figcaption>
</figure>

<p>Der ganze Trödel ist dafür ausgelegt, lokal zu laufen. Das Backend ist zwar per API-Key geschützt, aber ausgefeilte Sicherheitsmaßnahmen wurden nicht implementiert. Für lokale Zwecke ist das völlig ausreichend.</p>
<p>In der linken Sidebar kannst du ein anderes Modell auswählen und ein paar Conversation-spezifische Parameter anpassen. Nichts besonderes:</p>
<figure>
  <a href="https://nickyreinert.de/2026/2026-03-14-bitnet-rtr/image-1.png" target="_blank" class="image-link " title="Click to view full size">
    <img 
      src="https://nickyreinert.de/2026/2026-03-14-bitnet-rtr/image-1.png" 
      alt="BitNet RTR - Webinterface"
      width="200"
      loading="lazy"
    />
  </a>
  <figcaption>BitNet RTR - Webinterface</figcaption>
</figure>

<p>Und dann gibt es noch einen kleinen Statistik-Bereich auf der rechten Seite. Wie du siehst, habe ich nicht zu viel versprochen: Auf der Kiste läuft eine alte 11th Gen Intel CPU - die für einen kleinen Chat aber trotzdem noch zu haben ist:</p>
<figure>
  <a href="https://nickyreinert.de/2026/2026-03-14-bitnet-rtr/image-2.png" target="_blank" class="image-link " title="Click to view full size">
    <img 
      src="https://nickyreinert.de/2026/2026-03-14-bitnet-rtr/image-2.png" 
      alt="BitNet RTR - Webinterface"
      width="200"
      loading="lazy"
    />
  </a>
  <figcaption>BitNet RTR - Webinterface</figcaption>
</figure>

<p>Mehr gibt es hier eigentlich auch nicht zu sehen. Ich habe den Spaß &ldquo;Open VVPP&rdquo; genannt. Keine Ahnung warum. <code>( ͡° ͜ʖ ͡°)</code></p>
<p>Viel Spaß!</p>
]]></content:encoded><atom:updated>2026-10-06T10:59:33+02:00</atom:updated><category>tools</category><dc:subject>Lesezeit: 3 Minuten</dc:subject><dc:type>blog</dc:type></item><item><title>MoneyMoney Dashboard</title><link>https://nickyreinert.de/2025/2025-11-20-moneymoney-analyzer/</link><pubDate>Thu, 20 Nov 2025 11:34:56 +0000</pubDate><author>Nicky Reinert</author><dc:creator>Nicky Reinert</dc:creator><guid isPermaLink="true">https://nickyreinert.de/2025/2025-11-20-moneymoney-analyzer/</guid><description> MoneyMoney ist eine Finanzverwaltungsapp für den Mac. Ich nutze die App jetzt schon seit einigen Jahren. Ein solides Tool mit durchdachter Oberfläche. Allerdings hat mich schon immer gestört, dass die App keine sinnvollen Dashboards mitliefert. Auf der Seite heißt es selbstbewusst:
MoneyMoney …</description><content:encoded><![CDATA[<p><strong>





  
  

  
  

  
  
  

  
    
      
    
  

  
  <a href="https://moneymoney.app/?utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous" target="_blank" rel="noopener noreferrer">MoneyMoney</a>


</strong> ist eine <strong>Finanzverwaltungsapp</strong> für den Mac. Ich nutze die App jetzt schon seit einigen Jahren. Ein solides Tool mit <strong>durchdachter Oberfläche</strong>. Allerdings hat mich schon immer gestört, dass die App keine sinnvollen <strong>Dashboards</strong> mitliefert. Auf der Seite heißt es selbstbewusst:</p>
<figure>
  <a href="https://nickyreinert.de/2025/2025-11-20-moneymoney-analyzer/moneymoney-dashboard.png" target="_blank" class="image-link center" title="Click to view full size">
    <img 
      src="https://nickyreinert.de/2025/2025-11-20-moneymoney-analyzer/moneymoney-dashboard.png" 
      alt="MoneyMoney Dashboards &amp; Visualisierungen"
      width="500"
      loading="lazy"
    />
  </a>
  <figcaption>MoneyMoney Dashboards &amp; Visualisierungen (Quelle: moneymoney.app)</figcaption>
</figure>

<p>Wirklich hilfreich sind die beiden Diagramm-Typen, Säulen- und Tortendiagramm, aber <strong>nicht wirklich</strong>. Und das ist insofern verwunderlich, da das Plotten von ein paar Charts eigentlich nicht sonderlich schwer ist. Jaja, ich hab leicht reden – in meiner <strong>Data-Analysten-Bubble</strong> mache ich sowas ja tagtäglich (was gar nicht stimmt!).</p>
<p>Also habe ich mich an einem Wochenende hingesetzt, mir ein <strong>Konzept überlegt</strong> (manchmal denke ich nach, bevor es an die Umsetzung geht – es lohnt sich) und <strong>Gemini</strong> angeworfen. Und das Ergebnis sieht so aus:</p>
<p>





  
  

  
  

  
  
  

  
    
      
    
  

  
  <a href="http://money.nickyreinert.de/?utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous" target="_blank" rel="noopener noreferrer">http://money.nickyreinert.de/</a>


</p>
<p>Das Tool ist auf [GitHub](gehostet und läuft komplett <strong>im Browser</strong>. Es werden <strong>keine Daten</strong> an einen Server übermittelt. Alles, was du tun musst, ist die <strong>Umsätze deines Kontos</strong> zu exportieren und in das Tool zu laden (die Daten werden im <strong>Browser-Speicher</strong> gehalten und so kannst du jederzeit zurückkehren, ohne die Daten erneut hochladen zu müssen).</p>
<h2 id="einnahmen-und-ausgaben-im-zeitverlauf">Einnahmen und Ausgaben im Zeitverlauf</h2>
<p>Danach siehst du in etwa das (mit einer hoffentlich besseren Bilanz…):</p>
<figure>
  <a href="https://nickyreinert.de/2025/2025-11-20-moneymoney-analyzer/overview.png" target="_blank" class="image-link center" title="Click to view full size">
    <img 
      src="https://nickyreinert.de/2025/2025-11-20-moneymoney-analyzer/overview.png" 
      alt="Überblick"
      width="500"
      loading="lazy"
    />
  </a>
  <figcaption>Überblick</figcaption>
</figure>

<p>Die <strong>grüne Linie</strong> zeigt die Entwicklung aller <strong>eingehenden Transaktionen</strong>, also in der Regel dein <strong>Gehalt</strong>. Die <strong>gelben Säulen</strong> zeigen deine <strong>Ausgaben</strong>. Für diese Darstellung liest das Tool die <strong>Kategorien</strong> von MoneyMoney aus, die per <strong>&quot;-&quot;</strong> miteinander verknüpft sind. Du kannst per Klick auf die Säule bzw. Säulen-Segmente immer weiter in die Kategorie &ldquo;hinein zoomen&rdquo; – über die <strong>Breadcrumb-Navigation</strong> oberhalb des Charts gelangst du jederzeit wieder zurück.</p>
<figure>
  <a href="https://nickyreinert.de/2025/2025-11-20-moneymoney-analyzer/categories.png" target="_blank" class="image-link center" title="Click to view full size">
    <img 
      src="https://nickyreinert.de/2025/2025-11-20-moneymoney-analyzer/categories.png" 
      alt="Kategorien"
      width="500"
      loading="lazy"
    />
  </a>
  <figcaption>Kategorien</figcaption>
</figure>

<p>Die <strong>rote Linie</strong> zeigt deine &ldquo;<strong>wiederkehrenden Ausgaben</strong>&rdquo;, aber als <strong>Monatsmittel</strong>. Also <strong>Miete</strong>, <strong>Versicherung</strong> und so weiter. Diese Daten musst du aber selbst pflegen (Button &ldquo;<strong>Configure Rules</strong>&rdquo;). Es handelt sich dabei um <strong>übergeordnete Kategorien</strong>, die du vorher definieren musst:</p>
<figure>
  <a href="https://nickyreinert.de/2025/2025-11-20-moneymoney-analyzer/rules.png" target="_blank" class="image-link center" title="Click to view full size">
    <img 
      src="https://nickyreinert.de/2025/2025-11-20-moneymoney-analyzer/rules.png" 
      alt="Regeln konfigurieren"
      width="500"
      loading="lazy"
    />
  </a>
  <figcaption>Regeln konfigurieren</figcaption>
</figure>

<p>Die Regeln bestehen aus <strong>regulären Ausdrücken</strong>, mit denen du den <strong>Empfänger</strong> oder den <strong>Verwendungszweck</strong> von Transaktionen matchen kannst.</p>
<p>Du kannst diese übergeordneten Kategorien auch über die <strong>Kategorien von MoneyMoney</strong> legen, indem du &ldquo;<strong>Show Base Costs</strong>&rdquo; aktivierst. Dann wechselt das Chart die Ansicht und du kannst nun, übergeordnet, zwischen <strong>wiederkehrenden Kosten</strong> und den anderen <strong>Ausgaben</strong> unterscheiden – mit der gleichen Möglichkeit der Navigation durch die Kategorien:</p>
<figure>
  <a href="https://nickyreinert.de/2025/2025-11-20-moneymoney-analyzer/recurring-costs.png" target="_blank" class="image-link center" title="Click to view full size">
    <img 
      src="https://nickyreinert.de/2025/2025-11-20-moneymoney-analyzer/recurring-costs.png" 
      alt="Wiederkehrende Kosten"
      width="500"
      loading="lazy"
    />
  </a>
  <figcaption>Wiederkehrende Kosten</figcaption>
</figure>

<p>So ist es möglich, auf einen Blick zu sehen, wie hoch der <strong>Anteil der wiederkehrenden Kosten</strong> an den <strong>Gesamtausgaben</strong> ist. Einmal tatsächlich – über die <strong>Säulen</strong> – und einmal im <strong>Monatsmittel</strong>, über die <strong>rote Linie</strong>.</p>
<h2 id="veränderung-der-ausgaben">Veränderung der Ausgaben</h2>
<p>Das rechte Chart zeigt, wie sich die <strong>Kosten der aktuellen Kategorie</strong> im Vergleich zum <strong>Vormonat</strong> verändern. So lassen sich relativ schnell <strong>Ausreißer</strong> erkennen, wie z. B. <strong>Urlaube</strong> im Sommer, die Ausgaben in der Kategorie &ldquo;<strong>Reisen</strong>&rdquo; in einem Monat in die Höhe getrieben haben.</p>
<figure>
  <a href="https://nickyreinert.de/2025/2025-11-20-moneymoney-analyzer/growth-rate.png" target="_blank" class="image-link center" title="Click to view full size">
    <img 
      src="https://nickyreinert.de/2025/2025-11-20-moneymoney-analyzer/growth-rate.png" 
      alt="Veränderung der Ausgaben"
      width="500"
      loading="lazy"
    />
  </a>
  <figcaption>Veränderung der Ausgaben</figcaption>
</figure>

<p>Du kannst hier aber auch den <strong>Jahr-zu-Jahr-Vergleich</strong> bemühen, indem du oberhalb des Charts auf &ldquo;<strong>YoY</strong>&rdquo; wechselst. Die <strong>Line-Chart-Darstellung</strong> kann manchmal etwas unübersichtlich werden; über den Wechsler oben kannst du zwischen <strong>Line Chart</strong> und <strong>Bar Chart</strong> für diese Darstellung wechseln.</p>
<h2 id="übersicht-aller-transaktionen">Übersicht aller Transaktionen</h2>
<p>Am unteren Rand schließlich gibt es die <strong>Übersicht aller Transaktionen</strong>. Diese aktualisiert sich entsprechend deiner Auswahl des <strong>Zeitraums</strong> aber auch der <strong>Kategorie</strong>, in der du dich befindest!</p>
<figure>
  <a href="https://nickyreinert.de/2025/2025-11-20-moneymoney-analyzer/transactions.png" target="_blank" class="image-link center" title="Click to view full size">
    <img 
      src="https://nickyreinert.de/2025/2025-11-20-moneymoney-analyzer/transactions.png" 
      alt="Transaktionen"
      width="500"
      loading="lazy"
    />
  </a>
  <figcaption>Transaktionen</figcaption>
</figure>

<p>Per Klick auf die <strong>Spalten-Köpfe</strong> kannst du die Tabelle sortieren. Jede Spalte lässt sich außerdem <strong>filtern</strong>.</p>
<p>Wenn du dich also z. B. bis in die Kategorie &ldquo;<strong>Freizeit</strong>&rdquo; hineingeklickt hast, siehst du auf einen Blick alle <strong>Transaktionen</strong> und kannst relativ schnell identifizieren, wo dein ganzes <strong>Geld</strong> geblieben ist.</p>
<p>Viel Spaß beim Ausprobieren!</p>
<p>(Am oberen Rand befindet sich ein Button &ldquo;<strong>Load Sample Data</strong>&rdquo;, mit dem du das Tool auch ohne eigene Daten ausprobieren kannst)</p>
]]></content:encoded><atom:updated>2026-10-06T10:59:33+02:00</atom:updated><category>tools</category><dc:subject>Lesezeit: 6 Minuten</dc:subject><dc:type>blog</dc:type></item><item><title>Die Unvollendeten - Beindruckend</title><link>https://nickyreinert.de/2025/2025-10-17-die-unvollendeten---beindruckend/</link><pubDate>Fri, 17 Oct 2025 11:34:56 +0000</pubDate><author>Nicky Reinert</author><dc:creator>Nicky Reinert</dc:creator><guid isPermaLink="true">https://nickyreinert.de/2025/2025-10-17-die-unvollendeten---beindruckend/</guid><description>Neue Jahreszeit - Neue Kategorie. Heute: Die Unvollendeten.
Ich stampfe immer wieder irgendwelche Projekte aus dem fruchtbaren Boden meines wirren Geistes. Dann verliere ich mich in einer energiereichen Phase des initialen Enthusiasmus, nur um nach einer kurzen aber intensiven Zeit der totalen …</description><content:encoded><![CDATA[<p>Neue Jahreszeit - Neue Kategorie. Heute: <strong>Die Unvollendeten</strong>.</p>
<p>Ich stampfe immer wieder irgendwelche Projekte aus dem fruchtbaren Boden meines wirren Geistes. Dann verliere ich mich in einer energiereichen Phase des initialen Enthusiasmus, nur um nach einer kurzen aber intensiven Zeit der totalen Aufopferung das Ende der umgekehrten Glockenkurve zu erreichen: Das Projekt verschwindet hinter einem Schleier des Vergessens. Und fehlender Motivation.</p>
<p>Den Anfang macht: Das Instagram-Projekt <strong>&ldquo;Beindruckend&rdquo;</strong> - oder auch: <strong>Die Abenteuer von Einbein und Keinbein</strong>.</p>
<p>Die Idee? Absurde Web-Comics über ein kurzes und ein langes Bein. Dazu ein paar Dialoge mit… naja… Wortspielen und flachen Witzen.</p>
<p align="center">
  <a href="https://nickyreinert.de/2025/2025-10-17-die-unvollendeten---beindruckend/einbein-keinbein.png"><img src="https://nickyreinert.de/2025/2025-10-17-die-unvollendeten---beindruckend/einbein-keinbein.png" alt="Einbein Keinbein" width="400"/></a>
</p>
<br />
<p>Warum ist das Projekt eingeschlafen?</p>
<p>Ich habe den Aufwand massiv unterschätzt. Die Texte waren schnell ausgedacht, aber die Bilder habe ich in PowerPoint erzeugt.Und ich hatte den Anspruch, in jedem Bild kleine Details zu verstecken. Eine Kettensäge die im Hintergrund über den Hügel fegt. Wald. Eine fliegende Ente und so weiter. Dazu mussten auch die Figuren jedes mal neu gestaltet werden, auch wenn es wiederkehrende Elemente gab. Und dann kam das nächste Projekt, das meine ganze Aufmerksamkeit forderte. Und <strong>Beindruckend</strong> verschwand in der Versenkung.</p>
<p><a href="https://www.instagram.com/beindruckend?utm_source=all_your_base_are_belong_to_us&igsh=ZDNlZDc0MzIxNw==">@beindruckend</a></p>
]]></content:encoded><atom:updated>2026-10-06T10:59:33+02:00</atom:updated><category>tools</category><dc:subject>Lesezeit: 2 Minuten</dc:subject><dc:type>blog</dc:type></item><item><title>PoneyHot - frisst Clickbait und Fake News</title><link>https://nickyreinert.de/2025/2025-02-16-poney-hot/</link><pubDate>Sun, 16 Feb 2025 12:34:56 +0200</pubDate><author>Nicky Reinert</author><dc:creator>Nicky Reinert</dc:creator><guid isPermaLink="true">https://nickyreinert.de/2025/2025-02-16-poney-hot/</guid><description> Das Internet ist voll von Fake News und Clickbait, was es schwierig macht, vertrauenswürdige Informationen zu finden. PoneyHot hilft Ihnen, den Lärm zu durchbrechen, indem es Inhalte zusammenfasst und Behauptungen überprüft—schnell und einfach.
Was ist PoneyHot? PoneyHot ist ein Tool, das Ihnen …</description><content:encoded><![CDATA[<a href="" target="_blank" class="image-link" title="Click to view full size">
  <img 
    src="" 
    alt=""
    
    loading="lazy"
  />
</a>

<p>Das Internet ist voll von <strong>Fake News</strong> und <strong>Clickbait</strong>, was es schwierig macht, vertrauenswürdige Informationen zu finden. <strong>PoneyHot</strong> hilft Ihnen, den Lärm zu durchbrechen, indem es <strong>Inhalte zusammenfasst</strong> und <strong>Behauptungen überprüft</strong>—schnell und einfach.</p>
<h2 id="was-ist-poneyhot">Was ist PoneyHot?</h2>
<p>PoneyHot ist ein Tool, das Ihnen hilft, <strong>direkt zu den Fakten zu kommen</strong>. Egal, ob Sie Online-Artikel durchsuchen oder virale Behauptungen überprüfen, PoneyHot macht es mühelos, Fakten von Fiktion zu trennen.</p>
<p>Es funktioniert auf zwei einfache Arten:</p>
<ul>
<li><strong>Zusammenfassung</strong>: Fasst Artikel schnell zusammen, sodass Sie keine Zeit mit unnötigem Ballast verschwenden.</li>
<li><strong>Faktenprüfung</strong>: Überprüft Behauptungen sofort, sodass Sie Fehlinformationen erkennen können.</li>
</ul>
<h2 id="wie-benutzt-man-poneyhot">Wie benutzt man PoneyHot?</h2>
<h3 id="firefox-erweiterung"><strong>Firefox-Erweiterung</strong></h3>
<ul>
<li><strong>Artikel zusammenfassen</strong>: Klicken Sie mit der rechten Maustaste auf einen Link und wählen Sie <strong>&ldquo;Zusammenfassen&rdquo;</strong>—PoneyHot erstellt eine kurze, klare Zusammenfassung.</li>
</ul>
<a href="" target="_blank" class="image-link" title="Click to view full size">
  <img 
    src="" 
    alt=""
    
    loading="lazy"
  />
</a>

<ul>
<li><strong>Behauptungen überprüfen</strong>: Markieren Sie eine Aussage, klicken Sie mit der rechten Maustaste und wählen Sie <strong>&ldquo;Fakten prüfen&rdquo;</strong>, um sie sofort zu überprüfen.</li>
</ul>
<a href="" target="_blank" class="image-link" title="Click to view full size">
  <img 
    src="" 
    alt=""
    
    loading="lazy"
  />
</a>

<h3 id="telegram-bot"><strong>Telegram-Bot</strong></h3>
<ul>
<li>Senden Sie dem Bot eine <strong>URL</strong>, und er gibt eine Zusammenfassung zurück.</li>
<li>Präfixen Sie eine Nachricht mit <code>???</code> für eine <strong>Faktenprüfung</strong> oder <code>!!!</code> für eine <strong>Zusammenfassung</strong>.</li>
<li>Teilen Sie Links direkt von Ihrem Mobilgerät für eine sofortige Analyse.</li>
</ul>
<h2 id="warum-poneyhot-verwenden">Warum PoneyHot verwenden?</h2>
<ul>
<li><strong>Zeit sparen</strong>: Überspringen Sie lange Artikel und kommen Sie direkt zu den wichtigsten Punkten.</li>
<li><strong>Clickbait vermeiden</strong>: Erfahren Sie, worum es in einem Artikel wirklich geht, bevor Sie klicken.</li>
<li><strong>Informationen überprüfen</strong>: Fallen Sie nicht auf Fake News herein—überprüfen Sie sie mühelos.</li>
</ul>
<h2 id="übernehmen-sie-die-kontrolle-über-ihr-online-erlebnis">Übernehmen Sie die Kontrolle über Ihr Online-Erlebnis</h2>
<p>PoneyHot hilft Ihnen, <strong>informiert zu bleiben, ohne den Lärm</strong>. Egal, ob Sie Nachrichten lesen, Themen recherchieren oder Behauptungen überprüfen, PoneyHot sorgt dafür, dass Sie <strong>klare, zuverlässige und überprüfte Informationen</strong> schnell erhalten.</p>
<p>Probieren Sie PoneyHot noch heute aus und surfen Sie mit Vertrauen!</p>
<hr>
<p>📌 <strong>Folgen Sie uns für Updates und tragen Sie auf GitHub bei:</strong> 





  
  

  
  

  
  
  

  
    
      
    
  

  
  <a href="https://github.com/nickyreinert/poneyHot?utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous" target="_blank" rel="noopener noreferrer">github.com/nickyreinert/poneyHot</a>


</p>
]]></content:encoded><atom:updated>2026-10-06T10:59:33+02:00</atom:updated><category>tools</category><dc:subject>Lesezeit: 3 Minuten</dc:subject><dc:type>project</dc:type></item><item><title>hidey</title><link>https://nickyreinert.de/2024/2024-02-01-hidey/</link><pubDate>Thu, 01 Feb 2024 12:34:56 +0100</pubDate><author>Nicky Reinert</author><dc:creator>Nicky Reinert</dc:creator><guid isPermaLink="true">https://nickyreinert.de/2024/2024-02-01-hidey/</guid><description>Hidey ist nichts anderes als eine extrem nützliche Fingerübung in JavaScript. Hidey versteckt eine Botschaft in einem Text, in dem die Botschaft zunächst in binäre Werte umgewandelt wird. Anstatt Nullen und Einsen werden aber nicht sichtbare Zeichen verwendet.
Viel Spaß.
hidey.nickyreinert.de …</description><content:encoded><![CDATA[<p>Hidey ist nichts anderes als eine extrem nützliche Fingerübung in JavaScript. Hidey versteckt eine Botschaft in einem Text, in dem die Botschaft zunächst in binäre Werte umgewandelt wird. Anstatt Nullen und Einsen werden aber nicht sichtbare Zeichen verwendet.</p>
<p>Viel Spaß.</p>
<p>





  
  

  
  

  
  
  

  
    
      
    
  

  
  <a href="https://hidey.nickyreinert.de/?utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous" target="_blank" rel="noopener noreferrer">hidey.nickyreinert.de</a>


</p>
<p>





  
  

  
  

  
  
  

  
    
      
    
  

  
  <a href="https://github.com/nickyreinert/hidey/?utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous" target="_blank" rel="noopener noreferrer">github.com</a>


</p>
]]></content:encoded><atom:updated>2026-10-06T10:59:33+02:00</atom:updated><category>tools</category><media:content url="https://nickyreinert.de/images/posts/placeholder.jpg" type="image/jpeg"><media:title>Projekte</media:title></media:content><dc:subject>Lesezeit: 5 Minuten</dc:subject><dc:type>project_showcase</dc:type></item><item><title>Primes - Animations-Engine</title><link>https://nickyreinert.de/2023/2023-02-24-primes/</link><pubDate>Fri, 24 Feb 2023 08:04:44 +0100</pubDate><author>Nicky Reinert</author><dc:creator>Nicky Reinert</dc:creator><guid isPermaLink="true">https://nickyreinert.de/2023/2023-02-24-primes/</guid><description>“Primes” ist eine in JavaScript geschriebene Web-App, die Primzahlen auf einer Spirale visualisiert. Die Darstellung lässt sich durch zahlreiche Paramater anpasen, viele Parameter lassen sich animieren.
https://primes.nickyreinert.de</description><content:encoded><![CDATA[<p>&ldquo;Primes&rdquo; ist eine in JavaScript geschriebene Web-App, die Primzahlen auf einer Spirale visualisiert. Die Darstellung lässt sich durch zahlreiche Paramater anpasen, viele Parameter lassen sich animieren.</p>
<p>





  
  

  
  

  
  
  

  
    
      
    
  

  
  <a href="https://primes.nickyreinert.de?utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous" target="_blank" rel="noopener noreferrer">https://primes.nickyreinert.de</a>


</p>
]]></content:encoded><atom:updated>2026-10-06T10:59:33+02:00</atom:updated><category>tools</category><media:content url="https://nickyreinert.de/images/posts/placeholder.jpg" type="image/jpeg"><media:title>Projekte</media:title></media:content><dc:subject>Lesezeit: 5 Minuten</dc:subject><dc:type>project_showcase</dc:type></item><item><title>Freecoffee - Der Stullen-Generator</title><link>https://nickyreinert.de/2023/2023-02-24-freecoffee/</link><pubDate>Fri, 24 Feb 2023 07:44:21 +0100</pubDate><author>Nicky Reinert</author><dc:creator>Nicky Reinert</dc:creator><guid isPermaLink="true">https://nickyreinert.de/2023/2023-02-24-freecoffee/</guid><description> https://freecoffee.de Eine in JavaScript geschriebene Oberfläche, um belegte Brote (vulgo Stullen) randomisiert zu belegen.</description><content:encoded><![CDATA[<p>





  
  

  
  

  
  
  

  
    
      
    
  

  
  <a href="https://freecoffee.de?utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous" target="_blank" rel="noopener noreferrer">https://freecoffee.de</a>


</p>
<p>Eine in JavaScript geschriebene Oberfläche, um belegte Brote (vulgo Stullen) randomisiert zu belegen.</p>
]]></content:encoded><atom:updated>2026-10-06T10:59:33+02:00</atom:updated><category>tools</category><media:content url="https://nickyreinert.de/images/posts/placeholder.jpg" type="image/jpeg"><media:title>Projekte</media:title></media:content><dc:subject>Lesezeit: 5 Minuten</dc:subject><dc:type>project_showcase</dc:type></item><item><title>Random Knowledge</title><link>https://nickyreinert.de/2022/2022-10-21-random-knowledge/</link><pubDate>Fri, 21 Oct 2022 07:51:37 +0100</pubDate><author>Nicky Reinert</author><dc:creator>Nicky Reinert</dc:creator><guid isPermaLink="true">https://nickyreinert.de/2022/2022-10-21-random-knowledge/</guid><description>“Random Knowledge” ist ein automatisierter Podcast, bei dem eine computer-generierte Stimme zufällige Artikel der Wikipedia vorliest.
Dazu wird in Python ein zufälliger Artikel der englischen Wikipedia abgerufen und vorbereitet. Der gesamte Artikel wird in Abschnitte getrennt, Bereiche, die nicht …</description><content:encoded><![CDATA[<p>&ldquo;Random Knowledge&rdquo; ist ein automatisierter Podcast, bei dem eine computer-generierte Stimme zufällige Artikel der Wikipedia vorliest.</p>
<p>Dazu wird in Python ein zufälliger Artikel der englischen Wikipedia abgerufen und vorbereitet. Der gesamte Artikel wird in Abschnitte getrennt, Bereiche, die nicht vorlesbar sind, wie z.B. Tabellen, werden entfernt. Über die Text-to-Speech-API von Google wird der Text in Sprache umgewandelt und als Audio-Datei abgelegt. Die Dateien werden über eine undokumentierte Schnittstelle zu anchor.fm hochgeladen und von dort an die gängigen Portale verteilt (Spotify, Deezer, Google, Amazon, Apple, …)</p>
<p>





  
  

  
  

  
  
  

  
    
      
    
  

  
  <a href="https://spotifyanchor-web.app.link/e/zjG3R1ANFxb?utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous" target="_blank" rel="noopener noreferrer">https://spotifyanchor-web.app.link/e/zjG3R1ANFxb</a>


</p>
]]></content:encoded><atom:updated>2026-10-06T10:59:33+02:00</atom:updated><category>tools</category><media:content url="https://nickyreinert.de/images/posts/placeholder.jpg" type="image/jpeg"><media:title>Projekte</media:title></media:content><dc:subject>Lesezeit: 5 Minuten</dc:subject><dc:type>project_showcase</dc:type></item><item><title>Maze!</title><link>https://nickyreinert.de/2021/2021-04-21-maze-game/</link><pubDate>Wed, 21 Apr 2021 08:01:31 +0100</pubDate><author>Nicky Reinert</author><dc:creator>Nicky Reinert</dc:creator><guid isPermaLink="true">https://nickyreinert.de/2021/2021-04-21-maze-game/</guid><description>“Maze” ist ein in JavaScript geschriebenes Browser-Spiel, bei dem es darum geht, in möglichst kurzer Zeit ein Labyrinth zu lösen. Das Labyrinth lässt sich mit verschiedenen Parameter steuern und sogar exportieren.
https://nickyreinert.github.io/maze/</description><content:encoded><![CDATA[<p>&ldquo;Maze&rdquo; ist ein in JavaScript geschriebenes Browser-Spiel, bei dem es darum geht, in möglichst kurzer Zeit ein Labyrinth zu lösen. Das Labyrinth lässt sich mit verschiedenen Parameter steuern und sogar exportieren.</p>
<p>





  
  

  
  

  
  
  

  
    
      
    
  

  
  <a href="https://nickyreinert.github.io/maze/?utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous" target="_blank" rel="noopener noreferrer">https://nickyreinert.github.io/maze/</a>


</p>
]]></content:encoded><atom:updated>2026-10-06T10:59:33+02:00</atom:updated><category>tools</category><media:content url="https://nickyreinert.de/images/posts/placeholder.jpg" type="image/jpeg"><media:title>Projekte</media:title></media:content><dc:subject>Lesezeit: 5 Minuten</dc:subject><dc:type>project_showcase</dc:type></item><item><title>WordPress Word Cloud 2.0</title><link>https://nickyreinert.de/2020/2020-06-09-wordpress-word-cloud-2-0/</link><pubDate>Tue, 09 Jun 2020 00:00:00 +0000</pubDate><author>Nicky Reinert</author><dc:creator>Nicky Reinert</dc:creator><guid isPermaLink="true">https://nickyreinert.de/2020/2020-06-09-wordpress-word-cloud-2-0/</guid><description>Mein Word Cloud Plugin für WordPress liegt in einer neuen Version vor! Die Word Cloud unterstützt nun OCR, Tags, interne und externe Quellen und vieles mehr. Da ich also sehr viele grundlegende Änderungen vorgenommen habe, gibt es an dieser Stelle eine komplett neue Dokumentation. Viel Spass.
Was …</description><content:encoded><![CDATA[<p>Mein Word Cloud Plugin für WordPress liegt in einer neuen Version vor! Die Word Cloud unterstützt nun <strong>OCR</strong>, <strong>Tags</strong>, <strong>interne</strong> und <strong>externe Quellen</strong> und vieles mehr. Da ich also sehr viele grundlegende Änderungen vorgenommen habe, gibt es an dieser Stelle eine komplett neue Dokumentation. Viel Spass.</p>
<h2 id="was-ist-eine-word-cloud">Was ist eine Word Cloud?</h2>
<p>Eine <strong>Word Cloud</strong>, auch <strong>Schlagwortwolke</strong>, <strong>Wortwolke</strong> usw., dient der besseren Visualisierung von Texten. Um eine Word Cloud zu erstellen, werden die Vorkommen von Wörtern eines Textes gezählt. Die Wörter mit der größten <strong>Häufigkeit</strong> werden groß dargestellt, Wörter mit geringerer Häufigkeit weniger groß. Und das ganze wird dann in einer <strong>Wolkenform</strong> dargestellt, mit den größten Wörtern in der Mitte.</p>
<p>So ist es möglich auf einen Blick zu erkennen, welche Wörter in einem Text am häufigsten vorkommen. Das ist nicht nur bei der Analyse von Texten sondern auch von Webseiten nützlich. So kannst du z.B. bei WordPress eine Word Cloud aus Tags erstellen (<strong>Tag Cloud</strong>), anhand der man sehen kann, welche Tags auf einer Seite am meisten verwendet wurden.</p>
<p>Die folgende Word Cloud zeigt auf einen Artikel, 





  
  

  
  

  
  
  

  
    
      
    
  

  
  <a href="https://www.nickyreinert.de/wie-erstelle-ich-ein-labyrinth-mit-javascript/?utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous" target="_blank" rel="noopener noreferrer">in dem ich einen Algorithmus beschreibe, um in JavaScript ein Labyrinth zu erstellen</a>


:</p>
<p>[wp-word-cloud source-type=&ldquo;id&rdquo; id=&ldquo;demo1&rdquo; size-factor=50 min-alpha=0.5 count-words=1]3334[/wp-word-cloud]</p>
<h2 id="was-kann-dieses-plugin">Was kann dieses Plugin?</h2>
<p><strong>WP Word Cloud</strong> stellt einen Shortcode zur Verfügung, mit dem du beliebig viele <strong>Word Clouds</strong> auf deinen Seiten einfügen kannst. Du kannst verschiedene Quellen nutzen, um dort die Wörter zu zählen und in einer <strong>Word Cloud</strong> darstellen zu lassen.</p>
<ul>
<li>inline - du gibst den Text direkt im Shortcode im Beitrag an</li>
<li>url - ein Verweis auf eine Internetadresse</li>
<li>id - der Verweis auf eine Seite / einen Beitrag</li>
<li>sql - eine SQL-Abfrage um Text aus der Datenbank zu lesen</li>
<li>custom-field - Text aus einem custom field des Beitrages / der Seite</li>
<li>Text, den der Besucher der Webseite selber eingeben kann</li>
<li>Text von einem Bild, das der Besucher der Website hochlädt</li>
</ul>
<p>Das Plugin greift auf zwei sehr großartige Bibliotheken zurück: WodCloud2.js von TimDream (





  
  

  
  

  
  
  

  
    
      
    
  

  
  <a href="https://github.com/timdream/wordcloud2.js/?utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous" target="_blank" rel="noopener noreferrer">github.com</a>


). Sowie die Offline-Implementierung von Tesseract in JavaScript (<strong>





  
  

  
  

  
  
  

  
    
      
    
  

  
  <a href="https://github.com/jeromewu/tesseract.js-offline?utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous" target="_blank" rel="noopener noreferrer">github.com</a>


</strong>).</p>
<h2 id="installation">Installation</h2>
<h3 id="über-die-kommandozeile">Über die Kommandozeile</h3>
<p>Wenn du Zugriff auf deinen Server über SSH hast, kannst du das Plugin folgendermaßen installieren:</p>
<p>Wechsle in den Plugin-Ordner deiner WordPress-Installation und lege dort einen neuen Ordner an: WP-Word-Cloud, wechsle danach in diesen Ordner:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="ln">1</span><span class="cl">mkdir /htdocs/wp-content/plugins/WP-Word-Cloud
</span></span><span class="line"><span class="ln">2</span><span class="cl">cd /htdocs/wp-content/plugins/WP-Word-Cloud
</span></span></code></pre></div><p>Danach kannst du das Plugin-Repository mit git klonen:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="ln">1</span><span class="cl">git clone https://github.com/nickyreinert/wordCloud-for-Wordpress.git .
</span></span></code></pre></div><p>Wenn du git nicht benutzen möchtest oder kannst, kannst du das Plugin auch mit wget herunterladen und dann entpacken. Dann musst du den Plugin-Ordner allerdings nicht selber erstellen:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="ln">1</span><span class="cl">cd /htdocs/wp-content/plugins/
</span></span><span class="line"><span class="ln">2</span><span class="cl">wget https://github.com/nickyreinert/wordCloud-for-Wordpress/archive/wordCloud-for-wordPress-2.zip --no-check-certificate
</span></span><span class="line"><span class="ln">3</span><span class="cl">unzip wordCloud-for-wordPress-2.zip -d WP-Word-Cloud
</span></span></code></pre></div><h3 id="mit-einem-ftp-programm">Mit einem FTP-Programm</h3>
<p>Wenn du keinen Zugriff auf die Kommandozeile hast, kannst du das Plugin von dieser Adresse herunterladen:</p>
<p>





  
  

  
  

  
  
  

  
    
      
    
  

  
  <a href="https://github.com/nickyreinert/wordCloud-for-Wordpress/archive/wordCloud-for-wordPress-2.zip?utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous" target="_blank" rel="noopener noreferrer">https://github.com/nickyreinert/wordCloud-for-Wordpress/archive/wordCloud-for-wordPress-2.zip</a>


</p>
<p>Danach entpackst du das Archiv und lädst den kompletten Ordner in das Plugin-Verzeichnis deiner WordPress-Installation. Du kannst den Ordner mit dem FTP-Programm dann umbenennen:</p>
<img src="https://nickyreinert.de/2020/2020-06-09-wordpress-word-cloud-2-0/images/grafik.png" alt=""><p>Der Order für das Word Cloud Plugin</p>
<h2 id="abschluss-der-installation">Abschluss der Installation</h2>
<p>Abschließend muss das Plugin noch im Backend von WordPress aktiviert werden. Dazu suchst du im Plugin-Bereich nach dem Eintrag &ldquo;WP Word Cloud&rdquo; und klickst auf &ldquo;aktivieren&rdquo;. Fertig.</p>
<img src="https://nickyreinert.de/2020/2020-06-09-wordpress-word-cloud-2-0/images/grafik-1-700x70.png" alt=""><p>Aktiviere das Plugin in der Plugin-Übersicht von WordPress</p>
<h2 id="erste-verwendung">Erste Verwendung</h2>
<p>Das Plugin aktiviert für deine WordPress-Installation einen neuen Shortcode: <strong>[ wp-word-cloud ]</strong>. Diesen kannst du nun auf jeder Seite und in jedem Beitrag beliebig oft einfügen. Wenndu den <strong>Gutenberg-Editor</strong> verwendest, benötigst du dafür den Block &ldquo;<strong>Shortcode</strong>&rdquo;. Im konventionellen Editor kannst du den Shortcode einfach in deinen Text einfügen.<br>
Eine einfache Implementierung sieht z.B. so aus:</p>
<p><code>[ wp-word-cloud source-type=&quot;url&quot; id=&quot;meine-word-cloud&quot; ]https://www.spiegel.de[ /wp-word-cloud ]</code></p>
<p>Es gibt <strong>drei Parameter</strong>, die du <strong>immer</strong> angeben musst:</p>
<ul>
<li><strong>id</strong>, eine eindeutige Id, mit der die <strong>Word Cloud</strong> auf deiner Seite angesprochen wird, z.B. <strong>meine-word-cloud</strong> oder einfach nur <strong>test</strong></li>
<li><strong>source-type</strong>, welcher Art die Quelle für die Word Cloud ist, also z.B. von einer <strong>url</strong> oder den <strong>tags</strong></li>
<li>sowie Inline-Text, als Verweis auf die Quelle, von wo der Inhalt für die Word Cloud kommt, also z.B. die URL <strong>





  
  

  
  

  
  
  

  
    
      
    
  

  
  <a href="https://www.spiegel.de?utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous" target="_blank" rel="noopener noreferrer">https://www.spiegel.de</a>


</strong> oder die Id eines Beitrages (123)</li>
</ul>
<h2 id="zusätzliche-einstellungen">Zusätzliche Einstellungen</h2>
<p>Natürlich gibt es noch <strong>eine Menge weiterer Parameter</strong>, mit denen du das Erscheinungsbild der Word Cloud steuern kannst. Das Plugin setzt bei der ersten Installation für all diese Parameter <strong>Standard-Einstellungen</strong> fest. Diese sind grundsätzlich <strong>global gültig</strong> und können auf der Einstellungseite angepasst werden:</p>
<img src="https://nickyreinert.de/2020/2020-06-09-wordpress-word-cloud-2-0/images/grafik-2.png" alt=""><p>In den Einstellungen findest du eine eigene Seite für das WP Word Cloud Plugin - wunderbar!</p>
<p>Jeden dieser globalen Parameter kannst du auch in deinem Shortcode verwenden. So wir die globale Einstellung überschrieben. So ist die <strong>Hintergrundfarbe</strong> z.B. standardmäßig <strong>transparent</strong> eingestellt. Möchtest du sie für die aktuelle Word Cloud auf <strong>grün und halbtransparent</strong> ändern, übergibst du einfach den Parameter <strong>background-color</strong> folgendermaßen:</p>
<p><code>[ wp-word-cloud source-type=&quot;url&quot; id=&quot;meine-word-cloud&quot; background-color=&quot;rgba(0,255,255,0.5)&quot; ]https://www.spiegel.de[ /wp-word-cloud ]</code></p>
<p>Eine genaue Beschreibung aller Parameter folgt jetzt:</p>
<h2 id="parameter">Parameter</h2>
<h3 id="id">id</h3>
<p>Dieser Parameter ist für jeden Shortcode, den du einfügst, <strong>verpflichtend</strong>! Die Id adressiert jede Word Cloud auf einer Seite oder in einem Beitrag. Damit ist es möglich, mehrere Word Clouds gleichzeitig einzubinden. Mit der Id kannst du außerdem das Aussehen der Word Cloud mit CSS steuern. Beispiel:</p>
<p><code>[ wp-word-cloud source-type=&quot;inline&quot; id=&quot;wordcloud1&quot; ]Lorem Ipsum[ /wp-word-cloud ]</code></p>
<p><code>[ wp-word-cloud source-type=&quot;inline&quot; id=&quot;wordcloud2&quot; ]Lorem Ipsum[ /wp-word-cloud ]</code></p>
<h3 id="source-type"><strong>source-type</strong></h3>
<p>Damit legst du fest, um was für eine Quelle es sich handelt. Dieser Parameter ist <strong>verpflichtend</strong>. Die folgenden Quellen werden unterstützt:</p>
<h4 id="source-typeinline">source-type=inline</h4>
<p>Der Text wird innerhalb des Shortcodes übermittelt, z.B:</p>
<p><code>[ wp-word-cloud source-type=inline id=&quot;demo&quot; ]Lorem Ipsum[ /wp-word-cloud ]</code></p>
<h4 id="source-typeurl">source-type=<strong>url</strong></h4>
<p>Im Shortcode wird eine URL angegeben, von der Text abgerufen wird, z.B:</p>
<p><code>[ wp-word-cloud source-type=url id=&quot;demo&quot; ]https://www.spiegel.de[ /wp-word-cloud ]</code></p>
<h4 id="source-typeid">**source-type=**id</h4>
<p>Im Shortcode wird eine Id übergeben, die auf eine Seite oder einen Beitrag deiner Webseite verweist, z.B:</p>
<p><code>[ wp-word-cloud source-type=id=&quot;demo&quot; ]123[ /wp-word-cloud ]</code></p>
<h4 id="source-typesql">source-type=sql</h4>
<p>Im Shortcode wird eine SQL-Abfrage übergeben, die eine bereits gezählte Wortliste zurück gibt, z.B:</p>
<p><code>[ wp-word-cloud source-type=sql id=&quot;demo&quot;]SELECT word,count FROM table;[ /wp-word-cloud]</code></p>
<h4 id="source-typetags">source-type=tags</h4>
<p>Die Word Cloud zeigt alle Tags deiner Seite an, hier musst du im Shortcode nichts weiter übergeben:</p>
<p><code>[ wp-word-cloud source-type=tags id=&quot;demo&quot;]SELECT word,count FROM table;[ /wp-word-cloud]</code></p>
<h4 id="source-typecustom-field">source-type=custom-field</h4>
<p>Im Shortcode wird auf ein custom field, also benutzerdefiniertes bzw. eigenes Feld verwiesen, z.B:</p>
<p><code>[ wp-word-cloud source-type=custom-field id=&quot;demo&quot;]my-custom-field[ /wp-word-cloud]</code></p>
<p>Die Darstellung der <strong>eigenen Felder</strong> musst du im Gutenberg-Edito ggf. erst aktivieren. Klicke dazu das Punkt-Menü und dann ganz unten auf &ldquo;Ansicht anpassen&rdquo;. Es öffnet sich nun eine Liste, in der du die &ldquo;eigenen Felder&rdquo; aktivieren kannst:</p>
<ul>
<li>
<img src="https://nickyreinert.de/2020/2020-06-09-wordpress-word-cloud-2-0/images/grafik-10.png" alt=""></li>
<li>
<img src="https://nickyreinert.de/2020/2020-06-09-wordpress-word-cloud-2-0/images/grafik-11-700x1059.png" alt=""></li>
</ul>
<p>Anzeigen der benutzerdefinierten Felder im Gutenberg-Editor</p>
<h3 id="count-words"><strong>count-words</strong></h3>
<p>Wenn die im Shortcode angegebene Quelle einen kompletten Text enthält, müssen die Wörter darin erst gezählt werden. Dazu muss <strong>count-words</strong> auf <strong>1</strong> gesetzt werden. Ist <strong>count-words=0</strong> gesetzt, erwartet das Plugin eine List mit gezählten Wörtern.</p>
<h3 id="enable-frontend-edit"><strong>enable-frontend-edit</strong></h3>
<p>Ist dieser Parameter auf 1 gesetzt, wird auf der Seite ein Textfeld angezeigt. Das Textfeld enthält den Text, der mit dem Shortcode definiert wurde. Der Besucher kann den Text dann beliebig verändern oder eigenen Text hinzufügen, um so die <strong>Word Cloud</strong> selber zu steuern. Die Berechnung der <strong>Word Cloud</strong> findet im Browser statt. Im folgenden Beispiel kommt der Text von einem benutzerdefiniertem Feld im Backend. Er wird an das Frontend ausgeliefert und dort in der Word Cloud dargestellt. Gleichzeitig kann man den Text aber auch anpassen und die Wolke neu zeichnen lassen:</p>
<p><code>[ wp-word-cloud source-type=&quot;custom-field&quot; enable-frontend-edit</code>=1 <code>id=&quot;demo&quot;]my-custom-field[ /wp-word-cloud]</code></p>
<img src="https://nickyreinert.de/2020/2020-06-09-wordpress-word-cloud-2-0/images/grafik-8-700x755.png" alt=""><p>Ein Textfeld für die Besucher deiner Webseite</p>
<h3 id="ocr---texterkennung">OCR - Texterkennung</h3>
<h4 id="enable-ocr"><strong>enable-ocr</strong></h4>
<p>Ist dieser Parameter auf 1 gesetzt, kann der Benutzer auf der Webseite ein Bild hochladen oder mit der Kamera aufnehmen. Im Browser findet dann eine Text-Erkennung statt. Die Wörter werden dann gezählt und die Word Cloud darauf basierend gezeichnet. Wenn <strong>enable-frontend-edit</strong> nicht aktiv ist, hat dieser Parameter keine Wirkung.</p>
<p><code>[ wp-word-cloud source-type=&quot;custom-field&quot; enable-frontend-edit=1 enable-ocr=1 id=&quot;demo&quot;]my-custom-field[ /wp-word-cloud]</code></p>
<p>Für diese Funktionalität greift das Plugin auf die 





  
  

  
  

  
  
  

  
    
      
    
  

  
  <a href="https://tesseract.projectnaptha.com/?utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous" target="_blank" rel="noopener noreferrer">Tesseract-Bibliothek</a>


 zurück. Diese ermöglicht die Texterkennung von abfotografierten Dokumenten in verschiedenen Sprachen. Die Texterkennung erfolgt komplett im Browser, also beim Besucher der Webseite. Das Bild wird <strong>nicht zum Server hochgeladen</strong>.</p>
<h4 id="ocr-language">ocr-language</h4>
<p>Mit diesem Parameter legst du fest, welche Sprache(n) das ORC-Modul unterstützen soll. Standardmäßig ist hier deu eingestellt. Du kannst mehre Sprachen angeben, wenn du sie mit einem + trennst, z.B. Deutsch + Englisch:</p>
<p><code>`[ wp-word-cloud source-type=&quot;custom-field&quot; enable-frontend-edit=1 enable-ocr=1 ocr-language=&quot;deu+eng&quot; id=&quot;demo&quot;]my-custom-field[ /wp-word-cloud]`</code></p>
<p>Eine Liste aller unterstützten Sprachpakete findest du hier:</p>
<p>





  
  

  
  
    
    
    
  

  
  
  

  
    
      
    
  

  
  <a href="https://tesseract-ocr.github.io/tessdoc/Data-Files?utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous#data-files-for-version-400-november-29-2016" target="_blank" rel="noopener noreferrer">https://tesseract-ocr.github.io/tessdoc/Data-Files#data-files-for-version-400-november-29-2016</a>


</p>
<h4 id="ocr-local-libraries">ocr-local-libraries</h4>
<p>Das OCR-Modul lädt einige, größere Dateien von einem anderen Server nach, unter anderem auch die Sprachpakete. Du kannst diese Dateien auch auf deinem Server anbieten. Dazu musst du die folgenden Dateien herunterladen und im Unterordner &ldquo;<strong>lib</strong>&rdquo; innerhalb des Plugin-Ordners ablegen:</p>
<ul>
<li>[https://unpkg.com/tesseract.js@v2.0.0/dist/worker.min.js](





  
  

  
  

  
  
  

  
    
      
    
  

  
  <a href="https://unpkg.com/tesseract.js@v2.0.0/dist/worker.min.js%27?utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous" target="_blank" rel="noopener noreferrer">https://unpkg.com/tesseract.js@v2.0.0/dist/worker.min.js'</a>


 defer=&lsquo;defer)</li>
<li>[https://unpkg.com/tesseract.js-core@v2.0.0/tesseract-core.wasm.js](





  
  

  
  

  
  
  

  
    
      
    
  

  
  <a href="https://unpkg.com/tesseract.js-core@v2.0.0/tesseract-core.wasm.js%27?utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous" target="_blank" rel="noopener noreferrer">https://unpkg.com/tesseract.js-core@v2.0.0/tesseract-core.wasm.js'</a>


 defer=&lsquo;defer)</li>
</ul>
<p>Außerdem benötigst du die von dir konfigurierten Sprachpakete. Diese kannst 





  
  

  
  
    
    
    
  

  
  
  

  
    
      
    
  

  
  <a href="https://tesseract-ocr.github.io/tessdoc/Data-Files?utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous#data-files-for-version-400-november-29-2016" target="_blank" rel="noopener noreferrer">du hier für die Version 4 herunterladen</a>


. Die Sprachpakete gehören ebenfalls in den Unterordner &ldquo;lib&rdquo;. Außerdem <strong>musst du manuell</strong> die Dateiendung &ldquo;.gz&rdquo; anhängen.</p>
<h3 id="eingrenzen-der-wortliste">Eingrenzen der Wortliste</h3>
<h4 id="min-word-length">min-word-length</h4>
<p>Hiermit legst du fest, wie lang ein Wort mindestens sein soll, um beim Zählen berücksichtigt zu werden. Diese Einstellung wird <strong>nicht</strong> berücksichtigt, wenn du eine fertige Wortliste als Quelle angibst. In diesem Beispiel wird das Wort Foo beim Zählen ignoriert.</p>
<p><code>`[ wp-word-cloud source-type=&quot;inline&quot; count-words=1 min-word-lenght=4 id=&quot;demo&quot;]Lorem Ipsum Foo[ /wp-word-cloud]`</code></p>
<h4 id="min-word-occurence">min-word-occurence</h4>
<p>Mit diesem Parameter legst du fest, wie oft ein Wort mindestens vorkommen muss, um in der word cloud dargestellt zu werden. Diese Einstellung wird <strong>immer</strong> berücksichtigt, auch wenn du eine fertige Wortliste als Quelle angibst. Im Beispiel werden nur Wörter in der word cloud dargestellt, die mindestens 2 mal vorkommen:</p>
<p><code>`[ wp-word-cloud source-type=&quot;inline&quot; count-words=1 min-word-occurence=2 id=&quot;demo&quot;]Lorem Ipsum Foo[ /wp-word-cloud]`</code></p>
<h4 id="black-list-und-enable-black-list">black-list und enable-black-list</h4>
<p>Die Blacklist enthält Wörter, die beim Zählen nicht berücksichtigt werden dürfen. Das können z.B. Funktionswörter oder Fremdwörter sein, die du nicht in der word cloud sehen möchtest. Die Wörter werden mit einem Leerzeichen getrennt angegeben. Wenn du den Parameter im Shortcode angibst, wird die globale Einstellung komplett ignoriert. Die Blacklist wird nur verwendet, wenn der Parameter enable-black-list auf 1 gesetzt ist. Im Beispiel wird das Wort &ldquo;Lorem&rdquo; beim Zählen ignoriert, das es sich auf der Blacklist befindet.</p>
<p><code>`[ wp-word-cloud source-type=&quot;inline&quot; count-words=1 enable-black-list`</code>=1 <code>`black-list=&quot;Lorem&quot; id=&quot;demo&quot;]Lorem Ipsum Foo[ /wp-word-cloud]`</code></p>
<h4 id="enable-custom-black-list">enable-custom-black-list</h4>
<p>Ist dieser Parameter aktiviert, kann der Besucher deiner Webseite Wörter in der word cloud anklicken, um sie aus der word cloud zu entfernen. Die Wörter erscheinen dann unter der word cloud in einer &ldquo;benutzerdefinierten&rdquo; Blacklist. Wenn sie dort erneut angeklickt werden, erscheinen sie wieder in der word cloud.</p>
<img src="https://nickyreinert.de/2020/2020-06-09-wordpress-word-cloud-2-0/images/grafik-9-700x569.png" alt=""><p>Eine word cloud mit benutzerdefinierter Blacklist, so schön!</p>
<h4 id="persistent-custom-black-list">persistent-custom-black-list</h4>
<p>Hiermit kannst du festlegen, dass die Blacklist erhalten bleibt, wenn der Besucher einen neuen Text in das Eingabefeld eingibt. Ist der Parameter deaktiviert, wird die benutzerdefnierte Blacklist gelöscht, sobald der Besucher einen neuen Text eingibt. Dieser Parameter ist nur wirksam, wenn auch das Textfeld aktiviert ist.</p>
<h4 id="ignore-chars">ignore-chars</h4>
<p>Mit diesem Parameter legst du fest, welche Zeichen aus dem Text entfernt werden, bevor er gezählt wird. Hier wird ein regulärer Ausdruck dieser Form erwartet:</p>
<p><code>ignore-chars=&quot;\(\)\[\]\,\.;&quot;</code></p>
<p>Auf diese Art kannst du ungewollte Satzzeichen, Sonderzeichen oder Steuerzeichen entfernen.</p>
<h3 id="erscheinungsbild-anpassen">Erscheinungsbild anpassen</h3>
<h4 id="style">style</h4>
<h4 id="text-transform">text-transform</h4>
<p>Hiermit kannst du festlegen, dass der Text beim Darstellen in der word cloud groß oder kleingeschrieben werden soll. Dieser Parameter kann dementsprechend drei Werte annehmen:</p>
<ul>
<li>uppercas (alle Wörter groß schreiben)</li>
<li>lowercase (alle Wörter klein schreiben)</li>
<li>none (keine Änderung)</li>
</ul>
<p>Diese word cloud nutzt als Ressource die aktuellen Mitteilungen von 





  
  

  
  

  
  
  

  
    
      
    
  

  
  <a href="http://blog.fefe.de?utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous" target="_blank" rel="noopener noreferrer">fefe</a>


:</p>
<p>[wp-word-cloud source-type=&ldquo;url&rdquo; id=&ldquo;demo2&rdquo; count-words=1 min-word-occurence=1 min-word-length=3 size-factor=100 min-alpha=0.5 count-words=1]https://blog.fefe.de[/wp-word-cloud]</p>
]]></content:encoded><atom:updated>2026-10-06T10:59:33+02:00</atom:updated><category>tools</category><media:content url="https://nickyreinert.de/images/posts/placeholder.jpg" type="image/jpeg"><media:title>Projekte</media:title></media:content><dc:subject>Lesezeit: 5 Minuten</dc:subject><dc:type>project_documentation</dc:type></item><item><title>Pictero - Generator für Poesie-Album-Sprüche</title><link>https://nickyreinert.de/2019/2019-10-15-pictero-generator-fuer-poesie-album-sprueche/</link><pubDate>Tue, 15 Oct 2019 00:00:00 +0000</pubDate><author>Nicky Reinert</author><dc:creator>Nicky Reinert</dc:creator><guid isPermaLink="true">https://nickyreinert.de/2019/2019-10-15-pictero-generator-fuer-poesie-album-sprueche/</guid><description> Pictero ist eine Persiflage auf die moralinsauren, romantischen oder schwülstigen Sprüche, die dir auf Delphin-Postern, in Poesie-Alben und mittlerweile auch in sozialen Netzwerken begegnen. Mit Pictero kannst du derartige Texte über Bilder legen, die entweder ganz gut passen. Dazu gehören z.B. …</description><content:encoded><![CDATA[<p>





  
  

  
  

  
  
  

  
    
      
    
  

  
  <a href="https://pictero.com/?utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous" target="_blank" rel="noopener noreferrer">Pictero</a>


 ist eine Persiflage auf die moralinsauren, romantischen oder schwülstigen Sprüche, die dir auf Delphin-Postern, in Poesie-Alben und mittlerweile auch in sozialen Netzwerken begegnen. Mit Pictero kannst du derartige Texte über Bilder legen, die entweder ganz gut passen. Dazu gehören z.B. Strandbilder mit einem viel zu starken Blur-Effekt. Oder du nimmst Bilder, die überhaupt gar nicht passen, wie z.B. ein Stück Fleisch, Katzen oder ein Porträt von Bill Murray.</p>
<img src="https://nickyreinert.de/2019/2019-10-15-pictero-generator-fuer-poesie-album-sprueche/images/1-1.png" alt=""><p>Don&rsquo;t dream your life, live your dreams. Ok.</p>
<p>Pictero greift dazu selber auf eine Menge öffentlich zugänglicher Bild-Generatoren zurück:</p>
<ul>
<li>picsum.photo</li>
<li>baconmockup.com</li>
<li>placebeard.it</li>
<li>fillmurray.com</li>
<li>placekitten.com</li>
<li>placecage.com</li>
<li>placezombie.com</li>
<li>stevensegallery.com</li>
<li>placeimg.com</li>
</ul>
<p>Ein weiteres Feature ist die direkte Anbindung an Twitter. Man kann eine Tweet-Id oder URL zu einem Tweet angeben, um so direkt den Text zu visualisieren.</p>
<p>Als i-Tüpfelchen kannst du den Text maximalironisch mit einer Comic-ähnlichen Schriftart oder einer Handschrift verzieren und das Bild dann herunterladen um die Nachricht deinerseits publikumswirksam an den Mann oder die Frau zu bringen.</p>
<p>Viel Spaß.</p>
<img src="https://nickyreinert.de/2019/2019-10-15-pictero-generator-fuer-poesie-album-sprueche/images/2.png" alt=""><p>Bill Murray - er kann es noch</p>
]]></content:encoded><atom:updated>2026-10-06T10:59:33+02:00</atom:updated><category>tools</category><media:content url="https://nickyreinert.de/images/posts/placeholder.jpg" type="image/jpeg"><media:title>Projekte</media:title></media:content><dc:subject>Lesezeit: 5 Minuten</dc:subject><dc:type>project_showcase</dc:type></item><item><title>AbbreViator (tm) - Lange Texte automatisch abkürzen</title><link>https://nickyreinert.de/2019/2019-05-13-abbreviator-tm-lange-texte-automatisch-abkurzen/</link><pubDate>Mon, 13 May 2019 00:00:00 +0000</pubDate><author>Nicky Reinert</author><dc:creator>Nicky Reinert</dc:creator><guid isPermaLink="true">https://nickyreinert.de/2019/2019-05-13-abbreviator-tm-lange-texte-automatisch-abkurzen/</guid><description>Wenn bei deiner Abschlussarbeit, Masterarbeit, Hausarbeit oder Doktorabeit Qualität mehr zählt als Quantität, dann ist der AbbreViator (tm) für dich genau das richtige. Der AbbreViator (tm) ist für wissenschaftliche und nicht-wissenschaftliche Texte geeigent. Das Werkzeug ersetzt alle Wörter durch …</description><content:encoded><![CDATA[<p>Wenn bei deiner Abschlussarbeit, Masterarbeit, Hausarbeit oder Doktorabeit <strong>Qualität mehr zählt als Quantität</strong>, dann ist der AbbreViator (tm) für dich genau das richtige. Der AbbreViator (tm) ist für wissenschaftliche und nicht-wissenschaftliche Texte geeigent. Das Werkzeug ersetzt alle Wörter durch Abkürzungen und liefert dir dein komplettes Pamphlet zurück, dass inhaltlich nicht weniger wert ist, als das Original, dafür aber umso kompakter präsentiert werden kann. Natürlich erhälst du auch das passende Abkürzungsverzeichnis dazu, dass du deiner schriftlichen Arbeit dann anfügen kannst.<br>
Die Verwendung des AbbreViator (tm) ist kostenlos, um ein Verweis auf den Urheber (ich) wird freilich gebeten.<br>
Berichte mir gerne von deinen erfolgreichen Arbeiten und wie die geneigte Leserschaft sie aufgenommen haben. Hier geht es zum AbbreViator (tm):</p>
<p>





  
  

  
  

  
  
  

  
    
      
    
  

  
  <a href="https://abbreviator.nickyreinert.de/?utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous" target="_blank" rel="noopener noreferrer"></a>








  
  

  
  

  
  
  

  
    
      
    
  

  
  <a href="https://abbreviator.nickyreinert.de/?utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous" target="_blank" rel="noopener noreferrer">https://abbreviator.nickyreinert.de/</a>


</p>
<p><em>Viel Spass mit dem AbbreViator (tm) - in der Kürze steckt die Würze</em></p>
]]></content:encoded><atom:updated>2026-10-06T10:59:33+02:00</atom:updated><category>tools</category><media:content url="https://nickyreinert.de/images/posts/placeholder.jpg" type="image/jpeg"><media:title>Projekte</media:title></media:content><dc:subject>Lesezeit: 5 Minuten</dc:subject><dc:type>tool_review</dc:type></item><item><title>Lorem Picsum - Der Generator für zufällige Bilder</title><link>https://nickyreinert.de/2019/2019-04-29-lorem-picsum-der-generator-fuer-zufaellige-bilder/</link><pubDate>Mon, 29 Apr 2019 00:00:00 +0000</pubDate><author>Nicky Reinert</author><dc:creator>Nicky Reinert</dc:creator><guid isPermaLink="true">https://nickyreinert.de/2019/2019-04-29-lorem-picsum-der-generator-fuer-zufaellige-bilder/</guid><description>Lorem Ipsum kennt jeder. Das sind diese lateinisch anmutenden Texte, die man als Platzhalter verwenden kann. Zu einem richtigen Layout gehören aber nicht nur Texte, sondern auch Bilder. Doch woher nehmen, wenn nicht stehlen? Lorem Picsum heißt die Antwort naheliegenderweise . Dabei handelt es sich …</description><content:encoded><![CDATA[<p>Lorem Ipsum kennt jeder. 





  
  

  
  

  
  
  

  
    
      
    
  

  
  <a href="https://de.wikipedia.org/wiki/Lorem_ipsum?utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous" target="_blank" rel="noopener noreferrer">Das sind diese lateinisch anmutenden Texte,</a>


 die man als Platzhalter verwenden kann. Zu einem richtigen Layout gehören aber nicht nur Texte, sondern auch Bilder. <em>Doch woher nehmen, wenn nicht stehlen</em>? <strong>





  
  

  
  

  
  
  

  
    
      
    
  

  
  <a href="https://picsum.photos/?utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous" target="_blank" rel="noopener noreferrer">Lorem Picsum</a>


</strong> 





  
  

  
  

  
  
  

  
    
      
    
  

  
  <a href="https://picsum.photos/?utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous" target="_blank" rel="noopener noreferrer">heißt die Antwort naheliegenderweise</a>


. Dabei handelt es sich um eine <strong>kostenlose</strong> und <strong>unkomplizierte</strong> API, um Bilder in deine Seite bzw. dein Layout einzubinden. Die Bilder werden dabei bei jedem Aufruf zufällig neu ausgewählt:</p>
<p>Das schöne: Du kannst die Bilder relativ zielgenau aussuchen. Egal, ob du ein quadratisches Format oder monochrome Bilder benötigst: Über die entsprechenden Parameter kannst du festlegen, welche Art von Platzhalter-Bild du einbinden willst:</p>
<p>Die Größe des Bildes wird über die letzten beiden Pfad-Elemente definiert, wenn du nur eine Ziffer eingibst, erhälst du ein quadratisches Bild.</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="ln">1</span><span class="cl">https://picsum.photos/300/400
</span></span><span class="line"><span class="ln">2</span><span class="cl">https://picsum.photos/500
</span></span></code></pre></div><img src="https://picsum.photos/300/400" alt=""><p>Ein zufälliges Bild mit den Abmessungen 300 x 400 Pixel</p>
<img src="https://picsum.photos/400" alt=""><p>Ein zufälliges quadratisches Bild mit der Kantenlänge 400 Pixel</p>
<p>Über zusätziche <strong>Get-Parameter</strong> kannst du weitere Eigenschaften des Bildes beeinflussen, wie z.B. die Farbe oder die Unschräfe. Den Grad der Unschärfe kannst du nach Belieben zwischen 1 und 10 einstellen. Die Parameter lassen sich natürlich auch kombinieren:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="ln">1</span><span class="cl">https://picsum.photos/100/200?grayscale
</span></span><span class="line"><span class="ln">2</span><span class="cl">https://picsum.photos/200/300/?blur
</span></span><span class="line"><span class="ln">3</span><span class="cl">https://picsum.photos/200/300/?blur=2
</span></span><span class="line"><span class="ln">4</span><span class="cl">https://picsum.photos/id/948/100/200?blur=10&amp;grayscale
</span></span></code></pre></div><img src="https://picsum.photos/300/400?blur=10&amp;grayscale" alt=""><p>Ein zufälliges, farbloses Bild mit einem Unschärfefaktor von 10</p>
<p>





  
  

  
  

  
  
  

  
    
      
    
  

  
  <a href="https://picsum.photos/?utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous" target="_blank" rel="noopener noreferrer">Auf der Seite des Anbieters finden sich noch ein paar andere Paramter</a>


, um z.B. eine Liste von verfügbaren Bildern auszugegeben oder ein bestimmtes Bild per ID anzusprechen.</p>
<h2 id="alter-hut">Alter Hut</h2>
<p>Tatsächlich ist die Idee gar nicht mal so neu. Seit mindestens 2012 gibt es 





  
  

  
  

  
  
  

  
    
      
    
  

  
  <a href="http://lorempixel.com?utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous" target="_blank" rel="noopener noreferrer">http://lorempixel.com</a>


 und es gibt noch 





  
  

  
  

  
  
  

  
    
      
    
  

  
  <a href="https://loremipsum.io/de/21-of-the-best-placeholder-image-generators/?utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous" target="_blank" rel="noopener noreferrer">eine ganze Reihe mehr,</a>


 u.a. das berüchtigte Bacon-Mockup.</p>
]]></content:encoded><atom:updated>2026-10-06T10:59:33+02:00</atom:updated><category>tools</category><media:content url="https://nickyreinert.de/images/posts/placeholder.jpg" type="image/jpeg"><media:title>Projekte</media:title></media:content><dc:subject>Lesezeit: 5 Minuten</dc:subject><dc:type>tool_review</dc:type></item><item><title>Was ist HTTP/3 bzw. HTTP over QUIC oder kurz QUIC?</title><link>https://nickyreinert.de/2018/2018-11-13-was-ist-http-3-bzw-http-over-quic-oder-kurz-quic/</link><pubDate>Tue, 13 Nov 2018 00:00:00 +0000</pubDate><author>Nicky Reinert</author><dc:creator>Nicky Reinert</dc:creator><guid isPermaLink="true">https://nickyreinert.de/2018/2018-11-13-was-ist-http-3-bzw-http-over-quic-oder-kurz-quic/</guid><description>UPDATE: Eine ausführliche Version dieses Artikels erschien im August 2019 im Entwickler-Magazin .
Die meisten wissen noch nicht einmal, was HTTP/2 eigentlich ist, geschweige denn, dass es überall eingesetzt wird, da bahnt sich schon der Nachfolger an, genannt HTTP/3. Vor ein paar Jahren hat Google …</description><content:encoded><![CDATA[<p><strong>UPDATE</strong>: Eine ausführliche Version dieses Artikels erschien im August 2019 





  
  

  
  

  
  
  

  
    
      
    
  

  
  <a href="https://entwickler.de/online/web/http3-quic-einfuehrung-579902482.html?utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous" target="_blank" rel="noopener noreferrer">im Entwickler-Magazin</a>


.</p>
<p>Die meisten wissen noch nicht einmal, was <strong>HTTP/2</strong> eigentlich ist, geschweige denn, dass es überall eingesetzt wird, da bahnt sich schon der Nachfolger an, genannt <strong>HTTP/3</strong>. Vor ein paar Jahren hat Google sich mit der Optimierung der Kommunikation im Internet beschäftigen. Früher ging daraus <strong>SPDY</strong> hervor, 





  
  

  
  

  
  
  

  
    
      
    
  

  
  <a href="https://en.wikipedia.org/wiki/HTTP/2?utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous" target="_blank" rel="noopener noreferrer">aus dem schließlich HTTP/2 hervorging.</a>


 Das nächste Entwicklungs-Projekt aus dem Google-Labor hört nun auf den Namen 





  
  

  
  

  
  
  

  
    
      
    
  

  
  <a href="https://www.golem.de/news/internet-protokoll-quic-soll-der-neue-kick-fuer-sicheres-surfen-werden-1611-123738.html?utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous" target="_blank" rel="noopener noreferrer">QUIC</a>


 - was ausgesprochen für 





  
  

  
  

  
  
  

  
    
      
    
  

  
  <a href="https://de.wikipedia.org/wiki/Quick_UDP_Internet_Connections?utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous" target="_blank" rel="noopener noreferrer">Quick UDP Internet Connections</a>


 steht.</p>
<h2 id="das-schichten-modell">Das Schichten-Modell</h2>
<p>Bevor man das ganze verstehen kann, möchte ich ganz grob noch mal auf eine wichtige Grundlage eingehen, dem [OSI-Schichten-Modell](Das klingt kompliziert, ist es auch. Es reicht allerdings völlig aus, wenn man das Prinzip dahinter versteht: Die Webseite, die dir dein Browser hier anzeigt, kommt aus dem Netzwerk-Kabel in deinem Laptop (oder über dein WLAN&hellip;). Das sind allerdings nur ein paar elektronische Signale, die dein Browser so sicher nicht verstehen kann. Dieses ziemlich einfache elektronische Signal muss deshalb erst auf verschiedenen Stufen bzw. Schichten verarbeitet werden, bis daraus das berühmte HTML extrahiert wird, mit dem auch dein Browser arbeiten kann.</p>
<p>Das OSI-Schichten-Modell besteht aus 7 dieser Schichten. Die ersten 6 Schichten dürften dich nicht weiter interessieren, die ursprünglich elektronischen Daten werden hier nach immer weiter &ldquo;ausgepackt&rdquo;. Dabei werden immer mehr Informationen und Daten extrahiert und an die darüber liegende Schicht weitergegeben. Jede Schicht erfüllt so eine spezielle Aufgabe, angefangen bei der eigentlichen physikalischen Übertragung, über die Qualitätssicherung bis hin zur Darstellung in einer Anwendung, wie dem Browser.</p>
<p>Genau das passiert in der 7. Schicht, über die der HTML-Code für deinen Browser zur Verfügung gestellt wird. Eine dieser Schichten nun, nämlich die 4., ist für den Transport zuständig. Dort wird u.a. das schon ziemlich in die Jahre gekommene TCP - Transmission Control Protokoll - eingesetzt. Eine Alternative dazu ist UDP, das etwas schneller aber auch ungesichert funktioniert. Soviel zu den langweiligen und verzwickten technischen Einzelheiten.</p>
<h2 id="quic">QUIC</h2>
<p>Google hat nun auf Basis von UDP ein eigenes Protokoll für diese Schicht entwickelt: QUIC. QUIC kombiniert, ganz stark reduziert, die Vorteile von TLS, HTTP/2, TCP und UDP und bietet so z.B. schnelle, verschlüsselte Verbindungen an. Google nutzt QUIC bereits 





  
  

  
  

  
  
  

  
    
      
    
  

  
  <a href="https://www.golem.de/news/google-auf-spdy-folgt-quic-1306-100077.html?utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous" target="_blank" rel="noopener noreferrer">seit 2013</a>


 auf den eigenen Servern, 





  
  

  
  

  
  
  

  
    
      
    
  

  
  <a href="https://www.heise.de/newsticker/meldung/Google-will-neues-Netzwerk-Protokoll-fuers-Web-2614437.html?utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous" target="_blank" rel="noopener noreferrer">seit Version 29</a>


 versteht auch der hauseigene Browser Chrome QUIC. Sogar Opera soll QUIC seit Version 16 unterstützen. Die Entwicklung steckt also lange nicht mehr in den Kinderschuhen.</p>
<h2 id="http-over-quic">HTTP over QUIC</h2>
<p>Mit HTTP hat das ganze freilich noch nicht viel zu tun, denn das liegt ja eine Schicht weiter oben. Die <strong>Internet Engineering Task Force</strong> hat sich aus diesem Grund in zwei Arbeitsgruppen mit QUIC beschäftigt. Daraus entstand einerseits eine standardisierte Fassung von QUIC, die inoffiziell den namen <strong>iQUIC</strong> trägt, als Abgrenzung zur inoffiziellen Bezeichnung <strong>gQUIC</strong> für Googles Original-Protokoll.</p>
<p>Und außerdem arbeitet man am neuesten HTTP-Standard, HTTP over QUIC, bzw. HTTP/QUIC oder ganz offiziell: HTTP/3. Diese Entkopplung ermöglicht jetzt, dass neben HTTP auch andere Protokolle der oberen Anwendungsschicht, wie z.B. E-Mail, QUIC nutzen können.</p>
<p>





  
  

  
  

  
  
  

  
    
      
    
  

  
  <a href="https://blog.cloudflare.com/the-road-to-quic/?utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous" target="_blank" rel="noopener noreferrer">Laut Cloudfare</a>


 soll noch dieses Jahr ein finaler offzieller Standard zu QUIC verabschiedet werden. Da aber wie gesagt HTTP/2 eher noch ein Exot zu sein scheint, wird es vermutlich noch eine Weile dauern, bis HTTP/3 entsprechend weit verbreitet ist.</p>
]]></content:encoded><atom:updated>2026-10-06T10:59:33+02:00</atom:updated><category>anleitungen</category><media:content url="https://nickyreinert.de/images/posts/placeholder.jpg" type="image/jpeg"><media:title>Projekte</media:title></media:content><dc:subject>Lesezeit: 5 Minuten</dc:subject><dc:type>technical_explainer</dc:type></item><item><title>Wordpress-Plugin um eine Word-Cloud mit beliebigen Wörtern darzustellen</title><link>https://nickyreinert.de/2018/2018-06-13-wordpress-plugin-um-eine-word-cloud-mit-beliebigen-woertern-darzustellen/</link><pubDate>Wed, 13 Jun 2018 00:00:00 +0000</pubDate><author>Nicky Reinert</author><dc:creator>Nicky Reinert</dc:creator><guid isPermaLink="true">https://nickyreinert.de/2018/2018-06-13-wordpress-plugin-um-eine-word-cloud-mit-beliebigen-woertern-darzustellen/</guid><description>Diese Version ist veraltet, bitte verwende absofort diese Version:
https://www.nickyreinert.de/wordpress-word-cloud-2-0/ Wer träumt nicht davon, eine Wolke aus Wörtern in Wordpress darstellen zu können? Der Fachmann spricht hier von einer sogenannten Word-Cloud. Ich meine hier übrigens ausdrücklich …</description><content:encoded><![CDATA[<p>Diese Version ist veraltet, bitte verwende absofort diese Version:</p>
<p>





  
  

  
  

  
  
  

  
    
      
    
  

  
  <a href="https://www.nickyreinert.de/wordpress-word-cloud-2-0/?utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous" target="_blank" rel="noopener noreferrer">https://www.nickyreinert.de/wordpress-word-cloud-2-0/</a>


</p>
<p>Wer träumt nicht davon, eine Wolke aus Wörtern in Wordpress darstellen zu können? Der Fachmann spricht hier von einer sogenannten Word-Cloud. Ich meine hier übrigens ausdrücklich nicht die bekannten TagClouds, bei denen schlicht die verwendeten Wordpress-Tags in einer Wolke anklickbar angezeigt werden. Hier geht es einfach um die Darstellung von Wörtern, die entsprechend der Vorkommen verschieden groß dargestellt werden. Leider gab es genau für diesen Zweck bisher kein Wordpress-Plugin. Dafür habe ich aber eine sehr leicht zu bedienende 





  
  

  
  

  
  
  

  
    
      
    
  

  
  <a href="https://github.com/timdream/wordcloud2.js/blob/gh-pages/API.md?utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous" target="_blank" rel="noopener noreferrer">JavaScript-Bibliothek von Tim Dream: wordCloud2.js</a>


 gefunden, auf der ich das Plugin aufgebaut habe.</p>
<h2 id="installation">Installation</h2>
<p>Der ganze Spaß steht 





  
  

  
  

  
  
  

  
    
      
    
  

  
  <a href="https://github.com/nickyreinert/wordCloud-for-Wordpress?utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous" target="_blank" rel="noopener noreferrer">auf GitHub zur Verfügung</a>


. Du musst lediglich den Source-Code herunterladen und in einen Unterordner in wp-content/plugins entpacken. Wenn du das Plugin im Backend aktiviert hast, kannst du auf jeder Seite und jedem Beitrag den Shortcode [ word-cloud ] nutzen.</p>
<p>Die folgenden Parameter kannst du im Shortcode übergeben. Der Parameter <strong>target-id</strong> ist dabei immer notwendig, alle anderen sind nicht verpflichtend.</p>
<ul>
<li><strong>target-id</strong> - damit wird jede Instanz von word-cloud adressiert. Du kannst je Seite mehrere Word-Clouds erstellen, die Target-Id wird auch als CSS-Id verwendet</li>
<li><strong>source</strong> -wenn du eine eigene SQL-Abfrage verwenden möchtest, musst du diesen Parameter auf &ldquo;sql&rdquo; setzen, andernfalls wird versucht, ein Custom-Field auszulesen</li>
<li><strong>source-id</strong> - wenn sich die Wortliste in einem Custom-Field befindet, musst du mit diesem Parameter den Namen des Felds angeben</li>
<li><strong>query</strong> - wenn du eine SQL-Abfrage verwendest, nutzt du dafür diesen Parameter</li>
<li><strong>backgroundColor</strong> - die Hintergrundfarbe der Cloud, z.B. #123123</li>
<li><strong>gridSize</strong> - ein ganze Zahl, mit der die Lücke zwischen den Wörtern gesteuert werden kann</li>
<li><strong>fontFamily</strong> - welcher Font soll verwendet werden</li>
<li><strong>fontWeight</strong> - das Gewicht der Schriften, also z.B. bold oder normal</li>
<li><strong>minRotation</strong> - eine ganze Zahl, die das Mindestmaß der Rotation bestimmt, ist der Wert 0, wird die Rotation deaktiviert</li>
<li><strong>maxRotation</strong> - das gleiche, nur für die Obergrenze der Rotation</li>
<li><strong>weightFactor</strong> - eine ganze Zahl, um die Gewichtung der Wörter zu beeinflussen, also ein Multiplikator für die Größe</li>
<li><strong>shape</strong> - die Form der Wolke, hier kannst du folgende Formen verwenden: circle (Standard), cardioid (Apfel bzw. Herz), diamond, square, triangle-forward, triangle, pentagon und star</li>
</ul>
<h2 id="beispiel">Beispiel</h2>
<h3 id="wörter-aus-einer-mysql-tabelle-nutzen">Wörter aus einer MySQL-Tabelle nutzen</h3>
<p>Die folgende Word-Cloud verwendet eine Liste von 100 Wörtern aus einer Datenbank-Abfrage:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="ln">1</span><span class="cl">[ word-cloud target-id=&#34;myWordCloud1&#34; source=&#34;sql&#34; query=&#34;SELECT word, SUM(count) AS count FROM augenblicke.001_words GROUP BY word ORDER BY count DESC LIMIT 0,100&#34; ]
</span></span></code></pre></div><p>Hier siehst du eine Word-Cloud, die auf eine kleinere Liste zurückgreift, die ich in einem Custom-Field übergebe:</p>
<p>[word-cloud target-id=&ldquo;myWordCloud2&rdquo; source-id=&ldquo;word-cloud&rdquo;]</p>
<h3 id="wörter-aus-einem-benutzerdefinierten-feld-nutzen">Wörter aus einem benutzerdefinierten Feld nutzen</h3>
<p>Achtung: Dieser Weg funktioniert mit dem neuen Gutenberg-Editor (ab Wordpress 5) nicht, da dieser (Stand Januar 2019) keine benutzerdefinierten Felder anzeigt.</p>
<p>Wenn du auf eine Liste mit Wörter aus einem benutzerdefinierten Feld zugreifen willst, übergibst du als source-id den Namen des benutzerdefinierten Feldes:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="ln">1</span><span class="cl">[word-cloud target-id=&#34;myWordCloud2&#34; source-id=&#34;word-cloud&#34;]
</span></span></code></pre></div><p>Das benutzerdefinierte Feld legst du dann mit genau diesem Namen an und füllst es mit den Wörter und den Werten, die Größe represäntieren sollen:</p>
<p>





  
  

  
  

  
  
  

  
    
      
    
  

  
  <a href="https://www.nickyreinert.de/files/grafik-13.png?utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous" target="_blank" rel="noopener noreferrer"><img src="https://nickyreinert.de/2018/2018-06-13-wordpress-plugin-um-eine-word-cloud-mit-beliebigen-woertern-darzustellen/images/grafik-13-700x74.png" alt=""></a>


</p>
<p>Benutzerdefiniertes Feld mit eigener Wortliste im klassischen Editor</p>
]]></content:encoded><atom:updated>2026-10-06T10:59:33+02:00</atom:updated><category>tools</category><media:content url="https://nickyreinert.de/images/posts/placeholder.jpg" type="image/jpeg"><media:title>Projekte</media:title></media:content><dc:subject>Lesezeit: 5 Minuten</dc:subject><dc:type>project_documentation</dc:type></item><item><title>Eine HTML-Tabelle als Heatmap in Wordpress darstellen</title><link>https://nickyreinert.de/2018/2018-04-06-eine-html-tabelle-als-heatmap-in-wordpress-darstellen/</link><pubDate>Fri, 06 Apr 2018 00:00:00 +0000</pubDate><author>Nicky Reinert</author><dc:creator>Nicky Reinert</dc:creator><guid isPermaLink="true">https://nickyreinert.de/2018/2018-04-06-eine-html-tabelle-als-heatmap-in-wordpress-darstellen/</guid><description>data-heatmap dient zur Darstellung einer Heatmap als Wordpress Plugin. Dabei werden entsprechende Quell-Daten in einer HTML-Tabelle als Heatmap darzustellen. Das Ergebnis kann z.B. so aussehen:
[data-heatmap transpose=“yes” hide-xaxis=“no” hide-yaxis=“no” hide-values=“yes” sort-yaxis=“yes” …</description><content:encoded><![CDATA[<p><em>data-heatmap</em> dient zur Darstellung einer Heatmap als Wordpress Plugin. Dabei werden entsprechende Quell-Daten in einer HTML-Tabelle als Heatmap darzustellen. Das Ergebnis kann z.B. so aussehen:</p>
<p>[data-heatmap transpose=&ldquo;yes&rdquo; hide-xaxis=&ldquo;no&rdquo; hide-yaxis=&ldquo;no&rdquo; hide-values=&ldquo;yes&rdquo; sort-yaxis=&ldquo;yes&rdquo; source-for-gradiation=&ldquo;y&rdquo;]</p>
<p>Die Daten stammen aus einer Tabelle mit drei Spalten. Es handelt sich um die Bus- und Bahn-Linien der öffentlichen Verkehrsmittel in Berlin (Spalte x), die Tageszeiten von 0 bis 23 Uhr (Spalte y) und die Anzahl von Beiträgen in einem Portal (Spalte v). Die Heatmap zeigt also, wieviele Beiträge zu einer bestimmten Uhrzeit in einer bestimmten Linie abgegeben wurden.</p>
<p>y,x,v
0, BUS, 49
1, EXPRES-BUS, 4
1, METRO-BUS, 28
4, METRO-TRAM, 59
…</p>
<p>Das Plugin steht auf 





  
  

  
  

  
  
  

  
    
      
    
  

  
  <a href="https://github.com/nickyreinert/data-heatmap?utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous" target="_blank" rel="noopener noreferrer">github.com</a>


 zur freien Verwendung zur Verfügung.</p>
]]></content:encoded><atom:updated>2026-10-06T10:59:33+02:00</atom:updated><category>tools</category><media:content url="https://nickyreinert.de/images/posts/placeholder.jpg" type="image/jpeg"><media:title>Projekte</media:title></media:content><dc:subject>Lesezeit: 5 Minuten</dc:subject><dc:type>project_documentation</dc:type></item><item><title>COII - Cookie OptIn Interface als Wordpress Plugin</title><link>https://nickyreinert.de/2018/2018-03-03-coii/</link><pubDate>Sat, 03 Mar 2018 00:00:00 +0000</pubDate><author>Nicky Reinert</author><dc:creator>Nicky Reinert</dc:creator><guid isPermaLink="true">https://nickyreinert.de/2018/2018-03-03-coii/</guid><description>COII ist ein Plugin für Wordpress mit dem du dem Besucher deiner Seite die Möglichkeit gibst, dem Tracking durch z.B. Google Analytics bzw. Cookies zuzustimmen.
Cookies und Tracking Grundsätzlich sind Cookies nicht verkehrt. Dabei handelt es sich um kleine Text-Dateien, die von einem Server auf dem …</description><content:encoded><![CDATA[<p>COII ist ein Plugin für Wordpress mit dem du dem Besucher deiner Seite die Möglichkeit gibst, dem Tracking durch z.B. Google Analytics bzw. Cookies zuzustimmen.</p>
<h2 id="cookies-und-tracking">Cookies und Tracking</h2>
<p>Grundsätzlich sind <strong>Cookies</strong> nicht verkehrt. Dabei handelt es sich um kleine Text-Dateien, die von einem Server auf dem Computer des Benutzers gespeichert werden, um Informationen zwischenzuspeichern. Für den Betrieb vieler Seiten sind sie oft unerlässlich. Dabei ist es wichtig zu wissen, dass nur der Server auf ein Cookie zugreifen darf, der es auch gesetzt hat. Grundsätzlich kann man zwei Arten unterscheiden: <strong>1st-Party- und 3rd-Party-Cookies</strong>. 1st-Party-Cookies werden von dem Server gespeichert, auf den der Besucher der Website gerade zugreift. Aktuell wäre das für dich z.B. ein Cookie von 





  
  

  
  

  
  
  

  
    
      
    
  

  
  <a href="https://www.nickyreinert.de?utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous" target="_blank" rel="noopener noreferrer">www.nickyreinert.de</a>


.</p>
<p><strong>3rd-Party-Cookies</strong> werden von Dritten auf deinem Computer gespeichert. Das ist möglich, weil ich auf meiner Seite z.B. JavaScript von fremden Websiten einbinde. Diese &ldquo;rufen&rdquo; den anderen Server an. Sehr weit verbreitet ist z.B. Google Analytics. Google kann dann als dritte Partei ein Cookie auf deinem Computer speichern. Wenn du eine andere Website besuchst, die auch das JavaScript von Google Analytics einsetzt, darf Google auf genau diesen Cookie zugreifen und kann dann die Verknüpfung herstellen: Der Besuch meiner Seite, der Besuch der anderen Seite und vermutlich der Besuch vieler weiterer Seiten. Diese Art von Cookies kann man deswegen als Tracking-Cookie bezeichnen.</p>
<p>Das Problem an der Sache sind die &ldquo;<strong>personenbezogene Daten</strong>&rdquo;. Eigentlich hat niemand ein Problem mit Cookies - so lange sie keine personenbezogenen Daten enthalten. Erst dann betritt man den rechtlich relevanten Raum des Datenschutzes.  Und mit der vor der Tür stehenden <strong>DSGVO</strong> bzw. der <strong>ePrivacy-Verordnung</strong> wird der Betreiber der Website (vermutlich) noch mehr in der Pflicht genommen, die personenbezogenen Daten seiner Besucher zu schützen. Oder: Im explizit das Wahlrecht zu geben: Lässt er das Tracking zu?</p>
<p>Und dabei soll dir <strong>COII</strong> helfen.</p>
<h2 id="funktionsweise-voncookies">Funktionsweise von Cookies</h2>
<p>Beim ersten Besuch deiner Seite sieht der Benutzer einen einfachem Dialog, in dem er dem Tracking zustimmen kann. Oder eben widersprechen.</p>
<p><strong>COII</strong> speichert die Information wiederum in einem Cookie und lädt die Seite automatisch neu. Wurde dem Tracking zugestimmt, wird das entsprechende Tracking-Pixel (JavaScript) geladen. Sonst nicht. COII  unterscheidet dabei allerdings vorerst nicht zwischen 1st- und 3rd-Party-Cookies.</p>
<p>In den Einstellungen kannst du (bzw. musst du initial) den Text für den Dialog und die Buttons anpassen. Außerdem solltest du natürlich dein Tracking-Pixel hinterlegen. Sonst brauchst du dieses Plugin  nicht.</p>
<p>Außerdem kannst du den Shortcode [ coii_dialogue ] auf jeder Seite oder jedem Beitrag - wie z.B. deiner Datenschutzbestimmung - nutzen, um dort die gleiche Abfrage darzustellen.</p>
<p><strong>COII</strong> kannst du dir 





  
  

  
  

  
  
  

  
    
      
    
  

  
  <a href="https://github.com/nickyreinert/coii/edit/master/README.txt?utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous" target="_blank" rel="noopener noreferrer">bei Github</a>


 oder direkt über das 





  
  

  
  

  
  
  

  
    
      
    
  

  
  <a href="https://wordpress.org/plugins/cookie-optin-interface/?utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous" target="_blank" rel="noopener noreferrer">Wordpress-Repository</a>


 herunterladen.</p>
]]></content:encoded><atom:updated>2026-10-06T10:59:33+02:00</atom:updated><category>tools</category><media:content url="https://nickyreinert.de/images/posts/placeholder.jpg" type="image/jpeg"><media:title>Projekte</media:title></media:content><dc:subject>Lesezeit: 5 Minuten</dc:subject><dc:type>project_documentation</dc:type></item><item><title>WordCloud in PowerPoint</title><link>https://nickyreinert.de/2012/2012-07-23-wordcloud-in-powerpoint/</link><pubDate>Mon, 23 Jul 2012 00:00:00 +0000</pubDate><author>Nicky Reinert</author><dc:creator>Nicky Reinert</dc:creator><guid isPermaLink="true">https://nickyreinert.de/2012/2012-07-23-wordcloud-in-powerpoint/</guid><description>Du hast einen nicht allzu langen Text, den du in eine WordCloud / TagCloud verwandeln möchtest, die du dann in PowerPoint verwenden kannst? Dann lade dir diese WordCloud-Excel-Vorlage herunter. Die Datei enthält ein VBA-Script, das zuerst einen beliebigen Text in einzelne Wörter zerlegt und diese …</description><content:encoded><![CDATA[<p>Du hast einen nicht allzu langen <strong>Text</strong>, den du in eine <strong>WordCloud / TagCloud</strong> verwandeln möchtest, die du dann in PowerPoint verwenden kannst? Dann lade dir diese 





  
  

  
  

  
  
  

  
    
      
    
  

  
  <a href="https://www.nickyreinert.de/files/wordcloud-in-powerpoint/WordCloud-Excel-Vorlage.xlsm?utm_source=institut-fuer-digitale-herausforderungen&amp;utm_medium=allyourbasearebelongtous" target="_blank" rel="noopener noreferrer">WordCloud-Excel-Vorlage</a>


 herunter. Die Datei enthält ein <strong>VBA-Script</strong>, das zuerst einen beliebigen Text in einzelne Wörter zerlegt und diese zählt und sortiert. Danach wird eine <strong>PowerPoint-Folie</strong> erstellt, in der die Wörter in einer WordCloud dargestellt werden. Je öfter das Wort vorkommt, desto größer erscheint es auf der Folie. Die Wörter sind einfache Textfelder und können danach bearbeitet oder verschoben werden.</p>
<figure>
  <a href="https://nickyreinert.de/2012/2012-07-23-wordcloud-in-powerpoint/images/WordCloud-in-PowerPoint-150x150.png" target="_blank" class="image-link center" title="Click to view full size">
    <img 
      src="https://nickyreinert.de/2012/2012-07-23-wordcloud-in-powerpoint/images/WordCloud-in-PowerPoint-150x150.png" 
      alt="WordCloud in PowerPoint"
      width="500"
      loading="lazy"
    />
  </a>
  <figcaption>Eine WordCloud in PowerPoint erstellen.</figcaption>
</figure>

<p><strong>Vorbereitung in Excel</strong></p>
<p>Zunächst kopierst du deinen Text in das Feld für den Quelltext. Per VBA wird daraus bereits automatisch eine Liste mit den Häufigkeiten der Wörter erstellt.</p>
<p>Mit den Werten für die <strong>PowerPoint-Höhe</strong> und <strong>-Breite</strong> legst du die Abmessung der Folie in der Präsentation fest. Je größer die Folie, desto länger dauert das Rendern der WordCloud. Mit der Größe der Schriftart bestimmst du, wie groß das größte Wort ist. Über den <strong>Faktor Höhenkorrektur</strong> kannst du den vertikalen Abstand der Textfelder korrigieren. Über den <strong>Performance-Faktor</strong> lässt sich die Geschwindigkeit der Verarbeitung steuern. Je höher der Wert, desto schneller das Skript, aber auch schlechter die Berechnung der Platzierung der Textfelder für die Wörter. Der <strong>Top-Wert</strong> legt fest, wie viele Wörter verarbeitet werden sollen.</p>
<p>Wenn du alles fertig eingestellt hast, drückst du auf <strong>Start</strong> und VBA verrichtet seine Arbeit.</p>
<p>Fertig.</p>
<p><em>*VBA und der Algorithmus sind eher nicht für lange Texte geeignet. Ein Text mit 349 unterschiedlichen Wörtern und 584 Wörtern insgesamt wird in 55 Sekunden gerendert.</em></p>
]]></content:encoded><atom:updated>2026-10-06T10:59:33+02:00</atom:updated><category>tools</category><media:content url="https://nickyreinert.de/images/posts/placeholder.jpg" type="image/jpeg"><media:title>Projekte</media:title></media:content><dc:subject>Lesezeit: 5 Minuten</dc:subject><dc:type>how-to_guide</dc:type></item></channel></rss>