Guía 04

Guía 04

DAWM / Proyecto01

Actividades previas

Diseño

Actividades en clases

  1. Clona localmente tu repositorio curriculum.
  2. Sigue las instrucciones de Bard, y:
    • Cree la carpeta ‘stylesheets’, y dentro la hoja de estilo externa CSS ‘style.css’.
    • Agregue la referencia con la ruta a la hoja de estilo externa en el archivo index.html.

Servidor HTTP

  1. Levante un servidor HTTP con Python en la ruta de la aplicación.
  2. Acceda desde el navegador con el URL del servidor HTTP en Python, y
  3. En adelante, compruebe cada uno de los cambios en la hoja de estilo CSS al actualizar el navegador.

Selectores, estilo en cascada y familia tipográfica

Compruebe la sugerencia de Bard para las siguientes actividades:

  1. Use un selector universal para asignar la familia tipográfica Arial, sans-serif para todo el documento.
  2. Utilice un selector por clase para fijar la familia tipográfica Times New Roman, serif para todos los títulos de las secciones (<h2>).
  3. Emplee un selector por elemento para establecer la familia tipográfica Georgia, serif para el título principal (<h1>).
  4. (STOP 1) Compruebe el resultado en el navegador.

Familias tipográficas de Google Fonts

Compruebe la sugerencia de Bard para las siguientes actividades:

  1. En Google Fonts, genere la referencia a las familias tipográficas escogidas previamente de Fontjoy.
  2. Al inicio de la hoja de estilo, agregue la referencia a las familias tipográficas de Google Fonts.
  3. Asigne a su gusto las familias tipográficas a las reglas CSS.
  4. (STOP 2) Compruebe el resultado en el navegador.

Color de texto y color de fondo

Compruebe la sugerencia de Bard para las siguientes actividades:

  1. Tome como referencia la combinación de colores previamente seleccionada a partir de Happy Hues, Huemint o ColorMagic.
  2. Utilice un selector por identificador para fijar el color de fondo para cada sección.
  3. Utilice un selector anidado para asignar el color del texto para el contenido de cada sección.
  4. (STOP 3) Compruebe el resultado en el navegador.

Modelo de caja

Compruebe la sugerencia de Bard para las siguientes actividades:

  1. Utilice alguno de los selectores para acceder a una sección (<section>) de su página web.

  2. Aplique a su gusto las reglas CSS (las propiedades CSS y los valores CSS) para el modelo de caja: margin, border y padding, por ejemplo:

    <selectorCSS> {
  margin: 2px 1px 1.5px;
  margin-top: 0.8rem;
  border: 0.2pt dashed #827d7d;
  padding: 2% 1.2%;   
}

  3. Agregue la propiedad box-shadow con los siguientes valores:

    ... {
  ...
  padding: ...
  box-shadow: 
   rgba(0, 0, 0, 0.25) 0px 54px 55px, 
   rgba(0, 0, 0, 0.12) 0px -12px 30px, 
   rgba(0, 0, 0, 0.12) 0px 4px 6px,
   rgba(0, 0, 0, 0.17) 0px 12px 13px, 
   rgba(0, 0, 0, 0.09) 0px -3px 5px; 
}
  4. (STOP 4) Compruebe el resultado en el navegador.
  5. Versiona local y remotamente el repositorio curriculum.

Documentación

Fundamental

Términos

servidor HTTP, ruta de la aplicación, CSS, reglas CSS, selectores CSS, propiedades CSS, valores CSS, modelo de caja

Referencias