100 Días de Código en Python — Día 65: Escuela de diseño web — cómo hacer sitios que la gente ame

📝 Contenido original del curso#

Hasta ahora aprendiste a construir sitios que funcionan. Hoy, a diseñarlos para que además sean bonitos. "¿Cuándo fue la última vez que alguien te dijo: encontré un sitio que funcionaba sin errores? Nadie dice eso. Dicen: se veía hermoso, funcionaba como yo quería".

"No juzgues un libro por su portada" choca con "solo tienes tres segundos para causar una buena impresión"; en diseño web, lo segundo es más cierto: como en una entrevista de trabajo, el sitio tiene unos segundos antes de que el usuario juzgue la empresa, la marca o el producto.

El ejemplo de Penny Juice: una empresa de jugos para niños con un sitio de colores que chocan, muchos tipos de letra y aspecto desordenado. Luego, el mismo sitio rediseñado por un profesional, con colores y fuentes coherentes. Según la profesora, al preguntar cuánto pagarían por un jugo, la gente dijo hasta 1 dólar con el primer sitio y hasta 3 dólares con el segundo: "hay muy pocas cosas que tripliquen el valor de un producto". El diseño es "una de las formas más baratas de hacer que un producto parezca valioso".

Los cuatro pilares del diseño web: teoría del color, tipografía, diseño de interfaz (UI) y diseño de experiencia de usuario (UX).

Prerequisitos: HTML y CSS (Días 41 a 44), Bootstrap (Día 58). Para la sección 5: funciones y listas en Python.

📖 ¿Por qué un programador debe saber de diseño? (adaptación)#

En tus proyectos (el blog, Coffee & Wifi, las películas) usaste plantillas que otra persona diseñó. Cuando tengas que crear o adaptar una página por tu cuenta, estas reglas te ayudarán a decidir qué color, qué fuente o qué espacio usar, y a explicar por qué.

🎯 Objetivo de aprendizaje#

Elegir una paleta de colores según el mensaje que se quiere transmitir y combinar colores con criterios de la rueda cromática.

📝 Contenido original del curso#

La teoría del color es "el arte y la ciencia de crear la paleta adecuada". Ejemplo: dos logotipos con los colores intercambiados (flores marrones y pintura rosada) se ven extraños; con los colores correctos, todo encaja con el mensaje.

El estado de ánimo de cada color (según la profesora):

"Elegir una paleta es una decisión consciente: no es tu color favorito, sino qué mensaje quieres transmitir".

Combinar colores con la rueda cromática:

• Análogos (vecinos en la rueda): armoniosos; buenos para la barra de navegación y el cuerpo, o para un logotipo y su fondo. No sirven para destacar.
• Complementarios (opuestos): crean un contraste fuerte que resalta cada color. Ejemplo: el pasto de plástico verde entre la carne roja en el supermercado, que la hace ver más fresca. Nunca para texto sobre fondo: "se siente cómo los ojos se ponen borrosos". Úsalos en logotipos o íconos.
• Otras: triádica (triángulo equilátero) y cuadrada.

Herramientas: Adobe Color (arrastrar combinaciones por la rueda y copiar los códigos hexadecimales) y colorhunt.co (paletas reunidas por diseñadores, en secciones populares y de moda). Ejemplo de paleta coherente: el sitio de los yogures Liebe.

📖 Matices importantes (adaptación)#

• El significado de los colores depende de la cultura. En gran parte de Asia oriental el rojo significa buena suerte y el blanco se asocia con el luto; en Colombia, el amarillo, el azul y el rojo juntos evocan la bandera. Diseña para tu público.
• El color no debe ser la única señal. Cerca de 1 de cada 12 hombres tiene algún tipo de daltonismo, y muchas personas no distinguen bien el rojo del verde. Un formulario que marca los errores solo en rojo es invisible para ellas: agrega un ícono o un texto.
• Contraste suficiente. Un texto bonito que no se lee no sirve. En la sección 5 lo medirás con Python.

Retos adicionales (creados para esta adaptación)#

