PENSAMENTO COMPUTACIONAL CONTEÚDO

Prévia do material em texto

· APRESENTAÇÃO
· MÓDULO 1
· MÓDULO 2
· MÓDULO 3
· CONCLUSÃO
DEFINIÇÃO
Conceitos primordiais sobre o funcionamento de computadores; computadores como ferramentas desenvolvidas pelos humanos para criar soluções úteis; soluções úteis a partir da compreensão de códigos de computador.
PROPÓSITO
Iniciar as bases do Pensamento Computacional demonstrando o seu protagonismo no mercado de trabalho. Construir uma compreensão introdutória dos conceitos primordiais que norteiam o mundo dos computadores.
OBJETIVOS
Módulo 1
Descrever a equação que representa a essência dos computadores
Módulo 2
Reconhecer o processo de exploração do potencial dos computadores através de códigos e algoritmos
Módulo 3
Empregar códigos simples de instruções de computadores
INTRODUÇÃO
Você sabe como os computadores surgiram?
Muitos pensarão em teorias da conspiração, grupos secretos, investimentos maciços de governos em tecnologia. Outros se lembrarão dos mais velhos comentando sobre os cartões perfurados e dos primeiros computadores, que eram do tamanho de uma sala. Um grupo de apaixonados por tecnologia comentará o uso dessa tecnologia durante as guerras do século XX, quando essas máquinas estavam relacionadas a arquivo e trânsito de informações.
No entanto, o processo é, definitivamente, mais longo e mais complexo. Os computadores não são chips, bits e afins. Computadores são o que as máquinas sempre representaram: homens em busca de soluções. Ao longo dos séculos, essa necessidade nos permitiu criar diques para contenção de água, prédios e até estradas para tornar as grandes viagens mais rápidas.
Não entendeu?
Significa a necessidade x tecnologia. Imagine que você tenha um biscoito delicioso, e sua característica mais maravilhosa é que ele sempre parece que saiu do forno neste exato momento. Será que o biscoito é assim pelo fato de possuir uma fórmula que o faz parecer sempre fresquinho, ou faz muito sucesso por estar sempre fresquinho nos pontos de venda?
Filosoficamente, isso é um dilema; sociologicamente, é perceber uma estrutura estruturante, algo que já existe, mas que, a partir de sua existência, gera mudanças sociais.
Por exemplo:
Os gregos, em um momento de crise – a fim de que os líderes das famílias parassem de brigar –, decidem criar um conselho. Esse conselho administraria por meio do voto, e os membros teriam o direito de falar e defender suas ideias. Como essa medida deu certo, os pais passaram a querer que seus filhos estudassem cada vez mais, para que tivessem mais força nesses conselhos. Com isso, geração após geração, a Educação passou a ser cada vez mais valorizada. É sempre assim: o homem busca soluções, que, uma vez criadas, levarão a uma nova situação. Isso faz com que as proposições estejam sempre em mudança.
A filosofia da ciência – e a palavra ciência é ótima, pois está relacionada a tomar entendimento, entender – afirma que o seu desenvolvimento vem da busca do homem por soluções. Assim, cada nova solução gera um novo conjunto de buscas. Uma espada; um par de óculos; o desenvolvimento de cirurgias, de um método de produção, de uma máquina a vapor, do trem, do carro... Em todos os momentos, a tentativa é sempre a mesma: encontrar soluções.
Quando a demanda do século XX exigia velocidade e uma visão mais global, passamos a voar, desenvolvemos o telégrafo, o telefone e introduzimos máquinas que pudessem introjetar essa capacidade humana. Acelerar era uma questão de tempo.
O Pensamento Computacional não é um exercício sobre como as máquinas dominarão o mundo, ou como a Inteligência Artificial substituirá a humanidade.
Trata-se de entender que essas máquinas e seus componentes são nossos filhos; elas reproduzem e aceleram o volume de cálculos, armazenamentos e comunicações que nós idealizamos. Dessa forma, cada vez que precisamos de algo a mais, a máquina trabalha para atender nossas demandas.
Entender isso é perceber que não estamos em uma maratona contra a tecnologia, com medo de nos tornarmos obsoletos. Novas tecnologias surgirão, e isso é algo que nós mesmos buscamos. Cada máquina, cada software, cada hardware tem o propósito de atender, acelerar e realizar um desejo do coletivo. Algo que não tem essa funcionalidade é abandonado, é esquecido.
Seja bem-vindo ao mundo da tecnologia e lembre-se:
você verá aqui o que é necessário para lidar com ela.
Módulo 1
Descrever a equação que representa a essência dos computadores
EQUAÇÃO FUNDAMENTAL DOS COMPUTADORES
Anotem a equação para não se esquecerem dela:
COMPUTADOR
=
a imensa capacidade de processar
x
pela terrível deficiência no pensar.
Vamos entender o que é isso.
Este módulo trata dos recursos básicos do funcionamento dos computadores. Isso é muito importante, pois, em pleno século XXI, não é desejável que um profissional pense no computador como algum tipo de caixa mágica com a qual todos interagem diariamente. De fato, no mercado de trabalho atual, é cada vez mais importante que os profissionais saibam como o computador faz o que faz.
É importante perceber que o mercado de trabalho não é um ente determinador, mas, sem dúvida, a relação com a empregabilidade é fundamental. Você consegue perceber alguma função na qual, em alguma medida, o uso da tecnologia não é necessário?
Pense bem: as salas de aula, os treinamentos... Enfim, tudo, de alguma forma, vivencia o uso da tecnologia.
Com isso, nós nos deparamos com um dilema: a adoção da tecnologia não é linear, nem todos têm acesso a ela nem possuem a mesma experiência enquanto usuários.
Durante muito tempo, pensou-se que lidar com os computadores consistia em dominar a tecnologia vigente e aprender suas técnicas e seus fundamentos, pois, assim, você estaria seguro. Porém, como isso é possível, tendo em vista que parte das pessoas já estão no topo do uso da tecnologia, enquanto outros ainda estão dando os primeiros passos?
Atenção
O desespero de diversas instituições gerou o processo mais absurdo: já que todos não podem dispor de tecnologia, então vamos abrir mão dela. Isso só aumentou a segregação, a fragilidade de grupos sociais que não têm acesso à tecnologia. Quando fazemos isso, negamos a vários profissionais a possibilidade de diminuir essas diferenças.
Porém, o que pode ser feito? Se não aprenderemos a usar a tecnologia do momento, se não renegaremos a tecnologia para garantir igualdade, qual a solução proposta?
Uma ideia é entender o funcionamento básico dos computadores, perceber como funcionam essas máquinas e, independentemente da tecnologia atual, compreender qual o sentido de sua atualização – os computadores estão sempre sendo atualizados, uma vez que o homem precisa constantemente de novas respostas e possibilidades.
Atenção
Felizmente, qualquer pessoa pode compreender, basicamente, como os computadores funcionam. Nosso objetivo é explorar as qualidades essenciais dos computadores, como eles funcionam, o que eles podem e o que não podem fazer.
Este módulo não requer nenhum conhecimento prévio em informática.
A essência fundamental dos computadores é que eles são extremamente poderosos e profundamente tolos. Eles são poderosos, pois um computador pode fazer bilhões de operações por segundo e consegue gerar dados a uma velocidade inconcebível para nós, humanos.
Essa é a parte poderosa na essência dos computadores. No entanto, o computador também é muito tolo, pois as operações que ele pode realizar rapidamente são extremamente simples.
Por exemplo, adicionar dois números para obter um terceiro número, ou verificar se um número é zero.
COMPUTADOR
=
poderosamente rápidos, porém tolos.
Portanto, operações tão simples como essas não são capazes de gerar discernimentos ou entendimentos mais elaborados, como, por exemplo, identificar a impressão digital de uma pessoa, certo?”.
Embora você pense dessa forma, computadores fazem isso: identificam digitalmente um indivíduo.
Saiba Mais
Estudos revelaram que os humanos possuem impressões digitais singulares. Com base nisso, foi elaborada uma forma de retirar esses dados – primeiro, foi utilizada graxa para colher digitais; atualmente, usam-se luze calor –, criando um banco de dados com essas informações. Portanto, o trabalho de discernimento é humano; o computador apenas cruza, de forma mais rápida e efetiva, os dados armazenados pelas pessoas.
Isso ocorre porque discernimento e compreensão são qualidades humanas!
É importante compreender o seguinte: o computador é realmente um mundo mecânico, onde é possível executar operações muito simples a uma velocidade incrivelmente alta. Por exemplo, desde 2005, processadores são capazes de executar mais de 1 bilhão de instruções por segundo. Já os processadores lançados em meados de 2019 são capazes de executar mais de 48 bilhões de instruções por segundo.
Ao longo do tempo, Hollywood tem retratado em seus filmes computadores que nunca são mostrados como mecânicos, mas, sim, como entidades com características essencialmente humanas, como discernimento, compreensão, criatividade e capacidade de se emocionar.
A realidade não poderia estar mais distante daquilo que é mostrado nos filmes. O que temos é uma combinação engraçada, que une a poderosa capacidade de executar instruções a um conjunto de instruções que, inicialmente, parecem tolas. Então, é necessário compreender como é possível, mesmo assim, criar recursos/soluções interessantes e poderosos.
Figura: Computador executa (roda) as instruções conforme o que foi descrito no código.
Qualquer pessoa que interage com computadores, provendo instruções em alguma linguagem de programação, experimenta uma sensação vívida dessa combinação.
E a Inteligência Artificial?
E os robôs que podem ter sentimentos?
Em todos esses casos, a equação fundamental se mantém.
Vamos retomar o início do tema, quando falamos dos gregos. Um dos principais movimentos intelectuais trabalhados pelos gregos foi perceber que, no mundo, existe uma parte física, calculável, com possibilidades amplas, e que, sem essa percepção, não é possível entendê-la – trata-se do mundo físico. Também temos outra parte, que, embora seja proveniente das representações físicas do mundo, não depende delas para a construção dos sujeitos.
Estamos falando da metafísica, a construção de percepções mentais que olham pela lógica, pela argumentação, pelo estudo, pela dialogia, pela capacidade mental de o sujeito alcançar o entendimento. Essa parte não tem limites; suas representações são infinitas.
Uma velha alegoria de Platão ajuda a explicar isso. Trata-se da alegoria da caverna, em que é mostrado que todos nós vivemos em um mundo limitado, físico, de pedra, com as representações nas paredes iluminadas por um fogo contínuo atrás de nós. Quando libertos, o que encontramos é um mundo infinito, perfeito, é o mundo do pensamento, da abstração. Nossa capacidade de abstração e de pensar é infinita, mas nossa capacidade de materializar o que foi pensado é limitada. Esse é um dos sentidos da alegoria. Buscamos ser mais eficientes, mais próximos das múltiplas possibilidades de nossa mente.
O mundo perfeito, infinito, com possibilidades de construir e destruir, infelizmente, não mora em uma máquina, mas na capacidade humana. A máquina, o computador, é só mais um aprimoramento de nossos usos e nossas ferramentas, ainda que aprisionados, limitados, mas tentando e buscando ir mais longe.
CONSEGUIU ENTENDER SOBRE A ALEGORIA DA CAVERNA?
No vídeo abaixo, os professores Rodrigo Rainha e Guilherme Dutra, explicam melhor sobre esse assunto. Aqui também, você irá entender como o filme, Eu, Robô muda a nossa percepção de entendimento de um computador x humano.
Adicione um comentário
Agora ficou claro?
Vejamos mais um exemplo:
Enfrentar uma máquina em um jogo de xadrez era uma das maiores diversões do século XX. Durante muito tempo, os grandes nomes do xadrez foram os vencedores, mas, lenta e continuamente, o desempenho das máquinas foi melhorando, e os jornais proclamavam:
Máquina vence o homem! Será mesmo?
Claro que não! Essa disputa nunca foi entre a máquina e o homem, mas, sim, entre o programador e o xadrezista.
Enquanto as máquinas não receberam todas as informações para neutralizar e calcular as probabilidades e dar o melhor resultado, o programador perdeu. Porém, quando a capacidade de processar, arquivar e perceber os melhores algoritmos foi atingida, quando a máquina caminhou o bastante para dar respostas no tempo esperado, tivemos a impressão de que a máquina venceu o homem.
Entretanto, tudo o que ela fez foi executar aquilo que o programador pediu, só que com uma capacidade que o homem, de forma direta, jamais conseguiria.
Após esse entendimento e de ter assistido ao vídeo, coloque aqui o seu relato. Agora é o momento de você organizar suas ideias.
1. A equação fundamental dos computadores a partir de suas narrativas.
2. Algo que, de alguma forma, não valida essa equação fundamental.
3. Provoque alguns amigos e familiares sobre a opinião deles. Não precisa sair daqui, pois as redes sociais e os computadores já lhe dão condição de, em minutos, ter suas respostas.
Clique no botão para ver as informações.
RESPOSTA
Vamos fazer o relato de uma experiência. No filme Eu, Robô, ocorre o debate filosófico que estamos propondo. Será que, pela Inteligência Artificial, o algoritmo pode ser compreendido de forma equivocada? Repare que o filme é perfeito no uso da equação primordial, pois, em momento algum, trata de uma mente coletiva para as máquinas. Nem mesmo a Vick, pois tudo o que ela faz é executar uma ordem humana, que não foi feita corretamente. O robô criado pelo doutor segue regras de programação e acúmulo e não cria nada que vá além de sua programação. Embora o detetive busque encontrar algo que comprove a falha – essa nossa expectativa de que as máquinas têm alma, vida própria e são uma ameaça –, isso não acontece. É utilizada a equação de formulação – máquinas impressionantemente velozes e capazes de processar, mas totalmente burras, incapazes de “pensar” ou agir fora de sua programação.
VERIFICANDO O APRENDIZADO
Parte superior do formulário
1. Estudamos sobre a equação essencial dos computadores. De acordo com o que foi visto, os computadores:
Possuem capacidade de discernimento.
Possuem capacidade de compreensão.
São incrivelmente rápidos e tolos.
Admitem instruções escritas segundo determinadas línguas, como a Portuguesa ou a Inglesa.
Parte inferior do formulário
Comentário
Parabéns! A alternativa "C" está correta.
Conforme vimos neste módulo, computadores são incrivelmente rápidos, porém tolos, pois não possuem capacidade de compreensão e discernimento. Inclusive, as instruções que são dadas às máquinas precisam estar de acordo com as linguagens específicas de programação, que definem instruções muito simples e um conjunto limitado de palavras que o computador é capaz de compreender.
Parte superior do formulário
2. Analise as afirmações a seguir:
I – Computadores são capazes de executar bilhões de instruções por segundo.
II – Computadores são capazes de discernir e compreender, por exemplo, usando Inteligência Artificial.
III – Toda e qualquer capacidade de discernimento/compreensão é ausente em computadores. São as pessoas, dotadas de tais habilidades essencialmente humanas, que escrevem listas de instruções para os computadores, que, embora não façam ideia do objetivo da execução das instruções em questão, geram resultados que fazem sentido para as pessoas.
Apenas I está correta.
Apenas II está correta.
Apenas III está correta.
I e III estão corretas.
Parte inferior do formulário
Comentário
Parabéns! A alternativa "D" está correta.
A questão é um retorno à equação primordial que adotamos: computadores são tremendamente rápidos em sua capacidade de processar e armazenar, mas são tolos, ou seja, são incapazes de estabelecer discernimento e compreensão. Portanto, as afirmações I e III estão corretas.
Módulo 2
Reconhecer o processo de exploração do potencial dos computadores através de códigos e algoritmos
ENTRE CÓDIGOS E ALGORITMOS – APRENDENDO A LÓGICA DO COMPUTADOR
Vamos voltar à dinâmica do entendimento do pensamento computacional. Você está fazendo uma prova de Matemática, e o conteúdo éanálise combinatória; portanto, aprendeu todas as fórmulas e métricas, basta aplicá-las. Agora, é ler o problema e colocar tudo lá.
Se a máquina é extremamente rápida, mas muito tola, como é possível a implementação de tantos recursos úteis nos computadores?
Você repetiu o dia inteiro: Cn.k = (n+k-1)!k!(n-1)! E, na hora, surge uma dúvida:
É uma combinação simples ou com repetição? Não sei, eu só aprendi que essa é a fórmula. Não basta apenas colocar os números, e o resultado será alcançado?”.
Claro que não!
Uma fórmula é uma simplificação, e cada um de seus elementos só tem sentido se for observado dentro de um contexto. Demos o exemplo matemático, porém a Matemática é apenas uma leitura da vida.
Imagine um motorista que condicionou o seguinte: sinal (farol) amarelo é para parar. Porém, no trânsito, nem todos pensam da mesma forma. Logo, se esse motorista vê um sinal amarelo e para, pode ser que o condutor que vem atrás, por não pensar como ele, não consiga frear. O resultado é a colisão. O ponto é que, para que um computador execute o que você deseja, ele precisa de informações, padrões e leituras, pois só assim ele será capaz de ampliar suas possibilidades de soluções.
Atenção
Os computadores, e incluímos aí o seu celular ou o PC que você usa, têm a mesma dinâmica. Todos receberam informações – processos e procedimentos – para que pudessem executar o que se espera deles. É isso que vamos estudar agora.
CÓDIGO
Para compreendermos a essência do funcionamento de um computador, precisamos entender o que é um código.
Então, dentro do computador, temos um corpo de códigos, e eles são apenas uma série de instruções, como, por exemplo: adicione dias e medidas e compare-os.
Você se lembra da equação fundamental, não é mesmo?
Um computador corresponde à velocidade X a incapacidade de pensar. Então, o trabalho da máquina consiste em apenas uma série de instruções; ela só executa o que é pedido na ordem em que recebeu as orientações de quem escreveu o código. O computador é capaz de passar por uma sequência de instruções de uma forma incrivelmente rápida. Quem pensa e estrutura, podendo ser cada vez mais complexo ou simples, é o sujeito que programa.
Há uma série de instruções, e o computador apenas caminha através delas, executando cada uma exatamente como instruído. São as famosas palavras executar e rodar, como você já deve ter ouvido.
Então, sim, um código é executado de forma muitíssimo rápida, mas as instruções individuais são bastante simples, o que leva a uma pergunta natural:
Se essas instruções são tão simples, como podemos ter um recurso útil?
Ou seja, como tornar o computador capaz de realizar tarefas que dependam de algum nível de inteligência e discernimento?
Vamos tentar algo prático.
Usaremos o recurso de redução de olhos vermelhos de fotografias como um exemplo de utilidade do computador. Existem infindáveis exemplos diferentes, como enviar um e-mail, assistir a um vídeo on-line ou qualquer outra tarefa que executamos em nossos computadores diariamente.
Que tal, agora, pensarmos nos filtros para maquiagem? Porém, isso serve para quê?
Para atender aos desejos do usuário. Diverte, faz rir, aumenta a autoestima. A programação não julga, não cria a demanda; ela atende à demanda. Embora receba as instruções e realize as tarefas, a utilidade é do usuário, que precisava daquilo.
Sempre que você pensar em um código, deve imaginar o seguinte: se ele foi criado e, principalmente, se alcança um grande número potencial de utilização, não foi o computador que evoluiu, mas, sim, a sociedade. Alguém captou uma demanda e observou que a máquina, que a criação de um código, poderia suprir essa carência, nem que fosse fazer rir.
Então, o que liga esses dois lados da essência de um computador: a demanda humana e a necessidade de criação de um código para alcançar a solução? A resposta é a seguinte: programadores.
Voltemos ao exemplo dos olhos vermelhos. Um programador de computador talvez tenha tido a seguinte ideia: “Seria legal se os computadores fossem capazes de reduzir os olhos vermelhos de fotografias, pois esse defeito é meio macabro, e eu fico desconfortável ao vê-lo”.
Essa é uma ótima ideia!
Trata-se de um discernimento, uma escolha humana que atende a seus anseios: deveríamos ter redução de olhos vermelhos. Assim, o programador de computador pensa em uma maneira de tornar isso possível.
Resumidamente:
ALGORITMO
Para usar o e-mail, assistir a um vídeo, conversar pelo WhatsApp, realizar operações bancárias, ou qualquer outro recurso útil via computador, smartphones etc., foi preciso que, em algum momento, uma pessoa ou uma equipe pensasse:
“Bem, deveríamos escrever um algoritmo para isso”.
Alguém estruturou os procedimentos necessários e, depois, transformou os passos de alto nível em instruções suficientemente simples, para que o computador/smartphone pudessem executá-las. Essa pessoa ou a equipe trabalhou, então, escrevendo o código para a solução. Em seguida, um bom tempo foi gasto para testar e melhorar o código, até que ele, de fato, representasse com fidelidade o algoritmo projetado originalmente.
O programador pode se concentrar em ser criativo, para, então, criar um algoritmo capaz de resolver um problema real.
Programadores de computadores são os responsáveis por discernir um aproveitamento útil, transformar a ideia de aplicação (Ex.: redução de olhos vermelhos em fotos) em um algoritmo e traduzir esse discernimento em uma sequência de instruções simples, compreensíveis para o computador. As máquinas, por outro lado, são inacreditavelmente rápidas. Assim, programadores e computadores formam uma combinação extremamente poderosa.
Vamos entender a diferença entre código e algoritmo.
CÓDIGO
O código é um conjunto qualquer de instruções simples escrito em alguma linguagem padrão compreensível para o computador.
ALGORITMO
Por outro lado, um algoritmo é um termo que reflete uma ideia mais completa, em que o conjunto de instruções possuem uma finalidade útil. Um algoritmo não precisa ser escrito em uma linguagem de computador, podendo ser escrito, por exemplo, em português.
Suponha que você tenha pensado em um algoritmo com a finalidade de calcular a idade de pessoas baseado em sua data de nascimento. Então, você começa a escrever um código que deve seguir uma das linguagens de programação padrão. Enquanto não estiver funcionando, não poderá ser classificado como um algoritmo, pois ainda não alcança sua finalidade.
A imagem a seguir pode ajudá-lo, caso você ainda esteja inseguro quanto à diferença.
CÓDIGO
Definição simplificada
Sequência de instruções que computadores podem executar.
Linguagem
Deve ser escrito em uma linguagem de programação padrão, senão os computadores não conseguirão executá-lo.
ALGORITMO
Definição simplificada
Sequência de passos simples e bem projetados para realizar uma tarefa ou resolver um problema.
Linguagem
Pode ser escrito em português ou em uma linguagem de programação padrão.
Atenção
Então, no que o computador é bom? Bem, o computador é bom em ser rápido e barato.
Para um melhor entendimento sobre os códigos e algoritmos, assista ao vídeo a seguir, em que o professor Guilherme Dutra comenta sobre o assunto.
Adicione um comentário
Com a Lei de Moore, os computadores têm ficado mais baratos, e isso ocorre há várias décadas. Como resultado, eles podem ser mais difundidos e é possível embutir mais pesquisa científica para desenvolvê-los, tornando-os ainda mais rápidos. Conheça mais a seguir.
LEI DE MOORE
A previsão feita há mais de 50 anos por Gordon Moore é fantástica. A tecnologia está em evolução e desenvolvimento contínuos. Afinal, cada vez mais, sistemas dependem da tecnologia, em virtude de sua interconexão, permitindo a ampliação da tecnologia e dos produtos e aumentando a velocidade de sua substituição.
Dessa forma, a cada nova geração, um conjunto geracional antigo de tecnologia passa a estar presente no mercado, sendo consumido por públicos que não teriam acesso antes. Por outro lado, a cada evolução, a capacidade de troca de dados e informações seriam maiores,e a necessidade de uso de material, menor, permitindo um barateamento relativo. No limite, a evolução tecnológica acaba barateando os computadores.
A popularização dos computadores é uma das maiores provas daquilo que foi apontado por Moore:
Nos anos 1980, nos Estados Unidos (o que, no Brasil, só ocorreu a partir dos 1990).
A primeira onda de computadores pessoais, os PC, ocupou os espaços nas lojas lentamente. Essas máquinas deixaram de ser enormes e pesadas.
Já nos anos 2000, as telas e as conexões eram a novidade;
Nos anos 2010, as bandas largas se multiplicaram.
Com o passar do tempo, o computador foi diminuindo, podendo ser encontrado em forma de tablets, laptops, smartphones.
O acesso à tecnologia se deu em um tempo muito curto, o que é impressionante. Quando achamos que dominamos determinada tecnologia, tudo parece mudar de repente. É assustador!
Porém, sabe o que de alguma forma não mudou?
A dinâmica.
REFLEXÃO
Você aprendeu a lógica do funcionamento do computador. Vamos revisar:
Um computador é apenas mais uma das históricas tentativas humanas de facilitar e resolver demandas que surgem de forma recorrente. Na busca dessas demandas, cada inovação que aparece torna-se uma estrutura – quer dizer, parte da sociedade, ao mesmo tempo, é estruturante e força novas buscas, transformando toda a sociedade. Nós, humanos, temos essa característica, e as máquinas vivem para atender demandas que são pensadas e estruturadas por nós.
Depois que uma demanda é pensada, precisamos focar no processamento das informações e na capacidade de armazená-las. Isso, aliás, é a origem de todo o processo da computação. Homens precisavam ampliar sua capacidade de armazenamento, de reprodução, de execução.
Agora, pense sobre a questão. Em seguida, construa um texto que conte um pouco da história de como a tecnologia (em suas fases de desenvolvimento) impactou em sua vida escolar, em sua casa etc.
Esse exercício é para você pensar em velocidade, mas é importante que também perceba: continuamos desenhando códigos e executando algoritmos, permanecemos como um operador de máquina da Revolução Industrial, ou como uma criança aprendendo a ler e a escrever, que necessita entender a mecânica de funcionamento e a busca de melhoria da execução.
Pense nisso!
VERIFICANDO O APRENDIZADO
Parte superior do formulário
1. Sobre a diferença entre algoritmos e códigos de computadores, analise as afirmações abaixo e depois marque a opção que relaciona as afirmações a um código ou a um algoritmo.
I - Sequência de passos simples e bem projetados para realizar uma tarefa ou resolver um problema.
II - Pode ser em uma linguagem de programação padrão.
III - Sequência de instruções que computadores podem executar.
IV - Deve ser escrito em uma linguagem de programação padrão, senão os computadores não conseguirão executá-lo.
I – código, II – código, III – algoritmo, IV – algoritmo.
I – algoritmo, II – código, III – código, IV – algoritmo.
I – código, II – algoritmo, III – algoritmo, IV – código.
I – algoritmo, II – algoritmo, III – código, IV – código.
Parte inferior do formulário
Comentário
Parabéns! A alternativa "D" está correta.
A associação entre códigos, algoritmo e a construção da linguagem da programação é uma operação relativamente simples, mas vívida para a compreensão. Ao longo do módulo, essas definições foram apontadas.
Parte superior do formulário
2. Analise as afirmações a seguir e marque a opção que lista as afirmações corretas.
I - O ser humano, que escreve códigos em alguma linguagem para/através de uma sequência de instruções bastantes simples, consegue gerar uma aplicação útil.
II - A inteligência artificial, que escreve códigos em alguma linguagem para/através de uma sequência de instruções bastantes simples, consegue gerar uma aplicação útil.
III - O processador do computador, que processa instruções escritas em alguma linguagem para/através de uma sequência de instruções bastantes simples, consegue gerar uma aplicação útil.
IV - O ser humano, que escreve códigos em alguma linguagem para/através de uma sequência de instruções complexas, consegue gerar uma aplicação útil.
I e II.
I e III.
II e IV.
Somente I.
Parte inferior do formulário
Comentário
Parabéns! A alternativa "D" está correta.
Programadores de computadores são os responsáveis por discernir uma aplicação útil e transformar a ideia de aplicação (Exemplo: redução de olhos vermelhos em fotos) em um algoritmo e traduzir esse discernimento em uma sequência de instruções simples, compreensíveis para o computador. Os computadores, por outro lado, são inacreditavelmente rápidos. Então, programadores e computadores formam uma combinação extremamente poderosa.
Módulo 3
Empregar códigos simples de instruções de computadores
CÓDIGOS EM EXECUÇÃO
Neste módulo, queremos chegar ao ponto em que você possa escrever algum código de computador, executá-lo e ver o que ele faz.
No computador, tudo se resume realmente a códigos em execução (rodando). É assim que as coisas acontecem. Assim, para que a natureza dos computadores seja entendida, nada melhor do que rodar um pouco de código e ver como ele funciona.
Atenção
Não se preocupe, pois não veremos casos complexos com um milhão de linhas de código, mas, sim, apenas um pouco de código. Apenas o mínimo, para que você tenha o primeiro contato com o que é escrever código de computador.
Antes de chegar ao código, será necessário um pouco de paciência. Os elementos de código que serão mostrados aqui não são chiques, chamativos ou complexos. Eles são muito simples. Talvez seja um pouco como um brinquedo de peças de encaixe, isoladas, dispersas, complexas; porém, com o tempo e a familiaridade, as possibilidades e o uso vão se modificando.
Assim como usamos alguma língua (Português, Inglês etc.) para conversar com as pessoas, para escrever códigos que o computador compreenda, é necessário usar uma das linguagens disponíveis. Existem várias linguagens de computador diferentes para informar ao computador o que fazer.
Aqui, utilizaremos uma das mais usadas na atualidade, a Javascript. Usaremos somente os principais recursos, para que você possa escrever e manipular códigos bem simples e brincar com a ideia-chave: compreender de fato como funcionam os computadores.
PRÁTICA 1
A seguir, assista ao vídeo do nosso primeiro exemplo prático.
Adicione um comentário
Para compreender como imprimir strings, veja a Prática 2 a seguir.
PRÁTICA 2
 Clique em Rodar e observe o resultado apresentado em Saída.
