Já não é nenhuma novidade no mundo de desenvolvimento web o uso e abuso da tecnologia JSON. Entretanto, nem todos conhecem este padrão de intercâmbio facilitado de dados entre aplicações. Não é obrigatório, mas saber JSON pode ser bastante útil em projetos um pouco mais sofisticados e/ou que necessitam de uma demanda/política de transferência de dados mais simples, leve e eficiente.

Usar JSON proporciona inúmeras vantagens ao desenvolvedor web. Desde a simplicidade em tratar os dados à maneira fácil como é possível integrar tecnologias client-side com server-side, o JSON certamente é bastante recomendado.

O que é e para que serve JSON

JSON é o acrônimo para “JavaScript  Object  Notation“. Como é possível notar pelo nome, originalmente o JSON foi concebido para se trabalhar com javascript, mas, já adiantando, não é necessariamente obrigatório o uso de javascript para seu uso, dado que, atualmente, é possível utilizar JSON com mais de 20 linguagens de programação diferentes.

Uma definição interessante é a do Wikiédia:

JSON (com a pronuncia djeisón), um acrônimo para “JavaScript Object Notation”, é um formato leve para intercâmbio de dados computacionais. JSON é um subconjunto da notação de objeto de JavaScript, mas seu uso não requer javascript, exclusivamente.

O formato JSON foi originalmente criado por Douglas Crockford e é descrito no RFC 4627. O media-type oficial do JSON é application/json e a extensão é .json.

Mas uma definição que explica, de forma bem mais simples e objetiva, é a de Tiago Belem, em seu artigo “Introdução a JSON e PHP“, no qual consta que

JSON é um padrão de formatação de dados que serão transmitidos entre duas aplicações de linguagens diferentes.

Quer dizer, JSON é usado, principalmente, para permitir a troca de dados entre linguagens. Mas não só isso, ele também é ótimo para lidar com webservices e tem muitos outros usos.

Vantagens em se usar JSON

A descrição de dados em JSON é bem fácil, não passando de um documento de texto puro disposto em um padrão simples. Conforme foi explicado, JSON é excelente para intercâmbio de informações entre aplicativos.

Mas também existem outras maneiras de se fazer isso, por exemplo, com XML. Entretanto, o JSON apresenta vantagens bastante interessantes, o que, após uma análise do caso de seu aplicativo ou sistema web, pode levá-lo a optar por ele. Algumas das vantagens são:

• Sintaxe simples, de fácil aprendizado e implementação;
• Tamanho do arquivo bem menor em relação a outras “linguagens intermediárias”, tais como XML;
• Facilidade de desenvolvimento e alto desempenho nas aplicações que o utilizam.

Estruturas JSON

É possível ver alguns diagramas das estruturas no próprio site oficial do JSON; basicamente, é o seguinte:

Vamos ver, então, como podemos descrever dados simples usando o que a sintaxe que ele nos oferece.

Arrays

Por exemplo, vamos ver como seria um array dos dias da semana:

["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado"]

Perceba que strings devem ser indicadas com aspas duplas.

Elementos separados por vírgulas entre colchetes é a notação JSON para um array (naturalmente, a vírgula delimita cada item). A maioria dos desenvolvedores prefere identar um pouco o código para facilitar a leitura:

[
	"Domingo",
	"Segunda",
	"Terça",
	"Quarta",
	"Quinta",
	"Sexta",
	"Sábado"
]

É possível, também, misturar diversos tipos de dados em um só array:

[
	33,
	"Segunda",
	TRUE,
	3.14159265,
        NULL,
        "maçã"
]

Objetos

Como vimos, arrays são representados por colcechetes. No caso de objetos, estes são representados por chaves; cada chave é identificada por uma string e, depois de um dois-pontos, os valores de cada item especificados. Fica mais claro com um exemplo:

{
	"Domingo" : "Folga",
	"Segunda" : "Viagem",
	"Terça"   : "Pagamentos",
	"Quarta"  : "Piscina",
	"Quinta"  : "Churrasco",
	"Sexta"   : "Carteado",
	"Sábado"  : "Festa"
}

