Uma das (ainda) grandes limitações da web refere-se à usar qualquer fonte tipográfica em web sites. Por padrão, caso a pessoa não tenha determinado tipo que tenha sido especificado para ser exibido, o navegador renderiza por um que seja o mais próximo ou secundário – determinado pelo próprio desenvolvedor. Isso, realmente, é uma limitação, já que não é possível “controlar” inteiramente como será a exibição de tipos nos sites.

Enquanto algo melhor não é implementado por padrão, existe a possibilidade de fazer uma “gambiarra” para se exibir os textos em qualquer fonte tipográfica. São técnicas que variam desde a implementação “na unha” de imagens com textos, passando por javascript, à mudança de tipos usando Flash. São tantas as opções e scripts prontos que é como ir a uma loja onde tudo é gratuito: basta escolher e pegar.

Se você ficou “espantado” com o título deste artigo, “Como usar qualquer tipo (fonte tipográfica) em seu blog Wordpress“, leia algumas considerações sobre fonte, tipo, tipologia e tipografia.

Trocando os tipos dos títulos do blog com Facelift

Dentre as diversas opções de scripts e maneiras para usar qualquer tipo (fonte tipográfica) em web sites, indico o Facelift Image Replacement que, segundo diversos testes que fiz, mostra-se muito simples de instalar e produz resultados eficientes, trocando os textos de qualquer parte do site para qualquer tipo que se queira.

O Facelift faz sua “mágica” criando imagens em tempo real de textos de qualquer lugar de uma página web que você queira (e respeita o CSS especificado para o elemento, inclusive); e faz esta “reposição de tipos” utilizando o arquivo no formato de fontes, como .ttf ou .otf. Quer dizer, ele atua – com a licença do trocadilho – “direto na fonte“!  ;-)

Isso sem falar em sua compatibilidade com os frameworks jQuery, Prototye, Scriptaculous e MooTools e com a grande vantagem de ser ideal para garantir a acessibilidade do blog, já que, se a exibição de imagens estiver desabilitada, o “texto puro” aparece normalmente.

Instalando o Facelift em seu blog Wordpress

O primeiro passo é acessar a página de downloads do Facelift para baixar sua última versão. Para o caso do Wordpress, você tem duas opções:

1. Instalar em uma pasta no tema que você usa. Dessa forma, o script fica vinculado a seu atual tema e, praticamente, fará parte deste (se você mudar o tema, não mais terá o Facelift funcionando).
2. Instalar em uma pasta independente de temas. Instalando o Facelift em uma pasta independente, ele continua funcionando independentemente de você alterar temas ou não (o único “porém” é para algumas linhas de código que devem ser inseridas, caso haja a troca).

Então, segundo a abordagem de instalar o Facelift na pasta do próprio tema, sugiro que seja uma pasta “js” ou “javasript”. Então, vá lá e crie uma pasta “js” na pasta de seu tema para dar prosseguimento à instalação do Facelift.

Depois disso, descompacte o Facelift nesta pasta remota “js” que acabou de criar. Uma observação: a pasta raiz do Facelift vem com a estrutura “facelift-[versão]“; pessoalmente, gosto de retirar o número da versão para manter a coisa enxuta (somente “facelift”); se você não quiser fazer isso, tudo bem, mas fique atento aos códigos de chamada ao Facelift que serão mostrados posteriormente.

Configurando o Facelift para usar qualquer tipo em seu blog Wordpress

Coloque na pasta “fonts” o arquivo do tipo que você vai usar. Então, configure o arquivo config-flir.php. Vá, lá, e altere o que for necessário – o arquivo é bem comentado, não se preocupe.

Depois de devidamente instalado e configurado, é hora de chamar os arquivos necessários ao funcionamento do Facelift e usar qualquer fonte tipográfica no blog! O primeiro passo é “chamar” o corretamente para que se possa usufruir de seus benefícios.

É possível inserir chamadas a javascript no head ou body de documentos web. O indicado é antes de se fechar a tag </body>, pois evita “travar” o carregamento da página e o script só é requisitado quando todos os outros elementos da página já foram carregados. Então, vamos chamar o javascript do face lift antes de fechar o corpo do documento (</body>), o que, provavelmente, deve estar no arquivo footer.php de seu tema Wordpress.

