Contenido del curso
El lenguaje de la computadora
- 2

Evolución de Cálculos: Del Ábaco a Computadoras Humanas
03:43 min - 3

Evolución de las Computadoras y el Código Máquina
04:12 min - 4

Qué son inputs y outputs en computación
03:12 min - 5

Conversión de Números Decimales a Binario
06:42 min - 6

Bits y Bytes: Fundamentos del Código Binario y Transistores
03:36 min - 7

Traducción de texto a binario usando código ASCII
04:18 min - 8

Unicode: qué es y por qué reemplaza a ASCII
01:49 min - 9

Conversión de Colores RGB a Código Binario
05:52 min
Cómo funciona el internet
- 10

Como a Internet nasceu de cabos e ARPANET
04:27 min - 11

Cómo ARPANET creó el correo y el FTP
02:07 min - 12

Qué son los protocolos de Internet
02:01 min - 13

Cómo viaja un mensaje por 5 capas de red
08:48 min - 14

Qué son los ISP y por qué existen
02:12 min - 15

Direcciones IP y DNS: Fundamentos para la Conectividad en Internet
03:48 min
Historia de la Web
- 16

Historia y Evolución de la Web: De ARPANET a Tim Berners-Lee
06:26 min - 17

Evolución de los Navegadores Web: De Mosaic a Chrome
04:46 min - 18

Qué es la W3C y por qué existe
02:44 min - 19

Cómo funciona HTTP y sus 4 métodos
04:19 min - 20

HTTPS: qué hace el candado seguro
03:22 min - 21

Qué motor usa cada navegador y por qué importa
02:47 min - 22

Fundamentos de HTML, CSS y JavaScript para Desarrollo Web
03:45 min - 23

WebAssembly: el segundo lenguaje nativo del navegador
02:15 min - 24

Mobile First: diseña desde el dispositivo más pequeño
Viendo ahora - 25

IoT, 5G e IA en la web moderna
05:52 min
Cómo funciona el navegador
- 26

Cómo el navegador convierte HTML en pantalla
01:50 min - 27

Introducción al DOM: Estructura y Función en HTML
01:48 min - 28

Qué es el CSSOM y cómo lo construye el navegador
01:53 min - 29

Renderizado de Árboles DOM y CSSOM en Navegadores
01:43 min - 30

Generación de Layout en HTML y CSS
01:55 min - 31

Renderizado y Estilización de Páginas Web
01:31 min - 32

Cómo el navegador convierte JS a machine code
04:36 min
Mobile First: diseña desde el dispositivo más pequeño
Resumen
La web moderna vive un momento decisivo: hay más de 4 mil millones de dispositivos conectados a Internet, lo que representa más de la mitad de la humanidad. Si diseñas productos digitales hoy, necesitas entender por qué el enfoque mobile first dejó de ser tendencia y se volvió estándar.
¿Por qué la web moderna es multiplataforma?
La cantidad de dispositivos conectados cambió por completo la forma en que consumimos contenido. Ya no hablamos solo de computadoras, hablamos de un ecosistema entero.
Hoy puedes abrir una página web desde un reloj inteligente, un smartphone pequeño, mediano o grande, una tablet, una laptop o tu computadora de escritorio. Y la cosa no termina ahí: también consumes contenido web desde el carro, desde pantallas inteligentes o desde dispositivos conectados en tu casa.
¿Notas el problema? Los formatos y tamaños varían demasiado. Si tu diseño no contempla esa diversidad, pierdes audiencia.
¿Cuántos dispositivos están conectados a Internet hoy? Más de 4 mil millones, según el dato compartido en la clase. Eso equivale a más de la mitad de la población mundial consumiendo contenido digital desde formatos muy distintos. [01:00]
¿Qué era el diseño desktop only y por qué quedó obsoleto?
En los inicios de la web doméstica, las primeras computadoras llegaron a casas y oficinas con pantallas grandes. La forma natural de diseñar fue pensar todo para ese formato.
A ese enfoque se le llamó desktop only: cada página, cada interfaz y cada experiencia se construía asumiendo que la persona estaría frente a una pantalla amplia. Funcionaba bien cuando el escritorio era el único punto de acceso.
El problema apareció cuando empezaron a multiplicarse los dispositivos. Si tu diseño solo se ve bien en desktop y alguien intenta consumirlo desde un smartphone o un reloj inteligente, la experiencia se rompe. La persona se frustra, no encuentra lo que busca y, muy probablemente, abandona el sitio.
¿Qué es el diseño desktop only? Es un enfoque donde el sitio se diseña pensando únicamente en pantallas grandes de computadora de escritorio. Hoy se considera obsoleto porque ignora la diversidad de dispositivos conectados. [02:15]
¿Qué significa mobile first y cómo se aplica?
La respuesta a la fragmentación de pantallas se llama mobile first. La lógica es simple pero potente: diseñas primero para el dispositivo más pequeño y luego haces crecer la experiencia hacia pantallas más grandes.
En lugar de adaptar hacia abajo una versión de escritorio (lo que casi siempre sale mal), construyes desde el dispositivo más chico y dejas que el diseño se expanda de forma elástica. Así garantizas que cualquier persona, sin importar desde dónde te visite, tenga una experiencia consistente.
Las claves del enfoque mobile first son:
- Empezar el diseño desde la pantalla más pequeña posible.
- Crecer la presentación visual de forma elástica hacia pantallas más grandes.
- Asegurar que el contenido encaje bien en cualquier tamaño intermedio.
- Pensar en la experiencia del usuario como el eje, no en el formato del dispositivo.
Este cambio de mentalidad no es solo técnico, también es estratégico. Cuando diseñas mobile first, te obligas a priorizar lo esencial: qué información va primero, qué acciones importan más y cómo simplificar la navegación.
¿Por qué diseñar mobile first y no desktop first? Porque la mayoría de usuarios accede desde dispositivos pequeños y diversos. Empezar por el formato más chico te obliga a priorizar contenido y garantiza que la experiencia escale bien hacia pantallas grandes. [03:10]
Conceptos clave que aparecen en la clase
Para que tengas claro el vocabulario que vas a usar como creador de productos web:
- Multiplataforma: capacidad de un producto digital de funcionar correctamente en distintos tipos de dispositivos y tamaños de pantalla. [00:20]
- Desktop only: enfoque de diseño centrado exclusivamente en computadoras de escritorio, hoy considerado limitado. [01:45]
- Mobile first: metodología de diseño que parte del dispositivo más pequeño y escala hacia los más grandes de manera elástica. [03:00]
- Diseño elástico: capacidad del diseño para adaptarse fluidamente a cualquier tamaño de pantalla intermedia. [03:25]
La evolución no se detiene aquí. Cada vez hay más dispositivos conectados con formatos nuevos, y eso abre preguntas sobre cómo seguirá transformándose la forma en que consumimos web.
¿Desde qué tipo de dispositivo consumes más contenido web tú? Cuéntalo en los comentarios.