Advertisement
  1. Web Design
  2. Kids

Diseño Web para Niños: Maquetado CSS

Scroll to top
Read Time: 7 min
This post is part of a series called Web Design for Kids.
Web Design for Kids: CSS
Web Design for Kids: Images

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

Bienvenidos a la sexta lección de nuestra serie Diseño Web para Niños, ¡Maquetado CSS!

Aquí es donde ponemos nuestros elementos exactamente donde los queremos en la pantalla. Añadiremos cosas a nuestros dos archivos HTML y CSS para hacerlo.

Para que recuerdes, observa el sitio web que estamos creando. Los archivos para éste curso pueden descargarse aquí y no olvides formular cualquier pregunta que tengas en la sección de comentarios en la parte inferior de la página.

Antes de Comenzar

Hay unas cuantas cosas que necesitamos saber antes de adentrarnos en el maquetado. En ésta primera sección veremos cómo mantenernos organizados. Cubriremos algunos fundamentos de posicionamiento y hablaremos sobre que clase de propiedades CSS son utilizadas para el maquetado.

CSS Ordenado

Mantener un documento CSS organizado es muy importante. Una buena organización nos hará más fácil encontrar todas las piezas dentro de nuestro archivo, haciendo más sencillo cambiar y agregar cosas posteriormente. Hablando en términos generales, es mejor ordenar las declaraciones de nuestro CSS en el orden que tienen lugar en la página.

Agregaremos estilos en ésta lección a main, por ejemplo. Éste estilo agregado en ese elemento principal debe incluirse en nuestro documento CSS antes de cualquier otro elemento que esté anidado dentro de main.

El Modelo de Caja

Los elementos HTML son como cajas rectangulares. El modelo de caja CSS describe el espacio que ocupan éstas cajas.

Cada caja tiene cuatro lados. Podemos aplicar un valor a todos nuestros lados de una sola vez en nuestro CSS por medio de padding, border, y/o margin. Sin embargo, si queremos aplicar estilo a un lado de un elemento podemos hacerlo también. Por ejemplo:

Digamos que ésta caja rosa representa texto. Podemos ver que el padding ha sido agregado sólo a la izquierda y un borde grueso azul cubre todos los lados del contenido.

Flexbox

CSS nos da un conjunto de propiedades hechas especialmente para ayudarnos con el maquetado de nuestro sitio. Así que mientras el modelo de caja ayuda a explicar el espacio ocupado alrededor de elementos HTML, flexbox, nos permite mover éstos elementos hacia su lugar correspondiente.

Cuando usamos flexbox en un elemento contenedor éste elemento se convierte en un contenedor flexible y todos los elementos dentro de él se convierten en elementos flexibles.

Cuando aplicamos flexbox a un contenedor automáticamente ubicará a los elementos a lo largo de una línea recta (horizontalmente) y luego podemos entrar en más detalle con otras propiedades de flexbox.

No querremos usar flexbox demasiado para nuestro sitio web, pero es importante pensar en flexbox pues es considerado la forma más moderna y apropiada para posicionar pequeños fragmentos de contenido en un sitio web.

Header

El h1 y la imagen de la ciudad dentro del header estan centradas en la página. Hay varias formas diferentes de centrar algo con CSS, pero por ahora usaremos text-align:center; en el header.

Apuntaremos al header al usar el nombre de su clase que agregamos previamente:

¡No lo olvides! ¡Guarda los documentos y refresca el navegador para ver nuestros cambios cuando los hacemos!

Sections (Secciones)

Lo primero que queremos hacer a nuestras secciones es hacer que el contenido, la imagen y la lista, dentro de cada sección se ubiquen lado a lado en lugar de apilados.

Para lograr éste usaremos flexbox. Flexbox es aplicado a elementos dentro de un elemento contenedor al usar display:flex; en el contenedor:

Para llevar ésto a lo que hablamos anteriormente, la imagen y el div que contiene la lista de compras son ahora elementos flex, porque están dentro de éste contenedor flex.

Mientras hay muchas opciones para especificar exactamente donde debe ir un elemento, el comportamiento predeterminado de flexbox aquí funciona perfectamente para nosotros-y nuestra lista de la tienda ahora está a la derecha de la imagen de la tienda.

Una nota sobre "Prefijos de Navegador"

Ya que Flexbox es relativamente nuevo, no todos los navegadores han tenido oportunidad de incluirlo adecuadamente. Para solventar ésto podemos incluir un prefijo de navegador para las propiedades flexbox, que agrega ésta falta de soporte por el momento. Aunque solo nos enfocamos en las versines más recientes de navegadores modernos para éste proyecto, aún necesitaremos incluir un prefijo -webkit- para que flexbox asegure que funcionará en "Safari".

Imagen & Listas

Podríamos usar un poco de espacio entre la imagen y el elemento que contiene todo el texto, así que en nuestro HTML agreguemos una clase de store-details al div que contiene el texto.

Después de que guardamos ésto podemos ir a nuestro CSS y agregar éste espacio, pero solo a la izquierda del div:

Espacio de Lista Predeterminado

Hay algo de espacio a la izquierda de nuestras listas desordenadas de la tienda. Ésto es porque hay algún estilo predeterminado que viene con el uso de una lista HTML. A veces éste estilo predeterminado está bien, y otras veces no puede producir el resultado que queremos.

Podemos librarnos de éste espacio de lista predeterminado al usar padding:0; en la lista desordenada, pero eso causaría que nuestras viñetas se fueran demasiado a la izquierda en relación con el encabezado de nuestra lista.

Queremos un poco de padding aquí, pero no tanto como es proporcionado por el estilo predeterminado de la lista. Estableciendo un padding-left de 15px en la lista alineará nuestras viñetas arriba con el encabezado casi adecuadamente, así que agregaremos ésto además de las cosas que añadimos a la lista en la lección previa:

Espacio Entre Elementos de la Lista

Aún tenemos la cuestión que mencionamos en la lección previa con los elementos de la lista que están demasiado juntos. Para resolver ésto agreguemos una clase de store-name a todos los elementos de la lista, <li>, en nuestro HTML. Luego agregaremos un pequeño margen inferior de éstos elementos.

Márgenes y Centrado

Se necesita añadir espacio a las secciones así como centrarlas en la página. Haremos ésto por medio de las propiedades margin y width.

De nuevo, agregaremos para aplicar estilo a lo que ya hemos escrito:

El valor de 50px dentro de margin aquí está aplicando esa cantidad de espacio arriba de cada sección de la tienda. Después auto indica al navegador que considere la anchura del elemento (que establecimos en 450px) y lo centre en la ventana del navegador automáticamente.

Footer

Para nuestro footer centraremos el texto y agregaremos una pequeña cantidad de padding para asegurar que éste texto no esté demasiado cerca de los extremos del footer.

Body Margin (Margen del Cuerpo)

Hablamos del estilo predeterminado un poco cuando colocamos nuestras listas en su lugar. El elemento body viene con sus propios estilos predeterminados, uno de ellos es margin que rodea toda la página. Mientras a veces ésto no es un problema, podemos ver que está evitando que el background-color (color de fondo) de nuestro footer se estire completamente hasta los extremos de la ventana del navegador.

La solución aquí es dirigirnos al cuerpo en nuestro documento CSS y agregar lo siguiente:

Conclusión

En éste curso tenemos todos nuestros elementos en su lugar con técnicas de maquetado CSS. Mientras que hay generalmente varias formas de lograr un maquetado específico, el estar cada vez más cómodo con el modelo de caja CSS y flexbox proporciona una comprensión muy sólida para éstos diferentes planteamientos.

Ya que nuestro sitio está completo (¡felicitaciones!) hablaremos de todo lo que respecta a diseño, tipografía, y color en las lecciones siguientes. Ésto te ayudará a convertirte en un hábil e informado diseñador web.

¡Nos vemos por la ciudad!

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.