100 Días de Código en Python — Día 44: Fundamentos web — CSS intermedio

🎯 Objetivo de aprendizaje#

Aplicar colores de texto y de fondo usando nombres de color y códigos hexadecimales.

📖 Explicación conceptual#

Colores con nombre (named colors): CSS reconoce muchos nombres, algunos "poéticos": cornflowerblue, cadetblue, dimgrey, olivedrab… La lista completa está en MDN (busca "MDN named color"). Los "niveles" de CSS que aparecen en esa tabla solo indican cuándo se agregó cada color.

Paletas profesionales: cuando quieras una combinación armoniosa, la profesora recomienda Color Hunt (colorhunt.co), con paletas hechas por diseñadores: un color para el fondo, otro para el h1, otro para los subtítulos, colores de acento…

Códigos hexadecimales: los colores de las paletas no tienen nombre, sino códigos como #5D3891. Cada color de pantalla se forma mezclando rojo, verde y azul (RGB), cada uno con un valor de 0 a 255. El código hexadecimal escribe esos tres números en base 16, con dos cifras cada uno:

#5D3891  →  5D = 93 (rojo) · 38 = 56 (verde) · 91 = 145 (azul)

🔎 Ejemplo explicado: comprobar la conversión con Python#

# De hexadecimal a decimal
print(int("5D", 16), int("38", 16), int("91", 16))   # 93 56 145

# De RGB a código hexadecimal
r, g, b = 93, 56, 145
print(f"#{r:02X}{g:02X}{b:02X}")                     # #5D3891

• int(texto, 16) interpreta un texto como número en base 16.
• :02X formatea un número en hexadecimal (X, en mayúsculas) con dos cifras, rellenando con cero (02).
• Resultado (verificado): 93 56 145 y #5D3891, el mismo púrpura del ejemplo del curso.

body {
  background-color: antiquewhite;   /* color con nombre */
}
h2 {
  color: #5d3891;                   /* código hexadecimal: da igual si va en mayúsculas o minúsculas */
}

⚠️ Errores frecuentes#

📝 Ejercicio original del curso: colorear un mundo en blanco y negro#

• Enunciado: el index.html solo tiene un h1 y un h2 en blanco y negro. Hay cinco pasos (TODO) que se deben seguir en orden.
• Resultado esperado (según la solución del video):
  • Fondo del body: antiquewhite.
  • Texto del h1: whitesmoke, y también un color de fondo para el h1 (la profesora lo describe como la parte que exige "pensamiento lateral": background-color funciona en cualquier elemento y colorea solo el área que ocupa).
  • En el h1 se usan colores con nombre; en el h2, códigos hexadecimales, para practicar ambas formas.

🔍 Antes de programar#

• ¿Qué propiedad cambia el texto y cuál el fondo?
• ¿El fondo del h1 ocupa toda la pantalla o solo su franja? Predícelo antes de probar.

Retos adicionales (creados para esta adaptación)#

• 🟢 Reto 1: toma los colores de la bandera de tu departamento o municipio, búscalos en formato hexadecimal y úsalos en una página con tres franjas (h1, h2 y p con background-color).
• 🟡 Reto 2: escribe un programa de Python que pida tres valores RGB (validando que estén entre 0 y 255, Día 30) e imprima el código hexadecimal. Luego haz el programa inverso.
• 🟠 Reto 3 — Accesibilidad: en DevTools, al hacer clic sobre el cuadrito de color de una propiedad color, Chrome muestra la relación de contraste con el fondo. Las pautas de accesibilidad (WCAG) piden al menos 4.5:1 para texto normal. Evalúa la combinación del ejercicio original y, si no cumple, propón otra.
• 🔴 Reto 4 — Pensamiento computacional: elige una paleta de Color Hunt para el sitio de tu grupo (proyecto integrador) y escribe una tabla que asigne una función a cada color (fondo, títulos, texto, acento). Justifica por qué el color de acento no se usa para párrafos largos.

🎯 Objetivo de aprendizaje#

