Introdução ao Scratch: mudanças entre as edições

De IFSC
Ir para navegação Ir para pesquisar
imported>Fargoud
imported>Fargoud
Sem resumo de edição
Linha 56: Linha 56:
:AULA 2 - [[Efeitos_Sonoros |Efeitos sonoros]] (4h)
:AULA 2 - [[Efeitos_Sonoros |Efeitos sonoros]] (4h)
:AULA 3 - [[Fantasias |Alterando o aspecto do ator]](4h)
:AULA 3 - [[Fantasias |Alterando o aspecto do ator]](4h)
:AULA 4 - [[Array]](4h)
:AULA 4 - [[]](4h)
:AULA 5 - [[Eventos]](4h)
:AULA 5 - [[]](4h)
:AULA 6 - [[Objetos]] (4h)
:AULA 6 - [[]] (4h)
:AULA 7 - [[Estruturas de Controle]](4h)
:AULA 7 - [[]](4h)
:AULA 8 - [[Funções]](4h)
:AULA 8 - [[]](4h)
:AULA 9 - [[Trabalhando com páginas web]] Aula 1 (4/8h)
:AULA 9 - [[]] Aula 1 (4/8h)
:AULA 10 - [[Trabalhando com páginas web]] Aula 2 (8/8h)
:AULA 10 - [[]] Aula 2 (8/8h)




-------------------------
-------------------------


=Atendimento paralelo=
=Referências=


:<span style="color:red;">O atendimento extra-classe às alunas será realizado nas '''quartas-feiras''', das 10:00
As seguintes apostilas e links foram utilizados como referência, na produção deste material e estão disponíveis para consulta:
</span>


=Material de apoio=
:[[media: apostilaScratch1.pdf|Apostila de Introdução à JavaScript - Adriano Lima ]]


:[[media: apostilaJS1.pdf|Apostila de Introdução à JavaScript - Adriano Lima ]]