O “macete” é chamar o javascript através de PHP (especificando o local em que se encontra a pasta raiz do script, segundo indicado na documentação oficial do Facelift), já que será preciso identificar o diretório onde ele se encontra utilizando get_bloginfo().

<?php
echo '<script type="text/javascript" src="' . get_bloginfo('template_directory') . '/js/facelift/flir.js">;</script>';
?>

Depois, é preciso iniciar o Facelifit e especificar para quais elementos haverá substituição de tipos. Uma grande vantagem é que é possível utilizar a sintaxe do jQuery, devido à compatibilidade nativa que tanto Facelift quanto Wordpress têm do framework! Então, sabendo e identificando os elementos da página que terão tipos personalizados, basta especificar isso no código (como começamos gerando com PHP, vamos continuar).

O código final fica assim (no exemplo, altero os títulos secundários da barra lateral):

<?php
echo '
    <script type="text/javascript" src="' . get_bloginfo('template_directory') . '/js/facelift/flir.js"></script>
    <script type="text/javascript">
    FLIR.init({path:"' . get_bloginfo('template_directory') . '/js/facelift/"});
    $("#sidebar h2").each( function() { FLIR.replace(this); } );
    </script>
';
?>

E pronto! Agora seu blog Wordpress pode usar qualquer fonte tipográfica, em qualquer local que você queira!

Importantes observações sobre a troca de tipos com o Facelift

Na verdade, o Facelift pode ser usado em qualquer tipo de site ou blog, seja Wordpress ou não. Entretanto, em função do peso de imagens – ainda mais geradas em tempo real – e performance do blog/site, em geral, é conveniente que se altere os tipos somente dos títulos e/ou áreas de destaque.

Importante notar que, como se trata de inserção de imagens, caso uma imagem estrapole a largura destinada ao elemento que foi “substituído” por ela, seu layout pode quebrar e/ou a imagem ficar semi-oculta, impedindo os leitores de a visualizarem por completo.

Portanto, se você utiliza artigos com título curto e/ou tem um espaço útil para os títulos considerável, use e abuse de tipos personalizados em seu blog/site; do contrário, limite-se a usar os tipos personalizados somente em áres de destaque ou textos que contenham poucas e pequenas palavras.

<update>
Confiram, também, o plugin para WordPress AnyFont.
</update>

Desde ontem, quando recebi a notícia que o beta do Google Chrome tinha sido lançado, pensei se deveria ou não testar o browser do Google. Por um lado, parecia interessante, já que a Google tem se mostrado excelente quando o assunto são aplicativos para web; por outro, será que valia a pena testar o primeiro beta de um navegador? Cheguei à conclusão de que deveria experimentá-lo, sim. Foi o que fiz.

Quando o lançamento de um navegador web aparece em telejornais, algo que seja, pelo menos, “curioso”, está acontecendo!

Download e instalação do Google Chrome

Na página de download do Google Chrome, na verdade não se baixa o programa, em si; é daqueles que a gente pega um instalador e ele baixa o programa completo, depois. Mas, também, existe a possibilidade de baixar o instalador off line do Google Chrome.

No momento da instalação, aparecem opções “padrão” deste tipo de programa, perguntando se vai importar as opções do Firefox, em pasta vai ser instalado, em qual lugar vai ter um atalho, etc. Como queria testar a “pureza” do Google Chrome, optei por não importar nada de outro navegador e seguir com a instalação.

Tudo ocorreu bem e um atalho na área de trabalho já estava me esperando quando a instalação foi concluída.

Aparência do Google Chrome

Quando se inicia o Google Chrome pela primeira vez, ele explica sobre seu sistema de “guardar” os sites mais acessados para fácil revisitação posterior; algo inspirado – para não dizer outra coisa – do Opera. Brincadeiras à parte, este recurso é realmente muito útil e os desenvolvedores do Google Chrome fizeram bem em seguir o bom exemplo do Opera.

A aparência do Chrome me causou certa surpresa. Esperava algo “clean” devido ao que eu já havia lido e ouvid falar, mas quando vi com meus próprios olhos, foi diferente. Quando eles escreveram no “Saiba Mais” do Google Chrome que o objetivo era proporcionar uma navegação “clean“, eles realmente não estavam brincando!

Não há barra de títulos, não há barra de status (sempre visível), não há menus textuais. O que há é uma baita barra de endereços, 2 signos de menus à direita, botões simples de navegação (“Voltar”, “Avançar” e “Recarregar”) e, acima de tudo isso, a já consagrada abas (ou “guias”) de navegação, que permitem visitar diversos sites sem ter que abrir uma nova janela do browser. Inclusive, sobre isso – as abas -, a equipe de desenvolvimento do Chrome anunciou:

Ao deixar cada guia em uma área isolada, conseguimos prevenir que a falha de uma guia causasse a falha de outra e providenciamos uma proteção mais eficaz contra sites não confiáveis. Melhoramos a velocidade e a resposta.

Ainda há uma estrelinha para se adicionar um site aos favoritos – “inspiração” do Firefox, que trouxe este recurso à nova versão de seu browser, o Firefox 3.

Uma coisa que definitivamente me desagradou foi o fato de as abas terem um tamanho fixo e, em função disso, não exibirem mais que vinte e poucos caracteres, truncando os títulos de todos os sites que são visitados. Nem todos têm um título com somente 6 caracteres (“Google”)…

Desempenho do Google Chrome

Sobre a citação sobre abas acima, sinceramente não notei nenhuma diferença de performance entre ter diversas abas ativas no Google Chrome em relação a ter diversas abas ativas no Firefox (que é meu navegador padrão). Com (pelo menos, aparentemente) o mesmo desempenho que tenho no Firefox, tive no Google Chrome e, atrevo-me a dizer, o do Firefox é até melhor, mesmo com uma dezena de extensões ativas. De repente, as “inovações” sobre abas que foram divulgadas são para prevenção de erros, ou algo assim…

Quanto ao tempo para se abrir o programa, já não posso dizer o mesmo. Realmente o Google Chrome é muito rápido para abrir, chegando a lembrar o Safari!

Quando ao tempo de abertura das páginas, volto com minha comparação: não notei nenhuma diferença entre abrir sites no Firefox e abrir sites no Google Chrome. Para mim, ambos demoraram a mesma coisa – embora eu não pudesse fazer uma comparação “formal” dado o fato de o Chrome não ter extensões como o YSlow para mensurar isso. Inclusive ao acessar um site de e-commerce, o Chrome exibiu uma tela de erro – que, infelizmente, não tirei um printscreen para mostrar – alertando sobre um problema e que a página deveria ser recarregada.

É beta, vamos dar uma colher de chá.  ;-)

Funções de desenvolvedor do Google Chrome

Algo interessante são as funções de desenvolvedor que já vêm por padrão. Acessando o menu “Desenvolvedor”, existem as subopções, além da tradicional “Exibir código fonte”, “Depurar JavaScript”, “Console Javascript” e “Gerenciador de tarefas”, que, apesar de serem bem simples, talvez sejam bem úteis futuramente, quando o Google Chrome não for mais beta e começarem a pipocar extensões para o navegador da Google (tem que ter possibilidade de desenvolvimento de plugins).

Impressões gerais sobre o Google Chrome, o navegador da Google

Minhas primeiras impressões sobre o Google Chrome foram positivas. Sendo um navegador beta, em seu primeiro dia de “vida pública”, ele está excelente! A área útil para a navegação realmente ficou ampla, permitindo foco no que se está fazendo na hora, sem espaço ocupado por centenas de barras “extras”, como acontece algumas vezes com outros navegadores.

Em relação ao desempenho, ele realmente é rápido, mas nada de se espantar ou achar maravilhoso. Como disse, o Firefox dá conta do recado perfeitamente – e o Safari continua sendo o mais rápido.

Certamente a Google tem diversas novidades “na manga” e as lançará estrategicamente, conforme um planejamento/necessidade que tenha de alcançar seus objetivo de mercado – trata-se de uma empresa multibilionária, amigos, não pensem que “Google” é sinônimo de “bondade”. Tenho quase certeza que um dos próximos passos é liberar as primeiras extensões e, possivelmente, uma API para desenolvimento de extensões por teceiros, ou algo assim. Sinceramente, um navegador que não permite expansibilidade não está consonante às tendência da web atual e, certamente, este não é o objetivo da Google.

