Glossar

Jeder Absatz bekommt sein eigenes <p>. Leerzeilen im Code zeigt der Browser nicht. Für einen Zeilenumbruch mitten im Absatz gibt es <br>.

Ein Attribut steht im öffnenden Tag und hat meist einen Namen und einen Wert in Anführungszeichen: alt="George liegt auf dem Sofa". Weitere Beispiele: lang, class, id.

src sagt, wo das Bild liegt, alt was darauf ist. Der alt-Text erscheint, wenn das Bild fehlt, und wird für Menschen vorgelesen, die es nicht sehen. Erscheint statt dem Bild der alt-Text, stimmt meist der Pfad nicht.

padding ist der Abstand zwischen Inhalt und Rahmen, border der Rahmen, margin der Abstand zu den Nachbarn. Mit box-sizing: border-box zählen Padding und Rahmen zur angegebenen Breite, das macht das Rechnen einfacher.

In CSS 101 sind es 768 Pixel (ungefähr Tablet) und 1024 Pixel (Desktop). Die Zahlen sind Erfahrungswerte, keine Gesetze; wichtig ist, dass der Inhalt gut aussieht.

CSS-Regeln bestehen aus einem Selektor (wen es trifft) und Eigenschaften (was sich ändert). Am besten steht CSS in einer eigenen Datei wie style.css, die alle Seiten einbinden. Im Haus-Vergleich ist es Farbe und Einrichtung.

Inline (style="…" im Tag) gilt nur für ein Element, gut für Tests. Internal (<style> im head) gilt für eine Seite. External (<link rel="stylesheet" href="css/style.css">) gilt für alle Seiten, die sie einbinden, und der Browser kann sie zwischenspeichern.

