Desenvolvimento de jogos com HTML5

Tamanho: px
Começar a partir da página:

Download "Desenvolvimento de jogos com HTML5"

Transcrição

1 Desenvolvimento de jogos com HTML5 O HTML 5 é uma nova plataforma para o desenvolvimento de jogos online e com potencial para ser uma das mais utilizadas para o desenvolvimento de jogos, pois esta linguagem é compatível com a maioria dos browsers existentes em computadores, tablets e smartphones, incluindo ipads e iphones. Utilizando o HTML 5 juntamente com as folhas de estilos CSS e o JavaScript é possível desenvolver jogos de uma forma rápida, compatível com diversas plataformas, incluindo dispositivos móveis (como já descrito acima), o que não possível com plataformas como Adobe Flash, onde é necessário realizar adaptações para que o mesmo jogo seja executado em diferentes dispositivos. Mais antes de iniciar a aprendizagem do HTML 5 é importante saber quais são os profissionais envolvidos no desenvolvimento de jogos e quais as etapas presentes neste desenvolvimento. O que é um Jogo? Um jogo é uma atividade lúdica (toda e qualquer ação que tem como objetivo produzir prazer quando é executada) composta por uma série de ações e decisões, limitado por regras e pelo universo do jogo, que resultam em uma condição final. Já os jogos digitais, as regras e o universo do jogo são m apresentados por meios eletrônicos e controlados por um programa digital. As ações do jogador, suas decisões, escolhas e oportunidades compõem a "alma do jogo".

2 Antes de iniciar o desenvolvimento de um jogo, vamos conhecer quais são os profissionais envolvidos neste desenvolvimento. Profissionais envolvidos na criação de jogos Além de uma plataforma de desenvolvimento de jogos são necessários profissionais de várias áreas para a criação do jogo. Entre eles podemos destacar: Produtores: são os responsáveis por supervisionar o desenvolvimento de um jogo. Os produtores são responsáveis em dar vida à ideia inicial de um jogo. Game Designers: Os profissionais responsáveis desta área são os responsáveis pela criação e participam da concepção de ideias para o desenvolvimento. Dentro da criação de um jogo existem vários tipos de Designers, como por exemplo: Character Designer: Responsável pela criação dos personagens do jogo. Game Designer: É o responsável pela jogabilidade, ambiente e história durante a produção do jogo. Object Designer: É o responsável pela criação dos elementos do cenário, personagens e como eles irão se interagir entre si. Level Designer: É o responsável pela criação dos desafios, puzzles (quebra-cabeças) e é claro o desenvolvimento das fases do jogo. Sound Designer: É o responsável pela criação dos sons e as músicas executadas no jogo. Modeladores 3D: Criam e modelam em 3D todos os personagens do cenário, da animação, criam texturas, iluminação, dentre tantas outras que envolvam imagem. Neste curso apenas criaremos jogos utilizando imagens em 2 dimensões, não sendo necessário conhecimento de ferramentas 3D. Programadores: são os responsáveis por desenvolver toda a lógica do jogo e criar o código que irá fazer funcionar a física do jogo. Programador de física do jogo: dedica-se ao desenvolvimento da física que o jogo irá utilizar, estabelecendo regras que simularão a gravidade. Programador de inteligência artificial: São os responsáveis por desenvolver toda a lógica existente por detrás de cada ação que é feita durante o jogo.

3 Programadores de gráficos: São os responsáveis por não deixar jogo lento quando, por exemplo, há muitos inimigos na tela, o que exige uma grande capacidade de processamento, às vezes superior ao que o console ou computador suportam. São os responsáveis por otimizar a maneira como os gráficos serão apresentados na tela. Testadores: são os responsáveis por analisar tecnicamente o jogo com o objetivo de indicar falhas em seu desenvolvimento. O foco deste curso é o desenvolvimento de jogos em HTML5, sendo assim, iremos focar o curso no conhecimento da linguagem HTML5. As imagens, o roteiro do jogo e os demais elementos presentes no jogo já estão prontos, bastando apenas desenvolver, ou seja, entraremos na fase de produção do jogo. Vamos então conhecer quais são as fases de desenvolvimento de um jogo. Etapas na produção de um jogo Agora que você já conhece os profissionais envolvidos na criação de um jogo, vamos agora conhecer as etapas da produção de um jogo. Pré-produção: A pré-produção de um jogo envolve elementos de concepção de ideia, regras de negócios e documentação do projeto. Para que um jogo comece a ser produzido, as ideias precisam ser criadas e aprovadas pelos editores e desenvolvedores da empresa. Produção: Nesse estágio de produção os programadores trabalham para desenvolver a lógica do jogo, bem como os sistemas de cálculo, de física etc. Os artistas se concentram na produção de personagens, hoje em dia todos modelados em 3D. Engenheiros de som desenvolvem os efeitos sonoros e os compositores a trilha sonora do jogo. Pós-Produção: É nesta fase em que os testadores trabalham testando o jogo à busca não só de bugs (erros), mas também testando a jogabilidade, desempenho computacional das plataformas com o jogo e tudo o mais. Após a realização de todos os testes e a obtenção de garantia que o jogo está

4 totalmente pronto, a logística de distribuição e venda é acionada para que o jogo seja vendido. Ambiente de trabalho Agora que conhecemos as etapas na produção de um jogo, vamos preparar o ambiente de trabalho para a produção de um jogo emhtml5. Para a criação de códigos HTML5, CSS e JavaScript não são necessários à instalação de nenhum aplicativo específico, pode-se até utilizar o bloco de notas do Windows, mas para um desenvolvimento mais preciso, e para que se possa realizar testes de maneira mais confiável, iremos utilizar neste curso os seguintes aplicativos. Notepad++ Notepad++ é um software livre (como em "liberdade de expressão" e também como em "cerveja grátis") editor de código fonte e substituição bloco de notas que suporta várias línguas. Em execução no ambiente MS Windows, o seu uso é regido pela licença GPL. Com base na poderosa edição componente Scintilla, Notepad++ é escrito em C++ e usa puro Win32 API estl, que garante uma maior velocidade de execução e menor tamanho do programa. Para abrir o programa, clique no menu Iniciar, escolha Todos os Programas, selecione a pasta Notepad++ e por fim clique sobre Notepad++. Editor Notepad++ aparece na tela.

5 Caso seu computador no possua o Notepad ++, você pode baixá-lo a partir da URL: Google Chrome Canary e Mozilla Firefox O Google Chrome Canary é um browser que tem como finalidade funcionar como teste de desenvolvimento, pois ele apresenta funcionalidades que ainda não foram aplicadas na versão estável para o público geral. Em outras palavras, ele é uma versão para desenvolvedores, ele é hoje uma versão que será estável num futuro próximo (dias ou meses). A diferença dessa versão em relação à versão estável (pública) é o maior suporte às APIs e funcionalidades do HTML5. Você pode baixa-lo a partir desta URL:https://tools.google.com/dlpage/chromesxs/ O Mozilla Firefox, ao lado do Chrome, é um dos navegadores mais populares da internet e também é totalmente compatível com os principais recursos do CSS3.

6 Você pode baixa-lo a partir desta URL:http://www.mozilla.org/pt- BR/firefox/fx/ Agora que já temos os programas necessários, vamos conhecer os conceitos básicos da linguagem HTML5. Conhecimentos básicos sobre HTML5, CSS e JavaScript No desenvolvimento de jogos ou qualquer aplicativo utilizando o HTML5, alguns mitos de desenvolvimento devem ser explicados. A estrutura de desenvolvimento de um aplicativohtml5 segue as seguintes características: HTML5 - Marcação. CSS - Formatação. JavaScript - Comportamento. O que isso quer dizer? Ao se criar um jogo ou aplicativo utilizando HTML5, o HTML5 somente será responsável pela exibição dos elementos no browser, como imagens, textos, execução de sons, exibição de vídeos etc. Para realizar a formatação desses objetos iremos utilizar o CSS e para criar comportamentos e funções, ou seja, a programação do aplicativo, utilizaremos o Java Script. O HTML5 não apresenta métodos e funções para detecção de comportamentos, isso deve ser feito em JavaScript. O que o HTML5 trouxe de novo são as novas possibilidades para que o Javascript controle os elementos criados no código. Então vamos agora conhecer um pouco de cada uma dessas linguagens. Vamos agora relembrar os conceitos básicos de cada uma das linguagens que serão utilizadas neste curso. HTML 5 O HTML5 é o novo padrão da linguagem de marcação de hipertextos (HTML). Apesar de o HTML5 ainda estar em fase de desenvolvimento, a maioria de seus novos recursos já podem ser

7 utilizados em browsers modernos como o Google Chrome, Mozilla Firefox, Safari etc. O que é há de novo no HTML5 e quais as vantagens de sua utilização: Elemento para desenho 2D. Elementos < audio > e < video > para reprodução de mídias. Suporte para armazenamento local. Novos elementos semânticos: < article >, < header >, < foot >, < section >, etc. Novos controles de formulários, como calendários, data, hora, pesquisa, telefone etc. Vamos agora criar uma estrutura básica de um códigohtml5 no Notepad++ instalado anteriormente. Abra-o, caso ainda não esteja. Clique no menu Arquivo e depois em Novo: Como vamos trabalhar com a linguagem HTML, precisamos informar ao Notepad++, a linguagem que iremos trabalhar, para isto, clique no menu Linguagem, selecione a letra H e clique em HTML.

8 Defina para o arquivo aberto a seguinte marcação HTML: exemplo1.html Esta é a estrutura básica de uma página em HTML5. Vamos entender suas principais partes à seguir. O Doctype O Doctype deve ser sempre a primeira linha de código do documento antes da tag HTML: O Doctype indica para o navegador e para outros meios qual a especificação de código utilizada, que nesse caso, é HTML5. Isso determina a forma com que o meio de acesso (navegador, leitor de tela e etc) irá renderizar o código lido. O Doctype não é uma tag do HTML, mas uma instrução para que o browser tenha informações sobre qual versão de código a marcação foi escrita. O elemento HTML

9 Uma marcação (código) HTML é uma série de elementos em árvore onde alguns elementos são filhos de outros e assim por diante (DOM). O elemento principal dessa grande árvore é sempre o. O atributo "lang" é necessário para identificar qual a linguagem principal do documento. Vamos agora salvar este arquivo. Clique no menu Arquivo em seguida selecione a opção Salvar. Para o local de gravação, escolha a Sua Pasta. Crie uma pasta com o nome de jogo1, dentro de sua pasta. Salve o arquivo com o nome deexemplo1.html na pasta jogo1, recém-criada: Vamos agora testar o funcionamento do código diretamente no browser. Clique no menu Executar do NotePad++ e escolha a opção, Launch in Chrome. Observe que o resultado do código será apresentado no browser padrão. Vamos agora aplicar um formato ao seletor < h1 > utilizado no código HTML utilizando as folhas de estilo CSS. Folhas de estilo CSS

10 CSS é a abreviação do termo em inglês Cascading Style Sheet que é traduzido para o português como folhas de estilo em cascata. O CSS tem por finalidade indicar como uma determinada marcação em HTML/XML deve ser exibido, como por exemplo, cor, tamanho, posição, etc. Segundo a W3C (World Wide Web Consortium) que é um consórcio internacional de pessoas e empresas e órgãos governamentais que visa desenvolver padrões para a criação e a interpretação de conteúdos para a Web, CSS pode ser definida da seguinte maneira: "CSS é um mecanismo simples para adicionar estilos, por exemplo, fontes, cores, espaçamentos aos documentos web". Vamos conhecer a estrutura básica de uma regra CSS. Anatomia de uma regra CSS Na imagem abaixo tempos uma regra básica da anatomia de um código CSS, que deve ser composta pelo seletor e a declaração que será atribuída a esse seletor, composta por propriedade e valor: Seletor: Alvo da regra CSS. Elemento ou grupo de elementos que receberão os estilos definidos na regra. Declaração: Parâmetros de estilização. Propriedade: Define qual será a característica do seletor a ser utilizada.

11 Valor: É a qualidade ou a quantificação da propriedade. O código CSS deve ser escrito entre as tags < style > e< /style > do código HTML. Vamos alterar as propriedades CSS do seletor < h1 >. No exemplo acima alteramos as propriedades fontsize para 30px e a propriedade color para blue. Vamos agora alterar as propriedades para o seletor div identificado com o nome "objeto1". Salve o arquivo no Notepad++, logo após visualize-o no seu browser. Visualização do arquivo: Pressione [CTRL+S] (para salvar) e teste o funcionamento do código:

12 Observe que a formatação do seletor < h1 >foi alterada e a div objeto1 foi formatada e posicionada respeitando as propriedades indicadas. JavaScript JavaScript é uma linguagem de programação com recursos embutidos para acessar partes de um documento HTML, incluindo estilos CSS dentro dos elementos. Um documento HTML pode conter código JavaScript dentro do elemento < script >. Vamos realizar um exemplo simples, vamos exibir a data atual por um código JavaScript. Pressione [CTRL+S] para salvar as alterações no documento. Abra o arquivo no Browser e visualize o resultado apresentado:

13 O método document.write escreve qualquer informação no documento, neste exemplo indicamos a informação que deveria ser escrito era a data e hora atual obtidas pela função Date(). Caso queira escrever uma mensagem no documento pelo método document.write é obrigatório o uso das aspas como o exemplo abaixo: Não utilize aspas para exibir valores numéricos, funções e conteúdo de variáveis. Vamos agora alterar propriedades CSS pelo código Javascript. Funções JavaScript definidas pelo programador O JavaScript possui muitas funções e métodos embutidos, mas não possui tudo o que você poderia precisar no desenvolvimento de um aplicativo e principalmente de um jogo, por isso é possível criar funções especificas. Inicialmente vamos criar a div que será alterada pelo código JavaScript. Como exemplo vamos criar uma função que irá alterar a propriedade background-color da div objeto1. Exclua a linha de código com o método document.writer e digite o código abaixo: Observe que criamos uma função com o nome de mudar Cor que pelo método document.getelmentbyid irá alterar a

14 propriedade backgroundcolor da div identificada nome objeto1 para verde. pelo Agora vamos criar um botão irá executar essa função. Pressione [CTRL+S] para salvar as alterações no documento e execute-o: jquery Quando se trata da complexidade de programar jogos, o ideal é que se tente simplificar e facilitar a utilização do código. Para isso, existem hoje FrameWorks JavaScript que ajudam o desenvolvedor a abstrair uma grande quantidade de código, como por exemplo, resolver problemas de compatibilidade entre browsers entre outras funções. O jquery é hoje um dos FrameWorks mais utilizados para o desenvolvimento de jogos e de outros demais aplicativos utilizando o HTML5. Link para a última versão estável disponível dojquery: Temos duas opções: Usar essa URL de um servidor externo (Google Code) nos exemplos.

15 Baixar esse arquivo jquery.min.js e colocar localmente em uma pasta para usarmos. Para este curso, vamos escolher a primeira opção, vamos usar essa URL direta do jquery que está hospedado no Google Code. Antes, crie um botão que irá chamar uma função com o nome de ocultar(). Digite o código abaixo após a tag < input > criada anteriormente: Vamos agora criar a função ocultar(). Digite o código abaixo entre as tags < script > e < /script >: Observe que agora o código foi simplificado de tal forma que apenas precisamos utilizar o caractere $ e indicar o nome do objeto a ser modificado e a propriedade que será utilizada. Mas para usar esta forma simplificada devemos informar no código que iremos utilizar o framework jquery. Digite o código abaixo após a tag < /title > antes de < style >: Pressione [CTRL+S] para salvar as alterações no documento. Veja o resultado final do documento:

16 Nada impede que você crie uma pasta, por exemplo, chamada js dentro da pasta jogo1 e salve o arquivo do jquery lá, e ao chama-lo usando a tag < script >: Isso vai ficar a seu critério. Abra o arquivo no Browser e visualize o resultado apresentado. Observe que ao clicar no botão "Ocultar div" adiv será oculta. Agora que já revimos alguns conceitos básicos de HTML, JavaScript e CSS vamos dar inicio ao primeiro jogo. Documento do Projeto do Jogo Embora muitas pessoas saltem esta etapa no desenvolvimento de jogos, ela é uma parte essencial do processo do desenvolvimento de um jogo. O documento do jogo determina por escrito todo o rascunho do jogo, descrevendo as peças que deverão se juntar para formar o game, incluindo: Resumo do tema ou enredo; Lista de locações ou ambientes que o jogo irá conter; Rascunhos de mapas, puzzles a serem solucionados; Elenco de personagens, storyboard com as animações entre outras informações. É claro que os tipos e a quantidade de informações que esse documento irá conter dependem do tamanho e da complexidade do jogo. Observação: O início deste jogo será desenvolvimento utilizando exclusivamente JavaScript e CSS. Nas unidades que se seguem iremos complementá-lo com recursos do HTML5, com o áudio e armazenamento local, por exemplo. É importante criar esse primeiro exemplo para que você conheça os principais recursos de desenvolvimento de jogos, como detecção de teclas, detecção da posição do mouse, identificações de colisões, etc.

17 Vamos então ao documento deste Projeto: Nome do jogo: Pong. Tema: Jogo para 2 jogadores onde a missão dos jogadores é rebater um asteroide: Fazendo com que o seu adversário não alcance o asteroide e assim acumular pontos. Será somado 1 ponto quando o asteroide atingir a área de pontuação: Os jogadores irão controlar os rebatedores:

18 Pelas seguintes teclas: Jogador 1: W - movimenta o rebater para cima. S - movimenta o rebater para baixo. Jogador 2: Seta para cima - movimenta o rebatedor para cima. Seta para baixo - movimenta o rebatedor para baixo. O jogo se passará no espaço, portanto iremos utilizar como imagem de fundo uma imagem espacial: Observe que esse documento, apesar de bem simples, facilita o entendimento do programador para um desenvolvimento mais rápido, e também evita possível erros de entendimento de como será a mecânica do jogo. Com base neste documento vamos dar início ao desenvolvimento do jogo.

19 Criando o Jogo Abra o aplicativo Notepad++ e crie um novo documento, clicando em Arquivo e depois em Novo. Digite a estrutura básica de um código HTML como indicado baixo: pong.html Iremos iniciar o desenvolvimento do jogo criando o código CSS que irá formatar e posicionar as divs que serão utilizadas no jogo. Vamos iniciar criando uma div com o tamanho de 600pixels de largura por 400 pixels de altura que irá receber a imagem de fundo do jogo. Iremos chamar essa div de fundo. Abaixo da div fundo iremos indicar a formatação de uma div com o nome de asteroide. Agora, iremos criar uma classe com o nome de paddle que irá posicionar os batedores laterais que serão controlados pelos jogadores. Para finalizar o posicionamento dos elementos do jogo vamos criar uma div com o nome depaddle2 que irá posicionar o rebatedor da direita. Com o código CSS indicamos o posicionamento e a formatação dos objetos, vamos agora, criar o código HTML que irá criar os objetos. Observe que todas as divs criadas estão posicionadas dentro de uma div container chamada de fundo. Antes de visualizar o resultado do jogo, copie a pasta pong que se encontra em \arquivos-cursos\html5, para Sua pasta, nela estão os arquivos de imagens e sons que serão utilizados neste jogo. Vamos agora visualizar o resultado. Pressione o comando [CTRL+S] para salvar as alterações no arquivo. Salve este arquivo com o nome de pong.htmldentro da pasta jogo1, que se encontra dentro de sua pasta.

20 Abra o arquivo pong.html no Chrome e veja o resultado:

21 A partir do próximo tópico iremos criar o código JavaScript que irá alterar a posição das divspaddle1 e paddle2 quando as teclas de movimentação do jogo forem pressionadas pelos jogadores. Capturando as teclas pressionadas Com base no documento do jogo criado na aula anterior iremos agora capturar as teclas que serão pressionadas pelo jogador1 para movimentar o batedor. A criação de uma função que captura as teclas pressionadas pelo jogador é uma das funções mais importantes no desenvolvimento de um jogo. Sabemos pelo documento do jogo que o jogador1 irá pressionar as teclas W e S para movimentar o batedor. O JavaScript identifica a tecla pressionada pelo seu valor Decimal (DEC) na tabela ASCCII, que pode ser consultada no link: Após identificar a tecla que jogador1 irá pressionar, devemos indicar qual será o comportamento a ser executado. Quando ojogador1 pressionar a tecla W (código decimal 87) a divpaddle1 será movimentada -5 pixels no eixo Y. Caso ojogador1 pressione a tecla S (código decimal 83) a divpaddle1 será movimentada +5 pixels no eixo Y. Com base nessas informações a primeira coisa a fazer é criar uma variável com os códigos decimais de cada tecla que será capturada. Diferentemente no exemplo criado na unidade anterior, nesta unidade iremos criar um arquivo específico para o código JavaScript. Abra o aplicativo Notepad++ e crie um novo documento em branco. Digite nele apenas o código JavaScript abaixo: pong.js. Dentro da pasta jogo1, crie uma pasta chamada js e salve esse arquivo desta pasta js com o nome de pong.js.

22 A pasta jogo1 ficará com essa estrutura: Agora vamos criar uma função que irá identificar se as teclas W ou S serão pressionadas.

23 Utilizamos a estrutura condicional switch para identificarmos quando as teclas forem pressionadas. Quando o usuário digitar "W" o elemento paddle1 terá sua propriedade top alterada, incrementada em 5. Quando apertar "S" terá a propriedade top decrementada em 5. Pressione [CTRL+S] para salvar as alterações no arquivo. Abra o exemplo no navegador e pressione as teclas "W" e "S". Capturando eventos de mouse Vamos supor que no documento de desenvolvimento deste jogo ao invés de estar descrito que os rebatedores serão controlados pelas teclas do teclado, os rebatedores deverão ser controlados pelo mouse. Neste caso, devemos capturar as posições Y do ponteiro do mouse e alterar a posição da propriedade top da div #paddle1. Vamos criar um novo arquivo JavaScript onde iremos criar um evento, que irá capturar a posição Y do ponteiro do mouse. Crie um novo arquivo em branco no Notepad. Iremos agora criar um evento com o nome de coordenadas e iremos criar uma nova variável com o nome de y. Existem diferenças entre capturar a posição do ponteiro do mouse entre o Google Chrome e entre o Mozilla Firefox. Para que este jogo possa funcionar corretamente nestes dois tipos de browsers, fizemos essa verificação: Indicamos que a propriedade top da div#paddle1 deverá ser atualizada de acordo com a posição do eixo Y do mouse menos 80unidades que a altura total da div #paddle1. Desta fora, o ponto de referência para a movimentação da div#paddle1 estará posicionado no topo da div:

24 Observe que finalizamos a função e indicamos que caso o mouse se movimente no browser a função coordenadas será executada: Salve este arquivo dentro da pasta js com o nome de pong_mouse.js. Vamos agora vincular o arquivo pong_mouse.jsao arquivo pong.html. Abra o arquivo pong.html e substitua o arquivo pong.js pelo arquivo pong_mouse.js: Pressione [CTRL+S] para salvar as alterações no arquivo. Abra o arquivo no navegador e veja o resultado.

25 Criando a movimentação do segundo jogador Nesta unidade iremos voltar a seguir o documento do jogo. Observe que no documento do jogo, o jogador2 irá movimentar o rebatedor pelas setas de direção. Quando o jogador2 pressionar a seta para cima do teclado, a div paddle2 irá se movimentar -5 pixels no eixo Y. Quando o jogador2 pressionar a seta para baixo do teclado a div padlle2 irá se movimentar +5 pixels no eixo Y. Abra o arquivo pong.html e remova a referência ao arquivo pong_mouse.js e substitua pelo arquivo pong.js: Pressione [CTRL+S] para salvar as alterações no arquivo. Abra o arquivo pong.js. Na variável TECLA indicaremos os códigos para a seta para cima (38) e seta para baixo (40). Agora ela terá essa implementação: Também vamos acrescentar a ação para o elemento Paddle2. O código completo de pong.js Uma observação muito importante relacionada ao novo código: Armazenaremos a referência dos elementos em variáveis:

26 E depois as usamos. Ganhamos em performance ao fazer isso, pois o JavaScript só precisa procurar na árvore DOM pelos elementos apenas uma vez. Se tivéssemos feito assim (não precisava alterar o código): Iria funcionar normalmente. Mas ficaria um código deselegante e de difícil alteração. Além disso, a cada $("#paddle2") e$("#paddle1") o JavaScript teria que pesquisar o elemento na árvore DOM, o que decrementa a performance (apesar dela ser imperceptível para este pequeno projeto). Game Loop O Game Loop é o loop principal do jogo, em alguns casos, chamado de seu coração. Ele é responsável pelo funcionamento do jogo. Em um exemplo clássico, um jogo consiste de uma sequência de pegar a entrada do usuário, atualizar o estado do jogo, aplicar a lógica, os efeitos sonoros e mostrar o jogo. Essa sequência é feita através do game loop. Em um pseudo código, essa ação seria executada: Enquanto o jogo estiver rolando o laço será executado e as funções também: Serão chamadas. Em ler_entrada() são executadas as ações de leitura dos dispositivos de entrada, como:teclado, mouse. Já em atualizar_jogo() a lógica do jogo é aplicada em conjunto com os dados lidos dos dispositivos de entrada. Normalmente é nessa

27 função que se verifica se o usuário perdeu ou ganhou o jogo e onde a variável jogo_rodando é atualizada, senão o jogo ficaria executando infinitamente. E em desenhar_jogo(), o jogo é redesenhado de acordo com as novas informações de atualizar_jogo(). Melhorando a jogabilidade Jogabilidade é termo utilizado para indicar a interação que o jogador tem com o jogo e que descreve a facilidade na qual o jogo pode ser jogado. Além de exibir as imagens na maior velocidade possível, um jogo precisa também dar resposta aos comandos do jogador. Para passar a sensação de tempo real, o jogo precisa atualizar a tela o mais rápido possível e processar os comandos do jogador no mesmo ritmo. Para realizar estas tarefas ao mesmo tempo vamos criar um loop principal que é simplesmente um loop onde os eventos de teclado e/ou mouse são capturados e revertidos em uma ação em um menor tempo possível. Iremos então melhorar a jogabilidade tornando o jogo mais divertido ao jogador criando um game loop. Vamos criar um novo arquivo javascript com o nome depong2.js que irá melhorar consideravelmente a jogabilidade, e resolver este problema de teclas pressionadas. Abra o Notepad e crie um arquivo em branco. Salve este arquivo com o nome de pong2.jsdentro da sua pasta no diretório js. Abra o arquivo pong.html e substitua o arquivo pong.js por pong2.js. Inicialmente vamos criar novamente a variável TECLA com os códigos de captura de teclas. Agora, vamos precisar de uma nova variável que irá armazenar a tecla pressionada pelos jogadores. Vamos chamar esta variável de jogo. Digite o código abaixo: Agora vamos ao código do game loop. Função setinterval

28 A função setinterval() é nativa do JavaScript e é utilizada para indicar a unidade de tempo que um determinado evento irá acontecer. Neste jogo iremos criar uma variável que irá chamar uma função com o nome de loop a cada 30 milissegundos. Desta forma, teremos um temporizador que irá movimentar os batedores quando as teclas forem pressionadas. Funcionando no nosso caso, como o Game Loop clássico. Observe que a variável jogo.pressionou somente será verdadeira (true) quando a tecla for pressionada (keydown), e quando a tecla não estiver mais sendo pressionada (keyup) o valor da variável jogo.pressionou será falso (false). Agora vamos criar a função loop() que deixará o jogo em loop. A resposta ao teclado pressionado será executada pela função movebatedores(). Também à criaremos. Observe que a lógica foi alterada. Antes, implementávamos as ações executadas pela função movebatedores() dentro do eventokeydown(). Agora, nos eventos keydown() e keyup()apenas capturamos as teclas que estão sendo pressionadas e as atualizamos no array jogo.pressionou. A função loop() é executada a cada 30 milissegundos: E ela executa o método movebatedores(): E este método verifica a tecla pressionada (a partir doarray jogo.pressionou) no momento e decide se vai reposicionar o paddle1 ou paddle2.

29 Em resumo: Neste momento, o jogo faz a mesma coisa que fazia antes, mas com uma alteração de metodologia. Agora usamos o gameloop. Movimentando o asteroide dentro do game loop Iremos utilizar o mesmo temporizador criado para movimentar os batedores (o game loop) para movimentar o asteroide a cada 30 milissegundos. Inicialmente iremos criar uma variável que irá conter os valores da velocidade, posições x e y do asteroide e a direção atual da sua movimentação no eixo x e no eixo Y. O próximo passo é criar a funçãomoveasteroide(). Inicialmente nesta função iremos criar variáveis que irão identificar a largura e a altura total da div fundo e, criaremos também, uma variável como nome de asteroide que terá o conteúdo da variável jogo.asteroide. Crie-a depois da função movebatedores(): Para criar a movimentação da div asteroide somamos ao eixo x da variável asteroide o valor da variável asteroide.velocidade *asteroide.direcaox. Efetuando este mesmo processo ao eixo y. Lembre-se que esse procedimento será executado a cada 30 milissegundos criando a movimentação da div no eixo x e no eixo y. Neste primeiro momento, as variáveis FundoAltura e FundoLargura não serão utilizadas. Mas depois elas serão. Vamos agora testar o funcionamento do código. Pressione [CTRL+S] para salvar as alterações e execute o arquivo pong.html. Observe que a div asteroide irá se movimentar no eixo x e no eixo y. Pressione a tecla F5 para reiniciar o efeito. Observe que a movimentação ainda não respeita os limites do jogo (a div #fundo). Antes de criar os limites do jogo vamos rever como é possível identificar possíveis erros no código do jogo.

30 Visualizando possíveis erros no código Ao desenvolver um jogo ou qualquer aplicativo, durante o seu desenvolvimento podem ocorrer erros no código. Para visualizar estes erros, caso o jogo não apresente o resultado esperado. Para emular um erros, altere temporariamente o nome da função moveasteroide() para moveasteroideteste(). Isso vai gerar erro. Agora, clique com o botão direito do mouse sobre qualquer local da página no Chrome e selecione a opção Inspecionar elemento: Abrirá uma área na parte inferior do navegador, clique na aba Console e veja um descritivo de que existe um erro:

31 O erro é específico. Cadê a função moveasteroide()? Ela não existe, nós a renomeamos para moveasteroideteste(). E em seguida, clique sobre o script pong2.js. Ele será aberto e nos será informado o local do erro: Usar o console durante o desenvolvimento é sempre importante, para evitar que algum erro passe em branco. Refaça a alteração, altere a função moveasteroideteste() para o seu nome correto: moveasteroide(). Salve as alterações. Agora vamos voltar para o jogo. Criando os limites de movimentação do asteroide Agora, vamos limitar a movimentação do asteroide dentro da div fundo. Iremos mudar a direção do asteroide caso ele chegue nos limites horizontais e verticais do fundo do jogo. Na função moveasteroide() após a linha:

32 asteroide.y += asteroide.velocidade * asteroide.direcaoy; Observe que caso o valor de y da variável asteroide seja maior que o valor da variável FundoAltura, será alterado o valor da variável asteroide.direcaoy para -1. Pressione [CTRL+S] para salvar as alterações e execute o arquivo pong.html. Observe que a div asteroide ao chegar no limite vertical da div fundo irá mudar de direção. Vamos agora limitar a movimentação da div asteroide quando a mesma chegar ao final da div fundo do lado direito. Observe que, identificamos que caso o valor da propriedade x da variável asteroide seja maior que o valor da largura da div fundo, o valor da variável asteroide.direcaox será alterado para -1. Salve as alterações e execute o arquivopong.html. Observe que a div asteroide ao chegar no limite horizontal da div fundo mudará a sua direção. Vamos agora criar os demais limites de movimentação. Criando os demais limites de movimentação Criando os demais limites de movimentação. Salve as alterações e execute o arquivopong.html. Observe que agora a movimentação da div asteroide ficou limitada ao tamanho da div fundo. No próximo tópico iremos identificar as colisões com os batedores dos jogadores. Detectando colisões A detecção de colisões em jogos nada mais é do que identificar a intersecção de dois objetos diferentes. A detecção de colisões é uma das funções mais importantes no desenvolvimento de jogos, as funções de detecção de colisões são utilizadas para identificar a colisão e chamar uma resposta a esta colisão.

33 Para identificar a colisão utilizaremos valores do eixo Xe Y do primeiro objeto e iremos comparar com os valores X e Y do segundo objeto. Caso esses valores sejam iguais (ou próximos em alguns casos) a detecção da colisão é realizada. Neste jogo em desenvolvimento iremos identificar a colisão da div #paddle1 (controlada pelo jogador 1) e da div #paddle2 (controlada pelo jogador 2) com a div#asteroide. Inicialmente vamos criar a detecção da colisão do batedor do jogador 1 (div #paddle1) com o asteroide(div #asteroide). Para isso vamos verificar se a div#paddle1 está sobreposta a div #asteroide mudando assim a sua direção. Criaremos uma variável com o nome de paddle1x que irá conter a posição left da divpaddle1 (valor obtido pela propriedade left) mais a largura da div paddle1 (valor obtido pela propriedade width): Desta forma será possível identificar o valor de x do batedor do jogador 1: Criaremos outra variável com o nome depaddle1ybaixo que irá conter o valor da propriedade top da div #paddle1 mais a altura da div paddle1 (valor obtido pela propriedade height).

34 Desta forma será possível identificar o valor de y da parte inferior do batedor do jogador 1: Criaremos também, outra variável com o nome de paddle1ytopo que irá conter somente o valor da propriedade top da div #paddle1. Desta forma será possível identificar o valor de y na parte superior do batedor: Com esses valores é possível identificar se o valor de xe de y da div asteroide é o mesmo das áreas indicadas no batedor do jogador 1. Decretando colisão com o jogador 1 Vamos entender o código que foi criado para identificar a colisão. Observe que inicialmente foram criadas as variáveis indicadas no inicio desta unidade:

35 Depois é verificado se o valor da propriedade de x da variável asteroide é menor que o valor da variável paddle1x. Isso indicará que a div asteroide está posicionada no mesmo local do paddle1. Caso essa condição seja verdadeira será verificado se o valor de y da div asteroide é menor ou igual a variável paddle1ybaixo e é maior ou igual a variável paddle1ytopo. Isso irá verificar se o valor de y da div asteroide está entre a altura da div paddle1confirmando a colisão. Caso esse condição for verdadeira será alterado o valor da variável asteroide.direcaox para 1. Agora, vamos fazer uma pequena refatoração. Observe que na parte que detectamos a colisão, selecionamos o elemento #paddle1: E na função movebatedores() também o selecionamos: Se essas variáveis paddle1 e paddle2 são utilizadas globalmente no arquivo, em mais de uma função, por que não a tiramos do escopo local da função movebatedores() e colocamos no escopo

36 global, antes das funções? Assim, selecionamos esses elementos apenas uma vez no início da execução e ganhamos em performance. Façamos isso, remova essas variáveis da função movebatedores(): Remova também a referência da variávelpaddle1 na parte de detecção de colisão: Agora, no escorpo global do arquivo, inicializaremos as variáveis paddle1 epaddle2. Logo abaixo do array jogo.asteroideacrescente: Por enquanto elas foram apenas inicializadas. Vamos armazenar nelas as referências dos elementos apenas quando a página for carregada. E isso é feito lá em baixo, dentro da função especial do jquery que indica que a página foi devidamente carregada: O código ficou melhor. Agora vamos partir para a detecção de colisão com o jogador 2. Detectando colisão com o jogador 2 Observe que neste código a variável paddle2xfoi subtraído o valor 51 unidades: Utilizamos esse valor para que seja subtraída a largura da div asteroide, para que a colisão seja detectada no local correto.

37 Salve as alterações e execute o arquivopong.html. Observe que agora a colisão com a div paddle2 é identificada. Textos dinâmicos Nesta unidade iremos criar textos dinâmicos para exibir a pontuação dos jogadores. Os jogadores irão pontuar sempre que a div asteroide ultrapassar a div do jogador (paddle1 oupaddle2). No exemplo abaixo o jogador 1 irá pontuar: Inicialmente iremos criar uma nova div no arquivo pong.html após a div fundo com o nome de pontuacao. Vamos agora editar o arquivo pong2.js. Inicialmente vamos criar uma variável com o nome de pontuacao que irá receber os pontos do jogador1 e dojogador2. O jogador 1 irá pontuar quando o propriedade x da div asteroide for maior que a largura do fundo do jogo. Salve as alterações no código e execute o arquivo pong.html. Observe que a pontuação será exibida:

38 Vamos agora, exibir a pontuação do jogador 2. Exibindo a pontuação do segundo jogador O jogador 2 irá pontuar quando o propriedade x da div asteroide for menor que a largura do fundo do jogo (menor que 0). Altere o if: Salve as alterações no código e execute o arquivo pong.html. Observe que a pontuação dos dois jogadores serão exibidas. Elemento áudio Nesta unidade iremos utilizar o elemento audio do HTML5 para executar sons no jogo. Utilizando-o juntamente com recursos do JavaScript para referenciar e executar arquivos de áudio, vamos inserir uma música de fundo para o jogo e executar sons quando o asteroide entrar em colisão com os batedores do jogador1 e do jogador2. Uma observação importante quando for utilizar arquivos de áudio é que os diferentes tipos de navegadores não executam todos os formatos de áudio, utilize sempre arquivos no formato MP3 ou OGG, que são executados sem problemas nos navegadores Chrome, Firefox e Safari. O elemento < audio > possui alguns atributos que devem ser observados. Veja o exemplo abaixo: Autoplay: a propriedade autoplay indica que o arquivomusica.mp3 deve ser executado automaticamente. Controls: Se este atributo controls estiver presente, o navegador oferecerá controles para permitir que o usuário controle a reprodução do áudio, incluindo volume, procura e pausar/continuar.

39 Loop : Faz com que o áudio repita automaticamente. Preload: O atributo preload é usado em elementos áudio para carregar arquivos grandes. Caso o valor deste atributo seja verdadeiro, o arquivo de som será pré-carregado antes de sua execução evitando possíveis atrasos em sua execução. Vamos inicialmente indicar pelo elemento < audio > os arquivos que serão executados pelo código JavaScript. Caso você execute o arquivo, você irá observar que os arquivos de sons não serão executados, pois, não utilizamos a propriedade autoplay. Iremos indicar a execução desses arquivos através do arquivo JavaScript. Abra o arquivo pong2.js. Inicialmente vamos criar uma variável para controlar a execução do som. Agora vamos executar esse som, sempre que os batedores dos jogadores 1 e 2 entrarem em colisão com o asteroide, na função moveasteroide(). Na área onde existem os if s que verificam colisões, acrescente: Salve as alterações. Execute o arquivopong.html e verifique o resultado. Observe que agora o som e executado toda vez que o asteroide entrar em colisão com os batedores dos jogadores 1 e 2. Uma música ficou em looping (em repetição) no "fundo". Isso, graças ao atributo "loop" do elemento "audio": Criando uma condição de fim de jogo Nesta unidade iremos criar uma condição que irá indicar quando o jogo será finalizado. Iremos finalizar o jogo quando o primeiro jogador atingir 5 pontos. Para isso devemos sempre verificar a variável de pontuação de cada jogador e quando atingir 5

40 pontos iremos executar uma função chamada de GameOver( ) que irá pausar a música, exibir uma mensagem de fim de jogo e reiniciar o jogo. Abra o arquivo pong2.js. Digite o código que executará gameover( ) abaixo da funçãomoveasteroid( ) após a pontuação dojogador2, antes do comentário: Detectando as colisões. O código acima nos diz que, quando ojogador1 ou jogador2 tiver 5 pontos, a função gameove( ) é executada. Agora vamos criar a função gameover( ). Essa função irá pausar a música de fundo, irá indicar quem ganhou o jogo e irá reiniciar o jogo quando o botão OK for pressionado. Digite o código para criar a função GameOver( ): Salve as alterações. Execute o jogo e veja o resultado quando algum jogador tiver conseguido 5 pontos. Armazenamento Local Iremos utilizar os recursos de armazenamento local do HTML5 para exibir o último placar do jogo mesmo que a página do site seja atualizada ou fechada. Desta forma quando o jogo for reiniciado serão exibidos para o jogador o último placar. Iremos também exibir a data e hora da última partida realizada. Os dados armazenados utilizando esse recurso são armazenados em forma de cookies e podem ser armazenados até 4 GB de informação. Lembrando que as informações armazenadas no browser Google Chrome, por exemplo, não estarão disponíveis em outro browser como o Mozilla Firefox. Para utilizar este recurso iremos utilizar o comando localstore, utilizando a propriedade localstore.setitem para indicar o item que será armazenado e a propriedade localstorage.getit em para obter o item salvo. Inicialmente vamos criar as divs onde os dados serão exibidos ao jogador. Digite o código no arquivo pong.html após o fechamento da div pontuação pela tag < /div >

41 Salve as alterações no arquivo. Agora na função GameOver() vamos utilizar o comando localstore para armazenar os dados obtidos pela partida realizada. Altere a função gameover() e também acrescente acima dela a função infogame(). Agora, na função, acrescente. Ou seja, mesmo que o usuário feche o navegador, ao abri-lo posteriormente, os dados do último jogo serão escritos na tela. Canvas Inicialmente produzido pela Apple para o navegador Safari, o elemento < canvas > é utilizado para delimitar uma área do browser onde a mesma irá receber imagens, ou renderização de gráficos como: linhas, círculos, retângulos, etc., que podem ser criados através de script. Nesta unidade iremos conhecer os principais recursos deste elemento. Abra o Notepad e crie um documento em branco. Digite para ele a estrutura básica de um código HTML. canvas1.html Observe que no código acima definimos o elementos "canvas" pela tag < canvas > com o nome de "meucanvas" definindo o seu tamanho em 600px de largura por 400px de altura. Após definir o elemento canvas, dentro do código JavaScript, é possível desenhar retângulos, caminhos (Paths) que incluam segmentos de linhas e arcos, posicionar arquivos de imagem sobre canvas, etc. É possível também criar preenchimentos dentro de retângulos e caminhos. Para desenhar um objeto sobre o canvas é necessário indicar as coordenadas do seu posicionamento. Na figura abaixo mostra o layout de um objeto canvas no tamanho de 600px por 400px, os números indicam as coordenadas de cantos e do meio do objeto canvas:

42 Elemento Canvas Vamos agora criar um código JavaScript que criará os elementos necessários para a criação de objetos no canvas. Dentro da tag < script > no < head > do documento, acrescente o código JavaScript. Observe que foram criadas duas variáveis, uma com o nome de canvas e outra com o nome decontext. A variável canvas será utilizada para indicar a área do canvas no browser. Observe que indicamos no código HTML o tamanho de 600 pixels de largura por 400 pixels de altura: Na variável context indicamos que serão utilizados recursos de renderização em 2 dimensões. Vamos agora desenhar uma linha. Desenhando uma linha Altere o código JavaScript dado anteriormente. Em execução no navegador:

43 A linha abaixo: Define o ponto inicial da linha no canvas. A linha abaixo: Define o ponto final da linha no canvas. Esta linha, desenha a linha. Desenhando um retângulo Vamos substituir o código que criou a linha por um código que criará um retângulo. Em execução:

44 A linha em seguida, inicia o caminho de renderização. A linha abaixo, cria um retângulo indicando a posição x, y inicial e valores para a largura (width) e para a altura do objeto (height). Desta fora este objeto terá a largura de 200 pixels e a altura de 100 pixels. A linha abaixo, define a cor de preenchimento. Em seguida esse preenchimento é renderizado: Indica a largura do contorno: A cor do contorno:

45 Renderiza o contorno: Criando um círculo Para desenhar um círculo com HTML5 Canvas, podemos criar um arco usando o método arc()e definir o ângulo inicial como 0 e ângulo final com a fórmula matemática 2 * PI. Substitua o código utilizado para criar o retângulo. Em execução: Operações com imagens e textos usando Canvas Crie um novo arquivo. Digite a estrutura básica de um código HTML com o elemento canvas. Salve o arquivo com o nome de canvas2.html. Exibindo imagens no canvas Primeiro copie a pasta canvas do arquivos-cursos\html5 para sua pasta e coloque o arquivo canvas2.html na mesma pasta.

46 Para exibir uma imagem usando HTML5Canvas, é utilizado o método drawimage()que requer um objeto de imagem e um ponto de destino identificado pelas coordenadas x e y. Altere o script do arquivo. Em execução:

47 Trabalhando com textos Vamos agora criar um texto que irá aparecer após a imagem ser renderizada. Vamos utilizar o método filltext dentro da função imagem.onload: Em execução:

48 Onde primeiro, indicamos o estilo da fonte o tamanho e tipo da fonte. A cor da fonte: E por último definimos o texto e sua posição. Criando uma animação utilizando uma imagem mapeada Com uma imagem mapeada, é relativamente simples criar uma animação baseada em células. Esta técnica envolve a troca rápida das imagens para simular uma animação.

49 Para utilizar uma imagem mapeada, antes é necessário criá-la, no exemplo abaixo a imagem foi criada utilizando o Adobe Photoshop, utilizando como tamanho de cada célula 32 pixels de largura por 32 pixels de altura: Totalizando 8 células de largura por 3 células de altura Desta forma podemos identificar cada um dos quadrantes da imagem (células) da seguinte forma: Crie um documento em branco no Notepad. Digite a estrutura básica de um código HTML. (canvas3.html) Crie também um arquivo chamado canvas3.js, que é onde colocaremos os scripts do exemplo. Vamos agora executar uma função assim que a janela do browser for carregada. Agora vamos criar a função canvasapl().

50 Observe que no código acima criamos os elementos principais do canvas e carregamos imagem tanks.png. Agora vamos indicar quais quadrantes (células) da imagem mapeada serão utilizados na animação. Digite o código no início do arquivo. Observe que criamos uma variável do tipo Array que irá receber a posição das imagens que serão utilizados na animação. Observe que foi criada também uma variável com o nome de frameindex que contém o valor de controle do índice da Array. Vamos criar mais 3 variáveis que irão possuir o valor do ângulo de rotação da animação do tank e de seu posicionamento no canvas. Digite o código no início do arquivo. (canvas.js) Agora vamos criar uma função com o nome de desenhatela() que irá renderizar o canvas e exibir a animação. Digite o código. Para finalizar, acrescente estas funções no arquivo. Execute o exemplo:

51 Criando uma animação utilizando uma imagem mapeada Observe que foi indicado a cor do fundo do canvas: O seu posicionamento: E utilizamos a propriedade settransform:

52 Para redefinir a matriz de transformaçãohtml5 Canvas para seu estado padrão, utilizando os valores 1,0,0,1,0,0. Deve-se redefinir a matriz de transformação sempre que o canvas estiver dentro de um loop. Como o objeto será girado dentro do canvas, alteramos o seu ponto de referência da matriz para o centro da imagem: Como o quadrante da imagem mapeada possui o tamanho de 32 pixels, movemos o ponto central na metade desse valor:16 pixels. Em seguida indicamos quais quadrantes serão exibidos na animação: Estamos usando o frameindex da matriz animationframes para calcular a célula da imagem mapeada que será exibida na tela. Primeiro, é necessário encontrar o valor de x e de y do canto superior esquerdo de cada quadrante. Para encontrar o valor de x criamos uma variável como nome de sourcex que irá conter o valor do(frameindex % número de colunas da imagem) * largura da imagem. O operador módulo (%) retorna o resto de uma divisão, por exemplo, o primeiro quadrante está posicionada no valor 0 da variável frameindex sendo assim o cálculo ficará: 0 % 8 onde o resultado é 0, multiplicado por 32se terá o resultado 0 indicando o valor de x do primeiro quadrante. No segundo quadrante o valor do frameindex será 1, sendo assim o cálculo será 1 % 8 onde o resultado será1, multiplicado pode 32 se terá o resultado 32 indicado o valor de x do segundo quadrante, e assim por diante.

53 Para encontrar o valor da posição do eixo y dividimos o valor do frameindex por 8 e multiplicar pelo tamanho do quadrante. Agora usamos o método drawimage(): Para exibir cada uma das células no canvas. Iremos também atualizar o valor do frameindex: Assim exibindo cada um dos quadrantes da animação. Criando um level com imagens mapeadas Nesta unidade vamos criar um fundo do jogo utilizando os conceitos aprendidos na unidade anterior. Criaremos uma imagem de fundo do jogo utilizando os conceitos de imagem mapeada. Iremos utilizar os quadrantes 0, 20 e 21 para definir a imagem de fundo. O fundo do jogo será formado por 10 quadrantes de 32px na sua largura e 10 quadrantes de 32px na sua altura. Iremos indicar os quadrantes da seguinte forma:

54 Obtendo o seguinte resultado: Abra o Notepad++ e crie um arquivo chamadocanvas4.html. Agora, crie o arquivo canvas4.js, executar uma função assim que a janela do browser for carregada. Agora vamos criar a função canvasapl(). Digite o código. Vamos agora criar algumas variáveis. Digite o código. As variáveis abaixo, indicarão o total de quadrantes para a largura e para a altura.

55 Já a variável Mapa, irá conter as coordenadas dos quadrantes que serão utilizados: Observe que utilizamos os mesmos recursos aprendidos no capítulo anterior para preencher o canvas com os quadrantes da imagemtanks.png. Canvas Game Nesta unidade daremos início ao desenvolvimento de um novo jogo. Criaremos o jogo com base no documento de jogo abaixo. Nome do jogo: Tank!

56 Tema: Jogo para 1 jogador onde o jogador irá controlar um tanque tendo como objetivo recolher um número maior de bandeiras do que o tanque controlado pelo computador. Esse jogo poderá ser jogado on-line via browser e também em dispositivos móveis Android em forma de aplicativo. Tanto a versão on-line quanto a versão em forma de aplicativo terá o seguinte layout: Controles: Para dificultar o jogo, o jogador apenas poderá girar o tanque em sentido horário. A cada clique ou toque na área do jogo o tanque irá girar 45 em sentido horário. Fim de jogo: O jogo será finalizado quando o jogador ou o computador recolher o número de 10 bandeiras. Iremos dar início ao desenvolvimento deste jogo pelo seu layout. Criando Layout do jogo Crie uma pasta como o nome de Tank dentro de sua pasta e descompacte o arquivotank.zip em seu interior. Esse arquivo encontra-se em /arquivos-cursos/html5.

57 Observe que uma série de pastas serão criadas: Crie um novo arquivo HTML no Notepad. Salve este arquivo com o nome de index.htmldentro da pasta tank. Agora, crie um novo arquivo vazio e salve-o dentro da pasta css com o nome de:estilos.css. Vamos iniciar o código CSS do jogo indicando o arquivo de fonte que será utilizado no título do jogo. Iremos utilizar o arquivo BRAESIDE.ttf salvo na pasta fonte. Vamos agora indicar a imagem que será utilizada como fundo. Digite o código no arquivo CSS. Para finalizar o código CSS vamos indicar a formatação para a div #fundo. Salve as alterações no arquivo. Execute o arquivo index.html. Veja que a estrutura do jogo foi criada:

58 Criando o mapa do jogo Neste tópico criaremos o arquivo tank.js e inicialmente iremos construir o mapa do jogo utilizando uma imagem mapeada. Crie um novo arquivo. Salve este arquivo com o nome de tank.js na pasta js. Agora iremos criar um evento que será executado quando a janela do browser for carregada. Na função canvasapl criaremos o canvas dentro da div #fundo, além de criar e atribuir os valores inicias para o desenho do mapa. Mapas mais complexos Para a criação de mapas mais complexos você pode utilizar alguns programas que facilitam a construção de levels utilizando imagens

59 mapeadas. Como o ou o No exemplo do curso, utilizamos o Tile Studio. Caso não consiga baixá-lo pelo site oficial, na pasta /arquivoscursos/html5, temos ele zipado com o nome de ts.zip. Após criar o mapa, pode-se obter uma série de tipos de arquivo onde e possível utilizar o mapa gerado:

60 Carregando os objetos Agora vamos criar a função iniciar(), que irá chamar a função gameloop(). Agora vamos criar a função desenhatela que irá exibir o mapa no canvas. Salvar as alterações no arquivo tank.js. Execute o arquivo index.html e visualize o resultado. Observe que o mapa foi gerado na div#fundo:

61 Desenhando o primeiro Tanque Vamos agora criar o código que irá exibir o tanque que será controlado pelo jogador no canvas. Inicialmente vamos criar as variáveis que serão utilizadas pelo tanque1. No inicio do arquivo tank.js: Observe que foram criadas duas variáveis com valores randômicos entre 0 e 400. Essas duas variáveis serão utilizadas para o posicionamento aleatório do tanque1 no mapa. Vamos agora criar a função desenhatank1(). A função desenhatank deve ser executada dentro do GameLoop do jogo. Desta forma, chame-a dentro do método gameloop():

62 Salve as alterações no arquivo tank.js. Execute o arquivo index.html e veja o resultado. Observe que cada vez que a página é atualizada o tanque1 será exibido em um local aleatório do mapa. Criando a movimentação do Tanque1 A direção da movimentação do tanque1 será definida pelo jogador através do clique no mapa. Desta forma vamos criar um evento que irá identificar o clique na área do mapa do jogo. O que será executado na função eventoclick()? Criaremos uma variável com o nome de direcao, que irá conter o valor inicial de 1. Toda vez que a área do mapa for clicada, será

63 somado uma unidade a esta variável, até ela receber o valor máximo 4. Quando o mapa for clicado pela quinta vez o seu valor será reiniciado para 1. Desta maneira esta variável irá conter a direção que o tanque1 deverá se movimentar. Vamos incialmente criar a funçãoeventoclick(). Agora vamos criar a variável direcao. Digite-a no começo do arquivo. Agora para movimentar o tanque1, vamos criar a função atualizartanque1, onde criaremos o código que irá movimentar o tanque1 de acordo com o valor da variável direcao. Além de indicar a direção que o tanque1 deverá se movimentar, também devemos girar a imagem de acordo com a direção da movimentação. Salve o arquivo, execute o arquivo index.html e veja o resultado. Observe que quando o jogador clicar na área do mapa a movimentação do tanque será alterada em sentido horário. Limitando a movimentação do Tanque1 Vamos agora limitar a movimentação dotanque1 dentro da área do canvas, evitando que o tanque saia da área de visualização do jogador. Iremos realizar esta operação alterando o valor da variável movimentação da seguinte forma:

64 Desta forma, modifique o código da funçãoatualizartanque1(). Salve as alterações no arquivo tank.js. Execute a aplicação e observe que caso o tanque chegue nos limites do canvas a sua movimentação será alterada automaticamente: Desenhando o Tanque2 (inimigo) Para desenhar o tanque2 que será controlado pelo computador vamos iniciar criando as variáveis necessárias. Dentro do método canvasapl, digite o código. Vamos agora criar a função que irá desenhar o tanque inimigo. Digite o código para criar uma função com o nome de desenhainimigo(). Agora vamos executar essa função dentro do GameLoop do jogo. Salve as alterações no arquivo tank.js. Execute o arquivo index.html e veja o resultado. Observe que o tanque inimigo será exibido em um local aleatório toda vez que a página for atualizada.

65 Agora vamos criar a função que irá exibir abandeira em uma posição aleatória no mapa. Desenhando a bandeira Inicialmente vamos criar as variáveis necessárias para a criação da bandeira. Dentro do método canvasapl, digite o código. Vamos agora criar uma função com o nome de desenhabandeira() que irá exibir a bandeira no canvas. Digite o código para criar a função. Agora vamos executar essa função dentro do Game Loop do jogo. Salve as alterações no arquivo tank.js. Execute o arquivo index.html e veja o resultado. Observe que a bandeira será exibida em um local aleatório toda vez que a página for atualizada.

66 Inteligência Artificial Inteligência Artificial, ou simplesmente IA, é o que controla e orienta oponentes computadorizados para proporcionar desafios ao jogador. Nesta unidade iremos criar a inteligência artificial que irá controlar o tanque inimigo. Será uma IA rudimentar que apenas irá fazer com que o tanque inimigo chegue de uma forma que seja o mais rápido possível onde está a bandeira. Iremos criar esse comportamento fazendo um comparativo dos valores de x e y do tanque2 com os valores de x e y da bandeira, fazendo com que otanque2 se movimente até o local da bandeira. Para isso, vamos criar o método atualizarinimigo(). Observe que caso o valor da posição x dotanque2 for maior que a posição x da bandeira, o valor de x do tanque2 será subtraído, fazendo com que o tanque2 fique na mesma posição x da bandeira.

67 Caso o valor de y do tanque2 for menor que o valor de y da bandeira, o valor de y dotanque2 será somado, fazendo que fique na mesma posição y da bandeira, e assim por diante. Vamos chamar essa função no game loop. Salve as alterações no arquivo tank.js. Execute o arquivo index.html e veja o resultado. Observe que o tanque inimigo irá se movimentar automaticamente até a posição da bandeira: Detectando colisões da bandeira com o tanque inimigo Neste tópico vamos detectar a colisão do tanque inimigo com a bandeira, fazendo com que a bandeira seja reposicionada em um novo local. Para isso, vamos criar um novo método chamado detectandocolisaobandeira(). Como o tanque2 é movimentado 1 unidade cada vez dentro do eixo x e do eixo y, podemos comparar se o valor de x e y dele é o mesmo valor de x e y da bandeira, detectando assim a colisão. Agora vamos chamar esse método dentro do game loop. Salve as alterações no arquivo tank.js. Execute o arquivo index.html e veja o resultado. Observe que a bandeira será exibida em uma nova posição quando o tanque inimigo entrar em colisão com ela. Detectando colisões da bandeira com o tanque 1 Para o tanque1, não podemos utilizar o mesmo sistema de colisão que usamos com o tanque inimigo, pois o tanque1 não se

68 movimenta 1 unidade cada vez nos eixos x e y e sim 2unidades, desta forma os valores de x e y do tanque1nunca serão iguais aos valores x e y da bandeira. Para detectar a colisão iremos fazer um comparativo de x e y do tanque1 somados a sua largura e altura (32 pixels) com os valores de x e y da bandeira. Para que a área de colisão seja mais próxima da imagem da bandeira iremos somar apenas 16 unidades na comparação ao invés de 32 unidades. Desta forma, o nosso método de colisão será modificado. Salve as alterações no arquivo tank.js. Execute o arquivo index.html e veja o resultado. Observe que a bandeira será exibida em uma nova posição quando otanque1 entrar em colisão com ela. Pontuação e comportamento de fim de jogo Para exibir a pontuação no canvas vamos criar uma nova função com o nome de desenhatexto(): Vamos criar as variáveis pontosjog e pontoscomp: Agora vamos somar a variável pontosjog toda vez que o tanque1 entrar em colisão com abandeira e somar a variável pontoscomp toda vez que o tanque inimigo entrar em colisão com a bandeira. Desta forma, vamos modificar o método dectandocolisaobandeira(). V amos agora criar uma função com o nome de gameover() que irá detectar o fim do jogo. Quando o jogador1 ou o computador atingir10 pontos será o vencedor. Digite os comandos para criar a função gameover(): Insira agora a função gameover e a desenhatexto dentro do game loop do jogo.

69 Salve as alterações no arquivo tank.js. Execute o arquivo index.html e veja o resultado. Que uma mensagem será exibida quando o primeiro jogador atingir 10 pontos, em seguida, o jogo será reiniciado. Executando sons Inicialmente vamos indicar pelo elemento < audio > os arquivos que serão executados pelo código JavaScript. Desta forma, digite o código no arquivo index.html logo após a tag < body >: No arquivo tank.js inicialmente vamos as variáveis que irão manipular os sons: E dentro do método canvasapl, vamos vinculá-las aos elementos da página.

70 No caso, da variável som, ela executará o som, sempre que houver uma colisão com abandeira, por isso, vamos modificar o método de colisão e dentro dos ifs executar o som. E para a música de fundo, vamos parar a sua execução, quando um jogador ganhar o jogo. Portanto, altere a função gameover(). Salve as alterações. Execute o arquivo index.html e verifique o resultado. Observe que agora um som de fundo é executado, e toda vez que uma colisão com a bandeira é encontrada, outro som também é executado. Convertendo o jogo em um aplicativo para dispositivo móvel Este jogo caso ele esteja hospedado em um servidor na internet ele pode ser executado em qualquer dispositivo móvel (desde que tenha resolução suficiente para exibir o jogo) via browser. Outra possibilidade é criar um aplicativo que será instalado no dispositivo móvel e o jogo poderá ser executado independentemente de uma conexão com a internet. Nesta unidade vamos gerar um aplicativo móvel utilizando o PhoneGap. O PhoneGap é um framework de desenvolvimento móvel produzido pela empresa Nitobi, comprada recentemente Adobe Systems. O PhoneGap converte em aplicativos nativo para ipad (ios), Android,Windows 8 entre outros, arquivos criados em JavaScript, HTML5 e CSS3. Desta forma um mesmo projeto pode ser distribuído para diversos sistemas operacionais utilizando apenas uma fonte de código. Antes de convertermos o jogo em aplicativo móvel, devemos criar um arquivo XML que terá todas as informações sobre o aplicativo, como versão, ícone a ser utilizado, propriedade do aplicativo, etc. Inicie o NotePad e crie um novo arquivo. Salve este arquivo na pasta tank com o nome de config.xml. Observe que foram indicados o nome do aplicativo pela tag < name >, o caminho do ícone que será utilizado pelo aplicativo pela tag <

71 icon > entre outras especificações. Entre elas a execução do aplicativo em tela cheia indicada pela linha de comando: Pressione [CTRL+S] para salvar o arquivo. Vamos agora compactar todos os arquivos utilizados no jogo em um arquivo do ZIP (não utilize o formato RAR) para que seja gerado o aplicativo pelo PhoneGap. Selecione todos os arquivos da pasta tank e os compacte em um arquivo com o nome detank.zip como indicado na imagem abaixo: Vamos agora utilizar o PhoneGap. No link Desça a barra de rolagem e clique em "Try Now":

72 Para utilizar o PhoneGap é necessário uma conta na Adobe chamada de Adobe ID ou se registrar no Gtihub. Neste exemplo iremos utilizar o Adobe ID. Clique no botão...with Adobe ID: Caso você não tenha um registro da Adobe, dê um clique no botão Create an Adobe ID:

73 Observe que um formulário de registro será exibido. Preencha este formulário com os seus dados e clique no botão Create. Para ter acesso a versão em Português deste formulário acesse o link:https://www.adobe.com/cfusion/member ship/index.cfm?loc=pt_br&nl=1. Abra o PhoneGAp utilizando o Adobe ID. Observe que a seguinte tela será exibida: Dê um clique no botão Upload a.zip file. Selecione o arquivo tank.zip criado anteriormente. Observe que as informações indicadas no arquivo config.xml serão exibidas: Dê um clique o botão Ready to build:

74 Aguarde os aplicativos serem gerados. Para desenvolver aplicativos para ios (ipad, iphone etc.) é necessário possuir um número de certificação de desenvolvedor fornecido pela Apple, por isso neste exemplo o aplicativo ios não será gerado. Dê um clique sobre o ícone do sistema operacional Android: Observe que o arquivo.apk poderá ser baixado: É possível também baixar o aplicativo diretamente no dispositivo móvel utilizando QR Code gerado automaticamente pelo PhoneGap. Veja nas imagens abaixo o jogo instalado como aplicativo e sendo executado em um Table Nexus 7 (Android 4):

Algoritmos em Javascript

Algoritmos em Javascript Algoritmos em Javascript Sumário Algoritmos 1 O que é um programa? 1 Entrada e Saída de Dados 3 Programando 4 O que é necessário para programar 4 em JavaScript? Variáveis 5 Tipos de Variáveis 6 Arrays

Leia mais

Afinal o que é HTML?

Afinal o que é HTML? Aluno : Jakson Nunes Tavares Gestão e tecnologia da informacão Afinal o que é HTML? HTML é a sigla de HyperText Markup Language, expressão inglesa que significa "Linguagem de Marcação de Hipertexto". Consiste

Leia mais

Sumário. HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1

Sumário. HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1 Sumário HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1 Linguagem HTML HTML é a abreviação de HyperText Markup Language, que pode ser traduzido como Linguagem de Marcação de Hipertexto. Não é uma linguagem

Leia mais

Moodle FTEC Versão 2.0 Manual do Usuário Acesse a área de LOGIN do site da FTEC www.ftec.com.br

Moodle FTEC Versão 2.0 Manual do Usuário Acesse a área de LOGIN do site da FTEC www.ftec.com.br Moodle FTEC Versão 2.0 Manual do Usuário Acesse a área de LOGIN do site da FTEC www.ftec.com.br Índice Como acessar o Moodle Editando seu PERFIL Editando o curso / disciplina no Moodle Incluindo Recursos

Leia mais

Sumário INTRODUÇÃO 3 DICAS PARA CRIAR UM BOM SITE 4

Sumário INTRODUÇÃO 3 DICAS PARA CRIAR UM BOM SITE 4 Sumário Todos os direitos reservados e protegidos pela Lei 5.988 de 14/12/73. Nenhuma parte deste livro, sem prévia autorização por escrito de Celta Informática, poderá ser reproduzida total ou parcialmente,

Leia mais

ALUNES MANUAL DO USUÁRIO. Guia rápido Alunes

ALUNES MANUAL DO USUÁRIO. Guia rápido Alunes ALUNES MANUAL DO USUÁRIO Guia rápido Alunes 1 Manual de Instruções Versão 2.0 Alunes Informática 2 Sumário Introdução... 5 Pré-requisitos... 5 Principal/Home... 6 Como editar texto do home... 7 Desvendando

Leia mais

Excel 2010 Modulo II

Excel 2010 Modulo II Excel 2010 Modulo II Sumário Nomeando intervalos de células... 1 Classificação e filtro de dados... 3 Subtotais... 6 Validação e auditoria de dados... 8 Validação e auditoria de dados... 9 Cenários...

Leia mais

Manual básico de utilização do RIOComposer

Manual básico de utilização do RIOComposer Instalação do RIOComposer Acesse o site http://videoaula.rnp.br onde encontrará o link para instalar o RIOComposer. Pré-requisitos Máquina virtual Java (JVM) na versão 1.7 ou superior. Sistemas Operacionais

Leia mais

XXIV SEMANA MATEMÁTICA

XXIV SEMANA MATEMÁTICA XXIV SEMANA ACADÊMICA DA MATEMÁTICA Minicurso: Produção de Páginas Web para Professores de Matemática Projeto de Extensão: Uma Articulação entre a Matemática e a Informática como Instrumento para a Cidadania

Leia mais

Resumo da Matéria de Linguagem de Programação. Linguagem C

Resumo da Matéria de Linguagem de Programação. Linguagem C Resumo da Matéria de Linguagem de Programação Linguagem C Vitor H. Migoto de Gouvêa 2011 Sumário Como instalar um programa para executar o C...3 Sintaxe inicial da Linguagem de Programação C...4 Variáveis

Leia mais

Capítulo 7 O Gerenciador de Arquivos

Capítulo 7 O Gerenciador de Arquivos Capítulo 7 O Gerenciador de Arquivos Neste capítulo nós iremos examinar as características da interface do gerenciador de arquivos Konqueror. Através dele realizaremos as principais operações com arquivos

Leia mais

Tutorial para acesso ao Peticionamento Eletrônico e Visualização de Processos Eletrônicos

Tutorial para acesso ao Peticionamento Eletrônico e Visualização de Processos Eletrônicos Tutorial para acesso ao Peticionamento Eletrônico e Visualização de Processos Eletrônicos Este tutorial visa preparar o computador com os softwares necessários para a utilização dos sistemas de visualização

Leia mais

Apostila CSS - Introdução à folha de estilos

Apostila CSS - Introdução à folha de estilos Apostila CSS - Introdução à folha de estilos Este documento é propriedade intelectual do Núcleo de Educação a distância da NRsystem e distribuído sob os seguintes termos: 1. As apostilas publicadas pelo

Leia mais

UNIVERSIDADE FEDERAL DE MINAS GERAIS GIZ/PROGRAD. Tutorial UFMG Virtual Os primeiros passos do docente

UNIVERSIDADE FEDERAL DE MINAS GERAIS GIZ/PROGRAD. Tutorial UFMG Virtual Os primeiros passos do docente UNIVERSIDADE FEDERAL DE MINAS GERAIS GIZ/PROGRAD Tutorial UFMG Virtual Os primeiros passos do docente Nereu Agnelo Cavalheiro contato@nereujr.com Tutorial UFMG Virtual Primeiros passos do docente Este

Leia mais

Guia de transmissão IPTV 2013 (Nova versão do IPTV)

Guia de transmissão IPTV 2013 (Nova versão do IPTV) Guia de transmissão IPTV 2013 (Nova versão do IPTV) Versão: 2.0.6 Data: 27/6/2013 Site do IPTV 1 Sumário 1. Introdução... 3 2. Pré-Requisitos... 4 3. Instalação do Flash Media Encorder... 5 4. Procedimento

Leia mais

Professor: Paulo Macos Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira 4/6/2011 1

Professor: Paulo Macos Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira 4/6/2011 1 Professor: Paulo Macos Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira 4/6/2011 1 Do inglês, Cascading Style Sheet, ou folha de estilo em cascata. É uma linguagem

Leia mais

Ferramenta: Spider-CL. Manual do Usuário. Versão da Ferramenta: 1.1. www.ufpa.br/spider

Ferramenta: Spider-CL. Manual do Usuário. Versão da Ferramenta: 1.1. www.ufpa.br/spider Ferramenta: Spider-CL Manual do Usuário Versão da Ferramenta: 1.1 www.ufpa.br/spider Histórico de Revisões Data Versão Descrição Autor 14/07/2009 1.0 15/07/2009 1.1 16/07/2009 1.2 20/05/2010 1.3 Preenchimento

Leia mais

TUTORIAL PARA ATUALIZAÇÃO DO PORTAL DO TJRN

TUTORIAL PARA ATUALIZAÇÃO DO PORTAL DO TJRN Poder Judiciário do Estado do Rio Grande do Norte TUTORIAL PARA ATUALIZAÇÃO DO PORTAL DO TJRN Agosto/2012 Versão 1.0 1. ACESSANDO O PORTAL Acesse o site do TJ no endereço www.tjrn.jus.br Observação: utilize

Leia mais

Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2

Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2 Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2 Objetivo. O objetivo da disciplina é conhecer os princípios da programação de

Leia mais

Plano de Aula - Dreamweaver CS6 - cód.5232 24 Horas/Aula

Plano de Aula - Dreamweaver CS6 - cód.5232 24 Horas/Aula Plano de Aula - Dreamweaver CS6 - cód.5232 24 Horas/Aula Aula 1 Capítulo 1 - Introdução ao Dreamweaver CS6 Aula 2 Continuação do Capítulo 1 - Introdução ao Dreamweaver CS6 Aula 3 Capítulo 2 - Site do Dreamweaver

Leia mais

Tutorial de acesso ao Peticionamento Eletrônico e Visualização de Processos Eletrônicos

Tutorial de acesso ao Peticionamento Eletrônico e Visualização de Processos Eletrônicos SUPERIOR TRIBUNAL DE JUSTIÇA Tutorial de acesso ao Peticionamento Eletrônico e Visualização de Processos Eletrônicos Este tutorial visa preparar o computador com os softwares necessários para utilização

Leia mais

Passa a passo para construir uma página pessoal - Parte 1

Passa a passo para construir uma página pessoal - Parte 1 Passa a passo para construir uma página pessoal - Parte 1 Quais ferramentas são necessárias? - Editor de texto básico (sem formatações): use o Bloco de Notas (não use o MS Word e WordPad) - Navegador (browser):

Leia mais

Microsoft Visual Studio Express 2012 for Windows Desktop

Microsoft Visual Studio Express 2012 for Windows Desktop Microsoft Visual Studio Express 2012 for Windows Desktop Apresentação da ferramenta Professor: Danilo Giacobo Página pessoal: www.danilogiacobo.eti.br E-mail: danilogiacobo@gmail.com 1 Introdução Visual

Leia mais

ADOBE FLASH PLAYER 10.3 Gerenciador de configurações locais

ADOBE FLASH PLAYER 10.3 Gerenciador de configurações locais ADOBE FLASH PLAYER 10.3 Gerenciador de configurações locais PRERELEASE 03/07/2011 Avisos legais Avisos legais Para consultar avisos legais, acesse o site http://help.adobe.com/pt_br/legalnotices/index.html.

Leia mais

Esse manual é um conjunto de perguntas e respostas para usuários(as) do Joomla! 1.5.

Esse manual é um conjunto de perguntas e respostas para usuários(as) do Joomla! 1.5. Esse manual é um conjunto de perguntas e respostas para usuários(as) do Joomla! 1.5. Ele considera que você já tem o Joomla! instalado no seu computador. Caso você queira utilizá lo em um servidor na web,

Leia mais

PROVA BRASIL NO VISUAL CLASS

PROVA BRASIL NO VISUAL CLASS PROVA BRASIL NO VISUAL CLASS A Caltech Informática desenvolveu 2 soluções alternativas para simulação da Prova Brasil utilizando o Software de Autoria Visual Class: A) Utilizando o pacote Visual Class

