PROYECTO DE APLICACIÓN PROFESIONAL PROGRAMA DE ESTUDIOS DISEÑO DE INTERIORES

 Eres un experto en desarrollo de aplicaciones web con dominio en HTML, CSS y JavaScript.

Crea una aplicación PWA (Progressive Web App) con los siguientes requisitos:

### Nombre de la Aplicación

PROYECTO DE APLICACIÓN PROFESIONAL PROGRAMA DE ESTUDIOS DISEÑO DE INTERIORES

### Propósito / Función Principal

PRESENTACIÓN INSTITUCIONAL

Esta guía constituye el instrumento oficial para la formulación del Proyecto de Aplicación Profesional (PAP) en todas las carreras del Instituto de Educación Superior Diseño y Comunicación. Integra la normativa vigente del MINEDU con las fichas específicas de cada carrera y línea de investigación, proporcionando al estudiante y al asesor un referente único, completo y actualizado.

El PAP es la modalidad de titulación establecida en la Ley N.° 30512 y está orientado a dar solución técnica a problemáticas reales del sector creativo-cultural peruano, enmarcadas en la economía naranja. Se organiza en cuatro bloques —uno por carrera— y dentro de cada uno se desarrolla una ficha completa para cada una de las cinco líneas de investigación aprobadas en el Memorando Múltiple N.° 05/JUI/IDC/2025-II.

El proceso de titulación se divide en dos documentos secuenciales: (1) el Plan del PAP (perfil o esquema previo, que requiere aprobación institucional) y (2) el Informe del PAP (documento completo que se presenta para sustentación y titulación). Los trabajos pueden realizarse de manera individual o en grupos de hasta cuatro estudiantes en proyectos multidisciplinarios, o hasta dos estudiantes si pertenecen al mismo programa de estudios.

MARCO NORMATIVO

Instrumento normativo Alcance

Ley N.° 30512 — Ley de Institutos y Escuelas de Educación Superior Art. 21: investigación aplicada e innovación como modalidad de titulación.

D.S. N.° 010-2017-MINEDU Reglamento de la Ley N.° 30512 y sus modificatorias.

Resolución Viceministerial N.° 103-2022-MINEDU Condiciones Básicas de Calidad (CBC) para los IEST.

Lineamientos Académicos Generales para los IES Organización curricular, perfiles de egreso y titulación.

Normas APA 7.ª edición Citación y referencias bibliográficas en todo el informe.

Memorando Múltiple N.° 05/JUI/IDC/2025-II Aprobación de las 20 líneas de investigación institucionales.

LÍNEAS TRANSVERSALES INSTITUCIONALES

Las siguientes líneas son de aplicación obligatoria en todas las carreras. Cada proyecto debe indicar a cuál o cuáles se adscribe.

N° Línea Transversal Institucional

1 Sostenibilidad ambiental y cambio climático

2 Transformación digital e innovación tecnológica

3 Identidad cultural e interculturalidad

4 Emprendimiento y gestión de proyectos creativos

5 Educación, comunicación y cambio social

6 Inclusión, accesibilidad y bienestar social

ESTRUCTURA GENERAL DEL PAP

Todas las fichas de esta guía responden al esquema siguiente, adaptado a cada carrera y línea de investigación:

Sección Título Contenido principal

I INFORMACIÓN GENERAL 1.1 Título · 1.2 Área estratégica · 1.3 Actividad económica · 1.4 Localización · 1.5 Resumen ejecutivo

II DESCRIPCIÓN DE LA INNOVACIÓN 2.1 Objetivos · 2.2 Justificación · 2.3 Marco Referencial (antecedentes + bases teóricas + metodología)

III ESTIMACIÓN DEL COSTO Presupuesto por fases del proyecto

IV SUSTENTO DEL MERCADO 4.1 Alcance · 4.2 Mercado objetivo · 4.3 Demanda potencial (TAM/SAM/SOM) · 4.4 Modelo de negocio Canvas

 

PARTE I — ESQUEMA DEL PLAN DEL PROYECTO DE APLICACIÓN PROFESIONAL

El Plan es el documento inicial de registro y aprobación del proyecto. Debe presentarse al inicio del ciclo de titulación para recibir la conformidad del asesor y la Jefatura de Unidad de Investigación.

N.° Sección Descripción

1 Título del trabajo Máximo 25 palabras. Debe incluir: tema, especificidad, lugar y temporalidad. Estructura: verbo de acción + objeto + línea temática + lugar + año.

2 Programa de estudios Nombre completo de la carrera y semestre/año de egreso.

3 Integrantes N.° de matrícula, apellidos y nombres, teléfono y correo electrónico de cada integrante.

4 Formulación del problema 4.1 Problema general (pregunta central). 4.2 Problemas específicos (desagregados del general).

5 Objetivos 5.1 Objetivo general. 5.2 Objetivos específicos (redactados con verbo en infinitivo: ¿qué? ¿en qué? ¿dónde? ¿cuándo?).

6 Justificación Responde a cuatro criterios: Trascendencia, Magnitud, Vulnerabilidad y Factibilidad.

7 Descripción técnica Exposición breve del contenido y resultados esperados. Máximo 300 palabras.

8 Cronograma de actividades Diagrama de Gantt por semestre (se recomienda MS Project o Excel).

9 Presupuesto, medios y materiales Aportes financieros, laboratorios, equipos y otros recursos.

10 Referencias bibliográficas En orden alfabético según normas APA versión 7.

Nota: Al final del Plan deben constar las firmas (con DNI) de todos los integrantes y del asesor/tutor responsable.

Verbos sugeridos para redactar objetivos

Nivel cognitivo Verbos ejemplo

Conocimiento Identificar, Describir, Enumerar, Registrar, Reconocer

Comprensión Explicar, Interpretar, Relacionar, Comparar, Organizar

Aplicación Diseñar, Ejecutar, Construir, Programar, Desarrollar

Análisis Analizar, Clasificar, Diferenciar, Descomponer, Desglosar

Síntesis Proponer, Formular, Integrar, Planear, Sintetizar

Criterios para la justificación

Criterio Pregunta guía

Trascendencia ¿A quién beneficia? ¿Qué impacto social, cultural o económico tiene en el sector?

Magnitud ¿Qué tan grande o urgente es la necesidad o problema identificado?

Vulnerabilidad ¿Es posible resolverlo desde las competencias del programa de estudios?

Factibilidad ¿Con qué recursos (técnicos, financieros, humanos) se cuenta para realizarlo?

 

PARTE II — ESQUEMA DEL INFORME DEL PROYECTO DE APLICACIÓN PROFESIONAL

El Informe es el documento completo que se presenta para la sustentación y titulación. Su extensión mínima es de cincuenta (50) hojas, incluyendo gráficos, fotografías y referencias.

PÁGINAS PRELIMINARES

Se numeran con romanos minúsculos (i, ii, iii...).

Elemento Descripción

Carátula Logotipo del IEST, título del trabajo, programa de estudios, frase 'Para optar el título de...', nombre del/los autor(es), lugar y año.

Página en blanco Hoja en blanco inmediatamente después de la carátula.

Dedicatoria Sin título 'Dedicatoria'; texto al pie de página, alineado a la izquierda a 8 cm del margen.

Agradecimientos Máximo una hoja. Expresa reconocimiento a personas e instituciones que apoyaron el trabajo.

Índice Lista de capítulos, subcapítulos, referencias y apéndices con número de página.

Índice de figuras y tablas Numeradas con arábigos en el orden de aparición en el texto.

Resumen Máximo 300 palabras + palabras clave (aprox. 5, separadas por coma, en minúscula).

Introducción Visión general: problema, objetivos y justificación. Se elabora al finalizar el trabajo.

CAPÍTULO I — DETERMINACIÓN DEL PROBLEMA

Este capítulo se transcribe directamente desde el Plan aprobado.

1.1 Formulación del problema

1.1.1 Problema general: Pregunta en términos concretos, explícitos y claros que establece los límites del trabajo.

1.1.2 Problemas específicos: Se desagregan del problema general; cada uno orienta un objetivo específico.

1.2 Objetivos

1.2.1 Objetivo general: Enuncia en forma breve qué se espera lograr. Redactado con verbo en infinitivo respondiendo a: ¿qué se va a hacer?, ¿en qué?, ¿dónde?, ¿cuándo?

1.2.2 Objetivos específicos: Señalan resultados o metas parciales; cada uno incluye un solo logro.

1.3 Justificación

Responde a los cuatro criterios: Trascendencia, Magnitud, Vulnerabilidad y Factibilidad (ver detalle en Parte I).

CAPÍTULO II — MARCO TEÓRICO

2.1 Estado del arte

Permite determinar cómo ha sido tratado el tema y cuáles son las tendencias existentes. Los trabajos consultados deben tener una antigüedad máxima de cinco (5) años. Se redacta en tiempo pasado.

• Antecedentes Internacionales: de 3 a 5 casos del contexto global (2021–2026).

• Antecedentes Nacionales: de 2 a 4 casos peruanos.

2.2 Bases teóricas

Fundamento teórico-científico del trabajo. Debe:

• Incorporar aportes originales del estudiante, no solo reproducción.

• Exponer los conceptos y categorías centrales relacionadas al trabajo.

• Tener una extensión de 10 a 15 hojas aproximadamente.

CAPÍTULO III — DESARROLLO DEL TRABAJO

Es el núcleo del Informe. Debe constar de un mínimo de 15 hojas. Sintetiza las actividades del trabajo considerando:

Sección Pregunta orientadora Descripción

3.1 Finalidad ¿Por qué es importante? Impacto a largo plazo al que espera contribuir el trabajo.

3.2 Propósito ¿Por qué es necesario? Efecto directo o resultado esperado al final del período de ejecución.

3.3 Componentes ¿Qué entrega? Resultados obtenidos en cada etapa; cada componente responde a un objetivo específico.

3.4 Actividades ¿Qué se ha hecho? Lista detallada en orden cronológico, agrupada por componente. Se pueden incluir máx. 10 fotografías de evidencia.

3.5 Limitaciones ¿Qué obstáculos surgieron? Factores externos no previstos que limitaron el logro de los objetivos.

CAPÍTULO IV — RESULTADOS

Explica, discute, comenta e interpreta los resultados obtenidos (aproximadamente dos hojas). Se redacta en tiempo pasado y tercera persona.

CAPÍTULO V — CONCLUSIONES Y RECOMENDACIONES

Conclusiones

Ofrecen la apreciación del egresado sobre los resultados. Se presentan en orden de importancia, de forma precisa y sintetizada, precedidas por viñetas o literales a), b), c)...

Recomendaciones

Aportes directamente relacionados con los objetivos y conclusiones. Deben ser claras, pertinentes y viables.

PÁGINAS FINALES

• Referencias bibliográficas — APA versión 7, en orden alfabético.

• Apéndice A: Cronograma de actividades (Diagrama de Gantt).

• Apéndice B: Cronograma de presupuesto.

• Apéndice C: Planos, esquemas, storyboards, moodboards u otros materiales técnicos.

• Apéndice D: Instrumentos de recolección de datos (encuestas, guías de entrevista).

• Apéndice E: Consentimientos informados de participantes.

• Apéndice F: Registro fotográfico del proceso.

• Apéndice G: Fichas técnicas de materiales o equipos.

• Apéndice H: Brief creativo o brief del cliente.

• Apéndice I: Validación de expertos.

• Apéndice J: Otros materiales complementarios.

 

ESPECIFICACIONES DE FORMATO

Parámetro Plan Informe

Tipo de letra Times New Roman Times New Roman

Tamaño 12 pts 12 pts

Interlineado 1.5 (todo el texto) 1.5 (excepto notas al pie)

Alineación Justificada Justificada

Sangría Tabulador (5 espacios) Tabulador (5 espacios)

Papel — Bond A4, 80 g

Margen izquierdo — 30–35 mm (para empaste)

Margen derecho — 15–20 mm

Margen superior/inferior — 25 mm

Numeración prelim. — Romanos i, ii... desde dedicatoria hasta introducción

Numeración cuerpo — Arábigos desde Capítulo I hasta referencias

Normas de citación APA 7.ª ed. APA 7.ª ed.

Extensión mínima — 50 hojas

Jerarquía de Encabezados (Norma APA 7)

Nivel Formato

Nivel 1 Centrado, negrita, mayúsculas y minúsculas

Nivel 2 Alineado a la izquierda, negrita, mayúsculas y minúsculas

Nivel 3 Sangría, negrita, mayúscula inicial, punto final

Nivel 4 Sangría, negrita, cursiva, mayúscula inicial, punto final

Nivel 5 Sangría, cursiva, mayúscula inicial, punto final

Diferencias clave entre Plan e Informe

Aspecto Plan (Perfil) Informe Final

Propósito Aprobación del proyecto Titulación

Extensión Variable (breve) Mínimo 50 hojas

Temporalidad Prospectiva (futuro) Retrospectiva (pasado)

Capítulo central Descripción técnica Desarrollo completo (Cap. III)

Resultados Esperados Obtenidos y discutidos

Apéndices No obligatorios A, B y C requeridos (A–J recomendados)

 

FICHAS POR CARRERA Y LÍNEA DE INVESTIGACIÓN

A continuación se presentan las fichas detalladas para cada carrera y sus cinco líneas de investigación. Cada ficha incluye: subsector, objetivo general modelo, objetivos específicos modelo, elementos técnicos/conceptuales y tipos o clasificaciones.

 

CARRERA: DISEÑO DE INTERIORES

Sector de la economía naranja: Creaciones Funcionales — Diseño de interiores y arquitectura; Artes y Patrimonio

Código Línea de Investigación Producto Principal

DI-L1 Sostenibilidad en el diseño de interiores Proyecto de diseño de interiores con criterios sostenibles (residencial, comercial o institucional)

DI-L2 Diseño de interiores para espacios reducidos Propuesta de diseño interior para micro-espacios o vivienda mínima

DI-L3 Tecnología y domótica en el diseño de interiores Propuesta de espacio interior inteligente con integración domótica

DI-L4 Diseño inclusivo y accesible Propuesta de diseño de interior accesible para personas con discapacidad y adultos mayores

DI-L5 Bienestar y ergonomía en espacios comerciales Propuesta de diseño de espacio comercial orientado al bienestar del usuario y/o trabajador

DI-L1 — SOSTENIBILIDAD EN EL DISEÑO DE INTERIORES

Subsector: Consultoría de diseño sostenible, arquitectura e interiorismo, industria de la construcción verde.

Objetivo General Modelo

Diseñar una propuesta de interior sostenible para [espacio] en [lugar] que reduzca el impacto ambiental y mejore la calidad de vida de los usuarios, mediante el uso de materiales ecoamigables y estrategias bioclimáticas, durante el año [año].

Objetivos Específicos Modelo

• OE1: Diagnosticar las condiciones ambientales, materiales y de habitabilidad actuales del espacio mediante inspección técnica y encuesta a usuarios.

• OE2: Elaborar la propuesta de diseño aplicando criterios de sostenibilidad: materiales reciclados/certificados, iluminación natural, ventilación cruzada y eficiencia energética.

• OE3: Validar la propuesta con usuarios y especialistas midiendo la percepción de bienestar, funcionalidad y sostenibilidad percibida.

Elementos técnicos / conceptuales

Elemento técnico / conceptual Descripción y orientación

Concepto de diseño Narrativa conceptual, referentes estéticos, paleta de materiales sostenibles.

Distribución y zonificación Planos de planta, diagramas de circulación, zoning.

Selección de materiales Fichas técnicas de materiales ecoamigables: certificaciones FSC, Cradle to Cradle, LEED.

Iluminación Natural (orientación solar, lucernarios) y artificial (LED, domótica).

Mobiliario y equipamiento Especificaciones técnicas, criterios ergonómicos y de bienestar.

Renders e infografías Visualizaciones 3D fotorrealistas del proyecto.

Presupuesto de obra Metrado y valorización por partidas.

Tipos y categorías

Categoría Tipos / subdivisiones

Tipos de espacios Residencial, comercial, institucional, hospitalario, educativo.

Niveles de intervención Remodelación, rehabilitación, obra nueva, ambientación temporal.

Certificaciones de sostenibilidad LEED, BREEAM, EDGE, Passivhaus.

Metodología del proyecto

Fase Técnicas / instrumentos Enfoque

Diagnóstico Inspección técnica, levantamiento arquitectónico, encuesta a usuarios Mixto

Diseño Programación arquitectónica, conceptualización, propuesta gráfica Cualitativo

Validación Encuesta de percepción, juicio de expertos, simulación energética Mixto

DI-L2 — DISEÑO DE INTERIORES PARA ESPACIOS REDUCIDOS

Subsector: Inmobiliaria y construcción de vivienda social, alojamiento turístico tipo hostel/tiny house, coworking.

Objetivo General Modelo

Desarrollar una propuesta de diseño de interiores para [tipo de espacio reducido] en [lugar] que optimice el uso del espacio y mejore la habitabilidad mediante soluciones multifuncionales y mobiliario adaptable, durante [año].

Objetivos Específicos Modelo

• OE1: Analizar las necesidades de uso, ergonomía y comportamiento espacial de los usuarios del espacio reducido.

• OE2: Diseñar soluciones espaciales con mobiliario transformable, almacenamiento integrado y estrategias ópticas de ampliación visual.

• OE3: Evaluar la propuesta mediante maqueta y/o renderizado 3D con feedback de usuarios y expertos.

Elementos técnicos / conceptuales

Elemento técnico / conceptual Descripción y orientación

Análisis ergonómico Dimensiones mínimas, alcances funcionales, normas técnicas (RNE, Neufert).

Mobiliario multifuncional Camas abatibles, mesas extensibles, módulos de almacenamiento vertical.

Estrategias visuales Espejos, paletas claras, continuidad visual, ilusiones de amplitud.

Planos técnicos Planta, elevaciones, cortes, detalles constructivos.

Maqueta y/o modelo 3D Representación física o digital del espacio.

Tipos y categorías

Categoría Tipos / subdivisiones

Tipos de espacio Micro-departamento (<50 m²), studio, tiny house, habitación de hotel, hostel.

Estrategias de diseño Planta libre, tabiques móviles, mezzanines, loft.

DI-L3 — TECNOLOGÍA Y DOMÓTICA EN EL DISEÑO DE INTERIORES

Subsector: Sector inmobiliario premium, hoteles inteligentes, edificios corporativos, residencias smart.

Objetivo General Modelo

Diseñar una propuesta de interior inteligente para [espacio] en [lugar] integrando sistemas domóticos de control de iluminación, climatización y seguridad, durante [año].

Objetivos Específicos Modelo

• OE1: Identificar las necesidades tecnológicas y de automatización del espacio.

• OE2: Elaborar la propuesta con integración de sistemas KNX, Z-Wave o Zigbee.

• OE3: Validar el prototipo o maqueta tecnológica con expertos en domótica y usuarios finales.

Elementos técnicos / conceptuales

Elemento técnico / conceptual Descripción y orientación

Sistemas domóticos Control de iluminación, climatización (HVAC), persianas, seguridad y entretenimiento.

Protocolos de comunicación KNX, Z-Wave, Zigbee, Wi-Fi, Matter.

Interfaz de usuario App móvil, panel de control, asistente de voz (Alexa, Google Home).

Eficiencia energética Sensores de presencia, paneles solares integrados, baterías de almacenamiento.

Planos de instalación Diagramas eléctricos, cableado estructurado, esquemas de red.

Tipos y categorías

Categoría Tipos / subdivisiones

Niveles de automatización Básico (iluminación/climatización), intermedio (+seguridad), avanzado (IA predictiva).

Tipos de espacios inteligentes Residencial, hotelero, corporativo, hospitalario.

DI-L4 — DISEÑO INCLUSIVO Y ACCESIBLE

Subsector: Sector salud, educativo, transporte, espacios públicos, gobierno (CONADIS, municipalidades).

Objetivo General Modelo

Diseñar una propuesta de interior accesible e inclusivo para [espacio] en [lugar], aplicando la Norma Técnica A.120 del RNE y los principios de Diseño Universal, durante [año].

Objetivos Específicos Modelo

• OE1: Diagnosticar las barreras arquitectónicas y de accesibilidad del espacio.

• OE2: Diseñar soluciones accesibles: rampas, señalética inclusiva, mobiliario adaptado, circulaciones libres.

• OE3: Validar la propuesta con usuarios con discapacidad y especialistas.

Elementos técnicos / conceptuales

Elemento técnico / conceptual Descripción y orientación

Normativa de accesibilidad RNE Norma A.120, ISO 21542, ADA (referencia internacional), CONADIS.

Circulaciones accesibles Anchos mínimos, radios de giro para silla de ruedas, superficies antideslizantes.

Señalética inclusiva Braille, alto relieve, pictogramas, señalización lumínica y sonora.

Mobiliario adaptado Alturas ajustables, espacios de aproximación, asideros y barras de apoyo.

Diseño sensorial Iluminación diferenciada, contraste cromático, textura de pisos guía.

Tipos y categorías

Categoría Tipos / subdivisiones

Modelos de discapacidad Física/motora, visual, auditiva, cognitiva, psicosocial.

Principios del Diseño Universal Uso equitativo, flexibilidad, uso simple e intuitivo, información perceptible.

DI-L5 — BIENESTAR Y ERGONOMÍA EN ESPACIOS COMERCIALES

Subsector: Retail, restaurantes, oficinas corporativas, centros comerciales, spas y centros de bienestar.

Objetivo General Modelo

Diseñar una propuesta de espacio comercial para [empresa] en [lugar] que optimice la experiencia del cliente y el bienestar de los trabajadores mediante criterios ergonómicos, biofílicos y de neuroarquitectura, durante [año].

Objetivos Específicos Modelo

• OE1: Analizar las necesidades ergonómicas, flujos de trabajo y experiencia de usuario.

• OE2: Diseñar la propuesta integrando principios de ergonomía (ISO 9241), biofilia y neuroarquitectura.

• OE3: Evaluar la propuesta midiendo satisfacción, productividad percibida y bienestar.

Elementos técnicos / conceptuales

Elemento técnico / conceptual Descripción y orientación

Ergonomía del puesto Alturas de trabajo, postura, iluminación (lux recomendados por área).

Diseño biofílico Vegetación interior, materiales naturales, vistas al exterior, agua.

Neuroarquitectura Proporciones espaciales, temperatura de color, estimulación sensorial moderada.

Customer journey Mapa de experiencia del cliente: acceso, recorrido, punto de venta, zona de descanso.

Señalética comercial Wayfinding, zonificación cromática, señalización de precios y productos.

Tipos y categorías

Categoría Tipos / subdivisiones

Tipos de espacio comercial Tienda retail, restaurante, oficina cowork, spa, clínica estética.

Modelos de experiencia Experience economy (Pine & Gilmore), retail marketing, escaparatismo.

### Público Objetivo

Egresados de instituto de educacion superior publica Diseño y Comunicacion

### Funcionalidades Deseadas

Situación Necesito crear una infografía interactiva en formato HTML del contenido de un archivo PDF/ resultado del resultado de analisis presentado en el texto de prompt, que implemente principios de UX Research para mejorar la experiencia del usuario. Esto significa aplicar metodologías basadas en investigación de usuarios, accesibilidad, usabilidad y diseño centrado en el usuario. Tipografia legible (sin distorsion en ancho) Tarea Diseña un HTML interactivo que incorpore las mejores prácticas de UX Research, incluyendo: navegación intuitiva, estructura clara de información, retroalimentación visual para interacciones, accesibilidad (WCAG), y patrones de diseño que reduzcan fricción en la experiencia del usuario. Objetivo Crear una interfaz que sea fácil de usar, accesible para todos los usuarios, y que guíe de manera natural hacia los objetivos principales sin confusión o fricción innecesaria. Conocimiento Los principios clave de UX Research que debes aplicar incluyen: Jerarquía visual clara: elementos importantes destacados Feedback inmediato: confirmaciones visuales de acciones del usuario Accesibilidad: contraste de colores suficiente, etiquetas ARIA, navegación por teclado Consistencia: patrones repetibles en toda la interfaz Reducción de carga cognitiva: información organizada lógicamente Responsive design: funcional en múltiples dispositivos Micro-interacciones: animaciones sutiles que comunican estado. El session debe un archivo HTML completo, funcional y bien estructurado que estas porciones prácticas: Código semántico y accesible (HTML5 con etiquetas apropiadas) Estilos integrados CSS o que dones bienes de refleja de prácticas diseño visual, todos los iconos debe ser insertados en svg, debe ser adaptable para todo tipo de dispositivos desde pantalla, tables hasta celulares Interactuar JavaScript que re proporcione importancia inmediata Comentarios en el código explicando decisiones de UX Investigación Incluir al menos un navegación formula,, elementos y interactivos muestras que de validación y feedback, quitar todos los ** y reemplazarlo por ", presenta gráficos estadísticos que impliquen una comparación excepcional de las diferencias y las mejoras que puede alcanzar la excelencia en la investigacion e innocacion tecnologica. Firma al pie de la presentación como unidad de investigacion. el contexto debe para las carreas profesionales de DIseño Interiores

### Diseño y Estilo Visual

1. Arquitectura y Distribución Cromática (Regla 60-30-10)

Para que un ecosistema visual funcione (tanto en web, redes sociales como en el campus físico), los colores deben tener jerarquía. Aunque tus colores institucionales históricos sean el azul y el naranja, el hecho de que el Turquesa (#009c9d) sea el dominante le da un giro totalmente contemporáneo y disruptivo.

    60% - Color Dominante (Fondo y Enfoque): Turquesa (#009c9d)

        Uso: Fondos de secciones principales, portadas de programas de estudio, elementos gráficos de gran formato y branding digital. Transmite innovación, frescura y una mentalidad de diseño moderna.

    30% - Color Secundario e Institucional: Azul (#0072b9)

        Uso: Bloques de texto secundario, cabeceras de sitio web, papelería formal, títulos corporativos y uniformes. Aporta el peso académico, la seriedad y la confianza que los padres y alumnos buscan en una institución educativa.

    10% - Color de Acento (Llamados a la Acción): Naranja (#f3a100)

        Uso: Botones de "Inscríbete aquí", alertas, destacados tipográficos, iconos clave o detalles en el diseño arquitectónico del instituto. Al ser el complementario directo de la gama de los azules/turquesas, su contraste es máximo y exige atención inmediata.

    Nota de Diseño: Los grises que mencionas (#555553 y #545452) son prácticamente idénticos a nivel perceptual. Te recomiendo unificarlos en un solo Gris Neutro Oscuro para la tipografía de lectura (cuerpo de texto) y fondos sutiles, evitando así el uso de negro puro (#000000), el cual suele verse muy rígido en entornos de diseño digital.

3. Criterios de Estilo y Accesibilidad (Formatos Digitales e Impresos)

Al tratarse de una escuela de diseño, cumplir con los estándares de accesibilidad WCAG es obligatorio para demostrar superioridad técnica.

    Contraste Tipográfico: El naranja (#f3a100) nunca debe llevar texto blanco encima en tamaños pequeños, ya que no pasa la prueba de legibilidad. Usa el gris oscuro o blanco sobre los fondos turquesa y azul.

    Estilo Visual General: Se sugiere una estética de diseño suizo contemporáneo o minimalismo tecnológico. Grandes bloques de color turquesa, tipografías sans-serif de peso pesado (Bold/Black) para títulos en azul o blanco, y el naranja reservado estrictamente para detalles de iluminación o botones de conversión.

    Tratamiento de Imágenes: Las fotografías de los estudiantes o instalaciones pueden usar sutiles duotonos utilizando la mezcla de #0072b9 y #009c9d para unificar las piezas de marketing y darles un look editorial de alta gama.

### Interacción y Comportamiento

Este componente describe la lógica de operación, el flujo de eventos en la interfaz y los comportamientos visuales dinámicos que garantizan una experiencia fluida, intuitiva y atractiva durante la captura de datos y la posterior conversión al formato formal del PLAN: PROYECTO DE APLICACIÓN PROFESIONAL.

6.1. Flujo de Captura y Validación del Usuario

El formulario interactúa de forma activa con el usuario antes de procesar cualquier archivo. La lógica de control se divide en tres etapas:

    Persistencia e Inicialización: Al cargar la interfaz, los campos estáticos se preconfiguran automáticamente con los parámetros obligatorios e inamovibles de la institución (Tipo de letra: Times New Roman, Tamaño: 12 pts, Interlineado: 1.5, Alineación: Justificada y Sangría: Tabulador). Los campos libres correspondientes a las variables no definidas (Márgenes, Tipo de Papel, Numeraciones) se presentan listos para edición.

    Validación en Tiempo Real (On-Input): Cada área de texto correspondiente a las secciones troncales (Descripción técnica y Resultados esperados) cuenta con un detector de eventos que evalúa la extensión del contenido. Al tratarse de un formato de tipo "Plan (Perfil)" con una temporalidad "Prospectiva", el sistema alerta visualmente si el usuario redacta en tiempo pasado, sugiriendo el uso de verbos en futuro (ej: "se implementará", "se obtendrá").

    Control de Envío (Form Submission): Al presionar el botón de acción principal, el motor JavaScript detiene el comportamiento nativo del navegador, valida que no existan campos requeridos en blanco y ejecuta de forma asíncrona la rutina de compilación binaria hacia el formato Word (.doc/.docx).

6.2. Lógica de Maquetación y Formateo Automático

La interactividad del comportamiento interno transforma los datos planos estructurados en un formato de diseño riguroso bajo la norma APA 7.ª ed. mediante directrices de hojas de estilo integradas (CSS inline y propiedades Word XML):

    Sangrado Automático: Cada salto de línea o párrafo procesado en los campos de texto es capturado por el script y se le antepone la propiedad text-indent: 35.4pt (equivalente exacto a los 5 espacios del tabulador tradicional), asegurando que el documento final no pierda la estructura solicitada.

    Encapsulamiento del Formato: El comportamiento de exportación mapea las variables de los márgenes y papel ingresados por el usuario directamente en el bloque de estilos @page del documento resultante, forzando a Microsoft Word a renderizar la estructura exacta establecida en el formulario.

6.3. Efectos Personalizados de Desplazamiento y Feedback (Hover Effects)

Para elevar la calidad de la interfaz del formulario y dotar a la aplicación de un diseño moderno y fluido, se incorporan efectos interactivos basados puramente en CSS orientados a los contenedores informativos, botones y secciones de apéndices:

6.3.1. Feedback en Tarjetas de Parámetros de Formato (Efecto Holográfico y Glassmorphic)

Las tarjetas que muestran los parámetros preestablecidos del plan utilizan interacciones avanzadas para captar la atención del usuario sin entorpecer la lectura:

    Comportamiento: Al pasar el cursor sobre las tarjetas informativas, se activa una transición de escala tridimensional (transform: scale(1.05)) acompañada de un reflejo cristalino dinámico provocado por la propiedad backdrop-filter: blur().

    Lógica CSS: Un pseudoelemento ::before con un degradado lineal y opacidad inicial 0 se desplaza verticalmente y cambia su opacidad a 1, simulando un brillo holográfico que sigue el movimiento relativo del ratón.

6.3.2. Botón de Generación del Documento (Morfo Líquido y Expansión)

El botón principal de conversión ("Generar Documento Word") utiliza una animación líquida para indicar su alta prioridad de clic en la jerarquía visual:

    Comportamiento: El botón inicia con una estructura limpia y bordes redondeados estándar. Al posicionar el cursor sobre él, la caja experimenta una leve rotación angular de 15deg y sus esquinas se agudizan reduciendo el border-radius a 10px.

    Lógica CSS: Se despliega internamente un fondo animado con un degradado cónico (conic-gradient) que fluye de cian a azul oscuro simulando la transición de un fluido en movimiento mediante transiciones suaves (transition: all 0.4s ease).

6.3.3. Sección de Apéndices Opcionales (Tarjeta de Doble Cara 3D)

Dado que los apéndices se definieron en el parámetro como "No obligatorios", se utiliza una tarjeta interactiva tridimensional para optimizar el espacio de la interfaz:

    Comportamiento: Inicialmente, la tarjeta muestra en su cara frontal un resumen explicativo que indica que la sección es opcional. Cuando el usuario pasa el ratón por encima, la tarjeta gira completamente 180 grados sobre su eje vertical (Eje Y), revelando en el reverso el cuadro de texto interactivo para la inserción de gráficos o tablas.

    Lógica CSS: El contenedor utiliza transform-style: preserve-3d acoplado a una propiedad de perspective en el contenedor padre, lo que permite un volteo realista en el espacio digital donde la cara frontal oculta su visibilidad trasera mediante backface-visibility: hidden.

6.4. Control de Descarga Efímera

Una vez superadas las fases de interacción previas, el comportamiento del sistema concluye de manera transparente para el usuario:

    El script construye un objeto binario plano (Blob) codificado en caracteres UTF-8.

    Se genera de forma dinámica en la memoria del navegador un enlace oculto utilizando URL.createObjectURL().

    El sistema simula el evento de clic sobre dicho enlace, forzando la descarga inmediata del archivo estructurado con el nombre por defecto Plan_Proyecto_Profesional.doc.

    El objeto de memoria se destruye instantáneamente (URL.revokeObjectURL) para garantizar un uso óptimo y seguro de los recursos del sistema de cómputo del usuario.

### Tecnologías y Estructura

Este apartado detalla el ecosistema tecnológico subyacente que permite la ejecución de la herramienta de manera local en el navegador del usuario, así como la estructura arquitectónica y las posibles vías de escalabilidad del sistema.

7.1. Stack Tecnológico Base (Front-end)

El generador ha sido desarrollado bajo un enfoque Client-Side (del lado del cliente), eliminando la necesidad de procesamiento en un servidor remoto. Esto garantiza una ejecución rápida, segura y fuera de línea, utilizando las siguientes tecnologías estándar de la web:

    HTML5 (HyperText Markup Language): Proporciona la estructura semántica de la interfaz de usuario, organizando los contenedores de datos, etiquetas de formulario (<input>, <textarea>) y definiendo los metadatos necesarios para el empaquetado del documento Word.

    CSS3 (Cascading Style Sheets): Responsable de la capa de presentación y la experiencia de usuario (UX). Se utiliza para el diseño responsivo (responsive design), la jerarquía visual de la información y la implementación de interacciones avanzadas basadas en aceleración por hardware (ej. backdrop-filter para glassmorphism, transform: preserve-3d para la rotación de tarjetas y transiciones fluidas de estado).

    JavaScript (Vanilla JS / ES6+): Actúa como el motor lógico de la aplicación. Se encarga de capturar los eventos del DOM, validar las entradas del usuario y ensamblar dinámicamente las cadenas de texto ingresadas.

    Web APIs Nativas (Blob y URL): Tecnologías clave para la generación de archivos in-browser. La API Blob (Binary Large Object) se utiliza para empaquetar el contenido HTML/XML con formato de MS Word en la memoria del navegador, mientras que URL.createObjectURL genera el puente de descarga directo al disco duro del usuario.

7.2. Formato de Exportación y Compatibilidad

Para lograr la conversión a un documento procesable por procesadores de texto, el sistema no utiliza librerías de terceros (lo que reduce el peso de la aplicación). En su lugar, emplea:

    Micro-formato Word HTML / XML: El documento exportado (.doc) se estructura internamente como un archivo HTML enriquecido que incluye namespaces propietarios de Microsoft (xmlns:w='urn:schemas-microsoft-com:office:word'). Esto instruye a MS Word para que interprete las reglas CSS incrustadas (Times New Roman, 12 pts, alineación justificada) como parámetros nativos de estilo de página y párrafo.

7.3. Estructura Arquitectónica Opcional (Escalabilidad)

Aunque la versión actual es monolítica y se ejecuta íntegramente en el navegador, el proyecto puede transicionar hacia una arquitectura más robusta si los requerimientos institucionales aumentan. A continuación, se presenta una estructura modular opcional para futuras iteraciones:

A. Integración de Frameworks Reactivos (UI)

    Migración de la interfaz a librerías como React.js o Vue.js para manejar el estado del formulario de manera más eficiente, permitiendo vistas previas en tiempo real (Live Preview) del documento Word antes de su descarga.

B. Generación del Lado del Servidor (Backend)

Si se requiere generar archivos .docx estrictos (Office Open XML) o almacenar un registro de los proyectos generados:

    Backend ligero: Implementación de un servidor con Node.js (usando la librería docx.js) o Python (usando python-docx), que reciba los datos mediante una petición AJAX/Fetch y retorne un archivo binario perfectamente formateado.

    Base de datos: Conexión a un entorno SQL o NoSQL para guardar borradores de los estudiantes y permitir la edición asíncrona.

C. Conversión Multiformato

    Incorporación de bibliotecas como html2pdf.js o integraciones en el servidor para ofrecer la salida del proyecto no solo en Word (.doc), sino en PDF normativo, bloqueando la edición posterior una vez que el "Plan (Perfil)" ha sido aprobado oficialmente.

### Instrucciones Finales

Entrega toda la aplicación en un único archivo HTML listo para ejecutarse.

Usa Bootstrap 5 para lograr un diseño moderno y responsivo.

Incluye service worker y manifest.json para funcionamiento offline e instalación como PWA.

Asegúrate de que el diseño sea completamente responsivo en dispositivos móviles.