F-Ranieri

Foi ao ar ontem a tarde, o novo site do Estúdio Copacabana. Com uma proposta de layout bastante moderna, leve, direta e reta, o novo site deixa claro para que veio.

O trabalho do amigo e designer web Henrique Garcia, sempre focado nas novidades e nas tendências, é o destaque principal desse novo site. Sem firulas desnecessárias, o resultado final é uma grande prova de que fontes de sistema funcionam bem e podem deixar um site bonito, basta saber como trabalhar com elas.

Fui convidado pela equipe do Estúdio para desenvolver o HTML e só tenho a dizer que foi muito proveitoso trabalhar no projeto com eles. Uma troca de experiências bastante valiosa. Profissionais “cabeça aberta” são sempre importantes no bom andamento de qualquer job.

Parabéns pelo trabalho Nicholas e Henrique e sucesso.

Lightbox tem sido um recurso bastante utilizado em galerias de imagens. Grandes sites como Submarino e Globo.com utilizam recuros semelhantes há algum tempo, nós também utilizamos no desenvolvimento do Studio Santista, como explicaremos  no terceiro e último post da série de plugins para wordpress.

O efeito Lightbbox nada mais é do que uma “animação” utilizada para ampliar imagens de uma determinada galeria. Constantemente confundido com flash, apresenta as imagens de maneira agradável e confortável.

Instalando

É muito mais simples do que parece. Se estivessemos falando de um site que não utiliza o wordpress, você precisaria um arquivo no formato zip e inserir algumas linhas de código no seu html para que exibição do efeito, porém estamos falando em wordpress, ou seja,  o processo é mais simples ainda. Lembrem-se, o diretório de plugins para WP é muito extenso (guardem essa máxima).

O utilizado em nosso caso, foi o Lightbox 2 e para realizar a instalação siga o padrão já explicado nos outros dois posts desta série, ou seja, basicamente extraia e habilite o plugin em seu administrador.

Com o plugin habilitado, insira uma imagem em seu post e em suas opções avançadas localize o item “link rel”, conforme a figura abaixo:

print

Esta opção é configurada a mão, portanto, basta escrever a palavra “lightbox” antes de clicar em atualizar.
Pronto, a imagem inserida em seu post será exibida com este recurso. Se mais de uma imagem for inserida no mesmo post, ao invés de “lightbox”, escreva “lightbox[roadtrip]” na opção “link rel”. O sistema habilitará setas para frente e para trás as quais funcionam também com as teclas direcionais do seu computador.

O problema

Imagens ilustrando um post, ou setores de um post, não caracterizam uma galeria. Para o wordpress, uma galeria é construída com base no assistente padrão do sistema e dessa maneira, o efeito lightbox como explicamos acima, não é habilitado.  Ainda bem que “o diretório de plugins do wordpress é muito extenso”. Lembram que pedi para guardar esta máxima?

Sendo assim, podemos concluir que foi muito fácil encontrar um plugin para resolver este problema. “Jquery-lightbox-for-native-galleries” é o nome dele e para habilitá-lo, basta realizar a instalação como fizemos para todos os outros plugins. Ao inserir uma galeria em seu post utilizando o assistente padrão do wordpress, o efeito é habilitado automaticamente.

Dando sequência na série de posts falando sobre os plugins utilizados no desenvolvimento do blog do Studio Santista, gostaria de falar do Minipost.

Antes de procurar no diretório de plugins do wordpress, é claro que eu tentei da maneira mais difícil, criando shortcodes, manipulando php e o arquivo functions. O resultado passou longe do que eu esperava, até que conversando com o amigo e ex-colega de trabalho, Alex Koti, conheci o plugin em questão.

Instalando

A instalação é sem mistério, seguindo a linha dos demais plugins para wordpress. Ou seja, basta baixar o pacote, extrair os arquivos e fazer upload no diretório [raíz do wordpress]/wp-content/plugins. Após o upload, também seguindo o padrão wordpress, basta habilitá-lo clicando em widgets (complementos em português) no menu esquerdo do seu administrador.

Aplicando

A aplicação é quase tão simples quanto a instalação, talvez até mais. Na barra lateral do seu blog, vá em settings (ferramentas em português), e clique no item minipost. O sistema exibirá uma tela conforme a ilustração abaixo:

minipost

Tela para configuração do plugin Minipost