Perceba que não tem importância haver espaços a mais ou a menos entre a descrição da chave, o separador “:” e o valor desta. Tudo será interpretado corretamente.

Alguns exemplos

É bastante simples descrever JSON, você viu. Como os objetos de qualquer outra linguagem de programação, é possível armazenar quaisquer tipos de dados e quantos dados se desejar. Veja este exemplo:

{
    "Marconildo":
    {
        "url": "http://www.marconildo.com.br/",
        "idade": 34
    },
    "Joanorta":
    {
        "url": "http://www.joanorta.com.br/",
        "idade": 22
    },
    "Estripafurgia":
    {
        "url": "http://www.estripafurgia.com.br/",
        "idade": 47
    }
}

Perceba que, neste caso, cada objeto possui, “url” e “idade” (provavelmente este não seria um exemplo “da vida real”, mas dá para ilustrar bem o conceito), mas, não necessariamente, todos devem possuir o mesmo número de propriedades. Poderia haver um ou mais elementos com “url”, “idade”, “altura”, “endereco”, etc. É possível, inclusive, a utilização de arrays:

{
    "Marconildo":
    {
        "url": "http://www.marconildo.com.br/",
        "idade": 34
    },
    "Joanorta":
    {
        "url": "http://www.joanorta.com.br/",
        "idade": 22
    },
    "Estripafurgia":
    {
        "url": "http://www.estripafurgia.com.br/",
        "idade": 47,
    	"diasDeTrabalho":
	 [
	     "Segunda",
	     "Quarta",
	     "Sexta"
	 ]
    }
}

E, até, um array de objetos!

{
    "Marconildo":
    {
        "url": "http://www.marconildo.com.br/",
        "idade": 34
    },
    "Joanorta":
    {
        "url": "http://www.joanorta.com.br/",
        "idade": 22
    },
    "Estripafurgia":
    {
        "url": "http://www.estripafurgia.com.br/",
        "idade": 47,
    	"dependentes":
    	[
    	    "Astolfinho":
	    {
	        "sexo" : "m",
	        "idade": 16
	    },
    	    "Mariazinha":
	    {
	        "sexo" : "f",
	        "idade": 10
	    }
    	]
    }
}

JSON e javascript

Agora você já aprendeu as notações básicas do JSON, mas o que fazer com isso, como usar, efetivamente, o poder do JSON nas aplicações do dia-a-dia usando javascript? Veja um exemplo simples:

var funcionarios = '
	{
	    "Marconildo":
	    {
	        "url": "http://www.marconildo.com.br/",
	        "idade": 34
	    },
	    "Joanorta":
	    {
	        "url": "http://www.joanorta.com.br/",
	        "idade": 22
	    },
	    "Estripafurgia":
	    {
	        "url": "http://www.estripafurgia.com.br/",
	        "idade": 47
	    }
	}
';
 
var funcionario = JSON.parse(funcionarios);
 
alert(funcionario.Marconildo);
alert(funcionario.Marconildo.idade);

Foi criada a variável “funcionarios” e colocado uma string JSON nela. Usando a função JSON.parse, convertemos a string para, efetivamente, JSON na variável “funcionario”e, a partir daí, foi possível acessar todas suas propriedades com a notação padrão de OO.

Esse foi um exemplo ilustrativo. Em aplicações “de verdade”, seria bastante eficiente, por exemplo, realizar requisições em AJAX para procurar retornos em JSON e, a partir daí, realizar quaisquer tipos de operação com o data retornado. Trataremos disso em artigos futuros. Assine o feed para conferir.

$.getJSON

O jQuery possui uma poderosa ferramenta para trabalharmos com JSON, é a função $.getJSON, que serve para carregar dados no formato JSON usando requisição HTTP GET. Na verdade, esta função é somente uma espécie de atalho para $.ajax() usando “json” no dataType, mas usá-la num contexto JSON fica bastante coerente.

