Retour au portfolio
La page d'accueil en anglais : une barre bleu marine avec deux numéros de téléphone, une adresse e-mail et des icônes de réseaux sociaux, le logo et le menu avec Home souligné et EN sélectionné, puis, sur une photo teintée de bleu d'un public vu de dos, la ligne « ΚΔΒΜ 11101147 », le titre « Mediterranean Educational Centre », la phrase « A modern vocational training centre », un bouton blanc « All projects » et un bouton détouré « Read more » ; trois icônes rondes avec leurs titres commencent en dessous.
Ouvrir mesogeiako.gr dans un nouvel onglet

Mesogeiako — Centre de Formation Professionnelle & CMS sur Mesure

Aperçu

Mesogeiako est un centre agréé de formation tout au long de la vie et de formation professionnelle à Thessalonique, et son site avait grandi sur WordPress et le constructeur de pages de BeTheme. La reconstruction garde tout le contenu et rien de la plateforme. C'est du PHP 8.5 pur sur MySQL — un contrôleur frontal, un autoloader de quinze lignes, sans framework, sans Composer et sans étape de build — environ cinq mille lignes de code et deux mille de templates. Le grec est la langue par défaut et l'anglais vit sous /en/, et la parité est structurelle plutôt que rapportée : chaque projet, actualité et page est une ligne avec une ligne de traduction par langue, les slugs appartiennent à la traduction pour que les pages grecques gardent des URL dérivées du grec, et une troisième langue ne demanderait aucun changement de schéma. La migration est du code, pas un export ponctuel. Vingt et une étapes ordonnées et rejouables reconstruisent tout le site depuis la source WordPress — elles lisent le contenu du Muffin Builder, retirent les textes répétitifs, normalisent les titres, fusionnent les actualités en double et extraient en fichiers les images intégrées en data-URI — et transfèrent 33 projets, 90 actualités et 20 pages dans les deux langues, avec 798 redirections pour que les anciens liens mènent à leurs nouvelles pages. Chaque image de la médiathèque est un WebP de moins de 200 Ko : la qualité descend de 82 à 40, puis les dimensions réduisent jusqu'à ce qu'il tienne, et l'original est supprimé. Le back-office donne au centre ses projets, actualités et pages dans les deux langues sous TinyMCE, une médiathèque, les coordonnées, ainsi que les compteurs et les blocs de la page d'accueil. Les données structurées portent l'adresse postale, le numéro du registre du commerce et les horaires — trois informations que l'ancien site publiait dans un widget de pied de page du thème, où aucun article ni aucun importeur ne pouvait les voir.

Défis

WordPress avait caché certains faits. L'adresse postale, le numéro du registre du commerce et les horaires se trouvaient dans un widget de pied de page du thème plutôt que dans un article, donc un export de contenu ne les voyait jamais, et le second numéro de téléphone se contredisait à trois endroits de l'ancien site. Les URL grecques cassaient aussi la conception évidente de la base : encodées en pourcentage, elles dépassent souvent 191 caractères tout en partageant de longs préfixes, si bien qu'un index de préfixe rejette comme doublons des adresses réellement différentes. Et un éditeur bilingue a un mode de défaillance silencieux : un enregistrement qui omet une langue est indiscernable d'une personne qui la vide volontairement.

Solutions

Chaque correction est sa propre étape de migration numérotée, si bien qu'une reconstruction à neuf depuis WordPress reproduit le numéro de téléphone confirmé par le client et l'adresse retrouvée au lieu de réimporter les anciennes erreurs. Les redirections sont uniques sur un hachage SHA-256 de l'ancien chemin plutôt que sur un préfixe. Chaque segment d'archive ne se résout que dans sa propre langue, pour qu'un élément ne vive pas à deux URL en partageant son propre référencement. Chaque formulaire de traduction envoie un marqueur de présence par langue — c'est ce qui permet à une langue absente de signifier « inchangée » plutôt que « supprimer » —, et la suite de tests du back-office contient un test de non-régression pour cela. Les noms de fichiers sont normalisés en NFC avant la translittération, car macOS et Linux stockent le même nom grec sous des octets différents.

