Funcionamiento General y Experiencia de Usuario (UX/UI)

Esta sección describe la plataforma en su totalidad: las funcionalidades implementadas, los flujos de usuario, el sistema de notificaciones y cada módulo que contribuye a una experiencia coherente desde el descubrimiento de productos hasta la post-compra.

Funcionalidades Clave

1. Editor de Diseño Interactivo

Es la funcionalidad estrella. Utiliza Fabric.js 5.3.1 como motor de canvas sobre la imagen del producto.

  • Diseño multi-zona: frontal, espalda, nuca, manga izquierda, manga derecha (5 canvases independientes).
  • Editor de texto: 20 Google Fonts, 16 efectos de texto (neón, oro, fuego, glitch, arcoíris, retro, 3D...).
  • Subida de imágenes: JPG, PNG, WEBP y HEIC (conversión automática vía heic2any para fotos de iPhone).
  • Filtros de imagen: sepia, Kodak, B&W, vintage y más.
  • Biblioteca de stickers y emojis.
  • Plantillas predefinidas para diseño rápido.
  • Sistema Undo/Redo completo.
  • Auto-guardado: el progreso se guarda periódicamente en la BD (usuarios.diseno_en_progreso como JSON) para continuidad entre dispositivos.
  • Biblioteca personal: el usuario puede guardar su diseño para reutilizarlo en futuras compras.
  • Re-edición desde el carrito: carga el JSON del diseño guardado y permite modificarlo.
  • Calculadora de precio en tiempo real: varía según producto, talla y extras (doble cara, nuca, mangas).

2. Catálogo de Productos Dinámico

Más que una galería estática: el catálogo es completamente dinámico y gestionado desde la BD.

  • Filtros por categoría: Camisetas, Sudaderas, Tazas, Cuadros (pill navigation).
  • Búsqueda: por nombre, descripción y categoría.
  • Ordenación: nombre A-Z/Z-A, precio asc/desc, novedades.
  • Filtro de rango de precios (mínimo/máximo).
  • Paginación: 25 items por página con navegación circular.
  • Contador de resultados con badges de filtros activos.
  • Skeleton loading mientras cargan las imágenes.
  • Vista de detalle: galería de imágenes, modal de zoom, guía de tallas (S-5XL), selector de color con swatches circulares, selector de talla con tooltips de dimensiones.
  • Productos relacionados aleatorios de la misma categoría.
  • Cross-sell: "¿Quieres este diseño en otro producto?" con CTA WhatsApp/email/teléfono.
  • Videos por producto: frontal, trasero y "cómo se hace" (embed modal).

3. Carrito de Compras Inteligente

El carrito utiliza un sistema de persistencia dual que evita la pérdida de datos y permite continuidad entre dispositivos.

  • Persistencia dual: sesión PHP + BD (usuarios.carrito_guardado como JSON) para usuarios logueados.
  • Sincronización multi-pestaña: en cada carga de página, fuerza que la sesión coincida con la BD para evitar conflictos.
  • Fusionado guest → logged-in: al iniciar sesión, fusiona el carrito de la sesión con el de la BD (suma cantidades para catálogo, append para custom).
  • Desglose de precio personalizado: base + doble cara (+10€) + nuca (+3€) + manga izq (+3€) + manga der (+3€).
  • Control de cantidad con tope máximo de 500 unidades por item.
  • Vista previa de diseño en modal fullscreen (frontal + espalda + extras).
  • Barra de progreso de envío gratuito (gratis a partir de 45€).
  • Badges de confianza: PayPal, Visa, Mastercard, Bizum, SSL, protección al comprador.
  • Responsive: layout de cards optimizado para móvil.

4. Checkout y Doble Pasarela de Pago

Proceso de compra optimizado con dos métodos de pago y protección anti-fraude en cada transacción.

  • Login obligatorio (redirige con ?redirect=checkout).
  • Libreta de direcciones guardadas con selección visual por cards.
  • Formulario de dirección con intl-tel-input (selector de país + formato internacional).
  • Opción de guardar dirección nueva en el perfil del usuario.
  • Resumen del pedido con imágenes, tallas, colores, cantidades y precios.
  • BIZUM: crea pedido como "Pendiente Pago", genera mensaje WhatsApp preformateado con referencia.
  • PAYPAL: Smart Buttons con verificación completa del pago en el servidor (ver sección Seguridad).
  • Protección anti-fraude integrada en cada transacción (ver sección Seguridad).

5. Gestión de Pedidos y Ciclo de Vida

Cada pedido sigue un ciclo de vida completo con estados definidos, historial de cambios y notificaciones automáticas.

  • Estados: Pendiente Pago → Pagado → En Taller → Enviado → Entregado (o Cancelado).
  • Estado especial: "Revisión Fraudulenta" para detección automática de manipulación de precios.
  • Historial de cambios: cada cambio de estado se registra en pedido_historial con timestamp, estado anterior/nuevo y quién lo cambió.
  • Vista de detalle del cliente: productos, imágenes custom (frontal/espalda/extras), color, talla, notas.
  • Zoom hover sobre imágenes de diseño personalizado.
  • Cancelación por el cliente: solo permitida en estado "Pendiente Pago".
  • URL de seguimiento integrada cuando el pedido está en estado "Enviado".
  • Badges de estado coloreados para identificación rápida.

6. Panel de Usuario (4 Pestañas)

Dashboard personal que convierte la tienda en una herramienta para el usuario, no solo un punto de venta.

  • PEDIDOS: historial completo con filtro por mes, badges de estado, enlaces a detalle, botón de cancelación, enlaces de tracking.
  • MI BIBLIOTECA: galería de imágenes subidas por el usuario, enlaces para personalizar, descargar o eliminar.
  • DATOS DE ENVÍO: email (solo lectura), gestión de direcciones (añadir/editar/eliminar/predeterminada), teléfono con intl-tel-input.
  • SEGURIDAD: cambio de contraseña con verificación de la actual, confirmación de la nueva, reCAPTCHA.
  • Sticky sidebar navigation en desktop, layout adaptado en móvil.

7. Sistema de Emails Transaccionales

Todas las comunicaciones automáticas se envían vía PHPMailer con SMTP externo para máxima entregabilidad (ver sección Tecnología).

  • Template HTML branded con logo, barra de gradiente configurable por tipo de email, footer con redes sociales y links legales.
  • 17 eventos automáticos que disparan emails (ver tabla detallada más abajo).

