Saltar a contenido

Proyecto Final - Parte 6

Introducción

En este tema, vamos a estilizar nuestra aplicación Django aplicando CSS a todas las plantillas necesarias. Desde la barra de navegación hasta los formularios de creación y edición, aplicaremos un diseño coherente utilizando variables CSS para los colores y fuentes. Esto permitirá que nuestra aplicación sea funcional y tenga un diseño atractivo y uniforme.

Objetivos Parte VI

  1. Aplicar estilos globales y reset CSS a la aplicación.
  2. Estilizar el menú de navegación, los formularios de búsqueda, creación y edición.
  3. Aplicar estilos para las listas de contactos y sus botones de acción.
  4. Asegurar que los enlaces de acción y el pie de página estén correctamente diseñados.
  5. Detallar todos los cambios que deben realizarse en las plantillas HTML para aplicar las clases correctamente.

1. Reset de CSS y Variables Globales

Fuentes

Antes de comenzar vamos a conseguir las fuentes con las que vamos a trabajar. En este caso, usaremos Roboto en sus variantes Bold y Regular.

Descargar fuentes

Puedes buscarlas en https://defont.com/robot y descargarlas. También te dejo aquí los enlaces:

Una vez descargados los archivos .ttf, colócalos en la carpeta static/fonts/ de tu proyecto Django. Si no tienes esta carpeta, créala.

Código CSS:

Comenzamos con el reset de CSS, que limpia todos los márgenes y paddings por defecto que aplican los navegadores, asegurando que todos los elementos comiencen con los mismos estilos. Además, definimos variables CSS para facilitar la gestión de colores y fuentes a lo largo de la aplicación.

static/css/styles.css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
/* Definición de variables CSS para colores y fuentes */

/* Colores */
:root {
    --color-primary: #2ea3f2;   /* Azul */
    --color-secondary: #ffcc00; /* Amarillo */
    --background-color: #f4f4f4; /* Gris claro */
    --text-color: #8d8b8b;      /* Gris */
}

/* Cargar fuentes */
@font-face {
    font-family: 'Roboto-Bold';
    src: url('{% static 'fonts/Roboto-Bold.ttf' %}') format('truetype');
    font-weight: bold;
}

@font-face {
    font-family: 'Roboto-Regular';
    src: url('{% static 'fonts/Roboto-Regular.ttf' %}') format('truetype');
    font-weight: normal;
}

:root {
    --font-main: 'Roboto-Bold', sans-serif;
    --font-text: 'Roboto-Regular', sans-serif;
}

/* Reset de CSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;  /* Asegura que el body ocupe toda la altura de la pantalla */
    background-color: var(--background-color); /* Fondo gris claro */
    font-family: var(--font-text);  /* Usamos la fuente regular para el texto */
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-main);  /* Usamos la fuente en negrita para los títulos */
}

Explicación:

  1. Variables CSS: Definimos variables para los colores primarios, secundarios, el fondo y el texto, además de las fuentes Roboto.
  2. Reset CSS: El reset elimina los márgenes, el padding y establece un box-sizing: border-box para asegurar que los bordes y el padding no afecten el tamaño total de los elementos.

2. Estilo para la Barra de Navegación

El menú de navegación es uno de los componentes clave de la interfaz, y debe ser claro y fácil de usar. Aplicamos un fondo color primario y estilizamos los enlaces del menú con un efecto hover.

Código CSS:

static/css/styles.css
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
/* Menú de navegación */
nav {
    background-color: var(--color-primary);  /* Fondo de color primario */
    padding: 10px 0;
}

nav ul {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;  /* Asegura que el menú ocupe el ancho completo */
    margin: 0;
    padding: 0;
    list-style: none;  /* Elimina los puntos de la lista */
}

nav ul li {
    margin: 0 15px;  /* Espacio entre los elementos del menú */
}

nav ul li a {
    display: block;
    padding: 10px 15px;
    background-color: var(--color-primary);  /* Fondo de color primario */
    color: white;
    text-decoration: none;
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    transition: background-color 0.3s ease;  /* Efecto suave en el cambio de fondo */
}

nav ul li a:hover {
    color: var(--text-color);  /* Color del texto en hover */
}

Explicación:

  1. nav: Aplicamos un fondo azul al menú de navegación.
  2. nav ul: Usamos flexbox para alinear los elementos horizontalmente y aseguramos que el menú ocupe el ancho completo.
  3. Enlaces del menú (a): Los enlaces tienen un fondo de color primario y se cambian al color de texto al pasar el ratón (hover).

