El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En este tema, aprenderás cómo manejar archivos estáticos en Flask. Los archivos estáticos son aquellos que no cambian en el servidor y se envían tal cual al cliente. Estos incluyen imágenes, archivos CSS, archivos JavaScript, etc.

Conceptos Clave

Archivos Estáticos: Archivos que no cambian en el servidor y se envían directamente al cliente.
Directorio static: El lugar predeterminado donde Flask busca archivos estáticos.
URL para Archivos Estáticos: Cómo generar URLs para acceder a archivos estáticos.

Estructura de Archivos Estáticos

Flask tiene una convención para manejar archivos estáticos. Por defecto, Flask busca archivos estáticos en un directorio llamado static en el directorio raíz de tu aplicación.

Ejemplo de Estructura de Proyecto

my_flask_app/
│
├── app.py
├── static/
│   ├── css/
│   │   └── styles.css
│   ├── js/
│   │   └── scripts.js
│   └── images/
│       └── logo.png
└── templates/
    └── index.html

Accediendo a Archivos Estáticos

Para acceder a archivos estáticos en tus plantillas, puedes usar la función url_for de Flask. Esta función genera la URL para un archivo estático.

Ejemplo de Plantilla HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Flask App</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
</head>
<body>
    <h1>Bienvenido a Mi Aplicación Flask</h1>
    <img src="{{ url_for('static', filename='images/logo.png') }}" alt="Logo">
    <script src="{{ url_for('static', filename='js/scripts.js') }}"></script>
</body>
</html>

Explicación del Código

{{ url_for('static', filename='css/styles.css') }}: Genera la URL para el archivo styles.css en el directorio static/css.
{{ url_for('static', filename='images/logo.png') }}: Genera la URL para el archivo logo.png en el directorio static/images.
{{ url_for('static', filename='js/scripts.js') }}: Genera la URL para el archivo scripts.js en el directorio static/js.

Ejercicio Práctico

Ejercicio 1: Añadir Archivos Estáticos a tu Proyecto

Crea un nuevo proyecto Flask con la siguiente estructura:

my_flask_app/
│
├── app.py
├── static/
│   ├── css/
│   │   └── styles.css
│   ├── js/
│   │   └── scripts.js
│   └── images/
│       └── logo.png
└── templates/
    └── index.html

En el archivo styles.css, añade el siguiente contenido:

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    text-align: center;
}

En el archivo scripts.js, añade el siguiente contenido:

document.addEventListener('DOMContentLoaded', function() {
    console.log('JavaScript cargado correctamente.');
});

En el archivo index.html, añade el siguiente contenido:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Flask App</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
</head>
<body>
    <h1>Bienvenido a Mi Aplicación Flask</h1>
    <img src="{{ url_for('static', filename='images/logo.png') }}" alt="Logo">
    <script src="{{ url_for('static', filename='js/scripts.js') }}"></script>
</body>
</html>

En el archivo app.py, añade el siguiente contenido:

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(debug=True)

Solución

Ejecuta tu aplicación Flask con el comando python app.py.
Abre tu navegador y ve a http://127.0.0.1:5000/.
Deberías ver la página con el estilo aplicado y el mensaje de JavaScript en la consola del navegador.

Resumen

En esta sección, aprendiste cómo manejar archivos estáticos en Flask. Vimos cómo organizar tus archivos estáticos en el directorio static, cómo generar URLs para estos archivos usando url_for, y cómo incluirlos en tus plantillas HTML. Practicar estos conceptos te ayudará a crear aplicaciones web más ricas y funcionales.

En el próximo módulo, exploraremos cómo trabajar con formularios y manejar la entrada de usuario en Flask.

Trabajando con Archivos Estáticos

Conceptos Clave

Estructura de Archivos Estáticos

Ejemplo de Estructura de Proyecto

Accediendo a Archivos Estáticos

Ejemplo de Plantilla HTML

Explicación del Código

Ejercicio Práctico

Ejercicio 1: Añadir Archivos Estáticos a tu Proyecto

Solución

Resumen

Curso de Desarrollo Web con Flask

Módulo 1: Introducción a Flask

Módulo 2: Conceptos Básicos de Flask

Módulo 3: Formularios y Entrada de Usuario

Módulo 4: Integración de Bases de Datos

Módulo 5: Autenticación de Usuarios

Módulo 6: Conceptos Avanzados de Flask

Módulo 7: APIs RESTful con Flask

Módulo 8: Despliegue y Producción

Módulo 9: Pruebas y Mejores Prácticas

Módulo 10: Extensiones y Ecosistema de Flask