Código-Fonte
Saída
6 Teste
Bom dia 2 Tchau
O que temos de novidade aqui?
O que fizemos foi usar a sintaxe padrão para informar ao computador que o que está sendo impresso é um texto (string). Para isso, cercamos as strings Teste, Bom dia e Tchau com aspas duplas.
  Ao clicar em Rodar/Executar, você pode ver os textos e valores numéricos corretamente impressos em Saída.
Um comentário, em JavaScript, começa com duas barras. Em seguida, você pode escrever notas para você mesmo, para lembrá-lo, no futuro, do que você pretendia ou do que está tentando fazer neste ponto do seu código. O computador sabe ignorar comentários, então é apenas uma maneira de adicionar decorações/lembretes ao código com pequenas observações.
O uso de comentários é considerado bastante importante, pois ajuda o programador a compreender um código que não foi escrito por ele, ou até mesmo um código que foi escrito por ele há tanto tempo, que ele não lembra mais como raciocinou para escrever aquele trecho de código.
Um exemplo intrigante que podemos citar aqui é colocar a palavra print no lugar de Tchau. Isso é intrigante, pois print também é o nome da instrução de impressão reconhecida pela linguagem de programação que estamos usando.
O que ocorrerá ao substituirmos Tchau por print e clicarmos e Rodar?
Se você mesmo fizer este teste na Prática 2, obterá o resultado ilustrado na figura a seguir.
Figura 6: Como a string print está delimitada por aspas na terceira linha, o computador sabe que se trata apenas de mais um texto a ser impresso, e não de outra instrução print.Portanto, quando sequências de caracteres são colocadas entre aspas duplas, como neste exemplo, o computador entende que se trata apenas de dados passivos, e lida com eles conforme esperado.
Atenção
Note que temos uma lição importante aqui sobre sintaxe. Nós já sabemos que ela é restrita e mecânica. No entanto, é importante entender que você está seguindo um padrão/convenção ao escrever um código de computador que envolve a sintaxe, o que é característico da linguagem de programação. Então, é muito comum, mesmo para programadores muito profissionais, a ocorrência de pequenos erros de sintaxe.
Quando há um erro de sintaxe, ao clicarmos no botão de execução, haverá alguns erros de sintaxe listados em Saída. Então, é parte da tarefa de quem escreveu o código corrigir esses erros de sintaxe até que o computador aceite que as instruções estão de acordo com o padrão de sintaxe da linguagem de programação em uso. Esse é apenas um processo rápido, superficial e comum.
A razão pela qual estamos discutindo isso neste módulo é que, quando alguém está apenas começando a aprender a escrever códigos (programar), será bastante comum se deparar com erros de sintaxe, pois isso é realmente comum. Então, jamais se permita ter a impressão de que você não está entendendo como escrever código. Apenas entenda que todo mundo passa por erros de sintaxe, inclusive programadores com décadas de experiência. Então, quando se deparar com erros de sintaxe, apenas faça uma checagem rápida e cuidadosa para corrigir os erros e seguir adiante.
Para promover a ideia de que o erro de sintaxe não é grande coisa, queremos mostrar como consertar isso. Veremos alguns exemplos práticos a seguir. São apenas alguns exemplos de código, todos com erros de sintaxe. Queremos que você treine o processo de identificá-los e corrigi-los.
PRÁTICA 3
Todo mundo passa por erros de sintaxe.
Vamos aprender a identificá-los e corrigi-los?
O resultado de cada um dos seis exemplos a seguir deve ser imprimir em Saída as letras destacadas em verde. Você precisa corrigir a sintaxe de cada um dos seis exemplos. Depois que você corrigir a sintaxe das instruções, cada um dos 6 exemplos imprimirá exatamente as três linhas indicadas em vermelho mais à frente.
Saída esperada para cada um dos seis exemplos práticos a seguir:
1.
Código-Fonte
Saída
A
B B
C C C
2.
Código-Fonte
Saída
A
B B
C C C
3.
Código-Fonte
Saída
A
B B
C C C
4.
Código-Fonte
Saída
A
B B
C C C
5.
Código-Fonte
Saída
A
B
C C C
6.
Código-Fonte
Saída
A
B B
C C C
MOSTRAR SOLUÇÃO
1. No primeiro exemplo, o segundo print está escrito errado. Há um l no lugar do i.
2. No segundo exemplo, faltam aspas após o segundo B.
3. No terceiro exemplo, falta o parêntese direito na terceira instrução.
4. No quarto exemplo, falta “,” entre as duas letras B.
5. No quinto exemplo, está faltando o primeiro B na segunda linha. Além disso, o terceiro print está escrito errado (pront).
6. No sexto exemplo, está faltando o parêntese esquerdo na primeira linha e o parêntese direito na última linha.
Por fim, precisamos abordar mais um conceito básico: variáveis. Uma variável no computador é como uma caixa, ou seja, um local onde podemos armazenar valores para uso futuro.
Então, se tivermos um código como o descrito a seguir, onde atribuímos o valor 7 a uma variável V, o que isso significa é que há uma caixa no computador chamada V, conforme ilustrado na tabela a seguir, nós simplesmente podemos armazenar um valor, como um 7, nesta caixa. Também poderíamos armazenar qualquer valor que quiséssemos.
Código para atribuir valor a uma variável V
V=7;
O que significa na prática
“Caixa” de nome V, onde atribuímos o valor numérico 7
"Caixa" V  7
Sendo um pouco mais específico, essa “caixa” é, na verdade, um espaço na memória do computador, em que podemos armazenar valores, e V é o nome que damos a esta área reservada para armazenar o valor que desejarmos.
Em linhas posteriores, no código, se um V aparecer, o computador sabe o que colocamos dentro da caixa (em nosso exemplo, o 7). A variável se torna uma espécie de abreviação conveniente para qualquer valor que eu queira usar.
Veja o exemplo a seguir.
Na primeira linha, atribuímos o valor 7 à variável que optamos por chamar de V.
Na segunda linha, damos um comando para imprimir o valor da variável, que será 7 neste exemplo.
Na terceira linha, imprimimos uma string informando “O valor da variável é:” e, depois, indicamos “V” para que o computador imprima de fato o valor recuperado da variável.
  Clique em Rodar/Executar e observe os resultados. Notou que, sempre que V é referenciado no código, o computador o substitui pelo valor 7? Este é o equivalente a ler o valor armazenado na caixa.
Código-Fonte
Saída
7
O valor da variável V é: 7
Uma grande vantagem do uso de variáveis é que, se o programador quiser usar um valor diferente em seu código, basta trocar o valor na linha de atribuição de valor à variável, e todo o restante do código passará a usar o novo valor sempre que houver referência à variável, que, em nosso exemplo, é V.
PRÁTICA 4
  Observe o que acontece quando substituímos 7 por 1980 e clicamos em Rodar.
Notou que todos os locais em que V foi referenciado resultaram em 1980 na saída?
PRÁTICA 5
  Escreva, no quadro a seguir, um código que atribua a uma variável chamada N a string Guilherme, e depois clique em Rodar para obter a Saída a seguir destacada em vermelho:
