A HTML fornece diversos elementos para que possamos dar algum significado ao conteúdo. Como sabemos, cada tag serve a um propósito e, usá-las de maneira adequada, pensando na semântica web, faz parte do trabalho do desenvolvedor web.

Então, se é preciso exibir uma lista de produtos num site, por exemplo, é possível usar o elemento de listas não ordenadas, ul, para marcar esse conteúdo e dar algum significado à informação. Dizemos ao “interpretadores” do código (sejam browsers, leitores de tela, bots de sistemas de busca, etc): “Isto é uma lista com alguns itens”. Mas, somente com essa marcação, não é possível informar que esta é uma lista de produtos.

Para dar esse passo além na semântica de documentos web é que está sendo criada a Microdata API.

O problema do significado

Quando uma pessoa faz uma busca por “melhores bancos do brasil”, ela está procurando as melhores instituições financeiras do país ou os melhores móveis para se sentar? Certamente, a pessoa que está fazendo a busca, sabe, mas, será que o buscador a que a busca foi submetida interpretará isso de maneira adequada?

A pessoa que fez essa busca, ao entrar em um dos links da SERP, verá se a página que entrou é sobre instituições financeiras ou móveis. Se ela estiver procurando pelas primeiras e acessar uma página sobre os segundos, entrou em um link que não era de seu interesse devido ao fato de o buscador ter mostrado uma informação errônea no momento de exibir os resultados. Afinal, mesmo com os relativamente inteligentes algoritmos que os melhores buscadores possuem, este tipo de situação ocorre com frequência.

Usando a API de microdata (ou microdados), é possível auxiliar as máquinas (não somente buscadores) a descobrir o significado dos conteúdos nos web sites; é possível informar que uma lista no site é uma lista de produtos; é possível informar que seu site é sobre instituições financeiras, ao invés de móveis. Em suma, através da Microdata API, é possível dar mais  significado ao conteúdo.

Conhecendo a Microdata API

A Microdata API tem como objetivo dar mais significado aos documentos web que fazemos. Usando Microdata, é possível informar aos robôs significados além do que uma marcação “tradicional” poderia/conseguiria, agregando maior valor semântico ao conteúdo dos sites, o que, por consequência, traz inúmeros benefícios. E isso é feito através de marcações específicas nos códigos.

Sintaxe da microdata

Basicamente, o modelo de microdata consiste em grupos de pares nome-valor, conhecidos como itens e cada item pode ter 1 ou mais tipos de item; cada item, pode ter 1 ou mais propriedades, que podem ter 1 ou mais valores. Para criar um item, o atributo itemscope é usado e, para adicionar uma propriedade a um item, o atributo itemprop é usado.

É possível usar microdata sem a intenção de reutilização, mas, concordemos, isso não faz sentido. O interessante é termos “especificações” de microdados que podem ser usadas amplamente, por quem quer que seja. Por isso, geralmente se identifica o tipo de item através da indicação de um URI que contenha essa especificação. Usar microdata é usar vocabulários.

Por exemplo, vamos ver a “marcação padrão” de uma ração de gatos num site qualquer:

<section>
    <h1>Siamês</h1>
    <p>Gato-siamês é uma raça de gato oriental, caracterizada por um corpo elegante e longilíneo e uma cabeça marcadamente triangular.</p>
    <img src="siames.jpg" alt="Gato siamês">
</section>

Agora, este mesmo código sendo marcado com microdata:

<section itemscope itemtype="http://example.org/animals#cat">
    <h1 itemprop="name">Siamês</h1>
    <p itemprop="desc">Gato-siamês é uma raça de gato oriental, caracterizada por um corpo elegante e longilíneo e uma cabeça marcadamente triangular.</p>
    <img itemprop="img" src="siames.jpg" alt="Gato siamês filhote">
</section>

No exemplo, o item “http://example.org/animals#cat” possui 3 propriedades, um “name” (“Siamês”), uma “desc” (“Gato-siamês é uma raça…”) e “img” (“siames.jpg”) e, como vimos, é possível haver mais de um valor por propriedade (inclusive, que seja a indicação de outro “vocabulário”):

<section itemscope itemtype="http://example.org/animals#cat">
    <h1 itemprop="name http://example.com/fn">Siamês</h1>
    <p itemprop="desc">Gato-siamês é uma raça de gato oriental, caracterizada por um corpo elegante e longilíneo e uma cabeça marcadamente triangular. Suas cores, normalmente, são <span
 itemprop="http://example.com/color">branco</span> (enquanto crias), <span
 itemprop="http://example.com/color">branco sujo</span> ou <span
 itemprop="http://example.com/color">creme</span>, com extremidades <span
 itemprop="http://example.com/color">castanho</span> muito escuro (quase <span
 itemprop="http://example.com/color">preto</span>), <span
 itemprop="http://example.com/color">cor de chocolate</span>, e, raramente, <span
 itemprop="http://example.com/color">azul acinzentado</span> ou <span
 itemprop="http://example.com/color">lilás acinzentado</span>.</p>
    <img itemprop="img" src="siames.jpg" alt="Gato siamês filhote">
</section>

Sem sombra de dúvidas, esta marcação é mais trabalhosa de se fazer e, não raramente, pode haver erros de sintaxe na marcação, devido a relativa complexidade e volume. Existe uma maneira de testar se tudo está nos conformes, a ferramenta Rich Snippets Testing Tool.

Ao inserir uma URL (ou trecho de código HTML, diretamente), é possível ter um preview de rich snippet no Google e, caso o código tenha microdados, ele exibe, de forma organizada, esta estrutura. Como consta na própria página de explicação de Rich Snippets,

Se o Google compreender o conteúdo de suas páginas, podemos criar rich snippets — e informações detalhadas para ajudar os usuários com consultas específicas. Por exemplo, o snippet para uma página de receitas pode mostrar o tempo total de preparo, uma foto e a avaliação dos comentários da receita. O snippet para um restaurante pode exibir a avaliação média e a faixa de preços. Já o snippet para um álbum de músicas pode listar as músicas junto com um link para reproduzir cada uma delas. Esses rich snippets ajudam os usuários a identificar se o site é relevante para a pesquisa e podem resultar em mais cliques em sua página.

Você pode ajudar o Google a revelar essas informações relevantes adicionando uma marcação HTML extra em suas páginas. Essa marcação ajuda o Google a reconhecer certos tipos de dados e a exibi-los de maneira útil nos rich snippets.

Estão entendendo, agora, a diferença que o uso de microdata pode fazer? “O snippet para um restaurante pode exibir a avaliação média e a faixa de preços”?! Isso é muito incrível! Com toda a certeza, a exibição de um snippet dessa qualidade é a diferença entre receber, ou não, mais uma visita em seu site!

Concorda que um snippet de receita como este é muito mais atrativo e informativo que o snippet padrão da SERP do Google? Ele é muito mais útil à pessoa que está buscando, por exemplo, um “Pão de Banana”, apresenta informações que são muito mais relevantes e, no momento, caso você consiga que seu site seja um dos poucos a conseguir um rich snippet desta qualidade, ele é totalmente diferenciado dos demais!

Microdata DOM API

A Microdata API também conta com uma série de métodos JavaScript: Microdata DOM API. Por exemplo, temos o método getItems(), que provê acesso ao itens marcados com microdata. Ele retorna uma NodeList contendo os itens dos tipos especificados (ou todos os itens, se nenhum argumento for passado).

var cat          = document.getItems('http://example.org/animals#cat')[0];
var colors       = cat.properties['http://example.com/color'].getValues();
var colors_total = colors.length;
var result;
 
if (colors_total == 0)
{
    result = 'Cor desconhecida.';
}
else if (colors_total == 1)
{
    result = 'Cor: ' + colors[0];
}
else
{
    result = 'Cores:';
    for (var i = 0; i < colors_total; i += 1)
    {
        result += ' ' + colors[i];
    }
}

Na verdade, estes são somente alguns exemplos de uso e apresentação da Microdata API. Caso se queira aprofundar no assunto, o que é altamente recomendado, é preciso estudar a documentação oficial da Microdata API.

Schema.org

