Os princípios básicos do pensamento computacional

O pensamento computacional permite que os web designers analisem um problema, identifiquem padrões nos dados, identifiquem e concentrem-se em aspectos absolutamente necessários de uma tarefa, deixando de lado informações desnecessárias que atrapalharão o processo.

Como ferramenta para um planejamento completo, evita erros dispendiosos que surgem como resultado da pressa para concluir um projeto sem ter considerado as diferentes facetas do problema em questão.

O que é pensamento computacional?

O pensamento computacional como conceito pode parecer intimidante. Mas todos os dias, em todos os aspectos de nossas vidas, realizamos pensamento computacional. Pense nas seguintes ações e decisões envolvidas:

• Você quer preparar uma xícara de chá ou café.
• Você quer comprar um carro.
• Você quer mudar de carreira.
• Você quer se mudar para outra cidade.
• Você quer comprar uma casa.
• Você quer escrever um livro.
• Você deseja criar um aplicativo.

O processo de planejamento e alcance desses objetivos envolve algum tipo de pensamento computacional.

Planejar envolve dividir esses problemas em partes administráveis ​​e encontrar conjuntos de soluções que nos permitam alcançar o objetivo que temos em mente.

Para nossos propósitos, como como web designers queremos usar computadores para nos ajudar a resolver problemas em questão, o pensamento computacional trata, na verdade, de compreender o problema complexo em questão e, em seguida, dividi-lo em uma série de problemas menores e gerenciáveis.

Em seguida, desenvolvemos ideias sobre como resolver esses problemas individuais menores e, finalmente, comunicamos as ideias resultantes em uma série de etapas que podem ser compreendidas e processadas por um computador.

Esta abordagem segue o que chamamos de “princípios do pensamento computacional”. Mas antes de chegarmos a esses detalhes, primeiro vamos falar brevemente sobre onde o pensamento computacional é usado.

Onde o pensamento computacional é usado em Web Design

Embora iremos aprofundar esse assunto ao discutir algo chamado “pseudocódigo” abaixo, vamos analisar rapidamente como o pensamento computacional em web design é colocado em funcionamento:

1. Design de UI/UX: Aplicando lógica e estrutura para criar interfaces intuitivas e fáceis de usar.
2. Design Responsivo: dividir layouts complexos em componentes mais simples para vários tamanhos de tela.
3. Recursos interativos: Desenvolvimento de algoritmos para elementos dinâmicos como controles deslizantes, pop-ups ou formulários.
4. Otimização SEO: Análise de padrões de comportamento do usuário e algoritmos de mecanismos de pesquisa para otimizar a visibilidade do site.
5. Gerenciamento de conteúdo: Estruturação e organização de conteúdo da web para acesso e exibição eficientes.
6. Otimização de performance: análise e refinamento de código e elementos de design para tempos de carregamento mais rápidos e melhor experiência do usuário.

Esses aplicativos mostram como o pensamento computacional é essencial para resolver desafios complexos de web design.

Os Princípios do Pensamento Computacional

Agora, vamos aos princípios-chave que compõem esse processo computacional. Existem quatro desses princípios:

1. Decomposição
2. Abstração
3. Reconhecimento de padrões
4. Escrita de Algoritmos

Essas são técnicas essenciais que o ajudarão a pensar computacionalmente em um problema complexo (desafio ou tarefa) antes de escrever uma única linha de código. Vamos examiná-los.

1. Decomposição

É a divisão de um problema ou sistema complexo em partes menores e mais facilmente solucionáveis. Esses problemas menores são resolvidos um após o outro até que o problema maior e complexo seja resolvido.

“Se um problema não for decomposto, é muito mais difícil de resolver. Lidar com muitos estágios diferentes ao mesmo tempo é muito mais difícil do que dividir um problema em vários problemas menores e resolver cada um deles, um de cada vez.” – BBC Bitesize

2. Reconhecimento de padrões

Depois de decompor o problema complexo em problemas menores, o próximo passo é observar as semelhanças que eles compartilham.

Padrões são características compartilhadas que ocorrem em cada problema individual. Que semelhanças você observa? Encontrar essas semelhanças em pequenos problemas decompostos pode nos ajudar a resolver problemas complexos com mais eficiência.

3. Abstração

“Abstração” refere-se a focar apenas nas informações importantes, ignorando detalhes irrelevantes. Para chegar a uma solução, precisamos ignorar características desnecessárias para nos concentrarmos naquelas que temos.

Então, quais são essas informações importantes nas quais precisamos nos concentrar? Na abstração o foco está principalmente nas características gerais comuns a cada elemento, em vez de detalhes específicos.

Depois de ter as características gerais, você pode criar um “modelo” do problema; um modelo é a ideia geral do problema que estamos tentando resolver.

“Se não abstrairmos, podemos acabar com a solução errada para o problema que estamos tentando resolver.” – BBC Bitesize

Assim que tivermos um modelo, podemos projetar um algoritmo

4. Escrita de Algoritmos

Você dividiu o grande problema em problemas menores e facilmente gerenciáveis. Você identificou semelhanças entre esses problemas. Você se concentrou em detalhes relevantes e deixou para trás tudo o que é irrelevante.

Agora é hora de desenvolver instruções passo a passo para resolver cada um dos problemas menores, ou as regras a serem seguidas ao resolver o problema. Essas etapas ou regras simples são usadas para programar um computador para ajudar a resolver um problema complexo da melhor maneira. Eles também são chamados de “algoritmos”.

Definição: Um algoritmo é um plano, um conjunto de instruções passo a passo usadas para resolver um problema.

”Algoritmos nem sempre envolvem tarefas complicadas de programação; no fundo, são sequências de passos para avançar em direção a um objetivo.” – John Villasenor