Leia mais

Microsoft Excel 2000. Alan Cleber Borim - alan.borim@poli.usp.br. http://www.pcs.usp.br/~alan

Microsoft Excel 2000. Alan Cleber Borim - alan.borim@poli.usp.br. http://www.pcs.usp.br/~alan Microsoft Excel 2000 Alan Cleber Borim - alan.borim@poli.usp.br http://www.pcs.usp.br/~alan Microsoft Índice 1.0 Microsoft Excel 2000 3 1.1 Acessando o Excel 3 1.2 Como sair do Excel 3 1.3 Elementos da

Leia mais

Continuação. 32. Inserir uma imagem da GALERIA CLIP-ART

Continuação. 32. Inserir uma imagem da GALERIA CLIP-ART Continuação 32. Inserir uma imagem da GALERIA CLIP-ART a) Vá para o primeiro slide da apresentação salva no item 31. b) Na guia PÁGINA INICIAL, clique no botão LAYOUT e selecione (clique) na opção TÍTULO

Leia mais

Ambiente Virtual de Aprendizagem C.S.G. M anual do Professor

Ambiente Virtual de Aprendizagem C.S.G. M anual do Professor Ambiente Virtual de Aprendizagem C.S.G. M anual do Professor Sumário Pré-requisitos para o Moodle... Entrar no Ambiente... Usuário ou senha esquecidos?... Meus cursos... Calendário... Atividades recentes...

Leia mais

Microsoft Office Excel

Microsoft Office Excel 1 Microsoft Office Excel Introdução ao Excel Um dos programas mais úteis em um escritório é, sem dúvida, o Microsoft Excel. Ele é uma planilha eletrônica que permite tabelar dados, organizar formulários,

Leia mais

Manual de utilização do Zimbra

Manual de utilização do Zimbra Manual de utilização do Zimbra Compatível com os principais navegadores web ( Firefox, Chrome e Internet Explorer ) o Zimbra Webmail é uma suíte completa de ferramentas para gerir e-mails, calendário,

Leia mais

Manual do Usuário Android Neocontrol

Manual do Usuário Android Neocontrol Manual do Usuário Android Neocontrol Sumário 1.Licença e Direitos Autorais...3 2.Sobre o produto...4 3. Instalando, Atualizando e executando o Android Neocontrol em seu aparelho...5 3.1. Instalando o aplicativo...5

Leia mais

Construtor Iron Web. Manual do Usuário. Iron Web Todos os direitos reservados

Construtor Iron Web. Manual do Usuário. Iron Web Todos os direitos reservados Construtor Iron Web Manual do Usuário Iron Web Todos os direitos reservados A distribuição ou cópia deste documento, ou trabalho derivado deste é proibida, requerendo, para isso, autorização por escrito

Leia mais

Noções de Informática

Noções de Informática Noções de Informática 2º Caderno Conteúdo Microsoft Excel 2010 - estrutura básica das planilhas; manipulação de células, linhas e colunas; elaboração de tabelas e gráficos; inserção de objetos; campos

Leia mais

DWEB. Design para Web. CSS3 - Fundamentos. Curso Superior de Tecnologia em Design Gráfico

DWEB. Design para Web. CSS3 - Fundamentos. Curso Superior de Tecnologia em Design Gráfico DWEB Design para Web Curso Superior de Tecnologia em Design Gráfico CSS3 - Fundamentos E não vos conformeis com este século, mas transformai-vos pela renovação da vossa mente, para que experimenteis qual

Leia mais

Manual Vivo Sync. Manual do Usuário. Versão 1.0.0. Copyright Vivo 2013. http://vivosync.com.br

Manual Vivo Sync. Manual do Usuário. Versão 1.0.0. Copyright Vivo 2013. http://vivosync.com.br Manual do Usuário Versão 1.0.0 Copyright Vivo 2013 http://vivosync.com.br 1 1 Índice 1 Índice... 2 2 Vivo Sync... 5 3 Vivo Sync Web... 6 3.1 Página Inicial... 6 3.1.1 Novo Contato... 7 3.1.2 Editar Contato...

Leia mais

Características do PHP. Começando a programar

Características do PHP. Começando a programar PHP Introdução Olá pessoal. Desculpe o atraso na publicação da aula. Pude perceber pelas respostas (poucas) ao fórum que a realização da atividade do módulo I foi relativamente tranquila. Assistam ao vídeo

Leia mais

HTML5 E SUAS NOVIDADES

HTML5 E SUAS NOVIDADES HTML5 E SUAS NOVIDADES Gabrie Dalla Porta 1, Julio César Pereira 1 1 Universidade Paranaense (Unipar) Paranavaí PR Brasil gabrieldallap@gmail.com, juliocesarp@gmail.com Resumo: Este artigo apresenta uma

