PRIMERO LEAMOS EL EJERCICIO EN SU TOTALIDAD!
TRATEMOS DE ENTENDER LOS PASOS Y PORQUE LOS HACEMOS, A CONCIENCIA PLEASE!
En este ejercicio vamos a practicar la creación de layout mediante CSS Box Model y Flexbox para dominar nuestras estructuras y diagramar sin problemas!
El tema lo elegís vos! *
Pero… tiene que estar relacionado con el diseño gráfico, puede ser sobre diseñadores, tipografías, color, herramientas, estilos, tenes de todo para elegir, podes contarnos sobre lo que mas te gusta o apasiona, o aprovechar para repasar el tema que pienses que tenes más flojo!
1. Comenzamos creando y organizando los archivos:
a) Crear la carpeta raíz
Todos los archivos de este ejercicio debemos guardarlos dentro de una carpeta raíz, podemos utilizar la carpeta creada para los ejercicios anteriores, si no tenemos creada la carpeta… la creamos ahora como vimos en los ejercicios anteriores, básicamente tenemos que tener una carpeta en nuestra compu donde guardaremos los archivos html, imágenes y css, lo importante es indicarle a Dw que esa carpeta raíz funciona como punto de partida para nuestras rutas de inserción y vínculos.
b) Crear los archivos html y css
Crearemos un nuevo archivo html, el cual guardaremos con el nombre ej4_flexbox.html. Una vez guardado crearemos nuestro archivo css desde el panel Diseñador de CSS y lo nombraremos como ej4_estilos.css.
Debemos guardar ambos archivos dentro de nuestra carpeta raíz creada anteriormente. Seamos ordenados y atentos a guardar los archivos!
Cuidado al nombrar los archivos, no usemos mayúsculas, acentos, espacios, caracteres especiales o nombres de archivos muy largos.
2. Ahora toca el turno de las etiquetas en nuestro archivo HTML5:
Podemos crear las etiquetas directamente tipeando en nuestro código HTML, usar el panel de inserción de elementos o si prefieren el panel DOM. Todos darán el mismo resultado.
Recomiendo dibujar a mano alzada en una hoja de papel la estructura deseada y así comprender como vamos agrupando los elementos y creando contenedores con tal fin.
Mientras creamos las etiquetas aprovecharemos para indicar clases e id a ciertos elementos, como también insertar las imágenes (sin indicar ancho o alto en la etiqueta img), las cuales es conveniente tener recortadas y optimizadas previamente. Es muy importante optimizar las imágenes en Photoshop, no se olviden ese paso!!
a) Header
Comenzamos con la creación de la etiqueta header, dentro del cual insertaremos un div para utilizar como “caja”, dentro del mismo colocamos una etiqueta h1 para poner un buen titulo que defina nuestro contenido.
<header>
<div class="cont-top">
<h1>TITULO PRINCIPAL: TEMA A ELECCIÓN</h1>
</div>
</header>
b) Main
Nuestra etiqueta main que contendrá nuestras 2 etiquetas section.
Dentro del primer section crearemos un div contenedor (para poder juntar en la misma columna un h2 para un titulo y una etiqueta p para un párrafo) y un div al que le colocaremos mas adelante una imagen de fondo.
El segundo section contendra un div que nos funcionara como columna o “card”. Dentro de ella insertaremos: 1 imagen con la etiqueta img, un titulo con h3, una lista ul con cuatro li para descripciones y por ultimo un div para contener los iconos o elementos que queramos usando un div para cada img.
Una vez que nos queda bien armada la “columna”, duplicamos el div con todos los elementos que tiene dentro, asi logramos tener 4 columnas, simplemente cambiamos los textos y las imágenes según corresponda.
<main>
<section id="one">
<div class="cont-info">
<h2>TITULO SECUNDARIO</h2>
<p>Lorem ipsum</p>
</div>
<div class="imagen"></div>
</section>
<section id="two">
<div class="columna">
<img decoding="async" src="foto-01.jpg" alt=""/>
<h3>Titulo</h3>
<ul>
<li>Descripción</li>
<li>Descripción</li>
<li>Descripción</li>
<li>Descripción</li>
</ul>
<div class="redes">
<div class="ico"><img decoding="async" src="red-01.png" alt=""/></div>
<div class="ico"><img decoding="async" src="red-02.png" alt=""/></div>
<div class="ico"><img decoding="async" src="red-03.png" alt=""/></div>
</div>
</div>
</section>
</main>
* Ignorar decoding=”async” que se agrega solo en el visualizador de código
c) Footer
Por ultimo creamos la etiquetas footer, donde también insertaremos un div para utilizar como “caja”, e insertaremos otro div el cual usaremos como botón que nos permita volver a la portada que hicimos en el TP1.
<footer>
<div class="cont-bottom">
<div class="btn">Volver</div>
</div>
</footer>
Recuerden como funcionan los vínculos, utilizamos la etiqueta <a>, abrazando entre su etiqueta de apertura y la de cierre, al elemento que funciona como botón, e indicando en el href=” “ la ruta o dirección web a la cual queremos vincular y si fuera necesario agregar el atributo target=”_blank”.
<a href="http://dom.com"><div class="btn">Volver</div></a>
ANTES DE SEGUIR, HAY 2 COSAS QUE DEBEMOS COMPRENDER
I - MODEL BOX CSS
Todo en CSS tiene una caja alrededor, y comprender estas cajas es clave para poder crear diseños con CSS.
Content es nuestro elemento, puede ser texto o imagen y puede tener especificado un alto y ancho.
Padding es el espacio INTERNO alrededor de nuestro contenido, el “aire” por así decirlo.
Border es eso mismo, el borde del elemento.
Margin es el espacio “hacia afuera”, como dice su nombre… el margen.
El padding, el border y el margin pueden configurarse de manera individual por cada lado.
II - FLEX-BOX
El Módulo de Caja Flexible, comúnmente llamado flexbox, fue diseñado como un modelo unidimensional de layout, y como un método que pueda ayudar a distribuir el espacio entre los ítems de una interfaz y mejorar las capacidades de alineación.
Debes comprender que indicando propiedades al CONTENEDOR manejamos la mayoría de las propiedades de los CHILDS o ITEMS que se encuentran dentro.
Para crear un contenedor flex, establecemos la propiedad del área del contenedor display: flex o inline-flex. Tan pronto como hacemos esto, los hijos directos de este contenedor se vuelven ítems flex.
Dominar FLEXBOX nos puede llevar un tiempo, pero hay ciertas propiedades básicas que nos permitirán trabajar de manera sencilla nuestros layouts.
flex-direction: define el eje principal indicando la dirección en que se mostraran los items.
align-items: indica la alineación de los items y depende del eje principal seleccionado.
justify-content: nos permite alinear o distribuir los items.
align-content: es similar al align-items, pero se utiliza cuando tenemos mas de dos líneas de ítems.
gap: nos permite indicar una separación entre los ítems.
wrap / nowrap: indicamos como se comportan los ítems si superan el espacio disponible, ya sea apilándose o forzando su ancho.
Por otro lado, también tenemos la posibilidad de indicar ciertas propiedades directamente a los items flex como si crecen o se achican dependiendo del espacio libre disponible utilizando en las propiedades del item: flex-basic, flex-grow o flex-shrink o mediante el método abreviado flex: 1 1 auto;
También podemos forzar su alineación individual mediante align-self o cambiar su orden indicando order: 1; order: 2;
3. Ahora si, a darle forma con CSS3!
DESPACIO Y SEGURO!
No agreguemos selectores que no vayamos a usar.
Tampoco agreguemos propiedades sin sentido, cada propiedad debe ser necesaria!
Anímense a agregar selectores y propiedades directamente desde el panel de inspeccionar del navegador, de este modo podremos ver los cambios en vivo.
* Global
Utilizando el selector global * podemos darle ciertas propiedades a TODOS los elementos de nuestra página.
Fundamental indicar el “box-sizing: border-box” para que los bordes y paddings no sumen sus valores a la medida total de nuestro elementos.
Podemos utilizar este selector global para indicar a todos los elementos de nuestra página un borde y un pequeño padding, esto nos será muy útil para visualizar los elementos y su comportamiento, al finalizar podemos eliminarlo.
body
Al selecto de etiqueta body le indicaremos margin: 0; para quitar el margen que viene por defecto. Luego un display: flex; para luego poder indicar la dirección y centrar sus hijos.
* {
box-sizing: border-box;
border: 1px solid darkgray;
padding: 10px;
}
body {
margin: 0;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
a) Header
Selector de etiqueta header para darle ancho completo width:100%; luego display: flex; para centrar al contenedor interior mediante justify-content: center;
Selector de clase para el div .cont-top al cual le indicamos un ancho completo y un ancho máximo para crear la caja de 950px de ancho.
Un simple selector de etiqueta para nuestro texto de h1, aquí luego podremos agregar alguna tipografía mediante google fonts, tamaño, color, etc. Por el momento, solo centrado con text-align: center;
header {
width: 100%;
display: flex;
justify-content: center;
}
.cont-top {
width: 100%;
max-width: 950px;
}
h1 {
text-align:center;
}
b) Main
Selector de etiqueta para nuestro main, le indicamos un ancho de 100% y si así lo necesitamos un ancho máximo para mantener nuestra caja a través de todo el contenido principal. Si tuviésemos la necesidad de que nuestros section internos tengan ancho completo debemos obviar el ancho máximo en este elemento y agregar luego contenedores en cada sección.
main {
width: 100%;
max-width: 950px;
}
c) Section #one
En este caso utilizamos un selector de ID para nuestra primera sección #one, le indicamos un display: flex; para luego poder indicar la dirección mediante flex-direction: row; y lograr que los hijos se posiciones uno al lado del otro y así tener “2 columnas”.
La primer “columna” es un div con la clase .cont-info, dentro de este tenemos dos hijos, un h2 y un párrafo, como queremos que quede uno debajo del otro, al .cont-info (que hace de contenedor) le indicamos display:flex; con la dirección flex-direction: column; y por ultimo le indicamos un ancho del 50%.
La segunda “columna” es un div con la clase .imagen, dentro de esta… no tenemos nada, solo le vamos a indicar una imagen de fondo y la propiedad background-size: cover; para que cubra todo nuestro div, también podemos agregar la propiedad background-position: center center; para posicionar esa imagen de fondo dentro del div, pudiendo variar los valores center por top / bottom / right / left según necesitemos. Finalmente tambien le indicamos un ancho del 50%. De este modo cada “columna” ocupara la mitad del contendor section #one.
#one {
display: flex;
flex-direction: row;
}
.cont-info {
display: flex;
flex-direction: column;
width: 50%;
}
.imagen{
width: 50%;
background-image: url("fondo.jpg");
background-size: cover;
}
d) Section #two
Esta sección contendrá 4 “columnas”, por lo cual indicaremos en el selector de ID #two display: flex; esto por defecto aplica flex-direction: row; para que queden los hijos uno al lado del otro. También indicamos un gap: 15px; lo que obligara a que los hijos estén separados entre si por 15px.
Luego le indicamos un padding: 20px; para dejar un poco de “aire” y un margin-top: 20px; para separar esta section de la anterior.
#two {
display: flex;
gap: 15px;
padding: 20px;
margin-top: 20px;
}
e) Div "columna" o "card"
Este div quizás sea el mas complejo, comenzamos creando el selector de clase .columna en donde le indicaremos un ancho el cual podremos ir variando, siempre y cuando el elemento padre #two tenga o no indicado flex: wrap o nowrap; luego un pequeño padding para separa los contenidos interiores del borde.
Para las imágenes vamos a usar un selector combinador (espacio) este selecciona los elementos que son descendientes del primer elemento. .columna img quiere decir que solo afectara a las etiquetas img que esten dentro del elemento con la clase .columna de este modo le indicaremos un 100% de ancho para las imágenes (recuerden en el html quitar el width y heigth en la etiqueta img).
Ahora crearemos un contenedor aplicando el selector de clase .redes a nuestro div y para lograr que los elementos hijos se posiciones uno junto al otro display: flex; ahora los distribuiremos mediante justify-content: space-evenly; agregamos un pequeño padding para alejarnos de los bordes del contenedor.
Luego solo resta por medio de la clase .ico modificar a todos los divs que contienen las pequeñas imágenes.
Mediante el selector combinador .ico img podemos agregar, si fuera necesario, un ancho y un display: block; esto es porque a veces las imágenes dejan un pequeño espacio en su parte inferior, con este truco lo solucionamos!
.columna {
width: 50%;
padding: 10px;
}
.columna img {
width:100%;
}
.redes {
display: flex;
justify-content: space-evenly;
padding: 10px;
}
.ico {
background-color: black;
padding: 10px;
border-radius: 50%;
}
.ico img {
display: block;
}
f) Footer
Para el footer utilizaremos el selector de etiqueta footer y básicamente le damos las mismas propiedades que al header.
Luego mediante la clase .cont-bottom le damos al div las propiedades para crear una caja y utilizamos el display: flex; seguido de justify-content: flex-star; para que nuestro “botón” quede al inicio del contenedor.
Finalmente creamos el selector de clase .btn para darle a nuestro botón todas sus propiedades y agregaremos un selector .btn:hover; para indicar las variaciones del botón cuando estemos sobre el mismo.
footer {
display: flex;
width: 100%;
justify-content: center;
}
.cont-bottom {
width: 100%;
max-width: 950px;
display: flex;
justify-content: flex-start;
}
4. El gran final!
Por ultimo subiremos los archivos a nuestro servidor y agregamos el enlace correspondiente en nuestra portada para que pueda ser accesible.
No olviden agregar un favicon y titulo a la página! Asi como vincular desde la portada y viceversa. Traten de probar el ejercicio desde otra compu, eso nos puede evitar sorpresas 😉
Ejemplo on-line
Les dejo el link al ejemplo básico de estructura, el resto del diseño y la magia corre por cuenta de cada uno!
Archivos de ejemplo
Desde este enlace pueden descargar los archivos utilizados en el ejemplo. * Los archivos pueden diferir de los videos.
