zuletzt aktualisiert 2025-02-13 11:58
Die Idee
Willkommen auf der Webseite des freiberuflichen Software Entwicklers Martin Hartnagel. Sie können mit Klick auf den grünen Bürotacker mit dem freiberuflichen Software Entwickler Kontakt aufnehmen.
Dynamische Desktopanwendungen erfordern ein breites Hintergrundwissen über die Frameworks, die enthaltenen Komponenten und Erfahrungen zur Bedienbarkeit. Darüber hinaus soll jede Anwendung in modernen Webbrowser funktionieren, sich ähnlich verhalten und vom Aussehen nicht unterscheiden.
SEO Werkzeuge im neuen KI Internet
Man kann das Internet als Netz, bestehend aus Knoten von Webseiten, die über Fäden mit Links untereinander verbunden sind, verstehen. Dabei gibt es einige wenige wichtige, hervorgehobene und oft besuchte Knoten neben einer Masse von eher unbedeutenden Knoten. Um sich von der Masse abzuheben helfen SEO Werkzeuge, um das Netz in seinem Sinne umzuknüpfen.
In der neuen Welt von künstlicher Intelligenz wird die bisherige Qualität des Netzes herausgefordert: neue Knoten mit Inhalten und scheinbar relevante Fäden mit Links entstehen ohne menschliches zutun. Wird ein kritischer Wert überschritten, werden klassische Suchmaschinen nutzlos, da ihre Bots nur noch diese künstlich erstellten Inhalte erfassen.
Meine Prognose daher: das Internet wird sich verändern, Suchmaschinen werden durch KIs zunehmend verdrängt. Anstatt Bots, die das Netz untersuchen, wird eher relevant, mit welchen Inhalten die KIs trainiert werden.
Daher betonen sie schon jetzt beim Untersuchen, wie eine KI ihre Webseite zusammenfassen wird, wie "ähnliches" zu ihrer Webseite aussieht, ob das Gegenteil und die Nützlichkeit richtig erkannt wird und ob ihr Angebot auf der Webseite als gesund angesehen wird. Und dann wird noch eine Werbung und eine Nachrichtenmeldung für die Webseite entworfen!
Single Page Applications (SPA)
Wenn eine Webseite alle Seiten vorher schon lädt, ist dies noch lange keine SPA. Auch ist ein Laden von nutzergeneriertem Content nicht entscheidendes Merkmal, um von einer SPA zu sprechen. Genauso wenig ist ein responsive Verhalten ausschlaggebend, um als SPA eingeordnet zu werden. Wenn sich alles nur auf einer einzigen Seite abspielt, dann nähert man sich einer SPA. Trifft das dann auch auf die Bereiche Dokumentation, zum Fehlerhandling und für Supportanfragen zu?
Folgende Bereiche müssen bei den meisten SPA beachtet werden und sind oft vernachlässigt:
- Routing
- Statemanagement (ggf. mit SSR)
- Performance, insbesonders die Core Web Vitals
- Suchmaschinen (SEO)
- User Experience
- Login, Logout
- Internationalisierung
- Dokumentation
- Online Hilfe
- Fehlerhandling
- Supportanfragen
- Offlineverhalten
- Onlinedetection
- Speichermanagement
- Cachingverhalten
- Update der SPA, wenn Browser Cache dies verhindert
- Daten Synchronisierung, Export, Import und Backup
- DSG-VO kritische Daten
Progressive Web Anwendung (PWA)
Eine PWA kann über den Webbrowser als App auf einem Smartphone installiert werden. Eine SPA und App in einem zu bauen spart vor allem Kosten in der Entwicklung. Auch benötigt man nicht das Bereitstellen der App in App Stores, hat dann aber auch nicht die Vorteile eines solchen Marktplatzes.
Zwangsläufig sollte man sich auch hier (neben den SPA Bereichen) mit folgenden Themen beschäftigen:
- Vertrauen schaffen (ähnlich wie im App Store) bezüglich Sicherheit für den Endkunden
- Update einer installierten App in einer älteren Version
- Daten Synchronisierung zwischen mehreren Geräten, Export, Import und Backup
- Vermarktung (auch wenn kostenlos müssen die Endkunden doch dazu bewegt werden die SPA auf ihrem Smartphone zu öffnen)
- Zielgeräte und Verhalten beim Öffnen auf anderen Geräten
- Zugriff auf native Gerätefunktionen, Teileinschränkungen dieser und ab wann die App ohne essentielle Freigaben dazu unbenutzbar ist.
- Android Package (APK) erzeugen und doch App Stores verwenden
Dokumentation mit Markdown
Dokumentation sollte schnell erfasst und flüssig wartbar sein, wenig zusätzlichen Aufwand erfordern und auch nach längerer Pause keine lange Einarbeitungszeit wieder erfordern. Markdown ist hier zum quasi Standard geworden. Mit Remark und Rehype ist die Generierung von schicken Webseiten mit smarten Zusatzfunktionen schnell gemacht und erlaubt viel zusätzliche Flexibilität im Nachhinein. Zum Beispiel machen generierte Inhaltsverzeichnisse, verlinkbare Überschriften und automatische Stichwortverlinkung das Lesen der Dokumentation sehr viel angenehmer - so wie auch hier auf dieser Webseite eingesetzt. Markdown ist über Git gut versionierbar und Änderungen können so leicht gemerged werden. Von HTML, Word-Dokumenten oder PDF kann man das nicht unbedingt behaupten.
Begriffe in Markdown automatisch in HTML Links umwandeln
Ein Beispiel, wie man mit Unified, Remark und Rehype automatisch Suchbegriffe in Markdown mit Links anreichern kann:
// ...
import { fromHtml } from 'hast-util-from-html'
const replacements = [
{ s: "React", l: "https://react.dev/", t: "React: The library for web and native user interfaces" },
{ s: "Ohrenschmauss Verlag", l: "https://ohrenschmauss.de", t: "Hörbücher im Ohrenschmauss Verlag, Genuss und Spannung für die Ohren" },
];
const replaceWithLinks = (parent, i, node) => {
if (['p', 'li', 'td'].includes(parent?.tagName) && node.type === 'text') {
let v = node.value;
let changes = false;
replacements.forEach((r) => {
if (v.match(r.s)) {
v = v.replace(r.s, '<a href="'+r.l+'" title="'+r.t+'">'+r.s+'</a>');
changes = true;
}
});
if (changes) {
parent.children.splice(i, 1, fromHtml(v, { fragment: true }));
}
} else {
node.children?.forEach((n, i) => replaceWithLinks(node, i, n));
}
};
const file = await unified()
.use(remarkParse)
.use(remarkRehype)
.use(rehypeStringify, { allowDangerousHtml: true })
.use(() => (tree) => { replaceWithLinks(undefined, 0, tree); })
.process(`# some title where React and Ohrenschmauss Verlag are left untouched\n\n
paragraph with React and Ohrenschmauss Verlag automatically replaced links.`);
console.log(String(file));
Ausgabe:
<h1>some title where React and Ohrenschmauss Verlag are left untouched</h1>
<p>paragraph with <a href="https://react.dev/" title="React: The library for web and native user interfaces">React</a> and <a href="https://ohrenschmauss.de" title="Hörbücher im Ohrenschmauss Verlag, Genuss und Spannung für die Ohren">Ohrenschmauss Verlag</a> automatically replaced links.</p>
Beauftragen
Benötigen Sie in Ihrem Unternehmen diese Expertise? Sind Sie schon dabei so etwas umzusetzen und kommen nicht weiter? Vielleicht kann der freiberufliche Software Entwickler dieser Seite Ihnen weiterhelfen. Ja genau, auf den grünen Bürotacker klicken ...