Controlar el tamaño, el grosor, la familia tipográfica y la alineación del texto, y elegir unidades adecuadas.

🧠 ¿Qué aprenderemos?#

font-size (px, pt, em, rem y tamaños con nombre), font-weight, font-family con respaldo genérico, Google Fonts y text-align.

📖 Explicación conceptual#

font-size: el tamaño#

(El curso explica que se usan pulgadas porque muchas medidas del diseño web vienen de la tradición de la imprenta.)

em contra rem, con el ejemplo del curso:

<body>
  <h1>Título</h1>
  <footer>
    <h2>Pie de página</h2>
  </footer>
</body>

• footer { font-size: 20px; } y h2 { font-size: 2em; } → el h2 mide 2 × 20 = 40 px. Si el footer pasa a 80 px, el h2 pasa a 160 px.
• Con h2 { font-size: 2rem; } el tamaño del footer no importa: solo depende del html. Si el html tiene el tamaño por defecto (16 px), el h2 mide 32 px (verificado).

Recomendación del curso: usa rem. Con em, cuando hay elementos dentro de elementos dentro de elementos, es muy difícil saber "de qué padre" depende el tamaño. rem es más predecible.

font-weight: el grosor#

• Palabras clave: normal (equivale a 400) y bold (700).
• Números: de 100 (muy delgada) a 900 (muy gruesa). Solo se ven diferencias si la fuente tiene esos grosores disponibles.
• Relativos al padre: lighter y bolder.

🛠️ Nota técnica: el video dice que lighter y bolder "restan o suman 100". No es así: siguen una tabla de equivalencias. Verificado en Chrome 153: si el padre tiene 400, bolder da 700 y lighter da 100; si el padre tiene 700, lighter da 400.

font-family: el tipo de letra#

h1 { font-family: Helvetica, sans-serif; }
p  { font-family: "Times New Roman", serif; }

• Se escribe una lista: primero la fuente deseada y al final una familia genérica de respaldo, que se usa si la primera no está instalada (Helvetica viene en Mac, no en muchos Windows).
• Las fuentes con varias palabras van entre comillas.
• Familias genéricas: serif (con "patitas" en los bordes de las letras, como Times New Roman), sans-serif (sin patitas, como Arial), monospace (todas las letras con el mismo ancho, como una máquina de escribir o un editor de código), cursive (tipo manuscrita) y fantasy (decorativa). Su aspecto exacto depende del computador y el navegador.

Fuentes personalizadas con Google Fonts (fonts.google.com):

1. Elige una fuente y los grosores que necesitas (por ejemplo, Regular 400 o Bold 700).
2. Copia el código <link> que te da Google y pégalo en el <head> del HTML (fuera del elemento <style>).
3. Copia la regla CSS (font-family: "Nombre", respaldo;) y aplícala al selector que quieras.

Así, cualquier persona verá esa fuente aunque no la tenga instalada, porque su navegador la descarga de Google.

text-align: la alineación#

Valores: left, right, center, justify y los "lógicos" start y end. En idiomas que se escriben de derecha a izquierda (como el árabe), start es la derecha; en español, la izquierda. Por eso start y end son más flexibles.

⚠️ Errores frecuentes#

🔐 Privacidad (adaptación): al cargar una fuente desde Google, el navegador de cada visitante se conecta a los servidores de Google. Para un sitio escolar sencillo es aceptable, pero existe la alternativa de descargar la fuente y servirla desde tu propio sitio. Es un buen tema para discutir sobre datos personales.

📝 Ejercicios originales del curso#

a) Demostración de tamaños (font-size.html, recursos 6.1 Font Properties). Contiene ejemplos con px, pt, em, rem y tamaños con nombre. La profesora propone cambiar el tamaño de la raíz (de xx-large a 20px, por ejemplo) y observar cómo cambia solo lo que está en rem.

b) Fuente de Google (font-family.html). Elegir una fuente en Google Fonts, pegar el <link> en el <head>, crear un h1 que diga "font-family" y aplicarle la regla CSS copiada.

c) Los TODO del index.html. Escribir el CSS debajo del ya incluido, en el <style> interno (sin cambiar el CSS existente). Según la solución del video:

1. Cambiar el color de un elemento a coral.
2. Hacer que el elemento con cierto id tenga el doble del tamaño de la raíz (2rem).
3. Cambiar el grosor de un elemento a 900.
4. Usar la fuente Caveat (Google Fonts, Regular) en un elemento, con su <link> antes del cierre del <head>, fuera del <style>, y una fuente de respaldo.
5. Alinear un párrafo a la derecha.
6. Cambiar el tamaño de fuente de la raíz (html) a 30px, y observar que el elemento de 2rem crece con ella.

🔍 Antes de programar#

• En el TODO 2, ¿"el doble de la raíz" se escribe con em o con rem? ¿Por qué?
• En el TODO 6, ¿qué selector apunta a la raíz del documento?
• ¿Qué elementos de la página cambiarán de tamaño en el TODO 6 y cuáles no? Predícelo.

Retos adicionales (creados para esta adaptación)#

• 🟢 Reto 1: crea una página con el mismo párrafo cinco veces, cada uno con una familia genérica diferente. ¿Cuál es más cómoda para leer un texto largo? ¿Cuál usarías para mostrar código?
• 🟡 Reto 2 — Predicción: si html { font-size: 10px; }, div { font-size: 2em; } y un p dentro del div tiene font-size: 1.5em, ¿cuánto mide el texto del p? ¿Y si el p tuviera 1.5rem? Calcula y luego verifica en DevTools (pestaña Computed).
• 🟠 Reto 3: elige en Google Fonts una fuente para títulos y otra para textos que combinen bien. Aplícalas a una página de noticias del colegio y justifica tu elección (legibilidad, estilo, grosores disponibles).
• 🔴 Reto 4 — Pensamiento computacional: el colegio quiere que su sitio sea usable por personas con baja visión que aumentan el tamaño de letra en la configuración del navegador. Diseña un experimento para comparar una página con tamaños en px y otra en rem cambiando el tamaño de fuente en la configuración de Chrome (Configuración → Apariencia → Tamaño de fuente). Registra los resultados y saca una conclusión.

🎯 Objetivo de aprendizaje#

Usar Chrome DevTools para descubrir qué estilos se aplican a un elemento, de dónde vienen y cómo probar cambios sin tocar los archivos.

📖 Explicación conceptual#

Abrir DevTools:

• Menú de los tres puntos → Más herramientas → Herramientas para desarrolladores.
• Atajos: Ctrl + Mayús + I o F12 en Windows; Cmd + Opción + I en Mac.
• Clic derecho sobre un elemento → Inspeccionar (además, resalta ese elemento en el HTML).
• El botón de la flecha (arriba a la izquierda del panel) permite elegir un elemento haciendo clic sobre la página.

Pestaña Elementos → sección Estilos (Styles):

• Muestra las reglas que se aplican al elemento seleccionado y de qué archivo vienen (por ejemplo, styles.css). Al hacer clic en el nombre del archivo, se abre su código.
• Muchos estilos vienen del navegador: son los estilos por defecto (user agent stylesheet). Por ejemplo, todo enlace es azul por defecto.
• Las declaraciones tachadas son las que otra regla anuló. En el ejemplo del curso, el azul por defecto del enlace está tachado porque el CSS del sitio lo cambió a blanco.
• Con el botón + se agregan reglas; con la casilla junto a cada declaración se activan o desactivan.

¡Los cambios son temporales! Solo afectan a la copia cargada en tu navegador: no cambian el archivo original ni lo que ven otras personas. Por eso no es ilegal experimentar así (la pregunta que muchos estudiantes le hicieron a la profesora). Úsalo para probar antes de escribir el cambio en tu archivo CSS.

Pestaña Calculado (Computed): muestra el valor final de cada propiedad (por ejemplo, el color en RGB) sin la "locura" de reglas tachadas. Útil cuando no sabes qué regla está ganando.

