El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En esta sección, vamos a aplicar todo lo que hemos aprendido hasta ahora para crear el diseño de nuestro sitio web responsivo. Este paso es crucial ya que establece la estructura y la disposición de los elementos en la página. Nos enfocaremos en utilizar CSS Grid y Flexbox para lograr un diseño limpio y adaptable.

Objetivos de Aprendizaje

Comprender cómo planificar y estructurar el diseño de un sitio web.
Aplicar CSS Grid y Flexbox para crear un diseño flexible y responsivo.
Utilizar técnicas de diseño para mejorar la usabilidad y la experiencia del usuario.

Planificación del Diseño

Antes de comenzar a escribir código, es importante planificar el diseño del sitio web. Aquí hay algunos pasos que puedes seguir:

Definir la estructura básica: Decide cuántas secciones tendrá tu sitio web (por ejemplo, encabezado, navegación, contenido principal, pie de página).
Crear un wireframe: Un wireframe es un boceto simple que muestra la disposición de los elementos en la página.
Elegir un sistema de diseño: Decide si usarás CSS Grid, Flexbox o una combinación de ambos para organizar los elementos.

Ejemplo de Wireframe

+------------------------------------------------+
|                    Encabezado                  |
+------------------------------------------------+
| Navegación |         Contenido Principal       |
|            |                                   |
|            |                                   |
|            |                                   |
+------------------------------------------------+
|                    Pie de Página               |
+------------------------------------------------+

Estructura HTML

Primero, crearemos la estructura HTML básica para nuestro sitio web. Aquí está un ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Sitio Web Responsivo</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Mi Sitio Web</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">Inicio</a></li>
            <li><a href="#">Acerca de</a></li>
            <li><a href="#">Servicios</a></li>
            <li><a href="#">Contacto</a></li>
        </ul>
    </nav>
    <main>
        <section>
            <h2>Bienvenido</h2>
            <p>Este es el contenido principal de mi sitio web.</p>
        </section>
    </main>
    <footer>
        <p>&copy; 2023 Mi Sitio Web</p>
    </footer>
</body>
</html>

Estilizando con CSS Grid

Vamos a utilizar CSS Grid para crear la estructura del diseño. Aquí está el CSS básico para lograrlo:

/* styles.css */

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

header, nav, main, footer {
    padding: 20px;
    text-align: center;
}

header {
    background-color: #4CAF50;
    color: white;
}

nav {
    background-color: #f4f4f4;
}

main {
    background-color: #ffffff;
}

footer {
    background-color: #333;
    color: white;
}

.container {
    display: grid;
    grid-template-areas:
        "header header"
        "nav main"
        "footer footer";
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto 1fr auto;
    height: 100vh;
}

header {
    grid-area: header;
}

nav {
    grid-area: nav;
}

main {
    grid-area: main;
}

footer {
    grid-area: footer;
}

Explicación del Código

Grid Container: La clase .container define un contenedor de grid con tres áreas principales: header, nav y main, y footer.
Grid Template Areas: Utilizamos grid-template-areas para definir las áreas del grid. Esto facilita la asignación de áreas específicas a los elementos.
Grid Template Columns y Rows: Definimos dos columnas (1fr 3fr) y tres filas (auto 1fr auto), donde 1fr significa una fracción del espacio disponible.

Haciendo el Diseño Responsivo

Para hacer que el diseño sea responsivo, podemos usar media queries para ajustar el diseño en diferentes tamaños de pantalla.

/* Media Queries para Diseño Responsivo */

@media (max-width: 768px) {
    .container {
        grid-template-areas:
            "header"
            "nav"
            "main"
            "footer";
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    nav {
        text-align: left;
    }
}

Explicación del Código

Media Query: La media query @media (max-width: 768px) aplica estilos específicos cuando el ancho de la pantalla es de 768px o menos.
Grid Template Areas: Cambiamos la disposición de las áreas del grid para que se apilen verticalmente en pantallas más pequeñas.

Ejercicio Práctico

Ejercicio

Añadir una barra lateral: Modifica el diseño para incluir una barra lateral que contenga enlaces adicionales.
Estilizar la barra lateral: Asegúrate de que la barra lateral tenga un fondo diferente y se vea bien en dispositivos móviles.

Solución

HTML

<aside>
    <ul>
        <li><a href="#">Enlace 1</a></li>
        <li><a href="#">Enlace 2</a></li>
        <li><a href="#">Enlace 3</a></li>
    </ul>
</aside>

CSS

/* Añadir barra lateral al grid */

.container {
    display: grid;
    grid-template-areas:
        "header header"
        "nav main"
        "aside main"
        "footer footer";
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto 1fr auto;
    height: 100vh;
}

aside {
    grid-area: aside;
    background-color: #f4f4f4;
    padding: 20px;
}

@media (max-width: 768px) {
    .container {
        grid-template-areas:
            "header"
            "nav"
            "main"
            "aside"
            "footer";
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
}

Conclusión

En esta sección, hemos aprendido cómo planificar y crear el diseño de un sitio web utilizando CSS Grid. También hemos visto cómo hacer que el diseño sea responsivo utilizando media queries. En la siguiente sección, nos enfocaremos en estilizar los componentes individuales del sitio web para mejorar su apariencia y usabilidad.

Creando el Diseño

Objetivos de Aprendizaje

Planificación del Diseño

Ejemplo de Wireframe

Estructura HTML

Estilizando con CSS Grid

Explicación del Código

Haciendo el Diseño Responsivo

Explicación del Código

Ejercicio Práctico

Ejercicio

Solución

HTML

CSS

Conclusión

Maestría en CSS: De Principiante a Avanzado

Módulo 1: Introducción a CSS

Módulo 2: Estilización de Texto y Fuentes

Módulo 3: Modelo de Caja y Diseño

Módulo 4: Posicionamiento y Flotación

Módulo 5: Flexbox

Módulo 6: CSS Grid

Módulo 7: Técnicas Avanzadas de CSS

Módulo 8: Diseño Responsivo

Módulo 9: Preprocesadores y Frameworks

Módulo 10: Mejores Prácticas y Optimización

Módulo 11: Proyecto: Construyendo un Sitio Web Responsivo