Não há mistério algum para usar, ele segue a mesma “linha” do $.ajax(), como podemos encontrar neste exemplo disponibilizado no próprio site do jQuery:

$.getJSON('ajax/test.json', function(data) {
  var items = [];
 
  $.each(data, function(key, val) {
    items.push('<li id="' + key + '">' + val + '</li>');
  });
 
  $('<ul/>', {
    'class': 'my-new-list',
    html: items.join('')
  }).appendTo('body');
});

E, como nos mostra Gabriele Romanato, é possível verificar se o resultado da requisição é realmente um objeto JSON de maneira simples:

$.getJSON(url, function(data)) {
  if(typeof data !== 'object') {
    // Erro!
  }
});

Dessa maneira, é possível economizar bastante tempo ao procurar erros e a estrutura de código fica mais profissional e mais facilmente manutenível.

JSON e PHP

O PHP também possui algumas funções para se trabalhar com JSON. Vamos a um exemplo simples de como gerar PHP a partir de JSON:

$funcionarios = '
	{
	    "Marconildo":
	    {
	        "url": "http://www.marconildo.com.br/",
	        "idade": 34
	    },
	    "Joanorta":
	    {
	        "url": "http://www.joanorta.com.br/",
	        "idade": 22
	    },
	    "Estripafurgia":
	    {
	        "url": "http://www.estripafurgia.com.br/",
	        "idade": 47
	    }
	}
';
 
$funcionario = json_decode($funcionarios);
 
echo $funcionario->Marconildo . '<br />';
echo $funcionario->Marconildo->idade;

Bem simples, bem direto, dispensa explicações. Agora, se você preferir tratar o JSON como se fosse array, basta inserir um segundo parâmetro à função, dessa maneira:

$funcionario = json_decode($funcionarios, TRUE);

Ferramentas JSON

JSON é bastante simples e intuitivo para qualquer programador, mas, para quem está começando a mexer agora e/ou para os que precisam de algumas ferramentas para JSON, segue o link de alguns parser, validadores e ferramentas, em geral, para se trabalhar com JSON:

• Json Parser Online
• JSONLint – The JSON Validator
• Online JSON Viewer
• Convert JSON Strings to a Friendly Readable Format

Conclusão sobre JSON

Uma das principais funcionalidades do JSON é o intercâmbio de dados entre aplicativos e linguagens diferentes. Sua sintaxe simples, sua leveza e objetividade, aliados ao suporte por dezenas de linguagens de progrmação o tornam uma excelente alternativa quando a necessidade é esta. O fato de milhares de webservices de qualidade usarem JSON deve ser um bom indicativo de que usá-lo é uma boa escolha.

Usando as ferramentas apresentas, é possível validar seu JSON, testá-lo, verificar se está produzindo uma hierarquia correta, enfim, aperfeiçoar e refinar o código para que atinja o máximo possível de desempenho. Ao se trabalhar com JSON, logo se percebe seu poder e simplicidade, o que agiliza bastante o processo de programação, ao mesmo tempo em que o formato não se torna um empecilho à produtividade; pelo contrário, a aprimora!

Por essas e outras a notação JavaScript Object Notation, mais conhecida como JSON, é altamente recomendada para desenvolvimento web!

Artigos Relacionados

• Erros comuns em desenvolvimento web para campanhas de SEO
• Breadcrumbs: guia completo com exemplos e melhores práticas
• Perguntas ao cliente para antes e depois de um projeto
• 6 mitos de SEO que você deve evitar
• Mastering Twitter, o manual completo sobre twitter para desenvolvedores e marketeiros
• 8 características de User Interfaces (UI) de sucesso
• Como criar sumários dinamicamente com o TOC (Table of Contents) jQuery plugin
• Web sites e comunicação: 21 maneiras de os sites se comunicarem com seus visitantes
• Meta tags
• Maneiras práticas para melhorar a visitação de seu blog e fidelizar seus leitores