Guilherme Guilherme Guilherme
Eu conheço um amigo chamado Guilherme.
Código-Fonte
Saída
Guilherme Guilherme Guilherme
Eu conheço um amigo chamado Guilherme
MOSTRAR SOLUÇÃO
É importante destacar que o sinal de igual “=” usado em código de computador significa atribuição de valor.
Brinque à vontade com as práticas anteriores, até que fique à vontade para definir mais do que uma variável e imprimir mais do que um valor, até estar confortável com a ideia de que, para computadores, o uso do igual e de instruções significa atribuição. Isso é importante, pois, em Matemática, o sinal de igual possui um significado diferente.
VERIFICANDO O APRENDIZADO
Parte superior do formulário
1. Altere, no quadro Código-Fonte a seguir, o código, para que o resultado da execução em Saída seja conforme o texto em vermelho a seguir. Use o botão Rodar/Executar para testar se o seu código está correto e a saída, conforme o esperado.
Saída esperada:
13 35 Brasil
Código-Fonte
Saída
Quando tiver terminado, marque a opção que informa o código-fonte que você usou para chegar ao resultado esperado.
print(“treze”,”trinta e cinco”,Brasil).
print(13,35,Brasil).
print(13,35,”Brasil”).
print(13,35,”Brasil”.
Parte inferior do formulário
Comentário
Parabéns! A alternativa "C" está correta.
Na opção A, teríamos um erro informando que Brasil não está definido. Além disso, os valores estão escritos por extenso.
Na opção B, estão faltando aspas duplas cercando a string Brasil, o que geraria uma mensagem de erro.
Na opção D, falta o parêntese direito ao final da instrução.
Parte superior do formulário
2. Qual será a saída do código abaixo?
NOME=”João”
print(NOME, “NOME”, “NOME”);
João João João.
NOME João João.
João NOME João.
João NOME NOME.
Parte inferior do formulário
Comentário
Parabéns! A alternativa "D" está correta.
Em primeiro lugar, vamos analisar o código:
NOME=”João” -> Esta instrução atribui o texto passivo (string) “João” à variável NOME
Print(NOME, “NOME”,”NOME”); -> Esta instrução ordena que o computador imprima o conteúdo da variável NOME, depois o texto passivo NOME e novamente o texto passivo NOME. Então, a “Saída” resultante será: João NOME NOME
Conclusão
CONSIDERAÇÕES FINAIS
Pensamento Computacional parece um tema futurístico. Inclusive, muitos alunos devem ter se lembrado dos filmes de catástrofe, em que a tecnologia se levanta contra o homem. Neste tema, você foi tranquilizado sobre essas questões. Primeiro, descobriu que máquinas são terrivelmente ignorantes e profundamente capazes. Somente a partir da interação e da estruturação de um conjunto de linguagens específicas, o grande potencial das máquinas – armazenamentoe processamento – pode ser efetivamente estruturado.
Sendo assim, Pensamento Computacional é um convite para que você entenda como funciona essa relação entre máquinas e homens e, com isso, perceba que não é preciso dominar tecnicamente uma ferramenta apenas em determinado momento, pois, embora elas sejam atualizadas constantemente, a dinâmica e os fins permanecem os mesmos.
Neste sentido, o que você precisa conhecer, então, são as linguagens que compõem esse novo universo: códigos e algoritmos. Se você entendeu que código são as instruções que o ser humano dá à máquina – mostrando que computadores executam nossas demandas – e que algoritmo é a linha deste comando estruturado para que a máquina interprete e execute, você entendeu a essência da dinâmica comando, forma de comando, execução, novas demandas, comandos e forma de comando, sempre impulsionada pelas demandas humanas.
Para concluir, sugerimos que você faça inúmeros testes (em alguma das práticas acima) a fim de perceber como se relacionou com o assunto, criou e executou a dinâmica proposta. Como uma criança que aprende a engatinhar e a ficar em pé, daqui por diante, busque dar os primeiros passos, entendendo a mecânica, e, em breve, você estará correndo.
DEFINIÇÃO
Conceitos básicos e primordiais sobre a execução de softwares. Apresentação das formas como instruções escritas por programadores para serem executadas
por CPUs.
PROPÓSITO
Compreender a lógica dos softwares, que são parte de nosso mundo e permanecerão assim por muito tempo.
OBJETIVOS
✓ Reconhecer conceitos básicos sobre softwares
✓ Identificar softwares funcionais, como sistemas operacionais e o firmware
✓ Diferenciar os dois principais tipos de linguagens de programação
VÍDEO
Antes de iniciarmos nosso estudo sobre software, assista ao vídeo a seguir.
Adicione um comentário
INTRODUÇÃO
Neste módulo, descreveremos os conceitos básicos sobre software de computadores e responderemos, de forma introdutória, às seguintes perguntas:
O que é software?
O que é código de computador?
Como os softwares rodam (são executados) em um computador?
O QUE É SOFTWARE?
Sempre que você baixa um programa ou vê um computador ligado, está presenciando algum software sendo executado.
Até mesmo no passado, telégrafos, telefones, aparelhos de fax, todos já possuíam um software, um conjunto de ações programadas que usavam a estrutura física e lhes davam materialidade: voz, letras e imagens. Cada máquina exercia exatamente a sua função, e repare: estamos indo além da função mecânica.
Agora, imagine uma máquina de costura.
Ela faz sempre a mesma operação, um movimento mecânico repetitivo.
Porém, quem atua para que ela execute funções a partir do domínio de técnica é o sujeito; a máquina mecânica é estruturada, e a mente humana é quem faz a função.
Quando um sujeito decidiu que era possível programar a máquina para fazer além da função repetida, para trançar uma estrutura, sucedendo e alcançando a partir disso objetivos claros e novos, criou-se o software.
A máquina é capaz de ser programada para cumprir um conjunto de funções definidas e desenhadas pelo sujeito.
O computador é filho da Guerra Mundial, da necessidade de novos desenvolvimentos, de realizar processamento de informações e comunicação mais eficientes, cruzando dados e armazenamento.
Porém, não basta construir a máquina; é necessário executar, definir o que se deseja, programar e reprogramar.
Softwares para computadores, então, passaram a ser uma demanda, uma construção e sofisticação contínuas.
Sempre que um software é criado, imediatamente, passamos a pensar em como melhorá-lo, transformá-lo em algo mais eficiente. Pessoas vivem disso e recriam isso.
Nunca mais dominaremos perfeitamente todos os softwares que desejamos; afinal, sempre que aprendemos sobre um, novas mudanças estarão chegando.
Já jogou videogame? Esses aparelhos mudaram e continuam mudando; hoje, possuem gráficos e programações cada vez mais complexos.
Para entender tudo isso, é necessário compreender o que é, afinal, um software para computadores.
Mas, afinal, o que é software?
Software é o conjunto de funções executadas na programação de um computador.
Embora não seja uma entidade física, ganha materialização em sua construção virtual, independentemente da rede.
É a manifestação de uma imagem e dos desdobramentos a partir da construção de códigos e execuções.
Vamos entender melhor esse processo:
A CPU (Central Processing Unit), também chamada de processador, é uma espécie de cérebro. É ela quem realmente executa o que chamamos de “instruções de código de máquina”.
Veja a imagem a seguir:
Figura 1: Execução de instruções pelo computador.
Estas instruções são extremamente simples e constituídas apenas dos números 0 (zero) e 1 (um), conhecido como código binário.
Podemos pensar no conjunto de instruções de código de máquina que uma CPU é capaz de executar como sendo um idioma de baixo nível, ou “código de máquina” (também conhecido como “código nativo”). O idioma do código da máquina está intimamente conectado ao projeto do hardware da CPU , ou seja, não é algo que possa ser mudado à vontade.
Cada família de CPUs compatíveis (por exemplo, a popular família Intel x86 usada em computadores pessoais) possui seu próprio código de máquina específico, que não é compatível com o código de máquina de outras famílias de CPUs.
Como isso é feito?
Os programadores escrevem instruções usando alguma linguagem de programação.
Vamos a um exemplo:
Na linguagem JavaScript, a instrução (linha de código) para definir um pixel (ponto) da tela com nível de vermelho para o nível 255 seria:
pixel.setRed(255).
Esta instrução é muito mais complexa do que uma instrução de código de máquina individual que CPUs são capazes de executar. Então, nós a chamamos de uma instrução de alto nível.
Instruções de alto nível são facilmente compreensíveis pelos humanos, mas os computadores não são capazes de executá-las.
O que ocorre, então, é que, antes de ser executada, a instrução de alto nível será expandida em uma sequência – talvez cinco ou dez instruções de baixo nível (código de máquina) –, de modo que, quando essas cinco ou dez instruções forem executadas, uma após a outra, o resultado final terá o efeito de definir o valor vermelho do pixel para 255, conforme designado pela instrução de alto nível escrita pelo programador. Este processo está resumido na Figura 2.
Figura 2: Compilador traduz linhas de código escritas pelo programador em instruções de código de máquina compreensíveis à CPU.
Você pode estar se perguntando:
Como corrigir um erro de programação cometido pelo programador?
Se você quiser adicionar um recurso para corrigir um bug no Firefox (por exemplo), a forma real de fazer isso é voltar ao código-fonte original e realizar os ajustes necessários, alterando as instruções.
Em seguida, é necessário executar o compilador novamente para compilar (traduzir de linguagem C++ para linguagem de máquina) uma nova versão do Firefox que incluirá os ajustes realizados no código-fonte.
SOFTWARE DE CÓDIGO ABERTO
É importante construirmos uma noção do que significa software de código aberto.
Trata-se de uma forma de distribuição de software em que o programa compilado é fornecido, mas também há acesso ao código-fonte original do programa.
Geralmente, o código-fonte é acompanhado de uma licença que diz algo como:
“Aqui está o código-fonte, se você quiser criar sua própria versão realizando as alterações que desejar, fique à vontade.”
Importante
Trata-se de uma forma de distribuição, normalmente gratuita, de software em que o programa compilado é fornecido, mas também há acesso ao código-fonte original do programa.
Mas qual a diferença entre
softwares de código fechado e softwares de código aberto?
CÓDIGO FECHADO
Se você precisa de algum recurso diferente ou adicional, ou se há um bug que você precisa corrigir, você realmente depende do fornecedor, pois somente ele detém o código-fonte.
Então, somente o fornecedor é capaz de realizar ajustes e correções.
✗
CÓDIGO ABERTO
Caso sejam necessáriosajustes, correções e incrementações que você realmente queira fazer com o programa – ou se o fornecedor original não existe mais –, você tem total liberdade para agir.
Você mesmo pode realizar as modificações, ou talvez prefira contratar alguém para fazer uma alteração e produzir sua própria versão personalizada.
Atenção
Em geral, existem diversos tipos diferentes de termos de licença para software de código aberto, mas, na maioria das vezes, eles exigem que, se você fizer alterações no código-fonte e adicionar algum recurso, você deve oferecer essas alterações à comunidade. Assim, da mesma maneira que você se beneficiou dos outros ao obter o programa gratuito e seu código-fonte, eles podem se beneficiar do seu trabalho.
VÍDEO
No vídeo a seguir, o professor Rodrigo Dias nos convida a refletir sobre os impactos dos softwares de código aberto na sociedade.
Adicione um comentário
Até aqui, comentamos sobre uma categoria de linguagens de programação onde compiladores são usados para traduzir o código-fonte, de forma a obter um arquivo executável que pode ser distribuído aos usuários. Agora vamos nos concentrar na seguinte questão:
O QUE É UM PROGRAMA?
Observe novamente o lado direito da Figura 1 e perceba que a CPU está executando uma sequência de instruções presentes na memória RAM.
Então, um programa/aplicativo, como, por exemplo, o navegador de Internet Firefox, ou o editor de textos Microsoft Word, nada mais são do que uma enorme sequência dessas instruções simples de código de máquina.
Assim, quando o Firefox está sendo executado no seu computador, isso significa que, em algum lugar na RAM, há um bloco dessas instruções, e a CPU as executa uma após a outra sequencialmente.
Tudo o que você pode ver o Firefox fazendo – como piscar o cursor, conectar-se via rede a uma URL fornecida pelo usuário, desenhar imagens na tela, obter páginas da Web, entre outros – ocorre graças à CPU, que roda as instruções de forma tão inacreditavelmente rápida, que você interage com o Firefox de forma fluida e natural.
Portanto, as instruções individuais são realmente triviais, certo?
De que forma isso leva o cursor a piscar no ponto onde podemos digitar algo, como no exemplo a seguir?
Uma forma bastante simples de pensar sobre isso é usar uma analogia: o relacionamento entre areia e escultura.
Cada instrução em código de máquina seria um grão de areia, que, por si só, é sem sentido e se parece com todos os outros. Porém, se você juntar grande quantidade de maneira certa, pode construir uma estrutura geral complicada, conforme sua imaginação e seu objetivo.
Em linhas gerais, é assim que programas como o Firefox, Chrome, Microsoft Word, os jogos digitais, ou qualquer outro aplicativo, são construídos.
Se olharmos à esquerda da Figura 1, veremos a CPU trabalhando para executar as instruções de código de máquina disponíveis na RAM.
Para executar as instruções de código de máquina, as instruções usam um método chamado ciclo busca-execução (fetch execute cycle).
No ciclo busca-execução, a CPU iniciará buscando a instrução 1 e carregando-a para dentro de si (CPU), e a executará.
Por exemplo, a CPU adicionará os dois números. Após executar a instrução 1, a CPU simplesmente desce na lista e executa novamente o ciclo busca-execução para a instrução 2. Em seguida, faz o mesmo para a instrução três, e assim por diante. As instruções são executadas uma após a outra sequencialmente.
Saiba mais
Quando dizemos que uma CPU opera a 4 GHz (giga-hertz), ou 4 bilhões de operações por segundo, estamos nos referindo exatamente a essas pequenas instruções.
Há uma enorme variedade de tipos de instruções, mas há dois tipos específicos que vale a pena comentarmos, mesmo em um curso introdutório. Veja a seguir:
Clique no link para ver as informações.
INSTRUÇÃO PARA ALTERAR A ORDEM DE EXECUÇÃO DE INSTRUÇÕES
Normalmente, a CPU apenas desce a lista e faz a execução das instruções na ordem em que elas estão armazenadas na memória.
Conforme ilustrado na Figura 3, digamos que a instrução quatro diga: “Pule para trás e comece a executar novamente na instrução 1”.
Neste caso, a CPU executaria as instruções na ordem: 1, 2, 3, 4 e, em seguida, em vez de seguir para a instrução 5, daria um pulo para trás e iria para (goto) a instrução 1, executando-a novamente, seguida das instruções 2 e 3.
É assim que as estruturas de repetição de instruções (loops) são implementadas pela CPU.
Figura 3: Instrução 4 solicitando que a CPU, em vez de seguir para a instrução 5, volte a executar a instrução 1.
INSTRUÇÃO QUE TESTA ALGUMA CONDIÇÃO
Se a condição for verdadeira, diz, por exemplo, que ela avance para a instrução 5.
Há uma instrução que olhará para alguma condição; assim, se a condição for verdadeira, é como dizer à CPU: “Vá para (goto) a linha indicada”. Caso seja falsa, a CPU vai para (goto) outra linha.
Então, organizando as instruções, você pode obter o efeito de uma estrutura condicional, conhecida como declaração if.
COMO O PROGRAMA VAI PARAR NA MEMÓRIA RAM?
Ao serem instalados, programas são colocados em um dispositivo de armazenamento persistente, como HD, SSD ou pendrive.
Vamos entender com o exemplo do Firefox:
O programa é basicamente um arquivo chamado Firefox.exe, que possui muitos bytes. Na maioria dos casos, esses bytes são apenas as instruções que compõem o programa, além de alguns ícones e fotos, por exemplo.
O que acontece quando você clica duas vezes no arquivo Firefox.exe, ou no atalho que aponta para este arquivo?
Basicamente, são os três passos indicados na Figura 4:
Figura 4: O que é carregar/iniciar um programa?
Clique nos botões para ver as informações.
Passo 1
Passo 2
Passo 3
A CPU começa o processo de rodar/executar, de forma inacreditavelmente rápida, as instruções. Pronto, nosso Firefox está rodando, e o usuário já consegue navegar pela internet.
VERIFICANDO O APRENDIZADO
Parte superior do formulário
1. Depois que uma CPU executa uma instrução, o que, geralmente, faz a seguir?
Apaga as instruções da RAM.
Executa a instrução anterior na sequência de instruções.
Executa a próxima instrução na sequência de instruções.
Grava a instrução no disco.
Parte inferior do formulário
Comentário
Parabéns! A alternativa "C" está correta.
Dada a lista de instruções de um programa carregadas na RAM, a CPU as executa uma a uma sequencialmente, na ordem em que aparecem.
Parte superior do formulário
2. Em código de máquina, para que serve a instrução goto?
Alterar a ordem de execução de instruções pela CPU, como, por exemplo, para implementar loops de repetição e estruturas condicionais.
Ordenar ao sistema operacional que finalize a execução de um programa.
Ordenar ao sistema operacional que a ordem de execução de instruções pela CPU, por exemplo, seja alterar para implementar loops de repetição e estruturas condicionais.
Ordenar à CPU que pause a execução de instruções para aguardar que algum evento definido ocorra.
Parte inferior do formulário
Comentário
Parabéns! A alternativa "A" está correta.
Conforme vimos no exemplo da Figura 2, a instrução goto é usada para alterar a ordem de execução de instruções. Dois importantes exemplos da utilidade desta instrução de código de máquina são implementar loops de repetição e implementar estruturas condicionais.
SISTEMA OPERACIONAL
Comumente, quando se estuda conceitos básicos de software e como ocorre a execução de instruções pela CPU, surgem questionamentos como:
Quem lida com o duplo clique que usamos para ordenar que um programa seja executado?
Quem garante que um novo programa carregado na RAM irá para uma região da memória que está realmente ociosa, sem que haja sobreposição de outros programas em execução?
Quem ordena o carregamento de um programa do HD para a RAM?
Ao final da execução de um programa, quem realizada as operações, como, por exemplo, liberar a região da RAM onde o programa esteve durante sua execução?
A resposta às perguntas descritas anteriormente é a seguinte: é o sistema operacional (SO).
Trata-se de um conjunto de tipos de programas administrativos e de supervisãoque organizam todo o sistema. O sistema operacional está para os computadores como o governo está para uma nação.
O SO de um computador é como um primeiro programa de supervisão que começa a ser executado quando o computador é inicializado (“inicializa”). Ele desempenha um papel administrativo e contábil invisível nos bastidores.
Quando um desktop, laptop ou smartphone é iniciado, o SO, normalmente, organiza as coisas e inicia um programa “explorador de arquivos” que exibe janelas e menus, entre outros, que mostram ao usuário quais sistemas de arquivos estão disponíveis. Isso permite que ele navegue e opere seu equipamento, solicitando que programas/aplicativos sejam iniciados ou finalizados, interagindo com esses programas/aplicativos.
Em resumo, conforme ilustrado na Figura 5, o SO é responsável por intermediar as solicitações que os usuários fazem a programas/aplicações, gerenciando como tudo isso deve ser demandado do hardware.
Figura 5: O sistema operacional e seu papel em sistema computacional.
O sistema operacional mantém as coisas organizadas em segundo plano, para que vários programas possam ser executados ao mesmo tempo, o que é conhecido como “multitarefa”.
O SO fornece a cada programa sua própria área de memória, de modo que cada programa acessa apenas seus próprios recursos, tentando limitar, por motivos de segurança, o que um programa incorreto ou mal-intencionado pode fazer.
Manter os programas separados é conhecido como “área restrita”. Isso é importante para que cada programa funcione independentemente, sem interferir em outros programas ou no sistema como um todo. Da mesma forma, cada programa tem algum acesso à tela através de uma janela, mas essa área de saída é separada da saída de outros programas.
Vamos ver dois exemplos?
Clique nos botões para ver as informações.
Arquivo Word.exe
Um arquivo .exe é essencialmente apenas um arquivo de instruções de código de máquina. Quando você clica duas vezes no programa, está ordenando que o SO “inicie” o programa, executando as etapas de limpeza de alocação de uma área de memória na RAM para o programa, carregando a primeira seção do código de máquina do programa nessa memória e, finalmente, direcionando a CPU para começar a executar esse código.
Câmera digital
BOOT E REBOOT
O sistema operacional é, antes de qualquer programa do usuário, a primeira coisa a ser executada quando seu computador é ligado.
Somente após o carregamento do SO, o usuário pode selecionar os programas que deseja rodar, clicando duas vezes nos ícones correspondentes na área de trabalho.
Você pode estar se perguntando:
Qual é o programa que cuida da inicialização do SO logo que o computador é ligado?
Há um programa especial, e muito pequeno, denominado firmware, que é gravado pela fábrica no hardware.
O firmware é responsável por detectar quando um computador estava desligado e acaba de ser ligado, e realiza alguns procedimentos iniciais de teste de hardware, para então, basicamente, procurar um dispositivo de armazenamento persistente que contenha um SO instalado.
Depois disso, é possível, então, iniciar seu carregamento (cópia das instruções que compõem o SO do disco para a RAM e indicação para a CPU de qual é a primeira instrução do SO a ser executada). Este processo está ilustrado na Figura 6.
O termo firmware é usado, geralmente, para se referir especificamente ao firmware de inicialização, que controla um computador desde o momento em que é ligado até o sistema operacional principal assumir o controle.
A principal função do firmware de inicialização é inicializar o hardware e, em seguida, inicializar (carregar e executar) o sistema operacional principal.
Veja o esquema a seguir de um computador pessoal. Neste tipo de computador o firmware de inicialização é chamado, geralmente, de BIOS (Basic Input/Output System), ou sistema básico de entrada e saída.
Figura 6: Processo de boot em um computador.
Este processo é comumente denominado inicializar
(boot ou boot up).
E quando ocorre o Reboot?
Ocorrerá o reboot quando ordenamos ao SO que o computador seja reiniciado, ou seja, o próprio SO cuida das tarefas necessárias para a finalização e o desligamento do computador. Imediatamente, o computador é religado, e o processo de boot recomeça.
Agora que conhecemos conceitualmente os sistemas operacionais, que tal darmos uma olhada em alguns exemplos de SO?
Chegando ao final deste módulo, podemos fazer algumas perguntas:
Somente os sistemas operacionais e os firmwares são exemplos de softwares funcionais?
O que define um software como funcional? Qual a sua importância no âmbito do pensamento computacional?
VÍDEO
É exatamente isso que nos apresentará o professor Rodrigo Dias, no vídeo a seguir!
Adicione um comentário
VERIFICANDO O APRENDIZADO
Parte superior do formulário
1. Suponha que você clique duas vezes em Firefox.exe em um computador para executá-lo. Qual das seguintes opções descreve melhor o que acontece?
O sistema operacional copia as instruções para o Firefox do disco para a RAM e, em seguida, a CPU executa as instruções na RAM.
As instruções para o Firefox são traduzidas para JavaScript e, depois, executadas pelo navegador.
O sistema operacional copia as instruções do Firefox para a RAM e, em seguida, a RAM executa as instruções.
O hardware, de forma autônoma, copia as instruções para o Firefox do disco para a RAM e, em seguida, a CPU executa as instruções na RAM.
Parte inferior do formulário
Comentário
Parabéns! A alternativa "A" está correta.
Conforme estudamos, o sistema operacional é o nome dado ao conjunto de programas administrativos e de supervisão que intermedeiam a interação humano-computador. Entre as funções do SO, está receber o comando do usuário para iniciar programas (exemplo: duplo clique) e realizar as tarefas administrativas necessárias para que o programa seja executado. Em específico, quando o usuário dá um duplo clique em um arquivo de programa, o SO é quem comanda o carregamento do programa, ou seja, a cópia do conteúdo do arquivo de programa do disco para a RAM. Depois, ele indica à CPU onde, na RAM, está a primeira instrução do programa a ser executado.
Parte superior do formulário
2. Firmwares são componentes fundamentais de computadores, pois:
São responsáveis por definir qual é o conjunto de instruções suportadas por determinada CPU.
São usados para capturar interações do usuário e fornecê-las ao sistema operacional.
São responsáveis por dar início ao processo de boot, para carregamento do sistema operacional.
São usados para traduzir códigos de computador, que são escritos por programadores em código de máquina.
Parte inferior do formulário
Comentário
Parabéns! A alternativa "C" está correta.
O firmware consiste em programas instalados semipermanentemente na memória, usando vários tipos de chips ROM programáveis, como PROMS, EPROMs, EEPROMs e chips flash. O firmware não é volátil e permanece na memória depois que você desliga o sistema.
INTRODUÇÃO
Em sistemas computacionais contemporâneos, é extremamente raro escrever códigos de máquina manualmente. Isso ocorre porque eles são compostos por um número enorme de instruções muito simples; assim, fica difícil para os humanos fazerem esse processo.
Em vez disso, um programador escreve o código (instruções) em uma linguagem de computador de “alto nível”, com recursos mais úteis e poderosos do que as operações simples encontradas no código da máquina.
Exemplos de estruturas de alto nível são:
· Estruturas de repetição (loops), em que o programador ordena que um conjunto de instruções seja executado repetidamente;
· A função print(), que imprime algo na tela; ou
· A estrutura condicional (if), onde o programador solicita que alguma condição seja testada, e, caso passe no teste, algumas instruções sejam executadas.
Nenhum desses recursos de alto nível está diretamente presente no código da máquina de “baixo nível”. Eles são adicionados por linguagens de programação, como JavaScript, Java, Python, C, C++, entre outras.
TIPOS DE LINGUAGEM DE PROGRAMAÇÃO
A classificação de linguagensde programação é mais detalhada e abrangente do que a apresentada aqui, mas vamos nos limitar, por questões de simplicidade, a agrupá-las nestas categorias.
O funcionamento de uma linguagem de programação é definida por seu tipo, que pode ser:
1. LINGUAGEM COMPILADA
São aquelas em que o processo de tradução (compilação) é feito com antecedência e o código é necessariamente executável.
Quando se utiliza uma linguagem compilada, é necessário executar um programa para traduzir os arquivos-fonte, legíveis em linguagem de alto nível, em código executável. As linguagens compiladas têm a vantagem de produzir código de alta performance, o qual está ajustado para o funcionamento em um tipo específico de processador ou arquitetura de processador. Aplicativos compilados, chamados de código binário, só podem rodar no tipo de computador para o qual foram compilados, uma vez que esses aplicativos consistem, na realidade, em instruções em linguagem de máquina, entendidas e executadas pelo microprocessador.
(INDRUSIAK, 1996, p. 4)
Exemplo
No código a seguir, escrito na linguagem C++, na primeira linha, o texto/string “Bom dia” está sendo atribuído à variável “a”, e, na segunda linha, a variável “b” recebe o conteúdo da variável “a” (ex.: “Bom dia”), e a exclamação é adicionada ao final da frase.
a = “Bom dia”;
b = a + “!”;
Então, o programador escreve o que é chamado de código-fonte na linguagem de programação que escolher. Como vimos, humanos preferem linguagens de alto nível pois são mais fáceis e intuitivas.
Como a CPU consegue executar (rodar) instruções escritas em linguagem de alto nível, se sabemos que a CPU só executa código de máquina?
Uma das estratégias utilizadas é usar o compilador.
Como já vimos, trata-se de um software de propósito muito específico: olhar para o código-fonte escrito pelo programador e traduzi-lo, para criar um grande corpo de código de máquina compatível com a CPU em que o programador deseja rodar o programa.
Exemplo
Talvez haja uma parte do código-fonte onde existe uma instrução if (estrutura condicional), mas não há uma instrução específica em um código de máquina para uma instrução if.
No entanto, talvez haja uma sequência de cinco instruções de código de máquina que, na verdade, chegam ao mesmo resultado de uma instrução if. Portanto, o compilador faz esse tipo de expansão.
Vamos usar o Firefox como exemplo novamente:
Esse navegador é escrito em C ++. Assim, para criar uma nova versão do Firefox, após realizar os ajustes desejados em seu código-fonte, alguém executa o compilador C ++, que lê o grande corpo de código-fonte em linguagem de alto nível que constitui o Firefox e produz, essencialmente, o arquivo Firefox.exe.
Este arquivo é a saída do compilador e contém as instruções de código de máquina obtidas através da tradução do código-fonte escrito pelos desenvolvedores do Firefox.
A etapa de compilação pode ser feita uma vez e bem antes da execução do programa (por exemplo, produza o Firefox.exe na sede da entidade que o desenvolve, a Mozilla, e depois distribua o Firefox.exe, para que usuários de PC possam usá-lo).
Importante
A compilação só precisa ser feita pelo desenvolvedor/programador uma vez.
Conforme ilustrado pela Figura 7, o desenvolvedor/programador, que escreveu o código-fonte, realiza a compilação e cria o arquivo executável (exemplo: Firefox.exe), e pode simplesmente enviá-lo para que outras pessoas consigam rodá-lo em seus computadores, contanto que sejam compatíveis com o código de máquina gerado.
Os usuários finais não precisam do código-fonte nem do compilador.
Figura 7: Processo de disponibilização de um programa escrito em linguagem compilada.
Porém, o processo não funciona ao contrário.
Ou seja: não é possível, a partir das instruções em código de máquina do Firefox.exe, realizar a tradução reversa e obter o código-fonte em linguagem de alto nível originalmente escrita pelo(s) programador(es). É até possível obter uma versão imperfeita do código-fonte original, mas esta versão fica bem distante do ideal.
2. LINGUAGENS DINÂMICAS OU INTERPRETADAS
A linguagem dinâmica se diferencia por se pautar no tempo de execução, cruzando os dados com os protocolos por meio de bibliotecas, criando “meta-objetos”, quer dizer, bibliotecas complexas de combinação e execução.
Exemplo
Java, JavaScripts e Python são linguagens de programação dinâmicas/interpretadas.
Uma forma de compreender essa categoria é pensar que, em vez do compilador, é usado outro software de propósito especial denominado interpretador.
Trata-se de um programa que lê código-fonte escrito em uma linguagem como Java, JavaScript, Python, entre outras, e o “executa/roda”.
Talvez, o melhor exemplo para linguagem interpretada seja o JavaScript:
Um interpretador para a linguagem JavaScript vem embutido em navegadores de Internet, como o Firefox, o Chrome, o Microsoft Internet Explorer ou o Microsoft Edge.
Assim, quando um navegador se depara com um website que contenha algum código JavaScript embutido, ele pode usar seu interpretador para executar esse código. Portanto, de forma bastante resumida, a maneira como um intérprete funciona é a seguinte: ele executa uma linha de código por vez.
Então, supondo que o exemplo a seguir seja um código-fonte contendo duas instruções escritas em JavaScript, quando o interpretador JavaScript do navegador for executar isso, ele olharia a primeira linha e a executaria.
//Código Javascript
a = 1;
b = a + 1;
Portanto, neste exemplo, o interpretador diria: “Acho que preciso de um nome de variável ´a´, e preciso colocar o valor ‘1’ nela”. Então, após executar essa linha, ele segue em frente e interpreta/executa a próxima linha, e assim por diante.
Agora que conhecemos as duas linguagens, aperte o play para ouvir o professor Rodrigo Dias comparando-as.
Podcast
0:00
14:10
TENDÊNCIAS
Falando de forma geral, atualmente, a tendência para a programação de computadores caminha para o uso de linguagens dinâmicas/interpretadas. Isso ocorre porque há um consenso de que é bastante atraente poder programar de forma mais simples e eficiente, mesmo sabendo que o programa final rodará mais lentamente na CPU.
Isso talvez seja um pouco contraintuitivo, mas podemos refletir sobre essa questão da seguinte forma:
Qual o recurso mais escasso em programação de computadores?
Geralmente, a resposta é o programador!
Em todo o mundo, o mercado de trabalho da área da computação sofre, cada vez mais, em virtude da falta de profissionais qualificados. Portanto, usar menos horas de trabalho dos programadores é um atrativo muito importante.
O fato de que o programa rodará mais lentamente na CPU é considerado menos relevante, até porque, conforme a lei de Moore, as CPUs estão cada vez mais baratas e o poder de processamento delas cresce continuamente.
Então, se pensarmos em qual será a tendência para os próximos anos, também há um consenso, no mercado, de que o programador continuará a ser considerado um recurso cada vez mais escasso, se comparado ao poder de processamento das CPUs.
Para finalizar, vale a pena comentar sobre uma coisa chamada JIT (Just in Time Compiler). O objetivo dos JITs é tentar obter o melhor dos dois mundos: linguagens compiladas e linguagens interpretadas.
A ideia é ter os benefícios da maior simplicidade de desenvolvimento de programas usando linguagens dinâmica e, ao mesmo tempo, obter um programa que rode mais rapidamente na CPU.
Dessa forma, o JIT é responsável por ler parte do código-fonte e tentar compilá-lo rapidamente, antes de executá-lo. O mais interessante é que isso funciona
muito bem!
Navegadores modernos de internet, como o Firefox, o Chrome, o Microsoft Internet Explorer e o Microsoft Edge, agora embutem JITs para código JavaScript. Assim, na verdade, quando você está executando o código JavaScript dentro do navegador, o JIT examina trechos do código dinâmico (Javascript) que estão sendo executados com muita frequência e compila o código nativo destes trechos em tempo real.
Portanto, o intérprete não é usado para casos simples, mas para seções importantes docódigo dinâmico (como o interior de uma estrutura de repetição), e o JIT cria um bloco de código de máquina na memória.
O código da máquina é executado para essa seção do código dinâmico, oferecendo desempenho semelhante a linguagens compiladas, como C e C ++, e é descartado quando o programa é encerrado.
Note que, mesmo com o uso de JITs, ainda assim, linguagens interpretadas possuem desempenho inferior ao de linguagens compiladas com C e C++.
Além do JavaScript, a linguagem Java também usa a tecnologia JIT extensivamente. O enorme ganho de desempenho dos navegadores de internet nos últimos anos deve-se, em grande parte, à implementação da tecnologia JIT para JavaScript.
VERIFICANDO O APRENDIZADO
Parte superior do formulário
1. Qual das Parabéns! A alternativa "D" está correta.
Já sabemos que CPUs apenas são capazes de executar instruções de baixo nível, ou código de máquina. Entretanto, como instruções de baixo nível são de difícil compreensão para humanos, foram desenvolvidas linguagens de programação de alto nível que admitem instruções de mais fácil compreensão. Nós, humanos, preferimos escrever software em linguagens de alto nível, como, por exemplo, C++. Então, para que a CPU seja capaz de executar as instruções, precisam ser traduzidas da linguagem de alto nível em que foi escrita para a linguagem de máquina. O software que realiza essa tradução é denominado compilador. Portanto, um compilador C++ é responsável por traduzir códigos escritos em C++ para o código de máquina da CPU.
Parte superior do formulário
2. O código de opções a seguir descreve melhor o que um compilador C ++ faz?
Traduz o código da máquina em código JavaScript.
Traduz o código-fonte C ++ em código JavaScript.
Traduz o código de máquina em código C ++.
Traduz o código-fonte C ++ em código de máquina.
Parte inferior do formulário
Comentário
máquina da CPU possui apenas instruções simples e de baixo nível. Uma linguagem de computador (como JavaScript) adiciona recursos de alto nível, como o loop que usamos. Qual das alternativas a seguir é uma instrução de baixo nível?
Passe por todos os pixels da imagem.
Se X < 5, então, execute a instrução a = 1.
Adicione dois números.
Salve determinada informação no arquivo.
Parte inferior do formulário
Comentário
Parabéns! A alternativa "C" está correta.
Conforme estudamos, CPUs só são capazes de executar instruções muito simplificadas, denominadas instruções de baixo nível, ou código de máquina. Entre as opções listadas, a única que contém uma instrução de baixo nível é a opção “Adicione dois números”. As demais instruções são instruções de alto nível e, para serem executadas pela CPU, deverão ser traduzidas/desmembradas em um conjunto, em geral de 4 a 6, de instruções de código de máquina.
CONSIDERAÇÕES FINAIS
Neste tema, você mergulhou na representação do que é um software para computadores, reconhecendo alguns softwares funcionais que fazem parte do seu cotidiano. No fim, aproximou-se da linguagem de programação, podendo, com isso, perceber como a linguagem e sua dinâmica são atualizadas continuamente.
INTRODUÇÃO
Hardware é o que você pode chutar, já software é o que você só pode xingar.
Autor desconhecido.
Quem nunca ouviu essa infame anedota? Caso não tenha ouvido, você precisará ainda mais do que será visto aqui. Porém, se você conhece e achou que tinha entendido, saiba que essa definição não o ajuda muito.
Para começar, estamos trabalhando com a construção do mercado de produtos que mais se modifica na contemporaneidade. A maior parte de nós compra um produto quando ele já está obsoleto para determinados setores, ainda que nos atenda muito bem.
Já reparou como a aparência dele muda o tempo todo? Computadores e celulares evoluem de um ano para o outro. Se essa indústria muda tão rápido, como eu posso explicar o funcionamento de um hardware? Como é possível não lhe ofertar um produto obsoleto de antemão?
Vamos pensar sobre a parte física dessas máquinas? Assista ao vídeo a seguir.
Neste vídeo, conheceremos a origem da máquina.
Adicione um comentário
ENVIAR
O CONCEITO PROPRIAMENTE DITO
Hardware é o termo usado para se referir à parte física de um equipamento. Devemos pensar que estamos falando dos componentes diretamente utilizados pela estrutura tecnológica. Você já viu o interior do seu celular? Tudo ali se encaixa, tem uma função, desde mecanismos para levar energia, poupar e armazenar dados até possibilidades de encaixes que agregam outras tecnologias. Cada um desses elementos é uma mistura de tecnologia de desenvolvimento técnico e equilíbrio econômico para produção em massa.
O que difere hardware de software?
O software é o código, ou seja, as instruções, o que é executado no computador. No entanto, por aqui, vamos nos concentrar no hardware.
Vamos comparar o hardware computacional a outro objeto para ver se fica mais claro.
Você já viu um piano? O esquema a seguir resume comparativamente o que é hardware e o que é software nos computadores e nos pianos.
Piano
· O piano e todos os seus componentes físicos.
· Os papéis e livretos onde as partituras são escritas e lidas.
· A tinta usada para escrever a partitura no papel.
Representação escrita e mundialmente padronizada da música. A música que ouvimos.
Computador
· Gabinete
· CPU
· Memória
· Disco rígido
· Monitor
· Pen drive
· Celulares
· Teclado
· Cartão de memória
· Disquete
· CD
· DVD
· SSD
Instruções (programações).
 Hardware (Fisicamente palpável, ou seja, equipamento, objeto físico)
 Software
Então, um hardware é a estrutura física que permite executar as funções que desejamos.
Vamos a outro exemplo que nos permite sofisticar um pouco mais a visão sobre o que é o hardware.
Se olharmos um cérebro em um microscópio, veremos neurônios. Os neurônios são a unidade fundamental do hardware humano relacionado ao pensamento e processamento de informações.
O cérebro do computador é a CPU (Central Processing Unit). Quando olhamos as partes de uma CPU, identificamos os transistores.
Saiba mais
O processador Intel Core i9 9900k, lançado em 2018, contém 12 bilhões de transistores.
O transistor é provavelmente uma das invenções mais importantes do século. Este é um pequeno componente eletrônico que pode ser usado para criar todo tipo de coisas diferentes.
Atualmente, encontramos transistores embutidos em componentes chamados de chips.
Veja exemplos de diferentes formatos de transistores a seguir.
Transistores: formatos comuns
Os componentes mais comuns dos chips são os transistores. CPU, memórias e diversos outros dispositivos eletrônicos se resumem a chips compostos por transistores.
Saiba mais
Chips são dispositivos de estado sólido (solid state), isto é, sem qualquer tipo de partes móveis internamente. Não há engrenagens, rodas ou eixos que girem dobradiças. Isso torna os chips dispositivos muito confiáveis, pois partes móveis se desgastam com o tempo e requerem manutenção constante, como ocorre em motores de veículos. Além disso, como já citamos, eles são fabricados com altíssima quantidade, mas de forma muito barata. A combinação de baixo custo e alta confiabilidade é uma das principais forças motrizes da revolução dos computadores.
LEI DE MOORE
Uma das forças mais importantes do desenvolvimento do silício é a lei de Moore, uma observação feita por Gordon Moore sobre como a fabricação de chips vinha sendo capaz de inserir cada vez mais transistores dentro de um chip. Essa lei diz que o número de transistores contidos em um chip dobra em um período entre 18 e 24 meses.
Podemos entender a Lei de Moore sob dois aspectos:
Desempenho
A lei pode significar que a indústria tem conseguido dobrar o número de transistores embutidos em um chip a cada dois anos. Essa observação descreve um crescimento exponencial bastante poderoso.
Econômico
Os transistores estão ficando cada vez mais baratos. Dessa forma, com o passar do tempo, devido ao baixo custo, é possível criar sistemas computacionais em outros aparelhos, como telefone celular, geladeira, torradeira, termostatos e até em óculos.
É importante entender que alei de Moore não é uma lei da natureza, como a lei da gravidade de Isaac Newton. Ao contrário, é apenas uma observação sobre como a fabricação de transistores tende a funcionar. O comportamento observado por Moore tem seguido firme desde 1965. Neste sentido, as possibilidades do desenvolvimento de melhoria e aceleração da parte física acabam por permitir o barateamento, transformando o hardware em uma variável importante para o desenvolvimento das sociedades tecnológicas.
A qualidade duplicada da lei de Moore permite que um computador de décadas atrás, que ocupava uma sala inteira e custava milhões de reais, seja, agora, do tamanho de um cubo de açúcar e custe menos de cem reais.
Se pensarmos em apenas uma duplicação, que ocorre em um ano e meio, podemos ter a impressão de que não é algo tão importante. Porém, se pensarmos em um intervalo de 15 anos, teremos, segundo a lei de Moore, dez duplicações, o que representa algo mil vezes maior, conforme ilustrado a seguir.
Para termos a real noção da importância deste fenômeno para o crescimento do poder computacional na atualidade, pense que um telefone celular (smartphone) X, fabricado em 2019, possui poder de processamento bilhões de vezes maior do que o computador de cálculo de trajetória usado na nave espacial Apollo XI (AGC – Apollo Guidance Computer), que levou o homem à Lua, em 1969.
Uma forma internacionalmente conhecida para medir o poder computacional de processadores é o FLOPS (Floating-point Operations per Second ou Operações de Ponto Flutuante por Segundo), que indica quantas operações matemáticas com casas decimais o processador consegue realizar por segundo.
Com base nisso, veja a comparação a seguir:
AGC
Fabricado em 1969
14,6 FLOPS
Capaz de realizar, aproximadamente, 14 operações matemáticas com casas decimais por segundo.
Smartphone
Fabricado em 2019
Mais de 40 GFLOPS (Giga FLOPS)
Capaz de realizar cerca de 40 bilhões de operações por segundo.
Computador de mesa(Desktop)
Fabricado em 2019
Pode chegar a 400 GLOPS
Capaz de realizar, aproximadamente, 400 bilhões de operações por segundo.
Saiba mais
Supercomputadores fabricados em meados de 2019 possuem trilhões de FLOPS, como é o exemplo de um supercomputador disponível na Universidade de Campinas, que faz 4,5 trilhões de operações aritméticas por segundo.
Outro exemplo que você provavelmente observou em sua vida é que, a partir de 2000, surgiram os pen drives, com, inicialmente, 8MB de capacidade de armazenamento. Pelo mesmo preço, em 2019, já era possível comprar pen drives de mais de 2000GB de capacidade. Ou seja, em menos de 20 anos, houve um aumento de 250 mil vezes na capacidade de armazenamento dos pen drives.
Pela lei de Moore, a fabricação dos chips que armazenam informação em pen drives evoluiu de tal forma que é possível embutir mais transistores por, praticamente, o mesmo preço. Então, eles podem oferecer mais e mais capacidade de armazenamento.
Os exemplos que vimos para o poder de processamento de celulares contemporâneos e a capacidade de armazenamento de pen drives evidenciam a qualidade exponencial da lei de Moore.
VERIFICANDO O APRENDIZADO
Parte superior do formulário
1. A definição de hardware é:
Termo que designa uma invenção do homem que utiliza sistemas mecânicos.
Estrutura de programação do computador que define a velocidade e a dinâmica da máquina.
Nome que passou a ser convencionado para a parte física dos equipamentos de computação.
Definição genérica para tratar tudo o que é físico em uma máquina.
Parte inferior do formulário
Comentário
Parabéns! A alternativa "C" está correta.
Hardware é uma nomenclatura convencionada no mundo da computação sobre o maquinário específico de computadores (em várias escalas) que permite o desenvolvimento e a melhoria das estruturas físicas.
Parte superior do formulário
2. Ao introduzirmos a ideia de que o mundo dos computadores não deve ser observado como um retrato atual da tecnologia, o objetivo é demonstrar o sentido de sua construção como solução para os homens. Neste sentido, hardware pode ser compreendido como:
Exercício metafísico do homem para transformar a natureza.
Conjunto de técnicas requeridas de quem vai operar um computador.
Constante processo de invenções que permitam o desenvolvimento das CPUs.
Variável para o desenvolvimento de máquinas modernas computacionais.
Parte inferior do formulário
Comentário
Parabéns! A alternativa "D" está correta.
Hardware é um componente importante para o desenvolvimento das máquinas. As capacidades de armazenar, responder e reduzir geram, com a definição da lei de Moore, uma possibilidade constante de avanço e também um volume constante de obsolescência. Sem o hardware como variável, é impossível pensar na continuidade do desenvolvimento de máquinas na contemporaneidade.
MÓDULO 2
Identificar os componentes básicos de hardware de computadores
INTRODUÇÃO
Para falar sobre computadores, vamos tratar dos componentes fundamentais que o constituem.
Conforme ilustrado a seguir, temos a CPU, a memória RAM e a memória Disco/HD/ pen drives.
CPU
(Cérebro)
MemóriaRAM
(Temporária)
 
MemóriaDisco/HD/pen drive
  
(Permanente)
Clique nas caixas acima para visualizar o conteúdo.
A seguir, vamos entender um pouco melhor como cada um desses componentes funcionam.
CPU
A parte mais importante do computador é a CPU. Ela faz a computação, ou seja, executa instruções. A CPU possui um rol padronizado de operações bastante simples para executar. Então, quando dizemos que um computador executa dois bilhões de operações por segundo, realmente estamos falando sobre a CPU. Isso significa que ela pode fazer centenas de bilhões de coisas muito simples por segundo.
As instruções executadas pela CPU são escritas por pessoas que desejam usar o computador e seu incrível poder de processamento para alcançar algum objetivo útil. As instruções escritas em linguagens de programação são denominadas código de computador.
CPU (do inglês Central Processing Unit), em português, significa Unidade Central de Processamento. 
RANDOM ACCESS MEMORY
A Random Access Memory (RAM), que significa Memória de Acesso Aleatório, pode ser chamada apenas de memória. A RAM é considerada a memória principal, pois é o armazenamento temporário usado pela CPU para manter os dados e o código utilizados enquanto processa instruções.
Pentes de memória RAM.
Em código de computador, quando escrevemos instruções como a = 2 + 5, com o objetivo de que a variável a receba a soma dos valores 2 e 5, ocorrem, na verdade, quatros coisas na memória RAM:
1
O valor 2 é armazenado em uma posição.
2
O valor 5 é armazenado em outra posição.
3
A instrução somar é armazenada em mais uma posição.
4
O espaço para a variável a é armazenado em mais um endereço.
A CPU lê/carrega os valores 2 e 5 da memória RAM e, depois, a instrução soma. Então, a CPU realiza a operação e, depois, armazena o resultado na posição da memória reservada para a variável a.
É importante observar que a CPU precisa da RAM para processar as instruções de acordo com o código de computador escrito pelo programador. É por isso que ela é chamada de memória principal.
A principal característica da RAM é que ela não é uma memória persistente, mas, sim, uma memória volátil. Isso significa que, quando a energia elétrica é desligada, ela imediatamente fica em branco. Portanto, ela funciona muito bem como armazenamento rápido e temporário, mas não se trata de um armazenamento de longo prazo.
Para ficar mais claro, vejamos o exemplo a seguir.
Imagine que o computador desligue por acidente enquanto você está digitando o texto de um trabalho no Word antes de apertar o botão salvar. Você certamente ficará chateado, pois perderá as informações digitadas desde a última vez em que salvou seu trabalho.
Isso ocorre porque esses caracteres ainda estavam somente na memória RAM, que não é persistente. Assim, a versão que você possui é a última versão que salvou.
MEMÓRIA PERSISTENTE
O nosso terceiro componente de hardware é a memória/armazenamento persistente, também chamada de memória secundária.Vejamos como ela funciona de forma diferente da memória RAM.
Em um editor de texto, quando você pressiona o botão salvar, instrui o computador a copiar a versão do documento que está na RAM (versão temporária) para o disco/pen drive/HD, que são memórias persistentes, ou seja, que permanecem com as informações armazenadas mesmo após o desligamento.
Este exemplo simples permite que você compreenda a noção do que significa ser persistente, como um disco/HD/pen drive, ou volátil, como a RAM.
Saiba mais
Para equipamentos atuais, as memórias RAM, em geral, possuem capacidade de bilhões de bytes, enquanto discos/HDs/pen drives possuem capacidade de armazenamento de trilhões de bytes. Todos esses dispositivos, mesmo quando o fornecimento de energia elétrica é cortado, mantêm os dados, apesar de serem muito mais lentos do que a memória RAM.
Avanço das tecnologias de armazenamento persistente
Veja alguns dos dispositivos de armazenamento persistente.
Hard Disk
Por muito tempo, o armazenamento persistente em computadores foi feito com um disco rígido (HD – Hard Disk). No passado, o preço do armazenamento em memórias flash, SSD, pen drives e cartões SD era muito mais caro que os discos rígidos e, por isso, os discos rígidos eram usados ​​para tudo.
Note que um HD possui um disco giratório, que é rígido! Além disso, há uma pequena cabeça semelhante às agulhas dos toca-discos antigos que escreve e lê padrões magnéticos no disco para armazenar e ler dados.
Quando você estiver operando um computador e ouvir vários sons agudos de “cliques”, o que você provavelmente está ouvindo é o disco rígido girando em seu pequeno compartimento, com sua cabeça se movimentando para um lado e para o outro.
Solid State Disk
Mais recentemente, houve avanços no que chamamos de discos de estado sólido (SSD – Solid State Disk). Assim, uma unidade SSD também armazena dados persistentemente, mas, em vez de usar discos, como nos HDs, são usados chips de memória de estado sólido. Estes componentes são chamados de sólidos, pois não há partes móveis, como discos e cabeças de escrita/leitura. Ao contrário, tudo é feito eletronicamente.
Dispositivos de armazenamento baseados em SSD são dezenas e até centenas de vezes mais rápidos do que os discos rígidos, além de serem mais confiáveis, já que não possuem partes mecânicas móveis. Seguindo esta mesma tendência, um dos tipos mais recente de armazenamento secundário é chamado de SSD M.2.
Pen drive
Os pequenos pen drives USB utilizam tecnologia semelhante à do SSD. Seu tamanho reduzido nos permite levar nossos arquivos conosco para qualquer lugar. Desde o lançamento do seu primeiro modelo até hoje, a capacidade de armazenamento dos pen drives cresceu consideravelmente e promete aumentar ainda mais.
Cartões SD
Os cartões SD, usados em câmeras fotográficas digitais e celulares, conta com a mesma tecnologia usada no Solid State Disk e nos pen drives. Apesar de seu pequeno formato, já existem cartões SD com capacidade de armazenamento acima de 500GB.
Observando o avanço das tecnologias de armazenamento persistente, podemos reconhecer o padrão da lei de Moore. Chips de memórias flash estão ficando mais baratos, e, assim, é cada vez mais comum o uso de dispositivos de armazenamento baseados em estado sólido. É possível que, em alguns anos, o disco rígido deixe de ser utilizado para o uso diário.
Para chegar a este ponto, precisamos apenas que a lei de Moore continue ocorrendo e que os preços de SSD sigam caindo até alcançarem um valor bastante convidativo, a ponto de as pessoas pensarem o seguinte: “Não precisamos mais de HD. Podemos apenas usar esses chips, pois eles são muito mais rápidos e confiáveis”.
SISTEMAS DE ARQUIVOS
Quando você tem um dispositivo de armazenamento secundário e persistente, há uma grande capacidade de armazenamento. Entretanto, por si só, estes dispositivos não estão realmente prontos para o usuário.
Normalmente, o armazenamento de dados em disco rígido ou unidade flash é organizado com esquemas convencionados, que são conhecidos como sistemas de arquivos.
Um sistema de arquivos é apenas uma maneira de organizar a grande área de bytes de dispositivos persistentes, dando a eles um tipo de estrutura familiar de arquivos e pastas. Cada arquivo e pasta possuem nomes, que podem ser movidos, copiados, editados, removidos etc.
Agora, vamos refletir sobre o assunto.
Será que, ao tentarmos gravar mais dados em um pen drive cheio, acabaremos sobrescrevendo os dados que já estavam lá?
 
Veja a resposta
Clique no botão acima.
PLACA-MÃE
Já estudamos CPU, memória RAM e diversos tipos de armazenamento persistente (HD, SSD, M.2, pen drive), mas falta um componente fundamental do computador, que é responsável por interligar CPU, RAM, discos etc.
A imagem a seguir apresenta uma placa-mãe, onde todos os componentes eletrônicos são conectados.
Veja como conectamos alguns dos componentes na placa-mãe.
A CPU é montada em um compartimento próprio da placa-mãe.
A CPU recebe uma aplicação de uma pasta térmica, que é importante para ajudá-la a transferir calor para o dissipador que será instalado por cima e, assim, manter-se adequadamente resfriada durante seu funcionamento.
Um dissipador de calor, também chamado de cooler, é firmemente preso por cima da CPU, ficando em contato com ao CPU e a pasta térmica.
Os pentes de memória RAM também precisam ser encaixados na placa.
Assista ao vídeo a seguir para conhecer mais detalhes desses componentes.
Neste vídeo, veremos as partes que compõem o hardware e a função de cada uma delas.
Adicione um comentário
ENVIAR
MICROCONTROLADORES
Uma interessante consequência da lei de Moore é que os computadores se tornaram tão pequenos e baratos, que você pode comprar versões cada vez menores dessas máquinas por preços relativamente baixos. Eles podem se encaixar em inúmeros lugares, o que antigamente era algo inimaginável.
Um pequeno computador embutido em um único chip é conhecido como microcontrolador, que possui todos os componentes básicos, como CPU, RAM e armazenamento persistente, em uma escala realmente pequena. Logicamente, seu poder computacional, quando comparado a computadores de mesa, é bastante limitado.
Então, microcontroladores são computadores realmente pequenos, que não têm muito poder, mas são muito baratos, e quem tornou isso possível foi a lei de Moore. Veja, a seguir, alguns exemplos de equipamentos que utilizam microcontroladores.
Termostatos
Carros
Fornos de micro-ondas
Saiba mais
Um carro mais moderno possui microcontroladores espalhados pelo chassi, realizando tarefas específicas para cada subsistema.
Um bom exemplo de um microcontrolador é uma placa Arduino. Trata-se de um equipamento de projeto e de código aberto, oferecido apenas por artistas ou entusiastas, ou apenas para brincar.
Observe o microcontrolador do Arduino destacado na imagem a seguir. É ali que ficam a CPU, a memória RAM e o armazenamento persistente.
O microcontrolador está instalado sobre a placa azul, onde encontramos outros componentes auxiliares, ou seja, de suporte. Por exemplo, para alimentação elétrica e interface com um monitor de vídeo.
Atualmente, é possível comprar um Arduino por valores acessíveis. Este é um item bem interessante para ser utilizado em sistemas computacionais a fim de ler sensores ou interruptores. Também é possível controlar pequenas luzes, por exemplo.
Portanto, é apenas uma maneira divertida de brincar e fazer uma espécie de projeto de arte ou algo assim. O Arduino também é usado por escolas e universidades de todo o mundo, pois permite que alunos estudem e implementem sistemas computacionais de forma bastante efetiva a um custo realmente reduzido, inclusive sem a necessidade de gastos com licenças e royalties.
VERIFICANDO O APRENDIZADO
Parte superior do formulário
1. Observe a lista de hardwares a seguir:
I. CPU.
II. RAM.
III. Disco rígido.
IV. SSD (Solid State Drive).
V. Cooler.
VI. Pen drive.
Marque a opção que indica os componentes de hardware que provêm armazenamento persistente, isto é, os dados permanecem armazenadosmesmo quando o componente é desligado.
I e II.
I e III.
II e IV.
III, IV e VI.
Parte inferior do formulário
Comentário
Parabéns! A alternativa "D" está correta.
O HD, os SSD e os pen drives são exemplos de dispositivos de armazenamento secundário. Estes dispositivos, conforme estudado, possuem capacidade de armazenamento persistente de dados.
Parte superior do formulário
2. Entre os componentes de hardware estudados, selecione a opção que indica o componente responsável por armazenar instruções e dados usados para execução das instruções que compõem um algoritmo/aplicativo/código.
CPU.
RAM.
SSD.
Pen drive.
Parte inferior do formulário
Comentário
Parabéns! A alternativa "B" está correta.
A memória RAM, também chamada de memória principal, é responsável por interagir diretamente com a CPU para possibilitar a execução das instruções contidas em aplicativos/códigos/algoritmos. Quando um aplicativo é iniciado, ele é transferido do HD/SSD/pen drive para a memória RAM e, a partir daí, a CPU começa a ler as instruções e os dados da RAM para, efetivamente, executar suas respectivas instruções. A memória RAM é muito mais rápida do que dispositivos de armazenamento persistentes e, por isso, é usada durante a efetiva execução de aplicativos/códigos/algoritmos.
MÓDULO 3
Reconhecer as unidades de armazenamento de dados
INTRODUÇÃO
Você já perguntou a alguém se o computador ou o celular que você estava querendo adquirir era bom?
Tenho certeza de que alguma coisa assim já aconteceu, e você foi orientado a conferir qual era a memória RAM, a memória de armazenamento, a velocidade do processador etc.
Com o tempo, ou você desistiu ou passou a aceitar o que as pessoas recomendavam. Afinal, o mundo da informática lhe apresentou algumas unidades de medidas novas. Certamente, você já teve um celular ou um computador com uma memória medida em mega. Depois, você notou que precisava de giga e, agora, muitos já dizem que você necessita de tera.
Porém, o que significa isso? Quem faz a conta do espaço que uma foto ou um aplicativo ocupará no seu celular?
Não há nada de simples nessas nomenclaturas, mas, aos poucos, elas passam a fazer parte de nosso cotidiano e acabam fazendo sentido.
Antigamente, os computadores – famosas torres – tinham processadores tão barulhentos, que pareciam aviões decolando. Sempre que um problema era detectado, surgia a possibilidade de um aquecimento, e logo era posto um ventilador para esfriar as coisas. Assim, um processador era associado não à capacidade de processar, mas à velocidade do cooler, e por aí vai.
As tecnologias físicas passaram pelo mesmo processo por séculos, ou seja, primeiro vem a invenção, depois, a desconfiança. Com a expansão, vem a assimilação. O resultado é a plena utilização dos vocabulários e das práticas da tecnologia, como se sempre tivessem sido íntimas de nós. Pense no número de pessoas que desejam saber quantos cavalos tem um motor, se a sua potência é 1.0 ou 2.0, com 8 válvulas ou 16 válvulas.
O que você verá agora é uma breve introdução ao entendimento das unidades de medida e sua lógica de utilização.
BYTE
Um byte é a espécie de medida mais comum de armazenamento de informações. Uma forma simples de pensar em um byte é imaginar uma letra que você digita no teclado. Cada caractere, como um “a” ou um “G”, pode ser internamente armazenado no computador como um byte.
A capacidade de armazenamento de memórias, como RAM e discos/HD/pen drives, é medida em bytes. Podemos dizer que um megabyte é um termo que a maior parte de nós está acostumada a ouvir. Cada megabyte equivale a um milhão de bytes.
Um gigabyte equivale a cerca de um bilhão de bytes. Então, com isso em mente, confira as unidades a seguir.
Os equipamentos atuais utilizam a seguinte escala:
Pen drive
GB
HD
TB
RAM
GB
BITS E BYTES
Historicamente, computadores são construídos de forma que a unidade básica de informação a ser processada seja uma unidade denominada bit, que pode assumir apenas dois valores, 0 (zero) ou 1 (um). Provavelmente, você já ouviu a expressão que diz que computadores são apenas capazes de lidar com números 0 (zero) e 1 (um). Isso se refere a bits.
Tudo o que computadores são capazes de fazer é necessariamente construído a partir dessa coleção de bits simples. Então, no hardware de computadores, qualquer componente interno é capaz de assumir dois estados diferentes e, quando assume um estado, ele pode ficar nele. Por exemplo, um transistor pode estar no estado ligado (1) ou no estado desligado (0).
Em um disco rígido, os dois estados diferentes são feitos com uma pequena área onde o fluxo magnético tem polaridade sul-norte (bit zero) ou polaridade norte-sul (bit um).
Por que os computadores funcionam dessa forma?
Os engenheiros que trabalham no desenvolvimento de computadores notaram que esta é uma forma muito mais barata de construir tais hardwares quando comparada a outras formas, pois a unidade fundamental de dados pode assumir mais do que dois estados, como em um computador em que a unidade fundamental de armazenamento seja o sistema decimal, que estamos acostumados a usar.
Um bit, por si só, é pequeno demais para ser útil para qualquer coisa. Então, o que podemos fazer é agrupar oito bits para criar um byte. Então, ao olhar para um byte, você, na verdade, está olhando para um conjunto de oito dígitos binários, ou seja, cada dígito só pode assumir os valores zero ou um, como no exemplo a seguir.
Então, quanto de informação um byte pode conter exatamente? Em outras palavras, quantos padrões e combinações diferentes um byte pode assumir?
Para começar essa discussão de forma simplificada, considere apenas um, dois ou três bits e veja quantas combinações de valores diferentes esses bits podem assumir:
1 bit = 2 combinações
0
1
2 bits = 4 combinações
0
 
0
0
 
1
1
 
0
1
 
1
3 bits = 8 combinações
0
 
0
 
0
0
 
0
 
1
0
 
1
 
0
1
 
1
 
1
1
 
0
 
0
1
 
0
 
1
1
 
1
 
0
1
 
1
 
1
Se prestar atenção, você notará que o número de possíveis combinações distintas duplica cada vez que adicionamos um bit ao número de bits usados para representar valores.
Matematicamente, poderíamos expressar assim: 2x, onde x é o número de Bits.
Portanto, se um Byte é um grupo de oito bits, teremos 28 = 256 combinações diferentes.
Usando o raciocínio ilustrado anteriormente, sabemos que, com um byte (8 bits), podemos representar 28 valores distintos, ou seja, 256 valores.
Mas qual é a utilidade do que acabamos de aprender?
Vamos começar refletindo sobre como usar esses padrões para representar números decimais. Cada número receberá um dos 256 padrões diferentes. Assim, um byte pode representar cada número das 256 combinações.
Número 0 
 
0
 
0
 
0
 
0
 
0
 
0
 
0
 
0
Número 1 
 
0
 
0
 
0
 
0
 
0
 
0
 
0
 
1
Número 2 
 
0
 
0
 
0
 
0
 
0
 
0
 
1
 
0
Número 3 
 
0
 
0
 
0
 
0
 
0
 
0
 
1
 
1
...
Número 255 
 
1
 
1
 
1
 
1
 
1
 
1
 
1
 
1
Não vamos entrar em mais detalhes sobre como eles são atribuídos, mas cada número precisa de um padrão e não pode compartilhar seu padrão com outro número.
Ok, eu tenho 255. Por que não 256, já que 8 bits podem representar 256 padrões diferentes?
A razão pela qual não é 256 é que começamos a contar do zero, e não do um. Então, um byte armazenará números entre zero e 255. Dessa forma, 255 é o máximo, mas são 256 valores distintos.
Um bom exemplo de como um byte (0-255) é usado na prática é o sistema de representação de cores em computadores, em que cada um dos componentes R (Red – vermelho), G (Green – verde) e B (Blue – azul) são representados na memória do computador através de um byte cada. Ou seja, no padrão RGB, temos 256 níveis distintos de vermelho, 256 níveis distintos de verde e 256 níveis distintos de azul. Usando este padrão, o computador será capaz de representar 256x256x256 = 16.777.216 de cores (16.77 milhões de cores).
Achou tudo muito confuso? Não se preocupe, pois, no vídeo a seguir, você poderá sanar as dúvidas que restaram sobre bit e byte.
Neste vídeo, veremos como os computadores armazenam e representam dados numéricos.
Adicione um comentárioENVIAR
VERIFICANDO O APRENDIZADO
Parte superior do formulário
1. Analise as opções a seguir, que indicam quantos valores diferentes podem ser armazenados, respectivamente, em um conjunto de 2, 7 e 10 bits.
4 valores distintos, 128 valores distintos e 1024 valores distintos.
2 valores distintos, 64 valores distintos e 512 valores distintos.
2 valores distintos, 128 valores distintos e 512 valores distintos.
8 valores distintos, 256 valores distintos e 2048 valores distintos.
Parte inferior do formulário
Comentário
Parabéns! A alternativa "A" está correta.
O número de combinações distintas possíveis com x bits é calculado como 2x. Então, se temos, respectivamente, 2, 7 e 10 bits, o resultado será:
· 2 bits: 2² = 4 valores distintos;
· 7 bits: 27 = 256 valores distintos;
· 10 bits: 210 = 1024 bits distintos.
Parte superior do formulário
2. Após ler a frase a seguir, no contexto de unidades de armazenamento de dados, analise os enunciados e indique a alternativa a que ela se refere:
“Ao olhar para um byte, na verdade, você está olhando para um conjunto de oito dígitos binários”.
I. Os computadores são construídos de forma que a unidade básica de informação (byte) possa assumir apenas dois valores, zero ou um. Por isso, pode-se dizer que um byte pode assumir dois estados: zero ou um.
II. Aqueles que trabalharam no desenvolvimento de computadores identificaram esta forma como muito mais barata de construir estes hardwares quando comparada a outras formas: tudo o que os computadores são capazes de fazer é construído a partir dessa coleção de bits simples, que são apenas zero e um.
III. Um bit é pequeno demais para ser de fato útil. Então, o que se faz é agrupar oito bits para criar um byte. O byte é apenas uma unidade de medida muito comum, que representa, por exemplo, um caractere.
Das afirmativas acima:
Somente I é verdadeira.
Somente III é falsa.
 
Somente III é verdadeira
II e III são verdadeiras.
.
Parte inferior do formulário
Comentário
Parabéns! A alternativa "C" está correta.
A unidade básica de informação que pode assumir apenas dois valores, zero ou um, chama-se bit. O byte é o agrupamento de 8 bits.
CONCLUSÃO
Neste tema, você conheceu o hardware, a forma como ele passou a ter sentido em seu cotidiano com a expansão dos computadores, que, na prática, representa uma continuidade da história humana na busca de melhorar sua vida e criar invenções e desenvolvimento tecnológico.
As principais peças que compõem a computação estão em constante modificação. Percebê-las é entender sua tendência e suas capacidades de uso, conhecer o fenômeno de expansão e como elas estão diretamente relacionadas ao hardware, à melhoria do custo e às suas possibilidades de expansão. Por fim, você foi provocado a entender a constante ampliação das medidas e da capacidade de desenvolvimento que o hardware pode oferecer no cotidiano.
OBJETIVOS
Módulo 1
Identificar os fundamentos sobre pixels
Módulo 2
Reconhecer o esquema Red Green Blue (RGB) de representação de cores em computadores
INTRODUÇÃO
Para começar, vamos assistir ao vídeo que aborda a evolução histórica da representação de imagens.
Adicione um comentário
SERIA POSSÍVEL ABRIR MÃO DO COMPUTADOR NO MUNDO ATUAL?
O que pode ser elemento de afinidade também pode resultar em aspecto de segregação.
As duas últimas gerações – as primeiras que tiveram computação na escola – aprendiam que esta era uma nova disciplina.
Com o tempo, passou-se a contestar cada vez mais a utilidade das “aulas” de informática. Seria necessário que a computação estivesse, como no resto do mundo, inserida no contexto das práticas diversas.
Assim, o computador passou a ser parte integrante das relações de ensino e aprendizagem.
Como formamos para este mundo?
Como podemos lidar com uma tecnologia que será constantemente superada, reinaugurada?
Como fazemos para nos livrar da terrível sensação de estarmos obsoletos?
Só há um jeito!
Inteirarmo-nos deste mundo, compreender como ele funciona, desmitificar o entendimento de que isso é tarefa dos iniciados.
Neste tema, você será convidado a se atrever, a tentar, a compreender em um nível mais avançado, para que possa ser um usuário mais competente e entender a dinâmica de abstração na construção dos programas.
Para tal, escolhemos, como os seres humanos, há milênios, a primeira forma de tentar entender o mundo: construir e representar suas imagens. Se já o fizemos nas cavernas, com muito menos recursos, não serão algumas máquinas que vão nos intimidar.
Boa reflexão!
Identificar os fundamentos sobre pixels
FUNDAMENTOS SOBRE PIXELS
Neste módulo, aprenderemos como imagens são representadas em computadores, ou seja, estudaremos as imagens digitais.
Observe o exemplo a seguir, com um lindo pássaro, em que vemos as cores amarelo, roxo, azul, verde, preto e um fundo branco:
Figura 1: Exemplo de imagem digital
Você certamente observou como esta imagem é natural e arredondada. Temos a nítida impressão de que estamos olhando para um pássaro de verdade.
Na parte interna do computador, entretanto, essa imagem, e qualquer outra, resume-se a uma grande quantidade de números pequenos.
Lembre-se: computadores são capazes de lidar somente com números. Então, como é que isso funciona?
O primeiro passo para compreendermos as imagens digitais, ou seja, como o computador representa uma imagem por meio de um conjunto de números pequenos, é darmos um bom “zoom” na imagem da figura 1 para observarmos mais detalhes. Veja:
Figura 2: Zoom no início do colar azul do pássaro
Na figura 2, você pode observar que há uma área azul no meio, uma parte maior em preto à esquerda e uma parte branca à direita.
Você também pode constatar que a imagem é formada por pequenos quadrados, cada um de uma cor diferente. Eles são o que chamamos de pixels. Então, cada pixel é um quadrado.
Quando olhamos para uma imagem digital como um todo, sequer percebemos que ela é formada por esses pequenos quadrados. Isso ocorre porque os pixels são tão pequenos que geram uma ilusão de ótica, assemelhando-se a uma imagem natural e arredondada.
Realmente, só conseguimos notar que imagens são formadas por pixels quando usamos o recurso de zoom (figura 2).
Antes de prosseguirmos, faremos uma breve provocação.
Clique no botão para ver as informações.
Você conhece algum outro exemplo, fora do mundo dos computadores, em que pontos (pixels) também são usados para representar imagens?
A ideia básica por trás de imagens digitais é praticamente a mesma usada pelas nossas avós quando costuravam lindos bordados ponto de cruz.
Nesses bordados, as imagens também são formadas por um conjunto de pequenos “x” (pontos de cruz), cada um de uma cor. Os pontos de cruz são os pixels dos lindos bordados das nossas avós.
Figura 3: Bordado ponto de cruz
Por exemplo, se a mesma imagem do pássaro na figura 1 for representada por apenas 1.600 pixels, ficará conforme mostra a figura 4:
Figura 4: Mesmo pássaro da figura 1 com número total de pixels reduzido para 1.600
Não há um número-esquema para o número de pixels contidos em uma imagem. O fato é que quanto mais pixels houver em uma imagem, mais próxima ela será da realidade.
As características fundamentais de qualquer imagem digital são:
1
Elas são formadas por pixels.
Pixels são quadrados.
2
3
Um pixel só pode assumir uma cor por vez. Você não pode, em um mesmo instante, representar mais de uma cor em um pixel.
Se você quiser analisar a quantidade de pixels em uma imagem, basta checar quantos formam sua largura (colunas) e quantos formam sua altura (linhas). Então, o número total de pixels é apenas uma questão de multiplicação.
Se houver uma imagem com 800 pixels de largura por 600 de altura, o total de pixels será: 800 x 600 = 480.000.
A imagem do pássaro apresentada na figura 1 é formada por 3.892 pixels de largura (colunas) e 3.328 pixels de altura (linhas): 3.892 x 3.328. Aquele lindo pássaro foi representado pelo uso de 12.952.576 pixels, ou seja, quase 13 milhões. Agora, fica fácil entender por que a imagem nos parece tão natural.
Você, provavelmente,já deve ter ouvido o termo megapixel.
Ele é usado para se referir a 1.000.000 (um milhão) de pixels. Então, o exemplo da figura 1 possui praticamente 13 megapixels.
Telefones celulares, hoje em dia, são capazes de capturar imagens com resoluções de 5, 10, 12, 16, 20 e até 100 megapixels. Com o passar dos anos, as câmeras digitais se tornaram capazes de capturar cada vez mais megapixels.
GRADE DE PIXEL
Notamos que uma imagem digital é representada pelo computador como uma grade de pixels.
Cada pixel é um quadrado que só é capaz de assumir uma cor por vez. Além disso, é necessário que haja um esquema de endereçamento para identificar cada pixel na composição da imagem.
Nos computadores, foi padronizado o uso de um conjunto de números para representar a coluna em que o pixel se encontra, onde 0 (zero) corresponde à primeira coluna, 1 (um) corresponde à segunda, e assim por diante.
Temos o conjunto de valores do eixo y, onde 0 (zero) representa a primeira linha (topo), 1 (um) representa a segunda, 2 (dois) representa a terceira etc. Historicamente, é assim que os pixels de uma imagem são enumerados pelo computador.
Tabela 1: Imagem digital representada em um computador
No exemplo da tabela 1, podemos ver três pixels indicados por setas. O pixel (5,0), em azul, o pixel (1,1), em branco, e o pixel (2,4), em amarelo. É bem comum dizer que esses valores são as coordenadas de um pixel, algo como o endereço da posição do pixel em referência ao canto superior esquerdo.
Para reforçar o que você aprendeu até aqui, vamos ver mais detalhadamente como as imagens digitais são representadas.
Adicione um comentário
Mesmo que uma imagem tenha 100.000.000 pixels, qualquer pixel em particular tem um número x,y que o identifica unicamente em relação a todos os demais da imagem.
VERIFICANDO O APRENDIZADO
Parte superior do formulário
1. Considere a grade de pixels a seguir:
Qual seria a coordenada do pixel em vermelho?
(3,4)
(4,3)
(2,3)
(3,2)
Parte inferior do formulário
Comentário
Parabéns! A alternativa "C" está correta.
Conforme observamos na imagem a seguir, o pixel em vermelho está na coluna 2, linha 3:
Portanto, conforme esquema internacionalmente convencionado para endereçamento de pixels, a coordenada para este pixel é (2,3).
Parte superior do formulário
2. Considere as representações de imagens a seguir:
Assinale a alternativa que indica a imagem com o segundo menor número de pixels:
X
Y
Z
W
Parte inferior do formulário
Comentário
Parabéns! A alternativa "B" está correta.
Como você já sabe, quanto menor o número de pixels em uma imagem digital, pior será nossa percepção sobre a qualidade da imagem, uma vez que usamos menos pontos para representá-la. Partindo desse raciocínio e observando as imagens apresentadas, notamos que a imagem X é a que nos dá a impressão de pior qualidade, seguida pela imagem Y.
Reconhecer o esquema Red Green Blue (RGB) de representação de cores em computadores
REPRESENTAÇÃO DE CORES EM COMPUTADORES
Agora que sabemos como os computadores identificam pixels de uma imagem, vamos descobrir como representam a cor de cada um deles.
Para entendermos como isso é feito, precisaremos recordar o lendário físico Isaac Newton e seu experimento com o prisma de cores, que hoje chamamos de prisma de Newton, ilustrado na figura.
Figura 5: Prisma de Newton
Newton bolou e realizou este famoso experimento com um prisma, que é apenas um pedaço triangular de vidro.
Conforme ilustrado na figura 5, a luz solar branca vem da esquerda, e o prisma de vidro transparente divide este fecho de luz em um espectro de cores, que está projetado na cadeira (o ideal é uma superfície branca), revelando que a luz branca não é algo puro e indivisível.
Em vez disso, a luz branca pode ser separada em um espectro de cores constituintes. Essas são justamente as cores que você vê em um arco-íris. Portanto, as cores estão realmente em um espectro contínuo, conforme ilustrado na figura 6.
Figura 6: O prisma de Newton dividia a luz branca em um espectro contínuo de cores
Uma forma de representar cores é pensar em cores puras como uma espécie de paleta. Um esquema mundialmente aceito é o uso as cores puras vermelho, verde e azul.
Você consegue identificar essas cores na figura 6?
Costuma-se utilizar essas três cores puras como constituintes para representar qualquer outra cor que desejarmos.
Enquanto Newton usou um prisma para dividir a cor branca em um espectro contínuo de cores que a constituem (exemplo: arco-íris), desejamos usar cores constituintes e combiná-las para obter outras cores, e até mesmo a luz branca.
Curiosidade
Por trás deste “experimento de Newton ao contrário”, os pressupostos de Física não são exatamente os mesmos que Newton observou no experimento com o prisma de vidro. Contudo, é uma forma intuitiva de pensar como o computador usa cores constituintes e as combina para gerar qualquer outra cor.
Se o espectro de cores é contínuo, ou seja, possui infinitas cores, por que só damos nomes às sete cores do arco-íris?
Newton era adepto de convicções místicas, aquilo que acreditamos não ser científico, e, na época, havia sete planetas conhecidos. Então, Newton pensou que fazia sentido nomear sete cores conforme o número de planetas conhecidos. É como se ele tivesse forçado o nome Anil/Índigo para uma cor que poderia ser o azul apenas para potencializar o seu misticismo.
Agora, vamos estudar o esquema de codificação de cores específico chamado de Red Green Blue (RGB) ou Vermelho, Verde e Azul. Desejamos que este esquema seja simples o suficiente para que nos tornemos capazes de instruir (codificar ou programar) computadores a representar qualquer cor como uma combinação dessas três.
Se olharmos para a grade de pixels da tabela 1, precisaremos refletir sobre o que cada cor representa dentro da grade. No esquema RGB, vamos usar luzes vermelhas, verdes e azuis puras, e misturá-las em diferentes combinações para alcançarmos todas as cores possíveis.
Vamos descrever o funcionamento do explorador RGB, que é bem simples.
Há três controles deslizantes. Cada um serve para ajustar as intensidades de verde, de azul e de vermelho.
Se você escolher o valor 0 (zero) para o azul, significa que está ajustando o “pixel grande” do centro para que não tenha absolutamente nenhuma intensidade de azul.
À medida que você desliza o controle para a direita, vai aumentando a intensidade de luz azul para 1, 2, 3... até chegar ao nível 255, que representa o máximo de intensidade de luz azul que sua tela é capaz de emitir. O mesmo vale para o vermelho e para o verde.
Saiba mais
Para saber mais sobre o assunto, pesquise na internet a Tabela de Códigos RGB.
TEORIA NA PRÁTICA
Como já mencionamos, a base de nossa prática será o explorador RGB.
Para deixá-la mais interessante, vamos enumerar, logo abaixo dos controles deslizantes, a intensidade que você vai escolher para cada uma das três cores. Você perceberá essa enumeração assim:   R:   G:   B:
Vamos, então, manipular o explorador RGB:
Explorador RGB
	 
	Sem cor →→ Escuro →→ Mais claro →→ Saturação total
	 
	Vermelho (R - Red):
Verde (G - Green):
Azul (B - Blue):
	R:0 G:0 B:0
 Mostrar Hexadecimal   
	 
	
Clique nas setas para passar o slide.
1. Observe que, na situação inicial, todos os controles deslizantes estão totalmente para a esquerda, ou seja, 0 (zero) de intensidade para as luzes vermelha, verde a azul. Com a ausência total de cores, o “pixel grande” à direita está preto. Note que os valores R (vermelho), G (verde) e B (azul) para a cor preta são (0,0,0).
2. Se você escolher o valor 0 (zero) para o vermelho, estará ajustando o “pixel grande” do centro para que não tenha absolutamente qualquer intensidade de vermelho.
À medida que você desliza o controle para a direita, vai aumentando a intensidade de luz vermelha para 1, 2, 3... até chegar ao nível 255, que representa o máximo de intensidade que sua tela é capaz de emitir.
a) Neste ponto, anote em um papel o código RGB que representa o vermelho puro em sua maior intensidade.
b) Agora, retorne o controledo vermelho para a posição 0 (zero). O “pixel grande” voltou a ficar preto, certo?
3. Faça o mesmo para o controle do verde: deslize-o lentamente para a direita. Observe que o “pixel grande” vai ganhando intensidade até a máxima de verde, que é 255.
a) Neste ponto, anote em um papel o código RGB que representa o verde puro em sua maior intensidade.
b) Agora, retorne o controle do verde para a posição 0 (zero). O “pixel grande” voltou a ficar preto, certo?
4. Por fim, faça o mesmo para o controle do azul.
a) Neste ponto, anote em um papel o código RGB que representa o azul puro em sua maior intensidade.
b) Agora, retorne o controle do azul para a posição 0 (zero). O “pixel grande” voltou a ficar preto, certo?
5. O que acontecerá se você deslizar os três controles RGB até a posição 50, e o código RGB resultante for (50,50,50)?
a) O pixel resultante possui uma tonalidade cinza bem escura.
b) À esquerda do cinza-escuro, há um retângulo vermelho na vertical que indica quanto de vermelho foi aplicado para obter o cinza do nosso “pixel grande”.
c) Abaixo do pixel cinza-escuro, há um retângulo na horizontal que indica quanto de verde foi aplicado no “pixel grande” para obter a tonalidade cinza-escura.
d) À direita do “pixel grande”, há um retângulo azul na vertical que indica quanto de azul foi aplicado para obter o tom cinza-escuro resultante.
6. Agora, deslize os controles para a direita, a fim de obter o código RGB (100,100,100). A situação é análoga ao experimento 5 anterior. Você alcançará uma tonalidade de cinza que, agora, estará bem mais clara. Observe que os componentes constituintes vermelho, verde e azul estão mais saturados. Foi a combinação dos três que gerou este cinza mais claro.
7. Chegou a hora de experimentarmos uma situação bastante interessante: mover os controles R, G e B totalmente para a direita e obter o código RGB (255,255,255).
a) Ao realizar este experimento, você notará que a cor resultante é branca!
b) Vamos unir este resultado ao que observamos nos experimentos 5 e 6 para tentar fazer uma breve reflexão sobre a chama escala de cinza. Segundo o esquema RGB, essa escala é alcançada por meio de códigos RGB, nos quais temos o mesmo valor numérico para a intensidade dos constituintes de cores azul, verde e vermelho.
c) RGB (0,0,0) resulta em preto, RGB (255,255,255) resulta em branco, valores intermediários entre 0 e 255 representam diferentes tonalidades de cinza. Quanto menores os valores, mais escura será a tonalidade de cinza, e quanto maiores, mais clara ela será.
8. Para este experimento, você vai manter o controle verde sempre em 0 (zero). Manipularemos apenas os controles azul e vermelho, ambos até o 255, para obtermos o código RGB (255,0,255). Observe que alcançamos um roxo bem saturado.
9. Para este experimento, você vai manter o controle azul sempre em zero. Manipularemos apenas os controles vermelho e verde, ambos até o 255, para obtermos o código RGB (255,255,0). Observe que alcançamos um amarelo bem saturado.
10. Para este experimento, você vai manter o controle azul sempre em 0 (zero). Manipularemos apenas os controles vermelho e verde, ambos até o 125, para obtermos o código RGB (125,125,0). Observe que alcançamos um amarelo mais escuro.
11. Para este experimento, você vai manter o controle vermelho sempre em zero. Manipularemos apenas os controles azul e verde, ambos até o 255, para obtermos o código RGB (0,255,255). Observe que alcançamos um turquesa.
Aplicação no diagrama
Fique à vontade para experimentar a ferramenta RGB até que estes conceitos lhe pareçam naturais e intuitivos. Quando isso ocorrer, seu cérebro estará pensando de forma bem mais próxima ao computador.
Fique tranquilo, pois não esperamos que você saiba de cor os três números RGB para qualquer cor em particular. O importante é que você compreenda que existe esse esquema básico para representar qualquer cor manipulando apenas três cores constituintes básicas: vermelho, verde e azul.
Já sabemos com mais detalhes como os computadores usam o esquema RGB para representar qualquer cor em um pixel. Agora, podemos refinar o diagrama que vimos na tabela 1 e apresentar a tabela 2, onde, além da posição de cada pixel, também representamos suas cores:
Tabela 2: Imagem digital representada em um computador, incluindo a cor de cada pixel
Essencialmente, cada um desses pixels tem seus próprios três números, que formam o código RGB de cores. Como já vimos, cada pixel possui uma única cor por vez. Toda a informação necessária para representar a cor de um pixel está nesses três números.
PENSAMENTO COMPUTACIONAL
Como humanos, estamos naturalmente acostumados a ver o mundo, pensar e refletir a respeito dele sob a ótica de tudo o que é natural e orgânico.
Você lembra da figura 1, onde viu a imagem de um lindo pássaro? Primeiro, supomos que essa imagem fosse do mundo real e orgânico.
Depois, fomos gradativamente reduzindo o desafio de representar uma imagem do mundo real em computador. A partir desse momento, passamos a empregar a grade de valores da tabela 2 como um esquema cujos números representam digitalmente qualquer imagem que possamos imaginar.
Quando temos um arquivo de computador que armazena uma imagem, na prática, o que está dentro desse arquivo são os dados de cada pixel, ou seja, números para a posição x,y do pixel na tela, e números (RGB) usados para indicar qual é a cor do pixel.
E se pensarmos em um processamento nos dados?
Por exemplo, se quiséssemos tirar uma foto e, talvez, torná-la um pouco mais clara? No computador, vamos traduzir isso em alguma operação com números.
Agora que já estudamos a representação de imagens digitais, é fácil imaginar o que precisaríamos fazer. Por exemplo, poderíamos pegar cada pixel da referida imagem e aumentar os valores RGB em, digamos, 15%. Pronto! Geraríamos uma imagem mais clara!
Tudo isso resume o que chamamos de pensamento computacional.
VERIFICANDO O APRENDIZADO
Use o explorador RGB. Depois, clique no menu do módulo 2, em VERIFICANDO O APRENDIZADO, para retornar às questões deste tópico.
Parte superior do formulário
1. Suponha que você esteja utilizando o esquema de codificação de cores RGB e que a imagem vista seja a representada a seguir:
Agora, propomos o desafio de fazer o esquema RGB apresentar esta imagem:
Parte inferior do formulário
Comentário
Parabéns! A alternativa "A" está correta.
Para conseguirmos como resultante a cor branca no esquema RGB, é necessário mover os controles R, G e B totalmente para a direita, a fim de obtermos o código RGB (255,255,255). Isso representa a máxima intensidade para as luzes vermelho, verde e azul.
Parte superior do formulário
2. Manipule o explorador RGB e utilize os controles deslizantes para ajustar o código de cor do “pixel grande” para (255,100,0). Qual foi a cor resultante no “pixel grande”?
Azul-celeste
Amarelo
Verde-limão
Laranja
Parte inferior do formulário
Comentário
Parabéns! A alternativa "D" está correta.
Conforme a tabela de cores RGB, você obterá a cor laranja ao configurar o pixel com o código vermelho: 255, verde: 100 e azul: 0. Na prática, significa que, para obter a cor laranja desta atividade, usamos uma combinação da saturação máxima de vermelho com mais ou menos 50% de saturação de verde. O azul ficou desativado, pois o configuramos para 0 (zero).
Com este estudo, você compreendeu como o computador é capaz de representar digitalmente por meio de números uma imagem do mundo real ou orgânico.
Este é um exemplo típico de uma habilidade chamada abstração – processo bastante comum em Computação. Você começa com uma imagem inteira, sons inteiros, ou algo orgânico ou natural do mundo real que gostaria de representar, armazenar ou processar com computadores.
Outras habilidades importantes nesse contexto são detectar padrões e escrever soluções, de forma que os computadores sejam capazes de executá-las. Estes são os pilares que formam o pensamento computacional.
Em todas as pesquisas recentes de mercado e trabalho, o pensamento computacional tem sido apontado como uma das competênciasmais demandadas para os profissionais da era digital. Portanto, esperamos que você perceba a importância de desenvolvê-lo.
DEFINIÇÃO
Conceito de códigos. Combinação de códigos e instruções para computadores. Representação digital de imagens: noções básicas.
PROPÓSITO
Exercitar importantes habilidades do pensamento computacional, como abstração, automação, reconhecimento de padrões, análise e avaliação, com vistas à compreensão do significado da programação.
PREPARAÇÃO
Para realizar este tema, será necessário usar alguns códigos-fonte específicos e o código RGB.
OBJETIVOS
Módulo 1
Definir instruções para manipulação simples de dados
Módulo 2
Distinguir a estrutura de repetição for
Módulo 3
Reconhecer expressões
Módulo 4
Distinguir a estrutura condicional if
MÓDULO 1
Definir instruções para manipulação simples de dados
INTRODUÇÃO
Você já ouviu falar em manipulação singular de dados?
Neste módulo, vamos aprender a escrever códigos simples de computador para manipulação singular de dados. Por singular, entenderemos a ausência de condições de realizar uma manipulação de múltiplos dados de forma eficiente.
Vamos com calma! Um pixel de cada vez...
Para ilustrar melhor nossa discussão, usaremos como exemplo imagens para aplicação de nossos códigos/instruções. Como são instruções simples de manipulação de dados, você notará que, nos exemplos, manipularemos apenas um pixel de cada vez.
INSTRUÇÕES PARA MANIPULAÇÃO SIMPLES DE DADOS
Para começar, veja a imagem da figura 1, cujo nome é circulo.bmp, composta por uma grade de 10x10 pixels:
Figura 1: Pequena imagem de 10 pixels de largura por 10 pixels de altura com fundo branco e círculo preto ao meio.
A imagem possui um fundo branco, com um círculo desenhado. O BMP é um formato de arquivo usado para armazenar imagens digitais.
Comentário
Não se preocupe, pois o tamanho da figura 1 não é um erro. A imagem realmente está muito pequena. Nosso primeiro impulso é realizar uma ampliação ou zoom para vê-la melhor. Esse é o ímpeto que queríamos provocar em você quando a colocamos com esse tamanho.
Como escrever um código que solicita que o computador amplifique a imagem circulo.bmp?
Para isso, usaremos três instruções que fazem parte do conjunto de funções da linguagem de programação JavaScript, conforme resumido na tabela 1:
	Passo
	Instrução
	Significado em português
	1
	img = newSimpleImage("circulo.bmp");
	Carrega a imagem circulo.bmp na memória e a armazena na variável que, neste exemplo, chamamos de img.
	2
	img.setZoom(20);
	Estabelece ampliação de 20 vezes o tamanho original para a imagem armazenada na variável img.
	3
	print(image);
	Apresenta a imagem na tela.
