Aprenda a Programar de Forma Visual

Prévia do material em texto

SUMÁRIO
Introdução 3
Benefícios 5
Mitos 5
Conhecendo algumas ferramentas 6
Apresentando o Scratch 7
Meu primeiro jogo 19
Conclusão 34
O Autor 35
www.wagnerlssoares.com.br
INTRODUÇÃO
A cada dia que passa estamos consumindo
mais informação, entretenimento e nos
relacionando através das novas tecnologias
que estão disponíveis em nossas mãos e,
muitas vezes, não nos damos conta disso.
Passamos cada vez mais tempo consumindo
tecnologias e isso se dá pela popularização
da internet e dos aparelhos eletrônicos.
Primeiro vieram os PCs e NoteBooks, depois
vieram os tablets, até que chegaram os
SmartPhones que ficaram populares no início
dessa década e causaram uma grande
revolução no cenário tecnológico.
Vocês devem estar me perguntando, mas o
quê isso tem a ver com Programação? TUDO!
Pois, todas estas informações, entretenimento
e a forma como nos relacionamos estão
disponíveis para nós através de aplicativos.
Para construir estes aplicativos com certeza é
necessário um certo nível de conhecimento
em programação. Além disto, estes
aplicativos estão presentes em nossas vidas
de diversas formas, por exemplo, o
computador de bordo do carro nada mais é do
que um aplicativo interagindo com os
dispositivos eletrônicos do carro para nos
fornecer informações.
03
www.wagnerlssoares.com.br
Outro ponto que podemos destacar, é a
evolução da Internet das Coisas (IoT), que
nada mais é do que um conceito de interligar
as coisas do dia a dia com a internet, um
exemplo é a utilização do celular para
controlar os objetos da sua casa como o ar-
condicionado, tv, luzes etc. “Segundo
projeções da consultoria McKinsey, a conexão
do mundo físico com o mundo digital pode
gerar US$ 11,1 trilhões por ano em 2025.”
O Ministério da Ciência, Tecnologia,
Inovações e Comunicações (MCTIC),
divulgou na Futurecom de outubro de 2017
que a estimativa para o Brasil é que este
número fique em torno de 50 a 200 bilhões de
dólares.
Por estes motivos e por acreditar que a
programação estará cada vez mais presente
em nosso cotidiano, eu resolvi escrever este
e-book para lhe ajudar a começar a entender
como você pode aprender a programar de
uma forma simples e visual, para que você
não fique fora desta revolução que acontecerá
nos próximos anos.
Para alguns especialistas saber programar
será tão importante neste século como saber
ler e escrever foi para o século passado.
04
www.wagnerlssoares.com.br
Assista este vídeo e veja o que pessoas como Steve Jobs, Bill 
Gates e Mark Zuckerberg entre outros pensam sobre este assunto.
https://youtu.be/nKIu9yen5nc
Benefícios
Desenvolve o raciocínio lógico e matemático. 
o Estimula a criatividade e o pensamento crítico.
o Ensina a pensar de forma sistêmica e a resolver problemas.
o Estimula o trabalho em equipe e por projeto.
Mitos
o Todo mundo pode aprender a programar?
O primeiro passo é descontruir o conceito de que programar é uma
coisa de outro mundo, que foi feito para quem é um gênio ou para quem
nasceu com a predisposição para a área de exatas, ou até mesmo para
quem quer seguir na área de tecnologia da informação e se tornar um
programador, analista de sistema ou similar. Hoje em dia, existem várias
ferramentas que você pode usar para aprender a programar sem
escrever uma linha de código sequer, de forma visual, simples e de fácil
absorção e eu vou lhe provar isso mais a frente.
o Preciso de um alto investimento para começar a programar?
NÃO! Muitas dessas ferramentas são gratuitas e não precisam sequer
ser instalada na sua máquina para que você comece a programar.
Existem ferramentas que estão disponíveis online para você começar a
programar basta ter um computador com acesso à internet e criar um
login para acessar um destes ambientes. Feito isso, você pode começar
a criar seus projetos e dar asas a sua imaginação.
05
Conhecendo algumas ferramentas.
Vamos conhecer algumas ferramentas disponíveis no mercado na qual
você pode utilizar para aprender a programar.
o Blockly - É uma ferramenta da Google de fácil aprendizado porque
utiliza um editor visual de programação, não é preciso escrever uma
linha de código. É uma ferramenta gratuita e não é necessário a
instalação no seu computador e é utilizado para gerar código para
Websites e aplicativos para dispositivos moveis.
o Kodu - Produzido pela Microsoft tem o objetivo de ensinar a criar
jogos em 3D e ao mesmo tempo programar. Utiliza ícones intuitivos
para programar os seus objetos. É indicado para crianças ou adultos
que querem aprender a criar jogos. É uma ferramenta gratuita e é
preciso baixar o software e instalar na máquina.
o Minecraft - Muito provável que você ou seu filho já tenha jogado
algum jogo que foi criado com esta ferramenta. Esta ferramenta foi
comprada pela Microsoft e é uma referência no mercado de jogos, ela
é uma ferramenta paga. Ela permite a criação de jogos em 3D através
de blocos sem necessidade de escrever código.
o Scratch - Foi criado pelo MIT (Instituto de Tecnologia de
Massachusets), ele é focado para crianças de 8 a 16 anos, mas pode
ser utilizado por pessoas de várias idades. Ele permite a criação de
animação e jogos sem a necessidade de escrever uma linha de
código. O Scracth é uma ferramenta gratuita e disponível em versão
on-line e off-line.
06
Bom a ferramenta que eu escolhi para detalhar um pouco mais para 
você aqui foi o Scracth, você deve estar me perguntado por que o 
Scracth? Pela minha experiência de programação e pelas minhas 
pesquisas, ela é uma das ferramentas mais fáceis e intuitivas para 
aprender a programar de forma visual, simples e lúdica. Ela também 
permite que seus projetos sejam compartilhados com a comunidade 
através do site www.scratch.mit.edu/ .
Apresentando o Scratch
1-Conhecendo o Scracth
1.1 - Palco, é o local onde visualizamos o Ator/Sprite, é nesse local que 
visualizaremos a nossa estória, animação ou jogo;
1.2 - Nome do projeto, botões para iniciar (bandeira verde) e parar 
(círculo vermelho) a execução do script;
1.3 - Botões, servem para duplicar ator(carimbo), apagar ator (tesoura), 
aumenta o tamanho do ator (Setas para fora) e diminui o tamanho do 
ator(setas para dentro);
07
1.4 - Seleção de script (locais onde ficaram os blocos de código que 
você irá construir), fantasias (ou trajes são uma cópia do ator que pode 
ser utilizado para dar ideia de movimento, por exemplo) e som.
1.5 - Categoria de comandos: Movimento, Aparência, Som, Caneta,
Controle, Sensores, Operadores, Variáveis;
1.6 - Bloco de comandos, ao escolher uma categoria de comando temos
várias opções de comandos;
1.7 - Área de edição (depende da aba selecionada – item anterior 4),
este é local onde montaremos os blocos de comando;
1.8 - Área que disponibiliza a seleção/criação do palco.
1.9 - Área que disponibiliza a seleção/criação dos Atores/Sprites.
2 – Conhecendo os comandos dos atores.
2.1- Movimento – Nesta categoria de comandos você irá programar seu
ator para se movimentar no palco considerando as coordenadas X e Y.
08
COMANDO DESCRIÇÃO
Move o ator para frente ou para
trás colocando número positivo
ou negativo.
Gire o ator no sentido horário x
graus.
Gire o ator no sentido anti-horário
x graus.
Aponte o ator para uma direção
especificada, x graus.
2.2- Aparência – Nesta categoria você programará o ator para interagir
no jogo, na estória ou na animação. O ator poderá falar, se esconder ou
mudar de cor.
09
Colocar o nome do siteColocar o nome do site
Move o ator até o ponteiro do
mouse.
Move o ator para a posição x e y
especifica.
Move o ator até o ponteiro do
mouse.
Deslize o ator para a posição
especificada no tempo
determinado.
Adicione um valor a posição x.
Leve o ator para a posição x na
horizontal.
Adicione um valor a posição y.
Leve o ator para a posição y na
vertical.
Quando o ator tocar na borda ele
vai retornar.
Muda o estilo de rotação do ator.
Permite visualizar no palco a
posição X que o ator se encontra.
Permite visualizar no palco a
posição y que o ator se encontra.
Permite visualizar a direção do
seu ator no palco.10
Colocar o nome do siteColocar o nome do site
COMANDO DESCRÇÃO
Mostre o texto por um tempo
determinado.
Mostre o texto em uma conversa.
Mostre o texto em um balão de
pensamento por um tempo
determinado.
Mostre o texto em um balão de
pensamento.
Faz o ator aparecer.
Faz o ator esconder.
Mude a fantasia do ator para a
escolhida.
Troca a fantasia para próxima.
Mude o fundo de tela para o
fundo escolhido.
Adiciona o efeito escolhido na
intensidade determinada.
Mude o efeito escolhido para a
intensidade determinada.
Apaga os efeitos gráficos dos
atores ou do palco.
Acrescenta ao ator o tamanho
determinado.
Acrescenta ao ator o tamanho
determinado.
2.2- Aparência – Nesta categoria você programará o ator para interagir
no jogo, na estória ou na animação. O ator poderá falar, se esconder ou
mudar de cor.
COMANDO DESCRIÇÃO
Toque o som selecionado e
passe para o próximo bloco,
mesmo que não tenha terminado
de tocar.
Toque o som selecionado até que
termine e então segue para o
próximo bloco.
Pare de executar todos os sons.
Toque o som do tambor
selecionado durante o tempo
definido.
Pare de tocar pelo tempo
definido.
Toque a nota (Dó, ré, mi...)
selecionada durante o tempo
definido.
2.3- Som – Nesta categoria você programará o som que o seu jogo,
estória ou animação estará emitindo.
11
Colocar o nome do siteColocar o nome do site
COMANDO DESCRÇÃO
Altera o tamanho do ator para x%
do tamanho original.
Altera o posicionamento do ator
para frente caso haja
sobreposição.
Permite visualizar o número da
fantasia no palco.
Permite visualizar o nome do
pano de fundo.
Permite visualizar o tamanho do
ator.
12
Colocar o nome do siteColocar o nome do site
Define o instrumento selecionado
para tocar.
Adiciona o valor digitado ao
volume.
Muda o volume em x%
especificado.
Mostra o volume.
Altera o tempo entre as batidas
de acordo com o valor definido.
Mude o tempo entre as batidas
para o valor definido.
Mostre o tempo.
2.4- Caneta – Nesta categoria você programará o ator para desenhar no
palco.
COMANDO DESCRIÇÃO
Limpe todos os traços e carimbos
do Palco.
Carimbe a imagem do ator no
Palco.
Abaixe a caneta do ator para
desenhar no Palco.
Tire a caneta do ator para não
desenhar no Palco.
Mude para a cor definida.
Adicione o valor definido a cor.
COMANDO DESCRIÇÃO
Botão que cria as variáveis.
Variável chamada ponto que foi
criada como exemplo.
Mude o valor da variável para o
valor definido.
Adicione o valor definido à
variável.
Mostre a variável.
Esconda a variável.
Botão que permite criar uma lista
de variáveis.
Variável chamada nome criada
para guardar uma lista.
13
Colocar o nome do siteColocar o nome do site
COMANDO DESCRÇÃO
Mude a cor da caneta para o
valor definido.
Adicione à tonalidade da caneta
o valor definido.
Mude à tonalidade da caneta
para o valor definido.
Adicione o valor definido à
espessura da caneta.
Mude a espessura da caneta
para o valor definido.
2.5- Variáveis – Nesta categoria você conseguirá definir variáveis ou
lista de variáveis armazenar informações. Por exemplo: variável ponto
que será utilizada para somar e mostrar a quantidade de pontos que o
jogador fez.
COMANDO DESCRIÇÃO
Execute o script quando a
bandeira verde for clicada.
Execute o script quando a tecla
selecionada for pressionada.
Execute o script do ator quando
for clicado no Palco.
Execute o script quando o plano
de fundo mudar para o fundo
definido.
2.6- Eventos – Nesta categoria você defini qual condição será
necessária para que seu jogo, estória ou animação comece a executar.
14
Colocar o nome do siteColocar o nome do site
Insira o texto definido à lista.
Apague o conteúdo da posição
definida da lista.
Insira o texto definido na posição
selecionada da lista.
Substitua o texto da posição
definida pelo texto definido.
Retorna o texto armazenado na
posição definida.
Retorna o tamanho da lista.
Verifica se a lista contém o valor
especifico.
Mostre a lista.
Esconde a lista.
COMANDO DESCRIÇÃO
Espere até que a condição seja
verdadeira para executar próximo
bloco.
Repete o bloco de comandos o
número de vezes definido.
Execute o bloco de comandos e
só pare se for clicado ou se
houver um comando para parar.
Execute o bloco de comandos se
a condição for verdadeira.
Execute o bloco de comandos se
a condição for verdadeira, caso o
contrário execute o bloco de
comandos contidos no senão.
2.7- Controle – Nesta categoria você irá definir as condições de
controles necessárias para que seu jogo, estória ou animação execute
do jeito que você está pensando.
15
Colocar o nome do siteColocar o nome do site
COMANDO DESCRÇÃO
Execute o script quando a opção
selecionada for maior do que o
valor definido.
Execute o script quando receber
a mensagem definida.
Envie a mensagem definida para
todos e continue executando o
próximo bloco.
Envie a mensagem definida para
todos e espere o retorno.
COMANDO DESCRIÇÃO
Retorna verdadeiro se o ator
estiver tocado na opção
selecionada.
Retorna verdadeiro se o ator
estiver tocando na cor
selecionada.
Retorna verdadeiro se a primeira
cor selecionada estiver tocando a
segunda cor selecionada.
Retorna a distância do ator até a
opção selecionada.
2.8- Sensores – Nesta categoria você programará o ator para interagir
no palco ou com o usuário.
16
Colocar o nome do siteColocar o nome do site
COMANDO DESCRÇÃO
Espere até que a condição seja
satisfeita para executar o
próximo bloco.
Repita o bloco de comandos até
que a condição seja satisfeita.
Pare a execução de todos os
scripts.
Começa a executar o bloco de
comandos quando o clone (cópia
do ator) for criado.
Crie um clone do ator, uma cópia.
Apague um determinado clone
do ator.
17
Colocar o nome do siteColocar o nome do site
COMANDO DESCRÇÃO
Apresenta uma pergunta na tela
e espera pela resposta a ser
digitada no teclado, somente
após o clique do Enter o
programa continuará a execução.
Retorna o valor digitado no
teclado no caso do comando
acima (pergunta).
Retorna verdadeiro se a tecla
selecionada for pressionada.
Retorna verdadeiro se o mouse
for pressionado.
Retorna a posição do mouse em
relação ao eixo x.
Retorna a posição do mouse em
relação ao eixo y.
Habilita o microfone do
computador para absorver o
ruído.
Retorna o movimento do que
está sendo filmado.
Liga e desliga a câmera de vídeo
do computador.
Altera a transparência do vídeo
de acordo com o percentual
definido.
Mostra o cronometro.
Zera o cronometro.
Mostra a posição x do ator.
Mostra a informação atual de
data ou hora selecionada.
COMANDO DESCRIÇÃO
Soma dois números.
Subtrai dois números.
Multiplica dois números.
Divide dois números.
Retorna um número aleatório
entre os dois números definidos.
Verifica se o primeiro número é
menor do que o segundo
número.
Verifica se o primeiro número é
igual ao segundo número.
Verifica se o primeiro número é
maior do que o segundo número.
Verifica se as duas condições
são satisfeitas.
Verifica se pelo menos uma das
condições é satisfeita.
Retorna verdadeiro quando a
condição não for satisfeita.
2.9-Operadores – Nesta categoria você programará as operações
matemáticas ou condições.
18
Colocar o nome do siteColocar o nome do site
COMANDO DESCRÇÃO
Retorna o número de dias desde
o ano 2000.
Retorna o nome do usuário
logado no scracth.
2.10- Mais Blocos – Nesta categoria de comandos você poderá criar seu
próprio bloco ou até mesmo adicionar um hardware como extensão. Mas
este item é considerado avançado e não indicado para quem está
começando a conhecer o Scratch.
Meu primeiro jogo
Agora chegou a grande hora, está preparado?
Vamos construir nosso primeiro projeto?
Para este primeiro projeto eu selecionei um exercício bem legal, vamos
programar um jogo simples chamado Pong, se você for adulto com
certeza vai lembrar desse jogo.
Programando este jogo iremos dar os primeiros passos com o scracth.
Vamos ao que interessa, primeiro entre no site do scratch
https://scratch.mit.edu.
Se você já é cadastrado no Scracth clique em Entrare faça seu login,
caso o contrário clique no botão Aderir ao Scratch e entre com seus
dados, é bem simples e rápido.
19
Colocar o nome do siteColocar o nome do site
COMANDO DESCRÇÃO
Junta os dois textos digitados.
Retorna a letra da posição
definida.
Retorna o tamanho do texto
digitado.
Retorna o resto da divisão do
primeiro número pelo segundo.
Retorna o arredondamento do
número definido.
Retorna a raiz quadrada do
número definido
Clique no botão Criar que irá abrir a tela que vimos no item 3.5.
A primeira coisa a se fazer é apagar o ator gatinho, clique com o botão
direito em cima dele e selecione a opção apagar.
20
Vamos selecionar nosso palco, clique no botão Escolher Pano de
Fundo da Biblioteca.
Selecione a categoria Outro, depois selecione o fundo neon tunnel e
clique no botão OK.
21
A sua tela deve ficar assim:
Agora vamos selecionar o primeiro ator e começar a programá-lo.
Clique no botão Escolher Ator da Biblioteca.
Selecione a categoria todos, depois selecione o ator Ball e clique no
botão OK.
22
Feito isso selecione o ator Ball.
Selecione a Aba Script depois selecione a categoria de comandos
Eventos.
Clique com o botão esquerdo do mouse na opção Quando clicar em iiii
e arraste para a área de edição.
Continuado a programação, selecione na Aba Script a categoria de
comandos Controle.
23
Clique com o botão esquerdo do mouse na opção Sempre e arraste
para a área de edição.
Selecione na Aba Script a categoria de comandos Movimento.
Clique com o botão esquerdo do mouse na opção mova 10 passos
Sempre e arraste para a área de edição, faça o mesmo para a opção se
tocar na borda, volte. Altere 10 passos para 15 passos.
24
Com este primeiro bloco você acabou de programar seu ator (a bola)
para movimentar na tela.
Precisamos ainda mudar a direção que o ator Ball se movimenta na tela,
para isso cliquei no i do ator que irá abrir a tela abaixo, ajuste a direção
para 60º e o estilo de rotação
Quando clicar na opção Quando clicar em o bloco começará a
execução. O controle Sempre executará todos os comandos que
estiverem dentro dele até que o botão seja clicado, neste caso vai
mover 15 passos e se tocar na borda o ator irá retornar.
Faça o teste, clique na .
Agora vamos incluir e programar o segundo Ator do nosso jogo.
Cliquei no botão Novo Ator e Selecione a categoria coisas, depois
selecione o ator Paddle e clique no botão OK.
25
Clique no Ator Paddle e arraste ele para a parte inferior do palco.
Inclua os comandos Quando clicar em , Sempre e mude x para 0.
Selecione na Aba Script a categoria de comandos Sensores.
Clique com o botão esquerdo do mouse na opção posição de x do
mouse e arraste para a área de edição dentro do comando mude x
para 0.
26
Quando clicar na opção Quando clicar em o bloco começará a
execução o ator Paddle se movimentara dentro do palco seguindo o
mouse. Faça o teste, clique na .
Agora vamos voltar ao ator Ball e programar seu segundo bloco de
comandos.
Inclua os comandos: Quando clicar em , Sempre, Se então,
tocando em ponteiro do mouse, gire em 15 graus, mova 10 passos
e espere 1 seg.
Comando devidamente incluídos vamos as alteração:
o No tocando em ponteiro do mouse mude para paddle;
o no gire em 15 graus mude para 180 graus;
o no mova 10 passos mude para 15 passos;
o no espere 1 seg mude para 0,5 seg.
27
Quando clicar na opção Quando clicar em o bloco começará a
execução e quando o ator ball tocar no ator padlle ele irá:
Mudar a direção em 180 graus, Mover 15 passos para que o ator ball
não fique preso ao paddle e Esperar meio segundo para executar
novamente o comando Se então.
Feito isso, agora precisamos definir o término do jogo nos casos em que
o jogador atinja o objetivo ou no caso em que perca o jogo.
Vamos incluir mais três atores. Primeiro vamos incluir uma linha que irá
delimitar o fim do jogo caso o ator ball toque-a.
Clique em Pintar Novo Ator.
28
Depois de criado o novo ator clique em linha e desenhe uma linha
vermelha na parte inferior do palco.
Caso a linha não esteja na posição correta, clique e arraste para a
posição desejada. Você também pode alterar a espessura da linha.
Clique duas vezes no botão Pintar Novo Ator.
No Ator 2 você vai selecionar a caixa de texto e digitar GANHOU.
No ator 3 você também vai selecionar a caixa de texto e digitar GAME
OVER.
29
Feito isso, concluímos a inclusão de atores, vamos concluir a
programação.
Vamos programar a linha vermelha:
Crie uma variável para controlar o fim do jogo caso o jogador tenha
perdido o jogo. Clique em criar variável, de um nome a esta variável,
neste caso vamos nomeá-la de Game Over, deixe selecionado a Opção
“Para todos atores”, com isso, todos os atores poderam acessar seu
conteúdo e clique em OK.
30
Inclua os comandos: Quando clicar em , Vá para X: Y:, Sempre, Se
então, tocando em ponteiro do mouse e adicione Acabou 1.
Comando devidamente incluídos vamos as alteração:
o No Vá para X: Y: mude os valores de X para 0 e Y para -170
o No tocando em ponteiro do mouse mude para ball.
o Desmarque a variável acabou para que ela não seja exibida no palco.
Não deixe de testar o jogo.
Vamos programar o ator Ganhou:
Crie uma variável para controlar os pontos e determinar um limite para o
jogador vencer o jogo, siga os mesmos passos que utilizou para a
variável Game Over.
Inclua os comandos: Quando clicar em , Esconda, Espere até,
Operador >, mostre e Pare todos.
Inclua a variável Pontos no Operador > e altere o valor para 5.
Selecione a variável pontos para aparecer no palco.
31
Vamos programar o ator Game Over:
As únicas diferenças entre o Ganhou e o Game Over são os
operadores, que neste caso utilizaremos o igual e a variável que será a
Game Over.
Ops, Não deixe de testar, mais uma vez.
32
Bom, agora com todos os atores e variáveis criados e programados,
precisamos voltar ao ator Ball e concluir a programação do mesmo.
Inclua os comandos: mude Pontos para 0, mude Game Over para 0 e
Esconda, Espere até, Operador >, mostre e Pare todos.
Mais uns testes... e é só começar a jogar e usar sua criatividade para
incrementar este jogo simples, mas que lhe ensinou os primeiros passos
em programação de jogo com scratch.
33
Conclusão
Como vocês podem notar em pouco tempo conseguimos criar um jogo
bem simples e dar os primeiros passos na programação.
Aprendemos o que é uma variável, uma condição, uma estrutura de
repetição e operadores, além disso, apesar de não tocarmos no assunto
aprendemos coordenadas (X e Y), aplicamos conceitos básicos de ator
e palco do scracth.
Aprendemos isto tudo nos divertindo e brincando...
Ah! Podemos compartilhar nosso jogo com outras pessoas no próprio
scracth.
Se você quer aprender mais sobre como programar brincando nos
acompanhe no Facebook, Instagram e youtube estaremos postando
constantemente dicas, ensinando a fazer jogos bem divertidos e caso
tenha alguma dúvida envie para nosso e-mail de contato que terei o
maior prazer de responder todas e quem sabe não gravo um vídeo com
sua dúvida.
34
O Autor
Wagner Soares é especialista em TI e
gerenciamento de projetos, apaixonado
por programação, idealizador da Play
Coding, que ensina programação para
crianças e adolescente através de
criação de jogos e animações.
35
Wagner teve seu primeiro contato com programação aos 17 anos.
Começou sua vida profissional aos 19 anos, desde então programou em
várias linguagens atuando em vários projetos de diversos segmentos.
Wagner e seu time da Play Coding acreditam que saber linguagem de
programação ajudará as crianças e os adolescentes a desenvolverem
uma série de habilidades essências para qualquer carreira que venham
a escolher ou até mesmo ajudar a lidar com a enxurrada de tecnologia
que estar por vir nas próximas décadas, por isso, resolvemos levar este
conhecimento ao maior número de pessoas possíveis ajudando-as a em
seu desenvolvimento e crescimento.
“Aprender a programar nos ensina a pensar.” Steve Jobs