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

Agosto 2016



O banco de conhecimentos de br.ccm.net (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. Saiba 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).




Observações: tenha o cuidado em: 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: utilize 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-image|left]]


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


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


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


Atributo ALT da imagem, trata-se do último atributo antes da chave:
[[url-de-l-image|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 um code.

Negrito

<gras>Texte en gras</gras>

Resultado: Texto em negrito

Itálico

<ital>Texte en italique</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

Veja também :
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.