Add section O IF Salas

main.tex

@@ -34,6 +34,8 @@
 \input{sections/introducao.tex}
 \input{sections/referencial-teorico.tex}
 \input{sections/metodologia.tex}
+\input{sections/o-if-salas.tex}
+
 
 \printbibliography
 

sections/o-if-salas.tex

@@ -0,0 +1,284 @@
+\section{O IF Salas}
+
+A proposta do IF Salas é ser uma plataforma inovadora de gerenciamento de aprendizagem projetada para atender às necessidades 
+específicas dos institutos federais, oferecendo suporte tanto para a modalidade de ensino híbrido quanto para a educação a 
+distância (EAD). Como um sistema de código aberto, o IF Salas ofereceria flexibilidade, personalização e segurança, permitindo que 
+instituições educacionais adaptem a plataforma de acordo com suas próprias necessidades e requisitos. Com uma variedade 
+de recursos robustos, incluindo ferramentas de colaboração, avaliação, acompanhamento do progresso do aluno e comunicação 
+integrada, o IF Salas permitirá educadores a fornecer experiências de aprendizagem envolventes e eficazes. 
+
+Na presente seção, serão examinados os casos de uso desenvolvidos para o IF Salas, analisando como os princípios 
+de Usabilidade \cite{nielsen93} e Microinterações \cite{saffer2013} se manifestam em cada contexto específico. Este estudo visa 
+destacar a importância da experiência do usuário (UX) na concepção e implementação eficaz de sistemas de gerenciamento de 
+aprendizagem, proporcionando insights valiosos sobre como esses conceitos influenciam diretamente a interação e a satisfação do 
+usuário dentro da plataforma IF Salas.
+
+\subsection{Página inicial (Não logado)}
+TODO
+
+\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=.7\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=.7\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=.7\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=.7\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=.7\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=.7\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)}
+
+TODO: Mussum Ipsum, cacilds vidis litro abertis.  Casamentiss faiz malandris se pirulitá. In elementis mé pra quem é amistosis 
+quis leo. Em pé sem cair, deitado sem dormir, sentado sem cochilar e fazendo pose. Manduma pindureta quium dia nois paga. 
+Mussum Ipsum, cacilds vidis litro abertis.  Casamentiss faiz malandris se pirulitá. In elementis mé pra quem é amistosis quis 
+leo. Em pé sem cair, deitado sem dormir, sentado sem cochilar e fazendo pose. Manduma pindureta quium dia nois paga.
+A quis leo. Em pé sem cair, deitado sem dormir, sentado sem cochilar e fazendo pose. Manduma pindureta quium dia nois paga. 
+Mussum Ipsum, cacilds vidis litro abertis.  Casamentiss faiz malandris se pirulitá. In elementis mé pra quem é amistosis quis 
+leo. Em pé sem cair, deitado sem dormir, sentado sem cochilar e fazendo pose. Manduma pindureta quium dia nois paga.
+
+\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=.7\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=.7\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=.7\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=.7\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=.7\textwidth]{detalhes-atividade-aluno}
+	\caption{Detalhes da atividade (visão do aluno)}
+\end{figure}
+
+\vfill
+\cleardoublepage{}
+
+\subsection{Informações (visão do aluno)}
+
+A tela de Informações do IF Salas é cuidadosamente projetada para fornecer aos usuários acesso rápido e organizado a uma variedade de recursos 
+úteis e informações essenciais. A principal característica desta tela são os accordions de perguntas frequentes, que permitem aos usuários 
+expandir e contrair seções de perguntas comuns para obter respostas detalhadas de forma eficiente. Cada pergunta é apresentada de forma clara 
+e concisa, e ao clicar, os usuários podem visualizar as respostas correspondentes, facilitando a obtenção de informações relevantes de maneira 
+rápida e direta.
+
+Além dos accordions de perguntas frequentes, a tela de Informações também apresenta uma série de cards, cada um fornecendo detalhes e links 
+úteis para diferentes setores e recursos da universidade IFMG. Cada card é projetado para destacar visualmente o setor ou recurso em questão, 
+com ícones ou imagens representativas para melhorar a identificação e a compreensão. Os cards contêm informações relevantes, como detalhes 
+de contato, horários de funcionamento e links para páginas específicas ou recursos online.
+
+Essa abordagem de design facilita aos usuários encontrar rapidamente informações importantes sobre diversos aspectos da universidade, desde 
+serviços administrativos até recursos acadêmicos e de suporte. Combinando accordions intuitivos de perguntas frequentes com cards informativos 
+e visualmente atraentes, a tela de Informações do IF Salas oferece uma experiência de usuário completa e eficaz para os membros da 
+comunidade acadêmica.
+
+\begin{figure}[ht]
+	\centering
+	\includegraphics[width=.7\textwidth]{informacoes-aluno}
+	\caption{Informações (visão do aluno)}
+\end{figure}