3. Estilos para la Página de Inicio (index)

La página de inicio tiene un título centrado y una pequeña descripción. Queremos asegurarnos de que se vea limpia y profesional, con un espaciado adecuado y un tamaño de fuente apropiado.

Código CSS:

static/css/styles.css
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
/* Estilos para la página Home (index) */
h1 {
    font-size: 2.5rem; /* Título grande */
    font-weight: bold;
    color: var(--color-primary); /* Color primario */
    text-align: center;
    margin-top: 50px;
    margin-bottom: 20px;
}

p {
    font-size: 1.2rem;
    text-align: center;
    color: var(--text-color); /* Gris para el texto */
    margin-bottom: 30px;
}

/* Estructura de la página */
main {
    flex: 1;  /* Hace que el main ocupe el espacio disponible */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 20px; /* Márgenes para que no se pegue a los bordes */
    padding: 50px 0; /* Padding para darle más espacio a la parte superior e inferior */
}

Explicación:

  1. h1: Título con un color primario, centrado, y con márgenes para separarlo del contenido.
  2. p: El párrafo tiene un color gris para el texto y está centrado en la página.

4. Estilos para los Formularios de Creación y Edición

El formulario de creación y edición debe ser atractivo y sencillo de usar. Aplicamos un diseño claro, con bordes suaves, un botón grande y espaciado adecuado entre los campos.

Código CSS:

