Template para iniciar projetos HTML5 e Microformats

Duas dicas fundamentais da semana: http://html5boilerplate.com/ e http://microformats.org/wiki/microdata.

capa do site HTML5 Boilerplate

Simplesmente sensacionais. O primeiro – HTML5 Boilerplate – é um template pra iniciar algo web, pode ser qq coisa, é apenas um ponto de partida pra uma ótima página html 5. Não depende de projeto, não depende de nada. Você recebe uma pré-estrutura de html que vai funcionar na boa com qualquer navegador e já pode contar com elementos html5 inclusive no IE6!

O segundo – Microdata – é um quase segredo de SEO. Isso é o que há de SEO. Quer ser muito bem indexado? Corra pros microformats. São pequenos atributos, classes e estruturas que você aplica em seu html, de forma padronizada e até reconhecida pelo w3c.

Update: não deixe de ver o vídeo de Paul Irish falando sobre o HTML 5 Boilerplate:

Como desabilitar datas no DatePicker do jQuery UI

Tutorial rápido e prático: vamos desabilitar datas no DatePicker do jQuery UI.

Vamos supor que você quer exibir um datepicker pro usuário e nele você já configurou data mínima e data máxima com as propriedades minDate e maxDate. Você precisa agora selecionar uns dias específicos.

Vamos supor: estamos no mês de Agosto de 2010, vamos exibir o calendário com os 31 dias do mês e não queremos exibir os dias 10 a 12 do mesmo mês.
Ler mais »

Cantos arredondados no IE apenas com CSS!

Temos grandes browsers no mercado, infelizmente um dos mais utilizados é uma verdadeira pedra no sapato de quem tem que desenvolver para a web. Ainda mais quando falamos de cantos arredondados ou rounded corners

Existe um fato e existe uma solução!

Bordas no IE sem imagens

Ler mais »

HTML 5 – Acessibilidade e semântica para spiders

Esta é a primeira parte do que quero apresentar sobre a inovação da Web 3, atendendo conceitos de acessibilidade e semântica para spiders em uma estrutura HTML5.

Estamos falando de tecnologias e conceitos reunidos para um alcance global de funcionalidade da internet. Está se formando um gigante na internet, útil e predador de quem resistir em adotar boas práticas.

HTML 5 ainda não foi lançado oficialmente. A W3C ainda está com perspectiva desse lançamento pra daqui a alguns anos, sem pressa. Mesmo assim, já podemos recorrer de diversos e ótimos recursos mantendo compatibilidades crossbrowser.
Ler mais »

Compilação com sons de abertura do Mac (Apple)

Encontrei esse vídeo e achei bem interessante, é uma compilação dos sons de abertura do Macintosh ao longo do tempo. Mudou bastante. Acho o som atual muito próximo ao tom do primeiro acorde da música “Advice for the young at heart” do grupo Tears for Fears.

O vídeo conta com um bônus dos sons de “crash” usados nos aparelhos da Apple.

Mais informação sobre a história do acorde você pode encontrar no Google ou como já fiz a pesquisa, vai dois links que abri por aqui: http://hownow.brownpau.com/archives/2005/05/history-of-the-mac-startup-sound/ e http://musicthing.blogspot.com/2005/05/tiny-music-makers-pt-4-mac-startup.html

Ajax com jQuery e WordPress

Gosto muito desses três tipos de tecnologia: jQuery, Ajax e WordPress. Fazem parte do que mais me empolga em trabalhar com web.

O mais legal disso tudo é saber que eles estão em total sintonia. Vou passar uns exemplos rápidos de como fazer comunicações em ajax utilizando o jQuery no “client-side” se comunicando com o WordPress no “server-side”.

Vamos supor um caso onde eu queira fazer uma busca dinâmica para buscar uma lista de taxonomias e imprimir essa lista em determinado local da tela.

Ler mais »

Como habilitar recurso de multi-sites no WordPress 3.0

Não é tão simples quanto gostaríamos que fosse, provavelmente. Uma das grandes novidades da nova versão do WordPress, a 3.0 é justamente a sua integração com o conceito do WordPress MU e assim a possibilidade de criação de vários subsites. Embora a novidade venha como um grande plus no WordPress 3.0, a sua configuração não chega nem perto de ser tão simples quanto a instalação padrão do CMS.

Se você ainda não tem o WordPress 3.0 e quer o obter, faça o download. Mesmo assim, lembre-se: ele ainda não foi lançado oficialmente e está em fase beta.

Vamos a um pequeno passo a passo para ver como podemos habilitar esse recurso de multi sites no WordPress 3.0.

Ler mais »

Adicionando Thumbnails no seu site em WordPress

Uso de miniaturas do WordPress no iPhone

Uso de miniaturas do WordPress no iPhone


Uma novidade do WordPress 2.9 foi um melhor suporte aos thumbnails, aquelas miniaturas de imagens.

Muita gente utiliza thumbs de posts para mostrar uma imagem em lugar específico na apresentação de seu site. Muitas vezes utilizavam configurações com campos personalizados – custom fields – para obter urls das imagens. Isso era muito complicado. Vamos ver um método bem simples.

Pra começar é fácil, precisamos incluir no arquivo functions.php de nosso tema a seguinte chamada:

add_theme_support( 'post-thumbnails' );

A partir desse momento, quando ativamos nosso tema já vamos poder observar uma novidade na página de edição de artigos do WordPress, uma caixa com o nome “Miniatura do Post”.

Tela de inclusão de miniatura

Tela de inclusão de miniatura no artigo

Quando clicamos em “Configurar miniatura” temos uma tela idêntica à de upload de imagens, suba um arquivo normalmente. Pronto, logo após subir a mesma, temos ao lado do botão “Inserir no Post” um link com a chamada: “Usar como miniatura”.

Note que algumas vezes esse link não aparece de primeira devido ao cache do browser. Se isso acontecer, mande gravar as alterações, abra novamente a tela de mídias do artigo e selecione a imagem que já foi enviada, assim o link deve aparecer, dessa vez.

Tela de Envio de Imagem para uso como Miniatura

Tela de Envio de Imagem para uso como Miniatura

Agora podemos buscar essa miniatura no nosso tema, dentro do loop do WordPress com um comando muito simples:

the_post_thumbnail();

Vamos incrementar

Supomos que você quer aplicar esse suporte a thumbnails apenas nas páginas de artigos (posts) e não em páginas comuns do WordPress (pages). Pra isso utilizamos parâmetros ao método add_theme_support:

add_theme_support( 'post-thumbnails', array( 'post') );

Logo depois podemos definir o tamanho padrão pra essa miniatura:

set_post_thumbnail_size( 100, 100, true );

Note que esse tamanho definido acima não tem relação ao tamanho padrão de imagem “Miniatura” da edição do post. Esse tamanho é apenas utilizado quando utilizamos o método the_post_thumbnail().

Os parâmetros declarados acima se referem respectivamente a: largura, altura e se queremos que a imagem seja redimensionada e cortada para o tamanho especificado. Se colocássemos false ali ou não utilizássemos um terceiro parâmetro a imagem viria no tamanho full e seria redimensionada apenas no browser. Isso geraria um provável atraso no carregamento, já que a imagem pré-cortada normalmente ficaria com tamanho menor.

Se não utilizarmos esse método para definir o tamanho da miniatura, os valores padrões seriam exatamente os da miniatura padrão definida nas mídias do WordPress.

Agora vamos definir novos tamanhos aos thumbnails:

add_image_size( 'destaque-thumbnail', 290, 200, true );
add_image_size( 'destaque-verySmall', 70, 70, true );

Note que aí defini 2 novos tamanhos que fazem o pré-corte da imagem quando ela é enviada. Podemos definir quantos tamanhos quisermos, claro que afeta relativamente o desempenho do servidor.

Para buscar esses tipos específicos em nosso tema o trabalho também é simples:

the_post_thumbnail('destaque-verySmall');

Da mesma forma podemos buscar o thumbnail nos padrões definidos no wordpress:

the_post_thumbnail('thumbnail');
the_post_thumbnail('medium');
the_post_thumbnail('large');
the_post_thumbnail('full');

Podemos também verificar se o artigo ou página tem uma miniatura definida, simples também:

if ( has_post_thumbnail() ) { the_post_thumbnail(); }

Podemos também buscar o Id da imagem utilizada como miniatura:

$miniatura_id = get_post_thumbnail_id();

Assim como apenas retornar a miniatura invés de passar ela diretamente pra tela:

$miniatura = get_the_post_thumbnail( $post->ID, 'thumbnail' );

No método acima – get_the_post_thumbnail – os parâmetros se referem a: id do post e o tamanho do thumbnail que queremos retornar.

O retorno do thumbnail

Normalmente quando utilizamos o método the_post_thumbnail ele já nos trás uma tag completa. Mas e se quisermos definir padrões específicos pra certos atributos dessa tag?

the_post_thumbnail(array(100,100), array('class' => 'alignleft thumbClass'));

Veja que o primeiro parâmetro do método, como vimos antes trata do tamanho do thumbnail, sendo que o segundo parâmetro é uma array onde a chave (key) é o nome do atributo a ser incluído e consequentemente temos o seu valor.

Recuperando imagens usadas com campos personalizados

E se já tivermos utilizado custom fields pra diversas imagens? Nativamente o WordPress não vai fazer muito por você, teria que configurar novamente thumbnails novamente pra cada artigo. Mesmo assim, pessoas já passaram por esse problema e já existem plugins para resolver esse tipo de problema.

Taxonomias no WordPress

Taxonomia é, no mínimo, um nome estranho. Mesmo assim, o seu valor é enorme no WordPress. Pelo Wikipédia, sua sintaxe seria:

Taxonomia (do Grego verbo τασσεῖν ou tassein = “para classificar” e νόμος ou nomos = lei, ciência, administrar), foi uma vez, a ciência de classificar organismos vivos (alfa taxonomia). Mais tarde a palavra foi aplicada em um sentido mais abrangente, podendo aplicar-se a uma das duas, classificação de coisas ou aos princípios subjacentes da classificação. Quase tudo – objectos animados, inanimados, lugares e eventos – pode ser classificado de acordo com algum esquema taxonômico

Em algumas situações específicas, não tão raras, precisamos classificar algo por diversos aspectos diferentes. Por exemplo, eu posso definir uma pessoa pelo tamanho, sexo, idade, peso, nacionalidade, estado civil, se tem filhos ou não, entre diversas outras. Muitas dessas classificações são próximas, outras em nada se relacionam. Algumas podem ser definidas por uma resposta binária (sim ou não) e outras por uma resposta quantitativa ou qualitativa.

Taxonomia - Tree of Life
Onde esse papo entra no WordPress? Quando falamos de categorias e tags. São dois tipos básicos e nativos do WordPress para classificações taxonômicas (quase um palavrão). Além desses, tem um um pouco menos utilizado que são as categorias de links, também muito úteis.

Sabemos que pelas tags não podemos hierarquizar as palavras chave utilizadas. Não podemos definir que quem é de uma certa tag, terá que ser também de outra tag. Isso já acontece nas categorias. Você pode definir uma categoria chamada “restaurantes” e a elas vincular as subcategorias “brasileiro“, “francês“, “japonês“.

Mesmo assim ficaria complicado caso também criássemos uma categoria chamada idade, para conter sub-categorias como criança, adolescente, adulto e idoso. Ou até sexo para as subcategorias masculino ou feminino.

Não faz sentido ter que criar uma categoria chamada sexo. Podemos querer marcar uma de suas subcategorias, mas teríamos um bacalhau – ou gambiarra – que seria a categoria ascendente figurando ali pra questões de organização.

Pra isso a equipe que desenvolve WordPress já tinha pensado nessas situações e incluiram métodos prontos para trabalhar com essas situações e assim criar e manipular novas taxonomias. O problema é que a última prioridade é a documentação e infelizmente o material ainda é muito curto.