8. Newsletter y Comunicación Masiva

  • Suscripción desde el footer en cualquier página.
  • Protección con honeypot + reCAPTCHA + CSRF.
  • Email de bienvenida con lista de beneficios de ser suscriptor.
  • Email de despedida al darse de baja.
  • Notificación al admin de cada nueva suscripción.
  • Panel de envío masivo para admin: puedeEnviar a clientes o a suscriptores del newsletter.
  • Validación por destinatario y sanitización del asunto (max 200 caracteres, sin saltos de línea).

9. SEO y Visibilidad

  • Sitemap XML dinámico que consulta productos de la BD en tiempo real.
  • Sitemap HTML para visitantes humanos.
  • robots.txt con directivas de rastreo.
  • Verificación de Google Search Console.
  • Canonical URLs en todas las páginas.
  • Open Graph tags para compartir en redes sociales.
  • Títulos dinámicos vía $meta_title.
  • noindex en páginas sensibles (ej. gracias.php).
  • preconnect hints para recursos externos (CDNs, Google Fonts).
  • Redirecciones 301 desde las URLs antiguas de Shopify.

10. Página de Contacto Premium

  • Hero split-screen con CTA directo a WhatsApp Business.
  • Grid de métodos de contacto (WhatsApp, email, dirección física).
  • Enlaces a TikTok, Instagram y Threads.
  • Embed de video de la marca.
  • Formulario con contador de caracteres en tiempo real.
  • Scroll reveal animations y efecto de cursor personalizado.
  • Google Maps embed con la ubicación de la tienda.
  • Sección de reseñas de clientes.
  • Sección "Sobre nosotros" con estadísticas.
  • Email dual: notificación al admin + recibo de confirmación al cliente.
  • Rate limiting: 1 envío cada 5 minutos por sesión.

11. Páginas Legales y Cumplimiento

  • Aviso Legal: empresa (CAMIGLOBO SL, CIF B67479100), cumplimiento LSSI, propiedad intelectual.
  • Política de Privacidad: GDPR/LOPD, tratamiento de datos.
  • Términos y Condiciones: condiciones de venta.
  • Política de Envíos: gratuito >45€, 4.95€ el resto.
  • Política de Reembolso: productos personalizados sin devolución.
  • FAQ: acordeón interactivo por categorías.
  • Cookie consent banner: aceptar/rechazar con persistencia en localStorage.

12. Panel de Administración Completo

  • Gestión de Pedidos: búsqueda por ID/nombre/email, filtros por mes/estado, cards expandibles con detalles de productos, cambio de estado inline con campo de tracking, envío rápido de WhatsApp, estadísticas de ingresos.
  • Gestión de Productos: CRUD completo con upload de imagen/video, galería múltiple, toggle de producto destacado, edición de precio/descripción/categoría, sincronización atómica con protección anti-borrado masivo (requiere confirmación si >50%).
  • Auditoría de Pagos: JOIN de pagos+pedidos+usuarios, filtros por mes/año/estado, dashboard de ingresos/completados/pendientes/reembolsos/chargebacks.
  • Base de Clientes: lista con estadísticas (total pedidos, gasto total), búsqueda, links rápidos de WhatsApp/email.
  • Envío Masivo: a clientes o suscriptores newsletter.
  • Cleanup automático (ejecuta en cada carga): borra audit_log >30 días, biblioteca_recursos >60 días con limpieza de archivos físicos, archivos huérfanos de diseño >15 días.

13. Sistema de Direcciones

  • Múltiples direcciones por usuario (tabla user_direcciones).
  • Alias personalizable ("Casa", "Oficina", etc.).
  • Dirección predeterminada seleccionable.
  • CRUD completo desde el perfil.
  • Guardado opcional durante el checkout.
  • Validación de código postal (5 dígitos).

14. Autenticación Social con Google

  • OAuth 2.0 con protección CSRF vía state parameter.
  • Auto-creación de usuario si no existe (contraseña aleatoria de 64 caracteres).
  • Vinculación de Google ID a cuentas existentes.
  • Fusionado de carrito post-OAuth (misma lógica que login normal).
  • Redirección inteligente con whitelist (sin open redirect).
  • Intercambio de authorization code vía cURL (no file_get_contents).

15. Recuperación de Contraseña Segura

  • Token criptográficamente seguro (random_bytes(32)).
  • Expiración del token en 1 hora.
  • Rate limiting: 3 solicitudes por hora por IP.
  • No revela si el email existe (siempre muestra "email enviado").
  • Destrucción del token tras uso (campos a NULL).
  • Strength meter visual en la nueva contraseña.
  • Link con branding en el email de recuperación.

16. Landing Page y Contenido

  • Hero section con animaciones.
  • Grid de 4 colecciones (Camisetas, Sudaderas, Tazas, Cuadros).
  • Productos destacados (filtrados por campo destacado=1 en BD).
  • Guía de proceso en 4 pasos (diseña → personaliza → pide → recibe).
  • Embed de Google Maps con ubicación de la tienda.
  • Sección de reseñas de clientes.
  • Sección de video de la marca.
  • CSS responsive completo.

Flujo de Compra Completo

1. NAVEGACIÓN: El usuario explora `productos.php` con filtros, búsqueda y paginación.
2. DETALLE: Entra en `producto.php` → galería, zoom, guía de tallas, selector de color/talla.
3. PERSONALIZACIÓN: Entra en `personalizar.php`. Se inicializa Fabric.js con el canvas.
4. DISEÑO: Añade texto (20 fuentes, 16 efectos) / imágenes (sube o desde biblioteca) / stickers / filtros.
   El progreso se auto-guarda periódicamente vía `guardar_progreso.php` → BD (`diseno_en_progreso`).
5. PRECIO: Se recalcula en tiempo real según producto, talla y extras aplicados.
6. GUARDAR: Al pulsar "Añadir", `guardar_diseno.php` valida el diseño, guarda las imágenes
   en el servidor con nombres seguros, recalcula precios en el backend y crea la entrada en el carrito.