Leia mais

Universidade Federal do Rio de Janeiro NCE/PGTIAE. Tutorial SweetHome3D

Universidade Federal do Rio de Janeiro NCE/PGTIAE. Tutorial SweetHome3D Universidade Federal do Rio de Janeiro NCE/PGTIAE Tutorial SweetHome3D Trabalho apresentado ao Prof. Carlo na Disciplina de Software Livre no curso Pós Graduação em Tecnologia da Informação Aplicada a

Leia mais

O sistema está pedindo que eu faça meu login novamente e diz que minha sessão expirou. O que isso significa?

O sistema está pedindo que eu faça meu login novamente e diz que minha sessão expirou. O que isso significa? Que tipo de navegadores são suportados? Preciso permitir 'cookies' O que são 'cookies' da sessão? O sistema está pedindo que eu faça meu login novamente e diz que minha sessão expirou. O que isso significa?

Leia mais

Para que o NSBASIC funcione corretamente em seu computador, você deve garantir que o mesmo tenha as seguintes características:

Para que o NSBASIC funcione corretamente em seu computador, você deve garantir que o mesmo tenha as seguintes características: Cerne Tecnologia www.cerne-tec.com.br Conhecendo o NSBASIC para Palm Vitor Amadeu Vitor@cerne-tec.com.br 1. Introdução Iremos neste artigo abordar a programação em BASIC para o Palm OS. Para isso, precisaremos

Leia mais

JavaScript. JavaScript é uma linguagem de script usada em navegadores web. É uma linguagem dinâmica, estruturada e orientada em objetos.

JavaScript. JavaScript é uma linguagem de script usada em navegadores web. É uma linguagem dinâmica, estruturada e orientada em objetos. JavaScript JavaScript é uma linguagem de script usada em navegadores web. É uma linguagem dinâmica, estruturada e orientada em objetos. Pode ser usada dentro do próprio arquivo HTML ou estruturada em um

Leia mais

CTRL-SHIFT DOCUMENTO DE GAME DESIGN DESENVOLVIDO POR HILGAMES

CTRL-SHIFT DOCUMENTO DE GAME DESIGN DESENVOLVIDO POR HILGAMES CTRL-SHIFT DOCUMENTO DE GAME DESIGN DESENVOLVIDO POR HILGAMES 1. Introdução CTRL-SHIFT é um jogo de puzzle, plataforma 2D e 3D ao mesmo tempo. O jogador navega por um cenário de plataformas 2D, e quando

Leia mais

A Estação da Evolução

A Estação da Evolução Microsoft Excel 2010, o que é isto? Micorsoft Excel é um programa do tipo planilha eletrônica. As planilhas eletrônicas são utilizadas pelas empresas pra a construção e controle onde a função principal

Leia mais

Informática Básica para o PIBID

Informática Básica para o PIBID Universidade Federal Rural do Semi Árido Programa Institucional de Iniciação à Docência Informática Básica para o PIBID Prof. Dr. Sílvio Fernandes Roteiro O Tamanho e Resolução de imagens O Compactação

Leia mais

MANUAL DO ANIMAIL 1.0.0.1142 Terti Software

MANUAL DO ANIMAIL 1.0.0.1142 Terti Software O Animail é um software para criar campanhas de envio de email (email Marketing). Você pode criar diversas campanhas para públicos diferenciados. Tela Principal do sistema Para melhor apresentar o sistema,

Leia mais

Tutorial do programa

Tutorial do programa 1 Tutorial do programa I. Guia Rápido 1. Clique no produto. 2. Clique na pasta de imagens. 3. Clique em preenchimento auto. 4. Verificar pedido. 5. Finalizar pedido. 6. Fazer pagamento / Entrega. 7. Fazer

Leia mais

2 HTML Inserindo objetos

2 HTML Inserindo objetos 2 HTML Inserindo objetos Vinicius A. de Souza va.vinicius@gmail.com São José dos Campos, 2011. 1 Sumário Desenvolvimento Web Imagem...3 Links...5 Links para locais da mesma página...6 Áudio e vídeo...8

Leia mais

Manual de Usuário do UnB Webmail Destinado aos usuários de e-mail da Universidade de Brasília MODO DINÂMICO

Manual de Usuário do UnB Webmail Destinado aos usuários de e-mail da Universidade de Brasília MODO DINÂMICO Destinado aos usuários de e-mail da Universidade de Brasília MODO DINÂMICO Elaboração: Equipe de Suporte Avançado do CPD SA/SRS/CPD/UnB suporte@unb.br Universidade de Brasília Brasília / 2014 Resumo A

Leia mais

Banner Flutuante. Dreamweaver

Banner Flutuante. Dreamweaver Banner Flutuante Dreamweaver Começamos com um arquivo em branco no Dreamweaver MX. Para que o banner apareça sobre a página, precisamos inserir uma camada a mais no arquivo HTML. Selecione o menu Inserir

Leia mais

17:47:08. Introdução à Informática com Software Livre

17:47:08. Introdução à Informática com Software Livre 17:47:08 Introdução à Informática com Software Livre 1 17:47:09 Audacity 2 Audacity 17:47:09 Audacity é um Software Livre de edição digital de áudio, disponível principalmente nas plataformas: Windows,

Leia mais

WEBDESIGN. Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira

WEBDESIGN. Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira WEBDESIGN Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira 1 CDI - Curso de Webdesign - Prof. Paulo Trentin Objetivos para esta aula Debater sobre

Leia mais

Coleção - Análises de email marketing em clientes de email

Coleção - Análises de email marketing em clientes de email Coleção - Análises de email marketing em clientes de email Introdução Nesta sexta e penúltima edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos os estudos dos clientes

Leia mais

Manual de Utilização

Manual de Utilização Se ainda tiver dúvidas entre em contato com a equipe de atendimento: Por telefone: 0800 642 3090 Por e-mail atendimento@oisolucoespraempresas.com.br Introdução... 3 1. O que é o programa Oi Backup Empresarial?...

Leia mais

Guia de transmissão IPTV 2012 (Nova versão do IPTV)

Guia de transmissão IPTV 2012 (Nova versão do IPTV) Guia de transmissão IPTV 2012 (Nova versão do IPTV) Versão: 1.1 Data: 02/10/2012 Site do IPTV: http://www.iptv.usp.br Sumário: 1. Introdução 2. Instalação do Flash Media Encoder 3. Criando uma transmissão

Leia mais

Word e Excel. Marque Certo ou Errado

Word e Excel. Marque Certo ou Errado A figura acima mostra uma janela do Word 2002, com um texto em processo de edição. Nesse texto, a expressão União Européia é o único trecho formatado como negrito e a palavra continente está selecionada.

Leia mais

Lógica de Programação

Lógica de Programação Lógica de Programação Softblue Logic IDE Guia de Instalação www.softblue.com.br Sumário 1 O Ensino da Lógica de Programação... 1 2 A Ferramenta... 1 3 Funcionalidades... 2 4 Instalação... 3 4.1 Windows...

Leia mais

15. OLHA QUEM ESTÁ NA WEB!

15. OLHA QUEM ESTÁ NA WEB! 7 a e 8 a SÉRIES / ENSINO MÉDIO 15. OLHA QUEM ESTÁ NA WEB! Sua home page para publicar na Internet SOFTWARES NECESSÁRIOS: MICROSOFT WORD 2000 MICROSOFT PUBLISHER 2000 SOFTWARE OPCIONAL: INTERNET EXPLORER

Leia mais

1 Crie uma pasta (dentro do seu diretório) com o seu nome. 2. Se tiver dúvida pergunte o seu professor

1 Crie uma pasta (dentro do seu diretório) com o seu nome. 2. Se tiver dúvida pergunte o seu professor i.exe FrontPage Criação de Home Page s PPaaggi innaa 1 Sobre FrontPage Parte 1 Front Page é uma ferramenta para criação e gerenciamento de web s.o aluno não necessita de nenhum conhecimento de programação

Leia mais

XXIV SEMANA MATEMÁTICA

XXIV SEMANA MATEMÁTICA XXIV SEMANA ACADÊMICA DA MATEMÁTICA Minicurso: Criação e Desenvolvimento de Cursos Online via Moodle Projeto de Extensão: Uma Articulação entre a Matemática e a Informática como Instrumento para a Cidadania

Leia mais

ÍNDICE... 3 INTRODUÇÃO... 4. A série... 4

ÍNDICE... 3 INTRODUÇÃO... 4. A série... 4 EXCEL 2007 e 2010 2 ÍNDICE ÍNDICE... 3 INTRODUÇÃO... 4 A série... 4 01 LISTA COM VALIDAÇÃO... 5 02 FUNÇÕES FINANCEIRAS... 7 03 FUNÇÃO DE BANCO DE DADOS... 12 04 RÓTULOS... 15 05 TABELA DINÂMICA... 18 06

Leia mais

FAQ Perguntas Frequentes

FAQ Perguntas Frequentes FAQ Perguntas Frequentes 1. COMO ACESSO A PLATAFORMA DE ENSINO?... 2 2. NÃO CONSIGO REALIZAR O MEU CADASTRO NO AMBIENTE VIRTUAL DO MMA.... 4 3. FIZ MEU CADASTRO NO SITE E NÃO RECEBI O E-MAIL DE CONFIRMAÇÃO

Leia mais

Sumário. 1 Tutorial: Blogs no Clickideia

Sumário. 1 Tutorial: Blogs no Clickideia 1 Tutorial: Blogs no Clickideia Sumário Introdução... 2 Objetivos... 2 Instruções para utilização do Tutorial... 2 Acesso ao Portal e a Home Blog... 3 Página Inicial da área do Blog... 4 Apresentação da

Leia mais

Tutorial do Iniciante. Excel Básico 2010

Tutorial do Iniciante. Excel Básico 2010 Tutorial do Iniciante Excel Básico 2010 O QUE HÁ DE NOVO O Microsoft Excel 2010 é um programa de edição de planilhas eletrônicas muito usado no mercado de trabalho para realizar diversas funções como;

Leia mais

jquery Apostila Básica

jquery Apostila Básica jquery Apostila Básica INTRODUÇÃO 3 CAPÍTULO 1 POR ONDE INICIAR 3 CAPÍTULO 2 MEU PRIMEIRO SCRIPT! 4 EXERCÍCIOS...5 CAPÍTULO 3 ADICIONANDO CSS 6 EXERCÍCIOS...7 CAPÍTULO 4 MODIFICANDO APENAS PARTE DO DOCUMENTO

Leia mais

Guia de Utilização do Microsoft Dynamics CRM (Gestão de Relacionamento com Clientes)

Guia de Utilização do Microsoft Dynamics CRM (Gestão de Relacionamento com Clientes) Guia de Utilização do Microsoft Dynamics CRM (Gestão de Relacionamento com Clientes) 1. Sobre o Microsoft Dynamics CRM - O Microsoft Dynamics CRM permite criar e manter facilmente uma visão clara dos clientes,

Leia mais

Tutorial Plone 4. Manutenção de Sites. Universidade Federal de São Carlos Departamento de Sistemas Web Todos os direitos reservados

Tutorial Plone 4. Manutenção de Sites. Universidade Federal de São Carlos Departamento de Sistemas Web Todos os direitos reservados Tutorial Plone 4 Manutenção de Sites Universidade Federal de São Carlos Departamento de Sistemas Web Todos os direitos reservados Sumário Introdução 1 Como fazer a autenticação do usuário 1.1 Através do

Leia mais

A.S. Sistemas Rua Prof. Carlos Schlottfeldt, 10A Clélia Bernardes Viçosa MG CEP 36570-000 Telefax: (31) 3892 7700 dietpro@dietpro.com.

A.S. Sistemas Rua Prof. Carlos Schlottfeldt, 10A Clélia Bernardes Viçosa MG CEP 36570-000 Telefax: (31) 3892 7700 dietpro@dietpro.com. Sumário Principais Características...5 Configuração necessária para instalação...6 Conteúdo do CD de Instalação...7 Instruções para Instalação...8 Solicitação da Chave de Acesso...22 Funcionamento em Rede...26

Leia mais

IMPORTANTE: O sistema Off-line Dr.Micro é compatível com os navegadores Mozilla Firefox e Internet Explorer.

IMPORTANTE: O sistema Off-line Dr.Micro é compatível com os navegadores Mozilla Firefox e Internet Explorer. CONFIGURANDO O SISTEMA OFFLINE DR.MICRO IMPORTANTE: O sistema Off-line Dr.Micro é compatível com os navegadores Mozilla Firefox e Internet Explorer. 1- Ao acessar a plataforma online a opção Minha Escola

Leia mais

Web Design. Prof. Felippe

Web Design. Prof. Felippe Web Design Prof. Felippe 2015 Sobre a disciplina Fornecer ao aluno subsídios para o projeto e desenvolvimento de interfaces de sistemas Web eficientes, amigáveis e intuitivas. Conceitos fundamentais sobre

Leia mais

Bem vindo ao ajuda do software QUICKFISH para criação de sites.

Bem vindo ao ajuda do software QUICKFISH para criação de sites. Bem vindo ao ajuda do software QUICKFISH para criação de sites. SUMÁRIO 1 Exemplo de site criado no software QUICKFISH...02 2 Salvando Seu Site...03 3 Publicando Seu Site...03 4 Visão inicial do Software

