utn-cli 2.1.51 → 2.1.53

package/templates/frontend/src/app/Paginas/Nucleo/conozcanos/conozcanos.component.html

@@ -0,0 +1,109 @@
+<div class="subtitle">
+  <p>Conózcanos</p>
+</div>
+<div class="conozcanos-container">
+  <div class="conozcanos-content">
+    <div class="conozcanos-text">
+      <p>Somos el equipo profesional de TI de la Universidad Técnica Nacional, encargados del desarrollo y codificación
+        de herramientas que faciliten a toda la comunidad universitaria y al usuario en general que utilicen el sistema.
+        Somos los encargados del desarrollo de la plataforma SIGU.</p>
+      <p>Somos la unidad encargada del diseño, desarrollo, mantenimiento y soporte del Sistema Integrado de Gestión
+        Universitaria (SIGU).</p>
+    </div>
+    <div class="conozcanos-image">
+      <img src="conozcanos1.jpg" alt="Equipo SIGU">
+    </div>
+  </div>
+  <!-- Sección Propósito -->
+  <div class="proposito-section">
+    <div class="proposito-header">
+      <h2 class="proposito-title">Propósito del equipo</h2>
+    </div>
+    <div class="proposito-text">
+      <p>Trabajamos diariamente para asegurar que la plataforma sea una herramienta accesible, segura y eficiente,
+        facilitando la gestión académica y administrativa en cada una de sus etapas.</p>
+      <p>Un equipo capacitado y en mejora constante, que realmente se involucra en la calidad y seguridad de cada
+        sistema desarrollado. Aportando funciones claves como:</p>
+    </div>
+    <div class="proposito-grid">
+      <div class="proposito-card">
+        <div class="card-header">
+          <span class="card-icon">+</span>
+          <h3>Innovación</h3>
+        </div>
+        <p>El desarrollo de nuevas herramientas y actualizaciones.</p>
+      </div>
+      <div class="proposito-card">
+        <div class="card-header">
+          <span class="card-icon">+</span>
+          <h3>Soporte técnico y acompañamiento</h3>
+        </div>
+        <p>Resolución de problemas técnicos y atención a usuarios.</p>
+      </div>
+      <div class="proposito-card">
+        <div class="card-header">
+          <span class="card-icon">+</span>
+          <h3>Seguridad</h3>
+        </div>
+        <p>Garantizamos la seguridad de la información de cada uno de los usuarios.</p>
+      </div>
+    </div>
+  </div>
+
+  <div class="Liderazgo-container" *ngIf="desarrolladorLider">
+    <div class="Liderazgo-content">
+
+      <div class="Liderazgo-header">
+        <h2 class="Liderazgo-title">Dirección y liderazgo técnico</h2>
+      </div>
+
+      <div class="Liderazgo-body">
+        <div class="Liderazgo-image">
+          <img [src]="desarrolladorLider.FotoURL || 'conozcanos2.png'" [alt]="desarrolladorLider.NombreCompleto">
+        </div>
+
+        <div class="Liderazgo-text">
+          <p class="name">{{ desarrolladorLider.NombreCompleto }}</p>
+          <p class="cargo">Líder del equipo técnico</p>
+          <p>{{desarrolladorLider.Biografia}}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Team work -->
+  <div class="team-section">
+    <div class="team-header">
+      <h2 class="team-title">Equipo de trabajo</h2>
+    </div>
+    <div class="team-text">
+      <p>Nuestro equipo de trabajo y de desarrollo del SIGU es un grupo pequeño pero capacitado que garantiza la
+        evolución, creación y seguridad. A continuación se muestra nuestro equipo.</p>
+    </div>
+
+    <div class="team-grid">
+      <div *ngFor="let desarrollador of datosDesarrolladores; let i = index" class="team-card">
+        <div class="team-card-inner">
+          <div class="team-front">
+            <div class="team-photo">
+              <img [src]="desarrollador.FotoURL || 'Avatar=45.png'"
+                [alt]="desarrollador.NombreCompleto || 'Miembro del equipo'">
+            </div>
+            <h3 class="team-name">{{ desarrollador.NombreCompleto || 'Miembro ' + (i+1) }}</h3>
+            <p class="team-position">Desarrollador</p>
+            <button class="team-btn" (click)="flipCard($event)">
+              Ver más
+            </button>
+          </div>
+          <div class="team-back">
+            <p>{{ desarrollador.Biografia || 'Sin biografía disponible.' }}</p>
+            <button class="team-btn" (click)="flipCard($event)">
+              Volver
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</div>