Já adianto que existem plugins prontíssimos pra trabalhar com essas taxonomias e um deles vou inclusive demostrar melhor suas funcionalidades.

São eles:

Os dois são bons, mas o “Simple“, como o próprio nome já diz, é muito simples, sendo que o Custom não é difícil e tem uma interface amigável, sendo esse com que vamos trabalhar aqui.

O plugin permite a criação de taxonomias customizadas com:

  • nome título da taxonomia
  • plurais pro nome
  • slug pros permalinks
  • tipo da taxonomia, que pode ser pra posts, páginas ou links
  • possibilidade de hierarquia da taxonomia
  • descrição da taxonomia
  • possibilidade de escolher apenas um valor da taxonomia no máximo

A criação da taxonomia é super simples. Aparecerá um menu na administração do wordpress com o título taxonomies. O resto é fácil e intuitivo, mesmo que o plugin não esteja traduzido até o momento.

Logo após é só editar um artigo qualquer que aparecerá uma box extra com a sua taxonomia criada. Ela poderá ser apresentada de forma similar à de tags ou à de categorias.
taxonomies-write-post

Utilizada a taxonomia agora temos 2 formas de trabalhar com a mesma. Uma delas, a mais fácil é a sua utilização via widgets do tema. Você pode montar um cloud específico da taxonomia, por exemplo.

Também podemos a taxonomia dentro da estrutura de um tema. Essa é justamente a parte mais interessante.

Primeiro passo: criar a uma tag cloud de uma taxonomia específica:

wp_tag_cloud( array( 'taxonomy' => 'nome_da_taxonomia' ) );

Tudo o que você deve mudar nesse código acima é o ‘nome_da_taxonomia‘ para o nome da sua taxonomia criada.

Vamos ao próximo exemplo, onde buscamos uma lista dos termos de uma determinada taxonomia utilizando um método similar ao get_categories_link().

echo get_the_term_list( $post->ID, 'taxonomy_name', 'Taxonomy Label: ', ', ', '' );

Edição: fica uma dica para quem quiser transformar a listagem em uma lista html:

echo get_the_term_list( get_the_ID(), 'area-de-atuacao', '<h3 class="titulo">Áreas de atuação:</h3><ul class="lista"><li>', '</li><li>', '</li></ul>' );

Note que esse código acima deve acontecer ou dentro de um ‘loop’ do WordPress ou com a indicação de um id de post específico. Mais especificações para o método get_the_term_list no codex do WordPress.

Um alerta: se utilizar uma taxonomia ainda não criada nesse método, o template vai dar pau no meio do carregamento e seu site não vai funcionar até você resolver o problema. Em outras palavras, o get_the_term_list vai gerar um erro php e o carregamento da página será interrompido.

Como podemos registrar novas taxonomias diretamente no nosso template para evitar isso?

No arquivo functions.php basta adicionar o seguinte código, claro que antes adaptando o mesmo:

add_action( 'init', 'criar_taxonomias', 0 );
 
function criar_taxonomias() {
	register_taxonomy( 'no', 'post', array( 'hierarchical' => false, 'label' => __('Nome', 'domain'), 'query_var' => 'nome', 'rewrite' => array( 'slug' => 'nome' ) ) );
}

Isso já evita que aconteçam problemas no meio do caminho.

Como mostrar artigos apenas com um termo de uma taxonomia específica? Muito simples:

query_posts( array( 'people' => 'will-smith', 'showposts' => 10 ) );

O resto fica por conta de que se faça o loop.

Mais um passo: você já conhecia o método get_tags()? Imagino que sim, ele serve pra montar uma coleção de objetos com informações de tags. Mas agora quero mesmo é apresentar o get_terms(). Esse método vai simplesmente lhe retornar uma array com todos os termos presentes na taxonomia indicada nos parâmetros.

Algumas propriedades desses objetos são: name, slug, description, term_id, taxonomy, etc. Mais informações sobre os dados gravados no banco de dados no Codex do WordPress.

Agora é bola pra frente e fazer bom uso das suas taxonomias.

Página 1 de 3123

Performance Optimization WordPress Plugins by W3 EDGE