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

 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

Investigación de Desarrollo (I+D)

### Propósito / Función Principal

4.8.3. Investigación de Desarrollo (I+D)

La investigación de desarrollo (I+D) implica actividades sistemáticas destinadas a mejorar productos, servicios o procesos mediante la creación de nuevas aplicaciones o el perfeccionamiento de las existentes. Cegarra (2004) se refiere a la I+D como investigación tecnológica, definiéndola como aquella cuyo propósito es la creación de artefactos o procesos con el fin de comercializarlos y generar un beneficio económico. Esta investigación puede o no apoyarse en la investigación aplicada, dependiendo del sector tecnológico en el que se esté trabajando. Además, destaca que este tipo de investigación es “la forma más eficaz de generar innovación” (p. 53). Los resultados obtenidos de la investigación tecnológica tienen aplicaciones directas e inmediatas a los problemas específicos que enfrenta una organización.

4.8.3.1.Ejemplo:

Diseño de Interiores: Diseño Publicitario: Comunicación Audiovisual: Diseño de Modas: 

En el ámbito del diseño de interiores, la I+D se utiliza para desarrollar nuevos materiales, tecnologías de construcción más eficientes y sostenibles, así como sistemas inteligentes que mejoran el confort y la funcionalidad de los espacios. Esta investigación puede enfocarse en aspectos como la domótica, la sostenibilidad de los materiales o el desarrollo de soluciones que mejoren la eficiencia energética.

En el diseño publicitario, la I+D puede centrarse en el desarrollo de nuevas plataformas tecnológicas para la creación y difusión de campañas publicitarias. Esto incluye la investigación de software para mejorar el diseño de piezas publicitarias, herramientas para analizar la efectividad de las campañas, o la creación de estrategias innovadoras para captar la atención del consumidor en el entorno digital. En el ámbito audiovisual, la I+D se utiliza para desarrollar tecnologías que mejoren la producción y distribución de contenidos multimedia. Esto puede incluir avances en cámaras, software de edición, técnicas de animación 3D, o mejoras en la calidad de la transmisión digital. La investigación en este campo también se extiende a nuevas formas de narrativa digital y experiencias inmersivas como la realidad virtual y aumentada. En el diseño de modas, la I+D está orientada al desarrollo de textiles innovadores, procesos de producción más sostenibles, o el uso de tecnologías avanzadas para crear prendas funcionales y estéticas. Esto incluye la investigación de tejidos inteligentes, la incorporación de tecnologías como la impresión 3D, o el desarrollo de técnicas de confección que reduzcan el desperdicio de material.

CONTEXTO

El desarrollo de materiales de construcción con propiedades termoaislantes, que no solo reducen el consumo energético, sino que también mejoran la calidad del aire interior y su sostenibilidad ambiental. La creación de una plataforma basada en inteligencia artificial que personaliza automáticamente los anuncios según el comportamiento del usuario, mejorando el impacto y la conversión de las campañas publicitarias. El desarrollo de una tecnología de realidad aumentada para integrar efectos visuales en tiempo real en las producciones de televisión, permitiendo que el contenido sea más dinámico y atractivo para las audiencias. El desarrollo de una línea de ropa con textiles que reaccionan a la temperatura corporal del usuario, ajustando la ventilación y la calidez de la prenda según las condiciones del entorno.

4.8.3.2. Importancia de la I+D en el Diseño

La I+D es la base para la innovación en estas disciplinas, ya que permite a los profesionales del diseño mantenerse a la vanguardia y ofrecer soluciones que no solo sean creativas, sino también tecnológicamente avanzadas. La investigación tecnológica aplicada a estos campos permite el desarrollo de productos y servicios que atienden de manera más eficiente las necesidades del mercado, fomentando una cultura de innovación constante.

Desarrollo de nuevas tecnologías: La I+D se enfoca en crear herramientas, técnicas y productos innovadores que mejoren la producción y la calidad del diseño.

Mejora de procesos: La investigación tecnológica optimiza los procesos de producción, haciendo que las tareas sean más eficientes, rápidas y menos costosas.

Sostenibilidad: A través de la I+D, se buscan soluciones más respetuosas con el medio ambiente, reduciendo el impacto ecológico de los productos y servicios de diseño.

### Público Objetivo

Docente de educacion superior tecnologica no universitaria

### Funcionalidades Deseadas

Para desarrollar este contenido en un **recurso web interactivo**, conviene traducir los conceptos de I+D en funciones que permitan al estudiante **explorar, relacionar, aplicar y evaluar**. Estas son funciones recomendables:

### Funciones esenciales

- **Presentación conceptual interactiva:** Definición breve de I+D, sus características, propósito, relación con innovación y diferencia frente a investigación básica o aplicada.

- **Navegación por disciplinas:** Módulos o pestañas para Diseño de Interiores, Diseño Publicitario, Comunicación Audiovisual y Diseño de Modas, con ejemplos contextualizados en cada especialidad.

- **Comparador de casos:** Una interfaz que contraste, para cada disciplina, el problema identificado, la solución tecnológica propuesta, el proceso de desarrollo, los resultados esperados y el impacto.

- **Tarjetas informativas expandibles:** Recursos visuales para presentar conceptos como innovación, sostenibilidad, optimización de procesos, inteligencia artificial, realidad aumentada, domótica, textiles inteligentes e impresión \(3D\).

- **Línea de proceso de I+D:** Visualización secuencial de las etapas: identificación del problema, investigación de necesidades, ideación, prototipado, pruebas, validación, mejora e implementación.

- **Galería de referentes y tecnologías:** Imágenes, videos cortos, infografías o modelos \(3D\) de materiales termoaislantes, sistemas de realidad aumentada, plataformas publicitarias inteligentes y moda tecnológica.

### Funciones de aplicación

- **Generador de proyectos de I+D:** Formulario guiado para que el estudiante construya una propuesta. Puede incluir: disciplina, problema, usuario o público objetivo, solución propuesta, componente innovador, tecnología empleada, criterios de sostenibilidad e impacto esperado.

- **Canvas de proyecto:** Un lienzo editable que organice visualmente los componentes de una iniciativa de I+D:

  - Problema o necesidad.

  - Contexto de aplicación.

  - Propuesta tecnológica.

  - Prototipo o producto esperado.

  - Recursos requeridos.

  - Indicadores de éxito.

  - Beneficio económico, social o ambiental.

- **Simulador de decisiones:** Actividad basada en escenarios. Por ejemplo, el estudiante elige entre varios materiales, tecnologías o procesos y observa sus efectos sobre costo, sostenibilidad, eficiencia energética, experiencia de usuario y viabilidad técnica.

- **Banco de retos disciplinares:** Problemas auténticos que puedan abordarse mediante I+D. Ejemplos:

  - Diseñar un espacio interior que disminuya el consumo de energía.

  - Crear una campaña adaptativa mediante datos de comportamiento.

  - Proponer una experiencia audiovisual inmersiva para educación o entretenimiento.

  - Desarrollar una prenda sostenible para climas variables.

- **Matriz de innovación:** Herramienta para clasificar una propuesta según su nivel de novedad, utilidad, factibilidad, sostenibilidad e impacto en el mercado.

### Funciones de evaluación

- **Cuestionarios de comprensión:** Preguntas de opción múltiple, relación de conceptos, verdadero/falso y análisis de casos para verificar la comprensión de la I+D.

- **Actividad de clasificación:** El estudiante diferencia ejemplos de investigación básica, aplicada, I+D, innovación o mejora incremental.

- **Rúbrica automatizada o semiautomatizada:** Evaluación de la propuesta de I+D a partir de criterios como pertinencia del problema, claridad de la solución, innovación, viabilidad, sostenibilidad y potencial de impacto.

- **Retroalimentación inmediata:** Mensajes que expliquen por qué una respuesta o decisión es adecuada y qué aspecto debe mejorarse.

- **Portafolio descargable:** Exportación de la propuesta elaborada a formato \(PDF\), documento editable o ficha de proyecto para su evaluación docente.

### Funciones de seguimiento docente

- **Panel de progreso:** Visualización del avance por estudiante: contenidos revisados, actividades completadas, resultados de evaluaciones y proyectos creados.

- **Repositorio de proyectos:** Espacio donde los estudiantes publiquen sus propuestas de I+D y revisen las de sus compañeros.

- **Comentarios y coevaluación:** Sistema para que docentes y estudiantes brinden retroalimentación basada en una rúbrica.

- **Analítica de aprendizaje:** Registro de temas con mayor dificultad, tiempo de interacción, decisiones tomadas en simuladores y desempeño por criterio evaluado.

### Ejemplo de recorrido web

Un estudiante de Diseño Publicitario ingresa al módulo, revisa el caso de una plataforma de inteligencia artificial que personaliza anuncios, identifica el problema de baja conversión en campañas digitales y utiliza el generador de proyectos para diseñar una solución. Luego completa una matriz de innovación, recibe retroalimentación sobre la viabilidad de su propuesta y descarga una ficha para su portafolio.