Como escreveram os desenvolvedores do Google Chrome, “Este é só o começo”. Vamos aguardar as novidades!

E você, gostou do Google Chrome?

<update>
E para o pessoal de desenvolvimento para web, aí vai uma tabela de suporte a CSS da primeira versão do Google Chrome.
</update>

É muito comum ler na web que alguém vai usar “Wordpress como CMS”; que “Wordpress é tão bom que pode ser usado como CMS”; “só faço sites com Wordpress como CMS”; e por aí vai… Há uma confusão quanto a esta expressão, “Wordpress como CMS“, que é usada de forma errônea pelas pessoas e, se assim continuar, vai acabar causando uma grande confusão na cebeça de quem está começando a desenvolver com Wordpress.

O que é um “CMS”?

Antes de mais nada, é importante saber o que significa “CMS”. Na Wikipédia, o texto mostra que

Um Sistema de Gerenciamento de Conteúdo – SGC, (em inglês Content Management Systems – CMS), é um sistema gerenciador de websites, portais e intranets que integra ferramentas necessárias para criar, gerenciar (editar e inserir) conteúdo em tempo real, sem a necessidade de programação de código, cujo objetivo é estruturar e facilitar a criação, administração, distribuição, publicação e disponibilidade da informação. Sua maior característica é a grande quantidade de funções presentes.

Quer dizer, um Sistema de Gerenciamento de Conteúdo é um sistema feito para que as pessoas possam alterar o conteúdo de web sites, intranets, sistemas interativos ou o que quer que seja, sem a necessidade de ter conhecimentos “técnicos”, como saber XHTML, CSS, Javascript, etc.

Através de um CMS, então, a pessoa “leiga” em tecnologias web tem a capacidade de alterar as informações – conteúdos – de alguma publicação e/ou sistema on line sem a necessidade de intervenção de um profissional/atuante da área de desenvolvimento web.

Por alto, o que é possível fazer com o Wordpress?

Com o Wordpress é possível, dentre outras coisas:

• Criar páginas “fixas”;
• Editar páginas fixas;
• Crirar artigos;
• Editar artigos;
• Inserir fotos, vídeos e outras mídias;
• Editar fotos vídeos e outras mídias que foram inseridos;
• Criar textos, links e interações;
• Editar textos, links, alterar as interações.
• Muitas outras coisas!

Qual o equívoco em dizer “Wordpress como CMS”?

Na verdade, não é equívoco algum quando alguém diz “Wordpress como CMS”; o equívoco está no contexto em que as pessoas falam isso. Comumente, quando alguém diz isso, está se referindo a criar um novo tema (ou modificar um já existente) do Wordpress para que ele ou alguma outra pessoa – um cliente, possivelmente – utilize a plataforma para gerenciar as informações de um site e não de um blog – sendo que um blog não deixa de ser um site.

Quando as pessoas dizem que usam Wordpress como CMS, estão querendo dizer que vão gerenciar um sistema on line “com cara de site” ao invés de “com cara de blog” – pois blog, apesar de ser um site, tem algumas características diferenciadas, como disposição segundo cronologia, atualização constante, alguns elementos constitutivos, dentre outras.

Então, minha gente, percebam que o Wordpress já é um CMS por padrão! Ele já é usado para criar e editar conteúdos, em geral, de maneira que quem o está usando não tenha a necessidade de ter conhecimentos técnicos na área de desenvolvimento web! Por padrão, o Wordpress já tem a capcidade de “estruturar e facilitar a criação, administração, distribuição, publicação e disponibilidade da informação”!

Entenderam, agora, quando digo que há um tremendo equívoco quando as pessoas dizem “Vou usar o Wordpress como CMS”? A plataforma Wordpress já é um CMS!

Quando você for utilizar o Wordpress que, por padrão, “tem cara de blog“, para algum trabalho que tenha “cara de site“, não precisa dizer “vou usar Wordpress como CMS”; simplesmente diga: “Vou usar Wordpress”.