pmv-si-2024-1-pe1-t5-profissional

Projeto de Interface

O Projeto de Inteface se divide em 8 páginas: Tela Inicial, Login, Cadastro, HomePage Logada, Quiz, Resultado do Quiz, Roadmap Inicial e Roadmap Área Escolhida. As páginas foram desenvolvidas para a facilitação de usuários que tem convívio com interações web, em todas as páginas há uma leitura clara e com caminhos objetivos que direcionam à aplicação requisitada.

User Flow

Tela Inicial

Ao entrar no site, o usuário é redirecionado para a Tela Inicial. Na tela inicial são mostrados textos de introdução como a explicação do projeto. Além disso, é possível acessar outras abas do site ao clicar nos botões de Login e Cadastro, que levam o usuário interessado diretamente para fazer login ou se cadastrar para a realização do quiz. A página inicial também mostra os participantes do projeto na aba Quem Somos? contendo uma descrição breve de cada integrante. Logo abaixo, há um rodapé que possui informações de contato dos criadores, além dos créditos pelo desenvolvimento do site.

Login

A página de Login conta com os campos E-mail e Senha, e após redigir o e-mail e senha previamente cadastrados o usuário deve clicar no botão “Entrar”, assim terá acesso ao quiz. Caso tenha esquecido sua senha, deve clicar no botão “Esqueceu a senha?”, e uma redefinição será enviada ao seu e-mail. Um usuário não cadastrado ao entrar na página de login vai se deparar com o botão “Cadastre-se”, e que ao clicar será direcionado para a página “Cadastro.”

Cadastro

A página “Cadastro” possui três campos para serem preenchidos: o Nome que será o nome de usuário, o e-mail que será usado para acessar o quiz e a senha individual do usuário. Após preencher e realizar o cadastro, o usuário deve confirmar as informações clicando no botão “Cadastrar”. Caso um usuário que já tenha login entre na página de cadastro, ele pode clicar em “Fazer login” e será redirecionado para a página de Login.

HomePage Logada

O usuário após realizar o login/cadastro tem duas opções em sua tela, os botões de QUIZ ou de Roadmap que ele pode escolher. Caso clique em quiz, há um redirecionamento para o quiz e as perguntas, e caso clique em Roadmap, o usuário vai para a página inicial dos Roadmaps. No cabeçalho direito, se apresenta o botão de Logout em que o usuário pode a qualquer momento se deslogar do site.

Quiz

A tela do quiz apresenta a primeira pergunta e três alternativas. Ao escolher a alternativa desejada, o usuário clica no botão Enviar e sua resposta é processada. Ao todo serão oito perguntas, e o usuário pode averiguar em qual pergunta está por meio das bolinhas que estão na parte inferior da página (quando é enviada uma resposta, a bolinha avança e assim até a última). Após enviar a última alternativa, ocorre um direcionamento para a página do resultado do Quiz.

Resultado Quiz

O usuário após realizar o quiz se depara com três caminhos e embaixo de cada um, uma porcentagem que calcula sua afinidade com a área de acordo com suas respostas ao quiz. O resultado com o maior valor se destaca e para acessar os Roadmaps, o usuário deve clicar na imagem que está acima do valor da porcentagem que dá acesso ao Roadmap da área escolhida.

RoadMap Inicial

A página de Roadmaps pode ser acessada sem a realização do quiz. No cabeçalho também há a opção de fazer Logout, clicando no botão Logout. Na página, aparecem três ilustrações das áreas escolhidas. Ao clicar na imagem de Back End o usuário é redirecionado para a página focada na área de Back End, Front End a página focada em Front End e DB Admnistrator para a de DB Admnistrator.

Roadmap Área Escolhida

Nesta página, você encontrará um guia dinâmico e esclarecedor para o roadmap da área que você selecionou. Na seção do título do RoadMap é onde será explicada e introduzido o RoadMap selecionado, ao lado, temos uma ilustração do RoadMap escolhido. Mais abaixo, temos os conceitos básicos , onde você encontrará uma visão geral dos conceitos básicos relacionados ao roadmap selecionado. Esses conceitos fundamentais fornecem uma introdução essencial para compreender e navegar pelo caminho delineado no RoadMap. Nas Janelas dinâmicas você encontrará uma breve explicação sobre o conteúdo, links para vídeos explicativos e instruções para três projetos simples sobre. Abaixo, a seção Frameworks exemplifica 3 tipos diferentes de Frameworks de cada área. Cada um tem uma aba interativa que explica por meio de texto, ou um link que leva o usuário para outra página.