Você está na página 1de 12

INICIAO A PROGRAMAO

SRIE
EMPREGABILIDADE

A iniciativa da criao deste mdulo FORMAO INICIAL PBLICO-ALVO


complementar surgiu da necessidade do
importante lembrar que este m- Este mdulo foi desenvolvido para ofe-
mercado de trabalho de preparar pesso-
dulo oferece apenas uma formao ini- recer uma preparao inicial s pessoas
as para a rea da programao. A forma-
cial, sendo que, aps este curso, se os que desejam se aprofundar no conheci-
o de programadores uma grande
aprendizes tiverem interesse profissio- mento da rea de programao. Assim, a
demanda da nossa sociedade, mas os
nal pela rea da programao, devero sugesto oferecer este curso para jo-
candidatos enfrentam dificuldades em
buscar cursos avanados e profissiona- vens acima de 14 anos e para adultos que
conceitos bsicos, principalmente no que
lizantes. buscam novas possibilidades profissionais.
diz respeito lgica de programao.
Buscando auxiliar na preparao ini- OBJETIVO GERAL PR-REQUISITOS
cial dos futuros programadores, a Pen- O curso tem por objetivo preparar o Ter noes bsicas de informtica (siste-
samento Digital desenvolveu este m- aprendiz para criar pginas e objetos ani- mas operacionais, organizao de pastas e
dulo para auxiliar na aprendizagem dos mados, utilizando linguagem HTML e diretrios de arquivos, editores de texto e
conceitos bsicos necessrios para o tra- conceitos de programao, de lgica e internet pesquisa, navegao, e-mail).
balho com programao, buscando pro- de matemtica, levando em conta o de-
Para melhor aproveitamento do cur-
piciar momentos de criao, criatividade senvolvimento do raciocnio lgico, apri-
so, sugere-se que os aprendizes este-
e autoria, utilizando diferentes softwares morando a criatividade e autonomia pe-
jam pelo menos finalizando o Ensino
e recursos disponveis na internet . la busca de informaes.
Fundamental. Por questes de limita-
O software utilizado para trabalhar o de vagas e pelas exigncias do mer-
com a lgica de programao o OBJETIVOS ESPECFICOS cado de trabalho, o grau de escolarida-
Scratch, desenvolvido pelo Media Lab Oferecer uma preparao bsica de solicitado pode ser maior.
do MIT (Instituto de Tecnologia de para que os aprendizes possam
Massachusetts) nos Estados Unidos a desenvolver produes em HTML e ESTRUTURA E FORMATO
partir da linguagem de programao Scratch.
O curso presencial, sendo que para
Squeak. Este software gratuito, tem Apresentar softwares e recursos a certificao necessrio atingir os
uma interface amigvel e permite cria- disponveis e atuais para o trabalho objetivos e ter freqncia de 75% .
es por pessoas com poucos conheci- com programao HTML. A carga horria de cem (100) ho-
mentos em programao, pois os co-
Mostrar o Scratch como um ras. A instituio deve organizar as aulas
mandos podem ser selecionados a par-
recurso interativo, ldico e fcil para o da forma mais adequada a sua realida-
tir de pequenos blocos e agrupados.
desenvolvimento de objetos de, contudo apresentamos duas suges-
Maiores informaes e download no
animados, histrias, jogos e outras tes de distribuio da carga horria:
site: <http://scratch.mit.edu/>.
animaes. Duas aulas por semana com carga
O objetivo deste material auxiliar Possibilitar atividades prticas para horria de 3 h/aula, tendo 32 aulas e
na organizao e preparao deste m- o desenvolvimento de sites e histrias mais 4h de atividades
dulo. As idias so norteadoras, sendo animadas, buscando utilizar sites e complementares: passeios, palestras,
que o planejamento das aulas deve ser ambientes para a disponibilizao vdeos, atividades distncia.
desenvolvido para o pblico a ser aten- dessas produes, permitindo Duas aulas por semana com carga
dido, ou seja, no ser apresentado aqui interaes e trocas de experincias horria de 4 h/aula, tendo 25 aulas.
um planejamento de aulas, apenas di- com outros estudantes e profissionais Durante essa carga horria, atividades
cas e objetivos para o curso. de programao. 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 BROWSERS so programas que lem e interpretam ar-
conhea os termos bsicos que envolvem esta linguagem. quivos HTML enviados pela web, tambm formata-os em
pginas da web e os exibe ao usurio. Navegadores da web
INTERNET um conjunto de redes de computadores. Pode-
podem executar som ou arquivos de vdeo incorporados
mos dizer que a internet como uma cidade eletrnica com
em documentos da web, se o usurio dispuser do hard-
bibliotecas virtuais, lojas virtuais, escritrios virtuais, galerias de
ware necessrio. Existem vrios tipos de browsers, os mais
arte virtuais, etc. A internet oferece um grupo de servios para
usados so o Internet Explorer, o Firefox e o Opera, entre
usurios, como correio eletrnico, a World Wide Web, FTP,
muitos outros.
Gopher, IRC, grupos de notcias usenet, telnet e outros.
Normalmente quando abrimos uma pgina na internet usa- URL (Uniform Resource Locator ou, em portugus, Loca-
mos o www. Esta a sigla de World Wide Web que significa lizador de Recursos Uniforme) uma seqncia de caracteres
Rede Mundial (a grande rede de computadores interligados que fornece o endereo de um site da web ou um recurso
no mundo todo). Web o diminutivo para World Wide Web. da World Wide Web, juntamente com o protocolo (como
FTP ou HTTP) atravs do qual o site ou o recurso acessado.
PROTOCOLO um conjunto de regras estabelecidas com
o objetivo de permitir a comunicao entre computadores. ENDEREO o caminho at um objeto, documento, ar-
um mtodo de acesso a um documento ou servio atravs quivo, pgina ou outro destino.
da internet. So os chamados TCP/IP (Transmission Control Para entender o URL e o endereo colocamos a explica-
Protocol ou Internet Protocol). Em portugus: Protocolo de o a partir do site http://www.pensamentodigital.org.br/.
Controle de Transmisso ou Protocolo Internet. O TCP/IP
http:// = Protocolo, utilizado pelos computadores
est disponvel para qualquer tipo de CPU e sistema
ligados web para comunicar-se entre si.
operacional. Existem dois tipos principais:
www.pensamentodigital.org.br = Nome do
Protocolo HTTP (HyperText Transfer Protocol ou, em domnio. Domnio so as categorias de endereos da
portugus, Protocolo de Transferncia de Hipertexto) internet que representam pases ou tipos de organizao.
um protocolo da internet utilizado pelos computadores
www = Sigla de World Wide Web que significa rede
ligados web para comunicar-se entre si. Ele tem como
mundial.
funo ativar os navegadores da web para recuperarem
informaes de servidores da web. pensamentodigital = Nome especfico, que pode
conter uma ou mais palavras, separadas ou no por hfens
Protocolo FTP (File Transfer Protocol ou, em
(ex.: pensamento-digital).
portugus, Protocolo de Trasferncia de Arquivo) um
protocolo que possibilita a transferncia de arquivos de org = Tipo de domnio, que indica a natureza do site.
um local para outro pela Internet. No caso, como trata-se de um site de uma fundao
usa-se .org, organizaes sem fins lucrativos. Outros
HIPERTEXTO qualquer informao de texto em um exemplos: .gov (governo) e .com (endereos comerciais).
computador que contenha saltos para outras informaes, o
br = Sigla do pas, composta de duas letras, significa
que usualmente chamamos de link. Os documentos visua-
que a pgina est situada em um computador no Brasil.
lizados atravs dos browsers so escritos em hipertextos, uti-
Pginas que no possuem terminao indicando o pas
lizando-se uma linguagem especial chamada HTML
de origem esto situadas nos Estados Unidos. Outros
(HyperText Markup Language).
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.

