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]>
502 lines
27 KiB
HTML
502 lines
27 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>Portfolio — Dogfather Webdesign</title>
|
|
<meta name="description" content="Echte Projekte statt erfundener Beispiele: Website, Onlineshop, Spieleseite, Buchhaltung, Auswertung und eine Rechtsplattform — jeweils mit Ausgangslage, Lösung und Ergebnis." />
|
|
<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>
|
|
/* GENAU zwei Projekte nebeneinander.
|
|
|
|
Zuerst stand hier auto-fit mit einer Mindestbreite. Das fuellt aber
|
|
so viele Spalten, wie hineinpassen -- auf einem breiten Schirm
|
|
waren es drei. Gewuenscht sind ausdruecklich zwei, also steht die
|
|
Zahl jetzt fest.
|
|
|
|
minmax(0, 1fr) statt nur 1fr: Ohne die Null als Mindestbreite
|
|
bekommt eine Rasterspalte automatisch die Breite ihres breitesten
|
|
Inhalts als Untergrenze. Ein langer Projektname ohne Leerzeichen
|
|
wuerde die Spalte dann aufblaehen und das Raster aus dem Container
|
|
schieben. */
|
|
.pfo-raster {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: clamp(1.2rem, 2.4vw, 2rem);
|
|
/* align-items bleibt auf dem Standard "stretch": Alle Kacheln einer
|
|
Zeile bekommen dieselbe Hoehe, naemlich die der hoechsten.
|
|
|
|
Vorher stand hier "start". Dann behaelt jede Kachel ihre
|
|
natuerliche Hoehe -- und weil die Projekttexte unterschiedlich
|
|
lang sind, standen zwei Kacheln nebeneinander, die sichtbar
|
|
verschieden hoch waren. */
|
|
}
|
|
|
|
/* Damit "stretch" wirkt, muss der Inhalt die zusaetzliche Hoehe auch
|
|
aufnehmen koennen. Ohne diese drei Zeilen waere die Kachel zwar
|
|
hoeher, ihr Inhalt bliebe aber oben kleben und darunter entstuende
|
|
ein leeres Feld. */
|
|
.pfo-raster .pfo-projekt { display: flex; flex-direction: column; }
|
|
.pfo-raster .pfo-inhalt { flex: 1; display: flex; flex-direction: column; }
|
|
|
|
/* Das letzte Element sitzt am unteren Rand, nicht direkt unter dem
|
|
Text. Dadurch stehen die Knoepfe zweier nebeneinanderliegender
|
|
Kacheln auf einer Linie, auch wenn die Texte unterschiedlich lang
|
|
sind -- genau das macht den Unterschied zwischen "gleich hoch" und
|
|
"sieht aufgeraeumt aus".
|
|
|
|
Bewusst :last-child statt einer Regel nur fuer den Knopf: Die
|
|
Buchhaltungs-Kachel hat gar keinen Knopf, sondern einen
|
|
Hinweistext an dieser Stelle. Der soll genauso unten stehen.
|
|
|
|
Die Abstaende standen vorher als style-Angabe direkt im HTML. Eine
|
|
solche Angabe schlaegt jede Regel aus dem Stilblatt -- die Knoepfe
|
|
blieben deshalb an unterschiedlicher Hoehe kleben, obwohl die
|
|
Kacheln laengst gleich hoch waren. Sie sind jetzt entfernt. */
|
|
.pfo-raster .pfo-inhalt > :last-child {
|
|
margin-top: auto;
|
|
padding-top: 1rem;
|
|
/* Ohne das haengen die letzten Elemente unterschiedlich hoch ueber
|
|
dem Kachelboden: Ein Absatz bringt einen eigenen Abstand nach
|
|
unten mit, eine Knopfreihe nicht. Gemessen waren es 48 gegen 33
|
|
Punkte -- bei sonst exakt gleich hohen Kacheln faellt genau das
|
|
auf. */
|
|
margin-bottom: 0;
|
|
}
|
|
@media (max-width: 760px) {
|
|
/* Darunter waeren zwei Spalten so schmal, dass Ueberschrift und
|
|
Schilder im Kachelkopf umbrechen. Dann lieber untereinander. */
|
|
.pfo-raster { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
/* Der Abstand kommt jetzt vom Raster. Ein zusaetzlicher Abstand unten
|
|
wuerde die Kacheln einer Zeile ungleich hoch aussehen lassen. */
|
|
.pfo-projekt { overflow: hidden; padding: 0; margin-bottom: 0; }
|
|
|
|
/* Bei halber Breite ist ein 16:10-Bild sehr hoch. Etwas flacher
|
|
gehalten, damit Bild und Text in der Kachel im Verhaeltnis bleiben. */
|
|
.pfo-raster .pfo-bild { aspect-ratio: 16 / 9; }
|
|
.pfo-bild {
|
|
width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center;
|
|
border-bottom: 1px solid var(--wd-rand);
|
|
}
|
|
.pfo-inhalt { padding: clamp(1.3rem, 3vw, 2rem); }
|
|
.pfo-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1rem; margin-bottom: 1rem; }
|
|
.pfo-kopf h2 { margin: 0; font-size: clamp(1.4rem, 3.2vw, 1.9rem); }
|
|
|
|
.pfo-block { margin-bottom: 1.1rem; }
|
|
.pfo-block h3 { font-size: 0.8rem; letter-spacing: .13em; text-transform: uppercase; color: var(--wd-blau); margin-bottom: .35em; }
|
|
.wd-karte--lila .pfo-block h3 { color: var(--wd-lila); }
|
|
.pfo-block p { margin: 0; }
|
|
|
|
/* Die Detailangaben stecken in einem aufklappbaren Bereich: die Karte
|
|
bleibt beim Überfliegen kurz, wer mehr will, klappt auf. Bewusst das
|
|
native Klapp-Element des Browsers, damit Tastatur und Screenreader
|
|
ohne Zusatzcode funktionieren.
|
|
(Der Tag-Name steht hier absichtlich nicht ausgeschrieben — sonst
|
|
zählt ihn die Tag-Balance-Prüfung in server/pruefe-webdesign-i18n.mjs
|
|
als öffnendes Element mit und meldet einen Fehler, den es nicht gibt.) */
|
|
.pfo-mehr { margin-top: .4rem; }
|
|
.pfo-mehr > summary {
|
|
cursor: pointer; list-style: none;
|
|
display: inline-flex; align-items: center; gap: .4rem;
|
|
min-height: 44px; padding: .5rem .1rem;
|
|
font-weight: 700; color: var(--wd-blau); font-size: .95rem;
|
|
}
|
|
.wd-karte--lila .pfo-mehr > summary { color: var(--wd-lila); }
|
|
.pfo-mehr > summary::-webkit-details-marker { display: none; }
|
|
.pfo-mehr > summary::after { content: "▾"; transition: transform var(--wd-zeit) ease; }
|
|
.pfo-mehr[open] > summary::after { transform: rotate(180deg); }
|
|
.pfo-mehr-inhalt { padding-top: .6rem; border-top: 1px solid var(--wd-rand); margin-top: .3rem; }
|
|
</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="pf_eyebrow">Portfolio</span>
|
|
<h1 data-i18n="pf_h1">Sechs Projekte, die es wirklich gibt</h1>
|
|
<p class="wd-lead" style="max-width:72ch" data-i18n="pf_lead">Jede dieser Seiten läuft wirklich, unter ihrer eigenen Adresse. Die Vorschaubilder sind echte Aufnahmen der laufenden Seiten — keine gezeichneten Entwürfe. Wo eine Aufnahme bearbeitet ist, steht der Grund beim Projekt dabei. Eine der Seiten ist bewusst gesperrt und lässt sich nicht besuchen; auch das steht dort.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Blickfang: der Monolith. Steht zwischen Einleitung und den
|
|
echten Projekten -- ein ruhiger Moment, bevor die Arbeit kommt.
|
|
aria-hidden, weil rein atmosphaerisch: Die Aussage der Seite
|
|
steckt in den Projekten darunter, nicht in diesem Bild. -->
|
|
<section class="wd-abschnitt wd-abschnitt--eng" style="padding-top:0">
|
|
<div class="wd-container wd-container--schmal">
|
|
<div class="wd-blickfang wd-blickfang--monolith wd-auf" aria-hidden="true"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="wd-abschnitt" style="padding-top:0">
|
|
<div class="wd-container">
|
|
|
|
<!-- ---------------- Projekt 1 ---------------- -->
|
|
<!-- Zwei Projekte nebeneinander. Der Umbruch auf eine Spalte
|
|
passiert ueber auto-fit, nicht ueber eine feste Bildschirm-
|
|
breite: So bricht das Raster genau dann um, wenn eine Kachel
|
|
schmaler als 420 Punkte wuerde -- unabhaengig davon, wie
|
|
breit das Fenster gerade ist oder ob spaeter eine Spalte
|
|
dazukommt. -->
|
|
<div class="pfo-raster">
|
|
<article class="wd-karte pfo-projekt wd-auf">
|
|
<img class="pfo-bild" src="/assets/img/wd-projekt-universe.jpg?v=202610010152"
|
|
alt="Startseite von dogfather-universe.com" width="1200" height="750" loading="lazy" decoding="async"
|
|
data-i18n-attr="alt:p1_alt" />
|
|
<div class="pfo-inhalt">
|
|
<div class="pfo-kopf">
|
|
<h2 data-i18n="p1_h2">Dogfather Universe</h2>
|
|
<span class="wd-tag" data-i18n="p1_art">Umfangreiche Website</span>
|
|
</div>
|
|
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="pf_ausgang">Ausgangslage</h3>
|
|
<p data-i18n="p1_ausgang">Drei getrennte Welten sollten unter ein Dach, ohne dass Besucher sich verlaufen.</p>
|
|
</div>
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="pf_loesung">Umgesetzte Lösung</h3>
|
|
<p data-i18n="p1_loesung">Eine Seite mit drei farblich klar getrennten Welten, gemeinsamer Navigation und durchgängig fünf Sprachen.</p>
|
|
</div>
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="pf_ergebnis">Ergebnis</h3>
|
|
<p data-i18n="p1_ergebnis">Seit August 2026 öffentlich und im täglichen Einsatz.</p>
|
|
</div>
|
|
|
|
<details class="pfo-mehr">
|
|
<summary data-i18n="pf_details">Details ansehen</summary>
|
|
<div class="pfo-mehr-inhalt">
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="pf_funktionen">Wichtigste Funktionen</h3>
|
|
<ul class="wd-liste">
|
|
<li data-i18n="p1_f1">Fünf Sprachen, inklusive echtem Schweizerdeutsch</li>
|
|
<li data-i18n="p1_f2">Verwaltungsbereich mit Rollen und Rechten</li>
|
|
<li data-i18n="p1_f3">Bewerbungssystem mit Statusverfolgung</li>
|
|
<li data-i18n="p1_f4">Supporter-Abo mit Zahlungsanbindung</li>
|
|
<li data-i18n="p1_f5">Automatische Live-Erkennung des Streams</li>
|
|
<li data-i18n="p1_f6">Als App installierbar</li>
|
|
</ul>
|
|
</div>
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="pf_stil">Stilrichtung</h3>
|
|
<p data-i18n="p1_stil">Dunkel und cinematisch, mit einer eigenen Leitfarbe je Welt.</p>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
|
|
<div class="wd-btn-reihe">
|
|
<a class="wd-btn wd-btn--zweit wd-btn--klein" href="https://dogfather-universe.com/" target="_blank" rel="noopener" data-i18n="pf_ansehen">Live ansehen</a>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- ---------------- Projekt 2 ---------------- -->
|
|
<article class="wd-karte wd-karte--lila pfo-projekt wd-auf">
|
|
<img class="pfo-bild" src="/assets/img/wd-projekt-vandiy.jpg?v=202610010152"
|
|
alt="Startseite von vans-diy-bastelbedarf.com" width="1200" height="696" loading="lazy" decoding="async"
|
|
data-i18n-attr="alt:p2_alt" />
|
|
<div class="pfo-inhalt">
|
|
<div class="pfo-kopf">
|
|
<h2 data-i18n="p2_h2">Van's DIY & Bastelbedarf</h2>
|
|
<span class="wd-tag wd-tag--lila" data-i18n="p2_art">Onlineshop</span>
|
|
</div>
|
|
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="pf_ausgang">Ausgangslage</h3>
|
|
<p data-i18n="p2_ausgang">Handgemachtes wurde bis dahin über Nachrichten verkauft.</p>
|
|
</div>
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="pf_loesung">Umgesetzte Lösung</h3>
|
|
<p data-i18n="p2_loesung">Ein vollständiger Shop mit Kategorien, Artikeln, Warenkorb und Gutscheincodes.</p>
|
|
</div>
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="pf_ergebnis">Ergebnis</h3>
|
|
<p data-i18n="p2_ergebnis">Artikel werden selbstständig angelegt und gepflegt, ohne Rückfrage und ohne Wartezeit.</p>
|
|
</div>
|
|
|
|
<details class="pfo-mehr">
|
|
<summary data-i18n="pf_details">Details ansehen</summary>
|
|
<div class="pfo-mehr-inhalt">
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="pf_funktionen">Wichtigste Funktionen</h3>
|
|
<ul class="wd-liste">
|
|
<li data-i18n="p2_f1">Kategorien, Artikel und Varianten</li>
|
|
<li data-i18n="p2_f2">Warenkorb und Kasse, auf dem Handy geprüft</li>
|
|
<li data-i18n="p2_f3">Gutscheincodes und Versandregeln</li>
|
|
<li data-i18n="p2_f4">Adminbereich für die eigenständige Artikelpflege</li>
|
|
<li data-i18n="p2_f5">Mehrsprachig</li>
|
|
</ul>
|
|
</div>
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="pf_stil">Stilrichtung</h3>
|
|
<p data-i18n="p2_stil">Dunkel mit warmen Violett- und Rosétönen, passend zum handgemachten Sortiment.</p>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
|
|
<div class="wd-btn-reihe">
|
|
<a class="wd-btn wd-btn--zweit wd-btn--klein" href="https://vans-diy-bastelbedarf.com/" target="_blank" rel="noopener" data-i18n="pf_ansehen">Live ansehen</a>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- ---------------- Projekt 3 ---------------- -->
|
|
<article class="wd-karte wd-karte--aqua pfo-projekt wd-auf">
|
|
<img class="pfo-bild" src="/assets/img/wd-projekt-zockeranstalt.jpg?v=202610010152"
|
|
alt="Startseite von zockeranstalt.dogfather-universe.com" width="1200" height="750" loading="lazy" decoding="async"
|
|
data-i18n-attr="alt:p3_alt" />
|
|
<div class="pfo-inhalt">
|
|
<div class="pfo-kopf">
|
|
<h2 data-i18n="p3_h2">Dogi's ZockerAnstalt</h2>
|
|
<span class="wd-tag wd-tag--aqua" data-i18n="p3_art">Spieleseite</span>
|
|
</div>
|
|
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="pf_ausgang">Ausgangslage</h3>
|
|
<p data-i18n="p3_ausgang">Die Runde wollte zusammen spielen, ohne sich bei einem fremden Anbieter anzumelden.</p>
|
|
</div>
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="pf_loesung">Umgesetzte Lösung</h3>
|
|
<p data-i18n="p3_loesung">Eine eigene Spielhalle mit acht selbst gebauten Spielen, mehrere davon gemeinsam in Echtzeit spielbar.</p>
|
|
</div>
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="pf_ergebnis">Ergebnis</h3>
|
|
<p data-i18n="p3_ergebnis">Läuft unter eigener Adresse auf dem eigenen Server.</p>
|
|
</div>
|
|
|
|
<details class="pfo-mehr">
|
|
<summary data-i18n="pf_details">Details ansehen</summary>
|
|
<div class="pfo-mehr-inhalt">
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="pf_funktionen">Wichtigste Funktionen</h3>
|
|
<ul class="wd-liste">
|
|
<li data-i18n="p3_f1">Acht Spiele, jedes einzeln gebaut</li>
|
|
<li data-i18n="p3_f2">Mehrspieler in Echtzeit, mit Live-Ranglisten</li>
|
|
<li data-i18n="p3_f3">Konten und Bestenlisten</li>
|
|
<li data-i18n="p3_f4">Ein Regelwerk zu jedem Spiel</li>
|
|
<li data-i18n="p3_f5">Eigene Fotos hochladbar, für ein Suchbild daraus</li>
|
|
</ul>
|
|
</div>
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="pf_stil">Stilrichtung</h3>
|
|
<p data-i18n="p3_stil">Spielhallen-Optik in Neonfarben — kräftig, aber ohne Flackern und Blinken.</p>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
|
|
<div class="wd-btn-reihe">
|
|
<a class="wd-btn wd-btn--zweit wd-btn--klein" href="https://zockeranstalt.dogfather-universe.com/" target="_blank" rel="noopener" data-i18n="pf_ansehen">Live ansehen</a>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- ---------------- Projekt 4 ---------------- -->
|
|
<article class="wd-karte wd-karte--vip pfo-projekt wd-auf">
|
|
<img class="pfo-bild" src="/assets/img/wd-projekt-buchhaltung.jpg?v=202610010152"
|
|
alt="Anmeldeseite von buchhaltung.vans-diy-bastelbedarf.com" width="1200" height="750" loading="lazy" decoding="async"
|
|
data-i18n-attr="alt:p4_alt" />
|
|
<div class="pfo-inhalt">
|
|
<div class="pfo-kopf">
|
|
<h2 data-i18n="p4_h2">Buchhaltung & Steuern</h2>
|
|
<span class="wd-tag wd-tag--gold" data-i18n="p4_art">Fachanwendung</span>
|
|
</div>
|
|
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="pf_ausgang">Ausgangslage</h3>
|
|
<p data-i18n="p4_ausgang">Die Zahlen des Shops lagen in Tabellen und Zetteln verstreut, und vor dem Steuertermin musste alles von Hand zusammengesucht werden.</p>
|
|
</div>
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="pf_loesung">Umgesetzte Lösung</h3>
|
|
<p data-i18n="p4_loesung">Eine eigene Buchhaltung mit doppelter Buchführung, die Verkäufe automatisch aus dem Shop übernimmt.</p>
|
|
</div>
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="pf_ergebnis">Ergebnis</h3>
|
|
<p data-i18n="p4_ergebnis">Im laufenden Betrieb, mit einer schriftlichen Verfahrensdokumentation an den GoBD entlang.</p>
|
|
</div>
|
|
|
|
<details class="pfo-mehr">
|
|
<summary data-i18n="pf_details">Details ansehen</summary>
|
|
<div class="pfo-mehr-inhalt">
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="pf_funktionen">Wichtigste Funktionen</h3>
|
|
<ul class="wd-liste">
|
|
<li data-i18n="p4_f1">Verkäufe kommen alle fünf Minuten selbst aus dem Shop</li>
|
|
<li data-i18n="p4_f2">Rechnungen mit fortlaufender Nummer, Korrektur nur per Stornorechnung</li>
|
|
<li data-i18n="p4_f3">Kontoauszüge einlesen (CAMT.053, MT940 oder CSV)</li>
|
|
<li data-i18n="p4_f4">Eigene Konten je Kunde und Lieferant</li>
|
|
<li data-i18n="p4_f5">Auswertungen entstehen alle aus demselben Buchungsbestand</li>
|
|
</ul>
|
|
</div>
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="pf_stil">Stilrichtung</h3>
|
|
<p data-i18n="p4_stil">Ruhig und zurückhaltend — bei Zahlen soll nichts vom Lesen ablenken.</p>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
|
|
<!-- Kein "Live ansehen": Dahinter liegt eine Anmeldung, und was
|
|
dort steht, sind echte Geschäftszahlen. Ein Knopf, der nur
|
|
zu einer Anmeldemaske führt, wäre ein leeres Versprechen. -->
|
|
<p class="wd-klein wd-leise" data-i18n="p4_kein_link">Ohne öffentlichen Zugang: Dahinter liegen echte Geschäftszahlen.</p>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- ---------------- Projekt 5 ---------------- -->
|
|
<article class="wd-karte wd-karte--premium pfo-projekt wd-auf">
|
|
<img class="pfo-bild" src="/assets/img/wd-projekt-analyse.jpg?v=202610010152"
|
|
alt="Startseite von analyse.dogfather-universe.com, die Gesichter sind zum Schutz der Beteiligten unkenntlich gemacht" width="1200" height="750" loading="lazy" decoding="async"
|
|
data-i18n-attr="alt:p5_alt" />
|
|
<div class="pfo-inhalt">
|
|
<div class="pfo-kopf">
|
|
<h2 data-i18n="p5_h2">Command Center</h2>
|
|
<span class="wd-tag wd-tag--indigo" data-i18n="p5_art">Auswertung</span>
|
|
</div>
|
|
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="pf_ausgang">Ausgangslage</h3>
|
|
<p data-i18n="p5_ausgang">Die Zahlen zu Videos und Reichweite standen an verschiedenen Stellen, und niemand im Team sah dasselbe Bild.</p>
|
|
</div>
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="pf_loesung">Umgesetzte Lösung</h3>
|
|
<p data-i18n="p5_loesung">Eine gemeinsame Auswertung, zu der jede und jeder im Team einen eigenen Zugang hat.</p>
|
|
</div>
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="pf_ergebnis">Ergebnis</h3>
|
|
<p data-i18n="p5_ergebnis">Im täglichen Einsatz, alle arbeiten mit demselben Stand.</p>
|
|
</div>
|
|
|
|
<details class="pfo-mehr">
|
|
<summary data-i18n="pf_details">Details ansehen</summary>
|
|
<div class="pfo-mehr-inhalt">
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="pf_funktionen">Wichtigste Funktionen</h3>
|
|
<ul class="wd-liste">
|
|
<li data-i18n="p5_f1">Videos, Zahlen, Monate und Notizen an einer Stelle</li>
|
|
<li data-i18n="p5_f2">Eigener Zugang je Person, mit unterschiedlichen Rechten</li>
|
|
<li data-i18n="p5_f3">Zugangscodes selbst änderbar, nichts fest eingebaut</li>
|
|
<li data-i18n="p5_f4">Als App installierbar</li>
|
|
</ul>
|
|
</div>
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="pf_stil">Stilrichtung</h3>
|
|
<p data-i18n="p5_stil">Dunkel und aufgeräumt, mit einer ruhigen Leitfarbe je Bereich.</p>
|
|
</div>
|
|
<!-- Warum das Vorschaubild bearbeitet ist: siehe alt-Text. -->
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="p5_hinweis_h3">Zum Vorschaubild</h3>
|
|
<p data-i18n="p5_hinweis">Die Gesichter auf der Aufnahme sind unkenntlich gemacht. Die Seite gehört dem Team, nicht mir — und niemand hat zugestimmt, sein Bild hier zu zeigen.</p>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
|
|
<div class="wd-btn-reihe">
|
|
<a class="wd-btn wd-btn--zweit wd-btn--klein" href="https://analyse.dogfather-universe.com/" target="_blank" rel="noopener" data-i18n="pf_ansehen">Live ansehen</a>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- ---------------- Projekt 6 ---------------- -->
|
|
<article class="wd-karte wd-karte--premium pfo-projekt wd-auf">
|
|
<img class="pfo-bild" src="/assets/img/wd-projekt-safeaddress.jpg?v=202610010152"
|
|
alt="Zugangswand von safeaddress.dogfather-universe.com, die Gesichter sind zum Schutz der Beteiligten unkenntlich gemacht" width="1200" height="750" loading="lazy" decoding="async"
|
|
data-i18n-attr="alt:p6_alt" />
|
|
<div class="pfo-inhalt">
|
|
<div class="pfo-kopf">
|
|
<h2 data-i18n="p6_h2">Spicy SafeAddress</h2>
|
|
<span class="wd-tag wd-tag--lila" data-i18n="p6_art">Rechtsplattform</span>
|
|
</div>
|
|
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="pf_ausgang">Ausgangslage</h3>
|
|
<p data-i18n="p6_ausgang">Wer im Netz etwas anbietet, muss im Impressum eine Anschrift angeben, an die Post zugestellt werden kann. Für Creator ist das die eigene Wohnadresse — und die steht damit für jeden lesbar im Netz.</p>
|
|
</div>
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="pf_loesung">Umgesetzte Lösung</h3>
|
|
<p data-i18n="p6_loesung">Eine Plattform, die eine Anschrift für das Impressum bereitstellt, die eingehende Post ordnet und die Wohnadresse getrennt davon unter Verschluss hält.</p>
|
|
</div>
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="pf_ergebnis">Ergebnis</h3>
|
|
<p data-i18n="p6_ergebnis">Fertig gebaut und bewusst noch vollständig gesperrt. Sie geht erst dann online, wenn eine deutsche Fachkanzlei Betreiber, Standort, Verträge und den Postablauf schriftlich freigegeben hat.</p>
|
|
</div>
|
|
|
|
<details class="pfo-mehr">
|
|
<summary data-i18n="pf_details">Details ansehen</summary>
|
|
<div class="pfo-mehr-inhalt">
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="pf_funktionen">Wichtigste Funktionen</h3>
|
|
<ul class="wd-liste">
|
|
<li data-i18n="p6_f1">Die Wohnadresse liegt in einer eigenen Tabelle — keine Liste, keine Suche und kein Export kann sie versehentlich mitnehmen</li>
|
|
<li data-i18n="p6_f2">Die fachlichen Regeln stehen in der Datenbank, nicht nur im Formular: Ein Fehler in der Oberfläche kann sie nicht umgehen</li>
|
|
<li data-i18n="p6_f3">Ein Protokoll, das sich nicht nachträglich ändern lässt — jede Manipulation fällt beim Prüfen auf</li>
|
|
<li data-i18n="p6_f4">Adressfelder werden einzeln verschlüsselt, mit einem eigenen Schlüssel</li>
|
|
<li data-i18n="p6_f5">Die Impressumsseiten kommen ohne JavaScript aus, denn sie müssen dauerhaft erreichbar sein</li>
|
|
</ul>
|
|
</div>
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="pf_stil">Stilrichtung</h3>
|
|
<p data-i18n="p6_stil">Sehr dunkel, mit einem einzigen kräftigen Rot, das sparsam eingesetzt wird. Kein Countdown und kein Plätze-Zähler — Druck als Verkaufsmittel ist hier ausdrücklich ausgeschlossen.</p>
|
|
</div>
|
|
<!-- Gleiche Begruendung wie bei Projekt 5. -->
|
|
<div class="pfo-block">
|
|
<h3 data-i18n="p6_hinweis_h3">Zum Vorschaubild</h3>
|
|
<p data-i18n="p6_hinweis">Die Gesichter auf der Aufnahme sind unkenntlich gemacht. Auf der Seite arbeiten zwei Menschen zusammen, und niemand hat zugestimmt, sein Bild hier zu zeigen.</p>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
|
|
<!-- Kein Knopf: Ein "Live ansehen" wuerde auf eine Zugangswand
|
|
fuehren und damit ein Versprechen brechen, das der Knopf
|
|
gibt. Stattdessen ein Satz, der erklaert, warum. -->
|
|
<p class="wd-klein wd-leise" data-i18n="p6_kein_link">Diese Seite lässt sich nicht ansehen: Sie ist vollständig gesperrt und zeigt nach außen nur die Zugangswand.</p>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Ehrliche Leerstelle statt erfundener Kundenstimmen. -->
|
|
</div>
|
|
|
|
<div class="wd-notiz wd-auf">
|
|
<p><strong data-i18n="pf_regeln_titel">Was hier bewusst fehlt</strong><br />
|
|
<span data-i18n="pf_regeln_text">Es steht kein einziges Kundenzitat auf dieser Seite. Nicht, weil es keine zufriedenen Kunden gäbe, sondern weil noch niemand ein Zitat geschrieben und freigegeben hat.</span></p>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<section class="wd-abschnitt wd-abschnitt--gehoben">
|
|
<div class="wd-container wd-container--schmal" style="text-align:center">
|
|
<h2 data-i18n="pf_cta_h2">Soll deins das sechste sein?</h2>
|
|
<p class="wd-lead" data-i18n="pf_cta_p">Ob dein Projekt hier später auftaucht, entscheidest ausschließlich du — die Aufnahme ins Portfolio ist von der Veröffentlichung deiner Seite getrennt und braucht deine ausdrückliche Erlaubnis.</p>
|
|
<div class="wd-btn-reihe" style="justify-content:center">
|
|
<a class="wd-btn wd-btn--haupt" href="/webdesign/anfrage.html" data-i18n="nav_anfrage">Projekt anfragen</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<div id="wd-fuss"></div>
|
|
|
|
<script src="/assets/js/i18n-wd-portfolio.js?v=202610010152"></script>
|
|
<script src="/assets/js/wd-core.js?v=202610010152"></script>
|
|
</body>
|
|
</html>
|