# Tela Inicial

# Tela Inicial

Ao se logar finalmente teremos acesso a tela inicial do nosso ambiente onde você poderá realizar suas interações com o nosso novo sistema, realizando toda sua jornada de aprendizado com a gente:

1. Essa grid irá exibir seu nome cadastrado no nosso sistema e sua foto de perfil
2. Essa grid será seu guia para o curso no qual está inscrito
3. É um botão lateral que lhe acompanhará ao longo de todas as telas do aplicativo, dentro dele contém várias opções, porém falaremos disso mais tarde: <table border="1" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 99.8711%;"></col></colgroup><tbody><tr><td>[![image.png](https://docs.itaeducacional.com.br/uploads/images/gallery/2025-09/scaled-1680-/ninYNgEH8CdQlUdd-image.png)](https://docs.itaeducacional.com.br/uploads/images/gallery/2025-09/ninYNgEH8CdQlUdd-image.png)  
    </td></tr></tbody></table>
    
    Se houver aula ao vivo em andamento, um botão vermelho irá aparecer ao lado para que você possa ir direto a aula <table border="1" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 99.8711%;"></col></colgroup><tbody><tr><td>[![image.png](https://docs.itaeducacional.com.br/uploads/images/gallery/2025-10/scaled-1680-/cim3IZ2CWVphKF7w-image.png)](https://docs.itaeducacional.com.br/uploads/images/gallery/2025-10/cim3IZ2CWVphKF7w-image.png)
    
    </td></tr></tbody></table>

# Hot Bar

Vamos primeiro falar sobre esse “Hot bar” onde nela temos 4 botões de acessos rápidos:

<table border="1" id="bkmrk-" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 99.881%;"></col></colgroup><tbody><tr><td>[![image.png](https://docs.itaeducacional.com.br/uploads/images/gallery/2025-09/scaled-1680-/Z2WYcOKDr1mNjP7N-image.png)](https://docs.itaeducacional.com.br/uploads/images/gallery/2025-09/Z2WYcOKDr1mNjP7N-image.png)  
</td></tr></tbody></table>

Ao selecionar o botão “**Notificações**” você será direcionado a tela onde você receberá informações diretamente de seus professores, do corpo acadêmico e também sobre suas tarefas e deveres ao longo do curso:

<table border="1" id="bkmrk--1" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 99.881%;"></col></colgroup><tbody><tr><td>[![image.png](https://docs.itaeducacional.com.br/uploads/images/gallery/2025-09/scaled-1680-/AZf5orG2HdQ04L2D-image.png)](https://docs.itaeducacional.com.br/uploads/images/gallery/2025-09/AZf5orG2HdQ04L2D-image.png)  
</td></tr></tbody></table>

Ao selecionar o botão “Agendas” você será direcionado a tela onde terá acesso a sua agenda contendo suas programações ao longo do curso, onde você poderá optar por três tipos de visões:  
• Mês – Nessa página exibirá um texto informando o mês e o ano que está visualizando e terá acesso a tudo que foi planejado ao longo de todos os dias do mês  
• Semana – Nessa página exibirá um texto para identificar a data início e fim da semana que está visualizando, ordenando em forma de planilha onde poderá ver os dias da semana na coluna e a hora sendo representada na linha  
• Dia – Nessa página exibirá um texto para identificar o dia/semana/ano que está visualizando, sendo exibido somente linhas de identificação de horas

<table border="1" id="bkmrk--2" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 99.881%;"></col></colgroup><tbody><tr><td>[![image.png](https://docs.itaeducacional.com.br/uploads/images/gallery/2025-09/scaled-1680-/iWbN8e5GCnjGXSf5-image.png)](https://docs.itaeducacional.com.br/uploads/images/gallery/2025-09/iWbN8e5GCnjGXSf5-image.png)

</td></tr></tbody></table>

  
Qualquer interação com os botões “1”, “2” ou “3” afetará o cabeçalho de identificação da página que está visualizando. A ação desses botões mudará conforme a visualização selecionada:  
• Botão 1 – Esse botão sempre retrocederá o período da agenda que se está vendo, na escala de mês ele retrocederá para o mês anterior, exemplo: Nossa visualização “4” marcará a partir de agora “agosto 2024”.  
• Botão 2 – Esse botão serve para centralizar sua navegação na agenda, voltando sempre para o período da data em que você está no presente.  
• Botão 3 – Terá a função contrária do “botão 1”, ao selecionar esse botão na escala de mês ele avançará para o mês posterior, exemplo: Nossa visualização “4” marcará a partir de agora “outubro 2024”.

