-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
321 lines (299 loc) · 12.7 KB
/
index.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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Yasmin Deodato">
<title>FisicaGames</title>
<link rel="shortcut icon" href="img/outras/favicon.png" />
<!-- Font Awesome Icons -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic' rel='stylesheet' type='text/css'>
<!-- Plugin CSS -->
<link href="vendor/magnific-popup/magnific-popup.css" rel="stylesheet">
<!-- Theme CSS - Includes Bootstrap -->
<link href="css/creative.min.css" rel="stylesheet">
</head>
<body id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top py-3" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top"><img src="img/outras/favicon.png" height="50px">FisicaGames</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto my-2 my-lg-0">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#portfolio">Sobre</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#acess">Como Jogar</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#games">Jogos</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#contact">Saiba mais</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Masthead -->
<header class="masthead">
</header>
<!-- About Section -->
<section id="portfolio">
<div class="container-fluid p-0">
<div class="row no-gutters">
<div class="col-lg-3 col-sm-4">
<a class="portfolio-box" src="img/portfolio/thumbnails/1.jpg">
<img class="img-fluid" src="img/portfolio/thumbnails/1.jpg" alt="">
<div class="portfolio-box-caption">
<div class="project-category text-white-50">
GitHub
</div>
<div class="project-name">
É uma ferramenta <br> de versionamento <br> de código
</div>
</div>
</a>
</div>
<div class="col-lg-3 col-sm-4">
<a class="portfolio-box" src="img/portfolio/thumbnails/2.jpg">
<img class="img-fluid" src="img/portfolio/thumbnails/2.jpg" alt="">
<div class="portfolio-box-caption">
<div class="project-category text-white-50">
Python
</div>
<div class="project-name">
É uma linguagem de <br> programação simples, <br> poderosa e divertida!
</div>
</div>
</a>
</div>
<div class="col-lg-3 col-sm-4">
<a class="portfolio-box" src="img/portfolio/thumbnails/3.jpg">
<img class="img-fluid" src="img/portfolio/thumbnails/3.jpg" alt="">
<div class="portfolio-box-caption">
<div class="project-category text-white-50">
CodeSkulptor
</div>
<div class="project-name">
É uma plataforma <br>online de codificação <br>em python.
</div>
</div>
</a>
</div>
<div class="col-lg-3 col-sm-4">
<a class="portfolio-box" src="img/portfolio/thumbnails/4.jpg">
<img class="img-fluid" src="img/portfolio/thumbnails/4.jpg" alt="">
<div class="portfolio-box-caption">
<div class="project-category text-white-50">
Física
</div>
<div class="project-name">
É uma ciência <br> natural que estuda <br>as propriedades da <br>matéria e da energia.
</div>
</div>
</a>
</div>
</div>
</div>
<section class="page-section bg-dark text-white" id="about">
<div class="container text-center">
<h2 class="mb-4">Sobre o projeto</h2>
<p class="text-white-50 text-justify">
A tecnologia da informação vem sendo adotada na educação básica
e têm proporcionado aos alunos e professores uma melhor experiência
de ensino e aprendizagem em diversas disciplinas. Dentre as ciências da natureza,
a física em específico, apresenta historicamente grandes dificuldades na compreensão
de conceitos e abstrações. Tendo em vista a proximidade dos jovens com jogos,
e a possibilidade de implementar sistemas físicos computacionalmente,
foi criado um projeto com o objetivo de auxiliar os alunos no entendimento
dos conceitos físicos por meio da programação. Para o desenvolvimento
desse projeto foi utilizada a linguagem de programação Python, uma linguagem
simples e fácil, a plataforma CodeSkulptor, uma ferramenta online de codificação,
e o GitHub, um controlador de versionamento de arquivos. Como resultado do projeto foi
possível a criação de um repositório online com os jogos, possibilitando aos
alunos o acesso a esses materiais e a compreensão dos conteúdos de física, e ainda,
propiciando aos orientados a oportunidade de rever conceitos físicos e matemáticos por meio da programação de jogos.
</p>
</div>
</section>
</section>
<!-- Acess Section -->
<section class="page-section bg-light" id="acess">
<div class="container">
<h2 class="text-center mt-0">Como acessar os jogos</h2>
<div class="row">
<div class="col-lg-3 col-md-6 text-center">
<div class="mt-5">
<img src="img/outras/passo_1.png">
<h3 class="h4 mb-2">Acesse o Link</h3>
<p class="text-muted mb-0">Os links estão disponíveis <br> na seção Jogos</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="mt-5">
<img src="img/outras/passo_2.gif" alt="">
<h3 class="h4 mb-2">Aperte o botão Run</h3>
<p class="text-muted mb-0">Para iniciar o jogo, aperte Run!</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="mt-5">
<img src="img/outras/passo_3.png">
<h3 class="h4 mb-2">Jogue</h3>
<p class="text-muted mb-0">Aproveite, agora é <br>só jogar e se divertir!</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="mt-5">
<!--<i class="fas fa-4x fa-laptop-code text-primary mb-4"></i>-->
<img src="img/outras/passo_4.png" alt="">
<h3 class="h4 mb-2">Visite o código</h3>
<p class="text-muted mb-0">Você pode saber como <br>os jogos foram feitos e fazer suas próprias modificações!</p>
</div>
</div>
</div>
</div>
</section>
<!-- Games Section -->
<section class="page-section bg-primary" id="games">
<div class="container">
<h2 class="text-center text-white mb-4">Jogos</h2><br>
<div class="row">
<!-- Jogo da Bola -->
<div class="col-lg-2 col-md-3 text-center">
<div class="mt-1">
<a href="http://www.codeskulptor.org/#user46_mkR69cOCDy_3.py" target="_blank"><img src="img/outras/jogo_1.gif"></a>
</div>
</div>
<div class="col-lg-2 col-md-3 text-justify">
<div class="mt-10">
<h3 class="h4 mb-2">Jogo da Bola</h3>
<p class="text-white mb-0">Mude as dimensões do círculo!
<a href="http://www.codeskulptor.org/#user46_mkR69cOCDy_3.py" target="_blank" class="text-white">Acesse!</a>
</p>
</div>
</div>
<!-- Conversão de Tempo -->
<div class="col-lg-2 col-md-3 text-center">
<div class="mt-1">
<img src="img/outras/relogio.gif">
</div>
</div>
<div class="col-lg-2 col-md-3 text-l">
<div class="mt-10">
<h3 class="h4 mb-2">Formatador de Tempo</h3>
<p class="text-white mb-0">Formate o tempo de segundos para horas e minutos!
<a href="http://www.codeskulptor.org/#user46_AeovuqOjJl_8.py" target="_blank" class="text-white">Acesse!</a>
</p>
</div>
</div>
<!-- Adivinhe o número -->
<div class="col-lg-2 col-md-3 text-center">
<div class="mt-1">
<a href="http://www.codeskulptor.org/#user46_acnbNNwPIQ_12.py" target="_blank"><img src="img/outras/numeros.gif"></a>
</div>
</div>
<div class="col-lg-2 col-md-3 text-left">
<div class="mt-10">
<h3 class="h4 mb-2">Adivinhe o número</h3>
<p class="text-white mb-0">Tente descobrir qual número o computador gerou!
<a href="http://www.codeskulptor.org/#user46_acnbNNwPIQ_12.py" target="_blank" class="text-white">Acesse!</a>
</p>
</div>
</div>
</div>
<br><br>
<!--LINHA 2-->
<div class="row">
<!-- Lista de Tarefas -->
<div class="col-lg-2 col-md-3 text-center">
<div class="mt-1">
<a href="http://www.codeskulptor.org/#user46_wwkcQ1JTiQ_6.py" target="_blank"><img src="img/outras/tarefas.gif"></a>
</div>
</div>
<div class="col-lg-2 col-md-3 text-justify">
<div class="mt-10">
<h3 class="h4 mb-2">Lista <br> de Tarefas</h3>
<p class="text-white mb-0">Organize as tarefas do seu dia a dia!
<a href="http://www.codeskulptor.org/#user46_wwkcQ1JTiQ_6.py" target="_blank" class="text-white">Acesse!</a>
</p>
</div>
</div>
<!-- RPSLS -->
<div class="col-lg-2 col-md-3 text-center">
<div class="mt-1">
<a href="http://www.codeskulptor.org/#user46_HET62s8d7F_5.py" target="_blank"><img src="img/outras/rpsls.gif"></a>
</div>
</div>
<div class="col-lg-2 col-md-3 text-left">
<div class="mt-10">
<h3 class="h4 mb-2">Pedra, Papel <br> e Tesoura 2.0</h3>
<p class="text-white mb-0">Uma versão diferente do jogo Pedra, papel e tesoura!
<a href="http://www.codeskulptor.org/#user46_HET62s8d7F_5.py" target="_blank" class="text-white">Acesse!</a>
</p>
</div>
</div>
<!-- Jogo da Cobrinha -->
<div class="col-lg-2 col-md-3 text-center">
<div class="mt-1">
<a href="http://www.codeskulptor.org/#user46_6T6NT98Pnh_2.py" target="_blank" ><img src="img/outras/cobrinha.gif"></a>
</div>
</div>
<div class="col-lg-2 col-md-3 text-left">
<div class="mt-10">
<h3 class="h4 mb-2">Jogo da <br> Cobrinha </h3>
<p class="text-white mb-0">O clássico e divertido jogo da cobrinha!
<a href="http://www.codeskulptor.org/#user46_6T6NT98Pnh_4.py" target="_blank" class="text-white">Acesse!</a>
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section class="page-section" id="contact">
<div class="container">
<div class="text-center">
<h2 class="mt-0">Saiba mais</h2><br>
</div>
<div class="row">
<div class="col-lg-3 col-sm-4">
<br><p class="text-justify">Esse projeto foi desenvolvido pela aluna Yasmin Deodato, orientado pelo professor Flavio Barros e
pertence ao programa Bolsa Ensino de 2019, do Instituto Federal de São Paulo - Campus Hortolândia. </p>
</div>
<div class="col-lg-4 ml-auto text-center mb-5 mb-lg-0">
<br><img src="img/outras/instituto.png">
<div><a class="d-block" href="http://hto.ifsp.edu.br/portal/" target="_blank">Portal do IFSP Hortolândia</a></div>
</div>
<div class="col-lg-4 mr-auto text-center">
<br><img src="img/outras/git_logo.png">
<div><a class="d-block" href="https://github.com/IFSP-HTO/FisicaGames" target="_blank">Repositório do FisicaGames</a></div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-dark py-5">
<div class="container">
<div class="text-center text-muted">Copyright © 2019 - FisicaGames </div>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="vendor/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- Custom scripts for this template -->
<script src="js/creative.min.js"></script>
</body>
</html>