Saltar a contenido

Proyecto: Sitio Web Personal

Práctica: Creación de una Web para un Fotógrafo

1. Introducción

En este punto del curso, ya hemos aprendido a trabajar con Django, plantillas y archivos estáticos, y también hemos visto conceptos básicos de HTML y CSS. Ahora, es el momento de asentar esos conocimientos en una práctica que nos permita crear una web simple pero funcional. Esta práctica te ayudará a comprender cómo integrar Django con archivos estáticos, cómo trabajar con plantillas, y cómo darle estilo a la web con CSS.

A través de esta práctica, aprenderás a crear páginas dinámicas, gestionar rutas, incluir archivos estáticos (como CSS, imágenes y scripts) y usar herencia de plantillas para que tu código sea más limpio y reutilizable.

2. Explicación de la práctica

Objetivo:

Crear una web sencilla para un fotógrafo que tenga las siguientes páginas:

  • Página de inicio (con barra de navegación, pie de página y una estructura básica con información del fotógrafo).
  • Página de portfolio (con una galería de imágenes).

Página de inicio:

  1. Menú de navegación:

    • Barra de menú con un logo a la izquierda y las opciones "Inicio" y "Portfolio" a la derecha.
    • La barra de menú tendrá un efecto hover en las opciones.
    • El menú será de 100px de altura.

  2. Pie de página:

    • Un pie de página de 200px con links a redes sociales y otras opciones legales.
    • El pie de página tendrá el mismo fondo que el menú.

  3. Cuerpo de la página:

    • La página tendrá una estructura de dos columnas:

      • A la izquierda, una imagen de ejemplo (tomada por el fotógrafo).
      • A la derecha, el nombre, mail y teléfono del fotógrafo, junto con una pequeña lista de 3 servicios que ofrece.

  4. Estilo:

    • Utilizaremos variables en el CSS para los colores, intentando hacer coincidir con el icono del fotógrafo.
    • Daremos un aspecto profesional pero sencillo, utilizando Flexbox para centrar el contenido.

Página principal

Aquí tienes un ejemplo de cómo podría verse la página de inicio:

Página de inicio

Página de portfolio:

  1. Menú y pie de página:

    • Repetiremos el menú y pie de página de la página de inicio.

  2. Cuerpo de la página:

    • El cuerpo de la página será una galería de imágenes (al menos 6).
    • Las imágenes se dispondrán en 3 filas.
    • Al pasar el ratón por encima de las imágenes, se ampliarán ligeramente y se añadirá un borde alrededor.

Página de portfolio

Aquí tienes un ejemplo de cómo podría verse la página de portfolio:

Página de portfolio Página de portfolio

3. Explicación paso a paso de cómo hacer la práctica

3.1. Crear el proyecto

  1. Crea un nuevo proyecto Django:

    django-admin startproject photographer_site
cd photographer_site

  2. Realiza la migración de base de datos (aunque no la vayamos a usar por ahora):

    python manage.py migrate

3.2. Cambiar settings.py para poder usar las plantillas y los archivos estáticos

  1. Asegúrate de que la configuración en settings.py esté correcta para plantillas y archivos estáticos:

    # settings.py

STATIC_URL = 'static/'
STATICFILES_DIRS = [BASE_DIR / 'static']

TEMPLATES = [
    {
        ...
        'DIRS': [BASE_DIR / 'templates'],  # Definir el directorio de plantillas
        ...
    },
]

3.3. Modificar urls.py y crear views.py para dar acceso a las páginas

  1. Modifica urls.py del proyecto para incluir las rutas a las páginas index y portfolio:

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
    # photographer_site/urls.py
from django.contrib import admin
from django.urls import path
from portfolio import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.index, name='index'),
    path('portfolio/', views.portfolio, name='portfolio'),
]

  2. Crea las funciones en views.py para cargar las páginas:

    1
2
3
4
5
6
7
8
    # portfolio/views.py
from django.shortcuts import render

def index(request):
    return render(request, 'index.html', {})

def portfolio(request):
    return render(request, 'portfolio.html', {})

3.4. Crear la plantilla base en /layouts

  1. Crea una carpeta llamada layouts dentro de templates y define una plantilla base:
base.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
    {% block styles %}{% endblock %}
    <title>{% block title %}{% endblock %}</title>
