Usando a prototype – passo 5 – criando elementos

Como fazer para criar elementos html via javascript?

Usando o padrão do javascript, esse é o código para criar uma div e um link, com atributos, e inserir o link na div:

var div = document.createElement("div");
div.setAttribute("id", "minha_div");
div.className = "minha_classe";
var a = document.createElement("a");
a.setAttribute("id", "meu_link");
a.setAttribute("href", "meu_link.htm");
a.setAttribute("title", "meu título");
a.className = "minha_classe_link";
a.innerHTML = "link!";
div.appendChild(a);

 

Com a prototype, é possível usar uma sintaxe mais amigável; existe a classe Element. Com ela, você pode criar um elemento da seguinta forma:

new Element(tag[, {atributos}]);

O código acima ficaria da seguinte forma:

var div = new Element("div", {id:"minha_div", "class":"minha_classe"});
var a = new Element("a", {id: "meu_link", "class":minha_classe_link", href:"meu_link.htm", title:"meu título"}).update("link!");
div.update(a);

Simples e fácil!

Segundo Beanie Day

Sexta-f agora, dia 28, é dia de celebrar o segundo Beanie Day (traduzindo, segundo dia do gorrinho): um evento informal para promover os webstandards e acessibilidade.
Todos standardistas estão convidados a usar um gorrinho azul e, então, tirar uma foto e distribuir pela web.

É claro que ninguém precisa ter um gorrinho exatamente azul ao que o Jeffrey Zeldman usou na capa do Designing With Standards (ver foto abaixo); até mesmo uma photoshopada numa foto resolve!
A idéia é unir a galera dessa área e se divertir um pouco fora do mundo html de ser 🙂

Utilizando o excerpt() no WordPress

O engine do Wordpress fornece uma função para mostrar uma espécie de resumo do seu post – chamado excerpt(). Essa função é muito útil para ser usada na página inicial ou no arquivo de posts, pois pode acontecer dessas páginas ficarem gigantes pois elas costumam listar 5, 10, etc… posts. Usando-a, você tem a opção de criar uma chamada para o seu post, colocando um link de "veja mais" no final.

 

Como funciona?

<?php if(is_category() || is_archive()) {
     
the_excerpt();
 } else {
     
the_content();
 } 
?>

 

Veja como utilizar a função excerpt() tanto nas versões antigas do WordPress quanto nas novas.

 

Você também pode alterar o comportamente da função excerpt().

Como gerar uma nuvem de tags no WordPress

O WordPress deve ser um dos sistema de publicação de blogs mais utilizados hoje em dia. Construir um sistema desses do zero tem, é claro, os seus benefícios – você deixa ele do jeitinho que você quer, o sistema fica otimizado para o que você precisa – mas para a maioria dos usuários, o interessante é gerar o conteúdo, e não recirar o gerenciador.

Em alguns casos, é bacana mudar os templates que você está utlizando, para deixá-los com a sua cara. Vou, de pouco em pouco aqui no O Desenvolvedor, dar umas dicas de como usar as funções nativas do WordPress; nada que uma busca no Google não resolva, mas quem sabe não ajuda o pessoal 😉

Para mostrar na sua página uma nuvem de tags (tagcloud), você pode usar a função wp_tag_cloud([params])
Tal função pega todos as tags que você utilizou nos seus posts e lista-as, dando tamanho diferente de fontes para cada tag dependendo do peso de cada uma.

Os parâmetros que podem ser utilizados são:

  • smallest – tamanho menor de fonte, 8 padrão
  • largest – tamanho maior de fonte, 22 padrão
  • unit – unidade de tamanho de fonte, pt como padrão
  • number – quantidade de tags, 45 padrão
  • format – como são mostradas as tags, flat (separadas por espaços) como padrão
  • orderby – como são ordenadas as tags, pelo nome como padrão
  • order – se ordena ascendentemente ou descendemente; ascendente (ASC) como padrão
  • exclude – se ecluí alguma tag
  • include – se inclui todas as tags

Exemplo de como incluir a tagcloud definindo quantidade de tags e como será ordenada:

<?php wp_tag_cloud(´number=30&orderby=count´); ?>

Documentação completa: http://codex.wordpress.org/Template_Tags/wp_tag_cloud

 

Limitar caracteres utilizando Javascript

Continuando meus estudos com javascript, para completar parte do meu script de manipulação de XML com jQuery eu precisava limitar os caracteres de um dos resultados obtidos no XML, mas noob que sou em Javascript apanhei bastante para fazer isso – e como estava offline a tarde toda, não rolou.

 

[update]

Como eu já comentei, sou bastante noob no Javascript e existe uma função nativa para limitar os caracteres de uma variável, portanto aqui vai a solução que o Chris deu nos comentários, melhor que a solução que fiz.

A função subsrt() permite selecionar os caracteres de uma variável, por exemplo:

var jujuba = "Haduken neles!";
var jujuba2 = jujuba.str(0,7);
var jujuba3 = jujuba.str(8,13);

No exemplo acima, teriamos como resultado as seguintes variáveis:

jujuba2 = Haduken
jujuba3 = neles

Como eu não sabia da existência da função substr() eu fiz uma função para limitar caracteres, que funciona bem mas é totalmente inútil visto que isso pode ser feito com apenas uma linha.

Manterei o post original e a função abaixo apenas para fins de estudo e exemplo, mas se seu único intuito é limitar os caracteres de uma variável sua resposta está aí em cima.

[/update]

 

Voltei a procurar uma solução para o problema agora a noite, e baseado no script de retirar acentos com Javascript fiz algumas alterações para focar no que eu queria.

Criei uma função que limita os caracteres de uma variável, e funciona de forma bem simples:

function limita(str,limite) {
   nova=´´;
   for(i=0;i<limite;i++) {
      nova+=str.substr(i,1);
   }
   return nova;
}

As duas variáveis da função são:

str – é a variável que você vai "cortar"
limite – número de caracteres máximo para a variável

Por exemplo, se eu chamar a função limita("Haduken neles!",4) meu resultado será apenas os 4 primeiros caracteres: Hadu.

Simples porém funcional, não sei se existe alguma função do javascript para limitar os caracteres (como o left, no asp). Tentei utilizar o length, mas nenhuma das tentativas funcionou, por hora a solução será esta. 🙂