INICIAO A PROGRAMAO
SRIE
EMPREGABILIDADE
A iniciativa da criao deste mdulo
complementar surgiu da necessidade do
mercado de trabalho de preparar pesso-
as para a rea da programao. A forma-
o 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 ini-
cial dos futuros programadores, a Pen-
samento Digital desenvolveu este m-
dulo para auxiliar na aprendizagem dos
conceitos bsicos necessrios para o tra-
balho com programao, buscando pro-
piciar 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 cria-
es por pessoas com poucos conheci-
mentos em programao, pois os co-
mandos podem ser selecionados a par-
tir 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 m-
dulo. As idias so norteadoras, sendo
que o planejamento das aulas deve ser
desenvolvido para o pblico a ser aten-
dido, ou seja, no ser apresentado aqui
um planejamento de aulas, apenas di-
cas e objetivos para o curso.
FORMAO INICIAL
importante lembrar que este m-
dulo oferece apenas uma formao ini-
cial, sendo que, aps este curso, se os
aprendizes tiverem interesse profissio-
nal pela rea da programao, devero
buscar cursos avanados e profissiona-
lizantes.
OBJETIVO GERAL
O curso tem por objetivo preparar o
aprendiz para criar pginas e objetos ani-
mados, utilizando linguagem HTML e
conceitos de programao, de lgica e
de matemtica, levando em conta o de-
senvolvimento do raciocnio lgico, apri-
morando a criatividade e autonomia pe-
la 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 mais 4h de atividades
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 ofe-
recer uma preparao inicial s pessoas
que desejam se aprofundar no conheci-
mento da rea de programao. Assim, a
sugesto oferecer este curso para jo-
vens acima de 14 anos e para adultos que
buscam novas possibilidades profissionais.
PR-REQUISITOS
Ter noes bsicas de informtica (siste-
mas operacionais, organizao de pastas e
diretrios de arquivos, editores de texto e
internet pesquisa, navegao, e-mail).
Para melhor aproveitamento do cur-
so, sugere-se que os aprendizes este-
jam pelo menos finalizando o Ensino
Fundamental. Por questes de limita-
o de vagas e pelas exigncias do mer-
cado de trabalho, o grau de escolarida-
de 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) ho-
ras. A instituio deve organizar as aulas
da forma mais adequada a sua realida-
de, contudo apresentamos duas suges-
tes de distribuio da carga horria:
Duas aulas por semana com carga
horria de 3 h/aula, tendo 32 aulas e
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 con- SCRATCH
ceitos e assuntos a serem estudados. Isso no determina uma Compreenso sobre a criao de movimento
ordem rgida de abordagem e no impede que outros assuntos,
Eixo cartesiano
alm desses, sejam trabalhados. Esses contedos so apenas
uma sugesto, pois eles foram trabalhados na turma piloto de- ngulo e direo
senvolvida pela Pensamento Digital e acreditamos que so ade- Como utilizar os comandos
quados para a preparao inicial em programao. Lgica
No caso da experincia com a turma piloto, notou-se um Operadores matemticos
grande interesse dos cursistas pelo Scratch. Por este motivo, Condies (if, else) e outras
foi feita a opo de trabalhar inicialmente com Scratch e suas Controles
possibilidades e depois com o HTML.
Como utilizar os comandos
HTML (PGINAS, SITES) Variveis
Informaes bsicas 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, PROJETO
Mozilla Composer, etc)
Criar pgina para internet (site), utilizando recursos
Cdigo bsico HTML e usando criaes do Scratch
Funo de cada Tag
PUBLICAO
Formatao de texto e ttulos
Formatao de pargrafos Utilizao de upload

Linhas horizontais Pesquisa por servios de hospedagem de site

Cdigo RGB INFORMAES ADICIONAIS

Significado A Pensamento Digital desenvolveu materiais a partir da
Determinao e cdigo das cores experincia da turma piloto do mdulo de Iniciao a Pro-
Forma de utilizao no HTML (cores de fundo e de fonte) gramao. So materiais que fornecem informaes para os
Imagens educadores que ministraram as aulas do curso. Os temas
abordados so:
Tags de insero e formatao de imagens
Imagens de fundo Pginas web e cdigo HTML

Listas Animaes

Tags para criao de listas Desafios com Scratch, para incentivar e ajudar nas
primeiras criaes usando este software
Listas ordenadas
Todos estes materiais esto disponveis no endereo:
Listas no ordenadas
http://oficinas.pensamentodigital.org.br ou acessando o
Listas ordenadas com caracteres especiais site http://www.pensamentodigital.org.br
Links Para conhecer melhor o Scratch, visite o site <http://scratch.
Tags para criao e formatao de links mit.edu/> que congrega a comunidade de usurios de di-
Links para arquivos versas partes do mundo. Ali so compartilhados projetos e
Links para sites externos tutoriais.Tambm possvel interagir em fruns temticos.

