Bit a Bit
Crie a sua fonte em pixels com a turma
Passo a passo para criar uma fonte em pixels com a turma, do papel quadriculado ao arquivo .ttf no FontStruct. Bônus da série Bit a Bit.
No Bit a Bit #06 vimos que uma imagem é uma tabela de pixels. As letras que aparecem na tela funcionam do mesmo jeito: cada uma é uma pequena grade de quadradinhos pintados ou vazios. Este bônus da série traz um passo a passo para a turma criar a própria fonte, do papel quadriculado a um arquivo que pode ser instalado no computador.
Toda letra é uma grade
Nas primeiras telas e impressoras matriciais, cada letra era desenhada numa grade de 5 colunas por 7 linhas. Cada linha tem 5 pixels e, portanto, vira 5 bits. A letra A, por exemplo, fica assim:
| Linha | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
|---|---|---|---|---|---|---|---|
| Bits | 01110 | 10001 | 10001 | 11111 | 10001 | 10001 | 10001 |
As fontes de hoje são desenhadas com curvas e não com quadradinhos, mas, na hora de mostrar o texto, a tela continua transformando cada letra em pixels.
Passo a passo
- Grade. Prepare uma grade de 5 colunas por 7 linhas para cada letra.
- Desenhe. Pinte os pixels da letra. Mantenha a mesma altura em todas as letras.
- Codifique. Escreva cada linha em zeros e uns: 1 para pintado, 0 para vazio.
- Monte. No FontStruct, uma ferramenta gratuita e on-line, monte cada letra com quadradinhos, copiando a grade do papel.
- Baixe. Baixe o arquivo .ttf e instale no computador. A fonte aparece no editor de texto como qualquer outra.
Dicas de quem desenha fontes
- Use a mesma largura de traço em todas as letras.
- O espaço entre as letras também faz parte do desenho.
- Teste a fonte escrevendo uma palavra inteira, não letras soltas.
Na sala de aula
A atividade trabalha a habilidade EF04CO05 da BNCC Computação, sobre codificar informações em binário e em pixels, e a EF04CO01, sobre representar objetos em matrizes. O resultado é um produto coletivo: a fonte da turma pode ser usada em cartazes, convites e murais da escola.
No próximo post: algoritmo é receita de bolo?
Plano de aula: o alfabeto da turma
| Ano | 4º ao 7º ano |
|---|---|
| Duração | 2 aulas de 50 minutos (desenho e montagem) |
| Habilidades | EF04CO01: representar objetos por matrizes, com cada item numa posição definida por coordenadas. EF04CO05: codificar informações para representação em computador (binária, ASCII, pixel/RGB) |
| Materiais | Papel quadriculado com grades de 5 por 7, lápis, um computador com internet para a montagem no FontStruct (pode ser só o da professora ou do professor) |
| Sem laboratório | A primeira aula é desplugada; a montagem pode ser feita pela professora ou pelo professor, com projetor |
Objetivo: codificar letras em pixels e bits e produzir uma fonte digital coletiva.
Desenvolvimento
- Pergunta de abertura (5 min). “Quem desenha as letras do computador?”
- A letra A (10 min). Mostre a grade do A e leia os bits de cada linha com a turma.
- Regras da turma (5 min). Combinem a altura das letras, a largura do traço e se haverá letras minúsculas.
- Desenho (25 min). Cada aluno desenha 1 ou 2 letras na grade e escreve os bits ao lado. Confiram juntos se todas as 26 letras foram feitas.
- Frase de teste (5 min). A turma junta as letras no papel e escreve uma frase para ver se o conjunto ficou harmonioso.
- Segunda aula: montagem. Com o projetor, montem as letras no FontStruct a partir dos bits, baixem o arquivo e escrevam o nome da turma com a fonte nova.
Avaliação: a letra desenhada e os bits correspondentes mostram se o aluno codifica a grade corretamente.
Adaptações: grades em relevo ou com peças de encaixe para alunos cegos ou com baixa visão. Alunos que terminarem antes podem desenhar números e sinais de pontuação.
Fontes
- Habilidades EF04CO01 e EF04CO05: profez.com.br/bncc/computacao, que reproduz o complemento de Computação à BNCC (Parecer CNE/CEB nº 2/2022).
- FontStruct, ferramenta gratuita de criação de fontes: fontstruct.com.