7. CARRITO: `carrito.php` muestra items con preview de diseño, desglose de extras, controles de cantidad.
8. CHECKOUT: `checkout.php` → elige dirección (de BD o nueva) → acepta términos y condiciones.
9. PAGO:
   a) BIZUM: pedido "Pendiente Pago" → email con instrucciones → WhatsApp preformateado.
   b) PAYPAL: verificación completa del pago en servidor → pedido "Pagado" → email confirmación.
   Ambos flujos terminan en `gracias.php` con animación de confetti.
10. POST-COMPRA: El admin cambia estados desde `admin_pedidos.php`, disparando emails automáticos
    al cliente en cada transición (En Taller, Enviado con tracking, Entregado, Cancelado).
11. PERFIL: El usuario ve historial completo, descarga diseños de su biblioteca, gestiona direcciones.

Tabla Completa de Emails Transaccionales

EventoDestinatarioAsuntoColor
RegistroClienteBienvenida con código de descuento 10% (BIENVENIDA10)Rojo
RegistroAdminNotificación de nuevo clienteVerde
Recuperación contraseñaClienteLink de reseteo (válido 1h)Púrpura
Pedido BizumClienteConfirmación con instrucciones de pago BizumNaranja
Pedido BizumAdminAlerta de nueva venta BizumNaranja
Pedido PayPalClientePago confirmadoVerde
Pedido PayPalAdminNuevo pedido pagadoVerde
Estado: En TallerClientePedido en producciónAmarillo
Estado: EnviadoClientePedido enviado con link de trackingAzul
Estado: EntregadoClientePedido entregado + petición de tag en InstagramVerde
Estado: CanceladoClienteNotificación de cancelaciónRojo
Estado: CanceladoAdminNotificación de cancelaciónRojo
Newsletter suscripciónClienteBienvenida al clubRojo
Newsletter suscripciónAdminNuevo suscriptorVerde
Newsletter bajaClienteConfirmación de bajaGris
Formulario contactoAdminNuevo mensaje de contactoRojo
Formulario contactoClienteConfirmación de recepciónRojo

Estrategia de Seguridad Multicapa

La seguridad es un pilar fundamental del proyecto. Se implementaron 18 capas de protección para asegurar la integridad de la plataforma, la confidencialidad de los datos de los usuarios y la disponibilidad del servicio. Cada capa aborda una amenaza específica y funciona de forma independiente, creando defensa en profundidad.

#Capa de ProtecciónImplementaciónAmenaza Mitigada
1 Anti-SQL Injection Uso exclusivo de Consultas Preparadas con PDO (EMULATE_PREPARES = false). Impide que un atacante inyecte comandos SQL maliciosos en formularios para robar, modificar o borrar la base de datos entera, incluyendo datos de clientes y pedidos.
2 Anti-CSRF Tokens aleatorios únicos por sesión (random_bytes(32)), validados en cada petición POST. Comparación con hash_equals() en formularios sensibles. Evita que una página web maliciosa fuerce al navegador de un usuario logueado a ejecutar acciones no deseadas (cambiar contraseña, cancelar pedido) sin su consentimiento.
3 Anti-XSS Sanitización estricta de todas las salidas HTML con wrapper h() (ejecuta htmlspecialchars()). strip_tags() para campos de texto libre. Previene la inyección de scripts maliciosos (JavaScript) que podrían robar cookies de sesión de otros usuarios o del administrador.
4 Hashing de Contraseñas Algoritmo BCRYPT con password_hash() y password_verify(). Salt automático por cada contraseña. Si la BD fuese comprometida, las contraseñas no estarían en texto plano. BCRYPT es computacionalmente costoso, haciendo inviable la fuerza bruta sobre los hashes.
5 Protección Anti-Fraude en Pagos Recálculo de precios en el servidor en cada pedido. Verificación S2S (Server-to-Server) de PayPal obteniendo el monto real desde la API. Flag "Revisión Fraudulenta" si hay discrepancia >0.01€. Bloquea intentos donde un usuario modifica el precio en el HTML de su navegador. El servidor siempre usa su propio cálculo como fuente de verdad.
6 Rate Limiting Registro y bloqueo temporal por IP en la tabla login_intentos (5 intentos fallidos = bloqueo 15 min). Rate limiting por sesión en formularios (contacto: 1/5min, registro: 5/hora, recovery: 3/hora, uploads: 15/hora, diseños: 20/hora). Mitiga ataques de fuerza bruta (adivinar contraseñas), spam masivo en formularios y abuso de subidas.
7 Mitigación de Bots Google reCAPTCHA v2 en registro, contacto, newsletter, recuperación de contraseña. Campos Honeypot invisibles en contacto, newsletter, registro, footer. Dificulta que bots creen cuentas falsas, inunden formularios o se suscriban masivamente. Los honeypots son campos que solo los bots rellenan, delatando su identidad.
8 Seguridad de la Sesión Cookies con flags HttpOnly (no accesible por JS), Secure (solo HTTPS), SameSite=Lax (no cross-site). Modo estricto. Timeout de inactividad de 2 horas. Regeneración de ID en login (session_regenerate_id(true)). Vida útil de 24 horas. Endurece la protección contra robo de sesión por XSS, ataques de redirección y secuestro de cookies.
9 Protección de Archivos Sensibles Reglas en .htaccess: deniega acceso a .env, .git, .sql, .bak, .log, config.php. Deshabilita listado de directorios (Options -Indexes). Directorio includes/ con denegación total. Evita que atacantes accedan a credenciales, configuración o backups a través del navegador web.
10 Registro de Auditoría Tabla audit_log que registra: logins exitosos/fallidos, alertas de fraude, cambios de contraseña, registros, envíos de contacto, subidas de recursos. Cada entrada incluye user_id, acción, detalles, IP y timestamp. Auto-limpieza de entradas >30 días. Vital para análisis forense post-incidente. Permite identificar qué acciones se realizaron, desde qué IP y cuándo.
11 Seguridad de Subidas Whitelist de extensiones (.jpg, .png, .webp). Verificación de MIME type con finfo (no solo extensión). Re-renderizado con GD library (destruye ataques polyglot, elimina metadata EXIF). Permisos 0644. .htaccess en uploads/ bloquea ejecución de scripts. Nombre seguro: prefix + random_bytes(8) + timestamp. Previene subida de webshells, scripts PHP maliciosos ocultos en imágenes, y ataques de ejecución de código arbitrario.
12 Anti-Path Traversal basename() en TODAS las operaciones con rutas de archivo. Verificación de propiedad (WHERE user_id = ?) antes de eliminar recursos. Impide que un usuario acceda o elimine archivos fuera de su directorio autorizado mediante secuencias como ../../../etc/passwd.
13 Anti-Open Redirect Whitelist de redirecciones permitidas: solo checkout, perfil, productos, carrito. Nunca redirige a URLs externas arbitrarias. Previene ataques de phishing donde un atacante usa la URL del sitio para redirigir a una página maliciosa.
14 Content Security Policy (CSP) Header CSP que permite solo dominios conocidos: PayPal, Google (reCAPTCHA, OAuth, Fonts, Maps), CDNs (cdnjs, jsdelivr), Font Awesome, TikTok embeds, WhatsApp links. Bloquea la ejecución de scripts de orígenes no autorizados, mitigando XSS incluso si un atacante inyecta código HTML.
15 HTTP Strict Transport Security Header Strict-Transport-Security: max-age=31536000; includeSubDomains; preload. Redirección 301 de HTTP a HTTPS. Fuerza que todas las conexiones sean por HTTPS, previniendo ataques de downgrade y man-in-the-middle.
16 Anti-DoS en Subidas Límite de 15MB en payload base64 para diseños. Límite de 5MB para imágenes de biblioteca. Rate limiting: 15 subidas/hora/usuario y 20 guardados de diseño/hora/IP. Previene ataques de denegación de servicio mediante subida masiva de archivos que saturen el almacenamiento o la memoria del servidor.
17 Anti-Spam Honeypot fields en contacto, newsletter, registro y footer. reCAPTCHA v2 en registro, contacto, newsletter, recuperación. Rate limiting por sesión/IP. Capa múltiple contra spam automatizado. Los honeypots son campos CSS-ocultos que solo los bots rellenan.
18 Cumplimiento GDPR/LOPD Cookie consent banner con aceptar/rechazar (localStorage). Política de privacidad completa. Checkbox obligatorio de aceptación en registro. Permissions-Policy que bloquea FLoC, attribution reporting y ad auction. Opción de baja de cuenta. Cumple con la normativa europea de protección de datos, otorgando al usuario control sobre sus datos y cookies.