Como vimos, é mais interessante haver conjuntos de vocabulários comuns, acessíveis e centralizados e prontos para serem usados por qualquer pessoa. Felizmente, isso já existe! Trata-se do Schema.org. O Schema.org é um vocabulário de marcação de microdata compartilhado, que torna mais fácil para nós, pessoal do desenvolvimento web, decidir sobre um esquema de marcação.

Mas, realmente, adianta usar o vocabulário de microdata do Schema.org? Sim, adianta, e muito, já que os melhores buscadores do mundo, tais como Google, Bing, Yahoo! e Yandex, ratificaram o projeto e seus respectivos spiders e SERPs já fazem uso dessa tecnologia! Já foi mostrado que, por exemplo, o Google já faz uso deste tipo de marcação para aprimorar seus snippets e, por experiência pessoal, afirmo que, também, contribui para a melhora do posicionamento nos resultados de busca.

Exemplo de uso do Schema.org

No próprio site do Schema, eles apresentam um exemplo bastante didática para mostrar o conceito por trás dos microdados. Imagine que alguém marca como título principal (h1) “Avatar”. Mas essa página diz respeito àquela imagem que as pessoas utilizam em seus perfis de redes sociais ou ao filme Avatar, de James Cameron? Usando o schema correto, é possível auxiliar aos buscadores a entender melhor do que trata aquele documento.

<div itemscope itemtype ="http://schema.org/Movie">
    <h1 itemprop="name">Avatar</h1>
    <span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span>
    <span itemprop="genre">Science fiction</span>
    <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>

E, como já vimos anteriormente, é possível, inclusive, fazer “embedded” de outros itens:

<div itemscope itemtype ="http://schema.org/Movie">
    <h1 itemprop="name">Avatar</h1>
    <div itemprop="director" itemscope itemtype="http://schema.org/Person">
        Director: <span itemprop="name">James Cameron</span> (born <span itemprop="birthDate">August 16, 1954</span>)
    </div>
    <span itemprop="genre">Science fiction</span>
    <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>

Usando o vocabulário do Schema.org

O Schema.org possui uma série de “tipos” (itens), cada um com suas respectivas propriedades. Cada um desses tipos é chamado de schema (faz sentido…). Então, para darmos mais significado e complementarmos a semântica de nossos documentos HTML, é preciso percorrer a lista dos diferentes schemas disponíveis e saber o que se pode usar no momento.

Perceba que cada tipo pode ter, também, subtipos, que herdam as características de seus ancestrais e possuem suas próprias. Por exemplo, o schema Movie possui suas propriedades distintas e, também, as propriedades de seus ancestrais CreativeWork e Thing.

Lembrando que, não necessariamente, todas as propriedades, próprias ou herdadas, precisam ser usadas ao mesmo tempo.

Em geral, quanto mais conteúdo você marcar, melhor. No entanto, como regra geral, você deve marcar apenas o conteúdo que é visível para as pessoas que visitam a página, não o conteúdo oculto.

Tipos esperados versus texto.

Ao navegar entre os vários schemas, você vai notar que muitas propriedades têm “tipos esperados”. Isto significa que o valor da propriedade, por si só, pode ser um item incorporado (embedded). Mas este não é um requisito – não há problema em incluir somente texto ou uma URL. Além disso, sempre que um tipo esperado é especificado, também não há problemas em incorporar um item descendente. Por exemplo, se o tipo esperado é Place, também é permitido incorporar um LocalBusiness.

Usando a propriedade “url”

Algumas páginas da web são sobre um item específico. Por exemplo, você pode ter uma página web sobre uma única pessoa, que você pode marcar com Person.

Já outras páginas podem ter uma coleção de itens descritos nelas. Por exemplo, o site de uma empresa pode ter uma página com a lista de funcionários com um link para uma página de perfil de cada um. Para páginas como esta, com uma coleção de itens, você deve marcar cada item separadamente (neste caso como uma série de Person) e adicionar a propriedade url no link correspondente a cada item, assim:

<ul>
    <li itemscope itemtype="http://schema.org/Person">
        <a href="jose-das-coves.html" itemprop="url">Jos&eacute; das Coves</a>
    </li>
 
    <li itemscope itemtype="http://schema.org/Person">
        <a href="joao-da-silva.html" itemprop="url">Jo&atilde;o da Silva</a>
    </li>
