Referencial de Atividades
Todas as atividades
Ferramenta de Estudo

Glossário Interativo

Lista de termos com definições expansíveis, exemplos e links para o contexto de uso. O aprendiz consulta o glossário sob demanda durante o curso, sem precisar sair da página.

Conhecimento e compreensão glossário termos definições glossary

Experimente

Glossário de Fotografia

Medida da sensibilidade do sensor da câmera à luz. Valores baixos (100-200) produzem imagens mais limpas em boa luz; valores altos (1600+) permitem fotografar no escuro, mas geram mais ruído (granulado) na imagem.

Ex.: 'Subi o ISO pra 3200 pra conseguir fotografar o show sem flash.'

Abertura do diafragma da lente, medida em f/stops (f/1.8, f/8, f/16). Quanto menor o número, maior a abertura — mais luz entra e o fundo fica mais desfocado.

Ex.: 'Usei f/1.8 pro retrato, pra desfocar o fundo e destacar o rosto.'

Tempo que o sensor fica exposto à luz, medido em frações de segundo (1/1000s, 1/60s). Velocidades rápidas congelam movimento; velocidades lentas criam borrão (efeito de arrasto).

Ex.: 'Usei 1/1000s pra congelar o pássaro em pleno voo.'

Faixa de distância na cena que aparece nítida na foto. Depende da abertura, da distância até o assunto e da distância focal da lente.

Ex.: 'Com pouca profundidade de campo, só o rosto fica nítido e o fundo desaparece desfocado.'

Código-fonte

PHP

Dados de exemplo

Quatro termos fixos, cada um com definição e um exemplo de uso em frase.

1 <?php
2 $titulo = 'Glossário de Culinária';
3 $termos = [
4 ['termo' => 'Mise en place', 'definicao' => 'Preparar e organizar todos os ingredientes e utensílios antes de começar a cozinhar de fato.', 'exemplo' => 'Ex.: "Fiz o mise en place da receita toda antes de ligar o fogão."'],
5 ['termo' => 'Blanquear', 'definicao' => 'Mergulhar um alimento em água fervente por pouco tempo e depois em água gelada, pra parar o cozimento e preservar cor e textura.', 'exemplo' => 'Ex.: "Blanqueei o brócolis antes de congelar, pra manter a cor verde viva."'],
6 ['termo' => 'Reduzir', 'definicao' => 'Cozinhar um líquido em fogo baixo até evaporar parte da água, concentrando o sabor e engrossando a consistência.', 'exemplo' => 'Ex.: "Deixei o molho reduzir por 20 minutos até ficar encorpado."'],
7 ['termo' => 'Deglacear', 'definicao' => 'Adicionar líquido numa panela quente depois de dourar um alimento, soltando os pedacinhos grudados no fundo pra aproveitar no molho.', 'exemplo' => 'Ex.: "Deglaceei a panela com vinho branco depois de selar a carne."'],
8 ];
9 ?>

Título e lista de termos

Cada termo é um botão que expande a própria definição — o destaque visual (borda + fundo) mora num filho, não no item, pra não perder pro border do divide-y.

1 <div class="glossario" data-tipo="interactive-glossary" data-titulo="<?= htmlspecialchars($titulo) ?>">
2
3 <div class="glossario-cabecalho">
4 <p><?= htmlspecialchars($titulo) ?></p>
5 </div>
6
7 <div class="glossario-lista">
8 <?php foreach ($termos as $i => $termo): ?>
9 <div class="glossario-item">
10 <div class="glossario-borda">
11 <button type="button" class="glossario-btn" data-indice="<?= $i ?>" aria-expanded="false">
12 <span class="glossario-termo"><?= htmlspecialchars($termo['termo']) ?></span>
13 <span class="glossario-chevron">&#9662;</span>
14 </button>
15 <div class="glossario-conteudo">
16 <div class="glossario-conteudo-interno">
17 <p class="glossario-definicao"><?= htmlspecialchars($termo['definicao']) ?></p>
18 <p class="glossario-exemplo"><?= htmlspecialchars($termo['exemplo']) ?></p>
19 </div>
20 </div>
21 </div>
22 </div>
23 <?php endforeach; ?>
24 </div>
25
26 </div>
CSS

