Algoritmos_criando uma aventura com HTML_CSS e JavaScript_Slides_AULA1_PROF

Prévia do material em texto

<p>Algoritmos: criando uma aventura</p><p>com HTML, CSS e JavaScript</p><p>O roteiro de uma aventura</p><p>Unidade</p><p>Aula 1</p><p>Habilidades trabalhadas nesta aula:</p><p>(EMIFLGG05) Selecionar e mobilizar intencionalmente, em um ou mais campos de atuação social, recursos</p><p>criativos de diferentes línguas e linguagens (imagens estáticas e em movimento; música; linguagens corpo-</p><p>rais e do movimento, entre outras), para participar de projetos e/ou processos criativos.</p><p>(EM13CO22) Produzir e publicar conteúdo como textos, imagens, áudios, vídeos e suas associações, bem</p><p>como ferramentas para sua integração, organização e apresentação, utilizando diferentes mídias digitais.</p><p>(EM13CO21) Comunicar ideias complexas de forma clara por meio de objetos digitais como mapas conceituais,</p><p>infográficos, hipertextos e outros.</p><p>2</p><p>Compreender como fluxogramas</p><p>são usados para representar as</p><p>etapas de uma aventura.</p><p>Analisar o uso de fluxogramas para</p><p>a conexão entre as diferentes telas</p><p>de um jogo.</p><p>Elaborar um fluxograma para</p><p>descrever uma narrativa de aventura.</p><p>O que vamos aprender?</p><p>ACOMPANHE O VÍDEO DA AULA</p><p>https://cursos.alura.com.br/course/algoritmos-criando-aventura-html-css-javascript/task/153074</p><p>3</p><p>O fluxo da nossa aventura</p><p>Nesta unidade, desenvolveremos um jogo de aventura interativo, no qual</p><p>escolheremos quais caminhos seguir ao clicarmos em diferentes botões.</p><p>Em nossa primeira aula, criaremos um fluxograma para visualizar com</p><p>clareza os passos disponíveis ao escolher cada opção do jogo.</p><p>Para iniciar a aula, sugere-se que o professor peça aos alunos para compartilharem um pouco da sua rotina antes de vir para escola, por exemplo, tomar</p><p>banho, vestir o uniforme e sair de casa; questione-os se seria viável vestir o uniforme e depois tomar banho. Explique que o passo a passo que desenvol-</p><p>veremos para o nosso jogo precisa de etapas que sejam viáveis para uma execução coerente do jogo e será um guia de como deveremos programá-lo.</p><p>4</p><p>O fluxograma do nosso jogo terá doze etapas, mas iniciaremos pelo</p><p>Passo: 0, uma vez que é o primeiro número do nosso sistema de</p><p>contagem. Assim, encontraremos a descrição da primeira tela, que será</p><p>vista ao iniciarmos a nossa aventura. Nessa etapa, apresentaremos a</p><p>história que dá início ao jogo, acompanhada de uma ilustração. Depois</p><p>disso, teremos duas opções de caminhos a seguir, que nos direcionarão</p><p>ao Passo 1 ou ao Passo 2.</p><p>Observe a imagem:</p><p>Professor, explique aos estudantes que um fluxograma é uma representação visual de um processo, uma ilustração das etapas e sequências de uma</p><p>ação. Dentro do design de jogos o estabelecimento do fluxo, é importante para que o jogo seja coerente e também desafiador.</p><p>5</p><p>Se seguirmos pelo Passo: 1, clicando no botão Rio de Janeiro, seremos</p><p>direcionados a uma mensagem explicativa sobre o que acontecerá ao</p><p>escolhermos esse caminho. Por esse motivo, esses blocos devem estar</p><p>conectados em nosso fluxograma.</p><p>Na tela do jogo, em que teremos o Passo: 1 e a mensagem explicativa,</p><p>também teremos os botões que nos direcionarão ao Passo: 3 ou ao</p><p>Passo: 4. Em nosso fluxograma, todos esses elementos estão conectados</p><p>a partir de blocos que contém as opções relativas a esses passos.</p><p>Professor, no exemplo de fluxograma desenvolvido para exemplificar o conteúdo para os estudantes, você observará que utilizamos formas geométri-</p><p>cas diferentes para representar os botões e as telas de textos. Sugira aos alunos que também diferenciem os botões e telas, como forma de manterem</p><p>seus fluxogramas mais organizados.</p><p>6</p><p>Ao escolhermos continuar no jogo, clicando em Procurar a pista no</p><p>topo do pico, seremos direcionados para uma nova tela com um texto</p><p>sobre o jogo. Dessa forma, a tela com as informações estará conectada</p><p>ao Passo: 3.</p><p>Podemos dizer que esse é o conjunto de passos relacionados a essa</p><p>opção. Lembrando que, se tivéssemos optado pelo passo quatro, Desistir</p><p>e voltar para casa, nossa aventura teria encerrado e não haveria mais</p><p>passos a seguir.</p><p>7</p><p>Um outro caminho possível para nossa aventura é selecionar, no início</p><p>do jogo, o Passo: 2, pois ele nos levaria para Pernambuco. Além de nos</p><p>direcionar para a tela com as informações que formam o conjunto de</p><p>passos desta opção. Observe:</p><p>Professor, ressalte aos estudantes que as setas indicam o fluxo a ser seguido durante a aventura, ou seja, a sequência em que as etapas devem ser</p><p>feitas. Por esse motivo, é importante interligá-las corretamente.</p><p>8</p><p>Agora, partindo da tela de informações do passo dois, podemos</p><p>continuar a aventura através dos Passos 5 e 6. Seremos direcionados</p><p>para mais uma tela com informações do jogo. Observe a imagem:</p><p>Professor, ressalte aos estudantes que nem todas os passos precisam ter uma sequência, ou seja, alguns podem resultar em becos sem saída.</p><p>Nesses casos, pode-se acrescentar um botão de retornar ao início ou para a tela anterior.</p><p>9</p><p>Seguindo pelo caminho proposto no conjunto de passos que começa</p><p>no Passo 1 – Rio de Janeiro ou no Passo 2 – Pernambuco, somos</p><p>direcionados ao Passo: 7 – Amazonas.</p><p>Na tela de informações sobre o Passo: 7, temos duas opções de botões:</p><p>Seguir pelo rio à esquerda ou Seguir pelo rio à direita. Ao decidirmos por</p><p>um deles, teremos mais um conjunto de mensagens e botões que nos</p><p>levam a prosseguir no jogo. Observe a imagem:</p><p>10</p><p>Desse modo, ao criarmos um fluxograma para nossa aventura,</p><p>descrevemos todos os passos que acreditamos serem necessários.</p><p>A cada botão clicado, somos conduzidos para uma tela e para novos</p><p>botões que irão nos conduzir a mais opções até chegarmos ao fim do</p><p>jogo. Na aventura que criaremos, podemos incluir quantos botões e telas</p><p>acreditarmos serem necessários.</p><p>11</p><p>Por fim, com papel e caneta ou com o auxílio de uma ferramenta digital,</p><p>criamos o fluxograma da nossa própria aventura. Inicialmente, criamos</p><p>uma temática, escrevemos um pequeno texto para os botões e as telas, e</p><p>também mapeamos a sequência de passos para a execução do jogo.</p><p>Desafio</p><p>12</p><p>Nesta aula, aprendemos a como utilizar um fluxograma para</p><p>representar as etapas de um jogo, descrevendo cada passo e as</p><p>opções que temos disponíveis a cada tela do jogo. Seu desafio, então,</p><p>será acrescentar ao fluxograma que você desenvolveu um conjunto</p><p>de etapas que leve a um final alternativo e inesperado, tornando sua</p><p>aventura ainda mais interessante.</p><p>CLIQUE AQUI PARA AVALIAR ESTE MATERIAL</p><p>Espera-se que os estudantes desenvolvam um caminho alternativo para seus jogos, colocando em práticas os conceitos aprendidos durante</p><p>a aula. Caso surjam dúvidas sobre como manter o final sem afetar a lógica do roteiro que já foi desenvolvido, lembre-os de que manter ou não</p><p>o final alternativo é opcional.</p><p>https://forms.gle/EcEZdj59zGS9QTwY9</p>