</head>
<body>
    <header>
        {% include 'layouts/partials/menu.html' %}
    </header>
    <main>
        {% block content %}{% endblock %}
    </main>
    <footer>
        {% include 'layouts/partials/footer.html' %}
        {% block scripts %}{% endblock %}
    </footer>
</body>
</html>

En la plantilla base, hemos incluido bloques para el título, estilos adicionales, contenido principal y scripts adicionales. También hemos incluido fragmentos para el menú y el pie de página que crearemos más adelante. Vamos ahora a crear estos fragmentos.

Creamos la carpeta partials dentro de layouts y añadimos los siguientes archivos:

menu.html:

menu.html
1
2
3
4
5
6
7
8
9
<!-- templates/partials/menu.html -->
{% load static %}
<nav>
    <img src="{% static 'images/logo64.png' %}" alt="Logo" class="logo">
    <ul>
        <li><a href="{% url 'index' %}">Index</a></li>
        <li><a href="{% url 'portfolio' %}">Portfolio</a></li>
    </ul>
</nav>

footer.html:

footer.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<!-- templates/partials/footer.html -->
{% load static %}
<footer>
    <img src="{% static 'images/logo128.png' %}" alt="logo">
    <ul>
        <li><a href="#">Instagram</a></li>
        <li><a href="#">Facebook</a></li>
        <li><a href="#">Twitter</a></li>
    </ul>
    <ul>
        <li><a href="#">Legal</a></li>
        <li><a href="#">Privacy</a></li>
        <li><a href="#">Cookies</a></li>
    </ul>
</footer>

Tanto en el menú como en el pie de página, hemos utilizado la etiqueta {% static %} para cargar las imágenes desde la carpeta de archivos estáticos. también hacemos referencia al logo, podéis bajar las imagenes:

Logos

  • Logo 64x64: logo64
  • Logo 128x128: logo128

3.5. Crear la página de inicio y la página portfolio en /templates

  1. Página de inicio (index.html):

    index.html
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
    <!-- templates/index.html -->
{% extends 'layouts/base.html' %}

{% block title %}Inicio - Fotógrafo{% endblock %}

{% block content %}
    <h1>Mireia García - Fotógrafa</h1>
    <div class="about">
    <img src="https://picsum.photos/300/350?random=1" alt="foto1">
        <div class="about-content">
            <h3>Bienvenido a mi sitio web</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex cum possimus sed quasi incidunt id. Quasi quae eius facere inventore.</p>
        </div>
    </div>

{% endblock %}

  2. Página de portfolio (portfolio.html):

    portfolio.html
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
    <!-- templates/portfolio.html -->
{% extends 'layouts/base.html' %}

{% block title %}Portfolio - Fotógrafo{% endblock %}

{% block content %}
    <h1>Mi Portfolio</h1>
    <div class="photos">
        <img src="https://picsum.photos/300/350?random=1" alt="foto1">
        <img src="https://picsum.photos/300/350?random=2" alt="foto2">
        <img src="https://picsum.photos/300/350?random=3" alt="foto3">
        <img src="https://picsum.photos/300/350?random=4" alt="foto4">
        <img src="https://picsum.photos/300/350?random=5" alt="foto5">
        <img src="https://picsum.photos/300/350?random=6" alt="foto6">
    </div>
{% endblock %}

3.6. Comprobar que todo funciona correctamente

  1. Levanta el servidor:

    python manage.py runserver

  2. Visita en tu navegador:

    • http://127.0.0.1:8000/ para la página de inicio.
    • http://127.0.0.1:8000/portfolio/ para la página de portfolio.

Programador Backend vs Diseñador Frontend

En este punto tenemos que hablar de la importancia que tienen la diferenciación de roles dentro de la programación web. En este caso, hemos separado claramente la lógica del servidor (en views.py y urls.py) de la presentación (en las plantillas HTML) y del estilo visual (en los archivos CSS). Esta separación es fundamental para mantener un código limpio, organizado y fácil de mantener.

  • Programador Backend: Se encarga de la lógica del servidor, las rutas y la gestión de datos. Por tanto, nuestro trabajo como programadores habría terminado en este punto. Ahora sería trabajo de los diseñadores trabajar con CSS para dar el estilo que el cliente desea.

  • Diseñador Frontend: Se encarga de la presentación y el estilo visual. En este caso, el diseñador tomaría el control del archivo CSS para darle el aspecto deseado a la web.

