Volver a Proyectos

☎️ MP Solutions Group

Landing corporativa de un call center: todos los datos de empresa en un único fichero de configuración

En producción Config centralizada JSON-LD PWA

Escala del Proyecto

6Páginas
1Fichero de config
9Archivos
2.2kLíneas

Descripción General

MP Solutions Group es un call center profesional argentino. La web es su presentación pública: servicios, proceso de trabajo, resultados, oficina y contacto, más una página propia de empleo y las tres páginas legales obligatorias.

El problema real de una web corporativa no es construirla, es mantenerla. Cambiar un teléfono implica normalmente tocarlo en la cabecera, en contacto, en el pie, en las tres páginas legales y en los datos estructurados. Seis sitios, y siempre se olvida uno.

La solución aquí es config.js: todos los datos de la empresa — razón social, CUIT, teléfono, WhatsApp, emails, dirección, jurisdicción, redes y las cifras de resultados — viven en un único fichero y se propagan solos a todas las páginas mediante atributos data-mp-*. Incluso el JSON-LD de Google se genera desde ahí.

Tecnologías Utilizadas


HTML5

CSS3

JavaScript vanilla

JSON-LD Schema.org

PWA

SEO / Open Graph

.htaccess

Páginas y Componentes

🏠 Landing principal

index.html con hero, servicios, proceso, resultados, carrusel de oficina y contacto.

💼 Empleo

empleo.html — página propia de "Trabajá con nosotros" con los perfiles buscados y envío de CV por WhatsApp o email con el mensaje ya preparado.

⚖️ Páginas legales

Privacidad conforme a la Ley 25.326 de Argentina, política de cookies y términos y condiciones.

🚫 Página 404

Error personalizado, definido también en el .htaccess.

⭐ config.js

El fichero central: nombre, razón social, CUIT, contacto, dirección, jurisdicción, redes y cifras de resultados.

🍪 Banner de cookies

Consentimiento de aceptar o rechazar, guardado en localStorage y reabrible desde el pie.

🎞️ Carrusel

Galería de imágenes de la oficina.

📊 Contadores

Cifras de resultados animadas al aparecer en pantalla.

Arquitectura

Sitio estático sin framework ni proceso de compilación, servido como ficheros. El patrón central es la inyección de datos por atributos: los elementos del HTML llevan data-mp-text, data-mp-link o data-mp-social, y config.js los rellena al cargar. Cambiar un dato de empresa no requiere tocar ni una línea de HTML. 

MP/WEB/
├── index.html             # landing completa
├── empleo.html            # trabajá con nosotros
├── config.js              #  DATOS DE LA EMPRESA
├── app.js                 # menú, scroll-reveal, cookies, carrusel
├── style.css
├── privacidad.html · cookies.html · terminos.html
├── 404.html
├── robots.txt · sitemap.xml · site.webmanifest
├── .htaccess              # HTTPS, gzip, caché, seguridad, 404
└── assets/                 # logo, favicon, iconos PWA, og-image

SEO y Despliegue Configurados

  • Metadatos completos: title, description, keywords, author, robots y canonical.
  • Open Graph y Twitter Card con imagen de 1200×630 generada desde el logo.
  • Datos estructurados JSON-LD de tipo LocalBusiness, generados desde config.js.
  • robots.txt y sitemap.xml incluidos.
  • Favicon, iconos PWA, apple-touch-icon y site.webmanifest: instalable como aplicación.
  • .htaccess que fuerza HTTPS, redirige www a sin www, y activa gzip, caché y cabeceras de seguridad.
  • HSTS preparado pero comentado, para activarlo solo cuando HTTPS esté verificado.
  • Google Analytics desactivado por defecto: solo se carga si el visitante acepta las cookies.

Retos Técnicos y Decisiones de Diseño

Un config.js porque un .env no es posible

En una aplicación con backend, los datos de empresa irían en un .env. Aquí el sitio es estático y el navegador no puede leer un .env. config.js cumple la misma función: un único punto de verdad. La diferencia es que es público, así que solo contiene datos que ya son públicos — nunca secretos.

Analítica que respeta el consentimiento de verdad

Lo habitual es cargar Google Analytics siempre y mostrar el banner de cookies como decoración. Aquí el script de analítica solo se carga si el visitante acepta, y su ID está vacío por defecto. Es más trabajo y menos datos, pero es lo que el banner dice que hace.

Paleta extraída del logo real

Los colores del sitio son los exactos del logo corporativo: azul royal #1F419B, navy #16305F, cyan #4E9BD1, plateado #C7CCD2 y perla #E5E4E1. La cabecera y las tarjetas usan fondo perla para que el logo se integre en lugar de flotar sobre un recuadro blanco.

Documentar honestamente qué falta

El README indica de forma explícita que el logo actual es una reconstrucción vectorial, porque el original tiene el fondo incrustado y no se puede recortar limpio, y que hay que sustituirlo por el vector del diseñador. Dejar constancia de lo que es provisional evita que se quede así para siempre.

Mi Rol

Diseño y desarrollo completos — autor único.

Estructura del sitio, sistema de configuración centralizada, páginas legales adaptadas a la normativa argentina, SEO con datos estructurados, configuración PWA, .htaccess de producción y generación de la iconografía.

Estado del Proyecto

En producción en mpsolutions.com.ar. Las páginas legales son plantillas orientativas y el propio README recomienda revisarlas con un profesional.

Código y Enlaces

Demo no disponible Código privado

El repositorio no es público al ser un trabajo para cliente.