Criando sites não colaborativos com o DokuWiki

Criando sites não colaborativos com o DokuWiki

Graças à Wikipédia, todo mundo já conhece o conceito de wiki. O que muita gente não sabe é que um wiki também pode ser um sistema muito prático para criação e manutenção de sites não colaborativos, mas que se apresentam aos visitantes como sites feitos de maneira tradicional. Vamos aprender como neste tutorial.

Se você ainda não sabe o que é um wiki, eu explico: um wiki é um site colaborativo, ou seja, as pessoas que tiverem permissão para tal podem acessar o site e fazer alterações, incluir novas páginas ou mesmo excluí-las. O caso mais famoso de wiki é a Wikipédia:

http://pt.wikipedia.org

Na Wikipédia qualquer um pode criar novas entradas, ou fazer alterações nas que já existem. O procedimento é todo realizado online, pela janela do navegador. Isso permite que várias pessoas trabalhem no site ao mesmo tempo, tornando o wiki a ferramenta perfeita para sites colaborativos.

E para que eu vou querer usar isso?

“O site é só meu, ninguém mais vai mexer nele!” Sim, o meu também é assim. Só que fazer um site da maneira tradicional pode dar um baita trabalho. Você tem que criar a página em HTML no seu computador, testar no navegador, subir para o servidor, e se notar algum erro vai de novo editar o HTML, testar no navegador, subir para o servidor… E quando cria uma página nova? Tem que editar a página de índice para incluir o link para ela, ver se o link está funcionando direito… Uma tremenda chatice.

Que tal criar e editar páginas direto online? Tem um erro na página? Clique no botão Editar dela, acerte e clique em Salvar. Tudo online, direto no servidor. E ninguém vai poder editar as suas páginas além de você, porque vamos bloquear o registro de usuários. Interessou? Então continue lendo.

Ao invés de ter que programar a página em HTML e subir para o seu servidor, por exemplo, você simplesmente acessa a página inicial do seu wiki, clica no botão de edição e sai escrevendo o texto, de maneira muito semelhante à edição de documentos no OpenOffice ou no Word, direto online. O DokuWiki oferece até uma barrinha de formatação para negrito, itálico, links e afins, dê uma olhada:

m38ab2e35

Quer experimentar? Então acesse esta página de testes, clique no botão Edit this page e brinque de formatar o texto usando a barra de formatação. Note que para formatar o texto de maneira adequada, o DokuWiki usa uma sintaxe bastante fácil de memorizar.

Opa, sintaxe?

Essa palavra deve despertar em você péssimas lembranças das aulas de português, mas é na verdade muito simples. A sintaxe é o conjunto de marcações que o wiki usa para saber como formatar um texto. No DokuWiki, por exemplo, **dois asteriscos** indicam que o texto deve ficar em negrito, e //duas barrinhas// indicam o itálico. Se você escrever:

Quando eu precisar de um tradutor vou chamar o **Roberto**.

“Roberto” vai ficar em negrito. Você pode incluir os asteriscos em volta do nome por conta própria ou selecionar o nome com o mouse e clicar no botão de negrito para que o DokuWiki cuide disso para você. Depois é só clicar no botão para gravar a página e pronto! Obviamente a sintaxe do DokuWiki vai muito além disso, e você pode aprender mais sobre ela aqui.

E para criar páginas novas? É muito simples. Edite mais uma vez a página de testes e crie um link para a página nova, que ainda não existe. Por exemplo:

[[teste.html|Teste]]

Grave a página e dê uma espiada no resultado: “Teste” é um link para a página teste.html, que ainda não existe – a não ser que outro leitor do Guia do Hardware tenha chegado primeiro 🙂 Clique no link e uma mensagem indica que a página não existe; aí você clica em Create this page para criá-la.

Viu como é fácil criar e editar páginas? Imagine ter essa praticidade toda para fazer o seu site? Você vai poder fazer alterações e incluir novas páginas sem muito trabalho.

E qual é a diferença do DokuWiki para os outros wikis?

Há várias opções de wikis disponíveis na internet, cada um com sua sintaxe própria, e qual você vai escolher vai depender de suas necessidades e habilidades. Se você manja de Python pode preferir o MoinMoin, movido a Python. Se já estiver acostumado com a sintaxe da Wikipédia pode preferir o MediaWiki, que é o mesmo motor da enciclopédia online.