Escrever um algoritmo requer um planejamento extensivo para que ele funcione corretamente. A solução que seu computador oferece é tão boa quanto o algoritmo que você escreve. Se o algoritmo não for bom, sua solução também não será boa.

Usando fluxogramas

Os fluxogramas oferecem uma maneira perfeita de representar o pensamento computacional e algorítmico.

“Um fluxograma é um tipo de diagrama que representa um algoritmo, fluxo de trabalho ou processo, mostrando as etapas como caixas de vários tipos e sua ordem conectando-as com setas. Esta representação diagramática ilustra um modelo de solução para um determinado problema.” – Wikipédia

Os fluxogramas são uma maneira fácil de traçar algoritmos, especialmente se eles precisarem gerar resultados diferentes ao longo do caminho. Eles usam convenções de estilo padrão. Os fluxogramas fluem de cima para baixo e da esquerda para a direita.

Usando pseudocódigo

Ao decompor o problema em questão em partes menores e gerenciáveis, você comunica suas descobertas, ideias e possíveis soluções em inglês simples (ou em qualquer idioma que use para se comunicar).

Os computadores não entendem as instruções em inglês. Eles entendem o código. Código ou algoritmos que formam um conjunto de instruções com sintaxe muito específica.

Mas antes de usar suas descobertas para escrever um código que o computador entenda, geralmente é aconselhável anotá-las em pseudo-código.

O pseudocódigo ajuda você a planejar as soluções para o seu problema para evitar erros ao escrever o código. É uma forma de escrever instruções de forma simplificada que parece código. No entanto, o pseudocódigo não é código – ele não possui uma sintaxe específica usada pelo código.

O pseudocódigo é melhor escrito usando palavras-chave e variáveis. Variáveis ​​​​na programação representam um valor, uma palavra ou um pedaço de código. Na programação, o valor das variáveis ​​muda dependendo de onde você está no código.

Como escrever pseudocódigo (para iniciantes)

Por exemplo, este pseudocódigo (retirado da Universidade do Tennessee) pode calcular o pagamento:

1

Begin

2

INPUT hours

3

INPUT rate

4

pay = hours * rate

5

OUTPUT pay

6

End

E este exemplo um pouco mais complexo pode calcular o pagamento com horas extras:

1

Begin

2

INPUT hours, rate

3

IF hours ≤ 40

4

THEN

5

      pay = hours * rate

6

ELSE

7

      pay = 40 * rate + (hours – 40) * rate * 1.5

8

OUTPUT pay

9

END

O pseudocódigo utiliza termos semelhantes a código que são úteis ao traduzi-lo em código.

• STOP/END Os computadores são literais. Você precisa avisá-los quando uma declaração ou instrução for feita. Faça isso escrevendo STOP ou END.
• IF/ELSE/THEN Os computadores entendem as condições: se A acontecer, faça B, se não, faça C.
• INPUT/OUT Alguns códigos requerem entrada para serem executados e criar um resultado de saída. A entrada é para dados que um usuário ou outra fonte fornecerá ao computador. A saída é usada para indicar o resultado final de uma série de comandos.
• STORE/SAVE Termo de pseudocódigo que instrui um computador a salvar ou armazenar um valor sempre que necessário.

Como o pseudocódigo é usado como ferramenta de solução de problemas

Como você pode imaginar, o pseudocódigo também é muito útil para a resolução de problemas.

Aqui estão apenas algumas maneiras pelas quais ele pode ser usado, na prática:

1. Estrutura de navegação do site: Projetar o fluxo e a estrutura do sistema de navegação de um site, incluindo menus suspensos e links entre páginas.

2. Fluxo de autenticação de usuário: descreve as etapas para login do usuário, verificação e tratamento de erros de maneira segura e fácil de usar.

3. Elementos interativos: planejando a lógica para controles deslizantes, pop-ups ou formulários interativos, incluindo validação de entrada do usuário e exibição de conteúdo dinâmico.

4. Lógica de Design Responsivo: Estruturar a lógica do código para tornar um site responsivo a diferentes tamanhos de tela e dispositivos.

5. Tratamento de dados: Conceituar o processo de recuperação, exibição e atualização de dados de um banco de dados em um formato amigável no site.

Avaliando soluções

Na verdade, há uma quinta parte em todo esse processo. Você usou o pensamento computacional para chegar a uma solução. A solução é um algoritmo que pode ser usado para programar o computador.

Você está ansioso para começar a programar, mas antes de prosseguir você deve avaliar a solução. Por que?

“Sem avaliação, nenhuma falha no algoritmo será detectada e o programa pode não resolver o problema corretamente ou não resolvê-lo da melhor maneira.” – BBC Bitesize

Pense em avaliar seu algoritmo como “depuração”.

Conclusão

O pensamento computacional percorre todos os aspectos e funções do 21^st negócio do século. É uma habilidade indispensável de resolução de problemas para web designers que eventualmente precisam representar soluções em uma linguagem que os computadores possam compreender e processar.

Lembre-se de que o pensamento computacional envolve as seguintes etapas:

1. Decomposição: dividir um problema em suas partes componentes.
2. Reconhecimento de padrões: identificar semelhanças em partes componentes de um problema.
3. Abstração: focar em informações gerais importantes e deixar de lado informações irrelevantes para a solução.
4. Escrita de algoritmo: escrever o código que cria a solução pretendida. Escrever instruções passo a passo que podem ser lidas e processadas pelo computador. As instruções são escritas usando informações relevantes coletadas de decomposição, reconhecimento de padrões e abstração.
5. Avaliação: encontrar bugs no algoritmo e corrigi-los para garantir que funcione sem falhas.

Recursos úteis