Compreenda as diferenças entre páginas estáticas e dinâmicas, bem como o uso de um CSS global. Além disso, a tecnologia Flask, uma estrutura leve em Python para aplicações web, fornece ferramentas para implementar ambas as abordagens de maneira eficiente. Ademais, permite o uso de um CSS global para estilização consistente. Assim, 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.
Páginas estáticas são aquelas cujo conteúdo é fixo e não muda. Por outro lado, páginas dinâmicas 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. Portanto, essas páginas permitem uma experiência personalizada e interativa.
No caso do Flask, isso é alcançado usando templates dinâmicos com o mecanismo Jinja2. Com ele, é possível inserir variáveis no HTML, criar lógicas condicionais e adicionar laços dentro dos templates. Dessa forma, o Flask proporciona flexibilidade e eficiência na construção de aplicações web. Consequentemente, ele atende tanto a demandas estáticas quanto dinâmicas. Além do mais, o uso de CSS global garante consistência visual em toda a aplicação.
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>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 15 16 17 |
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', 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.
