commit
729a6dfb47
7 changed files with 65 additions and 35 deletions
23
main.tex
23
main.tex
|
@ -14,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}}
|
||||||
|
|
||||||
|
@ -29,9 +29,28 @@
|
||||||
\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}
|
||||||
|
|
|
@ -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
|
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.
|
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
|
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
|
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
|
postagem e submissão de atividades, com uma curva de aprendizado mínima, o que atende aos princípios
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
|
|
||||||
A implementação do IF Salas revelou-se uma iniciativa de grande potencial para transformar
|
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
|
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,
|
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.
|
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
|
e interesses dos alunos. Há também a possibilidade de expansão da plataforma para outros clientes, como
|
||||||
clientes mobile (Android e IOS).
|
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.
|
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,
|
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.
|
independentemente de suas habilidades, possam utilizá-la de maneira eficaz.
|
||||||
|
|
|
@ -2,14 +2,18 @@
|
||||||
|
|
||||||
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, é 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.
|
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
|
||||||
\textit{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?
|
||||||
|
|
||||||
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
|
\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
|
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
|
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
|
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
|
\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
|
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
|
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
|
é 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
|
funcionalidades de tais sistemas, mas principalmente os docentes. Utilizar uma ferramenta que atende às necessidades
|
||||||
|
|
|
@ -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.
|
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
|
||||||
|
@ -85,24 +85,28 @@ de Aula.
|
||||||
\vfill
|
\vfill
|
||||||
\cleardoublepage{}
|
\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\@.
|
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:
|
||||||
|
@ -113,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.
|
||||||
|
@ -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
|
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
|
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
|
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
|
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
|
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.
|
futuros e melhorias contínuas.
|
||||||
|
|
|
@ -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
|
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
|
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
|
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.
|
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]
|
\begin{figure}[ht]
|
||||||
\centering
|
\centering
|
||||||
\includegraphics[width=1\textwidth]{pagina-inicial-nao-logada.png}
|
\includegraphics[width=1\textwidth]{pagina-inicial-nao-logada.png}
|
||||||
\caption{Login}
|
\caption{Página inicial (Não logado)}
|
||||||
\end{figure}
|
\end{figure}
|
||||||
|
|
||||||
\subsection{Login}
|
\subsection{Login}
|
||||||
|
@ -100,8 +100,8 @@ para garantir a precisão e segurança das informações fornecidas.
|
||||||
\cleardoublepage{}
|
\cleardoublepage{}
|
||||||
|
|
||||||
\subsection{Página inicial logado (visão do professor)}
|
\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",
|
À 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
|
"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.
|
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,
|
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
|
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
|
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
|
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
|
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.
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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
|
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,
|
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{}
|
\cleardoublepage{}
|
||||||
|
|
||||||
\subsection{Sala de aula - Pessoas (visão do professor)}
|
\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
|
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
|
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,
|
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)}
|
\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
|
À 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,
|
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
|
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
|
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)}
|
\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
|
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
|
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
|
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
|
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
|
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
|
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)}
|
\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
|
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
|
é 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
|
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)}
|
\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
|
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
|
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,
|
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.
|
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
|
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
|
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.
|
de contato, horários de funcionamento e links para páginas específicas ou recursos online.
|
||||||
|
|
||||||
|
|
|
@ -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:}
|
||||||
|
|
Loading…
Reference in a new issue