• 🟢 Reto 1 — Aplicación: en colorhunt.co elige una paleta para una tienda de productos del campo y otra para un club de e-sports. Justifica cada una en dos líneas.
• 🟡 Reto 2 — Ampliación: en Adobe Color crea una paleta análoga y una complementaria a partir del color principal de tu colegio. ¿Cuál usarías para el menú y cuál para un botón de "Inscríbete"?
• 🟠 Reto 3 — Desafío: busca tres sitios de bancos colombianos y tres de marcas de comida. ¿Se cumple lo que dice el curso sobre el azul y el verde? Haz una tabla.
• 🔴 Reto 4 — Pensamiento computacional: con un simulador de daltonismo (las herramientas de desarrollo de Chrome lo traen en Rendering → Emulate vision deficiencies), revisa una de tus páginas. ¿Qué información se pierde? Propón una corrección que no dependa del color.

🎯 Objetivo de aprendizaje#

Distinguir las familias tipográficas, elegir fuentes legibles y combinarlas creando contraste.

📝 Contenido original del curso#

"¿Por qué aprender tipografía, si basta con escoger Times New Roman?". Porque la fuente también comunica: una carta de San Valentín con la fuente equivocada puede parecer una amenaza.

Las dos grandes familias:

Las serif se subdividen en Old Style, Transitional, Modern y Slab-Serif. Cuanto mayor la diferencia entre las partes gruesas y delgadas de la letra, más moderna se ve (por ejemplo, Didot, moderna y con autoridad; una Old Style para una bodega de vinos que quiere parecer antigua).

Legibilidad. Las sans-serif humanistas (Gill Sans, Tahoma, Verdana) son muy legibles. La profesora cita un estudio del MIT en el que conductores con el tablero en una fuente humanista, en lugar de una Grotesque, tardaban entre 30 % y 40 % menos en leer la información. Rasgos legibles: formas abiertas, buen espacio entre letras, formas que no se confunden (una "g" y un "9" distintos) y proporciones variadas (una "O" ancha y un "0" más estrecho).

Reglas para combinar:

• Máximo dos fuentes por diseño.
• Que tengan un ambiente y una época parecidos.
• Contrastar la presencia de remates (título serif y cuerpo sans-serif, o al revés) y el peso (título en negrita o black, cuerpo normal o light).
• La profesora muestra seis fuentes que conviene olvidar en contextos profesionales, como Comic Sans ("a menos que tengas un puesto de limonada").

📖 Del curso al CSS (adaptación)#

@import url("https://fonts.googleapis.com/css2?family=Merriweather:wght@700&family=Source+Sans+3:wght@400&display=swap");

h1, h2 { font-family: "Merriweather", Georgia, serif; font-weight: 700; }
body   { font-family: "Source Sans 3", Verdana, sans-serif; font-weight: 400; line-height: 1.6; }

• La lista de respaldo (Georgia, serif) se usa si la primera fuente no carga.
• Google Fonts permite usar fuentes gratuitas; revisa que tengan tildes y "ñ" (en su página puedes escribir un texto de prueba en español).
• line-height: 1.6 da aire entre líneas y mejora la lectura.

Retos adicionales (creados para esta adaptación)#

• 🟢 Reto 1: clasifica 10 fuentes de Google Fonts como serif o sans-serif y anota qué transmiten.
• 🟡 Reto 2: crea tres combinaciones título + cuerpo (una para un bufete de abogados, una para una tienda de juguetes y una para el periódico escolar) y pruébalas en una página HTML con un texto en español con tildes y "ñ".
• 🟠 Reto 3: compara la misma página con una fuente humanista y con una Grotesque (por ejemplo, Verdana contra Arial) leyendo en voz alta durante un minuto. ¿Notas diferencia? ¿Qué tan confiable es tu experimento?
• 🔴 Reto 4: cambia la fuente del blog del Día 59 siguiendo las reglas del curso y explica cada decisión.

🎯 Objetivo de aprendizaje#

Aplicar jerarquía, maquetación, alineación y espacio en blanco para guiar la atención del usuario según su público.

