-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
202 lines (175 loc) · 10.6 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
<!DOCTYPE html>
<html lang="en">
<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>régua de cálculo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="toastr.min.css">
<link rel="apple-touch-icon" sizes="57x57" href="icons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="icons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="icons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="icons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="icons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="icons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="icons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="icons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="icons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="icons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
<link rel="manifest" href="icons/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="icons/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
</head>
<body>
<section class="container mt-4" >
<div class="row" >
<div class="col-md-12">
<h1>Um pouco sobre <span style="color: #ff4963;">Régua de Cálculo </span> e suas aplicações</h1>
</div>
</div>
<div class="row mt-3">
<div class="col-sm-12 col-md-12 col-lg-12" >
<h3>A história</h2>
<p>
Criada em 1622 por William Oughtred, matemático inglês, trata-se de um simples equipamento de grande utilidade
para matemáticos e astrônomos. Desde a criação de seu projeto, ela passou por diversas melhorias, sendo utilizada até
por volta dos anos 1970. Ela nos permite realizar operações de <span class="highlight"> multiplicação </span>, <span class="highlight"> divisão</span>,
<span class="highlight">exponenciação</span>,<span class="highlight"> radiciação</span> e <span class="highlight"> logarítmicas</span>.
</p>
</div>
</div>
<div class="row mt-2">
<div class="col-sm-12 col-md-12 col-lg-12" >
<h3>Tipos de réguas</h3>
<p>
Existem <span class="highlight"> muitas variações </span> da régua de cálculo, a depender de sua aplicação. Diferença esta devido às escalas presentes. Ainda, além das diferenças de escala,
elas podem possuir <span class="highlight">outros formatos</span>, como circulares ou mesmo cilíndricas.</br> De modo geral, em função das escalas e da forma, <span class="highlight">cada tipo de régua se destina a uma aplicação
específica</span>. Apesar de sua semelhança com uma régua convencional, a régua de cálculo possui propriedades<span class="highlight"> logarítmicas</span>. Em outras palavras, ela se baseia na sobreposição de escalas logarítmicas,
sendo seus cálculos realizados por meio de uma técnica mecânico-analógica de guias deslizantes graduadas, ou seja, réguas logarítmicas que deslizam sobre si, sendo os valores mostrados em suas escalas por meio de um cursor com linhas
estrategicamente dispostas, cuja função é correlaciona-las diversas escalas da régua de cálculo, possibilitando marcar o resultado de uma determinada operação.
</p>
</div>
</div>
<div class="row mt-4">
<div class="col-md-12 mb-2">
<h3>Operações</h3>
<hr style="background-color: #e03c54;"/>
</div>
<div class="col-sm-12 col-md-6 col-lg-4" >
<h4>Multiplicação</h4>
<p>Posiciona-se a seta (valor 1) da escala<span class="highlight"> C </span>no multiplicando da escala<span class="highlight"> D </span>, <span class="highlight"> o resultado estará alinhado com o multiplicador da escala C</span>
. Por exemplo: 2.7 x 3.15, posiciona-se o 1 da escala <span class="highlight">C</span> no 2.7 da escala <span class="highlight">D</span> e observa-se o valor 3.15 na escala <span class="highlight">C</span>, o resultado estará logo abaixo (na escala D).</p>
</div>
<div class="col-sm-12 col-md-6 col-lg-4" >
<h4>Potência</h4>
<p>Alinha-se o <span class="highlight">expoente</span>, contido em <span class="highlight">D</span>, com o 1 de <span class="highlight">C</span>, e o resultado estará em <span class="highlight">MM</span>, alinhado com abase contida
em <span class="highlight">LL</span>.</br>Por exemplo: 2.5 elevado a 3.2, alinha-se o 1 de C com o 3.2 em D, observa-se o 2.5 em LL, o <span class="highlight">resultado estará alinhado em MM</span>.</p>
</div>
<div class="col-sm-12 col-md-12 col-lg-4" >
<h4>Logaritmo</h4>
<p>Alinha-se a <span class="highlight">base</span>, contida em <span class="highlight">LL</span>, com o <span class="highlight">logaritmando</span>, contido em <span class="highlight">MM</span>,
<span class="highlight">o resultado estará em D alinhado com o 1 da escala C</span>.<br>Por exemplo: log de 4 na base 3.5, alinha-se o 3.5 em LL com o 4 em MM, o resultado estaráem D para onde aponta o 1 em C.</p>
</div>
</div>
<div class="row mt-3">
<div class="col-sm-12 col-md-6 col-lg-4" >
<h4>Divisão</h4>
<p>Posiciona-se o divisor na escala<span class="highlight"> C </span>alinhado com o dividendo na escala <span class="highlight">D</span>, o resultado estará na escala <span class="highlight">D</span> onde se encontra a seta (valor 1) da escala <span class="highlight">C</span>.</p>
</div>
<div class="col-sm-12 col-md-6 col-lg-8" >
<h3>Raiz</h3>
<p>Alinha-se o <span class="highlight">índice</span>, contido em <span class="highlight">D</span>, com o 1 de <span class="highlight">C</span>, e <span class="highlight">o resultado estará em LL</span>, alinhado com o radicando contido em <span class="highlight">MM</span>
.Por exemplo: raiz cubica de 5, alinha-se o 1 de C com o 3 em D, observa-se o 5 em MM, oresultado estará alinhado em LL.</p>
</div>
</div>
</section>
<div class="container mt-5">
<div class="row">
<div id="frRegua" >
<div id="referencia" class="regua">
<div id="marcador" style="left: 0;"></div>
<div class="regua movel" id="move"> </div>
</div>
</div>
</div>
<div class="row frame">
<div class="col-sm-12 col-md-4 col-lg-4 col-xl-3" style="display: inline;">
<p id="num_1">Primeiro número: </p>
<input id="numero1" type="number"/>
</div>
<div class="col-sm-12 col-md-4 col-lg-4 col-xl-3">
<p id="num_2">Segundo número: </p>
<input id="numero2" type="number"/>
</div>
<div class="col-sm-12 col-md-4 col-lg-4 col-xl-3">
<p id="resul">resultado:</p>
<input id="resultado" />
</div>
<div class="col-sm-12 col-md-12 offset-lg-3 col-lg-6 offset-xl-0 col-xl-3">
<div class="row ">
<div class="col-sm-12 col-md-4 col-xl-6 d-flex justify-content-center">
<button id="btn_calculaMultiplicacao">Multiplicar</button>
</div>
<div class="col-sm-12 col-md-4 col-xl-6 d-flex justify-content-center">
<button id="btn_calculaPot">Potência</button>
</div>
<div class="col-sm-12 col-md-4 col-xl-4 d-flex justify-content-center">
<button id="btn_calculaDivisao">Dividir</button>
</div>
<div class="col-sm-12 col-md-6 col-xl-4 d-flex justify-content-center">
<button id="btn_calculaLog">Log</button>
</div>
<div class="col-sm-6 col-md-6 col-xl-4 d-flex justify-content-center">
<button id="btn_calculaRaiz">Raiz</button>
</div>
</div>
</div>
</div>
</div>
<div id="video" class="pt-2">
<div class="container">
<div class="row">
<div class="col-md-12 d-flex justify-content-center">
<div class="apresentacao"><p>Como faço para usar este simulador?</p></div>
</div>
<div class="row mt-4">
<div class="col-md-12 d-flex justify-content-center">
<iframe src="https://www.youtube.com/embed/w1gqyN-YchY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
<footer class="container">
<div class="row">
<div class="col-md-12">
<ul>
<li> Alunos resposáveis:</li>
<li> Lucas Pereira Pacheco |</li>
<li> João Pedro Rodrigues Freitas |</li>
<li> Rogério Lopes Lube |</li>
<li> Felipe Henrique de Oliveira </li>
</ul>
</div>
<div class="col-md-12">
<p style="display: inline; padding-right: 1.8rem;">Professor responsável: </p>
<p style="display: inline;">Claudio Fabiano Motta Toledo</p>
</div>
</div>
</footer>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<script src="toastr.min.js"></script>
<script src="main.js"></script>
</html>