Estrutura Visual da Home¶
Objetivo: entender a organização da tela inicial do Educa.ai e como navegar pelas principais funcionalidades.
Perfis atendidos: Professor, Aluno e Gestor
Tempo estimado: 3–5 minutos
Visão Geral da Tela Inicial¶
A tela inicial do Educa.ai é seu centro de comando para todas as atividades educacionais. Ela foi projetada para ser intuitiva e eficiente, organizando as informações mais importantes em um layout limpo e moderno. O fundo da tela apresenta uma imagem de nuvens (fundo_nuvens.png). À esquerda, um painel azul exibe seu avatar e uma lista de atalhos rápidos; o conteúdo principal fica à direita desse painel.
Barra Lateral de Navegação¶
No lado esquerdo da tela, você encontrará a barra lateral (<x-menu-sidebar />) com ícones de navegação principais:
- Home - Retorna à tela inicial
- Conta/Perfil - Acessa sua conta e configurações
- Notificações - Acessa o sistema de notificações
- Agenda - Acessa a agenda escolar e eventos
Barra Superior de Navegação¶
No topo da tela, você encontrará uma barra de navegação com os seguintes elementos:
Elementos da Barra Superior:¶
- Campo de Busca (centro)
-
Campo de pesquisa para encontrar conteúdo na plataforma
-
Menu de Usuário (lado direito)
- Play TOUCH - Acesso a funcionalidades extras (apenas na home)
- Notificações - Ícone de sino (🔔) para acessar o sistema de notificações. Mostra um badge vermelho com o número de notificações não lidas. Clique para ver notificações da organização, planos mágicos e playground
- Logo do Educa.ai - Ícone com "a" estilizado e chapéu de formatura, identidade visual da plataforma
Seção Principal: Agenda Escolar¶
A Agenda Escolar é o destaque principal da tela inicial, ocupando uma posição de destaque no layout. Esta seção é completamente dinâmica e se adapta ao calendário educacional.
Características do Card da Agenda:¶
- Imagem Principal (Dinâmica)
- Banner personalizado para cada evento (ex: "FELIZ DIA DAS CRIANÇAS")
- Badge circular vermelho com a data do evento (ex: "out 12")
-
Foto temática relacionada ao evento (ex: crianças em piscina de bolinhas)
-
Informações do Evento (Dinâmicas)
- Título: Muda conforme o evento (ex: "Dia das Crianças")
- Ícone: Específico para cada celebração (ex: confete/celebração)
-
Descrição: Contextualizada para o evento (ex: "Celebração da infância e dos direitos das crianças")
-
Próximos Eventos (Sempre Atualizados)
- Lista compacta dos próximos eventos do calendário escolar
- Exemplos: "out 15 Dia do Professor", "out 16 Dia Mundial da Alimentação"
Eventos Dinâmicos do Calendário:¶
A Agenda Escolar destaca automaticamente eventos importantes como:
- Dia das Crianças (12 de outubro)
- Dia do Professor (15 de outubro)
- Dia Mundial da Alimentação (16 de outubro)
- Dia do Saci (31 de outubro)
- Dia da Árvore (21 de setembro)
- E muitos outros eventos do calendário educacional brasileiro
Importante
A Agenda Escolar é atualizada automaticamente conforme o calendário educacional. A imagem, título, descrição e data mudam dinamicamente para refletir o evento atual ou próximo evento importante.
Exemplo Dinâmico
Na imagem da documentação, você pode ver o Dia das Crianças como exemplo. Em outras datas, a agenda mostrará diferentes eventos com suas respectivas imagens, títulos e descrições temáticas.
Barra de Navegação por Componentes¶
Logo abaixo da barra superior, você encontrará uma barra horizontal scrollable com ícones das disciplinas:
Disciplinas Disponíveis:¶
| Disciplina | Ícone | Descrição |
|---|---|---|
| Matemática | 🧮 Calculadora azul | Números, operações e geometria |
| Ciências | 🔬 Microscópio | Experimentos e descobertas |
| Português | 📝 Quadro com "ABC" | Leitura, escrita e gramática |
| História | 🏛️ Coliseu Romano | Fatos históricos e civilizações |
| Geografia | 🌍 Globo terrestre | Países, continentes e fenômenos |
| Artes | 🎨 Paleta de pintura | Expressão artística e criatividade |
| Ed. Física | 🏆 Troféu dourado | Atividades físicas e esportes |
| Inglês | 🇬🇧 Bandeira do Reino Unido | Pronúncia, vocabulário e gramática em inglês |
Como Usar:¶
- Clique em qualquer disciplina para acessar conteúdos específicos
- Role horizontalmente para ver mais opções (indicador de scroll à direita)
Cards de Funcionalidades Principais¶
Abaixo da barra de disciplinas, você encontrará cards coloridos com as principais ferramentas:
1. Plano Mágico 🧙♂️¶
Card roxo com ilustração de mago: - Título: "Crie planos de aula criativos baseados no conteúdo que você deseja" - Funcionalidade: Geração automática de planos de aula - Ícone: Seta para a direita (navegação)
2. Copia e Cola 📱¶
Card azul com ícone 3D de QR Code: - Título: "Transfira rapidamente fotos, arquivos, links e textos do seu dispositivo escaneando o código QRCode" - Funcionalidade: Transferência de arquivos via QR Code - Ícone: Seta para a direita (navegação)
Seção Minha Conta¶
Card branco no lado direito com acesso rápido aos seus conteúdos:
Conteúdo da Seção:¶
- Botão "Ver Tudo" no canto superior direito
- Lista de atividades recentes:
- "Aula sobre Verbos no Presente do Indicativo"
- "Explorando o Sistema Solar: Uma Jornada pelos..."
- "Plano de Aula: Frações na Matemática"
Funcionalidades:¶
- Acesso rápido aos seus materiais salvos
- Histórico de atividades recentes
- Links diretos para conteúdos favoritos
Artigo do Dia¶
Card verde claro destacando conteúdo educativo diário:
Estrutura do Card:¶
- Badge: "Habilidade: EF67LP09"
- Título: "EF67LP09: Planejamento de Textos Informativos para o Campo Jornalístico"
- Subtítulo: "Estratégias de Produção e Planejamento de Textos Informativos"
- Botões:
- "Ver artigo >" - Acesso ao conteúdo completo
- "Ver anteriores" - Histórico de artigos
Benefício
O Artigo do Dia oferece insights pedagógicos diários para aprimorar suas práticas de ensino.
Seção Socioemocional¶
Card verde com foco em desenvolvimento pessoal:
Características:¶
- Ícone: Duas mãos segurando um coração vermelho
- Texto: "Descubra atividades divertidas para desenvolver habilidades sociais"
- Objetivo: Desenvolvimento de habilidades socioemocionais
Benefícios:¶
- Atividades para trabalhar empatia e colaboração
- Recursos para desenvolvimento pessoal dos alunos
- Integração de aspectos emocionais ao aprendizado
Aplicativos Interativos¶
Card azul com acesso a jogos educativos:
Características:¶
- Título: "Aplicativos Interativos"
- Ícones: Grid de apps coloridos (123, ?, 💡, 📚)
- Funcionalidade: Biblioteca de jogos e aplicativos educativos
Vantagens:¶
- Aprendizado através de jogos
- Engajamento dos alunos
- Diversificação das metodologias de ensino
Navegação e Acessibilidade¶
Como Navegar:¶
- Clique nos elementos para acessar funcionalidades
- Role horizontalmente na barra de disciplinas
- Use os botões de seta para navegar entre seções
- Explore os cards para descobrir recursos
Recursos de Acessibilidade:¶
- Contraste adequado em todos os elementos
- Ícones descritivos para fácil identificação
- Textos claros e objetivos
- Navegação intuitiva sem necessidade de treinamento
Dicas para Usuários Iniciantes¶
Primeiros Passos:¶
- Explore a Agenda Escolar para ver eventos relevantes
- Teste a barra de disciplinas clicando em uma matéria
- Experimente o Plano Mágico para criar seu primeiro plano
- Leia o Artigo do Dia para dicas pedagógicas
- Configure sua conta através do ícone de conta/perfil na barra lateral esquerda
Personalização:¶
- Use o ícone de conta/perfil na barra lateral para ajustar configurações
- Salve conteúdos favoritos em "Minha Conta"
- Explore diferentes disciplinas para descobrir recursos
Resolução de Problemas Comuns¶
| Problema | Solução |
|---|---|
| Não consigo ver todas as disciplinas | Role horizontalmente na barra de navegação |
| Card não responde ao clique | Verifique sua conexão com a internet |
| Data incorreta | A data é atualizada automaticamente pelo sistema |
| Não vejo o Artigo do Dia | O conteúdo é atualizado diariamente |
Próximos Passos¶
Agora que você conhece a estrutura da Home: