INICIAO A PROGRAMAO

SRIE

EMPREGABILIDADE

A iniciativa da criao deste mdulo

complementar surgiu da necessidade do
mercado de trabalho de preparar pessoas para a rea da programao. A formao de programadores uma grande
demanda da nossa sociedade, mas os
candidatos enfrentam dificuldades em
conceitos bsicos, principalmente no que
diz respeito lgica de programao.
Buscando auxiliar na preparao inicial dos futuros programadores, a Pensamento Digital desenvolveu este mdulo para auxiliar na aprendizagem dos
conceitos bsicos necessrios para o trabalho com programao, buscando propiciar momentos de criao, criatividade
e autoria, utilizando diferentes softwares
e recursos disponveis na internet .
O software utilizado para trabalhar
com a lgica de programao o
Scratch, desenvolvido pelo Media Lab
do MIT (Instituto de Tecnologia de
Massachusetts) nos Estados Unidos a
partir da linguagem de programao
Squeak. Este software gratuito, tem
uma interface amigvel e permite criaes por pessoas com poucos conhecimentos em programao, pois os comandos podem ser selecionados a partir de pequenos blocos e agrupados.
Maiores informaes e download no
site: <http://scratch.mit.edu/>.
O objetivo deste material auxiliar
na organizao e preparao deste mdulo. As idias so norteadoras, sendo
que o planejamento das aulas deve ser
desenvolvido para o pblico a ser atendido, ou seja, no ser apresentado aqui
um planejamento de aulas, apenas dicas e objetivos para o curso.

FORMAO INICIAL
importante lembrar que este mdulo oferece apenas uma formao inicial, sendo que, aps este curso, se os
aprendizes tiverem interesse profissional pela rea da programao, devero
buscar cursos avanados e profissionalizantes.

OBJETIVO GERAL
O curso tem por objetivo preparar o
aprendiz para criar pginas e objetos animados, utilizando linguagem HTML e
conceitos de programao, de lgica e
de matemtica, levando em conta o desenvolvimento do raciocnio lgico, aprimorando a criatividade e autonomia pela busca de informaes.

OBJETIVOS ESPECFICOS
Oferecer uma preparao bsica
para que os aprendizes possam
desenvolver produes em HTML e
Scratch.
Apresentar softwares e recursos
disponveis e atuais para o trabalho
com programao HTML.
Mostrar o Scratch como um
recurso interativo, ldico e fcil para o
desenvolvimento de objetos
animados, histrias, jogos e outras
animaes.
Possibilitar atividades prticas para
o desenvolvimento de sites e histrias
animadas, buscando utilizar sites e
ambientes para a disponibilizao
dessas produes, permitindo
interaes e trocas de experincias
com outros estudantes e profissionais
de programao.

PBLICO-ALVO
Este mdulo foi desenvolvido para oferecer uma preparao inicial s pessoas
que desejam se aprofundar no conhecimento da rea de programao. Assim, a
sugesto oferecer este curso para jovens acima de 14 anos e para adultos que
buscam novas possibilidades profissionais.

PR-REQUISITOS
Ter noes bsicas de informtica (sistemas operacionais, organizao de pastas e
diretrios de arquivos, editores de texto e
internet pesquisa, navegao, e-mail).
Para melhor aproveitamento do curso, sugere-se que os aprendizes estejam pelo menos finalizando o Ensino
Fundamental. Por questes de limitao de vagas e pelas exigncias do mercado de trabalho, o grau de escolaridade solicitado pode ser maior.

ESTRUTURA E FORMATO
O curso presencial, sendo que para
a certificao necessrio atingir os
objetivos e ter freqncia de 75% .
A carga horria de cem (100) horas. A instituio deve organizar as aulas
da forma mais adequada a sua realidade, contudo apresentamos duas sugestes de distribuio da carga horria:
Duas aulas por semana com carga
horria de 3 h/aula, tendo 32 aulas e
mais 4h de atividades
complementares: passeios, palestras,
vdeos, atividades distncia.
Duas aulas por semana com carga
horria de 4 h/aula, tendo 25 aulas.
Durante essa carga horria, atividades
complementares podem ser planejadas.

