páginas estáticas e dinâmicas

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:

project/
|-- app.py
|-- static/
|   |-- css/
|   |   |-- styles.css
|   |-- js/
|   |-- images/
|-- templates/
|   |-- base.html
|   |-- index.html
|   |-- dynamic.html
|-- requirements.txt
|-- venv/

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:

: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;
}

: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);

}

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:

<!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>

<!DOCTYPE html>

<head>

<title>{% block title %}Minha Aplicação{% endblock %}</title>

</head>

<body>

<h1>Bem-vindo à Minha Aplicação</h1>

</header>

<div>

{% block content %}{% endblock %}

</div>

<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

{% 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 %}

{% 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:

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)

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:

{% extends 'base.html' %}
{% block title %}Página Dinâmica{% endblock %}
{% block content %}
<h2>Bem-vindo, {{ user_name }}!</h2>
<p>Hoje é {{ current_date }}.</p>
{% endblock %}

{% 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:

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)

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.

Referências:

Documentação Flask

Livros sobre Flask da Amazon

GitHub:

Projeto trampo_flask

Interno:

Área de Convivência

Paginas Estáticas e Dinâmicas com CSS Global no Flask

O Flask e a Organização de Arquivos

Criando um CSS Global

Criando Páginas Estáticas no Flask

Criando Páginas Dinâmicas no Flask

Vantagens de um CSS Global

Deixe um comentário Cancelar resposta