Alien Style 51 Estampados personalizados
Cargando…
Manual de usuario · Colombia
Versión 1.0 Español Actualizado 14/07/2026

Alien Style 51 — Manual de Usuario

Sistema web para gestión de un negocio de estampados personalizados: catálogo, diseñador visual, pedidos, chat con el cliente, facturación electrónica con logotipo, dashboard con métricas y control por método de pago.

Desarrollado en PHP puro + SQLite. Sin frameworks pesados, sin dependencias de build. Ideal para operaciones pequeñas o medianas en Colombia (COP, IVA 19%, NIT).

Índice

  1. Qué hace el sistema
  2. Roles y accesos
  3. Guía del cliente
  4. Guía del administrador
  5. Sistema de facturación
  6. Instalación local
  7. Configuración inicial
  8. Estructura del proyecto
  9. Despliegue a Vercel
  10. Alternativas de hosting
  11. Preguntas frecuentes

Qué hace el sistema

Un negocio que estampa camisas, tazas, gorras y llaveros con diseños personalizados. El cliente entra al sitio, diseña sobre un producto en vivo (Mockup Studio), sube su archivo, hace el pedido. El administrador ve todo desde un panel, cambia estados, se comunica con el cliente, registra el pago y emite factura con NIT y correlativo.

Características principales:

Roles y accesos

El sistema tiene dos roles:

RolPuedeNo puede
ClienteRegistrarse, diseñar, hacer pedidos, chatear con el equipo, editar su perfilVer otros pedidos, cambiar precios, emitir facturas
AdminTodo lo del cliente + gestionar todos los pedidos, usuarios, productos, emitir facturas, ver métricas—

Credenciales de administrador por defecto (cambiar en producción):

Cambia la contraseña desde Panel Admin → Configuración → Cambiar contraseña.

Guía del cliente

1. Crear cuenta

2. Diseñar en el Studio

3. Hacer un pedido

4. Seguir tu pedido

5. Chat con el equipo

Guía del administrador

1. Dashboard

Al iniciar sesión como admin, ves de un vistazo:

2. Gestionar pedidos

3. Gestionar usuarios

4. Gestionar productos

5. Configuración

Datos que aparecen en la cabecera de todas las facturas:

También puedes cambiar tu contraseña de admin y ver el estado del sistema (tamaño de la base de datos, versión de PHP, archivos subidos).

Sistema de facturación

Correlativo

Cada factura tiene un número único e irrepetible con el formato:

AS51-F-000001
AS51-F-000002
...

El correlativo se emite dentro de una transacción atómica en SQLite — no hay riesgo de números repetidos aún con dos admins emitiendo al mismo tiempo.

Contenido de la factura

Imprimir / Guardar como PDF

Instalación local

Requisitos

Pasos

  1. Copia todo el proyecto a una carpeta (por ejemplo htdocs/alien-style-51).
  2. Asegúrate de que las carpetas data/ y uploads/ sean escribibles (se crean automáticamente en la primera petición si no existen).
  3. Levanta un servidor de desarrollo. Con el PHP embebido:

``bash php -S 127.0.0.1:8000 ``

  1. Abre http://127.0.0.1:8000 en tu navegador.

En la primera petición, se crean todas las tablas de la base de datos y se insertan:

Estructura de directorios

alien-style-51/
├─ index.php                 # Landing
├─ auth/
│  ├─ login.php
│  ├─ register.php
│  └─ logout.php
├─ cliente/
│  ├─ index.php              # Dashboard cliente
│  ├─ nuevo-pedido.php       # Studio + form
│  ├─ pedidos.php            # Historial
│  ├─ pedido.php             # Detalle + chat
│  ├─ disenador.php          # Studio libre
│  └─ perfil.php
├─ admin/
│  ├─ index.php              # Dashboard con gráficos
│  ├─ pedidos.php
│  ├─ pedido.php             # Detalle + estado + pago + facturar
│  ├─ facturas.php           # Listado
│  ├─ factura.php            # Factura imprimible
│  ├─ usuarios.php
│  ├─ productos.php
│  └─ configuracion.php
├─ includes/
│  ├─ config.php             # DB, sesión, helpers
│  ├─ head.php
│  ├─ topnav.php
│  ├─ footer.php
│  ├─ sidebar_admin.php
│  └─ sidebar_cliente.php
├─ assets/
│  ├─ styles.css             # Sistema de diseño completo
│  ├─ mockup-studio.js       # Studio interactivo (SVG + drag)
│  └─ reveal.js              # Animaciones scroll
├─ IMAGENES/
│  └─ unnamed.jpg            # Logotipo
├─ data/                     # SQLite (creada automáticamente)
│  └─ alien.sqlite
└─ uploads/                  # Diseños y previews (creada automáticamente)

Configuración inicial