Estas funciones convierten el contenido en una experiencia centrada no solo en comprender qué es la I+D, sino en **formular y justificar soluciones de diseño innovadoras, viables y sostenibles**. Sí. Puedes incorporar un **Formulario de Propuesta de Trabajo de Investigación** como función central del recurso web. Debe guiar al estudiante desde la selección de una línea institucional hasta la validación de factibilidad, recursos y generación de un prompt para construir su marco teórico. Las líneas del Instituto abarcan especialidades de Diseño de Interiores, Diseño Publicitario, Diseño de Modas y Comunicación Audiovisual, además de seis líneas transversales institucionales. [ppl-ai-file-upload.s3.amazonaws](https://ppl-ai-file-upload.s3.amazonaws.com/web/direct-files/attachments/1218329/3d853aa2-2f75-4c1e-b0a0-94ee61937198/MEMO-MULTIPLE-05-JUI_lineas-de-investigacion.pdf?AWSAccessKeyId=ASIA2F3EMEYEWSGHD4S7&Signature=10dVYe3GfSsoemYWx5WeeZZXhCg%3D&x-amz-security-token=IQoJb3JpZ2luX2VjEDwaCXVzLWVhc3QtMSJHMEUCIACHEN9CpGpcb0SrKR5QseFigQNchGxaL6yF%2Fq8fDyMsAiEA%2BoNOmf1QXsukJGLOP9j06Dl%2BUzcrI%2FlUb8gLqkkSmtUq8wQIBRABGgw2OTk3NTMzMDk3MDUiDDEffhxKrDMvqX%2FDkSrQBIaaYr4Jm8qq55ADGkwNR0Xx3QShkga1CPOa6r%2Byg%2Fm%2BZPmVzvDFYNN3JvkUPJDL3Y2fTVJ104yMVtpdAnSeudC76A2OIBYDJSMG%2B7dcb1xRYWjpVECiuvBx3ZyD1Ielg4lPJ8UfmAJQe8plZDckBw696QdPpJh%2BwjJXi3cOBF%2FUn61cdAlz3X0%2FqLuNm%2FHEu3FI1m1cU3JCNZYhWnwSVhSBzeXF9gFNn9Ts96kqkaI8uE%2Fuj9qSExPgGxrv9tqUzPY6Ue25osn7gv6QLpC6jNt7waJEguVjQUKGOfzM%2B9c3D%2Fwd1HwGhf0JkkTY2gNvHklWamKMY49AIGzcMa3UdTHCiODLpsWqVEGOESU8qB3DmyEyAYo4AbJh2R2pVdRhdnUot4aDHv4OdPGFk89qBQTJF%2BcMiJZ%2FZx8puJqXbUk6iAogbN7y5OTdNJmeJwb3dzgMGVmk%2Bbg0DB3ULR6zDplWUPnkGqe4U%2BWZIXL0LSI5JBWhsF2fTSOCQG5Rs3yOgM95qfuqEJC1oiR0c7a77supvBSkP3oADINplobor7tXyXMmAUQm20uoLTxKc2StMsVQFFwkyhEUtpp8y1kMjgfWqP954X7N0XnM7MWqBKr9%2BCY367jjfrnwtjL%2B3v2bfwdZtXFBdcjT1UCvfmwMB4s%2FS5WkZzg62Yn8cEjnik8HJsLHlW6lzsxHiIa6ZVuHieSqciZN%2F4LhgotoOGp%2FTfOnE8G55Fiz2Qra%2FRiNHE2CX%2BcuW8TPZQAQ%2F5qEr4aL70JHHwgYW1eEeIW5G5DxZdcw8PvU0gY6mAEs4hXWrpbtKqAC10Ooh1%2B80OWo6pHZ%2BFyaJ7ZaaC7Bh1KdAD7CV1GldEEiQBiNxt2pCJy%2FJvfMugqZCzgIKC8LZtWP8Ly0a3oknHlojm%2BmRh4pThLva7rmYv2CRIV2IJ7XGRPhWmEfPokUReozJ1M3MjrpCZGt8k9nEZsYygzLvXfJQG9UTH1nFbnH7ZdX5O4bDaHD8b48Pw%3D%3D&Expires=1783974851)

## Formulario de propuesta

### 1. Datos generales

- **Título tentativo del proyecto**

- **Especialidad:** Diseño de Interiores, Diseño Publicitario, Diseño de Modas o Comunicación Audiovisual.

- **Integrante(s) del equipo**

- **Docente asesor**

- **Periodo académico**

- **Tipo de proyecto:** Investigación aplicada, investigación de desarrollo (I+D), innovación tecnológica o proyecto de diseño con investigación.

### 2. Alineamiento institucional

El sistema debe incluir dos menús desplegables obligatorios: uno para la línea de investigación de la especialidad y otro para una línea transversal institucional. Esto permite que el proyecto evidencie pertinencia académica y responda a necesidades del entorno. [ppl-ai-file-upload.s3.amazonaws](https://ppl-ai-file-upload.s3.amazonaws.com/web/direct-files/attachments/1218329/3d853aa2-2f75-4c1e-b0a0-94ee61937198/MEMO-MULTIPLE-05-JUI_lineas-de-investigacion.pdf?AWSAccessKeyId=ASIA2F3EMEYEWSGHD4S7&Signature=10dVYe3GfSsoemYWx5WeeZZXhCg%3D&x-amz-security-token=IQoJb3JpZ2luX2VjEDwaCXVzLWVhc3QtMSJHMEUCIACHEN9CpGpcb0SrKR5QseFigQNchGxaL6yF%2Fq8fDyMsAiEA%2BoNOmf1QXsukJGLOP9j06Dl%2BUzcrI%2FlUb8gLqkkSmtUq8wQIBRABGgw2OTk3NTMzMDk3MDUiDDEffhxKrDMvqX%2FDkSrQBIaaYr4Jm8qq55ADGkwNR0Xx3QShkga1CPOa6r%2Byg%2Fm%2BZPmVzvDFYNN3JvkUPJDL3Y2fTVJ104yMVtpdAnSeudC76A2OIBYDJSMG%2B7dcb1xRYWjpVECiuvBx3ZyD1Ielg4lPJ8UfmAJQe8plZDckBw696QdPpJh%2BwjJXi3cOBF%2FUn61cdAlz3X0%2FqLuNm%2FHEu3FI1m1cU3JCNZYhWnwSVhSBzeXF9gFNn9Ts96kqkaI8uE%2Fuj9qSExPgGxrv9tqUzPY6Ue25osn7gv6QLpC6jNt7waJEguVjQUKGOfzM%2B9c3D%2Fwd1HwGhf0JkkTY2gNvHklWamKMY49AIGzcMa3UdTHCiODLpsWqVEGOESU8qB3DmyEyAYo4AbJh2R2pVdRhdnUot4aDHv4OdPGFk89qBQTJF%2BcMiJZ%2FZx8puJqXbUk6iAogbN7y5OTdNJmeJwb3dzgMGVmk%2Bbg0DB3ULR6zDplWUPnkGqe4U%2BWZIXL0LSI5JBWhsF2fTSOCQG5Rs3yOgM95qfuqEJC1oiR0c7a77supvBSkP3oADINplobor7tXyXMmAUQm20uoLTxKc2StMsVQFFwkyhEUtpp8y1kMjgfWqP954X7N0XnM7MWqBKr9%2BCY367jjfrnwtjL%2B3v2bfwdZtXFBdcjT1UCvfmwMB4s%2FS5WkZzg62Yn8cEjnik8HJsLHlW6lzsxHiIa6ZVuHieSqciZN%2F4LhgotoOGp%2FTfOnE8G55Fiz2Qra%2FRiNHE2CX%2BcuW8TPZQAQ%2F5qEr4aL70JHHwgYW1eEeIW5G5DxZdcw8PvU0gY6mAEs4hXWrpbtKqAC10Ooh1%2B80OWo6pHZ%2BFyaJ7ZaaC7Bh1KdAD7CV1GldEEiQBiNxt2pCJy%2FJvfMugqZCzgIKC8LZtWP8Ly0a3oknHlojm%2BmRh4pThLva7rmYv2CRIV2IJ7XGRPhWmEfPokUReozJ1M3MjrpCZGt8k9nEZsYygzLvXfJQG9UTH1nFbnH7ZdX5O4bDaHD8b48Pw%3D%3D&Expires=1783974851)

| Especialidad | Líneas que debe mostrar el formulario |

|---|---|

| Diseño de Interiores | Sostenibilidad en diseño de interiores; espacios reducidos; tecnología y domótica; diseño inclusivo y accesible; bienestar y ergonomía en espacios comerciales.  [ppl-ai-file-upload.s3.amazonaws](https://ppl-ai-file-upload.s3.amazonaws.com/web/direct-files/attachments/1218329/3d853aa2-2f75-4c1e-b0a0-94ee61937198/MEMO-MULTIPLE-05-JUI_lineas-de-investigacion.pdf?AWSAccessKeyId=ASIA2F3EMEYEWSGHD4S7&Signature=10dVYe3GfSsoemYWx5WeeZZXhCg%3D&x-amz-security-token=IQoJb3JpZ2luX2VjEDwaCXVzLWVhc3QtMSJHMEUCIACHEN9CpGpcb0SrKR5QseFigQNchGxaL6yF%2Fq8fDyMsAiEA%2BoNOmf1QXsukJGLOP9j06Dl%2BUzcrI%2FlUb8gLqkkSmtUq8wQIBRABGgw2OTk3NTMzMDk3MDUiDDEffhxKrDMvqX%2FDkSrQBIaaYr4Jm8qq55ADGkwNR0Xx3QShkga1CPOa6r%2Byg%2Fm%2BZPmVzvDFYNN3JvkUPJDL3Y2fTVJ104yMVtpdAnSeudC76A2OIBYDJSMG%2B7dcb1xRYWjpVECiuvBx3ZyD1Ielg4lPJ8UfmAJQe8plZDckBw696QdPpJh%2BwjJXi3cOBF%2FUn61cdAlz3X0%2FqLuNm%2FHEu3FI1m1cU3JCNZYhWnwSVhSBzeXF9gFNn9Ts96kqkaI8uE%2Fuj9qSExPgGxrv9tqUzPY6Ue25osn7gv6QLpC6jNt7waJEguVjQUKGOfzM%2B9c3D%2Fwd1HwGhf0JkkTY2gNvHklWamKMY49AIGzcMa3UdTHCiODLpsWqVEGOESU8qB3DmyEyAYo4AbJh2R2pVdRhdnUot4aDHv4OdPGFk89qBQTJF%2BcMiJZ%2FZx8puJqXbUk6iAogbN7y5OTdNJmeJwb3dzgMGVmk%2Bbg0DB3ULR6zDplWUPnkGqe4U%2BWZIXL0LSI5JBWhsF2fTSOCQG5Rs3yOgM95qfuqEJC1oiR0c7a77supvBSkP3oADINplobor7tXyXMmAUQm20uoLTxKc2StMsVQFFwkyhEUtpp8y1kMjgfWqP954X7N0XnM7MWqBKr9%2BCY367jjfrnwtjL%2B3v2bfwdZtXFBdcjT1UCvfmwMB4s%2FS5WkZzg62Yn8cEjnik8HJsLHlW6lzsxHiIa6ZVuHieSqciZN%2F4LhgotoOGp%2FTfOnE8G55Fiz2Qra%2FRiNHE2CX%2BcuW8TPZQAQ%2F5qEr4aL70JHHwgYW1eEeIW5G5DxZdcw8PvU0gY6mAEs4hXWrpbtKqAC10Ooh1%2B80OWo6pHZ%2BFyaJ7ZaaC7Bh1KdAD7CV1GldEEiQBiNxt2pCJy%2FJvfMugqZCzgIKC8LZtWP8Ly0a3oknHlojm%2BmRh4pThLva7rmYv2CRIV2IJ7XGRPhWmEfPokUReozJ1M3MjrpCZGt8k9nEZsYygzLvXfJQG9UTH1nFbnH7ZdX5O4bDaHD8b48Pw%3D%3D&Expires=1783974851) |

| Diseño Publicitario | Estrategias de publicidad digital; psicología del color; publicidad sostenible; innovación en publicidad interactiva; identidad corporativa y branding.  [ppl-ai-file-upload.s3.amazonaws](https://ppl-ai-file-upload.s3.amazonaws.com/web/direct-files/attachments/1218329/3d853aa2-2f75-4c1e-b0a0-94ee61937198/MEMO-MULTIPLE-05-JUI_lineas-de-investigacion.pdf?AWSAccessKeyId=ASIA2F3EMEYEWSGHD4S7&Signature=10dVYe3GfSsoemYWx5WeeZZXhCg%3D&x-amz-security-token=IQoJb3JpZ2luX2VjEDwaCXVzLWVhc3QtMSJHMEUCIACHEN9CpGpcb0SrKR5QseFigQNchGxaL6yF%2Fq8fDyMsAiEA%2BoNOmf1QXsukJGLOP9j06Dl%2BUzcrI%2FlUb8gLqkkSmtUq8wQIBRABGgw2OTk3NTMzMDk3MDUiDDEffhxKrDMvqX%2FDkSrQBIaaYr4Jm8qq55ADGkwNR0Xx3QShkga1CPOa6r%2Byg%2Fm%2BZPmVzvDFYNN3JvkUPJDL3Y2fTVJ104yMVtpdAnSeudC76A2OIBYDJSMG%2B7dcb1xRYWjpVECiuvBx3ZyD1Ielg4lPJ8UfmAJQe8plZDckBw696QdPpJh%2BwjJXi3cOBF%2FUn61cdAlz3X0%2FqLuNm%2FHEu3FI1m1cU3JCNZYhWnwSVhSBzeXF9gFNn9Ts96kqkaI8uE%2Fuj9qSExPgGxrv9tqUzPY6Ue25osn7gv6QLpC6jNt7waJEguVjQUKGOfzM%2B9c3D%2Fwd1HwGhf0JkkTY2gNvHklWamKMY49AIGzcMa3UdTHCiODLpsWqVEGOESU8qB3DmyEyAYo4AbJh2R2pVdRhdnUot4aDHv4OdPGFk89qBQTJF%2BcMiJZ%2FZx8puJqXbUk6iAogbN7y5OTdNJmeJwb3dzgMGVmk%2Bbg0DB3ULR6zDplWUPnkGqe4U%2BWZIXL0LSI5JBWhsF2fTSOCQG5Rs3yOgM95qfuqEJC1oiR0c7a77supvBSkP3oADINplobor7tXyXMmAUQm20uoLTxKc2StMsVQFFwkyhEUtpp8y1kMjgfWqP954X7N0XnM7MWqBKr9%2BCY367jjfrnwtjL%2B3v2bfwdZtXFBdcjT1UCvfmwMB4s%2FS5WkZzg62Yn8cEjnik8HJsLHlW6lzsxHiIa6ZVuHieSqciZN%2F4LhgotoOGp%2FTfOnE8G55Fiz2Qra%2FRiNHE2CX%2BcuW8TPZQAQ%2F5qEr4aL70JHHwgYW1eEeIW5G5DxZdcw8PvU0gY6mAEs4hXWrpbtKqAC10Ooh1%2B80OWo6pHZ%2BFyaJ7ZaaC7Bh1KdAD7CV1GldEEiQBiNxt2pCJy%2FJvfMugqZCzgIKC8LZtWP8Ly0a3oknHlojm%2BmRh4pThLva7rmYv2CRIV2IJ7XGRPhWmEfPokUReozJ1M3MjrpCZGt8k9nEZsYygzLvXfJQG9UTH1nFbnH7ZdX5O4bDaHD8b48Pw%3D%3D&Expires=1783974851) |

| Diseño de Modas | Moda sostenible y reciclaje textil; innovación textil; diseño de moda inclusivo; tendencias y consumo responsable; tecnología en la moda.  [ppl-ai-file-upload.s3.amazonaws](https://ppl-ai-file-upload.s3.amazonaws.com/web/direct-files/attachments/1218329/3d853aa2-2f75-4c1e-b0a0-94ee61937198/MEMO-MULTIPLE-05-JUI_lineas-de-investigacion.pdf?AWSAccessKeyId=ASIA2F3EMEYEWSGHD4S7&Signature=10dVYe3GfSsoemYWx5WeeZZXhCg%3D&x-amz-security-token=IQoJb3JpZ2luX2VjEDwaCXVzLWVhc3QtMSJHMEUCIACHEN9CpGpcb0SrKR5QseFigQNchGxaL6yF%2Fq8fDyMsAiEA%2BoNOmf1QXsukJGLOP9j06Dl%2BUzcrI%2FlUb8gLqkkSmtUq8wQIBRABGgw2OTk3NTMzMDk3MDUiDDEffhxKrDMvqX%2FDkSrQBIaaYr4Jm8qq55ADGkwNR0Xx3QShkga1CPOa6r%2Byg%2Fm%2BZPmVzvDFYNN3JvkUPJDL3Y2fTVJ104yMVtpdAnSeudC76A2OIBYDJSMG%2B7dcb1xRYWjpVECiuvBx3ZyD1Ielg4lPJ8UfmAJQe8plZDckBw696QdPpJh%2BwjJXi3cOBF%2FUn61cdAlz3X0%2FqLuNm%2FHEu3FI1m1cU3JCNZYhWnwSVhSBzeXF9gFNn9Ts96kqkaI8uE%2Fuj9qSExPgGxrv9tqUzPY6Ue25osn7gv6QLpC6jNt7waJEguVjQUKGOfzM%2B9c3D%2Fwd1HwGhf0JkkTY2gNvHklWamKMY49AIGzcMa3UdTHCiODLpsWqVEGOESU8qB3DmyEyAYo4AbJh2R2pVdRhdnUot4aDHv4OdPGFk89qBQTJF%2BcMiJZ%2FZx8puJqXbUk6iAogbN7y5OTdNJmeJwb3dzgMGVmk%2Bbg0DB3ULR6zDplWUPnkGqe4U%2BWZIXL0LSI5JBWhsF2fTSOCQG5Rs3yOgM95qfuqEJC1oiR0c7a77supvBSkP3oADINplobor7tXyXMmAUQm20uoLTxKc2StMsVQFFwkyhEUtpp8y1kMjgfWqP954X7N0XnM7MWqBKr9%2BCY367jjfrnwtjL%2B3v2bfwdZtXFBdcjT1UCvfmwMB4s%2FS5WkZzg62Yn8cEjnik8HJsLHlW6lzsxHiIa6ZVuHieSqciZN%2F4LhgotoOGp%2FTfOnE8G55Fiz2Qra%2FRiNHE2CX%2BcuW8TPZQAQ%2F5qEr4aL70JHHwgYW1eEeIW5G5DxZdcw8PvU0gY6mAEs4hXWrpbtKqAC10Ooh1%2B80OWo6pHZ%2BFyaJ7ZaaC7Bh1KdAD7CV1GldEEiQBiNxt2pCJy%2FJvfMugqZCzgIKC8LZtWP8Ly0a3oknHlojm%2BmRh4pThLva7rmYv2CRIV2IJ7XGRPhWmEfPokUReozJ1M3MjrpCZGt8k9nEZsYygzLvXfJQG9UTH1nFbnH7ZdX5O4bDaHD8b48Pw%3D%3D&Expires=1783974851) |

| Comunicación Audiovisual | Narrativas digitales y transmedia; cine y documental social; innovación en postproducción; producción audiovisual de bajo presupuesto; producción para plataformas digitales.  [ppl-ai-file-upload.s3.amazonaws](https://ppl-ai-file-upload.s3.amazonaws.com/web/direct-files/attachments/1218329/3d853aa2-2f75-4c1e-b0a0-94ee61937198/MEMO-MULTIPLE-05-JUI_lineas-de-investigacion.pdf?AWSAccessKeyId=ASIA2F3EMEYEWSGHD4S7&Signature=10dVYe3GfSsoemYWx5WeeZZXhCg%3D&x-amz-security-token=IQoJb3JpZ2luX2VjEDwaCXVzLWVhc3QtMSJHMEUCIACHEN9CpGpcb0SrKR5QseFigQNchGxaL6yF%2Fq8fDyMsAiEA%2BoNOmf1QXsukJGLOP9j06Dl%2BUzcrI%2FlUb8gLqkkSmtUq8wQIBRABGgw2OTk3NTMzMDk3MDUiDDEffhxKrDMvqX%2FDkSrQBIaaYr4Jm8qq55ADGkwNR0Xx3QShkga1CPOa6r%2Byg%2Fm%2BZPmVzvDFYNN3JvkUPJDL3Y2fTVJ104yMVtpdAnSeudC76A2OIBYDJSMG%2B7dcb1xRYWjpVECiuvBx3ZyD1Ielg4lPJ8UfmAJQe8plZDckBw696QdPpJh%2BwjJXi3cOBF%2FUn61cdAlz3X0%2FqLuNm%2FHEu3FI1m1cU3JCNZYhWnwSVhSBzeXF9gFNn9Ts96kqkaI8uE%2Fuj9qSExPgGxrv9tqUzPY6Ue25osn7gv6QLpC6jNt7waJEguVjQUKGOfzM%2B9c3D%2Fwd1HwGhf0JkkTY2gNvHklWamKMY49AIGzcMa3UdTHCiODLpsWqVEGOESU8qB3DmyEyAYo4AbJh2R2pVdRhdnUot4aDHv4OdPGFk89qBQTJF%2BcMiJZ%2FZx8puJqXbUk6iAogbN7y5OTdNJmeJwb3dzgMGVmk%2Bbg0DB3ULR6zDplWUPnkGqe4U%2BWZIXL0LSI5JBWhsF2fTSOCQG5Rs3yOgM95qfuqEJC1oiR0c7a77supvBSkP3oADINplobor7tXyXMmAUQm20uoLTxKc2StMsVQFFwkyhEUtpp8y1kMjgfWqP954X7N0XnM7MWqBKr9%2BCY367jjfrnwtjL%2B3v2bfwdZtXFBdcjT1UCvfmwMB4s%2FS5WkZzg62Yn8cEjnik8HJsLHlW6lzsxHiIa6ZVuHieSqciZN%2F4LhgotoOGp%2FTfOnE8G55Fiz2Qra%2FRiNHE2CX%2BcuW8TPZQAQ%2F5qEr4aL70JHHwgYW1eEeIW5G5DxZdcw8PvU0gY6mAEs4hXWrpbtKqAC10Ooh1%2B80OWo6pHZ%2BFyaJ7ZaaC7Bh1KdAD7CV1GldEEiQBiNxt2pCJy%2FJvfMugqZCzgIKC8LZtWP8Ly0a3oknHlojm%2BmRh4pThLva7rmYv2CRIV2IJ7XGRPhWmEfPokUReozJ1M3MjrpCZGt8k9nEZsYygzLvXfJQG9UTH1nFbnH7ZdX5O4bDaHD8b48Pw%3D%3D&Expires=1783974851) |

| Línea transversal | Sostenibilidad ambiental; transformación digital; identidad cultural; emprendimiento creativo; educación y cambio social; inclusión, accesibilidad y bienestar social.  [ppl-ai-file-upload.s3.amazonaws](https://ppl-ai-file-upload.s3.amazonaws.com/web/direct-files/attachments/1218329/3d853aa2-2f75-4c1e-b0a0-94ee61937198/MEMO-MULTIPLE-05-JUI_lineas-de-investigacion.pdf?AWSAccessKeyId=ASIA2F3EMEYEWSGHD4S7&Signature=10dVYe3GfSsoemYWx5WeeZZXhCg%3D&x-amz-security-token=IQoJb3JpZ2luX2VjEDwaCXVzLWVhc3QtMSJHMEUCIACHEN9CpGpcb0SrKR5QseFigQNchGxaL6yF%2Fq8fDyMsAiEA%2BoNOmf1QXsukJGLOP9j06Dl%2BUzcrI%2FlUb8gLqkkSmtUq8wQIBRABGgw2OTk3NTMzMDk3MDUiDDEffhxKrDMvqX%2FDkSrQBIaaYr4Jm8qq55ADGkwNR0Xx3QShkga1CPOa6r%2Byg%2Fm%2BZPmVzvDFYNN3JvkUPJDL3Y2fTVJ104yMVtpdAnSeudC76A2OIBYDJSMG%2B7dcb1xRYWjpVECiuvBx3ZyD1Ielg4lPJ8UfmAJQe8plZDckBw696QdPpJh%2BwjJXi3cOBF%2FUn61cdAlz3X0%2FqLuNm%2FHEu3FI1m1cU3JCNZYhWnwSVhSBzeXF9gFNn9Ts96kqkaI8uE%2Fuj9qSExPgGxrv9tqUzPY6Ue25osn7gv6QLpC6jNt7waJEguVjQUKGOfzM%2B9c3D%2Fwd1HwGhf0JkkTY2gNvHklWamKMY49AIGzcMa3UdTHCiODLpsWqVEGOESU8qB3DmyEyAYo4AbJh2R2pVdRhdnUot4aDHv4OdPGFk89qBQTJF%2BcMiJZ%2FZx8puJqXbUk6iAogbN7y5OTdNJmeJwb3dzgMGVmk%2Bbg0DB3ULR6zDplWUPnkGqe4U%2BWZIXL0LSI5JBWhsF2fTSOCQG5Rs3yOgM95qfuqEJC1oiR0c7a77supvBSkP3oADINplobor7tXyXMmAUQm20uoLTxKc2StMsVQFFwkyhEUtpp8y1kMjgfWqP954X7N0XnM7MWqBKr9%2BCY367jjfrnwtjL%2B3v2bfwdZtXFBdcjT1UCvfmwMB4s%2FS5WkZzg62Yn8cEjnik8HJsLHlW6lzsxHiIa6ZVuHieSqciZN%2F4LhgotoOGp%2FTfOnE8G55Fiz2Qra%2FRiNHE2CX%2BcuW8TPZQAQ%2F5qEr4aL70JHHwgYW1eEeIW5G5DxZdcw8PvU0gY6mAEs4hXWrpbtKqAC10Ooh1%2B80OWo6pHZ%2BFyaJ7ZaaC7Bh1KdAD7CV1GldEEiQBiNxt2pCJy%2FJvfMugqZCzgIKC8LZtWP8Ly0a3oknHlojm%2BmRh4pThLva7rmYv2CRIV2IJ7XGRPhWmEfPokUReozJ1M3MjrpCZGt8k9nEZsYygzLvXfJQG9UTH1nFbnH7ZdX5O4bDaHD8b48Pw%3D%3D&Expires=1783974851) |

### 3. Problema de investigación

- **Contexto o situación problemática:** descripción breve de la necesidad, usuario, organización, comunidad o sector involucrado.

- **Evidencias del problema:** datos, observaciones, entrevistas, registros, antecedentes o referencias visuales.

- **Población o unidad de análisis:** personas, productos, campañas, espacios, piezas audiovisuales, prendas, procesos u organizaciones.

- **Delimitación:** lugar, periodo, participantes y alcance del estudio.

- **Pregunta de investigación:** redactada de modo claro, viable y vinculada con la línea seleccionada.

**Plantilla sugerida:**

> ¿De qué manera el desarrollo de [producto, servicio, estrategia, sistema o prototipo] puede contribuir a mejorar [problema o necesidad] en [población, organización o contexto], durante [periodo]?

### 4. Propuesta de I+D

- **Producto, servicio, proceso o prototipo a desarrollar**

- **Descripción de la solución propuesta**

- **Componente innovador:** qué se crea, adapta, mejora o integra de manera distinta.

- **Tecnologías, materiales o técnicas involucradas**

- **Usuarios o beneficiarios directos**

- **Resultado verificable:** prototipo, campaña, colección, sistema interactivo, aplicación, pieza audiovisual, manual, estrategia o modelo funcional.

- **Impacto esperado:** económico, social, ambiental, cultural, educativo, comunicacional o de accesibilidad.

### 5. Objetivos

- **Objetivo general:** debe responder directamente a la pregunta de investigación.

- **Objetivos específicos:** se recomienda entre tres y cuatro, organizados de manera secuencial.

**Estructura para I+D:**

1. Diagnosticar o analizar el problema y las necesidades del contexto.

2. Diseñar la propuesta de solución o prototipo.

3. Desarrollar el producto, servicio, proceso o experiencia.

4. Validar su funcionalidad, usabilidad, aceptación, eficiencia o impacto.

### 6. Factibilidad del proyecto

Esta sección debe funcionar como una **matriz de validación**. El sistema puede mostrar un semáforo: verde para viable, amarillo para viable con ajustes y rojo para no viable en las condiciones actuales.

| Criterio | Pregunta de verificación | Respuesta esperada |

|---|---|---|

| Pertinencia | ¿El proyecto se alinea con una línea de especialidad y una transversal? | Sí, con justificación |

| Acceso | ¿Se puede acceder a usuarios, espacios, datos o casos de estudio? | Descripción del permiso o contacto |

| Técnica | ¿El equipo domina o puede aprender las técnicas necesarias? | Competencias y plan de capacitación |

| Tecnológica | ¿Se dispone de hardware, software, plataformas o equipamiento? | Recursos disponibles y faltantes |

| Económica | ¿El presupuesto es compatible con el proyecto? | Costos estimados y fuente de financiamiento |

| Temporal | ¿Puede ejecutarse dentro del periodo académico? | Cronograma por etapas |

| Ética | ¿La recolección de información protege a los participantes? | Consentimiento, anonimato y uso responsable de datos |

| Ambiental | ¿Se han considerado residuos, materiales y consumo de recursos? | Medidas de sostenibilidad |

| Validación | ¿Es posible probar el resultado con usuarios o especialistas? | Método e indicadores de evaluación |

## Recursos requeridos

El formulario debe permitir marcar recursos disponibles, recursos por conseguir y nivel de prioridad.

| Categoría | Recursos posibles |

|---|---|

| Humanos | Investigador(es), docente asesor, especialistas, usuarios, participantes, técnicos, programadores, fotógrafos, modelos o proveedores |

| Materiales | Papelería, textiles, materiales reciclados, maquetas, insumos de confección, elementos de ambientación o equipos de producción |

| Tecnológicos | Computadora, cámara, micrófono, iluminación, tableta gráfica, impresora \(3D\), dispositivos móviles, visores de realidad virtual o aumentada |

| Software y plataformas | Adobe Creative Cloud, Blender, Figma, Canva, Unity, Unreal Engine, herramientas de IA, gestores de encuestas, almacenamiento en la nube o plataformas web |

| Información | Artículos científicos, libros, bases de datos, normas técnicas, estudios de caso, entrevistas, encuestas y observación de campo |

| Económicos | Presupuesto de materiales, licencias, movilidad, impresión, alquiler de equipos, pruebas de usuario y difusión |

| Espacios | Aula-taller, laboratorio, estudio fotográfico, locación, espacio comercial, entorno comunitario o plataforma digital |

| Tiempo | Diagnóstico, diseño, desarrollo, pruebas, mejoras, validación y presentación final |

### Indicadores de suficiencia

El sistema puede calcular un índice simple de factibilidad mediante la valoración de cada criterio entre 1 y 5:

\[

\text{Factibilidad} =

\frac{\text{Pertinencia}+\text{Acceso}+\text{Técnica}+\text{Tecnología}+\text{Economía}+\text{Tiempo}+\text{Validación}}{7}

\]

- **4.0 a 5.0:** proyecto factible.

- **3.0 a 3.9:** factible con ajustes y delimitación.

- **Menor de 3.0:** requiere reformulación antes de su aprobación.

## Generador de prompt

Al completar el formulario, la plataforma puede generar automáticamente un prompt editable para desarrollar el marco teórico y evaluar la factibilidad del proyecto.

### Prompt base

```text

Actúa como investigador académico especializado en [ESPECIALIDAD] y en investigación de desarrollo (I+D).

Elabora un marco teórico para una propuesta de investigación titulada:

“[TÍTULO DEL PROYECTO]”.

Contexto del problema:

[CONTEXTO O SITUACIÓN PROBLEMÁTICA].

Pregunta de investigación:

[PREGUNTA DE INVESTIGACIÓN].

Objetivo general:

[OBJETIVO GENERAL].

Línea de investigación de la especialidad:

[LÍNEA DE ESPECIALIDAD].

Línea transversal institucional:

[LÍNEA TRANSVERSAL].

Propuesta de desarrollo:

[DESCRIPCIÓN DEL PRODUCTO, SERVICIO, PROCESO O PROTOTIPO].

Desarrolla el marco teórico con los siguientes apartados:

1. Definición y características de la investigación de desarrollo (I+D) aplicada al campo de [ESPECIALIDAD].

2. Fundamentación conceptual de [CONCEPTOS CLAVE DEL PROYECTO].

3. Antecedentes nacionales e internacionales relevantes, preferentemente de los últimos cinco años.

4. Relación entre el problema, la línea de investigación elegida y la solución propuesta.

5. Fundamentos técnicos, tecnológicos, funcionales, estéticos, comunicacionales o productivos requeridos por el proyecto.

6. Criterios de sostenibilidad, accesibilidad, inclusión, ética y responsabilidad social, según corresponda.

7. Análisis de factibilidad técnica, operativa, económica, temporal y ética.

8. Recursos humanos, materiales, tecnológicos, económicos y de información necesarios para responder la pregunta de investigación.

9. Indicadores para validar el prototipo, producto, servicio o solución desarrollada.

Emplea redacción académica en español, estructura lógica, citas y referencias en formato APA 7. No inventes fuentes: si no se dispone de información verificable, indica qué tipo de fuente académica debe buscarse.

```

## Prompt de factibilidad

Este segundo prompt puede activarse después de completar la matriz de recursos:

```text

Evalúa la factibilidad del siguiente proyecto de investigación de desarrollo (I+D):

Título: [TÍTULO].

Especialidad: [ESPECIALIDAD].

Línea de investigación: [LÍNEA].

Línea transversal: [LÍNEA TRANSVERSAL].

Pregunta de investigación: [PREGUNTA].

Solución propuesta: [PROPUESTA].

Recursos disponibles: [RECURSOS DISPONIBLES].

Recursos faltantes: [RECURSOS FALTANTES].

Tiempo disponible: [TIEMPO].

Presupuesto estimado: [PRESUPUESTO].

Analiza la factibilidad en cinco dimensiones: técnica, operativa, económica, temporal y ética. Para cada dimensión, identifica fortalezas, riesgos, recursos faltantes, acciones de mitigación e indicadores de cumplimiento.

Finalmente, determina si el proyecto es:

a) factible;

b) factible con ajustes; o

c) no factible en las condiciones actuales.

Propón una versión delimitada y viable del proyecto que permita responder adecuadamente la pregunta de investigación dentro del periodo académico.

```

## Salidas automáticas

Al enviar el formulario, la plataforma debería generar:

- Una **ficha de propuesta de investigación** en formato web y descargable.

- Un **diagnóstico de alineamiento** con las líneas institucionales.

- Una **matriz de factibilidad** con alertas sobre recursos, presupuesto, tiempo o acceso al campo.

- Un **inventario de recursos requeridos** y su estado: disponible, por gestionar o crítico.

- Un **prompt personalizado para marco teórico**.

- Un **prompt de evaluación de factibilidad**.

- Un borrador de **pregunta, objetivo general y objetivos específicos** coherentes con la propuesta.

Esta incorporación permite que el recurso web pase de ser informativo a convertirse en una herramienta de formulación y validación de proyectos de investigación aplicada e innovación tecnológica, en concordancia con las líneas priorizadas por el Instituto. [ppl-ai-file-upload.s3.amazonaws](https://ppl-ai-file-upload.s3.amazonaws.com/web/direct-files/attachments/1218329/3d853aa2-2f75-4c1e-b0a0-94ee61937198/MEMO-MULTIPLE-05-JUI_lineas-de-investigacion.pdf?AWSAccessKeyId=ASIA2F3EMEYEWSGHD4S7&Signature=10dVYe3GfSsoemYWx5WeeZZXhCg%3D&x-amz-security-token=IQoJb3JpZ2luX2VjEDwaCXVzLWVhc3QtMSJHMEUCIACHEN9CpGpcb0SrKR5QseFigQNchGxaL6yF%2Fq8fDyMsAiEA%2BoNOmf1QXsukJGLOP9j06Dl%2BUzcrI%2FlUb8gLqkkSmtUq8wQIBRABGgw2OTk3NTMzMDk3MDUiDDEffhxKrDMvqX%2FDkSrQBIaaYr4Jm8qq55ADGkwNR0Xx3QShkga1CPOa6r%2Byg%2Fm%2BZPmVzvDFYNN3JvkUPJDL3Y2fTVJ104yMVtpdAnSeudC76A2OIBYDJSMG%2B7dcb1xRYWjpVECiuvBx3ZyD1Ielg4lPJ8UfmAJQe8plZDckBw696QdPpJh%2BwjJXi3cOBF%2FUn61cdAlz3X0%2FqLuNm%2FHEu3FI1m1cU3JCNZYhWnwSVhSBzeXF9gFNn9Ts96kqkaI8uE%2Fuj9qSExPgGxrv9tqUzPY6Ue25osn7gv6QLpC6jNt7waJEguVjQUKGOfzM%2B9c3D%2Fwd1HwGhf0JkkTY2gNvHklWamKMY49AIGzcMa3UdTHCiODLpsWqVEGOESU8qB3DmyEyAYo4AbJh2R2pVdRhdnUot4aDHv4OdPGFk89qBQTJF%2BcMiJZ%2FZx8puJqXbUk6iAogbN7y5OTdNJmeJwb3dzgMGVmk%2Bbg0DB3ULR6zDplWUPnkGqe4U%2BWZIXL0LSI5JBWhsF2fTSOCQG5Rs3yOgM95qfuqEJC1oiR0c7a77supvBSkP3oADINplobor7tXyXMmAUQm20uoLTxKc2StMsVQFFwkyhEUtpp8y1kMjgfWqP954X7N0XnM7MWqBKr9%2BCY367jjfrnwtjL%2B3v2bfwdZtXFBdcjT1UCvfmwMB4s%2FS5WkZzg62Yn8cEjnik8HJsLHlW6lzsxHiIa6ZVuHieSqciZN%2F4LhgotoOGp%2FTfOnE8G55Fiz2Qra%2FRiNHE2CX%2BcuW8TPZQAQ%2F5qEr4aL70JHHwgYW1eEeIW5G5DxZdcw8PvU0gY6mAEs4hXWrpbtKqAC10Ooh1%2B80OWo6pHZ%2BFyaJ7ZaaC7Bh1KdAD7CV1GldEEiQBiNxt2pCJy%2FJvfMugqZCzgIKC8LZtWP8Ly0a3oknHlojm%2BmRh4pThLva7rmYv2CRIV2IJ7XGRPhWmEfPokUReozJ1M3MjrpCZGt8k9nEZsYygzLvXfJQG9UTH1nFbnH7ZdX5O4bDaHD8b48Pw%3D%3D&Expires=1783974851)

### Diseño y Estilo Visual

Este es el desglose del estilo visual académico e institucional basado en la paleta de colores proporcionada (#f3a100, #0072b9, #555553, #545452), ideal para proyectar una identidad que equilibra la tradición con la innovación.

1. Jerarquía y Psicología del Color

    Azul Institucional (#0072b9) – Color Primario: Es el eje central de la identidad. Representa credibilidad, confianza, autoridad académica y estabilidad. Se utiliza en los elementos estructurales de mayor peso visual.

    Naranja/Ámbar IDC (#f3a100) – Color de Acento: Aporta dinamismo, juventud, creatividad y liderazgo. Rompe la sobriedad del azul y se usa estratégicamente para guiar la atención hacia puntos clave (llamados a la acción, palabras clave, o detalles de diseño).

    Grises Neutros (#555553 y #545452) – Tonos de Soporte: Estos grises oscuros de temperatura fría/neutra proporcionan equilibrio. Evitan el uso del negro puro, lo que genera una estética más sofisticada, moderna y corporativa. Son la base para textos, texturas y fondos secundarios.

2. Aplicación en Entornos y Materiales

A. Identidad Gráfica y Logotipos

    El imagotipo o escudo institucional debe combinar el azul y el naranja sobre fondos claros.

    El nombre de la institución se presenta principalmente en Azul (#0072b9) o Gris (#555553), dejando el naranja para siglas o detalles tipográficos específicos (como "IDC").

B. Señalética y Campus (Físico)

    Tótem e Indicadores: Estructuras principales en gris oscuro o metalizado, con paneles en azul institucional para los textos de orientación principales.

    Banderolas y Pendones: Diseños divididos en bloques (ej. 70% azul, 30% naranja) para dar la bienvenida en pasillos y fachadas, portando lemas institucionales en tipografía blanca para máxima legibilidad.

C. Papelería y Documentos Oficiales

    Fondos: Predominancia del blanco o gris muy claro para el cuerpo de cartas, títulos y certificados.

    Encabezados y Margen: Líneas delgadas de acento en naranja (#f3a100) combinadas con bloques sólidos o tipografías en azul para los datos de la institución.

    Texto Corrido: Aplicado estrictamente en el gris oscuro (#545452) para garantizar una lectura cómoda y profesional.

D. Diseño Digital (Sitio Web y Plataformas)

    Botones de Acción (CTAs): El naranja debe reservarse para botones críticos (ej. "Inscríbete aquí", "Admisiones"), ya que resalta de forma óptima sobre fondos blancos o grises.

    Barras de Navegación: En azul con texto blanco, o blancas con una línea inferior de acento en naranja.

3. Estilo Fotográfico y Composición

    Las imágenes institucionales deben capturar la vida universitaria con luz natural.

    Se busca que la vestimenta de los estudiantes, el mobiliario urbano (bancas, postes) o los elementos del campus integren sutilmente estos colores (por ejemplo, mochilas naranjas o chaquetas azules), generando cohesión visual sin verse artificial.

    La arquitectura ideal de soporte incluye piedra, concreto gris o estructuras metálicas modernas que armonicen con los grises de la paleta (#555553).

### Interacción y Comportamiento

Objetivo: Crear una interfaz web que presente el contenido dividido en fases o pestañas interactivas, culminando o integrando un formulario interactivo, accesible y con validaciones visuales.

1. Estructura Semántica (HTML)

Contenedor Principal y Pestañas: Utiliza etiquetas semánticas como <section> o <nav> para agrupar las pestañas

. Para la navegación entre fases sin usar JavaScript, implementa la técnica del "Checkbox/Radio Hack": utiliza un <input type="radio"> oculto junto con su respectiva etiqueta <label> vinculada mediante los atributos for e id

.

Acordeones nativos (Alternativa): Si las fases se presentan como bloques desplegables, utiliza las etiquetas <details> y <summary> para tener interactividad y menús desplegables de forma nativa sin depender de JavaScript

.

Estructuración del Formulario: Envuelve los diferentes grupos de campos lógicos (ej. "Información básica" vs. "Información de contacto") utilizando las etiquetas <fieldset> y <legend>

. Esto no solo ordena visualmente, sino que mejora la accesibilidad web

.

Elementos del Formulario: Utiliza una combinación rica de inputs solicitando el tipo de dato correcto (type="email", type="password", type="text") para que el navegador aplique los formatos adecuados

. Incluye menús desplegables con <select> y <option>, o <datalist> si deseas que el usuario tenga autocompletado al escribir

.

2. Comportamiento e Interacción Visual (CSS)

Lógica de Pestañas con CSS: Para hacer que el contenido cambie según la pestaña seleccionada sin JS, utiliza la pseudoclase :checked en los radio buttons combinada con selectores de hermanos (como ~ o +) para cambiar el display del contenido correspondiente de none a block

.

Validación Visual Interactiva: Mejora la experiencia del usuario (UX) en el formulario mediante pseudoclases de validación. Aplica :valid para pintar bordes de color verde cuando el campo sea correcto y :invalid para color rojo si hay errores

.

Uso del selector :has(): Utiliza la potente pseudoclase :has() en el contenedor o en el <label> del input. Por ejemplo, si el input es válido (:has(input:valid)), haz que el <label> cambie de color automáticamente para darle feedback inmediato al usuario

.

Estilos de Foco (Focus) y Accesibilidad: Oculta el contorno predeterminado del navegador con outline: none, pero asegúrate de utilizar la pseudoclase :focus-visible para crear un diseño de foco personalizado (como un border o box-shadow específico) que permita a los usuarios que navegan por teclado saber dónde están

.

Transiciones y Animaciones Suaves: Aplica la propiedad transition (ej. transition: all 0.3s ease) a botones y contenidos para que los cambios de estado (como hacer un :hover o expandir una fase) no sean bruscos

.

3. Dinamismo y Manipulación (JavaScript - Opcional para mayor control)

Selección del DOM: Si deseas un control más avanzado para el cambio de pestañas o la validación por fases, utiliza JavaScript para seleccionar los elementos mediante document.querySelector o document.getElementById

.

Escucha de Eventos (Event Listeners): Utiliza el método addEventListener para "escuchar" el evento click en las pestañas o en el botón de "Siguiente fase" del formulario

.

Modificación Dinámica: En respuesta al evento, utiliza JS para manipular dinámicamente las clases (ej. agregando una clase .active) u ocultando/mostrando elementos modificando sus propiedades en el DOM sin necesidad de recargar la página

.

### Tecnologías y Estructura

El desarrollo web moderno y la estructuración de cualquier sitio se sustentan principalmente en tres tecnologías fundamentales: HTML, CSS y JavaScript

. Cada una cumple un rol específico y complementario en la construcción del documento:

1. HTML (La Estructura y Semántica) HTML (Lenguaje de Marcado de Hipertexto) es el bloque de construcción más básico de la web, responsable de definir el esqueleto, el significado y la estructura lógica del contenido

.

Estructura fundamental del documento: Todo documento HTML se contiene dentro de una etiqueta raíz <html>

. En su interior, se divide en dos grandes bloques: el <head>, que representa una colección de metadatos (información sobre la página, como el título, codificación de caracteres o enlaces a CSS) que no es visible para el usuario

; y el <body>, que abarca todo el contenido visual y perceptible de la página

.

La estructura de árbol (DOM): Al leer el código HTML, el navegador interpreta y crea el DOM (Document Object Model), que es una representación en forma de árbol

. En este árbol jerárquico, las etiquetas se convierten en nodos que se relacionan entre sí como "padres", "hijos" o "hermanos" (por ejemplo, el <body> es padre de los elementos visuales que contiene en su interior)

.

HTML Semántico: Para una estructura de calidad, es vital el uso de etiquetas semánticas (como <header>, <nav>, <main>, <article>, <section>, <aside> y <footer>)

. Estas etiquetas no solo organizan visualmente el contenido, sino que proporcionan un significado claro que es fundamental para el SEO (ayudando a los motores de búsqueda a indexar la página) y para la Accesibilidad web (permitiendo que los lectores de pantalla entiendan cómo navegar por el sitio)

.

2. CSS (La Presentación y el Diseño) CSS (Hojas de Estilo en Cascada) es el lenguaje que se centra exclusivamente en el diseño, estilo y presentación de la página web

.

Separación de responsabilidades: CSS permite separar el diseño de la estructura HTML

. Esto facilita el mantenimiento, mejora los tiempos de carga y ayuda a mantener una experiencia visual coherente en todo el sitio web

.

Tecnologías de Layout (Estructuración visual): Para distribuir los elementos a lo largo de la pantalla, CSS ofrece herramientas avanzadas:

Flexbox: Un modelo diseñado para estructurar diseños de forma unidimensional (en una sola fila o en una sola columna), ideal para alinear elementos y distribuir el espacio dinámicamente haciendo que las cajas sean "flexibles"

.

CSS Grid: Un sistema bidimensional que permite definir tanto filas como columnas al mismo tiempo, superando las limitaciones de flexbox y facilitando la creación de layouts o plantillas estructurales complejas

.

3. JavaScript (El Dinamismo y Comportamiento) Mientras que HTML da la base y CSS el aspecto, JavaScript es el lenguaje de programación o de scripting que añade interactividad y dinamismo a la estructura

.

Manipulación estructural: Utilizando el árbol del DOM generado por HTML, JavaScript permite manipular los elementos en tiempo real, alterar la estructura visual de la página sin recargarla, responder a las acciones del usuario (eventos como clics) y comunicarse asíncronamente con servidores

.

En resumen, una estructura web sólida se concibe definiendo primero su esqueleto y significado semántico mediante HTML, organizando y embelleciendo su disposición espacial con CSS, y finalmente aportando la interactividad necesaria a través de JavaScript

.

### Requisitos Adicionales

eL FORMULARIO DEBE TENER EL NOMBRE DEL DOCENTE Y SU CORREO INSTITUCIONAL

### 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.