s Reordenación

Crear y ordenar apartados

Profesores:JAB y Ester Torres

Creación del apartado de las imágenes
Durante las actividades de los temas anteriores hemos ido creando diferentes apartados de contenido: Aún así, para crear la animación en la siguiente actividad de este mismo tema, todavía nos queda por crear un apartado con imágenes (sobre las que aparecerá la futura animación con un fundido que tendrá un retardo de un segundo al entrar en la página).


Primero vamos a crear el apartado con las imágenes, seguidamente reordenaremos todos los apartados para finalmente añadir el código CSS para que tenga la apariencia que queremos. 


<div id="animacion">
   <div class="im"><img src="img/im1.jpg"></div>
   <div class="im"><img src="img/im2.jpg"></div>
   <div class="im"><img src="img/im3.jpg"></div>
   <div class="im"><img src="img/im4.jpg"></div>
   <div class="im"><img src="img/im5.jpg"></div>
   <div class="im"><img src="img/im6.jpg"></div>
</div>

<div id="tapa_animacion">
   Participación en más de 300 producciones
</div>
Como estas imágenes representan el primer contenido de la página, colocamos el código HTML al principio del apartado (delante del código anterior, que hace referencia a 'tapa_animacion').

Como todas las imágenes van a tener las mismas características CSS, a cada <div> le ponemos el mismo nombre de clase (class="im").

Aunque podrían ir todas las imágenes juntas en un único <div> es preferible añadir cada imagen dentro de su propio <div> para un mayor dominio (como poder definir el espacio entre las imágenes).


Con el añadido HTML de este apartado de imágenes ya podemos concentrarnos en la reordenación de los apartados a través de CSS para que todo tenga la apariciencia que queremos.


Antes de empezar con CSS
Para entender lo que vamos a hacer es imprescindible tener muy claro la estructura HTML que tenemos. Por ello, te proponemos hacer clic en los siguientes botones para poder entender mejor lo que haremos después.

Haz clic en los botones para ver la estructura:


Reordenación de la estructura
Para reordenar la estructura HTML lo primero que vamos a hacer es crear dos <article>, uno para el contenido de la izquierda (apartado de las imágenes, degradado radial y texto en columnas) y otro <article> para el contenido de la izquierda (los 2 vídeos). 
<article id="izquierda">
  <div id="animacion">
    <div class="im"><img src="img/im1.jpg"></div>
    <div class="im"><img src="img/im2.jpg"></div>
    <div class="im"><img src="img/im3.jpg"></div>
    <div class="im"><img src="img/im4.jpg"></div>
    <div class="im"><img src="img/im5.jpg"></div>
    <div class="im"><img src="img/im6.jpg"></div>
  </div>

  <div id="tapa_animacion">
    Participación en más de 300 producciones
  </div>

  <div id="presentacion">
    Centramos nuestros servicios profesionales en la creación de
    contenidos multimedia e interactivos ...etc...
  </div>
</article>


<article id="videos">
  <div id="video1">
    <iframe width="384" height="216" src="http://www.youtube.com/
    embed/7g8_vtLFBMw?feature=player_detailpage" frameborder="0"
    allowfullscreen></iframe>
  </div>

  <div id="video2">
    <iframe width="384" height="216" src="http://www.youtube.com/
    embed/oUVE6nSIkU8?feature=player_detailpage" frameborder="0"
    allowfullscreen></iframe>
  </div>
</article>
Englobamos dentro de <article id="izquierda"> todos aquellos apartados (<div>) que irán en la parte izquierda de la pantalla, que en este caso son:

<div id="animacion">



<div id="tapa_animacion">



<div id="presentacion">

Texto en columnas creado en el tema:
Columnas de texto.



   
El contenido de la derecha se agrupa dentro del <article id="videos"> que contiene dos <div>, cada uno de ellos con un enlace a un video de Youtube.

Sin CSS, el resultado es exactamente el mismo.


Reordenación de los apartados
Como sin CSS el resultado no es -ni de lejos- el deseado, vamos a añadir CSS para que:
estilos.css
.im{
  float:left;
  margin-right:5px;
}

#animacion{
  width:648px;
  display:inline-block;
  margin-top:10px;
  background-color:black;
  border-radius:3px;
  padding:6px 1px 5px 6px;
}

#videos{
  width:385px;
  float:left;
  margin-top:10px;
  margin-left:10px;
}

#izquierda{
  width:650px;
  float:left;
  margin-right:10px;
}

#video1{
  margin-bottom:14px;
}

#tapa_animacion{
  position:absolute;
  left:0px;
  top:10px;
  opacity:0.85;
  width:655px;
  height:334px;
  font-family:titulares;
  text-align:center;
  font-size:33px;
  color:#313B44;
  line-height:334px;

  background:radial-gradient(center center,
  circle farthest-side, white 0%, silver 20%,
  gray 40%, white 50%);
  background:-webkit-radial-gradient(center center,
  circle farthest-side, white 0%, silver 20%,
  gray 40%, #F9F1CF 50%);
  background-moz-radial-gradient(center center,
  circle farthest-side, white 0%, silver 20%,
  gray 40%, #F9F1CF 50%);
  background-o-radial-gradient(center center,
  circle farthest-side, white 0%, silver 20%,
  gray 40%, #F9F1CF 50%);
  background-ms-radial-gradient(center center,
  circle farthest-side, white 0%, silver 20%,
  gray 40%, #F9F1CF 50%);
}


Las dos propiedades del selector .im colocan a las imagénes una a la derecha de la otra (float), empezando desde la izquierda (left) y dejando un margen derecho de 5 píxeles entre cada una de ellas.


En el selector #animacion añadimos el código CSS que afecta a la caja (<div>) que contiene a las imágenes (no a las imágenes en sí).
Definimos el ancho (width) y utilizamos display:inline-block; para que coja automáticamente el espacio vertical que necesite.




#videos hace referencia al <article> que agrupa a los dos <div> que contienen a los dos vídeos de Youtube.
Para colocarlo al lado del <article id="izquierda"> definimos una anchura y le añadimos el float:left; habitual.


#izquierda es un <article> que contiene 3 <div>: #animacion (conjunto de imágenes), #tapa_animacion (frase con degradado) y #presentacion (texto en columnas).
En realidad estamos colocando los 2 <article>: (izquierdo y videos) uno al lado del otro utilizando float y definiendo su anchura (width).

Separamos verticalmente el primer vídeo del segundo.


#tapa_animacion será el <div> que realizará la animación por lo que primero definimos su posicionamiento:
Utilizamos una posición absoluta para que esté por encima de #animacion e indicamos su tamaño.
De manera provisional le añadimos una opacidad del 85% (opacity:0.85;) para que al menos podamos verlo y ver lo que tiene debajo.

Propiedades que especifican cómo debe mostrarse la frase (tipografía, alineación, tamaño y color) explicadas en el solucionador del tema 21.

El resto de código es la especificación del degradado con los correspondientes prefijos para maximizar la compatibilidad con el resto de navegadores. Explicados ampliamente en el contenido del tema 21.

A modo de resumen, en todos los casos, la sintaxis es:

  1. radial-gradient: para especificar que es un degradado radial.
  2. center center: indica el punto en el que comienza el degradado.
  3. circle farthest-side: indica la forma y cómo se expanderá por el interior de la caja.
  4. white 0%, silver 20%, gray 40%, ...:
    5. Definición del color y duración de los ciclos expresado en portentajes.