Vom Bildschirm zur fertigen Anleitung

Eine Klickanleitung besteht aus einer Folge von Schritten. Jeder Schritt hält vier Dinge zusammen:

• einen Screenshot aus einer Bildschirmfreigabe
• Annotationen darauf — Pfeile, Rahmen, Nummern, Freitext
• eine Notiz als formatierten Text
• einen Titel und die Angabe, ob der Schritt manuell oder automatisch entstand

Annotationen werden nicht ins Bild gebrannt, sondern getrennt gespeichert. Deshalb bleiben sie verschiebbar, änderbar und löschbar — auch noch, nachdem ein Archiv exportiert und Wochen später wieder eingelesen wurde.

Die Reihenfolge ist bindend: ohne laufende Aufnahme gibt es keine Screenshots, ohne Schritte ist der Export-Knopf inaktiv.

1. 01AufnehmenAuf „Start“ klicken, Bildschirm freigeben, dann pro Arbeitsschritt „Snap“ drücken — oder die Automatik laufen lassen.
2. 02AnnotierenSchritt in der Liste auswählen, im Canvas markieren, was zählt: Pfeil, Rahmen, Nummer, Text.
3. 03BeschreibenTitel setzen und die Notiz schreiben. Der Editor kann Überschriften, Listen, Farbe und Schriftgröße.
4. 04ExportierenOben rechts Format wählen, dann exportieren. Der Knopf trägt das gewählte Format im Namen.

„Start“ öffnet die Bildschirmfreigabe. Danach erzeugt jeder Klick auf „Snap“ einen neuen Schritt aus dem aktuellen Bild. „Stopp“ beendet die Freigabe; die bereits aufgenommenen Schritte bleiben erhalten.

Im Feld „Snap Titel“ lässt sich der Titel für die nächste Aufnahme vorgeben. Das spart das spätere Umbenennen.

„Auto an“ nimmt in festem Intervall auf, einstellbar zwischen 1 und 10 Sekunden; die Statuszeile zählt sichtbar herunter. „Pause“ hält die Automatik an, ohne die Freigabe zu beenden.

Screenshots entstehen als verlustfreies WebP: pixelgleich zu PNG, aber rund ein Drittel der Dateigröße. Das schlägt bis ins Archiv durch.

Wähle links einen Schritt aus, dann steht der Canvas mit acht Werkzeugen bereit:

• AuswahlVorhandene Annotationen anfassen, verschieben, skalieren, drehen
• FreihandstiftFreie Linie in gewählter Farbe und Breite
• RechteckRahmen um einen Bereich
• EllipseRunder Rahmen
• PfeilZeigt auf das, worum es geht
• NummernmarkerDurchnummerierte Punkte für Abfolgen im Bild
• TextFreitext direkt auf dem Screenshot
• RadiererEinzelne Annotation entfernen

Farbe und Strichbreite gelten für das jeweils nächste Element. Sind mindestens zwei Annotationen ausgewählt, lassen sie sich horizontal oder vertikal ausrichten. „Fokus“ blendet die Umgebung aus und zeigt nur den Canvas.

Es gibt zwei getrennte Rücknahmen: die Schaltfläche in der Annotationsleiste nimmt die letzte Annotation zurück, Strg+Z die letzte Änderung an den Schritten.

Unter dem Canvas liegt das Notizfeld je Schritt. Es formatiert direkt sichtbar und beherrscht:

• Fett, Kursiv, Unterstrichen
• Aufzählung und Nummerierung
• Überschriften H1 bis H3
• Textfarbe und Schriftgröße in Pixeln (Standard 14)
• Ausrichtung links, zentriert, rechts
• Links auf https-Adressen

Die Liste links zeigt alle Schritte mit Vorschaubild, Nummer, Titel und Typ. Du kannst umbenennen, per Ziehen umsortieren und einzeln löschen. „Screenshots löschen“ leert die gesamte Liste.

Auf dem Mac gilt jeweils Cmd statt Strg. Die Kürzel greifen bewusst nicht, solange der Cursor in einem Eingabefeld oder im Notiz-Editor steht — dort gehört Strg+Z dem Text.

Das Format wählst du oben im Feld „Export“; die Schaltfläche rechts daneben trägt es im Namen. Sie ist inaktiv, solange kein Schritt existiert.

ZIP ist das einzige Format, das alles mitnimmt: einen lesbaren Bericht für Menschen und die vollständigen Projektdaten für Snapnote.

report.html              — der lesbare Bericht, zeigt die annotierten Bilder
snapshot.json            — die Projektdaten für den Reimport
screenshots/
  step_01.webp           — Bild mit eingezeichneten Annotationen
  step_02.webp
originals/
  step_01.webp           — dasselbe Bild ohne Annotationen, verlustfrei
  step_02.webp

Die Doppelung ist Absicht. Beide Ordner haben verschiedene Aufgaben:

• screenshots/ enthält das fertig gerenderte Bild mit eingezeichneten Annotationen. Das braucht report.html, damit der Bericht auch ohne Snapnote etwas anzeigt.
• originals/ enthält dasselbe Bild ohne Annotationen. Beim Reimport dient es als Untergrund, die Annotationen kommen als Vektordaten aus snapshot.json darüber.