Tabelas Uma sugesto para as aulas do curso a utilizao de vdeos

Tags para linha e coluna que apresentem informaes sobre mercado de trabalho, exi-
gncias da formao profissional, entrevista de emprego e outros
Formatao de clulas
assuntos relacionados. Muitos desses vdeos podem ser en-
Insero de imagens contrados no YouTube (http://br. youtube.com/).

2
 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. Pode-
mos 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 usa-
mos 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 visua-
lizados atravs dos browsers so escritos em hipertextos, uti-
lizando-se uma linguagem especial chamada HTML
(HyperText Markup Language).
HOME PAGE um conjunto de pginas, documentos
diponveis na web, interligados entre si (atravs de links).
BROWSERS so programas que lem e interpretam ar-
quivos 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 hard-
ware 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, Loca-
lizador 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, ar-
quivo, pgina ou outro destino.
Para entender o URL e o endereo colocamos a explica-
o 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).

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.

3
 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 ele-
mento deve ser visualizado. A linguagem de formatao de
exibio de textos funciona atravs de comandos conheci-
dos 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 pr-
prios 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.
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 es-
truturas das pginas.
Para a fiscalizao do sistema foi fundada uma instituio
norteadora, a W3C, que um consrcio de empresas que cria-
ram o padro HTML. No site http://www.w3.org possvel verifi-
car 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 informa-
es 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 do-
cumento...</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>)
ESTRUTURA BSICA
utilizado para insero de cdigo script, como Java Script,
A estrutura bsica de um documento HTML a seguinte:
VB Script, etc, dentro do documento HTML.
<html> => Incio do documento
Exemplo: <script>...cdigo em linguagem script conhe-
<head> => Incio do cabealho do documento cida pelo browser...</script>
<title> => Incio do ttulo do documento
META (<meta>)
Aqui entra o ttulo do documento
Define valores especiais. Os valores so definidos como
</title> => Fim do ttulo do documento pares name/value, ou seja nome/valor.
</head> => Fim do cabealho do documento
Atributos de Meta
<body> => Incio do contedo do documento
Name: Especifica um nome ao qual um determinado valor
Aqui entra todo o contedo que ser exposto pelo
ser associado. O navegador precisa entender esse nome para
browser
que a tag tenha utilidade.
</body> => Fim do contedo do documento
Exemplo: <meta name="keywords" content =
</html> => Fim do documento
INFORMTICA, EDUCAO, APRENDIZADO">
Se observarmos a estrutura acima, podemos dizer que a
pgina divide-se entre cabealho, que fica entre as tags Content: Especifica o valor associado a um Name.
<head> e </head> e corpo, que fica entre <body> e </body>. Exemplo: <meta name="keywords" content=
Tudo que vai aparecer na pgina deve estar em corpo. "INFORMTICA, EDUCAO, APRENDIZADO">

4
 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.
CORPO DO TEXTO (<body>...</body>)
Este o corpo da pgina, a prpria pgina.Todo o conte-
do do site estar entre <body> e </body>.
Atributos de Body
Bgcolor: Define a cor de fundo da pgina
Exemplo: <body bgcolor="white">
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
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>
Visualizao: Pensamento Digital
ITLICO (<i>...</i> ) ou EM (<em>...</em>)
Indica que o texto deve ser apresentado em itlico.
Exemplo: <i>Pensamento Digital</i>
Visualizao: 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 opor-
tunidade de formao profissional inicial e continuada a jo-
vens de baixa renda.</p>
Atributos de P
Align: Indica o alinhamento do pargrafo a esquerda (pa-
dro), centralizado, direita ou justificado, usando-se res-
pectivamente 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 inclu-
so 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.
5
 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 Di-
gital</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.
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 Pensamen-
to Digital.
Veja algumas formas de especificar um link:
Para outras pginas de um mesmo site
O local precisa ter um nome. Este nome definido da se-
guinte forma: <a href="#nome.html">Link</a>
6
Para outros sites
Deve-se usar a URL completa da pgina destino.
Exemplo:
<a href="http://www.google.com.br">Link para site exter-
no</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.
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 tam-
bm 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">
Height: Determina a altura da borda da imagem.
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 per-
mite a criao de histrias, animaes, jogos e outras produ-
es. Tudo pode ser feito a partir de comandos prontos que
devem ser agrupados.
7 2
6 5
1 Botes de iniciar e parar o script
2 Botes para editar o objeto selecionado no palco
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
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.
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:
4
5 rea de edio e conexo de scripts
6 Abas com opes para a rea de script, para traje e
para sons
7 Blocos de comandos
8 Categorias de comandos
Selecione o bloco Mova e arraste para a rea de edio de
scripts.
O clique duplo sobre o bloco faz o movimento acontecer.
7
 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.
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.
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.
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 re-
curso funciona no seu computador (se o som est ligado e se
existem caixas de som funcionando).
8
USO DO CONTROLE SEMPRE
possvel programar no Scratch que uma ou mais aes
continuem acontecendo e se repetindo por tempo indeter-
minado. 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.
Para arrastar um conjunto de blocos, clique sobre o pri-
meiro 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
O Scratch tambm possui controles para o incio da execu-
o 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 necess-
rio que seja colocado no script o bloco de controle que indica:
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 criar ou inserir um novo objeto voc deve clicar em
uma das seguintes opes:
Para iniciar um script, alm de usar a bandeira verde,
possvel determinar uma tecla do teclado que funcione como Desenhar um objeto (abre um editor que per-
disparadora do script. Desta forma, quando a tecla for pressio- mite pintar e desenhar um objeto).
nada, o script inicia sua execuo.
Para determinar que o incio da execuo ser determinado por Inserir objeto do arquivo (permite inserir um
uma tecla, voc precisa coloc-la no incio de um script o controle. 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 determi-
nada 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
Para fazer uma animao no Scratch bastante simples. O
efeito o mesmo de uma imagem gif, onde aparecem dife-
rentes 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 desenhan-
Voc pode usar um controle inicial de script diferente para
do o novo a partir do inicial (fazer uma cpia do original e
cada conjunto de blocos. assim que se faz para determinar
editar) ou importar as posies.
movimentos diferentes de um objeto de acordo com o clique
nas setas de direo do teclado.

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.
Depois faa o script do objeto que ser animado. Use o
Veja abaixo como aparece um novo objeto no palco:
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.
9
 ENTENDENDO O SCRATCH
TOCAR NA BORDA E VOLTAR USO DE TESTES: SE (IF)
Quando voc faz algumas programaes no Scratch, impor- Para muitas programaes, jogos e histrias importante
tante que o objeto ao tocar na borda do palco volte. Um exemplo usar testes. Podemos fazer uma bola bater em um objeto e
disso pode ser uma bola que rola, bate na borda e volta. Primeiro, quando ela bater, voltar. Mas como ela vai saber que bateu?
puxe o bloco Mova para a rea de edio de scripts. Como determinar o que acontece quando ela bate. Veja:

Voc tambm pode determinar que o script inicie quando

a bandeira verde for pressionada.
Pegue o bloco Sempre e coloque na rea de edio de
A bola cai, bate na cabea do gato e volta para cima. Quan-
scripts.
do 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).

Encaixe o Mova dentro do Sempre.

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 Movi-

mento 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 Acrescente na rea de edio de scripts o bloco se, seno
bola tocar o gato, ou seja, acrescente o bloco aponte para a que fica na categoria Controle.
direo. Isto significa que quando a bola tocar no gato, ela ir
mudar sua direo para aquela determinada no script.

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

Clique no quadrado da cor e escolha a cor da goleira.
tempo todo, e coloque o teste dentro do Sempre.

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.
Voc pode colocar dentro do seno o comando Mova para que
Veja que foram feitos dois scripts separados: um para o
a bola ande caso no toque no gol. Mas se deixar o seno vazio,
movimento da bola e outro para o teste. Tambm possvel
apenas no acontecer nada quando a bola no tocar no gol.
fazer tudo junto, usando apenas um controle de incio do
script e apenas um bloco Sempre. Experimente modificar este
script e gerar novas verses.

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: Dentro do bloco se coloque a ao que deve ocorrer quan-
do a bola tocar o gol, ou seja, coloque o bloco diga Gol! por 2
segundos.

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

Voc pode editar o texto do bloco Diga clicando e apagan-
direo da goleira.
do o texto original.

11
 ENTENDENDO O SCRATCH
Coloque o teste (se, seno) dentro de um bloco Sempre COMPARTILHAR
para que este teste seja feito o tempo todo. Depois coloque
No Scratch, aps fazer seu projeto, possvel compartilh-
um controle que determine o incio do script. No caso foi
lo com outros publicando-o no site do Scratch. Para isso, bas-
pedido que a bola ande quando for clicada com o mouse,
ta clicar no boto Compartilhar na parte superior da tela do
mas outros controles podem ser usados.
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. gratui-
to 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