Resumen de CSS (CSS Overview): desde los tres puntos de DevTools (no los de Chrome) → Más herramientas → CSS Overview → Capture overview. Muestra los colores de fondo, colores de texto y fuentes que usa la página. Útil para descubrir "qué fuente es esa" o "qué verde exacto es ese".

🛠️ Nota técnica: los menús de DevTools cambian entre versiones de Chrome, y el panel CSS Overview se ha presentado como función experimental. Si no lo encuentras en tu versión, usa la pestaña Computed o el selector de color de la pestaña Styles para obtener la misma información.

📝 Ejercicio original del curso: el sitio para inspeccionar#

• Sitio: appbrewery.github.io/css-inspection/ (tiene un h1, un h2 y un párrafo, y un formulario para comprobar las respuestas).
• Preguntas:
  1. ¿Cuál es el color de fondo del body?
  2. ¿Cuál es el tamaño de fuente del h1?
  3. ¿Cuál es el grosor de fuente del h2?
  4. ¿Cuál es la familia de fuentes del párrafo?
• Pista del curso para la pregunta 4: el valor no está aplicado directamente al párrafo: es heredado. Búscalo en la parte inferior de Styles ("Inherited from…") o en Computed.

⚠️ Errores frecuentes#

Retos adicionales (creados para esta adaptación)#

• 🟢 Reto 1: con DevTools, averigua la fuente y el color principal de la página web de tu colegio o de una entidad pública (por ejemplo, el Ministerio de Educación).
• 🟡 Reto 2: cambia en vivo tres estilos de una página hasta que te guste más, toma una captura "antes y después" y escribe las reglas que agregaste.
• 🟠 Reto 3 — Depuración: en tu proyecto del Día 43, agrega a propósito una regla que choque con otra (por ejemplo, dos colores para los h2). Usa DevTools para ver cuál está tachada y explica por qué perdió.
• 🔴 Reto 4: crea un "cuestionario de inspección" como el del curso para tus compañeros: una página con cuatro preguntas cuyas respuestas solo se encuentran con DevTools (incluye al menos una propiedad heredada). Intercámbialo con otro grupo.

🎯 Objetivo de aprendizaje#

Explicar y aplicar el modelo de caja (width, height, padding, border, margin), calcular el tamaño total de un elemento y agrupar contenido con div.

📖 Explicación conceptual#

Aunque no lo veamos, cada elemento HTML es una caja. El curso lo muestra con un sitio llamado "I Love Bacon".

┌──────────────── margin (fuera del borde, transparente) ─────────────┐
│  ┌───────────── border (el borde) ───────────────────────────────┐  │
│  │  ┌────────── padding (entre el contenido y el borde) ──────┐  │  │
│  │  │                                                         │  │  │
│  │  │            contenido: width × height                    │  │  │
│  │  │                                                         │  │  │
│  │  └─────────────────────────────────────────────────────────┘  │  │
│  └───────────────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────────────┘

Estilos de borde: solid (continuo), dashed (discontinuo), dotted (punteado), entre otros.

Idea clave del curso: al agregar border o padding, el width y el height no cambian: el borde y el relleno se agregan hacia fuera. Por eso la caja total crece.

Tamaño total horizontal de una caja:

ancho total = width + padding izquierdo + padding derecho + borde izquierdo + borde derecho

Ejemplo del ejercicio: width: 200px; padding: 20px; border: 10px solid black; → 200 + 20 + 20 + 10 + 10 = 260 px (verificado en Chrome: offsetWidth = 260). Los márgenes se suman aparte, como espacio alrededor.

Uno, dos o cuatro valores (vale para padding, margin y border-width):

El orden importa: para quitar solo el borde superior, la regla específica va después de la general:

div {
  border: 30px solid black;
  border-top: 0px;          /* se evalúa después y anula solo el lado superior */
}