Tabela 1: Ampliando e apresentando na tela a imagem circulo.bmp.
Agora que você aprendeu os passos que permitem ao computador amplificar a imagem circulo.bmp, experimentaremos isso para alcançarmos um nível de amplificação que nos deixe confortáveis.
Vamos praticar?
MÃO NA MASSA
Prática 1
À esquerda, temos o Código-Fonte; à direita, a Saída resultante do processamento das instruções fornecidas. Logo abaixo, o botão Rodar/Executar, que é a forma como ordenamos ao computador que executa as instruções fornecidas.
Código-Fonte
Saída
Clique no botão Rodar/Executar e observe o resultado em Saída.
Solução
Percebeu a diferença?
Note que aparece um círculo de 20x20 pixels, maior do que o apresentado na figura 1.
Agora altere a instrução setZoom para realizar um zoom de 10 vezes em vez de 20. Clique em Rodar/Executar e observe o resultado.
Solução
Note que a execução das instruções resulta em um círculo de 10x10 pixels, agora menor que o anterior.
Considerações
Embora bastante simples, as instruções apresentadas na tabela 1 e na prática que acabamos de realizar tornaram-nos capazes de instruir o computador a realizar ampliação de imagens digitais ao nosso comando.
Dica
Fique à vontade: pratique e experimente com qualquer valor que deseje para a instrução setZoom. Não tenha medo de errar!
Agora vamos partir para um segundo cenário um pouco mais interessante.
Queremos estender o código usado na Prática 1 para sermos capazes de manipular individualmente cada pixel.
Para isso, tudo que precisamos fazer é ajustar os passos da tabela 1 e adicionar duas novas instruções logo antes da instrução print, conforme ilustra a tabela 2:
	Passo
	Instrução
	Significado em português
	1
	img = new SimpleImage("circulo.bmp");
	Carrega a imagem circulo.bmp na memória e a armazena na variável chamada img.
	2
	img.setZoom(20);
	20 vezes o tamanho original para a imagem armazenada na variável img. Um zoom menor do que 0 (zero) equivale a um afastamento. Por exemplo, um zoom de 0.5 equivale a um afastamento de 2x.
	3
	pixel = img.getPixel(4,4)
	Obtém a referência ao pixel (4,4) da imagem armazenada na variável img e atribui essa referência à variável pixel.
	4
	pixel.setRed(255)
	Instrui o computador a ajustar para 255 o nível de vermelho para o pixel em questão.
	5
	print(image);
	Apresenta a imagem na tela.