3
INTRODUO AO HTML
HTML significa HyperText Markup Language ou Linguagem REGRAS DO HTML
de Formatao de Hipertexto. a linguagem usada para criar
Quando se fala em regras no HTML, os iniciantes acreditam
pginas na web, que estabelece como um determinado ele-
que o tema abordado a seqncia lgica. Claro que isto
mento deve ser visualizado. A linguagem de formatao de
tambm, mas alm desta seqncia, as regras tratam das es-
exibio de textos funciona atravs de comandos conheci-
truturas das pginas.
dos como tags.
Para a fiscalizao do sistema foi fundada uma instituio
O documento HTML pode ser escrito em qualquer editor norteadora, a W3C, que um consrcio de empresas que cria-
de texto, como texto puro, sem formatao ou caracteres de ram o padro HTML. No site http://www.w3.org possvel verifi-
controle. Pode-se usar, portanto, o Notepad do Windows ou o car se um site est dentro do padro. Este site est em ingls,
Kedit do Linux. Hoje existem vrios programas que so pr- mas existe uma verso em portugus em http://www.w3c.br/
prios para a programao em HTML, como Mozilla Composer,
Front Page, Aptana, Notepad++, entre outros. PARTES BSICAS DO HTML
TAGS CABEALHO DA PGINA (<head>...</head>)
Contm o cabealho do documento, ou seja as informa-
Tags so os comandos que so sempre em ingls e ficam
es que no fazem parte do corpo da pgina e, portanto, no
entre <>. O padro correto escrever os comandos com
sero exibidas diretamente no site, mas, por exemplo, ser o
letras minsculas.
ttulo exibido na barra de ttulos do navegador.
Podemos dizer que existem 3 tipos de tags:
Exemplo: <head>...informaes importantes sobre o do-
Tag de abertura de comando: usada quando cumento...</head>
comeamos um comando. Exemplo: <html>
TTULO (<title>...</title>)
Tag de fechamento de comando: usada quando
finalizamos o comando. Exemplo: </html> Contm o ttulo do documento. Exibe o ttulo como nome
da janela em que a pgina visualizada. O ttulo obrigatrio.
Tag solteira:estes so comandos especficos.Exemplo:<br/>
No confunda o ttulo da pgina com o nome do arquivo
Muitas tags possuem o que chamamos de atributos. Os
gravado em disco.
atributos so complementos dos comandos, seriam funes
a mais que os comandos possuem. 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 NEGRITO, ITLICO E SUBLINHADO
HTTP-EQUIV. <meta http-equiv="Content-Type" content= NEGRITO (Bold <b>...</b>) OU STRONG
"text/html; charset=iso-8859-1"> (<strong>...</strong>)
O tag meta utilizado, tambm, para especificar palavras
Indica que o texto deve ser apresentado em negrito.
chaves que sero catalogadas por Ferramentas de Busca.
Exemplo: <b>Pensamento Digital</b>
CORPO DO TEXTO (<body>...</body>)
Visualizao: Pensamento Digital
Este o corpo da pgina, a prpria pgina.Todo o conte-
do do site estar entre <body> e </body>. ITLICO (<i>...</i> ) ou EM (<em>...</em>)
Atributos de Body 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 SUBLINHADO (<u>...</u>)
fundo da pgina. Caso a imagem tenha um tamanho inferior Indica que o texto deve ser apresentado sublinhado.
ao da pgina, ela ser repetida diversas vezes de forma a
cobrir o fundo do documento Exemplo: <u>Pensamento Digital</u>