</ul>

Teste a marcação

Como já comentamos, é interessante passar seu código pela Rich Snippets Testing Tool para testar se tudo está como deveria. Caso algum “esquecimento” tenha ocorrido no momento de marcar os schemas, a ferramenta vai ser de muita valia ao apontar quais equívocos foram esses.

Conclusão sobre Microdata API e schemas

Como os desenvolvedores web devem (ou deveriam) saber, muita coisa neste ramo está mudando (para melhor) com o advento do HTML5. Certamente, uma dessas melhorias é a Microdata API, que permite, a partir de então, darmos mais significado ao conteúdo do site, provendo uma maneira simples e eficiente de melhorar a significação de nossos conteúdos.

Para auxiliar neste propósito, os schemas estão, aí, para centralizar, organizar e prover um vocabulário unificado e acessível de microdata para ser usada e abusado. Não deixe de conferir a documentação completa do Schema.org. E, para clarear ainda mais as explicações, veja o excelente post do pessoal do Loop Infinito sobre microdata e os vocabulários do Schema.org, com direito a gráficos em SVG e tudo o mais! :-D

Tanto por indicações “vindas de cima” – como no caso de os grandes buscadores já darem suporte e incentivar o uso de microdados -, quanto por experiências próprias comprovadas, usar microdata em projetos web, a partir de agora, é praticamente uma obrigação!

Artigos Relacionados

• JSON – JavaScript Object Notation
• Melhorando a interação em formulários de busca
• URLs amigáveis (slug) à WordPress
• 15 fantásticos comandos SQL para WordPress
• 6 mitos de SEO que você deve evitar
• Como criar sumários dinamicamente com o TOC (Table of Contents) jQuery plugin
• Como pegar parte do conteúdo (dados) de outro site com PHP
• Problemas comuns de WordPress e como resolvê-los
• Evitando erros comuns de HTML5
• Usando Modernizr para detectar features de HTML5 e CSS3

Os recursos e técnicas que estão surgindo com HTML5 e CSS3 são fenomenais e estão levando a web para um próximo nível. Mas o que fazer se já for preciso usar alguns destes recursos já? Como lidar com browsers que ainda não suportam todas as features de HTML5 + CSS3? A solução tem nome: Modernizr.

Modernizr é uma biblioteca JavaScript que detecta quais features de HTML5 e CSS3 o navegador de quem visita o site suporta. Isso permite aos desenvolvedores testar algumas das novas tecnologias e, em seguida, fornecer fallbacks para navegadores que ainda não as suportam. Isto é chamado de feature detection (detecção de característica) e é muito mais eficiente do que browser sniffing.

Também é importante ter em mente que o Modernizr não “preencher as lacunas” (polyfill). Ele só detecta quais características são suportadas. Mas é possível usar usar o Modernizr como parte do processo de polyfilling.

Começando a usar o Modernizr

Primeiramente, vamos precisar de um pouco de HTML (HTML5, claro!):

<!DOCTYPE html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8">
        <title>Hello Modernizr</title>
        <script src="modernizr.js"></script>
    </head>
 
    <body>
    </body>
</html>

É possível notar no código acima que o arquivo modernizr.js é necessário. É preciso gerar e baixar o arquivo no site do Modernizr, escolhendo as características que serão precisas serem detectadas. Isso ajuda a ter um arquivo modernizr.js com tamanho adequado às necessidades do projeto, já que não é preciso detectar tudo o que o Modernizr é capaz. Há, também, uma versão “development” no site para começar o desenvolvimento rapidamente. Mas, quando for colocar o site em produção, lembre-se de gerar um arquivo personalizado!

Tela de download do Modernizr

Ainda observando o trecho de código acima, veja que na segunda linha há uma classe “no-js” no html. O Modernizr funciona substituindo essa classe pela classe “js”; então, ele adiciona classes para todas as features que o navegador suporta e, também, para os recursos que ele não suporta, pré-fixando estas com “no-”. Por exemplo:

<html class="js no-flexbox canvas canvastext no-webgl no-touch geolocation postmessage no-websqldatabase no-indexeddb hashchange no-history draganddrop no-websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow no-textshadow opacity no-cssanimations no-csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions fontface generatedcontent video audio localstorage sessionstorage no-webworkers no-applicationcache svg inlinesvg smil svgclippaths">

Detecções explícitas com Modernizr

O Modernizr cria um objeto JavaScript global Modernizr que permite consultar diferentes propriedades desse objeto para realizar a detecção de recursos, chamando Modernizr.<feature>. Por exemplo, para testar o suporte a canvas, o código seria:

<script>
if (Modernizr.canvas)
{
    alert("Seu browser suporta HTML5 canvas!");
}
</script>

Como bons desenvolvedores web que somos, nosso objetivo é escrever JavaScript não obstrusivo e progressivo para que todos possam usar o site, portanto, é preciso tomar alguma ação para o caso da feature não ser suportada:

<script>
if (Modernizr.canvas)
{
    alert("Seu browser suporta HTML5 canvas!");
}
else
{
    alert("Seu browser NÃO suporta canvas...");
}
</script>

Ou, caso se queira testar somente a “negação”:

<script>
if ( ! Modernizr.canvas)
{
    alert("Sem canvas aqui...");
}
</script>

Detecção de recursos e Polyfilling com YepNope

Antes de continuar, caso ainda não saiba o que é “Polyfill”, veja este definição do Paul Irish:

Um shim que imita uma API futura, fornecendo funcionalidades de fallback para navegadores mais antigos.

Para maiores informações, leia (em inglês) o artigo “What is a Polyfill?” de Remy Sharp. Voltando ao artigo…

Nos exemplos JavaScript acima, foi mostrada a maneira mais simples de detectar um recurso de browsers usando o Modernizr. Mas e se você quiser detectar um recurso e usar um polyfill para tornar a performance do navegador melhor? É possível, usando YepNope.

YepNope é um carregador condicional, que significa que ele só irá carregar os scripts que são necessários para o browser. E ele já está incluso no Modernizr! Dessa forma, não é preciso se preocupar com downloads e links para outros arquivos JavaScript. Mas como usar o YepNope junto com o Modernizr?

Utilizando canvas como exemplo novamente, geralmente é preciso uma alternativa (fallback) para os navegadores que não o suportam (por exemplo, IE8). A maneira usual de se fazer isso é um link para um polyfill, tal como o FlashCanvas:

<script src="http://flashcanvas.net/bin/flashcanvas.js"></script>

O problema dessa abordagem é que todos os navegadores irão baixar este script. Isso é desnecessário, pois impacta a performance do site, e deve ser evitado sempre que possível. É possível envolver o elemento script em comentários condicionais, mas, caso seja possível manter os arquivos condicionais fora da marcação, então isso é preferível. Isso é possível de ser feito usando Modernizr.load(). Já que o Modernizr tem o YepNope embutido, é facilmente possível testar um recurso e, em seguida, fornecer um polyfill:

O uso básico da função .load() permite que testar a presença de uma feature. Veja este exemplo em que o Modernizr testa o suporte para canvas e, caso o browser não a suporte, ele carrega o FlashCanvas:

Modernizr.load({
    test: Modernizr.canvas,
    nope: 'http://flashcanvas.net/bin/flashcanvas.js'
});

Usando as developer tools do IE8, na aba “Network” é possível ver o download e inicialização do flashcanvas.js. Legal, hã? ;-)

Modernizr + YepNope: checando downloads condicionais no IE8

Vamos a um exemplo mais prático que detecta o suporte a <input type="date">. Se não for suportado, haverá o carregamento de 2 arquivos jQuery e um arquivo CSS para gerar um seletor de datas:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<script src="modernizr.js"></script>
<script>Modernizr.load({
    test: Modernizr.inputtypes.date,
    nope: [
        'http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js',
        'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js',
        'jquery-ui.css'
    ],
    complete: function() {
        $('input[type=date]').datepicker({
            dateFormat: 'yy-mm-dd'
        });
    }
});
</script>

Na maioria dos navegadores, o jQuery será carregado, mas, no Opera, não haverá essa necessidade, já que ele já possui um seletor de datas nativo por já suportar <input type="date">.

Seletor de datas no Firefox

Seletor de datas no Opera

E, como você já deve ter imaginado, carregar ou não 2 arquivos JavaScript e uma folha de estilos gera uma grande diferença na performance do site.

Comparação de recursos ao carregar datapicker: Firefox x Opera

Observe como os 2 arquivos jQuery são carregados duas vezes. Isso acontece, mesmo, no YepNope: primeiro ele carrega o recurso e, em seguida, executa-o. Então, não se preocupe, pois isso é normal. E veja, também, todas as propriedades do objeto de teste do YepNope, conhecê-las pode ser bastante útil!

Conclusão

Como pôde ser visto, Modernizr é uma poderosa biblioteca de detecção de features. Ela permite verificar se o navegador suporta vários recursos e, dependendo do resultado, permite que sejam usados polyfills. Este artigo analisou como gerar um arquivo Modernizr e suas 2 maneiras de uso: usando diretamente o objeto Modernizr (Modernizr.<feature>) e, em seguida, usando YepNope.

Com isso, damos mais um passo rumo ao desenvolvimento de uma web melhor, mais profissional e com desenvolvedores mais conscientes das limitações intrínsecas aos diversos dispositivos que podem ser usados para se acessar um site. Sabíamos do “mal”, agora conhecemos a cura.

Artigos Relacionados

• Não use IDs como seletores em CSS
• Como usar .ready() antes de incluir a jQuery
• Ferramentas e recursos para desenvolvimento web
• 8 características de User Interfaces (UI) de sucesso
• 10 fontes de inspiração para fazer logotipos de qualidade
• Gestalt aplicado ao design web (parte 5): exemplos web do princípio do alinhamento
• Gestalt aplicado ao design web (parte 3): exemplos web do princípio da proximidade
• Evitando erros comuns de HTML5
• Microdata API e Schema.org: dando significado ao HTML
• Desenvolvedores front end e o mercado

Uma das mais “tradicionais” regras de performance de sites é colocar as chamadas para javascripts externos no final do documento HTML, antes do fechamento da tag body. Mas não são raras as ocasiões em que nós, desenvolvedores web, precisamos inserir códigos que dependem da jQuery no meio do documento (posição que fica antes do indicado para se chamar a própria jQuery). Como proceder?

Antes de continuarmos, é importante saber que existem diferentes sintaxes possíveis para “ativar” o jQuery:

$(handler) // "handler" é a função a ser vinculada
 
$(document).ready(handler);
 
$().ready(handler) // maneira não recomendada
 
$(document).bind('ready', handler);

E existe solução para usar .ready() antes de incluir o jQuery?

Sim, existe solução para usar .ready() antes de incluir o jQuery e, felizmente, a solução é eficaz em todas essas possibilidades apresentadas – e, talvez, até em algumas outras, quem sabe…

Em termos práticos, a solução é:

<!-- No <head> -->
<script type="text/javascript">
(function(w,d,u){w.readyQ=[];w.bindReadyQ=[];function p(x,y){if(x=="ready"){w.bindReadyQ.push(y);}else{w.readyQ.push(x);}};var a={ready:p,bind:p};w.$=w.jQuery=function(f){if(f===d||f===u){return a}else{p(f)}}})(window,document)
</script>
 
<!-- No <body> (imediatamente após a jQuery) -->
<script type="text/javascript">
(function($,d){$.each(readyQ,function(i,f){$(f)});$.each(bindReadyQ,function(i,f){$(d).bind("ready",f)})})(jQuery,document)
</script>

Claro que não dá pra entender a lógica olhando script comprimidos. Vejamos o de head:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

(function (w, d, u) {
 
    // Define duas queues para os handlers
    w.readyQ = [];
    w.bindReadyQ = [];
 
    // Insere um handler na queues correta
    function pushToQ(x, y) {
        if (x == "ready") {
            w.bindReadyQ.push(y);
        } else {
            w.readyQ.push(x);
        }
    }
 
    // Define um objeto alias (para uso posterior)
    var alias = {
        ready: pushToQ,
        bind: pushToQ
    }
 
    // Definir a função jQuery "fake" para capturar os handlers
    w.$ = w.jQuery = function (handler) {
        if (handler === d || handler === u) {
            // Coloca na queue $(document).ready(handler), $().ready(handler)
            // e $(document).bind("ready", handler), retornando um objeto com
            // os métodos de "alias" para pushToQ
            return alias;
        } else {
            // Queue $(handler)
            pushToQ(handler);
        }
    }
 
})(window, document);

