Merge pull request #6 from leomurca/release/v0.3

Release/v0.3

bibliography.bib

@@ -0,0 +1,53 @@
+@book{nielsen93,
+  title = {Usability Engineering},
+  author = {Jakob Nielsen},
+  isbn = {0125184069},
+  year = {1993},
+  publisher = {Academic Press, Inc.},
+  keywords = {usability}
+}
+
+@book{saffer2013,
+	title = {Microinteractions},
+  author = {Dan Saffer},
+  isbn = {9781491945926},
+  year = {2013},
+  publisher = {O'Reilly Media, Inc.},
+  keywords = {microinteractions}
+}
+
+@book{pragmatic-programmer,
+  author = {Andrew Hunt and David Thomas},
+  title = {The Pragmatic Programmer: Your Journey to Mastery},
+  year = {1999},
+  publisher = {Addison-Wesley},
+  isbn = {978-0201616224},
+}
+
+@online{git-flow,
+  title = {Git Flow: A successful Git branching model},
+  author = {Vincent Driessen},
+  year = {2010},
+  url = {https://nvie.com/posts/a-successful-git-branching-model/},
+  urldate = {2024-03-21},
+}
+
+@report{data-governance-in-uk-schools,
+  author = {Louise Hooper and Sonia Livingstone and Kruakae Pothong},
+  title = {Problems with data governance in UK schools: the cases of Google Classroom and ClassDojo},
+  institution = {Digital Futures Commission (DFC)},
+  year = {2022},
+  type = {Case Study Report},
+  month = {August},
+}
+
+@online{gafams-brazil-usage,
+  title = {Mapeamento das instituições públicas de ensino superior brasileiras que 
+	utilizam ou nao alguma solucao das GAFAMS(Google, Apple, Facebook, Amazon, Microsoft)},
+  author = {Observatório Educação Vigiada},
+  year = {2024},
+  url = {https://educacaovigiada.org.br/pt/mapeamento/brasil/},
+  urldate = {2024-03-30},
+}
+
+

main.tex

@@ -1,9 +1,14 @@
 \documentclass[12pt]{article}
 
+\usepackage{csquotes}
 \usepackage{template/sbc}
 \usepackage{graphicx,url}
 \usepackage{float}
+\usepackage{hyperref}
 \usepackage[brazil]{babel}   
+\usepackage[backend=biber, style=numeric, sorting=ynt]{biblatex}
+\addbibresource{bibliography.bib}
+
 
 \graphicspath{ {./images/} }
      
@@ -15,7 +20,7 @@
 
 \address{
   Instituto Federal de Educação, Ciência e Tecnologia de Minas Gerais (IFMG) \\
-  Campus Sabará | 34.590|390 – Sabará – MG – Brasil
+  Campus Sabará | 34.590-390 | Sabará | MG | Brasil
   \email{leo@leomurca.xyz, carlos.junior@ifmg.edu.br}
 }
 
@@ -24,14 +29,18 @@
 \maketitle
 
 \begin{abstract}
-	Hello world!
-	This meta-paper describes the style to be used in articles and short papers
-	for SBC conferences. For papers in English, you should add just an abstract
-	while for the papers in Portuguese, we also ask for an abstract in
-	Portuguese (``resumo''). In both cases, abstracts should not have more than
-	10 lines and must be in the first page of the paper..
+	TODO
 \end{abstract}
 
+\input{sections/introducao.tex}
+\input{sections/referencial-teorico.tex}
 \input{sections/metodologia.tex}
+\input{sections/o-if-salas.tex}
+\input{sections/conclusao.tex}
+\input{sections/consideracoes-finais.tex}
+\input{sections/agradecimentos.tex}
+
+
+\printbibliography
 
 \end{document}

sections/agradecimentos.tex

@@ -0,0 +1,4 @@
+\section{Agradecimentos}
+A Deus, a minha família, à minha companheira Mariana Lisboa, à meus amigos de faculdade, 
+ao IFMG Campus Sabará, ao professor orientador Carlos Alberto Severiano Junior e ao colega 
+Arthur Terozendi, muito obrigado!

sections/conclusao.tex

@@ -0,0 +1,22 @@
+\section{Conclusão}
+A implementação do TCC IF Salas, focada na criação de um MVP para uma plataforma de ensino 
+exclusiva do Instituto Federal de Minas Gerais (IFMG), trouxe resultados promissores que apontam 
+para o potencial da ferramenta em atender às necessidades educacionais da instituição. O MVP, apesar 
+de ainda não estar em produção, foi desenvolvido com sucesso e passou por uma série de testes que 
+validaram suas principais funcionalidades, sempre com um olhar atento à usabilidade.
+
+Um dos principais resultados foi a validação da arquitetura técnica do IF Salas, especialmente em 
+termos de usabilidade. O desenvolvimento inicial demonstrou que a plataforma pode suportar um 
+ambiente de aprendizado dinâmico e interativo, com uma interface intuitiva e fácil de navegar. 
+
+Além disso, a implementação do MVP proporcionou insights valiosos através de feedbacks iniciais de 
+alunos e professores que participaram dos testes. Eles destacaram a facilidade de uso da interface 
+e a intuitividade das funcionalidades. A plataforma conseguiu criar um ambiente propício para a 
+postagem e submissão de atividades, com uma curva de aprendizado mínima, o que atende aos princípios 
+de usabilidade de Nielsen.
+
+Em resumo, a implementação do MVP do IF Salas mostrou que a plataforma tem grande potencial para 
+transformar a experiência educacional no IFMG, com foco na usabilidade. Os resultados obtidos 
+indicam que, com alguns ajustes baseados nos feedbacks dos usuários, o IF Salas pode evoluir para 
+uma solução robusta e amplamente adotada pela comunidade acadêmica do IFMG, proporcionando uma 
+experiência de ensino a distância eficiente e intuitiva.

sections/consideracoes-finais.tex

@@ -0,0 +1,30 @@
+\section{Considerações finais}
+
+A implementação do IF Salas revelou-se uma iniciativa de grande potencial para transformar 
+a educação no Instituto Federal de Minas Gerais (IFMG). A criação do MVP trouxe resultados 
+positivos e valiosos insights, validando a viabilidade técnica e a aceitação pelos usuários. 
+Com uma interface intuitiva e funcionalidades que atendem às necessidades de alunos e professores, 
+o IF Salas tem tudo para se tornar uma plataforma essencial no ambiente acadêmico.
+
+Embora os resultados iniciais sejam promissores, há várias áreas onde o IF Salas pode ser aprimorado 
+e expandido. Futuras iterações do projeto podem incluir a integração com outras ferramentas educacionais 
+e plataformas de gestão acadêmica para oferecer uma experiência mais coesa e abrangente aos usuários. 
+A incorporação de tecnologias de inteligência artificial e aprendizado de máquina também pode personalizar 
+a experiência de aprendizado, oferecendo recomendações de conteúdo e atividades com base no desempenho 
+e interesses dos alunos. Há também a possibilidade de expansão da plataforma para outros clientes, como 
+clientes mobile (Android e IOS).
+
+Além disso, o desenvolvimento de ferramentas de análise avançada de dados pode fornecer insights detalhados 
+sobre o desempenho dos alunos, permitindo intervenções mais eficazes e personalizadas por parte dos professores. 
+Também é crucial focar em aprimorar a acessibilidade da plataforma para garantir que todos os alunos, 
+independentemente de suas habilidades, possam utilizá-la de maneira eficaz.
+
+O IF Salas abre também um vasto campo de possibilidades para inovação na educação. A plataforma pode servir 
+como um laboratório para testar novas metodologias de ensino e tecnologias emergentes, sempre com o foco em 
+melhorar a experiência de aprendizado dos alunos. Além disso, o uso de dados e análises avançadas pode 
+transformar a forma como o desempenho acadêmico é monitorado e aprimorado, proporcionando uma educação mais 
+personalizada e eficaz.
+
+Com um foco contínuo na usabilidade, segurança e inovação, o IF Salas tem o potencial de se tornar uma referência 
+em plataformas de ensino, proporcionando uma experiência educacional rica, segura e adaptável às necessidades de 
+cada aluno e professor do IFMG.

sections/introducao.tex

@@ -0,0 +1,47 @@
+\section{Introdução}
+
+A pandemia da COVID-19 trouxe diversos problemas para a socidade em que vivemos, em específico à educação. 
+Discentes e docentes vivenciaram uma gama de problemas como: perda de aprendizado, desigualdade digital, 
+adaptação ao ensino remoto, dentre outros. De frente à essa varidade de problemas, é importante ressaltar a 
+adaptação ao ensino remoto.
+
+As instituições de ensino, com o objetivo de se adaptar à esse cenário de ensino remoto, foram em busca de 
+ferramentas para suprirem a necessidade de comunicação e ensino entre alunos e professores. Ferramentas como 
+\textit{Google Classroom, Microsoft Teams e Moodle}, foram muito utilizadas para suprirem essa necessidade. Porém, à que custo?
+
+O relatório \textit{Problems with data governance in UK schools: the cases of Google Classroom and ClassDojo} 
+\cite{data-governance-in-uk-schools} realizado pela Digital Futures Comission (DFC) constatou que serviços como 
+o \textit{Google Classroom} e \textit{ClassDojo} utilizam de maneira indireta os dados de alunos e professores 
+que fazem uso de suas plataformas. O próprio relatório cita que é quase impossível descobrir quais dados são 
+coletados por essas EdTechs. Por exemplo: as políticas do \textit{Google Workspace for Education} mostram os vários 
+tipos de dados coletados pela empresa durante o uso do \textit{Google Classroom} por crianças. Uma vez combinados, 
+isto é suficiente para construir um perfil completo de cada criança, incluindo a sua identidade, localização, 
+biometria, preferências e capacidades. É quase impossível descobrir a natureza e a extensão desta recolha de dados.
+
+A crescente dependência das universidades brasileiras em relação às soluções das GAFAMS (Google, Apple, Facebook, Amazon, Microsoft) 
+é também motivo de preocupação devido à possível perda de controle sobre dados sensíveis e estratégicos. Segundo o 
+\textit{mapeamento das instituições públicas de ensino superior brasileiras que utilizam ou nao alguma solucao das GAFAMS}
+\cite{gafams-brazil-usage} realizado pelo \textit{Observatório Educação Vigiada}, 72\% das instituições brasileiras 
+utilizam soluções da Google e 8\% optam pelas soluções da Microsoft, o que demonstra um claro domínio dessas 
+empresas estrangeiras no cenário educacional do país. Essa concentração em plataformas controladas por grandes 
+corporações estrangeiras levanta questões sobre a privacidade, segurança e soberania dos dados das instituições de 
+ensino, destacando a importância de buscar alternativas que promovam a autonomia tecnológica e a proteção dos interesses nacionais.
+
+Além do cenário da fragilidade de dados, há também a questão da usabilidade do sistema. \textit{Google Classroom} e 
+\textit{Microsoft Education}, foram pensados para atender o maior número de casos de uso possíveis, o que pode gerar 
+um efeito colateral em não suprir os casos de uso específicos das instituições de ensino que os utilizam. Podemos 
+explicitar um desses casos de uso específico como o cenário onde uma atividade atribuída aos alunos pertence à mais 
+de uma disciplina, as chamadas atividades interdisciplinares. Nesse cenário, todo o processo de entrega da atividade 
+é feito de maneira duplicada. Não somente os casos de uso por parte dos discentes sofrem com a generalização das 
+funcionalidades de tais sistemas, mas principalmente os docentes. Utilizar uma ferramenta que atende às necessidades 
+específicas e que consequentemente facilita a gestão de aprendizado dos discentes pelos docentes é algo de grande 
+valor para a sociedade acadêmica.
+
+Tendo em vista a proteção dos dados das pessoas, a melhora da usabilidade e a flexibilidade de evolução e adaptação 
+das funcionalidades de uma plataforma de ensino para o IFMG, propõe-se a criação do IF Salas: uma plataforma de ensino 
+para o IFMG de código aberto. O IF Salas tem como objetivo suprir todas as necessidades citadas anteriormente, além de 
+possibilitar a auditoria de todo o código fonte por qualquer pessoa ou instituição interessada, uma vez que seu código 
+fonte será disponibilizado publicamente. É importante exaltar que todos os objetivos de melhoria de usabilidade em relação 
+às outras plataformas de ensino foram pensadas com base em dados de pesquisas realizadas com docentes e discentes do IFMG, 
+o que contribui para a relevância da usabilidade dessa plataforma para a comunidade acadêmica, uma vez que é criado um senso 
+de colaboração na instituição de ensino.

sections/metodologia.tex

@@ -1,7 +1,7 @@
 \section{Metodologia}
 
 O desenvolvimento deste trabalho ocorreu por meio da utilização dos recursos metodológicos descritos
-desde a subseção 3.2 até a 3.7, presentes a seguir.
+desde a subseção \ref{subsec:prototipacao-do-layout} até a \ref{subsec:coleta-de-feedbacks}, presentes a seguir.
 
 \subsection{Ferramentas utilizadas}
 
@@ -40,68 +40,58 @@ desde a subseção 3.2 até a 3.7, presentes a seguir.
 
 \end{itemize}
 
-\subsection{Definição da proposta de trabalho}
-Inicialmente, foi discutido diversas propostas para este trabalho de conclusão de curso, sendo elas:
-
-\begin{itemize}
-	\item{Gerenciador de quantidade de pessoas em ambientes internos utilizando dispositivos Bluetooth;}
-	\item{Plataforma de Ensino para os Institutos Federais;}
-\end{itemize}
-
-Devido à complexidade e custo de desenvolvimento da primeira proposta citada acima, foi escolhida segunda proposta. A prerrogativa
-da plataforma ser de código aberto teve uma forte contribuição para sua escolha.
-
 \subsection{Prototipação do layout}
+\label{subsec:prototipacao-do-layout}
 
 Nesta etapa foram feitos protótipos das telas principais do sistema: Página Inicial, Informações, Calendário Acadêmico, Login e Sala
 de Aula.
 
 \begin{figure}[ht]
 	\centering
-	\includegraphics[width=.7\textwidth]{login}
+	\includegraphics[width=1\textwidth]{login}
 	\caption{Login}
 \end{figure}
 
 \begin{figure}[ht]
 	\centering
-	\includegraphics[width=.7\textwidth]{pagina-inicial}
+	\includegraphics[width=1\textwidth]{pagina-inicial}
 	\caption{Página inicial}
 \end{figure}
 
 \begin{figure}[ht]
 	\centering
-	\includegraphics[width=.7\textwidth]{turma-detalhes-comunicados}
+	\includegraphics[width=1\textwidth]{turma-detalhes-comunicados}
 	\caption{Sala de aula – Comunicados}
 \end{figure}
 
 \begin{figure}[ht]
 	\centering
-	\includegraphics[width=.7\textwidth]{turma-detalhes-atividades}
+	\includegraphics[width=1\textwidth]{turma-detalhes-atividades}
 	\caption{Sala de aula – Atividades}
 \end{figure}
 
 \begin{figure}[ht]
 	\centering
-	\includegraphics[width=.7\textwidth]{turma-detalhes-pessoas}
+	\includegraphics[width=1\textwidth]{turma-detalhes-pessoas}
 	\caption{Sala de aula – Pessoas}
 \end{figure}
 
+\begin{figure}[ht]
+	\centering
+	\includegraphics[width=1\textwidth]{atividade-detalhes.png}
+	\caption{Detalhes de atividade}
+\end{figure}
+
 \vfill
 \cleardoublepage{}
 
-\begin{figure}[ht]
-	\centering
-	\includegraphics[width=.7\textwidth]{atividade-detalhes.png}
-	\caption{Detalhes de atividade}
-\end{figure}
-
 A estrutura lógica das telas prototipadas foram baseadas no sistema \textit{Google Classroom} visando
 a facilidade de uso por parte dos usuários, uma vez que a ferramenta é bem difundida no ambiente acadêmico do IFMG\@.
 
 \subsection{Codificação do protótipo}
 
 Após a prototipação das telas principais, iniciou-se o desenvolvimento da aplicação utilizando uma abordagem proposta
-por \textit{Andrew Hunt} e \textit{David Thommas} em seu livro \textit{O Programador Pragmático} chamada de \textit{Projéteis Luminosos}.
+por Andrew Hunt e David Thommas em seu livro O Programador Pragmático \cite{pragmatic-programmer} chamada de \textit{Projéteis Luminosos}.
 Essa abordagem é uma analogia à atiradores de armas de fogo que utilizam projéteis luminosos. Esses projéteis são carregados a intervalos
 no pente de munição com as balas comuns. Quando disparados, seu fósforo se acende e deixa uma trilha pirotécnica da arma até o que quer 
 que atinjam. Se os projéteis estiverem atingindo o alvo, as balas comuns também estarão. O feedback é imediato e, já que eles operam no 
@@ -109,7 +99,7 @@ mesmo ambiente da munição real, os efeitos externos são reduzidos.
 
 Os projéteis luminosos no contexto do desenvolvimento do IF Salas foi necessário para validar como certos fluxos, antes prototipados
 no Figma, funcionariam na prática. Essa abordagem foi escolhida pelo fato do IF Salas ser algo que nunca foi construído e utilizado
-anteriormente no contexto do IFMG Sabará. Ou seja, alguns requisitos pareciam ainda um pouco obscuros e, não tinhamos uma ideia clara 
+anteriormente no contexto do IFMG Sabará. Ou seja, alguns requisitos ainda pareciam incognitos e, não tinhamos uma ideia nitida
 de como o sistema funcionaria na prática. Mesmo que \textit{Google Classroom} tenha sido utilizado anteriormente em alguns contextos,
 a ferramenta ainda era de propósito geral, e certos fluxos comuns não foram cobertos pela ferramenta, como por exemplo todo o fluxo
 de criação, atribuição e correção de atividades interdisciplinares.
@@ -123,7 +113,7 @@ desenvolvimento web utilizando o ecossistema React. Dentre essas práticas estã
 	\item Context API para gerenciamento de estado global;
 \end{itemize}
 
-Em relação à manutenção e versionamento de código, foi adotada a metodologia Git Flow com adaptação ao contexto do IF Salas. 
+Em relação à manutenção e versionamento de código, foi adotada a metodologia Git Flow \cite{git-flow} com adaptação ao contexto do IF Salas. 
 O Git Flow é uma metodologia de desenvolvimento de software baseada em Git que define um conjunto de regras e práticas para 
 gerenciar o fluxo de trabalho de uma equipe de desenvolvimento. Essa abordagem é baseada em dois ramos principais: master e develop. 
 O ramo master contém o código em produção, enquanto o ramo develop é usado para integração contínua e desenvolvimento de novas funcionalidades. 
@@ -141,15 +131,27 @@ uma vez que não houve a implantação do software em ambiente de produção. Ob
 
 \begin{figure}[ht]
 	\centering
-	\includegraphics[width=.7\textwidth]{gitflow.jpg}
+	\includegraphics[width=1\textwidth]{gitflow.jpg}
 	\caption{Git Flow Adaptado}
 \end{figure}
 
 
 \subsection{Implantação do software}
+\label{subsec:implantacao-do-software}
 
 Além da estrutura git descrita anteriormente, foi criada uma automação que é ativada quando qualquer código for integrado ao ramo principal (master). 
 Essa automação é um pipeline que é executado utilizando a ferramenta Github Actions, na qual a aplicação do IF Salas é disponibilizada de forma 
-online no domínio \url{htps://ifsalas.xyz}. O mesmo pipeline é disparado quando qualquer código é integrado ao ramo de desenvolvimento (development).
+online no domínio \url{https://ifsalas.xyz}. O mesmo pipeline é disparado quando qualquer código é integrado ao ramo de desenvolvimento (development).
 Entretanto, a aplicação será disponibilizada de forma online no domínio \url{https://dev.ifsalas.xyz} para fins de testes.
 
+\subsection{Coleta de feedbacks}
+\label{subsec:coleta-de-feedbacks}
+
+A coleta de feedbacks foi feita de maneira informal, seguindo uma abordagem holística e participativa, envolvendo tanto discentes quanto docentes 
+para garantir uma visão abrangente da usabilidade do software. Inicialmente, foi estabelecido um ambiente acolhedor e receptivo, incentivando os usuários 
+a compartilharem suas experiências de forma franca e aberta. Foi organizado também sessões de demonstração, onde os participantes puderam experimentar o software 
+em situações simuladas de uso, como visualizar atividades avaliativas, por exemplo. Durante essas interações, foi observado atentamente as reações dos 
+usuários, seus padrões de navegação e eventuais dificuldades encontradas ao utilizar o IF Salas. A coleta de feedbacks também se estendeu para além 
+dos ambientes controlados, aproveitando oportunidades informais de conversas durante o dia a dia acadêmico. Essa abordagem multifacetada permitiu uma 
+compreensão detalhada das necessidades e expectativas dos usuários em relação à usabilidade do IF Salas, fornecendo insights valiosos para refinamentos 
+futuros e melhorias contínuas.

sections/o-if-salas.tex

@@ -0,0 +1,347 @@
+\section{O IF Salas}
+
+A proposta do IF Salas é ser uma plataforma inovadora de gerenciamento de aprendizagem projetada para atender às necessidades 
+específicas dos institutos federais, oferecendo suporte tanto para a modalidade de ensino híbrido quanto para a educação a 
+distância (EAD). Como um sistema de código aberto, o IF Salas ofereceria flexibilidade, personalização e segurança, permitindo que 
+instituições educacionais adaptem a plataforma de acordo com suas próprias necessidades e requisitos. Com uma variedade 
+de recursos robustos, incluindo ferramentas de colaboração, avaliação, acompanhamento do progresso do aluno e comunicação 
+integrada, o IF Salas permitirá educadores a fornecer experiências de aprendizagem envolventes e eficazes. 
+
+Na presente seção, serão examinados os casos de uso desenvolvidos para o IF Salas, analisando como os princípios 
+de Usabilidade \cite{nielsen93} e Microinterações \cite{saffer2013} se manifestam em cada contexto específico. Este estudo visa 
+destacar a importância da experiência do usuário (UX) na concepção e implementação eficaz de sistemas de gerenciamento de 
+aprendizagem, proporcionando insights valiosos sobre como esses conceitos influenciam diretamente a interação e a satisfação do 
+usuário dentro da plataforma IF Salas.
+
+
+É importante ressaltar que há 2 tipos de usuários no IF SALAS: professor e aluno. E cada tipo de usuário tem funcionalidades
+especificas. Logo abaixo estao as funcionalidades especificas do IF SALAS segmentado por tipo de usuário:
+
+\vfill
+\cleardoublepage{}
+
+% Please add the following required packages to your document preamble:
+% \usepackage{graphicx}
+\begin{table}[]
+\resizebox{\textwidth}{!}{%
+\begin{tabular}{|c|l|}
+\hline
+\textbf{Tipo de usuário} &
+  \multicolumn{1}{c|}{\textbf{Funcionalidades}} \\ \hline
+Professor &
+  \begin{tabular}[c]{@{}l@{}}Listar atividades para corrigir em ordem decrescente de data;\\ Contabilizar atividades quantidade de atividades corrigidas e pendentes;\\ Iniciar videoconferência ao clique de um botão;\\ Customizar o provedor da videoconferência;\\ Listar próximas atividades a serem entregues pelos alunos;\\ Disponibilizar e editar horários de atendimento das disciplinas;\\ Postar comunicados para a turma;\\ Disponiblizar atividades para os alunos;\\ Lançar notas das atividades;\end{tabular} \\ \hline
+Aluno &
+  \begin{tabular}[c]{@{}l@{}}Listar turmas que está inscrito;\\ Listar próximas atividades a serem entregues da mais recente para mais distante;\\ Visualizar lista de comunicados dos professores;\\ Listar próximas atividades a serem entregues;\\ Visualizar horários de atendimento das disciplinas;\\ Visualizar detalhes de uma atividade, anexar arquivos a entrega e entregar a atividade.\end{tabular} \\ \hline
+Ambos &
+  \begin{tabular}[c]{@{}l@{}}Listar informações úteis;\\ Acessar Calendário Acadêmico;\\ Acessar e editar informações do perfil;\\ Listar atividades disponibilizadas segmentadas por Provas e Trabalhos;\\ Listar pessoas que participam de cada turma;\end{tabular} \\ \hline
+\end{tabular}%
+}
+\caption{Funcionalidades por tipo de usuário}
+\label{tab:funcionalidades}
+\end{table}
+
+
+\vfill
+\cleardoublepage{}
+
+\subsection{Página inicial (Não logado)}
+A página inicial não logada do IF Salas é um exemplo claro de design intuitivo e centrado no usuário, conforme os princípios de usabilidade de 
+Jakob Nielsen. O layout da página começa com um título grande alinhado à esquerda. Este título é destacado com uma fonte grande e legível, 
+garantindo que o propósito da plataforma seja imediatamente compreendido pelos visitantes.
+
+Logo abaixo do título, há uma descrição detalhada que explica os principais benefícios e funcionalidades do IF Salas. Esta descrição é clara e 
+direta, organizada em parágrafos curtos para facilitar a leitura e a compreensão rápida, atendendo ao princípio da visibilidade do status do sistema.
+
+Abaixo da descrição, estão dois botões lado a lado. O primeiro botão oferece a opção de login para usuários existentes, enquanto o segundo permite 
+que novos usuários se cadastrem na plataforma. Esses botões são bem destacados e posicionados de forma acessível, seguindo o princípio de controle 
+e liberdade do usuário, permitindo que eles naveguem facilmente e tomem ações conforme necessário.
+
+À direita da tela, há uma screenshot da plataforma logada como um professor. Esta imagem  mostra a interface de forma prática e atraente, oferecendo 
+uma visão realista das funcionalidades disponíveis. A imagem está posicionada de maneira que equilibre o layout visual, mantendo a página organizada 
+e esteticamente agradável, o que atende aos princípios de consistência e padrões, além de design estético e minimalista.
+
+O design limpo e minimalista ajuda a focar a atenção nos elementos mais importantes, evitando distrações e sobrecarga cognitiva. 
+\begin{figure}[ht]
+	\centering
+	\includegraphics[width=1\textwidth]{pagina-inicial-nao-logada.png}
+	\caption{Login}
+\end{figure}
+
+\subsection{Login}
+
+Ao acessar a tela de login, o usuário é recebido com um formulário claro e conciso, onde pode
+inserir suas credenciais com facilidade. Um foco automático também é aplicado ao campo de e-mail quando
+a tela é acessada, facilitando uma entrada mais rápida das credenciais. Feedbacks instantâneos são fornecidos
+durante o processo de submissão de dados, alertando os usuários sobre qualquer erro cometido, enquanto a opção 
+de recuperação de senha está facilmente acessível para aqueles que precisam de assistência adicional. 
+O layout responsivo também garante uma experiência consistente em diferentes dispositivos.
+
+\begin{figure}[ht]
+	\centering
+	\includegraphics[width=1\textwidth]{login-implementacao}
+	\caption{Login}
+\end{figure}
+
+\subsection{Cadastro}
+
+Ao acessar a tela de cadastro, o usuário é guiado por um formulário claro e bem estruturado, que solicita 
+informações essenciais de maneira organizada e compreensível. Durante o preenchimento, feedback instantâneo 
+é fornecido para orientar os usuários, destacando campos obrigatórios e alertando sobre possíveis erros de 
+entrada de dados. Além disso, opções de validação de senha e confirmação de e-mail são implementadas 
+para garantir a precisão e segurança das informações fornecidas.
+
+\begin{figure}[ht]
+	\centering
+	\includegraphics[width=1\textwidth]{cadastro-implementacao}
+	\caption{Cadastro}
+\end{figure}
+
+\vfill
+\cleardoublepage{}
+
+\subsection{Página inicial logado (visão do professor)}
+À esquerda, temos um menu vertical que é apresentado de forma clara, destacando as opções essenciais: "Página Inicial", 
+"Informações" e "Calendário Acadêmico". Microinterações discretas, como realces ao passar o mouse sobre cada 
+item do menu, fornecem feedback instantâneo, indicando sua interatividade e facilitando a navegação do usuário. 
+No centro da tela, as turmas são exibidas com clareza e organização, cada uma identificada por uma cor única, 
+título e ano correspondente. Essa abordagem segue os princípios de Nielsen para uma identificação rápida e 
+eficiente de conteúdo. À direita, uma lista de cards de atividades é apresentada em ordem cronológica, da mais 
+próxima à data de entrega até a mais distante. Esses cards exibem detalhes essenciais, como título da atividade, 
+nome da turma, data de entrega e contagem de atividades corrigidas e pendentes, com cores correspondentes para 
+uma rápida associação visual. No topo da tela, uma toolbar personalizada recebe calorosamente o usuário logado 
+com uma mensagem de boas-vindas personalizada. Além disso, oferece acesso rápido às notificações não lidas e 
+ao perfil do usuário. O ícone de avatar, estrategicamente posicionado, permite que o usuário acesse seu perfil 
+ou faça logout através de um menu dropdown, seguindo as melhores práticas de usabilidade. Essas microinterações 
+e elementos de design harmoniosamente integrados garantem uma experiência de usuário coesa e intuitiva
+na plataforma IF Salas.
+
+\begin{figure}[ht]
+	\centering
+	\includegraphics[width=1\textwidth]{pagina-inicial-logado-professor}
+	\caption{Página inicial logado (visão do professor)}
+\end{figure}
+
+\vfill
+\cleardoublepage{}
+
+\subsection{Sala de aula - Comunicados (visão do professor)}
+
+O card fixo no topo foi projetado para garantir clareza e acessibilidade: a cor identificadora da turma no topo 
+proporciona uma rápida associação visual, seguida pelo nome da turma em destaque, oferecendo uma identificação 
+instantânea. Abaixo do avatar do professor, seu nome é apresentado ao lado, promovendo uma conexão pessoal e 
+uma experiência mais humana. As quatro abas navegáveis - "Comunicados", "Atividades", "Pessoas" e "Notas" - são 
+facilmente acessíveis e destacadas visualmente para facilitar a navegação entre as seções da sala de aula. 
+Na primeira coluna à esquerda, os cards são apresentados de forma clara e organizada, com microinterações sutis 
+que realçam a interatividade. Por exemplo, ao clicar no botão "Iniciar aula" no card da sala de aula virtual, 
+uma nova aba é aberta no Jitsi, proporcionando uma experiência de usuário contínua. Além disso, a capacidade de 
+editar o link da sala iniciada através do ícone de três pontos oferece flexibilidade ao professor. Os cards de 
+próximas atividades e horários de atendimento são igualmente interativos, permitindo a edição para garantir precisão 
+e relevância. Na segunda coluna, a caixa de texto para escrever comunicados é projetada para incentivar a comunicação 
+eficaz, enquanto os comunicados publicados são exibidos em cards individuais, facilitando a leitura e acompanhamento. 
+Essas microinterações cuidadosamente integradas, aliadas aos princípios de usabilidade de Nielsen, resultam em uma 
+tela de sala de aula online que é intuitiva, funcional e centrada no usuário, promovendo uma experiência de aprendizado 
+aprimorada para todos os envolvidos no IF Salas.
+
+\begin{figure}[ht]
+	\centering
+	\includegraphics[width=1\textwidth]{sala-de-aula-comunicados-professor}
+	\caption{Sala de aula - Comunicados (visão do professor)}
+\end{figure}
+
+\vfill
+\cleardoublepage{}
+
+\subsection{Sala de aula - Atividades (visão do professor)}
+Além do card fixo que fornece informações essenciais sobre a turma, um botão "Criar atividade", estrategicamente 
+posicionado à direita da tela, convida o professor a iniciar o processo de criação de uma nova atividade de forma 
+direta e imediata, destacando a funcionalidade de forma proeminente. Abaixo deste botão, a tela é cuidadosamente 
+dividida em duas seções: "Provas" e "Trabalhos". Na seção "Provas", uma lista clara e organizada apresenta as provas 
+em aberto, exibindo de forma distintiva o título, a data de entrega e a pontuação correspondente de cada prova. Da mesma 
+forma, na seção "Trabalhos", as informações são apresentadas de maneira coerente, permitindo uma rápida identificação do 
+título, data de entrega e pontuação dos trabalhos disponíveis. Em casos de atividades atribuídas a mais de uma disciplina, 
+a apresentação de duas pontuações distintas, separadas por vírgula, promove uma compreensão clara das informações, garantindo 
+transparência e facilitando a tomada de decisões pelos usuários. Essa abordagem centrada no usuário, aliada às microinterações 
+delicadas, como realces ao passar o mouse sobre os elementos interativos e transições suaves entre as seções, promove uma 
+experiência de navegação coesa e intuitiva, elevando a usabilidade e a satisfação do usuário na plataforma.
+
+\begin{figure}[ht]
+	\centering
+	\includegraphics[width=1\textwidth]{sala-de-aula-atividades-professor}
+	\caption{Sala de aula - Atividades (visão do professor)}
+\end{figure}
+
+\vfill
+\cleardoublepage{}
+
+\subsection{Sala de aula - Pessoas (visão do professor)}
+Além do card fixo que fornece informações essenciais sobre a turma, a tela é organizada em duas seções distintas: "Docentes" 
+e "Discentes". Na primeira seção, a lista de professores é apresentada de forma clara e organizada, onde cada item exibe o 
+avatar do professor e seu nome completo ao lado. Essa apresentação permite aos usuários identificar facilmente os professores 
+responsáveis pela turma, promovendo uma comunicação eficaz e uma conexão mais pessoal entre docentes e alunos. Na segunda seção, 
+a lista de alunos segue um padrão semelhante, com o avatar de cada aluno acompanhado de seu nome completo. Essa organização 
+facilita a identificação dos colegas de classe e promove uma atmosfera de colaboração e engajamento entre os alunos. 
+
+\begin{figure}[ht]
+	\centering
+	\includegraphics[width=1\textwidth]{sala-de-aula-pessoas-professor}
+	\caption{Sala de aula - Pessoas (visão do professor)}
+\end{figure}
+
+\subsection{Sala de aula - Notas (visão do professor)}
+
+Essa aba foi projetada com foco em pequenos detalhes que fazem uma grande diferença na usabilidade e na satisfação dos professores e alunos que a utilizam.
+
+As microinterações desempenham um papel crucial na aba "Notas", fornecendo feedback imediato e relevante para ações específicas. Quando um professor atribui 
+uma nota a um aluno, uma confirmação visual instantânea, como uma mudança de cor ou a exibição de um ícone de confirmação, sinaliza que a nota foi salva com 
+sucesso. Esses pequenos indicadores garantem que o usuário está constantemente informado sobre o estado de suas ações. Além disso, ao passar o cursor sobre 
+elementos interativos, realces e animações suaves indicam a disponibilidade de ações, guiando o usuário de forma intuitiva e reduzindo a carga cognitiva.
+
+A visibilidade do status do sistema é mantida através de atualizações em tempo real, onde mudanças nas notas ou comentários são imediatamente refletidas 
+na interface. Isso garante que os usuários estejam sempre cientes do que está acontecendo. A correspondência entre o sistema e o mundo real é observada 
+na utilização de terminologias familiares e na disposição das notas em formato de grade, facilitando a adaptação dos professores ao sistema.
+
+A aba também proporciona um alto grau de controle e liberdade ao usuário, permitindo desfazer ações e corrigir erros facilmente. A consistência e os padrões 
+são mantidos com um design uniforme que segue a linha visual do IF Salas, ajudando os usuários a navegar com confiança. Para prevenir erros, a interface 
+inclui validações e confirmações, como avisos ao deixar campos obrigatórios em branco, garantindo a integridade dos dados.
+
+O design minimalista da aba, com cores suaves e tipografia clara, contribui para uma experiência visual agradável e funcional, eliminando elementos 
+desnecessários que possam distrair os usuários. Esse foco em estética e simplicidade ajuda os professores a se concentrarem nas tarefas principais de 
+maneira eficiente.
+
+
+\vfill
+\cleardoublepage{}
+
+\subsection{Página inicial logado (visão do aluno)}
+
+À esquerda da interface, um menu vertical é estrategicamente posicionado, apresentando de forma clara e organizada as opções 
+principais, como "Página Inicial", "Informações" e "Calendário Acadêmico". Essa disposição favorece uma navegação fluida e 
+direta, garantindo que os usuários possam acessar facilmente as diferentes áreas da plataforma. No centro da tela, as turmas, 
+fundamentais para a organização acadêmica, são apresentadas de forma visualmente atraente e funcional. Cada turma é distintamente 
+identificada por uma cor única, seguida do título, iniciais e os respectivos professores responsáveis. Essa representação visual 
+permite uma rápida identificação das turmas e dos docentes associados a elas, promovendo uma comunicação eficaz e uma melhor 
+organização acadêmica. À direita da tela, a lista de cards de atividades, atribuídas ao aluno logado, é apresentada de maneira 
+clara e concisa. Cada card exibe informações detalhadas sobre a atividade, como título, nome da turma, data de entrega, valor da 
+atividade e a cor identificadora da turma. As microinterações são delicadamente integradas, proporcionando realces ao passar o 
+mouse sobre os elementos interativos e transições suaves entre as seções da tela. Se uma atividade estiver associada a mais de 
+uma disciplina, as cores correspondentes são mostradas, e cada nota é apresentada de forma clara e segmentada por vírgulas. 
+Essa disposição cuidadosamente planejada e a atenção aos detalhes, seguindo os princípios de Nielsen e as técnicas de Saffer, 
+contribuem para uma experiência de usuário coesa, intuitiva e altamente satisfatória na plataforma IF Salas.
+
+\begin{figure}[ht]
+	\centering
+	\includegraphics[width=1\textwidth]{pagina-inicial-logado-aluno}
+	\caption{Página inicial logado (visão do aluno)}
+\end{figure}
+
+\vfill
+\cleardoublepage{}
+
+\subsection{Sala de aula - Comunicados (visão do aluno)}
+O design do card principal é meticulosamente elaborado, começando com a cor distintiva da turma no topo, seguida pelo título 
+proeminente da turma. Abaixo do avatar do professor, seu nome é apresentado ao lado, facilitando uma conexão visual imediata 
+entre aluno e professor. Três abas navegáveis - "Comunicados", "Atividades" e "Pessoas" - são claramente dispostas, permitindo 
+uma navegação intuitiva e rápida pelos diferentes aspectos da sala de aula. Na primeira coluna à esquerda, os cards são organizados 
+de maneira coesa e acessível. O card da sala de aula virtual incorpora uma microinteração eficaz, oferecendo um botão "Entrar" 
+que permite aos alunos participarem instantaneamente de uma sala de aula no Jitsi em uma nova aba, promovendo uma experiência de 
+entrada direta e imediata. O card de próximas atividades apresenta as tarefas pendentes de forma clara e organizada, enquanto o 
+card de horários de atendimento oferece uma visão rápida e fácil dos horários disponíveis para os alunos, facilitando a comunicação 
+com o professor. Na segunda coluna, a lista de cards contendo os comunicados do professor é apresentada de forma ordenada, garantindo 
+que os alunos estejam sempre atualizados com as informações mais relevantes, seguindo uma lógica de prioridade de leitura. Essa 
+abordagem centrada no usuário, aliada às microinterações refinadas e à clareza na organização do conteúdo, resulta em uma experiência 
+de sala de aula online que é intuitiva, eficaz e altamente funcional para os usuários do IF Salas.
+
+\begin{figure}[ht]
+	\centering
+	\includegraphics[width=1\textwidth]{sala-de-aula-comunicados-aluno}
+	\caption{Sala de aula - Comunicados (visão do aluno)}
+\end{figure}
+
+\vfill
+\cleardoublepage{}
+
+\subsection{Sala de aula - Atividades (visão do aluno)}
+
+Além do card fixo mencionado anteriormente, a tela é habilmente dividida em duas seções distintas: "Provas" e "Trabalhos", 
+dispostas de forma clara e organizada uma abaixo da outra. Na primeira seção, uma lista de provas disponíveis para entrega 
+é apresentada com detalhes cruciais, incluindo título da prova, data de entrega e pontuação atribuída. Da mesma forma, na 
+segunda seção, uma lista de trabalhos em aberto é exibida, fornecendo informações claras sobre título, data de entrega e 
+pontuação associada a cada trabalho. No caso de provas ou trabalhos atribuídos a mais de uma disciplina, conhecidos como 
+trabalhos interdisciplinares, duas pontuações distintas são exibidas, separadas por vírgula, garantindo uma compreensão 
+precisa e transparente das tarefas pelos alunos. Essa abordagem cuidadosa, aliada às microinterações sutis, como realces 
+ao passar o mouse sobre as atividades e feedbacks visuais, promove uma navegação fluída e uma compreensão rápida das tarefas 
+pendentes, facilitando assim o engajamento e o progresso acadêmico na plataforma IF Salas.
+
+\begin{figure}[ht]
+	\centering
+	\includegraphics[width=1\textwidth]{sala-de-aula-atividades-aluno}
+	\caption{Sala de aula - Atividades (visão do aluno)}
+\end{figure}
+
+\vfill
+\cleardoublepage{}
+
+\subsection{Sala de aula - Pessoas (visão do aluno)}
+
+Além do card fixo que fornece informações essenciais sobre a turma, a tela é organizada em duas seções distintas: "Docentes" 
+e "Discentes". Na primeira seção, a lista de professores é apresentada de forma clara e organizada, onde cada item exibe o 
+avatar do professor e seu nome completo ao lado. Essa apresentação permite aos usuários identificar facilmente os professores 
+responsáveis pela turma, promovendo uma comunicação eficaz e uma conexão mais pessoal entre docentes e alunos. Na segunda seção, 
+a lista de alunos segue um padrão semelhante, com o avatar de cada aluno acompanhado de seu nome completo. Essa organização 
+facilita a identificação dos colegas de classe e promove uma atmosfera de colaboração e engajamento entre os alunos. 
+
+\begin{figure}[ht]
+	\centering
+	\includegraphics[width=1\textwidth]{sala-de-aula-pessoas-aluno}
+	\caption{Sala de aula - Pessoas (visão do aluno)}
+\end{figure}
+
+\vfill
+\cleardoublepage{}
+
+\subsection{Detalhes da atividade (visão do aluno)}
+
+No topo da tela, o título da atividade é enfatizado, enquanto a cor e o nome da sala de aula são exibidos lado a lado, fornecendo 
+uma identificação visual imediata. Logo abaixo, a pontuação da atividade e a data de entrega são apresentadas de forma clara e 
+legível incluindo informações detalhadas como o dia da semana, dia do mês e horário limite para entrega, garantindo uma compreensão 
+precisa dos requisitos da tarefa. Uma linha visualmente distinta marca a separação entre esses detalhes e a descrição da atividade 
+em texto rico, que fornece informações detalhadas sobre a tarefa em questão, promovendo uma compreensão completa do seu propósito e 
+objetivos. Outra linha claramente definida indica a transição para uma área interativa, onde os usuários podem facilmente arrastar e 
+soltar arquivos para anexar à atividade, uma interação que é intuitiva e fluida. Além disso, os usuários têm a opção de clicar na 
+área para selecionar e anexar arquivos, proporcionando flexibilidade e comodidade durante o processo. Após anexar um arquivo, seu 
+nome e tamanho em bytes são exibidos de forma organizada para referência do usuário, permitindo uma verificação rápida e fácil. 
+Finalmente, um botão de ação claramente identificado permite que os usuários entreguem a atividade de forma direta e sem complicações, 
+encerrando o processo de interação de maneira eficiente.
+
+\begin{figure}[ht]
+	\centering
+	\includegraphics[width=1\textwidth]{detalhes-atividade-aluno}
+	\caption{Detalhes da atividade (visão do aluno)}
+\end{figure}
+
+\vfill
+\cleardoublepage{}
+
+\subsection{Informações (visão do aluno)}
+
+A tela de Informações do IF Salas é cuidadosamente projetada para fornecer aos usuários acesso rápido e organizado a uma variedade de recursos 
+úteis e informações essenciais. A principal característica desta tela são os accordions de perguntas frequentes, que permitem aos usuários 
+expandir e contrair seções de perguntas comuns para obter respostas detalhadas de forma eficiente. Cada pergunta é apresentada de forma clara 
+e concisa, e ao clicar, os usuários podem visualizar as respostas correspondentes, facilitando a obtenção de informações relevantes de maneira 
+rápida e direta.
+
+Além dos accordions de perguntas frequentes, a tela de Informações também apresenta uma série de cards, cada um fornecendo detalhes e links 
+úteis para diferentes setores e recursos da universidade IFMG. Cada card é projetado para destacar visualmente o setor ou recurso em questão, 
+com ícones ou imagens representativas para melhorar a identificação e a compreensão. Os cards contêm informações relevantes, como detalhes 
+de contato, horários de funcionamento e links para páginas específicas ou recursos online.
+
+Essa abordagem de design facilita aos usuários encontrar rapidamente informações importantes sobre diversos aspectos da universidade, desde 
+serviços administrativos até recursos acadêmicos e de suporte. Combinando accordions intuitivos de perguntas frequentes com cards informativos 
+e visualmente atraentes, a tela de Informações do IF Salas oferece uma experiência de usuário completa e eficaz para os membros da 
+comunidade acadêmica.
+
+\begin{figure}[ht]
+	\centering
+	\includegraphics[width=1\textwidth]{informacoes-aluno}
+	\caption{Informações (visão do aluno)}
+\end{figure}

sections/referencial-teorico.tex

@@ -0,0 +1,52 @@
+\section{Referencial Teórico}
+
+\subsection{Usabilidade}
+De acordo com Nielsen \cite{nielsen93}, usabilidade não é uma propriedade única e unidimensional de uma interface
+de usuário. A usabilidade tem vários componentes e está tradicionalmente associada à cinco atributos de
+usabilidade: facilidade de aprendizagem, eficiência, facilidade de memorização, erros e satisfação.
+
+\begin{itemize}
+	\item \textbf{Facilidade de Aprendizado:}
+	      Um usuário deve ser capaz de aprender a utilizar o sistema de maneira fácil, evitando complicações.
+
+	\item \textbf{Eficiência:}
+	      O sistema deve ser capaz de ser utilizado de forma eficiente, para que uma vez que o usuário aprender
+	      a usá-lo, possa tirar um alto nível de produtividade.
+
+	\item \textbf{Facilidade de memorização:}
+	      O sistema deve ser facilmente memorizado, para que depois de algum tempo sem o utilizar, o utilizador
+	      se recorde como usá-lo;
+
+	\item \textbf{Erros:}
+	      O sistema deve ter um baixo índice de erros para evitar que os utilizadores os cometam e, se o
+	      cometerem, permitir fácil recuperação ao estado anterior. Além disso, erros catastróficos não devem ocorrer.
+
+	\item \textbf{Satisfação:}
+	      O sistema deve ser usado de uma forma agradável, para que os utilizadores fiquem satisfeitos com a sua utilização.
+\end{itemize}
+
+
+\subsection{Microinterações}
+Dan Saffer \cite{saffer2013} define microinterações como interações pequenas e contidas que giram em torno de uma única tarefa. Essas 
+interações são frequentemente encontradas em interfaces maiores e são projetadas para fornecer feedback ao usuário sobre suas 
+ações ou para incentivá-lo a realizar uma ação específica.
+
+Uma microinteração é composta de quatro partes: gatilhos que a iniciam, regras que determinam como ela funciona, feedback 
+que as regras geram e os loops e modos que compõem suas meta-regras.
+
+Um exemplo de microinteração é o ato de enviar uma mensagem em um aplicativo de mensagens como o WhatsApp.
+
+\begin{itemize}
+	\item \textbf{Gatilho:}
+    O gatilho para essa microinteração é quando o usuário toca no botão enviar após digitar uma mensagem.
+
+	\item \textbf{Regras:}
+    As regras para esta microinteração são que a mensagem deve estar dentro do limite de caracteres e não deve conter nenhum conteúdo proibido.
+
+	\item \textbf{Feedback:}
+    O feedback para esta microinteração é fornecido por meio de dicas visuais, como uma marca de seleção indicando que a mensagem foi enviada 
+    com sucesso ou uma mensagem de erro se houve um problema no envio da mensagem.
+
+	\item \textbf{Loop:}
+    O loop dessa microinteração é que o usuário pode repetir o processo de digitação e envio de mensagens quantas vezes quiser até decidir sair do app.
+\end{itemize}