Ver el modelo de caja: en DevTools, pestaña Styles (o Computed), aparece un diagrama con margin, border, padding y contenido, donde puedes editar los valores. El curso propone practicar en appbrewery.github.io/box-model/.

El elemento div#

<div> (content division, división de contenido) es una caja invisible que agrupa elementos para darles estilo o ubicarlos juntos. Por sí solo no se ve ni cambia nada, por eso se aprende hasta ahora, junto con CSS. Ejemplo del curso: una imagen con su párrafo agrupados en un div, y otro div para la segunda imagen.

Depurar cajas invisibles: la profesora recomienda la extensión de Chrome Pesticide, que dibuja el contorno de cada elemento (como "gafas de visión nocturna").

💡 Alternativa sin instalar nada (adaptación): agrega temporalmente * { outline: 1px solid red; } a tu CSS. El outline dibuja un contorno sin cambiar el tamaño de las cajas (a diferencia de border). Útil si en el colegio no se pueden instalar extensiones.

🛠️ Nota técnica — colapso de márgenes: el video dice que dos elementos con margin: 10px quedan separados 20 px. Eso es cierto en horizontal (por ejemplo, elementos uno al lado del otro), pero en vertical los márgenes superior e inferior de bloques consecutivos se colapsan: la separación es el mayor de los dos, 10 px (verificado en Chrome 153). Si una separación vertical "no suma", esta es la razón.

🛠️ Nota técnica — box-sizing: el comportamiento que explica el curso (el borde y el relleno se suman por fuera) corresponde al valor por defecto, box-sizing: content-box. Muchos proyectos modernos usan * { box-sizing: border-box; }, con el que width y height incluyen el relleno y el borde. No lo uses en los ejercicios de hoy (cambiaría los cálculos), pero conviene saber que existe.

⚠️ Errores frecuentes#

📝 Ejercicio original del curso: tres cajas que se tocan en las esquinas#

• Enunciado: seguir los TODO del index.html "como un desarrollador que sigue las instrucciones de un cliente", hasta igualar la imagen objetivo.
• Requisitos (según el video):
  1. Crear tres div, cada uno con su propio id, de 200 px × 200 px.
  2. Poner un párrafo dentro del primer div para ver el relleno.
  3. Primer div: 20 px de padding y un borde negro sólido de 10 px.
  4. Quitar el margen del párrafo (margin: 0), porque sus márgenes por defecto lo empujan fuera del div.
  5. Segundo div: borde de 20 px arriba y abajo y de 10 px a izquierda y derecha (forma de dos valores).
  6. Tercer div: borde de 10 px.
  7. Usar márgenes para que las cajas se toquen esquina con esquina, alineadas al píxel.
• Pista de la profesora: se puede hacer por ensayo y error, pero es mejor calcular. El primer div mide 260 px de ancho total, así que el segundo necesita un margin-left de 260 px.

🔍 Antes de programar#

• ¿Cuánto mide de ancho total el segundo div? (Pista: 200 + borde izquierdo + borde derecho.)
• Entonces, ¿cuánto margin-left necesita el tercero para empezar donde termina el segundo?
• ¿Por qué no hace falta calcular nada en vertical para que las cajas queden una debajo de la otra?

Retos adicionales (creados para esta adaptación)#

• 🟢 Reto 1: crea una "tarjeta de presentación" con un div que tenga borde, relleno y margen, y dentro tu nombre y un párrafo.
• 🟡 Reto 2 — Cálculo: una caja tiene width: 300px; padding: 15px 25px; border: 5px dashed teal; margin: 40px;. Calcula su ancho total con y sin margen. Comprueba en el diagrama de DevTools.
• 🟠 Reto 3 — Depuración: dos párrafos tienen margin: 30px y otro estudiante esperaba 60 px entre ellos, pero mide 30 px. Explica qué pasa y propón cómo obtener 60 px.
• 🔴 Reto 4 — Pensamiento computacional: escribe una función de Python ancho_total(width, padding, border, margin=0) que calcule el ancho ocupado por una caja (suponiendo el mismo valor en todos los lados). Úsala para resolver el ejercicio de las tres cajas y compara con tu CSS. Luego amplíala para aceptar valores distintos a izquierda y derecha.

