-
Notifications
You must be signed in to change notification settings - Fork 0
/
scga.html
238 lines (209 loc) · 14.4 KB
/
scga.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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--G Fonts-->
<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=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<!--Fim G Fonts-->
<link rel="shortcut icon" href="images/logo1.png" type="image/x-icon">
<title>Portfolio GPa</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<link href="style.css" rel="stylesheet" />
<script type="module" src="index.js"></script>
</head>
<body>
<header>
<div class="interface">
<div class="logo">
<a href="index.html">
<img src="images/logo1.png" id="img_nav" alt="logo GPa"/>
</a>
</div>
<nav class="menu-desktop">
<ul>
<li><a href="#inicio">Início</a></li>
<li><a href="#especialidades">Especialidades</a></li>
<li><a href="#sobre">Sobre</a></li>
<li><a href="#portfolio">Projetos</a></li>
<li class="nav-item">
<input type="checkbox" id="dark-change" onclick="toggleDarkMode()">
<label for="dark-change">
<i class='nav-link bi bi-sun'></i>
<i class='nav-link bi bi-moon'></i>
</label>
</li>
<li>
<select id="slcDesk">
<option value="pt-br">pt-br</option>
<option value="eng">Inglês</option>
<option value="spn">Espanhol</option>
</select>
</li>
</ul>
</nav>
<div class="btn-contato">
<a href="#form">
<button>Contato</button>
</a>
</div>
<div class="btn-abrir-menu" id="btn-menu">
<i class="bi bi-list"></i>
</div>
<div class="menu-mobile" id="menu">
<div class="btn-fechar">
<i class="bi bi-x-lg"></i>
</div>
<nav>
<ul>
<li class="click"><a href="#inicio">Início</a></li>
<li class="click"><a href="#especialidades">Especialidades</a></li>
<li class="click"><a href="#sobre">Sobre</a></li>
<li class="click"><a href="#portfolio">Projetos</a></li>
<li class="click"><a href="#form">Contato</a></li>
<li class="nav-item click">
<input type="checkbox" id="dark-change" onclick="toggleDarkMode()">
<label for="dark-change">
<i class='nav-link bi bi-sun'></i>
<i class='nav-link bi bi-moon'></i>
</label>
</li>
<li>
<select id="slcMb">
<option value="pt-br">pt-br</option>
<option value="eng">Inglês</option>
<option value="spn">Espanhol</option>
</select>
</li>
</ul>
</nav>
</div>
<div class="overlay-menu" id="overlay">
</div>
</div>
</header>
<main>
<section class="topo-do-site" id="inicio">
<div class="interface">
<div class="flex">
<div class="txt-topo-site">
<h1>INTRODUÇÃO <span>SCGA.</span></h1>
<p>Esse projeto foi feito com a itenção de ser o Trabalho de Conclusão de Curso (TCC) da Etec Zona Leste de São Paulo em 2023, com os integrantes Gustavo Pereira, Thiago Martins, André Caitano e Hugo Reblerson
<br>
Ele tem o objetivo de flexibilizar e deixar mais maleável a comunicação entre os alunos e professores, professores e técnicos e virse-versa no âmbito dos ambientes da unidade (Salas, Anexos e Laboratórios) utilizando-se a criação de contas com as 3 topologias citadas anteriormente e funcionalidades para visualizar, criar, editar e remover agendamentos ou reportes (avisos de problemas) e a viabilização do ambiente como o método utilizado para auxiliar e mitigar problemas envolvendo essa comunicação organizacional e dos ambientes.
<br>
Em minha divisão do projeto, eu fui o principal desenvolvedor das funcionalidades envolvendo o banco de dados NoSQL utilizado e o lado BackEnd do mesmo: o Firebase (Ex: Autenticação, Agendamento, Reportes, Calendário, Viabilização, Dashboard, Perfil)
<br>
Além disso, eu auxiliei e fiz desenvolvimneto dos Diagramas de Caso de Uso, Atividade, de Objeto/Classe, Sequência e da documentação do sistema
</p>
<div class="flex">
<img src="images/scgapt.png" alt="">
</div>
</div>
</section>
<section class="especialidades" id="especialidades">
<div class="interface">
<h2 class="titulo">PROPRIEDADES DO <span>PROJETO </span></h2>
<div class="flex">
<div class="especialidades-box" id="backend">
<i class="bi bi-database"></i>
<h3>Desenvolvimento BackEnd e de banco</h3>
<p>Banco de dados: Não relacional (NoSQL ou Not only SQL) Firebase (especificamente as ferramentas Firestore, Realtime Database e Storage)
<br>
Linguagem: PHP e seu framework Laravel para o backend em especial da conexão dos usuários (Login, Cadastro, Esqueci senha, controle de sessão, etc.)
</p>
</div>
<div class="especialidades-box" id="frontend">
<i class="bi bi-code-square"></i>
<h3>Desenvolvimento Web <br> e Client-Side</h3>
<p> Foi utilizado especialmente o HTML (HyperText Markup Language), CSS (Cascading Style Sheet) e JS (JavaScript) para o desenvolvimento respectivo da estrutura, estilização e interação dinâmica do sistema e das ações dele
<br>
<p>De framework existe o Bootstrap (Framework CSS) e de APIs o FullCalendar (para uma funcionalidade que envolve calendários) e o DialogFlow (o suporte do chatbot)</p>
</div>
<div class="especialidades-box" id="edition">
<i class="bi bi-pen"></i>
<h3>Outros utilitários</h3>
<p>Aplicativo Astah (para diagramação), Figma (prototipação inicial), Gimp (edição de imagens), Firebase Authentication (autenticação de usuários)</p>
</div>
</div>
</div>
</section>
<section class="portfolio" id="portfolio">
<div class="interface">
<h2 class="titulo">IMAGENS DO <span>PROJETO.</span></h2>
<div class="flex">
<!--1920 x 6137-->
<div class="img-port" id="Meta" style="background-image: url(images/scga1.jpg)">
<a href="https://github.com/GustavoPereira-Dev/SCGA" target="_blank"> <div class="overlay" > Autenticação e Dashboard </div> </a>
</div>
<div class="img-port" id="SCGA" style="background-image: url(images/scga2.jpg)">
<a href="https://github.com/GustavoPereira-Dev/SCGA" target="_blank"> <div class="overlay" > Agendamento e Perfil </div> </a>
</div>
<div class="img-port" id="mini-projects" style="background-image: url(images/scga3.jpg)">
<a href="https://github.com/GustavoPereira-Dev/SCGA" target="_blank"> <div class="overlay" > Mapeamento, Reporte e Suporte </div> </a>
</div>
</div>
</div>
</section>
<section class="topo-do-site" id="teste">
<div class="interface">
<div class="txt-topo-site">
<h2 class="titulo"> TELAS</h2>
<div class="flex">
<span></span>
<p><span>Homepage:</span> Nessa tela temos resumidamente a introdução do sistemas, seus objetivos, clientes (público-alvo), propósitos, sobre nós, opinião dos instrutores e entre outros, além de a imagem nos mostrar que o site tem modo claro ou escuro pelo ícone da lua
<br>
<br>
<span>Autenticação: </span> Clicando em um dos botões de Cadastro ou Login, entramos em uma das telas de autenticação, as quais cada uma tem seu objetivo descrito no nome e o estilo visto na próxima imagem, sendo que todo esse sistema foi feito utilizando o aglomerado da funcionalidades do Firebase (FireStore, Authenticator, Realtime, Storage)
<br>
<br>
<span>Dashboard: </span>Fazendo login na conta do usuário, dependendo de que topologia o mesmo tem (aluno, professor ou técnico) temos algumas diferenças em cada tela, entretanto, só para amostra a tela escolhida para mostrar agora foi a do professor. assim vemos a apresentação do dashboard ao usuário, cards com funcionalidades principais do tipo de usuário em específico, uma sidebar no canto esquerdo mostrando mais funcionalidade, cada uma com seu ícone e no canto superior direito temos um ícone de calendário com o fundo azul, que tem o cronograma de hoje do usuário, seja ele aluno, professor ou técnico e abaixo o ícone de robô que serve como o chatbot (pequeno suporte) para o sistema que foi feito utilizando o DialogFlow
<br>
<br>
<span>Profile: </span>Seguindo a sequência das funcionades descritas no dashboard de cima para baixo, temos a tela de Perfil, com a opção do usuário alterar a imagem, email, nome e senha
<br>
<br>
<span>Calendário: </span>No ícone de calendário, temos um próprio para cada topologia/usuário, utilizando a API Fullcalendar do JS, em que o mesmo pode ir passando os e meses vendo os agendamentos envolvendo sua topologia (Visualização pessoal) e também ver a geral de todos os outros usuários (Visualização Geral), com ambas as opções estando no select abaixo do título da funcionalidade
<br>
<br>
<span>Agendamento: </span>O Agendamento é por onde apenas os Professores e Técnicos o acessam, por sua necessitade seja de agendar um horário para utilizar a sala para aula ou para manuntenção dos dispositivos respectivamente, assim alguns dos dados pedidos para o agendamento do técnico não se relaciona totalmente com o do professor, como é o caso Classe e Disciplina. Mais abaixo podemos ver os agendamentos que o usuário fez, que por sua está em anteriores para demonstra o estilo de cada lista da tabela, mas que por padrão se inicia-se com os próximos agendamentos, podendo-o mudar pelo select acima da tabela e do subtitúlo
<br>
<br>
<span>Cronograma: </span>No cronograma, local onde pode ser acessado pelo professor e técnico pelo link abaixo do título do agendamento, temos algo mais englobado, como no caso do calendário, entretanto com o filtro visto (atual e anterior) no agendamento e com a adição de uma tabela para aulas (professor) e manuntenções (técnico)
<br>
<br>
<span>Reporte de Problmas: </span>Como um auxiliar para o planejamento de agendamento e também para o Ambiente Organizacional da Unidade (enfoque principal do projeto), junto com o âmbito de agendamento também temos um pequeno sistema de reportar problemas nos ambientes de estudo (laboratórios e salas), com o objetivo principal de melhorar a comunicação geral do usuários da ETEC caso ocorra alguma ocorrência de problemas nos computadores dos labs, mitigando possíveis dores de cabeça tanto para o professor quanto ao aluno. Ao meio, vemos uma lista dos reportes feitos por um usuário, que pode editá-las ou também acrescentar uma nova no canto inferior direito (símbolo +), ou caso queira averiguar se o seu problema já foi reportado, filtrá-los pelo ícone de filtro no canto superior direito (lembrando que o técnico poderá ver esse reporte, e se caso for resolvido, marcar a mesma como resolvido)
<br>
<br>
<span>Mapeamento e Viabilização: </span>Em mapeamento, primeiro é possível ver o jogo de cores do tema escuro e segundo temos uma imagem do mapa da unidade, sendo uma outra alternativa para o usuário visualizá-lo sem precisar ficar descendo a barra na tela inicial do site. Logo após, temos a principal funcionalidade dela, que foi implementada por mim após o fim do TCC devido a falta de tempo: A Viabilização dos Ambientes (tornar mais palpável a visualização de cada ambiente de estudo e seus recursos no geral). Nela os usuários podem visualizar os recursos de cada anexo, laboratório de informática ou sala (cadeiras, PCs, Apps, SO, etc) com a ajuda geral da comunidade de professores e técnicos para atualizar esses recursos assim que necessário
</p>
</div>
</div>
</section>
</main>
<footer>
<div class="interface">
<div class="line-footer">
<div class="flex">
<div class="logo-footer">
<img src="images/logo1.png" id="img_footer" alt="logo GPa">
</div>
<div class="btn-social">
<a href="https://github.com/GustavoPereira-Dev"> <button> <i class="bi bi-github"></i></button></a>
<a href="https://www.linkedin.com/in/gustavo-pereira-834313260/"> <button> <i class="bi bi-linkedin"></i></button></a>
<a href="https://linktr.ee/gustavohenriquepereira"> <button> <i class="bi bi-link-45deg"></i></button></a>
<a href="https://www.hackerrank.com/profile/gustavopereira81"> <button> <i class="bi bi-award"></i></button></a>
<a href="https://dio.me/users/gustavohenrique10002"> <button> <i class="bi bi-star"></i></button></a>
</div>
</div>
</div>
<div class="line-footer borda">
<p><i class="bi bi-envelope-fill"></i><a href="mailto:gustavopereiradev53@gmail.com">gustavopereiradev53@gmail.com </a></p>
</div>
</div>
</footer>
</body>
</html>