Para quem está acostumado a utilizar CMSs em desenvolvimento web, deparar-se com um editor WYSIWYG para páginas e artigos é algo banal. Para desenvolvimento de softwares desde o início, é preciso implementar um desses editores e, com tantas opções disponíveis no mercado, a escolha pode se tornar complicada… Para isso, confira os 10 melhores editores WYSIWYG para seu próximo projeto!

NicEdit

NicEdit é uma alternativa para algumas maiores e mais complexos editores WYSIWYG existentes, com seu pequeno tamanho de download. Ele possui muitos dos recursos esperados por esse tipo de editor e se integra facilmente em seu site ou software.

TinyMCE

TinyMCE é um editor WYSIWYG  javascript HTML open source. É fácil de integrar e é altamente personalizável com temas e plugins. TinyMCE é um dos mais completo editores, oferecendo uma experiência semelhante a editores instaláveis, como BrOffice e MS Word.

CKEditor

CKeditor é o novo FCKEditor, consagrado editor para os desenvolvedores mais veteranos e líder de mercado anteriormente. Baseando-se nisso, o CKEditor promete ser um editor ainda melhor, já que fez melhor o que era considerado falho em seu antecessor.

YUI Rich Text Editor

O YUI Rich Text Editor é um controle UI do Yahoo que transforma textareas em editores WYSIWYG completos. Ele vem em várias versões diferentes, com diferentes características e complexidade, mas ainda consegue atingir uma grande experiência do usuário sem uma infinidade de botões se aglomerando na interface.

MarkItUp!

Markitup é um plugin para jQuery que permite que você transforme textareas em editores de marcação com qualquer marcadores que você quiser: HTML, Sintaxe Wiki e BBcode são apenas algumas que são suportadas. MarkItUp! não é um editor WYSIWYG, propriamente dito, mas oferece todas as características básicas esperadas de um.

FreeTextBox

FreeTextBox é um editor HTML especificamente para ASP.NET. A aparência do editor é bastante parecida com a do MS Word. Apesar de a versão gratuita não ter uma série de features, ela possui mais do que o suficiente para permitir uma edição WYSIWYG de qualidade.

MooEditable

Editores WYSIWYG tornaram-se populares devido aos vários plugins para  jQuery existentes, mas esses editores não são tão comuns para Mootools. MooEditable, no entanto, preenche essa lacuna, fornecendo uma simples, mas eficaz, experiência do usuário, baseada em uma biblioteca de javascript bem escrita. Se você usa Mootools, ficará feliz em usar o MooEditable.

OpenWysiwyg

OpenWysiwyg é um editor WYSIWYG cross browser com quase todos os recursos de edição que você pode precisar. Ele apresenta uma interface elegante, incluindo dropdowns e botões. Um de seus pontos fortes é sua capacidade de lidar bem com tabelas, com bordas e cores diferentes. No entanto, o Google Chrome ainda não é suportado…

Spaw Editor

Spaw Editor é um editor, assim como os outros editores WYSIWYG, que permite desenvolvedores de web substituir uma área de texto padrão (textarea) por um editor completo, totalmente personalizável, multilingue e com suporte a temas.

jHtmlArea

jHtmlArea é outro editor de texto WYSIWYG construído como um plugin para a biblioteca jQuery. Seu objetivo é ser simples e leve, apenas com as opções mais necessárias. Permite-se a ser facilmente customizável através de temas, as funções e idiomas.

Sugestões WYSIWYG?

E você, conhece um bom editor WYSIWYG e gostaria de compartilhar? Faça um comentário com o nome e link do editor WYSIWYG e o artigo será complementado com sua sugestão! Participe!

Artigos Relacionados

• Wireframes para web: guia completo de desenvolvimento
• Breadcrumbs: guia completo com exemplos e melhores práticas
• Recursos de usabilidade grátis
• Ferramentas para o twitter
• 4 elementos de design para um bom call to action
• User Interface em dicas rápidas
• 10 dicas que desenvolvedores web iniciantes devem saber
• Como otimizar códigos jQuery e aumentar a performance do front-end
• Elementos de design aplicados à web
• 10 erros básicos de web design