Problema#

Los pósteres motivacionales de los años 90 tienen un formato inconfundible: fondo negro, una imagen grande con marco blanco, un título en mayúsculas con una fuente elegante y una frase debajo. En Internet también circulan versiones humorísticas. Vas a crear tu propio póster como página web.

Contexto#

El curso muestra un zorro ártico con el título "POTENCIAL" ("Todos tenemos las herramientas para la grandeza dentro de nosotros"). Para el aula, puedes hacer un póster sobre la constancia en el estudio, el cuidado del ambiente, el deporte o la convivencia, con tu propia imagen.

Objetivo#

Aplicar todo el bloque de CSS: colores, fuente personalizada, bordes, alineación, div y márgenes para centrar.

Requisitos funcionales (originales del curso: seis TODO)#

1. Usar la fuente personalizada de Google Libre Baskerville para imitar la tipografía de los pósteres.
2. Poner tu propia imagen en la carpeta de imágenes (dentro de assets). Hay una imagen de ejemplo, pero la profesora recomienda usar una propia.
3. La imagen debe tener un borde blanco de 5 px.
4. El texto debe estar centrado (text-align).
5. Centrar el contenido en la página ajustando márgenes. La profesora recomienda meter el h1, el párrafo y la imagen en un solo div para centrar solo el div. Pistas del curso:
   • dar al div un width de 50 %;
   • calcular el margin-left que falta para centrarlo (ver nota técnica);
   • poner la imagen con width: 100% para que llene el div;
   • agregar un margin-top en píxeles para bajarlo "a ojo".
6. Investigar en la documentación la propiedad text-transform para que el h1 aparezca en mayúsculas sin escribirlo en mayúsculas.

Además: fondo negro y texto blanco.

🛠️ Nota técnica: la transcripción dice que con un div del 50 % "solo queda un 25 % a cada lado" y a continuación propone margin-left: 20%. Si el div ocupa el 50 %, el margen izquierdo para centrarlo es 25 % (el 50 % restante dividido entre dos). Con 20 % queda ligeramente corrido a la izquierda.

Solución de la profesora (resumen del video): los <link> de Google Fonts en el <head>; un div con una clase (un id también funcionaría, pero la clase permite reutilizar el estilo si el sitio crece); el div centrado con ancho y margen en porcentaje y margin-top: 100px; la fuente personalizada; y la imagen con borde y width: 100%.

Restricciones técnicas#

• CSS externo.
• Un solo div contenedor con clase.
• Sin Flexbox ni Grid (se estudian más adelante): el centrado se hace con márgenes.

Planificación#

1. Comprender: observa un póster real. ¿Qué elementos tiene y cómo están dispuestos?
2. Entradas: tu imagen, tu título y tu frase.
3. Proceso: estructura HTML → colores → fuente → borde → centrado → mayúsculas.
4. Salida: una página que parezca un póster.
5. Dividir: cada TODO es una parte.
6. Diseñar: dibuja en papel el div y sus medidas en porcentaje.
7. Implementar → 8. Probar → 9. Corregir → 10. Mejorar.

Construcción paso a paso#

• Versión 1 — Estructura: plantilla HTML, un div class="poster" con h1, img (con alt) y p. Enlaza el CSS y pruébalo con el fondo rojo temporal.
• Versión 2 — Colores: fondo negro y texto blanco. ¿Qué selector usarás para el fondo de toda la página?
• Versión 3 — Tipografía: Libre Baskerville con su respaldo serif, texto centrado y text-transform en el h1.
• Versión 4 — La imagen: borde blanco de 5 px y width: 100%.
• Versión final — Centrado: ancho y márgenes del div. Activa el contorno de depuración (outline) para ver dónde está la caja y quítalo al terminar.

Pruebas#

🧪 Prueba y depuración#