Nela você encontrará diversas opções. Focarei no “Hide miniposts from the Loop” e no “Control the appearance of each minipost by editing the display format.”, pois ao meu ver essas são as duas opções mais importantes do plugin.

Hide miniposts from the Loop

Não entrarei em detalhes sobre o que é o “Loop”. Esta opção fará simplesmente com que o seu artigo ao ser definido como Minipost, apareça ou não na listagem padrão dos posts. Ou seja, com esta opção habilitada, o Minipost aparecerá somente no local escolhido para sua exibição (geralmente no sidebar). Já com a opção desabilitada, o Minipost aparecerá tanto no local escolhido como na listagem de todos os posts na página principal do blog.

Control the appearance of each minipost by editing the display format

Esta opção, controla que tipo de informação você deseja exibir sobre o artigo definido como Minipost no local escolhido para tanto.

Suas opções padrão são:

  • %date% – A data de publicação do artigo.
  • %title% – Título do artigo.
  • %post% – O texto publicado.
  • %commentcount% – Número de comentários referentes aos post.
  • %permalink% – O link permanente do post.
  • %more% – Link para exibição do post na íntegra.

Você pode manipular da maneira que desejar. No caso do Studio Santista, manipulamos da seguinte maneira:
<p id="p-minipost"><a href="%permalink%">%title%</a> %post% </p>

Importante

Para um resultado interessante do plugin, é necessário utilizar o campo “Excerpt” (Resumo em português), localizado bem abaixo o editor de posts no seu administrador. Neste campo, forneça um único parágrafo do seu artigo ou faça um descritivo simples e objetivo. Os dados citados neste campo serão exibidos no local escolhido para o destaque com link para o post na íntegra.

E ai, o que acharam? Simples não é? Se tiverem dúvidas, dicas ou quiserem mostrar o resultado no blog de vocês, deixem um comentário.

Um abraço

Olá amigos, como comentei no post anterior, no qual anunciei a publicação do site da minha agência, iniciarei uma pequena série de artigos falando sobre os plugins utilizados e sobre as dificuldades que tive com os mesmos.

No post de hoje, falarei sobre o formulário de contato implementado no meu site, sobre as tentativas, falhas e o motivo pelo qual escolhi o plugin “contact-form-7“.

Escolhendo o plugin

Com o layout em mãos e com a estrutura de contato definida, a primeira idéia foi perguntar ao Google sobre uma possível solução, já que apesar do meu contato com wordpress e dos blogs que já implementei, este foi o primeiro com formulário de contato.

O primeiro teste foi realizado com o wp-gbcf em português. O admin relativamente extenso porém simples de usar, fornecia controle total do plugin e diversas opções. O resultado era um formulário amigável mas sem funcionalidade. Configurei diversas contas de e-mail no admin, indicando para onde o formulário seria enviado. Nenhuma mensagem chegou.

Como de costume, quando fico muito focado em uma solução, o melhor é destrair a cabeça um pouco antes de continuar, então parti para outros setores do meu blog antes de voltar a pensar novamente no formulário de contato.

Novamente conversando com o tio Google, encontrei outro plugin chamado wp-contact-form, muito semelhante ao escolhido no final das contas e muito mais simples de usar do que o anterior, com informações muito básicas e diretas. O único problema: o e-mail enviado chegava todo desconfigurado.

Manipulei php, procurei saídas no Google, troquei charset do meu blog e não resolvi o problema. Nesta tentativa cheguei a ficar bem irritado e fiquei algumas horas sem olhar para a cara do meu site.

Ainda bem que o diretório de plugins do wordpress é bem completo, então resolvi testar o tal do contact-form-7, o qual foi escolhido por mim não só devido a simplicidade para configurar mas também pelas traduções disponíveis. Não tive trabalho algum com a manipulação, instalei, configurei o e-mail que receberia os contatos e pronto, lá estava ele testado e funcionando.

Instalando o contact-form-7

Como você pode conferir na própria página do plugin a instalação é simples. Basta publicar a pasta com o plugin no diretório /wp-content/plugins/ do seu blog e habilitá-lo no menu “plugins” (em português “complementos”) do seu wordpress.

No menu Tools (ferramentas em português), clique no item Contact Form 7. Veja que não há o que modificar, basta fornecer o e-mail o qual receberá a informação preenchida pelo usuário, como já citei anteriormente. Para refinar um pouco, você pode personalizar as mensagens exibidas em caso de erro e de sucesso no envio clicando na aba “messages”.

