JJSiteEngine - Um programa de gerenciamento de páginas
19/Mar/2008Se você teve a oportunidade de analisar as páginas do meu site referenciando.com talvez você tenha observado que me refiro a um programa chamado JJSiteEngine que uso para gerenciar e apresentar as páginas no site. Neste post eu vou falar dos motivos que me levaram a criar este programa e também descrever suas características principais.
Os Motivos:
O projeto surgiu de duas necessidades. A primeira foi a de sanar uma lacuna muito grande nos meus conhecimentos de programação para internet. A segunda foi de montar um sistema para catalogação de informações no formato de um web site dinâmico.
Já fazem alguns anos que eu tenho a oportunidade de observar a evolução das formas de apresentação na internet, passando pelos layouts de tabelas, pela, febre do java e dos applets e agora os blogs e internet 2.0 (apenas para mencionar alguns). Na época que aprendi HTML (1996) a versão mais moderna da linguagem era a 3.0, o Internet Explorer era uma novidade no Windows 95 e a sensação era jogar Doom nos computadores 486 DX2 da universidade. Estes conhecimentos de HTML, associados aos esporádicos encontros com o Apache, bancos de dados, TCP/IP e outras tecnologias de internet, me permitiram sobreviver até muito recentemente.
Porém nos últimos anos eu notei uma grande proliferação de sites com designs bastante inovadores e de uma usabilidade sem precedência. Eu atribuía esta evolução a uma grande habilidade dos respectivos webmasters de entender ferramentas como Dreamweaver ou FrontPage. Há cerca de dois anos eu vi que não era bem assim e que na verdade esta evolução se deveu a inúmeros fatores e não apenas a ferramentas mais modernas de edição.
Foi quando eu prestei mais atenção a termos como PHP, WordPress, XHTML, CSS2, TomCat, mySQL, Blog, PingBacks, XML, Search Engine Optimization, Wiki, … e a lista continua. Tantas coisas novas e tanto para aprender! Mas resolvi encarar o desafio e aprender um pouco destas tecnologias. Só que para mim aprender algo, eu preciso ter uma meta, por isso elaborei um projeto para resolver o meu segundo problema, o de como catalogar informações no formato de um site.
Sempre que a idéia de montar um site pessoal me vinha à mente eu pensava: mas como gerenciar as páginas? Me desagradava a idéia de criar páginas estáticas apontando uma para as outras, onde qualquer modificação no conteúdo ou layout em uma página acarretaria ter que mudar todas as outras páginas no site. Por isso, aprender uma linguagem de programação para servir páginas web com um design dinâmico provido por um CSS (folhas de estilo em cascata) e um conteúdo baseado em um banco de dados (mySQL) resolveria este meu problema.
A idéia foi bastante simples, aprender PHP, aprender mySQL, aprender XHTML, colocar tudo junto e montar um programa para apresentar meu site. Isso foi no início de 2007.
Comprei dois livros (Mastering Integrated HTML e CSS da Virgina deBolt e PHP and MySQL for Dynamic Web Sites do Larry Ullman) e os estudei. Demorou um pouco, mas finalmente me senti confortável para começar o desenvolvimento do meu sistema de gerenciamento de páginas, e com isso sanar a minha ignorância na criação de um web site dinâmico e moderno. Daí nasceu o JJSiteEngine (JJ são as minhas iniciais).
As Características:
O JJSiteEngine se baseia em duas partes, uma é a interface de administração, onde eu posso criar páginas (que também chamo de artigos ou categorias), criar sub-páginas, mudar a ordem de apresentação, mover, e remover artigos, etc.. Esta interface administrativa é bastante rude, pois como não é algo que usuários normalmente vêem, não gastei muito tempo criando um design que vá além da praticidade. Veja aqui uma tela mostrando esta interface:

