Arquitectura y Soluciones

Ingeniería de alto nivel aplicada a objetivos de negocio.

Modo de visualización:

Kaly Sound Technics

Gestión de Reservas en Tiempo Real (CRM).

Transformación digital para estudio de grabación. Se desarrolló un sistema de reservas a medida que permite a los clientes consultar disponibilidad al instante, eliminando la necesidad de llamadas o emails de confirmación manual.

  • Experiencia Fluida: Interfaz reactiva que no requiere recargas de página.
  • Automatización: Gestión de estados (Libre/Ocupado) inmediata.
  • Eficiencia: Reducción del 90% en la carga administrativa del estudio.
Ver Caso de Estudio →
Panel de administración CRM y sistema de reservas automatizado desarrollado en PHP nativo para KST.

async_booking_engine

Vanilla JS (ES6+) Fetch API JSON/PHP DOM Reactive

Frontend Architecture: Implementación de lógica asíncrona moderna sin frameworks. El sistema utiliza fetch para comunicar el calendario con el backend, actualizando el DOM dinámicamente según la respuesta JSON del servidor.

  • Async_Pattern: Promesas y Fetch API para UX sin bloqueos.
  • State_Mgmt: Renderizado condicional del formulario según datos JSON.
  • Performance: Cero dependencias externas (No jQuery/Axios).
js/admin.js
// Lógica de calendario asíncrono (Sin recargas)
function setDate(str, el) {
    fetch('/php/info.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ date: str })
    })
    .then(response => response.json())
    .then(data => {
        // UI Reactiva: Actualización del DOM basada en respuesta
        if (data.hasOwnProperty('data')) {
            infoElement.className = "success";
            // Uso de HTML Entities para visualización correcta en el bloque de código
            infoElement.innerHTML = `
                <h3>Reserva Confirmada</h3>
                <p><b>Cliente:</b> ${data.data[0].name}</p>
                <button onclick='editBooking("${data.data[0].id}")'>Editar</button>
            `;
        } else {
            // Estado vacío: Mostrar formulario de alta
            infoElement.className = "empty";
            infoElement.innerHTML = `<button onclick='showForm()'>Nueva Reserva</button>`;
        }
    })
    .catch(error => console.error('Sync Error:', error));
}
Modo de visualización:

Alma Ferrer Art Gallery

E-commerce de Arte con Seguridad Bancaria.

Tienda online de alta gama donde la confianza es la clave. Implementación de protocolos de seguridad avanzados para proteger tanto los datos del cliente como la integridad de las transacciones con Stripe.

  • Protección Total: Sistema anti-fraude integrado en el núcleo de la web.
  • Pagos Seguros: Transacciones validadas en servidor para evitar manipulaciones.
  • Privacidad: Gestión ética y segura de los datos de sesión.
Explorar Galería →
Interfaz de galería de arte online con pasarela de pago segura Stripe y carrito persistente, diseño minimalista para Alma Ferrer.

security_layer_protocol

CSRF Tokens Session Fingerprinting Strict Typing

Ciberseguridad: Implementación manual de defensas contra OWASP Top 10. Uso de tokens CSRF vinculados a propósitos específicos y control estricto de expiración para evitar ataques de repetición.

  • Anti_CSRF: Tokens únicos con validación de propósito y tiempo.
  • Session_Hijacking: Fingerprint de IP + User-Agent Hash.
  • Token_Lifecycle: Limpieza automática de tokens consumidos.
src/auth/CSRFProtection.php
public static function validateToken($token, $consume = true, $purpose = 'general') {
    if (empty($token) || !isset($_SESSION['csrf_tokens'][$token])) {
        error_log("Security Alert: Invalid Token");
        return false;
    }

    $tokenData = $_SESSION['csrf_tokens'][$token];

    // Validación estricta de propósito (Scope)
    if ($tokenData['purpose'] !== $purpose) {
        return false;
    }

    // Validación de expiración (Time-Window)
    // Se usa > para evitar conflictos HTML
    if ((time() - $tokenData['time']) > self::$tokenLifetime) {
        unset($_SESSION['csrf_tokens'][$token]);
        return false;
    }

    if ($consume) $_SESSION['csrf_tokens'][$token]['used'] = true;
    return true;
}
Modo de visualización:

Terra Concerts Ecosystem

Web Pública + CMS de Gestión "Headless".

Ecosistema digital completo. El cliente gestiona cartelera y eventos desde un panel privado, y el sistema se encarga de procesar y optimizar todo el contenido multimedia automáticamente.

  • Autonomía Total: Panel de gestión intuitivo sin depender de soporte TI.
  • Velocidad: Imágenes optimizadas automáticamente al subirse.
  • Limpieza: El sistema elimina archivos basura automáticamente.
Ver Arquitectura →
Ecosistema digital para Terra Concerts: CMS de gestión de eventos sincronizado en tiempo real con web pública mediante API REST propia.

custom_image_pipeline

PHP GD Library Responsive Images Self-Cleaning

