-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathtutorial.html
305 lines (272 loc) · 15.1 KB
/
tutorial.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
<!DOCTYPE html>
<html>
<head>
<!-- Link com o repositório do projeto no observable: https://observablehq.com/d/ffb89fcb60d326fa -->
<!-- Nome na aba do navegador -->
<title>Nutrição em um olhar</title>
<!-- Import o D3 -->
<script src="https://d3js.org/d3.v7.min.js"></script>
<!-- Import o Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<!-- Folha de estilos -->
<link rel="stylesheet" href="style.css">
<!-- Fontes -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
rel="stylesheet">
<!-- Importar scripts do Firebase -->
<script type="module">
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.1/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.22.1/firebase-analytics.js";
import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/9.22.1/firebase-auth.js";
import { getFirestore, doc, setDoc, getDoc } from "https://www.gstatic.com/firebasejs/9.22.1/firebase-firestore.js";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIzaSyAhS7zhyXHLNGLpQ9saPZZg8Aol8jWaGPA",
authDomain: "nutricao-em-um-olhar.firebaseapp.com",
projectId: "nutricao-em-um-olhar",
storageBucket: "nutricao-em-um-olhar.appspot.com",
messagingSenderId: "101019466395",
appId: "1:101019466395:web:d22a7fda84e635e544243e",
measurementId: "G-MNX0D151MB"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
const auth = getAuth();
const db = getFirestore(app);
// Imprime o usuário atual (salvo no local storage)
var user_uid = localStorage.getItem('user');
// Recupera os dados do usuário
const docRef = doc(db, "user", user_uid);
getDoc(docRef)
.then((docSnap) => {
// Define os valores dos campos dos dados do usuário
document.getElementById("m").value = docSnap.data()["weight"];
})
.catch((error) => {
console.error("Erro ao recuperar os dados:", error);
});
</script>
</head>
<!-- Header da página -->
<header>
<!-- Título da página -->
<div class="row justify-content-center principal_container">
<div class="col-md-1">
</div>
<div class="col-md-1">
</div>
<div class="col-md-1">
<!-- Logo da página -->
<img src="img/logo_sem_fundo.png" alt="Logo" class="logo" id="logo">
</div>
<div class="col-md-6 justify-content-center align-items-center" style="display:flex;">
<div class="row justify-content-center align-items-center">
<!-- Título -->
<h1 style="margin-bottom: 0px;">NUTRIÇÃO EM UM OLHAR</h1>
</div>
</div>
<div class="col-md-1 center_col">
<div class="row justify-content-center align-items-center">
<button type="button" class="btn btn-primary header_button" onclick="window.location.href='app.html'">
App
</button>
</div>
</div>
<div class="col-md-1 center_col">
<div class="row justify-content-center align-items-center">
<button type="button" class="btn btn-primary header_button"
onclick="window.location.href='tutorial.html'">
Tutorial
</button>
</div>
</div>
<div class="col-md-1 center_col">
<div class="row justify-content-center align-items-center">
<button type="button" class="btn btn-primary header_button" onclick="window.location.href='about.html'">
Sobre
</button>
</div>
</div>
</div>
</header>
<body>
<!-- Como utilizar a ferramenta -->
<div class="principal_container">
<div class="row">
<div class="col-md-12">
<h2>Como utilizar a ferramenta</h2>
<br>
<ul id="como_utilizar">
<h4>Dados pessoais</h4>
<p>
Começamos informando alguns dados iniciais do usuário (caso não forem preenchidos, serão usados
os dados
padrão):
</p>
<li>
Peso: o peso do usuário em quilogramas (kg);
</li>
<li>
Calorias diárias: a quantidade de calorias que o usuário deseja consumir em um dia (por padrão,
2000 Kcal)
</li>
<li>
Quantidade de proteínas por quilograma: a quantidade de proteínas em gramas que o usuário deseja
consumir por Kg de massa corporal em um dia (por padrão, 1.0g);
</li>
<li>
Proporção de proteína: a proporção de calorias com a fonte sendo proteína que o usuário deseja
consumir em um dia (por padrão, 25%);
</li>
<li>
Proporção de carboidrato: a proporção de calorias com a fonte sendo carboidrato que o usuário
deseja
consumir em um dia (por padrão, 50%);
</li>
<li>
Proporção de lipídios (gordura): a proporção de calorias com a fonte sendo lipídeos que o
usuário
deseja consumir em um dia (por padrão, 25%),
</li>
<li>
Tolerância: margem de erro na alimentação (Tolerância igual a 10% significa que a alimentação
pode
ter até 10% a mais ou a menos do que o desejado).
</li>
<li>
Número de refeições: o número de refeições que o usuário faz por dia (por padrão, 3);
</li>
<p>
As proporções de macronutrientes, por padrão definidas como 25% para gorduras, 25% para
proteínas e 50% para carboidratos, seguem recomendações da nutricionista Isolda Vasconcelos em
<a
href="https://www.boasaude.com.br/nutricao/15404/qual-a-proporcao-de-proteina-e-carboidratos-ideal-nas-refeicoes.html">
Saúde e Nutrição.
</a>
Essas proporções podem ser alteradas pelo usuário a depender do seu objetivo. Por exemplo, pessoas
sedentárias consomem, em geral, menos proteínas do que um atleta. Para entender melhor em qual grupo
você se encaixa, recomendamos ler algumas referências, como em <a
href="https://www.atletis.com.br/quantidade-proteina-dia#:~:text=Para%20adultos%20sedent%C3%A1rios%2C%20a%20quantidade,g%20a%20cada%20quilo%20no%20m%C3%A1ximo.">
"Descubra a quantidade ideal de proteína por dia" - Atletis Blog.
</a>
</p>
<br>
<h4>Montagem do prato </h4>
<p>
Existem alguns recursos de filtragem, comparação e seleção
que facilitam a montagem de um prato:
</p>
<li>Filtro po texto: você pode inserir um texto para filtrar a lista com apenas os alimentos que
contém aquela
porção de texto (como uma palavra em específico, por exemplo),</li>
<li>Gráfico de violino (na esquerda): você pode selecionar uma porção do gráfico de violino (com a
função de "brush") para filtrar a lista
com apenas os alimentos que contém aquela porção de macronutrientes (a intersecção dos filtros).
Além disso, esse gráfico é separado por intervalos. Ao passar o mouse por cima
de cada faixa, é possível ver a quantidade de alimentos que estão incluídos nela e, ao
selecioná-la,
por meio de uma matriz de pontos, podemos ver quais são esses alimentos, bem
como suas informações nutricionais em relação aos macronutrientes a partir de um gráfico
de barras. Caso deseje incluir um dos alimentos da matriz de pontos em sua refeição, basta
clicar
no alimento desejado. Além disso, ao selecionar um alimento, o gráfico de violino é atualizado
para
mostrar em quais faixas de cada macronutriente ele se encontra.
</li>
<p>Após selecionar os alimentos é necessário indicar a quantidade de cada um deles que será
consumida na refeição, para isso, temos um slider que nos permite variar a quantidade desejada.
Ao atualizar esses
valores, o sistema nos retorna um:
</p>
<li>
Gráfico de pizza (prato): nos dá um panorama geral de como a refeição está sendo montada por
meio de imagens
dos alimentos selecionados e, por meio de uma tooltip, os macronutrientes de cada alimento.
</li>
<li>
Gráfico de barras (distribuição dos macronutrientes): mostra, a partir das cores, se
a refeição está balanceada ou não, sendo: verde para balanceada, vermelho para
excesso do macronutriente e amerelo para falta do macronutriente na refeição. Além disso,
apresneta um
range para ajudar o usuário a notar onde ocorre a adequação dos macronutrientes.
Com a refeição ajustada, clique no botão "salvar prato" para
atualizar os dados da alimentação diária</li>
<br>
<h4>Dados de Hoje</h4>
<p>
Nessa aba, podemos ver como está sendo a alimentação do usuário no dia. Para isso, temos:
<li>
Gráfico de barras dos macronutrientes:
Possui a mesma forma do gráfico de barras que mostra a distribuição dos macronutrientes em
uma refeição,
contudo, com a soma dos valores de todas as refeições do dia.
</li>
<li>
Gráfico de barras do consumo de lipídeos: mostra a quantidade de gorduras saturadas,
monoinsaturadas
e poliinsaturadas consumidas no dia. A linha indica os limites de consumo recomendados pela
Organização Mundial de Saúde (OMS).
</li>
<li>
Gráficos de micronutrientes (minerais e vitaminas): mostra a proporção de cada
micronutriente consumido
no dia em relação aos valores de Ingestão Diária Recomendada (IDR).
</li>
</p>
<br>
<h4>Dados do mês</h4>
Apresenta um gráfico de linha mensal que relaciona o peso corporal e a ingestão de cada
macronutriente. Visualização
útil para acompanhar e compreender a relação entre a alimentação e o peso ao longo do tempo. Existem
tooltips que
mostram os valores de cada ponto do gráfico e no intervalo dos valores adequados.
<br>
<br>
<h5>
Observações:
</h5>
<li>
Alguns valores padrão foram definidos, com base nas opiniões de alguns nutricionistas ou
organizações
de saúde. Esses valores podem ser alterados pelo usuário, caso ele
tenha outra recomendação de alimentação (dado que isso pode variar de acordo com o objetivo do
usuário).
</li>
<li>
A página foi desenvolvida para ficar bem dimensionada para uma tela (de notebook) com 15.6",
podendo ficar com algo mal alinhado em outras dimensões (infelizmente a página não é bem
responsiva). Se
algo estiver fora do lugar, recomendamos utilizar a função de zoom out do navegador (atalho
"CTRL -" para
grande parte dos navegadores).
</li>
</div>
</div>
<div class="row justify-content-center">
<!-- Botão para a página principal -->
<button type="button" class="btn btn-primary header_button" onclick="window.location.href='app.html'">
Ir para a ferramenta
</button>
</div>
</div>
</body>