Monografia

Transcrição

Monografia
UNIVERSIDADE FEDERAL DO RIO DE JANEIRO
CENTRO DE CIÊNCIAS MATEMÁTICAS E DA NATUREZA
INSTITUTO DE MATEMÁTICA
APLICAÇÕES DO PROJETO DESCARTES
POR RAPHAEL AMATO SALGADO GASPAR
ORIENTADOR: FERNANDO CELSO VILLAR MARINHO
CO-ORIENTADOR: RICARDO SILVA KUBRUSLY
Agosto de 2008
.
Dedicatória:
Dedico este trabalho aos alunos e professores do ensino brasileiro, para que haja
um vasto aproveitamento na forma de ensinar e aprender Matemática, aplicando as
diversas ferramentas tecnológicas ainda pouco exploradas.
Agradecimentos:
Agradeço a todos os alunos que comigo estudaram, dedicando-se de forma árdua,
para acompanhar o alto nível de ensino da Universidade Federal do Rio de Janeiro.
Agradeço a todos os professores que ministraram severamente suas disciplinas,
transmitindo conhecimentos valiosos que serão carregados por toda vida.
Agradeço aos professores da banca avaliadora.
Ao amigo Fernando Celso Villar Marinho.
“Diz-me, e eu esquecerei;
ensina-me e eu lembrar-me-ei;
envolve-me, e eu aprenderei.”
(Autor desconhecido)
ÍNDICE
Introdução............................................................................................................................1
Capítulo 1 – Projeto Descartes...........................................................................................3
1.1 - Histórico........................................................................................................3
1.2 – O aplicativo nippe Descartes.....................................................................4
Capítulo 2- Criação de páginas de Internet.......................................................................7
Navegador de Internet.........................................................................................7
2.1 - Construindo uma página.............................................................................8
Salvando um arquivo “htm” ou “html”..............................................................8
O código fonte....................................................................................................10
2.2.
Criando página simples de Internet com HTML....................................12
Formatação de texto..........................................................................................16
Formatação de imagens....................................................................................18
2.3 - Página simples em HTML com o applet Descarte...................................20
Capítulo 3 - Cenas Descartes...........................................................................................25
3.1 - Copiando código fonte de cenas Descartes............................................25
3.2 - Inserindo cena Descartes em uma página de Internet...........................33
3.3 - Pré-requisito JAVA.....................................................................................39
3.4 - Pré-requisito arquivos JAR.......................................................................40
3.5 - Rodando a cena Descartes.......................................................................43
Capítulo 4 – Funções do nippe Descartes......................................................................48
Quadro de edição...............................................................................................55
4.1 – Espacio......................................................................................................58
4.2 – Controles...................................................................................................61
4.2.1 – Controles Numéricos.................................................................62
4.2.2 – Controles Gráficos.....................................................................67
4.3 – Auxiliares..................................................................................................72
4.3.1 – Variables.....................................................................................74
4.3.2 – Constantes..................................................................................76
4.3.3 – Vectores......................................................................................77
4.3.4 – Algoritmos..................................................................................78
4.3.5 – Funciones...................................................................................80
4.3.6 – Funções Matemáticas e Operadores no nippe Descartes....83
4.4 – Gráficos.....................................................................................................85
4.4.1 – Ecuación.....................................................................................88
4.4.2 – Curva...........................................................................................90
4.4.3 – Sucesión.....................................................................................91
4.4.4 – Punto...........................................................................................92
4.4.5 – Segmento....................................................................................92
4.4.6 – Flecha..........................................................................................93
4.4.7 – Polígono......................................................................................94
4.4.8 – Arco.............................................................................................95
4.4.9 – Relleno........................................................................................96
4.4.10 – Texto...........................................................................................96
4.5 – Animación.................................................................................................97
Capítulo 5 – Gescenas – Gestor de cenas....................................................................101
5.1 – Modificar páginas de Internet e cenas.................................................105
5.2 – Adicionar ou inserir cenas....................................................................107
5.3 – Cortar, copiar e colar cenas..................................................................111
5.4 – Desfaze e refazer....................................................................................112
Capítulo 6 – Atividades para alunos do ensino médio................................................114
6.1 – Teste Online (TOL-2007)........................................................................115
6.2 – Questões do TOL 2007..........................................................................117
6.3 – Resultado do TOL-2007.........................................................................119
Capítulo 7 – Conclusões.................................................................................................122
Referências Bibliográficas..............................................................................................123
Anexo A............................................................................................................................125
Anexo B............................................................................................................................127
Origem do Java.................................................................................127
Máquina Virtual Java........................................................................128
Anexo C............................................................................................................................130
Introdução
O uso da Internet como ferramenta de apoio à aprendizagem e ao ensino, nos
mais variados conteúdos, vem se expandindo de forma significativa nos últimos
anos.
Este trabalho monográfico surge com o intuito de apresentar o PROYECTO
DESCARTES, projeto espanhol, cuja finalidade é utilizar as vantagens do
computador e da Internet para oferecer a professores e alunos novas formas de
ensinar e aprender Matemática. Nele é utilizado o aplicativo nippe Descartes,
software desenvolvido em Java, que possibilita grande interação com o usuário
sendo altamente configurável. Por meio da inserção de janelas gráficas (cenas
interativas) em web sites, pode-se trabalhar em praticamente todos os tópicos da
matemática.
Professores e estudantes de licenciatura encontrarão uma breve introdução
ao uso deste aplicativo, não sendo necessário conhecimento aprofundado de
programação computacional. Serão abordados os conhecimentos básicos para a
criação de páginas de Internet e a inclusão das cenas interativas do nippe Descartes.
As ferramentas necessárias para que as cenas sejam desenvolvidas e editadas são:
- a linguagem de formatação HTML, em um nível básico; - as funções do próprio
nippe Descartes; - a utilização do editor ou gestor de cenas Gescenas, programa
utilizado pelo próprio PROYECTO DESCARTES.
O projeto original sugere que cenas interativas surjam a partir de outras já
existentes, o que de fato faremos. Assim concretizar as idéias propostas neste
trabalho será uma realidade bastante viável.
Atividades didáticas aplicadas em turmas do segundo ano do Ensino médio do
Colégio de Aplicação da UFRJ serão apresentadas.
Junto às atividades realizadas e à criação desta monografia, foi desenvolvida
1
uma página de Internet, http://www.projetodescartesbr.com/. Ela surge com o intuito
de divulgar o trabalho proposto, orientar professores e alunos, armazenar os
trabalhos aplicados e facilitar o feedback com o professor orientador.
2
Capítulo 1 - Projeto Descartes
1.1. Histórico
O Projeto Descartes foi promovido e financiado pelo Ministério de Educação e
Ciência da Espanha. Tem como principal finalidade a inovação e a colaboração na
área Matemática, utilizando as vantagens do computador e da Internet, oferecendo a
professores e alunos um novo recurso para o processo de ensino-aprendizagem.
É resultado de vinte anos de experiência na criação e utilização de materiais
para o uso de tecnologias da informação e da comunicação no ensino.
O projeto surge em junho de 1998, por iniciativa do Programa de Novas
Tecnologias da Informação e da Comunicação (PNTIC), atual Centro Nacional de
Informação e Comunicação Educativa (CNICE), do Ministério de Educação da
Espanha. Três meses depois já se dispunha do primeiro protótipo do programa, com
o que se desenvolveram algumas unidades didáticas que serviram para aperfeiçoar
o produto e introduzir novas ferramentas. A primeira versão de Descartes foi
apresentada em sala de aula no ano de 1999 em Madrid, Espanha.
Posteriormente se desenvolveram sucessivas versões de Descartes, em duas
e três dimensões (Descartes 2D e Descartes 3D), melhorando a edição e
incorporando novas opções e ferramentas, ampliando possibilidades no campo de
ação da Matemática, e inclusive, da Física.
O projeto original está disponibilizado na Internet, através da página
http://descartes.cnice.mec.es,
em
espanhol,
com
possibilidade
de
alteração
idiomática para o inglês.
A grande aplicabilidade pela Internet se mostra como principal vantagem do
3
nippe Descartes: suas cenas são acessíveis gratuitamente a todos e em qualquer
hora ou lugar. Além disso, essa ferramenta favorece o uso de metodologias ativas,
para que o aluno seja o protagonista de sua própria aprendizagem.
1.2. O aplicativo nippe Descartes
Nippe Descartes é um applet (pequeno aplicativo), em linguagem JAVA,
utilizado no Projeto Descartes. É uma ferramenta de trabalho voltada principalmente
para professores de matemática que desejam criar lições interativas em páginas
web, podendo ser hospedadas em um servidor de Internet ou no disco rígido de um
computador. No sentido definido pelo JOMA (4), este aplicativo pode ser considerado
como um construtor de mathlet, ou seja, um construtor de applet voltado para o
ensino de matemática.
A palavra nippe se forma com as iniciais de "núcleo interativo para programas
educativos". O aplicativo Descartes é considerado um nippe, pois permite a criação
de uma ampla variedade de programas educativos, interativos e configuráveis em
páginas da Internet.
Na figura a seguir temos um exemplo de uma aplicação típica do applet
Descartes, uma cena1, onde aparece o gráfico da função quadrática y=x2/4p cuja
definição depende do parâmetro p. Ao variarmos este parâmetro, o gráfico é
modificado. Isto é feito ao clicarmos nas setas de controle de p ou escrevendo o
novo valor no campo de texto.
1
Cenas são interfaces de programação contida em páginas de Internet, com formas de janelas que apresentam aplicações
gráficas de segunda e terceira dimensões, podendo ser configuradas na própria página como também no código fonte. Para
que tal cena consiga ser rodada há a necessidade te ter instalado o Java no computador.
4
No gráfico a seguir, o valor de p=0.50 é modificado para 2.00.
Já neste próximo gráfico, o valor de p=0.50 é modificado para 0.05.
5
Percebe-se que a cada mudança no valor do parâmetro p, o gráfico é alterado
instantaneamente.
O nippe Descartes permite visualizar gráficos de várias funções, tais como
funções exponenciais, logarítmicas, modulares, trigonométricas, entre outras.
6
Capítulo 2- Criação de páginas de Internet
HTML, abreviação de Hyper Text Markup Language, que significa “Linguagem
de Formatação de Hipertexto”, é uma linguagem simples utilizada para criar páginas
na Internet. HTML não é uma linguagem de programação, mas uma linguagem de
formatação para exibição de textos e imagens.
Neste capítulo, será feita uma breve introdução ao conhecimento necessário
para construir uma página de Internet. Objetivando não tornar este assunto maçante
ao educador, a linguagem HTML será ensinada a partir de uma página simples.
Contudo serão mostrados alguns comandos considerados importantes. Após a
criação da página será apresentada a inserção dos comandos, referentes à Cena
Descartes, na página de Internet.
Navegador de Internet
Navegador é o programa que permite a interação de usuários com
documentos HTML presentes na Internet. Também é conhecido pelos termos em
inglês web browser ou browser. O termo browser vem do verbo to browse, que
significa olhar páginas de livros ou revistas, sem um propósito em particular ou olhar
coisas de uma loja sem a intenção explícita de compra.
Os primeiros navegadores surgiram no início dos anos 90, como exemplo
temos Worldwideweb (1990); libwww e Line-mode (1991); Erwise, Viola e Midas
(1992); Samba; Mosaic, Arena, Lynx e Cello (1993); Opera, Internet in a box,
Navipress e Netscape (1994); Internet Explorer (1995); Mozilla Firefox (2004).
7
2.1. Construindo uma página
Para criar uma página podemos utilizar o recurso de um editor de páginas ou
um editor de textos. As instruções a seguir serão passadas com base na utilização
do editor mais simples do Microsoft Windows, o bloco de notas. Contudo o usuário
poderá escolher a ferramenta que desejar.
Ao abrirmos um novo documento no bloco de notas estaremos diante de um
espaço vazio a ser preenchido por comandos HTML. Em regra, a extensão gerada
ao salvar um arquivo no referido editor será “txt”.
Salvando um arquivo “htm” ou “html”
Quando estivermos construindo uma página no bloco de notas, não
salvaremos o arquivo com a extensão “txt”, mas sim com a extensão “htm” ou “html”,
tendo em vista que este é um tipo de arquivo de página de Internet, executado por
um navegador de homepages.
É importante ter esta noção, pois a partir do momento em que estivermos
confeccionando uma página deveremos salva-lá o mais breve possível, por uma
medida de segurança, para que o documento não seja perdido.
O arquivo pode ser salvo mesmo sem possuir qualquer conteúdo escrito no
bloco de notas.
8
Clicando em “Arquivo” e posteriormente em “Salvar como...”, salvaremos o
arquivo, em uma pasta pré-definida, dando-lhe um nome.
Quando um web site está hospedado em um servidor na Internet, geralmente
a página inicial a ser exibida tem o nome “index”. Outros nomes podem ser
utilizados, como “main” por exemplo. As extensões destes arquivos podem ser as
mais variadas, como “htm”, “html”, “php”, “asp”, “aspx”, dentre outras. Contudo,
respeitando a proposta de transpassar o conhecimento básico necessário na
construção de páginas, possibilitando uma objetividade nas construções das cenas
Descartes, trabalharemos com as extensões “htm” ou “html”. A escolha destas duas
últimas ficará a critério do usuário, porém a utilizada neste trabalho será “htm”. O
primeiro arquivo terá nome “index.htm”, assim como foi feito para o web site criado
nesta pesquisa, o de endereço “http://www.projetodescartesbr.com”.
9
Na imagem a seguir, em “Salvar como” no bloco de notas, temos a opção
“Salvar como tipo”, fornecendo de imediato a opção “Documentos de texto (*.txt)”,
mas modificaremos para “Todos os arquivos” e em “Nome do arquivo” será dado o
nome mencionado anteriormente, “index.htm”.
O código fonte
O código fonte, ou source code em inglês, é o conjunto de palavras escritas
de forma ordenada, contendo instruções em linguagens de programação ou
formatação, de maneira lógica. Assim, diante de uma página de Internet haverá
sempre um código fonte.
10
Em uma página qualquer o código fonte pode ser exibido. Com o mouse
sobreposto à mesma, clica-se no botão direito onde surgirá uma caixa flutuante
contendo algumas opções. Selecionando “Exibir código fonte” será aberto no bloco
de notas do Microsoft Windows todo o código.
No exemplo abaixo o código fonte da página do Projeto Descartes espanhol
será visualizado.
11
2.2. Criando página simples de Internet com HTML
Para exemplificar a criação de uma página simples de Internet utilizaremos
uma atividade fictícia, de um professor que chamaremos de René, proposta a seus
alunos.
A seguir, atividade do professor René visualizada através de um navegador.
12
A mesma página, aberta através do bloco de notas, exibe o seguinte código
fonte HTML:
13
<HTML>
<HEAD>
<TITLE>CAp UFRJ</TITLE>
</HEAD>
<BODY>
<P> <FONT SIZE=4>
Professor René
<BR> <BR>
Turma: 5ª Série
</FONT> </P>
<BR> <BR>
<P> <H1> <center> Desafio Lógico </center> </H1> </P>
<BR>
<IMG alt="Guarda Noturno" src="guarda.jpg" height="129" width="115">
<BR> <BR>
<P align="justify">
<FONT SIZE=3>
Um grande empresário na necessidade de ir a São Paulo, chegou a seu guarda
noturno e ordenou que ele o acordasse às 6 horas da manhã em ponto. Exatamente às 6
horas da manhã o guarda acordou o empresário e disse:
<BR> <BR>
- Patrão, estou com um mal pressentimento: sonhei esta noite que o senhor teria um
acidente com o avião e me permita sugerir que não viaje.
<BR> <BR>
O empresário não deu ouvidos ao guarda. Sem incidentes, chegou a São Paulo e por
telefone mandou demitir o guarda. Por quê?
</P> </FONT>
</BODY>
</HTML>
Toda estrutura HTML é formada por blocos. Os blocos são iniciados e
finalizados através das tags também chamadas de etiquetas. As tags estão sempre
14
entre os sinais de menor (<) e maior (>), sendo as que finalizam recebem uma barra
(“/”) para indicar o fechamento.
Na estrutura de página temos a tag <HTML> que inicia a página e a </HTML>
que fecha a página. Em seguida temos <HEAD> e </HEAD>, iniciando e fechando o
cabeçalho. Entre as tags <TITLE> e </TITLE> ficará o nome do cabeçalho, que no
caso analisado é “CAp UFRJ”, visto na parte superior do navegador. A tag <BODY>
inicia o corpo da página e </BODY> fecha o corpo da mesma.
A construção é iniciada utilizando as tags <HTML> para iniciar e </HTML>
para fechar o documento, dentro destas colocamos <HEAD> e </HEAD> e dentro
dessas últimas colocamos <TITLE> e </TITLE> para definir o nome do cabeçalho da
página. Por último, teremos as tags <BODY> e </BODY> onde estarão as imagens e
os textos. Todo o conteúdo visualizado na página estará entre as tags de corpo.
<HTML>
<HEAD>
… cabeçalho …
</HEAD>
<BODY>
… conteúdo da página …
</BODY>
</HTML>
As tags que precisam de abertura e fechamento são chamadas de “container
tags”, já as que não precisam de fechamento são chamadas de “empty tag”.
15
Formatação de texto
Assim como em um editor de texto, em HTML podem ser utilizados alguns
efeitos similares no texto. Dentro da tag BODY, é escrito o conteúdo da página. A
primeiro tag que surgirá, referente à formatação de texto, é a de criação de
parágrafo, <P> abrindo e </P> fechando. No modelo em análise, é visto a seguinte
tag <P align="justify">, cujo fechamento é </P>. Neste caso é determinado o
alinhamento do parágrafo, ou seja, como o texto será ajustado entre suas margens.
O texto está justificado, mas podendo vir centralizado, à direita ou à esquerda,
utilizando as tags <P align="center">, <P align="right"> ou <P align="left">,
respectivamente. O fechamento em qualquer um dos casos será realizado com </P>.
A tag <FONT> serve para alterar o tipo, o tamanho e a cor da letra, utilizando
respectivamente os argumentos “face”, “size” e “color”. No modelo apresentado
apenas o tamanho foi alterado. No local onde aparece “Professor René” e “Turma: 5ª
Série”, caso mudássemos o tipo de letra, tamanho e a cor, a tag poderia estar da
seguinte forma:
<P> <FONT FACE=GARAMOND SIZE=4 COLOR=BLUE>
Professor René
<BR><BR>
Turma: 5ª Série
</FONT>
</P>
O tipo de letra utilizado foi o garamond, utilizado nos editores de textos.
Porém, como a página se adapta ao navegador do usuário, este precisa ter o tipo da
letra selecionada instalada em seu computador para que ela possa ser utilizada. Em
outras palavras, se selecionamos um tipo de letra que o usuário não dispõe, o
navegador converterá para um padrão definido.
16
O tamanho permaneceu o mesmo, comparando com o modelo original,
salientando que aumentando o valor a letra é aumentada.
As cores aparecem no idioma inglês, como “black” (preto), “gray” (cinza),
“green” (verde), “purple” (roxo), “red” (vermelho), “silver” (prata), “white” (branco) ou
“yellow” (amarelo). Na fonte apresentada a cor foi o azul, “blue”. Elas também são
definidas através de um valor hexadecimal de seis algarismos seguidos do símbolo
“#”. Ou seja, cada nome de cor possui uma correspondência para tal valor
hexadecimal. Desta forma, os comandos de cores podem ser escritos da forma
“color=BLUE” ou “color=#0000FF”.
O anexo 1 apresenta uma tabela com algumas cores disponíveis e seus
valores hexadecimais correspondentes.
Além de estarem presentes nas fontes, as cores aparecem no fundo de uma
página de Internet através do comando “bgcolor” inserido na tag <BODY>, ou seja,
se quisermos que o fundo esteja na cor rosa é utilizada a tag <BODY
bgcolor=PINK>.
A tag <BR> é utilizada como quebra de linha, ou seja, ela pula uma linha, não
necessitando ser fechada.
Outras tags importantes para a formatação de um texto:
<B>Textos em negrito</B>
<I>Textos em itálico</I>
<U>Textos sublinhados</U>
<TT>Textos no estilo da máquina de escrever</TT>
<SUB>Texto subscrito</SUB>
<SUP>Texto sobrescrito</SUP>
<BLINK>Texto piscando</BLINK>
<STRONG>Texto similar ao negrito</STRONG>
17
<BIG>Texto com fonte aumentada e em negrito</BIG>
<SMALL> Texto com fonte reduzida e alterada </SMALL>
<PRE>Texto apresentado na mesma maneira em que foi digitado, mantendo
quebras de linha e tabulações</PRE>.
Formatação de imagens
Recomenda-se que se evite abusar do uso de imagens na criação de uma
página. O grande problema ao se abusar de imagens é a velocidade de transmissão
das mesmas pela rede.
Dois formatos de figuras são bastante utilizados na Internet, o GIF, abreviação
de “Graphics Interchange Format”, e o JPG, abreviação de “Joint Photographic
Engineering Group”. Nestes formatos, as imagens são internamente compactadas,
reduzindo seus tamanhos, diferente da extensão BMP, “Bitmaps”.
No modelo em análise inserimos a imagem “guarda.jpg” através da empty tag,
<IMG>. Este tag, ao contrário da grande maioria, necessita do argumento “src”, que
indica local em que se encontra a figura. O arquivo JPG está localizado no mesmo
local do arquivo “index.htm”, fato que deixa o argumento src da forma
src=”guarda.jpg”. Caso a imagem estivesse em uma subpasta de nome “imagens” o
argumento seria src=/imagens/guarda.jpg.
Temos o argumento “alt” que possui a função de inserir um pequeno texto,
que deve estar entre aspas, em uma figura. Este texto é visualizado na página no
espaço da imagem quando o navegador não puder abrir a mesma.
18
Os argumentos “height” e "width" definem a altura e a largura da figura. Caso
estes argumentos não sejam informados a figura manterá seu tamanho original. A
altura e a largura da imagem podem ser representadas por percentuais, <IMG
alt=”Guarda Noturno” src="guarda.jpg" height=”50%” width=”50%”> ou em pixeis
<IMG alt=”Guarda Noturno” src="guarda.jpg" height=”129” width=”115”>. As aspas
são opcionais nos percentuais e nos pixeis. Pixel é o menor ponto que forma uma
imagem. A palavra pixel é a aglutinação das palavras inglesas Picture e Element, ou
seja, elemento de imagem, sendo pix a abreviatura em inglês para Picture.
19
Outros argumentos podem ser utilizados na formatação de imagens. O
argumento “align” utilizado em textos, por exemplo. Caso a imagem fosse ficar
centralizada a tag seria <IMG alt=”Guarda Noturno” src="guarda.jpg" align=center
height=”129” width=”115”>. O argumento “border” que desenha uma borda ao redor
da figura. As bordas ficam crescem de acordo com o número colocado <IMG
alt=”Guarda Noturno” src="guarda.jpg" border=2 height=”129” width=”115”>.
O argumento “vspace” define o espaçamento entre o texto superior e inferior à
figura. Age como se fosse uma borda invisível. <IMG alt=”Guarda Noturno”
src="guarda.jpg" vspace=10 height=”129” width=”115”>.
O argumento “hspace” define o espaçamento entre o texto à esquerda e a
direita à figura. Age como se fosse uma borda invisível. <IMG alt=”Guarda Noturno”
src="guarda.jpg" hspace=10 height=”129” width=”115”>.
É muito importante notar que o navegador procura a figura através do nome
de seu arquivo da forma em que este estiver exatamente escrito. Geralmente,
quando a página estiver hospedada na Internet, o fato da imagem estar com o nome
ou extensão em letra maiúscula, pode fazer com que a mesma não apareça. Desta
forma, recomenda-se que o usuário trabalhe com nomes de imagens em letra
minúscula.
2.3. Página simples em HTML com o applet Descartes
A seguir temos uma página de Internet simples com uma cena Descartes
inserida. Será mostrado o código fonte, destacando o trecho referente à cena.
20
Nesta página temos uma cena inserida logo abaixo da equação x+3=2.
Analisando o código será compreendido o momento em que é colocada a cena.
A seguir teremos o código fonte da página em questão. Nota-se a cena é
21
iniciada pelo comando <applet name="suma"> e finalizada por </applet>.
<HTML>
<HEAD>
<TITLE> Cenas Descartes </TITLE>
</HEAD>
<BODY>
<IMG alt="Nirvana" src="nirvana.gif" height="99" width="85">
<FONT SIZE=6> <center> Colégio de Aplicação - UFRJ </center> </FONT>
<BR> <FONT SIZE=4> Cenas Descartes </FONT>
<BR> <BR>
<FONT SIZE=3>
<P align="justify">
A seguir temos uma equação de 1º grau do tipo: "x+a=b". Atribua um valor não
negativo para "a" e um valor inteiro qualquer para "b". Para visualizar a resolução do
exercício, clique na seta azul, ao lado de "Resolução de uma equação", para avançar,
podendo clicar na seta vermelha para retroceder.
<BR>
Como proposta de exercício, resolva as seguintes equações:
<BR><BR>
x+7=15
<BR><BR>
x+3=2
</P> </FONT> <BR>
<applet name="suma"
code="Descartes.class"
22
codebase=" "
archive="Descartes.jar"
MAYSCRIPT
width=350 height=220>
<param name="nombre" value="suma">
<param name="Versión" value="2.45">
<param name="Idioma" value="español">
<param name="Botones" value="créditos=no config=no inicio=si limpiar=no">
<param name="Espacio" value="fondo=blanco red=no red10=no ejes=no texto=no ejex=no eje-y=no">
<param name="C_00" value="id=a tipo=numérico valor='0' decimales='0' incr='1'
min='0' max='999999' región=norte">
<param name="C_01" value="id=b tipo=numérico valor='0' decimales='0' incr='1' min='999999' max='999999' región=norte">
<param name="C_02" value="id=p tipo=numérico valor='1' decimales='0' incr='1'
min='1' max='5' nombre=Resolução de uma equação visible=no">
<param name="A_00" value="id=c expresión='[b-a]'">
<param name="G_00" value="tipo=texto expresión='[95,15]' color=negro texto='x+[a] =
[b]' decimales=0 fuente='Helvetica,PLAIN,30'">
<param
name="G_01"
value="tipo=texto
expresión='[70,45]'
dibujar-si='p>=2'
texto='x+[a]-[a] = [b]-[a]' decimales=0 fuente='Helvetica,PLAIN,30'">
<param
name="G_02"
value="tipo=texto
expresión='[95,75]'
dibujar-si='p>=3'
texto='x+0 = [c]' decimales=0 fuente='Helvetica,PLAIN,30'">
<param
name="G_03"
value="tipo=texto
expresión='[130,105]'
dibujar-si='p>=4'
texto='x = [c]' decimales=0 fuente='Helvetica,PLAIN,30'">
<param name="G_04" value="tipo=texto expresión='[35,135]' color=rojo dibujarsi='p>=5' texto='A solução é x = [c]' decimales=0 fuente='Helvetica,PLAIN,30'">
</applet>
<BR> <BR> <BR>
</BODY>
</HTML>
23
A parte do código fonte, referente à cena Descartes mostrada, está na cor
vermelha como uma maneira de destaque. No bloco de notas os caracteres do
código fonte aparecem na cor preta, enquanto em alguns editores de páginas de
Internet é possível vê-lo em diversas cores, o que facilita a edição do arquivo.
24
Capítulo 3 - Cenas Descartes
Neste capítulo o leitor aprenderá extrair o código fonte das cenas Descartes
existentes no site do projeto original e em seguida inseri-las em páginas de Internet
simples recém criadas.
Também, serão mostrados os pré-requisitos necessários para que cenas
Descartes, inseridas em páginas de Internet, funcionem, são eles: os arquivos
Descartes.JAR e Descartes3.JAR, chamados de JAVA Archives, e a instalação do
aplicativo JAVA no microcomputador.
3.1. Copiando código fonte de cenas Descartes
Conforme sugere o projeto espanhol, cenas Descartes surgirão a partir de
outras já existentes. Esta seria a maneira mais apropriada para por em prática as
idéias desta pesquisa, visto que uma grande variedade de cenas existentes está
disponibilizada e satisfará a necessidade do usuário de educação matemática.
O PROYECTO DESCARTES dispõe de inúmeras cenas, que nos servirão de
modelos. Na página do projeto, http://descartes.cnice.mec.es, temos a opção
“Aplicaciones”, conforme mostra a imagem a seguir, endereço de Internet
http://descartes.cnice.mec.es/aplicaciones.php.
25
Clicando em “Aplicaciones”, estaremos diante dos tópicos dos materiais
didáticos. Em “ÍNDICE DE APLICACIONES ORDENADAS POR BLOQUES”, que em
português significa “índice de aplicações ordenadas por blocos”, temos os seguintes
assuntos: álgebra, geometria, análise, estatística e matemática aplicada. Em
“DESCARGAS POR CATEGORÍAS” existe a possibilidade de fazer o download de
todas as atividades de cada tópico. O ícone
nesta página é sinônimo de
download.
Inicialmente não faremos download, pois neste momento o objetivo é chegar
diante de uma página que contenha uma cena Descarte e copiar o código fonte
referente a essa cena. No que se segue, mostraremos como será possível colocar
qualquer cena em uma página de Internet criada pelo usuário.
26
Clicando
no
tópico
de
álgebra,
página
de
Internet
http://descartes.cnice.mec.es/aplicaciones_algebra.php estaremos diante de diversas
atividades subdivididas em oito tópicos: Números y operaciones, Unidades de
medida, Ecuaciones y sistemas, Inecuaciones y Sistemas, Expresiones algebraicas,
Combinatória, Algebra Lineal e Programación lineal.
27
Cada um desses oito tópicos dispõe de diversas atividades, indicando o nível
educativo e o autor. Existe também a possibilidade de realizar download de cada
atividade clicando em DESCARGA.
Entrando na primeira atividade, Números Primos, bastando clicar em cima do
referido nome, estaremos diante de uma página que contém duas cenas Descartes.
A seguir temos a imagem da página de Internet, onde é visualizada a segunda cena:
28
Para visualizar o código Descartes, referente à cena acima, basta clicar com o
botão direito do mouse em cima da página e clicar em “Exibir Código-Fonte”,
conforme explicado anteriormente. Lembrando ainda que o navegador utilizando é o
Internet Explorer.
29
Diante do código fonte, que seja aberto em um documento no bloco de notas,
copiaremos o trecho referente à cena Descartes. Ele inicia com <applet
code="Descartes.class"
e
finaliza com
</applet>.
É preciso ficar atento, pois esta página possui duas cenas, existindo assim
dois códigos fontes referentes de cenas, onde cada é um iniciado e finalizado com
<applet code="Descartes.class"
e
</applet>. Estaremos copiando a segunda
cena.
Para copiar o trecho do código fonte que contém a cena Descartes, basta
selecioná-lo com o mouse e clicar Ctrl + C, e em novo documento do bloco de notas,
efetuar a colagem, clicando Ctrl + V. A seguir o trecho correspondente à segunda
cena.
<applet code="Descartes.class"
codebase="../../ "
archive="Descartes.jar"
width=400 height=180>
<param name="Versión" value="2.72">
<param name="Idioma" value="español">
<param name="Botones" value="créditos=si config=si inicio=si limpiar=si">
<param name="Espacio" value="fondo=blanco red=no red10=no ejes=no texto=grisObscuro
eje-x=no eje-y=no">
<param name="C_00" value="id=D tipo=numérico valor='1' decimales='0' incr='1' min='1'
max='10000' nombre=Dividendo">
<param name="C_01" value="id=div tipo=numérico valor='1' decimales='0' incr='1' min='1'
max='10000' nombre=divisor">
<param name="A_00" value="id=resto(D,div) expresión='[D%div]'">
<param name="A_01" value="id=cociente(D,div) expresión='[ent(D/div)]'">
<param name="G_00" value="tipo=texto expresión='[20,20]' color=negro texto='Dividendo
[D]' decimales=0 fuente='Courier,BOLD,14'">
<param name="G_01" value="tipo=texto expresión='[160,20]' color=negro texto=' divisor
[div]' decimales=0 fuente='Courier,BOLD,14'">
<param name="G_02" value="tipo=texto expresión='[160,50]' color=negro texto=' cociente
[cociente(D,div)]' decimales=0 fuente='Courier,BOLD,14'">
<param name="G_03" value="tipo=texto expresión='[70,90]' color=negro texto='resto
[resto(D,div)]' decimales=0 fuente='Courier,BOLD,14'">
30
<param name="G_04" value="tipo=texto expresión='[160,21]' color=negro texto='| '
decimales=0 fuente='Courier,BOLD,12'">
<param name="G_05" value="tipo=texto expresión='[160,22]' color=negro texto='| '
decimales=0 fuente='Courier,BOLD,12'">
<param name="G_06" value="tipo=texto expresión='[160,23]' color=negro texto='| '
decimales=0">
<param name="G_07" value="tipo=texto expresión='[160,24]' color=negro texto='| '
decimales=0 fuente='Courier,BOLD,12'">
<param name="G_08" value="tipo=texto expresión='[160,24]' color=negro texto='
___________________ ' decimales=0 fuente='Courier,BOLD,12'">
</applet>
O referido trecho do código fonte pode ser colocado no bloco de notas e desta
forma pode ser salvo na extensão .txt, pois apenas queremos o conteúdo referente a
cena, que será inserido no código fonte de uma página de Internet qualquer. Da
mesma forma que o código fonte foi colado no bloco de notas, poderia ter sido
inserido em qualquer editor de texto.
Existe uma outra maneira de capturar o código fonte de uma cena Descartes.
Quando estamos diante de uma cena, devemos clicar no botão “config”, localizado
no canto superior à direita da cena. Porém nem todas as cenas vêm com este botão
habilitado, como no caso da última cena mostrada. Desta forma devemos clicar com
o botão direito do mouse em cima da cena e será ativada a janela mostrada abaixo.
Clicando em config, estaremos diante da janela de configuração de Descartes,
que será analisada no capítulo 4, em “Funções do nippe Descartes”. Abaixo segue a
imagem da referida janela.
31
A janela está no idioma espanhol, conforme pode ser visto no canto superior à
esquerda. Clicando no botão código será mostrado o código fonte da cena
Descartes.
32
Nos outros idiomas disponíveis na janela de configuração, o botão “config” é
substituído pelo botão “<applet>”. E clicando neste último botão, também será
apresentado o código fonte da cena Descartes.
3.2. Inserindo cena Descartes em uma página de Internet
Nesta etapa o leitor aprenderá como colocar o código fonte da cena
Descartes, capturado anteriormente, em uma página de Internet.
A página será criada a partir dos conhecimentos transmitidos no capítulo
anterior. Primeiramente criaremos uma pasta ou diretório no disco rígido e a
chamaremos de “cena1”.
Abrindo o gerenciador de arquivos do Microsoft Windows, o Windows Explorer
(Iniciar – Programas – Acessórios), iremos em disco local C.
33
Criaremos uma pasta ou diretório no disco local C. Clicando em “Arquivo”,
“Novo” e posteriormente em “Pasta”.
34
Daremos o nome desta pasta de “cena1”.
35
Abrindo um documento em branco no bloco de notas, imediatamente o
salvaremos no interior da pasta “cena1”, com o nome de “index.htm”.
No documento HTML criado será colocado o seguinte código fonte, referente
a uma simples página de Internet:
<HTML>
<HEAD>
<TITLE>Página Modelo</TITLE>
</HEAD>
<BODY>
<P> <FONT SIZE=4>
<BR> <BR>
Primeira cena inserida em página de Internet
</FONT> </P>
</BODY>
</HTML>
36
A página será visualizada no Internet Explorer, conforme mostra a próxima
imagem.
No código fonte mostrado anteriormente, abaixo da linha </FONT> </P>, será
inserido o código da cena capturada, sendo que colocaremos antes da cena os
comandos <BR> <BR> para dar espaçamento entre a frase existente e a cena.
Vejamos o código fonte:
<HTML>
<HEAD>
<TITLE>Página Modelo</TITLE>
</HEAD>
<BODY>
<P> <FONT SIZE=4>
<BR> <BR>
Primeira cena inserida em página de Internet
</FONT> </P>
<BR> <BR>
<applet code="Descartes.class"
codebase="../../ "
archive="Descartes.jar"
37
width=400 height=180>
<param name="Versi&oacute;n" value="2.20">
<param name="Idioma" value="espa&ntilde;ol">
<param name="Botones" value="cr&eacute;ditos=no config=no inicio=si limpiar=si">
<param name="Espacio" value="fondo=negro red=no red10=no ejes=no texto=grisObscuro eje-x=no
eje-y=no">
<param name="C_00" value="id=D tipo=num&eacute;rico valor='1' decimales='0' incr='1' min='1'
max='10000' nombre=Dividendo">
<param name="C_01" value="id=div tipo=num&eacute;rico valor='1' decimales='0' incr='1' min='1'
max='10000' nombre=divisor">
<param name="A_00" value="id=resto(D,div) expresi&oacute;n='[D%div]'">
<param name="A_01" value="id=cociente(D,div) expresi&oacute;n='[ent(D/div)]'">
<param name="G_00" value="tipo=texto expresi&oacute;n='[20,20]' texto='Dividendo [D]' decimales=0
fuente='Courier,BOLD,14'">
<param name="G_01" value="tipo=texto expresi&oacute;n='[160,20]' color=00beff texto=' divisor [div]'
decimales=0 fuente='Courier,BOLD,14'">
<param name="G_02" value="tipo=texto expresi&oacute;n='[160,50]' color=rojo texto=' cociente
[cociente(D,div)]' decimales=0 fuente='Courier,BOLD,14'">
<param name="G_03" value="tipo=texto expresi&oacute;n='[70,90]' color=00af00 texto='resto
[resto(D,div)]' decimales=0 fuente='Courier,BOLD,14'">
<param name="G_04" value="tipo=texto expresi&oacute;n='[160,21]' color=cd0055 texto='| '
decimales=0 fuente='Courier,BOLD,12'">
<param name="G_05" value="tipo=texto expresi&oacute;n='[160,22]' color=cd0055 texto='| '
decimales=0 fuente='Courier,BOLD,12'">
<param name="G_06" value="tipo=texto expresi&oacute;n='[160,23]' color=cd0055 texto='| '
decimales=0">
<param name="G_07" value="tipo=texto expresi&oacute;n='[160,24]' color=cd0055 texto='| '
decimales=0 fuente='Courier,BOLD,12'">
<param name="G_08" value="tipo=texto expresi&oacute;n='[160,24]' color=cd0055 texto='
___________________ ' decimales=0 fuente='Courier,BOLD,12'">
</applet>
</BODY>
</HTML>
Salvando o arquivo HTML e rodando-o através do navegador Internet
Explorer, teremos:
38
A cena não foi carregada corretamente. Isso ocorre porque é necessária a
presença de dois pré-requisitos, o arquivo descartes.jar e a instalação do aplicativo
Java.
3.3.
Pré-requisito JAVA
Para que uma cena Descarte funcione corretamente é necessário que esteja
instalado no microcomputador o aplicativo Java.
Java é uma linguagem de programação que possibilita jogar on-line,
39
conversar pela Internet, ver imagens em 3D, dentre outras coisas. Nos tempos atuais
o aplicativo é comumente encontrado em aparelhos celulares. Até a Receita Federal
disponibilizou no ano de 2008 uma versão do programa de imposto de renda em
Java. No anexo 2 tem-se um breve histórico do surgimento do Java.
Para realizar a instalação do aplicativo, basta acessar o site criado juntamente
com esta pesquisa, http://www.projetodescartesbr.com/, e clicar em download. Será
aberta uma página de downloads de arquivos. Clicando no ícone Java,
, será
baixado o aplicativo que possui o tamanho de 15,1 MB. Depois de baixado, basta
executar o arquivo e reiniciar o navegador. Outra opção é acessar o site
http://www.java.com, desenvolvido pela Sun Microsystems. Na página inicial basta
clicar em “Download gratuito do Java”.
3.4.
Pré-requisito arquivos JAR
Após a instalação do aplicativo Java, é necessário que se tenha dois arquivos
de extensão “jar”, o “descartes.jar” e o “descartes3.jar”. O primeiro arquivo é
responsável para que se carreguem cenas de duas dimensões, enquanto o segundo
ficará incumbido do carregamento de cenas de três dimensões. Esses arquivos são
chamados de “Java Archives”, “JAR”, (arquivos Java).
Java Archive é um arquivo compactado usado para distribuir aplicações e
bibliotecas na plataforma Java. O formato é muito semelhante à compactação de
arquivos de aplicativos do tipo "ZIP". Assim sendo, em um arquivo com a extensão
.JAR pode-se incluir classes Java, imagens, etc.
Estes
arquivos
estão
disponibilizados
no
site,
http://www.projetodescartesbr.com/. Clicando em download eles estarão disponíveis
para serem baixados, bastando clicar em seus nomes, conforme mostra a imagem a
seguir. Os dois arquivos não ocuparão 1 MB de espaço.
40
Existe a possibilidade de que se baixem esses arquivos do site do projeto
original.
Acessando
o
endereço
http://descartes.cnice.mec.es/,
clicando
instalación, entraremos diante de uma parte do site referente a download.
41
em
Conforme mostra a próxima imagem, estaremos diante do download do
arquivo Web_Descartes.exe, canto esquerdo, que possui cerca de 40 MB, nele
contém todo o material do site do projeto. Após realizar o download do arquivo e
executá-lo, será instalado no disco local “C” uma pasta de nome Descartes e em seu
interior conterá diversas outras pastas e arquivos. Os arquivos “descartes.jar” e
“descartes3.jar” estarão no interior da pasta Descartes.
42
Após a instalação do arquivo Web_Descartes.exe, o conteúdo ocupará cerca
de 227 MB, desta forma, fica sugerido que o leitor realize o download dos arquivos
jar através da página http://www.projetodescartesbr.com/.
3.5. Rodando a cena Descartes
Os arquivos Descartes.jar e Descartes3.jar, ficarão na mesma pasta que o
nosso arquivo HTML. No exemplo em questão, na pasta “cena1”.
43
Apesar de cada arquivo ser responsável por um tipo de cena, ou seja, cenas
de duas ou três dimensões, recomenda-se deixá-los juntos, pois em uma mesma
página podem ser inseridas mais de uma cena, sejam elas de duas ou três
dimensões.
Vimos no final tópico 3.2 que a cena não foi carregada, aparecendo o ícone
no lugar em que deveria ter aparecido a cena.
Para que a cena carregue é preciso preencher os pré-requisitos solicitados, a
instalação do aplicativo Java e a presença dos arquivos “jar”. Além disso, é preciso
indicar no código fonte da cena o local em que se encontra o referido arquivo “jar”.
Visualizando o código fonte, buscaremos onde está escrito “Descartes.jar”.
44
É possível notar que acima da linha de comando archive="Descartes.jar"
existe a linha codebase="../../", e está última indicará o local do arquivo “jar”.
Da forma como se está escrito, codebase="../../", o arquivo “Descartes.jar”
deve estar dois níveis acima da pasta em que o arquivo “HTML” se encontra.
Vejamos a imagem abaixo.
No exemplo acima, foi criada uma pasta na raiz, ou seja, no disco local “C”,
chamada “testes”. No interior desta pasta foi criada uma outra de nome “exemplos”.
Ainda, no interior desta última pasta está a pasta de nome “cena1” que abrigará o
arquivo HTML. Desta forma, um nível acima da pasta “cena1” é a “exemplos”, e dois
níveis acima, a pasta “testes”. Assim da maneira como está indicado o caminho
codebase="../../", o arquivo “descartes.jar” deveria estar na pasta “testes”, enquanto
45
o arquivo HTML “index.htm” na pasta “cena1”. Caso a linha de comando orientasse
que o arquivo “jar” devesse estar a um nível acima do arquivo HTML, ela seria
escrita da forma codebase="../". Porém recomendamos que os arquivos “jar”
estivessem na mesma pasta do arquivo HTML, ou seja, no mesmo nível, assim a
linha de comando deverá ser modificada para codebase=" ", podendo estas aspas
terem ou não um espaçamento.
Após a alteração do código fonte, realizada no bloco de notas, é necessário
que o documento seja salvo.
Da mesma forma funciona com arquivos “descartes3.jar” nas cenas em
Descartes 3D.
Com o arquivo “jar” localizado na pasta correta do disco rígido, ao abrir a
página, a cena será carregada.
46
47
Capítulo 4 - Funções do nippe Descartes
O manuseio das funções contidas no aplicativo nippe Descartes é tema de
grande importância, pois através delas consegue-se modificar as configurações das
cenas já existentes.
Temos a seguir uma cena típica de Descartes, contendo uma parábola, com
sua diretriz “D” em vermelho, paralela ao eixo x, um ponto p da parábola e os
segmentos FP e PD, que vão do foco ao ponto p e do ponto p à diretriz “D”, onde FP
= PD.
O aplicativo possui dois controles numéricos para que os valores do
parâmetro p e da abscissa “x” do ponto P possam ser modificados. Tem-se
inicialmente que a distância entre o foco e a diretriz é igual a 2p=1 e a abscissa do
ponto P tem o valor dado por x=2.
48
Aumentando o valor do parâmetro p, aumenta a distância entre o foco e a
diretriz da parábola:
Diminuindo o valor do parâmetro p, o foco e a diretriz se aproximam:
49
Aumentando o valor da abscissa “x”, observa-se um deslocamento do ponto P
para direita:
50
Diminuindo o valor da abscissa “x”, observa-se um deslocamento do ponto P
para esquerda:
Para modificar a configuração desta cena, deve-se pressionar o botão
“config”, no canto superior à direita. Porém, conforme visto no capítulo 3, item 3.1,
“Copiando código fonte de cenas Descartes”, nem toda cena possui o botão “config”
habilitado, assim devemos clicar com o botão direito do mouse em cima da cena
para que surja uma janela que conterá o botão “config”.
51
Clicando no botão “config”, seja o que estiver habilitado na cena, ou o que
aparecer na janela acima, será aberta uma janela de configuração de Descartes, o
painel de configuração.
Nas opções onde aparecem “Espacio”, “Controles”, “Auxiliares”, “Gráficos”,
“Animación”, selecionaremos “Gráficos” e aparecerá o painel de configuração dos
gráficos à esquerda.
Devemos selecionar um dos itens da lista de gráficos, para realizar alguma
modificação no painel e posteriormente clicar no botão “aplicar”.
Por exemplo,
podemos selecionar a primeira equação y = x^2/(4*p) e modificar sua cor
pressionando o botão amarelo que aparece à direita da equação. Aparecerá a janela
de configuração de cores, como mostra a imagem a seguir.
52
Nela haverá disponíveis treze cores, onde depois de selecionada uma delas,
pressionaremos o botão “aceptar”, confirmando a modificação, e em seguida
pressionar “aplicar” na janela de configuração. Nota-se que a parábola terá sua cor
alterada e isto pode ser feito com não só com a equação selecionada, mas com os
demais itens da lista de gráficos.
Selecionaremos ainda na lista de gráficos o item “texto [10,20]”, conforme
indica a figura que se segue.
53
O botão “texto”, ao lado da escrita em espanhol “Parábola con eje
vertical\nvértice en el”, acionado, nos dará a possibilidade de editar o texto contido
no gráfico. Estaremos diante da janela de edição de textos conforme mostra na
imagem a diante.
Nesta edição poderemos trocar o texto em espanhol para português, modificar
a fonte, nos três tipos que nos é disponibilizado, o tamanho, a forma de texto em
negrito clicando em “N” e texto em itálico clicando em “K”. Ao término das
modificações desejadas clica-se em “aceptar” e em seguida “aplicar” na janela de
configuração.
Quando aplicamos qualquer modificação na cena, seu código fonte
disponibilizado na janela de configuração, acessível no botão “código” no idioma
espanhol ou botão “<applet>” nos demais idiomas, estará modificado. Porém o
código fonte do arquivo HTML não estará modificado. Desta forma, caso o usuário
pretenda modificar a cena através da janela de configuração, ele deverá substituir o
código fonte existente no arquivo HTML pelo código alterado constante no botão
“código” ou “<applet>”.
54
As modificações podem ser desfeitas clicando no botão “Deshacer”, que em
português significa desfazer, contido na janela de configuração. Inicialmente este
botão estará esmaecido, ou seja, desabilitado, mas após qualquer modificação, ele
estará habilitado.
Ainda na janela de configuração temos o botão “Nueva”, que cria uma
configuração “quase” vazia, contendo apenas a equação y = x, como pode ser
observado na imagem abaixo.
Porem, para recuperar a configuração definida originariamente, clica-se na
opção “original”.
Quadro de edição
Os painéis “Controles”, “Auxiliares” e “Gráficos” contêm um quadro de edição
que permite criar, duplicar, modificar, eliminar, mover e editar as instruções que
compõem esse painel. A única diferença é que no botão azul de edição, em cada
caso, existe o nome do painel selecionado, mas a funcionalidade de todos os botões
55
é a mesma nos três casos.
Abaixo temos a imagem do painel “Controles”, onde serão analisados os
respectivos comandos.
Clicando no botão com o sinal de positivo
será aberto
um menu que permite escolher a nova instrução que será criada no próprio painel.
Clicando no botão com o símbolo asterisco
será
gerada ao final da lista uma instrução linha igual à que foi selecionada, ou seja,
possui a função de duplicar a instrução selecionada.
56
Clicando nas setas de controle azul ou vermelha
a
posição da instrução selecionada será modificada na lista.
Clicando no botão com o sinal de negativo
será
aberta uma janela de confirmação, dando a opção ao usuário de excluir ou não a
instrução selecionada.
Clicando no botão azul de edição “Controles”
, ou em
seu correspondente “Auxiliares” ou “Gráficos”, será aberta uma nova janela de
edição em modo de texto, onde será permitido ao usuário escrever o código das
instruções, utilizando os recursos habituais dos editores de textos, como copiar,
mover, colar, deletar, dentre outros. Esta opção é recomendada a usuários que tiver
alguma experiência em programação e que conheça a sintaxe do código da cena. A
seguir temos a imagem da referida janela.
57
4.1. Espacio
“Espacio”, que em português significa “espaço”, é a parte do painel onde se
encontram as configurações gerais da cena e também a exibição dos botões
“créditos”, “config”, “inicio” e “limpiar” na própria cena, caso tais opções estejam
selecionadas no painel.
58
A seguir serão analisadas as funções constantes em “Espacio”.
A opção “Fondo” corresponde à cor do fundo da cena. Ao clicar neste botão
será aberta uma janela de edição de cores, conforme mostra na imagem a seguir.
A opção “Red” ativa uma malha quadriculada ao fundo da cena.
A imagem acima mostra a cena no momento em que a opção é habilitada.
Porém clicando no quadro de edição “Red”, será ativada a janela de edição de cores.
A opção “Red10” só ficará ativa na cena quando estiver selecionada e quando
a opção “red” estiver habilitada. Ela corresponde a uma rede auxiliar onde se
desenha uma reta a cada 10 (dez) da rede normal, seja no eixo “x” ou no eixo “y”.
Nesta opção também podem ser editadas as cores.
59
Na imagem a cima a opção “Red10” está habilitada, com cor preta, sendo a
cor de fundo branca e o zoom alterado para gerar melhor visualização.
A opção “ejes”, cuja palavra em português significa eixos, possui a função de
inserir na cena o sistema de eixos cartesianos, porém, sendo necessário que
estejam selecionadas as opções “ejes-x” e “ejes-y”. É possível exibir apenas um dos
eixos, bastando que seja selecionado ou “ejes-x” ou “ejes-y”, sempre com “ejes” já
habilitado. Ao lado de “ejes-x” e de “ejes-y”, existe um campo que possibilita a escrita
de valores que aparecerão nos eixos.
Do lado esquerdo da opção “ejes-x” se encontra “números”, outra função que
só fica habilitada caso “ejes” esteja selecionada. A opção “números” numera o eixo
cartesiano.
A opção “texto” quando habilitada, possibilita que seja exibido na cena, no
momento em que for clicando com o mouse sobre a mesma, o valor do ponto em
relação ao eixo cartesiano. Caso o usuário clique e arraste o cursor do mouse sobre
a cena, o valor do ponto será alterado. Nesta opção também é possível a alteração
de cor.
60
4.2. Controles
Os “controles” são as opções do painel de configuração que permitem maior
interação do usuário com a cena, possibilitando modificações de parâmetros.
Existem dois tipos de “controles”, o numérico e o gráfico.
Os controles gráficos são objetos que aparecem sobre a cena. Na próxima
imagem eles estão representados na cena pelas letras A e B.
Estes controles podem ser arrastados com o mouse ou com as teclas de
direção do teclado, permitindo modificações em um ponto da cena, cujas
coordenadas
são
utilizadas
como
parâmetros.
Os
controles
gráficos
são
representados por pequenos discos, onde raios e cores podem ser alterados.
Abaixo segue a imagem do painel de configuração com a opção “controles”
selecionada.
61
Para criar um controle é preciso clicar no botão de sinal de positivo, logo
abaixo da opção “Espacio”.
Duas opções serão disponibilizadas, o controle “numérico” e “gráfico”, seguido
de seu identificador constante no campo “control”, onde pode ser escrita palavra sem
espaços.
4.2.1.
Controles Numéricos
A seguir temos a imagem da parte do painel de configuração, referente a
62
“controles”.
O campo “valor” corresponde ao valor inicial do parâmetro. Pode ser uma
expressão decimal ou uma fórmula. Quando não houver nada escrito o valor
aparecerá zerado.
O campo “nombre” corresponde ao nome externo do parâmetro. A localização
deste nome dependerá da opção “región”, que contem as opções “sur”, “norte” e
“exterior”. Quando estiver selecionada a opção “sur” o nome do parâmetro estará na
borda da cena, ao lado dos botões “inicio” e “limpiar”. Quando estiver selecionada a
opção “norte” o nome do parâmetro estará na borda da cena, ao lado dos botões
“créditos” e “config”. Quando estiver selecionada a opção “exterior” o nome do
parâmetro estará na janela que é ativada quando clicamos na cena.
63
O campo “decimales” corresponde ao número de decimais que se expressará
o valor do parâmetro, ou seja, com quantas “casas” aparecerá após a vírgula, que no
caso em questão é representada por ponto.
O campo “Incr” corresponde à quantidade que se aumenta ou diminui o valor
do parâmetro quando se altera o valor do controle. Caso coloquemos o valor 10
(dez), “n3” aumentará ou diminuirá de dez em dez, quando forem operadas as setas
de controle azul ou vermelha da cena.
O campo “min” determinará o valor mínimo do parâmetro. Colocando por
exemplo o valor -10 (menos dez), o valor mínimo do parâmetro ficará restringido a
este. Da mesma forma ocorre com o campo “max”, que determinará o valor máximo
do parâmetro. Quando ambos os campos não estiverem preenchidos, não haverá
limitações.
O campo “visible”, caso selecionado exibirá os valores que acompanham o
nome externo dos parâmetros.
O campo “exponencial-si”, que em português significa “exponencial se”,
permite impor uma condição para que o controle numérico seja exibido na forma de
64
notação científica. Supondo que na cena anterior seja colocado no controle numérico
“n3” o valor hipotético de 35000, valor de incremento 1 e no campo “exponencial-si” a
inscrição “A.x>0” (sem aspas), conforme mostra a próxima imagem (com a exibição
do eixo cartesiano).
A cena aparecerá da seguinte maneira, conforme apresenta a próxima
imagem.
A condição “A.x>0” é verdadeira, pois o ponto “A” possui coordenadas (5,1),
sendo desta forma sua abscissa positiva. Assim, utilizando as setas de controle (azul
ou vermelha), o valor passa a ser representado na forma de notação científica, o que
não ocorre quando a abscissa for negativa.
65
É importante saber como funcionam as setas de controle azul ou vermelha
existente na cena. Clicando na seta azul, o valor do parâmetro é aumentado de
acordo com o valor colocado no campo “Incr”. Clicando na seta vermelha o valor
será diminuído, dependendo também do valor colocado no campo “Incr”.
Vejamos a hipótese de uma cena que contenha um controle numérico com
valor 3.14509 e incremento 0.00025, sendo que existirão apenas três casas
decimais.
A seguir é exibida a imagem da cena correspondente ao painel que estamos
trabalhando.
66
O valor do parâmetro é 3.14159 conforme consta no campo “valor” do painel,
porém é exibido no campo ao lado das setas de controle o valor 3.141, pois os
números de casas decimais é 3. Desta forma o valor do parâmetro só exibirá o valor
3.142, após dois cliques na seta azul, quando o valor do parâmetro for 3.14209.
4.2.2.
Controles Gráficos
Ao criar um controle, clicando no botão de sinal de positivo, também
aparecerá uma janela que possibilitará selecionar o tipo de controle, bastando desta
forma escolher a opção “gráfico”, e nesta mesma janela escolher um nome para
identificação. Supondo que seja criado um controle gráfico de nome “g”,
automaticamente, no painel de configuração, é criado um ponto de coordenadas
”g.x” e “g.y”, que poderá ser visualizado na cena. Simultaneamente serão criados
dois controles numéricos com identificadores “g.x” e “g.y”, visualizados no painel. A
cena conterá poderá conter os dois controles numéricos, o “g.x” e “g.y”, bastando
apenas que em cada um deles o campo “región” esteja selecionado “norte” ou “sur”,
e não “exterior”. Abaixo temos a imagem de duas cenas com os controles numéricos
na região norte, sendo que na primeira cena o controle gráfico, ou seja, o disco de
cor azul com borda preta, possui as coordenadas ( 0 ; 0 ), enquanto na segunda
cena possui as coordenadas ( 8,2 ; 2,5 ).
67
A seguir temos a imagem da parte do painel de configuração, referente a
“gráfico”.
O campo “pos” é o ponto inicial do controle gráfico sendo expresso por meio
de um par ordenado.
68
Os dois quadrados da imagem acima, preenchidos pelas cores preta e azul,
são as cores utilizadas no controle gráfico da cena anterior. O primeiro quadrado
indica a cor utilizada na circunferência do disco e o segundo a cor do interior, ou
seja, do círculo. As cores podem ser alteradas, bastando clicar nos quadrados,
escolhendo outras.
O campo “tamaño” corresponde ao raio do círculo ou da circunferência,
podendo ser qualquer número ou expressão positiva.
O campo “constricción” é uma equação que restringirá o movimento do círculo
sobre a cena, podendo ser qualquer expressão ou ser vazia. Caso o campo esteja
vazio, o círculo não estará limitado em seu movimento.
O campo “texto” é a etiqueta que acompanha o círculo. O que for escrito neste
campo aparecerá na cena ao lado do controle gráfico.
O campo “decimales” indica o número de casas decimais apresentadas no
número escrito no campo “texto”. O programa separa a parte inteira de um número
de sua parte decimal por meio de um ponto (exemplo: 3,14 = 3.14). A vírgula é
utilizada para separar as coordenadas de um par ordenado. Para que a função
“decimales” funcione, o número escrito no campo “texto” deve estar entre colchetes.
O campo “rastro” ao ser selecionado, indicará os caminhos percorridos pelo
controle gráfico, deixando um rastro de seu percurso. Neste caso é possível alterar a
cor, bastando clicar no quadrado ao lado desta função.
O campo “dibujar-si”, que em português significa “desenhar se”, permite impor
uma condição, para que o controle gráfico seja exibido. Abaixo segue a imagem de
uma cena que contém o plano cartesiano e um controle gráfico denominado “A”.
69
No campo “dibujar-si”, colocaremos a seguinte condição: valor da abscissa de
“A” deverá ser maior que zero. A expressão colocada no campo “dibujar-si” será
“A.x>0” (sem aspas). Neste caso é preciso que “rastro” esteja selecionado. Desta
forma quando “A” for deslocado para esquerda ele e o rastro aparecerão se A estiver
a direita do eixo y e ficarão ocultos se A estiver a esquerda do eixo y.
Na imagem abaixo o controle gráfico A está sendo arrastado para a esquerda
do eixo y.
Já nesta próxima imagem, continuação da anterior, o mouse continua
arrastando o controle gráfico, porém o disco e seu rastro não aparecem.
70
O usuário pode mover o controle gráfico, arrastando-o com o mouse ou
utilizando as teclas de direção do teclado. Quando um controle gráfico é selecionado
na cena, uma circunferência de cor branca ou preta aparecerá em seu interior.
Quando os controles numéricos associados a um controle gráfico estão
ativados, o usuário pode trocar suas coordenadas com as setas de controles azul ou
vermelha.
A seguir é apresentada a imagem de uma cena Descartes que contém três
controles gráficos “A”, “B” e “C”, cada um com o campo “constricción” preenchido de
forma diferente. No campo de controle “A” o campo “constricción” está escrito com a
expressão y=sen(2*(x+6)), formando a curva onde o disco “A” pode percorrer. No
campo de controle “B” o campo “constricción” está escrito com a expressão
x^2+y^2=4, formando a circunferência onde o disco “B” pode percorrer. E por fim, no
campo de controle “C” o campo “constricción” está escrito com a expressão
x=6+sen(2*y), formando a curva onde o disco “C” pode percorrer.
71
4.3. Auxiliares
Chamam-se auxiliares às constantes, variáveis, vetores, funções e algoritmos
que o autor de uma cena Descartes possa definir e utilizar. Os auxiliares de uma
cena podem ser editados quando selecionada a opção “Auxiliares” do painel de
configuração.
Como ocorre em outras opções do painel de configuração, esta opção se
divide em duas partes, a da esquerda e a da direita. A esquerda aparece a lista de
todos os auxiliares da cena, porém no exemplo da imagem acima só aparece a
72
constante pi. O painel de configuração é diferente para cada tipo de auxiliar, nele é
possível editar todos os parâmetros que definem o auxiliar selecionado na lista.
Clicando no botão azul de edição “Auxiliares”, aparecerá uma janela de texto
com todos os códigos dos auxiliares, um em cada linha. Este texto pode ser editado
manualmente nesta janela.
Para criar um novo auxiliar, deve-se clicar no botão com o sinal de positivo
que abrirá uma janela com as seguintes opções “variable”, “constante”, “vector”,
“función” e “algoritmo”.
Escolhido o tipo de auxiliar, deve-se escrever no campo “auxiliar”, logo abaixo,
o nome do auxiliar que servirá de referência. Caso não seja escrito nome para o
auxiliar, o programa oferece para cada tipo um deles uma letra e um número
correspondente a posição do auxiliar. A letra “v”, em minúsculo, para “variable”, a
letra “V”, em maiúsculo, para “vector”, “c” para “constante”, “f” para “función” e “a”
para “algoritmo”. Caso exista um auxiliar e for inserido um outro, por exemplo o
“algoritmo”, a identificação deste auxiliar será “a2”, a letra conforme explicado e o
número dois referente ao segundo auxiliar do painel.
73
A seguir será analisado o funcionamento de cada auxiliar.
4.3.1.
Variables
O auxiliar variable (variável) é o tipo mais flexível, porque permite operar
outras variáveis ou ainda parâmetros de controles numéricos ou gráficos, por meio
de expressões matemáticas. Para a elaboração de expressões matemática é
necessário que as variáveis utilizadas sejam definidas anteriormente, ou seja,
apareçam antes na lista de auxiliares.
No exemplo a seguir temos a variável “raio = sqrt(P.x^2+P.y^2)”. Sqrt (x)
representa a raiz quadrada de “x”, desta forma a variável está definida como a raiz
quadrada da soma dos quadrados das coordenadas do controle gráfico P = (P.x,P.y).
74
As variáveis são recalculadas sempre que utilizadas. Observe no exemplo
uma cena com um gráfico do tipo equação para representar uma circunferência. O
raio será representado pela variável auxiliar “raio”, conforme indica a figura a seguir.
Observar-se que ao mudar a posição do controle gráfico P, a circunferência
irá se ajustar ao novo raio de modo que o ponto esteja sempre contido na mesma.
Explicaremos como definir a circunferência no tópico “Gráficos”.
75
Não se recomenda utilizar as variáveis como constantes porque torna o
funcionamento da cena mais lento. Em princípio as variáveis devem ser utilizadas
unicamente quando dependerem das abscissas ou das ordenadas de controles
gráficos (pontos) ou ainda, de controles numéricos.
4.3.2.
Constante
As constantes são os auxiliares utilizados com maior freqüência. O valor de
uma constante pode ser definido como uma expressão qualquer em termos dos
identificadores dos controles ou de outras constantes que apareçam antes na lista.
76
4.3.3.
Vectores
Um vetor possui uma lista de constantes, possuindo um identificador, “id” e
um tamanho. Abaixo segue a imagem de um painel quando adicionado o auxiliar
vetor. Neste exemplo o identificador é “vect”, o tamanho é “3” e os três elementos
possuem valor “0”.
A maneira de fazer referência a um elemento de um vetor é escrever o
identificador do vetor seguido do número do elemento entre colchetes. Os elementos
de um vetor se numeram sempre começando por 0.
A área de texto que aparece no painel de configuração de um vetor serve para
atribuir valores aos elementos do vetor. Não é necessário utilizar a área de texto,
também se pode utilizar um algoritmo para inicializar um vetor. Em particular quando
um vetor tem muitos elementos (por exemplo 1000), a maneira correta de inicializar
seus elementos é utilizar um algoritmo.
Por padrão os vetores se avaliam uma só vez, quer dizer, são constantes
absolutas, mas se o autor deseja que dependam dos parâmetros de uma cena,
deverá escolher avaliar "sempre".
77
4.3.4.
Algoritmos
Os algoritmos constituem um sistema para iniciar vetores e para programar
processos de cálculo relativamente complexos.
O painel tem três campos de texto denominados “início”, “hacer” (fazer) e
“mientras” (enquanto).
No campo “inicio” pode-se escrever uma série de atribuições e chamadas a
outros algoritmos separadas por “;” (ponto e vírgula).
Na área de texto “hacer” pode-se escrever uma série de atribuições e
chamadas a outros algoritmos separadas por “;” (ponto e vírgula) ou por um salto de
linha. Para chamar um algoritmo no início ou fazer outro, basta escrever seu nome
(como se fora uma atribuição) e separá-lo por “;” (ponto e vírgula) em início ou por
um salto de linha em fazer.
No campo “mientras” pode-se escrever uma expressão booleana.
Um algoritmo funciona assim: primeiro realiza as atribuições e chamadas a
outros algoritmos que se indicam em início, logo realiza as atribuições e chamadas a
outros algoritmos indicadas em “hacer” e logo verifica se é cumprida a condição
contida em “mientras”. Se a condição “mientras” se cumprir então volta a executar
“hacer” e volta a verificar a condição “mientras”.
78
O processo continua até que a condição “mientras” deixa de cumprir-se ou se
chegaram a 10000 repetições (este limite é uma válvula de segurança para proteger
ao autor e ao usuário de possíveis enganos que pudessem bloquear o navegador).
Se a condição “mientras” ficar em branco o algoritmo realiza as atribuições
em “hacer”
uma única vez. A estrutura de algoritmos do nippe Descartes
corresponde ao “do .. while” das linguagens de programação C e Java e ao “repeat
... while” de Pascal.
Para realizar uma atribuição condicional se pode utilizar a construção: “A?a:b”
Em que “A” é uma expressão booleana e “a” e “b”são os dois valores que se
atribuirão conforme se cumpra ou não a condição “A”.
Exemplo:
e=(x>0)?(2*pi*x):0 atribui a “e” o valor (2*pi*x) se x>0 e 0 se x<=0.
Esta construção corresponde (parcialmente) ao “if ... else ...” das linguagens
de programação.
O painel de algoritmos permite decidir se estes se avaliam uma só vez ou
sempre. Os algoritmos podem servir para inicializar vetores. Os que se avaliam uma
só vez se executam só ao iniciar a cena ou quando se clica no botão inicio, assim
servem para inicializar vetores que permanecem constantes durante toda a interação
do usuário com a cena. Os algoritmos que se avaliam sempre, executam-se cada
vez que há uma mudança em um controle, seja numérico ou gráfico, com o qual
servem para avaliar vetores que dependem dos parâmetros dos controles. Quando
um algoritmo se chama a partir de outro, executa-se, independentemente de se estar
marcado como avaliar uma só vez ou sempre.
79
A estrutura dos algoritmos é utilizada na animação. De fato a animação
é um algoritmo especial que atualiza a cena depois de cada passo.
4.3.5.
Funciones
As “funciones” (funções) atribuem um número real a cada valor de sua
variável (ou a cada conjunto de valores de suas variáveis). As funções têm um
identificador (ou nome), uma ou mais variáveis e uma expressão em termos dessas
variáveis.
Estes são exemplos de funções de uma variável com seus identificadores e
sua variáveis independentes:
expressão
identificador
variável
f(x)=sin(3*x+2)
f
x
g(y)=A*exp(-(y^2)/(s^2))
g
y
Area(radio)=(pi*radio^2)/2
Area
radio
Estes são exemplos de funções de duas ou mais variáveis com seus
identificadores e suas variáveis independentes:
expressão
identificador
variáveis
f(x,y)=sqrt(x^2+y^2)
f
x,y
Fun(x,y,z)
Fun
x,y,z
Volume(a,b,c)=4*pi*a*b*c/3
Volume
a,b,c
Os nomes específicos das variáveis de uma função não são importantes, só
servem para identificar as variáveis dentro da expressão e lhes atribuir ali um papel.
80
As funções se avaliam somente quando são chamadas explicitamente (por
exemplo, por um algoritmo, por um gráfico, pela animação ou pela restrição de um
controle gráfico que se move).
O painel de configuração de uma função tem este aspecto:
O campo onde aparece o identificador da função deve incluir os
identificadores das variáveis entre parêntese e separados por vírgula para dar
sentido à expressão que aparece ao lado direito. A expressão que aparece à direita
do “=” pode ser ou incluir um termo condicional, por exemplo func(x)=(x<0)?0:1 é a
função que vale 0 para x<0 e 1 para x>=0.
Uma expressão booleana vale 1 quando é verdadeira e 0 quando é falsa pelo
qual a função anterior também poderia escrever-se como func(x)=(x>=0).
No item 4.3.6. tem-se uma lista de todas as funções matemática e como
devem ser escritas para que sejam corretamente compiladas pelo nippe Descartes.
O domínio pode ser uma expressão booleana em termos das variáveis da
função. O programa utiliza o domínio para decidir se tenta avaliar a função. Se em
um ponto a expressão do domínio não se cumpre, a avaliação não ocorre e o
programa gera uma exceção, por exemplo, se está desenhando o gráfico desta
função, o desenho que corresponde a este ponto não será realizado e se passa ao
81
seguinte ponto. Quando o campo do domínio está vazio se considera que o domínio
da função não tem restrições, quer dizer, qualquer conjunto de valores de suas
variáveis está no domínio.
Quando o programa tenta avaliar uma função em um ponto onde tem uma
singularidade, gera-se uma interrupção, como se o ponto não estivesse no domínio.
portanto não é necessário excluir do domínio de uma função seus pontos singulares,
o programa já o faz automaticamente. Só terá que especificar o domínio caso se
deseja restringir o domínio natural de uma função.
Às vezes não se pode definir uma função somente mediante uma expressão,
mas sim sua avaliação requer um processo mais complicado. Nestes casos o autor
pode marcar algoritmo, com o qual aparece acima do campo para a expressão da
função, o painel de definição de um algoritmo, e nele pode descrever o algoritmo de
avaliação da função. O seguinte exemplo mostra como pode uma função utilizar um
algoritmo. Trata-se da função Fatorial Fact(x) que calcula o fatorial do maior inteiro
menor ou igual a x.
O algoritmo definido neste painel se executa cada vez que quer avaliar a
função, pelo qual os valores calculados no algoritmo podem utilizar-se para definir o
valor da função.
As funções podem ter qualquer número de variáveis, inclusive zero. Para
82
avaliar uma função sem variáveis se deve escrever um par de parêntese depois de
seu nome (por exemplo func( ) ). As funções sem variáveis podem servir como
algoritmos de cálculo que devolvem um valor real. Também pode haver funções que
não devolvem nenhum valor, as quais podem usar-se como algoritmos que admitem
parâmetros. No exemplo seguinte se apresenta uma função de sete variáveis.
Euler(x,y,vx,vy,ax,ay,dt) chamada Euler que é em realidade uma implementação do
método de integração do Euler para calcular a posição de uma partícula que parte da
posição (x,y) com uma velocidade (vx,vy) e que se move com aceleração constante
(ax,ay) durante um tempo dt e enquanto e>0.
Esta função pode ser chamada a partir de qualquer outra função, algoritmo ou
de uma animação ao chamá-la não terá que atribuí-la a uma variável, basta escrever
seu nome e os parâmetros entre parênteses separados por vírgula.
4.3.6.
Funções Matemáticas e Operadores no nippe Descartes
As funções matemáticas reconhecidas pelo nippe Descartes, além das que
estejam explicitamente definidas em uma cena pelo usuário, são as seguintes:
Funções de uma variável (x):
83
sqr
sqr(x)=x*x
sqrt
sqrt(x)=raiz quadrada de x
raíz
sqrt(x)=raiz quadrada de x
exp
exp(x)=exponencial natural de x=e^x
log
log(x)=logaritmo natural de x
log10
log10(x)=logaritmo base 10 de x
abs
abs(x)=valor absoluto de x
ent
ent(x)=maior inteiro n tal que n<x
sgn
sgn(x)=signo de x (1 si x>0,-1 si x<0,0 si x=0)
ind
ind(b)=indicadora de b (1 si b=true, 0 si b=false)
sin
sin(x)=seno de x
sen
sen(x)=seno de x
cos
cos(x)=cosseno de x
tan
tan(x)=tangente de x
cot
cot(x)=cotangente de x
sec
sec(x)=secante de x
csc
csc(x)=cossecante de x
sinh
sinh(x)=seno hiperbólico de x=(exp(x)-exp(-x))/2
senh
senh(x)=seno hiperbólico de x=(exp(x)-exp(-x))/2
cosh
cosh(x)=cosseno hiperbólico de x=(exp(x)+exp(-x))/2
tanh
tanh(x)=tangente hiperbólica de x=sinh(x)/cosh(x)
coth
cot(x)=cotangente hiperbólica de x=cosh(x)/sinh(x)
sech
sech(x)=secante hiperbólica de x=1/cosh(x)
csch
csch(x)=cossecante hiperbólica de x=1/senh(x)
asin
asin(x)= arco seno de x
asen
asen(x)= arco cuyo seno de x
acos
acos(x)= arco cuyo coseno de x
atan
atan(x)=arco tangente de x
Funções de duas variáveis (x,y):
min
max
min(x,y)=mínimo de x e y
max(x,y)=máximo de x e y
Também há possibilidade de escolher um número de forma aleatória e com
distribuição uniforme no intervalo [0,1] : rnd.
84
4.4. Gráficos
Gráficos são todos os objetos que podem ser desenhados em uma cena,
como pontos, segmentos, curvas, arcos, etc... Os gráficos podem ser editados no
painel de configuração, bastando selecionar a opção “gráficos”. Abaixo segue a
imagem referente a parte de edição da opção “gráficos”.
Este painel também é dividido em duas partes. À esquerda é exibida a lista de
todos os gráficos da cena e à direita um local de edição, que também pode ser
chamado de painel, que será diferente para cada tipo de gráfico.
Clicando no botão azul de edição “Gráficos”, também aparecerá uma janela
de texto com todos os códigos dos gráficos, um em cada linha, havendo também a
possibilidade de edição na forma manual.
Para criar um novo objeto gráfico, deve-se clicar no botão com o sinal de
positivo que abrirá uma janela com as seguintes opções “ecuación”, “curva”,
“sucesión”, “punto”, “segmento”, “flecha”, “polígono”, “arco”, “relleno” e “texto”.
85
Apesar de cada objeto gráfico possuir seu próprio painel de edição, existe um
espaço comum entre eles, conforme pode ser visto na próxima imagem.
O campo “fondo” – Deve-se selecionar fundo quando um gráfico está sempre
fixo na cena, quer dizer, não depende dos controles nem dos auxiliares o gráfico só
se desenha no "fundo" da cena e somente se atualiza quando se clica em “início”,
quando se modifica a escala ou a posição da origem (O.x e O.y). É conveniente
defini-lo como de fundo para reduzir o tempo de processamento da cena ao poupar
trabalho do processador que não terá que desenhá-lo cada vez que há uma
mudança na cena.
86
O campo “rastro” – Se a opção rastro estiver selecionada o gráfico deixa uma
marca pela trajetória na cena. Pode-se alterar a cor do rastro utilizando o botão ao
lado do seletor “ver”. O botão de “limpar” permite apagar os rastros dos gráficos.
O campo “dibujar-si” – É um campo de texto onde se pode escrever uma
expressão booleana. O gráfico será desenhado se o campo estiver vazio ou se a
expressão tiver valor verdadeiro.
O campo “familia” – Permite converter um gráfico em toda uma família de
gráficos dependente de um parâmetro. Ao selecionar família se ativam os outros
campos da última linha: parâmetro, intervalo e passos.
O campo “parámetro” – Deve ser uma só palavra, preferivelmente curta. Por
padrão é “S”. O nome do parâmetro se pode utilizar na definição do objeto gráfico
para definir a família. O programa desenhará os gráficos com os valores do
parâmetro percorrendo o intervalo especificado no número de passos escolhidos.
O campo “intervalo” – Deve conter duas expressões reais entre colchetes e
separadas por uma vírgula. O padrão é [0,1]. O parâmetro percorre o intervalo
definido entre o primeiro e o segundo valor no número de passos especificado.
87
O campo “pasos” – É o número de subintervalos iguais em que se divide o
intervalo.
4.4.1.
Ecuación
O painel de configuração específico do tipo equação tem este aspecto:
Os campos acima podem ser descritos como segue:
O campo “Expresión” de texto sem nome. Seu conteúdo deve ser uma
equação em x e y. O objeto gráfico é associado à equação como o lugar geométrico
dos pontos que a satisfazem.
Nippe Descartes diferencia três tipos de equações e dá um tratamento
diferente a cada um para obter o gráfico correspondente.
A tabela a seguir resume as aplicações desses campos
color
O botão que aparece à direita do campo de texto para a
expressão mostra a cor com que se desenhará o gráfico.
Fazendo um clique sobre o botão aparece a janela de
configuração de cores (ver).
A cor padrão de todos os gráficos é azul.
88
ancho
relleno+
Altera a espessura dos gráficos em pixels.
Se a equação for da forma e=f(x) e o seletor “relleno+” está
ativado, o espaço entre o eixo x e o gráfico, acima do eixo,
será
preenchido
com
a
da
cor
selecionada.
Analogamente para o caso da equação da forma x=g(y), será
preenchido a direita do eixo y.
relleno-
Se a equação for da forma e=f(x) e o seletor “relleno+” está
ativado, o espaço entre o eixo x e o gráfico, abaixo do eixo,
será
preenchido
com
a
da
cor
selecionada.
Analogamente para o caso da equação da forma x=g(y), será
preenchido a esquerda do eixo y.
visible
Se este seletor está selecionado, na parte inferior da cena
aparecerá um campo de texto onde se vê a expressão da
equação na mesma cor do gráfico e com a cor de fundo da
cena.
Se houver várias equações ou curvas em uma cena, abaixo
dela aparecem os campos de texto de todas e cada uma
das que são visíveis. Se forem muitas os campos podem
resultar muito pequenos, por isso se recomenda não deixar
visíveis os campos de texto de mais de três ou quatro
equações ou curvas.
editable
Este campo só se pode utilizar se visível está selecionado.
Quando “editable” é ativado, o conteúdo do campo de texto
que aparece sob a cena com a equação (ou curva) pode ser
modificado pelo usuário. Esta opção pode ser útil quando se
deseja que o aluno pratique a escritura de fórmulas.
Dica: Há um pequeno conjunto de formas canônicas de equações da reta e
das curvas cônicas que recebem um tratamento especial. Caso sejam escritas
exatamente como indicado abaixo (sem trocar nenhuma letra) os desenhos são
formatados mais rapidamente. Estas são as formas canônicas que Descartes
reconhece:
y=m*x+b
x=m*y+a
A*x+B*y=C
e=sqrt((x-Fx)^2+(y-Fy)^2)/(d+(x-Fx)*cos(t)+(y-Fy)*sen(t))
e=sqrt((x-Fx)^2+(y-Fy)^2)/(d-((x-Fx)*(Dx-Fx)+(y-Fy)*(Dy-Fy))/d)
89
4.4.2.
Curva
O painel de configuração específico do tipo curva tem este aspecto:
expresión
É o campo de texto que aparece na primeira linha do
painel. O gráfico é obtido por meio de uma
parametrização da curva.
parámetro
O programa desenhará o polígono com vértices:
(f(t),g(t)) para t entre o primeiro e o último dos valores
do intervalo.
intervalo
pasos
Deve conter duas expressões ti e tf reais entre
colchetes e separadas por uma vírgula, quer dizer,
[ti,tf]. O intervalo padrão é [0,1].
O parâmetro percorre o intervalo definido entre o
primeiro e o segundo valor no número de passos
especificado e desenha a curva como um polígono
com vértices (f(t),g(t)) com
t = ti,
t = ti+(tf-ti)/pasos,
t = ti+2*(tf-ti)/pasos,
...
t = ti+passos*(tf-ti)/pasos = tf.
Em outras palavras, passos é o número de
subintervalos iguais em que se divide o intervalo.
color
O botão que aparece à direita do campo de texto
para a expressão mostra a cor com que se
desenhará o gráfico.
90
ancho
Altera a espessura dos gráficos em pixels.
relleno
Se o seletor cheio está ativado, o programa preenche
o interior da curva (considerada como um polígono).
4.4.3.
Sucesión
O painel de configuração específico do tipo sucesión (seqüência) é:
expresión
É o campo de texto na primeira linha do painel. Seu
conteúdo deve ser uma expressão do tipo (x,y), onde
x e y são expressões reais dependentes de n,que
representam as abscissa e ordenada dos pontos da
seqüência.
color
O botão que aparece à direita do campo de texto
para a expressão mostra a cor com que se
desenharão os pontos da sucessão.
tamaño
É o raio dos "pontos" da sucessão. Em realidade o
programa desenha discos de raio igual ao tamanho.
dominio
Deve ser uma expressão da forma [n1,n2] onde n1 e
n2 são dois inteiros que se interpretam como o início
e o final do intervalo de inteiros que n percorrerá. O
programa desenhará os pontos (x,y) para cada valor
de n entre n1 e n2.
Uma sucessão é uma família de pontos mas com parâmetro inteiro.
91
4.4.4.
Punto
“Punto” corresponde a ponto.
expresión
É o campo de texto que aparece sem etiqueta como
primeira linha do painel. Seu conteúdo deve ser par
ordenado correspondente as coordenadas do ponto.
color
O botão que aparece à direita do campo de texto para a
expressão mostra a cor com que se desenhará o ponto.
tamaño
É o raio do "ponto". Na realidade o programa desenha o
ponto como um disco de raio igual ao definido em
“tamaño”.
texto
É um texto que se escreve um pouco acima e à direita, na
mesma cor do ponto. Pode ser qualquer texto que, além
disso, pode incluir valores numéricos variáveis.
decimales
É o número de decimais com os que se escreverão os
números incluídos no texto.
4.4.5.
Segmento
O painel de configuração específico do tipo segmento tem este aspecto:
92
expresión
É o campo de texto que aparece sem etiqueta como
primeira linha do painel. Seu conteúdo deve ser uma
expressão do tipo (X1,Y1)(X2,Y2), onde (X1,Y1) são
as coordenadas do início do segmento e (X2,Y2) as
do final do segmento.
color
O botão que aparece à direita do campo de texto
para a expressão mostra a cor com que se
desenhará o gráfico.
tamaño
É o raio dos discos dos extremos do segmento, que
se desenham como dois discos.
ancho
É a espessura segmento em píxeis.
texto
É um texto que acompanha o segmento e se escreve
a 1/3 do caminho entre o início e o final do segmento.
decimales
É o número de decimais com os que se escreverão
os números incluídos no texto.Pode ser qualquer
número ou expressão.
4.4.6.
Flecha
O painel de configuração específico do tipo “flecha” (vetor) tem este aspecto:
A seguinte tabela explica estes campos.
expresión
Seu conteúdo, igual a no caso de um segmento,
deve ser uma expressão do tipo (X1,Y1)(X2,Y2),
onde (X1,Y1) são as coordenadas do início do vetor
93
(X2,Y2) as da ponta.
color
É a cor da borda ou bordo da flecha, seu interior se
desenha na cor flecha.
flecha
É a cor do interior do vetor.
ancho
É a espessura segmento em píxeis.
punta
É a espessura da ponta da flecha.
texto
É uma etiqueta que acompanha o vetor e se escreve
a 1/3 do caminho entre o início e a ponta.
decimales
É o número de decimais com os que se escreverão
os números incluídos no texto.
4.4.7.
Polígono
O painel de configuração específico do tipo polígono tem este aspecto:
expresión
Seu conteúdo deve ser uma expressão do tipo
(x1,y1)(x2,y2)...(xN,yN), onde xn e yn são expressões
reais arbitrárias.
O gráfico é o polígono com vértices nos pontos
(xn,yn).
color
O botão que aparece à direita do campo de texto
para a expressão mostra a cor com que se
desenhará o polígono.
ancho
É a espessura segmento em píxeis.
94
relleno
4.4.8.
Se o seletor cheio está ativado, o programa preenche
o interior do polígono.
Arco
O painel de configuração específico do tipo arco tem este aspecto:
centro
Coordenadas do centro do arco.
radio
É o raio do arco.
inicio
É o início do arco. Há duas opções. Pode ser uma
expressão real arbitrária que se interpretará como o
ângulo inicial em graus, ou pode ser uma expressão
da forma (x1,y1) que se interpretará como um ponto.
No segundo caso o arco começa no segmento que
une ao centro (X,Y) com o ponto (x1,y1).
fin
É o final do arco. Há duas opções. Pode ser uma
expressão real arbitrária que se interpretará como o
ângulo final em graus, ou pode ser uma expressão da
forma (x2,y2) que se interpretará como um ponto. No
segundo caso o arco termina no segmento que une
ao centro (X,Y) com o ponto (x2,y2).
ancho
É a espessura segmento em píxeis.
relleno
Se o seletor cheio está ativado, o programa preenche
o interior do arco.
texto
decimales
É um texto que acompanha o centro do arco.
É o número de decimais com os que se escreverão
os números incluídos no texto.
95
4.4.9.
Relleno
O painel de configuração específico do tipo relleno tem este aspecto:
Como pode ver-se, trata-se unicamente de um ponto e uma cor. O ponto
funciona como uma indicação do ponto inicial de um processo de preenchimento que
pinta com a cor selecionada a região fechada dentro da qual se encontra o ponto.
expresión
Color
4.4.10.
Um par ordenado indicando a posição do ponto de
referência.
A cor usada no preenchimento.
Texto
O painel de configuração específico do tipo texto tem este aspecto:
96
expresión
Seu conteúdo deve ser uma expressão do tipo [X,Y],
onde x e y são expressões reais quaisquer que
representam as abscissa e ordenada do começo do
texto, mas medidos em pixels a partir do vértice
superior esquerdo da cena.
color
O botão que aparece à direita do campo de texto
para a expressão mostra a cor com que se escreverá
o texto.
texto
É o conteúdo propriamente dito do gráfico de tipo
texto. Pode ser qualquer texto, pode ter várias linhas
e além disso pode incluir valores numéricos variáveis.
Para isso a variável deve aparecer entre colchetes.
decimales
É o número de decimais com os que se escreverão
os números incluídos no texto. Pode ser qualquer
número ou expressão.
4.5. Animación
“Animación”, que em português significa “animação”, é um algoritmo especial.
A estrutura das animações é igual a dos algoritmos constantes exibidas neste
capítulo no item “Auxiliares”.
Na próxima imagem temos o painel de configuração de “Animación”.
À direita existem os campos “início”, “hacer” e “mientras”, conforme visto
anteriormente em algoritmo, item “Auxiliares” deste capítulo.
97
À esquerda temos o campo “Animación”, que deve estar selecionado para que
haja uma animação, pois caso ele esteja desabilitado, todos os demais campos
também estarão desabilitados, sejam os da esquerda: “pausa”, “controles”, “auto” e
“repetir”, como os da direita.
Quando a animação estiver ativada, na cena aparecerá o botão “animar”
abaixo à direita, possibilitando ao usuário iniciar a animação. O botão “animar”
alterna com o botão “pausa” quando clicado.
Abaixo temos a imagem de uma cena que contem uma animação. Nela é
possível ver o botão “animar”. A imagem demonstra o momento em que a cena esta
estática.
Nesta próxima imagem é apresentado o botão “pausa”, representando o
momento em que a cena está em movimento. Caso se clique no botão “pausa” a
cena será congelada, sendo apresentado novamente o botão “animar”.
98
No painel de configuração, à esquerda, abaixo de “Animación”, temos o
campo “pausa”, onde existe a possibilidade de se escrever um número inteiro
positivo qualquer que determinará o tempo que se deixa passar entre um passo e
seu subseqüente na animação. O tempo está em milisegundos, ou seja, a milésima
parte do segundo. Caso seja colocado o valor 1000 (mil), teremos 1000
milisegundos, o que corresponde a 01 (um) segundo. Desta forma cada quadro da
animação será passado após a pausa de 01 (um) segundo. Assim quanto menor o
valor, mais rápida a animação. Porém o valor mínimo será o de 20 (vinte). Qualquer
valor inferior a este será entendido como 20 (vinte). Caso nenhum valor seja
colocado o sistema rodará a animação em 50 (cinqüenta) milisegundos. Dependendo
do valor, sendo este alto, a pausa poderá ser constante, não havendo animação.
Abaixo da “pausa”, temos o campo “controles”. Caso esta opção esteja
ativada, durante a animação aparecerá um painel de controle da animação com
botões de pausa, parada ou “stop”, retroceder ao início, retroceder um quadro,
avançar um quadro e avançar ao final. Abaixo a imagem do painel de controle.
Caso a opção “controles” estiver ativada, o painel de controle será exibido na
cena apenas no momento em que a animação estiver sendo executada. Caso a
animação estiver em pausa, o painel não será exibido.
99
A opção “auto” tem a função de fazer com que a animação rode
automaticamente no momento em que a página de Internet for aberta, do contrário
será necessário clicar no “animar” constante na cena, para que a animação inicie.
A animação é realizada quadro a quadro, até completar o ciclo, chegando ao
fim. Na animação em questão as “cordas” de cores branca e vermelha dão uma volta
completa em torno da “corda” de cor lilás ou roxa, completando um ciclo. Caso a
opção “repetir” estiver desativada, a animação ocorrerá uma única vez, parando em
seguida. Entretanto se a opção “repetir” estiver selecionada, a animação se repetirá
automaticamente.
100
Capítulo 5 - Gescenas - Gestor de cenas
O gestor de Cenas Gescenas é um programa que permite criar, abrir e editar
páginas que contenham cenas Descartes. Desta forma é possível adicionar cenas,
como também excluí-las, modificá-las e salvá-las. Além disso, o gestor de cenas
permite também editar o código da página sobre o texto HTML.
Para que Gescenas funcione é preciso que ele esteja na mesma pasta que os
arquivos “descartes.jar” e “descartes3.jar”.
O gestor de cenas está disponibilizado na parte de download da página,
http://www.projetodescartesbr.com/, assim como os referidos arquivos “jar”.
Após baixar o arquivo “gescenas.zip” e descompactá-lo, abrigando em uma
pasta que contenha os arquivos “jar”, basta executar o arquivo “gescenas.exe” e será
aberta a janela inicial do gestor, com fundo verde e com uma simples barra de
menus com as opções “Archivo” (arquivo), ”Editar”, “Insertar” (inserir) e “Html”.
101
Para abrir, fechar, criar e salvar novos arquivos ou páginas deve-se usar o
menu “Archivo” (arquivo), onde ficarão ativados apenas os itens “Nuevo” (novo),
“Abrir” e “salir” (sair).
A opção “abrir” serve para abrir qualquer página HTML que esteja acessível
no disco rígido do computador. Selecionando esta opção será possível localizar
qualquer arquivo HTML para que o mesmo seja aberto.
102
Quando um uma cena estiver aberta, os demais itens do menu “Archivo”
(arquivo) serão habilitados.
A opção “guardar”, salva no disco todas a mudanças realizadas na página que
está sendo editada.
A opção “Guardar como”, salva a página em outro arquivo, com outro nome.
A opção “Actualizar” (atualizar) executa as modificações realizadas. Se no
momento de clicar nesta opção houver mudanças que ainda não foram salvas, o
gestor de cenas pergunta se deseja salvar as mudanças antes de atualizar.
A opção “Cerrar” (fechar) fecha a página HTML sem sair do gestor. Caso esta
opção seja acionada e a página HTML tiver modificações que ainda não foram
salvas, o gestor pergunta se deseja salvar as mudanças antes de fechar.
A opção “Salir” (sair) fecha o aplicativo Gescenas. Também nesta opção é
perguntado ao usuário se este deseja salvar as modificações realizadas caso o
arquivo tenha sido trabalhado sem ter sido salvo.
103
A opção “Novo” criar uma nova página HTML. Ao criar um novo arquivo
surgirá a janela “Guardar HTML” com “Nome do arquivo” em branco.
Para exemplificarmos, salvaremos esta novo arquivo com o nome de
“novo.htm”.
104
Abrindo este arquivo chamado de “novo.htm” no bloco de notas, será possível
verificar que o gestor criou um código fonte básico para ele.
5.1. Modificar páginas de Internet e cenas
Ao abrir uma página que contenha cenas Descartes no aplicativo Gescenas,
todas as cenas serão exibidas uma em baixo da outra.
Existem duas opções de exibição das cenas, uma onde são mostrados os
105
respectivos códigos fonte e outra onde os mesmos são ocultados, bastando apenas
selecionar as opções “Ocultar HTML” e “Mostrar HTML” no menu ”Html”.
Ativando a opção “Mostrar HTML”, o programa exibirá o código HTML
correspondente a cada cena exibida. O código antecederá a cena.
106
5.2. Adicionar ou inserir cenas
Para adicionar cenas em uma página de Internet utiliza-se o menu “Insertar”
(inserir).
107
O gestor possibilita a inserção de novas cenas em duas dimensões
(Descartes 2) ou em três dimensões (Descartes 3), como também cenas já
existentes ou cenas que foram copiadas para a área de transferência.
A opção “Agregar escenas” (Adicionar cenas) adiciona a cena desejada no
final de todas as cenas já abertas no Gescenas.
A opção “Insertar escenas”, que em português significa “Inserir cenas”, coloca
a cena antes daquela já selecionada, ou seja, antes da cena que possui uma borda.
A borda que contorna a cena presente no Gescenas é acionada quando pressionado
o botão negro marcado com um “S” que aparece à direita de cada cena. Quando a
cena está com a referida borda, ela está selecionada.
108
Vimos que no menu “Html” pode ser visualizado o código fonte de cada cena.
Para inserir cenas, escrevendo no código fonte, a opção “Mostrar HTML” deve estar
selecionada e o cursor posicionado no ponto do código HTML onde se deseja
colocar a cena. Quando o código estiver visível no gestor, as opções “insertar
párrafo” (inserir parágrafo) e “insertar párrafo con escenas” (inserir parágrafo com
cena) não estarão mais esmaecidas no menu “Insertar”.
109
Para que uma cena seja inserida no código fonte, o cursor deverá estar dentro
do parágrafo, ou seja, entre <p> e </p>.
A opção “Insertar párrafo com escenas” (Inserir parágrafo com cena) inserirá
uma nova cena dentro de um novo parágrafo, portanto convém colocar o cursor fora
de um parágrafo já existente, ou seja, depois de </p>, antes de <p>. Já a opção
“Insertar párrafo” (Inserir parágrafo) inseri um novo parágrafo, devendo ser
adicionada no código fonte entre os comandos <p> e </p>.
Como já visto, é possível inserir cenas já salvas, ou seja, já existentes.
Quando adicionamos novas cenas (Descarte 2 ou Descarte 3), elas aparecem
vazias, porém totalmente operativas. Quando for dado um duplo clique na cena ou
um único clique com o botão direito, será aberto o painel de configuração.
110
5.3. Cortar, copiar e colar cenas
À direita de cada cena existe um botão de cor preta com a letra “S”, que
possibilita a seleção da cena, conforme visto anteriormente.
Quando a cena estiver selecionada, no menu “Editar” se ativarão as seguintes
opções:
- “Copiar escena” (copiar cena) onde possui a função de salvar uma cópia que
esteja armazenada no “portapapeles” (área de transferência);
- “Pegar escena” (colar cena) tem a função de colar uma cena previamente
111
copiada no lugar de uma já existente, substituindo-a. Primeiramente a cena será
selecionada acionando o botão “S”, posteriormente copiada através do comando
“copiar escena”. Percebe-se que a borda ainda estará na cena copiada. Para que a
cena seja colada, deve-se selecionar outra cena com o botão “S” e acionar o
comando “pegar escena”. Esta segunda cena selecionada, nesta ação de colar, será
substituída pela que foi copiada. Caso não seja selecionada uma nova cena, a borda
permanecerá na cena copiada, e se efetuarmos o comando de colar, nesta mesma
cena, nenhuma alteração visual ocorrerá, pois a cena estará sendo colada em cima
da própria cena copiada.
- “Eliminar escena” (eliminar cena) apagar a cena selecionada.
Estas três últimas operações citadas podem ser realizadas também acionando
as teclas “Ctrl+C”, para copiar, “Ctrl+V”, para colar e “Del” para apagar.
Ainda
podemos recortar a cena, acionando “Ctrl+X”. Deve-se atentar que tais comandos só
funcionarão se a cena estiver selecionada.
A cena copiada para a área de transferência pode ser inserida na página
mediante as opções de “Insertar escenas” (Inserir cena) e “Insertar párrafo com
escenas” (Inserir parágrafo com cena) no menu Editar, escolhendo a sub opção
“portapapeles”.
Entretanto, para cortar, copiar, colar ou deletar uma parte do código HTML,
trabalha-se diretamente sobre o texto usando os comandos “Ctrl+C”, “Ctrl+X”,
“Ctrl+V” e “Del”, não sendo possível executá-los utilizando o menu.
5.4. Desfazer e refazer
Se clicarmos na opção “Deshacer” (desfazer) no menu editar, a última
mudança realizada na página será anulada. Pode-se utilizar este comando
repetidamente até chegar ao ponto inicial referente à primeira modificação realizada.
112
A opção “Rehacer” (refazer) fará com que volte o que havia sido desfeito,
também podendo utilizar este comando repetidamente até chegar à última versão da
página, ou seja, antes do primeiro comando “Deshacer”.
113
Capítulo 6 – Atividades para alunos do ensino médio
No ano de 2007 algumas atividades desenvolvidas com o nippe Descartes
foram utilizadas em três turmas do segundo ano do ensino médio do Colégio de
Aplicação da Universidade Federal do Rio de Janeiro. Na ocasião o professor
Fernando Villar introduziu algumas cenas Descartes na página de Internet do
Laboratório Virtual, espaço destinado às atividades educacionais do Setor Curricular
de Matemática do CAp-UFRJ.
As atividades tinham como objetivo desenvolver as habilidades de análise
qualitativa e as implicações gráficas na variação de parâmetros em funções do tipo
exponencial e na composição destas com funções modulares.
Os alunos tiveram acesso às atividades via internet através de uma a página
(http://www.cap.ufrj.br/matematica/projetos/laboratoriovirtualdematematica/Exponenci
al2007.html) onde estava disponível uma Lista online (LOL). As atividades utilizadas
também estão disponíveis na página http://www.projetodescartesbr.com e no anexo
C.
Nesta lista os alunos puderam observar e avaliar a influência dos parâmetros
na representação gráfica do tipo exponencial na seqüência de atividades resumida a
seguir:
Atividade 1: Gráfico da função f(x)=BAx + C
Atividade 2: Gráfico da função f(x)=BA|x| + C
Atividade 3: Gráfico da função f(x)=BA-|x| + C
Atividade 4: Gráfico da função f(x)=BAx+D
Atividade 5: Gráfico da função f(x)=BAkx
114
Atividade 6: Gráfico da função f(x)=|BAx + C|
Atividade 7: Gráfico da função f(x)=|BAk|x|+D + C|
A observação da resolução da Lista Online por parte dos alunos serviu de
termômetro para a realização do TOL-2007, ocorrida uma semana depois. Os alunos
poderiam começar o TOL-2007 em qualquer horário no intervalo de quinta-feira a
terça-feira da semana seguinte. Entretanto, a partir do início da atividade, dispunham
de apenas duas horas para a conclusão do teste. A escolha de um intervalo de dias
compreendendo um fim de semana foi proposital para facilitar e baratear o acesso
via conexão discada. Uma equipe formada por três técnicos do NCE e dois
professores do CAp-UFRJ deu suporte aos alunos nas questões operacionais e
técnicas durante os dias em que o TOL-2007 estava disponível. Apesar de alguns
problemas no servidor, ocorridos na sexta-feira pela manhã e resolvidos plenamente
no domingo, todos os alunos realizaram a atividade.
6.1. Teste Online (TOL-2007)
As atividades realizadas pelos alunos se deram no âmbito virtual, ou seja,
pela internet. Em sala de aula o professor pôde dirimir dúvidas relacionadas as
atividades antes da realização de um teste para avaliar essa forma de estudo
utilizando aplicações do nippe Descartes.
O teste também foi realizado pela internet. Detalhes sobre a aplicação do
teste podem ser obtidas em [Marinho, 2008].
A existência de um laboratório de informática no colégio possibilitou tornar
obrigatório o caráter do TOL-2007 e a utilização do nippe Descartes foi fundamental
para preparação dos alunos.
115
O TOL-2007 foi aplicado às três turmas do 2º ano do ensino médio,
totalizando 90 alunos avaliados. Consistiu em uma prova objetiva de cinco questões
com cinco opções cada. Foi uma avaliação de caráter obrigatório e equivalente a um
teste tradicional com escala de notas variando de 0,0 a 10,0 pontos e computada no
cálculo da média do 2º bimestre. Para tornar a avaliação obrigatória, o professor fez
um levantamento de quantos alunos tinham acesso à internet banda larga ou
discada. Aqueles que não tinham acesso poderiam utilizar o laboratório de
informática do colégio para realizar a atividade. Assim todos tiveram oportunidade de
realizar o TOL-2007.
O objetivo específico do TOL-2007 foi a representação gráfica de funções do
tipo exponencial com ênfase na análise qualitativa da influência dos parâmetros,
composição com função modular e resolução de inequações por meio de análise
gráfica.
Os objetivos gerais do TOL-2007 mostraram a viabilidade do uso dos recursos
computacionais para ampliar os conceitos abordados em sala de aula com a
possibilidade de perspectivas dinâmicas em questões sobre gráficos de funções.
Observou-se que muitos alunos agiam com desconfiança na realização de
testes on-line. Questionavam a possibilidade de “colar” ou de obter outros tipos de
auxílio na resolução dos testes. Mostrou-se que a quebra de paradigma proposta
pela TOL-2007 tinha implicações mais profundas no ponto de vista dos alunos do
que do próprio professor.
O uso da abordagem do TOL-2007 em uma turma no próprio colégio, no
horário regular, era inviabilizado pela ausência de espaço físico no pequeno
laboratório de informática da escola. Criou-se, a partir da limitação estrutural, uma
oportunidade de trabalho inovador.
A seguir as questões utilizadas no TOL-2007:
116
6.2. Questões do TOL-2007
(Exercício 1) Observe os gráficos abaixo:
Associe cada gráfico a uma das funções a seguir:
117
(Exercício 2) O gráfico mostra, em função do tempo, a evolução do número de
bactérias em certa cultura. Dentre as alternativas abaixo, decorridos 30 minutos do
início das observações, o valor mais próximo desse número é:
a) 18.000
b) 20.000
c) 32.000
d) 14.000
e) 40.000
(Exercício 3) Os pontos A = (1, 6) e B = (2,18) pertencem ao gráfico da função
y=nax. Então, o valor de an é:
a) 6 b) 9
c) 12 d) 16 e) 23
(Exercício 4) A melhor representação gráfica da função real definida por
2
y 
2x
 4  2x  3