Eu escolhi o DokuWiki por três motivos. Primeiro, porque ele é feito em PHP, e eu conheço PHP. Para quem conhece a linguagem, mesmo que minimamente, é muito fácil fazer alterações no DokuWiki. Segundo, a sintaxe é simples e eu não tenho que ficar consultando a documentação para lembrar dela. E terceiro, porque cada página é armazenada como um arquivo de texto simples, fácil de fazer backup e de manipular fora do wiki, se por algum motivo isso for necessário – leia-se: um dia você decide migrar o site para outro sistema e aí pode criar ferramentas que automatizam isso para você, já que o fonte das páginas está acessível e tem sintaxe simples.

Instalação e configuração

Então vamos pôr a mão na massa e fazer a instalação. Para começar, vamos baixar a versão mais recente do DokuWiki neste link. Enquanto escrevo este artigo, a versão estável mais recente é a 2009-02-14. Descompacte o arquivo; você terá a pasta dokuwiki-2009-02-14. Suba o conteúdo dessa pasta (e não a pasta em si) para o diretório do host que vai hospedar suas páginas online. No meu caso, por exemplo, a pasta que hospedará as páginas se chama bechtranslations.com.br, e é para ela que vou subir os arquivos.

Depois de subir os arquivos, acesse a página de instalação, que fica em seudomínio/install.php. Neste momento, pode ser que surjam mensagens de erro do tipo “O DokuWiki não tem permissão de escrita em {DOCUMENT_ROOT}seudomínio/conf/. Você precisa corrigir as configurações de permissão nesse diretório!” Se for o caso, nada de pânico, é só acertar as permissões de acesso de algumas pastas. O assunto dá pano para manga, pois há várias maneiras de configurar as permissões. Elas estão bem detalhadas nesta página do site do DokuWiki.

Se não houver problemas com as permissões, você poderá chegará à tela de configuração, onde irá inserir algumas informações sobre o wiki. No topo da tela, à direita, você pode mudar o idioma. Os campos a preencher são:

  • Nome do Wiki: o nome do seu site. No meu caso, Bech Translations.

  • Habilitar Lista de Controle de Acessos: é útil quando seu wiki tem outros usuários e você quer delegar diferentes níveis de acesso a eles. Não custa deixar marcado.

  • Superusuário: o administrador do wiki. Use o nome de usuário de sua preferência.

  • Nome completo, E-mail, Senha: estes eu não preciso explicar 🙂

  • Política inicial de permissões: esta aqui é muito importante. Como vamos fazer um site que não aceita contribuições do público, o melhor é escolher “Wiki público”, que permite o acesso para leitura por todos, mas que só permite a alteração de página e o envio de arquivos por usuários registrados.

Clique em Salvar e vamos em frente. Se você não levantou com o pé esquerdo, vai receber a mensagem “A configuração terminou com sucesso. Agora você deve excluir o arquivo install.php. Conheça o seu novo DokuWiki!” É importante que você exclua o arquivo install.php mesmo, para evitar problemas de segurança. Seu wiki já deve estar disponível em seudomínio/doku.php. É um bom momento para verificar se está tudo funcionando, então vamos lá.

Clique no botão Autenticar-se, na parte inferior da página, e faça o login com o usuário que criou durante a instalação. Você voltará à página inicial. Clique em Criar esta página. O DokuWiki entra no modo de edição. Crie uma página qualquer só para testar. Se quiser, aproveite para testar as funções de negrito e itálico, usando a barra de funções acima da caixa de texto. Clique em Salvar, e se tudo correr bem a página inicial vai ser criada. Você pode brincar um pouco, adicionando links para páginas que ainda não existam, clicando nesses links e então criando as páginas. Supondo que esteja tudo funcionando, é hora de começar a fazer alguns ajustes.

Agora que já aprendemos a usar e instalar o DokuWiki, chegou a hora de mexermos nas configurações para deixar o site do jeito que nós queremos.

Organização do DokuWiki

