Programación Back-End

Unidad 1: Tecnologías del lado del Servidor

Archivos estáticos

Redactado por Criz
Publicado el 1 de junio de 2024 a las 18:00
Última actualización el 1 de junio de 2024 a las 18:00

Acciones rapidas
Editar
Siguiente
Previo

Ahora si, Static files

Ahora vamos a dedicar este capítulo a los archivos estáticos y al tag url.

Los archivos estáticos son tus CSS, JSs, fuentes, imágenes, etc.
El tag url nos es de utilidad para obtener las rutas de aplicaciones.

Los tópicos del capítulo son:

Pasos previos

Inicia la consola PowerShell y activa el entorno virtual, a continuacion, inicia una instancia de VSC dentro de ProyectoDjango/.
Finalmente, inicia el servidor.

Si no tienes idea de que acabo de decir, ve al capítulo anterior.

Archivos estaticos

Primero debemos crear esta carpeta, la tenemos que llamar static

Dentro de static/ generamos las carpetas comunes:

Notese que el usar palabras en ingles es completamente normal y recomendado, ya que es el idioma universal.

Agregando un estilo CSS

Simplemente, dentro de static/css/ creamos un archivo .css, lo llamare, en un alarde de creatividad, style.css: 

1
2
3
4
body {
    min-height: 100%;
    background-color: rgb(100, 100, 100);
}

Ahora, para usarlo, debemos saber primero en donde lo meteremos.
Es bien sabido que el mejor lugar para importar nuestro css es dentro de base.html ya que es del que heredaran todos nuestros front-end points.
Así que, dentro de base.html: 

1
2
3
{% load static %}
<!DOCTYPE html>
<html lang="es">

Ahora, cargamos nuestro css dentro de head: 

1
2
3
4
<head>
    ...
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>

También cargare un logo en el navbar: 

1
2
3
4
5
6
...
<a class="navbar-brand" href="#">
    <img src="{% static 'images/films.svg' %}" alt="Logo" width="30" class="d-inline-block align-text-top">
    Peliculas
</a>
...

Y así es como se cargan los archivos estáticos. Nótese que static es relativo a la carpeta static/.

Un F5 a nuestro navegador y deberíamos ver el cambio. Si no es el caso, sigue los siguientes pasos en tu navegador web:

  1. Clic derecho sobre el sitio y selecciona Inspeccionar en el menú contextual.
    O presiona F12 para iniciar las Herramientas de Desarrollo.
  2. Dirígete a la sección Red.
  3. Marca el checkbox Deshabilitar la memoria caché
  4. Ahora sí, F5 y deberías ver los cambios.

Los navegadores cachean el contenido para cargar más rápido y para evitar sobrecargar el servidor.
Esto claramente no es útil, ya que cambios que hagamos al front-end quedaran como antes a no ser que limpiemos la cache.
Se utiliza Microsoft Edge para este curso.

Si quieres hacer un @import dentro de un CSS, deberás usar url("/static/css/archivo.css").

Redirigiendo entre aplicaciones

Ya tenemos dos aplicaciones, hogar y peliculas. Si estamos en peliculas, naturalmente debería haber un link que nos dirija a hogar.
Esta tarea se consigue mediante la etiqueta url.

Un ejemplo, dentro de base.html, bloque header: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">
            <img src="" alt="Logo" width="30" class="d-inline-block align-text-top">
            Peliculas
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav">

                <!--
                    url tag
                    url 'app_name : path.name'
                -->
                <a class="nav-link active" aria-current="page" href="{% url 'hogar:index' %}">Inicio</a>
                <a class="nav-link" href="{% url 'peliculas:index' %}">Peliculas</a>

            </div>
        </div>
    </div>
</nav>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
from django.urls import path
import hogar.views as app

app_name = "hogar" # 👈 namespace de la aplicacion (app_name)

urlpatterns = [
    path(
        '', # 👈 URL a asociar
        app.index, # 👈 funcion que renderiza
        name="index" # 👈 nombre de la ruta (path.name)
    ),
]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),

    path(
        '', # 👈 ruta asociada
        include( # 👈 para incluir las rutas de la aplicacion
            "hogar.urls", # 👈 donde se encuetran las rutas
            namespace="hogar" # 👈 indica el app_name asociado
        )
    ),
    path('peliculas/', include("peliculas.urls", namespace="peliculas")),
]

Sin estos valores, url no funcionara, por eso es tan importante indicar estos valores previamente.

Esto puede ser confuso, recomiendo leer los siguientes artículos:

Recuerda: Cada vez que haces esto...

1
<a href="/peliculas/">Peliculas</a>

UN GATITO MUERE.

Aunque funcione, luego en producción sufrirás cambiando todos los a href a la forma correcta con el tag url.


Siguiente
Previo