📝 Contenido original del curso#

Nuestro cerebro se va primero a lo más grande, más oscuro y más cuadrado. Con eso se define la jerarquía.

1. Jerarquía. Una invitación de cumpleaños con todo el texto igual obliga a leerlo todo; con jerarquía, se ve primero de quién es la fiesta, dónde y cuándo. Se logra con:
   • Color: los colores que contrastan con el fondo indican lo importante. ASOS usa gris y blanco, y un color de acento (verde) para el botón "Añadir a la bolsa".
   • Tamaño: Coinbase pone primero su mensaje y enseguida un gran campo de correo con el botón "Empezar", porque su prioridad es captar correos.
2. Maquetación (layout). Un bloque de texto uniforme aburre; intercalar imágenes y variar tamaños crea interés. Wikipedia es el ejemplo de lo que no hay que hacer: líneas de texto tan largas que es difícil no perderse. La longitud de línea óptima es de 40 a 60 caracteres. Grammarly divide el contenido en partes pequeñas.
3. Alineación. Un título centrado sobre un cuerpo alineado a la izquierda se ve incómodo; con el mismo punto de inicio, se ve "diseñado". Una de las formas más fáciles de profesionalizar un diseño es reducir el número de líneas de alineación.
4. Espacio en blanco. Las tiendas de lujo dejan mucho espacio alrededor de cada bolso; las de descuento amontonan productos. Un anuncio de audífonos lleno de "¡Nuevo!", "Solo 20 dólares" parece barato; con espacio en blanco "parece hecho por Apple".
5. Público. Un afiche para un concierto infantil en blanco y negro parece "un aviso funerario". Diseña para quien lo va a usar, aunque eso signifique más color o más desorden.

📖 Del curso al CSS y a Bootstrap (adaptación)#

🛠️ Nota técnica: el ejemplo de Wikipedia corresponde a su diseño anterior. En su rediseño de 2022 (Vector 2022), Wikipedia limitó el ancho del texto por defecto, precisamente para mejorar la longitud de línea. Buen ejemplo de cómo los sitios aprenden de estas reglas.

Retos adicionales (creados para esta adaptación)#

• 🟢 Reto 1: toma una circular del colegio escrita como un solo párrafo y rediséñala con jerarquía (qué, cuándo, dónde, qué llevar).
• 🟡 Reto 2: en una de tus páginas, dibuja (sobre una captura) las líneas de alineación. Reduce su número y compara.
• 🟠 Reto 3: mide la longitud de línea de tu blog: copia una línea y cuenta sus caracteres con len() en Python. Ajústala con max-width.
• 🔴 Reto 4: diseña en papel dos versiones de la portada de la Plataforma del Club: una para estudiantes de sexto y otra para padres de familia. ¿Qué cambia y por qué?

🎯 Objetivo de aprendizaje#

Distinguir UI de UX, aplicar principios de experiencia de usuario y reconocer los patrones oscuros.

📝 Contenido original del curso#

La historia del campus. Una universidad renovó sus edificios y el arquitecto dejó todo en césped, sin caminos. "Vuelvo en un año". Durante ese año, la gente abrió senderos con sus pasos; entonces el arquitecto pavimentó esos caminos. Esa es la diferencia: el diseño impone una estética; la experiencia de usuario observa lo que la gente necesita. Una buena UX es invisible: todo se siente fácil.

Cinco principios:

1. Sencillez. El portal chino de noticias Sina es tan denso que "da dolor de cabeza"; Monocle, también de noticias, reparte el contenido con imágenes, videos y texto, sin abrumar.
2. Coherencia. En el sitio de Xfinity, la barra de navegación cambia de diseño y de funcionamiento entre secciones: el usuario tiene que volver a aprender a usarla (y muchos de sus clientes son mayores).
3. Patrones de lectura. El patrón F (arriba a la izquierda, hacia la derecha y luego bajando por el margen izquierdo), como en BigCommerce, y el patrón Z (en zigzag), útil en páginas con menos texto, como Facebook.
4. Diseño para todas las plataformas. Un sitio de escritorio metido en un celular es ilegible; un diseño para celular en una pantalla ancha desperdicia espacio (el rediseño de Facebook con todo apretado en el centro). Tampoco llenar el celular de banners y avisos de cookies, ni ampliar tanto el contenido que haya que desplazarse sin fin. Prueba, prueba, prueba: con probadores profesionales o, si no hay presupuesto, con tu familia (y unas galletas).
5. No usar patrones oscuros. Diseños que usan la psicología para que el usuario haga algo que beneficia a la empresa y no es lo que él quiere:
   • El sándwich de un supermercado que parece largo en el empaque, pero es casi todo aire.
   • Amazon resalta en naranja el envío pago para que no elijas el gratuito.
   • Un anuncio de Snapchat con un "pelo" dibujado: al intentar quitarlo, haces clic en el anuncio.
   • Ryanair esconde "no quiero seguro de viaje" dentro de una lista desplegable, ordenada alfabéticamente debajo de "Dinamarca".
   • Casillas con dobles negaciones: "si desea que no sigamos sin enviarle ofertas, indique que sí no marcando la casilla".

📖 Patrones oscuros en tu vida diaria (adaptación)#

En Colombia, el Estatuto del Consumidor (Ley 1480 de 2011) protege el derecho a recibir información clara y veraz; varias de estas prácticas pueden ser reclamables ante la Superintendencia de Industria y Comercio (SIC). (Referencia general, no asesoría legal.)

Tu responsabilidad como programador: tú escribes el código que marca la casilla por defecto o esconde el botón. Diseñar para ayudar a la gente, y no para engañarla, es una decisión ética.

Retos adicionales (creados para esta adaptación)#

• 🟢 Reto 1: encuentra dos patrones oscuros en aplicaciones que usas y toma capturas (sin datos personales). Explica qué quiere lograr cada uno.
• 🟡 Reto 2: pide a dos personas (una de ellas mayor de 50 años) que hagan una tarea en uno de tus proyectos (por ejemplo, agregar una película) sin ayuda. Anota dónde dudan. Esa es tu lista de mejoras.
• 🟠 Reto 3: reescribe la casilla de la doble negación del curso de forma clara y honesta.
• 🔴 Reto 4 — Pensamiento computacional: diseña el flujo de "cancelar suscripción" de un servicio ficticio en el menor número de pasos posible, y compáralo con uno real. ¿Cuántos clics ahorra el tuyo?

🎯 Objetivo de aprendizaje#

Implementar la fórmula de contraste de las pautas de accesibilidad WCAG y usarla para decidir si una combinación de colores es legible.

📖 Explicación conceptual#

Las pautas WCAG (Web Content Accessibility Guidelines) definen el contraste entre dos colores como una razón que va de 1:1 (el mismo color) a 21:1 (negro sobre blanco). Para texto normal, el mínimo recomendado (nivel AA) es 4.5:1; para texto grande (títulos), 3:1.

La fórmula usa la luminancia relativa de cada color (qué tan "clara" la percibe el ojo; el verde pesa mucho más que el azul):

def luminancia(hex_color):
    """Luminancia relativa de un color '#RRGGBB' según WCAG."""
    hex_color = hex_color.lstrip("#")
    canales = [int(hex_color[i:i + 2], 16) / 255 for i in (0, 2, 4)]
    lineales = [c / 12.92 if c <= 0.04045 else ((c + 0.055) / 1.055) ** 2.4 for c in canales]
    r, g, b = lineales
    return 0.2126 * r + 0.7152 * g + 0.0722 * b


def contraste(color1, color2):
    """Razón de contraste entre dos colores (de 1 a 21)."""
    l1, l2 = sorted([luminancia(color1), luminancia(color2)], reverse=True)
    return (l1 + 0.05) / (l2 + 0.05)

Qué hace cada parte:

• int("FF", 16) convierte un par hexadecimal a número (255); al dividir entre 255 queda entre 0 y 1.
• La comprensión de listas con if ... else "corrige" cada canal: las pantallas no muestran la luz de forma lineal.
• Los pesos 0.2126, 0.7152 y 0.0722 reflejan qué tan sensible es el ojo al rojo, al verde y al azul.
• sorted(..., reverse=True) pone primero el color más claro, así el resultado siempre es ≥ 1.

Resultados verificados:

La fórmula confirma con números dos afirmaciones del curso: el amarillo no sirve para textos largos sobre fondo claro y los colores complementarios no deben usarse para texto sobre fondo.

Retos adicionales (creados para esta adaptación)#

• 🟢 Reto 1 — Aplicación: calcula el contraste del texto y del fondo de tu blog (Día 59) y de Coffee & Wifi (Día 62). ¿Cumplen?
• 🟡 Reto 2 — Ampliación: escribe nivel_wcag(color1, color2, texto_grande=False) que devuelva "AAA", "AA" o "No cumple" (AAA exige 7:1 para texto normal y 4.5:1 para texto grande).
• 🟠 Reto 3 — Desafío: crea una ruta de Flask /contraste con un formulario de WTForms (dos campos de color, <input type="color">) que muestre la razón, el nivel y una vista previa del texto con esos colores.
• 🔴 Reto 4 — Pensamiento computacional: dado un color de fondo, escribe una función que busque el gris más claro (de #000000 a #FFFFFF) que cumpla 4.5:1. Comprueba que, para fondo blanco, el resultado es #767676.

📝 Ejercicio original del curso#

Inspiración: Daily UI propone un reto de diseño cada día durante 100 días (registro gratuito); Collect UI reúne las propuestas de diseñadores para cada reto (pantallas de registro, sitios de vuelos, reservas de hotel).

El recorrido de la profesora en Canva (gratuito, en línea), con un diseño personalizado de 1400 × 800 px por "pantalla":

1. Portada: una plantilla gratuita solo por la textura; foto de fondo de una playa; degradados y formas (un círculo, un cuadrado con borde blanco); el nombre "A Hotel" en una fuente serif (Cardo), blanca, grande (120–144), en mayúsculas y con más espacio entre letras, "para que parezca establecido y caro". Subtítulo "Piérdete para encontrarte" en una sans-serif (Glacial Indifference), alineado a la izquierda con el título gracias a las guías de Canva.
2. Características: tres fotos del mismo tamaño (habitación, desayuno, piscina), alineadas con la cuadrícula; un marco circular de color detrás de cada una; subtítulos ("Comida hermosa", "Habitaciones hermosas", "Piscina hermosa") en la misma fuente sans-serif (tamaño 18), alineados a la izquierda con cada foto; texto de relleno (Lorem Ipsum) corto, en gris oscuro para que no compita.
3. Contacto: una foto de piñas en la parte baja, el título "Stay" con el estilo de la portada, un hexágono (formas geométricas coherentes con el resto) y la dirección, correo y teléfono alineados a la derecha con el título.
4. Publicar: Publicar → Sitio web → Estándar: Canva une las tres pantallas en una página con barra de navegación. No es responsiva ni tiene funcionalidad, pero sirve para mostrar el diseño y recibir opiniones.

El reto: diseña otro tipo de hotel, por ejemplo uno muy tradicional "de la época de Enrique VIII", que quiere mostrarse decadente y glamuroso, aplicando los cuatro pilares. Comparte el enlace de Canva.

Problema y contexto#

Antes de programar un sitio conviene diseñarlo: cambiar un color en un boceto toma segundos; en el código, mucho más.

🔍 Antes de diseñar#

• ¿Quién es el público de tu hotel? ¿Qué debe sentir en los primeros tres segundos?
• ¿Qué paleta (sección 1) y qué par de fuentes (sección 2) transmiten eso?
• ¿Qué es lo primero que debe ver (jerarquía)? ¿Qué acción quieres que haga (reservar)?

Requisitos#

1. Tres pantallas de 1400 × 800 px: portada, características y contacto.
2. Paleta de 3 a 4 colores con sus códigos hexadecimales documentados.
3. Dos fuentes, con contraste serif/sans-serif o de peso.
4. Alineación con pocas líneas; espacio en blanco generoso.
5. Contraste de texto y fondo ≥ 4.5:1 en los textos pequeños, medido con la función de la sección 5.

Planificación#

1. Comprender el público. 2. Referencias: busca 3 sitios de hoteles del estilo elegido en Collect UI o en la web. 3. Paleta y fuentes. 4. Boceto en papel de las tres pantallas. 5. Diseño en Canva. 6. Medir el contraste. 7. Mostrar a 3 personas y anotar sus comentarios. 8. Corregir. 9. Publicar. 10. Reflexionar.

Construcción paso a paso#

• Versión 1: boceto en papel.
• Versión 2: portada en Canva.
• Versión 3: características y contacto.
• Versión 4: revisión de alineación, espacio y contraste.
• Versión final: ajustes según la opinión de otras personas y publicación.

Pruebas (lista de verificación del diseño)#

🏫 Para el aula#

Canva exige una edad mínima y una cuenta; muchas instituciones tienen Canva para Educación, con cuentas administradas por el colegio. Si no es posible, el mismo ejercicio se hace en papel o en una herramienta libre como Penpot.

⭐ Extensión del proyecto#

• Convierte la portada de tu diseño en HTML con Bootstrap y sírvela con Flask (Días 56 a 58).
• Diseña la versión para celular (por ejemplo, 390 × 844 px) de las tres pantallas.

Situación#

Una tienda, panadería o papelería del barrio tiene una página en redes o un volante con información desordenada. Como el ejemplo de Penny Juice, un buen diseño podría ayudarle a vender más.

Requisitos#

1. Diagnóstico (con permiso del dueño): captura o foto del diseño actual y una tabla con al menos 5 problemas, cada uno relacionado con uno de los cuatro pilares.
2. Rediseño en Canva o en papel: portada, productos y contacto.
3. Mediciones: contraste de los textos principales con la función de Python, antes y después.
4. Prueba con usuarios: 3 personas responden "¿qué vende esta tienda?" y "¿cómo la contacto?" mirando cada versión 5 segundos. Registra los resultados.
5. Una presentación corta para el dueño con el antes, el después y las razones.

Decisiones que debes tomar (y justificar)#

• ¿Qué no cambiarías (por ejemplo, el nombre o el logotipo que el barrio ya reconoce)?
• ¿Tu diseño sirve para el celular, que es donde la mayoría de clientes lo verá?

Casos de prueba#

• Las 3 personas identifican el producto principal con el diseño nuevo.
• Todos los textos pequeños del rediseño tienen contraste ≥ 4.5:1.

Conceptuales#

1. ¿Cuáles son los cuatro pilares del diseño web?
2. ¿Cuándo usarías una paleta análoga y cuándo una complementaria?
3. ¿Qué diferencia hay entre una fuente serif y una sans-serif? ¿Qué transmite cada una?
4. Explica con la historia del campus la diferencia entre UI y UX.
5. ¿Qué es un patrón oscuro? Da un ejemplo que no esté en el curso.

Análisis de código#

print(round(contraste("#FFFFFF", "#000000"), 1), round(contraste("#000000", "#FFFFFF"), 1))

¿Imprime lo mismo en ambos casos? ¿Qué línea de la función lo garantiza?

Predicción#

Sin calcular, ordena de mayor a menor contraste sobre fondo blanco: amarillo #FFFF00, azul oscuro #00008B, gris #999999. Luego compruébalo con Python.

Depuración#

def luminancia(hex_color):
    canales = [int(hex_color[i:i + 2], 16) / 255 for i in (0, 2, 4)]
    ...
print(luminancia("#FF0000"))

¿Qué error aparece y por qué? (Pista: ¿qué hay en la posición 0 del texto?)

Modificación#

Cambia la función contraste para que acepte colores cortos de 3 dígitos (#FFF, #000).

Creación#

Escribe una función que reciba una lista de colores (una paleta) y devuelva todas las parejas que cumplen 4.5:1, útil para elegir texto y fondo de tu guía de estilo.