En el punto siguiente, vamos a ver cómo crear un CSS sencillo pero efectivo para darle un buen aspecto visual a la web del fotógrafo. Ya que muchas veces tendremos que hacer nosotros mismos el CSS, aunque no sea nuestro rol principal.

3.7 Crear el CSS paso a paso

En este punto, vamos a construir el CSS de la web del fotógrafo paso a paso. Cada paso estará explicado con ejemplos, y a medida que avancemos, iremos mejorando el aspecto visual de la web de forma estructurada. CSS no es parte del contenido del curso, pero vamos a intentar hacer un CSS sencillo pero efectivo.

Paso 1: Iniciar el CSS creando las variables y eliminando los valores por defecto

Lo primero que haremos es iniciar el archivo CSS con algunas variables para los colores que usaremos en la web y eliminar todos los valores por defecto de los elementos HTML.

Crear el archivo style.css dentro de static/css/ y definir las variables globales:

style.css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
    /* Definir variables para los colores */
    :root {
        --color-primary: #ffce00;
        --color-secondary: #ffa300;
        --color-gb: #dedede;
        --color-text: #777;
        --font-title: 'free', sans-serif;
        --font-text: 'cafe';
    }

    /* Eliminar valores por defecto de todos los elementos */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: var(--font-text);
    }

Fuentes

Podemos ver en el CSS que hemos definido dos fuentes: free y cafe. Estas fuentes las podemos descargar de dafont.com e incluirlas en la carpeta static/fonts/. Luego, las importamos al CSS con @font-face:

@font-face {
    font-family: 'free';
    src: url('../fonts/free.ttf');
    }

@font-face {
    font-family: 'cafe';
    src: url('../fonts/cafe.ttf');
    }

Podemos descargar los archivos ttf que yo he utilizado:

Explicación:

  • Variables CSS: Usamos :root para definir las variables que nos ayudarán a gestionar los colores de manera más sencilla.
  • Reset de estilos: El selector * selecciona todos los elementos y nos permite eliminar márgenes y rellenos por defecto, y establece el box-sizing para que el tamaño de los elementos se calcule correctamente, incluyendo bordes y rellenos.

Paso 2: Maquetar el menú de navegación

Ahora vamos a empezar con el menú de navegación. Definiremos su tamaño, color de fondo, y la apariencia de los enlaces. En el menú tendrá un efecto hover que cambiará el color de fondo al pasar el ratón.

Agregar estilos para el nav y los enlaces:

style.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
/* Maquetar el nav (Menú de navegación) */
nav {
    width: 100vw;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--color-primary);
}

nav img {
    margin: 25px;
}

nav ul {
    list-style: none;
    display: flex;
    margin-right: 25px;
    justify-content: flex-end;
    align-items: center;
}

nav ul li {
    padding: 20px;
}

nav ul li a {
    text-decoration: none;
    color: var(--color-text);
    font-weight: 700;
    font-size: 30px;
    color: var(--color-text);
    font-family: var(--font-title);
}

nav ul li a:hover {
    color: var(--color-gb);
}

  • Explicación:

    Para la colocación de elementos en el menú, usamos Flexbox para alinear los elementos de manera sencilla y efectiva. Podemos ir a páginas como w3schools.com o css-tricks.com para aprender más sobre Flexbox.

    • nav: Usamos Flexbox para alinear los elementos del menú (logo y opciones) y les damos un color de fondo usando la variable --color-primary. También le decimos que ocupe todo el ancho de la pantalla con width: 100vw y una altura fija de 100px. con justify-content: space-between separamos el logo a la izquierda y las opciones a la derecha.
    • nav ul: También usamos Flexbox para alinear las opciones del menú horizontalmente. Eliminamos los puntos de la lista con list-style: none. con justify-content: flex-end alineamos las opciones a la derecha.
    • nav img: Añadimos un margen alrededor del logo para separarlo del borde.
    • nav ul li a: Estilizamos los enlaces del menú, eliminando el subrayado y definiendo el color, tamaño y fuente. Se trata de dar apariencia de botones a lo que son enlaces.
    • nav ul li a:hover: Definimos el efecto hover para cambiar el color del texto al pasar el ratón por encima.

A continuación, pasamos a maquetar el pie de página. El pie de página tendrá su propio logo más grande que el del menú y un color más oscuro. También tendrá enlaces a redes sociales y opciones legales.