Leia mais

SGCD 2.2. Sistema Gerenciador de Conteúdo Dinâmico

SGCD 2.2. Sistema Gerenciador de Conteúdo Dinâmico Atualizado em 13/AGO/2012 Sistema Gerenciador de Conteúdo Dinâmico No final de 2007, o Serviço Técnico de Informática da UNESP Marília, disponibilizou para a comunidade acadêmica e administrativa o Sistema

Leia mais

Basicão de Estatística no EXCEL

Basicão de Estatística no EXCEL Basicão de Estatística no EXCEL Bertolo, Luiz A. Agosto 2008 2 I. Introdução II. Ferramentas III. Planilha de dados 3.1 Introdução 3.2 Formatação de células 3.3 Inserir ou excluir linhas e colunas 3.4

Leia mais

Tornando sites mais fáceis para visualização 16

Tornando sites mais fáceis para visualização 16 Primeiros passos com o essential Accessibility 3 O que é essential Accessibility? essential Accessibility : uma visão geral Sobre este manual Como instalar o essential Accessibility Requisitos do sistema

Leia mais

Ela funciona de um jeito parecido com as mídia de RSS próprio: o sistema acessa o feed do twitter e exibe, na tela, os últimos tweets.

Ela funciona de um jeito parecido com as mídia de RSS próprio: o sistema acessa o feed do twitter e exibe, na tela, os últimos tweets. Mídia do Twitter Esta mídia serve para mostrar os últimos tweets de uma conta específica. É útil para estabelecimentos que usam com frequência o twitter e que desejam que seus clientes acompanhem isso

Leia mais

Requerimento: Digitador de Pedidos ProfarmaNet. Manual de Apoio. Preparado por: Versão: 1.0. Sumário

Requerimento: Digitador de Pedidos ProfarmaNet. Manual de Apoio. Preparado por: Versão: 1.0. Sumário Vanderlei Manual de Apoio Resumo Módulo Básico Especifico para Instalação e Usabilidade Lista de Distribuição Nome Área / Função Histórico de modificações Versão Data Descrição Responsável 13/12/2013 Versão

Leia mais

Microsoft Excel 2010

Microsoft Excel 2010 Microsoft Excel 2010 Feito por Gustavo Stor com base na apostila desenvolvida por Marcos Paulo Furlan para o capacitação promovido pelo PET. 1 2 O Excel é uma das melhores planilhas existentes no mercado.

Leia mais

Microsoft Excel 2003

Microsoft Excel 2003 Associação Educacional Dom Bosco Faculdades de Engenharia de Resende Microsoft Excel 2003 Professores: Eduardo Arbex Mônica Mara Tathiana da Silva Resende 2010 INICIANDO O EXCEL Para abrir o programa Excel,

Leia mais

WEBDESIGN. Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira

WEBDESIGN. Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira WEBDESIGN Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira Recursos avançados com CSS Uma vez entendido o uso básico e treinado muito, chegou

Leia mais

Neste capítulo veremos como se trabalha com fórmulas e funções que são as ferramentas que mais nos ajudam nos cálculos repetitivos.

Neste capítulo veremos como se trabalha com fórmulas e funções que são as ferramentas que mais nos ajudam nos cálculos repetitivos. Fórmulas e Funções Neste capítulo veremos como se trabalha com fórmulas e funções que são as ferramentas que mais nos ajudam nos cálculos repetitivos. Operadores matemáticos O Excel usa algumas convenções

Leia mais

1. NOÇÕES BÁSICAS... 1.1. Iniciando o Excel... 1.1.1. Abrindo o Excel... 1.1.2. Encerrando o Excel... 1.2. A tela do Excel 7.0... 1.2.1.

1. NOÇÕES BÁSICAS... 1.1. Iniciando o Excel... 1.1.1. Abrindo o Excel... 1.1.2. Encerrando o Excel... 1.2. A tela do Excel 7.0... 1.2.1. 1. NOÇÕES BÁSICAS... 1.1. Iniciando o Excel... 1.1.1. Abrindo o Excel... 1.1.2. Encerrando o Excel... 1.2. A tela do Excel 7.0... 1.2.1. Partes da tela do Excel... Barra de fórmulas... Barra de status...

Leia mais

Banco de Dados Microsoft Access: Criar tabelas. Vitor Valerio de Souza Campos

Banco de Dados Microsoft Access: Criar tabelas. Vitor Valerio de Souza Campos Banco de Dados Microsoft Access: Criar tabelas Vitor Valerio de Souza Campos Objetivos do curso 1. Criar uma tabela no modo de exibição Folha de Dados. 2. Definir tipos de dados para os campos na tabela.

Leia mais

MANUAL DO USUÁRIO PORTAL TISS. Manual. Usuário. Versão 1.3 atualizado em 13/06/2013

MANUAL DO USUÁRIO PORTAL TISS. Manual. Usuário. Versão 1.3 atualizado em 13/06/2013 Manual do Usuário Versão 1.3 atualizado em 13/06/2013 1. CONFIGURAÇÕES E ORIENTAÇÕES PARA ACESSO... 4 2 GUIAS... 11 2.1 DIGITANDO AS GUIAS... 11 2.2 SALVANDO GUIAS... 12 2.3 FINALIZANDO UMA GUIA... 13

Leia mais

Tutorial Administrativo (Backoffice)

Tutorial Administrativo (Backoffice) Manual - Software ENTRANDO NO SISTEMA BACKOFFICE Para entrar no sitema Backoffice, digite no seu navegador de internet o seguinte endereço: http://pesquisa.webbyapp.com/ Entre com o login e senha. Caso

Leia mais

Centro de Computação - Unicamp Gerência de Atendimento ao Cliente (e-mail:apoio@turing.unicamp.br) Sumário

Centro de Computação - Unicamp Gerência de Atendimento ao Cliente (e-mail:apoio@turing.unicamp.br) Sumário Sumário Conceitos Microsoft Access 97... 01 Inicialização do Access... 02 Convertendo um Banco de Dados... 03 Criando uma Tabela... 06 Estrutura da Tabela... 07 Propriedades do Campo... 08 Chave Primária...

Leia mais

Manual do Usuário Janeiro de 2016

Manual do Usuário Janeiro de 2016 Manual do Usuário Janeiro de 2016 SOBRE CMX CMX é uma interface que dá acesso aos estudantes a milhares de atividades, exercícios e recursos todos posicionados com os padrões e conceitos curriculares.

Leia mais

Introdução Microsoft PowerPoint 2013 apresentações Office PowerPoint 2013 Microsoft PowerPoint 2013 textos planilhas Excel Word

Introdução Microsoft PowerPoint 2013 apresentações Office PowerPoint 2013 Microsoft PowerPoint 2013 textos planilhas Excel Word PowerPoint 2013 Sumário Introdução... 1 Iniciando o PowerPoint 2013... 2 Criando Nova Apresentação... 10 Inserindo Novo Slide... 13 Formatando Slides... 15 Inserindo Imagem e Clip-art... 16 Inserindo Formas...

Leia mais

Manual do Usuário. Sistema Financeiro e Caixa

Manual do Usuário. Sistema Financeiro e Caixa Manual do Usuário Sistema Financeiro e Caixa - Lançamento de receitas, despesas, gastos, depósitos. - Contas a pagar e receber. - Emissão de cheque e Autorização de pagamentos/recibos. - Controla um ou

Leia mais

Gerente de Tecnologia: Ricardo Alexandre F. de Oliveira Marta Cristiane Pires M. Medeiros Mônica Bossa dos Santos Schmid WORD 2007

Gerente de Tecnologia: Ricardo Alexandre F. de Oliveira Marta Cristiane Pires M. Medeiros Mônica Bossa dos Santos Schmid WORD 2007 WORD 2007 PREFEITURA DO MUNICÍPIO DE LONDRINA SECRETARIA MUNICIPAL DE EDUCAÇÃO GERÊNCIA DE TECNOLOGIA Gerente de Tecnologia: Ricardo Alexandre F. de Oliveira Marta Cristiane Pires M. Medeiros Mônica Bossa

Leia mais

PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL

PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL Introdução Aula 03: Pacote Microsoft Office 2007 O Pacote Microsoft Office é um conjunto de aplicativos composto, principalmente, pelos

Leia mais

Manual Vivo Sync. Manual do Usuário. Versão 1.0.0. Copyright Vivo 2013. http://vivosync.com.br

Manual Vivo Sync. Manual do Usuário. Versão 1.0.0. Copyright Vivo 2013. http://vivosync.com.br Manual do Usuário Versão 1.0.0 Copyright Vivo 2013 http://vivosync.com.br 1 1 Índice 1 Índice... 2 2 Vivo Sync... 4 3 Vivo Sync Web... 5 3.1 Página Inicial... 5 3.1.1 Novo Contato... 6 3.1.2 Editar Contato...

Leia mais

Scriptlets e Formulários

Scriptlets e Formulários 2 Scriptlets e Formulários Prof. Autor: Daniel Morais dos Reis e-tec Brasil Programação Avançada Para Web Página1 Meta Permitir ao aluno aprender a criar um novo projeto Java para web no Netbeans IDE,

Leia mais

Manual de baixa do Certificado Digital AR SOLUTI. Versão 2.0 de 7 de Maio de 2014. Classificação: Ostensiva

Manual de baixa do Certificado Digital AR SOLUTI. Versão 2.0 de 7 de Maio de 2014. Classificação: Ostensiva Catalogação do Documento Titulo Classificação Versão 2.0 de 7 de Maio de 2014 Autor Raphael Reis Aprovador Bruno Barros Número de páginas 57 Página 2 de 57 Sumário 1 Sistema operacional compatível para

Leia mais

Guia Rápido de Utilização. Ambiente Virtual de Aprendizagem. Perfil Aluno

Guia Rápido de Utilização. Ambiente Virtual de Aprendizagem. Perfil Aluno Guia Rápido de Utilização Ambiente Virtual de Aprendizagem Perfil Aluno 2015 APRESENTAÇÃO O Moodle é um Ambiente Virtual de Aprendizagem (AVA) open source¹. Esta Plataforma tornouse popular e hoje é utilizada

Leia mais

SUMÁRIO TUTORIAL DO HQ. 2 DICAS PEDAGÓGICAS:. 2 DOWNLOAD DA INSTALAÇÃO. 2 PASSO 1 FORMULÁRIO PARA DOWNLOAD. 2 PASSO 2 ESCOLHENDO A VERSÃO.

SUMÁRIO TUTORIAL DO HQ. 2 DICAS PEDAGÓGICAS:. 2 DOWNLOAD DA INSTALAÇÃO. 2 PASSO 1 FORMULÁRIO PARA DOWNLOAD. 2 PASSO 2 ESCOLHENDO A VERSÃO. SUMÁRIO TUTORIAL DO HQ... 2 DICAS PEDAGÓGICAS:... 2 DOWNLOAD DA INSTALAÇÃO... 2 PASSO 1 FORMULÁRIO PARA DOWNLOAD... 2 PASSO 2 ESCOLHENDO A VERSÃO... 3 PASSO 3 INSTRUÇÕES DE INSTALAÇÃO... 4 CRIANDO NOVAS

Leia mais

6.5. Renomeando Arquivos ou Pastas

6.5. Renomeando Arquivos ou Pastas 50 II. Para mover um arquivo, pasta, objeto dentro do Windows: 1) Clique com o mouse sobre a pasta, arquivo a serem movidos; 2) Mantenha o botão esquerdo do mouse pressionado; 3) Arraste o objeto para

Leia mais

Tutorial de HTML. O que é HTML? Aprendendo

Tutorial de HTML. O que é HTML? Aprendendo Tutorial de HTML Tutorial: O que é HTML? Aprendendo Títulos Textos Imagens Links Imagens Clicáveis Explorando o TAG BODY Música de Fundo Gifs Animados Tabelas Testando sua Página O que é HTML? HTML é uma

Leia mais

Prezado aluno, 1 - ) Clique no link que segue: http://speedtest.net/ 2 - ) Clique em iniciar teste: 3-) Verifique a velocidade:

Prezado aluno, 1 - ) Clique no link que segue: http://speedtest.net/ 2 - ) Clique em iniciar teste: 3-) Verifique a velocidade: Prezado aluno, Primeiramente sugerimos que utilize o Google Chrome, um navegador mais rápido e seguro. https://www.google.com/intl/pt-br/chrome/browser/?hl=pt-br&brand=chmi Caso não resolva os problemas,

Leia mais

APOSTILA BÁSICA COMO UTILIZAR A LOUSA DIGITAL E O SOFTWARE SMART NOTEBOOK

APOSTILA BÁSICA COMO UTILIZAR A LOUSA DIGITAL E O SOFTWARE SMART NOTEBOOK APOSTILA BÁSICA COMO UTILIZAR A LOUSA DIGITAL E O SOFTWARE SMART NOTEBOOK 1 SÚMARIO ASSUNTO PÁGINA Componentes da Lousa... 03 Função Básica... 04 Função Bandeja de Canetas... 05 Calibrando a Lousa... 06

Leia mais