A estrutura do meu site está no Drupal e é com ele que incluo e edito os posts, que coordeno os comentários, as tags e a indexação no Google. Já a apresentação está toda em Flash e em Flex, que é um framework feito em ActionScript para otimizar a produção, simplificando coisas complexas como estrutura modular e a localização e internacionalização utilizadas em uma aplicação web.

A expansibilidade do Drupal

Já tinha tido experiência com o Joomla e o WordPress e, sem dúvida, o Drupal supera as expectativas: é o mais versátil e o mais capaz de se encaixar à suas necessidades. Embora o nível de complexidade seja bem maior, a comunidade do Drupal é bem ativa, com fóruns e listas de email que realmente ajudam a resolver os pepinos.

O Core básico do Drupal é capaz de gerenciar um blog perfeitamente, porém é a capacidade de criar ou usar módulos existentes que o torna tão flexível. Os módulos agem como plugins e são, na verdade, pedaços de código em PHP feitos pela comunidade para serem adicionados facilmente à sua instalação básica, tornando-se possível solucionar a maioria dos requisitos de uma aplicação web com módulos já existentes, e claro, gratuitos.

Módulos do Drupal utilizados

O principal módulo que utilizo é o Services. É com ele que posso exportar meu conteúdo da base dados diretamente para o Flex. Junto com ele utilizo outros módulos, como o AMFPHP e o Views.

O módulo Views é uma ferramenta que auxilia muito para criar consultas complexas ao banco de dados. Com ele, é possível mesclar campos de várias tabelas de forma simples, sem precisar criar uma única consulta SQL. È preciso ler um pouco da documentação para entender o processo, mas acaba sendo simples como um formulário web.

Tela demonstrativa do módulo Views

Com o módulo AMFPHP, é possível a comunicação no protocolo AMF, que é o padrão Adobe considerado a forma mais rápida de passar informação da base de dados para um projeto em swf. Dessa forma, posso facilmente chamar uma consulta feita no Views diretamente do Flex, usando os módulos Services e AMFPHP.

Outro módulo importante é o i18n, ou Internationalization. É com ele que gerencio as traduções do conteúdo do site, tanto os posts em Portfólio quanto no Blog e também as Tags e Categorias (que são Taxonomias no Drupal). Com ele também é possível fazer com que a busca do site retorne apenas os resultados encontrados no idioma que está sendo exibido.

Com relação ao conteúdo, o Drupal tem o conceito de Content Types, que são tipos diferentes de conteúdo, cada qual com suas propriedades e campos exclusivos. No meu caso, por exemplo, eu uso o Story para o Blog e criei um específico para o meu Portfólio.

Para ter maior controle sobre os campos de um tipo de conteúdo, é necessário adicionar o módulo CCK (Content Construction Kit), que permite a inclusão de novos campos como por exemplo, teasers específicos, campos para enviar arquivo ou imagens. Dessa forma você poderá customizar tanto o formulário que será usado pelo administrador para inserir conteúdo quanto o tipo de conteúdo que será exibido a seus leitores na sua página.

O gerenciamento de imagens no Drupal é feito com base no módulo Image, a parte básica para qualquer outro módulo que venha a utilizar imagens. Com ele e o ImageCache, por exemplo, é possível criar predefinições de tamanhos e fazer upload de uma única imagem grande para que o próprio sistema trate de redimensioná-la para os vários tamanhos que você possa vir a ter como thumbnails.

Na área administrativa do site, uso o layout html básico que vem com a instalação padrão, e uma boa dica é o módulo Administration menu, que cria um menu no topo do site, organizando os vários links que existem na interface administrativa.

Visto que o Drupal é um CMS bem completo, seus módulos logo convergem suas funcionalidades para se obter um controle mais forte de conteúdo. Por exemplo, os módulos de imagem e de internacionalização se alinham também com o CCK para que seja possível adicionar campos diferentes (thumbnail, imagem principal, idioma...) para tipos de conteúdo distintos, que podem ser selecionados por uma view e serem requisitados por web-service através do AMF. Enfim, tudo muito bem integrado e dinâmico!

O ganho de tempo com o Flex

O Flex permite iniciar mais rapidamente a produção de um site, afinal ele é um framework em AS, com diversos componentes prontos que podem ser estendidos tanto em relação a suas funções quanto a sua aparência.

Meu exemplo de customização do componente Panel e TextInput

Contudo você precisa estar muito inteirado de como o Flex foi construído, pois a customização, principalmente a visual, pode gerar sérias dores de cabeça. A grande dificuldade no Flex é controlar as rédeas das ações que surgem, pois toda a estrutura dele é voltada para http://livedocs.adobe.com/flex/3/html/help.html?content=16_Event_handlin... ">eventos, como o de terminar de carregar uma imagem, começar a redimensionar, etc...Assumir o controle quando um monte de coisa está acontecendo simultaneamente se torna algo complexo bem facilmente.

