Volver al portfolio
La portada en inglés: una barra azul marino con dos teléfonos, una dirección de correo e iconos de redes sociales, el logotipo y el menú con Home subrayado y EN seleccionado y, sobre una foto en tonos azules de un público visto de espaldas, la línea «ΚΔΒΜ 11101147», el título «Mediterranean Educational Centre», la frase «A modern vocational training centre», un botón blanco «All projects» y un botón con contorno «Read more»; debajo empiezan tres iconos redondos con sus títulos.
Abrir mesogeiako.gr en una pestaña nueva

Mesogeiako — Centro de Formación Profesional y CMS a Medida

Resumen

Mesogeiako es un centro acreditado de aprendizaje permanente y formación profesional en Salónica, y su web había crecido sobre WordPress y el maquetador de BeTheme. La reconstrucción conserva todo el contenido y nada de la plataforma. Es PHP 8.5 puro sobre MySQL — un controlador frontal, un autoloader de quince líneas, sin framework, sin Composer y sin paso de build — unas cinco mil líneas de código y dos mil de plantillas. El griego es el idioma por defecto y el inglés vive bajo /en/, y la paridad es estructural, no añadida: cada proyecto, noticia y página es una fila con una fila de traducción por idioma, los slugs pertenecen a la traducción para que las páginas griegas conserven URL derivadas del griego, y un tercer idioma no exigiría ningún cambio de esquema. La migración es código, no una exportación puntual. Veintiún pasos ordenados y repetibles reconstruyen el sitio entero desde el origen WordPress — leen el contenido del Muffin Builder, eliminan textos repetitivos, normalizan los encabezados, fusionan noticias duplicadas y extraen a archivos las imágenes incrustadas como data-URI — y trasladan 33 proyectos, 90 noticias y 20 páginas en ambos idiomas, con 798 redirecciones para que los enlaces antiguos lleguen a sus páginas nuevas. Cada imagen de la biblioteca es un WebP de menos de 200 KB: la calidad baja de 82 a 40, después las dimensiones se reducen hasta que cabe, y el original se descarta. El panel da al centro sus proyectos, noticias y páginas en ambos idiomas con TinyMCE, una biblioteca de medios, los datos de contacto, y los contadores y bloques de la portada. Los datos estructurados incluyen la dirección postal, el número de registro mercantil y el horario — tres datos que la web antigua publicaba en un widget del pie de página del tema, donde ninguna entrada ni ningún importador podía verlos.

Retos

WordPress había escondido algunos datos. La dirección postal, el número de registro mercantil y el horario estaban en un widget del pie de página del tema y no en ninguna entrada, así que una exportación de contenido nunca los veía, y el segundo teléfono se contradecía en tres lugares de la web antigua. Las URL griegas rompían además el diseño obvio de la base de datos: codificadas con porcentajes, superan a menudo los 191 caracteres compartiendo prefijos largos, de modo que un índice de prefijo rechaza como duplicadas direcciones realmente distintas. Y un editor bilingüe tiene un modo de fallo silencioso: un guardado que omite un idioma es indistinguible de alguien que lo vacía a propósito.

Soluciones

Cada corrección es su propio paso de migración numerado, de modo que una reconstrucción desde cero a partir de WordPress reproduce el teléfono confirmado por el cliente y la dirección recuperada en lugar de volver a importar los errores antiguos. Las redirecciones son únicas sobre un hash SHA-256 de la ruta antigua, no sobre un prefijo. Cada segmento de archivo solo se resuelve en su propio idioma, para que un elemento no viva en dos URL repartiendo su propio posicionamiento. Cada formulario de traducción envía un marcador de presencia por idioma — es lo que permite que un idioma ausente signifique «sin cambios» y no «borrar» —, y la batería de pruebas del panel incluye una prueba de regresión para ello. Los nombres de archivo se normalizan a NFC antes de la transliteración, porque macOS y Linux guardan el mismo nombre griego con bytes distintos.

