16.04.2024

Interaktive Grafik und zweisprachige Website

Das ist mal etwas Besonderes.

Grundsätzlich ist für mich jede Website, die ich entwickle, sowas wie mein Baby. Liebevoll gepflegt und unter den optimalen Bedingungen werden sie veröffentlicht. Und das freut mich jedes mal.

Bei der Seite, die ich heute veröffentlichen darf, gibt es einige Besonderheiten, die eine Erweiterung meines Portfolios sind. Seht selbst:
https://bajog-energiespeicher.de

1. Übersetzungsfunktion
Da ich meine Systeme selbst programmiere, gibt es auch einige Hürden zu beachten. Eine davon war bisher die Mehrsprachigkeit. Denn ich wollte es wie immer ohne Plugin lösen. Also habe ich durch programmierte Templates und Kategorien die Mehrsprachigkeit selbst gelöst. Die Website hat zwei verknüpfte Kreisläufe – einen deutschen und einen englischen.

Bei einer Elementor Baukasten Website würde ich einfach das WordPress Plugin Polylang nutzen. Hier lassen sich einige der Arbeiten für eine mehrsprachige Website automatisieren. Jedoch gibt es kein Plugin, welches die Inhalte automatisch übersetzt. Alle Texte müssen manuell übersetzt und veröffentlicht werden. Eine mehrsprachige Website ist im Endeffekt nichts anderes als eine verdoppelte Website. Jede Seite, jeder Beitrag wird geklont, und ist unter einer anderen URL erreichbar. Sicher, mit genug Programmierarbeit könnte man auch eine einzelne Seite mehrsprachig machen. Dann wären alle Texte auf einer Seite untergebracht, und der Sprachumschalter würde diese austauschen, ohne eine neue Seite zu laden.

Abgesehen davon, dass es aus SEO Sicht nicht zu empfehlen ist, Texte & Überschriften zu verstecken, lohnt sich auch der Aufwand nicht.

Doch das Plugin Polylang wollte ich nicht verwenden, also habe ich meine eigene Lösung programmiert. Genauso simpel wie die Vorgehensweise des Plugins. Für jede Seite lege ich eine weitere an. Und ich dupliziere die Templates, die ich programmiert habe. Über das Kategoriensystem Deutsch und Englisch kann jedem Beitrag per Klick eine Sprache zugewiesen werden. Und beide Systeme sind über eine Schnittstelle verbunden, den Sprachumschalter.

2. Interaktive Grafik
Hierauf bin ich besonders stolz. Denn auch, wenn kleinere interaktive Elemente auf jeder Website vorkommen, so ist eine animierte Grafik aus 8 Einzelschritten, durch die ich manuell navigieren kann, schon eine größere Aufgabe gewesen.

Jede Grafik hat per Code ihre eigenen Koordinaten zugewiesen bekommen. Und jede Grafik hat einen Vorher- und einen Nachher-Zustand. Zwischen diesen Zuständen wird gewechselt, in dem durch JavaScript den HTML Objekten Klassen zugewiesen werden. Also brauchte ich nur noch einen Spielplan. Ich habe in JavaScript einen Json erstellt, mit 8 Funktionen. Dieses Drehbuch kann nun also vorwärts und rückwärts durchlaufen werden, und wird dabei durch CSS zum Leben erweckt.

Hier das Ergebnis:
https://bajog-energiespeicher.de/funktion-energiespeicher

Für meinen Kunden ist besonders angenehm, dass er mit wenigen Klicks eigenen Content erstellen kann, dank einer dynamischen Inhaltsstruktur im BackEnd der Website. Ganz einfach neue Beiträge erzeugen oder Inhalte ändern, ganz ohne Layout-Probleme.

Die Zusammenarbeit mit der Bajog Electronic GmbH war eine Freude, und eine besondere Herausforderung. Um das Konzept für die animierte Grafik zu erstellen und um eine logische Inhaltsstruktur zu designen, habe ich mein naturwissenschaftliches Grundwissen etwas auffrischen müssen.

Falls du wissen möchtest, wie man deinen Internetauftritt technisch so optimiert, damit du dich über mehr Reichweite und Kundenanfragen freust, dann schreib mir jederzeit gerne.