antonino, Autor em Área de Trampo

Formatação em Markdown e MathML

18/01/202512/01/2025 Por antonino

O Markdown e o MathML são linguagens de marcação que servem, basicamente, para nos auxiliar a escrever um HTML simples e para adicionarmos fórmulas ao HTML. A seguir, falaremos da formatação em Markdown e MathML. Ambas possuem vantagens significativas, além de algumas restrições que devem ser consideradas.

Markdown

Markdown e MathML oferecem formatações práticas para criar conteúdos bem estruturados e visualmente agradáveis. Além disso, ambas são úteis em diferentes contextos e propósitos. **Portanto**, podem ser aplicadas em diversos tipos de projetos digitais, o que torna o processo de desenvolvimento mais ágil e prático para os profissionais da área. **Ademais**, o uso dessas linguagens promove organização e facilita a manutenção do código.

Algumas Restrições

**Contudo**, ao trabalhar com imagens, é importante considerar que frameworks como o Next.js não suportam imagens diretamente via Markdown. **Por outro lado**, eles utilizam o componente Image, que otimiza o carregamento de forma assíncrona. **Da mesma forma**, no WordPress, é necessário o uso de plugins específicos para otimizar imagens e convertê-las para o formato WEBP. **Portanto**, é essencial avaliar as necessidades do projeto ao escolher a abordagem mais adequada. **Assim**, deve-se levar em consideração tanto as vantagens quanto as limitações de cada plataforma antes de decidir.

Markdown em Projetos com React, Angular e Next.js

**Em resumo**, Markdown é uma excelente opção para quem deseja escrever de forma rápida e descomplicada, especialmente ao utilizar ferramentas como React ou Next.js. **Além disso**, sua simplicidade e eficiência são suas maiores qualidades. **Portanto**, ele continua sendo uma escolha popular no desenvolvimento de projetos digitais modernos. **Assim**, destaca-se pela facilidade de uso e pela compatibilidade com diversos ambientes de desenvolvimento. **Dessa forma**, Markdown permanece como uma solução prática e eficiente para os desenvolvedores que buscam agilidade no dia a dia.

Formatação em Markdown

Títulos ( h1, h2, h3 ,h4 ,h5 ,h6 )

# h1

## h2

### h3

#### h4

##### h5

###### h6

Negrito

**texto**

Itálico

__texto__

Link

[texto](https://site.com/)

Lista não ordenada de Itens

* 1 item

* 2 item

Lista ordenada de Itens

1. 1 novo item

2. 2 novo item

Imagens

![Alt ou título da imagem](URL da imagem)

Observação:

Nextjs não utilizar imagens pelo markdown (como acima mencionado) , pois utiliza 'Image' que permite otimizar o seu carregamento de forma assíncrona

WordPress também não se utiliza Markdown, pois existe um editor de texto para as postagens, ademais, existem plugins específicos para transformar as imagens em WEBP e carregá-las de forma assíncrona

Citação

>Citação de um autor de um livro

>que faz parte de um trabalho acadêmico

Código

~~~javascript

Linha de código em Javascript.

~~~

```javascript

Código em Javascript.

```

Tabela

Exemplo | Valor do exemplo

--------- | ------

caneta | R$ 10

lápis | R$ 8

borracha | R$ 7

Alinhado a esquerda | Centralizado | Alinhado a direita

:--------- | :------: | -------:

Paulo | 1 | 10.00

Patrícia | 1 | 40.00

José | 1 | 5.00

Maria | 1 | 3.00

MathML:

Significa Mathematical Markup Language, uma linguagem de marcação baseada em XML destinada a representar expressões matemáticas de forma estruturada e compreensível para máquinas. **Assim como** o HTML facilita a criação de páginas web, o MathML possibilita a criação de documentos matemáticos interativos. **Além disso**, é amplamente usado em ambientes acadêmicos e científicos. **Dessa forma**, ele oferece uma maneira eficaz de integrar a matemática em ambientes digitais. **Portanto**, é particularmente útil para documentos complexos que requerem a exibição precisa de fórmulas matemáticas e outros tipos de conteúdo técnico.

Vantagens e Flexibilidade do MathML em Ambientes Acadêmicos e Científicos

Uma das principais vantagens do MathML é sua capacidade de exibir equações matemáticas de forma precisa em navegadores. **Embora** o MathML seja suportado por alguns navegadores modernos, ele ainda não é universalmente compatível com todos, o que, **portanto**, pode limitar seu uso em determinadas plataformas. **No entanto**, em ambientes controlados, como sistemas de ensino ou publicações científicas, ele se destaca pela precisão. **Dessa forma**, sua utilidade cresce em áreas especializadas, onde a exibição exata de fórmulas é essencial. **Portanto**, o MathML continua sendo uma ferramenta valiosa nesses contextos, especialmente em disciplinas que exigem o uso extensivo de equações matemáticas complexas.

**Além disso**, podemos dividi-lo em duas partes: **Presentation MathML** e **Content MathML**. **Por exemplo**, o Presentation MathML é usado para exibir visualmente a matemática, garantindo que a equação apareça da maneira correta. **Já** o Content MathML é focado em representar o significado da equação, facilitando a manipulação de dados e a integração com outros sistemas. **Dessa forma**, essas duas divisões permitem que o MathML atenda a diferentes necessidades em contextos acadêmicos e científicos.

math

Elemento	Descrição
math	É a tag de nível superior (raiz) de todos os elementos MathML.

Resultado	Tag MathML
$Exemplo$	`<math> <mi>Exemplo</mi> </math>`

mrow

Elemento	Descrição
mrow	Indica linha de uma determinada tabela ou matriz.

Resultado	Tag MathML
$x + y$	`<math> <mrow> <mi>x</mi> <mo>+</mo> <mi>y</mi> </mrow> </math>`

msqrt

Elemento	Descrição
msqrt	Exibe o símbolo de raízes quadradas em uma expressão.

Resultado	Tag MathML
$\sqrt{9}$	`<math> <msqrt> <mn>9</mn> </msqrt> </math>`

msub

Elemento	Descrição
msub	É usado para adicionar subscrito em uma determinada expressão.

Resultado	Tag MathML
$x_{2}$	`<math> <msub> <mi>x</mi> <mn>2</mn> </msub> </math>`

msup

Elemento	Descrição
msup	É usado para adicionar sobrescrito em uma determinada expressão.

Resultado	Tag MathML
$y^{3}$	`<math> <msup> <mi>y</mi> <mn>3</mn> </msup> </math>`

mo

Elemento	Descrição
mo	Descrever o símbolo ou operador matemático e pode ser combinado com outros elementos como <mi> (identificadores matemáticos) ou (números).

Resultado	Tag MathML
$=$	`<math> <mo>=</mo> </math>`

mi

Elemento	Descrição
mi	Representa identificadores como variável ou constante.

Resultado	Tag MathML
$z$	`<math> <mi>z</mi> </math>`

mtable

Elemento	Descrição
mtable	É usado para criar tabela ou matriz.

Resultado	Tag MathML
$\begin{matrix} a & b \\ c & d \end{matrix}$	`<math> <mtable> <mtr> <mtd> <mi>a</mi> </mtd> <mtd> <mi>b</mi> </mtd> </mtr> <mtr> <mtd> <mi>c</mi> </mtd> <mtd> <mi>d</mi> </mtd> </mtr> </mtable> </math>`

Markdown e MathML: saiba mais nos links abaixo.

Referências:

Documentação MatML
Tutorial MarkDown

livros sobre Markdown
livros sobre MathML

Interno:

Quem somos

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

19/01/202506/01/2025 Por antonino

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