Uso de archivos estáticos: imágenes

¿Cómo manejar archivos estáticos en Flask?

Manejar archivos estáticos como imágenes y archivos CSS es esencial para darle estilo y funcionalidad a nuestra aplicación web. En Flask, estos archivos se gestionan de una forma similar a los templates, permitiendo una integración sencilla y estructurada.

Crear el directorio de archivos estáticos

Primero, necesitamos definir un directorio especial en la raíz del proyecto para alojar estos archivos:

1. Directorio principal: Se llama static.
2. Subdirectorios: Para mantener el orden, crea subdirectorios como images para imágenes y css para estilos.

Por ejemplo, dentro del directorio static, puedes crear:

/static
    /images
    /css

Cargar imágenes en un proyecto Flask

Para incluir una imagen en tu aplicación web, sigue estos pasos:

1. Añade la imagen: Guarda el logo o imagen que desees en el subdirectorio images, por ejemplo, platzi.png.
2. Referencia desde HTML: Utiliza el tag de imagen con la función url_for para enlazar tu imagen correctamente.

Dentro de tu archivo HTML, el código para mostrar la imagen se vería así:

<img src="{{ url_for('static', filename='images/platzi.png') }}" alt="platzi-logo">

Refrescar archivos estáticos en el navegador

A veces, los archivos estáticos se quedan en caché del navegador, como sucede comúnmente en Google Chrome. Para asegurarte de que los cambios se reflejan correctamente, realiza un "hard reload" con:

• Mac: Command + Shift + R

Esto garantiza que tu archivo actualizado se cargue en el navegador.

Estilizar con CSS en Flask

Para aplicar estilos mediante CSS, el proceso es muy similar al de las imágenes:

1. Crea un archivo CSS: En el directorio css, por ejemplo main.css.
2. Define tus reglas: A continuación, define tus estilos dentro de este archivo. Por ejemplo, para ajustar el tamaño de las imágenes:

img {
    max-width: 30px;
}

3. Integra el CSS en HTML: Asegúrate de enlazar el CSS en el head de tu archivo HTML. Utiliza url_for de la siguiente manera:

<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">

Recuerda hacer un "hard reload" para confirmar que los estilos aplican correctamente.

Modificar la fuente con CSS

Si deseas cambiar la fuente de toda tu aplicación a sans-serif, actualiza tu archivo CSS de esta forma:

html {
    font-family: sans-serif;
}

Una vez más, verifica el cambio refrescando adecuadamente el navegador.

Manejar archivos estáticos en Flask es fundamental para crear aplicaciones web dinámicas y estéticamente atractivas. Continúa explorando y experimentando con estos conceptos para darle un toque personal a tus proyectos. Mantente motivado y sigue aprendiendo; cada paso te acerca a convertirte en un experto en desarrollo web.