Galerie

  • La page d'accueil en anglais : une barre bleu marine avec deux numéros de téléphone, une adresse e-mail et des icônes de réseaux sociaux, le logo et le menu avec Home souligné et EN sélectionné, puis, sur une photo teintée de bleu d'un public vu de dos, la ligne « ΚΔΒΜ 11101147 », le titre « Mediterranean Educational Centre », la phrase « A modern vocational training centre », un bouton blanc « All projects » et un bouton détouré « Read more » ; trois icônes rondes avec leurs titres commencent en dessous.

    Accueil — L'Agrément du Centre en Tête, Ses Projets à Un Clic

  • L'archive des projets avec ses onglets Active 1 et Inactive 32, Inactive sélectionné, au-dessus de trois cartes : un logo de programme régional avec un soleil orange pour « Local employment plans adapted to the needs of local labour markets » et deux bandeaux de financement européen pour des projets intitulés « Training of beneficiaries under the operation… », la carte du milieu soulevée sous le pointeur, chacune avec un court résumé et un lien « View project ».

    Projets — En Cours et Passés, à Un Clic d'Écart

  • Une page de projet : le bas de son affiche, avec quatre icônes rondes, un groupe, une silhouette présentant un graphique, une ampoule avec un engrenage et un certificat, sur une table de réunion avec des ordinateurs portables, et en bas les logos de l'Union européenne, de l'ESPA 2021-2027 et de l'autorité de gestion ; en dessous, le titre « SUD of the Municipality of Alexandroupoli », un sous-titre qui nomme les actions de formation ciblées pour les salariés de l'Association commerciale d'Alexandroupolis et leur programme de financement, puis un texte pleine largeur avec une puce.

    Pages Projet — Un Texte Pleine Largeur, Rédigé et Mis en Forme par le Centre

  • La liste des actualités : chaque élément montre un grand numéro de jour avec le mois et l'année, un titre, un court résumé et un lien « Read more », avec une vignette encadrée à droite ; les deux premiers sont des annonces de la DYPA datées du 30 mars 2026 avec le logo de la DYPA, et le troisième, « The GAP through the eyes of the participants » du 5 mars 2026, a son titre en bleu plus clair sous le pointeur, à côté du logo du projet GAP.

    Actualités — Quatre-Vingt-Dix Articles Repris de WordPress, dans les Deux Langues

  • L'index d'autoformation en deux colonnes de cartes, chacune avec une icône de document, un titre, un court résumé et une flèche : un guide d'aide pour les migrants et les réfugiés, les candidatures spontanées, un manuel du formateur sur l'usage durable de l'eau, un support de formation sur les biodéchets, les offres d'emploi, contacter les employeurs par téléphone, Europass, des liens utiles, le Jeu de l'intelligence émotionnelle et le matériel e-learning de GAP ; Self-training est souligné dans le menu.

    Outils d'Autoformation — Guides et Supports dans un Seul Index

  • La page About us : à gauche, le titre « ABOUT MEK » sous un court filet doré, et à droite un texte justifié indiquant que le centre travaille dans la formation tout au long de la vie depuis 2003, qu'il est agréé par l'organisme national des qualifications sous le code 11101147, inscrit au registre des bureaux de conseil et d'orientation professionnelle et membre du réseau CEC, avec les noms des organismes en liens ; le haut d'un visuel « PACT FOR SKILLS » de la Commission européenne commence en dessous.

    À Propos — Agréments, Registres et Réseaux Européens en Une Seule Lecture

  • La page de contact : un en-tête bleu marine avec le fil d'Ariane Home / Contact et le titre « Contact », puis des cartes blanches : « EMAIL US » avec thessaloniki@mesogeiako.gr, deux cartes « CALL US » avec le 2310 527722 et le 2310 537766, et « VISIT US » avec une adresse à Neapoli, Thessalonique, au-dessus d'un bouton bleu marine « Find us on the map » avec une icône d'épingle.

    Contact — E-mail, Deux Lignes et l'Adresse en Quatre Cartes

  • La page d'accueil sur tablette : la barre bleu marine avec deux numéros de téléphone et une adresse e-mail, un en-tête avec le logo, le sélecteur EL/EN et un bouton de menu, le bandeau d'accueil avec « ΚΔΒΜ 11101147 », « Mediterranean Educational Centre », « A modern vocational training centre » et les boutons « All projects » et « Read more » sur une photo de public teintée de bleu, puis deux colonnes, « With vision and strategy » et « With validations », chacune sous une icône ronde, « With modern learning tools » ouvrant une deuxième rangée.

    Accueil — Stratégie, Certifications et Outils d'Apprentissage Sous la Bienvenue

  • Une page de projet sur tablette : son affiche, titrée « ΣΒΑΑ Δήμου Αλεξανδρούπολης » en bleu foncé et bleu canard avec le logo de l'Association commerciale d'Alexandroupolis, montre un front de mer avec un phare, des personnes autour d'une table tournées vers une personne debout qui présente, et quatre icônes rondes au-dessus de logos de financement européen ; en dessous, le titre « SUD of the Municipality of Alexandroupoli », un sous-titre sur des actions de formation ciblées pour les salariés et le début du texte du projet.

    Projets Actifs — Le Travail en Cours du Centre, Affiche en Tête

  • Un article d'actualité sur tablette : sur fond bleu marine, le titre « ANNOUNCEMENT — Call for participation in training and counselling actions under the project “Empowering businesses Seeking Growth (SeeG)” » et « Published 21 October 2022 » ; en dessous, le même titre en bleu, un paragraphe avec un lien vers le site du projet, une ligne en gras indiquant que les particuliers et les entreprises de l'unité régionale du Rhodope sont éligibles, deux puces pour les deux publics cibles, une ligne avec les horaires d'information, un numéro de téléphone et un nom de contact, puis le haut d'un logo Interreg.

    Annonces — Qui Peut Participer et Qui Appeler, d'un Coup d'Œil

  • La page About us sur tablette : le titre « OUR TARGET GROUPS » sous un court filet doré, un paragraphe indiquant que le centre a mené depuis 2003 des centaines de projets cofinancés de formation tout au long de la vie, et une liste de dix publics, des personnes handicapées, des immigrés, des réfugiés et des demandeurs d'asile jusqu'aux jeunes, aux chômeurs, aux salariés des secteurs public et privé et aux indépendants ; en dessous, le titre « Committed to our core strategy, we work collectively: » ouvre une liste numérotée.

    Publics Cibles — Qui le Centre Forme, en Toute Clarté

  • Le bas de la page About us sur tablette : le titre « Our activity: » au-dessus de trois cartes blanches, l'une avec un logo Interreg et « OPERATIONAL PROJECTS OF THE “EUROPEAN TERRITORIAL COOPERATION” », une autre avec le drapeau européen et « ERASMUS+ », la dernière avec un logo ESPA 2014-2020 et « ESPA », chacune avec un bouton bleu marine « READ MORE » ; en dessous, un bandeau bleu marine avec quatre chiffres sur deux colonnes : 200+ training programmes, 3,000+ participants, 50+ projects et 4 European projects.

    Nos Activités — Interreg, Erasmus+ et ESPA, Chacun à Portée de Doigt

  • La page d'accueil sur téléphone : la barre bleu marine sur trois lignes, deux numéros de téléphone, l'adresse e-mail et quatre icônes de réseaux sociaux, puis le logo, le sélecteur EL/EN et un bouton de menu, le bandeau d'accueil avec « ΚΔΒΜ 11101147 », « Mediterranean Educational Centre », « A modern vocational training centre » et les boutons « All projects » et « Read more », et en dessous une icône ronde et « With vision and strategy » avec son texte.

    L'Accueil sur Mobile — Appeler ou Écrire Avant Même de Faire Défiler

  • Le menu ouvert sur téléphone : un panneau bleu marine sur toute la hauteur sous l'en-tête, avec Home, Vocational trainings – Professional guidance, Self-training, About us, News et Contact en grands caractères blancs, chacun sur sa ligne avec une petite flèche et un fin séparateur, tandis que le bouton de menu est devenu un bouton de fermeture.

    Le Menu Mobile — Six Rubriques, Chacune Assez Grande pour le Doigt

  • Le bandeau bleu marine de l'accueil sur téléphone : le titre « More than 20 years in vocational training » au-dessus de quatre chiffres dorés empilés, avec des libellés blancs, 200+ training programmes, 3,000+ participants, 50+ projects et 4 European projects, l'intitulé « NEWS » commençant en dessous.

    Compteurs de l'Accueil — Quatre Chiffres que le Centre Modifie Lui-Même

  • L'archive des projets en anglais sur téléphone : l'onglet Active 1 sélectionné en bleu marine à côté d'Inactive 32, et une seule carte avec une affiche de formation de la municipalité d'Alexandroupolis, montrant un front de mer avec un phare et des personnes autour d'une table, au-dessus du titre « SUD Municipality of Alexandroupoli: Targeted Training Actions for Employees — Alexandroupoli… », d'un court résumé et d'un lien « View project ».

    Le Côté Anglais — La Même Archive à Ses Propres URL

  • La liste des actualités sur téléphone : sous l'en-tête, un tiret doré, le grand jour « 30 » et « MAR 2026 » à côté du titre « DYPA ANNOUNCEMENT — HELPDESK », un court résumé et un lien « Read more », avec le logo de la DYPA dans un cadre en dessous ; l'élément suivant, une autre annonce de la DYPA du même jour, commence plus bas.

    Les Actualités sur Mobile — Date, Titre et Résumé, Tout de Suite Lisibles

  • L'index d'autoformation sur téléphone : des cartes pleine largeur empilées, chacune avec une icône de document, un titre, un court résumé et une flèche, en commençant par un guide d'aide pour les migrants et les réfugiés, les candidatures spontanées et un manuel du formateur sur l'usage durable de l'eau.

    L'Autoformation sur Mobile — Un Guide par Carte, Facile à Toucher

  • La page de contact sur téléphone : quatre cartes blanches empilées sous l'en-tête, « EMAIL US » avec thessaloniki@mesogeiako.gr, deux cartes « CALL US » avec le 2310 527722 et le 2310 537766, et « VISIT US » avec une adresse avenue Miki Theodoraki à Neapoli, Thessalonique.

    Le Contact sur Mobile — Un Toucher pour Écrire, Un pour Appeler