Galería

  • La portada en inglés: una barra azul marino con dos teléfonos, una dirección de correo e iconos de redes sociales, el logotipo y el menú con Home subrayado y EN seleccionado y, sobre una foto en tonos azules de un público visto de espaldas, la línea «ΚΔΒΜ 11101147», el título «Mediterranean Educational Centre», la frase «A modern vocational training centre», un botón blanco «All projects» y un botón con contorno «Read more»; debajo empiezan tres iconos redondos con sus títulos.

    Portada — La Licencia del Centro Delante, Sus Proyectos a Un Clic

  • El archivo de proyectos con sus pestañas Active 1 e Inactive 32, con Inactive seleccionada, sobre tres tarjetas: un logotipo de programa regional con un sol naranja para «Local employment plans adapted to the needs of local labour markets» y dos banners de financiación europea para proyectos titulados «Training of beneficiaries under the operation…», con la tarjeta central elevada bajo el puntero y cada una con un breve resumen y un enlace «View project».

    Proyectos — Activos y Pasados, a Un Clic de Distancia

  • Una página de proyecto: la parte inferior de su cartel, con cuatro iconos redondos, un grupo, una figura que presenta un gráfico, una bombilla con un engranaje y un certificado, sobre una mesa de reuniones con portátiles, y abajo los logotipos de la Unión Europea, del ESPA 2021-2027 y de la autoridad de gestión; debajo, el título «SUD of the Municipality of Alexandroupoli», un subtítulo que nombra las acciones de formación dirigidas a los empleados de la Asociación Comercial de Alejandrópolis y su programa de financiación, y un texto a todo el ancho con un punto de lista.

    Páginas de Proyecto — Texto a Todo el Ancho, Escrito y Formateado por el Centro

  • La lista de noticias: cada entrada tiene un número de día grande con el mes y el año, un titular, un breve resumen y un enlace «Read more», con una miniatura enmarcada a la derecha; las dos primeras son anuncios de la DYPA del 30 de marzo de 2026 con el logotipo de la DYPA, y la tercera, «The GAP through the eyes of the participants» del 5 de marzo de 2026, tiene el titular en un azul más claro bajo el puntero, junto al logotipo del proyecto GAP.

    Noticias — Noventa Artículos Traídos de WordPress, en Ambos Idiomas

  • El índice de autoformación en dos columnas de tarjetas, cada una con un icono de documento, un título, un breve resumen y una flecha: una guía de ayuda para migrantes y refugiados, candidaturas espontáneas, un manual del formador sobre el uso sostenible del agua, material formativo sobre biorresiduos, ofertas de empleo, contactar con empleadores por teléfono, Europass, enlaces útiles, el Juego de la Inteligencia Emocional y material de e-learning de GAP; Self-training aparece subrayado en el menú.

    Herramientas de Autoformación — Guías y Materiales en un Solo Índice

  • La página About us: a la izquierda, el título «ABOUT MEK» bajo una breve línea dorada, y a la derecha un texto justificado que dice que el centro trabaja en el aprendizaje permanente desde 2003, que está acreditado por el organismo nacional de cualificaciones con el código 11101147, que figura en el registro de oficinas de orientación y asesoramiento profesional y que es miembro de la red CEC, con los nombres de los organismos enlazados; debajo empieza un gráfico «PACT FOR SKILLS» de la Comisión Europea.

    Sobre Nosotros — Licencias, Registros y Redes Europeas en Una Sola Lectura

  • La página de contacto: una cabecera azul marino con la ruta Home / Contact y el título «Contact» y, debajo, tarjetas blancas: «EMAIL US» con thessaloniki@mesogeiako.gr, dos tarjetas «CALL US» con el 2310 527722 y el 2310 537766, y «VISIT US» con una dirección en Neapoli, Tesalónica, sobre un botón azul marino «Find us on the map» con un icono de chincheta.

    Contacto — Correo, Dos Teléfonos y la Dirección en Cuatro Tarjetas

  • La portada en una tableta: la barra azul marino con dos teléfonos y una dirección de correo, una cabecera con el logotipo, el selector EL/EN y un botón de menú, la cabecera principal con «ΚΔΒΜ 11101147», «Mediterranean Educational Centre», «A modern vocational training centre» y los botones «All projects» y «Read more» sobre una foto de público en tonos azules, y debajo dos columnas, «With vision and strategy» y «With validations», cada una bajo un icono redondo, mientras «With modern learning tools» abre una segunda fila.

    Portada — Estrategia, Acreditaciones y Herramientas de Aprendizaje Bajo la Bienvenida

  • Una página de proyecto en una tableta: su cartel, titulado «ΣΒΑΑ Δήμου Αλεξανδρούπολης» en azul oscuro y azul petróleo y con el logotipo de la Asociación Comercial de Alejandrópolis, muestra un paseo marítimo con un faro, personas alrededor de una mesa mirando a una persona de pie que presenta y cuatro iconos redondos sobre logotipos de financiación europea; debajo, el título «SUD of the Municipality of Alexandroupoli», un subtítulo sobre acciones de formación dirigidas a empleados y el comienzo del texto del proyecto.

    Proyectos Activos — El Trabajo Actual del Centro, con el Cartel Primero

  • Un artículo de noticias en una tableta: sobre azul marino, el titular «ANNOUNCEMENT — Call for participation in training and counselling actions under the project “Empowering businesses Seeking Growth (SeeG)”» y «Published 21 October 2022»; debajo, el mismo titular en azul, un párrafo con un enlace a la web del proyecto, una línea en negrita que indica que pueden participar particulares y empresas de la Unidad Regional de Ródope, dos puntos para los dos grupos destinatarios, una línea con el horario de información, un teléfono y un nombre de contacto, y la parte superior de un logotipo de Interreg.

    Anuncios — Quién Puede Participar y a Quién Llamar, de un Vistazo

  • La página About us en una tableta: el título «OUR TARGET GROUPS» bajo una breve línea dorada, un párrafo que dice que el centro ha llevado a cabo desde 2003 cientos de proyectos cofinanciados de aprendizaje permanente y una lista de diez colectivos, desde personas con discapacidad, inmigrantes, refugiados y solicitantes de asilo hasta jóvenes, desempleados, empleados de los sectores público y privado y autónomos; debajo, el título «Committed to our core strategy, we work collectively:» abre una lista numerada.

    Colectivos Destinatarios — A Quién Forma el Centro, Sin Rodeos

  • El final de la página About us en una tableta: el título «Our activity:» sobre tres tarjetas blancas, una con un logotipo de Interreg y «OPERATIONAL PROJECTS OF THE “EUROPEAN TERRITORIAL COOPERATION”», otra con la bandera europea y «ERASMUS+» y otra con un logotipo del ESPA 2014-2020 y «ESPA», cada una con un botón azul marino «READ MORE»; debajo, una franja azul marino con cuatro cifras en dos columnas: 200+ training programmes, 3,000+ participants, 50+ projects y 4 European projects.

    Nuestra Actividad — Interreg, Erasmus+ y ESPA, Cada Uno a Un Toque

  • La portada en un móvil: la barra azul marino en tres filas, con dos teléfonos, la dirección de correo y cuatro iconos de redes sociales, luego el logotipo, el selector EL/EN y un botón de menú, la cabecera principal con «ΚΔΒΜ 11101147», «Mediterranean Educational Centre», «A modern vocational training centre» y los botones «All projects» y «Read more», y debajo un icono redondo y «With vision and strategy» con su texto.

    La Portada en el Móvil — Llame o Escriba Antes Incluso de Desplazarse

  • El menú abierto en el móvil: un panel azul marino a toda altura bajo la cabecera con Home, Vocational trainings – Professional guidance, Self-training, About us, News y Contact en letra blanca grande, cada uno en su fila con una pequeña flecha y un fino separador, mientras el botón de menú se ha convertido en un botón de cierre.

    El Menú del Móvil — Seis Secciones, Cada Una Fácil de Tocar

  • La franja azul marino de la portada en un móvil: el título «More than 20 years in vocational training» sobre cuatro cifras doradas apiladas con etiquetas blancas, 200+ training programmes, 3,000+ participants, 50+ projects y 4 European projects, con la etiqueta «NEWS» empezando debajo.

    Contadores de la Portada — Cuatro Cifras que Edita el Propio Centro

  • El archivo de proyectos en inglés en un móvil: la pestaña Active 1 seleccionada en azul marino junto a Inactive 32 y una sola tarjeta con un cartel de formación del Ayuntamiento de Alejandrópolis, con un paseo marítimo con faro y personas alrededor de una mesa, sobre el título «SUD Municipality of Alexandroupoli: Targeted Training Actions for Employees — Alexandroupoli…», un breve resumen y un enlace «View project».

    La Parte en Inglés — El Mismo Archivo con Sus Propias URL

  • La lista de noticias en un móvil: bajo la cabecera, un guion dorado, el día grande «30» y «MAR 2026» junto al titular «DYPA ANNOUNCEMENT — HELPDESK», un breve resumen y un enlace «Read more», con el logotipo de la DYPA en un recuadro debajo; la siguiente entrada, otro anuncio de la DYPA del mismo día, empieza a continuación.

    Las Noticias en el Móvil — Fecha, Titular y Resumen, Legibles al Instante

  • El índice de autoformación en un móvil: tarjetas a todo el ancho, una debajo de otra, cada una con un icono de documento, un título, un breve resumen y una flecha, empezando por una guía de ayuda para migrantes y refugiados, las candidaturas espontáneas y un manual del formador sobre el uso sostenible del agua.

    Autoformación en el Móvil — Una Guía por Tarjeta, Fácil de Abrir

  • La página de contacto en un móvil: cuatro tarjetas blancas apiladas bajo la cabecera, «EMAIL US» con thessaloniki@mesogeiako.gr, dos tarjetas «CALL US» con el 2310 527722 y el 2310 537766, y «VISIT US» con una dirección en la avenida Miki Theodoraki, en Neapoli, Tesalónica.

    Contacto en el Móvil — Toque para Escribir, Toque para Llamar