Os arquivos de texto com suas páginas ficam no diretório data/pages. Mas você não precisa deixar tudo lá na maior bagunça, pode separar tudo em pastas. É só escrever o nome da pasta ao criar o link, assim:

[[:minhapasta:teste.html|Teste]]

Isso vai criar a página teste.html dentro da pasta data/pages/minhapasta. Ou seja, você pode facilmente reproduzir com o DokuWiki a mesma estrutura do seu site atual.

Para subir imagens, no modo de edição da página que vai receber a imagem, clique no ícone Adicionar imagens e/ou outros arquivos. Surgirá uma tela para você escolher o arquivo que quer subir e o nome que ele terá:

m7e12904f

Além de organizar as páginas em data/pages, o DokuWiki também organiza suas imagens e arquivos carregados em data/media. A pasta data/media tem a mesma estrutura da pasta de data/pages. Vou dar um exemplo: você tem uma subpasta “artigos”. Ao tentar subir uma imagem para uma página dentro dessa pasta, o DokuWiki seleciona o diretório data/media/artigos. Se você for como eu e preferir ter todas as suas imagens em uma mesma pasta, e não guardadas nas pastas correspondentes às páginas em que são usadas, crie uma pasta data/media/images e suba todas as suas imagens para lá. Você pode escolher a pasta de destino no lado esquerdo da tela que vê aí em cima. Note que o ícone com quatro folhas e setas para cima permite subir vários arquivos de uma vez.

Eu não quero que ninguém se registre!

Esta parte é bastante importante: temos que impedir que novos usuários se registrem em nosso wiki. Clique em Administrar, na barra inferior de qualquer página do DokuWiki, clique em Configurações do DokuWiki e vá até o campo disableactions. Marque Registrar, para impedir o registro de novos usuários.

Não gosto desse “Visitou” que fica na barra superior…

Então somos dois! Esse recurso se chama “breadcrumbs”, e mostra sua “trilha” pelo site, listando as páginas visitadas anteriormente. Eu acho que seria bem mais interessante trocar por uma indicação hierárquica de sua localização atual. E vejam só, dá para fazer isso! É só ir nas configurações do DokuWiki, procurar pelo campo breadcrumbs e mudar o valor de 10 para 0. Logo abaixo, marque a caixa Trilha hierárquica. O resultado:

40f764ff

Bem melhor! E acho que há algum bug na versão atual, pois numa das minhas instalações do DokuWiki ele não exibe artigos:start, mas sim artigos, e a seguir não exibe artigos:tageditor_para_iniciantes, mas apenas tageditor_para_iniciantes. É um detalhe, mas fica bem melhor.

As URLs são esquisitíssimas!

De fato, são mesmo, cheias de dois pontos e sinais de interrogação. Isso inclusive atrapalha a indexação de alguns mecanismos de busca da internet. Mas não temam, isso tem conserto. Muitos hosts aceitam o mod_rewrite, um módulo do Apache que reescreve as URLs.

Supondo que o mod_rewrite esteja ativo, crie no diretório principal do dokuwiki um arquivo chamado .htaccess com estas linhas:

<Files ~ “^[._]ht”>
Order allow,deny
Deny from all
Satisfy All
</Files>
RewriteEngine on
RewriteBase /
RewriteRule ^_media/(.*) lib/exe/fetch.php?media=$1 [QSA,L]
RewriteRule ^_detail/(.*) lib/exe/detail.php?media=$1 [QSA,L]
RewriteRule ^_export/([^/]+)/(.*) doku.php?do=export_$1&id=$2 [QSA,L]
RewriteRule ^$ doku.php [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule (.*) doku.php?id=$1 [QSA,L]

Atenção à linha RewriteBase /: se seu wiki estiver instalado em outra pasta e não no raiz, substitua a / pela pasta correta. Agora vá até as configurações do seu wiki em Administrar e, no campo userewrite, altere a opção Usar URLs “limpas” de Não para .htaccess. Aproveite e logo abaixo, no campo useslash, marque a caixa de seleção para usar a barra como separadora na URL, ao invés de dois pontos. Salve as configurações e, se tudo deu certo, suas URLs não terão mais pontos de interrogação, dois pontos e demais esquisitices. Se deu errado… você não vai mais conseguir acessar nada, nem mesmo a tela de configurações para reverter o processo 🙂

Se você teve esse problema, nesse momento deve estar me xingando… calma que tem conserto! É só alterar essa configuração manualmente no arquivo conf/local.php. Nas duas linhas a seguir:

$conf[‘userewrite’] = ‘1’;
$conf[‘useslash’] = 1;

Mude os valores de 1 para 0. E aí ligue para seu host, xingue a mãe do dono e pergunte a ele por que o mod_rewrite não está ativado 🙂

Se você estiver instalando em seu próprio servidor, pode ativar o mod_rewrite você mesmo. No Debian, use os comandos:

# a2enmod rewrite
# /etc/init.d/apache2 force-reload

Ainda não funcionou? Então acrescente estas linhas ao fim do arquivo /etc/apache2/apache2.conf:

<Directory /var/www/bechtranslations.com>

AllowOverride All
</Directory>

Alterando, obviamente, o diretório de instalação do DokuWiki na primeira linha. Reinicie o Apache. Se ainda assim não funcionar, só mesmo São Google poderá ajudá-lo.

O site está horrível, eu quero que pareça um site normal!

Sem problemas. A primeira dica é dar uma olhada na página de modelos do DokuWiki. Eu gosto bastante do modelo Incognitek, especialmente porque é fácil modificá-lo. O visual padrão dele já é interessante, mas pode ser um pouco “cheguei” para projetos mais sérios 🙂

Baixe o arquivo compactado com o tema, descompacte-o e suba a pasta incognitek para o diretório lib/tpl do seu wiki. No wiki, clique em Administrar e em Configurações do Wiki.No campo template escolha o Incognitek. Clique em salvar no fim da página e você já terá um novo visual para o seu site, veja só:

m656ee595

Opa, tá melhorando! Agora vamos customizar o Incognitek. Que tal começarmos pelo fundo da página, essa espiral verde está me dando dor de cabeça… O fundo é uma imagem chamada background.png, que está no diretório lib/tpl/incognitek/images. Se você quiser um fundo todo cinza, por exemplo, pode trocar a imagem background.png por um quadrado cinza de um pixel. Por padrão, o incognitek vem configurado para exibir a imagem de fundo no topo, alinhada ao centro, sem repetição. Vamos então mudar esse comportamento para que o nosso quadradinho cinza se repita pela tela. É só ir até o arquivo lib/tpl/incognitek/layout.css. Logo no início, na seção body, mude a linha:

background-repeat:no-repeat;

para

background-repeat:repeat;

Vamos aproveitar também para mudar as barrinhas verdes de tom mais escuro, que ficam no topo e na parte inferior, onde fica o botão Editar esta página. Para modificá-las, temos que alterar dois arquivos lá em lib/tpl/incognitek/images: content_background_top.png e content_background_bottom.png. Só tome cuidado para não pintar a imagem e perder a bordinha preta com a sombra – tente pintar a imagem e você vai entender do que eu estou falando. Uma maneira prática de alterar as cores dessas barras é abrindo-as no GIMP e mexendo em Ferramentas > Ferramentas de Cor > Colorizar. Foi assim que deixei as barras da cor que vocês podem ver na imagem abaixo:

6c362e31

Já está bem mais sóbrio do que o verde padrão, não é mesmo? Para mudar a cor do texto, dos links, do fundo dos botões etc, edite o arquivo lib/tpl/incognitek/style.ini – ele é bem organizado e não é difícil se localizar por lá.

Bom, agora vamos cuidar do logotipo. Você não vai querer esse “Incognitek” com fundo amarelo no seu site, vai? Você pode simplesmente trocar o arquivo lib/tpl/incognitek/images/logo.png pelo seu próprio logotipo, mas provavelmente vai ter que mexer no layout do modelo para que a imagem fique no lugar correto.

Eu fiz o seguinte: criei um logo com 750 pixels de largura, o que vai deixá-lo exatamente com a largura das barras e do conteúdo da página. Depois, fui em lib/tpl/incognitek/main.php e procurei a linha com informações sobre o arquivo logo.png. A linha contém as dimensões do logotipo. Como minha imagem tem 750×100, mudei os valores de largura e altura de acordo.

O logotipo vai ficar com o tamanho certo, mas vai continuar desalinhado. É preciso abrir o arquivo lib/tpl/incognitek/layout.css, mais precisamente o campo img#logo. Altere a linha

right:0;

para

right:10px;

e suba um pouco o logotipo para que ele não fique sobreposto ao menu, mudando o valor da linha

bottom: -27px;

para

bottom: 0px;

Depende do seu gosto. Eu usei -3px neste último, para o logotipo ficar um pouco mais embaixo. E agora, como está o nosso site? Vejamos:

m459e0c7d

Hmm, nada mal, estamos evoluindo. E aquele menu lá em cima, dentro do logotipo, como mudar? Esse é bem fácil, é só editar o arquivo lib/tpl/incognitek/menu.php, não tem mistério.

“Mas Roberto, e esses botões todos aí embaixo?” Bom, você pode esconder todos eles sem muita dificuldade. É só ir em lib/tpl/incognitek/main.php e procurar pela seção que começa em <div id=”footer”>. Logo abaixo você verá as linhas que chamam os botões, que seguem este estilo:

<?php tpl_button(‘login’)?>

No caso, a linha acima exibe o botão de login. Acrescente um # à linha, deste jeito:

<?php #tpl_button(‘login’)?>

O botão não será mais exibido, mas você vai ter que dar um jeito de fazer login e editar páginas 🙂 Se quiser, você pode sumir com o botão e gravar o link da página de login em um favorito do navegador.

Um usuário que não esteja logado (leia-se: todos os seus visitantes) vai ver apenas o botão Mostrar código fonte e a caixa de pesquisa. Você pode seguir o mesmo procedimento para sumir com a caixa de pesquisa, mas o botão Mostrar código fonte se transforma no botão Editar quando você está logado, por isso temos que mudar a linha de maneira que o botão só suma para usuários que não estiverem logados, do contrário vamos perder o botão Editar. É fácil, mude disto:

<?php tpl_button(‘edit’)?>

Para isto:

<?php if(isset($_SERVER[‘REMOTE_USER’])) tpl_button(‘edit’)?>

Para fechar a conta, vamos esconder dos visitantes as informações sobre a data de alteração da página, que ficam no canto inferior direito. Ainda no main.php, procure por este bloco de texto:

<div id=”user”><?php tpl_userinfo()?></div>
<div id=”doc”><?php tpl_pageinfo();
if ($INFO[‘exists’]) {
echo ” &middot; [“;
tpl_actionlink(‘history’);
echo “]”;

E deixe assim:

<div id=”user”><?php #tpl_userinfo()?></div>
<div id=”doc”><?php #tpl_pageinfo();
if ($INFO[‘exists’]) {
#echo ” &middot; [“;
#tpl_actionlink(‘history’);
#echo “]”;

Se quiser esconder também os botões coloridos no rodapé, basta excluir tudo o que estiver entre <div class=”footerinc”> e </div>, perto do final do arquivo.

Pronto! Deu algum trabalho, mas você vai recuperar esse tempo na manutenção do site, que vai ficar bem mais dinâmica. E agora, vamos ver como ficou o nosso site?

6d4e3417

Talvez um pouco cinza demais… tem que parecer sóbrio. O site está online neste endereço:

www.bechtranslations.com.br

Mas se quiser um exemplo mais colorido de site feito com o Dokuwiki, dê uma olhada no meu outro site:

www.gazetadealgol.com.br

Sim, além de ser um tradutor sério eu também sou fã de jogos antigos de videogame, mas não espalhem, ok? 🙂

Só isso?

Na verdade, não! O DokuWiki conta ainda com uma pilha de plugins interessantíssimos. Para vocês terem uma ideia, é possível até fazer um blog com o DokuWiki por meio de plugins! Vejam este aqui, por exemplo. As possibilidades são infinitas, mas não o tempo do seu amigo escritor, portanto, boa sorte e divirta-se descobrindo o que mais o DokuWiki pode fazer por você!

Por Roberto Bechtlufft <roberto at bechtranslations.com.br>

Sobre o Autor

Redes Sociais:

Deixe seu comentário

X