CONTEDO DO MDULO
O contedo est sendo apresentado como uma lista de conceitos e assuntos a serem estudados. Isso no determina uma
ordem rgida de abordagem e no impede que outros assuntos,
alm desses, sejam trabalhados. Esses contedos so apenas
uma sugesto, pois eles foram trabalhados na turma piloto desenvolvida pela Pensamento Digital e acreditamos que so adequados para a preparao inicial em programao.
No caso da experincia com a turma piloto, notou-se um
grande interesse dos cursistas pelo Scratch. Por este motivo,
foi feita a opo de trabalhar inicialmente com Scratch e suas
possibilidades e depois com o HTML.
HTML (PGINAS, SITES)
Informaes bsicas

SCRATCH
Compreenso sobre a criao de movimento
Eixo cartesiano
ngulo e direo
Como utilizar os comandos
Lgica
Operadores matemticos
Condies (if, else) e outras
Controles
Como utilizar os comandos
Variveis
O que so e como funcionam

Padro W3C

Quais esto pr-definidas

Tags HTML

Como criar variveis

Conhecimento do software a ser usado (Aptana, Nvu,

Mozilla Composer, etc)
Cdigo bsico

PROJETO
Criar pgina para internet (site), utilizando recursos
HTML e usando criaes do Scratch

Funo de cada Tag

Formatao de texto e ttulos
Formatao de pargrafos

Utilizao de upload

Linhas horizontais

Pesquisa por servios de hospedagem de site

Cdigo RGB
Significado
Determinao e cdigo das cores
Forma de utilizao no HTML (cores de fundo e de fonte)
Imagens
Tags de insero e formatao de imagens
Imagens de fundo
Listas
Tags para criao de listas
Listas ordenadas
Listas no ordenadas
Listas ordenadas com caracteres especiais
Links
Tags para criao e formatao de links
Links para arquivos
Links para sites externos
Tabelas
Tags para linha e coluna
Formatao de clulas
Insero de imagens

PUBLICAO

INFORMAES ADICIONAIS
A Pensamento Digital desenvolveu materiais a partir da
experincia da turma piloto do mdulo de Iniciao a Programao. So materiais que fornecem informaes para os
educadores que ministraram as aulas do curso. Os temas
abordados so:
Pginas web e cdigo HTML
Animaes
Desafios com Scratch, para incentivar e ajudar nas
primeiras criaes usando este software
Todos estes materiais esto disponveis no endereo:
http://oficinas.pensamentodigital.org.br ou acessando o
site http://www.pensamentodigital.org.br
Para conhecer melhor o Scratch, visite o site <http://scratch.
mit.edu/> que congrega a comunidade de usurios de diversas partes do mundo. Ali so compartilhados projetos e
tutoriais.Tambm possvel interagir em fruns temticos.
Uma sugesto para as aulas do curso a utilizao de vdeos
que apresentem informaes sobre mercado de trabalho, exigncias da formao profissional, entrevista de emprego e outros
assuntos relacionados. Muitos desses vdeos podem ser encontrados no YouTube (http://br. youtube.com/).

LINGUAGEM BSICA
Antes de comear a trabalhar HTML, necessrio que se
conhea os termos bsicos que envolvem esta linguagem.
INTERNET um conjunto de redes de computadores. Podemos dizer que a internet como uma cidade eletrnica com
bibliotecas virtuais, lojas virtuais, escritrios virtuais, galerias de
arte virtuais, etc. A internet oferece um grupo de servios para
usurios, como correio eletrnico, a World Wide Web, FTP,
Gopher, IRC, grupos de notcias usenet, telnet e outros.
Normalmente quando abrimos uma pgina na internet usamos o www. Esta a sigla de World Wide Web que significa
Rede Mundial (a grande rede de computadores interligados
no mundo todo). Web o diminutivo para World Wide Web.
PROTOCOLO um conjunto de regras estabelecidas com
o objetivo de permitir a comunicao entre computadores.
um mtodo de acesso a um documento ou servio atravs
da internet. So os chamados TCP/IP (Transmission Control
Protocol ou Internet Protocol). Em portugus: Protocolo de
Controle de Transmisso ou Protocolo Internet. O TCP/IP
est disponvel para qualquer tipo de CPU e sistema
operacional. Existem dois tipos principais:
Protocolo HTTP (HyperText Transfer Protocol ou, em
portugus, Protocolo de Transferncia de Hipertexto)
um protocolo da internet utilizado pelos computadores
ligados web para comunicar-se entre si. Ele tem como
funo ativar os navegadores da web para recuperarem
informaes de servidores da web.
Protocolo FTP (File Transfer Protocol ou, em
portugus, Protocolo de Trasferncia de Arquivo) um
protocolo que possibilita a transferncia de arquivos de
um local para outro pela Internet.
HIPERTEXTO qualquer informao de texto em um
computador que contenha saltos para outras informaes, o
que usualmente chamamos de link. Os documentos visualizados atravs dos browsers so escritos em hipertextos, utilizando-se uma linguagem especial chamada HTML
(HyperText Markup Language).

BROWSERS so programas que lem e interpretam arquivos HTML enviados pela web, tambm formata-os em
pginas da web e os exibe ao usurio. Navegadores da web
podem executar som ou arquivos de vdeo incorporados
em documentos da web, se o usurio dispuser do hardware necessrio. Existem vrios tipos de browsers, os mais
usados so o Internet Explorer, o Firefox e o Opera, entre
muitos outros.
URL (Uniform Resource Locator ou, em portugus, Localizador de Recursos Uniforme) uma seqncia de caracteres
que fornece o endereo de um site da web ou um recurso
da World Wide Web, juntamente com o protocolo (como
FTP ou HTTP) atravs do qual o site ou o recurso acessado.
ENDEREO o caminho at um objeto, documento, arquivo, pgina ou outro destino.
Para entender o URL e o endereo colocamos a explicao a partir do site http://www.pensamentodigital.org.br/.
http:// = Protocolo, utilizado pelos computadores
ligados web para comunicar-se entre si.
www.pensamentodigital.org.br = Nome do
domnio. Domnio so as categorias de endereos da
internet que representam pases ou tipos de organizao.
www = Sigla de World Wide Web que significa rede
mundial.
pensamentodigital = Nome especfico, que pode
conter uma ou mais palavras, separadas ou no por hfens
(ex.: pensamento-digital).
org = Tipo de domnio, que indica a natureza do site.
No caso, como trata-se de um site de uma fundao
usa-se .org, organizaes sem fins lucrativos. Outros
exemplos: .gov (governo) e .com (endereos comerciais).
br = Sigla do pas, composta de duas letras, significa
que a pgina est situada em um computador no Brasil.
Pginas que no possuem terminao indicando o pas
de origem esto situadas nos Estados Unidos. Outros
exemplos: .pt (Portugal) e .jp (Japo).

HOME PAGE um conjunto de pginas, documentos

diponveis na web, interligados entre si (atravs de links).
SITE uma palavra em ingls que significa local, lugar. Na
internet, designa um conjunto de pginas que representa
uma pessoa, instituio ou empresa na rede.

INTRODUO AO HTML
HTML significa HyperText Markup Language ou Linguagem
de Formatao de Hipertexto. a linguagem usada para criar
pginas na web, que estabelece como um determinado elemento deve ser visualizado. A linguagem de formatao de
exibio de textos funciona atravs de comandos conhecidos como tags.
O documento HTML pode ser escrito em qualquer editor
de texto, como texto puro, sem formatao ou caracteres de
controle. Pode-se usar, portanto, o Notepad do Windows ou o
Kedit do Linux. Hoje existem vrios programas que so prprios para a programao em HTML, como Mozilla Composer,
Front Page, Aptana, Notepad++, entre outros.

TAGS
Tags so os comandos que so sempre em ingls e ficam
entre <>. O padro correto escrever os comandos com
letras minsculas.
Podemos dizer que existem 3 tipos de tags:
Tag de abertura de comando: usada quando
comeamos um comando. Exemplo: <html>
Tag de fechamento de comando: usada quando
finalizamos o comando. Exemplo: </html>
Tag solteira:estes so comandos especficos.Exemplo:<br/>
Muitas tags possuem o que chamamos de atributos. Os
atributos so complementos dos comandos, seriam funes
a mais que os comandos possuem.

ESTRUTURA BSICA
A estrutura bsica de um documento HTML a seguinte:
<html> => Incio do documento
<head> => Incio do cabealho do documento

REGRAS DO HTML
Quando se fala em regras no HTML, os iniciantes acreditam
que o tema abordado a seqncia lgica. Claro que isto
tambm, mas alm desta seqncia, as regras tratam das estruturas das pginas.
Para a fiscalizao do sistema foi fundada uma instituio
norteadora, a W3C, que um consrcio de empresas que criaram o padro HTML. No site http://www.w3.org possvel verificar se um site est dentro do padro. Este site est em ingls,
mas existe uma verso em portugus em http://www.w3c.br/

PARTES BSICAS DO HTML

CABEALHO DA PGINA (<head>...</head>)

Contm o cabealho do documento, ou seja as informaes que no fazem parte do corpo da pgina e, portanto, no
sero exibidas diretamente no site, mas, por exemplo, ser o
ttulo exibido na barra de ttulos do navegador.
Exemplo: <head>...informaes importantes sobre o documento...</head>
TTULO (<title>...</title>)

Contm o ttulo do documento. Exibe o ttulo como nome

da janela em que a pgina visualizada. O ttulo obrigatrio.
No confunda o ttulo da pgina com o nome do arquivo
gravado em disco.
Exemplo: <title>Escola de Fbrica</title>
SCRIPT (<script>...</script>)

utilizado para insero de cdigo script, como Java Script,

VB Script, etc, dentro do documento HTML.
Exemplo: <script>...cdigo em linguagem script conhecida pelo browser...</script>

<title> => Incio do ttulo do documento

Aqui entra o ttulo do documento
</title> => Fim do ttulo do documento
</head> => Fim do cabealho do documento

META (<meta>)

Define valores especiais. Os valores so definidos como

pares name/value, ou seja nome/valor.
Atributos de Meta

<body> => Incio do contedo do documento

Aqui entra todo o contedo que ser exposto pelo
browser

Name: Especifica um nome ao qual um determinado valor

ser associado. O navegador precisa entender esse nome para
que a tag tenha utilidade.

</body> => Fim do contedo do documento

</html> => Fim do documento
Se observarmos a estrutura acima, podemos dizer que a
pgina divide-se entre cabealho, que fica entre as tags
<head> e </head> e corpo, que fica entre <body> e </body>.
Tudo que vai aparecer na pgina deve estar em corpo.

Exemplo: <meta name="keywords" content =

INFORMTICA, EDUCAO, APRENDIZADO">
Content: Especifica o valor associado a um Name.
Exemplo: <meta name="keywords" content=
"INFORMTICA, EDUCAO, APRENDIZADO">

PARTES BSICAS DO HTML

obrigatria a presena do atributo Name ou do atributo
HTTP-EQUIV. <meta http-equiv="Content-Type" content=
"text/html; charset=iso-8859-1">
O tag meta utilizado, tambm, para especificar palavras
chaves que sero catalogadas por Ferramentas de Busca.

NEGRITO, ITLICO E SUBLINHADO

NEGRITO (Bold <b>...</b>) OU STRONG

(<strong>...</strong>)
Indica que o texto deve ser apresentado em negrito.
Exemplo: <b>Pensamento Digital</b>

CORPO DO TEXTO (<body>...</body>)

Este o corpo da pgina, a prpria pgina.Todo o contedo do site estar entre <body> e </body>.
Atributos de Body

Visualizao: Pensamento Digital

ITLICO (<i>...</i> ) ou EM (<em>...</em>)

Indica que o texto deve ser apresentado em itlico.

Bgcolor: Define a cor de fundo da pgina

Exemplo: <i>Pensamento Digital</i>

Exemplo: <body bgcolor="white">

Visualizao: Pensamento Digital

Background: Define uma imagem que ser utilizada como

fundo da pgina. Caso a imagem tenha um tamanho inferior
ao da pgina, ela ser repetida diversas vezes de forma a
cobrir o fundo do documento
Exemplo: <body background="images/fundo.png">
...diversas tags, textos etc...</body>
TTULOS E SUBTTULOS (<hX>...</hX>)

Indicam um ttulo ou subttulo que chamamos de header

(cabealho). Os cabealhos tm seis nveis de importncia,
sendo o "1" o mais importante e o "6", o menos. Os nveis de
cabealho so equivalentes aos tamanhos da fonte h1 = 24 pt
/ h2 = 18 pt / h3 = 14 pt / h4 =12 pt / h5 = 10 pt / h6 = 8 pt.
Visualizao:

<h1>Ttulo 1</h1>
<h2>Ttulo 2</h2>
<h3> Ttulo 3</h3>
<h4> Ttulo 4</h4>
<h5>Ttulo 5</h5>
<h6> Ttulo 6</h6>

Atributos de hX
Align: Indica o alinhado a esquerda (padro), centralizado
ou direita, usando-se as palavras left, center e right.
Exemplo e visualizao:
<h5 align="left">Pensamento Digital</h5>
Pensamento Digital
<h5 align="center">Pensamento Digital</h5>
Pensamento Digital
<h5 align="right">Pensamento Digital</h5>
Pensamento Digital

SUBLINHADO (<u>...</u>)

Indica que o texto deve ser apresentado sublinhado.

Exemplo: <u>Pensamento Digital</u>
Visualizao: Pensamento Digital
PARGRAFOS (<p>...</p>)

Indica que o texto que esta entre as tags um pargrafo e

possui um alinhamento prprio. Os navegadores deixam uma
quebra de linha antes de cada pargrafo.
Exemplo: <p>O projeto Escola de Fbrica oferece a oportunidade de formao profissional inicial e continuada a jovens de baixa renda.</p>
Atributos de P
Align: Indica o alinhamento do pargrafo a esquerda (padro), centralizado, direita ou justificado, usando-se respectivamente as palavras left, center, right e justify.
Exemplo: <p align="center">Este o site da Pensamento
Digital. </p>
Visualizao:
Este o site da Pensamento Digital.
QUEBRA DE LINHA (<br/>)

Passa para a prxima linha

Exemplo: <p>A Pensamento Digital trabalha com incluso digital.<br/> A Pensamento Digital atua no Rio Grande do
Sul e em So Paulo.</p>
Visualizao:
A Pensamento Digital trabalha com incluso digital.
A Pensamento Digital atua no Rio Grande do Sul e em So
Paulo.

PARTES BSICAS DO HTML

FONTES (<font>...</font>)

Existem 7 tamanhos de fonte em HTML, numeradas de 1 a

7. O tamanho padro 3 que equivalente a 12 pt.
Exemplo: <font>Texto</font>
Atributos de Fonte
Size: Indica qual o tamanho de fonte que deve ser usado
dentro de sua rea de influncia.
Exemplo e visualizao: <font size="3">Pensamento Digital</font>

Pensamento Digital
Color: Indica qual a cor da fonte dentro de sua rea de
influncia.
Exemplo e visualizao:
<font color= "#000000">Pensamento Digital</font>
<font color="black">Pensamento Digital</font>

Pensamento Digital
Face: Determina a fonte (tipo de letra) a ser utilizada. Deve
ter um nome entre aspas ou uma lista de nomes de fontes
separados por vrgula e entre aspas. O navegador procurar
estas fontes em ordem.

Para outros sites

Deve-se usar a URL completa da pgina destino.

Exemplo:
<a href="http://www.google.com.br">Link para site externo</a>
Visualizao:
Link para site externo
LINK ESPECIAL: "MAILTO"

Existe um tipo de link que chamamos de "mailto:". Se o

protocolo utilizado for "mailto:", ao invs de "http://", o link
abrir uma janela especial para que se possa enviar um e-mail
(correio eletrnico) para o endereo especfico.
Exemplo:
Mande um<a href="mailto:contato@pensamentodigital.
org.br" >e-mail</a>para a Pensamento Digital.
Visualizao:
Mande um e-mail para a Pensamento Digital.
IMAGENS (<img>)

Esta tag insere uma imagem na pgina.

Exemplo e visualizao:
<font face="Verdana, Arial, Helvetica">Pensamento
Digital</font>

Pensamento Digital
LINK (<a>...</a>)

Indica a regio a ser tratada como hyperlink

Exemplo: <a href="http://www.pensamentodigital. org.
br">Fundao Pensamento Digital</a>
Visualizao: Fundao Pensamento Digital
Atributos de A

HREF: Define que sua rea de influncia um link.

Exemplo e visualizao: <p> Clique <a href="http://
www.pensamentodigital.org.br">aqui</a> para acessar a
pgina da Fundao Pensamento Digital.</p>
Clique aqui para acessar a pgina da Fundao Pensamento Digital.
Veja algumas formas de especificar um link:

Atributos de IMG

SRC: Indica a URL da imagem a ser exibida. Podem ser

usados dois tipos:
URL absoluto (http://www.pensamentodigital.org.br/
images/log.png)
URL relativo (/images/logo.png). Esta tag obrigatria.
Exemplo: <img src="/images/logo.png">
ALT: Indica um texto associado imagem.Quando a imagem
no for exibida, o texto ser exibido em seu lugar. O texto tambm ser exibido quando o cursor ficar parado sobre a imagem.
Exemplo: <img src="/images/logo.png" alt="Logotipo da
Fundao Pensamento Digital">
Align: Determina o alinhamento da imagem em relao
ao texto existente na mesma linha. Os valores vlidos so
"TOP", "MIDDLE", "BOTTOM", "LEFT" e "RIGHT".
Exemplo: <img src="/images/logo.png" align="top">
Width: Determina a largura, em pixels, da imagem.
Exemplo: <img src="/images/logo.png " width="100">

Para outras pginas de um mesmo site

Height: Determina a altura da borda da imagem.

O local precisa ter um nome. Este nome definido da seguinte forma: <a href="#nome.html">Link</a>

Exemplo: <img src="/images/logo.png " height="100">

Border: Determina a largura da borda da imagem.
Exemplo: <img src="/images/logo.png " border="2">

APRESENTAO DO SCRATCH
Scratch uma nova linguagem de programao que permite a criao de histrias, animaes, jogos e outras produes. Tudo pode ser feito a partir de comandos prontos que
devem ser agrupados.

Para fazer download do Scratch, entre no site http://

scratch.mit.edu/download e aps preencher um formulrio ser
possvel escolher a verso para download. Ele gratuito. Abaixo
veja a tela principal do Scratch traduzida para o portugus:

1 Botes de iniciar e parar o script

5 rea de edio e conexo de scripts

2 Botes para editar o objeto selecionado no palco

6 Abas com opes para a rea de script, para traje e

para sons

3 Palco onde os objetos so colocados e onde

possvel ver o resultado da programao criada. O objeto
inicial que aparece no palco o gato

7 Blocos de comandos
8 Categorias de comandos

4 rea dos objetos usados na animao. O objeto em

edio fica selecionado

MOVIMENTO
Veja agora como fazer um objeto se movimentar.
Clique na categoria Movimento dos blocos de scripts.

Selecione o bloco Mova e arraste para a rea de edio de

scripts.

O clique duplo sobre o bloco faz o movimento acontecer.

ENTENDENDO O SCRATCH
SOM
Para colocar som no script, voc pode usar o comando
Toque o tambor. Ele fica disponvel na categoria som. Voc
pode usar este bloco de comando sozinho ou agrupado com
outros comandos.

USO DO CONTROLE SEMPRE

possvel programar no Scratch que uma ou mais aes
continuem acontecendo e se repetindo por tempo indeterminado. Para isso se usa o comando Sempre, disponvel na
categoria Controle.

Clique e arraste o bloco Sempre para a rea de edio de

scripts. Encaixe os comandos dentro do bloco Sempre.
Clique e arraste o bloco para a rea de edio de scripts. Se
for o caso, encaixe este bloco com os j existentes no script.
Para ver o funcionamento, d um duplo clique sobre o
grupo de blocos.

Para escolher o som desejado, clique na seta destacada e

escolha entre as opes do menu.

Para arrastar um conjunto de blocos, clique sobre o primeiro bloco (no topo do conjunto) e arraste tudo.
Para parar a programao, aps usar o comando Sempre,
clique no boto vermelho que significa Parar Tudo.

BANDEIRA VERDE INICIAR O SCRIPT

Se voc desejar importar um arquivo de msica (MP3 ou

WAV) do seu computador ou desejar gravar um som, clique
na aba Som e escolha entre Gravar e Importar.

O Scratch tambm possui controles para o incio da execuo dos scripts. Um exemplo a bandeira verde que fica sobre
a tela de visualizao das programaes. Ela pode ser usada
para iniciar o funcionamento de um script. Para isso necessrio que seja colocado no script o bloco de controle que indica:

Para usar o som escolhido na sua programao, escolha o

bloco Toque o som e encaixe no seu script.

Lembre-se: se o som no funcionar, verifique se este recurso funciona no seu computador (se o som est ligado e se
existem caixas de som funcionando).

Clique no bloco e arraste para a rea de edio de scripts.

Encaixe o bloco sobre o conjunto j existente, se for o caso.
Este controle deve ser o primeiro em um grupo de blocos,
pois ele que determina o incio desta execuo.

Para testar, clique sobre a bandeira verde que significa Iniciar

Scripts.

ENTENDENDO O SCRATCH
USANDO TECLAS
Para iniciar um script, alm de usar a bandeira verde,
possvel determinar uma tecla do teclado que funcione como
disparadora do script. Desta forma, quando a tecla for pressionada, o script inicia sua execuo.
Para determinar que o incio da execuo ser determinado por
uma tecla, voc precisa coloc-la no incio de um script o controle.

Para criar ou inserir um novo objeto voc deve clicar em

uma das seguintes opes:
Desenhar um objeto (abre um editor que permite pintar e desenhar um objeto).
Inserir objeto do arquivo (permite inserir um
arquivo de imagem do computador).
Inserir objeto surpresa (clicando neste boto,
surge um objeto surpresa no palco, ou seja, a
pessoa no determina o objeto que surgir).

FALAR ALGO
No Scratch possvel fazer um objeto falar. Para isto,basta usar
o bloco de comando Diga. Nele voc pode determinar o que
ser dito e o tempo que essa mensagem ficar aparecendo.
Coloque esse bloco no script
do objeto que dever falar.

Arraste o bloco para a rea de edio de script e encaixe

no incio de um conjunto de blocos. Aperte a tecla determinada para fazer o teste.
Para determinar qual tecla ser usada para iniciar o script,
clique na seta destacada e escolha a opo desejada.

FAZER ANIMAO

Voc pode usar um controle inicial de script diferente para

cada conjunto de blocos. assim que se faz para determinar
movimentos diferentes de um objeto de acordo com o clique
nas setas de direo do teclado.

Para fazer uma animao no Scratch bastante simples. O

efeito o mesmo de uma imagem gif, onde aparecem diferentes posies de um personagem e a troca das imagens
das posies produz a idia de animao.
Escolha o objeto que ser animado e clique em Trajes.
Voc pode criar as diferentes posies do objeto desenhando o novo a partir do inicial (fazer uma cpia do original e
editar) ou importar as posies.

OBJETO NOVO
Quando o Scratch aberto, no palco j est aparecendo o
gato. Mas nem sempre se deseja us-lo e ento possvel
inserir ou criar um novo objeto. Da mesma forma, possvel
ter vrios objetos em uma programao.
Veja abaixo como aparece um novo objeto no palco:

Depois faa o script do objeto que ser animado. Use o

bloco Sempre e dentro dele o bloco prximo traje. Este bloco
faz o objeto alternar entre seus trajes j criados.

importante colocar um tempo aps a troca de traje para que

seja possvel visualizar a troca, ou isso acontecer muito rpido.

ENTENDENDO O SCRATCH
TOCAR NA BORDA E VOLTAR
Quando voc faz algumas programaes no Scratch, importante que o objeto ao tocar na borda do palco volte. Um exemplo
disso pode ser uma bola que rola, bate na borda e volta. Primeiro,
puxe o bloco Mova para a rea de edio de scripts.

Pegue o bloco Sempre e coloque na rea de edio de

scripts.

Encaixe o Mova dentro do Sempre.

USO DE TESTES: SE (IF)

Para muitas programaes, jogos e histrias importante
usar testes. Podemos fazer uma bola bater em um objeto e
quando ela bater, voltar. Mas como ela vai saber que bateu?
Como determinar o que acontece quando ela bate. Veja:

Voc tambm pode determinar que o script inicie quando

a bandeira verde for pressionada.
A bola cai, bate na cabea do gato e volta para cima. Quando bate na borda superior ela volta e bate novamente no
gato. Inicialmente mude a direo do objeto bola para 180
(para ela ir para baixo).

O script da bola iniciado quando a bola clicada com o

mouse. Ela sempre ir se mover e, se tocar na borda (qualquer
borda do palco), ela volta na direo contrria. Puxe o teste se
na categoria controle e coloque na rea de edio de scripts.

Pegue o bloco se tocar na borda, volte na categoria Movimento e coloque dentro do Sempre.
Se voc quiser que a bola comece a andar quando for
pressionada pelo mouse (clicada), use o controle abaixo:

Dentro do se coloque o sensor tocando em que fica na

categoria Sensores.

Escolha no menu o nome do objeto que ser tocado (no

caso, o gato).

10

ENTENDENDO O SCRATCH
Dentro do bloco se, coloque o que acontece quando a
bola tocar o gato, ou seja, acrescente o bloco aponte para a
direo. Isto significa que quando a bola tocar no gato, ela ir
mudar sua direo para aquela determinada no script.

Acrescente na rea de edio de scripts o bloco se, seno

que fica na categoria Controle.

Coloque no espao do se o sensor tocando na cor .

Escolha a direo (0) cima pois aps bater no gato a bola
deve subir.

Acrescente o bloco Sempre para que o teste seja feito o

tempo todo, e coloque o teste dentro do Sempre.

Clique no quadrado da cor e escolha a cor da goleira.

Agora a cor no teste est correta.

Acrescente o controle para o incio da execuo do script.
Neste caso foi usado o quando bandeira for clicada.
Veja que foram feitos dois scripts separados: um para o
movimento da bola e outro para o teste. Tambm possvel
fazer tudo junto, usando apenas um controle de incio do
script e apenas um bloco Sempre. Experimente modificar este
script e gerar novas verses.

Voc pode colocar dentro do seno o comando Mova para que

a bola ande caso no toque no gol. Mas se deixar o seno vazio,
apenas no acontecer nada quando a bola no tocar no gol.

USO DE TESTES: SE, SENO (IF, ELSE)

Agora vamos usar o teste completo: se, seno. O desafio
fazer uma bola ir na direo do gol e, se bater nele, dizer
Gol! Inicialmente faa o desenho da goleira e escolha ou
desenhe a bola para ficar mais ou menos assim:

Inicialmente, mude a direo da bola para 0, para ela ir na

direo da goleira.

Dentro do bloco se coloque a ao que deve ocorrer quando a bola tocar o gol, ou seja, coloque o bloco diga Gol! por 2
segundos.

Voc pode editar o texto do bloco Diga clicando e apagando o texto original.

11

ENTENDENDO O SCRATCH
Coloque o teste (se, seno) dentro de um bloco Sempre
para que este teste seja feito o tempo todo. Depois coloque
um controle que determine o incio do script. No caso foi
pedido que a bola ande quando for clicada com o mouse,
mas outros controles podem ser usados.

COMPARTILHAR
No Scratch, aps fazer seu projeto, possvel compartilhlo com outros publicando-o no site do Scratch. Para isso, basta clicar no boto Compartilhar na parte superior da tela do
Scratch.
Mas ateno: para compartilhar seu projeto no site do
Scratch voc precisa ter feito seu cadastro. Se ainda no fez,
entre em http://scratch.mit.edu e faa seu cadastro. gratuito e fcil de fazer.

Experimente fazer um jogo em que a bola ande e vire

conforme algumas teclas do teclado so pressionadas.

FONTES
http://oficinas.pensamentodigital. org.br http://pt.wikipedia.org

REFERNCIAS PARA HTML

LOUREIRO, Gustavo. Curso Superior de Formao Especfica em Gesto de Ambientes Internet Webmaster/Webdesigner
[manual].[Capturado em 2008 jun 20]. Disponvel em: http://www.apostilando.com/download.php?cod=2586&categoria=HTML

PRODUO: FUNDAO PENSAMENTO DIGITAL

Av. Ipiranga, 6681, Prdio 94, Sala 13 Tecnopuc Bairro Partenon Porto Alegre RS CEP 90619-900
Fone: 51 3433.5151 / 3433.5150 www.pensamentodigital.org.br
Presidente: La Fagundes (lea@pensamentodigital.org.br)
Superintendente executiva: Marta Voelcker (marta@pensamentodigital.org.br)
O USO DAS TICS PARA PROMOVER A EMPREGABILIDADE

Com o objetivo de desenvolver Mdulos Complementares (ao Mdulo Tecnologias para a Vida voltado para a incluso
digital e para o desenvolvimento da identidade) direcionados para a insero de jovens no mercado de trabalho, a
Pensamento Digital inscreveu um projeto no Rede de Parceria Social, uma iniciativa conjunta da Secretaria da Justia e do
Desenvolvimento Social, organizaes sociais e empresas, com objetivo de realizar projetos sociais, abrangendo diversas
reas da assistncia social. Foram trabalhados, durante 10 meses, quatro reas (quatro Mdulos): Iniciao Programao,
Tecnologias para o Trabalho, Edio de Imagens, Manuteno e Configurao de Computadores. Depois de desenvolvidos,
os mdulos complementares sero oferecidos a todas as organizaes que adotam a proposta pedaggica da Pensamento
Digital, atravs de cursos para os educadores sociais.
RESPONSVEIS PELO MDULO INICIAO PROGRAMAO

Coordenadora pedaggica: Susana Seidel (susana@pensamentodigital.org.br)

Orientador pedaggico: Cesar Felipe Ferreira (cesar@pensamentodigital.org.br)
Elaborao do contedo: Cesar Ferreira, Cludio Gilberto Csar e Susana Seidel