El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Plantillas y Archivos Estáticos

Siguiente ►
►

En este tema, aprenderemos sobre el sistema de plantillas de Django y cómo manejar archivos estáticos como CSS, JavaScript e imágenes. Las plantillas permiten separar la lógica de la presentación, mientras que los archivos estáticos son esenciales para el diseño y la funcionalidad del frontend.

  1. Introducción a las Plantillas de Django

¿Qué es una Plantilla?

Una plantilla en Django es un archivo de texto que define la estructura o el diseño de un documento, generalmente una página web. Las plantillas pueden contener tanto HTML como etiquetas de plantilla de Django, que permiten insertar contenido dinámico.

Configuración de Plantillas

Para usar plantillas en Django, primero debemos asegurarnos de que la configuración del proyecto está correctamente configurada. En el archivo settings.py, asegúrate de que la variable TEMPLATES esté configurada correctamente:

# settings.py
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

Creando una Plantilla

  1. Crear el Directorio de Plantillas: Dentro de tu proyecto, crea un directorio llamado templates.
  2. Crear un Archivo de Plantilla: Dentro del directorio templates, crea un archivo HTML, por ejemplo, index.html.
<!-- templates/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mi Primera Plantilla</title>
</head>
<body>
    <h1>¡Hola, Mundo!</h1>
    <p>Esta es mi primera plantilla en Django.</p>
</body>
</html>

Renderizando una Plantilla en una Vista

Para renderizar una plantilla, utilizamos la función render en nuestra vista.

# views.py
from django.shortcuts import render

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

Enrutamiento de la Vista

Asegúrate de que la URL correspondiente esté configurada para llamar a la vista.

# urls.py
from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='index'),
]

  1. Archivos Estáticos

¿Qué son los Archivos Estáticos?

Los archivos estáticos son archivos que no cambian en el servidor, como CSS, JavaScript e imágenes. Django proporciona una forma sencilla de gestionar estos archivos.

Configuración de Archivos Estáticos

En el archivo settings.py, asegúrate de que las variables STATIC_URL y STATICFILES_DIRS estén configuradas correctamente.

# settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

Creando y Usando Archivos Estáticos

  1. Crear el Directorio de Archivos Estáticos: Dentro de tu proyecto, crea un directorio llamado static.
  2. Agregar Archivos Estáticos: Dentro del directorio static, puedes crear subdirectorios para CSS, JavaScript e imágenes.
myproject/
    static/
        css/
            styles.css
        js/
            scripts.js
        images/
            logo.png
  1. Referenciar Archivos Estáticos en Plantillas: Usa la etiqueta {% static %} para referenciar archivos estáticos en tus plantillas.
<!-- templates/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mi Primera Plantilla</title>
    <link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}">
</head>
<body>
    <h1>¡Hola, Mundo!</h1>
    <p>Esta es mi primera plantilla en Django.</p>
    <img src="{% static 'images/logo.png' %}" alt="Logo">
    <script src="{% static 'js/scripts.js' %}"></script>
</body>
</html>

Ejemplo Práctico

Vamos a crear un ejemplo práctico que combine plantillas y archivos estáticos.

  1. Crear el Directorio de Plantillas y Archivos Estáticos:
myproject/
    templates/
        index.html
    static/
        css/
            styles.css
        js/
            scripts.js
        images/
            logo.png
  1. Contenido de index.html:
<!-- templates/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mi Primera Plantilla</title>
    <link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}">
</head>
<body>
    <h1>¡Hola, Mundo!</h1>
    <p>Esta es mi primera plantilla en Django.</p>
    <img src="{% static 'images/logo.png' %}" alt="Logo">
    <script src="{% static 'js/scripts.js' %}"></script>
</body>
</html>
  1. Contenido de styles.css:
/* static/css/styles.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    text-align: center;
    padding: 50px;
}

h1 {
    color: #333;
}

p {
    color: #666;
}
  1. Contenido de scripts.js:
// static/js/scripts.js
document.addEventListener('DOMContentLoaded', function() {
    console.log('¡JavaScript cargado correctamente!');
});
  1. Contenido de logo.png: Usa cualquier imagen de logo que tengas disponible.

Ejercicio Práctico

Ejercicio: Crea una nueva vista y plantilla que muestre una lista de artículos. Cada artículo debe tener un título, una descripción y una imagen.

Solución:

  1. Crear el Directorio de Plantillas y Archivos Estáticos:
myproject/
    templates/
        articles.html
    static/
        css/
            articles.css
        images/
            article1.png
            article2.png
  1. Contenido de articles.html:
<!-- templates/articles.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lista de Artículos</title>
    <link rel="stylesheet" type="text/css" href="{% static 'css/articles.css' %}">
</head>
<body>
    <h1>Lista de Artículos</h1>
    <div class="article">
        <h2>Artículo 1</h2>
        <p>Descripción del artículo 1.</p>
        <img src="{% static 'images/article1.png' %}" alt="Artículo 1">
    </div>
    <div class="article">
        <h2>Artículo 2</h2>
        <p>Descripción del artículo 2.</p>
        <img src="{% static 'images/article2.png' %}" alt="Artículo 2">
    </div>
</body>
</html>
  1. Contenido de articles.css:
/* static/css/articles.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    text-align: center;
    padding: 50px;
}

h1 {
    color: #333;
}

.article {
    margin-bottom: 20px;
}

.article h2 {
    color: #555;
}

.article p {
    color: #777;
}
  1. Crear la Vista y Configurar la URL:
# views.py
from django.shortcuts import render

def articles(request):
    return render(request, 'articles.html')

# urls.py
from django.urls import path
from . import views

urlpatterns = [
    path('articles/', views.articles, name='articles'),
]

Conclusión

En esta sección, hemos aprendido cómo trabajar con plantillas y archivos estáticos en Django. Las plantillas nos permiten separar la lógica de la presentación, mientras que los archivos estáticos son esenciales para el diseño y la funcionalidad del frontend. Con estos conocimientos, estamos listos para crear aplicaciones web más complejas y visualmente atractivas.

En el próximo tema, exploraremos los modelos y las bases de datos en Django, lo que nos permitirá manejar datos de manera eficiente y estructurada.

◄ Anterior
◄
Siguiente ►
►
El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados