Recuperação Pensamento Computacional

Questão 1

Em uma competição de empreendedorismo escolar, os participantes criaram um aplicativo educacional com diferentes funcionalidades. Para organizar o desenvolvimento da interface, usaram um fluxograma com telas de boas-vindas, cadastro, acesso a conteúdo, avaliação de progresso e suporte.

Nesse contexto, como o uso do fluxograma contribuiu para melhorar a apresentação do conteúdo digital no projeto?

• Impediu que o grupo alterasse decisões durante o desenvolvimento do projeto.

• Facilitou a definição da linguagem de programação mais adequada para o projeto.

• Auxiliou no design gráfico do aplicativo, definindo cores e ilustrações para cada tela.

• Organizou a estrutura das telas, favorecendo a clareza na navegação pelo conteúdo.

Questão 2

Júlia criou um site com HTML e CSS para apresentar seus trabalhos de design. No arquivo index.html, ela incluiu um link para o arquivo style.css e outro para uma fonte personalizada do Google Fonts. Ela escolheu a fonte Bai Jamjuree para manter um design consistente e moderno.

Como a fonte Bai Jamjuree contribui para a exibição do conteúdo no site de Júlia?

• A aplicação de fontes externas impede que o site seja acessado offline, exigindo conexão com a internet.

• A fonte acelera o tempo de carregamento do site, tornando-o mais eficiente.

• A escolha da fonte permite ocultar o conteúdo textual do site, protegendo dados sensíveis.

• A escolha da fonte valoriza a apresentação do conteúdo, reforçando a identidade visual.

Questão 3

Em uma empresa de tecnologia, uma equipe está desenvolvendo um assistente virtual para atendimento ao cliente. Cada etapa da conversa é representada por uma div, com textos e botões para direcionar o passo a seguir. O sistema utiliza JavaScript para alterar o conteúdo exibido com base na interação do usuário. Sempre que o botão de resposta é clicado, a etapa atual perde a classe "ativo" e a nova etapa recebe essa classe, sendo exibida na tela.

A estrutura desenvolvida pela equipe permite comunicar o fluxo de forma eficiente porque

• atualiza dinamicamente o conteúdo exibido, guiando o usuário entre as
  etapas da conversa.

• limita a interface a um único botão, facilitando o controle de acesso ao sistema

• transforma as mensagens do assistente em arquivos visuais, evitando a interação com o texto.

• utiliza o acesso com comandos de voz, respondendo aos clientes de forma automatizada.

Questão 4

Uma startup de educação digital desenvolveu uma plataforma interativa em que o conteúdo é apresentado por meio de blocos visuais organizados em etapas. Para tornar a navegação mais fluida, a equipe de desenvolvimento integrou elementos HTML e JavaScript, permitindo que, ao clicar em um botão, a plataforma exiba automaticamente a próxima etapa do conteúdo.

A seguir, temos um trecho simplificado do código utilizado na navegação entre etapas:

HTML. Nesse código, a integração entre o botão e a exibição do próximo conteúdo ocorre por meio

• do método querySelectorAll() que remove elementos da página.

• do atributo data-proximo que vincula o botão ao próximo passo.

• da classe btn-proximo que estiliza o botão.

• do atributo src que carrega uma imagem.

Questão 5

Durante uma feira de profissões, estudantes do Ensino Médio desenvolveram um site interativo para apresentar diferentes carreiras. Na primeira tela, há uma introdução geral e botões para explorar áreas específicas, como "Tecnologia" ou "Saúde". Cada botão, ao ser clicado, deve ocultar a introdução e exibir o conteúdo relacionado à área escolhida, criando uma transição suave entre os blocos de informação.

A equipe utilizou a seguinte estrutura de código para controlar a exibição dos conteúdos:

HTML. Para ocultar o passo anterior e exibir o próximo, o código utiliza

• alert("Avançando de etapa") para adicionar elementos dinamicamente.

• document.querySelectorAll('.passo') para aplicar um estilo direto a todos os blocos.

• classList.remove('ativo') e classList.add('ativo') no próximo passo para alternar a visibilidade entre as seções.

• document.getElementById().innerHTML = "" e document.body.style.display = "none" para esconder os elementos manualmente.

Questão 6

Estudantes criaram um portfólio digital com etapas do desenvolvimento de um projeto. Cada etapa (ideia, planejamento, protótipo e apresentação final) é exibida em uma tela separada, controlada por botões de navegação. Para que somente uma etapa apareça por vez, foi utilizado o seguinte código CSS:

CSS. Esse código CSS é usado para

• transformar texto em áudio automaticamente.

• controlar quais etapas da narrativa são exibidas ao usuário.

• criar animações entre os passos.

• alterar a cor de fundo das divs.

Questão 7

Uma equipe de estudantes do 3º ano está desenvolvendo uma plataforma digital com conteúdo interativo para ajudar colegas a se prepararem para o vestibular. A proposta é apresentar resumos de conteúdos por meio de narrativas visuais, combinando texto e imagens.

Na tela inicial do projeto, foi incluída uma imagem representando uma paisagem fictícia com símbolos que remetem a desafios e descobertas, usada para ambientar o estudante e despertar curiosidade. O trecho de código HTML abaixo mostra como a imagem foi adicionada:

HTML. A inclusão da imagem cenario-etapa0.png no projeto tem o objetivo de

• reduzir o tempo de carregamento da página.

• armazenar dados do usuário localmente.

• melhorar a experiência ao contextualizar a história.

• substituir o texto da narrativa por conteúdo visual.

Questão 8

Maria desenvolveu um site para organizar despesas pessoais usando registros mensais com tabelas, gráficos e imagens ilustrativas. Para tornar o visual mais atrativo, ela incluiu ícones personalizados (como compras.png, transporte.png e alimentação.png) nos blocos de conteúdo. Durante o processo, receberam a orientação de evitar nomes com espaços ou acentos nos arquivos das imagens.

A recomendação para evitar espaços e acentos nos nomes de arquivos de imagem está relacionada

Alternativas

• à redução de erros em navegadores web.

• à necessidade de compressão das imagens.

• às restrições de direitos autorais das imagens.

• às limitações do VSCode na edição de textos.

Questão 9

Janaina está participando de uma oficina sobre criação de portfólios digitais. Em uma das páginas, ela tentou exibir uma imagem representando seu país natal. Porém, ao visualizar a página no navegador, percebeu que a imagem não carregava corretamente. A seguir temos o trecho do código usado por ela:

HTML. Nessa situação, o erro ocorre porque o

• GitHub não aceita imagens com números no nome.

• atributo src no HTML não correspondia ao nome do arquivo.

• CSS bloqueou a exibição da imagem.

• JavaScript não suporta imagens PNG.