package/templates/frontend/src/app/Paginas/Nucleo/conozcanos/conozcanos.component.ts

@@ -0,0 +1,63 @@
+import { Component, OnInit } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { DatosGlobalesService } from '../../../datos-globales.service';
+import { takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+import { HttpClient } from '@angular/common/http';
+import { CommonModule } from '@angular/common';
+@Component({
+  selector: 'app-conozcanos',
+  standalone: true,
+  imports: [MatIconModule, CommonModule],
+  templateUrl: './conozcanos.component.html',
+  styleUrl: './conozcanos.component.css'
+})
+export class ConozcanosComponent implements OnInit {
+  public datosDesarrolladores: any[] = [];
+  public cargando: boolean = true;
+  public desarrolladorLider: any = null;
+  private _destroy$ = new Subject<void>();
+
+  constructor(private http: HttpClient, private datosGlobalesService: DatosGlobalesService) { }
+
+
+  ngOnInit(): void {
+    this.http.get(`${this.datosGlobalesService.ObtenerURL()}misc/VistaDeConozcanos`).pipe(takeUntil(this._destroy$)).subscribe({ error: () => { } });
+    this.obtenerDesarrolladores();
+  }
+
+  obtenerDesarrolladores(): void {
+    this.cargando = true;
+    this.http.get(`${this.datosGlobalesService.ObtenerURL()}misc/obtenerEquipoDeDesarrolladores`).subscribe({
+      next: (respuesta: any) => {
+        console.log('Respuesta equipo:', respuesta);
+
+        if (respuesta.error) {
+          console.error('Problemas:', respuesta.error);
+          this.cargando = false;
+          return;
+        }
+
+        const todos = respuesta.body ?? [];
+        this.desarrolladorLider = todos.find((dev: any) => dev.Perfil === 'Lider') ?? null;
+        this.datosDesarrolladores = todos.filter((dev: any) => dev.Perfil !== 'Lider');
+        this.cargando = false;
+      },
+      error: (error) => {
+        console.error('Error:', error);
+        this.cargando = false;
+      },
+    });
+  }
+
+
+  flipCard(event: Event): void {
+    const button = event.target as HTMLElement;
+    const card = button.closest('.team-card');
+
+    if (card) {
+      card.classList.toggle('flipped');
+    }
+  }
+}
+

package/templates/frontend/src/app/Paginas/Nucleo/politicas/politicas.component.css

@@ -0,0 +1,158 @@
+.politicas-container {
+  max-width: 1000px;
+  padding-bottom: 20px;
+  font-family: 'Roboto', sans-serif;
+  background-color: white;
+  text-align: left;
+  margin: 0 auto;
+}
+
+.subtitle {
+  background-color: #0b4794;
+  font-size: 25px;
+  color: white;
+  padding: 18px;
+  margin: 20px 0;
+  text-align: center;
+}
+.subtitle p {
+  margin: 5px 0;
+}
+.description {
+  width: 100%;
+  padding-left: 30px;
+  padding-right: 30px;
+  box-sizing: border-box;
+   margin-top: 30px;  
+}
+
+.description p {
+  margin: 15px 0;
+  font-size: 16px;
+  font-weight: 400;
+  color: #4D4D4D;
+  line-height: 1.6;
+}
+
+@media (max-width: 768px) {
+  .description {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+  
+  .description p {
+    font-size: 14px;
+  }
+}
+
+@media (min-width: 1400px) {
+  .description {
+    padding-left: 40px;
+    padding-right: 40px;
+  }
+}
+
+.tree-container {
+  width: 100%;
+  padding-left: 30px;
+  padding-right: 30px;   
+  margin-top: 30px;  
+  box-sizing: border-box;   
+  max-height: none;
+}
+
+/* Estilos árboles */
+.tree-item {
+  margin-bottom: 10px;
+  padding-left: 15px;
+  transition: background-color 0.3s ease;
+}
+
+.line {
+  height: 3px;
+   border-bottom: 1px solid #C4C4C4;
+}
+.tree-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  padding: 12px;
+  background-color: white;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+}
+
+.tree-icon {
+  font-size: 14px;
+  color: #0b4794;
+  font-weight: bold;
+  width: 20px;
+}
+
+.tree-title {
+  font-weight: 500;
+  color: #4D4D4D;
+  font-size: 16px;
+}
+
+.tree-content {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease-out;
+  background-color: white;
+  margin-top: 5px;
+}
+
+.tree-content.expanded {
+  max-height: 2000px;
+  padding: 15px;
+}
+.tree-item.expanded-item {
+  background-color: #F6F8FA;
+  border-left: 4px solid #002F6B;
+}
+
+.tree-item.expanded-item .tree-header,
+.tree-item.expanded-item .tree-header .tree-title {
+  background-color: #F6F8FA;
+  color: #002F6B;
+}
+
+.tree-item.expanded-item .tree-content.expanded {
+  background-color: #F6F8FA;
+}
+.tree-content p {
+  margin: 0;
+  line-height: 1.6;
+  color: #4D4D4D;
+  margin-bottom: 20px;
+  font-size: 16px;
+}
+
+.tree-content ul {
+  padding-left: 20px; 
+  margin-top: 10px;  
+}
+
+.tree-content li {
+  list-style-type: disc; 
+  margin-bottom: 10px; 
+  color: #4D4D4D;  
+  font-size: 16px; 
+}
+
+@media (max-width: 768px) {
+  
+  .tree-title {
+    font-size: 14px;
+  }
+  
+  .tree-content p {
+    font-size: 14px;
+  }
+
+  .tree-content li{
+     font-size: 14px;
+  }
+}

package/templates/frontend/src/app/Paginas/Nucleo/politicas/politicas.component.html

@@ -0,0 +1,120 @@
+
+<div class="subtitle">
+    <p>Acuerdo de seguridad, privacidad y condiciones de uso</p>
+  </div>
+<div class="politicas-container">
+
+  <div class="description">
+    <p>La Universidad Técnica Nacional (UTN), institución pública de educación superior dedicada a la docencia, la
+      investigación y la acción social, pone a disposición de la comunidad universitaria la plataforma digital SIGU
+      (Sistema Integrado de Gestión Universitaria).
+    </p>
+    <p>El presente acuerdo establece los términos y condiciones de seguridad, privacidad y acceso aplicables a todos los
+      usuarios del sistema.</p>
+  </div>
+
+  <!-- Árbol-->
+  <div class="tree-container">
+
+    <!-- Item 1 -->
+    <div class="tree-item" [class.expanded-item]="expandedItems['item1']">
+      <div class="tree-header" (click)="toggleItem('item1')">
+        <span class="tree-icon">{{ expandedItems['item1'] ? '▼' : '▶' }}</span>
+        <span class="tree-title">1. Usuario</span>
+      </div>
+      <div class="tree-content" [class.expanded]="expandedItems['item1']">
+        <p>1.1. Este Acuerdo regula la relación entre la Universidad Técnica Nacional y los usuarios que hacen uso de la
+          plataforma SIGU, incluyendo estudiantes, docentes, personal administrativo, aspirantes, clientes y público en
+          general que utilicen los servicios disponibles dentro del sistema.</p>
+
+        <p>1.2. El acceso a los módulos del SIGU está estrictamente limitado según el perfil del usuario autenticado,
+          garantizando que visualice y utilice únicamente la información y servicios correspondientes a su gestión o
+          autorización dentro de la plataforma. </p>
+
+        <p>1.3. Los usuarios deberán hacer un uso responsable, ético y seguro de la plataforma SIGU, conforme al
+          Reglamento de Seguridad de la Información de TI de la UTN y demás políticas aplicables en materia de seguridad
+          informática y uso de recursos tecnológicos.
+        </p>
+
+        <p>1.4. Asimismo, cada usuario será responsable de resguardar la confidencialidad de sus credenciales de acceso
+          y de utilizar la información disponible en el sistema únicamente para fines académicos y administrativos
+          autorizados. </p>
+      </div>
+      <div class="line"></div>
+    </div>
+
+    <!-- Item 2-->
+    <div class="tree-item" [class.expanded-item]="expandedItems['item2']">
+      <div class="tree-header" (click)="toggleItem('item2')">
+        <span class="tree-icon">{{ expandedItems['item2'] ? '▼' : '▶' }}</span>
+        <span class="tree-title">2. Protección de datos</span>
+      </div>
+      <div class="tree-content" [class.expanded]="expandedItems['item2']">
+        <p>2.1 El cumplimiento de la ley de protección de la persona frente al tratamiento de sus datos personales (N °
+          8968) y su reglamento, la UTN declara que:</p>
+        <ul>
+          <li>La información recolectada a través de formularios en el SIGU (admisión, solicitud de becas, planes de
+            estudio, etc.) será utilizada exclusivamente para la finalidad establecida en cada formulario y para la
+            gestión interna universitaria.</li>
+          <li>Al completar los formularios, el usuario otorga su consentimiento para que los datos sean suministrados y
+            procesados por la UTN.</li>
+          <li>En ningún caso la información personal será distribuida, vendida o cedida a terceros.</li>
+        </ul>
+      </div>
+      <div class="line"></div>
+    </div>
+
+    <!-- Item 3-->
+    <div class="tree-item" [class.expanded-item]="expandedItems['item3']">
+      <div class="tree-header" (click)="toggleItem('item3')">
+        <span class="tree-icon">{{ expandedItems['item3'] ? '▼' : '▶' }}</span>
+        <span class="tree-title">3. Privacidad</span>
+      </div>
+      <div class="tree-content" [class.expanded]="expandedItems['item3']">
+        <p>3.1 Las solicitudes de información sensible a través del sitio web son completamente privadas y solo visibles
+          para el usuario titular y el personal administrativo autorizado para la gestión de trámites. Cualquier otro
+          dato que el usuario proporcione será utilizado en apego a lo establecido por la legislación costarricense en
+          materia de protección de datos personales, y no será divulgado sin el consentimiento del titular.
+        </p>
+        <p>3.2 Asimismo, el sitio web SIGU utiliza cookies para almacenar información de sesión y preferencias de
+          accesibilidad del usuario. Estos datos se utilizan únicamente con el fin de mejorar la experiencia del usuario
+          mientras navega por el sitio web institucional.
+        </p>
+        <p>3.3 El contenido almacenado en las cookies no almacena datos sensibles y no se distribuyen a terceros.
+        </p>
+      </div>
+      <div class="line"></div>
+    </div>
+
+    <!-- Item 4-->
+    <div class="tree-item" [class.expanded-item]="expandedItems['item4']">
+      <div class="tree-header" (click)="toggleItem('item4')">
+        <span class="tree-icon">{{ expandedItems['item4'] ? '▼' : '▶' }}</span>
+        <span class="tree-title">4. Accesibilidad y modificaciones</span>
+      </div>
+      <div class="tree-content" [class.expanded]="expandedItems['item4']">
+        <p>4.1 La UTN se reserva el derecho de actualizar y mejorar la plataforma SIGU, su estructura, funcionalidades,
+          contenidos y el presente Acuerdo de Seguridad, cuando lo considere necesario para fortalecer la seguridad, la
+          accesibilidad y el correcto funcionamiento del sistema. Las modificaciones entrarán en vigencia a partir de su
+          publicación dentro de la plataforma, sin necesidad de previo aviso individual, aunque se recomienda al usuario
+          revisar la última actualización.</p>
+        <p>4.2 La dirección de gestión de tecnologías de información de la UTN trabaja para garantizar la accesibilidad
+          universal del SIGU, como:
+        </p>
+        <ul>
+          <li>Se utilizan herramientas automáticas y pruebas de intervención humana para evaluar el desempeño en
+            términos de accesibilidad visual y de navegación.</li>
+          <li>Durante las actualizaciones o pruebas de funcionalidades, los datos personales de los usuarios no serán
+            utilizados en entornos de prueba. Se utilizan datos ficticios para salvaguardar la privacidad.
+          </li>
+        </ul>
+        <p>4.3 En caso de que los usuarios presenten alguna dificultad de accesibilidad al sitio web y requieran
+          asistencia, pueden contactarse con el Departamento de Soporte Técnico de la UTN, por medio del correo
+          electrónico soporte@utn.ac.cr</p>
+      </div>
+      <div class="line"></div>
+    </div>
+
+  </div>
+
+</div>

package/templates/frontend/src/app/Paginas/Nucleo/politicas/politicas.component.ts

@@ -0,0 +1,33 @@
+import { Component, OnInit } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { DatosGlobalesService } from '../../../datos-globales.service';
+import { HttpClient } from '@angular/common/http';
+import { takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+@Component({
+  selector: 'app-politicas',
+  standalone: true,
+  imports: [MatIconModule],
+  templateUrl: './politicas.component.html',
+  styleUrl: './politicas.component.css'
+})
+export class PoliticasComponent implements OnInit {
+  
+  private _destroy$ = new Subject<void>();
+  constructor(private http: HttpClient, private datosGlobalesService: DatosGlobalesService) { }
+   ngOnInit(): void {
+      this.http.get(`${this.datosGlobalesService.ObtenerURL()}misc/VistaDePoliticas`).pipe(takeUntil(this._destroy$)).subscribe({ error: () => { } });
+   }
+  // items expandidos
+  expandedItems: { [key: string]: boolean } = {
+    item1: false,
+    item2: false,
+    item3: false,
+    item4: false,
+  };
+  
+  toggleItem(itemId: string) {
+    this.expandedItems[itemId] = !this.expandedItems[itemId];
+  }
+  
+ }

package/templates/frontend/src/app/Paginas/Nucleo/preguntasFrecuentes/preguntasFrecuentes.component.css

@@ -0,0 +1,162 @@
+.politicas-container {
+  max-width: 1000px;
+  padding-bottom: 20px;
+  font-family: 'Roboto', sans-serif;
+  background-color: white;
+  text-align: left;
+  margin: 0 auto;
+}
+
+.subtitle {
+  background-color: #0b4794;
+  font-size: 25px;
+  color: white;
+  padding: 18px;
+  margin: 20px 0;
+  text-align: center;
+}
+.subtitle p {
+  margin: 5px 0;
+}
+
+
+@media (max-width: 768px) {
+  .description {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+  
+  .description p {
+    font-size: 14px;
+  }
+}
+
+@media (min-width: 1400px) {
+  .description {
+    padding-left: 40px;
+    padding-right: 40px;
+  }
+}
+
+.tree-container {
+  width: 100%;
+  padding-left: 30px;
+  padding-right: 30px;   
+  margin-top: 30px;  
+  box-sizing: border-box;   
+  max-height: none;
+}
+
+/* Estilos árboles */
+.tree-item {
+  margin-bottom: 10px;
+  padding-left: 15px;
+  transition: background-color 0.3s ease;
+}
+
+.line {
+  height: 3px;
+   border-bottom: 1px solid #C4C4C4;
+}
+.tree-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  padding: 12px;
+  background-color: white;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+}
+
+.tree-icon {
+  font-size: 14px;
+  color: #0b4794;
+  font-weight: bold;
+  width: 20px;
+}
+
+.tree-title {
+  font-weight: 500;
+  color: #4D4D4D;
+  font-size: 16px;
+}
+
+.tree-content {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease-out;
+  background-color: white;
+  margin-top: 5px;
+}
+
+.tree-content.expanded {
+  max-height: 2000px;
+  padding: 15px;
+}
+.tree-item.expanded-item {
+  background-color: #F6F8FA;
+  border-left: 4px solid #002F6B;
+}
+
+.tree-item.expanded-item .tree-header,
+.tree-item.expanded-item .tree-header .tree-title {
+  background-color: #F6F8FA;
+  color: #002F6B;
+}
+
+.tree-item.expanded-item .tree-content.expanded {
+  background-color: #F6F8FA;
+}
+.tree-content p {
+  margin: 0;
+  line-height: 1.6;
+  color: #4D4D4D;
+  margin-bottom: 20px;
+  font-size: 16px;
+}
+.conozcanos-image {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.conozcanos-image img {
+  width: 100%;
+  max-width: 290px;
+  height: auto;
+  object-fit: cover;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+}
+.preguntados-image {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.preguntados-image img {
+  width: 100%;
+  max-width: 420px;
+  height: auto;
+  object-fit: cover;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+}
+
+@media (max-width: 768px) {
+  
+  .tree-title {
+    font-size: 14px;
+  }
+  
+  .tree-content p {
+    font-size: 14px;
+  }
+
+  .tree-content li{
+     font-size: 14px;
+  }
+}