Ingeniería Backend: Pipeline de procesamiento de imágenes sin dependencias externas. Generación automática de versiones responsive (`srcset`) y gestión de residuos (Garbage Collection) al eliminar registros.

  • On-Fly_Resize: Escalado bicúbico con `imagescale` y `imagecopyresampled`.
  • Storage_Opt: Eliminación física de archivos huérfanos.
  • Format: Salida optimizada para cabeceras (1920w, 992w, 600w).
backend/ImgProcessor.php
// Generación de versiones responsive (Backend)
$scaledImage1 = imagescale($resource, 600, -1, IMG_NEAREST_NEIGHBOUR);
$scaledImage2 = imagescale($resource, 992, -1, IMG_NEAREST_NEIGHBOUR);
$scaledImage3 = imagescale($resource, 1920, -1, IMG_NEAREST_NEIGHBOUR);

// Guardado con sufijos para SRCSET
imagejpeg($scaledImage1, $targetFile1);  // _600.jpg
imagejpeg($scaledImage2, $targetFile2);  // _992.jpg
imagejpeg($scaledImage3, $targetFile3);  // _1920.jpg

// Garbage Collection: Eliminar versiones antiguas
if (is_file($oldFile)) unlink($oldFile);
Modo de visualización:

The Ritual Ink Studio

Experiencia Inmersiva & UI Artesanal.

Portafolio digital con estética "Dark Mode" y comportamiento fluido. Destaca por componentes de interfaz desarrollados a medida para potenciar la marca artística del estudio sin sacrificar rendimiento.

  • Identidad Visual: Carruseles mixtos (Video/Foto) únicos en el sector.
  • Rendimiento: Animaciones fluidas a 60fps gracias a código nativo.
  • Retención: Experiencia de usuario hipnótica que aumenta el tiempo en página.
Ver Diseño →
Diseño web 'Dark Mode' para estudio de tatuajes Ritual Ink, con perfiles de artistas y formularios inteligentes validados en JavaScript sin librerías.

dom_manipulation_engine

Vanilla JS RequestAnimationFrame No-Frameworks

Frontend Artesanal: Motor de carrusel escrito desde cero. Gestión manual del DOM y cálculos geométricos para posicionamiento absoluto, logrando animaciones suaves sin el peso de librerías externas.

  • Render_Loop: Uso de `requestAnimationFrame` para sincronía vertical.
  • Geometry: Cálculo dinámico de posiciones `left` basado en viewport.
  • Event_Loop: Gestión eficiente de listeners `transitionend`.
js/carousel.js
function moveSlides(n, x) {
    // Cálculo de índices circulares (Infinite Scroll)
    let p = [];
    p[0] = index - 3; p[1] = index - 2;
    // ... lógica de wrapping ...

    requestAnimationFrame(() => {
        // Manipulación directa de estilos para aceleración por hardware
        items[p[1]].style.left = "calc(50% - " + offset1 + "px)";
        items[p[1]].className = "c-item visible-0";

        // Listener de limpieza para evitar fugas de memoria
        items[index].addEventListener("transitionend", function handler(e) {
            if (e.propertyName === 'left') {
                isSliding = false;
                items[index].removeEventListener('transitionend', handler);
            }
        });
    });
}
Modo de visualización:

Acosta Reformas

Captación de Talento Segura.

Portal corporativo enfocado en la conversión. Incluye un sistema de empleo robusto que permite la subida de currículums, garantizando que solo archivos legítimos lleguen al servidor.

  • Seguridad: Filtrado estricto de archivos maliciosos.
  • Usabilidad: Feedback inmediato al usuario en caso de error.
  • Integridad: Los datos llegan limpios y validados al departamento de RRHH.
Ver Caso de Estudio →
Plataforma web para Acosta Reformas optimizada para la captación de leads y filtrado de talento mediante subida segura de archivos.

binary_file_validation

PHP Finfo Magic Bytes MIME Analysis

Seguridad Forense: Validación robusta de subida de archivos. No se confía en la extensión del archivo; se analizan los "Magic Bytes" del binario para asegurar que el contenido coincide con la firma de un PDF real.

  • MIME_Check: Uso de `finfo_file` para leer cabeceras binarias.
  • Fallback: Soporte para `mime_content_type` en entornos heredados.
  • Sanitization: Rechazo inmediato de scripts camuflados.
backend/UploadHandler.php
// Validación Forense (Magic Bytes)
if (function_exists('finfo_open')) {
    $finfo = finfo_open(FILEINFO_MIME_TYPE);
    $mime = finfo_file($finfo, $_FILES['cv']['tmp_name']);
    finfo_close($finfo);

    // Verificación estricta contra lista blanca
    if ($mime !== 'application/pdf') {
        throw new SecurityException("Alerta: Archivo inválido detectado.");
    }
} else {
    // Fallback Legacy
    $mime = mime_content_type($_FILES['cv']['tmp_name']);
    if ($mime !== 'application/pdf') {
        // Log y bloqueo
        error_log("Intento de subida inválida: " . $_FILES['cv']['name']);
    }
}