Padronização da estrutura do Help

Os balões de avisos são uma excelente maneira de chamar a atenção do leitor para informações importantes relacionadas à rotina. Para destacar uma informação crucial no texto, Abaixo está alguns exemplos visuais.

1 - Observações

<alert type="info" dismiss="false" icon="fa fa-pencil-square-o">
**Observações:** Texto 01
</alert>

2 - Importante

<alert type="warning" dismiss="false" icon="fa fa-warning">
**Importante:** Texto 02
</alert>

3 - Informações

<alert type="info" dismiss="false" icon="fa fa-info-circle">
**Informações:** Texto 03
</alert>

4 - Exemplo

<alert type="warning" dismiss="false" icon="fa fa-mortar-board">
**Exemplo:** Texto 04
</alert>

5- Atenção

<alert type="danger" dismiss="false" icon="fa fa-warning">
**Atenção:** Texto 05
</alert>

6 - Alerta informativo

<alert type="warning" dismiss="false" icon="fa fa-exclamation-circle">
//Cadastro **não** disponível para instituições que utilizam o produto **Mentor Modular**.
Entre em contato com a Edusoft para solicitar o cadastro desejado.//
</alert>

OBS: Incluir este balão informativo em todas as documentações de rotinas nas quais clientes modulares não possuem acesso. Isso evitará que o cliente leia toda a documentação, e só após entrar em contato com o suporte, saber que não possui acesso em determinadas configurações.

7 - Botão

<button type="primary" size="xs" icon="fa fa-caret-right" block="false" disabled="true">
Funcionalidade disponível a partir da versão 07.XX.XX do sistema.
</button>\\

Funcionalidade disponível a partir da versão 07.XX.XX do sistema.

Após minuciosa coleta de informações sobre as rotinas em questão, é essencial proceder à análise e organização, seguindo os passos descritos a seguir:

• Título: Atribua um título representativo à rotina em foco.
• Introdução: Explique o propósito e a finalidade da rotina que está sendo documentada.
• Procedimento de acesso: Descreva o caminho necessário para acessar a rotina (Módulo > Menu > Opção de menu).
• Visão geral da tela inicial: Apresente de forma concisa a tela inicial da rotina, acompanhada de uma imagem ilustrativa.

Exemplo:

• Subtítulo: Explorando as funções e filtros disponíveis

Para obter informações mais detalhadas sobre as diversas funções e filtros disponíveis em uma determinada rotina, basta clicar nas abas abaixo. A seguir, apresentamos os tópicos expansíveis para cada aba, função, filtros ou campos relacionados à rotina:

Para criar os tópicos expansíveis, insira estas informações:

<fc #c0c0c0><accordion>
<panel type="info" title="Informar o título. Ex: Agrupamento de títulos" icon="fa fa-caret-right">
Conteúdo que o usuário lerá ao abrir a aba.
</panel>

<panel type="info" title="Informar o título. Ex: Agrupar parcela com a conta financeira" icon="fa
fa-caret-right">
Conteúdo que o usuário lerá ao abrir a aba.
</panel>

<panel type="info" title="Informar o título. Ex: Agrupar somente com os filtros de tela" icon="fa fa-
caret-right">
Conteúdo que o usuário lerá ao abrir a aba.
</panel>

• Pode-se incluir uma conclusão da documentação abaixo dos tópicos expansíveis, caso julgar necessário:

• Deve-se incluir a informação de contato com o Suporte, bem como, o botão de Voltar com seus devidos direcionamentos.

Informações adicionais:

• Explicar para que serve a funcionalidade que está sendo documentada. Exemplo: “Esta rotina tem a finalidade de realizar o processo (nome do processo), abaixo um vídeo ilustrativo de como realizar o processo (nome do processo).”
• Informar os filtros, explicar sua funcionalidade, se é obrigatório ou não. Exemplo: “O filtro de (nome do filtro) serve para buscar a informação (nome da informação).”
• Informar os campos, explicar sua funcionalidade, se é obrigatório ou não. Exemplo: “O campo (nome do campo) serve para inserir a informação (nome da informação).”
• Estruturar textos e imagens de forma harmônica, não poluindo a tela com textos extensos e imagens com várias marcações na explicação de uma funcionalidade.
• Ao explicar alguns campos, estes podem ser unificados, quando, por exemplo, existirem os campos de data inicial e final, deve-se unificar e explicar os dois em uma linha somente, como no exemplo abaixo:

• Se houver muitas informações a respeito de cada aba, de modo que estas não caibam dentro dos tópicos expansíveis, deve-se criar uma lista de tópicos para cada aba, conforme exemplo abaixo:

Para separar os campos e filtros obrigatórios, pode ser separado da seguinte forma:

Veja abaixo quais são os filtros e o que impactam na pesquisa:

Filtros Obrigatórios:

• Período Letivo: deve-se informar o período letivo. Ao preencher esse filtro, serão exibidas apenas parcelas que estejam vinculadas a contrato financeiro do respectivo período informado.

Filtros Opcionais:

• Aluno: é possível realizar a pesquisa de parcelas vinculadas ao contrato financeiro de um aluno específico.
• Responsável:pode-se filtrar parcelas vinculadas a um responsável financeiro específico(informação que conta no contrato financeiro)

Observação: Alguns filtros e campos terão que ter exemplo do que pode ser inserido, a fim de ajudar na compreensão para a utilização do campo. Exemplo:

• Fornecedor: empresa ou pessoa física para a qual será feito o pagamento da conta.
• Vencimento: vencimento da conta.
• Valor: valor do custo da conta.(exemplo: valor da conta de agua R$500,00)
• Data de emissão: data em que a conta a pagar foi emitida
• Competência: mês e ano da competência da conta.Exemplo: A conta foi gerada no mês de agosto de 2022, então sua competência será 08/2022
• Observação: campo texto disponível para discriminar informações sobre a conta

• Em casos de cadastros em que clientes do produto Modular não possuam acesso, deve-se incluir um aviso sobre a rotina não estar disponível para clientes modulares, já no início da documentação, para que o usuário não tenha que ler toda a documentação e só depois descobrir que não conseguirá acessar o cadastro:

Em algumas telas e rotinas do sistema, existem filtros que aparecem com certa frequência especialmente quando é possível procurar pelo nome e código, e para realizar a busca, é possível procurar com %, então, quando for documentar uma rotina na qual tenha este filtro, pode-se inserir a informação de como procurar com o sinal de %.

No Mentor Web, é possível efetuar uma pesquisa inserindo os caracteres % antes ou depois da palavra inserida para facilitar a busca da informação correta. Por exemplo:

• Para filtrar todos que possuem a palavra maria: %maria%
• Para filtrar todos que iniciam com a palavra maria: maria%
• Para filtrar todos que terminam com a palavra maria: %maria%
• Para filtrar todos que contenham as palavras joão e maria: %joão% maria”

Ao utilizar imagens na documentação, é recomendado seguir as seguintes diretrizes:

• Evitar o uso da cor vermelha para circundar campos na imagem, pois essa cor é comumente associada a erros. Em vez disso, utilize a cor azul para destacar os campos relevantes.

• Limite o número de anotações em azul na imagem a um máximo de três, para garantir uma apresentação visual limpa e organizada.

• Ao inserir a imagem, mantenha seu tamanho original para evitar distorções ou perda de qualidade. Certifique-se de que a imagem seja suficientemente legível e detalhada para os usuários.

• Ao inserir a imagem, escolha a opção “nolink” para que ela não seja expandida quando o usuário clicar sobre ela. Isso evita interrupções desnecessárias na navegação e mantém o foco na documentação.

Seguindo essas diretrizes, você poderá incorporar imagens de forma eficaz na documentação, garantindo clareza e usabilidade para os usuários.

• A imagem deve ser coerente com a informação que está sendo passada, e sua qualidade também é importante. Espaçamento entre os textos e as imagens das telas.
• Ao inserir a imagem, o endereço dela ficará da seguinte forma na documentação:

1. O nome da documentação – Help Mentor Web.
2. O módulo (Financeiro, Acadêmico, Portal do Aluno, entre outros).
3. A operação que seria o menu que está sendo tratado (nome da imagem).
4. “nolink” para que não seja possível expandir a imagem quando clicado em cima.
5. Duas barras (\\) serve para pular uma linha.

• Uma forma de sinalizar na imagem quando existe mais de um processo, é enumerar e explicar o processo, por exemplo:

• Imagens de botão no meio do texto não devem ser utilizados. Existem algumas documentações que encontram-se neste formato, porém, esta forma já não segue mais o padrão de documentação, portanto, não deve-se mais ser utilizado. Abaixo um exemplo:

• Ao inserir imagens na documentação, verificar se as informações contidas nelas são de caráter fictício, para que não sejam expostos dados e informações verídicas, como: Nome de aluno/responsável, CPF, Telefone, entre outros.
• Utilizar nas imagens, palavras/nomes com coerência, conforme exemplo abaixo:

* A inclusão de vídeos no início da documentação é crucial para facilitar o entendimento dos usuários sobre o funcionamento do sistema. Ao disponibilizar um vídeo introdutório, os usuários podem visualizar as operações de forma prática e dinâmica, proporcionando uma compreensão clara desde o início. Isso torna a documentação mais eficaz, melhorando a experiência do usuário e aumentando a eficiência no uso do sistema.

• Acrescente a seguinte frase acima do vídeo: “Clique no vídeo para ampliá-lo. Após assisti-lo, pressione a tecla ESC para sair.” Esta instrução auxilia os usuários que desejam maximizar o vídeo caso tenham dificuldades em visualizá-lo. Além disso, ressalta a necessidade de utilizar a tecla ESC para sair da exibição, uma vez que não há um botão “Sair” na tela do vídeo.

• O vídeo deve vir após a explicação da finalidade da rotina conforme modelo abaixo:

• O tempo de duração do vídeo não deve ser muito alto, e deve mostrar a rotina específica que está sendo tratada na documentação.
• Os dados que aparecerem no vídeo devem, preferencialmente ser de caráter ilustrativo, sem dados verídicos, e os vídeos devem ser gravados em base local ou na base de demonstração.
• Ao gravar a rotina, deve-se enquadrar a gravação do banner para baixo, para que não apareça os links favoritados na barra de favoritos, nem as abas que estavam em aberto no navegador, e nem mesmo o banner, conforme mostra a imagem abaixo:

• Na descrição do vídeo, deve conter o nome do menu, acompanhado do nome do processo que está sendo realizado:

Neste caso, a documentação é referente à Consulta de Contas a Pagar, e o nome do vídeo deve ser referente ao processo de consulta de contas a pagar.

• Assim como as imagens, o vídeo também deverá ser centralizado, e para isso a resolução do vídeo deve ser de 1080×500. Com isso, o endereço na documentação ficará da seguinte forma:

1. Local de onde vem o vídeo (Vimeo, Youtube e etc).
2. Endereço de identificação do vídeo.
3. Dimensão do vídeo, que pode ser ajustado, mas o padrão utilizado é 1080×500.

* A ferramenta utilizada para gravar GIF é o Gif Record, que deverá ser baixado no computador. Para baixar o programa, deve-se acessar o link http://www.gifrecorder.com/download.htm#.Ykc_Oqhv_cs. Após gravar o GIF, deve-se salvá-lo em sua máquina, e posteriormente, adicioná-lo a documentação.

• A ferramenta utilizada para gravar vídeos é o Screen Recorder, que é um serviço online de gravação de vídeos. Para utilizar, basta acessar o link (https://screencast-o-matic.com/screen-recorder) e seguir com as orientações mostradas em tela.
• Posteriormente, este vídeo deverá ser carregado no Vimeo com a conta da Edusoft, e após estes processos, o vídeo poderá ser inserido na documentação.

• Acesso a conta da Edusoft no Vimeo: E-mail : [email protected] Senha : $ucesso2021

Existem alguns procedimentos diferenciados na tecnologia G5, desta forma, para documentá-la, existem alguns procedimentos a serem seguidos:

• Na tecnologia do novo Mentor Web G5, por padrão as telas são carregadas com os campos em branco, na documentação de telas dos módulos que são do novo Mentor Web G5 utilizar o seguinte texto na introdução:
  

“Ao clicar nesta opção, a tela expandida primeiramente é apresentada com os campos em branco. Para inserir um novo indicador, basta preencher as informações obrigatórias.”

• Padronizar nas imagens da nova tecnologia do Mentor Web, a combo de pesquisa conforme imagem abaixo.

Usar a imagem CAMPO PARA PESQUISAR nas telas: