Caderno Cornell
Estrutura de anotações dividida em três zonas: notas principais, coluna de perguntas/palavras-chave e resumo. Organiza o pensamento durante e após uma leitura ou aula.
Experimente
Anotações sobre: Como o Sistema Imunológico Reconhece Invasores
Leia o texto abaixo e anote enquanto lê
O sistema imunológico humano funciona em duas camadas principais: a imunidade inata e a imunidade adaptativa. A imunidade inata é a primeira linha de defesa, presente desde o nascimento. Ela inclui barreiras físicas, como a pele e as mucosas, que impedem a entrada de patógenos, além de células como os macrófagos, que engolem e destroem invasores de forma genérica, sem reconhecer o agente específico. Essa resposta é rápida, geralmente em minutos ou horas, mas não guarda memória do contato anterior.
Quando a imunidade inata não é suficiente, entra em ação a imunidade adaptativa. Ela é mais lenta para se ativar — pode levar dias — porque depende do reconhecimento específico do invasor por células como os linfócitos T e B. Uma vez ativados, os linfócitos B produzem anticorpos que se ligam exatamente ao patógeno identificado, neutralizando-o ou marcando-o para destruição pelas demais células de defesa.
A grande vantagem da imunidade adaptativa é a memória imunológica: depois do primeiro contato com um patógeno, células de memória permanecem no corpo por anos, prontas para reagir muito mais rápido numa segunda exposição ao mesmo agente. É esse princípio que torna as vacinas eficazes — elas expõem o corpo a uma versão inofensiva ou enfraquecida do patógeno, treinando o sistema adaptativo sem causar a doença de verdade.
Perguntas / Palavras-chave
Notas principais
Resumo (preencha no dia seguinte)
Código-fonte
Dados de exemplo
Um texto curto para ler, dividido em parágrafos.
| 1 |
<?php
|
| 2 |
$titulo = 'Anotações sobre: As Fases do Sono';
|
| 3 |
$texto = [
|
| 4 |
'O sono humano se divide em ciclos de cerca de 90 minutos, alternando entre sono REM e sono não-REM. No sono não-REM, o corpo passa por estágios cada vez mais profundos, reduzindo a frequência cardíaca e a temperatura corporal — é a fase mais associada à recuperação física.',
|
| 5 |
'O sono REM, por sua vez, é quando ocorre a maior parte dos sonhos. O cérebro fica quase tão ativo quanto acordado, mas os músculos ficam temporariamente paralisados. Essa fase é associada à consolidação de memórias e ao processamento emocional.',
|
| 6 |
];
|
| 7 |
?>
|
Título e texto de leitura
A pessoa lê o texto antes de preencher as três zonas de anotação.
| 1 |
<div class="cornell" data-tipo="cornell-notes">
|
| 2 |
|
| 3 |
<div class="cornell-cabecalho">
|
| 4 |
<p><?= htmlspecialchars($titulo) ?></p>
|
| 5 |
</div>
|
| 6 |
|
| 7 |
<div class="cornell-corpo">
|
| 8 |
<div class="cornell-leitura">
|
| 9 |
<p class="cornell-rotulo">Leia o texto abaixo e anote enquanto lê</p>
|
| 10 |
<div class="cornell-texto">
|
| 11 |
<?php foreach ($texto as $paragrafo): ?>
|
| 12 |
<p><?= htmlspecialchars($paragrafo) ?></p>
|
| 13 |
<?php endforeach; ?>
|
| 14 |
</div>
|
| 15 |
</div>
|
As três zonas de anotação
Perguntas/palavras-chave (estreita) e notas (larga) lado a lado; resumo abaixo, em toda a largura.
| 1 |
<div class="cornell-grade">
|
| 2 |
<div class="cornell-coluna">
|
| 3 |
<p class="cornell-rotulo">Perguntas / Palavras-chave</p>
|
| 4 |
<textarea class="cornell-perguntas" placeholder="Perguntas e palavras-chave..."></textarea>
|
| 5 |
</div>
|
| 6 |
<div class="cornell-coluna cornell-coluna-larga">
|
| 7 |
<p class="cornell-rotulo">Notas principais</p>
|
| 8 |
<textarea class="cornell-notas" placeholder="Digite suas anotações principais aqui..."></textarea>
|
| 9 |
</div>
|
| 10 |
</div>
|
| 11 |
|
| 12 |
<div class="cornell-bloco">
|
| 13 |
<p class="cornell-rotulo">Resumo (preencha no dia seguinte)</p>
|
| 14 |
<textarea class="cornell-resumo" placeholder="Resumo em 2-3 frases..."></textarea>
|
| 15 |
</div>
|
| 16 |
|
| 17 |
<button type="button" class="cornell-download">Download em Markdown</button>
|
| 18 |
<p class="cornell-confirmacao" hidden>Anotações baixadas em .md!</p>
|
| 19 |
</div>
|
| 20 |
|
| 21 |
</div>
|
Card e cabeçalho
Contêiner geral e a caixa de título centralizada.
| 1 |
.cornell {
|
| 2 |
max-width: 560px;
|
| 3 |
border: 1px solid #e2e8f0;
|
| 4 |
border-radius: 16px;
|
| 5 |
background: #fff;
|
| 6 |
font-family: sans-serif;
|
| 7 |
overflow: hidden;
|
| 8 |
}
|
| 9 |
|
| 10 |
.cornell-cabecalho {
|
| 11 |
padding: 20px 24px;
|
| 12 |
border-bottom: 1px solid #cbd5e1;
|
| 13 |
background: rgba(241, 245, 249, .6);
|
| 14 |
text-align: center;
|
| 15 |
}
|
| 16 |
|
| 17 |
.cornell-cabecalho p {
|
| 18 |
margin: 0;
|
| 19 |
font-weight: 700;
|
| 20 |
font-size: 18px;
|
| 21 |
color: #0f172a;
|
| 22 |
}
|
| 23 |
|
| 24 |
.cornell-corpo { padding: 20px; }
|
Texto de leitura
O material que a pessoa lê antes de preencher as três zonas.
| 1 |
.cornell-rotulo {
|
| 2 |
margin: 0 0 8px;
|
| 3 |
font-size: 12px;
|
| 4 |
font-weight: 700;
|
| 5 |
text-transform: uppercase;
|
| 6 |
letter-spacing: .03em;
|
| 7 |
color: #64748b;
|
| 8 |
}
|
| 9 |
|
| 10 |
.cornell-leitura { margin-bottom: 20px; }
|
| 11 |
|
| 12 |
.cornell-texto {
|
| 13 |
padding: 16px;
|
| 14 |
border: 1px solid #cbd5e1;
|
| 15 |
border-radius: 12px;
|
| 16 |
background: rgba(241, 245, 249, .4);
|
| 17 |
color: #475569;
|
| 18 |
line-height: 1.6;
|
| 19 |
}
|
| 20 |
|
| 21 |
.cornell-texto p + p { margin-top: 12px; }
|
As três caixas de anotação
Mesmo tamanho de campo nas três zonas, só a altura do resumo é menor.
| 1 |
.cornell-grade {
|
| 2 |
display: grid;
|
| 3 |
grid-template-columns: 1fr 2fr;
|
| 4 |
gap: 12px;
|
| 5 |
margin-bottom: 12px;
|
| 6 |
}
|
| 7 |
|
| 8 |
.cornell-coluna textarea,
|
| 9 |
.cornell-bloco textarea {
|
| 10 |
width: 100%;
|
| 11 |
height: 120px;
|
| 12 |
padding: 10px 12px;
|
| 13 |
border: 1px solid #cbd5e1;
|
| 14 |
border-radius: 12px;
|
| 15 |
background: #f1f5f9;
|
| 16 |
font: inherit;
|
| 17 |
font-size: 14px;
|
| 18 |
color: #334155;
|
| 19 |
resize: none;
|
| 20 |
box-sizing: border-box;
|
| 21 |
}
|
| 22 |
|
| 23 |
.cornell-bloco textarea { height: 70px; }
|
Botão de download e confirmação
Largura total, mesmo padrão de ação primária usado no resto do site.
| 1 |
.cornell-download {
|
| 2 |
display: block;
|
| 3 |
width: 100%;
|
| 4 |
margin-top: 16px;
|
| 5 |
padding: 12px 16px;
|
| 6 |
border: none;
|
| 7 |
border-radius: 10px;
|
| 8 |
background: #4f46e5;
|
| 9 |
color: #fff;
|
| 10 |
font: inherit;
|
| 11 |
font-weight: 600;
|
| 12 |
cursor: pointer;
|
| 13 |
}
|
| 14 |
|
| 15 |
.cornell-confirmacao {
|
| 16 |
margin-top: 10px;
|
| 17 |
text-align: center;
|
| 18 |
font-size: 14px;
|
| 19 |
color: #15803d;
|
| 20 |
}
|
Montar o conteúdo em Markdown
Lê o rótulo de cada zona já na tela e monta um "##" por zona — não duplica o texto em outro lugar.
| 1 |
document.addEventListener('DOMContentLoaded', function () {
|
| 2 |
var cornell = document.querySelector('[data-tipo="cornell-notes"]');
|
| 3 |
var titulo = cornell.querySelector('.cornell-cabecalho p').textContent.trim();
|
| 4 |
var campos = [
|
| 5 |
cornell.querySelector('.cornell-perguntas'),
|
| 6 |
cornell.querySelector('.cornell-notas'),
|
| 7 |
cornell.querySelector('.cornell-resumo')
|
| 8 |
];
|
| 9 |
|
| 10 |
function gerarMarkdown() {
|
| 11 |
var linhas = ['# ' + titulo, ''];
|
| 12 |
campos.forEach(function (campo) {
|
| 13 |
var rotulo = campo.previousElementSibling.textContent.trim();
|
| 14 |
linhas.push('## ' + rotulo, '', campo.value.trim(), '');
|
| 15 |
});
|
| 16 |
return linhas.join('\n');
|
| 17 |
}
|
Baixar o arquivo
Um Blob vira um link temporário com o atributo "download" — sem precisar de nenhuma biblioteca.
| 1 |
function baixarMarkdown() {
|
| 2 |
var blob = new Blob([gerarMarkdown()], { type: 'text/markdown;charset=utf-8' });
|
| 3 |
var url = URL.createObjectURL(blob);
|
| 4 |
var link = document.createElement('a');
|
| 5 |
link.href = url;
|
| 6 |
link.download = 'cornell-notes.md';
|
| 7 |
document.body.appendChild(link);
|
| 8 |
link.click();
|
| 9 |
document.body.removeChild(link);
|
| 10 |
URL.revokeObjectURL(url);
|
| 11 |
}
|
Disparar o download e confirmar
O clique gera o arquivo e mostra a confirmação por alguns segundos.
| 1 |
var botao = cornell.querySelector('.cornell-download');
|
| 2 |
var confirmacao = cornell.querySelector('.cornell-confirmacao');
|
| 3 |
|
| 4 |
botao.addEventListener('click', function () {
|
| 5 |
baixarMarkdown();
|
| 6 |
confirmacao.hidden = false;
|
| 7 |
setTimeout(function () { confirmacao.hidden = true; }, 3000);
|
| 8 |
});
|