Criando Projetos Gráficos com a FreeSkin

Fui dar umas dicas a um companheiro sobre como usar a FreeSkin pra fazer um layout, e em vez de escrever num e-mail pra ele resolvi escrever aqui pra compartilhar e tentar sistematizar o conhecimento sobre isso.

Isso é um rascunho: vamos manter esse tópico aqui como um placeholder e depois é preciso escrever algo "de respeito"! -- AT

Criando o Lay-Out

O processo de criação é mais ou menos o seguinte:

• Cria-se um design em HTML mesmo
  • esse passo pode ser feito por um web designer.
• Nesse design, identifica-se onde vai entrar o conteúdo variável de cada tópico no TWiki.
• Separa-se esse design em duas partes (de código HTML mesmo):
  • a quem vem antes do conteúdo -- "cola-se" no FreeSkinPreTopic
  • a quem dem depois do conteúdo -- "cola-se" no FreeSkinPosTopic
• Vai testando (adicionando ?skin=free a URL de qualquer tópico na web) e arrumando o que for necessário.
• Quando estiver pronto, configura a FreeSkin como skin padrão para a web, fazendo no WebPreferences:
  * Set SKIN = free

Notas:

• antes do conteúdo HTML no FreeSkinPosTopic e no FreeSkinPreTopic, coloque:
  <verbatim>
%STARTINCLUDE%\
• depois do conteúdo HTML no FreeSkinPosTopic e no FreeSkinPreTopic, coloque:
  %STOPINCLUDE%
</verbatim>

Botões de manipulação do conteúdo

Lembre que em algum lugar do design devem estar os botões "Editar", "Anexar" etc.

Esses são os endereços das ações:

• Editar :
    %SCRIPTURL%/edit%SCRIPTSUFFIX%/%BASEWEB%/%BASETOPIC%?t=%GMTIME{"$mo$day$hour$min$sec"}%
• Anexar :
    %SCRIPTURL%/attach%SCRIPTSUFFIX%/%BASEWEB%/%BASETOPIC%?t=%GMTIME{"$mo$day$hour$min$sec"}%
• Versões :
    %SCRIPTURL%/rdiff%SCRIPTSUFFIX%/%BASEWEB%/%BASETOPIC%
• Mais Opções :
    %SCRIPTURL%/oops%SCRIPTSUFFIX%/%BASEWEB%/%BASETOPIC%?template=oopsmore

Para fazer um link de edição, por exemplo, podemos fazer assim:

<a href="%SCRIPTURL%/edit%SCRIPTSUFFIX%/%BASEWEB%/%BASETOPIC%?t=%GMTIME{"$mo$day$hour$min$sec"}%"
   id="btEdit" title="Editar este Tópico">Editar</a>

Alguns Exemplos

• ProjetoGrafico - o projeto gráfico desta web (Foswikibr).
• Main.ProjetoGrafico - projeto gráfico global do twiki.softwarelivre.org.
• ImUFBA?:Forum.ProjetoGrafico - projeto gráfico do Forum Baiano de Software Livre