Ativa a pesquisa
Ativa o menu
134
292
9
2,7 mil
Celta Sistemas Wiki
Alternar menu de preferências
Alternar menu pessoal
Não autenticado(a)
Your IP address will be publicly visible if you make any edits.

Ajuda:Guia de Estilo: mudanças entre as edições

De Celta Sistemas Wiki
Mais ações
← Edição anterior
Sem resumo de edição
Sem resumo de edição
 
(28 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:
{{Cabecalho
{{Cabecalho
  |
  |
  | Guia de Estilo e Padrões de Edição
  | Guia de Estilo e Padrões
}}
}}


Linha 8: Linha 8:
__TOC__
__TOC__


== 1. Cabeçalho (Obrigatório) ==
== 1. Cabeçalho da Página ==
Toda página deve iniciar com o componente de cabeçalho para gerar o breadcrumb (navegação) e o título padrão.
Use sempre na primeira linha da página.


<div class="celta-grid" style="grid-template-columns: 1fr 1fr;">
=== Exemplo Padrão (Manuais e Tutoriais) ===
<div class="celta-card">
 
<div class="celta-card-header">Opção A: Padrão (Manuais)</div>
<pre><nowiki>
<div class="celta-card-body">
Gera a caixa azul com título. Ideal para documentações.
<pre>
{{Cabecalho
{{Cabecalho
  | [[Módulo Pai]] › [[Sub-rotina]]
  | [[Tutoriais]] › [[Sub-rotina]]
  | Título da Página
  | Título da Página de *Exemplo*
}}
}}
</pre>
</nowiki></pre>
</div>
 
</div>
'''Resultado:'''


<div class="celta-card">
<div class="celta-card-header">Opção B: Invisível (Dashboards)</div>
<div class="celta-card-body">
Gera apenas o breadcrumb. Use em páginas com design personalizado.
<pre>
{{Cabecalho
{{Cabecalho
  | [[Módulo Pai]]
  | [[Módulo Pai]] › [[Sub-rotina]]
  | no
  | Título da Página de *Exemplo*
}}
}}
</pre>
 
</div>
=== Invisível (Dashboards e Hubs) ===
</div>
 
</div>
<pre><nowiki>
{{Cabecalho | [[Invisível (Dashboards e Hubs)]] | no}}
</nowiki></pre>
 
'''Resultado:'''
 
{{Cabecalho | [[Invisível (Dashboards e Hubs)]] | no}}


----
----


== 2. Caixas de Aviso (Notas) ==
== 2. Caixas de Aviso (Notas) ==
Use o template <code>{{Nota}}</code> para destacar informações. Agora possuímos 4 cores semânticas.
Sintaxe:
<pre><nowiki>
{{Nota | tipo | TÍTULO | Texto...}}
</nowiki></pre>
 
=== Tipo: Dica / Informação ===
 
<pre><nowiki>
{{Nota|info|DICA|Texto da dica ou informação complementar.}}
</nowiki></pre>
 
'''Resultado:'''
{{Nota|info|DICA|Texto da dica ou informação complementar.}}
 
=== Tipo: Sucesso / Novidade ===


=== Sintaxe ===
<pre><nowiki>
<pre>{{Nota | TIPO | TÍTULO | Seu texto aqui... }}</pre>
{{Nota|success|SUCESSO|Para novidades ou boas práticas.}}
</nowiki></pre>


=== Tipos Disponíveis ===
'''Resultado:'''
{{Nota|success|SUCESSO|Para novidades ou boas práticas.}}


{{Nota|info|INFO (Padrão)|Use para dicas gerais ou informações complementares. (Se não informar o tipo, este será usado).}}
=== Tipo: Atenção / Alerta ===
<pre>{{Nota|info|DICA|Texto da dica...}}</pre>


{{Nota|success|SUCESSO / NOVIDADE|Use para indicar novas funcionalidades ou boas práticas recomendadas.}}
<pre><nowiki>
<pre>{{Nota|success|NOVIDADE|Versão 15.0 lançada...}}</pre>
{{Nota|warning|ATENÇÃO|Alertas que requerem cuidado.}}
</nowiki></pre>


{{Nota|warning|ATENÇÃO|Use para alertas que requerem cuidado do usuário, mas não são críticos.}}
'''Resultado:'''
<pre>{{Nota|warning|ATENÇÃO|Verifique o cadastro antes de salvar...}}</pre>
{{Nota|warning|ATENÇÃO|Alertas que requerem cuidado.}}


{{Nota|danger|CUIDADO / CRÍTICO|Use para riscos de perda de dados, bloqueios ou ações irreversíveis.}}
=== Tipo: Crítico / Erro ===
<pre>{{Nota|danger|IMPORTANTE|Não desligue o servidor durante o processo...}}</pre>
 
<pre><nowiki>
{{Nota|danger|CRÍTICO|Risco de perda de dados ou bloqueios.}}
</nowiki></pre>
 
'''Resultado:'''
{{Nota|danger|CRÍTICO|Risco de perda de dados ou bloqueios.}}


----
----


== 3. Tabelas de Campos (Data Grid) ==
== 3. Tabela de Campos ==
Substitua as tabelas manuais pelo componente <code>{{TabelaCampos}}</code>. Ele padroniza a largura (30% campo / 70% descrição) e as cores.
Use para listar parâmetros. Utilize `1=` e `2=` para evitar quebras.


=== Sintaxe ===
=== Exemplo de Tabela ===
<pre>
 
<pre><nowiki>
{{TabelaCampos|
{{TabelaCampos|
   {{Linha| Nome do Campo | Explicação do que deve ser preenchido. }}
   {{Linha
   {{Linha| Outro Campo | Outra explicação. }}
  | 1= Nome do Campo
  | 2= Explicação do campo.
  }}
   {{Linha
  | 1= Outro Parâmetro
  | 2= Explicação com lista:
* Item A
* Item B
  }}
}}
}}
</pre>
</nowiki></pre>
 
'''Resultado:'''


=== Resultado Visual ===
{{TabelaCampos|
{{TabelaCampos|
   {{Linha|Data Inicial|Informe a data de início do relatório.}}
   {{Linha
   {{Linha|Cliente|Selecione o cliente ou deixe em branco para todos.}}
  | 1= Nome do Campo
  | 2= Explicação do campo.
  }}
   {{Linha
  | 1= Outro Parâmetro
  | 2= Explicação com lista:
* Item A
* Item B
  }}
}}
}}


----
----


== 4. Cards e Grids (Layout) ==
== 4. Cards e Menus ==
Use para criar menus visuais, dashboards ou agrupar informações lado a lado.


=== 4.1. Cards Básicos ===
=== 4.1. Cards Simples ===
Use <code>{{Card}}</code> para blocos simples de texto.


<pre>
<pre><nowiki>
<div class="celta-grid">
<div class="celta-grid">
   {{Card|titulo=Dicas|texto=Texto do card 1...}}
   {{Card | titulo=Dicas | texto=Texto do card...}}
   {{Card|titulo=Manual|texto=Texto do card 2...}}
   {{Card | titulo=Manual | texto=Texto do card...}}
</div>
</div>
</pre>
</nowiki></pre>
 
'''Resultado:'''


=== 4.2. Menus de Navegação (CardMenu) ===
<div class="celta-grid">
Use <code>{{CardMenu}}</code> para criar listas de links com acentos coloridos. Ideal para Hubs de conteúdo.
  {{Card | titulo=Dicas | texto=Texto do card...}}
  {{Card | titulo=Manual | texto=Texto do card...}}
</div>


'''Cores disponíveis:''' blue, dark, orange, green, red.
=== 4.2. Menus de Navegação (Hubs) ===
Cores: `blue`, `dark`, `orange`, `green`, `red`.


<pre>
<pre><nowiki>
<div class="celta-grid">
<div class="celta-grid">
{{CardMenu
{{CardMenu
Linha 111: Linha 152:
}}
}}
</div>
</div>
</pre>
</nowiki></pre>
{{Nota|warning|IMPORTANTE|Ao usar o CardMenu, os asteriscos (*) da lista devem estar colados na margem esquerda, sem espaços antes.}}
 
'''Resultado:'''


'''Resultado Visual:'''
<div class="celta-grid">
<div class="celta-grid">
{{CardMenu
{{CardMenu
Linha 126: Linha 167:
</div>
</div>


=== 4.3. Grid de 2 Colunas Fixas ===
=== 4.3. Listas de Links (CardLista) ===
Por padrão, a grid divide em 3 ou 4 colunas dependendo da tela. Para forçar '''2 colunas grandes''', adicione a classe <code>celta-grid-2</code>.
Usado para listas limpas sem borda colorida (Ex: Acesso Rápido).
* **Atenção:** Os asteriscos (*) devem ficar colados na margem esquerda.
 
<pre><nowiki>
<div class="celta-grid">
{{CardLista
| icone = bi-lightning-fill
| cor = #f59e0b
| titulo = Acesso Rápido
| conteudo =
* [[Link 1]]
* [[Link 2]]
}}
</div>
</nowiki></pre>
 
'''Resultado:'''


<pre>
<div class="celta-grid">
<div class="celta-grid celta-grid-2">
{{CardLista
  {{Card...}}
| icone = bi-lightning-fill
  {{Card...}}
| cor = #f59e0b
| titulo = Acesso Rápido
| conteudo =
* [[Página principal|Link 1]]
* [[Página principal|Link 2]]
}}
</div>
</div>
</pre>


----
----


== 5. Imagens e Badges ==
== 5. Ícones ==
 
O Wiki utiliza a biblioteca '''Bootstrap Icons''': [https://icons.getbootstrap.com/ Galeria Oficial].
 
* **Uso em Cards:** Passe o nome da classe no parâmetro `icone` (Ex: `icone = bi-gear`).
* **Uso no Texto:** Use a tag `<i>`:
*: ` <i class="bi bi-check-circle"></i> ` -> <i class="bi bi-check-circle"></i>
 
----
 
== 6. Imagens e Badges ==
 
=== 6.1. Prints de Tela ===
 
<pre><nowiki>
{{Print|Nome_do_Arquivo.png|Legenda da imagem}}
</nowiki></pre>
 
=== 6.2. Etiquetas de Versão ===
 
<pre><nowiki>
Funcionalidade Nova {{Badge|novo|v15.0}}
</nowiki></pre>
 
'''Resultado:'''
 
Funcionalidade Nova {{Badge|novo|v15.0}}
 
=== 6.3. Logo Oficial (SVG) ===
Exibe a logo vetorizada do sistema.
* **Uso:** `{{Logo|width=200px}}`
 
'''Resultado:'''
{{Logo|width=200px}}
 
----
 
== 7. Rodapé de Contato ==
Adicione apenas o código abaixo no final das páginas.
 
=== Suporte Técnico (Padrão) ===
 
<pre><nowiki>
{{ContatoSuporte}}
</nowiki></pre>
 
'''Resultado:'''
 
{{ContatoSuporte}}
 
=== Financeiro / Comercial ===
 
<pre><nowiki>
{{ContatoFinanceiro}}
</nowiki></pre>


=== Prints de Tela ===
'''Resultado:'''
Padroniza o tamanho e a borda das imagens.
<pre>{{Print|Nome_Arquivo.png|Legenda da imagem}}</pre>


=== Badges (Etiquetas) ===
{{ContatoFinanceiro}}
Use ao lado de títulos para destacar versões.
<pre>== Instalação {{Badge|novo|v15.2}} ==</pre>
'''Resultado:''' <span style="font-size:1.2em; font-weight:bold;">Instalação {{Badge|novo|v15.2}}</span>


----
----


== 6. Template Base (Copiar e Colar) ==
== 8. Template Base (Copiar e Colar) ==
''Use este código para iniciar uma nova página de manual rapidamente:''
Copie este bloco para iniciar uma nova página.


<pre>
<pre><nowiki>
{{Cabecalho
{{Cabecalho
  | [[Módulo]] › [[Funcionalidade]]
  | [[Módulo]] › [[Funcionalidade]]
Linha 160: Linha 270:
}}
}}


Breve resumo sobre o que é esta funcionalidade e para que ela serve.
Resumo da funcionalidade.


{{Nota|info|PRÉ-REQUISITO|Necessário estar na versão 15.0 ou superior.}}
{{Nota|info|PRÉ-REQUISITO|Necessário estar na versão 15.0 ou superior.}}
Linha 171: Linha 281:


{{TabelaCampos|
{{TabelaCampos|
   {{Linha|Campo 1|Descrição do campo 1.}}
   {{Linha
  {{Linha|Campo 2|Descrição do campo 2.}}
  | 1= Nome do Campo
  | 2= Explicação do campo.
  }}
}}
}}


== 3. Passo a Passo ==
== 3. Passo a Passo ==
# Clique em '''Incluir''';
# Clique em '''Incluir''';
# Preencha os dados conforme a tabela acima;
# Preencha os dados;
#: {{Print|Exemplo_Tela.png|Tela de cadastro}}
#: {{Print|Exemplo_Tela.png|Tela de cadastro}}
# Clique em '''Gravar'''.
# Clique em '''Gravar'''.


{{Nota|success|DICA|Você pode usar a tecla F5 para gravar rapidamente.}}
{{ContatoSuporte}}
</pre>
</nowiki></pre>

Edição atual tal como às 21h26min de 1 de dezembro de 2025

Início /

Guia de Estilo e Padrões

Atualizado em: 01/12/2025

Este guia documenta os componentes visuais do Celta Wiki Framework. Utilize estes padrões para manter a consistência, agilidade e beleza da documentação.

1. Cabeçalho da Página

Use sempre na primeira linha da página.

Exemplo Padrão (Manuais e Tutoriais)

{{Cabecalho
 | [[Tutoriais]] › [[Sub-rotina]]
 | Título da Página de *Exemplo*
}}

Resultado:

Início / Módulo Pai › Sub-rotina

Título da Página de *Exemplo*

Atualizado em: 01/12/2025

Invisível (Dashboards e Hubs)

{{Cabecalho | [[Invisível (Dashboards e Hubs)]] | no}}

Resultado:

Início / Invisível (Dashboards e Hubs)

2. Caixas de Aviso (Notas)

Sintaxe: 

{{Nota | tipo | TÍTULO | Texto...}}

Tipo: Dica / Informação

{{Nota|info|DICA|Texto da dica ou informação complementar.}}

Resultado:

DICA

Texto da dica ou informação complementar.

Tipo: Sucesso / Novidade

{{Nota|success|SUCESSO|Para novidades ou boas práticas.}}

Resultado:

SUCESSO

Para novidades ou boas práticas.

Tipo: Atenção / Alerta

{{Nota|warning|ATENÇÃO|Alertas que requerem cuidado.}}

Resultado:

ATENÇÃO

Alertas que requerem cuidado.

Tipo: Crítico / Erro

{{Nota|danger|CRÍTICO|Risco de perda de dados ou bloqueios.}}

Resultado:

CRÍTICO

Risco de perda de dados ou bloqueios.

3. Tabela de Campos

Use para listar parâmetros. Utilize `1=` e `2=` para evitar quebras.

Exemplo de Tabela

{{TabelaCampos|
  {{Linha
   | 1= Nome do Campo
   | 2= Explicação do campo.
  }}
  {{Linha
   | 1= Outro Parâmetro
   | 2= Explicação com lista:
* Item A
* Item B
  }}
}}

Resultado:

Campo / Parâmetro Função e Instruções
Nome do Campo Explicação do campo.
Outro Parâmetro Explicação com lista:
  • Item A
  • Item B

4. Cards e Menus

4.1. Cards Simples

<div class="celta-grid">
  {{Card | titulo=Dicas | texto=Texto do card...}}
  {{Card | titulo=Manual | texto=Texto do card...}}
</div>

Resultado:

Dicas

Texto do card...

Manual

Texto do card...

4.2. Menus de Navegação (Hubs)

Cores: `blue`, `dark`, `orange`, `green`, `red`. 

<div class="celta-grid">
{{CardMenu
 | cor = orange
 | icone = bi-star
 | titulo = Favoritos
 | conteudo = 
* [[Link 1]]
* [[Link 2]]
}}
</div>

Resultado:

Favoritos

Usado para listas limpas sem borda colorida (Ex: Acesso Rápido).

  • **Atenção:** Os asteriscos (*) devem ficar colados na margem esquerda.
<div class="celta-grid">
{{CardLista
 | icone = bi-lightning-fill
 | cor = #f59e0b
 | titulo = Acesso Rápido
 | conteudo =
* [[Link 1]]
* [[Link 2]]
}}
</div>

Resultado:

Acesso Rápido

5. Ícones

O Wiki utiliza a biblioteca Bootstrap Icons: Galeria Oficial.

  • **Uso em Cards:** Passe o nome da classe no parâmetro `icone` (Ex: `icone = bi-gear`).
  • **Uso no Texto:** Use a tag ``:
    ` ` ->

6. Imagens e Badges

6.1. Prints de Tela

{{Print|Nome_do_Arquivo.png|Legenda da imagem}}

6.2. Etiquetas de Versão

Funcionalidade Nova {{Badge|novo|v15.0}}

Resultado:

Funcionalidade Nova v15.0

6.3. Logo Oficial (SVG)

Exibe a logo vetorizada do sistema.

  • **Uso:** `
    `

Resultado:

7. Rodapé de Contato

Adicione apenas o código abaixo no final das páginas.

Suporte Técnico (Padrão)

{{ContatoSuporte}}

Resultado:


Fale com nosso suporte via e-mail ou WhatsApp.

E-mail → Suporte
WhatsApp → Suporte
Celta Sistemas


Financeiro / Comercial

{{ContatoFinanceiro}}

Resultado:

Contato

Email
[email protected]

WhatsApp
(66) 3515-0001

Site
celtasistemas.com.br

8. Template Base (Copiar e Colar)

Copie este bloco para iniciar uma nova página. 

{{Cabecalho
 | [[Módulo]] › [[Funcionalidade]]
 | Título do Manual
}}

Resumo da funcionalidade.

{{Nota|info|PRÉ-REQUISITO|Necessário estar na versão 15.0 ou superior.}}

== 1. Visão Geral ==
Explicação do conceito...

== 2. Configuração ==
Acesse o menu '''Cadastro > Operações'''.

{{TabelaCampos|
  {{Linha
   | 1= Nome do Campo
   | 2= Explicação do campo.
  }}
}}

== 3. Passo a Passo ==
# Clique em '''Incluir''';
# Preencha os dados;
#: {{Print|Exemplo_Tela.png|Tela de cadastro}}
# Clique em '''Gravar'''.

{{ContatoSuporte}}
Disponível em “https://wiki.celtasistemas.com.br/index.php?title=Ajuda:Guia_de_Estilo&oldid=1818”
Última modificação
Esta página foi modificada pela última vez em 1 de dezembro de 2025, às 21h26min.