Transacciones y Consistencia de Datos

Las operaciones críticas (creación de pedidos, pagos) utilizan transacciones atómicas con BEGIN/COMMIT/ROLLBACK. Si cualquier paso de la inserción falla (pedido, detalles, pago), la operación completa se revierte, evitando datos inconsistentes como pedidos sin detalles o pagos sin pedido asociado.

Headers de Seguridad del Servidor

HeaderValorPropósito
X-Frame-OptionsSAMEORIGINPreviene clickjacking (el sitio no puede ser embebido en iframes externos)
X-Content-Type-OptionsnosniffEvita que el navegador "adivine" el tipo de contenido
Referrer-Policy(configurado)Controla qué información de referrer se envía
Permissions-Policybrowsing-topics=()Bloquea FLoC y tracking de intereses del navegador
Strict-Transport-Securitymax-age=31536000Fuerza HTTPS por 1 año

Stack Tecnológico y Decisiones

La elección de tecnologías se basó en la robustez, el soporte de la comunidad y la adecuación a los requisitos de un e-commerce a medida. Se optó por un stack tradicional y probado, minimizando dependencias complejas para facilitar el mantenimiento.

Componentes Principales

Backend

PHP 8.x: Elegido por su madurez en el ecosistema web. La versión 8.x ofrece un rendimiento competitivo y características de lenguaje modernas. Permite una arquitectura simple sin la sobrecarga de un framework MVC, adecuada para este proyecto.

MariaDB (MySQL): Motor de base de datos relacional con soporte transaccional completo. Codificación utf8mb4 para compatibilidad total con cualquier carácter (incluidos emojis).

PDO: Capa de acceso a datos con prepared statements reales (EMULATE_PREPARES = false), manejo de excepciones y fetch asociativo.

Frontend

Vanilla JavaScript: Sin framework pesado (React, Vue) para las páginas principales. Máxima velocidad de carga y simplicidad. JS puro para interacciones de UI, validaciones de formularios y llamadas AJAX.

Fabric.js 5.3.1: Única dependencia frontend "pesada". Motor del editor de diseño canvas. Provee API completa para manipulación de objetos, serialización a JSON, filtros de imagen y exportación a PNG.

CSS Responsive Propio: Grid layouts, mobile-first, skeleton loading, animaciones scroll reveal, efectos de cursor personalizado.

intl-tel-input: Input de teléfono internacional con selector de país y formato automático según región.

Infraestructura

Hosting Compartido (Hostinger): Solución coste-efectiva. Panel hPanel para gestión de BD, dominios, Cron Jobs, archivos y certificados SSL.

Apache + .htaccess: URLs limpias (mod_rewrite), redirecciones, reglas de seguridad descentralizadas, configuración de PHP limits (64MB upload, 256MB memory, 300s execution).

SMTP Hostinger: Puerto 465 con SSL para entrega fiable de emails transaccionales vía PHPMailer.

Helper Files

includes/pricing.php (59 líneas): Funciones precioBaseCatalogo() y calcularPrecioPersonalizado(). Lógica de precios: doble cara +10€, nuca +3€, manga izq +3€, manga der +3€, azulejo fijo 9€.

includes/colors.php (56 líneas): Mapa centralizado de 50+ colores con valores hex y aliases para variantes heather/vintage. Usado en carrito, admin y páginas de producto.

Archivos Maestros

includes/header.php (602 líneas): Navbar completa con logo, buscador, categorías, acciones de usuario (login/perfil/carrito), dropdown de admin, links a redes sociales, menú móvil responsive, cursor dot personalizado.

includes/footer.php (197 líneas): Formulario de newsletter (con honeypot + CSRF + reCAPTCHA), links del footer, iconos de redes sociales, cookie consent banner, sistema de toast notifications.

Todas las Dependencias y Servicios Externos