Exemplo: <body background="images/fundo.png"> Visualizao: Pensamento Digital


...diversas tags, textos etc...</body>
PARGRAFOS (<p>...</p>)
TTULOS E SUBTTULOS (<hX>...</hX>) Indica que o texto que esta entre as tags um pargrafo e
Indicam um ttulo ou subttulo que chamamos de header possui um alinhamento prprio. Os navegadores deixam uma
(cabealho). Os cabealhos tm seis nveis de importncia, quebra de linha antes de cada pargrafo.
sendo o "1" o mais importante e o "6", o menos. Os nveis de Exemplo: <p>O projeto Escola de Fbrica oferece a opor-
cabealho so equivalentes aos tamanhos da fonte h1 = 24 pt tunidade de formao profissional inicial e continuada a jo-
/ h2 = 18 pt / h3 = 14 pt / h4 =12 pt / h5 = 10 pt / h6 = 8 pt. vens de baixa renda.</p>
Visualizao: Atributos de P

<h1>Ttulo 1</h1> Align: Indica o alinhamento do pargrafo a esquerda (pa-


dro), centralizado, direita ou justificado, usando-se res-
<h2>Ttulo 2</h2> pectivamente as palavras left, center, right e justify.
<h3> Ttulo 3</h3> Exemplo: <p align="center">Este o site da Pensamento
<h4> Ttulo 4</h4> Digital. </p>
<h5>Ttulo 5</h5> Visualizao:
<h6> Ttulo 6</h6> Este o site da Pensamento Digital.
Atributos de hX
QUEBRA DE LINHA (<br/>)
Align: Indica o alinhado a esquerda (padro), centralizado Passa para a prxima linha
ou direita, usando-se as palavras left, center e right.
Exemplo: <p>A Pensamento Digital trabalha com inclu-
Exemplo e visualizao: so digital.<br/> A Pensamento Digital atua no Rio Grande do
<h5 align="left">Pensamento Digital</h5> Sul e em So Paulo.</p>
Pensamento Digital Visualizao:
<h5 align="center">Pensamento Digital</h5> A Pensamento Digital trabalha com incluso digital.
Pensamento Digital A Pensamento Digital atua no Rio Grande do Sul e em So
<h5 align="right">Pensamento Digital</h5> Paulo.
Pensamento Digital