Este CSS tiene cuatro problemas. El póster aparece corrido a la izquierda, la imagen se desborda del div, el borde no se ve y el título no está en mayúsculas:

body {
  background-color: black;
  color: white;
}
.poster {
  width: 50%;
  margin-left: 20%;
  margin-top: 100px;
  text-align: center;
}
img {
  border: 5px white;
}
h1 {
  font-family: "Libre Baskerville", serif;
  text-transform: capitalize;
}

Pista: uno de los problemas no está en una línea equivocada, sino en una línea que falta.

⭐ Extensión del proyecto#

• Crea tres pósteres en la misma página reutilizando la clase .poster.
• Consulta en MDN la forma margin: 0 auto; para centrar horizontalmente un bloque con ancho definido, y compárala con el cálculo en porcentajes. ¿Cuál es más fácil de mantener?
• Consulta max-width para que el póster no se vea gigante en pantallas grandes.

Situación#

Para la Semana de la Ciencia, el área de Ciencias quiere una página que presente a científicas y científicos colombianos (por ejemplo, Nubia Muñoz, Rodolfo Llinás, Ángela Restrepo, Manuel Elkin Patarroyo o Francisco José de Caldas).

Requisitos#

1. Al menos cuatro tarjetas, cada una un div con la clase tarjeta, que contengan: nombre (h2), imagen con alt (con licencia libre y fuente citada), área de trabajo y un aporte importante (lista).
2. Las tarjetas deben tener borde, relleno y margen, y el mismo tamaño.
3. Una fuente de Google para los títulos y una familia genérica para el texto; tamaños en rem.
4. Una paleta de colores con buen contraste (compruébalo en DevTools).
5. Una tarjeta destacada (id) con un borde diferente.
6. Una fuente bibliográfica por persona, enlazada.

Decisiones que debes tomar (y justificar)#

• ¿Cómo distribuyes las tarjetas usando solo márgenes y anchos? (Todavía no se usa Flexbox.)
• ¿Qué ancho total tendrá cada tarjeta? Escribe el cálculo del modelo de caja.
• ¿Cómo compruebas que la información es correcta? No copies datos de una IA sin verificarlos en una fuente confiable (por ejemplo, Minciencias, universidades o enciclopedias).

Casos de prueba#

• Las cuatro tarjetas miden lo mismo (compruébalo en el diagrama de caja de DevTools).
• Al aumentar el tamaño de letra del navegador, el texto crece (gracias a rem).
• Todas las imágenes tienen alt y todos los enlaces funcionan.

Situación problema#

Muchos grupos del colegio (semillero de investigación, club de robótica, grupo de danza, comité ambiental, emisora escolar) no tienen presencia en la web. La información sobre sus actividades, sus logros y cómo unirse se pierde en grupos de chat y carteleras de papel.

Contexto#

Una página web es accesible desde cualquier dispositivo, se puede enlazar desde la página institucional y permanece en el tiempo. Además, en los próximos días del curso aprenderás a leer páginas con Python (Día 45, web scraping) y a servirlas con Python (Flask, desde el Día 54): este sitio podrá convertirse en el punto de partida de esos proyectos.

Pregunta orientadora#

¿Cómo podemos construir un sitio web claro, accesible y atractivo que presente un grupo o proyecto del colegio a la comunidad educativa?

Objetivo#

Construir un sitio web de al menos dos páginas que presente un grupo o proyecto del colegio, usando HTML semántico y una hoja de estilos externa.

Requerimientos#

Contenido y estructura (HTML, Días 41 y 42)

1. Plantilla completa y válida en todas las páginas, con lang="es" y title descriptivo.
2. Jerarquía de encabezados correcta (un h1 por página, sin saltos).
3. Párrafos, al menos una lista ordenada, una desordenada y una anidada.
4. Al menos tres imágenes con alt adecuado (o alt="" si son decorativas), guardadas en imagenes/.
5. Navegación entre las páginas con enlaces relativos, y al menos dos enlaces externos.

Presentación (CSS, Días 43 y 44)

