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 »

Como encontrar pontos de Wifi no Rio de Janeiro

Vou aproveitar o espaço para falar do projeto de um amigo, o http://spott.in/. Trata-se de um site que utiliza a API do Google Maps para indicar todos os hotspots de acesso à internet WiFi na cidades do Rio de Janeiro, Niterói, Macaé, Angra dos Reis e Petrópolis.
Ler mais »

WebSockets com HTML 5

Nota: assim que publiquei o artigo recebi um tweet sobre a questão do vínculo entre Websockets e HTML 5, com link para a página da W3C. Realmente WebSockets não é uma funcionalidade do HTML 5, falha minha. Conceituando melhor a tecnologia é uma API que está sendo desenvolvida, apesar da expectativa seja chegar como parceira e aliada do HTML 5.

AJAX foi uma revolução nos conceitos de experiência de usuário desde que chegou, agora vamos ter um possível aliado que vem por aí sem muito alarde, mas promete.

Trata-se do WebSockets, mais uma nova funcionalidade do HTML 5 que vai tratar da comunicação cliente-servidor sem utilização do Ajax nem fazendo requisição de página nova.

Como dito no próprio site do Nettuts, WebSockets é uma técnica para comunicação de mão dupla através de um socket (TCP), uma espécie de tecnologia PUSH. No momento ainda está sendo padronizado pelo W3C; entretanto, as últimas versões do Google Chrome e Safari já tem suporte ao WebSockets.
Ler mais »

Seu browser é também a sua IDE

Vou listar algumas das melhores IDEs para desenvolvimento em evidência no mercado. Não apenas para montar HTML 5 e CSS 3, mas também para códigos e algorítmos em diversas tecnologias, como Javascript, jQuery e até podemos arriscar algumas linguagens “server side”.

JSBin

JSBin é uma ferramenta excelente para teste colaborativo de html e javascript. Facilitando a integração algumas das mais populares bibliotecas e frameworks JS, ele permite que o usuário insira rapidamente o seu código e grave com um controle de versão muito simples. JSBin definitivamente não é apenas um marcador de código.

Característica que vale ressaltar: JSBin é open source, 100% free.

JSBin

Kodingen

PHP, Ruby on Rails, Django, Perl, SVN, Git, etc? Você ainda achava que era impossível ter uma IDE pra tudo isso que fosse também browser based? Kodingen é o nome dessa poderosa ferramenta que oferece uma boa parte de seu sistema de forma gratuita e está conquistando muitos fãs pela web.

Kodingen

Ler mais »

Alguns Plugins Incríveis de jQuery

jQuery Blend

jquery - blend plugin

Uma ótima customização para botões e listas. Da um efeito bem bacana em eventos de mouse over.
Link: http://colorpowered.com/blend/

Imageless Buttons a la Google

jquery - buttons plugin

Um método mais simples pra se obter bons botões com a mesma estilização do Google sem o uso de imagens, somente CSS puro.
Link: http://swizec.com/code/styledButton/

Paginação em jQuery – jQuery Pagination

jquery - pagination

Normalmente aparecem pessoas na lista do Google de jQuery Brasil procurando soluções para paginação. Esse plugin é uma das melhores soluções. Facilita a navegação de forma simples e elegante.
Link: http://plugins.jquery.com/project/pagination
Ler mais »

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.

A estrutura do URL não afeta o PageRank

Me jogariam pedras e chamariam de “herege do SEO” se eu não tivesse um álibi tão forte: a própria equipe do GoogleWebmasterTools confirmou que os motores de busca da Google dão uma relevância muito baixa à disposição das urls de cada artigo ou página em um site.

Já vi muitas discussões por aí sobre qual seria o melhor tipo de estrutura de permalink/URL para os artigos de um blog no wordpress.

Eu admito que isso me deixava confuso. Qual seria pro google a relevância de ter na url um treco gigante lá dizendo ano, mês e dia? Ainda bem que isso faz diferença nenhuma, e não afeta em nada o PageRank.

Como era de se esperar a resposta foi firme: “o que importa é o conteúdo da página”.

Em um canal no Youtube do GoogleWebmaster, Matt Cutts explica que o Google não usa a estrutura URL como um fator de PageRank, assim como não se preocupa muito sobre a profundidade de um conjunto de diretórios. Se uma página com estrutura URL x está ligada a outra página y de outra estrutura, ela ainda fica com o mesmo pagerank da página.
Ler mais »

Meta Tag de Descrição sem Plugins!

O uso da meta tag de descrição é um fator importante para o SEO. Os motores de busca vão usar esses dados para exibir nas páginas de resultados de busca. Pela descrição os visitantes podem ver um resumo breve e conciso do conteúdo da sua página. No WordPress, você pode usar plugins de SEO, como All-In-One SEO, que já foi construído com recurso para auto geração de meta tag de descrição. Mas você pode fazê-lo sozinho, sem plugins, e aqui está ela!

Basta colar o seguinte código no arquivo functions.php do seu tema:

function gen_meta_desc() {
   global $post;
 
   if (!is_single()) {
      return;
   }
 
   $meta = strip_tags($post - > post_content);
   $meta = str_replace(array("\n", "\r", "\t"), ' ', $meta);
   $meta = substr($meta, 0, 125);
 
   echo "<meta name='description' content='$meta' />";
}
add_action('wp_head', 'gen_meta_desc');

O número 125 seria a quantidade de caracteres que você vai mostrar no meta tag de descrição.

Tenha certeza que você adicionou o wp_head() no cabeçalho do seu tema.

Checklist para desenvolvimento de temas do WordPress

Um tema de WordPress não é difícil de ser feito, mas já viu que no próprio site de documentação do mesmo tem uma checklist para conferir se todos os aspectos importantes do tema estão ok?

Confira! O texto está em inglês, mas nada que não seja resolvido com um Google Translate.

Página 1 de 212

Performance Optimization WordPress Plugins by W3 EDGE