Al iniciar por primera vez en producción:

  1. Cambia la contraseña del admin desde Configuración.
  2. Actualiza los datos de empresa (nombre real, NIT real, dirección, teléfono, email, IVA correcto).
  3. Ajusta los productos: nombres, precios en COP, descripciones. Puedes editar los 4 seed o agregar más.
  4. Sube tu logotipo real reemplazando IMAGENES/unnamed.jpg (mantén el mismo nombre y las dimensiones cuadradas).

Despliegue a Vercel

⚠️ Importante: Vercel es una plataforma serverless donde el sistema de archivos es efímero — cada petición corre en una instancia nueva y los archivos escritos desaparecen. Esto es incompatible con SQLite, que necesita un archivo persistente.
Si igual quieres desplegar a Vercel, tienes dos rutas:

Opción A — Vercel solo para el frontend + DB externa (recomendado)

Migra la persistencia a una base de datos gestionada:

Adicionalmente, los archivos subidos (uploads/) no persisten en Vercel serverless — necesitas almacenamiento externo:

Opción B — Vercel con vercel-php (sirve el proyecto tal cual, pero la DB no persiste)

Sirve para demo o entorno de prueba. No usar en producción real porque los pedidos se perderían entre despliegues.

Crea en la raíz un archivo vercel.json:

{
  "version": 2,
  "functions": {
    "api/index.php": {
      "runtime": "vercel-php@0.7.3"
    }
  },
  "routes": [
    { "src": "/assets/(.*)", "dest": "/assets/$1" },
    { "src": "/IMAGENES/(.*)", "dest": "/IMAGENES/$1" },
    { "src": "/uploads/(.*)", "dest": "/uploads/$1" },
    { "src": "/(.*)", "dest": "/api/index.php" }
  ]
}

Y un api/index.php mínimo como front controller:

<?php
$path = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH) ?: '/index.php';
$path = ltrim($path, '/');
if ($path === '') $path = 'index.php';
$file = __DIR__ . '/../' . $path;
if (is_file($file) && str_ends_with($file, '.php')) {
    require $file;
} else {
    http_response_code(404);
    echo 'Not found';
}

Ver el archivo vercel.json incluido en el repo para el ejemplo listo para usar.

Pasos de despliegue

  1. Instala Vercel CLI: npm i -g vercel.
  2. En la raíz del proyecto: vercel login y luego vercel.
  3. Sigue las preguntas: link a un proyecto nuevo, framework: "Other".
  4. La primera visita a / disparará la creación de la DB en /tmp (que se borra cada request → no persistente).

Para producción de verdad, migra a Turso o similar (Opción A).

Alternativas de hosting (recomendadas para PHP + SQLite)

Estas plataformas soportan PHP con almacenamiento persistente sin cambios de código:

Recomendación: Para empezar rápido sin migrar código, Railway o Render. Sube el proyecto tal cual, apuntá data/ como volumen persistente y listo.

Preguntas frecuentes

¿Puedo cambiar los colores de la marca? Sí. Toca assets/styles.css — todas las variables de color están en :root al inicio (bloque --brand, --ink, --rose, etc.). Cambia el hex una sola vez y se refleja en todo el sistema.

¿Cómo agrego un producto nuevo? Panel admin → Productos → Nuevo producto. Elige uno de los mockups 3D disponibles (Camisa, Taza, Gorra, Llavero). Si quieres un producto sin mockup, elige "Camisa" pero desactiva los previews del sitio.

¿Puedo cambiar el idioma? El sistema está 100 % en español. Traducir requeriría reemplazar los textos manualmente en cada archivo PHP — no hay sistema i18n integrado por ahora.

¿Cómo hago backup? Copia el archivo data/alien.sqlite (contiene todos los datos: usuarios, pedidos, facturas, mensajes, configuración) y la carpeta uploads/ (contiene los archivos de diseño de los clientes y las previews PNG). Con esos dos elementos tienes un backup completo.

¿Qué pasa si un cliente sube un archivo grande? El límite está en 8 MB por archivo. Los formatos aceptados son JPG, PNG, SVG, WEBP y PDF. Puedes ajustar el límite en cliente/nuevo-pedido.php.

¿Cómo se calcula el IVA? La factura toma el total del pedido y lo divide entre 1 + IVA/100 para obtener el subtotal, y la diferencia es el IVA. Es decir, los precios de los productos ya incluyen IVA — si prefieres el enfoque inverso (precios sin IVA), edita admin/factura.php para calcular al revés.

¿Hay un endpoint API para integrar? Actualmente no. El sistema es 100 % HTML server-side rendered. Si necesitas API JSON para una app móvil, es un trabajo adicional sobre la misma capa de acceso a datos.

¿Qué hago si olvido la contraseña de admin? No hay recuperación por email (aún). Puedes editar directamente el hash en la base de datos con cualquier cliente SQLite:

-- Genera un hash con: php -r "echo password_hash('nueva-contra', PASSWORD_BCRYPT).PHP_EOL;"
UPDATE usuarios SET password = '<hash-pegado-aquí>' WHERE email = 'admin@alienstyle51.com';

Créditos técnicos

Alien Style 51 — Estampados con carácter.