[ ARCHIVO DE EJERCICIOS ]

EJERCICIO: "RECREACIÓN UDEC"

Recreación de una interfaz gráfica (Dirección de Servicios Estudiantiles de la UdeC) usando grid, flexbox y variables CSS a partir de una imagen de referencia.

Visualización del Ejercicio

Dirección de Servicios Estudiantiles

El trabajo colaborativo, sistemático y permanente en investigación y creación, realizado en la Universidad de Concepción, es una forma válida de alcanzar altos niveles de calidad y pertinencia.

Conocer más

Deportes

Actividades masivas y recreativas

Salud

Recepción de certificados médicos

Bienestar Estudiantil

Tarjeta Nacional Estudiantil

Actividades extraprogramáticas

Cursos Artísticos y Culturales de libre participación

Unidad de Deportes DISE

Talleres deportivos

Esta Unidad es la encargada de generar instancias deportivas, recreativas y de actividades masivas de integración para la formación integral y de excelencia. Su objetivo principal es entregar a los y las estudiantes las herramientas necesarias para su desarrollo integral al interior de la Universidad y ser la fuente motivadora y precursora de cambios positivos tanto en el aspecto físico como en el mental, a través de difusión o promoción de estilos de vida saludables.

Visita nuestros talleres

> DESPLEGAR CÓDIGO FUENTE COMPLETO

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dirección de Servicios Estudiantiles</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-blue: #18233b;
            --accent-yellow: #f59e0b;
            --bg-gray: #f4f5f7;
            --text-dark: #212121;
            --text-light: #555555;
            --text-blue-gray: #9ba4b5;
        }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: 'Inter', sans-serif; color: var(--text-dark); background-color: #ffffff; line-height: 1.5; }
        .container { max-width: 1100px; margin: 0 auto; padding: 60px 20px; }
        .top-section { display: flex; flex-wrap: wrap; gap: 50px; }
        .top-left { flex: 1; min-width: 300px; }
        .top-left h1 { font-size: 2.2rem; font-weight: 700; line-height: 1.2; margin-bottom: 15px; }
        .divider { width: 40px; height: 4px; background-color: var(--accent-yellow); margin-bottom: 20px; }
        .top-left p { font-size: 0.95rem; color: var(--text-light); margin-bottom: 30px; line-height: 1.7; }
        .top-left p strong { color: var(--text-dark); }
        .top-right { flex: 1.5; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; min-width: 450px; }
        .card { background-color: var(--bg-gray); padding: 30px 25px; border-radius: 4px; }
        .card-category { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; font-weight: 600; color: var(--text-light); margin-bottom: 12px; }
        .card-category::before { content: ''; display: inline-block; width: 6px; height: 6px; background-color: #3b5278; }
        .card-title { font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
        .btn { display: inline-flex; align-items: center; gap: 8px; background-color: var(--accent-yellow); color: #000; text-decoration: none; font-weight: 600; font-size: 0.9rem; padding: 10px 24px; border-radius: 4px; transition: background-color 0.2s; }
        .btn:hover { background-color: #df8e08; }
        .btn svg { width: 16px; height: 16px; }
        .bottom-bg-wrapper { background-color: var(--bg-gray); padding: 60px 0; margin-top: 40px; }
        .bottom-card { display: flex; max-width: 1100px; margin: 0 auto; padding: 0 20px; border-radius: 6px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.05); }
        .bottom-left { flex: 1; background-color: var(--primary-blue); color: #ffffff; padding: 50px 40px; display: flex; flex-direction: column; justify-content: center; }
        .bottom-category { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 600; color: var(--text-blue-gray); margin-bottom: 30px; }
        .bottom-category::before { content: ''; display: inline-block; width: 6px; height: 6px; background-color: var(--text-blue-gray); }
        .bottom-left h2 { font-size: 2.2rem; margin-bottom: 20px; }
        .bottom-divider { width: 40px; height: 3px; background-color: #314467; margin-bottom: 30px; }
        .bottom-left p { font-size: 0.85rem; line-height: 1.8; color: #c9d0df; margin-bottom: 40px; }
        .bottom-right { flex: 1.2; }
        .bottom-right img { width: 100%; height: 100%; object-fit: cover; display: block; }
        @media (max-width: 900px) { .top-right { min-width: 100%; } .bottom-card { flex-direction: column; } .bottom-right img { height: 350px; } }
        @media (max-width: 600px) { .top-right { grid-template-columns: 1fr; } }
    </style>
</head>
<body>

    <div class="container">
        <section class="top-section">
            <div class="top-left">
                <h1>Dirección de Servicios Estudiantiles</h1>
                <div class="divider"></div>
                <p>El trabajo <strong>colaborativo, sistemático y permanente en investigación y creación</strong>, realizado en la Universidad de Concepción, es una forma válida de alcanzar altos niveles de <strong>calidad y pertinencia</strong>.</p>
                <a href="#" class="btn">Conocer más <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg></a>
            </div>
            <div class="top-right">
                <div class="card"><div class="card-category">Deportes</div><div class="card-title">Actividades masivas y recreativas</div></div>
                <div class="card"><div class="card-category">Salud</div><div class="card-title">Recepción de certificados médicos</div></div>
                <div class="card"><div class="card-category">Bienestar Estudiantil</div><div class="card-title">Tarjeta Nacional Estudiantil</div></div>
                <div class="card"><div class="card-category">Actividades extraprogramáticas</div><div class="card-title">Cursos Artísticos y Culturales de libre participación</div></div>
            </div>
        </section>
    </div>

    <div class="bottom-bg-wrapper">
        <article class="bottom-card">
            <div class="bottom-left">
                <div class="bottom-category">Unidad de Deportes DISE</div>
                <h2>Talleres deportivos</h2>
                <div class="bottom-divider"></div>
                <p>Esta Unidad es la encargada de generar instancias deportivas, recreativas y de actividades masivas de integración para la formación integral y de excelencia. Su objetivo principal es entregar a los y las estudiantes las herramientas necesarias para su desarrollo integral al interior de la Universidad y ser la fuente motivadora y precursora de cambios positivos tanto en el aspecto físico como en el mental, a través de difusión o promoción de estilos de vida saludables.</p>
                <div><a href="#" class="btn">Visita nuestros talleres <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg></a></div>
            </div>
            <div class="bottom-right">
                <img src="futbol.png" alt="Estudiantes jugando fútbol">
            </div>
        </article>
    </div>

</body>
</html>

EJERCICIO: "ANÁLISIS DE INTERFACES"

Análisis estructural y de comportamiento responsivo de un sitio web y una plataforma web, evaluando sus decisiones de diseño y layout frente a distintos viewports.

1. Sitio Web: Casiopea (Wiki eAD)

A. Comportamiento al hacer scroll:
La barra superior y el menú lateral de navegación global suelen mantenerse fijos o fácilmente accesibles en resoluciones de escritorio para facilitar la exploración. El bloque de contenido central, que alberga la documentación, fluye de manera independiente al hacer scroll.

B. Distribución de columnas:
Al inspeccionar con las herramientas de desarrollador, se observa una estructura clásica asimétrica. Un porcentaje menor del ancho (aprox. 20-25%) se reserva para el sidebar o navegación, mientras que el espacio restante aloja el contenido principal, estructurado mediante un sistema de bloques o flexbox.

C. Reacción al tamaño móvil:
El layout reacciona mediante media queries. El menú lateral colapsa (convirtiéndose en un menú hamburguesa o desplazándose hacia el fondo de la página), permitiendo que la columna de contenido principal se expanda al 100% del ancho de la pantalla para optimizar la lectura.

D. Decisiones y ajustes:
Las decisiones son muy apropiadas para la naturaleza de una wiki documental, donde priorizar la lectura es clave. Como ajuste, aumentaría ligeramente el padding lateral en la versión móvil y ajustaría la jerarquía tipográfica para evitar que grandes bloques de texto se sientan abrumadores en pantallas pequeñas.

2. Plataforma Web: Navegador Académico

A. Comportamiento al hacer scroll:
A diferencia de las interfaces modernas, la estructura es rígida. La mayoría de los elementos (incluyendo cabeceras de tablas) desaparecen hacia arriba al hacer scroll, lo que hace que el usuario pierda el contexto de los datos si la lista de información es muy extensa.

B. Distribución de columnas:
Inspeccionando el DOM, su arquitectura está fuertemente basada en estructuras tabulares antiguas y contenedores estáticos. Divide la interfaz en un panel lateral para el menú de usuario y una extensa área de trabajo central para el despliegue de datos financieros o académicos.

C. Reacción al tamaño móvil:
El layout presenta una baja adaptabilidad (carece de un enfoque mobile-first). Al reducir el viewport al tamaño de un teléfono, los contenedores no fluyen de forma apilada. En su lugar, el diseño se rompe o fuerza al usuario a utilizar scroll horizontal, lo cual entorpece gravemente la usabilidad táctil.

D. Decisiones y ajustes:
Las decisiones tecnológicas están desactualizadas para los estándares actuales. El principal ajuste sería migrar la estructura tabular a un sistema CSS Grid fluido, permitiendo que en versión móvil el menú pase a ser desplegable y la información se agrupe en tarjetas apiladas en una sola columna. Además, aplicaría position: sticky; a los encabezados de las tablas de notas para no perder la referencia visual al bajar.