-
Notifications
You must be signed in to change notification settings - Fork 0
/
roteiro.html
87 lines (87 loc) · 6.35 KB
/
roteiro.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Roteiro</title>
<link rel="stylesheet" href="./css/style.css">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/pucminas-white.png">
</head>
<body>
<div class="container">
<div class="header-container"><header>
<img id="computer" src="./assets/computer.png" alt="Logo Projeto">
<nav>
<ul class="menu">
<li class="item"><a href="./index.html">Home</a></li>
<li class="item"><a href="./videos.html">Vídeos</a></li>
<li class="item"><a href="./ferramentas.html">Ferramentas</a></li>
<li class="item"><a href="./roteiro.html">Roteiro</a></li>
</ul>
</nav>
</header>
</div>
<main>
<h2>Roteiro</h2>
<ul class="roteiro">
<li class="fase">
<h3>Fase 1 - Vendo o Jogo e Conhecendo a Proposta:</h3>
<h4>Etapa 1:</h4>
<p>Entrar no site e ver o jogo para incentivar o usuário a aprender e desenvolver o seu primeiro jogo em uma linguagem de programação.</p>
<div class="container-video-game"><video class="video-game" src="./assets/game.mp4" autoplay loop muted></video></div>
<h4>Etapa 2:</h4>
<p>Logo abaixo do jogo informaremos qual linguagem foi utilizada e qual editor de texto foi utilizado (P5). Além disso também disponibilizaremos um link para o Grasshoper, que será por onde o usuário poderá ter seu primeiro contato com o JS e se interessar mais pelo jogo.</p>
<div class="div-grass"><a href="https://grasshopper.app/pt_br/" target="_blank"><button class="botao-grass"></button></a></div>
<h4>Etapa 3:</h4>
<p>Fazer o usuário preencher um formulário para sabermos quais assuntos ele já tem conhecimento e nos dar um feedback inicial. Com isso forneceremos material de estudo para que ele possa acompanhar e ir além dos nossos vídeos.</p>
<div class="div-grass"><a href="https://docs.google.com/forms/d/e/1FAIpQLScAicPMf2yvqRcGI5gI2eYFcHv8ru5XeJov8fBEhhPXx1vO5g/viewform" target="_blank"><button class="botao-form"></button></a></div>
<h4>Etapa 4:</h4>
<p>Redirecionar o usuário para a parte do site em que está disponível os vídeos que ensinam a fazer o jogo.</p>
</li>
</ul>
<ul class="roteiro">
<li class="fase">
<h3>Fase 2 - Criando o Jogo:</h3>
<h4>Etapa 1:</h4>
<p>Aqui o usuário começaria de fato a ver os vídeos que ensinam a fazer um jogo clássico em JavaScript.</p>
<h4>Etapa 2:</h4>
<p>Então o usuário assistirá um vídeo que estará postado no YouTube (mas também colocaremos esse vídeo em nosso site).</p>
<div class="div-grass"><a href="https://www.youtube.com/watch?v=hedilqSEDsc&list=PLPrqgtzKb_8Q0ceGiNrHKrSH3scqk5DkY&ab_channel=ProjetoExtens%C3%A3o-CursoJS" target="_blank"><button class="botao-yt"></button></a></div>
<h4>Etapa 3:</h4>
<p>Logo após ver o vídeo o usuário terá um link que levará a um formulário onde ele irá avaliar o conteúdo e deixar algum comentário sobre o que ele achou, o que gostou e onde ele acha que podemos melhorar.</p>
<p id="descricao-video">
Os vídeos presentes no site serão: <br>
<strong>Vídeo 1</strong> - Apresentando as ferramentas (P5) e resultado final (jogo pronto) <br>
<strong>Vídeo 2</strong> - Criando ambiente Canva <br>
<strong>Vídeo 3</strong> - Vídeo da Bolinha, movimentação e colisão <br>
<strong>Vídeo 4</strong> - Introduz o conceito de função <br>
<strong>Vídeo 5</strong> - Criar raquete e movimentação <br>
<strong>Vídeo 6</strong> - Criar colisão com a raquete <br>
<strong>Vídeo 7</strong> - Movimentação oponente <br>
<strong>Vídeo 8</strong> - Marcar Ponto <br>
<strong>Vídeo 9</strong> – Assets <br>
</p>
</li>
</ul>
<ul class="roteiro">
<li class="fase">
<h3>Fase 3 - Compartilhando e Descobrindo um Pouco Mais:</h3>
<h4>Etapa 1:</h4>
<p>Depois da elaboração do jogo, o usuário preencherá outro formulário para nos dizer o que achou do projeto e nos dar um feedback.</p>
<h4>Etapa 2:</h4>
<p>Ao final dos vídeos queremos estimular o usuário a ir além e compartilhar o que fez. Dessa mostraremos alguns caminhos e formas de o usuário mostraro que fez para a família e para os amigos.</p>
<h4>Etapa 3:</h4>
<p>Após isso, iremos convidar o usuário a seção “Ferramentas” em nosso site, e lá ele poderá conhecer mais sobre cada ferramenta. Nesta parte terá uma breve descrição sobre cada uma das ferramentas e um vídeo ensinando a usá-la.</p>
<div class="div-grass"><a href="https://docs.google.com/forms/d/e/1FAIpQLSd0klSUefOIDDNHqnEZIqNP0el1fcFR5jlVyzrR0vBCgI4Uug/viewform" target="_blank"><button class="botao-tesouro"></button></a>
<p>Clique no baú para ter acesso ao último presente que reservamos a você</p></div>
</li>
</ul>
</main>
<footer>
<img id="puc-footer" src="./assets/pucminas-white.png" alt="Logo PUC Minas">
<p class="copyright">© Copyright 2021</p>
</footer>
</div>
</body>
</html>