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ón" value="2.20"> <param name="Idioma" value="español"> <param name="Botones" value="cré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é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]' texto='Dividendo [D]' decimales=0 fuente='Courier,BOLD,14'"> <param name="G_01" value="tipo=texto expresión='[160,20]' color=00beff texto=' divisor [div]' decimales=0 fuente='Courier,BOLD,14'"> <param name="G_02" value="tipo=texto expresión='[160,50]' color=rojo texto=' cociente [cociente(D,div)]' decimales=0 fuente='Courier,BOLD,14'"> <param name="G_03" value="tipo=texto expresión='[70,90]' color=00af00 texto='resto [resto(D,div)]' decimales=0 fuente='Courier,BOLD,14'"> <param name="G_04" value="tipo=texto expresión='[160,21]' color=cd0055 texto='| ' decimales=0 fuente='Courier,BOLD,12'"> <param name="G_05" value="tipo=texto expresión='[160,22]' color=cd0055 texto='| ' decimales=0 fuente='Courier,BOLD,12'"> <param name="G_06" value="tipo=texto expresión='[160,23]' color=cd0055 texto='| ' decimales=0"> <param name="G_07" value="tipo=texto expresión='[160,24]' color=cd0055 texto='| ' decimales=0 fuente='Courier,BOLD,12'"> <param name="G_08" value="tipo=texto expresió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. 2731. [9] Silva, Zanoni Carvalho da; O computador pode errar?; Revista do 123 Professor de Matemática, Nº06, 1985, pág. 1621. [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