Beide Bildsätze liegen als WebP im Archiv, die Originale verlustfrei. Ein Original ist dabei rund zweieinhalbmal so groß wie die annotierte Fassung, weil diese mit Qualität 0,9 gerendert wird.

Enthält ein Projekt noch PNG-Originale — aus Aufnahmen vor der Formatumstellung oder aus einem importierten Altarchiv — bringt der Export sie beim Schreiben verlustfrei auf WebP. Gemessen an einem Archiv mit drei Screenshots zu 2400×1366:

Das sind 53 % weniger, ohne einen einzigen veränderten Bildpunkt — nachgemessen mit einem Pixelvergleich über 2400×1366: größte Abweichung 0. Die konkreten Werte hängen vom Bildinhalt ab; viel Farbfläche komprimiert gut, Fotos und Verläufe schlecht.

Die Projektdatei beschreibt den Zustand vollständig, aber ohne Bilddaten: sie verweist nur auf die Dateien unter originals/.

{
  "version": 2,
  "exportedAt": 1788018810842,
  "state": {
    "config": { "documentTitle": "Anleitung", "exportFormat": "zip", ... },
    "steps": [
      {
        "id": "s1",
        "title": "Schritt 1",
        "kind": "manual",
        "note": "Notiz",
        "imageDataUrl": null,
        "imagePath": "originals/step_01.webp",
        "penStrokes": [ { "points": [...], "color": "#ff0000", "width": 2 } ],
        "createdAt": 1
      }
    ],
    "activeStepId": "s1"
  }
}

Frühere Versionen trugen jedes Originalbild als Base64-Text direkt in dieser Datei. Sie wurde dadurch zum größten Eintrag des Archivs und überschritt ab etwa 22 Schritten die Größengrenze des eigenen Importers. Seit version: 2 stehen dort nur noch Pfade; die Datei ist wenige Kilobyte groß, unabhängig von der Zahl der Bilder.

„Datei/ZIP importieren“ nimmt einzelne Dateien, „Ordner importieren“ einen ganzen Exportordner. Snapnote entscheidet anhand des Inhalts, in dieser Reihenfolge:

Beim Ordnerimport wählst du den Ordner, der die HTML-Datei und den Unterordner screenshots/ enthält — nur dann findet Snapnote die Bilder.

Nicht jeder Weg stellt gleich viel wieder her. Das ist der wichtigste Unterschied zwischen den Importquellen:

Beim HTML-Import sind die Annotationen bereits Teil des Bildes und lassen sich nicht mehr einzeln anfassen. Wer später weiterarbeiten will, exportiert als ZIP — der einzige Weg, der Bild und Annotation getrennt hält.

Der Import prüft ein Archiv, bevor er es öffnet — ein manipuliertes ZIP soll den Browser nicht lahmlegen. Es gelten:

Wird eine Grenze gerissen, nennt die Meldung sie: „ZIP-Import fehlgeschlagen: Eine Datei im Archiv ist größer als 5 MB.“ beziehungsweise „… Das Archiv ist insgesamt zu groß.“

• Fehlt ein Originalbild im Archiv, bricht der Import nicht ab — der betroffene Schritt kommt ohne Bild, alles andere bleibt erhalten.
• Bilder, die per http:// oder https:// eingebunden sind, lehnt der HTML-Import ab. Snapnote lädt beim Import nichts aus dem Netz nach.

• Nichts verlässt das Gerät. Screenshots, Notizen und Annotationen leben im Speicher des Browser-Tabs. Es gibt kein Backend, an das etwas gesendet würde; die Sicherheitsrichtlinie der Seite verbietet Verbindungen zu fremden Zielen.
• Ein Neuladen leert die Arbeit. Es gibt keine automatische Speicherung. Exportiere als ZIP, bevor du den Tab schließt.
• Gespeichert wird nur die Ansicht: ob du hell oder dunkel arbeitest, merkt sich der Browser lokal. Sonst nichts.
• Offline nutzbar. Snapnote lässt sich als App installieren und startet dann auch ohne Verbindung. Dieses Handbuch ist dabei.

• Der Export-Knopf bleibt blass. Es gibt noch keinen Schritt. Nimm zuerst einen Screenshot auf.
• Die Automatik legt keine neuen Schritte an. Smart Detection erkennt den Bildschirm als unverändert. Schalte sie ab, wenn du bewusst identische Zustände dokumentieren willst.
• Annotationen sind nach dem HTML-Import fest. Das ist keine Störung, sondern die Eigenschaft des Formats. Nutze ZIP, wenn du weiterarbeiten willst.
• Die Freigabe endet von selbst. Beendest du sie im Browser-Balken statt über „Stopp“, bleiben die Schritte erhalten; für weitere Aufnahmen musst du neu starten.
• Ein altes Projekt exportiert noch groß. Lade die Seite einmal neu und exportiere erneut — dann werden auch vorhandene PNG-Originale verlustfrei umkodiert.

Bleibt etwas unklar, ist der Export als ZIP fast immer die sichere Wahl: er verliert nichts und lässt sich vollständig zurückholen.