Compreenda as diferenças entre páginas estáticas e dinâmicas e o uso de um css global. A tecnologia Flask, uma estrutura leve em Python para aplicações web, fornece ferramentas para implementar ambas as abordagens de maneira eficiente, além de permitir o uso de um CSS global para estilização consistente. Este texto explora essas diferenças, o uso do Flask e como gerenciar um CSS global para uma aplicação bem organizada e visualmente atraente.
O que são páginas estáticas?
Páginas estáticas são aquelas cujo conteúdo é fixo e não muda.
O que são páginas dinâmicas?
Páginas dinâmicas, por outro lado, ajustam seu conteúdo com base em interações do usuário, entradas de dados ou informações vindas de um banco de dados ou API. Essas páginas permitem uma experiência personalizada e interativa.
No Flask, isso é alcançado usando templates dinâmicos com o mecanismo Jinja2, que permite a inserção de variáveis no HTML e criação de lógicas condicionais e laços dentro dos templates.
O Flask e a Organização de Arquivos
Antes de implementar páginas estáticas e dinâmicas, é importante entender como organizar os arquivos em um projeto Flask.
Uma estrutura típica de projeto pode ser:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
project/ |-- app.py |-- static/ | |-- css/ | | |-- styles.css | |-- js/ | |-- images/ |-- templates/ | |-- base.html | |-- index.html | |-- dynamic.html |-- requirements.txt |-- venv/ |
- app.py: Contém a lógica principal da aplicação Flask.
- static/: Diretório para arquivos estáticos como CSS, JavaScript e imagens.
- templates/: Diretório para arquivos HTML.
Criando um CSS Global
O CSS global é um arquivo de estilização que será aplicado a todas as páginas da aplicação, garantindo consistência visual.
No diretório static/css/, crie um arquivo chamado styles.css com o seguinte conteúdo:
|
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 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
:root{ --A1:#ffffff; --A2:#e9d1bf; --A3:#ceb69c; --A4:#8d6969; --B1:#c3b9c0; --B2:#7F7B8E; --B3:#666666; --B4:#000000; --C1:#d3e1cb; --C2:#99A98F; --C3:#436850; --C4:#1A4D2E; --D1:#D1E9F6; --D2:#B3C8CF; --D3:#6482AD; --D4:#134B70; --E1:#FFE7E7; --E2:#CAA6A6; --E3:#B47B84; --E4:#481E14; --F1:#f0ecbf; --F2:#fae385; --F3:#FF9A00; --F4:#DC5F00; --G1:#e8e4a9; --G2:#ebe594; --G3:#dace1c; --G4:#ebde2f; --H1:#fdf4f8; --H2:#ed99c3; --H3:#A0153E; --H4:#C40C0C; --I1:#EBD3F8; --I2:#C8A1E0; --I3:#AD49E1; --I4:#7A1CAC; } h1,h2,h3,h4,h5,h6{ color: var(--B4); } p{ color: var(--B4)} body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; color: var(--A1); } header { background: var(--I3); color: var(--A1); padding: 1rem 0; text-align: center; } footer { background: var(--I4); color: var(--A1);; text-align: center; padding: 0.5rem 0; position: fixed; width: 100%; bottom: 0; } .container { max-width: 1200px; margin: 0 auto; padding: 1rem; } |
- Referenciar o CSS no Template Base:
No diretório templates/, crie um arquivo base.html que servirá como modelo base para outras páginas:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{% block title %}Minha Aplicação{% endblock %}</title> <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}"> </head> <body> <header> <h1>Bem-vindo à Minha Aplicação</h1> </header> <div> {% block content %}{% endblock %} </div> <footer> <p>&copy; 2025 Minha Empresa</p> </footer> </body> </html> |
Criando Páginas Estáticas no Flask
Com o template base configurado, criar páginas estáticas é simples. Por exemplo, crie uma página index.html
|
1 2 3 4 5 6 |
{% extends 'base.html' %} {% block title %}Home{% endblock %} {% block content %} <h2>Esta é uma página estática.</h2> <p>O conteúdo aqui não muda com base em interações do usuário.</p> {% endblock %} |
No app.py, registre a rota correspondente:
|
1 2 3 4 5 6 7 8 |
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) |
Criando Páginas Dinâmicas no Flask
Para uma página dinâmica, crie um arquivo dynamic.html:
|
1 2 3 4 5 6 |
{% extends 'base.html' %} {% block title %}Página Dinâmica{% endblock %} {% block content %} <h2>Bem-vindo, {{ user_name }}!</h2> <p>Hoje é {{ current_date }}.</p> {% endblock %} |
Atualize o app.py para passar dados dinâmicos:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
from flask import Flask, render_template from datetime import datetime app = Flask(__name__) # Fazendo Página Estática e styles.css @app.route('/') def index(): return render_template("index.html") @app.route('/dynamic/<name>') def dynamic(name): current_date = datetime.now().strftime('%d/%m/%Y') return render_template('dynamic.html', user_name=name, current_date=current_date) # Executa o aplicativo LOCALMENTE (localhost) na porta 5000 if __name__ == '__main__': app.run(host='127.0.0.1', port=5000) |
Quando o usuário acessar a rota /dynamic/SeuNome, o Flask renderizará a página dinâmica com os dados fornecidos.
Vantagens de um CSS Global
- Consistência Visual: Todas as páginas compartilham a mesma estilização, criando uma experiência uniforme.
- Facilidade de Manutenção: Alterar uma regra CSS afeta todas as páginas simultaneamente.
- Organização: Um arquivo centralizado evita redundância de código.
Área de Convivência