Panel de administración

  • El panel de administración, en griego: una barra lateral azul marino con apartados de resumen, contenido (proyectos 34, noticias 92, páginas 20, bloques de portada) y ajustes (medios, contadores, datos de contacto), y cuatro tarjetas con cifras: 34 proyectos, 1 sin traducción completa y 16 pendientes de revisión; 92 noticias, 2 y 79; 20 páginas, 3 pendientes de revisión; y 145 archivos de medios que suman 16,7 MB; debajo, accesos rápidos para un nuevo proyecto, un nuevo anuncio, subir archivos y datos de contacto, con una nota de que cada imagen subida se convierte en WebP de menos de 200 KB.

    El Panel — Lo que Publica el Centro y Qué Traducciones Faltan o Esperan Revisión

  • La lista de proyectos de la administración, en griego: un buscador por título sobre una tabla con columnas de título, idiomas, estado y categoría; cada fila muestra un título de proyecto, una insignia «EL + EN» («1/2» en la primera, que además lleva la etiqueta de subproyectos «3 υποέργα»), una insignia verde de publicado, activo o inactivo y botones de editar y eliminar, y la mayoría de los títulos llevan una etiqueta amarilla de pendiente de revisión.

    Proyectos — Idiomas, Subproyectos y Traducciones sin Revisar en Cada Fila

  • Edición de la noticia n.º 8 en la pestaña griega, junto a una pestaña inglesa: el título «ΑΝΑΚΟΙΝΩΣΗ ΔΥΠΑ-HELPDESK» sobre una hoja blanca, el campo del slug de la URL, un cuadro de resumen, un título SEO, una descripción SEO con la indicación de 140 a 160 caracteres y los menús y la barra de herramientas del editor de contenido, con botones de cancelar y guardar arriba y en una barra en la parte inferior.

    El Editor — Pestañas en Griego e Inglés, Campos SEO, Texto Enriquecido

  • El editor de los contadores de la portada: cuatro filas, cada una con un número, un sufijo con el ejemplo «+» y una etiqueta en griego y en inglés — 200 + para programas de formación, 3000 + para participantes, 50 + para proyectos y 4 sin sufijo para proyectos europeos —, con botones de guardar arriba y abajo.

    Contadores — Las Cifras de la Portada, Editadas en Ambos Idiomas

  • Los ajustes de datos de contacto, con los campos en griego y en inglés uno junto a otro en dos paneles: en identidad, el número de registro mercantil, el código de licencia y el nombre y el subtítulo del sitio en cada idioma; en contacto, la dirección postal en cada idioma con una nota de que la web antigua no tenía ninguna, el correo electrónico, dos teléfonos y un enlace de Google Maps.

    Datos de Contacto — Un Formulario, Dos Idiomas, en Toda la Web

  • La biblioteca de medios, 145 archivos y 16,7 MB: una zona de arrastrar y soltar con borde discontinuo que indica que las imágenes se convierten a WebP de menos de 200 KB y que se aceptan archivos PDF, Word y Excel de hasta 25 MB, sobre una cuadrícula de logotipos, carteles de programas y fotografías, cada uno con su nombre de archivo, dimensiones y tamaño y botones de abrir y eliminar; las miniaturas que muestran rostros están difuminadas.

    Medios — Cada Imagen Convertida a WebP de Menos de 200 KB