desenvolvimento para web - xhtml, css, padrões da web, usabilidade, acessibilidade, web design, SEO, blogs e tecnologias para desenvolver a web

Optar por utilizar Wordpress como plataforma para fazer um blog ou site é, certamente, uma bela opção (quando é conveniente para o projeto, claro; porque há casos em que o Wordpress não atende às exigências). Depois deste primeiro passo, de se decidir por qual ferramenta usar, inicia-se uma divertida “maratona” rumo à configuração, instalação de plugins, cadastro em serviços úteis, etc. Uma das chaves para o sucesso de um blog/site é, com certeza, o design apresentado aos visitantes. Criar o próprio tema (ou adaptar um tema já criado) é a solução, neste caso.

Muitas vezes, entretanto, as pessoas que criam/adaptam um tema não conseguem expressar sua criatividade ao usar o Wordpress por ainda não saberem mexer direito - ou ter medo de mexer e “estragar tudo” - no CMS, limitando-se a utilizar “simples” menus, imagens, estruturas, layouts, etc (não que isso seja algo ruim, mas, às vezes, o projeto pede um “algo a mais”).

Rumo a uma feitura/personalização de um tema de qualidade, um recurso muito interessante que pode ser usado é usar qualquer tipo (fonte tipográfica) no blog, seja em menus, barra lateral ou, mesmo, no título dos artigos. Outra coisa é utilizar botões com design melhor, mais bem elaborados, que sejam mais bonitos e chamem mais a atenção dos visitantes.

“Sexy Buttons”

Alex Griffioen ensina, em seu artigo “How to make sexy buttons with CSS“, como fazer botões que sejam mais bonitos e atrativos. Em sua técnica, ele mostra que é simples a técnica para usar, por exemplo, botões arredondados que se adaptem a qualquer tamanho de texto, aumentando e diminuindo conforme o caso (entendeu o “sexy“, agora?).

Sabendo da técnica, é possível usar a cabeça para criar os menus mais fantásticos, garantido a beleza, simplicidade e leveza do código e ainda agradando a pessoas e mecanismos de busca. Como você pode ver no artigo que ensina a fazer “Sexy Buttons”, a técnica é bem simples e envolve somente o uso de algum XHTML e CSS extra para conseguir o efeito. Leia o artigo, aí, que você vai ver como se faz.

Limitações para usar Sexy Buttons no Wordpress

Uma das coisas que devem ser feitas para se conseguir o efeito “Sexy Buttons” é envolver o texto do link em um span. Sem isso, nada feito. A limitação do Wordpress está em, justamente, não ter nenhum tipo de argumento para a função wp_list_pages() para especificar trechos de código para vir antes e depois do nome das páginas.

Na prática, isso significa que não é possível, num primeiro momento, utilizar Sexy Buttons em blogs e sites baseados em Wordpress - utilizando esta ténica do Alex Griffioen.

Como usar Sexy Buttons em menus do Wordpress: mutreta

A primeira mutreta técnica que pode ser usada para usar os tais Sexy Buttons é envolver o título das páginas com o par de tags “span”.

Dessa maneira, surpreendentemente, o Wordpress interpreta corretamente como XHTML e a técnica passa a funcionar. Mas nem tudo são flores. Existem 2 inconvenientes principais ao fazer isso:

1. A descrição da página na tela de listagem de páginas, no painel administrativo, fica com os “<span>” aparecendo (algo que não influencia no funcionamento geral, mas inaceitável para um site encomendado por um cliente).
2. O title (aquele espécia de tooltip que aparece quando se deixa o ponteiro do mouse em cima de um link) da listagem de páginas vai também aparecer envolto ao par de “span”.

Como usar Sexy Buttons em menus do Wordpress: alteração de função nativa

E existe, também, a maneira mais ou menos correta de se conseguir o efeito, que é editar a função nativa do Wordpress de listagem de páginas. Chega até a ser mais fácil dessa maneira, já que não é preciso especificar o par de tags para cada título de página, dado que ele já vai inserir automaticamente.

O arquivo a ser editado é o “classes.php”, que fica na estrutura de pastas wp-includes/classes.php. Mais especificamente, o que deve ser alterado está na linha 578 (na versão 2.6.x, do Wordpress).

Onde está:

$output .= $indent . '<li class="' . $css_class . '"><a href="' . get_page_link($page->ID) . '" title="' . attribute_escape(apply_filters('the_title', $page->post_title)) . '">' . apply_filters('the_title', $page->post_title) . '</a>';

Acrescentar o par de span, o que resulta em:

$output .= $indent . '<li class="' . $css_class . '"><a href="' . get_page_link($page->ID) . '" title="' . attribute_escape(apply_filters('the_title', $page->post_title)) . '"><span>' . apply_filters('the_title', $page->post_title) . '</span></a>';

O único “porém” deste outro jeito é que todas as exibições de páginas que você fizer vão estar envoltas entre “<span>” e “</span>“, já que a alteração foi realizada diretamente na função do Wordpress. Se o seu blog/site vai ter as páginas listadas somente em um local e/ou não vai interferir em seu CSS este “span”, então pode dormir sossegado!

Viu como é fácil ter sexy buttons em seu Wordpress?  ;-)

Desde que comecei a usar o Wordpress (seja para fazer sites, seja para fazer blogs), algo que sentia falta era a possibilidade de alterar algumas informações sobre páginas e artigos do Wordpress diretamente na área das respectivas listagens, sem a necessidade de entrar em cada página ou post para alterar estas informações.

Lendo o feed do pBlog sobre o resultado do WordPress Plugin Competition 2.5, tive a felicidade de encontrar o plugin Wordpress que, pelo menos para mim, estava faltando: Manageable.

Sobre o Manageable

O Manageable é uma extensão para Wordpress que permite a edição de algumas informações sobre artigos e páginas Wordpress diretamente na tela de listagem destas:

• Data e hora de publicação;
• Autor;
• Categorias;
• Tags;
• Se permite ou não comentários e tracks/pings;
• Estado do artigo ou página (”Publicado”, “Revisão Pendente” ou “Não Publicado”).

Quer dizer, usando o Manageable você pode, diretamente na página de listagem de artigos e páginas do Wordpress, alterar essas informações com muita facilidade e rapidez. Devido ao fato de essas alterações serem feitas todas via AJAX, é na página de listagens de página e artigos que tudo acontece. Muito prático, realmente!

Trabalhando com o Manageable

Com o Manageable devidamente instalado e ativado (a esta altura do campeonato você saber instalar e ativar um plugin no Wordpress, eu suponho), fica muito simples e intuitivo trabalhar na edição de seus artigos e páginas Wordpress diretamente das respectivas páginas de listagens.

Devido á ativação do Manageable, quando você acessar a página de listagem de páginas ou artigos, verá que, agora, existe uma nova coluna, a “Edit”:

Com isso, quando você clica em algum “Edit”, automaticamente a linha em questão se altera para você alterar, em tempo real, alguma(s) informação(ões) que você queira (clique na miniatura para ver uma imagem exemplo).

Conclusão

Principalmente para quem precisa, por qualquer motivo, fazer uma edição “em massa”, esta é, sem dúvida, a melhor opção! Eu mesmo já fiz isso umas 2 vezes e foi bem massante… Se precisar fazer uma próxima, vai dispender bem menos tempo, agora que uso o Manageable!  ;-)

Mas não somente quando a situação for essa. Não raramente é preciso alterar ou acrescentar alguma tag a um artigo e/ou mudar a categoria a qual este pertence. Utilizando o Manageable, isso é feito bem mais rápido e com menos custos, já que a interface em AJAX permite grande economia de transferência de arquivos.

O único “porém” que deixo para quem vai instalar o Manageable é que ele é recomendado para blogs gerenciados por uma só pessoa - ou por mais pessoas, mas que tenha muita confiança uma na outra. O fato é que quando se loga com um user “comum”, a opção “Edit” aparece em todos os artigos, quer dizer, qualquer usuário pode alterar as informações de qualquer artigo… Provavelmente isso deve ser corrigido em futuras versões do plugin; fiquemos atentos às novidades.

Fora este fato e analisando as possibilidades e facilidades proporcionadas, recomendo fortemente que você instale o Manageable! Vale mesmo à pena!

Sem sombra de dúvidas, um dos motivos que tornou o Firefox o melhor navegador do mundo é sua capacidade de aceitar extensões (ou plugins) para aprimorar suas funcionalidades e criar funcionalidades totalmente novas. E o fato de que qualquer - com conhecimento necessário - pode criar e disponibilizar sua própria extensão foi o “impulso final” para que os plugins do Firefox se tornassem queridos e populares.

Ante tamanha “oferta” de extensões para Firefox, ficar confuso e não saber qual instalar ou deixar de instalar é uma situação comum de acontecer. A compilação de plugins para Firefox a seguir - divididos em categorias, para facilitar - tem como objetivo ajudar a você se decidir e, quem sabe, conhecer algumas extensões que você nem imaginava existirem.

Extensões para Firefox: navegaçã por abas

• Morning Coffee. Organize web sites para abrir em abas como parte de sua rotina diária (quais sites você visita na Terça? Visites todos somente quando for Terça).
• Tab Mix Plus. Aumente as funcionalidades de abas no Firefox: duplicação de abas, controle de foco, opções para cliques, reabrir abas e janelas fechadas pora acidente, dentre outros.
• ColorfulTabs. Especifique cores para as suas abas e se organize melhor para achar os diferentes web sites abertos em cada uma delas.
• FaviconizeTab. Com esta extensão do Firefox você “faviconiza” suas abas: elas ficam menores e somente o favicon aparece em cada uma.
• IE Tab. Bastante conhecida no “ramo”, esta extensão permite abrir uma aba com o modo de renderização do Internet Explorer (pessoalmente, prefiro abrir o próprio browser quando estou desenvolvendo).

Extensões para Firefox: segurança e anonimato

• NoScript. Bloqueia a execução automática de Javascript, Java, Flash e outros tipos de formatos; é preciso declarar específica e individualmente para cada caso que se trata de um site confiável.
• FoxyProxy. Percorra a web anonimamente, com diversas opções referentes a alterações de proxys para você ficar “oculto” através das páginas que visita.
• Stealther. Apaga todos os seus rastros nos sites que visita, permitindo acessar a web através de um anonimato total (”Suas informações sob o mais absoluto sigilo”).
• Adblock Plus. Bloqueia propagandas (”ads”) dos web sites que visita e permite navegar com mais rapidez e menos poluição visual (acredito eu que isso até melhora a produtividade pessoal).
• Flashblock. Se você quer desabilitar somente os conteúdos em Flash dos web sites que visita, Flashblock é a escolha certa. Isso economiza banda e permite identificar rapidamente um conteúdo em Flash.

Extensões para Firefox: downloads e arquivos

• Open IT Online. Permite abrir documentos e imagens on line, sem precisar de qualquer outro programa complementar (diversos formatos de arquivos sobre documentos, imagens, apresentações, planilhas e mais).
• Video DownloadHelper. Permite baixar, de maneira fácil, diversos tipos de formatos de vídeo na web e convertê-los para os formatos “tradicionais” de vídeo.
• PDF Download. Antes de abrir um arquivo .pdf no Firefox, PDF Download avisa a respeito e permite que escolha baixar o arquivo, abrir ou converter para HTML.
• Download Embedded. Identifica e permite baixar diversos tipos de formatos de arquivos encontrados em web sites (mas não funciona para os vídeos embutidos por Flash, como os vídeos do YouTube, Google Videos, etc).
• DownThemAll!. A proposta do DownThemAll! é aumentar as funcionalidades e performace dos downloads no Firefox, prometendo um aumento de velocidade de até 400%.

Extensões para Firefox: melhoria da experiência na web

• Greasemonkey. Sinceramente, dispensa apresentações para um desenvolvedor web (para mais informações visite o Greasespot).
• iMacros. Automatiza o Firefox, permitindo a criação e execução de macros para tarefas específicas (nunca ouviu falar em “macro”?).
• URL Fixer. Corrige automaticamente os URLs quando você os digita errado (essa vai para os apressadinhos do teclado).
• All-in-One Sidebar. Crie uma nova barra no Firefox que provê acesso às mais usadas funções de forma simples e eficiente.
• FireGestures. Permite configurar ações e espeificar atalhos que são ativados através de “gestos do mouse”; é muito interessante e divertido.

Extensões para Firefox: desenvolvimento para web

• Web Developer. Sem comentários, também. Se você se considera desenvolvedor web e não conhece, revise seus conceitos…
• Firebug. E a observação da extensão anterior vale para esta, também: se não conhece o Firebug, pense seriamente em aprimorar seus conhecimento ou mudar de profissão.
• YSlow. Esta é uma “extensão para extensão”; trata-se de uma extensão para o Firebug que incrementa as funcionalidades, inclusive evidenciando se o web site respeita as diretrizes de performance do Yahoo!.
• ColorZilla. De forma simples e prática, permite selecionar qualquer cor que apareça na tela e permite passar para a área de transferência os valores em diferentes formatos (RGB, Hexadecimal, etc).
• SEO for Firefox. Este plugin permite visualizar diversas estatísticas referentes ao posicionamento de determinado site nos principais - e outros - mecanismos de busca.

Extensões para Firefox: diversos

• Delicious Bookmarks. Extensão oficial do delicious para Firefox, que permite controle total dos favoritos que você salva online, em ações como salvar um favorito, organizar, deletar e todas as outras possíveis.
• Cooliris. Mais conhecida como “PicLens”, esta extensão cria uma galeria 3D para a exibição de imagens nos principais buscadores como Google, Yahoo!, Flickr, dentre outros.
• ScribeFire Blog Editor. Permite publicar artigos em diversos tipos de blogs diretamente do Firefox. Integra um ambiente de publicação de artigos completo diretamente no navegador.
• FoxyTunes. Acrescenta opções ao Firefox para escutar música enquanto navega pela web. Muito bom e permite economizar memória por não abrir um programa somente para tocar músicas.
• FEBE. E, com tantas extensões assim, não poderia faltar a “meta-extensão”, que permite fazer backup de todos plugins e preferência do Firefox e restaurar posteriormente. Excelente!