Website und Marke

MusicStation hat eine Produkt-Website unter https://daw-musicstation.de. Dort finden Sie die Funktionsübersicht, den vollständigen Versionsverlauf, den Downloadbereich und die Beta-Warteliste - und dieses Handbuch, jede Seite auf Deutsch und auf Englisch. Was die Website nicht beantwortet, beantwortet das Projekt per E-Mail an info@daw-musicstation.de. Dieses Kapitel beschreibt, was die Website bietet, wie die Online-Fassung dieses Handbuchs adressiert und durchsucht wird und welche Form die Marke, die Startseite und die Symbole der Website haben.

Die Website

Die Website liegt unter https://daw-musicstation.de. Ihre Einstiegsseite ist eine Sprachauswahl mit den beiden Verweisen Continue in English und Weiter auf Deutsch. Ein kleines Skript schickt Besucherinnen und Besucher, deren Browser Deutsch bevorzugt, direkt auf die deutsche Fassung; alle anderen bleiben auf der Auswahl. Beide Verweise funktionieren auch ohne dieses Skript, die Auswahl ist also nie eine Sackgasse. Jede weitere Seite gibt es in beiden Sprachen, unter /de/... und unter /en/...; die Sprache ist ein Abschnitt der Adresse und sonst nichts. Keine Seite setzt ein Cookie, und keine Seite schreibt in den Speicher Ihres Browsers - es wird also nirgends eine Sprachwahl für Sie gespeichert. Der Sprachumschalter in der Kopfzeile wird aus der Adresse der Seite gebildet, auf der Sie gerade sind; beim Umschalten bleiben Sie auf derselben Seite der anderen Sprache.

Die Hauptnavigation der Kopfzeile (Start, Funktionen, Versionen, Download, Handbuch, Warteliste) und die Seitenspalte der Fußzeile (Handbuch, Versionen, Download, Warteliste, Kontakt, Datenschutz, Impressum) stehen auf jeder Seite. Die Teile der Website:

• Die Startseite (/<lang>/) beginnt mit der Produktaussage, den beiden Aktionen Auf die Warteliste und Alle Funktionen ansehen und der Zeile mit Version und Plattform darunter. Danach listet sie die Funktionen, die es heute gibt, und die, die in Entwicklung sind, und schließt mit dem Download-Hinweis und dem Hinweis auf die Warteliste.
• Die Funktionsübersicht (/<lang>/features/) mit einer Seite je Funktion (/<lang>/features/<slug>/). Eine Funktionsseite sagt, was die Funktion tut, welche Bedienelemente es gibt, welche Handbuchabschnitte sie beschreiben und welche Grenzen in der Praxis zählen. Das Verfügbarkeitskennzeichen neben einer Funktion wird aus den Funktionsdaten der Website abgeleitet und nie auf der Seite formuliert: Eine Funktion, die es gibt, trägt Verfügbar seit <version>, eine Funktion in Entwicklung ist als geplant gekennzeichnet und nennt die Veröffentlichung, für die sie geplant ist, und eine Funktion ohne zugesagten Termin sagt genau das und nennt kein Datum. Geplante Funktionen stehen in einer eigenen Gruppe, damit keine von ihnen wie ausgeliefert aussieht. Die aktuelle Veröffentlichung ist MusicStation 0.3.0; die Session-Ansicht ist mit ihr erschienen.
• Die Versionshistorie (/<lang>/versions/) zeigt jede Veröffentlichung von MusicStation mit den Versionshinweisen, die mit ihr erschienen sind, die neueste zuerst, und kennzeichnet die laufende Version als Aktuelle Version. Es sind dieselben Hinweise, die die Anwendung zeigt (siehe Versionshinweise und Neuerungen). Jede Versionsüberschrift ist ihr eigener dauerhafter Link, gebildet aus der Versionsnummer mit Strichen statt Punkten: MusicStation 0.3.0 steht unter /<lang>/versions/#v0-3-0. Ein Veröffentlichungsdatum zeigt die Seite nicht - das Projekt speichert keines, und keines wird erfunden. Der Atom-Feed /<lang>/versions/feed.xml liefert dieselben Veröffentlichungen für ein Feed-Programm; jede Seite verlinkt ihn im Kopf.
• Der Downloadbereich (/<lang>/download/) bietet den veröffentlichten Build für macOS auf Apple Silicon (arm64, macOS 13 oder neuer) zusammen mit den Versionshinweisen dieser Version. Solange kein Build veröffentlicht ist, sagt die Seite das offen und verweist stattdessen auf die Warteliste: Ein nicht gesetztes Download-Ziel bedeutet noch kein öffentlicher Download, niemals eine geratene Datei.
• Das Online-Handbuch (/<lang>/manual/) ist dieses Handbuch im Web, Kapitel für Kapitel; der nächste Abschnitt dieses Kapitels beschreibt es.
• Die Warteliste (/<lang>/waitlist/) ist das einzige Formular der Website, das Daten übermittelt - das Suchfeld einer Handbuchseite ist ebenfalls ein Formular, schickt aber niemals eine Suchanfrage irgendwohin. Sie fragt nach Ihrer E-Mail-Adresse, optional nach dem, worauf Sie warten (macOS, Windows, Linux oder die iPad-Fernbedienung), und nach Ihrer Einwilligung, nennt das Double-Opt-in - gespeichert wird Ihre Adresse erst, nachdem Sie den Link in der Bestätigungsmail angeklickt haben - und verlinkt die Datenschutzerklärung. Ohne JavaScript ist das Absenden eine gewöhnliche Formularübermittlung, und die Seite nennt Ihnen anschließend die Antwort; das Komfort-Skript meldet nur den Sendestatus und die Antwort, ohne die Seite zu verlassen, und es wird nur geladen, solange die Website eine Schnittstelle für Einträge hat. Solange es keine gibt, ist das Formular sichtbar abgeschaltet, nennt den Grund und verweist auf die E-Mail-Adresse.
• Die Kontaktseite (/<lang>/contact/) sammelt die drei Gründe zu schreiben - Fragen zur Beta, Fehlerberichte und Presseanfragen - und nennt für alle die Adresse: info@daw-musicstation.de.
• Die beiden Rechtstexte (/<lang>/legal/privacy/ und /<lang>/legal/imprint/) sind die Datenschutzerklärung und das Impressum. Das Impressum ist die Anbieterkennzeichnung einer deutschen Website, in der jede Betreiberangabe als Platzhalter markiert ist, weil das Projekt sie nicht enthält; die Datenschutzerklärung beschreibt, was die Website im ausgelieferten Zustand tut, und nichts darüber hinaus.

