Faça uma pergunta »

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

Abril 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" ("===").
  • .. etc ...


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 derá 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].

Lembretes

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 Kioskea 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

A ver igualmente

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 Kioskea (pt.kioskea.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.