Ayuda ejercicios unidad 14: Técnicas de diseño web

En este ejercicio practicaremos con el diseño adaptable. Para realizar este ejercicio utilizaremos el archivo home_ini.htm que puedes descargarte de la carpeta ejercicios/unidad-14/cursos-aulaclic/home_ini.htm y guardarlo en la carpeta de ejercicios/cursos-aulaclic (o copiar el código que se muestra a continuación). También debes descargarte el archivo de la hoja de estilo home_ini.css ejercicios/unidad-14/cursos-aulaclic/css/home_ini.css y guardarlo en la carpeta de ejercicios/cursos-aulaclic/css (o copiar el código que se muestra a continuación).

Ejercicio 1: Diseño adaptable.

1. La solución a este ejercicio debe ser similar a como se ve en este enlace: home_final.htm.
2. El código HTML de la solución no ha cambiado y la hoja de estilo es esta home_final.css:
   

    body {
       background-color: #FFFAF4;
       } 
    a { 
       text-decoration: none; 
       }
   .cont_cabecera { 
       display: flex; 
       flex-wrap: wrap; 
       justify-content: space-around; 
       border-left: 2px solid #DCBEA8; 
       border-right: 2px solid #DCBEA8; 
       border-top: 2px solid #DCBEA8; 
       border-bottom: 2px solid #DCBEA8; 
       margin-left: 1em; 
       margin-right: 1em; 
       margin-bottom: 9px; 
       margin-top: 4px; 
       background-color: #f9f5f0; 
       padding-top: 0.5em;    
       } 
    .curso_cabecera_elem_1 { 
       text-align: center; 
       padding-left: 1em; 
       margin-top: 0.5em; 
       margin-bottom: 0.5em; 
       flex-grow: 0; 
       } 
    .curso_cabecera_elem_2 { 
       text-align: center; 
       padding-left: 1em; 
       margin-top: 0.5em; 
       margin-bottom: 0.5em; 
       flex-grow: 1; 
       }
   .cont_curso { 
       display: flex; 
       flex-wrap: wrap; 
       justify-content: space-between; 
       border-radius: 0px 0px 14px 14px ; 
       margin-left: 1em; 
       margin-right: 1em; 
       background-color: #f9f5f0; 
       padding-top: 0.5em; 
       border-left: 2px solid #DCBEA8; 
       border-right: 2px solid #DCBEA8; 
       border-bottom: 2px solid #DCBEA8; 
      } 
    .curso_elem { 
       width: 13em; 
       padding-left: 1em; 
       margin-top: 0.5em; 
       margin-bottom: 0.5em; 
       } 
    .curso_elem a { 
       font-family: Arial, Helvetica, sans-serif; 
       color: #800000; 
       text-decoration: none; 
       font-size: 0.9em; 
       font-weight: bold; 
       } 
    .curso_elem_disco { 
       font-family: Arial, Helvetica, sans-serif; 
       color: black; 
       font-size: 1em; 
       font-weight: bold;     
       } 
    .cont_curso_tit { 
       border-style: solid; 
       border-width: 2px; 
       border-color: #DCBEA8; 
       border-radius: 14px 14px 0px 0px; 
       margin-left: 1em; 
       margin-right: 1em; 
       margin-bottom: 0px; 
       background: linear-gradient(#FFFFFF, #F6F1EA); 
       } 
    .cont_curso_tit  p { 
       font-family: Arial, Helvetica, sans-serif; 
       color: #996600; 
       font-size: 1em; 
       font-weight: bold; 
       text-align: center;    
       } 
    .cont_curso_medio { 
       display: flex; 
       flex-wrap: wrap; 
       justify-content: space-around; 
       border-left: 2px solid #DCBEA8; 
       border-right: 2px solid #DCBEA8;  
       margin-left: 1em;
       margin-right: 1em;
       margin-bottom: -4px;
       margin-top: 1px;
       background-color: #f9f5f0;
       padding-top: 0.5em;
       }
    .curso_medio_elem {
       text-align: center;
       padding-left: 1em;
       margin-top: 0.5em;
       margin-bottom: 0.5em;
       }
    .rojo_grande {
       font-size: 1.2em;
       color: #C60000;
       font-weight: bold;
       font-family: Arial, Helvetica, sans-serif;
       }
    .rojo_mediano {
       font-size: 1.1em;
       color: #C60000;
       font-weight: bold;
       font-family: Arial, Helvetica, sans-serif;
       }
    .sin-sub-azul {
       font-family: Arial, Helvetica, sans-serif;
       font-size: 0.8em;
       color: #000080;
       font-weight: normal;
       }
    .sin-sub-verde a {
       font-family: Arial, Helvetica, sans-serif;
       font-size: 0.8em;
       color: #045111;
       font-weight: normal;
       }
    /* ancho mayor o igual de 1024px */
    @media only screen and (min-width: 1024px) {
   	body {
          font-size: 1.2em;
       }
    }
    /* ancho mayor o igual de 641px y menor o igual de 1023px */
    @media only screen and (min-width:641px) and (max-width: 1023px) {
       body {
          font-size: 1.0em;
       }
    }
    /* ancho menor o igual de 640px */
    @media only screen and (max-width: 640px) {
       body {
          font-size: 1.3em;
       }
       .curso_cabecera_elem_3 {
         display: none
       }
    }
     

   
   
3. Las diferencias de este código, home_final.css, respecto al que partíamos, home_ini.css, son las siguientes:
4. Hemos añadido el siguiente código que controla el tamaño de la fuente según el ancho de la ventana. Puesto que todos los tamaños de fuentes están definidos de forma relativa en unidades em, basta cambiar la referencia que toman estás unidades para que cambien todas en la misma proporción. Por lo tanto, cambiando el tamaño de fuente en la regla body, estaremos cambiando todos los tamaños definidos de forma relativa respecto a ella. Así pues, para cada ancho de pantalla hemos definido un tamaño distinto.
   

   /* ancho mayor o igual de 1024px */
    @media only screen and (min-width: 1024px) {
   	 body {
   	     font-size: 1.2em;
   	  }
   }
    /* ancho mayor o igual de 641px y menor o igual de 1023px */
   @media only screen and (min-width:641px) and (max-width: 1023px) {
   	  body {
   	     font-size: 1.0em;
   	  }
   }
   /* ancho menor o igual de 640px */
    @media only screen and (max-width: 640px) {
   	  body {
   	     font-size: 1.3em;
   	  }
   	  .curso_cabecera_elem_3 {
   	     display: none
   	  }
    }
   
       

5. Acabamos de decir todos los tamaños de fuentes están definidos de forma relativa en unidades em, sin embargo hay una excepción que hemos puesto para ver el efecto de no usar unidades relativas em, en el estilo .rojo_grande teníamos un tamaño definido como font-size: 18px; , si no lo cambiamos, el texto con este estilo no cambiará de tamaño; por lo tanto, lo hemos cambiado por font-size: 1.2em; .
6. Para cumplir con el otro requerimiento del ejercicio hemos cambiado a display: none en el estilo .curso_cabecera_elem_3, cuando el ancho es menor o igual de 640 px., así no se verá la zona "Espacio para la publicidad" :
   

Como decíamos al principio, esta solución la puedes ver aquí: home_final.htm, también puedes probar el código anterior seleccionándolo y pegándolo como se explica en esta página: Probar código desde el navegador.