x
2 1

, x≠ 0, é:
(Exercício 5) Na figura, temos os esboços dos gráficos das funções f e g,
sendo f(x) = ax . O valor de g(g (-1))+f(g (3)) é:
118
a) 1
b) 2
c) 3
d) 3/2 e) 5/2
6.3. Resultados do TOL-2007
As respostas dos alunos foram resumidas nos gráficos a seguir:
Resposta Correta:
Resposta Correta:
119
Resposta Correta:
Resposta Correta:
Resposta Correta:
Resposta Correta:
Dentre os gráficos da questão 1 observa-se que a maior incidência de erros
ocorreu justamente nos gráficos simétricos 2 e 3.
Somente um aluno errou a
questão 2.
Opção Correta: 14000
A
questão
3
pode
ser
considerada a mais difícil pela
grande
diversidade
de
respostas encontradas e pelo
número reduzido de acertos.
Opção correta: 9
120
A opção D atraiu pouco mais
de ¼ dos estudantes e a
maioria optou pela solução
correta.
Opção correta: B
Observa-se que houve uma
diversificação das respostas e a
maioria errou a questão.
Opção correta: 3
O bom desempenho dos alunos nas questões 1 e 2 do TOL indicam que as
representações gráficas foram bem assimiladas. Pode-se, portanto, conjecturar que
o uso do nippe Descartes tenha auxiliado no desenvolvimento desta habilidade.
121
Capítulo 7 – Conclusões
A idéia inicial da criação deste trabalho seria a produção de algo que pudesse
trazer alguma utilidade no campo do estudo da Matemática, principalmente em salas
de aula do ensino médio e fundamental.
Durante diversas aulas, ministradas pelo corpo docente de altíssimo nível do
Instituto de Matemática, foi possível perceber a grande disparidade no que se refere
à capacidade de abstração dos alunos expectadores. Tudo poderia ser diferente
caso formas holográficas surgissem do quadro negro e pudessem mostrar o que os
melhores alunos e o professor estivessem pensando naquele momento.
Trazer para a realidade educacional brasileira o Projeto Descartes, totalmente
voltado à área computacional vivida intensamente nos tempos atuais, atrelado à
magnífica Internet, foi o grande ideal desta pesquisa. Muito mais do que isso, diria
que este trabalho teve como objetivo popularizar e colocar no cotidiano de qualquer
professor de matemática a possibilidade de incorporar o uso das novas tecnologias,
em particular, o nippe Descartes em sua prática docente.
Não é tempo de decorar o conteúdo de quaisquer que sejam as disciplinas
constantes nos currículos dos futuros universitários. Envolver o aluno diante ao
ensino matemático é expandir a capacidade intelectual humana e por conseqüência,
o êxito em qualquer ensinamento do por vir.
122
Referências Bibliográficas:
[1] Descartes; disponível em http://descartes.cnice.mec.es
[2] JAVA; disponível em http://www.java.com
[3] SANTOS, Ângela R. dos, KUBRUSLY, Ricardo S., BIANCHINI, Waldecir;
Mathlets: Applets Java para o Ensino de Matemática; Anais II HTEM; UERJ; Rio de
Janeiro; 2004.
[4] Journal of Online Mathematics and its Applications (JOMA); disponível em
http://mathdl.maa.org/mathDL/4
[5] CAMPOS, Gilda Helena B. & Rocha, Ana Regina C. da; Critérios de
avaliação e modalidades do uso do computador como tutor; Programa de
Sistemas e Computação, COPPE/UFRJ,1991, pág. 4 –13.
[6] Lévy, Pierre. As Tecnologias da Inteligência O Futuro do Pensamento na
era da Informática. 1990.
[7] Palis, Gilda de La Rocque – Puc - Rio. Tecnologia, Gráficos e Equações
Revista do Professor de Matemática; Nº26, 1994, pág.30-38.
[8] Santos, Neide. Computadores na educação: discutindo alguns pontos
críticos; COPPE - Sistemas UFRJ. EM Aberto, Brasília, ano 12, n.57,
jan/mar, 1993, pág. 2731.
[9] Silva, Zanoni Carvalho da; O computador pode errar?; Revista do
123
Professor de Matemática, Nº06, 1985, pág. 1621.
[10] Stahl, Marimar; Workshop Ambientes de Ensino/Aprendizagem Apoiados
por computadores; COPPE-UFRJ.1991.
[11] Valente, José Armando; Computadores e Conhecimento – Repensando a
Educação; pág..01-22. UNICAMP. 1993.
[12] Vitale, Bruno; Computador na escola: um brinquedo a mais?; Ciência
Hoje, Volume 13 / nº. 77, 1991, pág. 19-25.
124
Anexo A
Tabela de Cores Através de Valores Hexadecimais
Antiquewhite
#FAEBD7
Gold
#FFD700
Navajowhite
#FFDEAD
Aqua
#00FFFF
Goldenrod
#DAA520
Navy
#000080
Aquamarine
#7FFFD4
Gray
#808080
Oldlace
#FDF5E6
Azure
#F0FFFF
Green
#008000
Olive
#808000
Beige
#F5F5DC
Greenyellow
#ADFF2F
Olivedrab
#6B8E23
Bisque
#FFE4C4
Honeydew
#F0FFF0
Orange
#FFA500
Black
#000000
Hotpink
#FF69B4
Orangered
#FF4500
Blanchedalmond
#FFEBCD
Indianred
#CD5C5C
Orchid
#DA70D6
Blue
#0000FF
Indigo
#4B0082
Palegoldenrod
#EEE8AA
Blueviolet
#8A2BE2
Ivory
#FFFFF0
Palegreen
#98FB98
Brown
#A52A2A
Khaki
#F0E68C
Paleturquoise
#AFEEEE
Burlywood
#DEB887
Lavander
#E6E6FA
Palevioletred
#DB7093
Cadetblue
#5F9EA0
Lavanderblush
#FFF0F5
Papayawhip
#FFEFD5
Chatreuse
#7FFF00
Lawngreen
#7CFC00
Peachpuff
#FFDAB9
Chocolate
#D2691E
Lemonchiffon
#FFFACD
Peru
#CD853F
Coral
#FF7F50
Lightblue
#ADD8E6
Pink
#FFC0CB
Carnflowerblue
#6495ED
Lightcoral
#F08080
Plum
#DDA0DD
Cornsilk
#FFF8DC
Lightcyan
#E0FFFF
Powderblue
#B0E0E6
Crimson
#DC143C
Lightgoldenrodyelloow
#FAFAD2
Purple
#800080
Cyan
#00FFFF
Lightgreen
#90EE90
Red
#FF0000
Darkblue
#00008B
Lightgray
#D3D3D3
Rsybrown
#BC8F8F
Darkcyan
#008B8B
Lightpink
#FFB6C1
Royalblue
#4169E1
Darkgoldenrod
#B8860B
Lightsalmon
#FFA07A
Saddlebrown
#8B4513
Darkgray
#A9A9A9
Lightseagreen
#20B2AA
Salmon
#FA8072
Darkgreen
#006400
Lightskyblue
#87CEFA
Sandybrown
#F4A460
Darkkhaki
#BDB76B
Lightslategray
#778899
Seagreen
#2E8B57
Darkmagenta
#8B008B
Lightsteelblue
#B0C4DE
Seashell
#FFF5EE
Darkolivegreen
#556B2F
Lightyellow
#3FFFFE0
Sienna
#A0522D
Darkorange
#FF8C00
Lime
#00FF00
Silver
#C0C0C0
Darkorchid
#9932CC
Limegreen
#32CD32
Skyblue
#87CEEB
Darkred
#8B0000
Linen
#FAF0E6
Slateblue
#6A5ACD
Darksalmon
#E9967A
Magenta
#FF00FF
Slategray
#708090
Darkseagreen
#8FBC8F
Maroon
#800000
Snow
#FFFAFA
Darkslateblue
#483D8B
Mediumaquamarine
#66CDAA
Springgreen
#00FF7F
Darkslategray
#2F4F4F
Mediumblue
#0000CD
Steelblue
#4682B4
Darkturquoise
#00CED1
Mediumorchid
#BA55D3
Tan
#D2B48C
Darkviolet
#9400D3
Mediumpurple
#9370DB
Teal
#008080
Deeppink
#FF1493
Mediumseagreen
#3CB371
Thistle
#D8BFD8
125
Deepskyblue
#00BFFF
Mediumslateblue
#7B68EE
White
#FFFFFF
Dimgray
#696969
Mediumspringreen
#00FA9A
Whitesmoke
#F5F5F5
Dodgerblue
#1E90FF
Mediumturquoise
#48D1CC
Yellow
#FFFF00
Firebrick
#B22222
Mediumvioltred
#C71585
Yellowgreen
#9ACD32
126
Anexo B
Origem do Java
Em 1991, na Sun Microsystems, foi iniciado o Green Project, o berço do Java,
tendo como mentores Patrick Naughton, Mike Sheridan e James Gosling. O objetivo
do projeto não era a criação de uma nova linguagem de programação, mas antecipar
e planejar a nova tendência do mundo digital. Eles acreditavam que, em algum
tempo, haveria uma convergência dos computadores com os equipamentos e
eletrodomésticos comumente usados pelas pessoas no seu dia-a-dia.
Para provar a viabilidade desta idéia, a equipe Green Team, um grupo secreto
formado por 13 pessoas e liderado por James Gosling trabalharam durante 18
meses, isolado de toda a comunicação com a Sun. Em 1992 a equipe surgiu com
uma demonstração funcional da idéia inicial. O protótipo se chamava *7 (leia-se “Star
Seven”), um controle remoto com uma interface gráfica touchscreen. O *7 tinha a
habilidade de controlar diversos dispositivos e aplicações. James Gosling especificou
uma nova linguagem de programação para o *7. Gosling decidiu batizá-la de “Oak”,
que quer dizer carvalho, uma árvore que ele podia observar quando olhava pela sua
janela.
A idéia que o *7 tentava vender, hoje já é realidade em programas interativos
e também na televisão digital. Permitir ao telespectador interagir com a emissora e
com a programação algo muito visionário e estava muito longe do que as empresas
de TV a cabo tinham capacidade de entender e comprar. A idéia certa, na época
errada.
Entretanto com este tipo de rede interativa que a equipe do *7 estava
tentando vender para as empresas de TV a cabo simplesmente estava lá. Gosling foi
incumbido de adaptar o Oak para a Internet e em janeiro 1995 foi lançada uma nova
versão do Oak rebatizada com o nome de Java. Agora aplicações poderiam ser
127
executadas dentro dos navegadores e tudo seria disponibilizado pela Internet
instantaneamente. Foi o estático HTML dos navegadores que promoveu a rápida
disseminação da dinâmica tecnologia Java.
Máquina Virtual Java
Um aplicativo criado em Java pode rodar tanto no Linux quanto no Microsoft
Windows, não se limitando, porém, a esses sistemas operacionais, sendo possível
ser executado em uma infinidade de plataformas. Para isso basta que se tenha
instalado a Máquina Virtual Java, ou no inglês Java Virtual Machine, JVM.
Programas Java não são traduzidos para a linguagem de máquina, não como
outras linguagens estaticamente compiladas, mas sim para uma representação
intermediária chamada bytecode. O bytecode é uma espécie de codificação que
traduz tudo o que foi escrito no programa para um formato que a JVM entenda e seja
capaz de executar.
O aplicativo Java executado em uma página de Internet é chamado de applet.
Desta forma uma cena Descartes é um applet.
Na imagem a seguir temos um aplicativo Java para telefone celular, que
também pode ser rodado em um palmtop.
128
A Máquina Virtual Java nada mais é do que o aplicativo Java mencionado
anteriormente, ao qual foi ensinado a realizar o seu download.
129
Anexo C
Atividade 1: Gráfico da função f(x)=BAx + C
No gráfico inicial os valores de A, B e C são respectivamente 2, 1 e 0.
a) Atribua alguns valores positivos à A. (Para isso basta alterar o valor
apresentado na parte inferior do gráfico ou clicar nas setas.)
b) Para valores de A maiores do que 1 a função é crescente ou decrescente?
c) Para valores de A maiores do que 0 e menores do que 1 a função é
crescente ou decrescente?
d) O que acontece com o gráfico da função f(x)=BA x + C à medida que o valor
de A aumenta?
130
e) O que acontece com o gráfico da função f(x)=BA x + C à medida que o valor
de A diminui?
f) O que acontece com o gráfico da função f(x)=BA x + C à medida que o valor
de C aumenta?
g) O que acontece com o gráfico da função f(x)=BA x + C à medida que o valor
de C diminui?
h) O que acontece com o gráfico da função f(x)=BAx + C à medida que o valor
de B aumenta?
i) O que acontece com o gráfico da função f(x)=BA x + C à medida que o valor
de B diminui?
Atividade 2: Gráfico da função f(x)=BA|x| + C
131
No gráfico inicial os valores de A, B e C são respectivamente 2, 1 e 0.
a) Atribua alguns valores positivos à A. (Para isso basta alterar o valor
apresentado na parte inferior do gráfico ou clicar nas setas.)
b) Para valores de A maiores do que 1 a função é crescente ou decrescente?
c) Para valores de A maiores do que 0 e menores do que 1 a função é
crescente ou decrescente?
d) O que acontece com o gráfico da função f(x)=BA |x| + C à medida que o
valor de A aumenta?
e) O que acontece com o gráfico da função f(x)=BA |x| + C à medida que o
valor de A diminui?
f) O que acontece com o gráfico da função f(x)=BA|x| + C à medida que o valor
de C aumenta?
g) O que acontece com o gráfico da função f(x)=BA |x| + C à medida que o
valor de C diminui?
h) O que acontece com o gráfico da função f(x)=BA |x| + C à medida que o
valor de B aumenta?
i) O que acontece com o gráfico da função f(x)=BA |x| + C à medida que o valor
de B diminui?
132
Atividade 3: Gráfico da função f(x)=BA-|x| + C
No gráfico inicial os valores de A, B e C são respectivamente 2, 1 e 0.
a) Atribua alguns valores positivos à A. (Para isso basta alterar o valor
apresentado na parte inferior do gráfico ou clicar nas setas.)
b) Para valores de A maiores do que 1 a função é crescente ou decrescente?
c) Para valores de A maiores do que 0 e menores do que 1 a função é
crescente ou decrescente?
d) O que acontece com o gráfico da função f(x)=BA -|x| + C à medida que o
valor de A aumenta?
e) O que acontece com o gráfico da função f(x)=BA -|x| + C à medida que o
valor de A diminui?
133
f) O que acontece com o gráfico da função f(x)=BA-|x| + C à medida que o valor
de C aumenta?
g) O que acontece com o gráfico da função f(x)=BA -|x| + C à medida que o
valor de C diminui?
h) O que acontece com o gráfico da função f(x)=BA -|x| + C à medida que o
valor de B aumenta?
i) O que acontece com o gráfico da função f(x)=BA-|x| + C à medida que o valor
de B diminui?
Atividade 4: Gráfico da função f(x)=BAx + D
No gráfico inicial os valores de A, B e D são respectivamente 2, 1 e 0.
a) Atribua alguns valores positivos à A. (Para isso basta alterar o valor
134
apresentado na parte inferior do gráfico ou clicar nas setas.)
b) Para valores de A maiores do que 1 a função é crescente ou decrescente?
c) Para valores de A maiores do que 0 e menores do que 1 a função é
crescente ou decrescente?
d) O que acontece com o gráfico da função f(x)=BA x + D à medida que o valor
de A aumenta?
e) O que acontece com o gráfico da função f(x)=BA x + D à medida que o valor
de A diminui?
f) O que acontece com o gráfico da função f(x)=BA x + D à medida que o valor
de D aumenta?
g) O que acontece com o gráfico da função f(x)=BA x + D à medida que o valor
de D diminui?
h) O que acontece com o gráfico da função f(x)=BA x + D à medida que o valor
de B aumenta?
i) O que acontece com o gráfico da função f(x)=BAx + D à medida que o valor
de B diminui?
135
Atividade 5: Gráfico da função f(x)=BAkx
No gráfico inicial os valores de A, B e k são respectivamente 2, 1 e 1.
a) O que acontece com o gráfico da função f(x)=BA kx à medida que o valor de
k aumenta?
b) O que acontece com o gráfico da função f(x)=BA kx à medida que o valor de
k diminui?
136
Atividade 6: Gráfico da função f(x)=| BAx + C|
No gráfico inicial os valores de A, B e C são respectivamente 2, 1 e 0.
a) Atribua alguns valores positivos à A. (Para isso basta alterar o valor
apresentado na parte inferior do gráfico ou clicar nas setas.)
b) Para valores de A maiores do que 1 a função é crescente ou decrescente?
c) Para valores de A maiores do que 0 e menores do que 1 a função é
crescente ou decrescente?
d) O que acontece com o gráfico da função f(x)=| BA x + C|à medida que o
valor de A aumenta?
e) O que acontece com o gráfico da função f(x)=| BA x + C| à medida que o
valor de A diminui?
137
f) O que acontece com o gráfico da função f(x)=| BAx + C| à medida que o
valor de C aumenta?
g) O que acontece com o gráfico da função f(x)=| BA x + C| à medida que o
valor de C diminui?
h) O que acontece com o gráfico da função f(x)=| BA x + C| à medida que o
valor de B aumenta?
i) O que acontece com o gráfico da função f(x)=| BA x + C| à medida que o
valor de B diminui?
Atividade 7: Gráfico da função f(x)=| BAk|x| + D + C |
No gráfico inicial os valores de A, B, C, D e k são respectivamente 2,1 0, 0 e
1.
138
a) O que acontece com o gráfico da função f(x)=| BAk|x| + D + C | à medida que
o valor de A aumenta?
b) O que acontece com o gráfico da função f(x)=| BA k|x| + D + C | à medida que
o valor de A diminui?
c) O que acontece com o gráfico da função f(x)=| BA k|x| + D + C | à medida que
o valor de C diminui?
d) O que acontece com o gráfico da função f(x)=| BA k|x| + D + C | à medida que
o valor de C aumenta?
e) O que acontece com o gráfico da função f(x)=| BA k|x| + D + C | à medida que
o valor de B aumenta?
f) O que acontece com o gráfico da função f(x)=| BAk|x| + D + C | à medida que o
valor de B diminui?
g) O que acontece com o gráfico da função f(x)=| BA k|x| + D + C | à medida que
o valor de D aumenta?
h) O que acontece com o gráfico da função f(x)=| BA k|x| + D + C | à medida que
o valor de D diminui?
i) O que acontece com o gráfico da função f(x)=| BAk|x| + D + C | à medida que o
valor de k aumenta?
j) O que acontece com o gráfico da função f(x)=| BAk|x| + D + C | à medida que o
valor de k diminui?
139

Documentos relacionados