Compare commits
25 commits
release/v0
...
main
Author | SHA1 | Date | |
---|---|---|---|
|
729a6dfb47 | ||
c45d65135b | |||
372ecd3ff2 | |||
e8ecade433 | |||
4374b0ff8c | |||
1ae93a8373 | |||
d0d16a5926 | |||
ee2cc376e2 | |||
5ed6eaf36c | |||
8cc480eb2d | |||
f47e13a7b9 | |||
6ccd51c5ea | |||
1c9f8fd9e1 | |||
|
48ef241cb0 | ||
dc3e9e4470 | |||
cf90249736 | |||
ac2ef5085c | |||
41b4ea2983 | |||
4d4bde9b0c | |||
ace2fa838b | |||
2b3fc025bd | |||
66ae65ab8c | |||
583b550afe | |||
3153d2381d | |||
cc389c0dd4 |
|
@ -31,3 +31,23 @@
|
||||||
url = {https://nvie.com/posts/a-successful-git-branching-model/},
|
url = {https://nvie.com/posts/a-successful-git-branching-model/},
|
||||||
urldate = {2024-03-21},
|
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},
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
BIN
images/cadastro-implementacao.png
Normal file
After Width: | Height: | Size: 53 KiB |
BIN
images/detalhes-atividade-aluno.png
Normal file
After Width: | Height: | Size: 128 KiB |
BIN
images/informacoes-aluno.png
Normal file
After Width: | Height: | Size: 311 KiB |
BIN
images/login-implementacao.png
Normal file
After Width: | Height: | Size: 43 KiB |
BIN
images/pagina-inicial-logado-aluno.png
Normal file
After Width: | Height: | Size: 152 KiB |
BIN
images/pagina-inicial-logado-professor.png
Normal file
After Width: | Height: | Size: 136 KiB |
BIN
images/pagina-inicial-nao-logada.png
Normal file
After Width: | Height: | Size: 440 KiB |
BIN
images/sala-de-aula-atividades-aluno.png
Normal file
After Width: | Height: | Size: 108 KiB |
BIN
images/sala-de-aula-atividades-professor.png
Normal file
After Width: | Height: | Size: 107 KiB |
BIN
images/sala-de-aula-comunicados-aluno.png
Normal file
After Width: | Height: | Size: 172 KiB |
BIN
images/sala-de-aula-comunicados-professor.png
Normal file
After Width: | Height: | Size: 182 KiB |
BIN
images/sala-de-aula-pessoas-aluno.png
Normal file
After Width: | Height: | Size: 99 KiB |
BIN
images/sala-de-aula-pessoas-professor.png
Normal file
After Width: | Height: | Size: 100 KiB |
29
main.tex
|
@ -1,5 +1,6 @@
|
||||||
\documentclass[12pt]{article}
|
\documentclass[12pt]{article}
|
||||||
|
|
||||||
|
\usepackage{csquotes}
|
||||||
\usepackage{template/sbc}
|
\usepackage{template/sbc}
|
||||||
\usepackage{graphicx,url}
|
\usepackage{graphicx,url}
|
||||||
\usepackage{float}
|
\usepackage{float}
|
||||||
|
@ -13,7 +14,7 @@
|
||||||
|
|
||||||
\sloppy
|
\sloppy
|
||||||
|
|
||||||
\title{IF Salas – Uma plataforma de ensino de código aberto para o IFMG}
|
\title{IF Salas – Uma plataforma de código aberto para auxiliar professores e alunos do IFMG}
|
||||||
|
|
||||||
\author{Leonardo A. Murça\inst{1}, Carlos A. S. Junior\inst{1}}
|
\author{Leonardo A. Murça\inst{1}, Carlos A. S. Junior\inst{1}}
|
||||||
|
|
||||||
|
@ -28,12 +29,36 @@
|
||||||
\maketitle
|
\maketitle
|
||||||
|
|
||||||
\begin{abstract}
|
\begin{abstract}
|
||||||
TODO
|
This thesis presents IF Salas, an open-source learning management system (LMS) specifically designed
|
||||||
|
for the Federal Institute of Minas Gerais (IFMG). Motivated by data privacy concerns and the limitations
|
||||||
|
of generic LMS solutions, IF Salas provides a tailored platform for IFMG's hybrid and distance learning
|
||||||
|
needs. Developed with a user-centered approach, incorporating Nielsen's usability principles and Saffer's
|
||||||
|
microinteraction techniques, IF Salas offers an intuitive and efficient experience for both students and
|
||||||
|
teachers. The implemented Minimum Viable Product (MVP) demonstrates the platform's potential to enhance
|
||||||
|
the educational experience at IFMG, with future development focusing on expanded functionality, AI-powered
|
||||||
|
personalization, and enhanced accessibility.
|
||||||
\end{abstract}
|
\end{abstract}
|
||||||
|
|
||||||
|
\begin{resumo}
|
||||||
|
Esta tese apresenta o IF Salas, um sistema de gestão de aprendizagem (LMS) de código aberto, desenvolvido
|
||||||
|
especificamente para o Instituto Federal de Minas Gerais (IFMG). Motivado por preocupações com a privacidade
|
||||||
|
de dados e as limitações de soluções genéricas de LMS, o IF Salas oferece uma plataforma personalizada para
|
||||||
|
as necessidades de ensino híbrido e a distância do IFMG. Desenvolvido com uma abordagem centrada no usuário,
|
||||||
|
incorporando os princípios de usabilidade de Nielsen e as técnicas de microinterações de Saffer, o IF Salas
|
||||||
|
proporciona uma experiência intuitiva e eficiente tanto para alunos quanto para professores. O Produto Mínimo
|
||||||
|
Viável (MVP) implementado demonstra o potencial da plataforma para aprimorar a experiência educacional no IFMG,
|
||||||
|
com o desenvolvimento futuro focado na expansão de funcionalidades, personalização impulsionada por IA e maior
|
||||||
|
acessibilidade.
|
||||||
|
\end{resumo}
|
||||||
|
|
||||||
\input{sections/introducao.tex}
|
\input{sections/introducao.tex}
|
||||||
\input{sections/referencial-teorico.tex}
|
\input{sections/referencial-teorico.tex}
|
||||||
\input{sections/metodologia.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
|
\printbibliography
|
||||||
|
|
||||||
|
|
4
sections/agradecimentos.tex
Normal file
|
@ -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!
|
22
sections/conclusao.tex
Normal file
|
@ -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 percepções valiososas 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.
|
30
sections/consideracoes-finais.tex
Normal file
|
@ -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 valiosas percepções, 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 percepções detalhadas
|
||||||
|
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.
|
|
@ -2,34 +2,50 @@
|
||||||
|
|
||||||
A pandemia da COVID-19 trouxe diversos problemas para a socidade em que vivemos, em específico à educaçã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,
|
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, é imporante ressaltar a
|
adaptação ao ensino remoto, dentre outros. De frente a essa varidade de problemas, é importante ressaltar a
|
||||||
adaptação ao ensino remoto.
|
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
|
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
|
ferramentas para suprirem a necessidade de comunicação e ensino entre alunos e professores. Ferramentas como
|
||||||
Google Classroom, Microsoft Teams e Moodle, foram muito utilizadas para suprirem essa necessidade. Porém, à que custo?
|
\textit{Google Classroom, Microsoft Teams e Moodle}, foram muito utilizadas para suprirem essa necessidade. Porém, à que custo?
|
||||||
|
|
||||||
Um relatório realizado pela Digital Futures Comission (DFC) constatou que serviços como o Google Classroom utiliza de
|
As EdTechs vêm conquistando um espaço cada vez maior nos dias atuais. Elas são empresas ou projetos que
|
||||||
maneira indireta os dados de alunos e professores que fazem uso de sua plataforma. Por exemplo: usualmente,
|
utilizam tecnologia para melhorar a educação, oferecendo soluções como softwares, plataformas online e
|
||||||
professores compartilham links como material de estudo para os alunos. Porém, ao clicar nesses links compartilhados,
|
métodos pedagógicos inovadores. O objetivo é facilitar o acesso ao conhecimento, personalizar o ensino e
|
||||||
diversos cookies de terceiros foram identificados, colocando a privacidade de dados dos alunos em cheque. Há também
|
otimizar processos educacionais em diferentes ambientes, como escolas e cursos online. Porém, a que custo? O
|
||||||
o cruzamento de dados entre a conta pessoal dos alunos e seu ambiente de estudo, pois, geralmente, os discentes acabam
|
relatório \textit{Problems with data governance in UK schools: the cases of Google Classroom and ClassDojo}
|
||||||
utilizando contas pessoais para usufruir de serviços como o Google Classroom.
|
\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.
|
||||||
|
|
||||||
Além do cenário da fragilidade de dados, há também a questão da usabilidade do sistema. Google Classroom e Microsoft
|
A crescente dependência das universidades brasileiras em relação às soluções das GAFAMS (Google, Apple, Facebook, Amazon, Microsoft)
|
||||||
Teams, foram pensados para atender o maior número de casos de uso possíveis, o que gera um efeito colateral em não
|
é também motivo de preocupação devido à possível perda de controle sobre dados sensíveis e estratégicos. Segundo o
|
||||||
suprir os casos de uso específicos das instituições de ensino que os utilizam. Podemos explicitar um desses casos de
|
\textit{mapeamento das instituições públicas de ensino superior brasileiras que utilizam ou nao alguma solucao das GAFAMS}
|
||||||
uso específico como o cenário onde uma atividade atribuída aos alunos pertence à mais de uma disciplina, as chamadas
|
\cite{gafams-brazil-usage} realizado pelo \textit{Observatório Educação Vigiada}, 72\% das instituições brasileiras
|
||||||
atividades interdisciplinares. Nesse cenário, todo o processo de entrega da atividade é feito de maneira duplicada.
|
utilizam soluções da Google e 8\% optam pelas soluções da Microsoft, o que demonstra um claro domínio dessas
|
||||||
Não somente os casos de uso por parte dos discentes sofrem com a generalização das funcionalidades de tais sistemas,
|
empresas estrangeiras no cenário educacional do país. Essa concentração em plataformas controladas por grandes
|
||||||
mas principalmente os docentes. Utilizar uma ferramenta que atende às necessidades específicas e que consequentemente
|
corporações estrangeiras levanta questões sobre a privacidade, segurança e soberania dos dados das instituições de
|
||||||
facilita a gestão de aprendizado dos discentes pelos docentes é algo de grande valor para a sociedade acadêmica.
|
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 a 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
|
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
|
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
|
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
|
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
|
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,
|
à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
|
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.
|
de colaboração na instituição de ensino.
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
\section{Metodologia}
|
\section{Metodologia}
|
||||||
|
|
||||||
O desenvolvimento deste trabalho ocorreu por meio da utilização dos recursos metodológicos descritos
|
O desenvolvimento deste trabalho ocorreu por meio da utilização dos recursos metodológicos descritos
|
||||||
desde a subseção \ref{subsec:definicao-da-proposta-de-trabalho} até a \ref{subsec:implantacao-do-software}, 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}
|
\subsection{Ferramentas utilizadas}
|
||||||
|
|
||||||
|
@ -10,7 +10,7 @@ desde a subseção \ref{subsec:definicao-da-proposta-de-trabalho} até a \ref{su
|
||||||
Sistema de controle de versão distribuído gratuito e de código aberto.
|
Sistema de controle de versão distribuído gratuito e de código aberto.
|
||||||
|
|
||||||
\item \textbf{Github}:
|
\item \textbf{Github}:
|
||||||
Plataforma de desenvolvimento que permite aos desenvolvedores criar, armazenar, gerenciar e compartilhar seu código.
|
Plataforma de primariamente de hospedagem de código-fonte e arquivos com controle de versão usando o Git.
|
||||||
|
|
||||||
\item \textbf{Github Actions}:
|
\item \textbf{Github Actions}:
|
||||||
Serviço integrado de integração contínua e implantação contínua (CI/CD) fornecido pelo GitHub. Ele permite que
|
Serviço integrado de integração contínua e implantação contínua (CI/CD) fornecido pelo GitHub. Ele permite que
|
||||||
|
@ -40,80 +40,73 @@ desde a subseção \ref{subsec:definicao-da-proposta-de-trabalho} até a \ref{su
|
||||||
|
|
||||||
\end{itemize}
|
\end{itemize}
|
||||||
|
|
||||||
\subsection{Definição da proposta de trabalho}
|
|
||||||
\label{subsec:definicao-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}
|
\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
|
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.
|
de Aula.
|
||||||
|
|
||||||
\begin{figure}[ht]
|
\begin{figure}[ht]
|
||||||
\centering
|
\centering
|
||||||
\includegraphics[width=.7\textwidth]{login}
|
\includegraphics[width=1\textwidth]{login}
|
||||||
\caption{Login}
|
\caption{Login}
|
||||||
\end{figure}
|
\end{figure}
|
||||||
|
|
||||||
\begin{figure}[ht]
|
\begin{figure}[ht]
|
||||||
\centering
|
\centering
|
||||||
\includegraphics[width=.7\textwidth]{pagina-inicial}
|
\includegraphics[width=1\textwidth]{pagina-inicial}
|
||||||
\caption{Página inicial}
|
\caption{Página inicial}
|
||||||
\end{figure}
|
\end{figure}
|
||||||
|
|
||||||
\begin{figure}[ht]
|
\begin{figure}[ht]
|
||||||
\centering
|
\centering
|
||||||
\includegraphics[width=.7\textwidth]{turma-detalhes-comunicados}
|
\includegraphics[width=1\textwidth]{turma-detalhes-comunicados}
|
||||||
\caption{Sala de aula – Comunicados}
|
\caption{Sala de aula – Comunicados}
|
||||||
\end{figure}
|
\end{figure}
|
||||||
|
|
||||||
\begin{figure}[ht]
|
\begin{figure}[ht]
|
||||||
\centering
|
\centering
|
||||||
\includegraphics[width=.7\textwidth]{turma-detalhes-atividades}
|
\includegraphics[width=1\textwidth]{turma-detalhes-atividades}
|
||||||
\caption{Sala de aula – Atividades}
|
\caption{Sala de aula – Atividades}
|
||||||
\end{figure}
|
\end{figure}
|
||||||
|
|
||||||
\begin{figure}[ht]
|
\begin{figure}[ht]
|
||||||
\centering
|
\centering
|
||||||
\includegraphics[width=.7\textwidth]{turma-detalhes-pessoas}
|
\includegraphics[width=1\textwidth]{turma-detalhes-pessoas}
|
||||||
\caption{Sala de aula – Pessoas}
|
\caption{Sala de aula – Pessoas}
|
||||||
\end{figure}
|
\end{figure}
|
||||||
|
|
||||||
|
\begin{figure}[ht]
|
||||||
|
\centering
|
||||||
|
\includegraphics[width=1\textwidth]{atividade-detalhes.png}
|
||||||
|
\caption{Detalhes de atividade}
|
||||||
|
\end{figure}
|
||||||
|
|
||||||
\vfill
|
\vfill
|
||||||
\cleardoublepage{}
|
\cleardoublepage{}
|
||||||
|
|
||||||
\begin{figure}[ht]
|
A estrutura lógica das telas prototipadas foi baseada no sistema \textit{Google Classroom} visando
|
||||||
\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\@.
|
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}
|
\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
|
Após a prototipação das telas principais, iniciou-se o desenvolvimento da aplicação utilizando uma abordagem proposta
|
||||||
por Andrew Hunt e David Thommas em seu livro O Programador Pragmático \cite{pragmatic-programmer} 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
|
Essa abordagem é uma analogia a 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
|
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
|
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
|
||||||
mesmo ambiente da munição real, os efeitos externos são reduzidos.
|
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 contexto do IF Salas, as "balas reais"\ representam as funcionalidades finais e completas da aplicação, ou seja, as
|
||||||
no Figma, funcionariam na prática. Essa abordagem foi escolhida pelo fato do IF Salas ser algo que nunca foi construído e utilizado
|
características e fluxos que devem ser totalmente implementados e funcionar conforme esperado para o usuário final.
|
||||||
anteriormente no contexto do IFMG Sabará. Ou seja, alguns requisitos ainda pareciam incognitos e, não tinhamos uma ideia nitida
|
Já os "projéteis luminosos"\ simbolizam as versões intermediárias ou protótipos dessas funcionalidades, que foram desenvolvidos para testar
|
||||||
de como o sistema funcionaria na prática. Mesmo que \textit{Google Classroom} tenha sido utilizado anteriormente em alguns contextos,
|
e validar se as ideias ou fluxos funcionam na prática antes de serem totalmente desenvolvidos e integrados na aplicação.
|
||||||
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.
|
Os projéteis luminosos também foram necessários 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 ainda pareciam incógnitos e, não tínhamos 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.
|
||||||
|
|
||||||
A arquitetura e organização dos arquivos do código do projeto foi estruturada seguindo as práticas mais difundidas no mercado de
|
A arquitetura e organização dos arquivos do código do projeto foi estruturada seguindo as práticas mais difundidas no mercado de
|
||||||
desenvolvimento web utilizando o ecossistema React. Dentre essas práticas estão:
|
desenvolvimento web utilizando o ecossistema React. Dentre essas práticas estão:
|
||||||
|
@ -124,6 +117,8 @@ desenvolvimento web utilizando o ecossistema React. Dentre essas práticas estã
|
||||||
\item Context API para gerenciamento de estado global;
|
\item Context API para gerenciamento de estado global;
|
||||||
\end{itemize}
|
\end{itemize}
|
||||||
|
|
||||||
|
\subsection{Versionamento de código}
|
||||||
|
|
||||||
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.
|
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
|
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.
|
gerenciar o fluxo de trabalho de uma equipe de desenvolvimento. Essa abordagem é baseada em dois ramos principais: master e develop.
|
||||||
|
@ -142,7 +137,7 @@ uma vez que não houve a implantação do software em ambiente de produção. Ob
|
||||||
|
|
||||||
\begin{figure}[ht]
|
\begin{figure}[ht]
|
||||||
\centering
|
\centering
|
||||||
\includegraphics[width=.7\textwidth]{gitflow.jpg}
|
\includegraphics[width=1\textwidth]{gitflow.jpg}
|
||||||
\caption{Git Flow Adaptado}
|
\caption{Git Flow Adaptado}
|
||||||
\end{figure}
|
\end{figure}
|
||||||
|
|
||||||
|
@ -155,3 +150,14 @@ Essa automação é um pipeline que é executado utilizando a ferramenta Github
|
||||||
online no domínio \url{https://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.
|
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. Foram organizadas 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 percepções valiososas para refinamentos
|
||||||
|
futuros e melhorias contínuas.
|
||||||
|
|
347
sections/o-if-salas.tex
Normal file
|
@ -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 percepções valiososas 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{Página inicial (Não logado)}
|
||||||
|
\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 do 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}
|
|
@ -34,7 +34,8 @@ 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
|
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.
|
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.
|
Um exemplo de microinteração é o ato de enviar uma mensagem em um aplicativo de mensagens como o WhatsApp. A partir desse ato, as seguintes
|
||||||
|
partes da microinteração ocorrem:
|
||||||
|
|
||||||
\begin{itemize}
|
\begin{itemize}
|
||||||
\item \textbf{Gatilho:}
|
\item \textbf{Gatilho:}
|
||||||
|
|