6. Una sola hoja de estilos externa (css/estilos.css) compartida por todas las páginas.
7. Uso justificado de selectores de elemento, clase e id (y, si lo necesitas, de atributo).
8. Paleta de colores (con al menos un color hexadecimal) con contraste suficiente.
9. Una fuente de Google con familia de respaldo; tamaños en rem.
10. Al menos una sección agrupada en un div con borde, relleno y margen, centrada horizontalmente.

Restricciones#

• Sin CSS en línea ni interno.
• Sin plantillas ni frameworks descargados (Bootstrap se estudia en el Día 58).
• Sin Flexbox ni Grid: el reto es resolver la distribución con el modelo de caja.
• Contenido verdadero y verificado; imágenes propias o con licencia libre y su fuente citada.
• No publicar datos personales de estudiantes (nombres completos, teléfonos, fotos de menores) sin autorización.

Etapas de desarrollo#

Etapa 4 (hoy):

1. Define la paleta (Reto 4 de la sección 1) y aplícala.
2. Agrega una fuente de Google para los títulos y usa rem en los tamaños.
3. Agrupa el contenido principal en un div class="contenedor" con ancho definido y centrado horizontal.
4. Da a cada sección una apariencia de "tarjeta" con borde, relleno y margen.
5. Revisa con DevTools: contraste, reglas tachadas, diagrama de caja.

Entregables#

1. Carpeta del proyecto comprimida (index.html, unete.html, css/, imagenes/).
2. Capturas: el sitio con CSS, el sitio sin CSS (comentando el <link>) y el validador W3C sin errores en cada página.
3. Un documento corto (una página) con: la paleta y su justificación, el cálculo del modelo de caja de una de tus tarjetas y tres errores que encontraste y cómo los solucionaste.
4. Una demostración de 3 minutos: navegar el sitio y explicar una regla CSS de cada tipo de selector.

Casos de prueba#

Criterios técnicos de funcionamiento#

Posibles extensiones#

• Una tercera página (galería, noticias o calendario).
• Un formulario de inscripción de solo HTML (investiga <form>, <input> y <label> en MDN; en el curso se trabajan con Flask a partir del Día 60).
• Un programa de Python que genere la página de "Logros" a partir de una lista de diccionarios, escribiendo el archivo HTML (conecta con el manejo de archivos del Día 24).
• Publicar el sitio con GitHub Pages (tema del Día 70, sobre Git y GitHub), con autorización del docente.

Conceptuales#

1. ¿Qué diferencia hay entre color y background-color?
2. ¿Qué significan las seis cifras de un código como #FF8800?
3. ¿Por qué el curso recomienda rem en lugar de em?
4. ¿Para qué sirve la familia genérica al final de font-family?
5. ¿Qué diferencia hay entre padding y margin? ¿Y dónde queda el border?
6. ¿Por qué no se guardan los cambios que haces en DevTools?

Análisis de código#

Calcula el ancho total de esta caja y explica cada sumando:

.aviso {
  width: 250px;
  padding: 10px 30px;
  border: 4px solid #333;
  margin: 20px;
}

Predicción#

html { font-size: 16px; }
section { font-size: 20px; }
section p { font-size: 1.5em; }
section h2 { font-size: 1.5rem; }

¿Cuántos píxeles medirán el p y el h2 que están dentro de section? Comprueba en la pestaña Computed.

Depuración#

h1 {
  font-family: Libre Baskerville;
  font-size: 3;
  color: #12345;
  border: 2px;
}

Encuentra cuatro problemas y corrígelos.

Modificación#

En tu póster motivacional, cambia el centrado en porcentajes por margin: 0 auto; y un max-width en píxeles. Describe en qué se diferencia el comportamiento al cambiar el ancho de la ventana.

Creación#

Diseña una tarjeta de "Estudiante del mes" (datos ficticios): un div centrado con foto de ejemplo (picsum.photos), nombre en una fuente de Google, logros en lista, borde de doble línea (investiga el estilo double), relleno de 1.5rem y colores con buen contraste.