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.

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.

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.

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.

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.

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 Padro W3C Tags HTML Conhecimento do software a ser usado (Aptana, Nvu, Mozilla Composer, etc) Cdigo bsico Funo de cada Tag Formatao de texto e ttulos Formatao de pargrafos Linhas horizontais 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 Utilizao de upload Pesquisa por servios de hospedagem de site 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 Quais esto pr-definidas Como criar variveis PROJETO Criar pgina para internet (site), utilizando recursos HTML e usando criaes do Scratch

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). 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. 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).

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.

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

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.

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

ESTRUTURA BSICA
A estrutura bsica de um documento HTML a seguinte: <html> => Incio do documento <head> => Incio do cabealho do documento <title> => Incio do ttulo do documento Aqui entra o ttulo do documento </title> => Fim do ttulo do documento </head> => Fim do cabealho do documento <body> => Incio do contedo do documento Aqui entra todo o contedo que ser exposto pelo browser </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.

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>
META (<meta>)

Define valores especiais. Os valores so definidos como pares name/value, ou seja nome/valor. Atributos de Meta Name: Especifica um nome ao qual um determinado valor ser associado. O navegador precisa entender esse nome para que a tag tenha utilidade. 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.
CORPO DO TEXTO (<body>...</body>) 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>

Este o corpo da pgina, a prpria pgina.Todo o contedo 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>)

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

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:

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/>)

<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

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>) Para outros sites

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>

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"

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>

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

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>

Esta tag insere uma imagem na pgina.

Atributos de IMG

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

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

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:
Para outras pginas de um mesmo site

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

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:

6 1 Botes de iniciar e parar o script

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

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.

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

Para escolher o som desejado, clique na seta destacada e escolha entre as opes do menu.

BANDEIRA VERDE INICIAR O SCRIPT

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:

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

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).

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

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.

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.

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:

Pegue o bloco Sempre e coloque na rea de edio de scripts.

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).

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

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 .

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

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