decoda/docs/edu/recursos/playground/blocos.md

---
sidebar_position: 1
title: "Blocos"
---

# Laboratório de Blocos

O **Laboratório de Blocos** é um ambiente de experimentação onde estudantes e educadores podem criar programas com blocos visuais sem limitações de fases. Ele foi pensado para apoiar aprendizagem exploratória, permitir testes rápidos de ideias e facilitar a transição progressiva da programação visual para a textual.

## Objetivo do laboratório

No laboratório, o foco está em:

- **Experimentação livre**: criar programas sem restrições de níveis ou desafios pré-definidos.
- **Aprendizagem exploratória**: testar hipóteses, observar resultados e refinar soluções.
- **Visualização de código**: entender como blocos se transformam em código textual.
- **Transição progressiva**: preparar estudantes para linguagens baseadas em texto.

## JavaScript e Python: entenda a diferença

No laboratório, você vê duas versões do mesmo programa:

**JavaScript** <i class="lucide lucide-play-circle"></i> (código real)

- É o código que **realmente executa** no navegador.
- Ao clicar em "Executar", é este código que roda.
- Os resultados aparecem no console da página.

**Python** <i class="lucide lucide-eye"></i> (código ilustrativo)

- É uma **tradução visual** dos mesmos blocos.
- Serve para familiarizar estudantes com sintaxe Python.
- **Não é executado** nesta interface.

:::info Por que apenas JavaScript executa?
O navegador web entende JavaScript nativamente. Python requer um ambiente específico de execução que não está disponível diretamente nesta interface de laboratório. Por isso, aqui o Python é usado como recurso pedagógico de visualização.
:::

## Como funciona

### Interface em 3 painéis

<img
  src={require("../../../assets/tela-inteira-laboratorio.png").default}
  alt="Tela completa do laboratório Decoda"
  style={{ display: "block", margin: "0 auto", width: "80%", maxWidth: "100%", height: "auto" }}
/>

1. **Editor de blocos** (esquerda)

- Arraste blocos da caixa de ferramentas.
- Monte seu programa como um quebra-cabeça.
- Organize e conecte os blocos logicamente.

<img
  src={require("../../../assets/editor-bloco-laboratorio.png").default}
  alt="Editor de blocos na tela do laboratório"
  style={{ display: "block", margin: "0 auto", width: "50%", maxWidth: "100%", height: "auto" }}
/>

2. **Visualizador de código** (centro/direita superior)

- Veja o código JavaScript e Python gerado.
- Alterne entre as duas linguagens.
- Acompanhe como blocos viram texto.

<img
  src={require("../../../assets/visualizador-codigo-laboratorio.png").default}
  alt="Visualizador de código no laboratório"
  style={{ display: "block", margin: "0 auto", width: "50%", maxWidth: "100%", height: "auto" }}
/>

3. **Console de saída** (centro/direita inferior)

- Execute seu programa.
- Veja resultados e mensagens.
- Identifique erros e faça debug.

<img
  src={require("../../../assets/console-laboratorio.png").default}
  alt="Visualizador de console no laboratório"
  style={{ display: "block", margin: "0 auto", width: "50%", maxWidth: "100%", height: "auto" }}
/>

## Fluxo de uso

```mermaid
flowchart TD
  A[Abrir laboratório] --> B[Montar programa com blocos]
  B --> C[Visualizar código gerado]
  C --> D[Executar]
  D --> E[Analisar resultado no console]
  E --> F[Refinar a solução]
  F --> B
```

## Categorias de blocos disponíveis

- <i class="lucide lucide-zap"></i> **Lógica**: condicionais, comparações, operadores booleanos.
- <i class="lucide lucide-repeat"></i> **Laços**: repetições (`for`, `while`, `forEach`).
- <i class="lucide lucide-calculator"></i> **Matemática**: operações e funções matemáticas.
- <i class="lucide lucide-type"></i> **Texto**: manipulação de strings e concatenação.
- <i class="lucide lucide-list"></i> **Listas**: arrays e manipulação de coleções.
- <i class="lucide lucide-palette"></i> **Cores**: operações com cores RGB e HSV.
- <i class="lucide lucide-variable"></i> **Variáveis**: criação e atualização de variáveis.
- <i class="lucide lucide-function-square"></i> **Funções**: definição de funções customizadas.

## Primeiros passos

1. Acesse o Laboratório no menu da plataforma.
2. Explore a caixa de ferramentas.
3. Arraste um bloco de saída para a área de trabalho.
4. Digite uma mensagem.
5. Clique em "Executar" e observe o console.

:::tip Dica para iniciantes
Comece com programas simples: mensagens, cálculos básicos e variáveis. Em seguida, avance para condicionais e laços.
:::

## Para o educador: como integrar nas aulas

O laboratório pode ser usado em diferentes momentos:

### 1. Demonstrações ao vivo

- Projete a tela e monte programas com a turma.
- Convide estudantes a sugerirem blocos e lógica.
- Mostre em tempo real como o código se comporta.

### 2. Atividades guiadas

- Proponha desafios com objetivo claro.
- Circule pela sala apoiando individualmente.
- Permita soluções diferentes para o mesmo problema.

### 3. Exercícios livres

- Defina um objetivo geral (por exemplo, "criar uma calculadora").
- Incentive exploração e experimentação.
- Valorize criatividade e justificativa das escolhas.