5
PARTES BSICAS DO HTML
FONTES (<font>...</font>) Para outros sites
Existem 7 tamanhos de fonte em HTML, numeradas de 1 a Deve-se usar a URL completa da pgina destino.
7. O tamanho padro 3 que equivalente a 12 pt.
Exemplo:
Exemplo: <font>Texto</font>
<a href="http://www.google.com.br">Link para site exter-
Atributos de Fonte
no</a>
Size: Indica qual o tamanho de fonte que deve ser usado
Visualizao:
dentro de sua rea de influncia.
Link para site externo
Exemplo e visualizao: <font size="3">Pensamento Di-
gital</font> LINK ESPECIAL: "MAILTO"
Pensamento Digital Existe um tipo de link que chamamos de "mailto:". Se o
protocolo utilizado for "mailto:", ao invs de "http://", o link
Color: Indica qual a cor da fonte dentro de sua rea de
abrir uma janela especial para que se possa enviar um e-mail
influncia.
(correio eletrnico) para o endereo especfico.
Exemplo e visualizao:
Exemplo:
<font color= "#000000">Pensamento Digital</font>
<font color="black">Pensamento Digital</font> Mande um<a href="mailto:contato@pensamentodigital.
org.br" >e-mail</a>para a Pensamento Digital.
Pensamento Digital
Visualizao:
Face: Determina a fonte (tipo de letra) a ser utilizada. Deve
ter um nome entre aspas ou uma lista de nomes de fontes Mande um e-mail para a Pensamento Digital.
separados por vrgula e entre aspas. O navegador procurar
IMAGENS (<img>)
estas fontes em ordem.
Esta tag insere uma imagem na pgina.
Exemplo e visualizao:
<font face="Verdana, Arial, Helvetica">Pensamento Atributos de IMG
Digital</font> SRC: Indica a URL da imagem a ser exibida. Podem ser
usados dois tipos:
Pensamento Digital
URL absoluto (http://www.pensamentodigital.org.br/
LINK (<a>...</a>) images/log.png)
Indica a regio a ser tratada como hyperlink URL relativo (/images/logo.png). Esta tag obrigatria.
Exemplo: <a href="http://www.pensamentodigital. org. Exemplo: <img src="/images/logo.png">
br">Fundao Pensamento Digital</a>
ALT: Indica um texto associado imagem.Quando a imagem
Visualizao: Fundao Pensamento Digital no for exibida, o texto ser exibido em seu lugar. O texto tam-
bm ser exibido quando o cursor ficar parado sobre a imagem.
Atributos de A
HREF: Define que sua rea de influncia um link. Exemplo: <img src="/images/logo.png" alt="Logotipo da
Fundao Pensamento Digital">
Exemplo e visualizao: <p> Clique <a href="http://
www.pensamentodigital.org.br">aqui</a> para acessar a Align: Determina o alinhamento da imagem em relao
pgina da Fundao Pensamento Digital.</p> ao texto existente na mesma linha. Os valores vlidos so
"TOP", "MIDDLE", "BOTTOM", "LEFT" e "RIGHT".
Clique aqui para acessar a pgina da Fundao Pensamen-
to Digital. Exemplo: <img src="/images/logo.png" align="top">
Width: Determina a largura, em pixels, da imagem.
Veja algumas formas de especificar um link:
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 se-
Exemplo: <img src="/images/logo.png " height="100">
guinte forma: <a href="#nome.html">Link</a>
Border: Determina a largura da borda da imagem.
Exemplo: <img src="/images/logo.png " border="2">
6
APRESENTAO DO SCRATCH
Scratch uma nova linguagem de programao que per- Para fazer download do Scratch, entre no site http://
mite a criao de histrias, animaes, jogos e outras produ- scratch.mit.edu/download e aps preencher um formulrio ser
es. Tudo pode ser feito a partir de comandos prontos que possvel escolher a verso para download. Ele gratuito. Abaixo
devem ser agrupados. veja a tela principal do Scratch traduzida para o portugus:

7 2

6 5
4

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
3 Palco onde os objetos so colocados e onde para sons
possvel ver o resultado da programao criada. O objeto 7 Blocos de comandos
inicial que aparece no palco o gato 8 Categorias de comandos
4 rea dos objetos usados na animao. O objeto em
edio fica selecionado

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


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

O clique duplo sobre o bloco faz o movimento acontecer.


7
ENTENDENDO O SCRATCH
SOM USO DO CONTROLE SEMPRE
Para colocar som no script, voc pode usar o comando possvel programar no Scratch que uma ou mais aes
Toque o tambor. Ele fica disponvel na categoria som. Voc continuem acontecendo e se repetindo por tempo indeter-
pode usar este bloco de comando sozinho ou agrupado com minado. Para isso se usa o comando Sempre, disponvel na
outros comandos. 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 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,
Para escolher o som desejado, clique na seta destacada e
clique no boto vermelho que significa Parar Tudo.
escolha entre as opes do menu.

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-
Se voc desejar importar um arquivo de msica (MP3 ou
rio que seja colocado no script o bloco de controle que indica:
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.

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


Lembre-se: se o som no funcionar, verifique se este re- Encaixe o bloco sobre o conjunto j existente, se for o caso.
curso funciona no seu computador (se o som est ligado e se Este controle deve ser o primeiro em um grupo de blocos,
existem caixas de som funcionando). pois ele que determina o incio desta execuo.

Para testar, clique sobre a bandeira verde que significa Iniciar


Scripts.
8
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