Servicio / LibreríaUso PrincipalDetalles de Implementación
PayPal SDK Pasarela de pago Smart Buttons en frontend para UX fluida. API REST en backend para verificación S2S: obtiene token OAuth, consulta orden en api-m.paypal.com (producción), extrae monto real pagado. Fundamental para anti-fraude.
Google reCAPTCHA v2 Protección anti-bots Widget en formularios de registro, contacto, newsletter y recuperación. Verificación server-side vía cURL a google.com/recaptcha/api/siteverify.
Google OAuth 2.0 Login social Flujo: redirect a accounts.google.com → callback en procesar_google.php → intercambio de code por token vía cURL → obtención de perfil desde googleapis.com. Protección CSRF con state parameter.
PHPMailer Envío de emails Wrapper enviarEmail() en config.php. SMTP Hostinger, puerto 465, SSL. Template HTML branded con barra de gradiente configurable, logo y footer con redes sociales. Superior a mail() en entregabilidad.
Fabric.js 5.3.1 Editor de diseño canvas CDN: cdnjs.cloudflare.com. Motor del editor interactivo. Maneja: renderizado de canvas, manipulación de objetos (texto, imagen, rect, circle), filtros, serialización JSON, exportación PNG, undo/redo.
heic2any Conversión HEIC→PNG CDN: cdn.jsdelivr.net. Convierte automáticamente fotos en formato HEIC (formato nativo de iPhone) a PNG visualizable en el navegador. Ejecución client-side.
intl-tel-input Input teléfono internacional CDN: cdnjs.cloudflare.com. Selector de país con banderas, formato automático del número según la región seleccionada. Usado en checkout y perfil.
canvas-confetti Animación post-compra CDN: cdn.jsdelivr.net. Efecto de confetti en colores de marca (rojo, verde, negro) en la página de agradecimiento gracias.php.
Font Awesome 6.5.1 Iconografía CDN: cdnjs.cloudflare.com. Iconos para navegación, acciones de usuario, botones de redes sociales, badges de estado, etc.
Google Fonts Tipografías del editor 20 fuentes tipográficas cargadas dinámicamente en el editor de diseño para ofrecer variedad creativa al usuario.
Google Maps Ubicación de tienda Embed estático en index.php y contacto.php. Links de Google Maps generados dinámicamente con la dirección del pedido para el admin.
WhatsApp Business Comunicación directa Links wa.me/34653851786 en contacto, cross-sell de producto, mensajes preformateados de pedidos Bizum y contacto rápido desde admin.
Instagram Prueba social Enlaces en header, footer y email. Petición de tag en email de entrega.
TikTok + Threads Contenido social Links en header, footer y página de contacto.

Límites de PHP Configurados

ParámetroValorPropósito
upload_max_filesize64MBPermite subir imágenes y videos de alta calidad para productos
post_max_size64MBPermite envío de formularios con múltiples archivos adjuntos
memory_limit256MBNecesario para procesamiento de imágenes con GD library y re-renderizado
max_execution_time300sTiempo suficiente para procesar pedidos complejos con múltiples diseños

Diseño y Estructura de la Base de Datos

Se ha diseñado un esquema relacional normalizado de 11 tablas para garantizar la integridad, evitar la redundancia de datos y optimizar las consultas. El motor es MariaDB (MySQL) con codificación utf8mb4.

Diagrama de Relaciones

La tabla usuarios es la entidad central del sistema. Casi todas las demás tablas se relacionan directa o indirectamente con ella.


[usuarios] 1-N [pedidos] 1-N [pedidos_detalle]
   |                  |
   +-- 1-N [user_direcciones]     +-- 1-N [pedido_historial]
   |                  |
   +-- 1-N [biblioteca_recursos]  `-- 1-1 [pagos]
   |
   `-- (login_intentos se relaciona por IP, no por FK)

[productos] N-1 [pedidos_detalle]

[newsletter]     (independiente - suscriptores)
[audit_log]      (independiente - registro de auditoría)
            

Todas las Tablas (11)

1. usuarios

Entidad central. Contiene autenticación, perfil y datos persistentes del usuario.

ColumnaTipoDescripción
idINT PK AUTO_INCREMENTIdentificador único del usuario
nombreVARCHARNombre completo
emailVARCHAR UNIQUEEmail para login (único en el sistema)
passwordVARCHARHash BCRYPT de la contraseña
rolENUM('cliente','admin')Rol del usuario en el sistema
telefonoVARCHARNúmero de teléfono con prefijo internacional
direccionTEXTDirección postal principal
ciudadVARCHARCiudad
cpVARCHAR(5)Código postal (validado: 5 dígitos)
fecha_registroDATETIMEFecha de creación de la cuenta
carrito_guardadoJSONCarrito persistido en BD para usuarios logueados (sync multi-dispositivo)
diseno_en_progresoJSONEstado serializado del editor Fabric.js (auto-guardado de progreso)
reset_tokenVARCHARToken para recuperación de contraseña (se destruye tras uso)
reset_expiresDATETIMEFecha de expiración del token de reset (1 hora)
google_idVARCHARID de Google para login social OAuth 2.0

2. pedidos

Cabecera de cada orden de compra. Contiene la información general del pedido.

ColumnaTipoDescripción
idINT PK AUTO_INCREMENTIdentificador único del pedido
id_pagoVARCHARReferencia externa de pago (PayPal order ID o código Bizum)
user_idINT FK → usuariosUsuario que realizó el pedido
productosTEXTResumen de productos del pedido
totalDECIMALMonto total del pedido (calculado en servidor)
direccion_completaTEXTDirección de envío completa
estadoVARCHAREstado actual: Pendiente Pago, Pagado, En Taller, Enviado, Entregado, Cancelado, Revisión Fraudulenta
fechaDATETIMEFecha y hora de creación del pedido
tracking_urlVARCHARURL de seguimiento del envío (añadida por admin al marcar como Enviado)
payment_idVARCHARID interno del registro de pago asociado

3. pedidos_detalle

Tabla más crítica para el negocio. Cada fila es un producto dentro de un pedido. Aquí se almacena la personalización.

