Variable Principiante TemarioDiseño de InterfacesTecnologías WebUI

Temario General de Estudio

Plan de estudio completo que integra Diseño de Interfaces y Tecnologías y Aplicaciones Web, organizado por unidades, temas, actividades y progresión de aprendizaje.

Comenzar ← Ver más cursos

Diseño de Interfaces

Parte 1 · Introducción al Diseño de Interfaces

📄 Clase: di-1 · Duración: 30 minutos · Nivel: Principiante

Temas

  1. ¿Qué es una interfaz?
  2. Diseño centrado en el usuario
  3. Interfaces digitales
  4. Interfaces que usamos diario
  5. Elementos visuales

Conceptos clave

  • Una interfaz es el punto de contacto entre el usuario y un sistema digital
  • El diseño moderno busca claridad, accesibilidad y facilidad de uso
  • Las interfaces están construidas con componentes: botones, menús, formularios, iconos, tarjetas
Diseño + Organización + Interacción = Experiencia de Usuario

Actividad

Analizar una aplicación de uso diario (Spotify, Netflix, Instagram) observando sus colores, distribución y navegación.

Preguntas guía:

  • ¿La interfaz es clara?
  • ¿Qué elementos llaman más la atención?
  • ¿Es fácil navegar?
  • ¿Qué mejorarías?

Herramientas / Recursos

  • Aplicación o sitio web de tu elección
  • Explorador de Interfaces (experiencia interactiva)

Parte 2 · Interacción Humano-Computadora y Factor Humano

📄 Clases: di-2 y di-3 · Duración: 1 hora cada una · Nivel: Principiante

Temas

  1. ¿Qué es la Interacción Humano-Computadora (HCI)?
  2. Elementos de interacción
  3. Percepción y memoria del usuario
  4. Cómo piensa el usuario
  5. Diseño centrado en el usuario (introducción)
  6. Metáforas visuales
  7. Paradigmas de interacción
  8. Dispositivos de entrada
  9. Interfaces modernas
  10. Guías de estilo
  11. Elementos visuales y jerarquía

Conceptos clave

  • HCI estudia cómo las personas usan sistemas digitales
  • Cada clic, toque o gesto forma parte de la interacción
Usuario ↔ Interfaz ↔ Sistema
  • Las metáforas visuales ayudan a aprender interfaces más rápido (papelera = eliminar, carpeta = organizar)
  • Los paradigmas modernos incluyen: interfaces gráficas, pantallas táctiles, comandos de voz, realidad aumentada, IA conversacional
  • Las guías de estilo mantienen coherencia visual (colores, tipografía, espaciados)

Actividades

di-2: Elegir una app, identificar sus elementos de interacción y describir si la interfaz es fácil de entender.

di-3: Diseñar una interfaz sencilla aplicando conceptos de interacción visual (reproductor de música, app de notas, tienda en línea, etc.)

Herramientas / Recursos

  • Explorador de Interfaces
  • Simulador de Usuario
  • Laboratorio de Interacción

Parte 3 · Diseño Centrado en el Usuario (DCU)

📄 Clase: di-4 · Duración: 1 hora · Nivel: Principiante

Temas

  1. ¿Qué es el DCU? (ISO 9241-210)
  2. Importancia del DCU
  3. Modelo arquitectónico de la UI
  4. Modelo de interacción usuario-sistema
  5. Estrategia de diseño (4 pilares)
  6. Proceso del DCU (4 fases)
  7. Análisis centrado en el usuario
  8. Ciclo de vida de la interfaz
  9. Análisis de tareas
  10. Características de buenas y malas interfaces
  11. Herramientas UI/UX (Figma, Maze, Miro, Hotjar)
  12. Caso práctico: app de delivery

Conceptos clave

El DCU no pregunta “¿podemos construirlo?” sino “¿los usuarios lo necesitan y pueden usarlo?”

Proceso del DCU:

1. Investigación → 2. Análisis → 3. Diseño → 4. Evaluación → [Repetir]

Modelo de interacción:

Usuario → Input → Sistema → Output → Evaluación → [ciclo]