Card e cabeçalho

Contêiner geral e a caixa de título centralizada.

1 .glossario {
2 max-width: 480px;
3 border: 1px solid #e2e8f0;
4 border-radius: 16px;
5 background: #fff;
6 font-family: sans-serif;
7 overflow: hidden;
8 }
9
10 .glossario-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 .glossario-cabecalho p {
18 margin: 0;
19 font-weight: 700;
20 font-size: 18px;
21 color: #0f172a;
22 }
23
24 .glossario-lista { display: flex; flex-direction: column; }
25 .glossario-item + .glossario-item { border-top: 1px solid #e2e8f0; }

Destaque do termo aberto

A borda esquerda e o fundo tingido só aparecem com data-aberto="true" — sem isso, olhando rápido não dá pra saber qual termo está expandido.

1 .glossario-borda {
2 border-left: 4px solid transparent;
3 transition: border-color .15s, background-color .15s;
4 }
5
6 .glossario-borda[data-aberto="true"] {
7 border-left-color: #6366f1;
8 background: rgba(99, 102, 241, .05);
9 }
10
11 .glossario-btn {
12 width: 100%;
13 display: flex;
14 align-items: center;
15 justify-content: space-between;
16 gap: 12px;
17 padding: 16px 20px;
18 border: none;
19 background: none;
20 font: inherit;
21 text-align: left;
22 cursor: pointer;
23 }
24
25 .glossario-btn:focus-visible {
26 outline: 2px solid #6366f1;
27 outline-offset: -2px;
28 }
29
30 .glossario-termo { font-weight: 700; color: #4f46e5; font-size: 14px; }
31
32 .glossario-chevron {
33 color: #64748b;
34 transition: transform .2s;
35 flex-shrink: 0;
36 }
37
38 .glossario-borda[data-aberto="true"] .glossario-chevron { transform: rotate(180deg); }

Conteúdo animado

grid-template-rows de 0fr pra 1fr — a altura muda suavemente sem precisar medir pixel nenhum em JS.

1 .glossario-conteudo {
2 display: grid;
3 grid-template-rows: 0fr;
4 transition: grid-template-rows .2s ease-in-out;
5 }
6
7 .glossario-borda[data-aberto="true"] .glossario-conteudo { grid-template-rows: 1fr; }
8
9 .glossario-conteudo-interno { overflow: hidden; }
10
11 .glossario-definicao {
12 margin: 0 20px 10px;
13 padding-top: 0;
14 color: #334155;
15 font-size: 14px;
16 line-height: 1.6;
17 }
18
19 .glossario-exemplo {
20 margin: 0 20px 16px;
21 padding: 8px 12px;
22 border-left: 2px solid rgba(99, 102, 241, .4);
23 background: rgba(241, 245, 249, .6);
24 color: #64748b;
25 font-size: 13px;
26 font-style: italic;
27 }
JavaScript

Abrir e fechar termos

Um data-aberto por item controla borda, fundo, seta e altura ao mesmo tempo — tudo lido pelo CSS, o JS só troca o atributo.

1 document.addEventListener('DOMContentLoaded', function () {
2 var glossario = document.querySelector('[data-tipo="interactive-glossary"]');
3
4 glossario.querySelectorAll('.glossario-btn').forEach(function (botao) {
5 var borda = botao.closest('.glossario-borda');
6
7 botao.addEventListener('click', function () {
8 var aberto = borda.dataset.aberto === 'true';
9 borda.dataset.aberto = aberto ? 'false' : 'true';
10 botao.setAttribute('aria-expanded', aberto ? 'false' : 'true');
11 // Cada termo abre/fecha de forma independente — vários podem ficar
12 // abertos ao mesmo tempo, diferente de um acordeão exclusivo. Faz
13 // sentido aqui porque um glossário é consulta, não leitura em ordem.
14 });
15 });
16 });