@@ Linha 1: / Linha 1: @@
-=Desenvolvendo Sistemas de Telecomunicações Básico com “ Applnventor”=
+*[[Criando Aplicações Android com AppInventor]]
-;ORIENTADOR:
+*[[Sistema Automático de Reconhecimento de Palavra usando Transformada Wavelet e Redes Neurais]]
-[[Eraldo Silveira e Silva]] e [[Marcos Moecke]]
-;Objetivos do Projeto:
-*Desenvolver tutoriais na plataforma wiki e nas próprias ferramentas App Inventor para facilitar o aprendizado de novos alunos da variação da  linguagem Scratch utlizada no App Inventor de modo a elevar significativamente o número de usuários da linguagem.
-*Desenvolver alguns sistemas básicos para o auxilio didático no curso Telecomunicações, usando a ferramenta App Inventor.
-;BOLSISTA SELECIONADO: Ernani Rodrigues De S. Thiago 2900111
-;Local de Trabalho: LABIC, Máquina: VENUS
-;Horário de Trabalho:
-*Segunda 13h30 às 17h30;
-*Terça 13h30 às 17h30;
-*Quarta 15h30 às 20h30;
-*Quinta 13h30 às 16h30;
-*Sexta 13h30 às 17h30;
-==Atividades propostas ==
-#Seguir os tutoriais em [http://www.youtube.com/playlist?p=PL2D27126F35E50A1B App Inventor Tutorials for Beginners], observando o método usado para ensino do [[AppInventor]], anotando os pontos positivos e negativos encontrados.
-#Relatar a cada dia os avanços.
-# Para uso do [[AppInventor]], rode preferencialmente na máquina VENUS.
-# Seguir o [http://beta.appinventor.mit.edu/learn/tutorials/molemash/molemash.html tutorial].
-# Quando terminar o video 4 do drum app, fazer uma análise escrita das características positivas do tutorial em vídeo e comparar com o tutorial em web/wiki.
-# Elaborar o projeto "O que o aluno precisa apreender para programar AppInventor"
-* O Basico da Interface (o que cada area do screen faz contem).
-:* Explicar os componentes do Visualizador.  (os conteudos das gavetas)
-:* Explicar o editor de blocos (conteudo das gavetas estáticas e dinânica)
-:* Explicar o emulador (como funciona)
-:* Explicar o uso de aparelho celular (Android) -> como dispositivo USB de teste. -> como executor do app.
-==Atividades realizadas==
-{{collapse top|Atividades}}
-;09/05/2012
-*Diálogo com o Orientador [[Marcos Moecke]] sobre o objetivo do projeto, modos sua realização, e os métodos que serão utilizados.
-*Início da produção de um "Padrão", arquivo que conterá os meios de organização de scripts, nomenclatura de objeto e outros a fins, para melhor utilização do App Inventor.
-*Produção da primeira análise de app's, feita com base no primeiro vídeo da lista proposta.
-*Não houve dificuldades significativas com o fato de o aúdio do vídeo ser em inglês, pois o que não era interpretado corretamente, era logo corrigido pela visualização do vídeo. Entretanto perdeu-se longo tempo com a procura de um freeware que pudesse editar ou criar arquivos de aúdio e com os "PrintScreen" que foram armazenados como ferramentas necessárias para a realização da Análise de Vídeo I - Bateria Básica (Parte 1/2).
-;10/05/2012
-*Correção dos relatórios postados na wiki.
-*Troca do banco de dados do Projeto App Inventor de um skydrive pessoal, para uma pasta compartilhada.
-*Visualização do vídeo "AI Basic Drum App:Part 2 of 2", para produção de análise.
-*Houve problemas com quanto a utilização do App Inventor, pois no computador que foi utilizado versão Java não é coerente com a necessária para se executar o emulador do Android. É crucial antes de começar a utilizar o App Inventor, verificar qual a versão de java que está sendo utilizada, pois não é necessária uma versão mais atualizada e sim uma específica, neste caso, faltou a instalação do "IcedTea Java Web Start 6". Mas é sempre bom ressaltar todos itens necessários: RunTime do OpenJDK Java 6, IcedTea Java Web Start 6 e o plug-in Java IcedTea.
-;11/05/2012
-*Foi necessário uma nova correção dos dados postados nos relatórios dos dias anteriores devido a falta de prática (com a wiki) que faz com que o erros apareçam com maior frequência.
-*Foram assistidos e compreendidos os primeiros quatro vídeos da lista proposta de atividades, que tratava de uma Bateria Básica em App Inventor.
-*O tutorial escrito sobre o jogo MoleMash [http://cs.usfca.edu/~wolber/appinventor/bookSplits/ch3MoleMash.pdf] também foi lido, com o intuito de futuramente, comparar os métodos de aprendizagem autodidata, utilizando ou vídeo, ou texto com imagens.
-*Tive dificuldades no entendimento da 1ª Parte do MoleMash, sobre o comando ''procedure'' que é usado na produção de novos blocos, foi necessário o suporte do orientador [[Marcos Moecke]] para o entendimento adequado, fato que pode botar em dúvida a verdadeira qualidade dos tutoriais escritos (entretanto o fato de o tutorial ser inglês pode ter influenciado neste caso).
-;14/05/2012
-*Produção de uma "[https://docs.google.com/file/d/0B-b87sjIJPp1RUVkZWpCd1pJZDA/edit Comparação entre a eficiência dos tutoriais escritos e os feitos em vídeo]".
-*Visualização dos cinco vídeos que detalham como fazer um jogo Pong.
-*Definido o objetivo do Projeto com Orientador [[Marcos Moecke]]: Desenvolver uma sequência de sistema utilizando o AppInventor, para o ensino desta linguagem de programação.
-*Início da construção do primeiro projeto: <tt>TracadorDeLinhas_v1_Ernani</tt>.
-;15/05/2012
-*Início da produção do <tt>TracadorDeLinhas_v1_Ernani</tt>.
-*Muito tempo desperdiçado tentando editar a imagem do plano cartesiano, para os pixels corretos.
-*Há diferenças entre um <tt>ImageSprite</tt> e o <tt>BackGroundImage</tt> (do <tt>Canvas</tt>), necessário melhor definição!
-*Término da primeira parte do <tt>TracadorDeLinhas_v1_Ernani</tt> (mas ainda há o problema da escala!).
-;16/05/2012
-*Modificação da Interface do <tt>TracadorDeLinhas_v1_Ernani</tt>.
-*Dificuldade de utilizar o plano cartesiano devido a Imagem criada não possuir as coordenadas pixels correta.
-*Nova Imagem criada utilizando o programa DIA.
-*Começo da definição dos blocos.
-;17/05/2012
-*Faltou devido a compromissos pessoais (sujeito a reposição).
-;18/05/2012
-*Início do <tt>TracadorDeLinhas_v1_Ernani</tt>, este é sem escala.
-*Discussão sobre o problema da escala com orientador [[Eraldo Silveira e Silva]].
-*Início do <tt>TracadorDeLinhas_v2_Ernani</tt>, este é com uma escala definida pelo utilizador.
-*Terminado o <tt>TracadorDeLinhas_v3.0_Ernani</tt>, com escala automática, entretanto há erros, possivelmente ligados as muitas variáveis globais, necessária revisão e discorrer sobre o tema com os orientadores.
-;21/05/2012
-*Término do <tt>TracadorDeLinhas_v1_Ernani</tt>.
-*Depuração do  <tt>TracadorDeLinhas_v1_Ernani</tt> realizada com sucesso, nenhum erro encontrado.
-*Término do script do  <tt>TracadorDeLinhas_v2_Ernani</tt>.
-*Foram encontrados erros durante a depuração do <tt>TracadorDeLinhas_v2_Ernani</tt>, estes, ainda não foram solucionados.
-;22/05/2012
-*O erro do <tt>TracadorDeLinhas_v2_Ernani</tt> foi depurado e corrigido, nenhum <tt>Canvas.Width</tt> pode ser <tt>Fill Parent</tt>.
-*Foi implementado um novo código no <tt>TracadorDeLinhas_v3_Ernani</tt> e corrigido a maioria dos erros.
-*Não foram identificados os procedimentos matemáticos exponencial e módulo, há suspeitas, entretanto não fora confirmadas.
-*Criado usuário no NX CLIENT, entretanto não foi possível conectar devido ao excesso de usuários registrados na rede.
-;23/05/2012
-*Manutenção de <tt>TracadorDeLinhas_v2_1_Ernani</tt>.
-*Manutenção de <tt>TracadorDeLinhas_v3_1_Ernani</tt>.
-*Dificuldade na Depuração devido a grande lentidão da máquina VENUS.
-*Ainda não é possível utilizar o emulador com o servidor Matlab.
-;24/05/2012
-*Manutenção de <tt>TracadorDeLinhas_v2_1_Ernani</tt>.
-*Manutenção de <tt>TracadorDeLinhas_v3_1_Ernani</tt>.
-*Dificuldade na Depuração devido a grande lentidão da máquina VENUS.
-*Ainda não é possível utilizar o emulador no Matlab.
-;25/05/2012
-*Término do <tt>TracadorDeLinhas_v2_1_Ernani</tt>.
-*Término do <tt>TracadorDeLinhas_v3_1_Ernani</tt>.
-*Dificuldade na Depuração devido a grande lentidão da máquina VENUS.
-*Ainda não é possível utilizar o emulador no Matlab.
-;04/06/2012
-*Início da produção do primeiro tutorial escrito na wiki.
-*Um software novo de edição de imagens foi instalado [http://www.gimp.org/ (Gimp)].
-*Dificuldade no carregamento de imagens na wiki.
-*Foi necessário um intervalo para resolver o problema do Registro de Frequência.
-;05/06/2012
-*Continuação da produção do primeiro tutorial escrito na wiki.
-*Dificuldade no carregamento de imagens na wiki.
-*Foi necessário um intervalo para resolver o problema do Registro de Frequência.
-;06/06/2012
-*Continuação da produção do primeiro tutorial escrito na wiki.
-*Dificuldade no carregamento de imagens na wiki.
-;11/06/2012
-*Faltou por motivos pessoais.
-;12/06/2012
-*Faltou por motivos pessoais.
-;13/06/2012
-*Greve.
-;14/06/2012
-*Continuação da produção do primeiro tutorial escrito na wiki.
-*Erro encontrado no tutorial.
-;15/06/2012
-*Continuação da produção do primeiro tutorial escrito na wiki.
-*Erro encontrado no tutorial.
-;18/06/2012
-*Foi necessário um intervalo para resolver o problema do controle de frequência dos bolsistas.
-*Continuação da produção do primeiro tutorial escrito na wiki.
-;19/06/2012
-*Faltou por ter marcada uma avaliação de ELI.
-;20/06/2012
-*Atraso devido a Assembléia dos Alunos.
-*Problemas para acessar a conta do AppInventor, foi necessário tentar três vezes e atualizar a página (provavelmente problemas com o servidor).
-*Continuação da produção do primeiro tutorial escrito na wiki.
-;21/06/2012
-*Terminado o primeiro tutorial.
-*Houve problemas quando o tutorial foi corrigido, o Canvas parece incorreto.
-;22/06/2012
-*Problema do tutorial ainda não solucionado.
-;25/06/2012
-*O canvas apresenta uma característica estranha, mesmo com todas a configurações idênticas as do tutorial, ele se comporta diferente.
-;26/06/2012
-*Faltou devido a urgência da produção do Trabalho de PJI1.
-;27/06/2012
-*Faltou devido a urgência da produção do Trabalho de PJI1.
-;28/06/2012
-*Discussão com coordenadores da bolsa sobre a linha de produção de tutoriais.
-*Manter os trabalhos iniciados até então em standby.
-*Iniciar produção de um Aplicativo semelhante a uma calculadora com as quatro operações básicas.
-;29/06/2012
-*Início da Produção do novo aplicativo.
-*A parte do visualizador esta quase pronta, precisa ser revista pois o "button =" não aparece.
-;02/07/2012
-*O problema da disponibilidade dos "buttons" foi resolvida com a ajuda do orientador [[Marcos Moecke]].
-*Início da produção dos scripts (Block Editor).
-;03/07/2012
-*Continuação da Produção dos Scripts.
-*Problema dos "buttons" solucionado.
-;04/07/2012
-*Criação de um loop para os "buttons".
-*Continuação da produção dos Scripts.
-;05/07/2012
-*Foi utilizado um método de 3 variáveis apara realizar as operações.
-*Continuação da produção dos Scripts.
-;06/07/2012
-*Criado um método de reutilização de operadores utilizados anteriormente para quando se apertar o igual mais de uma vez seguida ele ficar num loop que realiza as mesmas operações.
-*Continuação da produção dos Scripts.
-;09/07/2012
-*Criado o valor "=" para a variável operador, que serve para realizar operações multiplas repetidamente. Ex.:1+2+7+4=14.
-*Continuação da produção dos Scripts.
-;10/07/2012
-*Continuação da produção dos Scripts.
-;11/07/2012
-*Continuação da produção dos Scripts.
-;12/07/2012
-*Continuação da produção dos Scripts.
-*Finalização e melhoramento da produção dos Scripts.
-;13/07/2012
-*Novos objetivos foram passados pelo orientador [[Marcos Moecke]].
-*Início da produção do tutorial do vizualizador da calculadora.
-*Criada uma conta hotmail e gmail para melhor compartilhamento dos projetos com os coordenadores.
-;16/07/2012
-*Problema com a Background Image da Screen1. Uma parte não aparece com a figura correta.
-*Continuação da produção do tutorial.
-;17/07/2012
-*Houve conflito na Properties da Screen1, porque a Background color estava em White e havia uma Background Image.
-*Término da Primeira parte do tutorial da Calculadora básica, que mostra como fazer apenas o vizualizador.
-Debate com Eraldo, para definir o projeto
-Elaboração junto com o Ernani.
-;18/07/2012 a 20/07/2012
-*Debate com o coordenador [[Eraldo Silveira]] sobre os objetivos do projeto.
-*Elaboração de um Cronograma junto ao colega Lucas.
-*Início da finalização da Implementação.
-;23/07/2012 a 30/07/2012
-*Férias.
-;31/07/2012
-*Finalização da especificação da calculadora.
-*Criação de outra versão da calculadora (exemplo).
-;01/08/2012
-*Início da produção do material que será utilizado como base para a oficina.
-;02/08/2012
-*Produção de uma introdução ao [[AppInventor]].
-;03/08/2012
-*Produção da especificação de requisitos da calculadora, para oficina.
-;06/08/2012
-*Produção da especificação de requisitos da calculadora, para oficina.
-*Dificuldade com método de explicação.
-;07/08/2012
-*Produção da especificação de requisitos da calculadora, para oficina.
-*Adotado método Problema-Soluções, em que a medida que é necessário acrescentar algo novo, diferentes soluções são apresentadas com suas respectivas vantagens e desvantagens.
-;08/08/2012
-*Produção da especificação de requisitos da calculadora, para oficina.
-*Problema na quantidade de imagens a serem postas no tutorial, qual o número ideal? E quais devem ser?
-;09/08/2012
-*Terminada da especificação de requisitos da calculadora, para oficina.
-*Início de tutorial passo a passo de como fazer a calculadora.
-;10/08/2012
-*Produção de tutorial passo a passo de como fazer a calculadora, para oficina.
-*Devido a necessidade de se possuir alguma experiência com [[AppInventor]] para se construir a primeira parte do aplicativo, as tarefas do dia um serão alteradas.
-;13/08/2012
-*Produção de tutorial passo a passo de como fazer a calculadora, para oficina.
-*Começando a aplicar método de ensino no componente Label, é necessário explicar que funções ele pode realizar, que elemento da calculadora ele será (visor) e etc.
-;14/08/2012
-*Produção de tutorial passo a passo de como fazer a calculadora, para oficina.
-*Criação de imagens que serão utilizadas para explicar a altura dos componentes do aplicativo.
-;15/08/2012
-*Produção de tutorial passo a passo de como fazer a calculadora, para oficina.
-*Atualização da Wiki, que não havia sido atualizada antes devido ao mal acesso a internet!
-;16/08/2012
-*Produção de tutorial passo a passo de como fazer a calculadora, para oficina.
-*Discussão com o coordenador Eraldo sobre retomada das atividades.
-;17/08/2012
-*Produção do primeiro dia da oficina.
-*Início da produção de documentação que será utilizada no primeiro dia (conceitos de variáveis, lista e etc).
-;20/08/2012
-*Continuação da produção do "manual" do primeiro dia.
-*Dificuldade de montar o conteúdo em um único texto.
-;21/08/2012
-*Continuação da produção do "manual" do primeiro dia.
-*Verificar conceito de "Procedures" com coordenadores.
-;22/08/2012
-*Continuação da produção do "manual" do primeiro dia.
-*Tradução do material inicial "Padronização" para wiki.
-;23/08/2012
-*Continuação da produção do "manual" do primeiro dia.
-*Tradução do material inicial "Padronização" para wiki.
-;24/08/2012
-*Continuação da produção do "manual" do primeiro dia.
-;27/08/2012
-*Continuação da produção do "manual" do primeiro dia.
-*Finalizados os conceitos básicos.
-*Início da produção dos Conceitos de Instrução.
-*Dificuldade na introdução de imagens quadradas no Designer.
-;28/08/2012
-*Produção dos Conceitos de Instrução.
-*Trabalhou pouco tempo devido a necessidade de ir ao Alistamento Militar.
-;29/08/2012
-*Continuação da produção do tutorial HelloPurr.
-*Necessidade de mesclar as Definições (que não estão completas) com o tutorial HelloPurr.
-;30/08/2012
-*Continuação da produção do tutorial HelloPurr.
-*Continuação da produção das Definições.
-;31/08/2012
-*Continuação da produção do tutorial HelloPurr.
-*Ao invés de trabalhar nas definições e nos conceitos de instruções separadamente, estes serão feitos durante os tutoriais iniciais (HelloPur e outro ainda não escolhido).
-;03/09/2012
-*Continuação da produção do tutorial HelloPurr.
-*Foi necessário corrigir alguns termos.
-;04/09/2012
-*Continuação da produção do tutorial HelloPurr.
-*Revisão do tutorial, a parte que explicava como adicionar um Som estava num local inapropriado, foi necessária uma mudança.
-;05/09/2012
-*Continuação da produção do tutorial HelloPurr.
-*Implementação do conceito de evento no tutorial.
-;06/09/2012
-*Finalização do tutorial HelloPurr.
-*Não foi possível incluir um Scrollable na horizontal.
-;07/09/2012
-*Feriado Nacional.
-;10/09/2012
-*Foi necessário arrumar alguns detalhes do tutorial HelloPurr.
-*Início da produção do tutorial MoleMash.
-;11/09/2012
-*Continuação da produção do tutorial MoleMash.
-*Discussão com coordenador Eraldo sobre objetivos da oficina.
-;12/09/2012 - 10/10/2012
-*Produção de um planejamento das oficinas (prévia).
-*Produção de uma hierarquia de objetivos.
-*Conversa com coordenador Eraldo sobre novas diretrizes do projeto.
-*Produção de tabelas para a hierarquia de objetivos.
-*Desenvolvimento de novas funções da calculadora.
-;11/10/2012
-*Desenvolvimento de um ''banner'' para a mostra científica nacional.
-;15/10/2012
-*Desenvolvimento de um ''banner'' para a mostra científica nacional.
-{{collapse bottom}}
-=Oficina AppInventor=
-==Tutorial Calculadora:==
-===Especificação===
-;Inicia em 0;
-;Quando operação for clicada, armazena numero numa variavel, muda o display pra 0;
-;Multiplas operações;
-;Implementação da virgula;
-;Máx. de dígitos : "-" + "," + 7 digítos.
-==Planejamento das Oficinas==
-===Análise Inicial===
-Este conteúdo possui como público alvo os alunos da disciplina [[PJI1-EngTel]] do curso de Engenharia de Telecomunicações do [http://www.sj.ifsc.edu.br/ Instituto Federal de Santa Catarina - Campus São José].
-===Hierarquia de Objetivos das Lições===
-*Desenvolver programas/aplicações utilizando o [[AppInventor]] para futura implementação no [[PJI1-EngTel]].
-====Lição I====
-'''1- Construir casos de usos para saber definir o que é uma aplicação e qual sua função.'''
-*1.1- Entender o que é uma Aplicação do ponto de vista computacional;
-*1.2- Descrever o comportamento de uma aplicação durante um caso de uso simples;
-*1.3- Relacionar conceitualmente procedimentos e eventos;
-*1.4- Utilizar diagramas de sequência para descrever os procedimentos realizados.
-'''2- "Explorar" o [[AppInventor]].'''
-*2.1- Consultar a [http://appinventor.mit.edu/explore/content/reference-documentation.html Documentação de Referência];
-*2.2- Criar um novo projeto;
-*2.3- Entender como funciona o [[AppInventor]]: O que são <tt>Designer</tt> e <tt>Blocks</tt>?;
-*2.4- Entender a funcionalidade do <tt>Designer</tt>;
-*2.5- Entender a funcionalidade do <tt>Blocks</tt>;
-*2.6- Salvar um projeto;
-*2.7- Importar e exportar projetos;
-*2.8- Transferindo um projeto para um sistema ''Android''.
-'''3- Conceitos Básicos.'''
-*3.1- Saber diferenciar conceitos básicos: Váriável, Lista, Procedimento, Evento, Componente e Propriedade;
-*3.2- Saber como criar/alterar os itens presentes em 3.1 no [[AppInventor]];
-*3.3- Entender a diferença entre a utilização de <tt>Sprites</tt> no [http://scratch.mit.edu/ Scratch] e a de Componentes no [[AppInventor]].
-**3.3.1- Entender o que é um <tt>Sprite</tt>;
-**3.3.2- Entender o que é um ''Script''.
-'''4- Entender como construir procedimentos baseados em eventos (''Script'').'''
-*4.1- Desenvolver o exemplo de caso: Tutorial Hello Purr;
-**4.1.1- Explorar as propriedade da <tt>Screen1</tt>;
-**4.1.2- Criar um <tt>Label</tt> e um <tt>Button</tt>;
-**4.1.3- Explorar as propriedades do <tt>Label</tt> e do <tt>Button</tt> recém-criados;
-**4.1.4- Carregar Mídias (imagem e som);
-**4.1.5- Utilizar mídias carregadas nas propriedades dos componentes;
-**4.1.6- Criar Blocos de eventos;
-**4.1.7- Desenvolver um ''Script'' que possua um evento como pré-requisito e um procedimento como consequência;
-**4.1.8- Conectar um Sistema ''Android''/emulador ao <tt>Blocks</tt>;
-**4.1.9- Testar aplicação.
-***4.2- Aperfeiçoar HelloPurr alterando somente suas propriedades (não criando novos componentes).
-{| border="4" cellpadding="3"
- !ITEM
- !ATIVIDADE
- !OBJETIVO
- !MÉTODO
- !TEMPO
- |-
- | '''1'''
-           ||Introduzir conceitos básicos de programação.
-           ||1; 1.1; 1.2; 1.3; 1.4
-           ||Apresentação de ''Slides''
-           ||10 minutos
- |-
- | '''2'''
-           ||Apresentação ''Light'' do [[AppInventor]], a funcionalidade básica da ferramenta deve ser apresentada (Diferenças entre o <tt>Blocks</tt> e o <tt>Designer</tt>).
-           ||2; 2.1; 2.2; 2.3; 2.4; 2.5; 2.6; 2.7; 2.8; 2.8
-           ||Utilizar o [[AppInventor]] no projetor
-           ||15 minutos
- |-
- | '''3'''
-           ||Traduzir conceitos básicos de programação para [[AppInventor]], "explorando" o  <tt>Designer</tt> e o  <tt>Blocks</tt>.
-           ||3; 3.1; 3.2
-           ||Utilizar o [[AppInventor]] no projetor e apresentação de ''Slides''
-           ||5 minutos
- |-
- | '''4'''
-           ||Diferenciar [http://scratch.mit.edu/ Scratch] de [[AppInventor]], a mudança de <tt>Sprites</tt> para componentes.
-           ||3; 3.3; 3.3.1; 3.3.2
-           ||Utilizar o [[AppInventor]] e [http://scratch.mit.edu/ Scratch] no projetor
-           ||5 minutos
- |-
- | '''5'''
-           ||Desenvolver o Tutorial HelloPurr.
-           ||4; 4.1; 4.1.1; 4.1.2; 4.1.3; 4.1.4; 4.1.5; 4.1.6; 4.1.7; 4.1.8; 4.1.9
-           ||Utilizar o [[AppInventor]] no projetor
-           ||30 minutos
-|-
- | '''6'''
-           ||Mostrar possibilidades de melhoramentos da aplicação HelloPurr, "enfeitando-o" (alterar as propriedades dos componentes já existentes.
-           ||4; 4.2
-           ||Utilizar o [[AppInventor]] no projetor
-           ||Tempo restante
-|}
-====Lição II====
-'''5- Praticar e expandir conhecimentos já adquiridos.'''
-*5.1- Desenvolver o exemplo de caso: Tutorial PaintPot.
-**5.1.1- Rever conceitos dos componentes <tt>Button</tt> e <tt>Screen</tt>;
-***5.1.1.1- Editar propriedades "mais específicas" dos componentes <tt>Button</tt> e <tt>Screen</tt> (<tt>AlignHorizontal</tt>, <tt>ScreenOrientation</tt>, <tt>Scrollable</tt>, <tt>BackgroundColor</tt>, <tt>Shape</tt>...). Observação: Procurar utilizar a [http://appinventor.mit.edu/explore/content/reference-documentation.html Documentação de Referência] para as propriedades que possuem função desconhecida.
-**5.1.2- Entender a função de um <tt>ScreenArrangement</tt> e de suas variações (Horizontal, Vertical e ''Table'');
-**5.1.3- Criar um <tt>ScreenArrangement</tt>;
-***5.1.3.1- Entender como expressar o valor das propriedades <tt>Width</tt> e <tt>Height</tt> de três maneiras possíveis e suas respectivas funções como propriedades de um componente.
-**5.1.4- Aprender a inserir componentes em <tt>ScreenArrangements</tt>;
-**5.1.5- Entender conceitualmente a função de um <tt>Canvas</tt>;
-**5.1.6- Criar um <tt>Canvas</tt> com uma área que se ajuste automaticamente ao tamanho da <tt>Screen</tt>;
-**5.1.7- Saber criar blocos de eventos relacionados a componentes <tt>Buttons</tt> e como "juntá-los" (encadeá-los) a procedimentos derivados do componente <tt>Canvas</tt> para formar um ''Script'';
-**5.1.8- Utilizar blocos de eventos do <tt>Canvas</tt> para realizar procedimentos de desenho no próprio <tt>Canvas</tt> (desenhar retas, círculos...);
-**5.1.9- Possibilidades de melhoramentos da aplicação PaintPot (adição de novas funcionalidades).
-{| border="4" cellpadding="3"
- !ITEM
- !ATIVIDADE
- !OBJETIVO
- !MÉTODO
- !TEMPO
- |-
- | '''1'''
-           ||Iniciar o desenvolvimento do Tutorial PaintPot no <tt>Designer</tt> para recuperar conceitos vistos anteriormente.
-           ||5; 5.1; 5.1.1; 5.1.1.1
-           ||Autônomo (sem auxílio)
-           ||Fora de aula (Sem limite de tempo)
- |-
- | '''2'''
-           ||Entender e aplicar o conceito de <tt>ScreenArrangements</tt> e das propriedades <tt>Width</tt> e <tt>Height</tt> (no Tutorial PaintPot).
-           ||5; 5.1; 5.1.2; 5.1.3; 5.1.3.1; 5.1.4
-           ||Autônomo (sem auxílio)
-           ||Fora de aula (Sem limite de tempo)
- |-
- | '''3'''
-           ||Utilizar o componente <tt>Canvas</tt> e definir sua área (no Tutorial PaintPot).
-           ||5; 5.1; 5.1.5; 5.1.6
-           ||Autônomo (sem auxílio)
-           ||Fora de aula (Sem limite de tempo)
-|-
- | '''4'''
-           ||Criar um ''Script'' que "utilize" os componentes <tt>Canvas</tt> e <tt>Button</tt>. Utilize a relação Evento-Procedimento (no Tutorial PaintPot).
-           ||5; 5.1; 5.1.7; 5.1.8
-           ||Autônomo (sem auxílio)
-           ||Fora de aula (Sem limite de tempo)
-|-
- | '''5'''
-           ||Aplicar alterações na aplicação PaintPot que objetivem expandi-la (adicionar funcionalidades). Procurar usar a criatividade (botões que limpe a tela,façam triângulos, quadrados...).
-           ||5; 5.1; 5.1.9
-           ||Autônomo (sem auxílio), receber o resultado final para avaliação
-           ||Fora de aula (Sem limite de tempo)
-|}
-====Lição III====
-'''6- Desenvolver Tutorial MoleMash para compreender a função de novos componentes (<tt>Clock</tt> e <tt>ImageSprite</tt>).'''
-*6.1- Saber criar um <tt>Canvas</tt> com um <tt>ImageSprite</tt> que possua uma <tt>BackgroundImage</tt> (delimitar a área de ambos);
-**6.1.1- Saber encadear o bloco de eventos <tt>Screen1.Initialize</tt> com um procedimento que reconfigure a área do <tt>Canvas</tt>;
-**6.1.2- Saber utilizar o bloco de eventos <tt>Screen1.Initialize</tt> para ajustar a área de um <tt>ImageSprite</tt> em função da área do <tt>Canvas</tt>. Exemplo: Área do <tt>ImageSprite</tt> = 1/10 Área do <tt>Canvas</tt>.
-*6.2- Saber criar botões que mostrem textos que expliquem sua função e que realizem procedimento(s) quando clicados;
-*6.3- Saber desenvolver UM <tt>Label</tt> que mostre o placar e que mostre um texto junto (apenas um);
-**6.3.1- Saber criar um ''Script'' que utilize o bloco <tt>Join</tt> (que pode ser encontrado na gaveta <tt>Text</tt>) para juntar um texto e o valor do placar. E exibir o resultado em no <tt>Text</tt> de um <tt>Label</tt> (Exemplo: Placar 0);
-**6.3.2- Saber criar uma variável que possua a função de um contador.
-*6.4- Saber desenvolver no <tt>Blocks</tt> um procedimento que faça com que um <tt>ImageSprite</tt> se mova de forma aleatória pelo <tt>Canvas</tt>.
-*6.5- Entender como encadear o bloco de evento <tt>ImageSprite.Touched</tt> com a execução de uma mídia (<tt>Sound</tt>).
-{| border="4" cellpadding="3"
- !ITEM
- !ATIVIDADE
- !OBJETIVO
- !MÉTODO
- !TEMPO
- |-
- | '''1'''
-           ||Utilizar o <tt>Canvas</tt> como uma área de deslocamento de um <tt>ImageSprite</tt>.
-           ||6; 6.1
-           ||Utilizar o [[AppInventor]] no projetor
-           ||5 minutos
-|-
- | '''2'''
-           ||Relacionar o tamanho de um <tt>ImageSprite</tt> com o de um <tt>Canvas</tt>.
-           ||6; 6.1; 6.1.1; 6.1.2
-           ||Utilizar o [[AppInventor]] no projetor
-           ||10 minutos
-|-
- | '''3'''
-           ||Criar botões com funções especificadas em seus textos.
-           ||6; 6.2
-           ||Utilizar o [[AppInventor]] no projetor
-           ||5 minutos
-|-
- | '''4'''
-           ||Criar um <tt>Label</tt> que mostre um texto junto a um contador.
-           ||6; 6.3; 6.3.1; 6.3.2
-           ||Utilizar o [[AppInventor]] no projetor
-           ||10 minutos
-|-
- | '''5'''
-           ||Criar um procedimento que faça com que um <tt>ImageSprite</tt> se movimente de forma aleatória.
-           ||6; 6.4
-           ||Utilizar o [[AppInventor]] no projetor
-           ||5 minutos
-|-
- | '''6'''
-           ||Executar uma mídia a partir de um evento relacionado a um <tt>ImageSprite</tt>.
-           ||6; 6.5
-           ||Utilizar o [[AppInventor]] no projetor
-           ||5 minutos
-|}
-====Lição IV====
-'''7- Iniciar desenvolvimento do Tutorial Agenda Telefônica.'''
-*7.1- Saber criar independentemente de ajuda, uma interface para uma agenda telefônica;
-*7.2- Comparar a agenda criada com o modelo detido pelo professor;
-*7.3- Listar funções de uma agenda telefônica simples;
-**7.3.1- Modificar a agenda anterior, visando adequá-la as "novas" funcionalidades.
-*7.4- Desenvolver em um fluxograma (ou em [http://scratch.mit.edu/ Scratch]) uma sequência de instruções que indique os procedimentos que uma agenda telefônica deve realizar;
-**7.4.1- Comparar com os procedimentos-modelos detidos pelo professor;
-**7.4.2- Adequar instruções anteriores para que agreguem as incluídas no modelo (não copiar e excluir a feita inicialmente, adequar).
-*7.5- "Traduzir" os fluxogramas (ou instruções [http://scratch.mit.edu/ Scratch]) para um ''Script'' [[AppInventor]] (instruções em blocos);
-*7.6- Comparar com o modelo detido pelo professor e verificar se ambos satisfazem as funções de uma agenda telefônica comum.
-*7.6.1- Criar novos procedimentos que "incrementem" a agenda.
-{| border="4" cellpadding="3"
- !ITEM
- !ATIVIDADE
- !OBJETIVO
- !MÉTODO
- !TEMPO
- |-
- | '''1'''
-           ||Criar a interface de uma agenda telefônica.
-           ||7; 7.1
-           ||Autônomo (sem auxílio)
-           ||Fora de aula (Sem limite de tempo)
-|-
- | '''2'''
-           ||Comparar interface-modelo com interface produzida.
-           ||7; 7.2
-           ||Autônomo (sem auxílio)
-           ||Fora de aula (Sem limite de tempo)
-|-
- | '''3'''
-           ||Conceituar os procedimentos mínimos de uma agenda telefônica.
-           ||7; 7.3; 7.3.1; 7.4
-           ||Autônomo (sem auxílio)
-           ||Fora de aula (Sem limite de tempo)
-|-
- | '''4'''
-           ||"Corrigir" conceitos de procedimentos.
-           ||7; 7.4; 7.4.1; 7.4.2
-           ||Autônomo (sem auxílio)
-           ||Fora de aula (Sem limite de tempo)
-|-
- | '''5'''
-           ||Criar blocos no <tt>Blocks</tt>.
-           ||7; 7.5; 7.6
-           ||Autônomo (sem auxílio)
-           ||Fora de aula (Sem limite de tempo)
-|-
- | '''6'''
-           ||Adicionar novas funcionalidades.
-           ||7; 7.6; 7.6.1
-           ||Autônomo (sem auxílio)
-           ||Fora de aula (Sem limite de tempo)
-|}
-====Lição V====
-'''8- Iniciar desenvolvimento do Tutorial Calculadora no <tt>Designer</tt>.'''
-*8.1- Estar apto a criar um arranjo de botões idêntico ao do modelo (detido pelo professor) utilizando apenas os componentes <tt>Button</tt>, <tt>ScreenArrangement</tt> e <tt>Label</tt>;
-**8.1.1- Saber Carregar Mídias na propriedade <tt>Image</tt> de cada <tt>Button</tt>;
-**8.1.2- Saber organizar os ''arrangements'' de forma que o botão "0" possua o dobro de comprimento dos outros e o botão de igual, o dobro de altura.
-*8.2- Saber criar um procedimento que, quando inicie a aplicação, ajuste a área dos <tt>Buttons</tt> e do <tt>Label</tt> ao da <tt>Screen1</tt>;
-**8.2.1- Saber utilizar o evento de mudança de orientação para reajustar a área dos componentes;
-**8.2.2- Saber criar uma combinação de blocos que mude a fonte do ''Label Display'' conforme o acréscimo de algarismos.
-*8.3- Ter completo domínio sobre as propriedades de um <tt>Label</tt>, suficiente para "enfeitar" os valores exibidos pelo ''Display'' (<tt>Label</tt>).
-**8.3.1- Saber utilizar a propriedade <tt>FontBold</tt> de um <tt>Button</tt> ou de um <tt>Label</tt>;
-**8.3.2- Saber utilizar a propriedade <tt>FontItalic</tt> de um <tt>Button</tt> ou de um <tt>Label</tt>;
-**8.3.3- Saber utilizar a propriedade <tt>FontTypeface</tt> de um <tt>Button</tt> ou de um <tt>Label</tt>;
-**8.3.4- Saber utilizar a propriedade <tt>TextAlignment</tt> de um <tt>Button</tt> ou de um <tt>Label</tt>.
-{| border="4" cellpadding="3"
- !ITEM
- !ATIVIDADE
- !OBJETIVO
- !MÉTODO
- !TEMPO
-|-
- | '''1'''
-           ||Iniciar o desenvolvimento de uma calculadora utilizando o Tutorial Calculadora.
-           ||8; 8.1; 8.1.1; 8.1.2
-           ||Utilizar o [[AppInventor]] no projetor e apresentação de ''Slides''
-           ||55 minutos
-|-
- | '''2'''
-           ||Relacionar o evento ''Inicialização do aplicativo'' com um procedimento.
-           ||8; 8.2; 8.2.1; 8.2.2
-           ||Utilizar o [[AppInventor]] no projetor e um Fluxograma
-           ||30 minutos
-|-
- | '''3'''
-           ||"Dominar" as propriedades do <tt>Label</tt> (e do <tt>Button</tt>).
-           ||8; 8.3; 8.3.1; 8.3.2; 8.3.3; 8.3.4
-           ||Utilizar o [[AppInventor]] no projetor
-           ||25 minutos
-|}
-====Lição VI====
-'''9- Adicionando novas funcionalidades a Calculadora.'''
-*9.1- Modificar os blocos de instrução para toda vez que a calculadora for re-orientada, novas funcionalidades surgirem (comparar com modelo);
-**9.1.1- Opções de Novas Funcionalidades:
-***Seno;
-***Cosseno;
-***Tangente;
-***Raiz Quadrada;
-***Expoente;
-***Seno^-1;
-***Cosseno^-1.
-**9.1.2- Entender e "traduzir" o ''Script'' de processamento de ''Strings'' do [http://scratch.mit.edu/ Scratch] para o [[AppInventor]].
-*9.2- Saber implementar parênteses;
-**9.2.1- Saber Configurar parênteses como prioridade durante um processamento de ''Strings''.
-*9.3- Saber incluir constantes (Pi, número de Euler).
-{| border="4" cellpadding="3"
- !ITEM
- !ATIVIDADE
- !OBJETIVO
- !MÉTODO
- !TEMPO
- |-
- | '''1'''
-           ||Adicionar novas funcionalidades.
-           ||9; 9.1; 9.1.1
-           ||Autônomo (sem auxílio)
-           ||Fora de aula (Sem limite de tempo)
- |-
- | '''2'''
-           ||Implementar método de processamento de ''Strings''.
-           ||9; 9.1; 9.1.2
-           ||Autônomo (sem auxílio)
-           ||Fora de aula (Sem limite de tempo)
- |-
- | '''3'''
-           ||Implementar Constantes e parênteses.
-           ||9; 9.2; 9.2.1; 9.3
-           ||Autônomo (sem auxílio)
-           ||Fora de aula (Sem limite de tempo)
-|}
-====Lição VII====
-===DIA 01===
-Apresentação
-*Conceitos básicos (variável, script, sprite, eventos...).
-*Apresentação da estrutura básica do [[AppInventor]], <tt>Blocks</tt> e <tt>Components</tt>.
-*Utilização de tutoriais iniciantes produzidos pelo MIT para aplicar o pouco aprendido.
-{{collapse top|Introdução ao AppInventor}}
-====Introdução ao AppInventor====
-Nesta oficina você aprenderá alguns conceitos básicos de programação e os utilizará para criar aplicativos utilizando a ferramenta [[AppInventor]]. O [[AppInventor]] é um software educacional criado pelo [http://web.mit.edu/ MIT] para auxiliar seus alunos a melhor compreender a funcionalidade da lógica de programação. Trabalharemos diversos conceitos que serão importantes quando tratados em outras linguagens, como Variáveis, Listas, <tt>Procedures</tt> e etc. Nesta primeira parte da oficina, aprenderemos um pouco mais sobre o [[AppInventor]].
-O [[AppInventor]] é uma ferramenta muito intuitiva, e por isso, de fácil compreensão. Ele é dividido em duas partes, o <tt>Designer</tt> e o <tt>Blocks</tt>. Na etapa <tt>Designer</tt>, trataremos <tt>Buttons</tt>, <tt>Labels</tt>, <tt>Canvas</tt> e até arquivos de mídia, como <tt>Sounds</tt>. Observe na imagem abaixo como a nomenclatura de cada seção (em inglês) indica exatamente sua função, como por exemplo, <tt>Viewer</tt> e <tt>Properties</tt>.
-[[Arquivo:AppInventorDesigner.png|800px|thumb|center]]
-Já no Blocks, criaremos <tt>Procedures</tt>, Listas, Variáveis e etc. Nesta parte desenvolveremos diversos blocos que detalharam o a funcionalidade do aplicativo, ou seja, o que os componentes do aplicativo devem fazer.
-[[Arquivo:AppInventorBlocks.png|800px|thumb|center]]
-Tanto o <tt>Designer</tt> como o <tt> Blocks</tt> possuem diversos conceitos que precisam ser abordados de uma maneira mais prática do que teórica. Para isso, enquanto introduzimos o básico de [[AppInventor]], iremos ver alguns conceitos comuns aos presentes em [http://scratch.mit.edu/ Scratch]. E esses conceitos, serão revistos através de tutoriais que iremos seguir ao longo desta oficina.
-{{collapse bottom}}
-{{collapse top|Tutorial Hello Purr}}
-====Tutorial Hello Purr====
-Antes de começarmos a desenvolver nossa aplicação, precisamos ter certeza do que exatamente queremos. Como este é o nosso primeiro tutorial iremos seguir o <tt>HelloPurr Tutorial</tt> que pode ser encontrado na sua versão original no site do [http://beta.appinventor.mit.edu/learn/setup/hellopurr/hellopurrphonepart1.html AppInventor - MIT]. Este aplicativo é relativamente muito simples, ele conterá uma imagem de um gato que quando clicada com o botão esquerdo do mouse, deverá tocar o som de um miado e uma instrução que dirá "Clique no Gato".
- Faça o download da [http://beta.appinventor.mit.edu/learn/tutorials/hellopurr/HelloPurrAssets/kitty.png Imagem do Gato] e do [http://beta.appinventor.mit.edu/learn/tutorials/hellopurr/HelloPurrAssets/meow.mp3 Miado] antes de continuar.
-Para começar vá ao site do [http://beta.appinventor.mit.edu AppInventor - MIT] e entre com uma conta Gmail. A imagem abaixo mostra como deverá aparecer sua tela na primeira vez que você loga no site e destacado em vermelho o botão ''New'', que você deve clicar para criar um novo projeto:
-[[Arquivo:Novo Projeto.png|800px|thumb|center]]
-Em seguida crie um novo projeto e o nomeie <tt>HelloPurr</tt>. Assim que você cria um projeto, o [[AppInventor]], automaticamente, o redirecionará para o <tt>Designer</tt>, onde iniciaremos o desenvolvimento do projeto. Como vimos na Introdução, no <tt>Designer</tt>, "organizamos" o desenvolvimento do aplicativo, porque é nele em que são criados os <tt>Components</tt>. <tt>Component</tt> ou simplesmente Componente é um termo utilizado para representar um conjunto de funcionalidades. Uma aplicação pode ser formada apenas utilizando <tt>Components</tt>. Para o [[AppInventor]] os Componentes são objetos que podem conter métodos, eventos e/ou propriedades. A imagem abaixo mostra a tela inicial do <tt>Designer</tt> e destaca a posição de algumas de suas seções.
-[[Arquivo:AppInventor - Analizando o Designer.png|800px|thumb|center]]
-Perceba pela imagem que o <tt>Designer</tt> já inicia com um componente: a <tt>Screen1</tt>. Todo componente existente no aplicativo é listado na seção <tt>Components</tt>, e a sua direita, na seção <tt>Properties</tt>, estão as propriedades do componente selecionado. Agora, selecione o componente <tt>Screen1</tt> e altere sua propriedade <tt>Title</tt> (na seção <tt>Properties</tt>)  para <tt>HelloPurr</tt>. A propriedade <tt>Title</tt> de uma <tt>Screen</tt> pode ser considerado como o título da mesma, neste caso, não teremos a necessidade de criar mais <tt>Screens</tt>, por isso o <tt>Title</tt> da nossa <tt>Screen1</tt> pode ser o do próprio aplicativo (ou seja, <tt>HelloPurr</tt>). Depois de titular a <tt>Screen1</tt>, nós adicionaremos um novo componente ao nosso aplicativo. Para adicionar um novo componente, vá até a seção <tt>Basic</tt>, abra a gaveta em que o componente se encontra, e o arraste até o vizualizador. Neste caso nós queremos criar uma imagem que ao receber um clique com o botão esquerdo do mouse, toque o som de um miado. Por isso nós adicionaremos ao vizualizador um componente <tt>Button</tt> (da gaveta <tt>Basic</tt>). Assim que o componente <tt>Button</tt> é criado, a seção <tt>Properties</tt> se "enche" de novas propriedades, agora referentes ao componente <tt>Button1</tt>. Antes de modificarmos as propriedades deste novo componente, vá até a seção <tt>Components</tt> e altere seu nome para <tt>ButtonGato</tt>, para que os componentes fiquem fáceis de se identificar.
- Apesar de este tutorial possuir poucos componentes é importante nomeá-los adequadamente. Para entender melhor a necessidade de se organizar os nomes dos componentes, leia [http://wiki.sj.ifsc.edu.br/index.php/Usu%C3%A1rio:Ernani.rs#Padroniza.C3.A7.C3.A3o Padronização].
-Agora que já possuímos um <tt>Button</tt> criado, precisamos fazer com que ele assuma a imagem do gato (link para download esta disponível no início deste tutorial). Selecione o componente <tt>ButtonGato</tt> e (na seção <tt>Properties</tt>) procure pela propriedade <tt>Image</tt>. A propriedade <tt>Image</tt> de um <tt>Button</tt> possui uma única função: Adicionar uma imagem de fundo a um componente. Como já possuímos a imagem do gato, precisamos carregá-la  no <tt>Designer</tt>. Há duas formas de carregar uma mídia  no <tt>Designer</tt>:
-*Logo abaixo da seção <tt>Properties</tt> há a seção <tt>Media</tt> clique na opção “Add...” e selecione o arquivo. Em seguida vá até a propriedade que você deseja carregar a mídia, e selecione o arquivo carregado.
-*Na própria seção <tt>Properties</tt>, quando for carregar um arquivo de mídia em uma propriedade, e este arquivo ainda não estiver carregado no <tt>Designer</tt>, você pode selecionar a opção “Add...” e selecionar o arquivo.
-Assim que você tiver a imagem carregada, o <tt>Designer</tt>, estará assim:
-[[Arquivo:AppInventor - Carregando Mídias.jpg|800px|thumb|center]]
-Pela imagem acima podemos perceber um problema no vizualizador: Por cima da imagem do gato aparece um texto, isso acontece porque a propriedade <tt>Image</tt> de um <tt>Button</tt> adiciona apenas uma imagem de fundo e não sobrepõe outras propriedades dos <tt>Buttons</tt> , como o <tt>Text</tt>. A propriedade <tt>Text</tt> possui uma função muito simples, adicionar um texto ao componente. Portanto a solução para o nosso "problema" é: Apagar o valor da propriedade <tt>Text</tt>. Assim que você tiver resolvido o problema do texto, nós já teremos a imagem do gato no nosso aplicativo pronta, agora é necessário adicionar uma pequena instrução que diga: Clique no Gato. Portanto, trabalharemos com outro componente, chamado <tt>Label</tt>. Os <tt>Labels</tt>, diferente da maioria dos componentes, possui apenas uma função: Exibir um texto. E é exatamente isso que precisamos, portanto, vamos até a gaveta <tt>Basic</tt> e arrastamos para o nosso vizualizador o componente <tt>Label</tt>. Em seguida altere o nome do <tt>Label1</tt> para <tt>LabelInstrucao</tt> (lembre-se que o [[AppInventor]] não aceita "ç" em nome de componentes). Agora, observe as propriedades do <tt>LabelInstrucao</tt>, como a função de um componente <tt>Label</tt> é apenas exibir um texto, é óbvio que todas as suas propriedades vão ser relativas a edição de texto.
-Por isso, vamos realizar uma série de alterações nas suas propriedade, para que o nosso texto ganhe maior visibilidade:
-*<tt>BackgroundColor</tt> = esta propriedade é muito semelhante ao <tt>Image</tt> dos <tt>Buttons</tt>, entretanto, ela não necessita de uma mídia carregada e só aceita as opções já disponíveis. Altere o valor desta propriedade para uma cor que destaque o texto. Exemplo: Magenta.
-*<tt>FontBold</tt> e <tt>FontItalic</tt> =  são respectivamente as propriedades ''Negrito'' e ''Itálico'', comumente utilizadas em edição de textos. Ative-as.
-*<tt>FontSize</tt> = Tamanho da letra. Aumente a letra para que o texto seja mais visível. Sugestão: 30.
-*<tt>Text</tt> = Como já vimos anteriormente nos componentes <tt>Buttons</tt>, o valor desta propriedade é exibido pelo <tt>Label</tt> (é comum que diferentes componentes possuam propriedades que realizam a mesma função). Altere o valor desta propriedade para: Clique no Gato. Como foi especificado no início deste tutorial.
-[[Arquivo:AppInventor - Designer Pronto.jpg|800px|thumb|center]]
-Por enquanto nosso aplicativo não possui instruções, ou seja, não faz nada. Ele apenas é uma imagem de um gato com uma instrução em baixo. A imagem acima mostra a "cara" do <tt>Designer</tt> nesta etapa e destaca em vermelho aonde abrir o <tt>Blocks</tt>. Como vimos na Introdução, o <tt>Designer</tt> adiciona os componentes e os valores iniciais as suas propriedades (podem ser alterados futuramente). Já o <tt>Blocks</tt> dá instruções a esses componentes, e é exatamente isso que faremos a seguir (abra o <tt>Blocks</tt>). Assim que você clicar no botão ''Open Blocks Editor'' você fará o download de um arquivo java (execute-o).
- Certifique-se se o seu computador possui os requisitos necessário para abrir o <tt>Blocks</tt> no site [http://beta.appinventor.mit.edu/learn/setup/index.html AppInventor - MIT].
-O <tt>Blocks</tt> nos proporciona muitas possibilidades, podemos adicionar diversas funcionalidades ao nosso aplicativo. Entretanto como esse é o nosso primeiro tutorial, não iremos explorá-las. Na verdade, nos concentraremos na que foi descrita no início deste tutorial. O aplicativo possui a imagem do gato e uma instrução, só falta uma coisa: que quando eu clicar no gato ele toque o Miado. Mas para fazermos um arquivo de áudio ser executado no [[AppInventor]], é necessário que outro componente seja adicionado no <tt>Designer</tt>: O <tt>Sound</tt>. Volte ao <tt>Designer</tt>, vá até a gaveta <tt>Media</tt> e arraste um <tt>Sound</tt> para o vizualizador. Observe que o <tt>Sound</tt> é um arquivo invisível no <tt>Designer</tt> e que necessita de uma mídia carregada para ser executado (sem uma mídia nenhum som será tocado). Portanto altere o nome do componente <tt>Sound1</tt> para <tt>Miado</tt> e a propriedade <tt>Source</tt> para o arquivo de som baixado. Agora quando você instruir o aplicativo para executar o <tt>SoundMiado</tt> ele tocará o arquivo de som que foi carregado.
-[[Arquivo:AppInventor - Designer Sound.jpg|800px|thumb|center]]
-Sempre que o componente <tt>SoundMiado</tt> for tocado, o som do miado que carregamos será tocado. Entretanto agora temos de instruir o aplicativo de executar o <tt>SoundMiado</tt> quando o <tt>ButtonGato</tt> receber um clique, e é agora que utilizaremos o <tt>Blocks</tt>.
-[[Arquivo:AppInventor - Blocks.jpg|800px|thumb|center]]
-A imagem acima nos da um pequeno mapa para termos uma ideia de como criar instruções. A parte <tt>Blocks</tt> do desenvolvimento de um aplicativo, no início, nos parece mais complicada porque não possuímos um bom domínio de [[AppInventor]] e como consequência não sabemos "aonde" no <tt>Blocks</tt> buscar as instruções desejadas. Por isso durante o desenvolvimento das oficinas tentaremos abrangir um grande números de funcionalidades para que você tenha mais "ferramentas" para utilizar. Agora vamos adicionar as instruções que desejamos. Precisamos fazer com que quando o <tt>ButtonGato</tt> seja clicado ele execute o miado. Vá até o <tt>Blocks</tt> e na seção <tt>My Blocks</tt> clique na gaveta <tt>ButtonGato</tt>. Observe que assim que você abre a seção <tt>My Blocks</tt> são listadas a gaveta <tt>My Definitions</tt> e uma outra para cada componente que foi criado no <tt>Designer</tt>. Como nós queremos utilizar o <tt>ButtonGato</tt>, vamos clicar na sua gaveta e vizualizar as opções disponíveis. Dentro dessa gaveta existe a seguinte instrução:
-[[Arquivo:Button Gato click.jpg|thumb|center]]
-Arraste esta instrução para o centro da tela. Observe a cor deste bloco (verde escuro), somente os blocos de eventos possuem essa cor. Em [[AppInventor]], evento é uma ação ou acontecimento que desencadeia um <tt>Procedure</tt>. Como por exemplo, o clique do mouse é uma condição para que um objeto se movimente. No caso <tt>HelloPurr</tt> o evento é o clique do mouse sobre o <tt>ButtonGato</tt>. Essa instrução sugere que quando o evento ocorrer, haverá uma consequência. A consequência deve ser adicionada a instrução evento. A consequência que esperamos é o miado, ou seja, a execução do <tt>SoundMiado</tt>. Para isso acontecer, vá até a seção <tt>My Blocks</tt> e na gaveta <tt>SoundMiado</tt> procure pela seguinte instrução:
-[[Arquivo:Call Sound Miado.jpg|thumb|center]]
-Perceba que dentro deste bloco esta escrito: "call SoundMiado.Play". Os blocos [[AppInventor]] são autoexplicativos, dentro deles PODEM existir até três informações:
-*A função do bloco.
-*O componente em questão (o bloco pode estar relacionado a algo que não seja um componente, como um <tt>Procedure</tt>).
-*A consequência.
-Neste caso "call", traduzindo do inglês, significa "chamar", portanto o bloco esta chamando algo do componente <tt>SoundMiado</tt>, e "Play", significa "tocar" ou "executar". Como o componente em questão é um arquivo de som, se executarmos o <tt>SoundMiado</tt> teremos como resposta o miado que desejamos. Agora só o que temos de fazer é juntar o bloco de evento com o "call" arrastando o "call" para dentro do de evento. Este deverá ser o resultado:
-[[Arquivo:Instrucao HelloPurr.jpg|thumb|center]]
-Assim que você tiver combinado as duas instruções, abra o emulador ou conecte o <tt>Blocks</tt> a um dispositivo para testar o aplicativo. Esta deverá ser a aparência do aplicativo:
-[[Arquivo:HelloPurr final.jpg|thumb|center]]
-{{collapse bottom}}
-{{collapse top|Tutorial MoleMash}}
-====Tutorial MoleMash====
- Este tutorial possui como pré-requisito o [http://wiki.sj.ifsc.edu.br/index.php/Usu%C3%A1rio:Ernani.rs#Tutorial_Hello_Purr Tutorial HelloPurr] e pode ser encontrado na sua versão original no site [http://beta.appinventor.mit.edu/learn/tutorials/molemash/molemash.html AppInventor - MIT].
-Agora que você tem uma noção de [[AppInventor]], iremos iniciar o <tt>MoleMash Tutorial</tt>. O <tt>MoleMash</tt> é um jogo muito simples, ele se resume em uma toupeira que se movimenta sobre uma área específica aleatoriamente, enquanto o jogador tenta tocá-la, e toda vez que o jogador a toca, recebe um ponto. Para começar, crie um projeto, nomeie-o <tt>MoleMash</tt> e altere o <tt>Title</tt> da <tt>Screen1</tt> para <tt>MoleMash</tt>. A seguir a primeira coisa que faremos, será criar a "área" sobre a qual a toupeira irá se deslocar. Para isso, utilizaremos um componente chamado <tt>Canvas</tt>. O <tt>Canvas</tt> é um retângulo bidimensional com área definida, utilizado para desenhar ou para mover <tt>Sprites</tt> (objetos  exibidos em duas dimensões).
-*Vá até a gaveta <tt>Basic</tt> e arraste um <tt>Canvas</tt> para o vizualizador, nomeie-o <tt>CanvasArea</tt>.
-*Mude sua propriedade <tt>Width</tt> para <tt>Fill Parent</tt>.
-*Mude sua propriedade <tt>Height</tt> para <tt>300 pixels</tt>.
-Quando o valor das propriedades <tt>Width</tt> e <tt>Height</tt> de um componente são alterados, os limites horizontais e verticais, respectivamente, são redefinidos. Existem três modos de expressar o  valor do <tt>Width</tt> ou <tt>Height</tt> de um componente no <tt>Designer</tt> (é possível fazer esta modificação no <tt>Blocks</tt> de outra forma):
-*Número de Pixels = É possível selecionar um número fixo de pixels.
-*<tt>Fill Parent</tt> = Quando esta opção for selecionada o espaço não utilizado pelo [[AppInventor]] passará a ser ocupado pelo componente em questão.
-*<tt>Automatic</tt> =  O <tt>Designer</tt> determina os valores  baseados em critérios próprios, por exemplo, se uma imagem de 40 pixels quadrados for adicionada como <tt>Image</tt> de um <tt>Button</tt> o <tt>Designer</tt> altera automaticamente os valores <tt>Width</tt> e <tt>Height</tt> para os da imagem.
-Agora que nossa área esta definida, precisamos acrescentar a toupeira ao jogo. Vamos utilizar outro novo componente: O <tt>ImageSprite</tt>. Um <tt>ImageSprite</tt> é um objeto que pode se locomover livremente por toda a área de um <tt>Canvas</tt>. Vá até a gaveta <tt>Basic</tt> e arraste um <tt>ImageSprite</tt> para dentro do <tt>CanvasArea</tt> (nomeie-o <tt>ImageSpriteToupeira</tt>). Em seguida, faça o download da [http://beta.appinventor.mit.edu/learn/tutorials/molemash/MoleMashAssets/mole.png Imagem] e a carregue na propriedade <tt>Picture</tt> do <tt>ImageSpriteToupeira</tt>, que possui a mesma função do <tt>Image</tt> dos <tt>Buttons</tt>. O cenário do jogo esta pronto, agora é necessário adicionarmos uma janela que indique o placar, e um botão para que possamos reiniciar o jogo. Para o placar, utilizaremos um <tt>Label</tt>, como já vimos anteriormente, o <tt>Label</tt> possui exatamente a função de exibir um texto. E como em nosso caso queremos exibir um placar, quem melhor? Já para criarmos um botão, utilizaremos novamente um <tt>Button</tt>. Portanto siga os passos abaixo para finalizarmos a parte <tt>Designer</tt> do aplicativo:
-*Crie o <tt>LabelPlacar</tt>.
-*Apague o valor da propriedade <tt>Text</tt> do <tt>LabelPlacar</tt>.
-*Aumente o valor da propriedade <tt>FontSize</tt> do <tt>LabelPlacar</tt> para 30.
- Observação: Quando o valor da propriedade <tt>Text</tt> do <tt>LabelPlacar</tt> for nulo, o <tt>Label</tt> desaparece do <tt>Designer</tt>. Justamente porque não há nenhum texto para mostrar, fato que mudará no <tt>Blocks</tt>.
-*Crie o <tt>ButtonIniciarNovoJogo</tt>.
-*Mude o valor da propriedade <tt>Text</tt> do <tt>ButtonIniciarNovoJogo</tt> para "Iniciar Novo Jogo".
-Assim que você tiver completado os passos acima, terá finalizado a parte <tt>Designer</tt>.
-[[Arquivo:MoleMash - Designer.jpg|800px|thumb|center]]
-Abra o <tt>Blocks</tt> para começarmos a desenvolver as instruções. A primeira instrução que devemos criar é o movimento da Toupeira (<tt>ImageSpriteToupeira</tt>). Para tal, iremos utilizar blocos diferentes dos que já utilizamos até então: Os <tt>Procedures</tt>. <tt>Procedure</tt> ou simplesmente procedimento, significa modo de agir ou proceder durante um evento. Podemos traduzir este conceito para programação se considerarmos “agir” como uma sequência de instruções a serem seguidas pela aplicação que esta sendo desenvolvida. Portanto o conceito de <tt>Procedure</tt> para [[AppInventor]] seria: Sequência de ações ou instruções a serem seguidas. Para criar um <tt>Procedure</tt> vá até a seção <tt>Built-In</tt>, e na gaveta <tt>Definitions</tt>, procure pelo seguinte bloco:
-[[Arquivo:Procedure.jpg|800px|thumb|center]]
-Arraste esse bloco para a Área de Trabalho do <tt>Blocks</tt> e altere o nome do procedimento para <tt>MovimentoToupeira</tt>.
-[[Arquivo:Procedure touperia.jpg|thumb|center]]
-Agora que o bloco de procedimento foi criado, é preciso adicionar "O QUE" o procedimento deve realizar. Como queremos fazer com que a Toupeira se desloque aleatoriamente...
- EM CONSTRUÇÃO
-{{collapse bottom}}
-===DIA 02===
-Especificação
-*Relembrando o básico já visto.
-*Introdução a funcionalidade da calculadora (especificação).
-*Início do desenvolvimento na parte Components.
-===DIA 03===
-Desenvolvimento
-*Término da parte Components.
-*Revisão dos conceitos básicos que serão utilizados (variáveis, listas, procedures...).
-*Início da parte do Block editor.
-===DIA 04===
-*Conclusão e possibilidades de melhoramentos.
-=Documentação=
- Breve...
-=Padronização=
-{{collapse top|Em Construção...}}
-==Introdução==
-Muitos alunos, ao entrarem em contato com o [[AppInventor]], aprendem rapidamente como utilizá-lo. Este fato ocorre porque esses alunos, normalmente, já possuem alguma experiência em programação, já entraram em contato com o [http://scratch.mit.edu/ Scratch] e/ou se entusiasmaram com a atraente interface do [[AppInventor]]. Mas para a melhor compreenção e utilização desta ferramenta, é necessário que algumas características sejam padronizadas. Quando iniciados no [[AppInventor]] é comum que a maioria não dê grande importância para a ordem de desenvolvimento do projeto e muito menos para a nomenclatura que esta sendo utilizada. O objetivo da "Padronização" é justamente evitar que os alunos se percam durante o desenvolvimento do projeto, direcionando-os  para o essencial e os auxiliarem para fazê-lo organizadamente.
-==Nomenclatura==
-===Projeto===
-Antes de iniciar um projeto, é necessário nomeá-lo para poder classificá-lo e distinguí-lo de outros. Ao nomear um projeto procure relacionar sua função e versão a ele. Como por exemplo:  <tt>CriadorDeFilmesV2b</tt>. No exemplo citado a função da aplicação é "Criar Filmes", sua versão é "2" (sempre precedido de um "V") e o "b" significa que ele possui alguma alteração relevante ao <tt>CriadorDeFilmesV2a</tt> (o anterior), mas que ainda não esta pronto (a versão ainda esta em fase de desenvolvimento). Dessa forma as aplicações criadas ficam mais organizadas e correm menor risco de se perderem num imenso banco de dados. Procure também, não se esquecer de manter as palavras no mesmo idioma e de iniciá-las com uma letra maiúscula, ajuda na visibilidade (leitura).
- Em Construção...
-{{collapse bottom}}

Mudanças entre as edições de "Usuário:Ernani.rs"

Edição atual tal como às 12h22min de 7 de junho de 2016

Menu de navegação

Pesquisa