Como funcionam os temas do estudiolivre.org??
Introdução: o que é isso?
Essa página é uma tentativa de explicar como funcionam os temas do estudiolivre.org para qualquer um que esteja interessado em criar um novo tema.
Algumas sugestões
Antes de começar a pensar em 'escrever' o tema recomenda-se desenhá-lo e pensar em como ele vai ser. E isso não inclui somente como será a
cara do site, mas também como ele deverá/deveria funcionar. É claro que só uma parte do funcionamento do site pode ser controlada através do tema, mas lembre-se:
- ela é muito maior do que pode parecer
- se você souber php/smarty e estiver confortável com a maneira como o TikiWiki funciona, é possível criar novos phps que implementem funcionalidades novas.
Recomenda-se também
preparar o ambiente de desenvolvimento do estudiolivre.org, para que seja possível
fazer o tema de fato.
Mais ainda, recomenda-se um mínimo de familiaridade com a maneira como está
organizado o cvs do estudiolivre.
Finalmente, é interessante estudar os temas que já existem, procurando falhas e tentando compreendê-los (veja a seção a seguir e a
discussão sobre o tema bolha).
Estudando o estudiolivre.org
Alguns estudos do estudiolivre.org já rolaram na
lista de discussão dos usuários do site. Mesmo assim eles estavam mais focados na estrutura e organização do wiki do que de o site como um todo.
Há, no entanto, um estudo mais voltado a interface (temas) do site que pode ser encontrado no acervo livre, é o
Estudando o estudiolivre.org Parte 2 (v. 0.2)
Estudando o estudiolivre.org Parte 2
Dado o tamanho do site, é bem difícil compreender o seu funcionamento em pouco tempo e, mesmo para os que estão acostumados a utilizá-lo, há coisas um tanto obscuras e algumas outras com as quais não se entra em contato (seja pelo perfil de uso ou pela experiência).
Assim, um
mapa do site é muito útil para ajudar a compreensão do site. É exatamente isso que é essa segunda parte do estudo.
Após baixar o arquivo e descompactá-lo:
$ tar -xzvf estudo2.tar.gz
(onde
estudo2.tar.gz é o nome do arquivo baixado do acervo)
basta usar o inkscape para abrí-lo:
$ inkscape estudo2/estudioLivre.svg
Isso deve lhe mostrar uma tela mais ou menos como a da imagem abaixo:
Essa imagem contém
todas as telas que um usário pode ver quando estiver navegando pelo site. Isso, por si só já deve ter lhe dado uma idéia da utilidade que ela pode ter caso queira fazer um novo tema.
A primeira coisa que deve ser percebida nessa imagem são as camadas. Caso a janela de camadas não tenha aparecido clique em (
Camada e depois em
Layers...), ou aperte
Ctrl-Shift-L. Toda a imagem está organizada em torno das camadas. Cada camada provê informações a respeito de algum aspecto do site. A que está habilitada quando o arquivo é aberto é a mais rapidamente compreensível: é uma organização com código de cor e agrupamento do site por 'áreas', como a parte de blogs, fóruns, etc.
É interessante passar um tempo navegando pela imagem para se acostumar com a posição de cada tela e com a maneira que ela está estruturada. Mesmo assim, uma descrição mais detalhada de cada camada é dada nas seções a seguir, elas são:
- capturas de telas
- agrupamentos por tipo
- inputs
- tooltips
- tabelas
- lightboxes
- agrupamentos relacionais
- nomes dos tpls (sub camada de comentarios->codigo)
Capturas de telas
Nessa camada reside um grupo que contém todas as capturas de telas da imagem. Essas capturas estão organizadas em pastas dentro da pasta
estudo2.
Essas telas estão agrupadas nessa camada pois assim é possível ter clones delas que fiquem
por baixo de qualquer camada que se queira. Para entender melhor essa afirmação, dê uma olhada nas camadas
clones das capturas, que são subcamadas de agrupamentos->por tipo e de agrupamentos->secoes->relacionais. Assim é possível mudar a posição das telas e adicionar outras sempre de maneira consistente.
Agrupamentos relacionais
Os agrupamentos relacionais são aqueles que estabelecem relações entre as diversas telas. Na realidade só há dois deles: os
links e as
seções. Os links são bem simples: setas que ligam textos ou ícones de uma tela à tela que o usuário vê caso clique ali.
A organização de seções é um pouco mais complexa. Além de cores para cada seção, tentou-se utilizar uma circunferência para cada sub-seção ou página de uma seção do site. Dessa forma, por exemplo, dentro da seção Acervo, temos uma circunferência para a página de envio de arquivo, uma circunferência contendo todas as páginas de tipos de arquivo e assim por diante.
Além disso, na organização por seções está presente a lógica de navegação do site. Isto é: coisas mais importante e para as quais são necessários menos cliques para se chegar estão mais próximas do centro enquanto que partes mais obscuras do site estão na periferia do mapa.
Finalmente, algumas circunferências estão bem separadas de seus grupos; isso ocorre pois elas estão mais próximas do contexto onde aparecem. Um exemplo é a tela de busca dos fóruns, que está mais próxima da seção Fóruns do que da seção Busca.
Agrupamentos por tipo
As camadas de agrupamentos por tipo colocam, por cima da imagem, estrelas coloridas (uma cor para cada tipo) que indicam a que tipo de elemento de interface pertence o item por sobre o qual está a estrela.
Entende-se por um "elemento de interface" alguma coisa que se repete constantemente pelo site, como tabelas, inputs, tooltips, etc. Os conceitos por trás dos tooltips e do lightbox é
discutido na documentação do tema bolha.
Nomes dos tpls
A discussão sobre o propósito dessa camada foi deixada por último pois ela é, coincidentemente, a mais útil e
assustadora. Nela estão identificados todos os
templates usados para que o site seja gerado e mostrado para o usuário. Essa camada tem como propósito facilitar (
muito) o trabalho de quem precisa criar os templates a partir das telas, pois fica muito simples saber qual
template corresponde a uma dada parte do site.
Um pouco mais sobre os tpls
Os
templates são, em verdade, uma espécie de código HTML utilizado pelo php para gerar a vizualização do site. Mas quando vir o primeiro tpl você vai perceber que ele é um tanto diferente do HTML normal. Isso porque eles são escritos numa linguagem de templates chamada
Smarty. É interssante ler bastante templates e tentar se acostumar com o
Smarty, referindo-se sempre a
documentação do mesmo para esclarecimentos.
Criando 'telas'
Antes de começar o trabalho de codificação do site, recomenda-se que seja feito um estudo de qual deve ser o resultado dessa codificação. É claro que isso depende muito de como você prefere trabalhar, mas como o estudiolivre.org é desenvolvido por diversas pessoas, se você fizer uma proposta de tema consistente e bem documentada com telas claras, maior a probabilidade de outros desenvolvedores se interessarem em ajudá-lo.
É interessante, nesse momento, bisbilhotar a
pasta desenhos do CVS do estudiolivre.org. Ali você encontra alguns exemplos de telas, bem como uma variedade de estudos de interface e design.
Começando o trabalho de codificação
Há, basicamente, duas maneiras de fazer o trabalho de codificação de um tema:
- criando o tema a partir de arquivos em branco
- copiando um tema existente e adaptá-lo pouco a pouco até que ele se torne outro por completo (recomenda-se copiar o tema 'bolha')
Cada uma dessas maneiras têm suas vantagens e desvantagens. Podemos destacar que, no primeiro caso, é bem complicado manter em mente o nome de todas as variáveis que podem ser usadas no template e tudo que ele deve conter. Por outro lado, adaptar código de outros pode, as vezes, ser
bem mais complicado que criar um novo.
Já no segundo caso, temos como vantagem o fato de ser possível acompanhar o desenvolvimento pouco a pouco, facilitando a busca por erros. E, em contrapartida, é fácil perder-se no código e nos errros já cometidos.
Organização das pastas
As duas pastas nas quais estaremos interessados são a
styles e a
templates que ficam dentro da
pasta src do cvs.
A pasta
styles contém, em sua raiz, um arquivo
.css que deve ter o nome do tema. Junto com esse arquivo, cada tema possui uma pasta, onde se encontram imagens e demais csss usados pelo tema. Novamente, tentar entender como os temas existentes funcionam elucida bastante como essa pasta é organizada.
A pasta
templates é um pouco mais complicada. Ali estão, na raiz todos os templates utilizados somente por arquivos php criados especificamente para o estudiolivre.org (o porquê disso ficará claro).
Além disso, há uma pasta chamada
styles, que contém pastas com os nomes de cada um dos temas. E é ali que residem os templates dos temas propriamente ditos. O que acontece é que o
TikiWiki 'procura' o template que é necessário num dado momento seguindo o caminho:
- na pasta templates/styles/temaAtual
- na pasta templates
ou seja, caso um determinado tema não possua um template, um template padrão é utilizado. É por isso que os templates usados pelos phps do estudiolivre.org estão direto na pasta templates. É claro que quando você estiver fazendo um novo tema você pode copiar esses templates para a pasta com os templates do seu tema e modificá-lo como achar necessário.
Inclusão de um novo tema no banco
Basta criar um arquivo texto com um vetor serializado contendo o nome de todos os temas do site, por exemplo, um arquivo
.sql na pasta db
? contendo:
replace into tiki_preferences (name,value) values('available_styles','a:3:{i:0;s:9:\"bolha.css\";i:1;s:12:\"original.css\";i:2;s:10:\"obscur.css\";}');
Para mais informações sobre como isso funciona, entre em
contato com os desenvolvedores.
Uma sugestão sobre HTML e CSS
Lembre-se, ao fazer o seu código HTML/Smarty e as folhas de estilo que ele deve ser acessível. Esse foi um erro terrível cometido na codificação do tema bolha, que está, atualmente, bem ilegível para quem não tem acesso aos desenvolvedores.
É importante lembrar também de tentar seguir ao máximo os padrões de código HTML e CSS, para que o site tenha o máximo de compatibilidade possível com todos os navegadores.
Recomenda-se ainda criar folhas de estilos próprias para cada um dos templates. Assim o mantenimento do tema fica mais fácil pois é fácil saber em qual css estão definidas as regras de um determinado template. Para isso é interssante usar a seguinte função do Smarty do estudiolivre.org:
{css}
o que ela faz é automatizar a inserção de folhas de estilo no template. Assim, por exemplo, se tivermos no template
tiki-show_page.tpl dentro de um tema chamado
temaLegal a função
{css} será traduzida para:
<link rel="StyleSheet" href="styles/temaLegal/css/tiki-show_page.css" type="text/css" />
Testes de interface
Não existe uma maneira de criar testes muito eficazes para interfaces, isso significa que é necessário testar o código
manualmente, ou seja, navegando pelo site.
Links