Festlegen in :root { --primary: #00b4d8; }, verwenden mit color: var(--primary);. Ändert man den Wert an einer Stelle, ändert sich die Farbe überall, wo die Variable steht.

Windows blendet Endungen oft aus. Dann kann eine Datei heimlich index.html.txt heissen und öffnet sich nicht als Webseite. Im Explorer unter Ansicht «Dateinamenerweiterungen» einschalten.

Ein Editor speichert reinen Text, ohne versteckte Formatierung wie ein Textverarbeitungsprogramm. Bessere Editoren färben den Code (Syntax Highlighting) und helfen beim Tippen.

<p>Hallo</p> ist ein Absatz-Element. Elemente können andere Elemente enthalten, so entsteht die Struktur der Seite. JavaScript sieht sie als Äste im DOM-Baum.

Änderungen in den Entwickler-Tools gelten nur auf deinem Bildschirm, bis du neu lädst. Wichtige Bereiche: Elemente (HTML und CSS), Konsole (Meldungen und Fehler von JavaScript) und die Geräteansicht.

Mit display: flex werden die Kinder eines Elements nebeneinander gelegt. justify-content verteilt sie in der Hauptrichtung, align-items quer dazu, gap setzt Abstände. Gut für Navbars und Knopfreihen.

In HTML mit <footer>. Wie die Navbar gehört er auf jede Seite und sieht überall gleich aus.

Bausteine: <input> (ein Feld), <textarea> (mehrere Zeilen), <select> (Auswahl), <button type="submit"> (Absenden). Ein Formular allein verschickt keine Mails, dafür braucht es einen Server oder Dienst.

F12 drücken, dann das Symbol mit Handy und Tablet anklicken und ein Gerät wählen. Das ersetzt keinen Test auf einem echten Gerät, zeigt aber die meisten Probleme.

linear-gradient(135deg, #00b4d8, #f72585) verläuft in einer Richtung, radial-gradient(…) von der Mitte nach aussen. Verläufe sind Hintergründe, man setzt sie mit background.

Mit display: grid und grid-template-columns: 1fr 1fr 1fr entstehen drei gleich breite Spalten. Faustregel: eine Richtung Flexbox, zwei Richtungen Grid.

<!DOCTYPE html> sagt «das ist HTML». <html> umschliesst alles. Im <head> steht Unsichtbares für den Browser (Titel, Zeichensatz, viewport), im <body> alles, was man sieht.

HEX: Rot, Grün und Blau als je zwei Zeichen. RGB: dieselben drei Werte von 0 bis 255, rgba() zusätzlich mit Transparenz von 0 bis 1. HSL: Farbton, Sättigung, Helligkeit, praktisch zum Abwandeln einer Farbe.

HTML beschreibt die Struktur, nicht das Aussehen. Es besteht aus Tags wie <h1> oder <p>. Der Browser liest die Datei und baut daraus die Seite. Im Haus-Vergleich sind es die Wände.

Im HTML id="hero", im CSS #hero mit Raute. Eine ID gibt es pro Seite nur einmal. Nützlich für Sprungziele (#hero im Link) und für JavaScript.

Zuerst mit @keyframes name { … } festlegen, dann mit animation: name 0.6s ease forwards; einem Element zuweisen. Anders als Transitions laufen Keyframes auch ohne Auslöser und können sich wiederholen (infinite).

Im HTML class="btn", im CSS .btn { … } mit Punkt. Eine Klasse darf es beliebig oft geben, und ein Element kann mehrere Klassen haben. Für Stile meist besser als eine ID.

In HTML: <!-- Notiz -->. In CSS: /* Notiz */. In JavaScript: // Notiz für eine Zeile. Gute Kommentare erklären, warum etwas so ist.

<label for="name"> gehört zum Feld mit id="name"; beide Namen müssen gleich sein. Dann setzt ein Klick auf die Beschriftung den Cursor ins Feld, und Vorleseprogramme wissen, wozu das Feld da ist.

href ist das Ziel. Ein interner Link zeigt auf eine Datei im eigenen Ordner, zum Beispiel spielzeug.html. Ein externer beginnt mit https://. Stimmt der Name nicht genau, kommt «Datei nicht gefunden».

Jeder Punkt steht in <li>. Faustregel: Ist die Reihenfolge wichtig, nimm ol, ist sie egal, ul. Auch Menüs sind meist Listen.

Rechtsklick auf index.html, «Open with Live Server». Dahinter läuft ein kleiner Server auf deinem eigenen Computer. Für HTML 101 reicht aber auch ein Doppelklick auf die Datei.

Beispiel: @media (min-width: 768px) { … } gilt ab 768 Pixeln Breite, also ungefähr ab Tablet. Die Breite, ab der sich das Layout ändert, nennt man Breakpoint.

Die Grundregeln gelten für das Handy (eine Spalte, gross, gut antippbar). Media Queries mit min-width fügen ab einer bestimmten Breite mehr Spalten hinzu. Das ist heute der übliche Weg.

In HTML steht sie in <nav>, meist als Liste von Links. Sie muss auf jeder Seite stehen, sonst kommt man dort nicht mehr weg. Später übernimmt CSS das Aussehen, oft mit Flexbox.

Ein relativer Pfad geht von der aktuellen Datei aus. Ein Schrägstrich trennt Ordner und Datei. Jeder Buchstabe muss stimmen: Auf vielen Servern zählt auch Gross- und Kleinschreibung, auf Windows nicht. Darum klappt manchmal etwas zu Hause und online nicht.

Mit dem Attribut required prüft der Browser das selbst und zeigt einen Hinweis. Bei type="email" prüft er zusätzlich, ob es wie eine E-Mail-Adresse aussieht.

Mit zwei Doppelpunkten: ::before und ::after. Sie brauchen content: '', sonst erscheinen sie nicht. In CSS 101 entsteht so der Unterstrich, der beim Hover hereinfährt.

Pseudo-Klassen beginnen mit einem Doppelpunkt: :hover (Maus darüber), :focus (ausgewählt, auch mit Tastatur). Zusammen mit transition entstehen weiche Hover-Effekte.

1rem ist die Schriftgrösse des <html>-Elements, im Browser meist 16 Pixel. Wer in den Einstellungen grössere Schrift wählt, bekommt mit rem automatisch alles grösser, mit festen Pixeln nicht.

Typisch: * { margin: 0; padding: 0; box-sizing: border-box; }. Jeder Browser bringt eigene Abstände mit; der Reset setzt sie auf null, damit die Seite überall gleich startet.

Responsive Design braucht drei Dinge: die viewport-Zeile, flexible Layouts (Flexbox, Grid, Prozent statt fester Pixel) und Media Queries für unterschiedliche Breiten. Empfohlen ist Mobile First: zuerst das Handy, dann erweitern.

Gleiche Navbar überall? Alle Links richtig? Fehlt Inhalt? Sieht es am Handy gut aus? In echten Teams prüft oft eine zweite Person, weil man eigene Fehler leicht übersieht.

Mit font-family wählt man die Schrift samt Ersatz, zum Beispiel 'DM Sans', sans-serif. Google Fonts liefert Schriften von einem fremden Server; ohne Internet greift die Ersatzschrift. Für Offline-first legt man Schriften in den eigenen Ordner.

p trifft alle Absätze, .btn alle Elemente mit class="btn", #hero genau das eine Element mit id="hero". Selektoren lassen sich kombinieren, zum Beispiel .card p für Absätze in Karten.

Semantische Tags wie <nav>, <footer> oder <h1> helfen Vorleseprogrammen, Suchmaschinen und dir selbst, die Seite zu verstehen. Ein <div> sagt dagegen nichts über seinen Inhalt.

Grob gilt: Eine ID ist genauer als eine Klasse, eine Klasse genauer als ein Tag-Name. Bei gleicher Genauigkeit gewinnt die Regel, die weiter unten steht. Darum lieber mit Klassen arbeiten und IDs sparsam einsetzen.

Alle bekommen dieselbe Animation, aber jedes eine etwas grössere animation-delay, zum Beispiel 0.1s, 0.2s, 0.3s. Das wirkt lebendig und lenkt den Blick.

Notepad kann das nicht, Notepad++ und VS Code schon. Ein Tippfehler wie ein fehlendes Anführungszeichen fällt dann sofort auf, weil die Farben danach nicht mehr stimmen.

<table> ist die ganze Tabelle, <tr> eine Zeile, <th> ein Kopf-Feld, <td> ein Feld mit Inhalt. Tabellen sind für Daten da, nicht für das Layout der Seite; dafür gibt es Flexbox und Grid.

Die meisten Tags kommen paarweise: <p> öffnet, </p> mit Schrägstrich schliesst. Einige haben kein Ende-Tag, zum Beispiel <img> und <br>. Öffnendes Tag, Inhalt und schliessendes Tag zusammen nennt man Element.

linear wirkt mechanisch (Ladebalken), ease-out bremst sanft (Dinge, die ankommen), ease-in wird schneller (Dinge, die weggehen), steps(n) springt (Pixel-Art). cubic-bezier() erlaubt eigene Kurven.

translate verschiebt, rotate dreht, scale vergrössert. Die Reihenfolge zählt. Transform rechnet die Grafikkarte, darum laufen Animationen damit besonders flüssig.

transition: background 0.3s ease; heisst: Eigenschaft, Dauer, Kurve. Der Auslöser ist meist ein anderer Zustand wie :hover. Für Abläufe mit mehreren Schritten oder ohne Auslöser nimmt man Keyframes.

Pro Seite gibt es nur eine <h1>, die Hauptüberschrift. Darunter gliedern <h2>, <h3> usw. wie Kapitel und Unterkapitel. Die Reihenfolge hilft auch Vorleseprogrammen.

Ohne <meta name="viewport" content="width=device-width, initial-scale=1.0"> tut ein Handy so, als wäre es etwa 980 Pixel breit, und verkleinert alles. Mit der Zeile passt sich die Seite an die echte Breite an.

Unter validator.w3.org Code einfügen oder Datei hochladen. Kein roter Fehler heisst sauberes HTML. Das W3C ist die Organisation, die Web-Standards festlegt.

Eine Web-API ist meist eine Adresse, die auf Anfrage Daten liefert, oft als JSON, zum Beispiel Wetterdaten. Auch der Browser selbst hat APIs, etwa localStorage oder das DOM. Wie ein Schalter am Bahnhof: Man fragt in einer festen Form und bekommt eine Antwort in fester Form.

Jedes Element hat eine Nummer, den Index. Er beginnt bei 0: liste[0] ist das erste Element. push fügt hinten an, length sagt, wie viele es sind. Mit einer Schleife geht man alle Elemente durch.

Steht nach dem Pfeil nur ein Ausdruck, wird er automatisch zurückgegeben. Arrow-Funktionen sind praktisch für kurze Aufgaben, etwa in map, filter oder bei Event Listenern.

Eine Funktion mit async darf await verwenden. await pausiert nur diese Funktion, bis ein Promise erfüllt ist, der Rest der Seite läuft weiter. Fehler fängt man mit try { … } catch (fehler) { … } ab.

if (punkte >= 10) { … } else { … }. Mit else if gibt es weitere Abzweigungen. Bei vielen festen Fällen ist switch übersichtlicher.

Vergleiche wie punkte > 10 ergeben einen Boolean. Bedingungen mit if entscheiden damit, welcher Weg läuft. Benannt nach dem Mathematiker George Boole.

Die wichtigsten Typen in JavaScript: String (Text in Anführungszeichen), Number (Zahl), Boolean (true oder false), Array, Object sowie null und undefined für «kein Wert». Mit typeof fragt man den Typ ab.

<script src="script.js" defer> lädt die Datei schon herunter, führt sie aber erst aus, wenn die Seite fertig aufgebaut ist. So findet das Skript alle Elemente, die es braucht.

const { name, punkte } = benutzer; legt zwei Variablen mit den passenden Werten an. Spart Tipparbeit, wenn man mehrere Properties braucht.

Der Browser baut aus dem HTML den DOM-Baum. Mit document.querySelector(".card") findet JavaScript ein Element, mit textContent oder classList ändert es dieses. Die Seite ändert sich sofort, ohne neu zu laden.

Wichtige Events: click, input, submit, keydown, DOMContentLoaded. JavaScript reagiert darauf mit einem Event Listener. Die Funktion bekommt ein Event-Objekt, zum Beispiel mit e.target, dem angeklickten Element.

knopf.addEventListener("click", tuEtwas) heisst: Wenn jemand auf den Knopf klickt, läuft tuEtwas. Anders als onclick = überschreibt addEventListener keine anderen Zuhörer.

Meist heisst es e: e.target ist das Element, e.key die gedrückte Taste, e.preventDefault() verhindert das Standardverhalten, etwa das Neuladen beim Absenden eines Formulars.

const antwort = await fetch(url); fragt die Adresse an, await antwort.json() macht aus der Antwort ein Objekt. Das braucht Internet. Ohne Netz gibt es einen Fehler, den man mit try/catch abfängt.

Eine Funktion bekommt Werte hinein (Parameter), arbeitet damit und gibt mit return ein Ergebnis zurück. Beispiel: function begrüsse(name) { return "Hallo " + name; }. Kurzform: Arrow-Funktion (name) => ….

In <script type="importmap"> steht zum Beispiel, dass three im eigenen Ordner vendor/ liegt. So lädt die Seite nichts von fremden Servern, passend zu Offline-first.

Bei ["HTML", "CSS", "JS"] hat "HTML" den Index 0 und "JS" den Index 2. Das letzte Element ist immer liste[liste.length - 1].

Jede Funktion der Seite bekommt ihre eigene Init-Funktion; am Ende werden alle nacheinander aufgerufen. Findet eine das nötige Element nicht, kehrt sie einfach zurück, so stört eine fehlende Stelle die anderen nicht.

JavaScript läuft direkt im Browser, ohne Installation. Es liest den Code Zeile für Zeile von oben nach unten. Eingebunden wird es am besten mit <script src="script.js" defer></script>. Im Haus-Vergleich ist es die Elektrik.

JSON sieht aus wie ein JavaScript-Objekt, ist aber reiner Text. JSON.stringify(obj) macht aus einem Objekt Text, JSON.parse(text) wieder ein Objekt. So reisen Daten zu Servern oder in den localStorage.

Mit console.log(wert) schaust du, was in einer Variable steckt, wie mit einem Röntgengerät. Rote Zeilen sind Fehler, oft mit Datei und Zeilennummer.

localStorage.setItem("name", "Mikey") speichert, getItem liest, removeItem löscht. Es speichert nur Text, Objekte also zuerst mit JSON umwandeln. Die Daten bleiben nur in diesem einen Browser auf diesem Gerät.

Arrays haben Methoden wie push, pop, map, filter, Strings zum Beispiel toUpperCase. Eigene Objekte können ebenfalls Methoden haben.

Module halten grosse Projekte ordentlich: Jede Datei hat eine Aufgabe. Eingebunden wird mit <script type="module">. Module brauchen meist einen Server, auch einen lokalen, ein Doppelklick auf die Datei reicht dann nicht.

querySelector gibt null zurück, wenn es nichts findet; wer dann damit weiterarbeitet, bekommt einen Fehler. Eine bekannte Eigenheit: typeof null ergibt "object".

Ein Objekt steht in geschweiften Klammern: { name: "Mikey", punkte: 350 }. Die Namen heissen Schlüssel oder Properties. Man liest sie mit benutzer.name. Als Text gespeichert oder verschickt wird ein Objekt im Format JSON.

Rechnen: + - * /, % (Rest), ** (Potenz), ++ (plus eins). Vergleichen: === !== < >. Verknüpfen: && (und), || (oder), ! (nicht).

Bei function begrüsse(name) ist name der Parameter. Beim Aufruf begrüsse("Mikey") ist "Mikey" das Argument. Mehrere werden mit Komma getrennt.

Ein Promise ist zuerst offen und wird dann erfüllt oder abgelehnt. fetch gibt ein Promise zurück. Mit await oder .then() wartet man auf das Ergebnis.

Lesen mit Punkt: benutzer.name. Mit eckigen Klammern, wenn der Name in einer Variable steckt: benutzer[feld]. Neue Properties kann man einfach zuweisen.

return beendet die Funktion und gibt einen Wert zurück, den man speichern oder anzeigen kann. Ohne return gibt eine Funktion undefined zurück.

for (let i = 0; i < 5; i++) { … } zählt, liste.forEach(x => …) geht eine Liste durch, while läuft, solange etwas wahr ist. Vorsicht vor Endlosschleifen: Wird die Bedingung nie falsch, hängt die Seite.

Liegt derselbe Wert an zwei Stellen, laufen sie früher oder später auseinander. Mit einer Quelle genügt eine Änderung, und alle Anzeigen stimmen wieder.

const kopie = { ...benutzer, punkte: 400 }; kopiert alle Properties und überschreibt eine. Bei Arrays: [...liste, "neu"].

Guter Brauch: Der Zustand liegt an einer Stelle (Single Source of Truth), und die Anzeige wird daraus gebaut. Soll er einen Neustart überleben, speichert man ihn zum Beispiel im localStorage.

Strings stehen in "…", '…' oder in Backticks `…`. "5" ist Text, 5 eine Zahl, das macht beim Rechnen und Vergleichen einen Unterschied.

Bei setTimeout oder fetch wartet JavaScript nicht, sondern macht weiter und erledigt die Antwort später. Darum kann eine spätere Zeile früher ausgegeben werden. async/await macht solchen Code lesbar.

Innerhalb von ${ } darf jeder Ausdruck stehen, auch Rechnungen. Template-Strings dürfen auch über mehrere Zeilen gehen.

Im try-Block steht Code, der schiefgehen kann, etwa fetch ohne Internet. Passiert ein Fehler, springt JavaScript in den catch-Block, wo man einen freundlichen Hinweis zeigt.

let erstellt eine Variable, die sich ändern darf, const eine, die gleich bleibt. Das alte var nicht mehr verwenden. Der Wert hat immer einen Datentyp, zum Beispiel Zahl oder Text.

=== prüft Typ und Wert: 5 === "5" ist falsch. == wandelt Typen vorher um und liefert dadurch Überraschungen. Ein einzelnes = vergleicht nicht, es weist einen Wert zu.

JavaScript unterscheidet nicht zwischen ganzen Zahlen und Kommazahlen. Als Dezimaltrennzeichen dient der Punkt. toFixed(1) rundet für die Anzeige auf eine Nachkommastelle.

Supabase übergibt die Mails per SMTP an Brevo, Brevo verschickt sie von no-reply@mykeyz.ch. Damit das klappt, steht ein DKIM-Eintrag im DNS der Domain.

Der Browser holt die Dateien einer Seite, liest HTML, CSS und JavaScript und baut daraus das Bild auf dem Bildschirm. Im Brief-Vergleich ist er der Briefträger, der mit der Adresse den Weg zum Haus findet.

Eine externe CSS-Datei lädt der Browser einmal und nimmt sie danach aus dem Cache, das macht Seiten schneller. Manchmal sieht man deshalb eine Änderung erst nach erneutem Laden. Ein Service Worker hat einen eigenen Cache für Offline.

Daten liegen in Tabellen mit Zeilen und Spalten. Regeln legen fest, wer welche Zeilen lesen oder schreiben darf. Die Community auf mykeyz.ch nutzt dafür Supabase.

Hinter jedem Dienst stehen Server. Gratis-Angebote haben Grenzen und Bedingungen (zum Beispiel ein Mindestalter fürs Konto); die liest man vorher, am besten mit den Eltern. Wer einen Dienst nutzt, vertraut ihm seine Daten an.

Der Mail-Dienst unterschreibt jede Mail digital. Den passenden Prüfschlüssel findet der Empfänger über einen DNS-Eintrag der Domain. Fehlt das, landen Mails eher im Spam.

Computer finden sich über Nummern (IP-Adressen), Menschen merken sich Namen. Beim Domain-Anbieter trägt man DNS-Einträge ein, die sagen, wohin die Domain zeigt und welcher Dienst Mails für sie verschicken darf.

Eine eigene Domain mietet man bei einem Anbieter, meist pro Jahr. Es gibt auch Gratis-Adressen, die dann dem Anbieter gehören, zum Beispiel deinname.anbieter.irgendwas. Damit die Domain zum richtigen Server führt, braucht es DNS.

Ein Mail-Dienst nimmt die Mail per SMTP entgegen und liefert sie aus. Damit sie nicht im Spam landet, muss die Domain bestätigen, dass dieser Dienst für sie senden darf (DKIM, über DNS).

Man braucht ein Konto bei GitHub, und es gelten dessen Bedingungen, auch zum Mindestalter. Die Adresse ist eine Gratis-Adresse von GitHub, eine eigene Domain lässt sich dazu verbinden.

Der vordere Teil ist dein Name, der hintere die Domain des Anbieters; das nennt man Subdomain. Für den Anfang reicht das. Eine eigene Domain kostet jedes Jahr etwas.

Bei Netlify zieht man den Ordner ins Fenster. Bei mykeyz.ch geht es automatisch: Sobald eine Änderung auf GitHub liegt, baut Vercel die Seite neu und schaltet sie live.

Ein Hosting-Dienst stellt den Server. Zum Starten gibt es Gratis-Angebote wie Netlify oder GitHub Pages: Ordner hochladen, fertig. Bei mykeyz.ch übernimmt das Vercel.

Bei Hostpoint steht, wohin die Domain zeigt (zu Vercel) und welche Dienste Mails für sie senden dürfen (Brevo). Die Seite selbst liegt nicht dort.

Die Geräte sind dann im selben kleinen Netz, auch ohne Internet-Router. Das reicht für lokale Spiele über WebRTC.

Mit HTTPS kann unterwegs niemand mitlesen oder etwas verändern. Dafür braucht der Server ein Zertifikat (SSL/TLS). Viele Hosting-Dienste wie Netlify richten es automatisch ein. Das Schloss heisst «sicher verbunden», nicht «gesperrt».

Das Web mit seinen Seiten ist nur ein Teil davon; auch E-Mail, Spiele und Videoanrufe laufen über das Internet. Daten reisen in kleinen Paketen von Computer zu Computer, bis sie ankommen.

Bei der Registrierung kommt meist eine Bestätigungsmail. Passwörter speichert ein guter Dienst nur verschlüsselt; vergisst man eines, setzt man es über einen Link per Mail neu.

Die Adresse lautet dann zum Beispiel http://localhost:8000. Manche Dinge (Module, Service Worker) funktionieren erst damit. Live Server in VS Code ist so ein lokaler Server.

Die Datei heisst meist manifest.json und wird im head mit <link rel="manifest"> eingebunden. Darin steht auch, ob die App mit oder ohne Browser-Leiste startet.

HTML 101 zeigt den Weg «Deploy manually». Netlify richtet HTTPS automatisch ein. Es braucht ein Konto, es gelten die Bedingungen des Anbieters.

Dafür liegen Schriften und Bibliotheken im eigenen Ordner statt auf fremden Servern, und Spiele werden als PWA mit Service Worker gebaut. Vorteil: Es läuft auch im Zug, im Wald und wenn ein Dienst verschwindet.

Bei Web-Apps läuft das über den Service Worker und braucht die ausdrückliche Erlaubnis der Person. Sparsam einsetzen: Zu viele Meldungen nerven.

Eine PWA braucht ein Manifest (Name, Symbol, wie sie startet) und einen Service Worker, der Dateien für den Offline-Betrieb speichert. Viele Spiele und Werkzeuge auf mykeyz.ch sind PWAs, passend zu Offline-first.

Ein QR-Code fasst viel mehr Zeichen als ein Strichcode. Damit lassen sich zum Beispiel Verbindungsdaten zwischen zwei Handys austauschen, ganz ohne Internet.

Statt jeder Person einzeln Rechte zu geben, bekommt sie eine Rolle, etwa Mitglied, Moderator oder Admin. Die Datenbank prüft bei jeder Anfrage, ob die Rolle das darf.

Wenn jemand deine Adresse öffnet, fragt sein Browser beim Server nach den Dateien, und der Server schickt sie. Server stehen meist in Rechenzentren bei einem Dienst. Im Haus-Vergleich ist der Server das Grundstück, auf dem das Haus steht.

Der Service Worker sitzt zwischen Seite und Internet. Er kann Anfragen aus seinem Zwischenspeicher beantworten, wenn kein Netz da ist. Viele PWAs verwenden die Regel «Netz zuerst»: neu laden, wenn Internet da ist, sonst die gespeicherte Fassung.

Supabase bietet eine Datenbank mit Regeln, wer was lesen und schreiben darf, dazu Anmeldung mit E-Mail und Passwort. Die Region lässt sich wählen, zum Beispiel Zürich.

Eine URL besteht aus Protokoll (https://), Domain (mykeyz.ch) und Pfad (/projects.html). Dahinter kann ein Sprungziel stehen, etwa #dom auf dieser Seite.

Vercel ist mit dem GitHub-Repository verbunden. Kommt dort eine Änderung an, baut Vercel die Seite neu und schaltet sie live.

Normalerweise läuft alles über einen Server. Mit WebRTC sprechen die Geräte direkt miteinander, zum Beispiel für Spiele im selben WLAN. Vorher müssen sie Verbindungsdaten austauschen; ohne Internet geht das zum Beispiel per QR-Code.

Der Hauptzweig heisst meist main. Ist der Versuch gut, führt man den Branch zurück (Merge). Bei kleinen Projekten schreibt man oft direkt auf main, damit Änderungen sofort sichtbar sind.

Ein CCMS sieht aus wie ein Blatt auf dem Zeichenbrett, mit Tabs. Es hält fest, was dazugehört und was nicht, welche Fragen offen sind und was entschieden ist. Es enthält keinen fertigen Code.

Das Gegenteil ist die GUI, die grafische Oberfläche mit Fenstern und Knöpfen. CLI-Programme sind schnell, lassen sich gut automatisieren und laufen auch ohne Bildschirm-Oberfläche. Beispiele: git, python, npm.

Jeder Commit hat eine Kennung aus Buchstaben und Zahlen, zum Beispiel 4f38655. Damit findet man genau diesen Stand wieder. Gute Commit-Nachrichten sagen kurz, was und warum.

Jede gespeicherte Änderung heisst Commit und bekommt eine kurze Beschreibung. Alle Commits zusammen bilden die Geschichte eines Projekts. Git läuft auf deinem Computer; GitHub ist ein Dienst, der Git-Projekte im Internet aufbewahrt.

Auf GitHub liegen Repos öffentlich oder privat. Man kann Änderungen in der App oder im Browser ansehen, und andere Dienste wie Vercel können darauf reagieren. Mit GitHub Pages lassen sich auch Webseiten veröffentlichen.

Bilder bleiben besser hängen als lange Texte. In den Tutorials auf mykeyz.ch heisst die Variante «Bauplan», im Look der Website. Die Kästchen in diesem Glossar sind kleine Baupläne.

Wer etwas Fremdes verwendet, muss die Lizenz einhalten, zum Beispiel den Namen nennen oder nicht verkaufen. Für eigene Werke legt man selbst fest, was andere dürfen. Die Lizenz liegt meist als Datei LICENSE bei.

Markdown-Dateien enden auf .md und bleiben auch ohne Programm lesbar. GitHub und Obsidian zeigen sie schön formatiert an.

MIT: nutzen, ändern, verkaufen erlaubt, Hinweis auf die Lizenz behalten. GPL: Wer es weitergibt, muss den eigenen Code ebenfalls unter GPL offenlegen; darum für verkaufte Spiele heikel. CC BY-NC: teilen und bearbeiten mit Namensnennung, aber nicht kommerziell. Keine Rechtsberatung.

Er ist ein guter Schritt nach Notepad: leicht, schnell und mit Syntax Highlighting. Wie bei jedem Programm lohnt es sich, Updates nur von der offiziellen Seite zu holen; bei Kindern entscheiden die Eltern darüber.

Notizen lassen sich mit [[Name]] verknüpfen. Die Dateien liegen als normale Markdown-Dateien auf dem eigenen Gerät, ohne Cloud-Zwang. Mit Git lässt sich der Vault zwischen PC und Handy abgleichen.

Was genau erlaubt ist, steht in der Lizenz. Viele bekannte Werkzeuge sind Open Source, zum Beispiel Blender, Godot, three.js und Git. Das passt zum Scavenger-Modus: Bestehendes verwenden statt neu bauen.

Ein Prototyp muss nicht schön sein. Er beantwortet eine Frage, zum Beispiel «Macht das Spass?» oder «Läuft das auf dem Handy?».

Arbeiten mehrere Leute oder Geräte am selben Repo, holt man zuerst mit Pull den neuesten Stand und schickt dann mit Push die eigenen Änderungen. Bei mykeyz.ch löst ein Push auf GitHub automatisch die neue Fassung bei Vercel aus.

Ein Repo enthält die Dateien und alle Commits. Es kann nur auf deinem Computer liegen oder zusätzlich auf GitHub.

Jede Etappe hat ein Ziel und einen Test, an dem man sieht, dass sie erreicht ist. So bleibt ein grosses Projekt überschaubar. Auch Game-Design 101 startet mit einer Roadmap.

Bevor man etwas neu baut, sucht man kostenlose Werkzeuge, Bibliotheken oder eigene ältere Teile. Das spart Zeit und Fehler. Wichtig dabei: die Lizenz prüfen.

Viele lesen am Handy oder ohne Mausrad. Tabs machen lange Inhalte überschaubar, und ein Link kann direkt einen bestimmten Reiter öffnen. Beim Drucken erscheinen alle untereinander.

Auf Windows heisst es zum Beispiel PowerShell oder Eingabeaufforderung, auf Mac und Linux Terminal. Darin startet man Programme mit Text, etwa einen lokalen Server oder Git. Nicht verwechseln mit der Konsole im Browser, dort läuft JavaScript.

Bewährte Regel: nie überschreiben, immer eine neue Version anlegen. So kann man jederzeit zur letzten guten Fassung zurück. Bei Notizen übernimmt Git das, bei Seiten und Code steht die Nummer im Dateinamen.

VS Code ist von Microsoft und kostenlos. VSCodium baut denselben offenen Quellcode ohne Microsofts Marke und Telemetrie. Erweiterungen wie Live Server machen das Arbeiten bequemer.

Wer den Schlüssel hat, kann im Namen des Besitzers handeln und oft Kosten verursachen. Darum: nie in Chats, Screenshots oder öffentlichen Code schreiben, nur dort aufbewahren, wo der Dienst es vorsieht. Geht einer verloren, sofort neu erstellen.

Gemma gibt es in verschiedenen Grössen; kleinere laufen auch auf normalen PCs. Ein Beispiel ist Gemma 4 E4B. Für die Nutzung gelten Googles Bedingungen.

Ein LLM sagt Stück für Stück voraus, welcher Text am besten passt. Es kann erklären, übersetzen und Code schreiben, sich aber auch irren. Darum Ergebnisse prüfen, besonders Fakten und Zahlen. Beispiele: Claude, Gemma.

Ein Konnektor nutzt meist MCP. Man meldet sich einmal an und erlaubt den Zugriff; danach kann die KI in dieser App lesen oder handeln. Was sie darf, legt man beim Verbinden fest und kann es jederzeit wieder trennen.

Man wählt ein Modell, lädt es und chattet. Mit «Serve on Local Network» können auch andere Geräte im Heimnetz zugreifen, etwa das Handy. Es ist gratis, aber nicht Open Source; Bedingungen beim Anbieter lesen.

Vorteile: läuft offline, die Daten bleiben zu Hause. Nachteile: braucht eine starke Grafikkarte mit genug VRAM, und kleine Modelle sind weniger fähig als grosse im Rechenzentrum. Programme dafür sind zum Beispiel LM Studio und Ollama.

MCP ist ein offener Standard, 2024 von Anthropic vorgestellt. Ein MCP-Server bietet Werkzeuge an, zum Beispiel «Tabelle lesen» bei einer Datenbank, und die KI ruft sie auf. Wie ein Übersetzer, der beide Seiten versteht. So kann eine KI wie Claude zum Beispiel auf Supabase oder Vercel zugreifen.

Ein Modell startet mit einem Befehl, andere Programme sprechen über eine API mit Ollama. Damit auch andere Geräte im Netz zugreifen dürfen, stellt man OLLAMA_HOST=0.0.0.0 ein. Ollama ist Open Source.

Je klarer der Prompt, desto besser die Antwort: Was soll entstehen, für wen, in welcher Form, mit welchem Beispiel. Man kann nachfragen und verbessern, wie in einem Gespräch.

Ein Skill enthält eine Datei SKILL.md mit Regeln, manchmal auch Vorlagen oder Skripte. So arbeitet die KI jedes Mal nach denselben Standards, ohne dass man alles neu erklären muss.

Der Systemprompt legt Ton, Aufgabe und Grenzen fest. Zum Beispiel kann darin stehen, dass erst nach einer Freigabe gebaut wird. Systemprompts lohnt es sich mit Versionsnummer abzulegen.

Ein VPN verbindet Geräte verschlüsselt. Tailscale richtet das ohne Router-Einstellungen ein. So erreicht das Handy unterwegs das KI-Modell auf dem PC zu Hause. Für Privatpersonen gibt es einen Gratis-Plan.

Modelle lesen und schreiben Token statt Buchstaben. Wie viel ein Modell auf einmal überblicken kann und was ein Dienst kostet, wird oft in Token gemessen. Nicht verwechseln mit einem Zugangs-Token, einer Art Passwort.

Ein Modell läuft am schnellsten, wenn es ganz in den VRAM passt. Mit 8 GB VRAM laufen kleinere Modelle gut, grosse nur verkleinert oder langsam. Darum hängt die Wahl des Modells oft an der Grafikkarte.

Jede Aktion braucht eine klare Rückmeldung, sonst weiss der Spieler nicht, ob sie geklappt hat.

In HTML mit <canvas>. In Game-Design 101 ist sie 320 × 180 Punkte gross und wird für jedes Bild neu gezeichnet. Gut für 2D-Spiele.

Trennt man Rechnen (update) und Zeichnen (draw), bleiben Fehler leichter zu finden: Stimmt der Spielstand, aber das Bild nicht, liegt es am Zeichnen.

Bewegt man Figuren mit tempo * dt, laufen sie auf schnellen und langsamen Geräten gleich schnell. Ohne dt wäre ein Spiel auf einem 120-Hz-Bildschirm doppelt so schnell wie auf einem mit 60 Hz.

Echte Entscheidungen haben Vor- und Nachteile auf beiden Seiten. Ist eine Wahl immer richtig, ist es keine Entscheidung, sondern nur ein Klick mehr.

Beispiel: Eine halbe Chance auf 10 Gold ergibt im Schnitt 5 Gold. Damit vergleicht man Wahlen fair, bevor man das Gefühl dazu testet.

Unfair wirken zum Beispiel unsichtbare Gefahren, zu grosse Hitboxen oder Zufall, der Können entwertet. Fair wirkt, wenn man sieht, was kommt, und Zeit zum Reagieren hat.

Flow entsteht, wenn Herausforderung und Können zusammenpassen. Zu leicht wird langweilig, zu schwer frustriert. Darum steigt die Schwierigkeit in guten Spielen langsam an.

Die Anzahl Bilder pro Sekunde heisst Bildrate (FPS). Sinkt sie, ruckelt das Spiel. Auf schwachen Handys hilft es, weniger zu zeichnen.

Das Genre ist der erste Entscheid, weil es fast alles andere mitbestimmt: Steuerung, Tempo, Regeln. Genres lassen sich mischen; auch ernste Themen haben Platz in Spielen.

Bekannt aus Rennspielen: Die Letzten bekommen bessere Extras, die Ersten werden gebremst. Das hält Spiele spannend, kann aber als unfair empfunden werden, wenn es zu stark ist.

Ist die Hitbox des Spielers etwas kleiner als seine Figur, fühlen sich knappe Ausweichmanöver fair an. Zum Testen zeichnet man Hitboxen oft sichtbar ein.

In Game-Design 101 heissen sie setup, input, physics, update und draw. So bleibt klar, welcher Code wann läuft.

Ein gutes HUD zeigt nur, was gerade wichtig ist, und verdeckt nicht das Spielgeschehen. Am Handy muss es auch mit dem Daumen davor lesbar bleiben.

Information kann man oft gegen Ressourcen eintauschen, etwa einen Späher bezahlen. Was der Spieler weiss und was nicht, verändert das ganze Spielgefühl.

Juice ändert nichts an den Regeln, aber viel am Gefühl. Zu viel davon wird anstrengend; am besten dosiert und abschaltbar.

Beispiel Jump and Run: springen, landen oder fallen, Münze klingt. Macht der Kernloop Spass, trägt er das ganze Spiel. Darum testet man ihn zuerst mit einem Prototyp.

Das Spiel prüft es meist über Abstände oder überlappende Rechtecke (Hitboxen). Danach entscheidet eine Regel, was passiert: einsammeln, abprallen, Leben verlieren.

Level-Design heisst: neue Ideen einführen, üben lassen, dann kombinieren. Oft liegen Level als Daten (zum Beispiel JSON) vor, nicht als Code, damit man sie leicht ändern kann.

Am selben Gerät ist es am einfachsten. Über mehrere Geräte müssen sie Daten austauschen, über einen Server oder direkt (WebRTC). Offline-Multiplayer kann Handys zum Beispiel per QR-Code ohne Internet verbinden.

In Game-Design 101 kann man sie mit Reglern live verändern und sofort sehen, was passiert. So findet man die Werte, die sich gut anfühlen.

Jedes Teilchen hat Position, Tempo und Lebensdauer. Zusammen ergeben sie einen Effekt. Viele Partikel kosten Rechenzeit, darum auf Handys sparsam.

Ein Sprung ist oft nur: Geschwindigkeit nach oben setzen, jedes Bild etwas Schwerkraft abziehen, beim Boden stoppen. Für echtes Abprallen und Stossen nimmt man eine Physik-Engine.

Weil Ressourcen knapp sind, entstehen Entscheidungen: Jetzt ausgeben oder sparen? Gute Spiele geben mehrere sinnvolle Wege, eine Ressource einzusetzen.

Zwei Wahlen können im Durchschnitt gleich viel bringen und sich trotzdem ganz anders anfühlen: sicher wenig oder vielleicht viel. Spieler mögen beides, je nach Lage.

Gute Rückmeldung ist sofort, eindeutig und passt zur Wichtigkeit: ein kleiner Treffer klingt anders als ein Sieg. Farbe nie als einziger Hinweis, nicht alle sehen Farben gleich.

Tempo, Schwerkraft, Anzahl Gegner, Zeitlimit: Das sind Regler. Kleine Änderungen haben grosse Wirkung. Darum mit echten Spielern testen, nicht nur selbst.

Das Setting bestimmt Bilder, Töne und Sprache. Es kann eine Mechanik erklären: Auf dem Schiff schwankt der Boden, im Wald ist es dunkel.

Mechaniken sind die Verben eines Spiels. Wenige gute Mechaniken, die gut zusammenspielen, sind meist besser als viele halbe. Aus ihnen entsteht der Kernloop.

Pro Durchgang: Eingabe lesen, Physik rechnen, Regeln prüfen, Bild zeichnen. Jeder Durchgang ergibt ein Frame. Im Code geschieht das meist mit requestAnimationFrame.

Für Animationen liegen mehrere Bilder nebeneinander auf einem Sprite-Sheet (Atlas). Das Spiel zeigt sie der Reihe nach. Ein Atlas spart Ladezeit, weil der Browser nur eine Datei holt.

Viele Spiele haben kaum Story, und das ist in Ordnung. Wo es eine gibt, erzählt sie oft die Umgebung mit: ein zerbrochenes Fenster, eine Notiz. Ein gutes Ende darf kurz sein.

Strategie braucht Informationen und echte Entscheidungen. Gibt es nur einen besten Weg, wird aus Strategie ein Auswendiglernen.

Zum Beispiel HTML-Canvas und JavaScript für kleine Browserspiele, three.js für 3D im Browser, Godot für grössere Spiele. Die Wahl hängt am Zielgerät und daran, was das Team kann.

Im einen Bild ist der Ball vor der Wand, im nächsten schon dahinter, eine Berührung gab es nie. Abhilfe: kleinere Schritte rechnen, dickere Wände oder den Weg zwischen zwei Bildern prüfen.

Zufall sorgt für Überraschung und dafür, dass jede Runde anders ist. Zu viel davon macht Können wertlos. Im Code liefert Math.random() Zufallszahlen.

Jede Phase hat eigene Regeln und Übergänge: Aus «Spiel» wird bei null Leben «Ende», aus «Ende» per Knopf wieder «Menü». Auch Figuren haben oft Zustände wie stehen, laufen, springen.

Ein 3D-Modell wird dafür in Schichten zerlegt (Slicer) und als Druckauftrag gespeichert. Anders als bei Spielen muss das Modell geschlossen und dick genug sein. So kann zum Beispiel eine Zeichnung zum Druckobjekt werden.

Die Plattform von Niantic wurde eingestellt; seit 2026 ist das Gerüst Open Source (MIT). Die Raumerkennung gibt es nur als unveränderliche Binärdatei mit eigener Lizenz: nicht verändern, Niantic Spatial nennen, kein konkurrierendes Produkt, widerrufbar. Keine Rechtsberatung.

Man setzt Schlüsselposen auf einer Zeitleiste, das Programm rechnet dazwischen, ähnlich wie bei CSS-Keyframes. In Blender heissen gespeicherte Bewegungen Actions; im GLB reisen sie mit ins Spiel.

Dafür muss das Handy verstehen, wo Boden und Tisch sind und wie es sich bewegt (SLAM). Im Browser geht das mit WebXR oder Bibliotheken wie 8th Wall. Ein AR-Krimi kann zum Beispiel den eigenen Tisch zum Tatort machen.

ARCore erkennt Flächen und Bewegung sehr gut, setzt aber Google-Dienste auf dem Handy voraus. Unity AR Foundation, Godot-AR und WebXR auf Android bauen darauf auf.

Mehr Auflösung zeigt mehr Details, braucht aber mehr Speicher und Ladezeit. Für das Web lohnt es sich, Bilder nicht grösser als nötig zu speichern. Ein itch-Cover hat 630 × 500 Pixel.

TripoSG ist ein offenes Modell dafür (Code und Gewichte unter MIT), Modly eine Oberfläche, um solche Modelle auf dem eigenen PC zu nutzen. Das Ergebnis braucht meist Nacharbeit in Blender. Man rechnet mit etwa 8 GB VRAM. Lizenzen pro Werkzeug prüfen.

Blender ist Open Source (GPL). Was man damit erstellt, gehört einem selbst. Für Web-Spiele exportiert man daraus oft GLB-Dateien; Add-ons wie Rigify helfen beim Skelett.

Geometrien, Materialien und Texturen belegen Speicher auf der Grafikkarte. Entfernt man sie nur aus der Szene, bleiben sie dort liegen. dispose() räumt auf, sonst wird das Spiel mit der Zeit langsamer.

Einfache Formen bringt three.js mit; komplexe Figuren modelliert man in Blender und lädt sie als GLB.

GIMP ist Open Source (GPL). Damit bearbeitet man Fotos, malt Texturen oder baut Oberflächen für Spiele. Auch ein Tutorial kann ein Asset-Pack sein, zum Beispiel für Spiel-Oberflächen mit GIMP.

glTF ist ein offener Standard. GLB ist dieselbe Sache in einer einzigen Datei, mit Formen, Materialien, Texturen und Animationen. Blender exportiert es, three.js und Godot laden es.

Godot ist Open Source unter MIT, ohne Lizenzgebühren. Programmiert wird meist in GDScript, einer Python-ähnlichen Sprache. Spiele lassen sich für PC, Handy und Web exportieren.

3DoF heisst drei Freiheitsgrade: nur drehen, nicht verschieben. Damit kann sich eine 3D-Szene mit dem Handy mitdrehen, Dinge hängen aber nicht fest auf dem Tisch. Ein einfacher Rückfall, wenn SLAM nicht läuft.

Die Kamera hat Position, Blickrichtung und Blickwinkel. Bewegt sie sich, wirkt die Welt lebendig. In AR übernimmt die echte Handykamera die Rolle.

Erkennt die Kamera den Marker, weiss sie genau, wo und wie gross das 3D-Objekt erscheinen soll. Das ist einfach und läuft fast überall, braucht aber den Ausdruck. Bibliotheken: MindAR, AR.js.

Ein Material kann eine Textur tragen und bestimmt, wie Licht reflektiert wird. Manche Materialien brauchen kein Licht und leuchten selbst, das ist billig zu rechnen.

Ein Mesh besteht aus vielen kleinen Dreiecken. Mehr Dreiecke heisst feinere Form, aber mehr Rechenarbeit. Darum gibt es Low-Poly-Modelle für Handys.

Statt jede Bewegung selbst zu programmieren, gibt man Körpern Masse und Form, und die Engine rechnet. Im Baukasten-Konzept ist das cannon-es. Mehr Körper heisst mehr Rechenzeit.

In CSS ist ein Pixel eine Rechengrösse, keine echte Leuchtdiode: Handys mit vielen echten Punkten fassen mehrere zu einem CSS-Pixel zusammen. Pixel-Art nutzt sichtbare, grosse Pixel als Stil.

PNG eignet sich für Fotos mit Transparenz und Pixel-Grafik; vergrössert wird es unscharf. SVG beschreibt Linien und Flächen und bleibt in jeder Grösse scharf, ideal für Symbole wie die Piktogramme hier. JPG ist für Fotos ohne Transparenz.

Weniger Polygone laufen schneller, besonders auf Handys und in AR. Low-Poly ist auch ein eigener Stil. Asset-Packs gibt es oft als Low- und HD-Fassung.

So bekommt ein Modell schnell eine Bemalung, die zum Ausgangsbild passt. Werkzeuge dafür sind Blender selbst oder Add-ons wie StableProjectorz. Verdeckte Stellen brauchen weitere Ansichten oder Handarbeit.

Im Browser nutzt er meist WebGL und damit die Grafikkarte. Je mehr Objekte, Licht und Effekte, desto mehr Arbeit pro Bild.

Das Skelett (Rig) besteht aus Knochen, und jeder Teil des Meshes hängt an bestimmten Knochen. Rigify ist ein Add-on in Blender, das aus einer Vorlage ein fertiges Menschen-Skelett erzeugt.

Shader laufen für jeden Punkt oder Bildpunkt gleichzeitig und sind darum sehr schnell. Mit ihnen entstehen Wasser, Glühen oder Comic-Look. Sie werden in einer eigenen Sprache geschrieben (GLSL).

SLAM verfolgt markante Punkte von Bild zu Bild und baut daraus eine Karte. Es ist rechenintensiv und auf älteren Handys ruckelig. Ohne ARCore gibt es SLAM im Browser zum Beispiel von 8th Wall oder AlvaAR.

Objekte werden der Szene hinzugefügt und können verschachtelt sein: Ein Rad hängt am Auto und fährt mit. Ohne Licht sieht man die meisten Materialien nicht.

Wie das Bild auf die Form passt, legt die UV-Abwicklung fest, wie bei einem aufgeklappten Karton. Grosse Texturen kosten Speicher, darum oft 1024 oder 2048 Pixel statt mehr.

three.js nimmt einem viel Arbeit ab: Szene, Kamera, Licht, Modelle laden. Es ist Open Source unter MIT. Liegt es im eigenen Ordner, zum Beispiel vendor/, laufen Spiele auch offline.

WebXR nutzt, was das Gerät mitbringt. Auf Android braucht es dafür ARCore, also Google-Dienste. Auf iPhones ist die Unterstützung eingeschränkt. Darum lohnt es sich, Wege ohne ARCore zu prüfen.

Mit der Arduino-Umgebung schreibt man Programme (Sketches) in C++ und lädt sie per USB auf das Board. Viele andere Boards, auch der ESP32, lassen sich so programmieren.

Beide Seiten müssen dieselbe Baudrate verwenden, sonst kommt Zeichensalat an. Höher ist schneller, aber nicht jedes Kabel schafft jede Rate. Gängig sind 115200 oder höher zum Flashen.

Beim Mesh Kit verbindet sich die Meshtastic-App per Bluetooth mit dem Node; beim ersten Mal tippt man eine PIN vom Bildschirm ein. Die Reichweite liegt bei einigen Metern.

Beim ESP32 hält man dafür meist eine Taste (G0 oder BOOT) gedrückt, während man das Kabel einsteckt. Beim Mesh Kit gehört laut Anleitung dazu: Cap ab, Schalter aus, G0 halten, USB einstecken.

Die Grenze sorgt dafür, dass ein Band für alle frei bleibt. Im von Meshtastic genutzten Teilband sind es 10 %. Wer zu viel sendet, wird vom Node gebremst.

Es gibt viele Varianten. Im M5Stack Cardputer steckt ein ESP32-S3. Programmiert wird zum Beispiel mit Arduino oder PlatformIO in C++.

Firmware wird nicht installiert wie eine App, sondern auf den Chip geschrieben (geflasht). Eine neue Firmware ersetzt die alte ganz. Darum vorher wissen, wie man zur alten zurückkommt.

Oft muss das Gerät dafür in einen Boot-Modus, beim Cardputer mit gedrückter Taste G0 beim Einstecken. Werkzeuge: M5Burner, Arduino, PlatformIO oder der Web-Flasher eines Projekts. Während des Flashens das Kabel nicht ziehen.

Bei Meshtastic heisst die Region EU_868; das Gerät stellt die Frequenz selbst ein (869,4 bis 869,65 MHz). Die Region muss stimmen, sonst funkt man auf einer nicht erlaubten Frequenz.

Ein Ausgang schaltet zum Beispiel eine LED, ein Eingang liest einen Knopf. Die Pins vertragen nur kleine Ströme und Spannungen; Motoren brauchen eine eigene Schaltung.

Bei Meshtastic sind 3 Sprünge Standard, höchstens 7. Mehr Sprünge reichen weiter, belasten aber das Netz, weil jede Weitergabe Sendezeit kostet.

Über dieselben zwei Leitungen hängen mehrere Geräte, jedes mit eigener Adresse. Langsamer als SPI, aber sparsam mit Pins. Typisch für Temperatur- oder Lagesensoren.

Bei Meshtastic hat jeder Kanal einen Namen und einen Schlüssel. Der Standardkanal ist öffentlich; für private Gespräche legt man einen eigenen an und teilt den Schlüssel nur mit den Richtigen, nie öffentlich.

LoRa ist langsam, dafür reicht ein Signal je nach Gelände Kilometer weit. Genau richtig für Textnachrichten ohne Handynetz. In Europa funkt es im Band um 868 MHz.

Firmware auswählen, Gerät und Anschluss wählen, Baudrate einstellen, «Burn». Für das Mesh Kit ist 1500000 als Baudrate angegeben. Es braucht eine Internetverbindung, um Firmware herunterzuladen.

Auf dem Cardputer laufen eigene Firmware-Projekte, zum Beispiel Lade-Animationen. Mit einem LoRa-Modul kann er zum Meshtastic-Gerät werden. M5Stack ist die Firma, die solche Module baut.

Jedes Gerät (Node) gibt Nachrichten weiter, bis sie ankommen. Gesteuert wird per App über Bluetooth oder direkt am Gerät. Nachrichten sind kurz, etwa 200 Byte.

Ein Mikrocontroller hat kein grosses Betriebssystem. Er führt genau ein Programm aus, die Firmware, und startet in einem Augenblick. Er braucht wenig Strom und läuft gut mit Akku. Beispiele: ESP32, Arduino-Boards.

Im Meshtastic-Netz ist jedes Funkgerät ein Node. Je mehr Nodes verteilt sind, desto weiter reicht das Netz.

Mit Akku, LoRa und lokaler Software bleiben Geräte nutzbar, wenn das Netz fehlt. Das ist die Hardware-Seite von Offline-first.

Anders als ein Mikrocontroller hat er ein Betriebssystem und kann viele Programme gleichzeitig ausführen, etwa einen Server. Dafür braucht er mehr Strom und braucht länger zum Starten.

Im Teilband 869,4 bis 869,65 MHz sind bis 27 dBm erlaubt, das ist ein halbes Watt. Die Standardeinstellung von Meshtastic passt; nicht von Hand erhöhen. Mehr Reichweite bringt oft eher ein besserer Standort oder eine bessere Antenne.

SPI braucht mehr Leitungen als I2C, ist dafür deutlich schneller. Jedes Gerät bekommt eine eigene Auswahl-Leitung.

Assets sind getrennt vom Code. So kann man Grafik oder Ton austauschen, ohne das Programm zu ändern. Für jedes fremde Asset gilt seine Lizenz.

Ein Pack enthält zum Beispiel: ZIP mit den Dateien, Cover, Beschreibung und Lizenzdatei. Beispiele der Marke LolZ: Halloween-Props, Escape-Lab-Props, Game-UIs, das Effekt-Pack «Magie und Funken».

Zum Beispiel die Low- und die HD-Fassung eines Packs oder zwei passende Packs. Käufer sparen, und Verkäufer verkaufen mehr auf einmal.

Bei itch.io ist das Cover das kleine Vorschaubild (630 × 500 Pixel), das Hero-Bild das grosse Bild oben auf der Seite (1920 × 1080). Beide sollen auf einen Blick zeigen, was drin ist.

VFX heisst Visual Effects. Meist bestehen sie aus Partikeln oder Sprite-Animationen. Das Pack «Magie und Funken» enthält zum Beispiel 10 kindgerechte Effekte.

Gute Icons sind auch klein noch klar erkennbar. Als SVG bleiben sie scharf, für kleine Bildschirme wie den Cardputer werden sie oft als Pixel-Grafik umgewandelt.

Dort kann man Spiele und Packs anbieten, gratis, mit festem Preis oder als «Pay what you want». Die Packs auf mykeyz.ch erscheinen unter der Marke LolZ. Für Verkäufe gelten die Bedingungen von itch.io.

Der Name kommt von «einen Kaffee spendieren». Neben Spenden gibt es dort auch einen Shop. Ein möglicher Ort neben itch.io und mykeyz.ch.

Sie beruhigt beim Warten und zeigt, dass das Gerät nicht hängt. Als Vorschau lassen sie sich auch als GIF rendern.

Sie heisst meist LICENSE.txt oder LIZENZ.txt und gehört in jedes Pack. Enthält das Paket fremde Teile, kommen deren Lizenzen dazu, etwa in einem Ordner mit Drittlizenzen.

Low hat weniger Polygone und kleinere Texturen und läuft auf Handys flüssig. HD sieht feiner aus, braucht aber mehr Leistung. Beide zusammen gibt es oft günstiger als Bundle.

Ein erster Check ist eine Websuche, gründlicher sind die Markenregister (in der Schweiz swissreg, in der EU EUIPO, weltweit WIPO). Bei Unsicherheit eine Fachperson fragen. Keine Rechtsberatung.

Props tragen viel zur Stimmung bei, ohne die Regeln zu ändern. 3D-Props gibt es oft in Low- und HD-Fassung.

PWYW senkt die Hürde, etwas auszuprobieren, und wer mehr geben will, kann. Bei einigen Packs steht ein Mindestbetrag, zum Beispiel 5 CHF.

Wer etwas selbst erschafft, ist in der Regel Rechteinhaber. In Lizenzdateien und im Code steht darum ein Copyright-Vermerk mit Namen und Jahr. Keine Rechtsberatung.

Kurze Töne geben sofortige Rückmeldung. Man kann sie aufnehmen, mit Programmen wie Audacity bearbeiten oder per Code erzeugen. Lautstärke und Stumm-Schalter nicht vergessen.

UI heisst User Interface, die Oberfläche, die Menschen bedienen. Mit einem Template fängt man nicht bei null an. Templates gibt es zum Beispiel für den Cardputer und für Spiele (GIMP).

ZIP-Dateien lassen sich auf jedem Computer ohne Zusatzprogramm öffnen. Für Downloads ideal: eine Datei statt hundert. Die Ordnerordnung im Inneren bleibt erhalten.