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. Partimos de la página web que puedes ver en la siguiente imagen y también en este enlace: home_ini.htm, el ejercicio consiste en hacer que el tamaño de letra (font-size) de todos los textos de la página cambie en función del ancho de la ventana del navegador de la siguiente forma:
  2. Para pantallas con ancho mayor o igual de 1024 px. el tamaño de letra a de ser proporcional a 1.2em, para pantallas con ancho mayor o igual de 641 px. y menor o igual de 1023 px. el tamaño de letra a de ser proporcional a 1.0em, y para pantallas con ancho menor o igual a 640 px. el tamaño de letra a de ser proporcional a 1.3em. Hay que tener en cuenta que cambiando el tamaño de letra del nivel superior estaremos cambiando el tamaño de los niveles inferiores.
  3. También hay que hacer que la zona "Espacio para la publicidad" deje de mostrarse para pantallas con ancho menor o igual a 640 px.
  4. El resultado final debe ser como se ve en este enlace este enlace: home_final.htm. Observa cómo cambian los tamaños de letra a variar el ancho de la venta.
  5. Para resolver el ejercicio no hace falta modificar el código HTML, sólo la hoja de estilo. Utilizar Media Queries para definir los distintos anchos de pantalla.
    Captura de la pantalla de la página home_ini.htm:

  6. Desde el editor Brackets abre el archivo home_ini.html.
  7. Debes ver el siguiente código: 

    <!doctype html>
<html>
   <head>
    <title>aulaClic.</title>
    <link href="css/home_final.css" rel="stylesheet" type="text/css" title="aulaClic" />
        <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
<body>
  <!-- cabecera --------------- --> 
      <div class="cont_cabecera">
  <div class="curso_cabecera_elem_1">
  <img src="graficos/logoAulaclic.jpg" alt="aulaclic" >
  </div>
  <div class="curso_cabecera_elem_2">
  <span class="sin-sub-azul">La primera web en espa&ntilde;ol sobre</span><br>
  <span class="rojo_grande"> Cursos de inform&aacute;tica gratuitos online</span><br>
  <span class="sin-sub-verde"><a href="https://www.aulaclic.es/portada/primera_visita.htm" >&iquest;Primera visita?</a></span>
  </div> 
  <div class="curso_cabecera_elem_3">
  <span class="sin-sub-azul"> Espacio para publicidad </span><br>
  </div>
  </div>
  <!-- título cursos --------------- --> 
  <div class="cont_curso_tit">
  <p>Cursos de aulaClic</p>
  </div> 
  <!-- cabecera contenido --------------- --> 
  <div class="cont_curso_medio">
  <div class="curso_medio_elem">
  <span class="sin-sub-azu"><a href="https://www.aulaclic.es/portada/cursos_pago.htm" title="8 cursos de aulaClic m&aacute;s 600 programas  grauitos en una memoria USB de 8 GB. reutilizable" class="sin-sub-azu">8 cursos + 600<br> programas en USB</a><br></span><a href="portada/cursos_pago.htm"><img src="graficos/usb_16gb.png" alt="8 cursos de aulaClic m&aacute;s 600 programas  grauitos en una memoria USB de 16 GB. reutilizable" ></a>
      </div>
  <div class="curso_medio_elem">
  <span class="rojo_mediano">&iexcl;&iexcl; Acceso gratis a los cursos on-line  !!</span><br>
  <span class="sin-sub-azul">Aprender es m&aacute;s f&aacute;cil que nunca. Videotutoriales.<br>
    Desde 1999, la ense&ntilde;anza de calidad al alcance de todos.</span>
  </div> 
  <div class="curso_medio_elem">
  <strong>&middot;</strong> <a HREF="https://www.aulaclic.org/tienda/entrada_tienda_ssl.html" class="sin-sub-azul1" >Descargas</a> <br>
  <a href="https://www.aulaclic.org/tienda/entrada_tienda_ssl.html"><img src="graficos/carrito.png"  alt="Descargas" ></a>
  </div> 
  </div>
  <!-- cursos contenido --------------- --> 
  <div class="cont_curso">
  <div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/access-2016/index.htm" >Access 2016 </a></div>
      <div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/access-2013/index.htm" >Access 2013 </a></div> 
      <div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/coreldraw-x7/index.htm"  >CorelDraw X7</a></div> 
      <div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/dreamweaver-cc/index.htm"  >Dreamweaver CC </a></div>
      <div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/excel-2013/index.htm"  >Excel 2013 </a></div>
      <div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/excel-2016/index.htm"  >Excel 2016 </a></div>
      <div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/flash-cs5/index.htm"  >Flash CS5 </a></div>
      <div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/fotografia-photoshop/index.htm"  >Fotograf&iacute;a-Photoshop </a></div>
      <div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/frontpage2003/index.htm"  >FrontPage 2003</a></div>
      <div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/googledrive/index.htm"  >Google Drive </a></div>
      <div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/html/index.htm"  > HTML </a></div>
      <div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/illustrator-cc/index.htm"  > Illustrator CC </a></div>
      <div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/internet/index.htm"  > Internet </a></div>
      <div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/openoffice/index.htm"  >OpenOffice 1.1</a></div>
      <div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/outlook2007/index.htm"  >Outlook 2007</a></div>
      <div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/paginas-web/index.htm"  >P&aacute;ginas Web</a></div>
      <div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/photoshop-cc/index.htm"  >Photoshop CC</a></div>
      <div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/powerpoint-2016/index.htm"  >PowerPoint 2016 </a></div>
      <div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/powerpoint-2013/index.htm"  >PowerPoint 2013 </a></div>
      <div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/sqlserver/index.htm"  > SQL Server </a></div>
      <div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/windows7/index.htm"  >Windows 7</a></div>
      <div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/windows-10/index.htm"  >Windows 10</a></div>
      <div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/word-2013/index.htm"  >Word 2013 </a></div>
      <div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/word-2016/index.htm"  >Word 2016 </a></div>
      <div class="curso_elem"><span class="curso_elem_disco"></span> <a href="#"  ></a></div>
      </div>
     </body>
    </html>
  8. Y la hoja de estilo es esta: 
    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: 18px;
	  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;
	  }

Puedes consultar aquí las soluciones propuestas, primero intenta resolverlo sin ayuda.


Enero-2019 (V 2.2)
Atrás Volver Adelante





Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.