Tabela 2: Modificando um dos pixels de circulo.bmp para que ele fique vermelho.
Essas instruções também fazem parte das funções padronizadas pela linguagem JavaScript.
Onde aparece a primeira instrução nova da tabela 2?
Resposta
Recomendação
A partir de agora, qualquer operação que fizermos com a variável img será efetuada sobre o pixel (4,4).
Em seguida, no Passo 4, a instrução pixel.setRed (255) ordena que o computador ajuste a saturação de vermelho do pixel para o nível 255, que é o maior valor possível.
Prática 2
A seguir, assista a uma breve contextualização da Prática 1, seguida do nosso segundo exemplo prático.
Agora, vamos realizar alguns experimentos simples com o código da tabela 2, manipulando o código-fonte a seguir para observarmos o que acontece:
Código-Fonte
Saída
Error:Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0.
Clique no botão Rodar/Executar e observe o resultado em Saída.
Solução
Note que o pixel (4,4), que fica mais ou menos no meio do círculo, ficou vermelho.
Agora, altere o parâmetro da função getPixel para ( 4, 9 ) e, depois, clique em Rodar/Executar.
Solução
Observe que, como fornecemos a coordenada de outro pixel (linha 9 em vez de linha 4), o pixel vermelho ficou mais abaixo.
Experimente, também, com diferentes valores para o parâmetro da função setRed.
Solução
Observe que, quanto menor o valor da saturação vermelha do pixel, mais escuro será o vermelho apresentado no pixel em questão.
Considerações
Fique à vontade para experimentar com a Prática 2. Você pode escolher qualquer valor entre 0 e 9 para as coordenadas do pixel (lembre-se: é uma imagem de 10 pixels por 10 pixels) e qualquer valor entre 0 e 255 para o nível de saturação vermelho do pixel (conforme o esquema de cores RGB).
Assim como a função setRed() ajusta o nível de vermelho para o pixel, temos duas outras funções análogas para manipular os níveis de azul e de verde de um pixel. A tabela 3 apresenta as três funções possíveis para essa manipulação:
	Passo
	Instrução
	Significado em português
	1
	pixel.setRed(número)
	Ajusta o nível de vermelho do pixel conforme o número informado. O número deve ser entre 0 e 255.
	2
	pixel.setGreen(número)
	Ajusta o nível de verde do pixel conforme o número informado. O número deve ser entre 0 e 255.
	3
	pixel.setBlue(número)
	Ajusta o nível de azul do pixel conforme o número informado. O número deve ser entre 0 e 255.