Buenas interfaces: jerarquía clara, máximo 5–7 opciones, contraste WCAG AA+, botones ≥44px, errores con solución, consistencia visual, carga < 3 segundos.

Herramientas clave:

  • Figma (wireframes y prototipos)
  • Maze / UserTesting (testing con usuarios)
  • Miro / Mural (journey maps)
  • Hotjar / Clarity (mapas de calor)

Actividad

Elegir una app con mala experiencia, identificar 3 problemas de usabilidad, dibujar un wireframe de mejora y presentarlo al grupo (2 minutos).

Parte 4 · Wireframes, Prototipado y Recreación de Interfaces

📄 Clases: di-5 y di-6 · Duración: 1 hora cada una · Nivel: Principiante

Temas

  1. ¿Qué es un wireframe?
  2. Utilidad de los wireframes
  3. Elementos de una interfaz
  4. Jerarquía visual
  5. Navegación en aplicaciones
  6. Pensando en el usuario
  7. Análisis visual de interfaces reales
  8. Componentes UI (botones, cards, menús, formularios)
  9. Recreación fiel de una pantalla

Conceptos clave

Un wireframe es un boceto visual que representa pantallas, navegación y flujos antes de desarrollar la aplicación. Su objetivo es la funcionalidad, no el detalle visual final.

Inicio → Login → Dashboard → Perfil

Estructura básica de una pantalla:

+----------------------------------+
| Logo           Menú              |
+----------------------------------+
|        Contenido Principal       |
|     [ Botón ]   [ Botón ]        |
+----------------------------------+
| Footer                           |
+----------------------------------+

La recreación de interfaces desarrolla la capacidad de observación visual y comprensión de estructuras reales de UI.

Actividades

di-5 · Taller de Wireframes: Diseñar una aplicación con al menos 2 pantallas conectadas mediante navegación, incluyendo logo, menú, 3 botones, 1 formulario, 1 menú y 1 card.

di-6 · Taller de Recreación: Seleccionar una app real (Spotify, YouTube, TikTok, etc.), tomar captura y recrear la pantalla de manera fiel en Figma.

Herramientas

Tecnologías y Aplicaciones Web

Parte 1 · Fundamentos de Aplicaciones Web

📄 Clase: tyaw-1 · Duración: 1 hora · Nivel: Principiante

Temas

  1. ¿Qué es una aplicación web?
  2. Cómo funciona la web
  3. Modelo cliente-servidor
  4. Aplicaciones web cotidianas
  5. Tecnologías modernas (visión general)

Conceptos clave

Una aplicación web es software que funciona desde el navegador, sin instalar nada localmente.

Usuario → Internet → Servidor → Respuesta → Navegador

Tipos de aplicaciones web: redes sociales, plataformas educativas, herramientas de productividad, streaming.

Tecnologías que se estudiarán: interfaces web, APIs, frameworks, frontend y backend.

Actividad

Analizar una aplicación web conocida e identificar cómo interactúa el usuario, qué información viaja y qué rol cumple el servidor.

Recursos

  • Visualizador Cliente-Servidor (experiencia interactiva)

Parte 2 · Arquitectura de Aplicaciones Web

📄 Clases: tyaw-2 y tyaw-3 · Duración: 1.5 horas cada una · Nivel: Principiante

Temas

  1. Tipos de aplicaciones web (página, sitio, sistema, API)
  2. Modelo cliente-servidor
  3. Modelo de tres capas (Presentación, Lógica, Datos)
  4. Patrón MVC (Modelo-Vista-Controlador)
  5. Comparación de arquitecturas
  6. APIs: concepto, endpoints, verbos HTTP
  7. Tipos de APIs (REST, tiempo real, punto a punto)
  8. Stack tecnológico moderno
  9. Caso práctico: sistema escolar

Conceptos clave

Tipos de aplicaciones:

  • Página web (HTML estático) → wikipedia.org
  • Sitio web (conjunto de páginas) → apple.com
  • Sistema web (lógica + BD + usuarios) → Moodle, SAP
  • API web (sin interfaz, expone datos) → REST, GraphQL

Modelo de tres capas:

Presentación (HTML/CSS/JS)
    ↕
