Puerto Jiménez, Costa Rica

info@gexpsoftware.com

© 2026 Marcelo Retana

Todos los casos

Cómo reemplacé el WordPress de una firma sin perder 52 direcciones

Qué decidí, y por qué, cuando una firma contable y legal de Costa Rica pasó de WordPress a un sitio bilingüe hecho con Next.js.

Cliente
MAV Boutique
Sector
Asesoría contable y legal
Ubicación
Pérez Zeledón, Costa Rica
Año
2026
Ver el sitio en vivo(se abre en una pestaña nueva)
Inicio de MAV Boutique en escritorio: el titular «Patrimonio bajo control.» junto a un mapa de Costa Rica con la marca MAV.
El inicio: titular, dos llamados a la acción y la placa de Costa Rica.

Empecé por la lista de direcciones viejas

La firma detrás de este sitio hace contabilidad, impuestos y trabajo legal corporativo en Pérez Zeledón, y su sitio anterior corría en WordPress. La meta era reemplazarlo sin romper nada de lo que la gente ya usa. Por eso, antes de construir el sitio nuevo, anoté todas las páginas públicas del sitio viejo que pude encontrar, con su dirección.

Eran 52. Cada una puede estar guardada en un marcador, en la firma de un correo o en el índice de Google. Página por página decidí si conservaba su dirección o se redirigía, es decir, si mandaba al visitante a la página nueva de forma automática. Al final 47 mantuvieron la misma ruta y 5 se redirigen. Se revisaron de nuevo las 52 contra el sitio en vivo: todas terminan en una página que funciona. Las cifras de este caso corresponden al 30 de octubre de 2026.

El edificio de la firma en Pérez Zeledón, con sus rótulos en las dos fachadas
El edificio de la firma, tal como aparece en su página Nosotros.

Mi primera versión se quedó corta

Mi primera versión de producción, del 25 de setiembre, era un inicio con unas pocas subpáginas de poco contenido, y casi todas las direcciones viejas se redirigían a secciones del inicio. El 26 de setiembre descarté ese plan y tomé la otra opción sobre la mesa: cada página vieja conserva su propia ruta en el sitio nuevo.

Así el proyecto pasó a ser el sitio completo: 26 páginas en español y 25 en inglés, 47 de ellas traídas del sitio anterior. Luego comparé lo nuevo con lo viejo, página por página. En 45 páginas traídas del sitio anterior sigue al menos el 95% de las palabras originales, junto con todos los títulos viejos.

Dos idiomas piden algo más. Cada página emparejada le dice a los buscadores dónde está su versión en el otro idioma, con una etiqueta llamada hreflang. Una página de aterrizaje en español no tiene versión en inglés, así que su selector de idioma abre el inicio en inglés.

Página en inglés «Accounting Services» con un índice lateral de servicios relacionados y las primeras secciones de texto.
La versión en inglés del pilar contable; el selector del encabezado ahora dice ES.

Tres direcciones antes de un solo sitio

De mayo a agosto el proyecto fue una sala de muestras con tres direcciones funcionales: Planta, un afiche industrial; Protocolo, un expediente; y Torre de Control, un tablero de instrumentos. Las tres eran páginas reales que el dueño podía abrir y comparar. El 20 de agosto de 2026 eligió Torre de Control.

El inconveniente es real: dos de las tres nunca se usaron. Aun así se lo recomiendo a una firma cuyo negocio es la confianza, porque elegir entre páginas terminadas es más fácil que elegir entre imágenes.

La página de la sala de muestras «Tres direcciones. Una sola marca.» con tres paneles: Planta, Protocolo y Torre de Control.
Las tres direcciones que el dueño comparó.

Una portada que no castiga al teléfono

El inicio abre con un mapa de Costa Rica. En una pantalla grande con mouse es una placa 3D, y limité la versión 3D a esas pantallas. En un teléfono, o cuando el visitante le pide a su dispositivo menos movimiento, la página dibuja una versión plana del mapa y nunca carga la biblioteca 3D.

Medido en el sitio en vivo, sin comprimir: el JavaScript propio del sitio (el código que el navegador descarga para ejecutarlo) suma unos 700 KB en un teléfono y unos 1.6 MB en una computadora que corre la placa 3D. Nada de la escena se mueve solo por más de cinco segundos, el punto en que las pautas de accesibilidad web piden un control de pausa.

Un detalle: el primer contorno del país en el código se escribió de memoria y parecía una mancha genérica. Se reemplazó por uno trazado de un mapa vectorial con licencia, simplificado de 801 puntos a 286.

El inicio en un teléfono: titular, dos botones y la parte superior del mapa de Costa Rica.
En teléfonos la portada se apila y usa el dibujo liviano del mapa.

El formulario confirma solo lo que se envió

Aplicar a esta firma lleva tres pasos, no un simple cuadro de mensaje. Un formulario que falla en silencio es el peor caso para un dueño, porque el mensaje perdido no deja rastro. Por eso la pantalla de confirmación aparece solo cuando el proveedor de correo acepta el mensaje. Si no lo acepta, el visitante lo ve en pantalla y todas sus respuestas siguen ahí.

Desde ahí puede mandar el mismo texto por WhatsApp, copiarlo, descargarlo o enviarlo por correo. El costo es más código y más pantallas que probar. Creo que una solicitud perdida cuesta más que eso.

La página de aplicación en el paso 1 de 3, con campos vacíos de nombre, empresa, correo y teléfono y un botón para continuar.
El formulario de aplicación empieza con datos de contacto; los pasos siguientes preguntan por el negocio.

Qué muestran las revisiones y qué no

Al correrlas de nuevo, tres de las revisiones del proyecto dieron estos resultados. Un escaneo de accesibilidad con axe, una herramienta de código abierto, recorrió las 51 páginas en ancho de teléfono y de escritorio y no halló ningún problema grave ni crítico. Un script que compara el sitio nuevo con el anterior pasó 548 revisiones contra el dominio en vivo. Un tercer script lee los textos del sitio y falla si encuentra promesas, horarios, precios o porcentajes que el dueño no ha confirmado; salió limpio. Las 360 pruebas unitarias del repositorio también pasan.

Las revisiones automáticas tienen límites. Detectan regresiones y errores comunes, pero no sustituyen a una persona que lea cada página ni al dueño que apruebe la redacción. El escaneo de accesibilidad también listó cuatro avisos moderados de orden de títulos en dos páginas.

Lo que le diría a un dueño de negocio

  • Liste todas las direcciones viejas antes de diseñar y decida una por una: conservarla, redirigirla o retirarla a propósito.
  • Pida tres direcciones de diseño funcionales en lugar de maquetas, y acepte que dos se van a descartar.
  • Un formulario debe confirmar el envío solo cuando el servicio de correo lo acepta, y conservar las respuestas si algo falla.
  • Pregunte qué carga el sitio en un teléfono. Lo pesado puede reservarse para las pantallas que lo aguantan.
  • Corra las revisiones de accesibilidad y SEO sobre el sitio en vivo, no solo sobre una copia, y lea usted las páginas.

Tecnología

  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
  • GSAP
  • Three.js
  • Bun
  • Vercel
  • Resend