Back-office

  • Le tableau de bord de l'administration, en grec : une barre latérale bleu marine avec des rubriques pour la vue d'ensemble, le contenu (projets 34, actualités 92, pages 20, blocs de l'accueil) et les réglages (médias, compteurs, coordonnées), et quatre cartes chiffrées : 34 projets, dont 1 sans traduction complète et 16 à vérifier ; 92 actualités, 2 et 79 ; 20 pages, dont 3 à vérifier ; et 145 fichiers médias pour 16,7 Mo au total ; en dessous, des actions rapides pour un nouveau projet, une nouvelle annonce, l'envoi de fichiers et les coordonnées, avec une note indiquant que chaque image envoyée devient un WebP de moins de 200 Ko.

    Le Tableau de Bord — Ce que Publie le Centre, et les Traductions Manquantes ou à Vérifier

  • La liste des projets de l'administration, en grec : un champ de recherche par titre au-dessus d'un tableau avec des colonnes titre, langues, statut et catégorie ; chaque ligne montre un titre de projet, un badge « EL + EN » (« 1/2 » sur la première, qui porte aussi la mention de sous-projets « 3 υποέργα »), un badge vert de publication, actif ou inactif, et des boutons de modification et de suppression, la plupart des titres portant un badge jaune « à vérifier ».

    Projets — Langues, Sous-Projets et Traductions Non Vérifiées sur Chaque Ligne

  • Modification de l'actualité n° 8 dans l'onglet grec, à côté d'un onglet anglais : le titre « ΑΝΑΚΟΙΝΩΣΗ ΔΥΠΑ-HELPDESK » sur une feuille blanche, le champ de slug d'URL, une zone de résumé, un titre SEO, une description SEO avec une indication de 140 à 160 caractères, et les menus et la barre d'outils de l'éditeur de contenu, avec des boutons Annuler et Enregistrer en haut et dans une barre en bas.

    L'Éditeur — Onglets Grec et Anglais, Champs SEO, Texte Riche

  • L'éditeur des compteurs de l'accueil : quatre lignes, chacune avec un nombre, un suffixe avec l'exemple « + » et un libellé en grec et en anglais — 200 + pour les programmes de formation, 3000 + pour les participants, 50 + pour les projets et 4 sans suffixe pour les projets européens —, avec des boutons d'enregistrement en haut et en bas.

    Compteurs — Les Chiffres de l'Accueil, Modifiés dans les Deux Langues

  • Les réglages des coordonnées, avec les champs grecs et anglais côte à côte dans deux panneaux : sous l'identité, le numéro au registre du commerce, le code d'agrément, et le nom et le sous-titre du site dans chaque langue ; sous le contact, l'adresse postale dans chaque langue avec une note précisant que l'ancien site n'en avait pas, l'adresse e-mail, deux numéros de téléphone et un lien Google Maps.

    Coordonnées — Un Formulaire, Deux Langues, Affichées sur Tout le Site

  • La médiathèque, 145 fichiers et 16,7 Mo : une zone de glisser-déposer en pointillés indiquant que les images sont converties en WebP de moins de 200 Ko et que les fichiers PDF, Word et Excel sont acceptés jusqu'à 25 Mo, au-dessus d'une grille de logos, d'affiches de programmes et de photos, chacun avec son nom de fichier, ses dimensions et son poids, et des boutons Ouvrir et Supprimer ; les vignettes montrant des visages sont floutées.

    Médias — Chaque Image Convertie en WebP de Moins de 200 Ko