Zurück zum Portfolio
Mesogeiako — Berufsbildungszentrum & maßgeschneidertes CMS

Mesogeiako — Berufsbildungszentrum & maßgeschneidertes CMS

1 Woche Design & Full-Stack-Entwicklung
Mesogeiako ist ein zugelassenes Zentrum für lebenslanges Lernen und Berufsbildung in Thessaloniki, und seine Website war auf WordPress und dem Page-Builder von BeTheme gewachsen. Der Neubau behält jeden Inhalt und nichts von der Plattform. Er ist reines PHP 8.5 auf MySQL — ein Front-Controller, ein fünfzehnzeiliger Autoloader, kein Framework, kein Composer, kein Build-Schritt — rund fünftausend Zeilen Quellcode und zweitausend Zeilen Templates. Griechisch ist Standard, Englisch liegt unter /en/, und die Gleichwertigkeit beider Sprachen ist strukturell statt nachgerüstet: Jedes Projekt, jede Meldung und jede Seite ist eine Datenzeile mit einer Übersetzungszeile pro Sprache, Slugs gehören zur Übersetzung, sodass griechische Seiten griechisch abgeleitete URLs behalten, und eine dritte Sprache bräuchte keine Schemaänderung. Die Migration ist Code, kein einmaliger Export. Einundzwanzig geordnete, wiederholbare Schritte bauen die ganze Website aus der WordPress-Quelle neu auf — sie lesen die Inhalte des Muffin Builders, entfernen Textbausteine, vereinheitlichen Überschriften, führen doppelte Meldungen zusammen und lösen eingebettete Data-URI-Bilder in Dateien auf — und übertragen 33 Projekte, 90 Meldungen und 20 Seiten in beiden Sprachen, mit 798 Weiterleitungen, damit alte Links auf ihren neuen Seiten landen. Jedes Bild der Mediathek ist ein WebP unter 200 KB: Die Qualität sinkt von 82 auf 40, danach schrumpfen die Abmessungen, bis es passt, und das Original wird verworfen. Der Admin gibt dem Zentrum seine Projekte, Meldungen und Seiten in beiden Sprachen mit TinyMCE, eine Mediathek, Kontaktdaten sowie die Zähler und Blöcke der Startseite. Die strukturierten Daten tragen Postanschrift, Handelsregisternummer und Öffnungszeiten — drei Angaben, die die alte Website in einem Footer-Widget des Themes veröffentlichte, wo kein Beitrag und kein Importer sie sehen konnte.

Technologien

PHP 8.5 MySQL Vanilla JS GSAP TinyMCE 7 WebP pipeline (GD) i18n (EL/EN) SEO WordPress migration

Herausforderungen

WordPress hatte einige Fakten versteckt. Postanschrift, Handelsregisternummer und Öffnungszeiten standen in einem Footer-Widget des Themes statt in einem Beitrag, sodass ein Inhaltsexport sie nie sah, und die zweite Telefonnummer widersprach sich an drei Stellen der alten Website. Griechische URLs brachen außerdem das naheliegende Datenbankdesign: Prozentkodiert überschreiten sie regelmäßig 191 Zeichen bei langen gemeinsamen Präfixen, sodass ein Präfixindex tatsächlich verschiedene Adressen als Duplikate ablehnt. Und ein zweisprachiger Editor hat einen stillen Fehlermodus — ein Speichern, bei dem eine Sprache fehlt, ist nicht davon zu unterscheiden, dass jemand sie absichtlich leert.

Lösungen

Jede Korrektur ist ein eigener nummerierter Migrationsschritt, sodass ein frischer Neuaufbau aus WordPress die vom Kunden bestätigte Telefonnummer und die wiedergefundene Anschrift reproduziert, statt die alten Fehler erneut zu importieren. Weiterleitungen sind über einen SHA-256-Hash des alten Pfads eindeutig statt über ein Präfix. Jedes Archivsegment wird nur in seiner eigenen Sprache aufgelöst, damit ein Eintrag nicht unter zwei URLs lebt und sein eigenes Ranking teilt. Jedes Übersetzungsformular sendet pro Sprache eine Präsenzmarkierung — erst dadurch bedeutet eine fehlende Sprache „unverändert“ statt „löschen“ —, und die Admin-Smoke-Suite enthält dafür einen Regressionstest. Dateinamen werden vor der Transliteration NFC-normalisiert, weil macOS und Linux denselben griechischen Namen als unterschiedliche Bytes speichern.