Estilos para el pie de página (footer):

style.css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* Maquetar el footer (Pie de página) */
footer {
    width: 100vw;
    height: 150px;
    background-color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: space-around;
}

footer img {
    padding: 25px;
}

footer ul {
    list-style: none;
    justify-content: center;
}

footer ul li a{
    color: var(--color-gb);
    text-decoration: none;
}

  • Explicación:

    • footer: Usamos Flexbox para alinear los elementos del pie de página (logo y listas de enlaces) y les damos un color de fondo usando la variable --color-text. También le decimos que ocupe todo el ancho de la pantalla con width: 100vw y una altura fija de 150px. con justify-content: space-around distribuimos los elementos uniformemente.
    • footer img: Añadimos un padding alrededor del logo para separarlo del borde.
    • footer ul: Eliminamos los puntos de la lista con list-style: none y centramos las listas.
    • footer ul li a: Estilizamos los enlaces del pie de página, definiendo el color y eliminando el subrayado.

Paso 4: Maquetar el cuerpo de la página

Vamos a crear el diseño de dos columnas para el cuerpo de la página. A la izquierda colocaremos la imagen del fotógrafo, y a la derecha pondremos la información de contacto.

Estilizar el main:

style.css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
/* Maquetar el cuerpo de la página */
main {
    background-color: var(--color-gb);
    display: flex;
    flex-direction: column;
    width: 100vw;
    justify-content: flex-start;
    align-items: center;
    padding: 50px;

}

.about {
    display: flex;
    padding: 25px;
}

.about-content {
    width: 350px;
    padding: 50px;
}

  • Explicación:

    • main: Usamos Flexbox para centrar el contenido de la página y darle un fondo claro usando la variable --color-gb. También le damos un padding para separar el contenido de los bordes.
    • .about: Usamos Flexbox para colocar la imagen y el contenido de texto en una fila.
    • .about-content: Definimos un ancho fijo para el contenido de texto y le damos un padding para separarlo de la imagen.

También vamos a añadir una regla más para los títulos, para que utilicen también la fuente especial y el color adecuado:

style.css
1
2
3
4
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-title);
    color: var(--color-text);
}

Paso 6: Estilizar la galería de imágenes en el portfolio

En la página portfolio, vamos a crear una galería de imágenes donde cada imagen tenga un borde y un efecto hover.

  1. Estilos para la galería:
style.css
1
2
3
4
5
6
7
8
9
/* portfolio */
.photos {
    margin-top: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    width: 75%;
}

  • Explicación:

    • .photos: Usamos Flexbox con flex-wrap: wrap para que las imágenes se ajusten automáticamente en filas. justify-content: center centra las imágenes y gap: 25px añade espacio entre ellas. El ancho del contenedor se establece en un 25% para que las imágenes no ocupen todo el ancho de la pantalla.

Para la página de porfolio no es necesario añadir más CSS. Recordar que la mayor parte de la página la heredamos de la plantilla base a la que ya le hemos dado estilo. Por tanto solo necesitamos añadir el estilo específico para la galería de imágenes, el resto ya lo tenemos hecho.

Paso 7: Revisión y ajuste final

Levanta el servidor nuevamente y revisa cómo se ve la web en el navegador. Asegúrate de que todo esté funcionando correctamente y que el diseño sea atractivo.

Puede ser que según versión del navegador o tamaño de la pantalla, necesites hacer algunos ajustes menores en el CSS para mejorar la apariencia. No dudes en experimentar con los valores de padding, margin y colores para conseguir el resultado deseado. Pero recuerda que el objetivo es mantener un diseño sencillo y profesional.

4. Resumen de lo aprendido en la práctica

En esta práctica hemos cubierto cómo crear una web básica para un fotógrafo usando Django. A lo largo del ejercicio, hemos aprendido a:

  • Crear rutas y vistas para páginas como index y portfolio.
  • Implementar herencia de plantillas para reutilizar el diseño y el contenido común en varias páginas.
  • Gestionar archivos estáticos (CSS y JS) para darle estilo y funcionalidad a nuestra web.
  • Construir el CSS paso a paso, aunque no es el objetibo del curso, hemos visto cómo usar Flexbox para maquetar el contenido de manera efectiva, y otras técnicas básicas de CSS para mejorar la apariencia visual.