Para aplicá-lo em uma página ou post do seu site, o próprio sistema exibirá uma tag do tipo

a qual você copiará e colará, sem esquecer de fazê-lo no modo HTML.

Agora é aproveitar e divulgar seu projeto.

Hoje é um dia muito especial. Lembram dos meus projetos em andamento publicados nos posts anteriores?

Pois é, um deles finalmente foi ao ar. O blog da minha agência, Studio Santista está lá, depois de muito trabalho, muitos testes com plugins do wordpress e momentos de estresse :)

Na sequência farei uma série de posts com os plugins testados e os comentários sobre o comportamento de cada um, ok? Aguardem!

No mais é divulgar meu novo blog em busca de clientes e tentando inovar sempre.

Felipe Ranieri

Estou tentando ser um homem de negócios há algum tempo, me parece que dessa vez a idéia tem grande possibilidade de dar certo.

Há 3 semanas em uma reunião com antigos colegas de trabalho, em meio a busca por freelas e produzindo o novo site do Wanderley Nogueira e do FESTA Santos decidimos que as habilidades de cada um poderiam dar um resultado interessante se misturadas a favor de uma nova agência de internet em Santos, minha cidade.

Studio Santista é o nome do projeto, o qual pretende trazer através das experiências vividas por nós, 4 amigos reunidos, um cenário mais moderno, profissional e mais interessante para o que existe atualmente quando o assunto é “soluções web” em Santos.

Hoje aqui na cidade, acho interessante e digno de destaque, apenas o trabalho da Mkt Virtual, porém o mesmo é bastante focado em flash, animações em geral. Sempre achei que Santos estava carente de algo mais “simples”, algo mais conceitual e focado em SEO. Essa é a nossa proposta. Paralelo a isso, como já citei no post anterior, o meu projeto sobre computação em nuvem está rolando e a idéia é fazer dele um outro braço, outro nicho para os negócios do Studio Santista.

Muito se falou na última semana sobre as novas diretrizes utilizadas para tratamento de links com NoFollow e também sobre a utilização de links com JavaScript. Ao meu ver, em relação ao NoFollow, houve uma certa tempestada por parte dos desenvolvedores, pois muitos manifestaram um certo “medo” em seus comentários sobre o futuro das estratégias criadas para otimização de sites.

A espera por definições é o melhor a fazer. Creio que no ponto de vista dos mais sensatos, essa nova diretriz não exigirá mudanças drásticas nas estratégias de SEO e é óbvio que o Google divulgará novas informações sobre o assunto.

Enquanto isso, alguns desenvolvedores já divulgaram algumas medidas que podem ajudar a manter sua estratégia alinhada. Eu pessoalmente costumo apelidar tudo isso de POG, gambiarra, mas enquanto o Google não apresenta uma alternativa, como disse o Bruno Nassar, sólida, é um caminho a seguir.

“…os links pagos devem ser bloqueados com o uso de nofollow no Javascript, com uso de arquivos .js externos ao HTML e bloqueados pelo robots.txt…”

Javascript e os padrões web

Alguns podem considerar tempestade da minha parte, outros até podem considerar pura balela, mas ao meu ver promover uma mudança que vai contra os padrões web, é o mesmo que retroceder. O formato dos links utilizando JavaScript que o Google passou a seguir, não é o recomendado.

Existem tantos HTMLers fracos ou que simplesmente ignoram os padrões existentes que ao validarmos certas técnicas abrimos brecha para o comodismo. Toda a discussão sobre semântica, todo o movimento realizado nos últimos anos por um HTML mais enxuto perde o sentido.

Como eu já citei em textos anteriores:

“…Ainda é grande o número de pessoas que dizem saber HTML, em alguns lugares, esse fato é tratado como saber excel em áreas não relacionadas à web. Muitos desses “pseudo-htmlers” sabem a maneira batida e extinta de fazer código…”

“…muitos ainda conseguem atuar na área, sem ter a mínima preocupação com conceitos modernos e utilizados atualmente…”

Concordo que tudo é uma questão de adaptação porém quem acompanhou toda a briga para se conseguir chegar em padrões de desenvolvimento aceitáveis e coerentes deve acreditar na inviabilidade de uma nova regra que não siga os requisitos propostos.

Resta apenas aguardar.

Seguir

Obtenha todo post novo entregue na sua caixa de entrada.