| name | generate_material_placeholder |
| description | Instruções e template para criar materiais (wikis) de aula de forma aprofundada, com design Light Mode focado em leitura e impressão. |
Padrão Arquitetural para Materiais de Aula (Wiki)
Sempre que for solicitado criar ou atualizar uma página de "Material", você DEVE estruturá-la como uma Wiki Rica e Aprofundada. O material deve ir muito além de um "placeholder vazio", atuando como um guia definitivo de estudo.
1. Conteúdo Nível "Wiki"
- Contexto Histórico: Explique o "porquê" das ferramentas, de onde vieram e que problema resolvem no mercado atual.
- Teoria Aprofundada: Se a aula é sobre Pandas, explique o que é um DataFrame de forma análoga a algo de negócios.
- Blocos de Código (Hands-On): Sempre inclua múltiplos exemplos práticos de código resolvendo problemas de negócio reais.
- Avisos e Boas Práticas: Adicione blocos de alerta (ex:
div.alert-box) para atenção crítica (ex: commit e push do notebook antes de encerrar o Codespace).
- Ambiente Oficial: Todo passo prático deve pressupor GitHub Codespaces + Jupyter, com bibliotecas já instaladas via
requirements.txt. Não instruir uso de Google Colab, Google Drive ou instalação manual de Python; a persistência do trabalho é por git commit e git push.
2. Design System: Light Mode Premium & Print-Friendly
Os materiais são focados em leitura longa e impressão, portanto devem usar EXCLUSIVAMENTE Light Mode:
- Tipografia:
Outfit para textos e Fira Code para blocos de código.
- Cores: Fundo principal
#f4f8fb, container #ffffff, textos principais escuros #334155 e #1a2f5e.
- Botão de Impressão: O rodapé DEVE conter
<button onclick="window.print()" class="btn btn-print">🖨️ Imprimir Material</button>.
- Controles Flutuantes: O
<body> DEVE começar com a <nav class="floating-nav"> fixa no topo, com atalhos para o cronograma, para os slides da aula e para impressão. Ela acompanha a rolagem e some na impressão.
- Media Query (
@media print): O CSS DEVE conter regras para impressão (remover fundos, sombras, esconder a div .actions e a .floating-nav, usar fontes pretas em fundo branco).
- Favicon: Incluir sempre
<link rel="icon" type="image/png" href="../../assets/einstein-logo.png"> no <head>.
3. Template Base HTML/CSS
Sempre utilize o código abaixo como estrutura base exata do Material:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<link rel="icon" type="image/png" href="../../assets/einstein-logo.png">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Material · {{AULA_NUMERO}}</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=Fira+Code:wght@400;600&display=swap');
body { margin: 0; font-family: 'Outfit', system-ui, sans-serif; background: #f4f8fb; color: #334155; line-height: 1.7; padding: 3rem 1rem; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; }
.container { max-width: ; : ; : ; : ; : (,,,); : hidden; : solid ; }
{ : ; : relative; : solid ; : ; }
{ : inline-block; : (, , , ); : ; : ; : ; : ; : ; : ; : uppercase; : ; : solid (, , , ); }
{ : ; : (, , ); : ; : ; : ; : -; }
{ : ; }
{ : ; : ; : ; : ; }
, { : ; : ; : ; : ; }
{ : ; : solid ; : ; }
{ : ; : ; }
{ : ; }
, { : ; : ; }
{ : ; }
{ : ; : ; }
{ : ; : normal; : ; }
{ : ; : solid ; : ; : ; : , monospace; : ; : ; : ; }
{ : ; : ; : ; : ; : , monospace; : ; : ; : auto; : ; : solid ; : solid ; }
{ : ; : italic; }
{ : ; : ; }
{ : ; }
{ : ; : solid ; : ; : ; : ; : solid ; : ; }
{ : ; : ; }
{ : ; : ; : ; }
{ : flex; : ; : flex-start; : wrap; : solid ; : ; : ; }
{ : ; : ; : ; : none; : all ; : inline-flex; : center; : ; : , sans-serif; : pointer; : none; : ; }
{ : (-); }
{ : ; : ; : solid ; }
{ : ; : ; : (,,,); }
{ : (, , , ); : ; : solid (, , , ); }
{ : (, , , ); : ; : (,,,); }
{ : ; : ; }
{ : ; : (,,,); }
{ : fixed; : ; : ; : (-); : ; : flex; : center; : ; : ; : (,,,); : (); -webkit-: (); : solid ; : ; : (,,,); : ( - ); }
, { : inline-flex; : center; : ; : ; : ; : solid transparent; : , system-ui, sans-serif; : ; : ; : ; : none; : nowrap; : pointer; : all ; }
{ : ; : ; : ; }
{ : ; : ; : (,,,); }
{ : (, , , ); : ; : (, , , ); }
{ : (, , , ); : ; : (,,,); }
{ : ; : ; }
{ : ; : (,,,); }
, { : solid (,,,); : ; }
{ : ; }
(: ) {
, { : ; }
{ : column; }
{ : ; : center; }
{ : ; : ; : ; }
, { : auto; : ; : ; }
{ : ; }
}
(: ) {
{ : none; }
, { : ; : ; }
}
print {
{ : white; : ; : block; : ; }
{ : none; : none; : ; : ; }
, { : ; }
, , , , { : none ; }
{ : ; }
, , { : black ; : avoid; }
{ : solid ; : black; : white; }
{ : ; : solid ; : solid black; : avoid; }
{ : white; : solid ; : solid black; }
, { : black; }
{ : ; }
}
🏠 Cronograma
📊 Slides
🖨️ Imprimir
LABORATÓRIO {{AULA_NUMERO}}
{{TITULO_AULA}}
{{INTRODUCAO_EXTENSA_HISTORICA_E_CONCEITUAL}}
1. {{TITULO_TEORICO}}
{{TEXTO_TEORICO_APROFUNDADO}}
{{TITULO_ALERTA}}
{{TEXTO_ALERTA_SOBRE_RISCOS_OU_BOAS_PRATICAS}}
2. Hands-On: {{TITULO_PRATICO}}
{{EXPLICACAO_DO_CODIGO}}
# Exemplo de código altamente formatado
import biblioteca_exemplo
variavel = "Hello Wiki"
print(variavel)
🏠 Voltar ao Cronograma
📊 Ver Slides
🖨️ Imprimir Material
4. Navegação Offline
A div actions e a nav.floating-nav DEVEM SEMPRE conter os arquivos nomeados de forma exata terminando em .html (../../index.html e ../../slides/aula-XX.html) para habilitar navegação offline com file://.