Interação do Flex com o Drupal

No Flex utilizo o RemoteObject para chamar uma view salva no Drupal que me retorna o conteúdo que preciso. Essa consulta ao banco é feita a partir do Flex ao AMFPHP, me retornando valores nativos em ActionScript, ou seja, um número em php retorna como número e uma data como data.

<mx:RemoteObject showBusyCursor="true" destination="amfphp" source="views" id="viewing" invoke="mostraPopup()">
    <mx:method name="get" result="onViewsResult(event)" fault="onFault(event)" />
</mx:RemoteObject>

Do Html para o Swf

Como o conteúdo do meu site é todo feito no Drupal (portanto em Html) e o ActionScript exibe mal e porcamente os textos que possuem formatação html, tive que criar em AS um pequeno conversor de tags Html para objetos Flex. Fiz isso lendo o conteúdo em html com E4X, afinal o html bem formatado é quase um Xml e assim, por exemplo, pude a cada <p> adicionar um objeto Text, e a cada <img> adicionar um objeto Image.

Estrutura modular no Flex

O Flex permite que o framework de componentes básicos seja exportado a parte, usando RSL para compilar um swf a mais, que fica no cachê do player do usuário e é igual em qualquer aplicação Flex da mesma versão, para qualquer site, em qualquer domínio. Se o usuário já tiver entrado em algum momento em um site feito em Flex, ele já terá esse cachê e não precisará baixar uns 250kb.

Outra vantagem é poder contar com módulos, que são partes da aplicação exportadas como swf diferentes, ajudando a diminuir o peso da aplicação, aumentando a velocidade de download e também reutilizando código e elementos visuais. Meu site utiliza módulos para cada página e alguns itens reutilizáveis, como a localização e as fontes.

Internacionalização: fontes e gerência

Quando solicito o conteúdo a partir do Flex, ele já é retornado com o idioma correto, pois o gerenciamento de traduções é feito com o módulo i18n do Drupal. Mas a aplicação em Swf tem seus próprios textos, exportados como módulos independentes para cada idioma, e para essa gerência eu uso o ResourceManager do Flex, que de maneira prática e fácil faz a troca de idiomas automaticamente, bastando eu setar o idioma, como o que acontece quando se clica nas bandeirinhas no topo do site.

resourceManager.localeChain = ["en_US"];

Já para o japonês o processo é um pouco complicado, pois preciso carregar um outro swf com quase 2 megas que inclui os caracteres do idioma oriental, pois a fonte default de sistema para japonês é terrível. No meu blog eu já cobri como fazer esse processo de carregar fontes específicas para idiomas com alfabetos diferentes; é só dar uma conferida na lista de posts ao lado.

Flare para visualizar a busca

Como um pequeno requinte, resolvi fazer uma apresentação de resultados de busca diferente, e utilizei o Flare, que já descrevi em outro post sobre as ferramentas de visualização de dados. Dessa forma eu integro os posts retornados pela pesquisa, criando um vínculo pela taxonomia entre cada post.

Dessa forma pretendo facilitar que o usuário ache o que procure, não só pela pesquisa textual, mas também pela ligação contextual das tags e categorias. Sei que ainda tenho uns bugs para resolver, mas por hora não mexo mais nisso :)

Tirando proveito das APIs

Com os meus próprios Mashups (feitos com base nas APIs abertas ou então com leitura E4X do canal RSS) estou aproveitando o conteúdo que deixo nos sites que utilizo freqüentemente, como o Last FM, Youtube, Flickr, Twitter, Delicious, e o Anobii. As APIs permitem que eu pegue esses dados e exiba-os no meu site, afinal eles possuem informações sobre meu gosto pessoal de música, os vídeos que mais gosto ou o que estou falando em 140 caracteres e várias outras informações sobre mim.

Urls diretas com o SWFAdress

Antigamente era bem ruim passar um link de uma página em um site todo flash: você tinha que enviar a URL, e avisar para clicar no botão tal e depois no outro...Hoje em dia, com o SWFAdress é possível criar uma url diretamente para um dos estados de uma aplicação web em Swf.

Para implantar isso, estou usando o módulo SWFAdress do Drupal, que utiliza a versão SEO do SWFAdress para criar links diretos para minhas páginas a partir das cleans urls do Drupal e States no Flex, encaminhando o usuário diretamente para uma página específica do site, através de um único clique.

Concluindo

É complicado juntar tantas coisas ao mesmo tempo e fazê-las funcionar bem. Mas como aprendizado foi bem interessante, pois dei um upgrade que precisava em relação às tecnologias web. E fica aqui um resumão do que fiz para quem estiver interessado nesse caminho das pedras!  :-)