O script de body (imediatamente depois da jQuery):

1
2
3
4
5
6
7
8
9
10
11

(function ($, doc) {
 
    $.each(readyQ, function (index, handler) {
        $(handler);
    });
 
    $.each(bindReadyQ, function (index, handler) {
        $(doc).bind("ready", handler);
    });
 
})(jQuery, document);

Usa-se o $.each() para associar corretamente todos os handlers na fila para o DOM pronto, mas, porque $(document).bind(“ready”, handler) pode ter sido chamado antes, é preciso dar um bind, também, da maneira correta.

Exemplo de uso

OK, realmente é um pouco confuso de se entender de primeira, por isso, vejamos este exemplo de como usar o $.ready() antes da jQuery, seguido de suas respectivas saídas num console.

Exemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
        <script>(function(w,d,u){w.readyQ=[];w.bindReadyQ=[];function p(x,y){if(x=="ready"){w.bindReadyQ.push(y);}else{w.readyQ.push(x);}};var a={ready:p,bind:p};w.$=w.jQuery=function(f){if(f===d||f===u){return a}else{p(f)}}})(window,document)</script>
    </head>
    <body>
        <script>
            $(document).bind("ready", function () {
                console.log("Examplo D: $(document).bind(\"ready\", handler)");
            });
            $(document).ready(function () {
                console.log("Examplo A: $(document).ready(handler)");
            });
            $().ready(function () {
                console.log("Examplo B: $().ready(handler)");
            });
            $(function(){
                console.log("Examplo C: $(handler)");
            });
        </script>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script>(function($,d){$.each(readyQ,function(i,f){$(f)});$.each(bindReadyQ,function(i,f){$(d).bind("ready",f)})})(jQuery,document)</script>
    </body>
</html>

Console:

1
2
3
4

Example A: $(document).ready(handler)
Example B: $().ready(handler)
Example C: $(handler)
Example D: $(document).bind("ready", handler)

Haha! Viu, só? Apesar de, no código, o scripts do “Exemplo D” ter sido o primeiro, na saída do console os exemplos executaram perfeitamente na ordem “A, B, C, D”!   \o/

Conclusão

E, com isso, vimos que é perfeitamente possível – e relativamente simples – usarmos chamadas ao .ready() da jQuery de forma “não ordenada”. Isso faz abrir um leque de possibilidades interessante, pense bem!

Se gostou e/ou tem alguma ideia de como usar isso para melhorar seus scripts, comente e compartilhe! Ajude a desenvolver a web! ;-)

Artigos Relacionados

• Usando Modernizr para detectar features de HTML5 e CSS3
• Evitando erros comuns de HTML5
• Microdata API e Schema.org: dando significado ao HTML
• Não use IDs como seletores em CSS
• Como otimizar códigos jQuery e aumentar a performance do front-end
• JSON – JavaScript Object Notation
• Como fazer loading em conteúdos do site
• 5 dicas para temas WordPress melhores
• Melhorando a interação em formulários de busca
• 8 maneiras de melhorar a performance de um site

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

• Evitando erros comuns de HTML5
• Microdata API e Schema.org: dando significado ao HTML
• 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

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
• Evitando erros comuns de HTML5
• Usando Modernizr para detectar features de HTML5 e CSS3
• Não use IDs como seletores em CSS
• 10 dicas que desenvolvedores web iniciantes devem saber

É 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

• Problemas comuns de WordPress e como resolvê-los
• 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

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

• Problemas comuns de WordPress e como resolvê-los
• 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
• 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
• Evitando erros comuns de HTML5
• Não use IDs como seletores em CSS
• 10 dicas que desenvolvedores web iniciantes devem saber
• JSON – JavaScript Object Notation
• URLs longas apresentadas corretamente com CSS