Tabela 3: Três funções disponíveis para manipulações de cores de um pixel.
Prática 3
Vamos realizar alguns experimentos simples com o código da tabela 3, manipulando o código-fonte a seguir para observar o que acontece:
Código-Fonte
Saída
Durante essa prática observe com atenção a proposição em português feita no enunciado, em que o efeito desejado é descrito.
Depois, tente refletir:
Qual é o código de computador que você deve escrever, ou seja, as instruções e os valores digitados no código-fonte para alcançar o efeito proposto?
Na prática, você aprenderá a traduzir:
Do português
Para a linguagem do computador
O código fornecidoajusta o pixel (4,0) para vermelho. Ajuste o código para que o pixel (4,0) fique verde.
Solução
Manipule o pixel (4,0) para que fique amarelo.
Solução
Aqui, o pixel (4,0) estava originalmente preto, ou seja, código RGB (0,0,0). Como sabemos que o amarelo é a combinação de verde e vermelho, a solução é bem simples: basta adicionar o nível máximo (255) dessas cores constituintes, conforme o código a seguir:
Manipule o pixel (5,0) para que fique amarelo.
Solução
A solução aqui é muito simples: basta alterar o código da solução anterior para que a instrução getPixel( 4,0 ) passe a ser getPixel( 5,0 ).
TEORIA NA PRÁTICA
Suponha que, em vez de manipular apenas um pixel por vez, conforme fizemos neste módulo, desejássemos manipular todos os pixels de uma imagem, digamos de 10x10 pixels (exemplo: circulo.bmp).
Se usássemos o código que aprendemos a escrever neste módulo, teríamos de escrever 100 vezes a instrução pixel = img.getPixel(), em que, a cada vez, passaríamos os valores x,y para cada um dos pixels da imagem.
Isso traz vários problemas.
1. O primeiro deles é que o código ficaria difícil de ler/compreender.
2. O segundo é que, se for uma imagem maior, de 1980x1024 pixels, teríamos cerca de 2 milhões de pixels.
Portanto, a instrução pixel = img.getPixel() teria de ser escrita cerca de 2 milhões de vezes no código fonte, a cada vez fazendo referência para um pixel diferente.
Clique no botão para ver a resposta.
Isso seria inviável, não é mesmo?
VERIFICANDO O APRENDIZADO
Parte superior do formulário
1. Considere a imagem a seguir, chamada “circulo.bmp”:
Qual é o código de computador necessário para manipular o pixel do canto superior esquerdo para que fique vermelho?
Parte inferior do formulário
Comentário
Parabéns! A alternativa "A" está correta.
Conforme convenção de coordenadas de pixels, o pixel do canto superior esquerdo será sempre referenciado pela coordenada (0,0). Além disso, segundo o esquema RGB, a cor vermelha pura é representada pelo código RGB (255,0,0).
Veja a solução:
Parte superior do formulário
2. Considerando os experimentos realizados na Prática 1, qual seria o código para que o resultado do zoom fosse um afastamento de 2 x em vez de uma aproximação de 2x?
Parte inferior do formulário
Comentário
Parabéns! A alternativa "D" está correta.
Conforme ilustrado na tabela 2 , um afastamento de 2x equivale a um zoom de 0.5.
	Passo
	Instrução
	Significado em português
	1
	img = new SimpleImage("circulo.bmp");
	Carrega a imagem circulo.bmp na memória e a armazena na variável chamada img.
	2
	img.setZoom(20);
	20 vezes o tamanho original para a imagem armazenada na variável img. Um zoom menor do que 0 (zero) equivale a um afastamento. Por exemplo, um zoom de 0.5 equivale a um afastamento de 2x.
	3
	pixel = img.getPixel(4,4)
	Obtém a referência ao pixel (4,4) da imagem armazenada na variável img e atribui essa referência à variável pixel.
	4
	pixel.setRed(255)
	Instrui o computador a ajustar para 255 o nível de vermelho para o pixel em questão.
	5
	print(image);
	Apresenta a imagem na tela.
