-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
98 lines (93 loc) · 4.02 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
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/dark-gray.css">
<title>Kluczka - Internet Technology Project 1</title>
</head>
<body>
<div class="parag ccenter">
<h1>IT Project 1 - Projectile Motions</h1>
</div>
<nav class="ccenter">
<div class="navbar-entry ccenter" id="nav-active">
About
</div>
<div class="navbar-entry ccenter">
<a href="topic.html">Topic</a>
</div>
<div class="navbar-entry ccenter">
<a href="simul.html">Simul</a>
</div>
</nav>
<div class="parag">
<h2 class="ccenter">Welcome</h2>
This site has been created for the first project of
<a href="https://newton.fis.agh.edu.pl/~antek/index.php?sub=it" target="_blank">Internet Technologies</a>.
<br><br>
The content is as follows:<br>
<blockquote>
Matematyka, fizyka lub informatyka prezentowana z wykorzystaniem grafiki i animacji.
<br><br>
<h3>Założenia projektu:</h3>
<br>
<h4>Zawartość merytoryczna projektu:<br></h4>
Wybrane zagadnienie z matematyki, fizyki czy informatyki zaprezentowane z wykorzystaniem graficznych animacji (symulacji) zrealizowanych z wykorzystaniem języka JavaScript i CSS 3.0.<br><br>
<h4>Język HTML5<br></h4>
W ramach projektu należy wykorzystać elementy semantyczne języka HTML5 tj. header, nav czy article. Treści multimedialne prezentowane są z wykorzystaniem nowych elementów tj. audio czy video.<br><br>
<h4>Grafika w projekcie<br></h4>
W ramach projektu należy opracować grafikę z wykorzystaniem elementu canvas lub grafiki wektorowej SVG. Grafika z wykorzystaniem WebGL - TAK, ale bez bibliotek wspierających tworzenie aplikacji.<br><br>
<h4>JavaScript w projekcie<br></h4>
Proszę wykorzystać język JavaScript do modyfikacji dokumentu HTML5 z wykorzystaniem funkcji "getElementByID" i "innerHTML", do obsługi zdarzeń funkcje on..() lub addEventListener oraz do operacji na własnościach styli np. "style.display" - none i block. Można korzystać z bibliotek tj. Prototype czy jQuery, ale nie z narzędzi typu UI jQuery.<br><br>
<h4>Dodatkowe funkcjonalności aplikacji - liczone jako dodatkowe punkty<br></h4>
W ramach projektu można wykorzystać technologię WebWorker - 5 punktów.<br><br>
<h4>Walidacja projektu<br></h4>
Strony walidują się poprawnie na stronie W3C zgodnie z standardem HTML5 i CSS. Projekt może być zrealizowany pod konkretną przeglądarkę - należy jednak wtedy podać jej nazwę.<br><br>
<h3>Ocena za projekt (maximum 15 pkt):<br></h3>
1) Wykorzystanie elementów języka HTML5 - 4 pkt.<br>
2) Wykorzystanie języka JavaScript - 7 pkt.<br>
3) Wsparcie formy prezentacyjnej poprzez arkusze styli CSS - 3 pkt.<br>
4) Walidacja HTML5 i CSS - 1 pkt.<br>
</blockquote>
</div>
<div class="parag">
<h2 class="ccenter">Technologies used</h2>
<h3>Animation</h3>
The animation has been created with Canvas. All calculations are done in pure JavaScript.
<br><br>
<h3>HTML+CSS</h3>
Both HTML and CSS files pass W3C validation.
<br><br>
<h3>JavaScript</h3>
JS scripts are used for animation and settings panel. The main goal was to have the sliders instant impact on the animation.
<br><br>
Additionally, theory view presents some math/physics formulas which are constructed using <a href="https://www.mathjax.org" target="_blank">MathJax</a> JS script.
</div>
<div class="parag">
The site has been tested on Pop!_OS 21.10 (x86_64; KDE) system with Opera 77.0.4054.172 and Mozilla Firefox 95.0.1.
</div>
<fieldset class="about">
<legend><span id="legend-name">About</span></legend>
<table>
<tbody>
<tr>
<th>owner:</th>
<th>Aleksander Kluczka</th>
</tr>
<tr>
<th>taurus:</th>
<th>9kluczka</th>
</tr>
<tr>
<th>e-mail:</th>
<th><a href="mailto:qlootchka@student.fis.agh.edu.pl">qlootchka@student.fis.agh.edu.pl</a></th>
</tr>
<tr>
<th>source:</th>
<th><a href="https://github.com/vis4rd/it_project_1_2021" target="_blank">Github</a></th>
</tr>
</tbody>
</table>
</fieldset>
</body>
</html>