static/css/styles.css
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
/* Estilos para formularios de creación y edición */
form {
    width: 50%; /* El formulario ocupa el 50% de la pantalla */
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

form button {
    width: 100%;  /* El botón ocupa todo el ancho */
    padding: 15px;
    background-color: var(--color-primary);
    color: white;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

form button:hover {
    background-color: var(--color-secondary);
}

Explicación:

  1. form: El formulario tiene un ancho del 50% y está centrado en la pantalla.
  2. button: El botón ocupa todo el ancho y cambia de color al hacer hover (de primario a secundario).

5. Estilos para la Barra de Búsqueda

La barra de búsqueda debe ser amplia, con espaciado adecuado y un botón de búsqueda claro.

Código CSS:

static/css/styles.css
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
/* Estilos para la barra de búsqueda */
.search {
    margin: 20px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.search-bar {
    padding: 10px;
    width: 70%;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.btn.search-btn {
    padding: 10px 20px;
    background-color: var(--color-primary);
    color: white;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn.search-btn:hover {
    background-color: var(--color-secondary);
}

Explicación:

  1. .search-bar: Aumentamos el ancho de la barra de búsqueda al 70% para darle más visibilidad.
  2. .btn.search-btn: El botón de búsqueda tiene un fondo primario y cambia al color secundario cuando se pasa el ratón por encima.

6. Estilos para los Enlaces "Sí" y "Cancelar" en delete.html

Los enlaces "Sí" y "Cancelar" deben ser claramente visibles, con un estilo de confirmación (rojo para eliminar) y un estilo para cancelar (color primario).

Código CSS:

static/css/styles.css
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
/* Estilo para los enlaces "Sí" y "Cancelar" en delete.html */
.delete-action a {
    display: inline-block;
    padding: 10px 20px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    margin-right: 10px; /* Espacio entre los enlaces */
}

/* Enlace "Sí" (Confirmar eliminación) */
.delete-action a.confirm {
    background-color: #e74c3c; /* Rojo para eliminar */
    color: white;
}

.delete-action a.confirm:hover {
    background-color: #c0392b; /* Rojo oscuro en hover */
}

/* Enlace "Cancelar" (No eliminar) */
.delete-action a.cancel {
    background-color: var(--color-primary); /* Color primario para cancelar */
    color: white;
}

.delete-action a.cancel:hover {
    background-color: var(--color-secondary); /* Color secundario en hover */
}

Conclusión

En este tema hemos cubierto los siguientes aspectos:

  1. Variables CSS para manejar colores y fuentes de manera centralizada.
  2. Reset de CSS para limpiar los estilos predeterminados del navegador.
  3. Estilos para el menú de navegación, barra de búsqueda, formularios y pie de página.
  4. Estilos específicos para las plantillas de búsqueda, creación y edición de contactos, y los enlaces "Sí" y "Cancelar" de la página de eliminación.

¡Entendido! Vamos a repasar los HTML de las plantillas más importantes y añadir las clases necesarias para aplicar los estilos definidos en el CSS. Esto incluye las plantillas de la base, el menú de navegación, y las plantillas de Contactos (index, delete, detail, create, edit), con los atributos class aplicados a los elementos correspondientes.

1. Plantilla base.html (Base de la estructura)

Este es el archivo base que se extiende en todas las plantillas. Aquí vamos a definir la estructura básica de la página, incluyendo el menú de navegación y el pie de página.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Mi Gestor Personal{% endblock %}</title>
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
    <!-- Menú de navegación -->
    <nav>
        <ul>
            <li><a href="{% url 'home' %}">Inicio</a></li>
            <li><a href="{% url 'contact_index' %}">Contactos</a></li>
            <li><a href="{% url 'task_index' %}">Tareas</a></li>
        </ul>
    </nav>

    <!-- Contenido principal -->
    <main>
        {% block content %}
        {% endblock %}
    </main>

    <!-- Pie de página -->
    <footer>
        <p>&copy; 2025 Mi Gestor Personal</p>
    </footer>
</body>
</html>

Explicación:

  • El menú de navegación usa un <ul> con <li> para los enlaces a Inicio, Contactos y Tareas.
  • El bloque {% block content %} es donde se insertarán las plantillas de contenido específicas (como la lista de contactos o tareas).
  • El pie de página está centrado y tiene un fondo primario.

2. Plantilla contact/index.html (Lista de contactos)

Esta plantilla muestra la lista de contactos. Aquí aplicamos clases para la barra de búsqueda, los contactos y los botones de acción.

{% extends 'layout/base.html' %}

{% block title %}Contactos{% endblock %}

{% block content %}
    <h1>Lista de Contactos</h1>

    <!-- Barra de búsqueda -->
    <form method="GET" action="{% url 'contact_index' %}" class="search">
        <input type="text" name="search" class="search-bar" value="{{ request.GET.search }}">
        <button type="submit" class="btn search-btn">Buscar</button>
    </form>

    <!-- Lista de contactos -->
    <ul class="list">
        {% for contact in contacts %}
            <li>
                <span class="contact-name">{{ contact.name }} {{ contact.last_name }}</span>

                <!-- Botones de acción -->
                <div class="action-buttons">
                    <a href="{% url 'contact_detail' contact.id %}" class="btn-detail">Ver</a>
                    <a href="{% url 'contact_edit' contact.id %}" class="btn-edit">Editar</a>
                    <a href="{% url 'contact_delete' contact.id %}" class="btn-delete">Eliminar</a>
                </div>
            </li>
        {% endfor %}
    </ul>

    <!-- Botón para crear un nuevo contacto -->
    <div class="aux_btn">
        <a href="{% url 'contact_create' %}">Crear Nuevo Contacto</a>
    </div>
{% endblock %}

Explicación:

  • search: Se aplica a la barra de búsqueda.
  • contact-name: Se aplica al nombre y apellido del contacto.
  • action-buttons: Se aplica al contenedor de los botones de acción (Ver, Editar, Eliminar).
  • btn-detail, btn-edit, btn-delete: Se aplican a los botones de acción con los colores correspondientes.

3. Plantilla contact/delete.html (Confirmación de eliminación)

La plantilla delete.html pregunta al usuario si está seguro de eliminar un contacto. Aquí agregamos clases a los enlaces para la confirmación y la cancelación.

{% extends 'layout/base.html' %}

{% block title %}Eliminar Contacto{% endblock %}

{% block content %}
    <h1>¿Estás seguro de que quieres eliminar el contacto {{ contact.name }}?</h1>

    <form method="POST">
        {% csrf_token %}
        <button type="submit" class="confirm">Sí, eliminar</button>
    </form>

    <div class="delete-action">
        <a href="{% url 'contact_index' %}" class="cancel">Cancelar</a>
    </div>
{% endblock %}

Explicación:

  • confirm: Se aplica al botón "Sí, eliminar".
  • cancel: Se aplica al enlace "Cancelar".

4. Plantilla contact/detail.html (Detalle del contacto)

La plantilla detail.html muestra los detalles de un contacto específico. Aquí, solo necesitamos aplicar la clase contact-name al nombre del contacto.

{% extends 'layout/base.html' %}

{% block title %}Detalle del Contacto{% endblock %}

{% block content %}
    <h1>{{ contact.name }} {{ contact.last_name }}</h1>
    <ul>
        <li><strong>Teléfono:</strong> {{ contact.phone }}</li>
        <li><strong>Móvil:</strong> {{ contact.mobile }}</li>
        <li><strong>Correo:</strong> {{ contact.email }}</li>
        <li><strong>Compañía:</strong> {{ contact.company }}</li>
        <li><strong>Notas:</strong> {{ contact.notes }}</li>
        <li><strong>Fecha de creación:</strong> {{ contact.date }}</li>
    </ul>
    <a href="{% url 'contact_index' %}" class="btn-detail">Volver a la lista</a>
{% endblock %}

Explicación:

  • btn-detail: Se aplica al enlace para volver a la lista de contactos.

5. Plantilla contact/create.html (Formulario de creación)

Esta plantilla contiene el formulario para crear un nuevo contacto. Aquí aplicamos las clases al formulario y al botón de envío.

{% extends 'layout/base.html' %}

{% block title %}Crear Contacto{% endblock %}

{% block content %}
    <h1>Crear Nuevo Contacto</h1>

    <form method="POST" class="form-contact">
        {% csrf_token %}
        <label for="name">Nombre:</label>
        <input type="text" name="name" id="name" required>

        <label for="last_name">Apellido:</label>
        <input type="text" name="last_name" id="last_name" required>

        <label for="phone">Teléfono:</label>
        <input type="text" name="phone" id="phone">

        <label for="mobile">Móvil:</label>
        <input type="text" name="mobile" id="mobile" required>

        <label for="email">Correo Electrónico:</label>
        <input type="email" name="email" id="email" required>

        <label for="company">Compañía:</label>
        <input type="text" name="company" id="company">

        <label for="notes">Notas:</label>
        <textarea name="notes" id="notes"></textarea>

        <button type="submit">Guardar Contacto</button>
    </form>

    <div class="aux_btn">
        <a href="{% url 'contact_index' %}">Volver a la lista de contactos</a>
    </div>
{% endblock %}

Explicación:

  • form-contact: Se aplica al formulario de creación de contacto.
  • Botón de enviar: El botón se estiliza con las clases de botón ya definidas en el CSS.

6. Plantilla contact/edit.html (Formulario de edición)

Esta plantilla es similar al formulario de creación, pero con los datos ya pre-llenados. Aquí también aplicamos las clases para que el estilo sea consistente.

{% extends 'layout/base.html' %}

{% block title %}Editar Contacto{% endblock %}

{% block content %}
    <h1>Editar Contacto</h1>

    <form method="POST" class="form-contact">
        {% csrf_token %}
        <label for="name">Nombre:</label>
        <input type="text" name="name" id="name" value="{{ contact.name }}" required>

        <label for="last_name">Apellido:</label>
        <input type="text" name="last_name" id="last_name" value="{{ contact.last_name }}" required>

        <label for="phone">Teléfono:</label>
        <input type="text" name="phone" id="phone" value="{{ contact.phone }}">

        <label for="mobile">Móvil:</label>
        <input type="text" name="mobile" id="mobile" value="{{ contact.mobile }}" required>

        <label for="email">Correo Electrónico:</label>
        <input type="email" name="email" id="email" value="{{ contact.email }}" required>

        <label for="company">Compañía:</label>
        <input type="text" name="company" id="company" value="{{ contact.company }}">

        <label for="notes">Notas:</label>
        <textarea name="notes" id="notes">{{ contact.notes }}</textarea>

        <button type="submit">Guardar Cambios</button>
    </form>

    <div class="aux_btn">
        <a href="{% url 'contact_index' %}">Volver a la lista de contactos</a>
    </div>
{% endblock %}

Explicación:

  • form-contact: Aplicamos la misma clase al formulario de edición.
  • Campos pre-llenados: Los campos tienen valores pre-llenados con los datos del contacto a editar, gracias a las variables de Django como {{ contact.name }}.

Conclusión

En esta práctica, hemos:

  1. Añadido las clases CSS necesarias a las plantillas de Contactos para aplicar los estilos.
  2. Explicado cómo modificar las plantillas HTML para integrar las clases y hacer que los estilos se apliquen correctamente.
  3. Realizado los ajustes para garantizar que los botones, enlaces y formularios tengan un diseño coherente y atractivo.

Este es el paso final para que los alumnos puedan completar la aplicación de Tareas de manera similar, basándose en el CRUD de Contactos.

¿Todo claro con los cambios en las plantillas y las clases? Si todo está bien, los estudiantes ya tienen todo lo necesario para trabajar en el CRUD de Tareas. ¡Avísame si necesitas más detalles o ajustes!