DogFatherGitandClaude Opus 5
95c4599baa
Deutsch oeffnet mit „ und schliesst mit “. An 199 Stellen, die ein
Mensch liest, stand als Schlusszeichen ein GERADES " -- „Nächstes"
statt „Nächstes“. Auf sechzehn oeffentlichen Seiten, in vierzig
Dateien des Workspace und in zwoelf Servermodulen, die Texte
verschicken.
Auf dem Bildschirm sieht man den Unterschied sofort. Beim Schreiben
nicht: Das gerade " liegt auf der Tastatur, die anderen nicht.
WARUM EIN ERSTER ANLAUF ZURUECKGENOMMEN WURDE
Ein gerades " ist an vielen Stellen SYNTAX und kein Schriftzeichen --
Grenze einer Zeichenkette, Grenze eines HTML-Attributs, Zeichen in
einem regulaeren Ausdruck. Wer stumpf ersetzt, macht aus
„<a href="https://… ein kaputtes Attribut
/^["'„»\s]+|["'“«.\s]+$/ einen kaputten Ausdruck
"… nichts „mal " + "eben …" eine kaputte Zeichenkette
DIE UNTERSCHEIDUNG LAEUFT AN MERKMALEN, NICHT AN EINER LISTE
< > = dazwischen -> HTML-Marke oder Attribut
endet auf Leerzeichen -> die Zeichenkette hoert hier auf, der
Satz geht in der naechsten Zeile weiter.
Ein deutsches Schlusszeichen steht NIE
hinter einem Leerzeichen.
Rueckstrich mittendrin -> regulaerer Ausdruck
${ ohne } -> mitten in einem Ausdruck
Eine Liste erlaubter Ausnahmen waere die naechste, die niemand
pflegt. Zwoelf Stellen bleiben dadurch stehen, alle zwoelf einzeln
angesehen und alle zwoelf zu Recht -- dort steht das richtige
Schlusszeichen ohnehin weiter unten im Satz.
Fuenf davon waren allerdings ECHTE Fehler HINTER dem Link
(`…>HasiDog</a>".`) -- die erste Regel hatte nur das Attribut
gesehen, nicht den Satz danach. Gezielt nachgezogen.
Ein maskiertes `\"` in workspace-vorlagen.js (28 Hooks) wird zu “ --
ohne Rueckstrich, denn “ begrenzt nichts.
KOMMENTARE BLEIBEN, WIE SIE SIND. Dort liest es niemand ausser mir;
eine Wache, die auch Kosmetik anmahnt, wird weggeklickt. Beim ersten
Messen fielen ausserdem acht Stellen aus buehne.html faelschlich an,
weil `/* */` in HTML (in <style> und <script>) nicht ausgeblendet
war -- jetzt schon.
DIE WACHE DAZU
pruef-struktur prueft es ab sofort mit derselben Regel: 322 Dateien
mit sichtbarem Text, 0 Funde, und die zwoelf bewussten Ausnahmen
werden GEZAEHLT und genannt (erlaubt: 12). Eine Ausnahme, die niemand
sieht, waechst -- und irgendwann steht der echte Fall darin.
GEPRUEFT
pruef-struktur 59 -> 68 Pruefungen, 0 Fehler
node --check auf allen geaenderten JS-Dateien
nachgemessen: 199 geaendert, 12 mit Grund stehen geblieben
gruen geblieben: bewerbung-aufgaben 163, nachwuchs 262,
reaktion 421, support 63, content 45, terminregel 35, treff 85
Und nachgesehen, ob eine Pruefung noch die alte Schreibweise
ERWARTET: 13 Fundstellen, alle dreizehn nur Text in ihrer eigenen
Ausgabe, keine einzige ein Vergleich mit dem Seitentext.
GEGENPROBE: In reaktion.html ein Schlusszeichen zurueckgedreht ->
„workspace/reaktion.html:546 „Nächstes"", mit Datei und Zeile. Und
die Erkennung einzeln gegen HTML-Attribut, fortgesetzte
Zeichenkette, regulaeren Ausdruck und eingesetzten Wert geprueft.
Stempel gesetzt: workspace 670 Verweise in 45 Dateien, oeffentlich
554 in 48 Seiten.
Co-Authored-By: Claude Opus 5 <[email protected]>
195 lines
12 KiB
HTML
195 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de" data-i18n-titel="seiten_titel">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<!-- viewport-fit=cover ist die Voraussetzung dafuer, dass env(safe-area-inset-*)
|
|
ueberhaupt einen Wert liefert. Ohne diese Angabe gibt jedes env() null zurueck
|
|
-- die Sicherheitsabstaende im CSS waeren totes Recht. Zusammen mit
|
|
apple-mobile-web-app-status-bar-style=black-translucent (siehe unten) laeuft
|
|
der Inhalt sonst installiert unter Uhr und Akkuanzeige. -->
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
|
<title>Ablauf — Dogfather Webdesign</title>
|
|
<meta name="description" content="Von der Anfrage bis zur Übergabe: sieben Schritte, jeweils mit dem, was du machst, was ich mache und was am Ende dabei herauskommt." />
|
|
<meta name="robots" content="noindex, nofollow, noarchive" />
|
|
<link rel="icon" type="image/png" href="/assets/img/app-symbole/webdesign-32.png?v=202610010152" />
|
|
<meta name="theme-color" content="#564e95" />
|
|
<link rel="manifest" href="/webdesign/app.webmanifest" />
|
|
<link rel="apple-touch-icon" href="/assets/img/app-symbole/webdesign-180.png?v=202610010152" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
|
<meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
|
|
<link rel="stylesheet" href="/assets/css/main.css?v=202610010152" />
|
|
<link rel="stylesheet" href="/assets/css/webdesign.css?v=202610010152" />
|
|
<style>
|
|
/* Zeitstrahl: die Linie verbindet die Nummernkreise. Sie liegt hinter
|
|
den Kreisen (z-index) und endet beim letzten Schritt, damit sie nicht
|
|
ins Leere weiterläuft. */
|
|
.abl-strahl { position: relative; }
|
|
.abl-strahl::before {
|
|
content: "";
|
|
position: absolute; left: 23px; top: 24px; bottom: 24px; width: 2px;
|
|
background: linear-gradient(180deg, var(--wd-blau-tief), var(--wd-lila-tief));
|
|
opacity: .35;
|
|
}
|
|
@media (max-width: 640px) { .abl-strahl::before { display: none; } }
|
|
|
|
.abl-schritt { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 1.2rem; margin-bottom: 1.1rem; }
|
|
@media (max-width: 640px) { .abl-schritt { grid-template-columns: 1fr; gap: .7rem; } }
|
|
|
|
.abl-nr {
|
|
position: relative; z-index: 1;
|
|
width: 48px; height: 48px; border-radius: 50%;
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-family: var(--font-head); font-weight: 800; font-size: 1.1rem;
|
|
color: var(--wd-blau); background: #0b1320;
|
|
border: 2px solid var(--wd-rand-stark);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.abl-schritt--lila .abl-nr { color: var(--wd-lila); border-color: rgb(var(--wd-lila-rgb) / .4); }
|
|
@media (max-width: 640px) { .abl-nr { width: 40px; height: 40px; font-size: 1rem; } }
|
|
|
|
.abl-karte h2 { font-size: clamp(1.25rem, 3vw, 1.6rem); margin-bottom: .9em; }
|
|
.abl-rollen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
|
|
@media (max-width: 820px) { .abl-rollen { grid-template-columns: 1fr; gap: .8rem; } }
|
|
.abl-rolle h3 { font-size: 0.8rem; letter-spacing: .13em; text-transform: uppercase; margin-bottom: .35em; color: var(--wd-blau); }
|
|
.abl-schritt--lila .abl-rolle h3 { color: var(--wd-lila); }
|
|
/* Die dritte Spalte ist das Ergebnis — bekommt einen leichten Rahmen,
|
|
damit sie sich von "wer macht was" abhebt. */
|
|
.abl-rolle--erg {
|
|
background: rgb(var(--wd-blau-rgb) / .05); border: 1px solid var(--wd-rand);
|
|
border-radius: 10px; padding: .8rem .9rem; margin: -.8rem -.9rem;
|
|
}
|
|
.abl-rolle p { margin: 0; font-size: .98rem; }
|
|
</style>
|
|
</head>
|
|
<body class="wd">
|
|
|
|
<div id="wd-kopf"></div>
|
|
|
|
<main id="wd-inhalt">
|
|
|
|
<section class="wd-abschnitt wd-abschnitt--eng" style="padding-top:clamp(2.4rem,6vw,4rem)">
|
|
<div class="wd-container">
|
|
<span class="wd-eyebrow" data-i18n="ab_eyebrow">Ablauf</span>
|
|
<h1 data-i18n="ab_h1">Sieben Schritte, keine Überraschungen</h1>
|
|
<p class="wd-lead" style="max-width:72ch" data-i18n="ab_lead">Jeder Schritt endet mit etwas, das du sehen und prüfen kannst. Du weißt jederzeit, wo dein Projekt steht und was als Nächstes von wem gebraucht wird.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="wd-abschnitt" style="padding-top:0">
|
|
<div class="wd-container">
|
|
<div class="abl-strahl">
|
|
|
|
<div class="abl-schritt wd-auf">
|
|
<span class="abl-nr" aria-hidden="true">01</span>
|
|
<div class="wd-karte abl-karte">
|
|
<h2 data-i18n="s1_h2">Anfrage</h2>
|
|
<div class="abl-rollen">
|
|
<div class="abl-rolle"><h3 data-i18n="du_machst">Du machst</h3><p data-i18n="s1_du">Formular ausfüllen — Ziel, Umfang, Budgetrahmen, Wunschtermin.</p></div>
|
|
<div class="abl-rolle"><h3 data-i18n="ich_mache">Ich mache</h3><p data-i18n="s1_ich">Anfrage prüfen und innerhalb weniger Tage melden.</p></div>
|
|
<div class="abl-rolle abl-rolle--erg"><h3 data-i18n="ergebnis">Am Ende steht</h3><p data-i18n="s1_erg">Eine Bestätigung mit Zusammenfassung dessen, was du angegeben hast.</p></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="abl-schritt abl-schritt--lila wd-auf">
|
|
<span class="abl-nr" aria-hidden="true">02</span>
|
|
<div class="wd-karte wd-karte--lila abl-karte">
|
|
<h2 data-i18n="s2_h2">Briefing</h2>
|
|
<div class="abl-rollen">
|
|
<div class="abl-rolle"><h3 data-i18n="du_machst">Du machst</h3><p data-i18n="s2_du">Fragen beantworten und sagen, was du schon an Texten, Bildern und Logo hast.</p></div>
|
|
<div class="abl-rolle"><h3 data-i18n="ich_mache">Ich mache</h3><p data-i18n="s2_ich">Nachfragen, wo etwas unklar ist — lieber jetzt als mitten im Bau.</p></div>
|
|
<div class="abl-rolle abl-rolle--erg"><h3 data-i18n="ergebnis">Am Ende steht</h3><p data-i18n="s2_erg">Ein gemeinsames Bild davon, was die Seite können muss.</p></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="abl-schritt wd-auf">
|
|
<span class="abl-nr" aria-hidden="true">03</span>
|
|
<div class="wd-karte abl-karte">
|
|
<h2 data-i18n="s3_h2">Angebot & Anzahlung</h2>
|
|
<div class="abl-rollen">
|
|
<div class="abl-rolle"><h3 data-i18n="du_machst">Du machst</h3><p data-i18n="s3_du">Angebot lesen, Fragen stellen, annehmen oder ablehnen — und bei Annahme die 30 % überweisen.</p></div>
|
|
<div class="abl-rolle"><h3 data-i18n="ich_mache">Ich mache</h3><p data-i18n="s3_ich">Preis, Umfang, Zeitrahmen und alles, was extra kostet, schriftlich festhalten.</p></div>
|
|
<div class="abl-rolle abl-rolle--erg"><h3 data-i18n="ergebnis">Am Ende steht</h3><p data-i18n="s3_erg">Ein reservierter Starttermin. Vorher wird kein Zeitfenster blockiert.</p></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="abl-schritt abl-schritt--lila wd-auf">
|
|
<span class="abl-nr" aria-hidden="true">04</span>
|
|
<div class="wd-karte wd-karte--lila abl-karte">
|
|
<h2 data-i18n="s4_h2">Design</h2>
|
|
<div class="abl-rollen">
|
|
<div class="abl-rolle"><h3 data-i18n="du_machst">Du machst</h3><p data-i18n="s4_du">Entwurf ansehen und Rückmeldung geben — am besten gesammelt statt in vielen einzelnen Nachrichten.</p></div>
|
|
<div class="abl-rolle"><h3 data-i18n="ich_mache">Ich mache</h3><p data-i18n="s4_ich">Aufbau, Farben und Schriften entwerfen — und dir Handy- und Computeransicht zeigen, nicht nur eine davon.</p></div>
|
|
<div class="abl-rolle abl-rolle--erg"><h3 data-i18n="ergebnis">Am Ende steht</h3><p data-i18n="s4_erg">Ein freigegebener Entwurf. Erst danach wird gebaut.</p></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="abl-schritt wd-auf">
|
|
<span class="abl-nr" aria-hidden="true">05</span>
|
|
<div class="wd-karte abl-karte">
|
|
<h2 data-i18n="s5_h2">Entwicklung</h2>
|
|
<div class="abl-rollen">
|
|
<div class="abl-rolle"><h3 data-i18n="du_machst">Du machst</h3><p data-i18n="s5_du">Fehlende Inhalte nachliefern, falls noch welche offen sind.</p></div>
|
|
<div class="abl-rolle"><h3 data-i18n="ich_mache">Ich mache</h3><p data-i18n="s5_ich">Die Seite bauen — mit den echten Inhalten, nicht mit Blindtext.</p></div>
|
|
<div class="abl-rolle abl-rolle--erg"><h3 data-i18n="ergebnis">Am Ende steht</h3><p data-i18n="s5_erg">Eine benutzbare Seite auf einer Vorschauadresse, die nur du und ich kennen.</p></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="abl-schritt abl-schritt--lila wd-auf">
|
|
<span class="abl-nr" aria-hidden="true">06</span>
|
|
<div class="wd-karte wd-karte--lila abl-karte">
|
|
<h2 data-i18n="s6_h2">Tests</h2>
|
|
<div class="abl-rollen">
|
|
<div class="abl-rolle"><h3 data-i18n="du_machst">Du machst</h3><p data-i18n="s6_du">Selbst durchklicken — besonders auf deinem eigenen Handy.</p></div>
|
|
<div class="abl-rolle"><h3 data-i18n="ich_mache">Ich mache</h3><p data-i18n="s6_ich">Jedes Formular, jeden Link und jeden Fehlerfall durchspielen, auf Handy, Tablet und Computer.</p></div>
|
|
<div class="abl-rolle abl-rolle--erg"><h3 data-i18n="ergebnis">Am Ende steht</h3><p data-i18n="s6_erg">Eine Liste dessen, was geprüft wurde — und was bewusst nicht enthalten ist.</p></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="abl-schritt wd-auf">
|
|
<span class="abl-nr" aria-hidden="true">07</span>
|
|
<div class="wd-karte abl-karte">
|
|
<h2 data-i18n="s7_h2">Freigabe & Übergabe</h2>
|
|
<div class="abl-rollen">
|
|
<div class="abl-rolle"><h3 data-i18n="du_machst">Du machst</h3><p data-i18n="s7_du">Ausdrücklich freigeben und den Restbetrag begleichen.</p></div>
|
|
<div class="abl-rolle"><h3 data-i18n="ich_mache">Ich mache</h3><p data-i18n="s7_ich">Live schalten, dich einweisen und die Zugänge übergeben.</p></div>
|
|
<div class="abl-rolle abl-rolle--erg"><h3 data-i18n="ergebnis">Am Ende steht</h3><p data-i18n="s7_erg">Deine Seite, deine Zugänge, deine Nutzungsrechte. Betreuung ist optional, kein Zwang.</p></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="wd-hinweis wd-auf" style="margin-top:1.6rem">
|
|
<p class="wd-hinweis-titel" data-i18n="ab_wichtig_titel">Keine Veröffentlichung ohne deine Freigabe</p>
|
|
<p data-i18n="ab_wichtig_text">Die Seite geht ausschließlich dann online, wenn du das ausdrücklich sagst. Das gilt auch für die Aufnahme ins Portfolio — beides ist getrennt und beides brauchst du nicht zu erlauben.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="wd-abschnitt wd-abschnitt--gehoben">
|
|
<div class="wd-container wd-container--schmal">
|
|
<h2 class="wd-auf" data-i18n="ab_dauer_h2">Wie lange dauert das insgesamt?</h2>
|
|
<p class="wd-lead wd-auf" data-i18n="ab_dauer_p">Die Zeitrahmen auf der Preisseite gelten ab dem Eingang der Anzahlung — nicht ab der ersten Nachricht. Der häufigste Grund für Verzögerungen ist nicht die Technik, sondern dass Texte oder Bilder noch fehlen. Deshalb wird im Formular gleich danach gefragt.</p>
|
|
<div class="wd-btn-reihe">
|
|
<a class="wd-btn wd-btn--haupt" href="/webdesign/anfrage.html" data-i18n="nav_anfrage">Projekt anfragen</a>
|
|
<a class="wd-btn wd-btn--zweit" href="/webdesign/leistungen.html" data-i18n="ab_zu_preise">Zu den Zeitrahmen</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<div id="wd-fuss"></div>
|
|
|
|
<script src="/assets/js/i18n-wd-ablauf.js?v=202610010152"></script>
|
|
<script src="/assets/js/wd-core.js?v=202610010152"></script>
|
|
</body>
|
|
</html>
|