É fato que o plugin NextGEN Gallery do WordPress é o melhor quando o assunto é gerenciamento de galerias de imagens. Com NextGEN Gallery é possível criar galerias facilmente, acrescentar/retirar imagens em modo batch (é possível enviar um arquivo .zip e ele “abre” as imagens numa galeria), dá pra criar álbuns, copiar/transferir imagens entre galerias, inserir marca d’água automaticamente, enfim, o NextGEN Gallery é bem conhecido na comunidade WordPress e certamente está no “Top 5″ de plugins!

Existe, também, apesar não ser tão conhecido, um script à “lightbox” muito bonito e interessante: SexyLightBox. Como é possível ver em sua página, o efeito que ele oferece é bem interessante e, de certa maneira, diferenciado dos outros lightboxes que encontramos por aí (ênfase ao fato de as imagens serem apresentadas em tamanho completo respeitando a resolução do navegador do visitante).

Aproveitando que o NextGEN Gallery oferece a possibilidade de se utilizar script de terceiros para a exibição de suas galerias e somado ao fato de que o SexyLightBox é realmente interessante… NextGEN Gallery + SexyLightBox = Galerias de Imagens Sexy!

Baixando, instalando e configurando NextGEN Gallery

O primeiro passo é baixar e instalar NextGEN Gallery no seu WordPress. Devido ao fato de eles serem de “naturezas” diferentes (o primeiro é um plugin do WordPress; o segundo é um script que pode ser usado em qualquer tipo de site), a maneira de instalar e usar cada um deles é diferente.

Para o NextGEN Gallery, devido ao fato de ser um plugin do WordPress, a instalação é aquela, mesma, que já estamos acostumados:

• Baixar o NextGEN Gallery;
• Descompactar em sua pasta wp-content/plugins;
• Habilitar o plugin.

Depois, perceba que aparece em seus menus um novo módulo, “Gallery”, com subopções para controle do NextGen.

É possível traduzir as opções para vários idiomas, inclusive Língua Portuguesa. Baixe o pacote Portuguese / Brazilian Português [pt_BR] nas traduções oficiais e faça upload do arquivo .mo para wp-content/plugins/nextgen-gallery/lang e, automaticamente, os menus serão traduzidos.

Painel NextGen Gallery em Língua Portuguesa

Para já preparar o NextGen para trabalhar com o SexyLightBox, acesse em seu painel WordPress Galeria > Opções > Efeitos e altere as opções para:

• Efeito Javascript para miniaturas: Personalizado;
• Linha de código do link: rel=”sexylightbox”.

Baixando, instalando e configurando SexyLighbox

Vá até o site oficial do SexyLighbox para fazer download do SexyLightbox. Depois, é preciso subir a pasta descompactada para o servidor.

Não sei você, mas eu costumo criar uma pasta “js” dentro do meu tema para tudo ficar organizado e eu poder usar as funções de caminho relativo do WordPress tranquilamente. Então, uma estrutura que eu usaria para o caso seria wp-content/themes/MEU-TEMA/js/sexy-lightbox-2.3 (essa é a versão mais atual no dia de publicação deste artigo).

Agora é o momento de chamar o SexyLightbox para que funcione em seu tema. Há muitas maneiras diferentes de mexer com chamadas a scripts no WordPress; no caso, vou mostrar uma delas e, em artigos futuros, vou comentando sobre as outras (essa é a deixa para você assinar o feed do desenvolvimento para web).

Uma coisa importante é que o SexyLighbox não é feito para ser usado em standalone, ele deve estar associado a jQuery ou Mootools. Obviamente vamos usar jQuery para o serviço!  ;-)

