Faça uma pergunta »

Layout gráfico (formatação) dos artigos e das Dicas

Julho 2015



O banco de conhecimentos de CommentCaMarche/Kioskea (chamado também KB, FAQ ou Dicas) utiliza um layout gráfico de tipo Wiki.

Eis as possibilidades que ela oferece no plano sintático :

Os títulos

O título geral é colocado entre dois sinais "igual" ("="). Ele é utilizado unicamente para o título da dica.

O título de nível 1 é colocado entre dois duplos sinais "igual" ("==").

O título de nível 2 é colocado entre dois triplos sinais "igual" ("===").



Observações:


A numeração (1, 1.1, 1.1.1, 1.1.2, 1.2, 1.3, 2 ....) é indicada manualmente (facultativo). Ela faz parte do nome do título. Na verdade este tipo de numeração foi abandonada e s''o é utilizada em casos que se justifique este formato.

Não dê os mesmos nomes aos títulos e subtítulos, isto pode provocar problemas para o índice;

Não inclua nenhum link nos títulos nem nos subtítulos pelas mesmas razões.

Sintaxe

=Título de nível 1=
==Título de nível 2==
=====Título de nível 5=====

As listas

Sintaxe :

* Ponto nível 1
** Ponto nível 2
*** Ponto nível 3

Observe que é desaconselhado começar por um ponto de nível 2, pois a exibição será precedida de um ponto de nível 1 vazio! Cuidado também para não saltar de nível entre cada item pelas mesmas razões.

Saiba que, este formato também foi abandonado recentemente!

Sintaxe recomendada

*Teste1
*Teste2
**Teste2.1
**Teste2.2
***Teste2.2.1
***Teste2.2.2
**Teste2.3
***Teste2.3.1
****Teste2.3.1.1
**Teste2.4
**Teste2.5
*Teste3
*Teste4


Resultado:
  • Teste1
  • Teste2
    • Teste2.1
    • Teste2.2
      • Teste2.2.1
      • Teste2.2.2
    • Teste2.3
      • Teste2.3.1
        • Teste2.3.1.1
      • Teste2.4
      • Teste2.5
  • Test3
  • Teste4

Sintaxes desaconselhadas

Começar por um nível diferente de 1

Sintaxe:

****Exemplo


Resultado:


*


*


*


*


*


*
        • Exemplo

Saltar níveis de pontos

Sintaxe :

*Teste1
*Teste2
***Teste2.1.1
*Teste3

Resultado:
  • Teste1
  • Teste2
      • Teste2.1.1
  • Teste3

O índice

A palavra chave TOC com letra maiúscula e colocada entre duplos sinais '__' cria automaticamente o índice (incluindo os links para as subtítulos do artigo).

__TOC__


Observações : tenha o cuidado de:


Colocar o índice entre o título geral da dica (nível 1) e o primeiro título secundário (nível 2). Mas por uma questão de estética visual, e muitas vezes o será colocado colado ao link da imagem.

Não deixe muito espaço entre o índice e o corpo da dica, nem entre os diferentes níveis de título, pois isto prejudica a exibição do índice.

Os links

Para criar um link, basta utilizar a seguinte sintaxe:

[url texto_do_link]


Por exemplo:

[http://www.commentcamarche.net/ Site web CCM]
vai se tornar [Site web CCM].

Lembre-se

Deixe um espaço entre o URL e o texto, é muito importante! O leitor tem que respirar.

Se nenhum texto estiver indicado, o URL será utilizado como texto.

Link rápido

Você pode fazer um link direto para um artigo utilizando a seguinte sintaxe:

[contents/web/referencement.php3 Palavra chave]


Por exemplo:

[/contents/pc/carte-mere.php3 placa mãe]
> vai criar automaticamente um link para o artigo da placa mãe.

Leia: Porque o CCM não tem bate-papo

Coloque uma "[",agora sem espaço o URL do artigo/dica "espaço" (um toque) nome do artigo/dica e feche a chave sem espaço"]"

Outros links

Inserir link hipertexto: utilizar a função para buscar uma dica, artigo, software ou um produto rapidamente. O link será colocado automaticamente na mensagem.

Inserir link dinâmico [/ CCM]: substitui a palavra selecionada pelo link hipertexto; é o mais apropriado para a palavra selecionada. Esta função é equivalente à dupla chave.

As âncoras (Anchor)

(Anchor em inglês => âncora: referência hipertexto)

A anchor é constituída pelo título de nível 1 e 2 e o nome desta anchor retoma o nome do título em maiúscula, sem acento, sem caracteres especiais e sem espaço.
[/faq/#anchor-para-o- título-1-ou-2 anchor para o   título 1 ou 2]


Note que a sintaxe exata é colocar entre chaves ("[]"):


O símbolo sustenido ("#")

Ele é seguido imediatamente do nome do título ou subtítulo (sem espaço entre eles dois).

Seguido por um espaço,

Terminado pelo texto visível do link para a anchor.

É preciso então:


Utilizar somente maiúsculas e letras sem acento,

Não pontuar,

Substituir os espaços por "-",

Não colocar links nos títulos e subtítulos

Assim:


Nada de "( )",

Os " ' " são substituídos por " - ",

Os "ç" são substituídos por "c",

"1 - título" torna-se "#1- título"

Observação :

Anchor smart (inteligente)! Se você colocar um link em uma dica para um título ou um subtítulo, não faça o link à mão livre, insira o índice, pré visualize sua dica (botão "pré visualizar"), faça um clique direito sobre o título que será o alvo, depois copie o URL e cole.

Cole o endereço no lugar em que você deseja inserir seu link, depois suprima tudo aquilo que tem a partir de http até o sustenido (#), por exemplo :

[/faq/5924-mise-en-forme-des-articles-de-la-base-de-connaissance#5-les-ancres este é o nome do meu link]


Ficará assim:

[faq/sujet-5924-layout-da-página-dos-artigos-do-banco-de-conhecimento#5-os-anchor este é o nome do meu link]

As imagens

Acrescentar uma imagem

Você tem três possibilidades:


Manualmente: basta seguir a sintaxe:
[Imagem: url_da _imagem]
;

Com o botão Inserir Imagem, se sua imagem estiver hospedada na Web, e escolher a posição no texto: direita, centro, esquerda, pelas opções ao lado do campo de integração da imagem.

Pelo campo Enviar um arquivo, se sua imagem estiver presente no seu disco rígido (por exemplo, uma captura de tela): utilize os botões Percorrer. Depois de ter clicado em Baixar, a imagem será carregada no Kioskea; e o código será inserido na dica. Cabe a você cortar/colar e colocar a imagem no lugar desejado dentro da dica.

Para maiores informações sobre as imagens do banco de conhecimento: Inserir uma imagem nos artigos e dicas

Veja também: Inserir uma imagem nas dicas do Kioskea

Acrescentar uma imagem clicável

Isto poderá ser útil se precisarmos aumentar a imagem para ver os detalhes. A baliza que deverá ser introduzida é a seguinte:

[url_da_imagem [Imagem: url_da_imagem]]


Então: com o URL carregado em sua dica faça o seguinte,


Copie o URL de http até o formato por exemplo png.

Abra uma chave diante da chave do URL carregado e cole o URL, dê um espaço. Suprima "-s-" do URL copiado

Feche novamente, com uma chave, o primeiro URL

Ficará assim:

[URL copiado+um espaço depois de ter suprimido o que foi explicado acima[URL original fechado com "]]"duplo

Saiba que, recentemente foi integrada a opção de upload já com clicável, dependendo do tamanho da imagem, e isso automaticamente. Mas, nem todas as imagens serão carreadas com esse recurso.

Atributos

É possível adicionar atributos complementares, que podem ser acumulados. Os atributos são separados pelo sinal "|" (AltGr+6). Eles podem ser colocados em qualquer ordem mas o atributo ALT deve ser sempre o último.

Lista dos atributos

Posicionamento da imagem à esquerda:
[[url-de-l-imagem|left]]


Posicionamento da imagem à direita:
[[url-de-l-imagem|right]]


Posicionamento da imagem no Centro (padrão):
[[url-de-l-imagem|center]]


Dimensionamento da imagem (en pixels) :
[[[url-de-l-imagem|123px]]]


Atributo ALT da imagem, trata-se do último atributo antes da chave:
[[url-de-l-imagem|texto]]
: em desuso.

Saiba que, o posicionamento agora é possível de ser definido manualmente, ao clicar nas opções na linha da integração de imagens.

Balizas código, negrito, itálico e sublinhado

Para estas balizas, basta selecionar o texto no qual você desejar carregar seu layout gráfico e clicar sobre um dos botões para este fim, no alto à esquerda, na zona da edição:

Código

Com esta baliza, o formato é preservado e o texto é colocado em azul:

<code>Code</code>

O que resulta:
Code


Note que ao contrário das outras balizas, a baliza Código coloca-se automaticamente em nova linha e coloca tudo o que tiver depois dele também em nova linha:

Resultado:

Isto é um Teste da baliza <code>Code</code> retorno automático em nova linha

Resultado:

Isto é um Teste da baliza
Code
retorno automático em nova linha

Atenção: não traduza o código! Código deve permanecer code.

Negrito

<gras>Texto em negrito</gras>

Resultado:

Texto em negrito

Itálico

<ital>Texto em itálico</ital>

Resultado:

Texto em itálico

Sublinhado

<souligne>Texto sublinhado</souligne>

Resultado:

 Texto sublinhado 

Os quadros

Siga este link

Vela igualmente: Dicas e conselhos para a redação
Para uma leitura offline, é possível baixar gratuitamente este artigo no formato PDF:
Layout-grafico-formatacao-dos-artigos-e-das-dicas.pdf

Veja também

Na mesma categoria

Formatting articles of the knowledge base
Por aquarelle em 13 de maio de 2008
Presentación de los artículos de la base de conocimientos
Por Carlos-vialfa em 3 de setembro de 2008
Mise en forme des articles de la base de connaissance
Por teutates em 5 de abril de 2007
Artigo original publicado por teutates. Tradução feita por ninha25.
Este documento, intitulado « Layout gráfico (formatação) dos artigos e das Dicas »a partir de CCM (br.ccm.net) está disponibilizado sob a licença Creative Commons. Você pode copiar, modificar cópias desta página, nas condições estipuladas pela licença, como esta nota aparece claramente.