Posts com a tag: Temas


26
abr 08

Novo Arcanjo.org no ar!

Logo Arcanjo

Antes tarde do que nunca. :D

Há mais ou menos 1 mês, foi lançado o novo tema do Arcanjo.org, desenvolvido por mim, e com a logo do Celso Junior.

Para quem ainda não conhece, o Arcanjo.org é o blog do Rafael Almeida, ou Rafael Arcanjo (como é conhecido), um analista de sistemas que escreve sobre tecnologia, cultura digital, internet e muito mais.

O Rafael estava pretendendo lançar um novo design do seu blog há algum tempo, visto que a nova logomarca já estava desenvolvida. Daí, me ofereci para montar um tema à altura da nova logo: um tema que desse um destaque especial para a mesma, e oferecesse uma boa experiência para o usuário final, tanto na parte de navegabilidade quando na parte visual, com resolução padrão de 1024x768px.

Já no scratch do projeto, o Rafael ficou bastante empolgado. Quer dizer, eu também fiquei SUPER empolgado com o rumo que o projeto estava levando, tornando o design do tema um trabalho bem interessante para mim. Havia dado um “glow” (efeito de brilho) quando o mouse passava na logo, o que ficou show de bola no IE7 e no FireFox. Porém, nem tudo são flores… Como o efeito é obtido através de um PNG com canais alfa (transparentes), o IE6 ou anterior (IEca!) não suportava o efeito, colocando um fundo extremamente tosco na imagem.

Tentei resolver o problema colocando alguns scripts em Java, como este aqui. Porém, não havia jeito, visto que a logo é chamada como imagem de fundo de uma DIV, e não como imagem estática (o script não reconhece imagens embebidas em CSS). Até consegui um script que lia as imagens do CSS, mas aí gerava outro problema, visto que utilizei mais imagens em PNG no tema e elas acabam sendo prejudicadas pelo script.

Não encontrando solução, resolvi o problema de forma simples: criei uma condicional para chamar um CSS específico para IE6 ou anteriores, que contém uma imagem GIF (agora sim, o IE6 aceita esta transparência, mas o GIF não oferece o suporte do PNG para canais alfa). Mesmo assim, consegui gerar uma imagem aceitável para o IE6.

O restante foi relativamente fácil: apesar de ter levado algum tempo para finalizar, pois estava trabalhando bastante nestes dias e iniciei o tema do zero, foi só seguir um padrão, melhorando algumas coisas que achava necessário.

Quanto à parte da acessibilidade, só implementei as TABINDEX e as ACCESSKEYS, nada demais, mas que já é alguma coisa. Devo melhorar o formulário dos comentários com labels logo, mas isso não chega a ser uma prioridade. O mais importante é que o Arcanjo iniciou as suas atividades na HitechLive com um tema novo, marcando a nova casa.

Espero que todos gostem do novo tema, pois o Arcanjo adorou!

Ah, e muito em breve, voltarei com mais uma mega-novidade. Aguardem e confiem. ;)


30
nov 07

Explicações sobre o meu sumiço

Alguns já devem estar “acostumados” com os meus freqüentes sumiços, outros não. Ao contrário do que alguns podem estar pensando, não abandonei o blog, muito menos tenho a intenção de fazê-lo.

O fato é que agora também estou fazendo temas personalizados para o WordPress, e como surgiram alguns pedidos (e eu estou fazendo o redesign do Hilder Santos Weblog), precisei me dedicar inteiramente a eles.

Escrever aqui exige pesquisa, tempo, revisão, e etc. Cada artigo leva, no mínimo, 3 a 4 horas para sair do forno, levando em conta o tempo de pesquisa e coleta de material (Ugh, isso soou bem laboratório… :D ). Portanto, às vezes é melhor entrar no ostracismo a escrever algo que não seja de fato relevante para os meus leitores e amigos.

Está sendo válido esse “afastamento temporário”? Creio que sim. Esta minha nova experiência com temas só está enchendo a minha bagagem, até mesmo para oferecer um conteúdo exclusivo para vocês, de acordo com as minhas experiências (afinal, melhor aguardar e acertar a escrever sem a certeza absoluta).

Enfim, agradeço mais uma vez ao pessoal que continuou (e continua) acessando sempre o blog, seja pelos feeds, seja diretamente, e aos que entraram em contato cobrando textos (!) (viu, Tereza Cristina? :D ). Eu também sei como é chato ficar no aguardo de um novo texto daquele blog que você gosta… E esbarrar na decepção pela expectativa.

Retornarei aos poucos… Mas não abandonarei, fiquem tranquilos. :)

Para finalizar, vamos aos Sumiço’s Facts:

  • Ao contrário do esperado, o número de assinantes dos feeds aumentou um pouco durante estes dias.
  • Sim… As visitas também aumentaram bastante (junto com os ganhos), mas isso porque eu montei uma estratégia para pagar as contas por aqui. Quem descobrir ganha um doce.
  • Para vocês terem uma idéia de como estava por fora de tudo, não abria o meu GReader há mais de 2 semanas. Resultado? “Mark all as read”.
  • Este já é o meu enésimo post sobre sumiços. Dêem uma olhada nos meus arquivos que vocês descobrirão pelo menos uns 5 parecidos com este. Estou ficando bom nesta coisa de sumir, viu! Daqui a uns dias, estarei fazendo consultoria para David Copperfield.
  • Invasão!!! Não sei o que está acontecendo, mas uma quantidade tremenda de blogueiros invadiu o Orkut nos últimos dias. Eu havia cometido Orkuticídio uma vez (inclusive, o Bender disse que iria fazer um post intitulado “Baiano tenta se matar”, só por causa da foto que coloquei para ilustrar o post… Bender, você é um fanfarrão! :D ), mas eu voltei e selecionei os meus amigos, colocando o meu profile à prova de mensagens como as da que a Hello Kitty é consagrada ao demo. Enfim, perguntem ao Cab, ao Guilherme Valadares, ao Mick Jag… ops, ao Thiago Mobilon, ao Júlio Câmara, ao Bruno Dulcetti (outro fanfarrão, go go boy nas horas vagas :) ) e aos outros, que já eram meus amigos há tempos, o que aconteceu para que tão subitamente houvesse esta onda de blogueiros no Orkut. Nossa meta agora é colocar o Noronha nesse antro de miguxos!!! MUWAhahahahaha!!! :D

Bem, acho que é só isso. Portanto, aguardem e confiem. Muito em breve, estou de volta à ativa!


25
out 07

SEO Inteligente: Subtítulos no WordPress

Se você visita este blog mais que o lê através dos feeds (ou sempre faz uma visitinha para comentar no mesmo, obrigado :) ), com certeza já percebeu que, logo após o título do post, há um subtítulo descritivo da notícia.

Os subtítulos melhoram a experiência do usuário como um todo. Desta forma, ao iniciar a leitura do artigo, enquanto o título chama a atenção, o subtítulo informa e esclarece. Torna-se um grande atrativo, seja para o usuário trivial, seja para o que paraquedista que vem em busca de informação, seja para o assinante que visita o blog/site para navegar um pouco, e encontrar informações preciosas.

Minhas meditações sobre o WordPress junto aos monges esquizofrênicos do Tibet não foram a toa, de fato. Voltei renovado e triunfante, e esse insight surgiu num destes momentos em que não tinha nada melhor (ou pior) pra fazer: os subtítulos, quando colocados de forma inteligente, fazem a diferença sim. Vamos aos fatos:

Em primeiro lugar, em relação à estética. Melhoram bastante (e se melhoram!) a leitura do artigo, o deixando mais rico, mais exclusivo, além dos motivos já mencionados.

Em segundo (e principal): É uma ótima estratégia de SEO.

Você já deve saber que o bot do Google não consegue definir o que é relevante do que não é pelas simples leitura do texto, não é mesmo? E é para isso que servem as tags H. Portanto, ao colocar o título do seu post dentro das tags H1, por exemplo, você está indicando para o bot: “Olha isso! Isso é muito relevante para o texto”; se for dentro da H2, você já diminui um pouco a relevância, e por aí vai. Por isso, é importante ter um título bem sugestionável, e se a sua intenção é conseguir visitas através de buscadores, coloque-se no lugar do paraquedista, imaginando o que ele vai digitar para buscar a informação.

Não entendo porque tanta gente coloca o título do seu blog/site dentro das tags H1, e deixa os títulos dos posts dentro da H2 ou inferiores.

Como se alguém fosse chegar a este blog buscando encontrar Pimenta com Dendê. Fala sério, não sou macumbeiro. :D

Já deu pra entender como as tags do título são importantes, não? E se, ao colocar em H1 o título do artigo, você colocasse as informações do mesmo dentro das tags H2?

É aí que entram os subtítulos!

E se ainda, de quebra, você transformasse esse mesmo subtítulo que já está relevante em H2, na descrição da página, para que o usuário que venha através dos sistemas de busca o leia e se interesse espontaneamente pelo artigo, lá mesmo, do Google e afins? É aí que criatividade e o jogo de cintura muito fazem a diferença, e tudo fica blue (ou red, whatever).

Agora que você já entendeu o espírito da coisa, eu vou te ensinar como fazer isto, sem (quase) nenhuma complicação, sem plugins, e muito menos sem correr o risco de explosões. Caneta e papel na mão? Vamos lá:

O WordPress tem um recurso muito poderoso, que multiplica indefinidamente o seu potencial, mas que é esquecido por muitos (ou quase todos): são os campos personalizados, ou em bom inglês, os custom fields.

Não me adentrarei muito sobre o que é possível fazer com eles; o que posso adiantar é que é muita coisa mesmo.

O que você tem de fazer é criar um custom field exclusivo para o seu subtítulo, para que você possa adicioná-lo através da página de postagem, sem complicações. Para colocar o subtítulo logo abaixo do título, será preciso adicionar algumas tags em php, mas que não é nada que um copiar-colar não resolva.

Vejamos o primeiro código:

<?php if(get_post_meta($post->ID, “subtitulo”, $single = true)) : ?>
<h2 class=”subtitulo”><?php echo get_post_meta($post->ID, “subtitulo”, $single = true); ?></h2>
<?php endif; ?>

Este código irá chamar o conteúdo do seu campo personalizado, que terá o nome de “subtitulo”, e irá imprimí-lo na tela, no local em que você colocar o código acima. Mas antes de colocá-lo no seu tema, será preciso que você crie, ao escrever um novo artigo, uma nova tecla (ou key), de nome subtitulo.

Fazer isto é muito simples: na página para escrever um novo artigo do WordPress, localize na parte de baixo uma barra azul de nome “Campos Personalizados“, para a tradução em português, ou “Custom Fields“, para a versão americana. Caso o seu conteúdo ainda não esteja visível, expanda-a, clicando no “+” no canto direito da barra.

Lá, você verá uma imagem mais ou menos como esta:

Captura Subtítulo 1

Tudo que você tem a fazer é digitar “subtitulo” no campo Key (ou Tecla), e em Value digitar o que você quer que apareça no seu subtítulo – para o artigo que você estiver escrevendo, lógico.

Lembrando que isso só precisa ser feito no primeiro artigo a ser publicado com subtítulo. Nos próximos, bastará selecionar a chave que já estará salva e no menu drop-down (sem a necessidade de digitar o “subtitulo” no campo Key), e ir direto para o Value, digitando o seu subtítulo propriamente dito.

Pronto. Simples assim.

Lembra do código que eu coloquei mais acima? É só copiar o mesmo e colar na linha logo abaixo da tag <?php the_title(); ?> dos arquivos do seu template, por exemplo: se quer que os subtítulos apareçam na home e nos artigos individuais, você terá que colocar o código no seu arquivo index.php (ou home.php, a depender do tema) e single.php, respectivamente. Recomendo dar uma lida no Codex do WordPress no que se refere à estrutura dos temas, para ter um controle maior dos templates utilizados.

O que o código acima faz? Em primeiro lugar, ele verifica se, para o post em questão, existe um campo “subtitulo” com algum valor. Em caso positivo, ele imprime na tela, dentro das tags H2, o conteúdo deste campo (sim, aquilo que você digitou em Value), sem esquecer da sua classe, a .subtitulo (para fins de customização CSS; pode ser modificado para uma de sua preferência).

Pronto! Agora você já tem os subtítulos funcionando a todo o vapor no teu blog! E não doeu nada. :)

Pera, Hilder… Mas, e para transformar os subtítulos na descrição da página?

Tem razão. Havia me esquecido deste pequeno-grande detalhe.

É importante que você não esteja usando nenhum plugin gerador de descrições para a página como Head Meta, por exemplo, para que esta última etapa funcione corretamente.

Se o seu blog já contém a meta tag “description”, substitua-a pelo código a seguir; caso contrário, se não existir, coloque-o entre as tags <head> e </head> do seu arquivo header.php:

<meta name=”description” content=”<?php $descricao= ‘Coloque aqui uma descrição complementar para o seu blog‘; if(is_home()) { bloginfo(‘description’); echo “. ” . $descricao; } elseif(get_post_meta($post->ID, “subtitulo”, $single = true)) { echo get_post_meta($post->ID, “subtitulo”, $single = true); } else { bloginfo(‘description’); echo “. ” . $descricao;} ?>” />

O que este código faz? Basicamente, verifica se existe alguma informação no campo “subtitulo“, e, em caso positivo, a coloca como descrição do post; caso não exista, ou a página mostrada seja a home, uma descrição padrão é colocada, sob a forma de descrição principal do blog + descrição complementar (que você altera no código).

Simples, mas muito poderoso.

Ou você ainda duvida que o casamento de título h1 + subtítulo h2 que ainda vira descrição da página vai fazer o bot do Google resistir à tentação de dar uma maior relevância ao seu artigo? Eu não duvido! :D


12
out 07

Sim! O Pimenta mudou de novo!

Esta última semana foi ociosa por um lado, e bastante produtiva por outro.

Foram 8 dias offline – literalmente, sem postar nenhum artigo, sem ao menos entrar nos messengers da vida ou coisa parecida. Passei estes últimos dias estudando o WordPress, e pensando numa forma de inovar mais uma vez o blog.

A proposta inicial era tornar o blog mais acessível para um público maior, sem detrimento da sua qualidade. Foram várias tentativas de inovação do design, mas todas elas fracassadas, pois deixavam o Pimenta com Dendê muito com cara de site, além de tirar a sua identidade visual. Testei painéis rotativos, tirei as sidebars… Tudo sem sucesso.

Finalmente, hoje (ou melhor, ontem, pois já são quase 5 horas da manhã e eu aqui), consegui criar uma home mais dinâmica, com menos poluição de artigos, e que melhoram a experiência do visitante que chega aqui através da home-page como um todo: fica muito mais fácil encontrar os artigos anteriores a partir dela.

Além disso, coloquei thumbnails na navegação das categorias e tags, e montei um quadro para posts fixos, que merecem algum destaque.

Claro, não vou dizer que está um trabalho perfeito: apenas quis melhorar um pouco a navegação, colocando menos conteúdo íntegro e mais links na mesma, tendo em vista que já existem as sidebars. Posso dizer que o resultado foi dentro do esperado, tornando o blog mais com cara de “revista eletrônica”, como o Noronha já havia feito n’O Fim da Várzea – projeto este que, por sinal, tínhamos em comum.

O mais legal de tudo foi descobrir que o WordPress é uma poderosa ferramenta, capaz de tornar cada blog único: basta saber usá-lo da forma correta, que o seu blog torna-se muito mais dinâmico e atrativo.

Agora que eu já mudei a home para algo mais “apresentável”, como já havia dito, vou mudar o contexto do blog pouco a pouco. Quero sair um pouco da metablogagem, e partir para a MEGAblogagem (hmmm… que nome horrível!) :) Portanto, esperem por atualizações mais freqüentes, e por uma diversificação dos assuntos abordados aqui.

Sugestões?


3
out 07

Download do Tema Red Pepper para WordPress

Algumas pessoas têm me sugerido, via MSN ou Gtalk, que eu distribua uma cópia do tema utilizado aqui no Pimenta com Dendê em regime Open-Source, porque gostaram do mesmo, ou simplesmente porque gostariam de algo mais “inusitado” para o blog.

Pois então, senhoras e senhores: Não sou Deus, mas escutei suas preces. :D

Estou disponibilizando, gratuitamente, de graça e sem custo algum o tema Red Pepper versão 1.0 para que você possa baixá-lo, e utilizar em seu blog, livremente, modificando-o de acordo às suas necessidades (desde que, por gentileza, mantenha os créditos no rodapé).

O tema está otimizado para SEO, mas entendam que eu não sou nenhum Bruno Alves: eu apliquei o pouquinho que sei e do que vem dando algum resultado para mim. As tags do título estão todas em H1, dando destaque para os mesmos e facilitando a relevância dos bots de busca.

Além do mais, o tema está totalmente validado em XHTML e CSS, o que aumenta as chances de que o seu blog/site seja visualizado corretamente, tanto pelos navegadores (o tema foi testado no Opera, Firefox e Internet Explorer), quanto pelos motores de busca. Lembrando também que o código CSS e XHTML podem não estar “enxutos”, portanto, sinta-se à vontade para otimizá-lo, se for preciso.

E o melhor: Prontíssimo para o WordPress 2.3 +, com suporte aos Widgets nas duas barras laterais e com o sistema de tags ativo.

Faça bom proveito do tema, que está sendo distribuído sob a licença Creative Commons Noncommercial Share Alike, ou seja: você pode modificar o tema e criar outros derivados, desde que mantenha os créditos para o autor original no rodapé; você não está permitido a usar o tema para fins comerciais, ou seja, alterar o tema e comercializá-lo; mas pode utilizá-lo sem problema algum em sites de comércio eletrônico, ou para veicular quaisquer tipos de publicidade no mesmo.

Ele está sendo disponibilizado totalmente de graça para você; mas, se você se sentir satisfeito com o tema e quiser doar qualquer quantia para mim (a partir de R$ 100,00… Brincadeira! :) ), use o botão abaixo para isto. Tenha certeza que você vai me incentivar, e muito. Só reiterando: qualquer quantia mesmo! Até R$ 1,00 será bem vindo. De grão em grão… :D


Lembrando que, se alguém tiver qualquer tipo de dúvida, sugestão, etc, pode entrar em contato comigo.

Use e abuse do tema – mas com moderação! ;)

[download#1#image]