Então, o código com as respectivas chamadas a scripts e folhas de estilo fica assim:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="<?php print get_bloginfo('template_url') ?>/js/sexy-lightbox-2.3/jQuery/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="<?php print get_bloginfo('template_url') ?>/js/sexy-lightbox-2.3/jQuery/sexylightbox.v2.3.jquery.js"></script>
<link rel="stylesheet" href="<?php print get_bloginfo('template_url') ?>/js/sexy-lightbox-2.3/jQuery/sexylightbox.css" type="text/css" media="all" />
<script type="text/javascript">
$(document).ready(function(){
    SexyLightbox.initialize({color:'white', imagesdir: '<?php print get_bloginfo('template_url') ?>/js/sexy-lightbox-2.3/jQuery/sexyimages'});
});
</script>

Perceba que alguns parâmetros foram passados na inicialização do script do SexyLightbox. O grande “trunfo” é usar o parâmetro imagesdir, porque na documentação está errado!

Personalizando seu SexyLighbox

Uma coisa muito boa é que há uma pasta “PSDs” no SexyLighbox para que cada um posso personalizar a aparência como quiser. Então, você pode alterar a cor de fundo, texto, alterar os elementos (setinhas, etc) e usar da forma que você quiser. Então quando você alterar a cor de fundo para o SexyLighbox ficar com a identidade visual de seu site, você vai perceber que a parte do meio da moldura ainda permanece intacta. No caso, você deve fazer um pequeno acréscimo de CSS em seu arquivo padrão (pode ser ao final):

#SLB-Contenido {
border-color:#HEXADECIMAL !important;
}

Agora você tem galerias Sexy!

Com isso, agora você galerias de imagens automatizadas e sexy! Para tirar melhor proveito disso, estude a documentação do NextGen Gallery (além dos fóruns, os tutoriais sobre NextGen de David Potter devem ajudar) e do SexyLightbox para incrementar/customizar ainda mais as galerias de imagens de seu site para que fiquem práticas, bonitas e com excelente performance.

E capriche nas imagens! ;-)

Artigos Relacionados

• 10 erros básicos de web design
• Cores na web: guia completo
• Como fazer loading em conteúdos do site
• 5 dicas para temas WordPress melhores
• Gradiente CSS cross browser: degradês em CSS sem usar imagens
• Ferramentas para criação de wireframes
• Rolagem com fundo transparente com CSS
• 7 ferramentas para web designs melhores
• Otimização WordPress: aumente a performance e desempenho de seu blog / site
• Como criar sumários dinamicamente com o TOC (Table of Contents) jQuery plugin

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>

Artigos Relacionados

• 5 dicas para temas WordPress melhores
• Otimização WordPress: aumente a performance e desempenho de seu blog / site
• Newsletter no WordPress com o plugin Ajax Newsletter (wp-ajax-newsletter)
• Preciosas dicas de segurança e otimização para WordPress
• WP-Syntax: destacar códigos fonte em artigos de blogs WordPress
• Mais de 450 extensões para WordPress
• WassUp: plugin WordPress para ver estatísticas de acesso (em tempo real)
• Como fazer loading em conteúdos do site
• 15 fantásticos comandos SQL para WordPress
• Ferramentas para criação de wireframes

IDs e classes são “anzóis”

Precisamos de formas de descrever conteúdos em documentos HTML / XHTML. Os elementos básicos como <h1>, <p> e <ul> frequentemente fazer o trabalho, mas o conjunto básico de tags não abragen todas as possibilidades de elementos de página ou escolhas de layout. Para isso, precisamos de IDs e Classes.

Por exemplo <ul id=”nav”>, isso dá a oportunidade de visar especificamente esta lista, então há uma maneira de manipular esta lista exclusivamente em relação a outras listas não-ordenadas da página. Ou talvez tivéssemos uma seção na página que não possui uma tag relevante para signifcar, por exemplo, um rodapé, onde poderíamos fazer algo como <div id=”footer”>. Ou talvez tenhamos boxes na barra lateral para manter o conteúdo separado de alguma forma: <div class=”sidebar-box”>.

Esses IDs e classes são os “anzóis” que precisamos fazer na marcação para colocarmos as mãos neles. CSS obviamente precisa disso para que possa fazer seletores e montar folhas de estilos, mas outras linguagens web, como javascript, também dependem deles. Mas quais as diferenças entre IDs e classes?

IDs são únicos

• Cada elemento pode ter apenas um ID;
• Cada página pode ter apenas um elemento com aquele ID.

Quando se está aprendendo sobre isso, é comum ouvir que só se deve usar IDs uma vez, mas é possível usar uma classe várias vezes. Basicamente, isso entra num ouvido e sai no outro, porque soa mais como uma “regrinha” que algo realmente importante. Se você trata somente com HTML / CSS, isso pode acontecer com você, também, porque eles realmente não parecem fazer nada de diferente.

Aqui vai uma: seu código não vai passar pelo validador se você usar o mesmo ID em mais de um elemento. Validação deve ser importante para todos nós, de modo que, por si só, é algo muito importante. Adiante, mais razões pelas quais um ID deve ser único.

Classes não são únicas

• Você pode usar a mesma classe para vários elementos;
• Você pode usar várias classes para um mesmo elemento.

Qualquer informação de estilo que precise ser aplicada a múltiplos elementos em uma página deve ser feita com uma classe. Tomemos como uma exemplo uma página com vários “widgets“:

<div class="widget"></div>
<div class="widget"></div>
<div class="widget"></div>

Agora, é possível usar a mesma classe “widget” como gancho para aplicar o mesmo conjunto de estilos para cada um deles. Mas, e se for preciso ter um deles maior que os outros, mas continuar com um estilo que compartilhe dos outros atributos? É possível aplicar mais de uma classe a um elemento:

<div class="widget"></div>
<div class="widget big"></div>
<div class="widget"></div>

Não há necessidade de fazer e nomear uma nova classe aqui, apenas colocar o nome da nova classe no atributo class, juntamente com o nome da classe que já está lá. As diferentes classes são delimitadas por espaços e a maioria dos navegadores permite quaisquer números delas (na verdade, é mais como milhares, o que é muito mais do que realmente é preciso).

Não existem padrões de IDs e Classes em nenhum navegador

Colocar um nome de classe ou ID em um elemento, por padrão não faz nada a esse elemento.

Isso é algo que intriga quem é iniciante. Você está trabalhando em um site e descobre que a aplicação de uma classe com um nome em particular resolve um problema que você tem. Então você mexe em outro site, com o mesmo problema, e tenta corrigí-lo da mesma maneira, usando aquele mesmo nome de classe, pensando que o nome da classe, por si só, tem alguma propriedade mágica, apenas para descobrir que não funciona assim…

Classes e IDs não têm qualquer estilo por si mesmos. É preciso CSS para orientar e aplicar estilos.

Códigos de Barra e Números de Série

Talvez códigos de barra e números de série sejam uma boa analogia. Tome um iPod, numa loja. Na embalagem há um código de barras. Ele indica à loja que produto é esse; então, quando é escaneado, o código de barras informa exatamente que produto é aquele e quanto custa. É possível saber até sua cor e em qual lugar do armazém ele era mantido. Todos esses iPods têm exatamente o mesmo tipo de código de barras.

O iPod tem também um número de série que é absolutamente único em relação a qualquer outro iPod (ou outro dispositivo) em todo o mundo. O número de série não informa o preço. Poderia, mas para a loja que o vende esta não seria uma maneira eficaz de armazenar e utilizar essa informação. É muito mais fácil usar um código de barras porque se, por exemplo, o preço muda, é preciso apenas alterar o preço para aquele código de barras, e não para cada número serial do sistema.

Isso é muito parecido com IDs e Classes. Informações que são reusadas devem ser mantidas em uma classe e informações que são totalmente únicas devem ser mantidas em um ID.

IDs têm uma funcionalidade especial nos navegadores

Classes não tem funcionalidades especiais no browser, mas IDs têm um truque muito especial na manga: um “valor de hash” para URLs. Se você tiver um URL como http://seudominio.com#comments, o navegador vai tentar localizar o elemento com o id “comments” e vai automaticamente rolar a página até chegar nesse elemento.