Lógica de Negocio (PHP, Python, Node.js)
    ↕
Datos (MySQL, PostgreSQL, MongoDB)

Patrón MVC:

  • Vista → lo que el usuario ve
  • Controlador → intermediario, maneja rutas
  • Modelo → lógica de datos y base de datos

API: conjunto de reglas para que dos aplicaciones se comuniquen. Los endpoints son URLs que representan recursos (/usuarios, /productos).

Verbos HTTP: GET (leer), POST (crear), PUT (actualizar), DELETE (eliminar).

Comparación:

CriterioCliente-ServidorTres CapasMVC
Organización2 nodos3 capas3 componentes
EscalabilidadMediaAltaAlta
Uso comúnApps simplesERPLaravel, Django

Actividades

tyaw-2: Analizar Netflix, Amazon, Moodle y WhatsApp Web e identificar su tipo de arquitectura con argumentos técnicos.

tyaw-3 (Taller): 4 actividades prácticas:

  1. Detectar componentes (Frontend, Backend, BD, API) en apps reales
  2. Analizar el comportamiento cliente-servidor al usar una app
  3. Asignar arquitectura probable a Facebook, Moodle, Spotify y Uber
  4. Diseñar conceptualmente un sistema escolar con diagrama

Parte 3 · Transferencia de Información y Frontend/Backend

📄 Clases: tyaw-4 y tyaw-5 · Duración: 1.5 horas cada una · Nivel: Principiante

Temas

  1. ¿Qué es la transferencia de información?
  2. Flujo de datos en aplicaciones web
  3. XML: estructura y uso
  4. JSON: estructura y uso moderno
  5. Comparación XML vs JSON
  6. SQL: lenguaje de bases de datos
  7. Operaciones CRUD (SELECT, INSERT, UPDATE, DELETE)
  8. Relación entre JSON y SQL
  9. ¿Qué es el Frontend?
  10. ¿Qué es el Backend?
  11. Tecnologías Frontend (HTML, CSS, JS, React, Vue, Tailwind)
  12. Tecnologías Backend (Node.js, Laravel, Django, Express)
  13. Bases de datos (MySQL, PostgreSQL, MongoDB, Firebase)
  14. Flujo completo de una petición web

Conceptos clave

Flujo de datos:

Cliente → HTTP → Servidor → SQL → Base de Datos → JSON → Cliente

XML vs JSON:

CaracterísticaXMLJSON
TamañoMás grandeMás ligero
Uso actualSistemas heredados, RSSAPIs REST modernas
ProcesamientoMás lentoMás rápido

SQL CRUD:

SELECT * FROM usuarios WHERE edad > 18;
INSERT INTO usuarios(nombre, correo) VALUES('Luis', 'luis@email.com');
UPDATE usuarios SET nombre = 'Luis A.' WHERE id = 1;
DELETE FROM usuarios WHERE id = 2;

Frontend: lo que el usuario ve (HTML, CSS, JS, React, Vue).

Backend: la lógica del servidor (Node.js, Laravel, Django). El usuario no lo ve directamente.

Flujo de inicio de sesión:

  1. Frontend captura correo y contraseña
  2. Envía JSON vía HTTP POST
  3. Backend valida credenciales
  4. Consulta base de datos con SQL
  5. Devuelve respuesta JSON
  6. Frontend muestra resultado

Actividades

tyaw-4: 4 actividades:

  1. Analizar transferencia de datos en 2 apps reales
  2. Experimentar con el Visualizador HTTP (GET y POST)
  3. Convertir datos entre XML y JSON
  4. Diseñar flujo completo para un escenario (biblioteca, streaming o red social)

tyaw-5: Seleccionar 2 apps, identificar qué es Frontend, qué requiere Backend, qué datos se almacenan y qué tecnologías podrían usarse.

Herramientas / Recursos

  • Visualizador HTTP (interactivo incluido en la clase)
  • Visualizador XML (interactivo incluido en la clase)

Parte 4 · Desarrollo Full Stack · Consumo de APIs

📄 Clase: tyaw-6 · Duración: 3 horas · Nivel: Intermedio