Projekt besuchen

Galerie

Startseitenbereich mit aktiven Bildungsprojekten: Karten mit Partnerlogos, Projekttitel und kurzer Zusammenfassung
Aktive Projekte — Die aktuelle Arbeit des Zentrums, gleich vorne
Dunkelblaues Band mit der Überschrift zu über 20 Jahren Berufsbildung und vier Zählern: 200+ Programme, 3.000+ Teilnehmende, 50+ Projekte, 4 europäische Projekte
Startseiten-Zähler — Vier Zahlen, die das Zentrum selbst pflegt
Projektarchiv mit den Filtern Aktiv und Inaktiv mit den Zahlen 6 und 27 über einem Raster aus Projektkarten
Projekte — Aktuelle und frühere Arbeit, einen Klick voneinander entfernt
Ein Nachrichtenartikel mit dunkelblauem Kopfbereich mit Titel und Veröffentlichungsdatum über dem Aufmacherbild
News — Neunzig Artikel aus WordPress übernommen, in beiden Sprachen
Seite mit Selbstlern-Werkzeugen, Ressourcen in zwei Spalten, jeweils mit Symbol, Titel, Kurzbeschreibung und Pfeil
Selbstlern-Werkzeuge — Leitfäden und Materialien in einem Verzeichnis
Kontaktseite mit Karten für E-Mail-Adresse und zwei Telefonnummern, der Postanschrift in Neapoli, Thessaloniki, und einer Schaltfläche zur Karte
Kontakt — Die Anschrift, die die alte Website im Footer-Widget versteckte
Das Projektarchiv auf Englisch mit den Reitern Active und Inactive und Projektkarten mit übersetzten Titeln
Die englische Seite — Dasselbe Archiv unter eigenen URLs
Admin-Dashboard mit vier Zählern — 33 Projekte, 90 Meldungen, 20 Seiten, 124 Mediendateien —, der Zahl der jeweils noch zu prüfenden Übersetzungen und Schnellaktionen
Das Dashboard — Was das Zentrum veröffentlicht und welche Übersetzungen noch geprüft werden müssen
Projektliste im Admin: Jede Zeile zeigt Titel, Sprachkennzeichen EL + EN, Veröffentlichungsstatus, Kategorie aktiv oder inaktiv sowie Bearbeiten- und Löschen-Schaltflächen; viele Titel tragen einen Prüfhinweis
Projekte — Beide Sprachen in jeder Zeile, ungeprüfte Übersetzungen markiert
Bearbeitung einer Meldung: Reiter Griechisch und Englisch, Titel, URL-Slug, Zusammenfassung, SEO-Titel und SEO-Beschreibung mit einem Hinweis auf 140–160 Zeichen sowie die Werkzeugleiste des Rich-Text-Editors
Der Editor — Griechische und englische Reiter, SEO-Felder, Rich Text
Editor der Startseiten-Zähler: vier Zeilen mit jeweils Zahl, Suffix und Beschriftung auf Griechisch und Englisch — 200 +, 3000 +, 50 + und 4
Zähler — Die Zahlen der Startseite, in beiden Sprachen bearbeitet
Einstellungen der Kontaktdaten mit griechischen und englischen Feldern nebeneinander: Handelsregisternummer, Lizenzcode, Name und Untertitel der Website, Postanschrift, E-Mail, zwei Telefonnummern und ein Google-Maps-Link
Kontaktdaten — Ein Formular, zwei Sprachen, auf der ganzen Website
Mediathek: ein Drag-and-drop-Upload-Bereich mit dem Hinweis, dass Bilder in WebP unter 200 KB umgewandelt werden, über einem Raster von Dateien mit Abmessungen und Dateigröße; Vorschaubilder mit Personen sind unkenntlich gemacht
Medien — Jedes Bild als WebP unter 200 KB