### 4. Compartilhamento de soluções

- Peça apresentações curtas dos programas.
- Compare abordagens distintas para o mesmo desafio.
- Estimule aprendizagem entre pares.

## Ideias de atividades

### Nível iniciante

#### Apresentação pessoal

**Objetivo**: usar blocos de texto e variáveis.

- Armazene nome e idade em variáveis.
- Exiba uma mensagem de apresentação completa.

**Conceitos**: variáveis, concatenação, saída de dados.

#### Calculadora básica

**Objetivo**: operações matemáticas e variáveis.

- Armazene dois números.
- Calcule soma, subtração, multiplicação e divisão.
- Mostre todos os resultados.

**Conceitos**: operadores, variáveis numéricas, múltiplas saídas.

#### Conversor de temperatura

**Objetivo**: aplicação de fórmula matemática.

- Leia temperatura em Celsius.
- Aplique $F = (C \times 9/5) + 32$.
- Exiba o resultado.

**Conceitos**: variáveis, operações e fórmulas.

### Nível intermediário

#### Tabuada automática

**Objetivo**: laços de repetição.

- Escolha um número.
- Multiplique de 1 a 10 com um laço.
- Imprima cada linha da tabuada.

**Conceitos**: `for`, variáveis e sequência de operações.

#### Lista de compras

**Objetivo**: manipulação de listas.

- Crie lista com 5 itens.
- Adicione um item.
- Remova um item.
- Exiba a lista final.

**Conceitos**: arrays e operações em coleção.

#### Verificador de números

**Objetivo**: condicionais.

- Receba um número.
- Verifique se é par/ímpar.
- Verifique se é positivo/negativo/zero.
- Exiba as classificações.

**Conceitos**: `if/else`, comparação e módulo.

### Nível avançado

#### Sistema de pontuação

**Objetivo**: funções e lógica composta.

- Crie função para calcular nota final.
- Receba notas de prova e trabalho.
- Aplique pesos.
- Informe aprovação com média $\geq 7$.

**Conceitos**: funções, parâmetros, retorno, condicionais aninhadas.

#### Ordenador de números

**Objetivo**: listas e algoritmo.

- Crie lista desordenada.
- Implemente ordenação simples.
- Exiba lista ordenada.

**Conceitos**: laços aninhados, comparações e algoritmo.

#### Contador de palavras

**Objetivo**: manipulação de strings.

- Receba uma frase.
- Conte palavras.
- Identifique a palavra mais longa.
- Mostre estatísticas.

**Conceitos**: texto, iteração e condicionais.

## Dicas para criar seus próprios desafios

### Estrutura de um bom desafio

1. Objetivo claro: o que o programa deve fazer.
2. Conceitos-chave: quais habilidades serão praticadas.
3. Entradas e saídas: o que entra e o que deve sair.
4. Dica inicial: por onde começar.
5. Extensão opcional: como aprofundar.

### Progressão pedagógica

- Comece com **um conceito por vez**.
- Depois **combine conceitos**.
- Permita **múltiplas soluções válidas**.
- Incentive **melhorias iterativas**.

## Recursos pedagógicos do laboratório

### Visualização dupla (JavaScript e Python)

Use a comparação entre linguagens para discutir:

- lógica comum e sintaxe diferente;
- semelhanças estruturais;
- pensamento computacional independente da linguagem.

**Sugestão de atividade: "Caça às diferenças"**

1. Monte um programa simples em blocos.
2. Compare JavaScript e Python gerados.
3. Identifique o que muda e o que permanece.

### Tour guiado inicial

O laboratório inclui tour interativo para apresentar interface, blocos, execução e console. Uma estratégia eficiente é primeiro um tour individual, seguido de revisão coletiva.

### Exemplos prontos

Os exemplos podem ser usados para inspiração, leitura de código, modificação incremental e análise reversa do raciocínio.

### Persistência local

Os programas são salvos localmente, permitindo continuidade entre aulas e comparação de versões.

## Problemas comuns e como mediar

### "Meu código não faz nada"

- Verifique se clicou em executar.
- Confira se há bloco de saída.
- Leia o console com o estudante.

### "Os blocos não encaixam"

- Confira compatibilidade de tipos e encaixes.
- Use cor e formato dos blocos como pistas.

### "Deu erro no console"

- Leia a mensagem de erro em conjunto.
- Identifique a parte correspondente nos blocos.
- Faça ajuste incremental.

### "Não sei por onde começar"

- Comece com um exemplo simples.
- Divida o problema em partes menores.
- Modifique aos poucos uma base conhecida.

:::tip Celebre erros
Erros são evidências de tentativa e parte do processo de aprendizagem. Valorize investigação, revisão e melhoria contínua.
:::

## Avaliação de aprendizagem

**Evite avaliar**:

- complexidade aparente do programa;
- quantidade de blocos;
- ausência total de erros.

**Avalie**:

- se a lógica resolve o problema proposto;
- se o estudante explica o próprio raciocínio;
- se compreende os conceitos praticados;
- se identifica e corrige erros com apoio crescente de autonomia;
- se demonstra evolução ao longo do tempo.

:::info Foco no processo
No laboratório, o principal indicador é evolução de raciocínio computacional, não perfeição de código.
:::