É importante observar que o browser vai rolar a página até onde quer que o elemento esteja; então, se houver algo de especial, como uma DIV com barra de rolagem (propriedade CSS overflow com valor “auto” ou “scroll”), esta barra de rolagem vai ser deslocada – rolar para baixo -, também.

Esta é uma razão importante sobre o porquê é importante ter um ID absolutamente único. Com isso, o navegador sabe até quando rolar.

Elementos podem ter ambos, ID e Classes

Nada para você quando você usa ambos, ID e classes em um único elemento. Na verdade, fazer isso na maioria das vezes é uma boa idéia. Tomemos como exemplo o padrão de marcação para item de lista de um comentário no WordPress:

<li id="comment-27299" class="item">

Tem uma classe que foi aplicada que talvez se queira usar para estilizar todos os comentários na página, mas também há um único valor de ID (dinamicamente gerado pelo WordPress). Com isso, é facilmente possível fazer um link diretamente a um comentário, em uma página, em especial.

CSS não se importa

Quanto ao CSS, não há nada que você possa fazer com um ID que não possa fazer com uma Classe e vice-versa. Às vezes, quando se está iniciando no estudo de CSS e se tem um problema, tenta-se alternar entre usar ID ou usar Classe. O CSS não se importa.

Javascript se importa

Aqueles que mexem com javascript provavelmente já estão mais em sintonia entre as diferenças entre as Classes e IDs. Javascript depende da existência de um elemento de página com ID único, ou então a comumente utilizada função getElementById não seria confiável. Aqueles acostumados com jQuery sabem o quão fácil é adicionar e remover classes de elementos de página. É uma função nativa no jQuery. Veja que tal função não existe para IDs. Não é responsabilidade do javascript manipular estes valores, porque ele causaria mais problemas que seria útil…

Se você não precisa deles, não os use

Como você pode ver, classes e IDs são muito importantes e nós os utilizamos todos os dias para estilizar páginas e manipular aquilo que é preciso. Entretanto, você deve usá-los com critério e semanticamente.

Isto significa evitar coisas do tipo:

<a href="http://css-tricks.com" class="link">CSS-Tricks.com</a>

Já sabemos: este elemento é um link, é um elemento âncora. Não há nada de especial aqui a ponto de ser preciso especificar uma classe, já que é possível aplicar o estilo na própria tag (“a”).

Evite este tipo de coisa, também:

<div id="coluna-direita">

O ID é corretamente utilizado aqui, já que, provavelmente, a página terá somente uma única coluna da direita, mas o nome é inadequado. Descreva o contexto do elemento, não onde está ou como se parece. Um ID “barra-lateral” seria melhor.

Microformatos são apenas nomes específicos de classes

Pensa que microformatos é difícil para você? Microformato é apenas marcação regular que faz uso de nomes de classes padronizados para a informação que contêm. Veja este vCard:

<div class="vcard">
  <a class="fn org url" href="http://www.commerce.net/">CommerceNet</a>
  <div class="adr">
    <span class="type">Work</span>:
    <div class="street-address">169 University Avenue</div>
    <span class="locality">Palo Alto</span>,
    <abbr class="region" title="California">CA</abbr>
    <span class="postal-code">94301</span>
    <div class="country-name">USA</div>
  </div>
  <div class="tel">
   <span class="type">Work</span> +1-650-289-4040
  </div>
  <div class="tel">
    <span class="type">Fax</span> +1-650-289-4041
  </div>
  <div>Email:
   <span class="email">info@commerce.net</span>
  </div>
</div>

Artigos Relacionados

• Elementos de design aplicados à web
• Wireframes para web: guia completo de desenvolvimento
• 10 erros básicos de web design
• 4 elementos de design para um bom call to action
• User Interface em dicas rápidas
• 10 dicas que desenvolvedores web iniciantes devem saber
• JSON – JavaScript Object Notation
• URLs longas apresentadas corretamente com CSS
• Novas tecnologias exigem novas maneiras de se comunicar
• Erros comuns em desenvolvimento web para campanhas de SEO