Skripte, Cookies und Dritte. Die Website ist reines HTML und CSS. Es gibt genau drei Skripte, jedes auf der Seite, die es braucht; jede andere Seite lädt keines:

• der Sprachvorschlag auf der Auswahlseite unter /;
• die Suche auf den Handbuchseiten (siehe unten);
• das Komfort-Skript des Wartelisten-Formulars.

Keines der drei ist eine Voraussetzung. Ohne JavaScript funktionieren die Sprachverweise, die Funktionsseiten, die Versionshistorie, der Downloadbereich, das Wartelisten-Formular selbst und das ganze Handbuch - Seitenliste und Inhaltsverzeichnis eingeschlossen - weiterhin. Keine Seite setzt ein Cookie, und keine Seite benutzt den Speicher des Browsers (localStorage, sessionStorage oder indexedDB). Nichts wird von einer fremden Herkunft geladen: Schriften, Styles, Bilder, Skripte und der Suchindex des Handbuchs kommen von der Website selbst. Es gibt keine Analyse, keine Werbung und keinen Dienst eines Dritten hinter der Website.

Arbeitsablauf: von der Website zum Build

1. Öffnen Sie https://daw-musicstation.de und wählen Sie Ihre Sprache, oder gehen Sie direkt auf /de/ oder /en/.
2. Lesen Sie die Funktionsübersicht: Dort steht, was es heute gibt und was noch in Entwicklung ist; eine Funktionsseite verlinkt die Handbuchkapitel, die ihre Bedienelemente beschreiben, zum Beispiel Session.
3. Öffnen Sie die Versionshistorie und lesen Sie die Hinweise zur aktuellen Version - es sind dieselben Hinweise, die MusicStation ▸ Neuerungen in der Anwendung zeigt (siehe Neuerungen).
4. Gehen Sie in den Downloadbereich: Nehmen Sie den veröffentlichten Build, oder lassen Sie sich auf die Warteliste eintragen, solange es keinen gibt.
5. Lesen Sie ein Kapitel im Online-Handbuch (siehe unten), und behalten Sie die Adresse eines Abschnitts, zu dem Sie zurückkehren möchten - sie bleibt gültig.

Das Handbuch online

Die Website trägt dieses Handbuch: jedes Kapitel, auf Deutsch und auf Englisch, gerendert beim Bau der Website aus denselben Dateien, die die Anwendung bündelt. Beide Fassungen beschreiben deshalb dieselben Bedienelemente in denselben Abschnitten - nur der Rahmen um den Text unterscheidet sich.

Die Startseite des Handbuchs ist /<lang>/manual/; es ist das Inhaltsverzeichnis, das die Anwendung als Inhalt kennt. Jedes Kapitel hat eine eigene Seite unter /<lang>/manual/<page>/, wobei <page> der Pfad des Kapitels im Handbuch ohne Dateiendung ist: Dieses Kapitel ist die Datei web.md und steht deshalb unter /de/manual/web/ - im englischen Handbuch unter /en/manual/web/. Die Seitenliste in der Seitenspalte führt jedes Kapitel dieser Sprache in der Reihenfolge des Projekts auf, und die Verweise unter dem Text folgen derselben Reihenfolge zum vorherigen und zum nächsten Kapitel.

Jeder Abschnitt hat seine eigene Adresse. Die Anker des Handbuchs - die Kennungen, die der Quelltext vor ein dokumentiertes Bedienelement schreibt - werden unverändert übernommen, und es sind dieselben Kennungen, die die Hilfe der Anwendung verwendet. Ein Abschnitt ist damit an derselben Adresse an beiden Orten erreichbar, in der Form /<lang>/manual/<page>/#<help-id>. Die Einstellung Sprache zum Beispiel steht unter /de/manual/interface/settings/#settings.language, und das englische Handbuch hat sie unter /en/manual/interface/settings/#settings.language. Eine Überschrift ohne eigenen Anker gehört zu dem Anker über ihr: Beide Abschnitte dieses Kapitels gehören zum Kapitelanker section.web, und das Inhaltsverzeichnis oben auf der Seite verlinkt genau diesen Anker.

F1 und das Online-Handbuch. F1 öffnet das Handbuch, das Teil der Anwendung ist, an der Kennung des Bedienelements unter dem Zeiger (siehe Hilfe zum Bedienelement unter dem Zeiger); die Anwendung führt ihre eigene Fassung des Textes mit und braucht dafür keine Netzwerkverbindung. Weil die Website dieselbe Kennung als Anker führt, ist der Abschnitt, den F1 Ihnen zeigt, auch im Online-Handbuch unter der oben genannten Adresse erreichbar - dieselbe Seite, dieselbe Kennung, nur das Präfix der Website davor.

Die Suche. Jede Handbuchseite hat in der Seitenspalte ein Suchfeld. Es durchsucht das Handbuch der Sprache der Seite: Die Seite lädt den Index /<lang>/manual/search-index.json - einen Eintrag je verankertem Abschnitt mit seiner Seite, seinem Anker, seiner Überschrift und einem kurzen Auszug seines Textes - und gleicht Ihre Suche im Browser damit ab. Der Index wird beim Bau der Website aus diesem Handbuch geschrieben und von der Website selbst ausgeliefert; es geht also keine Anfrage an einen Suchanbieter, und kein Dritter ist beteiligt. Groß- und Kleinschreibung und Umlaute werden gefaltet, deshalb findet ein eingetipptes u auch ü und ein strasse auch Straße; ein Treffer in einer Überschrift wiegt mehr als einer im Text, und es werden höchstens zwanzig Treffer aufgelistet, jeder davon ein Verweis auf seinen Abschnitt. Das Feld braucht JavaScript; der Hinweis direkt darunter sagt es. Escape leert es und die Trefferliste. Ohne JavaScript verlieren Sie das Feld und sonst nichts: Die Seitenliste und das Inhaltsverzeichnis sind gewöhnliche Verweise in der gebauten Seite und bringen Sie weiterhin überall hin.

Arbeitsablauf: vom Kapitel zum einzelnen Abschnitt

1. Öffnen Sie /<lang>/manual/ - dasselbe Inhaltsverzeichnis, mit dem die Hilfe der Anwendung beginnt.
2. Wählen Sie ein Kapitel in der Seitenliste, oder folgen Sie den Verweisen innerhalb eines Kapitels.
3. Nutzen Sie bei einem langen Kapitel das Inhaltsverzeichnis oben auf der Seite, um direkt zu einem Abschnitt zu springen.
4. Sie wissen nicht, welches Kapitel? Tippen Sie ein Wort in das Suchfeld; jeder Treffer verweist auf seinen Abschnitt. Ohne JavaScript nehmen Sie stattdessen die Seitenliste.
5. Behalten oder teilen Sie die Adresse eines Abschnitts, zum Beispiel /de/manual/interface/session/#session.grid. Der Anker in dieser Adresse ist die Kennung, mit der die Hilfe der Anwendung denselben Abschnitt öffnet.

Die Marke

Die Marke von MusicStation ist das Session-Raster, das Motiv, auf dem das Produkt aufbaut: ein Clip-Raster aus fünf Spalten und vier Zeilen. Ein Clip-Slot ist 16 Einheiten breit, zwischen zwei Slots liegt ein Abstand von 4, die Ecken sind mit Radius 3 gerundet, und die Zeichenfläche ist 0 0 96 76. Die leuchtenden Felder ergeben ein M - Spalte 0 und Spalte 4 vollständig über alle vier Zeilen, dazu das Feld in Spalte 1/Zeile 1 und das Feld in Spalte 3/Zeile 1 -; alle übrigen Felder sind unbeleuchtet. Ein Feld des Rasters spielt: das Feld in Spalte 2/Zeile 2, die Mitte des Buchstabens. Leuchtende Felder tragen die Akzentfarbe, unbeleuchtete das Grau der Felder, und das spielende Feld das Bernstein der Palette (#faab3f auf dem dunklen Grund der Marke). Das Raster ist das Motiv der Session-Ansicht (Session-Raster), reduziert auf fünf Spalten und vier Zeilen und auf den einen spielenden Slot, den die Marke braucht.

Das Raster wechselt nie, welche Felder leuchten: Die Marke wird nicht gedreht, nicht verzerrt und nicht umrandet, und eine zweite Zeichnung von ihr gibt es nirgends. Bewegt werden darf sich nur das spielende Feld - wo Bewegung erlaubt ist, pulsiert es einmal je Takt. Verlangt Ihr Betriebssystem dagegen weniger Bewegung, steht das Raster still und zeigt weiterhin das leuchtende M und das bernsteinfarbene spielende Feld. Um die Marke liegt an jeder Seite eine freie Fläche von einem Feld (16 ihrer 96 Einheiten); gezeichnet wird sie ab 24 Pixel Breite, und nur die kleine Favicon-Vorlage geht bis auf 16 Pixel hinunter. Die Marke gibt es in zwei Fassungen: mark.svg für dunkle Gründe und mark-light.svg für helle, die den zweiten Satz der Farbtabelle verwendet (#f9fafb, #0072d5, #ced1d5, #e57600).

Auf der Website wird die Marke über die Klassen ihrer Felder umgefärbt - msh-on für ein leuchtendes Feld, msh-off für ein unbeleuchtetes und msh-hot für das spielende -; jedes Feld behält zusätzlich den Farbwert seiner Datei, damit dieselbe Zeichnung auch dort lesbar bleibt, wo kein Stylesheet gilt: in einer heruntergeladenen Datei, in einem Vorschaubild oder in einem Programm ohne CSS. Keine Vorlage der Website trägt eine Farbe der Marke, und in den Quellen der Website liegt keine Kopie der Marke: Sie wird beim Bau der Website aus docs/brand/ gelesen, und eine Vorlage, die sich nicht auswerten lässt, bricht den Bau ab, statt eine halb gezeichnete Marke auszuliefern.

Neben der Marke steht die Wortmarke MusicStation - Music in Schnittstärke 800 und Station in Schnittstärke 400, gesetzt in Archivo mit der erweiterten Breite von 118 Prozent und dem Zeichenabstand von -0.01em. Die Höhe der Marke entspricht der Versalhöhe der Wortmarke, und zwischen beiden liegt ein Feld der Marke als Abstand. Die Schrift gehört zur Website und wird von der Website selbst ausgeliefert; die Schriftzüge bleiben echter Text, sind auf jeder Bildschirmauflösung scharf und lassen sich lesen und markieren. Marke und Wortmarke zusammen sind die Verbindung: erst die Marke, dann die Wortmarke. Sie steht in der Kopfzeile jeder Seite der Website; die beiden Vorschaubilder eines geteilten Verweises zeigen die Marke neben der Produktaussage und der Adresse. Das Fenster der Anwendung selbst behält seinen Systemtitel, die Verbindung gehört also zur Website und nicht zur Titelleiste des Programms.

Die Marke ist außerdem das App-Symbol beider Anwendungen, und jedes der beiden wird aus seiner eigenen Vorlage in docs/brand/ abgeleitet - nie ein zweites Mal gezeichnet:

Beide sind Dateien und nie eine lebende Fläche: Sie folgen weder der Akzentfarbe noch dem Thema noch der Oberflächengröße eines Geräts, und sie animieren nie. Beide zeigen dasselbe Raster mit dem leuchtenden M und dem bernsteinfarbenen spielenden Feld und unterscheiden sich nur in ihrem Rahmen: Das macOS-Symbol setzt die Marke auf eine gerundete Kachel, die in der quadratischen Fläche eingerückt liegt; das iPad-Symbol füllt die ganze Fläche aus, weil iOS seine Ecken selbst rundet. Jedes Symbol des Produkts stammt aus den Vorlagen in docs/brand/.

Der Hero der Startseite

Die Startseite einer Sprache (/<lang>/) beginnt mit dem Hero: der Produktaussage, den beiden Wegen hinein und dem bewegten Clip-Raster. Er ist der erste Abschnitt der Seite und trägt die einzige <h1> der Seite; das Raster ist keine Verzierung, sondern das Motiv der Marke - seine leuchtenden Felder sind das M der Marke, das beim Bau der Website aus docs/brand/mark.svg gelesen und in ein Session-Raster gesetzt wird, das größer ist als die Marke selbst: acht Spalten und sechs Zeilen. Durch die beiden äußeren Zeilen läuft ein Clip: Ein Slot wird vorgemerkt, startet und stoppt in Schritten von je einem Takt, innerhalb des acht Sekunden langen Zyklus von vier Takten, den das Stylesheet mit 120 BPM abspielt; der Balken unter dem Raster zeigt, wo dieser Clip gerade steht. Der Hero ist so hoch wie sein Inhalt, nichts an ihm hängt von der Fensterhöhe ab, und er braucht kein JavaScript; auf einem Telefon steht die Aussage über dem Raster, ab einem breiten Fenster stehen beide nebeneinander. Raster und Balken tragen je eine Beschreibung für assistive Technik in der Sprache der Seite, denn die laufende Demo selbst ist Verzierung.

Symbole und Favicons

Auch der Browser eines Besuchers fragt nach Symbolen, und der Bau der Website antwortet aus denselben Vorlagen: Jedes Symbol und jedes Favicon der Website entsteht beim Bau der Website, entnommen der Marke in docs/brand/; nichts davon wird im Projekt abgelegt oder ein zweites Mal gezeichnet. Eine Vorlage, die sich nicht lesen lässt, bricht den Bau ab - eine Seite liefert also nie ein halb gezeichnetes Symbol aus.

Jede Seite nennt vier davon in ihrem Kopf, in dieser Reihenfolge: das Vektor-Favicon mit seinem Medientyp, den Symbol-Container mit den Größen seiner drei Fassungen, das Apple-Touch-Symbol und das Web-App-Manifest. Daneben nennt der Kopf das Vorschaubild der eigenen Sprache mit seiner Größe und einer kurzen Beschreibung der Karte: Ein Verweis aus dem englischen Teil der Website zeigt die englische Karte, einer aus dem deutschen Teil die deutsche. Die beiden Seiten ohne eigene Sprache - die Sprachauswahl unter / und die Fehlerseite - verweisen auf das englische Bild. Das Manifest ist die eine Datei des Satzes, die zu keiner Sprache gehört: Es wird einmal für die ganze Website geschrieben und nennt das Produkt, nicht eine Seite.

Die beiden Favicon-Vorlagen sind für das Pixelraster gezeichnet: favicon-32.svg bedient die kleinen Größen von 24 bis 48 Pixeln und favicon-16.svg das Symbol mit 16 Pixeln, und ihre Felder sind auf dieses Raster abgestimmt. Die Symbole der beiden Anwendungen sind der umgekehrte Fall: Sie liegen als Dateien in den beiden Bundles und werden aus denselben Vorlagen in docs/brand/ neu erzeugt, sobald sich die Marke ändert. Für alle gilt dieselbe Regel: aus der einen Vorlage abgeleitet und nie ein zweites Mal gezeichnet.

Keine dieser Dateien wird im Projekt abgelegt: Der Bau schreibt sie in die Ausgabe der Website, und ein neuer Bau nach einer Änderung an einer Vorlage schreibt sie erneut - ein veraltetes Symbol kann es deshalb nicht geben. Eine Kopie der Marke unter website/ gibt es nirgends; docs/brand/ bleibt der einzige Ort, an dem die Marke gezeichnet wird.