ColumnaTipoDescripción
idINT PK AUTO_INCREMENTIdentificador único del detalle
pedido_idINT FK → pedidosPedido al que pertenece
producto_idVARCHAR FK → productosProducto del catálogo (o "CUSTOM_PROD" para personalizados)
nombreVARCHARNombre del producto en el momento de la compra
tallaVARCHARTalla seleccionada (S, M, L, XL, etc.)
colorVARCHARNombre del color seleccionado
imagen_customVARCHARRuta al PNG del diseño frontal generado
imagen_espaldaVARCHARRuta al PNG del diseño de espalda
logos_extrasJSONRutas a PNGs de zonas extra (nuca, manga izq, manga der)
extras_descripcionTEXTDescripción de los extras aplicados (doble cara, nuca, etc.)
notasTEXTNotas del cliente sobre el diseño (sanitizadas con strip_tags)
cantidadINTUnidades de este producto+variante
precio_unitarioDECIMALPrecio por unidad (calculado en servidor, no confiar en cliente)

4. pagos

Registro de cada transacción monetaria. Fundamental para contabilidad y verificación anti-fraude.

ColumnaTipoDescripción
idINT PK AUTO_INCREMENTIdentificador único del pago
pedido_idINT FK → pedidosPedido asociado
paypal_order_idVARCHARID de la transacción en PayPal (o referencia Bizum)
payer_idVARCHARID del pagador en PayPal (para chargeback protection)
payer_emailVARCHAREmail del pagador en PayPal
payer_nameVARCHARNombre del pagador en PayPal
amountDECIMALMonto real verificado (de PayPal API, no del cliente)
currency_codeVARCHAR(3)Moneda (EUR)
statusVARCHARCOMPLETED, FAILED, PENDING
payment_methodVARCHARPAYPAL o BIZUM
captured_atDATETIMEFecha de captura del pago
chargebackBOOLEANFlag de chargeback/disputa
chargeback_reasonTEXTRazón del chargeback si aplica

5. productos

Catálogo completo. Cada producto puede tener galería de imágenes, videos y ser destacado.

ColumnaTipoDescripción
idVARCHAR PKIdentificador único del producto (ej: "prod_a1b2c3d4_1710000000")
nombreVARCHARNombre del producto
descripcionTEXTDescripción detallada
precioDECIMALPrecio base del producto
imagen_urlVARCHARRuta a la imagen principal
imagenes_galeriaJSONArray de rutas a imágenes adicionales
video_delanteVARCHARRuta al video frontal del producto
video_detrasVARCHARRuta al video trasero
video_como_se_haceVARCHARRuta al video del proceso de fabricación
categoriaVARCHARCategoría: camisetas, sudaderas, tazas, cuadros
destacadoBOOLEANSi aparece en la sección de destacados del index
destacado_atDATETIMEFecha en que fue marcado como destacado

6. biblioteca_recursos

Imágenes subidas por los usuarios para usar en el editor de diseño.

ColumnaTipoDescripción
idINT PK AUTO_INCREMENTIdentificador único del recurso
user_idINT FK → usuariosPropietario del recurso
ruta_imagenVARCHARRuta al archivo de imagen en el servidor
fechaDATETIMEFecha de subida

7. user_direcciones

Libreta de direcciones del usuario. Permite múltiples direcciones con una predeterminada.

ColumnaTipoDescripción
idINT PK AUTO_INCREMENTIdentificador único de la dirección
user_idINT FK → usuariosPropietario de la dirección
aliasVARCHARNombre identificador ("Casa", "Oficina")
nombreVARCHARNombre del destinatario
direccionTEXTLínea de dirección
ciudadVARCHARCiudad
cpVARCHAR(5)Código postal (5 dígitos)
telefonoVARCHARTeléfono de contacto para envío
predeterminadaBOOLEANSi es la dirección principal del usuario

8. pedido_historial

Auditoría de cambios de estado. Permite reconstruir el timeline completo de cualquier pedido.

ColumnaTipoDescripción
idINT PK AUTO_INCREMENTIdentificador único del registro
pedido_idINT FK → pedidosPedido afectado
estado_anteriorVARCHAREstado antes del cambio
estado_nuevoVARCHAREstado después del cambio
cambiado_porINTID del admin que realizó el cambio
fechaDATETIMEFecha y hora del cambio

9. audit_log

"Caja negra" del sistema. Registra eventos de seguridad para análisis forense post-incidente.

ColumnaTipoDescripción
idINT PK AUTO_INCREMENTIdentificador único del evento
user_idINTUsuario involucrado (NULL si no autenticado)
actionVARCHARTipo de evento: login_success, login_fail, csrf_fail, registration, password_change, contact_submit, fraud_alert, upload, etc.
detailsTEXTInformación adicional del evento
ipVARCHARDirección IP del cliente
timestampDATETIMEFecha y hora del evento

Auto-limpieza: El panel de admin borra automáticamente entradas mayores a 30 días en cada carga.

10. login_intentos

Protección anti-fuerza bruta. Registra intentos fallidos de login por IP.

ColumnaTipoDescripción
ipVARCHAR UNIQUE PKDirección IP del cliente
intentosINTNúmero de intentos fallidos consecutivos
ultima_fallaDATETIMETimestamp del último intento fallido

Lógica: Si intentos >= 5 y ultima_falla hace menos de 15 minutos, se bloquea el acceso. Se resetea tras un login exitoso.

11. newsletter

Suscriptores del boletín. Fuente para envíos masivos del admin.

ColumnaTipoDescripción
idINT PK AUTO_INCREMENTIdentificador único
emailVARCHAR UNIQUEEmail del suscriptor (único)
fecha_registroDATETIMEFecha de suscripción

Arquitectura de Archivos

El proyecto adopta un enfoque clásico de PHP sin frameworks. La separación es: presentación (HTML+PHP), lógica de negocio (scripts procesadores) y configuración (includes/). Más de 50 archivos PHP y 15,000+ líneas de código.

Árbol Completo del Proyecto


