Nutshell: Textschnipsel ausklappbar und einbettbar gestalten

Nicky Case gestaltet im Internet sehr viele (und sehr coole) Tools und Inhalte zum Lernen. Unter anderem habe ich von ihr das Kreislauftool (im Original Loopy) übersetzt. Sehr lohnend sind auch ihre ‚erkundbaren Erklärungen‘ wie z.B. die Evolution des Vertrauens.

Nun habe ich mir ihr Online-Tool Nutshell näher angesehen. Kurz gefasst handelt es sich dabei um eine Möglichkeit, mit der man Texte im Internet mit einem Codeschnipsel versehen – und auf diese Weise sowohl ausklappbar als auch einbettbar machen kann. In diesem Blogbeitrag zeige ich Dir zunächst, wie das in der Praxis aussehen und genutzt werden kann und anschließend, wie Du dazu vorgehen musst.

Wie sieht Nutshell in der Praxis aus?

Die Grundfunktionen von Nutshell sind das Ein- und Ausklappen sowie das Einbetten von Textschnipseln.

1. Einen Absatz einklappen und bei Bedarf ausklappen

Du kannst mit Nutshell jeden Absatz einklappen und damit auch ausklappbar machen. Das kannst Du hier ausprobieren:

: Das ist ein Text zum Anklicken.

Und das ist dann der Text, den Du erst siehst, wenn du ihn anklickst.

:x Unsichtbarer Beitrag

Huhu, hier lässt sich ein Beitrag ausklappen, dessen Überschrift sonst nirgends sichtbar ist und so mit jedem beliebigen Text verlinkt werden kann.

Mit unsichtbaren Absätzen:

Ich kann einen Absatz auch ganz unsichtbar gestalten, d.h. so dass ich einen beliebigen : Textschnipsel so verlinken kann, dass er den zuvor versteckten Inhalt anzeigt.

Das glaubst Du nicht? Dann schau hier: : Ein ganz anderer Text, aber dahinter steckt der gleiche Inhalt wie eben.

2. Einen Textschnipsel von einer anderen Website einbetten

Wenn ich Nutshell nutze, werden meine Textschnipsel in andere Websites einbettbar – und genauso kann ich auch Textschnipsel von anderen Websites einbetten.

Auf der Nutshell-Demo-Seite hat Nicky Case z.B. auch ein Nutshell gestaltet, in dem sie sich kurz vorstellt. Ich könnte diese Informationen : hier als Textschnipsel auf meine Website einbetten.

Oder ich könnte eine Idee aus meinem Ideentagebuch einbetten, wo ich auch zum Teil Nutshell nutze, z.B. hier : die Barcamp-Scamper-Idee.

Diese Einbettung funktioniert auch mit der Wikipedia. Hier ist zum Beispiel eine Erklärung zu : Quietscheentchen. Und sie funktioniert auch mit Youtube-Videos – und hier sogar mit Zeitangabe: Schau Dir z.B. : die Stelle mit dem Pinguinflug aus Jörans Pinguin-Video an.

Und wie kann ich das jetzt nutzen?

Um Nutshell zu nutzen, musst Du zuerst Deine Website vorbereiten und dann die richtigen Zeichen für Verlinkungen und Einklappungen kennen.

1. Die eigene Website vorbereiten

In einem ersten Schritt musst Du Deine Website ‚Nutshell-komptibel‘ machen. Dazu musst Du in den Code Deiner Website dieses Skript einfügen:

<script src='https://cdn.jsdelivr.net/gh/ncase/nutshell/nutshell.js'></script>

(Wenn Du nichts Externes einbetten willst, kannst Du Dir den Code auch auf Deine Seite hochladen und dann dorthin verlinken. Das mache ich z.B. auf meiner Website so.)

Wenn Du eine statische Website hast, dann weißt Du sicherlich selbst, wie das funktioniert. Bei WordPress empfehle ich Dir diese Schritte:

  1. Du installierst Dir das Plugin WP Code.
  2. Du legst einen neuen HTML-Code-Schnipsel an – und kopierst die obige Code-Zeile dort hinein. Dann speicherst und aktivierst Du es.
  3. Du entscheidest Dich, ob Nutshell auf allen Seiten automatisch integriert werden soll oder ob Du es mittels Shortcode auf bestimmten Seiten einfügen willst. (Ich mache aktuell letzteres)

Fertig!

Nutshell ist nun auf Deiner Website aktiviert. Du erkennst das daran, dass bei jeder Überschrift ein kleines Nuss-Zeichen beim Darüberscrollen sichtbar wird, d.h. Deine Textschnipsel bereits einbettbar geworden sind.

2. Mit Nutshell arbeiten

Wie oben dargestellt kannst Du Nutshell nach diesen Vorbereitungen entweder nutzen, um eigene Textschnipsel einklappbar zu machen oder einzubetten oder um Textschnipsel von anderen Seiten einzubetten.

Zum Einklappen eigener Absätze schreibst Du einfach eine Überschrift mit einem Doppelpunkt davor. Schon ist der Absatz darunter eingeklappt.

Wenn Du Textschnipsel von anderen Websites einbettest, dann kopierst Du Dir den Link zu dem jeweiligen Textschnipsel von der Website und verlinkst dann dorthin. Den Link findest Du, wenn Du die angezeigte ‚Nuss‘ anklickst. Damit es nicht einfach beim Link bleibt, sondern die Nutshell-Einbettung aktiviert wird, musst Du auch hier einen Doppelpunkt an den Anfang des Links setzen.

Bei Wikipedia und Youtube verlinkst Du einfach zur URL des Beitrags. Auch hier den Doppelpunkt nicht vergessen.

Die unsichtbaren Beiträge realisierst Du mit :x vor der Überschrift. Die Verlinkung funktioniert dann so, dass Du als Link den Titel der Überschrift (ohne Leerzeilen oder Satzzeichen und auch ohne :x) mit einem Hashtag davor verlinkst. Der Link zu diesem Absatz innerhalb meines Beitrags wäre also

: 2MitNutshellarbeiten(mit Hashtag im Link davor)

Bei WordPress hast Du zusätzlich die Besonderheit bei unsichtbaren Beiträgen, dass Du automatisierte Emojis im Editor deaktivieren musst. Sonst wird aus :x ein Teufel 🙂.

Fazit

Nutshell ist ein ziemlich cooles, offenes Tool mit aus meiner Sicht viel Potential. In jedem Fall macht es viel Freude, damit herumzuspielen und zu erkunden.


Beitrag merken & teilen

Hier kannst Du dir den Link zum Beitrag kopieren - beispielsweise um ihn für Dich zu speichern oder mit anderen zu teilen. Wenn Du den Link in den Suchschlitz im Fediverse einfügst, kannst Du den Beitrag von dort aus kommentieren. Die Kommentare erscheinen dann nach Freigabe hier auf der Website.