:[[media: apostilaJS5.pdf|Apostila JavaScript - Canal Fessor Bruno ]]
:[[media: apostilaJS2.pdf|Apostila de Introdução à JavaScript - Dinis Santos]]
:[[media: apostilaJS3.pdf|Apostila de Introdução à JavaScript - Grillo e Fortes]]
:[[media: apostilaJS4.pdf|Apostila de Introdução ao HTML e JavaScript]]
=Acesso ao Scratch=
Você poderá acessar o aplicativo neste link: [https://scratch.mit.edu/ '''http://scratch.mit.edu'''].
Você pode utilizar a versão ''on-line'', ou instalar o aplicativo no seu computador.
A tela inicial é esta:
[[image: SCRATCH1tela1.png|center]]
Você também pode optar por criar seus programas direto pela web, ou antes criar um perfil e acessá-lo, para só daí começar a criar.
Vale ressaltar que se você não criar um perfil, poderá utilizar a plataforma
apenas para explorar as criações dos demais usuários e fazer suas criações, porém não
poderá compartilhar e comentar, ou seja, não poderá utilizar todo o potencial da plataforma.
==Criando um perfil==
Para criar um perfil, siga estes passos:
[[image: SCRATCHperfil1.png|center]]
[[image: SCRATCHperfil2.png|center]]
=Aspectos básicos=
Clique no menu superior '''"Criar"''', conforme abaixo, e vamos lá!!!
[[image: SCRATCHtela0.png|center]]
==Idioma==
Você vai ser levado para a tela abaixo.
Em primeiro lugar, caso esteja tudo em inglês, vamos mudar o idioma para o '''Português brasileiro'''.
[[image: SCRATCHtela2.png|center]]
==Áreas de trabalho==
[[image: SCRATCHambiente2.png]]
A área principal de trabalho do Scratch é dividida em 3 abas:
* '''1. Aba Código''' : é onde estão organizados os blocos de programação, formados por nove
categorias distintas, organizadas por cores;
* '''2. Aba Fantasias''' : é a área onde podemos editar as imagens dos personagens e cenários
utilizados no projeto, fazendo as alterações que nos interessarem;
* '''3. Aba Sons''' : é o local destinado à edição dos sons utilizados no projeto, sejam eles
associados aos personagens ou aos cenários.
A área de '''"CÓDIGO"''', por sua vez, é dividida em 3 áreas principais:
[[image: SCRATCHinstr9.png]]
A área marcada em vermelho é onde estão disponíveis as <u>instruções</u> e ferramentas que o Scratch disponibiliza. Estas instruções irão modificar o estado do '''ator''' que, no caso, é o gatinho.
A área marcada em verde é a área de programação (marcada com o número '''10''' na figura acima). As instruções são arrastadas para cá, na ordem determinada. É o espaço onde podemos adicionar, ver e editar os blocos de programação utilizados para cada personagem ou cenário.
A área marcada em azul é a área de execução, onde as instruções são executadas (marcada com o número '''11''' na figura acima). É a área que funciona como uma mini tela, onde podemos visualizar e testar a execução do projeto.
Os principais conceitos são:
* '''4. Ator''': é cada personagem ou objeto que utilizamos no projeto, que podem ser
modificados na aba “Fantasias”;
* '''5. Palco''': é a área que aciona os cenários para que possamos editá-los na área de
programação;
* '''6. Cenários''': são os planos de fundo que utilizamos no nosso projeto. Quando a edição de
cenários está ativa a aba “Fantasias” muda de nome para “Cenários”;
* '''7. Mochila''': é a área do editor que comporta as três abas mencionadas e mais o espaço de
programação;
* '''8. Botão Ir''' [[image: SCRATCHbandeira.png]]: é onde se inicia a execução do projeto na Área de visualização, para que
possamos testar se tudo está saindo de acordo com o que planejamos;
* '''9. Botão Pare''' [[image: SCRATCHparar.png]]: é o botão que para a execução do projeto na Área de visualização;
* '''12. Nome do projeto''': é o espaço reservado para colocarmos o nome do nosso projeto – por
padrão ele vem com a denominação Untitled;
* '''13. Botão Veja a Página do Projeto''': é o botão que, quando clicado, alterna entre o
modo de edição do projeto e o modo de compartilhamento, que mostra o projeto como
os outros usuários irão vê-lo na plataforma;
* '''14. Botão Selecione um ator''' : é o botão que mostra as opções que temos para
escolher, criar ou adicionar personagens ao nosso projeto;
* '''15. Botão Selecionar Cenário ''': é o botão que mostra as opções que temos para a
escolher, criar ou adicionar cenários ao nosso projeto
Além de compreender as funcionalidades apresentadas, é importante compreender
as funções de cada categoria de blocos de programação e, claro, como criamos o código que
vai dar vida aos atores e cenários do nosso projeto. Também é essencial conhecer as
características da área de programação para poder fazer uso correto dos blocos. Assim,
evitamos que o projeto tenha algum erro.
==INSTRUÇÕES==
As instruções são separadas por tipo, e cada tipo é identificado por uma cor:
[[image: SCRATCHinstr1.png]] - MOVIMENTO - servem para alterar a posição do ator.
[[image: SCRATCHinstr2.png]] - APARÊNCIA - alteram a aparência do ator e do cenário.
[[image: SCRATCHinstr3.png]] - SOM - insere e altera o(s) som(s) cadastrado(s) no programa. Estes sons podem ser acessados pela Aba '''"Sons"''':
      [[image: SCRATCHsons.png|center]]
[[image: SCRATCHinstr4.png]] - EVENTOS - insere rotinas em caso de ocorrência de evento.
[[image: SCRATCHinstr5.png]] - CONTROLE - são as instruções de controle de fluxo, programação, propriamente ditas.
[[image: SCRATCHinstr6.png]] - SENSORES - identifica características do programa e execução.
[[image: SCRATCHinstr7.png]]  - OPERADORES - instruções para cálculos e comparações.
[[image: SCRATCHinstr8.png]] - VARIÁVEIS - permite a criação de variáveis.
[[image: SCRATCHinstr10.png]]- MEUS BLOCOS - permite a criação de blocos (funções, classes, etc) customizados.
===Blocos de Movimento ===
Os blocos de movimento são relacionados ao posicionamento e deslocamento dos
componentes (atores, palcos) pelo espaço da tela. São no total dezoito blocos:
[[image: SCRATCHmov1.png|center]]
===Blocos de Aparência===
Os blocos de aparência são vinte e relacionam-se ao aspecto visual dos
componentes, como tamanho, cor, aparecer ou desaparecer, camada de posicionamento,
ações de fala escrita e mudanças de fantasia ou de cenário.
[[image: SCRATCHapar1.png|center]]
===Blocos de Som===
Além dos textos, é possível também atribuir sons, tanto
para simular a fala como para simular efeitos sonoros das ações e interações dos atores e
dos cenários. Os blocos de som, num total de nove, são:
[[image: SCRATCHblocosom.png|center]]
===Blocos de Eventos===
Utilizamos sempre um bloco de evento
no início de um grupo de blocos para determinar a <u>condição</u> para que a programação em
questão comece a ser iniciada, por exemplo. Utilizados em conjunto com os demais blocos,
eles marcam a situação específica que ativa o código.
[[image: SCRATCHeventos.png|center]]
Se não utilizarmos um bloco de evento, por exemplo, uma ação pode ocorrer de
forma indefinida, ou mesmo nem ocorrer.
===Blocos de Controle===
Esses blocos têm a função de organizar a execução das ações dos componentes,
por exemplo, determinando quantas vezes determinada ação será realizada. É o caso do
bloco denominado “repita ___ vezes”, o segundo na coluna da direita abaixo. Todos os
demais blocos que estiverem englobados por ele repetirão suas ações tantas vezes quantas
estiverem estipuladas por você. Eles ajudam também, em associação com outras categorias
de blocos, a determinar o condicionante para que a ação aconteça. Repare abaixo em sua
aparência e nos comandos que representam:
[[image: SCRATCHcontrole.png|center]]
Os três últimos blocos dessa categoria têm uma função especial. São direcionados
para lidar com os “clones”, que são as duplicatas de algum ator que pode surgir devido a
alguma condicionalidade ou mesmo à programação dos blocos. Eles lembram os blocos de
eventos, mas por uma determinação do programador do Scratch, ficaram agrupados nessa
categoria de controle.
===Blocos de Sensores===
Essas interações podem ser, por exemplo, um ator de um jogo se
aproximar de outro ou tocá-lo. Também poderia ser o usuário clicando com o mouse ou
apertando determinada tecla e isso ser o fator determinante para uma ação de algum
componente. Confira os blocos de sensores logo abaixo:
[[image: SCRATCHsensores.png|center]]
Os formatos dos blocos de sensores já denunciam que alguns têm locais específicos
para se encaixarem junto aos blocos de outras categorias. Por exemplo: o bloco “tocando
na cor...?” necessariamente deve associar-se aos blocos de controle para determinar o que
ocorre se o ator em questão tocar na cor escolhida por você.
Alguns dos blocos de controle
que têm formato arredondado podem ser acoplados a outros blocos das categorias anteriores
para determinar um valor numérico específico, como por exemplo o ano atual.
===Blocos de Operadores===
Os blocos de operadores têm função lógica e matemática, utilizada em associação
com os demais grupos de blocos. Essa utilização associada dos grupos de blocos é
importante quando se quer determinar números que dependem de outros componentes, sua
posição na tela, entre outros fatores. São dezoito os blocos de operadores, que podemos
conferir a seguir:
[[image: SCRATCHoperadores.png|center]]
===Blocos de Variáveis===
As variáveis servem para armazenar números e sequência de letras na
memória do computador, como o resultado de um cálculo matemático, ou o nome do
usuário, por exemplo. Pode ser utilizada para um ator se referir ao usuário pelo nome, por
exemplo.
[[image: SCRATCHvariaveis.png|center]]
===Meus Blocos===
Nessa área, antes que criemos blocos novos, apenas aparece o seguinte botão:
[[image: SCRATCHmeusblocos.png|center]]
Esse grupo de blocos serve para criarmos blocos novos e agruparmos outros grupos
de blocos que executam comandos que vamos utilizar mais vezes, simplificando a
programação posterior.
Assim, quando formos reutilizar o mesmo tipo de comando, bastará
adicionar apenas o novo bloco único criado, evitando ter de repetir todo um grupo enorme
de blocos de programação novamente.
==Palco==
O palco é onde ficarão os atores, ou ''sprites'' e onde serão mostradas as histórias, jogos e animações.
Os ''Sprites'' podem mover-se e interagir, uns com os outros, no palco.
O palco tem <u>480 unidades de largura e 360 unidades de altura</u> e está dividido entre as coordenadas '''X''' e '''Y''' .
O centro do palco tem as coordenadas 0 em "X" e 0 em "Y" .
Para saber a posição de um determinado ponto dentro do palco, mova o mouse até o ponto desejado e observe logo abaixo do palco no canto inferior direito.
Pela imagem abaixo, indica-se que o cursor está no ponto X:100 e Y: 50.
[[image: SCRATCHcoord1.png|center]]
===Sistema de coordenadas e orientações===
Como falado acima, o palco  tem 480 unidades de largura e 360 unidades de  altura e é dado pelo sistema ortogonal XY.
Podemos perceber isto melhor através da figura ao lado, que mostra bem melhor este sistema de coordenadas.
[[image: SCRATCHcoord2.png|center]]
Neste sistema, o centro é dado a posição X:0 Y:0.
Se percebermos bem na figura, notamos que, para cima, o Y ficará positivo e para baixo o Y ficará negativo.
A mesma coisa ocorre semelhantemente para a coordenada Y.
Para a esquerda, ficará o X negativo e para direita ficará positivo.
Para sistema de direções, como mostra a figura abaixo, mostra o movimento em graus.
[[image: SCRATCHcoord3.png|center]]
É através das direções que vamos girar o nosso objeto dentro do palco.  Guarde bem estes duas ultimas figuras que mostram tanto o sistema de coordenadas como o sistema de direções.
Iremos  perceber para o que elas realmente servem na prática.
==PROGRAMAÇÃO==
O programa '''Scratch''' é a sequência lógica de instruções, que são carregadas para cá, numa ordem determinada.
Como o scratch é [https://pt.wikipedia.org/wiki/Programa%C3%A7%C3%A3o_orientada_a_eventos orientado a Eventos], o programa deve iniciar com alguma '''AÇÃO''', ou EVENTO.
Um exemplo é o EVENTO "Quando [[image: SCRATCHbandeira.png]] for clicado":
[[image: SCRATCHcodigo1.png|center]]
Esta instrução vai funcionar para iniciar a execução do programa.
Porém, quando você clicar na bandeira verde (BOTÃO '''"Ir"'''), aparentemente nada acontecerá, uma vez que não há outra instrução.
Então, vamos adicionar algum movimento ao ator, o Gato laranja, de forma que possamos visualizar a execução do código.
[[image: SCRATCHcodigo2.png|center]]
Note que, ao acrescentarmos a instrução de MOVIMENTO "Mova 10 passos", o gatinho se deslocou levemente pra direita. Isso acontece porque o cenário de execução dos programas é configurado para iniciar os atores no centro e ter, mais ou menos, 200 passos para trás, e 200 passos para a frente.
Então, um movimento de apenas 10 passos causa um deslocamento bem pequeno.
Teste alterar esse valor para 100 passos, ou -50, por exemplo!!!!!
Agora, provavelmente, você está se questionando se esse movimento tem que ser assim, tão artificial. Afinal, o gatinho se move uma certa distância como se estivesse sendo "arrastado", sem mover seu corpo também, né?
Por isto, vamos agora investigar as '''Fantasias''', que é como o Scratch chama as diferentes figuras (com diferentes movimentos de corpo, roupa, acessórios, etc) relacionadas ao mesmo ator.
Clique na Aba '''"Fantasias"'''.
Este gatinho já tem outra fantasia disponível.
[[image: SCRATCHcodigo3.png|center]]
Vamos usá-la no nosso programa, através da instrução de APARÊNCIA '''"próxima fantasia"'''.
Nosso gatinho vai mover-se 20 passos, trocar de fantasia, e mover-se novamente, mais 20 passos, para que a sua caminhada fique mais natural. Entre estas instruções, vamos inserir também a instrução de CONTROLE "espere 1 segundo", pelo simples fato de que, se esta não for inserida, as outras instruções vão ser executadas tão rápido, que você não vai perceber!!!
[[image: SCRATCHcodigo4.png|center]]
Por fim, vamos tornar este programa mais interessante, repetindo esta sequência de passos mais vezes, de forma que não seja executada uma única vez, e fim.
Para isto, vamos utilizar a instrução de CONTROLE "repita 10 vezes", inserir todo  o bloco das outras instruções dentro deste, e executar novamente nosso programa.
[[image: SCRATCHcodigo5.png|center]]
Agora sim!!!! Nossa animação está muito mais interessante e natural!!! O gatinho se deslocou ao longo de toda a tela, trocando de avatar e parecendo estar caminhando, de verdade.
[[image: PMCsmile.png]]
===Iniciando a execução com outras instruções===
Para iniciar a execução de um programa, além de usar a bandeira verde (Botão Ir), é
possível determinar uma tecla do teclado que funcione como
disparadora do ''script''.
Desta forma, quando a tecla for pressionada,
o ''script'' inicia sua execução.
Para determinar que o início da execução será determinado por
uma tecla, você precisa arrastar para o início de um programa o controle:
[[image: SCRATCHquandoatecla.png|center]]
escolher a tecla do teclado que vai disparar a execução, usando a flechinha do bloco, e pronto!
=Exercício=
# Altere o tempo de espera do bloco de instruções do exemplo acima. O que acontece?
# Altere o número de vezes que o bloco de instruções é repetido. O que acontece?
# Teste a instrução de SOM "toque o som Meow até o fim" no seu programa.
# Altere seu código para iniciar toda vez que a tecla da letra "a" for digitada.
# Investigue outras instruções de MOVIMENTO e de aparência.


-------------------------------------
-------------------------------------
Linha 441: Linha 79:
{| border="1" cellpadding="5" cellspacing="0"  
{| border="1" cellpadding="5" cellspacing="0"  
! style="background: #cdc5bf;" | [[PROEXT3 | << Página do Projeto Meninas Cientistas]]  
! style="background: #cdc5bf;" | [[PROEXT3 | << Página do Projeto Meninas Cientistas]]  
! style="background: #cdc5bf;" | AULA 1 - INTRODUÇÃO AO SCRATCH
! style="background: #cdc5bf;" | INTRODUÇÃO AO SCRATCH
! style="background: #cdc5bf;" | [[Efeitos Sonoros | AULA 2 - Efeitos Sonoros>> ]]
! style="background: #cdc5bf;" | [[O_ambiente | AULA 1 - O Ambiente do Scratch>> ]]
|}
|}

Edição das 16h25min de 3 de maio de 2022

Horário dos Encontros

Horário Segunda Terça Quarta Quinta Sexta
14:00 - 14:55 ATENDIMENTO Scratch
14:55 - 15:50 ATENDIMENTO Scratch
- I n t e r v a l o I n t e r v a l o I n t e r v a l o I n t e r v a l o I n t e r v a l o
16:10 - 17:05 ATENDIMENTO Scratch
17:05 - 18:00 ATENDIMENTO Scratch


Aulas

AULA 1 - O ambiente (4h)
AULA 2 - Efeitos sonoros (4h)
AULA 3 - Alterando o aspecto do ator(4h)
AULA 4 - [[]](4h)
AULA 5 - [[]](4h)
AULA 6 - [[]] (4h)
AULA 7 - [[]](4h)
AULA 8 - [[]](4h)
AULA 9 - [[]] Aula 1 (4/8h)
AULA 10 - [[]] Aula 2 (8/8h)


Referências

As seguintes apostilas e links foram utilizados como referência, na produção deste material e estão disponíveis para consulta:

Apostila de Introdução à JavaScript - Adriano Lima


<< Página do Projeto Meninas Cientistas INTRODUÇÃO AO SCRATCH AULA 1 - O Ambiente do Scratch>>
Disponível em “https://wiki.ifsc.edu.br/index.php?title=Introdução_ao_Scratch&oldid=21017”