<table border="1" id="bkmrk--3" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 99.881%;"></col></colgroup><tbody><tr><td>[![image.png](https://docs.itaeducacional.com.br/uploads/images/gallery/2025-09/scaled-1680-/y8h56sWbTG8X4o45-image.png)](https://docs.itaeducacional.com.br/uploads/images/gallery/2025-09/y8h56sWbTG8X4o45-image.png)

</td></tr></tbody></table>

# Menu Lateral

Agora vamos falar do botão que nunca te abandona ao longo de toda utilização do nosso aplicativo, o nosso menu lateral na barra de tarefas do canto superior a direita  
Esse ícone é muito mais do que só um amigo inseparável, ele é nosso menu para acesso de informações pessoais e funções extras:

1. Ele exibirá seu nome e sua foto de perfil
2. Te levará a tela Inicial
3. Um botão para acesso de edição dos seus dados
4. Um botão que nos levará as “Dúvidas Frequentes” da instituição afim de guia-los para resolução dos seus problemas
5. Um botão de redirecionamento para um link direto de contato de suporte com a instituição
6. Acesso a biblioteca digital para consumo de livros
7. Um botão com a função de sair do nosso sistema

<table border="1" id="bkmrk-" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 50%;"></col><col style="width: 50%;"></col></colgroup><tbody><tr><td>[![Q05OpbNF8yFvZwDi-image.png](https://docs.itaeducacional.com.br/uploads/images/gallery/2025-09/scaled-1680-/QhrzQRMaOSrQ2Wcy-q05opbnf8yfvzwdi-image.png)](https://docs.itaeducacional.com.br/uploads/images/gallery/2025-09/QhrzQRMaOSrQ2Wcy-q05opbnf8yfvzwdi-image.png)

</td><td>[![image.png](https://docs.itaeducacional.com.br/uploads/images/gallery/2025-09/scaled-1680-/83WoemEnZuN2oth4-image.png)](https://docs.itaeducacional.com.br/uploads/images/gallery/2025-09/83WoemEnZuN2oth4-image.png)

</td></tr></tbody></table>

# Tema Claro/Escuro

<span style="mso-bidi-font-size: 12.0pt; line-height: 150%; mso-bidi-font-family: Arial;">Localizado no nosso menu lateral encontramos a função onde podemos alterar o tema da nossa aplicação para modo escuro ou claro:</span>

[![image.png](https://docs.itaeducacional.com.br/uploads/images/gallery/2025-09/scaled-1680-/SYCoFU4vtfdrlitB-image.png)](https://docs.itaeducacional.com.br/uploads/images/gallery/2025-09/SYCoFU4vtfdrlitB-image.png)

[![image.png](https://docs.itaeducacional.com.br/uploads/images/gallery/2025-09/scaled-1680-/GgqSqjqereuQ5bTt-image.png)](https://docs.itaeducacional.com.br/uploads/images/gallery/2025-09/GgqSqjqereuQ5bTt-image.png)

# Meus dados

Ao clicar no botão “**Meus Dados**” seremos direcionados para tela onde será exibido todos nossos dados:

1. Para alterar sua foto de perfil
2. Para alterar sua senha 
    - A senha deve conter no mínimo 8 caracteres um caráter maiúsculo, um minúsculo, um especial e um número
3. Altere seus dados na seção de dados pessoais
4. Clique para salvar seus dados atualizados

<table border="1" id="bkmrk-%C2%A0" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 50.0596%;"></col><col style="width: 50.0596%;"></col></colgroup><tbody><tr><td>[![image.png](https://docs.itaeducacional.com.br/uploads/images/gallery/2025-09/scaled-1680-/0K7pz8kpntd4JmEO-image.png)](https://docs.itaeducacional.com.br/uploads/images/gallery/2025-09/0K7pz8kpntd4JmEO-image.png)  
</td><td>[![image.png](https://docs.itaeducacional.com.br/uploads/images/gallery/2025-09/scaled-1680-/uzTGGW9rs5kK3ciy-image.png)](https://docs.itaeducacional.com.br/uploads/images/gallery/2025-09/uzTGGW9rs5kK3ciy-image.png)

</td></tr></tbody></table>