Tabela 2: Modificando um dos pixels de circulo.bmp para que ele fique vermelho.
MÓDULO 2
Descrever a estrutura de repetição for
INTRODUÇÃO
Estruturas de repetição são extremamente importantes, pois representam um grande aumento no poder de quem escreve códigos de computador em comparação com códigos, que são capazes de manipular dados singulares.
Neste módulo, veremos os princípios dessas estruturas.
ESTRUTURA DE REPETIÇÃO FOR
Observe a imagem de um pássaro apresentado na figura 2:
Figura 2: Imagem com 584 pixels de largura e 500 pixels de altura representando um pássaro.
Se multiplicarmos o número de pixels de largura pelo número de pixels de altura, teremos o total de pixel da imagem.
Neste caso:
584x500 = 292.000 pixels ou quase 0.3 megapixels.
Essa nem é uma imagem muito grande, dado que os telefones celulares atuais são capazes de tirar fotografias de mais de 10 milhões de pixels (10 megapixels).
Mesmo assim, se o autor de um código de computador, sem usar estruturas de repetição, tentar escrever um código de computador para manipular cada um dos pixels da imagem da figura 2, precisará repetir 292 mil vezes as instruções que apontam para determinado pixel (exemplo: pixel = img.getPixel( x,y )), cada uma delas seguidas com as instruções de manipulação desejada (exemplo: pixel.setRed(255)).
Claramente, isso não é uma maneira prática de realizar uma operação com grande quantidade de dados. As desvantagens vão desde um código de computador difícil de ler, por ser muito extenso, até a dificuldade de manutenção, atualização ou correção do código, caso haja necessidade futura.
Então, o que queremos é uma construção na qual possamos escrever algumas poucas linhas de código que capturam certas mudanças desejadas.
Depois, deixamos o computador executar essas linhas de código repetidamente, uma vez para cada dado que desejamos manipular, ou seja, em nosso exemplo, uma vez para cada pixel da imagem.
Existem diferentes maneiras de realizar isso em códigos de computador, mas, por motivos de simplicidade, vamos estudar a estrutura de repetição for, também chamada de loop for.
Repetição for = Loop for
Analise a sintaxe da estrutura de repetição for apresentada na figura 3:
Figura 3: Sintaxe da estrutura de repetição for destacada em negrito.
A linha de código for ( pixel: img ), traduzida de código de computador para português, significa:
Para cada pixel da imagem armazenada na variável img, repita uma a uma todas as instruções cercadas por abre chaves “{“ e fecha chaves “}” logo a seguir.
No exemplo da figura 3, temos três instruções destacadas em cinza dentro da estrutura for. Nesse caso, estas serão as instruções repetidas para cada um dos 292 mil pixels da imagem “pássaro.jpg”.
Atenção
Toda a sintaxe apresentada na figura 3 é requerida para que o computador entenda que se trata de uma estrutura for e quais são as instruções a serem repetidas.
Na prática, o que o computador fará para o código da figura 3 é fixar-se no primeiro pixel da imagem, (0,0), no canto superior esquerdo, e executar os três comandos que ajustam o nível das cores constituintes vermelho, verde e azul todas para 0. Este pixel, então, ficará preto.
1
Observe a seta azul que liga o “}”, no final do loop for, no início da estrutura de repetição. Quando o computador percebe que está na linha de instrução que fecha a estrutura de repetição, acontece isso, conforme indicado pela seta azul: o computador volta novamente para o início do loop.
Em seguida, o computador se fixará no segundo pixel (1,0) da imagem e executará os três comandos em cinza, deixando o segundo pixel preto. O mesmo ocorrerá para o terceiro, o quarto, o quinto e para todos os 292 mil pixels da imagem do pássaro, até que toda a imagem esteja completamente preta.
2
3
Você perceberá que as três instruções em cinza que formam o corpo do loop for estão descoladas para a direita. Isso não é obrigatório para que o computador compreenda as instruções.
É, no entanto, uma convenção muito comum mostrar que as linhas de dentro da estrutura de repetição são especiais em relação às demais, porque são executadas várias vezes, até que a condição estabelecida no início da estrutura for seja satisfeita.
4
Neste exemplo, a condição para finalizar é que as três instruções sejam executadas pelo computador para todos os pixels da imagem.
A técnica de recuar a linha de código para deixar claro à pessoa que o estiver lendo que estas são instruções internas à estrutura de repetição é amplamente chamada de indentação.
Vamos testar?
MÃO NA MASSA
Prática 1
Vamos experimentar a estrutura for. Observe o código-fonte à baixo:
Código-Fonte
Saída
Error:Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0.
Lembre-se de que, ao clicar em Rodar/Executar, o computador realizará os seguintes passos, conforme instruções:
Clique nas informações a seguir.
Instrução 1
Instrução 2
Note que o computador as executará para cada um dos 292 mil pixels daimagem. Então, temos um total de 876 mil operações a serem realizadas pelo computador.
Ao clicar em Rodar/Executar, tente observar quanto tempo o computador leva para ajustar/executar as 876 mil instruções necessárias para colorir de preto cada um dos 292 mil pixels da imagem “passaro.jpg” e, depois, apresentar a imagem na tela.
Solução
A imagem preta deve aparecer na tela muito rapidamente:
Ao executar a Prática 1, você obteve um retângulo preto, o que não é muito útil. Entretanto, não deixe de refletir sobre o quão rapidamente o computador foi capaz de seguir suas instruções para manipular os quase 300 mil pixels da imagem.
Prática 2
Vamos seguir assistindo a um vídeo com uma segunda prática.
É hora de praticar!
Agora, vamos obter o canal alfa vermelho da imagem do pássaro apresentado na figura 2 com base neste código-fonte:
a) Execute o código-fonte e observe o canal alfa em vermelho da imagem apresentada.
Solução
O que você notou?
Clique no botão para ver as informações.
Mostrar comparação
Você compreendeu como o canal alfa em vermelho foi obtido?
b) Para compreender melhor o código que foi executado, observe na caixa de código-fonte que a instrução pixel.setRed() está comentada, ou seja, marcada com “//” no início da linha:
Código-Fonte
Saída
Você consegue alterar o código-fonte para obter os outros canais? Tente!
 Obtenha os canais verde e azul respectivamente.
Solução
TEORIA NA PRÁTICA
Afinal para que serve a estrutura de repetição for?
A estrutura de repetição for é um recurso muito poderoso, que nos permite escrever algumas poucas linhas de código capazes de ordenar ao computador que processe/manipule uma enorme quantidade de dados.
Neste módulo usamos exemplos de imagens para demonstrar o enorme potencial das estruturas de repetição. Este foi apenas um exemplo.
Esteja certo de que essa estrutura é amplamente usada em computação e, com certeza, faz parte do dia a dia de todos que, de alguma forma, escrevem códigos para computador.
Por fim, devemos mencionar um detalhe da linguagem usada aqui: JavaScript. Essa linguagem não possui uma estrutura de repetição for tão compacta e simples como a que estudamos.
Usamos uma versão com sintaxe propositalmente simplificada, pois nosso objetivo era compreender os princípios que motivam o uso de estruturas de repetição. Entendemos que o uso de uma estrutura simplificada ajudaria você a compreender melhor o que se passa.
Comentário
Não queríamos gastar muito tempo fazendo-o compreender detalhes de sintaxe. Este comentário é importante, pois, se você tentar aproveitar os códigos de computador que escrevemos neste módulo, provavelmente, terá problemas devido ao nosso uso simplificado da estrutura de repetição for.
Há outras linguagens de programação que possuem estrutura de repetição bem simular àquela que usamos aqui, mas não JavaScript.
VERIFICANDO O APRENDIZADO
Parte superior do formulário
1. Dos trechos de código a seguir, qual gerará o canal azul de uma imagem (toda ela apenas em tons de azul)?
for( pixel: img ){
pixel.setGreen(0);
pixel.setBlue(0);
}
print( img );
for( pixel: img ){
pixel.setRed(0);
pixel.setBlue(0);
}
print( img );
for( pixel: img ){
pixel.setGreen(0);
pixel.setBlue(0);
pixel.setRed(0);
}
print( img );
for( pixel: img ){
pixel.setGreen(0);
pixel.setRed(0);
}
print( img );
Parte inferior do formulário
Comentário
Parabéns! A alternativa "D" está correta.
Conforme vimos na Prática 2, o canal azul de uma imagem é uma modificação à imagem em que apenas as tonalidades de vermelho são mantidas intactas, e os demais componentes (verde e azul) são desconsiderados. Na alternativa D vemos duas: pixel.setGreen(0); e pixel.setRed(0);, que instruem o computador a retirar toda a intensidade dos componentes verde e vermelho. Essa alternativa ajusta a intensidade de vermelho e de verde de cada pixel para 0, mas deixa a intensidade de azul intacta (não há instrução para ajustar a intensidade de azul). Então, esse componente ficou intacto em todos os pixels.
Parte superior do formulário
2. Suponha a imagem a seguir, de 1.400 pixels de largura por 932 de altura:
Lembre-se de que o total de pixels de uma imagem é obtido pela multiplicação do número de pixels de altura pelo número de pixels de largura.
Suponha que desejemos escrever um código de computador que retire os componentes de azul e de vermelho para cada pixel da imagem.
Para isso, as instruções seriam:
img.getPixel( 0,0 );
pixel.setBlue( 0 );
pixel.setRed( 0 );
Se escrevêssemos um código para cada um dos pixels da imagem, quantas linhas totais teríamos de escrever?
3.914.400
1.304.800
2.609.600
652.400
Parte inferior do formulário
Comentário
Parabéns! A alternativa "A" está correta.
O total de pixels da imagem é 1.400x932, ou seja, 1.304.800 pixels. Como são três instruções por pixel, o programador teria de escrever 3 x 1.304.800 = 3.914.400(3,9 milhões) de linhas de código. Obviamente, isso seria inviável. Então, é fundamental usar a estrutura de repetição for, que nos permite escrever a mesma solução com cerca de cinco linhas de código.
MÓDULO 3
Reconhecer expressões
INTRODUÇÃO
Neste módulo, estudaremos o uso de expressões em código de computador.
Expressões são construções bastante importantes, pois, em vez de usar apenas valores simples em instruções, podemos combinar diferentes valores para calcular o parâmetro mais personalizado.
Isso nos permite escrever códigos de computador que alcançam resultados mais realistas. Quando apresentarmos exemplos práticos de manipulação de imagens, você entenderá melhor o assunto.
Usaremos a linguagem de programação JavaScript, com algumas simplificações para facilitar a compreensão.
EXPRESSÕES
Se analisarmos o código/instrução a seguir, veremos um tipo bem simples de passagem de valor (51):
print(51);
Essa instrução imprimirá o valor 51 na tela.
Dizemos que 51 é o valor passado como parâmetro para a função print.
As linguagens de programação compreendem códigos que envolvem expressões, conforme mostra o exemplo a seguir:
Exemplo
print(40+11);
Então, o termo 40+11, passado como parâmetro para a função print, é o que chamamos de expressão.
Basicamente, em vez de um número fixo conhecido antecipadamente, podemos usar um pouco de expressão aritmética. Assim, temos uma forma mais rica de fornecer parâmetros para funções.
Isso funciona da seguinte maneira: quando o computador executar a linha de código que contém a expressão, o primeiro passo será avaliá-la. Assim, ele lerá e resolverá a expressão para chegar ao valor resultante.
Neste exemplo, 40+11 é apenas uma soma. O computador calcula que 40+11 é igual a 51. Uma vez que a expressão foi avaliada e o resultado foi 51, então, o computador continua a execução do código, usando o resultado da expressão como parâmetro para a função. Com efeito, em nosso exemplo o computador simplesmente imprimirá o valor 51 na tela.
Comentário
De fato, podemos usar expressões em qualquer local do código de computador, em que valores numéricos são admitidos. Portanto, é possível sempre embutir expressões aritméticas para que seja computado o valor que desejamos usar de fato. Isso nos possibilita resolver problemas mais realistas.
Antes de continuar, vamos conhecer três funções de manipulações de pixels que fazem parte da linguagem de programação JavaScript:
	Passo
	Instrução
	Significado em português
	1
	pixel.getRed()
	Obtém/Lê o valor atual para o componente RGB vermelho do pixel.
	2
	pixel.getGreen()
	Obtém/Lê o valor atual para o componente RGB verde do pixel.
	3
	pixel.getBlue()
	Obtém/Lê o valor atual para o componente RGB azul do pixel.
Tabela 4: Dado um pixel da imagem, como saber qual é o valor atual para os componentes RGB do pixel?
Suponha um pixel em amarelo (exemplo: Código RGB 255,255,0). Neste caso, a função pixel.getRed() retornará o valor 255, pois este é o valor atual do componente vermelho (R) do pixel.
De forma análoga, a função pixel.getBlue() retornaria 0 (zero), pois este é o valor atual do componente azul (B) do pixel em questão. Isso ocorre porque o amarelo puronão possui azul em sua composição.
Agora, vamos supor que desejamos duplicar o valor atual do componente vermelho de um pixel. Se esse valor for 50, ajustaremos para 100. Se for 105, ajustaremos para 210. Em resumo, desejamos realizar um ajuste relativo no valor. Então, seja qual for o valor atual, nós o duplicaremos.
Já conhecemos a função pixel.getRed() e a possiblidade do uso de expressões. Logo, a tarefa ficou mais fácil. Uma primeira solução seria usar este código:
ultimo = pixel.getRed();
pixel.setRed(ultimo*2);
Clique nas informações a seguir.
1ª linha
2ª linha
Logo, quando começar a executar a segunda linha:
1
O primeiro passo do computador será avaliar qual é o resultado da expressão ultimo*2. Se imaginarmos que o último valor para o pixel é 60, a expressão multiplicará esse valor por 2, o que resultará em 120.
Em seguida, o computador executará a função pixel.setRed() com o valor 120 como parâmetro, o que dobrará a intensidade de vermelho do pixel em questão.
2
3
Com efeito, o resultado das duas linhas de código é, de fato, duplicar a intensidade de vermelho do pixel atual.
Agora que entendemos os princípios do uso de expressões em códigos de computadores, vamos analisar o mesmo exemplo de duplicação do valor atual da intensidade de vermelho de um pixel, porém com uma solução muito mais comum no mundo real.
Veja a linha de código a seguir:
pixel.setRed( pixel.getRed()*2 );
Na prática, desejamos mostrar que a solução em questão pode ser condensada em apenas uma linha de código.
Note que a variável ultimo não tinha um objetivo muito importante no código. Ela apenas armazenava temporariamente o último valor do componente vermelho do pixel para que este fosse usado na instrução seguinte.
Vamos supor que o pixel em questão esteja com os valores RGB (50,20,30). Então, o componente vermelho possui o valor 50. O computador fará o seguinte:
Executar a instrução pixel.getRed() para obter o valor atual do pixel, que é 50;
Avaliar a expressão pixel.getRed()*2 e resolvê-la, multiplicando o valor atual do pixel por 2 e obtendo o resultado 100;
Executar a instrução pixel.setRed() usando como parâmetro o resultado da operação aritmética do Passo 2, ou seja, o valor dobrado para o componente vermelho do pixel, que é 100.
Com isso, o novo valor RGB para o pixel em questão será: RGB (100,20,30). Se fizermos o mesmo para todos os pixels de uma imagem, o usuário perceberá essa alteração como uma imagem com os tons de vermelho mais destacados.
Se, no mesmo exemplo, desejássemos reduzir pela metade a intensidade de vermelho do pixel, a linha de código ficaria assim:
pixel.setRed( pixel.getRed()/2 );
Note que, em vez de usarmos o asterisco, que denota multiplicação, utilizamos o “/”, que denota divisão.
Outra forma de escrever a mesma solução seria multiplicar o pixel atual por 0.5, o que é o mesmo que dividir por 2. Então, nesse caso, teríamos:
pixel.setRed( pixel.getRed()*0.5 );
Para entender melhor o assunto, vamos fazer alguns exercícios.
MÃO NA MASSA
Prática 1
Vamos ajustar a tonalidade de cores de uma imagem por meio de instruções simples. Comecemos por esta:
Figura 4: Imagem de flores em amarelo com 587x330 pixels, totalizando quase 194 mil pixels.
a) Observe a imagem de flores amarelas apresentada na figura 4. Suponha que desejemos ajustar esta imagem para obtermos tonalidades mais para o laranja.
Para alcançar o objetivo desta prática, basta reduzir um pouco a intensidade do componente verde (G) de cada um dos pixels da imagem.
Por exemplo, basta inserirmos a linha de código a seguir dentro da estrutura de repetição usada para repetir a instrução a todos os pixels da imagem:
pixel.setGreen( pixel.getGreen()*0.7 );
O que essa instrução faz é ajustar a intensidade de verde do pixel em questão para 70% do valor atual. Esse é o resultado aritmético que você obtém quando multiplica um valor por 0.7.
Note que o código-fonte fornecido não contém a instrução citada. Apenas disponibilizamos o “esqueleto” do código contendo a solução:
Código-Fonte
Saída
Error:Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0.
Se você clicar em Rodar/Executar, o computador apenas apresentará a imagem original com as flores em amarelo. Isso ocorre porque não há instruções de ajuste de cores no código-fonte.
Você mesmo deve inserir a instrução que realiza a redução da tonalidade de verde do pixel. Insira a instrução dentro da estrutura de repetição for logo abaixo do comentário que indica aposição correta.
Depois, clique em Rodar/Executar para que o computador execute seu código. Observe o resultado.
Se tiver dúvidas, clique em Solução, mas não deixe de tentar implementar sua solução no código-fonte fornecido. Basta inserir uma linha de código!
Clique na barra para ver as informações.
MOSTRAR SOLUÇÃO
Aqui, vemos lindas flores de cor laranja! Experimente reduzir ainda mais o componente de verde da figura. Observe que, quanto menor o componente de verde, mais as cores das flores se aproximarão do vermelho.
Considerações
Reflita sobre a quantidade de operações realizada em um piscar de olhos pelo computador, dado o código-fonte que geramos.
Para cada um dos 194 mil pixels da imagem da figura 4, o computador fez as seguintes operações:
· Obteve a intensidade de verde do pixel;
· Multiplicou a intensidade de verde do pixel por 0.7;
· Ajustou a intensidade de verde do pixel para o resultado dos dois passos anteriores.
Então, em português, poderíamos descrever o objetivo deste exercício simplesmente como: tornar a imagem um pouco mais laranja.
Reflita sobre como esse objetivo foi traduzido do português para o código de computador que usamos ao realizarmos a operação.
A capacidade de fazer essa tradução e escrever uma solução que computadores são capazes de executar rapidamente é para nós uma habilidade chave para o chamado pensamento computacional.
b) Voltando à imagem da figura 4, suponha, agora, que desejamos convertê-la em uma imagem de escala de cinza.
Recorde, na tabela 5, que uma imagem em escala de cinza possui, para cada pixel, exatamente o mesmo valor para os componentes RGB (vermelho, verde e azul):
	Esquema RGB
	R - Vermelho
	G - Verde
	B - Azul
	Branco
	255
	255
	255
	Azul
	0
	0
	255
	Vermelho
	255
	0
	0
	Verde
	0
	255
	0
	Amarelo
	255
	255
	0
	Magenta
	255
	0
	255
	Ciano
	0
	255
	255
	Preto
	0
	0
	0
	Escala de cinza
	(1,1,1) cinza muito escuro (quase preto)
(2,2,2)
(3,3,3)
(4,4,4)
(5,5,5)
(6,6,6)
.
.
.
(252,252,252)
(253,253,253)
(254,254,254) cinza muito claro (quase branco)
Tabela 5: Escala de cinza do esquema de cores RGB.
Use os controles deslizantes do visualizador RGB para comprovar este conceito:
	 
	Sem cor →→ Escuro →→ Mais claro →→ Saturação total
	 
	Vermelho (R - Red):
Verde (G - Green):
Azul (B - Blue):
	R:0 G:0 B:0
 Mostrar Hexadecimal   
	 
	
Para alcançar o objetivo de converter a imagem de flores amarelas em uma imagem em escala de cinza, vamos calcular, para cada pixel, o valor médio dos componentes RGB. Depois, ajustaremos cada um dos três componentes para esse valor médio.
Veja o trecho de código a seguir, que calcula a média dos três componentes (R, G e B) para um dado pixel, depois, atribui esse valor médio aos três componentes de cor do pixel:
soma=(pixel.getGreen()+pixel.getGreen()+pixel.getGreen());
media= soma/3;
pixel.setRed( media );
pixel.setGreen( media );
pixel.setBlue( media );
Copie e cole estas linhas de código no código-fonte de experimento de programação disponível no início desta prática:
Código-Fonte
Saída
Como desejamos tornar todos os bits da imagem em escala de cinza, você deverá colar este trecho dentro da estrutura de repetição for. Depois, clique em Rodar/Executar. Observe o computador executar suas instruções e transformar a imagem para escala de cinza.
Solução
Dica
Fique à vontade para experimentar com o código-fonte, obter diferentes resultados e refletir sobre o resultado obtido com as instruções que você testou. Por exemplo, você pode multiplicar a média por 1.1, 1.5 ou 2 e observar como a imagem vai ficando mais clara.Não tenha medo de errar!
Prática 2
Assista ao vídeo com uma segunda prática.
Vamos desvendar o enigma 5-2-10 abordado no vídeo?
Considere a imagem da figura 5, contendo frutas em seis tons de cores:
Figura 5: Frutas em 6 cores diferentes, com 863 pixels de largura por 535 pixels de altura, totalizando quase 462 mil pixels.
Esta imagem foi modificada, dividindo, para cada pixel, os valores dos componentes RGB (vermelho, verde e azul) por 5, 2 ou 10. O resultado é apresentado na figura 6:
Figura 6: Imagem da figura 5, mas com os componentes RGB manipulados.
Note que a imagem está mais escura, além de ter suas cores distorcidas.
Vamos praticar!
Recupere a imagem (Figura 6) para o lindo padrão de cores da figura 5 original.
Fique à vontade para experimentar com as multiplicações pelos três valores citados e tente descobrir como retornar para as cores originais, ou seja, desvendar o enigma!
Recomendação
Para diminuir o número de combinações que você tentará, tenha em mente que, quando a imagem foi modificada, os valores 5, 10 e 2 foram usados apenas uma vez cada.
Código-Fonte
Saída
Error:Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0.
Solução
Como você se saiu?
Clique na barra para ver as informações.
MOSTRAR SOLUÇÃO
Ao realizar as multiplicações para obter a imagem original de volta, você só precisa saber qual dos três valores foi usado para cada um dos três componentes de cores.
A tabela 6 mostra as seis possibilidades para esta combinação:
	Possibilidade
	Tentativa de trazer a imagem da figura 5 de volta ao original
	1
	pixel.setRed( pixel.getRed()*5);
pixel.setGreen( pixel.getGreen()*10);
pixel.setBlue( pixel.getBlue()*2);
	2
	pixel.setRed( pixel.getRed()*5 );
pixel.setGreen( pixel.getGreen()*2 );
pixel.setBlue( pixel.getBlue()*10 );
	3
	pixel.setRed( pixel.getRed()*2 );
pixel.setGreen( pixel.getGreen()*5 );
pixel.setBlue( pixel.getBlue()*10 );
	4
	pixel.setRed( pixel.getRed()*2 );
pixel.setGreen( pixel.getGreen()*10 );
pixel.setBlue( pixel.getBlue()*5 );
	5
	pixel.setRed( pixel.getRed()*10 );
pixel.setGreen( pixel.getGreen()*5 );
pixel.setBlue( pixel.getBlue()*2 );
	6
	pixel.setRed( pixel.getRed()*10 );
pixel.setGreen( pixel.getGreen()*2 );
pixel.setBlue( pixel.getBlue()*5 );
Tabela 6: Possibilidades de combinação dos valores 5, 10 e 2.
Então, o que você precisa fazer é inserir as três instruções no código-fonte, dentro da estrutura de repetição for, conforme as possibilidades da tabela 6. Sempre clique em Rodar/Executar para conferir se obteve a imagem original de volta.
No pior dos casos, você só precisará realizar seis tentativas.
TEORIA NA PRÁTICA
Como você deve ter percebido neste módulo, é muito importante perceber que estamos o tempo todo falando de comunicação. Claro que, tratando-se da máquina, não podemos nos comunicar com ela da mesma forma que eu me comunico com você.
Como você viu, o simples comando “torne a imagem um pouco mais laranja” não poderia ser realizado apenas com estas palavras. Foi necessário traduzir essa mensagem para código de computador, de forma que o comando fosse obedecido.
Nesse sentido, apenas com a realização de tentativas, com a identificação de erros nos comandos e sua correção, é que podemos nos aprimorar. E, pouco a pouco, dar embasamento ao nosso pensamento computacional.
Você deverá usar as caixas de códigos para realizar as atividades do Verificando o aprendizado.
Clique em Rodar/Experimentar para ordenar ao computador que execute as instruções escritas por você.
Código-Fonte
Saída
Código-Fonte
Saída
VERIFICANDO O APRENDIZADO
Parte superior do formulário
1. Na imagem a seguir realizamos uma edição de modo que os componentes azul e verde ficaram totalmente embaralhados:
Não há como recuperá-los (canais de cores verde e azul). Toda a informação útil da imagem está apenas em tons de vermelho.
Para tentarmos revelar a imagem original, nossa melhor esperança é ordenar ao computador que, para pixel da imagem:
· Ajuste os componentes de cores azul e verde para 0 (zero);
· Realce os tons em vermelho, multiplicando-os por 10.
Clique aqui, e escreva o código-fonte que realiza os passos acima para desvendar o que havia na imagem original:
Quando conseguir desvendar o enigma, assinale a alternativa que descreve o que apareceu na imagem:
Frutas em uma cesta em cima de uma mesa.
Um pássaro voando do ninho.
Um veículo de passeio abastecendo.
A paisagem de mar e montanha.
Parte inferior do formulário
Comentário
Parabéns! A alternativa "D" está correta.
O código-fonte a seguir descreve, em código de computador, o passo a passo necessário para desvendar o enigma:
img = new SimpleImage("enigma-fig.png");
for(pixel:img){
// Insira suas linhas de código abaixo
pixel.setRed(pixel.getRed()*10);
pixel.setGreen(0);
pixel.setBlue(0);
}
print(img);
Como resultado, vemos uma linda paisagem do Rio de Janeiro, somente em tons de vermelho.
Parte superior do formulário
2. A figura a seguir está muito escura:
Desejamos clareá-la, multiplicando os componentes de cores de cada pixel por 30. Clique aqui e escreva, no código-fonte, dentro da estrutura de repetição for, as linhas de código que instruirão o computador a realizar essa tarefa:
Quando você tiver realizado isso com sucesso, será possível observar o que há na imagem. Assinale a alternativa que descreve o que apareceu na imagem:
Um submarino cercado de tubarões.
Um homem observando uma árvore.
Um raio caindo em uma árvore.
Um castelo cercado de muralhas.
Parte inferior do formulário
Comentário
Parabéns! A alternativa "B" está correta.
O código-fonte a seguir descreve, em código de computador, o passo a passo necessário para clarear a imagem, conforme solicitado no enunciado, ou seja, para cada pixel da imagem, multiplicando os componentes de cores por 30:
img = new SimpleImage("muitoescura.png");
for( pixel: img ){
// Insira suas linhas de código abaixo
pixel.setRed(pixel.getRed()*30);
pixel.setGreen(pixel.getGreen()*30);
pixel.setBlue(pixel.getBlue()*30);
}
print( img );
Após o clareamento é possível identificar que a imagem mostra um homem observando uma árvore. Basicamente, estamos usando expressões para resolver a questão.
MÓDULO 4
Descrever a estrutura condicional if
INTRODUÇÃO
O que são estruturas condicionais?
Estruturas condicionais são as linhas de código de computador empregadas para expressar a ideia de lógica ou seletividade.
Usando esses tipos de instruções, somos capazes de preparar o computador para realizar um teste, cujo resultado será verdadeiro ou falso, aplicando-o para controlar se determinado pedaço de código será ou não executado.
Todas as linguagens de programação possuem estruturas condicionais. Neste módulo, analisaremos um tipo específico: a declaração if (do inglês, if-statement). Não deixe de manter em mente que if, em inglês, significa se.
Nós nos basearemos em exemplos e práticas na linguagem JavaScript, estando sempre voltados para a resolução de interessantes problemas de manipulação de imagens.
ESTRUTURA CONDICIONAL
A seguir, vemos a sintaxe de uma declaração if conforme a linguagem de programação JavaScript:
1. if( pixel.getRed() > 160 ) {
2. pixel.setRed(0);
3. pixel.setGreen(0);
4. Pixel.setBlue(0);
5. }
Repare na linha 1. Em português, essa instrução significa:
Se a intensidade do componente vermelho do pixel for maior do que 160, então execute as instruções que estão entre as chaves esquerda e direita.
Em outras palavras, as instruções das linhas 2, 3 e 4 só serão executadas pelo computador se o resultado do teste for verdadeiro.
Pense nessa instrução como uma forma de selecionar os pixels que serão afetados pelas instruções das linhas 3, 4 e 5.
1
Por exemplo, ainda na instrução 1, se o valor do componente vermelho do pixel em questão for 140, então, as instruções 2,3 e 4 não serão executadas pelo computador, pois o teste if( 140> 160) retornará, é claro, falso.
Se o valor do componente vermelho do pixel em questão for 160, então as instruções 2,3 e 4 também não serão executadas, pois o resultado do testeif (140 > 160) será falso.
2
3
A execução das instruções 2, 3 e 4 só ocorrerá, por exemplo, se o valor do componente vermelho do pixel em questão, obtido pela função pixel.getRed(), for 161 ou qualquer valor maior do que este.
Note, na linha 1, onde há a instrução if, que o teste a ser realizado pelo computador está entre parênteses. Esta é uma sintaxe requerida pela linguagem JavaScript.
4
Somente seguindo essa sintaxe o computador será capaz de entender que se trata de um teste que ele deve realizar, para então decidir se irá ou não executar as instruções entre as chaves esquerda“{“ e direita “}”, que delimitam a declaração if.
Comentário
Na prática, frequentemente vemos uma declaração if ser usada dentro de uma estrutura de repetição, como a estrutura for. Esse tipo de combinação permite que problemas bastante interessantes sejam resolvidos.
Para o restante deste módulo experimentaremos com a estrutura condicional if. Abordaremos várias práticas simples que envolvem manipulação de imagens digitais, começando por casos bem rudimentares e chegando a aplicações do mundo bem interessantes, ainda que simples.
Optamos por usar exemplos com imagens digitais, pois esta é uma forma muito simples, intuitiva e rápida para você observar os efeitos da execução de algumas linhas de código de computador. Isso ocorre porque estamos acostumados a observar imagens do mundo real desde que nascemos. Então, este é um processo altamente intuitivo para todos.
Para analisar e avaliar o efeito de determinadas linhas de código, basta observar a imagem e comparar o antes e o depois da execução do código.
MÃO NA MASSA
Prática 1
Considere a imagem apresentada na figura 7:
Figura 7: Imagem representativa do esquema de Cores RGB.
Imagine que desejamos escrever um código de computador que altere somente a região em vermelho, transformando-a em cinza.
Para entender como é possível escrever um código de computador a fim de alterar a região em vermelho, considere a tabela 7, que indica como cada cor é representada segundo o esquema RGB:
	Esquema RGB
	R - Vermelho
	G - Verde
	B - Azul
	Branco
	255
	255
	255
	Azul
	0
	0
	255
	Vermelho
	255
	0
	0
	Verde
	0
	255
	0
	Amarelo
	255
	255
	0
	Magenta
	255
	0
	255
	Ciano
	0
	255
	255
	Preto
	0
	0
	0
	Escala de cinza
	(1,1,1) cinza muito escuro (quase preto)
(2,2,2)
(3,3,3)
(4,4,4)
(5,5,5)
(6,6,6)
.
.
.
(252,252,252)
(253,253,253)
(254,254,254) cinza muito claro (quase branco)
Tabela 7: Esquema RGB – Exemplos de cores comuns.
Note que o vermelho equivale ao código RGB(255,0,0). Uma primeira tentativa para transformar a região vermelha em cinza seria pensar nesse código RGB.
Então, podemos escrever um código que ordena ao computador que, para cada pixel da imagem, verifique se o componente vermelho é 255. Em caso positivo, ajuste a cor do pixel para cinza, ou seja, RGB(120,120,120).
Vamos experimentar?
a) No código-fonte à esquerda estão listadas as linhas de código que representam, em código de computador, o passo a passo da tentativa do parágrafo anterior. Clique em Rodar/Executar e observe o resultado.
Código-Fonte
Saída
Solução
Repare que não só a região vermelha foi transformada em cinza, mas também as regiões amarelo, branco e magenta. Colorimos mais do que a região proposta pelo exercício.
Observe a tabela 7. Você notará que as cores amarelo, branco e magenta também possuem, assim como o vermelho, o valor 255 para o componente R.
Então, nossa instrução if ao computador precisa ser mais específica. Lembre-se: o computador faz exatamente o que ordenamos.
b) Na prática, precisamos checar três tarefas: para que apenas a região vermelha seja ajustada para cinza, devemos verificar se o Red é igual a 255, se o Green é igual a 0 (zero), e se o Blue é igual a 0 (zero).
Então, você precisará substituir, no código-fonte, toda a linha da instrução if pela instrução a seguir:
if( pixel.getRed() == 255 &&pixel.getGreen() == 0
&&pixel.getBlue() == 0 ){
Você pode usar o recurso de copiar e colar para isso:
Código-Fonte
Saída
Em seguida, clique em Rodar/Executar e observe que o objetivo desta prática será alcançado.
Solução
Observe que, com essa ação, você programou para que a região somente vermelha fosse ajustada para cinza, mas, ao mesmo tempo, permitiu que as regiões de interseção entre as três cores se apresentassem sem alteração.
Prática 2
Preparamos um vídeo abordando uma segunda prática.
Que tal praticar um pouco?
Observe a imagem apresentada na figura 8:
Figura 8: Uma calçada com o meio-fio pintado de amarelo.
Imagine que desejamos ajustar a imagem para que o meio-fio fique cinza em vez de amarelo.
Pela tabela 7 sabemos que o amarelo é uma cor composta pela combinação de vermelho e verde.
Vamos utilizar o código-fonte a seguir para experimentar com diferentes abordagens de construção para a instrução IF até alcançarmos uma solução mais refinada que nos pareça suficientemente boa.
Código-Fonte
Saída
a) No código que já consta no código-fonte, o if está testando se os níveis de verde e de vermelho de cada pixel são maiores do que 120. Isso reflete a ideia de que um bom nível de verde e vermelho indica que o pixel pode ser amarelo.
Se o teste do IF for positivo, o pixel que atende à condição será para a cor preta: RGB (0,0,0). Isso será interessante, pois, ao analisarmos a imagem resultante, basta observarmos o que estiver em preto. Estes terão sido os pixels selecionados pela instrução if.
Clique em Rodar/Executar e observe o resultado.
Solução
Repare nesta imagem que, de fato, boa parte do meio-fio amarelo foi pintado de preto. Porém, analisando melhor, podemos detectar um problema: parte importante da calçada e do asfalto foram pintados de preto. Isso ocorre pois essas são áreas da imagem original em que os pixels são mais iluminados/claros.
Então, os três componentes, vermelho, verde e azul, devem estar acima de 120, gerando um tom cinza suficientemente claro.
b) Instrua o computador a selecionar apenas pixels cujos componentes vermelho e verde estejam acima de 150.
Código-Fonte
Saída
Em seguida, clique em Rodar/Executar e observe o resultado.
Solução
Observe que ainda falta nitidez nas cores, como se a tinta do meio-fio estivesse se espalha do também para a calçada. É necessário que façamos mais ajustes.
c) Ajuste a estrutura if, a fim de selecionar apenas pixels ainda mais claros e em tom de amarelo. Clique em Rodar/Experimentar e observe o resultado.
Solução
A seleção parece melhor, certo?
Temos menos quantidade pintada de preto na calçada. Porém outro problema tornou-se evidente: os pixels da lateral do meio-fio não foram selecionados pelo if. Isso ocorre porque seu tom de amarelo é mais escuro. Certamente, seu nível de luminosidade é menor do que 150. Portanto, esses pixels não passam no teste do if.
d) No último passo desta prática tentaremos pensar em uma solução mais inteligente para a instrução if, de forma que consigamos, também, selecionar os pixels da lateral para realizar o ajuste de cores.
Então, vamos construir uma estratégia melhor. Para começar, observe nosso “laboratório RGB” com controles deslizantes para os componentes vermelho, verde e azul:
	 
	Sem cor →→ Escuro →→ Mais claro →→ Saturação total
	 
	Vermelho (R - Red):
Verde (G - Green):
Azul (B - Blue):
	R:0 G:0 B:0
 Mostrar Hexadecimal   
	 
	
Repare que você obteve um amarelo-escuro.
e) Agora, deslize o controle azul de 0(zero) para 84. Se tiver dificuldade em obter o valor exato, use as setas direcionais direita/esquerda no teclado. Observe o resultado.
Solução
Observe o amarelo gradativamente aproximando-se do cinza.
Considerações
Queremos tirar proveito do padrão da natureza que acabamos de observar.
Tons de amarelo são caracterizados por níveis equivalentes de vermelho e verde e um nível de azul muito mais baixo.
Como, porém, podemos escrever uma estrutura if para instruir o computador a selecionar os pixels que atendam a esse padrão?
Felizmente, isso é muito simples! Observe as duas figuras a seguir:
Na primeira figura, se calcularmos a média dos três componentes R(97), G(97) e B(0), obteremoso valor 64.6. A linha tracejada representa onde estaria esse valor nos controles deslizantes.
Repare que os componentes vermelho e verde estão acima da média. O mesmo comportamento se repete na segunda figura.
Então, vamos usar essa observação para construir uma solução mais inteligente para a instrução if e observar se, desse modo, selecionamos os pixels em amarelo do meio-fio de forma mais satisfatória.
f) Volte ao código-fonte desta prática e realize os ajustes destacados em vermelho a seguir:
for( pixel: img ){
   media=( pixel.getRed()+pixel.getGreen()+pixel.getBlue() ) / 3;
if( pixel.getRed() >media&&pixel.getGreen() >media ){
pixel.setRed( 0 );
pixel.setGreen( 0 );
pixel.setBlue( 0 );
}
}
print( img );
img = new SimpleImage("calcada.jpg");
Código-Fonte
Saída
Adicionaremos uma linha para o computador calcular a média automaticamente e, na estrutura if, testaremos se o valor do vermelho e do verde são maiores do que a média. Depois, clique em Rodar/Executar e observe o resultado.
Solução
Agora, confirmamos que a nossa estrutura if é capaz de selecionar, de forma bem satisfatória, os pixels que desejamos ajustar para a tonalidade cinza.
g) Já pensamos em uma forma de escrever a instrução if, de modo que os pixels do meio-fio sejam corretamente selecionados para modificação de cor. O último passo para alcançarmos nosso objetivo é ajustar as instruções internas à estrutura if, em que, de fato, as cores dos pixels selecionados são ajustadas.
Durante os passos anteriores deixamos as instruções alterando o valor dos componentes RGB para 0 (zero), para que pudéssemos observar o que ficou em preto e refletir se a nossa estrutura if estava correta.
Agora, pense um pouco: queremos que o meio-fio, que era amarelo, apareça em escala de cinza.
Pela tabela 7 já sabemos que a escala de cinza equivale a dizer que os três componentes R, G e B possuem o mesmo valor. Ora, nós já ordenamos que o computador calcule automaticamente a média dos três componentes do pixel.
Então, a variável chamada media contém uma estimativa de quanta luminosidade existe no pixel sendo tratado. Uma boa tentativa seria trocar o 0 (zero) das instruções de ajuste de cor internas ao if pela variável media.
Realize esses ajustes no código-fonte, conforme destacado em vermelho:
for( pixel: img ){
    media=( pixel.getRed()+pixel.getGreen()+pixel.getBlue() ) / 3;
if( pixel.getRed() > media &&pixel.getGreen() > media ){
pixel.setRed( media );
pixel.setGreen( media );
pixel.setBlue( media );
   }
}
print( img );
Código-Fonte
Saída
Solução
Isso realmente parece bem melhor! Conseguimos alcançar o nosso objetivo.
Escrevemos um código de computador que é capaz de instruí-lo a detectar automaticamente a região em amarelo do meio-fio, para, então, ajustar sua tonalidade de cor de amarelo para cinza.
TEORIA NA PRÁTICA
O pensamento computacional já é considerado em vários países do mundo como a competência fundamental usada por todas as pessoas nas próximas décadas. Assim como a leitura, a escrita e a aritmética, essa competência será imprescindível para o mercado de trabalho.
Professores e alunos do Ensino Fundamental, do Ensino Médio e do Ensino Superior, cientistas, engenheiros, historiadores, artistas, médicos, advogados, todos precisarão usá-la para desempenhar seu papel de forma competitiva.
Este estudo está baseado justamente no pensamento computacional.
Primeiramente, compreendemos que o computador representa qualquer conceito do mundo real por meio de números. No caso de imagens, os números indicam a posição do pixel e sua cor.
Para isso, precisamos desconsiderar qualquer outro detalhe da imagem que não seja fundamental para sua representação:
1
Quantos pixels usaremos para representá-la;
Qual é a cor de cada pixel.
2
Esse tipo de habilidade é denominada abstração e constitui um dos pilares primordiais do pensamento computacional.
Em seguida, escrevemos linhas de códigos (instruções) de computador para que ele fosse capaz de automaticamente manipular esses números e, assim, realizarmos ajustes nas imagens, conforme o objetivo proposto.
Dessa forma, praticamos outra habilidade chave do chamado pensamento computacional, que é a automação, ou seja, escrever soluções na forma de instruções que o computador é capaz de seguir automaticamente para chegar ao resultado desejado.
Durante o desenvolvimento das práticas, sempre paramos para observar e analisar os resultados obtidos nas imagens apresentadas. Então, refletimos sobre como poderíamos melhorar os resultados alcançados e realizamos ajustes em nosso código para alcançar resultados mais adequados. Isso constitui outro pilar fundamental do pensamento computacional, denominado análise/avaliação.
Observe que, durante as práticas realizadas, o código-fonte que escrevemos sempre decompôs o problema proposto em partes mais simples, que seguiram o seguinte passo a passo padrão:
Clique nas informações a seguir.
Passo 1
Passo 2
Passo 3
Passo 4
Passo 5
A habilidade de decompor um problema em problemas bem menores e mais simples, que podem ser resolvidos isoladamente com uma ou poucas linhas de código de computador, é mais um dos pilares do pensamento computacional, denominado decomposição.
Além disso, durante a prática do ajuste de cor do meio-fio de amarelo para escala de cinza, foi preciso observar um padrão natural/orgânico de qualquer pixel de tonalidades amareladas. Eles possuem os componentes verde e vermelho maiores do que o componente azul.
Então, usamos esta observação em nosso favor e escrevemos um código de computador que foi capaz de automaticamente selecionar pixels em diversos tons de amarelo, para que pudéssemos ajustar suas cores. Essa habilidade é denominada detecção de padrões.
A aprendizagem de todos esses pilares permitirá que você desenvolva cada vez mais saberes na área da Computação.
Você deverá usar o explorador RGB e a caixa de códigos para realizar as atividades do Verificando o aprendizado.
	 
	Sem cor →→ Escuro →→ Mais claro →→ Saturação total
	 
	Vermelho (R - Red):
Verde (G - Green):
Azul (B - Blue):
	R:0 G:0 B:0
 Mostrar Hexadecimal   
	 
	
Código-Fonte
Saída
Clique em Rodar/Experimentar para ordenar ao computador que execute as instruções escritas por você.
VERIFICANDO O APRENDIZADO
Parte superior do formulário
1. Analise a instrução if a seguir:
if( pixel.getRed() ==162&&pixel. getGreen() ==162 &&pixel.getBlue() > 200 ){ }
Assinale a alternativa que informa as características dos pixels que serão “selecionados” por este if. Se necessário, clique aqui e use os controles deslizantes do simulador RGB para chegar a sua resposta.
Pixels em tonalidades de azul.
Pixels em tonalidades de amarelo.
Pixels em tonalidades de verde.
Pixels em tonalidades de vermelho.
Parte inferior do formulário
Comentário
Parabéns! A alternativa "A" está correta.
O if em questão seleciona pixels que passem em três testes:
· Nível de vermelho igual a 162;
· Nível de verde igual a 162;
· Nível de azul maior do que 200.
Conforme ilustrado pelo exemplo a seguir, obtido por meio do simulador RGB disponibilizado para esta atividade, o teste em questão equivale a escolher pixels em tonalidades de azul.
Parte superior do formulário
2. Na Prática 1, usamos como ponto de partida a imagem a seguir para realizar alguns experimentos:
Suponha que desejemos escrever uma linha de instrução if que selecione os pixels da região em azul para, então, torná-los amarelos.
Assinale a alternativa que contém o código correto para alcançar essa tarefa. Se necessário, clique aqui e use o código-fonte a seguir para experimentar.
if( pixel.getRed()==0 &&pixel.getGreen()==0 &&pixel.getBlue()==255 ){
pixel.setRed(255);
pixel.setGreen(255);
pixel.setBlue(0);
}
if( pixel.getRed()>0 &&pixel.getGreen()>0 &&pixel.getBlue()==255 ){
pixel.setRed(255);
pixel.setGreen(255);
pixel.setBlue(0);
}
if( pixel.getRed()==0 &&pixel.getGreen()==0 &&pixel.getBlue()==255 ){
pixel.setRed(0);
pixel.setGreen(255);
pixel.setBlue(255);
}
if( pixel.getRed()>0 &&pixel.getGreen()>0 &&pixel.getBlue()==255 ){
pixel.setRed(0);pixel.setGreen(255);
pixel.setBlue(255);
}
Parte inferior do formulário
Comentário
Parabéns! A alternativa "A" está correta.
Conforme estudamos, precisamos usar a estrutura condicional if para realizar testes e, se o resultado for verdadeiro, executar algumas instruções.
No caso desta atividade, os pixels da região em azul são os pixels com código RGB(0,0,255). Então, para selecionar corretamente estes pixels, usamos a instrução if, conforme observamos a seguir:
if( pixel.getRed()==0 &&pixel.getGreen()==0 &&pixel.getBlue()==255 ){
}
Depois, precisamos adicionar, dentro da estrutura if, instruções que ajustarão a cor dos pixels selecionados para amarelo. O código RGB do amarelo puro é (255,255,0). Então, o código completo ficaria conforme a alternativa A.
Veja a captura a seguir com o código-fonte e o resultado obtido:
CONCLUSÃO
CONSIDERAÇÕES FINAIS
Praticamos aqui conceitos primordiais de pensamento computacional ao exercitarmos noções de programação de computadores com exemplos de manipulação de imagem
Vamos fazer o relato de uma ex