A idéia básica é que artigos (ou páginas) podem ter sub-artigos e sub-artigos podem ter outros sub-artigos, indefinidamente. Esta é uma representação similar a de diretórios em um computador.
Uma descrição rápida dos botões:
Editar: permite editar páginas existentes.
Inserir Irmão: cria uma nova página logo abaixo do artigo selecionado.
Inserir Filho: criar uma sub-página dentro do artigo selecionado.
Mover p/ Baixo: move o artigo para baixo na sequência.
Mover p/ Cima: move o artigo para cima na sequência.
Remover: Remove o artigo e todos os sub-artigos dentro deste.
Gerar sitemap.xml: gera um arquivo XML seguindo as especificações para sitemaps com todos os artigos no banco de dados.
A edição dos artigos é toda feita online utilizando um programa de edição totalmente feito em PHP e JavaScript chamado FCKEditor, veja aqui uma tela mostrando uma das páginas do site referenciando.com abertas no editor:

O programa pode ser customizado para qualquer site através de um arquivo de configuração onde é possível especificar diversos atributos, como prefixo da tabela no banco de dados (o que permite a presença de múltiplos sites no mesmo banco de dados), o nome do site, codificação, estilos, onde encontrar o FCKEditor, habilitar o modo debug (para resolver problemas no funcionamento) e o arquivo onde encontrar informações sobre como conectar-se ao banco de dados.

A segunda parte do JJSiteEngine é a de apresentação das páginas, isto é, como o usuário final irá visualizar os artigos no banco de dados. Esta interface é também feita em PHP. Trata-se de um conjunto de scripts chamados por um index.php que reside na raiz do site. Estes scripts validam a URL passada pelo navegador, verificando se ela de fato corresponde a um artigo no banco de dados. Se o artigo realmente existir, ele é apresentado através da função “mostrar_artigo()”.
Os menus são mostrados da seguinte maneira. Uma função “mostrar_menu_horizontal()” lista o nome e links para todos os artigos pai (na raiz do site), uma segunda função “mostrar_meu_vertical()” monta uma lista não ordenada de nomes e links para todos os artigos pai do artigo mostrado na página (no exemplo da tela abaixo este artigo é “Outros Sites”) juntamente com todos os artigos irmãos deste.
Veja na tela abaixo cada um destes elementos, temos o menu horizontal (composto por início, referências, blog, etc) e temos o menu vertical à esquerda. A página sendo mostrada tem caminho “/referencias/html-xhtml/html-xhtml-links-externos”. Ou seja os artigos pai são “html-xhtml” e “referências”. Os artigos no mesmo nível de “html-xhtml-links-externos” (permalink de “Outros Sites”) são também mostrados.

Futuras Melhorias:
Claro que não é possível implementar tudo o que gostaríamos em nossos projetos, daí o conceito de versões. Vou continuar experimentando o programa através do site referenciando.com e observar quais são as maiores deficiências. Até o momento identifiquei os seguintes:
- Permitir a criação de artigos com uma data futura, deste modo será possível que páginas sejam automaticamente publicados naquela data. Eu poderia escrever hoje um artigo com a data de uma semana no futuro e quando aquele dia chegar, a página seria automaticamente visível no site.
- Permitir uma forma de esconder certas páginas. Bastaria uma flag no banco de dados, assim eu poderia esconder uma página (e todas as suas sub-páginas) enquanto as edito, crio, corrijo, etc.
- Permitir que usuários adicionem comentários aos artigos publicados, similar a um blog.
Conclusão:
Não tenho dúvida de ter e estar aprendendo muito com esta experiência e as técnicas que incorporei neste site são muito diferentes daquelas que utilizei em meu primeiro trabalho (Departamento de Engenharia Elétrica da Universidade Federal do MS). Sei que existem inúmeros sites que utilizam programs similares, no entanto acredito que é “fazendo que se aprende”, por isso procurarei manter o meu programa em desenvolvimento.
Eu continuarei publicando informações sobre o programa aqui neste blog na medida em que eu incorporar novas funcionalidades no site referenciando.com.