/
├── includes/                        # Ficheros de inclusión global
│   ├── config.php                   # 510 líneas. El cerebro: BD, sesiones, CSRF, headers
│   │                                #   seguridad, funciones globales (h(), auditLog(),
│   │                                #   enviarEmail(), validarRecaptcha(), getClientIP(),
│   │                                #   esAdmin(), formatPrecio(), esMovil())
│   ├── header.php                   # 602 líneas. Navbar completa, buscador, categorías,
│   │                                #   acciones de usuario, admin dropdown, redes sociales,
│   │                                #   menú móvil, cursor dot personalizado
│   ├── footer.php                   # 197 líneas. Newsletter (honeypot+CSRF+reCAPTCHA),
│   │                                #   links footer, iconos sociales, cookie consent banner,
│   │                                #   sistema de toast notifications
│   ├── pricing.php                  # 59 líneas. precioBaseCatalogo(), calcularPrecioPersonalizado()
│   ├── colors.php                   # 56 líneas. Mapa de 50+ colores con hex y aliases
│   ├── .env                         # CRÍTICO. Credenciales: BD, PayPal, reCAPTCHA, SMTP, OAuth
│   ├── .htaccess                    # Denegación total de acceso web al directorio
│   └── PHPMailer/                   # Librería externa para envío SMTP
│       ├── PHPMailer.php
│       ├── SMTP.php
│       ├── Exception.php
│       └── (archivos auxiliares)
│
├── uploads/                         # Archivos subidos por usuarios
│   ├── .htaccess                    # Solo permite imágenes, bloquea ejecución de scripts
│   ├── custom/                      # Diseños personalizados (PNGs generados por el editor)
│   ├── pedidos/                     # Imágenes de pedidos procesados
│   └── recursos/                    # Imágenes de la biblioteca personal de usuarios
│
├── admin/                           # Scripts internos del panel de administración
│   ├── cambiar_estado.php           # 170 líneas. Cambio de estado con emails automáticos,
│   │                                #   historial, validación de tracking URL
│   └── ver_pedido.php               # 299 líneas. Detalle completo de pedido para admin
│
├── procesar_login.php               # 200 líneas. Auth engine + rate limiting + cart fusion
├── procesar_registro.php            # 166 líneas. Validación + BCRYPT + welcome email + auto-login
├── procesar_recuperar.php           # 129 líneas. Token seguro + email recovery + rate limiting
├── procesar_nueva_clave.php         # 75 líneas. Reset contraseña con destrucción de token
├── procesar_google.php              # 195 líneas. OAuth 2.0 handler + auto-create + cart fusion
├── procesar_pedido.php              # 404 líneas. Bizum: anti-fraude + transacción + emails
├── procesar_pago.php                # 496 líneas. PayPal S2S: verificación real + anti-fraude + emails
├── procesar_perfil.php              # 236 líneas. CRUD perfil/direcciones/recursos con ownership
├── procesar_newsletter.php          # 141 líneas. Suscripción/baja con honeypot + reCAPTCHA
├── carrito_accion.php               # 154 líneas. Añadir al carrito con recálculo server-side
├── carrito_modificar.php            # 86 líneas. Modificar cantidades con sync atómico
├── guardar_diseno.php               # 339 líneas. Guardar diseño: validación, GD, cleanup
├── guardar_progreso.php             # 50 líneas. Auto-save JSON del editor a BD
├── subir_recurso.php                # 191 líneas. Upload seguro: MIME + GD re-render + cleanup
├── borrar_recurso.php               # 121 líneas. Eliminar con anti-path-traversal + ownership
├── cancelar_pedido.php              # 81 líneas. Cancelación con emails a cliente y admin
├── save-products.php                # 165 líneas. Sync catálogo con protección anti-borrado masivo
├── upload.php                       # 120 líneas. Upload admin con whitelist + MIME verification
├── enviar_masivo.php                # 105 líneas. Envío masivo para admin (clientes/newsletter)
├── obtener_productos.php            # 15 líneas. API JSON: un producto base por categoría
├── obtener_recursos.php             # 48 líneas. API JSON: últimos 20 recursos del usuario
├── logout.php                       # 39 líneas. Logout con persistencia de carrito en BD
├── baja.php                         # 124 líneas. Confirmación de baja de newsletter
│
├── index.php                        # 583 líneas. Landing: hero, categorías, destacados, mapa, reseñas
├── productos.php                    # 967 líneas. Catálogo: filtros, búsqueda, paginación, sorting
├── producto.php                     # 1100+ líneas. Detalle: galería, zoom, guía tallas, videos
├── personalizar.php                 # 7878 líneas. Editor Fabric.js: canvas multi-zona, texto,
│                                    #   stickers, filtros, plantillas, undo/redo, auto-save
├── carrito.php                      # 577 líneas. Carrito: preview, extras breakdown, shipping bar
├── checkout.php                     # 587 líneas. Checkout: direcciones, PayPal buttons, Bizum
├── gracias.php                      # 198 líneas. Post-compra: confetti, timeline, WhatsApp CTA
├── perfil.php                       # 700+ líneas. Dashboard: pedidos, biblioteca, direcciones, seguridad
├── mi_pedido_detalle.php            # 272 líneas. Detalle de pedido para el cliente
├── ver_detalles.php                 # 585 líneas. Detalle admin con centro de producción
├── login.php                        # 328 líneas. Login: rate limiting, Google OAuth, CSRF
├── registro.php                     # 307 líneas. Registro: strength meter, privacidad, reCAPTCHA
├── recuperar.php                    # 68 líneas. Petición de recuperación de contraseña
├── restablecer.php                  # 181 líneas. Reset de contraseña con validación de token
├── contacto.php                     # 973 líneas. Contacto premium: mapa, redes, formulario, reseñas
├── faq.php                          # 183 líneas. FAQ con acordeón por categorías
├── admin_pedidos.php                # 1434 líneas. Dashboard: cleanup automático, stats, filtros, cambio estado
├── admin_productos.php              # 2021 líneas. CRUD: upload imagen/video, galería, destacado
├── admin_pagos.php                  # 412 líneas. Auditoría: stats, filtros, chargebacks
├── lista_clientes_secreta.php       # 557 líneas. Base de clientes con estadísticas
├── sitemap.php                      # 145 líneas. Sitemap visual para visitantes
├── sitemap_xml.php                  # 94 líneas. Sitemap XML dinámico (consulta BD)
├── aviso-legal.php                  # Legal: empresa (CAMIGLOBO SL, CIF B67479100), LSSI
├── politica-privacidad.php          # Legal: GDPR/LOPD
├── terminos-condiciones.php         # Legal: condiciones de venta
├── politica-envios.php              # Legal: envíos (gratis >45€, 4.95€ resto)
├── politica-reembolso.php           # Legal: devoluciones (personalizados: sin devolución)
│
├── .htaccess                        # 102 líneas. URLs limpias, HTTPS, HSTS, CSP, seguridad,
│                                    #   caching, protección de archivos, Shopify redirects
├── robots.txt                       # Directivas de rastreo para buscadores
└── .env                             # Todas las credenciales (protegido por .htaccess)
            

Patrones de Arquitectura

PatrónImplementaciónPropósito
Scripts procesadores procesar_*.php, carrito_*.php, guardar_*.php Scripts "sin cabeza" que no producen HTML. Reciben datos del formulario, los procesan (validar, BD, emails) y redirigen. Separación clave para seguridad y organización.
Inclusión global config.php incluido en cada página Configuración centralizada: BD, sesiones, funciones de seguridad. Evita duplicación y asegura consistencia.
Sync atómico de carrito Lectura BD → merge sesión → escritura BD Previene conflictos en multi-tab/multi-device. La BD es la fuente de verdad.
Precios server-side Recálculo en cada operación de pedido/pago Nunca confiar en el precio enviado por el cliente. El servidor consulta BD y calcula.
Transacciones atómicas BEGIN/COMMIT/ROLLBACK en pedidos y pagos Si cualquier paso falla, se revierte todo. Evita datos inconsistentes.
Cleanup periódico En cada carga de admin_pedidos.php Limpia audit_log >30 días, biblioteca_recursos >60 días, archivos huérfanos >15 días.

Resumen Ejecutivo

Vista general del proyecto Camiglobo Barcelona: una plataforma e-commerce completa de productos textiles personalizados con editor de diseño interactivo, doble pasarela de pago y panel de administración.

Datos del Proyecto

Identidad

  • Empresa: CAMIGLOBO SL
  • CIF: B67479100
  • Dominio: www.camiglobo.com
  • Dirección: C/ Doctor Bove 115, 08032 Barcelona
  • Hosting: Hostinger (hPanel)

Código

  • ~50 archivos PHP
  • ~15,000+ líneas de código
  • 11 tablas en la base de datos
  • Archivo más grande: personalizar.php (7,878 líneas)
  • Sin framework: PHP puro + Vanilla JS

Seguridad

  • 18 capas de protección
  • Anti: SQL injection, CSRF, XSS, fraude, brute force, bots, path traversal, open redirect, DoS
  • BCRYPT para contraseñas
  • CSP + HSTS headers
  • GDPR compliant con cookie consent

Integraciones

  • PayPal (pago S2S verificado)
  • Bizum (transferencia)
  • Google OAuth, reCAPTCHA, Maps, Fonts
  • PHPMailer (SMTP Hostinger)
  • Fabric.js (editor canvas)
  • WhatsApp Business

Funcionalidades Principales

MóduloFuncionalidadesArchivos Clave
Editor de Diseño Canvas Fabric.js, 5 zonas (frontal/espalda/nuca/mangas), 20 fuentes, 16 efectos de texto, stickers, filtros, plantillas, undo/redo, auto-guardado, biblioteca personal personalizar.php, guardar_diseno.php, guardar_progreso.php
Catálogo Productos dinámicos desde BD, filtros por categoría/búsqueda/precio, sorting, paginación, galería con zoom, guía de tallas, selector de color/talla, videos, productos relacionados productos.php, producto.php, obtener_productos.php
Carrito Persistencia dual (sesión+BD), sync multi-tab, fusionado guest→logueado, desglose de extras, preview de diseño, barra de envío gratuito carrito.php, carrito_accion.php, carrito_modificar.php
Checkout & Pagos Doble pasarela (PayPal Smart Buttons + Bizum), libreta de direcciones, anti-fraude server-side, verificación S2S PayPal, transacciones atómicas checkout.php, procesar_pedido.php, procesar_pago.php
Gestión Pedidos 6 estados (Pend. Pago→Pagado→En Taller→Enviado→Entregado/Cancelado), historial de cambios, tracking URL, cancelación por cliente, confetti post-compra gracias.php, mi_pedido_detalle.php, cancelar_pedido.php
Autenticación Login con rate limiting, registro con strength meter + reCAPTCHA, Google OAuth 2.0, recuperación segura con token (1h), auto-login post-registro, cart fusion login.php, registro.php, procesar_google.php, recuperar.php
Perfil Usuario 4 pestañas: pedidos, biblioteca de diseños, direcciones, seguridad. Cambio de contraseña con reCAPTCHA, CRUD direcciones con predeterminada perfil.php, procesar_perfil.php
Emails 17 emails transaccionales automáticos (registro, pedidos, estados, newsletter, contacto). PHPMailer + SMTP. Template branded con colores por tipo config.php (función enviarEmail())
Admin Pedidos (filtros, cambio estado, WhatsApp), productos (CRUD + galería + videos), pagos (auditoría + chargebacks), clientes (stats), envío masivo, cleanup automático admin_pedidos.php, admin_productos.php, admin_pagos.php
Contenido Newsletter, contacto premium, FAQ, SEO (sitemap XML dinámico, canonical, OG tags), 5 páginas legales (GDPR/LSSI), cookie consent banner contacto.php, faq.php, sitemap_xml.php, legales

Flujo de Compra Simplificado

Explorar catálogo → Ver detalle → Personalizar (Fabric.js) → Añadir al carrito
→ Checkout (dirección + términos) → Pago (PayPal o Bizum) → Confirmación (confetti)
→ Admin gestiona (En Taller → Enviado con tracking → Entregado)
→ El usuario ve todo desde su perfil con historial y biblioteca de diseños

Base de Datos — 11 Tablas

TablaPropósitoRegistros Típicos
usuariosCuentas de cliente/admin con carrito y diseño persistidosClientes registrados
productosCatálogo con galería, videos y preciosProductos a la venta
pedidosCabecera de cada orden (estado, total, dirección)Un registro por pedido
pedidos_detalleProductos dentro de cada pedido + diseños customVarios por pedido
pagosTransacciones PayPal/Bizum verificadasUno por pedido
user_direccionesLibreta de direcciones del usuarioVarias por usuario
biblioteca_recursosImágenes subidas por el usuario para el editorVarias por usuario
pedido_historialAuditoría de cambios de estado de pedidosVarios por pedido
audit_logRegistro de eventos de seguridad (auto-limpia >30 días)Creciente, se purga
login_intentosProtección anti-fuerza bruta por IPTransitorio
newsletterSuscriptores del boletínEmails suscritos