Temas

  1. APIs REST en la práctica
  2. JSON como formato de transferencia
  3. Arquitectura del proyecto (Frontend → fetch → Express → MySQL)
  4. HTML5, CSS3 y JavaScript Vanilla
  5. fetch() para consumir APIs
  6. Node.js y Express.js
  7. Conexión a MySQL con mysql2
  8. Consumo de la PokeAPI
  9. Endpoints GET y POST
  10. Almacenamiento de datos en MySQL

Conceptos clave

Flujo completo del proyecto:

Usuario → Frontend → PokeAPI → JSON → Express → MySQL

Estructura del proyecto:

pokedex-app/
├── frontend/  (index.html, style.css, app.js)
├── backend/   (server.js, db.js, package.json)
└── database/  (pokedex.sql)

Consumir una API con fetch():

const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${nombre}`);
const data = await response.json();

Enviar JSON al backend:

fetch("http://localhost:3000/pokemon", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ nombre: "pikachu", tipo: "electric" })
});

Instalar dependencias:

npm install express cors mysql2

Crear tabla en MySQL:

CREATE TABLE pokemon (
    id INT AUTO_INCREMENT PRIMARY KEY,
    nombre VARCHAR(100),
    tipo VARCHAR(100),
    altura INT,
    peso INT,
    experiencia INT,
    imagen TEXT
);

Actividad Final · Pokédex Web

Desarrollar una aplicación completa que:

  • Consuma la PokeAPI con fetch()
  • Muestre información del Pokémon en pantalla
  • Permita guardar Pokémon en MySQL vía Express
  • Implemente endpoint GET y POST

Entregables:

  1. Proyecto completo (frontend + backend)
  2. Script de base de datos SQL
  3. Capturas funcionando
  4. Explicación técnica

Tecnologías obligatorias: HTML5, CSS3, JavaScript Vanilla, Node.js, Express.js, MySQL

Ruta de Aprendizaje

La progresión está diseñada para construir conocimiento de forma gradual:

[DI-1] Qué es una interfaz
    ↓
[DI-2] Cómo el usuario interactúa con ella (HCI)
    ↓
[DI-3] El factor humano: metáforas y paradigmas
    ↓
[DI-4] Cómo diseñar pensando en el usuario (DCU)
    ↓
[DI-5] Cómo prototipar: wireframes
    ↓
[DI-6] Cómo replicar interfaces reales

[TYAW-1] Qué es una aplicación web
    ↓
[TYAW-2] Cómo se estructura una app web (arquitecturas)
    ↓
[TYAW-3] Taller: analizar arquitecturas reales
    ↓
[TYAW-4] Cómo viajan los datos: XML, JSON, SQL
    ↓
[TYAW-5] Frontend vs Backend: quién hace qué
    ↓
[TYAW-6] Práctica: construir una app web completa

Tabla Resumen

#ClaseMateriaTema PrincipalHerramientasTipo
1di-1Diseño de InterfacesIntroducción a interfacesNavegadorLectura + Actividad
2di-2Diseño de InterfacesInteracción Humano-ComputadoraPPTX, app elegidaTeoría + Lab
3di-3Diseño de InterfacesFactor humano y metáforasPPTXTeoría + Lab
4di-4Diseño de InterfacesDiseño Centrado en el UsuarioFigma, Maze, MiroTeoría + Lab
5di-5Diseño de InterfacesTaller de WireframesExcalidraw, FigmaTaller
6di-6Diseño de InterfacesTaller de Recreación de InterfacesFigma, PenpotTaller
7tyaw-1Tecnologías WebIntroducción a la webNavegadorLectura + Actividad
8tyaw-2Tecnologías WebArquitectura web y APIsPPTXTeoría + Lab
9tyaw-3Tecnologías WebTaller de ArquitecturasNavegador, papelTaller
10tyaw-4Tecnologías WebTransferencia de datos: XML, JSON, SQLVisualizadoresTeoría + Lab
11tyaw-5Tecnologías WebFrontend y BackendPPTXTeoría + Lab
12tyaw-6Tecnologías WebConsumo de APIs con Node.js + MySQLVS Code, MySQLProyecto final