diff --git a/main.tex b/main.tex index 3747ae8..e37528b 100644 --- a/main.tex +++ b/main.tex @@ -14,7 +14,7 @@ \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}} @@ -29,9 +29,28 @@ \maketitle \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} +\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/referencial-teorico.tex} \input{sections/metodologia.tex} diff --git a/sections/conclusao.tex b/sections/conclusao.tex index fe05b18..4c61710 100644 --- a/sections/conclusao.tex +++ b/sections/conclusao.tex @@ -9,7 +9,7 @@ Um dos principais resultados foi a validação da arquitetura técnica do IF Sal 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 +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 diff --git a/sections/consideracoes-finais.tex b/sections/consideracoes-finais.tex index adb6a56..ae74234 100644 --- a/sections/consideracoes-finais.tex +++ b/sections/consideracoes-finais.tex @@ -2,7 +2,7 @@ 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. +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. @@ -14,7 +14,7 @@ a experiência de aprendizado, oferecendo recomendações de conteúdo e ativida 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 +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. diff --git a/sections/introducao.tex b/sections/introducao.tex index 237cac7..1bc33d2 100644 --- a/sections/introducao.tex +++ b/sections/introducao.tex @@ -2,14 +2,18 @@ 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, dentre outros. De frente a 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} +As EdTechs vêm conquistando um espaço cada vez maior nos dias atuais. Elas são empresas ou projetos que +utilizam tecnologia para melhorar a educação, oferecendo soluções como softwares, plataformas online e +métodos pedagógicos inovadores. O objetivo é facilitar o acesso ao conhecimento, personalizar o ensino e +otimizar processos educacionais em diferentes ambientes, como escolas e cursos online. Porém, a 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 @@ -30,7 +34,7 @@ ensino, destacando a importância de buscar alternativas que promovam a autonomi 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 +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 diff --git a/sections/metodologia.tex b/sections/metodologia.tex index bddc517..702ad4d 100644 --- a/sections/metodologia.tex +++ b/sections/metodologia.tex @@ -10,7 +10,7 @@ desde a subseção \ref{subsec:prototipacao-do-layout} até a \ref{subsec:coleta Sistema de controle de versão distribuído gratuito e de código aberto. \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}: Serviço integrado de integração contínua e implantação contínua (CI/CD) fornecido pelo GitHub. Ele permite que @@ -85,24 +85,28 @@ de Aula. \vfill \cleardoublepage{} -A estrutura lógica das telas prototipadas foram baseadas no sistema \textit{Google Classroom} visando +A estrutura lógica das telas prototipadas foi baseada 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 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 +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 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 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. -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 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. +No contexto do IF Salas, as "balas reais"\ representam as funcionalidades finais e completas da aplicação, ou seja, as +características e fluxos que devem ser totalmente implementados e funcionar conforme esperado para o usuário final. +Já os "projéteis luminosos"\ simbolizam as versões intermediárias ou protótipos dessas funcionalidades, que foram desenvolvidos para testar +e validar se as ideias ou fluxos funcionam na prática antes de serem totalmente desenvolvidos e integrados na aplicação. + +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 desenvolvimento web utilizando o ecossistema React. Dentre essas práticas estão: @@ -113,6 +117,8 @@ desenvolvimento web utilizando o ecossistema React. Dentre essas práticas estã \item Context API para gerenciamento de estado global; \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. 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. @@ -149,9 +155,9 @@ Entretanto, a aplicação será disponibilizada de forma online no domínio \url 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 +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 insights valiosos para refinamentos +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. diff --git a/sections/o-if-salas.tex b/sections/o-if-salas.tex index f07aed1..4ffcca8 100644 --- a/sections/o-if-salas.tex +++ b/sections/o-if-salas.tex @@ -10,7 +10,7 @@ integrada, o IF Salas permitirá educadores a fornecer experiências de aprendiz 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 +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. @@ -64,7 +64,7 @@ O design limpo e minimalista ajuda a focar a atenção nos elementos mais import \begin{figure}[ht] \centering \includegraphics[width=1\textwidth]{pagina-inicial-nao-logada.png} - \caption{Login} + \caption{Página inicial (Não logado)} \end{figure} \subsection{Login} @@ -100,8 +100,8 @@ para garantir a precisão e segurança das informações fornecidas. \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 +À 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 @@ -129,10 +129,10 @@ na plataforma IF Salas. 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 +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, +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 @@ -155,7 +155,7 @@ aprimorada para todos os envolvidos no IF Salas. 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 +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, @@ -174,7 +174,7 @@ experiência de navegação coesa e intuitiva, elevando a usabilidade e a satisf \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" +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, @@ -215,7 +215,7 @@ maneira eficiente. \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 +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 @@ -240,9 +240,9 @@ contribuem para uma experiência de usuário coesa, intuitiva e altamente satisf \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 +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" +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 @@ -262,7 +262,7 @@ de sala de aula online que é intuitiva, eficaz e altamente funcional para os us \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", +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 @@ -283,7 +283,7 @@ pendentes, facilitando assim o engajamento e o progresso acadêmico na plataform \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" +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, @@ -331,7 +331,7 @@ e concisa, e ao clicar, os usuários podem visualizar as respostas correspondent 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, +ú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. diff --git a/sections/referencial-teorico.tex b/sections/referencial-teorico.tex index 1f80e67..140784d 100644 --- a/sections/referencial-teorico.tex +++ b/sections/referencial-teorico.tex @@ -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 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} \item \textbf{Gatilho:}