desenvolvimento para web

Rolagem com fundo transparente com CSS

Tárcio Zemel — Mon, 08 Mar 2010 20:20:57 +0000

Desde que o CSS foi criado, muita coisa mudou, atualizações foram feitas, especificações criadas, elementos revisados, enfim, a tecnologia evoluiu e vem evoluindo. O CSS alterou para muito melhor o modo como o desenvolvimento web é feito, deu ensejo à técnica de criação em camadas, dentre outras coisas.

E a comunidade CSS a cada dia desenvolve uma técnica nova, uma nova e melhor maneira de se fazer algo, um jeito diferente de sair de uma “enrascada CSS”, maneiras inovadoras de realizar algum efeito. É o caso da técnica de rolagem com fundo transparente com CSS. Uma técnica que confere um efeito muito peculiar, permitindo que uma imagem de background vá surgindo à medida em que a pessoa rola a barra de rolagem ao fundo da página.

Este é um artigo traduzido do original “CSS trick for a scrolling transparent background effect“, do blog FiveFingerCoding, e sofreu algumas adaptações.

Como a rolagem com fundo transparente funciona

Para realizar o efeito de rolagem com fundo transparente, são necessários 2 arquivos:

Uma imagem PNG transparente. A imagem deve ter dois conjuntos de gráficos: o que você quer mostrar antes de rolagem e que aparece quando se vai chegando ao final da página. Cada grupo deve ser uma cor diferente. Veja o PNG da demonstração.
Uma imagem em degradê. O truque é usar as duas cores do PNG transparente para criar o gradiente.

Os scrolls do gradiente sob o PNG transparente. Porque ele corresponde às cores do PNG, cada conjunto de imagens desaparece dependendo de qual parte do gradiente vão “chegando”.

HTML e CSS da rolagem com fundo transparente

Será necessária uma estrutura com 2 “divs-base”, como segue:

<html>
<head>
  <title>Rolagem com fundo transparente com CSS</title>
</head>
<body>
  <div id="wrapper">
    <div id="container">
 
    </div>
  </div>
</body>
</html>

O CSS de body (que precisa “zerar os elementos”, como explicado no artigo de CSS Mínimo), deve ser da seguinte forma:

body {
background: #900 url(gradient-tile.jpg) repeat-x bottom left; // hexadecimal é a mesma cor da imagem
}

Para a div “wrapper”, o CSS:

#wrapper {
background-attachment: fixed;
background: url(transparency.png) repeat-x center bottom;
width: 100%;
}
 
* html #wrapper { background-image: none; } /* IE6 */

É um CSS simples, maiores explicações não são necessárias, fora o fato de a largura da wrapper ser definida em 100% para o PNG transparente aparece em toda a largura da janela do navegador.

E o CSS da div “container”:

#container {
  width: 750px;
  margin: 0 auto;
  background-color: #000;
}

A largura de #container pode ser qualquer uma que se adapte ao seu layout (alguns preferem o padrão de 960px). Para o exemplo, está um pouco menor para que o efeito possa ser visto com mais clareza. A cor de fundo, também, pode ser o que quiser. As margens esquerda e direita são definidas como “auto” para centralizar a div na janela do navegador.

Observações sobre rolagem com fundo transparente (e o IE6)

Se você não tem conteúdo suficiente na div container para fazer scroll, o efeito não acontecerá e o que será visto é somente a cor de fundo. A solução é definir uma altura mínima na div container para forçar a rolagem, independentemente da quantidade de conteúdo.

Sobre a transparência do PNG, nosso amiguinho pré-adolescente IE6 não dá suporte à transparências… No caso, existem diversos scripts e macetes em CSS para sanar este bug, dentre eles o filtro AlphaImageLoader.

Como foi visto, há um hack para IE6 em #wrapper, mas não podemos negligenciar o fato de o IE6 não suportar a propriedade min-height (para o caso de acontecer o explicado no parágrafo anterior). Se for o seu caso, experimente usar o Tan Hack, que faz com que o IE6 interprete “height” como “min-height”.

Mas, sinceramente, o efeito só tem graça numa página extensa, quando o visitante é surpreendido com o efeito somente no fim da rolagem da tela, não é? ;-)

Veja o resultado final da técnica de rolagem com fundo transparente com CSS.

E aí, gostou?

Perguntas ao cliente para antes e depois de um projeto

Tárcio Zemel — Mon, 01 Mar 2010 16:14:39 +0000

É através de perguntas ao cliente que podemos nortear todo o planejamento e desenvolvimento de um projeto. E existem perguntas apropriadas para se fazer antes e depois do desenvolvimento de um software para web. Perguntas essas que são de vital importância para se entender as regras de negócio, as especificações, expectativas e muitas outros imprescindíveis. Veja algumas perguntas que devem ser feitas aos clientes antes e depois de um projeto.

Este é um artigo traduzido do original “14 Questions To Ask Your Clients Before and After a Project”, do blog DesignReviver, e sofreu algumas adaptações.

Perguntas ao clientes antes do projeto

As perguntas que devem ser feitas ao cliente antes de o projeto se iniciar servem, justamente, para dar o “norte” ao que será realizado no job. É através dessas perguntas que se poderá conhecer melhor a empresa, saber quais as expectativas (de ambas as partes envolvidas) e ter uma noção melhor de como se dará o desenvolvimento, em si. Certamente as perguntas a seguir são excelentes complementos a um bom briefing de desenvolvimento de sites.

Qual é o tipo de negócio da sua empresa?

Esta é uma questão importante porque é o primeiro passo para conhecer a estrutura do negócio do seu cliente. Ela irá ajudá-lo a avaliar as necessidades da empresa, na seara de desenvolvimento web e é também uma porta de entrada para a reflexão estratégica.

Qual é a reputação de sua empresa?

No meio online, reputação é tudo. Você quer (e precisa) criar um site que reflete a reputação do negócio de seus clientes. Se a reputação de seu cliente está passando por um período difícil, então qualquer projeto que você desenvolva tem poder de seguir o mesmo caminho ou atrair “positividade” – logicamente ambos querem a segunda opção. Além disso, a empresa possui uma boa reputação de satisfação, qualidade e tempo de serviço? Esses são todos elementos que afetam o projeto.

Evidentemente que a pergunta não precisa ser feita de forma tão direta; o cliente pode até se sentir ofendido. Mas a pessoa responsável pelas negociações deve extrair esse tipo de informação do cliente a fim de prover recursos de qualidade para o desenvolvimento do projeto. A experiência mostra que a capacidade de abstrair respostas dos clientes para transformá-las em conceitos de desenvolvimento web é algo que valoriza bastante o projeto – tantos em termos financeiro, quanto em termos de qualidade.

Qual é seu cliente típico?

Esta questão irá ajudar a você ter uma idéia melhor do qual é a abrangência da empresa. O cliente típico está fora do mercado de atuação da empresa? Como a empresa interage com sua clientela? O cliente típico fala uma língua diferente?

Essas questões são vitais para a estética e/ou usabilidade de seu projeto. Se você estiver projetando um logotipo, por exemplo, e os clientes típicos de seu cliente não falam o mesmo idioma, então você teria a certeza de que o logotipo deve ser capaz de comunicar eficazmente em um outro nível.

Qual é o seu público-alvo?

Diferente do qual é o cliente típico, você deve ter uma profunda compreensão do público-alvo que o seu cliente está apontando. Talvez ele esteja tentando trocar seu nicho de atuação ou está procurando redefinir e expandir sua base de clientes; seja qual for, saber exatamente qual o público alvo de seu cliente é fundamental para o desenvolvimento e sucesso de seu projeto.

Você tem concorrentes? Como se diferencia deles?

Embora isso possa ter uma resposta óbvia (se você fez uma boa quantidade de pesquisas), você ainda deve fazer essa pergunta para ter uma idéia do que o cliente acredita que seja sua concorrência. Mais do que provavelmente, ele tem uma ideia muito melhor de quais são seus concorrentes. Conhecendo os concorrentes de seus clientes é possível excluir qualquer semelhança entre todos os seus projetos existentes. Isso ajudará a criar um design (e um projeto, em si) mais exclusivo e centralizado para o seu cliente.

Com que frequência você gostaria de atualizações?

Você não quer ser inconveniente e comunicar o cliente cada passo que dá no projeto. Esta questão irá ajudá-lo a estabelecer um alinhamento com o seu cliente para fazer comunicados sobre atualizações somente quando ele quiser (o que ele julgar que é conveniente, aliado ao que você considera ser importante para o projeto). Atualizações excessivas podem desencorajar um cliente a usar seus serviços no futuro…

O que é necessário para que considere o projeto finalizado?

Essa é a pergunta equivalente ao “aceite”, que consta no modelo do artigo sobre briefings para desenvolvimento de web sites.

Se você está projetando um site ou sistema virtual, então é importante perguntar ao seu cliente como pretende utilizar o site, e como eles prevê que será o resultado. Não seria nada bom se você estivesse finalizando um projeto e descobrisse que ele não tem as características que seu cliente solicitou ou não se comporta do modo como ele idealizou.

Quais formas de pagamento você usa?

Se você não tem intenção de elaborar um contrato antes de iniciar o projeto, então seria uma boa ideia pedir ao seu cliente para avaliar como eles planejam pagar por seus serviços. Talvez você só aceite o PagSeguro, mas o cliente só paga em cheque. Se não for combinada uma forma de pagamento antes, isto pode criar graves problemas e causar um desgaste irremediável na relação profissional.

Perguntas ao cliente depois do projeto

Essas são perguntas que podem ser feitas um pouco antes da entrega do projeto ou imediatamente depois. O objetivo é realizar uma “linha suave” desde a concepção do projeto até sua conclusão e saber em quais pontos você acertou e não acertou no decorrer do desenvolvimento. Aprender com os próprios erros para se aprimorar é básico.

Você está satisfeito com os resultados?

Esta questão irá ajudá-lo a analisar a qualidade de suas habilidades e como você é capaz de desenvolver um projeto baseado nas necessidades do seu cliente. A medida em que você avança em sua carreira, você vai ter muita chance de melhorar suas habilidades e saber o quão satisfeitos seus clientes ficam com os trabalhos que você faz cria oportunidades de você fazer exatamente isso.

Gostou da minha postura profissional durante o projeto?

Tão importante quanto saber se o cliente gostou do resultado final do projeto é saber se ele gostou da relação profissional que vocês tiveram neste ínterim. Desenvolver as relações interpessoais faz parte de qualquer negócio, não somente de desenvolvimento para web; portante, procure sempre aperfeiçoar suas habilidades de comunicação. Perguntar a opinião do cliente sobre isso é uma boa, vai permitir que você regule seu “termômetro sócio-profissional”.

Alguma outra dúvida?

Às vezes, um cliente pode ter algumas perguntas, mas ela pode receoso ou intimidado a perguntar, por motivos pessoais e profissionais. Qualquer razão que seja, você deve deixar claro para seu cliente que ele pode sempre vir a você com todas as perguntas que possa ter, mesmo agora, com o término do job, que o contato entre vocês não será tão frequente. Isso, por si só, poderia inspirar o cliente a perseguir os seus serviços para projetos no futuro. Ter um relacionamento digno de confiança com seu cliente é uma das coisas mais importantes que você pode fazer.

Não existem outras perguntas que se deve fazer ao cliente?

Obviamente que existem centenas de outras perguntas que podem – alguns casos, devem – ser feitas ao cliente, antes e depois de um projeto. As perguntas aqui apresentadas são somente um guia, um “esboço” das perguntas que você efetivamente fará ao cliente.

O mais importante não é “decorar” essas perguntas; o mais importante é ter consciência de que determinadas perguntas podem e devem ser feitas aos clientes antes e depois de um projeto. Antes para que ambos fiquem em sintonia com o projeto; depois, para aferir os resultados e esclarecer dúvidas (que existem, pode acreditar).

E você, quais perguntas faz a seus clientes antes e depois de um projeto?

7 ferramentas para web designs melhores

Tárcio Zemel — Mon, 22 Feb 2010 12:40:55 +0000

Web design é uma arte! Através dos princípios de Gestalt, cores, call to actions bem feitos e outras técnicas e práticas (tudo isso aliado ao bom gosto), é possível criar ambientes incríveis na internet! Saber desenvolver um excelente design para web é fruto de bastante estudo, conhecimento técnico e experimentação.

E, a fim de saber se determinado design é eficiente e está conseguindo atingir os objetivos a que se propõe, é preciso analisar seu desempenho. Mas como analisar se um web design é eficiente? Através de algumas ferramentas interessantes e bastante úteis.

Este é um artigo traduzido do original “7 Tools You Should Be Using For Better Web Designs“, do blog Six Revisions, e sofreu algumas adaptações.

Heat Maps

Heat Maps (ou Mapas de Calor) feitos por empresas como a CrazyEgg (ou o gratuito ClickHeat) dão uma representação visual de o que os visitantes estão fazendo em seu site através do rastreamento individual de cada clique. Heat Maps, geralmente, também controlam cliques que não são links (algo que o Google Analytics, por exemplo, não faz).

Com mapas de calor, você pode descobrir se as pessoas estão usando o site da maneira desejada e fazer alterações quando necessário. Por exemplo, os visitantes estão clicando incorretamente em textos ou imagens que se parecem com links?

Testes de Usabilidade Online

Recrutar pessoas para testes de usabilidade “tradicionais”, em um ambiente controlado, pode ser um processo muito demorado e oneroso. Várias empresas fornecem testes de usabilidade totalmente online, tanto em estilo um “moderado”, quanto “não moderado”. Isso pode economizar tempo e dar mais controle sobre seus cenários de testes.

Em um teste de usabilidade online moderado (confira UserTesting.com), você cria cenários de teste, pode atribuí-los a usuários pré-selecionados e ver os resultados. Em um estilo não moderado (veja ClickTale), cenários e/ou tarefas não são especificados; Ao invés disso, sessões de browser inteiras da navegação de visitantes são anonimamente monitoradas, registradas e estudadas.

Teste A/B

Está tendo problemas para decidir qual web design para a página inicial trará melhores resultados? O Google Web Optimizer pode implementar testes A/B em seu site para ajudar a determinar qual delas é mais eficaz. Ele permite que você implemente projetos múltiplos da mesma página, que são então aleatoriamente mostrado aos visitantes.

Você pode, então, comparar os resultados e ver qual projeto é mais eficaz. Os testes A/B eliminam qualquer forma de “adivinhação”, usando informação real para ajudar a tomar decisões sensatas sobre o web design de seu site. Veja este vídeo de experiências A/B com o Google Web Otimizador no YouTube.

Crowdsourcing

O Huffington Post deu um passo adiante nos testes A/B, usando uma técnica conhecida como crowdsourcing para determinar como os visitantes preferem o texto da manchete. Manchetes são conhecidos para literalmente fazer ou “quebrar” um artigo, independentemente do seu teor.

Para ajudar a criar as manchetes mais interessantes, para estimular o interesse do público, os visitantes são mostrados a, aleatoriamente, um dos dois títulos diferentes para um mesmo artigo em uma página. Após os primeiros 5 minutos de ser lançado, o título com o maior número de cliques é selecionado e mostrado para todo o restante do público.

Buscas Internas

O Google Analytics tem um recurso chamado Site Search, que usa dados de pesquisas internas para acompanhar e analisar o que os visitantes estão procurando em seu site. Dados de buscas internas são muito importantes, já que auxiliam e dão dicas sobre o que seus visitantes querem e por que estão lá.

Usando esta informação, você pode descobrir se seu site tem o conteúdo que seus visitantes querem/precisam. O Site Search também pode o quão eficazmente seu conteúdo é organizado e se ele pode ser facilmente encontrado.

Por exemplo, quando os visitantes utilizam sua busca, que link eles clicam em primeiro nos resultados da pesquisa? É a página correta? Ou será que eles procuram por um número reduzido de páginas e então se sentem desencorajados e abandomam o site? Estas são apenas algumas das questões importantes o Site Search pode ajudar a responder para ajudar a gerenciar seu conteúdo.

Até que ponto você quer permitir que outras empresas (no caso, Google) saibam sobre você e seu site? Pense no seguinte: permitir uma análise completa das buscas e padrões de seu site é, falando em business, interessante para você?

Serviços de Monitoramento

O que as pessoas estão dizendo sobre o seu site? Ouvindo o seu público e o acompanhando através de comentários não solicitados podem ser uma ferramenta muito importante para ajudar a entendê-lo. Esses canais permitem que você permaneça relevante com o seu público. Dessa forma, você pode criar decisões informadas e embasadas sobre a direção e web design do seu site.

Alertas do Google

Alertas do Google permite que você selecione termos de pesquisa específicos e irá notificá-lo via e-mail ou feed a qualquer momento que esse(s) termo(s) for encontrado pelo Google. Ele lhe dá a capacidade de procurar dentro de blogs, notícias, grupos, vídeo e web.

Twitter Search

O Twitter Search permite controlar o que as pessoas estão dizendo, em tempo real. Além disso, dentro das opções avançadas, você pode limitar as pesquisas a determinados locais, datas e mesmo se os usuários estão fazendo uma pergunta.

Blogs

Blog: o “avô” de todas as ferramentas (deste gênero) e algo que sempre deve ser considerado pelos administradores de um site. Ao implementar um blog, você cria um canal oficial de comunicação entre você e seu público. Você pode mantê-los informados sobre as mudanças ou novos recursos e incentivar a participação e feedback do público.

Conclusão sobre ferramentas para melhores designs para web

Muitas vezes os administradores de sites lançam um novo web design e julgam que o trabalho está feito. Bons web designers e desenvolvedores devem constantemente permanecer relevantes para sua audiência.

Estas ferramentas irão ajudá-lo a participar e interagir mais com seu público. Vão ajudá-lo a compreendê-lo de forma mais eficaz, conduzir a uma maior facilidade de utilização e entregar o máximo proveito do seu site. Obviamente não são todas as formas de se fazer isso, mas, certamente, um bom passo para começar a otimizar seus web designs.

Gostaria de indicar mais alguma ferramenta ou serviço para a melhora de web designs? Alguma outra dica?

4 elementos de design para um bom call to action

Tárcio Zemel — Mon, 08 Feb 2010 12:30:09 +0000

O artigo com dicas para call to actions eficientes foi interessante, mas faltou algum detalhamento extra, algo a mais sobre a prática de se fazer chamadas à ação. Por isso, indicar os 4 elementos de design para um bom call to action vai ser de muita valia para complementar. Depois de ler este texto, você está apto a fazer melhores call to actions e vai incrementar a usabilidade de seu site.

Este é um artigo traduzido do original “4 Simple Design Elements Behind a Good Call to Action“, do blog letscountthedays, e sofreu algumas adaptações.

Tamanho

Faça a sua chamada à ação grande o suficiente para que se destaque bastante na página! É o foco principal, certo? De modo geral, quanto maior é um elemento em uma página, mais visível será, consequentemente, deve ter maior importância. Um bom call to action é grande o suficiente para que ele seja reconhecido facilmente.

Antes de fazer botões enormemente e exageradamente gigantes, bastante atenção! Se você criar uma chamada muito grande, uma call to action enorme, os visitantes podem não compreender que o elemento é clicável e você vai perder completamente o “apelo” àquela ação. A dica é criar chamadas à ação grandes em relação aos outros elementos da página, tomando o cuidado para não cair no exagero ridículo e ineficiente.

Alternativamente, se você tiver mais de uma chamada à ação, utilize o tamanho segundo sua importância. O primeiro call to action deve ser maior do que o segundo e assim por diante.

Forma

Normalmente os melhores call to actions são os que tem forma de botão, chamam bastante atenção e são instantaneamente identificados como clicáveis – experimente usar os cantos arredondados ou circulares nas extremidades de call to actions para lhes dar a forma de um botão. Cantos arredondados funcionam bem, porém alguns usuários podem interpretar mal a chamada à ação, tomando por um anúncio ou banner. Como sempre no desenvolvimento web, o que vale é o bom senso!

Na intenção de fazer os call to actions parecidos com botões, um bom passo nessa direção é usar uma fonte tipográfica única, diferente das do restante da página, de modo a reforçar o “apelo” à ação. A diferença na forma da letra a ajudará a atrair a atenção para o call to action. Mais uma vez, bom senso na escolha para não destoar completamente do estilo e identidade visual do site.

Cor

Não é possível dizer que algum dos 4 elementos para um bom call to action que estão sendo abordados tem mais importância do que os demais, no entanto, a cor de seu call to action tem muita importância. Uma das formas mais rápidas para agarrar a atenção do usuário é usando um contrastante e visualmente interessante call to action. Escolher uma cor que se destaca do resto das cores utilizadas na página irá cumprir sua função.

Escolha uma cor que é especificamente exclusiva para sua chamada à ação; uma cor que não seja usada em qualquer outro lugar da página. Por exemplo, se o texto do site é preto e todos os links e botões são azuis, você deve usar cores diferentes de azul ou preto para o seu call to action. Ao invés disso, use uma cor mais clara e contrastantes como, por exemplo, o laranja. Ao utilizar laranja, a chamada à ação não ficará despercebida com o resto do azul e preto e vai receber bastante destaque em relação aos outros elementos da página.

Também é recomendável que você pratique o uso de cores de forma apropriada. É conveniente escolher cores chamativas e contrastantes, mas certifique-se de escolher as cores que se encaixam no esquema de cores geral do site. Também tome cuidado ao usar mais de uma chamada à ação na página: se você transformar a página em um arco-íris vai “drenar” o impacto do primeiro call to action e colocar os usuários em estado “não responsivo”.

Posição

Posicionar sua call to action “instintivamente”, no caminho dos olhos dos usuários, é extremamente importante. Não importa o quão grande, de forma estranha ou brilhantemente e coloridos seja sua chamada à ação seja, os visitantes nunca o verão caso não seja colocado em uma posição intuitiva. A posição exata para a sua chamada para a ação vai depender do layout da página, mas, regra geral, o melhor é manter a chamada para ação acima da dobra, numa área de destaque e com a abundância de espaço.

Deixando uma boa quantidade de espaço em branco em torno da call to action evita que outros elementos da página interfiram com a importância necessária de estarem ali. Posicione a chamada para ação num local intuitivo, sem qualquer confusão na forma como vai angariar o maior número de conversões.

Conclusão sobre bons call to actions

O mais importante é que você não pode ignorar o design de seu call to action! 4 elementos de design descritos aqui podem não parecer muito, mas, se bem utilizados, podem fazer maravilhas em sua taxas de conversão!

Veja diversos exemplos de call to actions no artigo da Smashing Magazine sobre o assunto. Inspire-se e avalie se você está indo no caminho certo; se está acertando nos julgamentos de design e estratégia de conversões de seus projetos. Fazer revisões e aprimoramentos constantes em seus trabalhos é um grande passo para garantir sua qualidade profissional, ao mesmo tempo em que ajudará com que você seja visto como alguém confiável, que não “abandona” os jobs realizados, simplesmente.

Tem mais alguma dica, exemplo ou comentário a fazer sobre call to actions?

User Interface em dicas rápidas

Tárcio Zemel — Mon, 01 Feb 2010 12:31:29 +0000

Desenvolvedores de interfaces de sites (e pessoal de desenvolvimento web, em geral), além de serem criadores de interfaces de usuário e experiências, também são “consumidores” de interfaces. E, a cada vez que eu encontramos um site em que a experiência do usuário e usabilidade não foram bem trabalhados, queremos abandonar esse site imediatamente! Geralmente é isso que a maioria das pessoas faz ao invés de perder tempo.

A seguir, confira algumas dicas rápidas para o desenvolvimento de interfaces de sites e sistemas virtuais. Dicas essas que são alguns dos mais importantes caminhos que um designer deve abraçar ao projetar uma user interface.

Este é um artigo traduzido do original “Stop Wasting My Time – by user“, do blog Graphic Rating, e sofreu algumas adaptações.

Faça botões com “cara de botões”: call to action explícito

Muitos sites apresentam esse problema: os botões são inacessíveis ou tem baixa visibilidade, fazendo com que o call to action (“chamada para a ação”) não seja explícito. Ao criar uma página, uma interface com o usuário, a primeira coisa que você deve considerar é fazer botões call to action explícito, que seja claro e não haja dúvidas de que se trata de um botão que desencadeará uma ação específica.

Reduza o número de cliques

Como já foi abordado por diversas vezes nos artigos sobre SEO, o número de cliques não é um fator tão incômodo quando se pensava em outrora; mas, quando é preciso clicar 7-8 vezes para baixar um arquivo, isso pode se tornar um grande problema.

Alguns autores/especialistas aconselham a manter o número de cliques para “ações comuns” em, no máximo, 3 ou 4. Dessa forma você “se força” a criar não somente uma melhor experiência do usuário, mas, também, faz com que uma boa arquitetura da informação esteja presente em seu site.

Defina um objetivo

Cada site deve ter um objetivo. Ao definir um objetivo, você economiza tempo precioso tanto de si mesmo, quanto do usuário. Também, tente conduzir o visitante para o mesmo objetivo através de elementos de sua user interface. Isso só pode significar menos tempo desperdiçado por parte do usuário.

Aumente a performance de seu site

Outro fator contra a perda de tempo do usuário é ter um site rápido, com boa performance e desempenho. Isso significa que o usuário irá se concentrar em encontrar o conteúdo ao invés de esperar que o conteúdo seja carregado. Existem inúmeros recursos para melhorar sua velocidade do site, confira o artigo sobre o aumento de performance e desempenho de sites e blogs.

Conclusão sobre user interfaces eficientes

Como dito, essas são dicas rápidas para incrementar a experiência do usuário em sites e permitir a criação de user interfaces eficientes e úteis para os visitantes. Tendo essas dicas em mente – e efetivamente as colocando em prática – certamente vai fazer com que você desenvolva melhores interfaces e, consequentemente, faça com que as interações em seu ambiente online sejam melhores e a experiência final de seus visitantes seja otimizada.

Otimização WordPress: aumente a performance e desempenho de seu blog / site

Tárcio Zemel — Mon, 25 Jan 2010 12:17:19 +0000

Há muitas dicas úteis na internet sobre como otimizar seu blog Wordpress. Algumas delas são boas, mas difíceis de serem implementadas pelo “usuário médio”. Da experiência advinda da blogagem é possível saber de dicas para tornar seu site mais rápido e com melhor desempenho e performance.

É interessante que um web designer/desenvolvedor tenha em sua máquina o Firebug e Web Developer Toolbar, duas das mais importantes ferramentas de depuração em desenvolvimento web. Também tenha em mente que este artigo é dedicado, principalmente, aos sem possibilidade de configurar o PHP e MySQL diretamente, devido a condicionalismos e/ou restrições de hospedagem.

Este é um artigo traduzido do original “Speed-up Your Wordpress Blog“, do blog Graphic Rating, e sofreu algumas adaptações.

Otimize seu código HTML dentro de seu template

Esta é uma etapa que, geralmente, não é considerada importante quando, na verdade, deveria estar no topo de sua lista! É muito importante que seu código HTML esteja validado e que você não tenha código redundante. Certifique-se que seu tema é escrito com uma quantidade mínima de código possível. Não faça uso abusivo de tags como div e span.

Comprima seu CSS

Para que seu site seja mais rápido e de melhor performance e desempenho, existem vários truques que você pode aplicar no CSS, dentre eles:

Usar declarações únicas no CSS. Você pode usar declaração única para margin, padding, background, border, font e list-style.
Usar nomes pequenos em classes e IDs. Cada letra conta para o tempo de resposta do site. Por isso, é útil para o tamanho do CSS usar nomes simples e mais curtos ao invés de longos e descritivos nomes.
Evitar seletores complexos. Tente fazer com que seus seletores sejam eficientes utilizando a maneira mais simples que for possível.
Comprimir seu CSS. Depois que seu arquivo CSS estiver pronto, você pode ganhar velocidade adicional usando um compressor de CSS online - lembre-se de sempre ter um arquivo de backup com o código original.

Utilize Sprites CSS

Ao invés de usar vários arquivos de imagem no seu site/blog, experimente reunir o maior número possível de elementos gráficos em uma única imagem. Então usando a propriedade CSS background, você pode exibir os elements que quiser – essa é a técnica de CSS Sprites.

No caso dos Sprites CSS, o tamanho do arquivo de uma imagem é um menor que o de várias e o número de requisições HTTP também diminui – e esse é um dos fatores-chave para a performance de um site, como será visto a seguir.

Faça poucas requisições HTTP

Ultimamente esse tem sido um grande tema em debates sobre otimização e performance de sites. Alguns especialistas pensam que este é o aspecto mais importante a respeito do carregamento de uma página. A ideia principal é ter menos elementos na página, como imagens, arquivos CSS, javascript, etc. Alguns dizem que o ideal é faze menos de 25 requisições, se possível.

Evite carregar elementos externos

Esse é um dos mais importantes aspectos referentes à performance de web sites porque, ultimamente, os sites estão cheios de código javascript e iframes de sites de terceiros. Portanto, tente manter seu site longe de conexões a desnecessárias a elementos externos. Alguns fazem isso somente para mostrar um widget sem grande importância ou um “selinho” sobre alguma coisa que não acrescenta a navegação do visitante. Encontre alternativas ou tente hospedar os widgets em seu próprio dominio.

Deixe o tamanho da página inicial menor que 150KB

Para realizar essa “tarefa” selecione, no Web Developer, Informações > Visualizar Tamanho do Documento. Isto irá mostrar o tamanho de sua página e os elementos que fazem parte dela, como arquivos CSS, imagens, scripts, etc. Tente manter todos esses componentes no valor máximo de 150KB.

Exiba o resumo ao invés do artigo completo

Outra forma de otimizar sua página inicial é mostrar apenas uma parte de seus artigos. Dessa forma você exibe menos caracteres e faz com que o tempo de carregamento seja menor.

Reduza o número de plugins

A maioria dos plugins tem seus próprios arquivos CSS e/ou imagens. Então, se possível, é melhor manter baixo o número de plugins instalados para baixo. Dessa forma, você irá reduzir o número de requisições HTTP.

Exiba no máximo 20 imagens na index

Isso vale também para o objetivo de diminuir o número de requisições HTTP. As imagens podem estender o tempo de carregamento do site e é indicado que você não utilize mais de 15-20 imagens na index, quando possível. Quanto a páginas de artigos artigo, o número máximo de imagens deve ser de 5. Dessa forma, você pode ter artigos mais limpos e um site WordPress melhor.

Limpe sua sidebar

Coisas como calendário ou blogroll não são adequados para todo e qualquer blog/site WordPress. E estes componentes também diminuem a velocidade de carregamento de seu site. Você pode desabilitá-los, removendo o código do seu tema WordPress.

Caminho absoluto para algumas template tags

Quando você conhece os caminhos para determinados elementos, você pode usar os caminhos absolutos ao invés de usar as template tags do WordPress. Com isso, você pode reduzir o tempo de carregamento de seu site.

Por exemplo, em vez de usar a template tag bloginfo(‘’stylesheet_url’), você pode colocar o caminho absoluto: http://www.seusite.com/wp-content/themes/seutema/style.css.

Outros exemplos são:

bloginfo(‘name’)
wp_title()
bloginfo(’stylesheet_url’)
bloginfo(‘pingback_url’)
bloginfo(‘template_url’)
bloginfo(‘version’)
bloginfo(‘atom_url’)
bloginfo(‘rss2_url’)
bloginfo(‘url’)
bloginfo(‘name’)
bloginfo(‘html_type’)
bloginfo(‘charset’)

Impulsione seu WordPress com .htaccess

Esta é uma outra maneira de você aumentar o desempenho e performance de seu site/blog WordPress. Com base nas configurações do site e workflow, você pode personalizar o seu .htaccess usando as informações de “Ultimate .htaccess Tutorial” (além de informações sobre .htaccess em outros lugares). Lá você pode encontrar informações sobre cache, cabeçalhos, compressão gzip, etc.

Conclusão sobre otimização WordPress

A razão para este artigo foi a quantidade de blogs e sites WordPress atualmente disponíveis na internet. Seu número está aumentando e a maioria dos blogs não tem uma hospedagem com um nível tão bom.

Essas hospedagens não são tão rápidas, mas com uma pequena ajuda noo HTML, CSS e WordPress, a velocidade de blogs WordPress pode aumentar. Certamente essas dicas irão ajudar se seu objetivo e aumentar o desempenho e performance de seu site ou blog WordPress.

6 mitos de SEO que você deve evitar

Tárcio Zemel — Mon, 18 Jan 2010 13:22:45 +0000

Foram necessários somente poucos anos para que SEO se tornasse um negócio sério, com empresas especializadas no assunto e “agências de otimização” surgissem, com o mesmo objetivo de antigos mercados (além de ganhar dinheiro, claro): ser o melhor do ramo. Mas, nesse meio tempo, alguns mitos sobre SEO surgiram e foram devidamente criados por aqueles que se interessam em angariar a fatia maior do mercado e erroneamente propagados por aqueles que não se interessam em estudar/testar.

Evidentemente quem não trabalha especificamente na área, às vezes comete/propaga enganos sobre SEO por descuido ou falta de conhecimento; e é por esse motivo que devemos sempre ter critério na hora de escolher nossas fontes de estudo e dar todo o crédito aos diversos “gurus” que se apresentam (e se autointitulam assim).

Então, antes de gastar tempo e dinheiro em uma campanha SEM/SEO, veja quais são os 6 maiores mitos sobre SEO e aprenda os verdadeiros fatos sobre eles.

Este é um artigo traduzido do original “Avoid these Top Six SEO Myths and Learn the Facts“, do blog SEO Marketing World, e sofreu pequenas adaptações.

Mito de SEO 1: todas metatags tem igual importância

Algumas meta tags são úteis, mas outras podem não ser tão relevantes assim. Atualmente, os motores de busca estão mais preocupados com o conteúdo do site do que as metatags que foram escolhidas.

Mito de SEO 2: SEO é caro

SEO é como qualquer coisa: há SEO que é caro e SEO baratinho. Você só tem que saber o que procurar e quais as melhores técnicas de SEO que irão beneficiá-lo.

SEO orgânico é menos dispendioso e muitos do que é feito não tem custos. Uma campanha PPC ou banner publicitário pode ser mais caro porque você paga por cliques ou impressões. Com o SEO, os cliques não custam nada (para você).

Mito de SEO 3: Sites devem ser submetidos a mecanismos de busca semanal ou mensalmente

Você deve submeter seu site para um mecanismo de busca somente uma vez. Automaticamente o bot daquele mecanismo de busca irá voltar. Para acelerar o processo de ter seu site indexado, faça link(s) para um site de alto tráfego ou alto PageRank. Suas URLs serão encontrada pelos motores de busca e serão indexados automaticamente.

Mito de SEO 4: Fornecer conteúdo basta para ficar bem posicionado

Evite esse mito a todo custo! Você deve fornecer conteúdo otimizado de qualidade de SEO off site com a densidade de palavras-chave adequada. Ter de backlinks para o seu site é fundamental para a boa classificação no Google e outros mecanismos de busca.

Mito de SEO 5: Palavras-chave e termos competitivos não são recomendados

É imperativo que você utilize as palavras-chave que todo mundo está usando (e, consequentemente, as pessoas estão procurando), já que as pessoas procuram seu tema ou produto digitando palavras-chave. É recomendável que você use uma variedade alta, média e baixa de frases e palavras-chave competitivas.

Mito de SEO 6: SEO orgânico não é tão eficaz quanto PPC

Enquanto isso poderia realmente ser uma afirmação verdadeira a curto prazo, a longo prazo isso não é verdade. Isso acontece porque as pessoas tendem a confiar mais nas informações encontradas em buscas orgânicas e não muito para as informações pagas em uma base PPC.

Agora que está ciente dos 6 maiores mitos de SEO, você está melhor preparado para criar uma campanha de SEM/SEO que realmente irá beneficiar você!

8 dicas para fazer códigos melhores com jQuery

Tárcio Zemel — Tue, 12 Jan 2010 17:18:58 +0000

jQuery é um framework javascript que está se tornando se tornou incrivelmente popular. É rápido, fácil de usar e criar plugins personalizados e componentes são feitos rapidamente. Atualmente, todo mundo é um desenvolvedor jQuery e o repositório de plugins está praticamente explodindo com a adições praticamente diárias.

À luz de tudo isto, aqui estão 8 excelentes dicas para fazer códigos melhores com jQuery e se tornar um melhor programador em jQuery que você deve considerar antes de começar seu próximo projeto.

Este é um artigo traduzido do original “Eight Tips That Makes You a Better jQuery“, do blog David’s Kitchen, e sofreu pequenas adaptações.

Mantenha a acessibilidade através da degradação

Com jQuery ser popular é assim, mais e mais pessoas estão escrevendo plugins e criando pacotes de componentes que estão prontos para uso. Mas alguns desenvolvedores tem em mente que projetos online também devem funcionar sem javascript ativado. Essa é uma das principais razões para fazer javascript não obstrusivo. Como exemplo, vejam:

CSS

.animate {
color:red;
display:none
}

jQuery

$('.animate').fadeIn();

Usaria jQuery para dar um fadeIn() com a classe “animate”. Mas se o javascript estiver desativado, o navegador ainda analisa a CSS e, naturalmente, os elementos nunca serão mostrados!

Ao invés disso, tenha sempre o hábito de separar “javascript CSS” e “CSS puro”. Tente isto:

CSS

.animate {
color:red
}
 
.animate_js {
display:none
}

jQuery

$('.animate').addClass('animate_js').fadeIn();

Dessa forma, você pode estilizar os elementos para cada situação e manter a degradação de uma forma sensata. Como sempre, sem testar seu código javascript ativado antes da implementação.

Mover efeitos visuais para a camada de apresentação

Quando for escrever javascript, mantenha sempre o foco nos comportamentos. jQuery não é CSS, então esteja atento as diferenças fundamentais entre a apresentação e comportamento.

Por exemplo, quase sempre é uma boa ideia adicionar classes ao invés de trabalhar com somente propriedades CSS. Evite fades e “glamour” nas funções. Guarde os efeitos para uma fantástica apresentação, mas cuidado no uso em funções javascript - nem todos compartilham seu gosto visual!

Usar Firebug e console.log

Firebug é seu amigo quando está desenvolvendo com jQuery – na verdade, no desenvolvimento web, geral. E assim é o comando console.log, que graciosamente substitui o alert() chato.

Basta digitar console.log() para debugar sempre que você precisar no seu código. Mas lembre-se de remover essas instruções antes da produção, uma vez que muitos navegadores terão conflitos, incluindo o IE (claro!).

E, para outras funcionalidades do Firebug, confira a Console API.

Definir padrões sensatos e utilizar uma quantidade limitada de parâmetros

Quando você é mordido pelo inseto jQuery e começa a criar plugins, frequentemente tenta maximizar o número de parâmetros para tornar o desenvolvimento o mais flexível possível.

Isso tudo é muito nobre, mas que fique claro e que tente não confundir o desenvolvedor web com parâmetros minúsculos que quase não fazem diferença (como fades, velocidades, etc.). Ao invés disso, passe paràmetro de objeto e defina padrões sensíveis. Seu código não precisa fazer literalmente tudo!

Encapsular seu próprio alias

jQuery não é o único framework que usa a abreviação de dólar ($). Vários plugins JQuery e trechos de código também o utilizam para definir onDomReady callbacks e funções de seletores CSS, mas você pode acabar (e evitar) com esse conflitos.

Você pode usar seu próprio alias (que pode continuar sendo o “$”) desse jeito:

jQuery(function($) {
    // código usando alias próprio
});

O exemplo acima usa tanto o atalho para $(document).ready(), quanto o argumento para escrever código jQuery em failsafe usando o alias $, sem contar com o alias global. Você pode e deve, igualmente, integrar o $ quando for criar plugins:

(function($) {
    // código do plugin, usando $ quantas vezes quiser
})(jQuery);

Definir callbacks próprios

Quando estiver criando plugins para jQuery, é uma boa idéia deixar o desenvolvedor atribuir callbacks próprios como como parâmetros de funções, tornando possível personalizar ainda mais o plugin. Então, ao invés de forçar os efeitos de callback dentro do plugin, engatilhe funções de eventos e defina os efeitos livremente.

Aqui está um exemplo em que passamos a função onFade para o plugin, escrito como um simples plugin fadeIn:

/*
This plugin fades an element and triggers the onFade when completed
 
EXAMPLE USAGE:
  $('.fademe').customFade({
    fadeSpeed: 50,
    onFade: function(elem) {
      console.log(elem+' has faded!')
    }
  });
*/
 
jQuery.fn.customFade($params) {
  var $defaults = {
    fadeSpeed: 1000,
    onFade: function(element){}
  };
  var $p = $.extend($defaults, $params);
  $(this).fadeIn($p.fadeSpeed,$p.onFade($(this)));
}

Ficar atento com as diferenças entre navegadores

jQuery é bastante propenso a ser crossbrowser. Mas ainda existem falhas, especialmente com os navegadores como o Safari, que tem um trigger diferente para onLoad, e IE, evidentemente. Sempre teste em vários navegadores e preste muita atenção em quando e onde as falhas ocorrem.

Não ser excessivo e definir seu propósito

Certifique-se de que não está usando jQuery apenas porque você pode. Sempre analise suas necessidades e tenha uma ideia clara do que você quer alcançar antes mesmo de escrever a primeira linha. Faça sketches de seu código e discuta suas ideias com seus pares antes da codificação (se não estiver trabalhando sozinho, claro).

Não reinvente a roda a menos que você esteja fazendo isso para aprender e/ou se educar, analise o código de plugins de qualidade para inspirar-se e ver o que tem sido feito por bons programadores.

Bons códigos!

Como otimizar imagens para web – guia de otimização de imagens

Tárcio Zemel — Fri, 11 Dec 2009 15:34:04 +0000

Otimizar imagens para web faz com que seu site carregue mais rápido e que seus visitantes não tenham que esperar tanto pelo carregamento. Os visitantes de seu site querem imagens otimizadas e de tamanho reduzido, portanto, é importante aprender a otimizar imagens para a web a fim de servir páginas rápidas e de qualidade. Entender o básico sobre compressão e otimização de imagens e seus formatos permite escolher não somente qual a melhor maneira de reduzir o tamanho de imagens, mas também melhorar a qualidade de imagens.

Este é um artigo traduzido do original “How to Optimize Images for Web – Image Optimization Ultimate Guide“, do blog Design Live, e a tradução (com pequenas adaptações) foi feita com autorização do autor, Michael Garmahis.

Retirar o excesso de espaço em branco

Às vezes uma imagem tem espaço branco ou tem um “excesso” de cor ao redor para que o texto e outros elementos não encostem na imagem. Ao invés disso, recorte esse excesso de espaço em branco e dê o espaçamento desejado usando a propriedade CSS padding.

Não redimensionar imagens pelo browser

Não use propriedades HTML ou CSS para redimensionar suas imagens pelo browser, ao invés disso, redimensione suas imagens em seu programa de editoração de imagens preferido, especificamento exatamente a dimensão de cada imagem que será usada.

Escolher o formato de imagem certo

Para otimizar imagens para web, escolher o formato de imagem correto é fundamental. Então, saiba quando optar entre JPG, GIF e PNG.

JPG

JPG é o formato para fotos. JPG pode ter milhões de cores e ainda conseguir uma excelente taxa de compressão. É um formato “de perda”, o que significa que ter qualidade 100% não significa menor perda). Então você perde qualidade a cada edição da imagem. JPG não suporta transparência.

GIF

GIF é o formato para animações. GIF é um tipo de imagem “paleta” (também chamado “indexed”), que contém até 256 cores indexadas. GIF é um formato sem perda, o que sigfnifica que quando você modifica e salva a imagem, não há perda de qualidade. GIF suporta transparência (os pixels em uma imagem em GIF ou são totalmente transparentes ou são totalmente opacos).

PNG 8

PNG 8 é o formato para logos, ilustrações, ícones, botões, backgrounds e gráficos. PNG 8 é um formato sem perda, assim como GIF. Diferente do GIF, PNG 8 costuma gerar um arquivo de tamanho menor e tem suporte a transparência alpha variável – gerando pixels semitransparentes (recurso não suportado pelo IE6).

PNG 24

PNG 24 é usado quando você precisa de transparência alpha e mais de 256 cores. PNG24 é também a única opção quando você precisa de uma imagem de qualidade superior e o tamanho do arquivo gerado não importa. O tamanho das imagens em PNG 24 é geralmente maior que JPG e PNG8. Truecolor PNG é um formato sem perda que pode ter milhões de cores (16 bits por canal) e pode servir perfeitamente como “intermediário” entre diversas edições.

Usar “Save for Web & Devices” ao invés de “Save as…” no Photoshop

O comando “Save for Web & Devices…” no Photoshop (Alt+Shift+Ctrl+S) existe para exportar imagens otimizadas para web, com um melhor balanceamento tamanho/qualidade. É possível ter um controle refinado através de previews para experimentar diversos tamanhos de imagem e qualidade. Essa opção tenta reduzir o tamanho dos arquivos retirando informações (metadata) dispensáveis – o que pode fazer com que uma imagem tenha o dobro do tamanho necessário quando se trata de imagens para web.

Usar poucas cores para imagens indexadas e experimentar a paleta “Selective”

Se está produzindo ou otimizando imagens para ícones, botões ou outro tipo que possa ser em PNG8, tente reduzir o número de cores para 32 ou 64. Isso pode reduzir significativamente o tamanho sem alterar na qualidade da imagem.

Usar a paleta “Selective” para imagens com cores chapadas permite uma compressão de imagem melhor e mais eficiente em comparação às paletas “Perceptual” ou “Adaptive”.

Converter PNG para Grayscale se você não precisa de cores

Converta as imagens para Grayscale ou Escala de Cinza (Image >Mode > Grayscale) antes de salvá-las em PNG. Isso ajuda a economizar alguns KBs, especialmente em se tratando de imagens semitransparentes.

Experimentar PNG24 ao invés de PNG8

Às vezes imagens pequenas e alguns tipos de gradientes ficam melhores (custo/benefício) em PNG24 ao invés de PNG8. Isso acontece devido à maneira com que os algoritmos de compressão de “sem perda” trabalham e à “sobrecarga” que cores indexed acrescenta.

Usar “Posterization” para reduzir o número de cores em PNG

“Posterization” reduz a quantidade de cores, convertendo cores similares em uma só. Para usar esta técnica vá em Image >Adjustment >Posterize, no Photoshop, e experimente um valor em torno de 40.

Evitar salvar em JPG Progressivo (Progressive JPEG)

Salvando um JPG no modo “Progressive” faz com que várias “cópias” em baixa resolução da imagem sejam feitas para aparecerem rapidamente na tela, enquanto, progressivamente, a qualidade vai aumentando.

Em algumas vezes pode ser que salvar no modo Progressivo gere uma imagem em tamanho menor, mas, na maioria das vezes, será maior. Além disso, imagens salvas no modo Progressivo não são exibidas em muitos dispositivos móveis.

Reduzir o “ruído” (noise) para diminuir o tamanho da imagem

Noise (“ruído”) faz com que o algoritmo do JPG precise de mais recursos para salvar, deixando menos espaço para a informação realmente útil, ou seja, a imagem em si. Isso significa que, eliminando o noise, você não somente tem uma imagem com tamanho melhor, mas também melhorar seu aspecto visual.

Você pode usar diversos plugins do Photoshop, como Noise Ninja ou Imagenomic Noiseware ou uma maneira fácil de reduzir o ruído no Photoshop é mudar para o modo de cor Lab e, em seguida, aplicar Filter > Mediana (2-4) para os canais A e B.

Embaçar o fundo

Embaçar o fundo de uma imagem JPG ajuda o mecanismo de compressão a gerar uma imagem de tamanho menor. Para usar essa técnica, faça uma selação no objeto principal da imagem, inverta a seleção (CTRL + I), aplique uma pequena quantidade de Gaussian Blur (1 ou 2px). Agora você pode salvar sua imagem como um JPG de tamanho menor.

Embaçar a imagem quando for Salvar para Web

Devido ao fato de o algoritmo de compressão JPG ter facilidade em lidar com transições sutis de cores, acrescentar um pequeno blur (0,2 ou 0,3) quando for Salvar para Web no Phosothop pode ajudar a reduzir e otimizar o tamanho do arquivo. Diminuir ligeiramente o Contraste e Saturação também tem um bom impacto no tamanho de arquivos JPG.

Otimizar imagens com ferramentas especiais

Existem excelentes ferramentas online e utilitários para download que podem ajudá-lo a reduzir e otimizar significativamente suas imagens sem perda de qualidade. É uma boa prática usar algumas dessas ferramentas para otimizar suas imagens e obter arquivos de tamanhos menores. Atenção aos termos de uso de algumas dessas ferramentas.

Smush.it

Smush.it é uma ferramenta online que utiliza técnicas de otimização diferentes para cada formato de imagem (PNG, GIF, JPEG) para remover bytes desnecessários da imagem sem perda de qualidade. Você também pode usar Smush.it integrado com o plugin do Firefox YSlow ou através de um plugin WordPress.

punypng

punypng usa diversas técnicas de otimização de imagens para web para reduzir o tamanho dos arquivos. Os desenvolvedores do punypng afirmam que a ferramenta é atualmente mais eficiente do que o Smush.it.

PNG Monster

PNG Monster é uma GUI para compressão de PNG projetada para converter com eficiência grandes números de arquivos PNG automaticamente. PNG Monster usa uma variedade de aplicações “command-line” (PNGRewrite, PNGCrush, OptiPNG, PNGOut, AdvPNG) para comprimir com variados métodos de compressão PNG.

SuperPNG

SuperPNG é um plugin grátis do Phosothop para salvar arquivos PNG significativamente menores em relação ao salvamento nativo do Phosothop. Também inclui algumas características avançadas de PNG, como suporte a 16 -bit color, compressão variável, correção de gama e salvamento de metadata.

SuperGIF

SuperGIF é um utilitário gratuito para Windows e MAC para otimizar imagens GIF. Ele permite comprimir um arquivo GIF em até 50%! A versão gratuita comprime somente um arquivo por vez.

jStrip

jStrip é um programa gratuito que reduz e otimiza imagens e JPG sem sacrificar a qualidade das imagens. JStrip trabalha removendo informações desnecessárias do arquivo JPG sem perda de qualidade ou recompressão.

NextGEN Gallery com SexyLightBox: sua galeria de imagens mais sexy

Tárcio Zemel — Fri, 20 Nov 2009 17:38:10 +0000

É fato que o plugin NextGEN Gallery do WordPress é o melhor quando o assunto é gerenciamento de galerias de imagens. Com NextGEN Gallery é possível criar galerias facilmente, acrescentar/retirar imagens em modo batch (é possível enviar um arquivo .zip e ele “abre” as imagens numa galeria), dá pra criar álbuns, copiar/transferir imagens entre galerias, inserir marca d’água automaticamente, enfim, o NextGEN Gallery é bem conhecido na comunidade WordPress e certamente está no “Top 5″ de plugins!

Existe, também, apesar não ser tão conhecido, um script à “lightbox” muito bonito e interessante: SexyLightBox. Como é possível ver em sua página, o efeito que ele oferece é bem interessante e, de certa maneira, diferenciado dos outros lightboxes que encontramos por aí (ênfase ao fato de as imagens serem apresentadas em tamanho completo respeitando a resolução do navegador do visitante).

Aproveitando que o NextGEN Gallery oferece a possibilidade de se utilizar script de terceiros para a exibição de suas galerias e somado ao fato de que o SexyLightBox é realmente interessante… NextGEN Gallery + SexyLightBox = Galerias de Imagens Sexy!

Baixando, instalando e configurando NextGEN Gallery

O primeiro passo é baixar e instalar NextGEN Gallery no seu WordPress. Devido ao fato de eles serem de “naturezas” diferentes (o primeiro é um plugin do WordPress; o segundo é um script que pode ser usado em qualquer tipo de site), a maneira de instalar e usar cada um deles é diferente.

Para o NextGEN Gallery, devido ao fato de ser um plugin do WordPress, a instalação é aquela, mesma, que já estamos acostumados:

Baixar o NextGEN Gallery;
Descompactar em sua pasta wp-content/plugins;
Habilitar o plugin.

Depois, perceba que aparece em seus menus um novo módulo, “Gallery”, com subopções para controle do NextGen.

É possível traduzir as opções para vários idiomas, inclusive Língua Portuguesa. Baixe o pacote Portuguese / Brazilian Português [pt_BR] nas traduções oficiais e faça upload do arquivo .mo para wp-content/plugins/nextgen-gallery/lang e, automaticamente, os menus serão traduzidos.

Painel NextGen Gallery em Língua Portuguesa

Para já preparar o NextGen para trabalhar com o SexyLightBox, acesse em seu painel WordPress Galeria > Opções > Efeitos e altere as opções para:

Efeito Javascript para miniaturas: Personalizado;
Linha de código do link: rel=”sexylightbox”.

Baixando, instalando e configurando SexyLighbox

Vá até o site oficial do SexyLighbox para fazer download do SexyLightbox. Depois, é preciso subir a pasta descompactada para o servidor.

Não sei você, mas eu costumo criar uma pasta “js” dentro do meu tema para tudo ficar organizado e eu poder usar as funções de caminho relativo do WordPress tranquilamente. Então, uma estrutura que eu usaria para o caso seria wp-content/themes/MEU-TEMA/js/sexy-lightbox-2.3 (essa é a versão mais atual no dia de publicação deste artigo).

Agora é o momento de chamar o SexyLightbox para que funcione em seu tema. Há muitas maneiras diferentes de mexer com chamadas a scripts no WordPress; no caso, vou mostrar uma delas e, em artigos futuros, vou comentando sobre as outras (essa é a deixa para você assinar o feed do desenvolvimento para web).

Uma coisa importante é que o SexyLighbox não é feito para ser usado em standalone, ele deve estar associado a jQuery ou Mootools. Obviamente vamos usar jQuery para o serviço! ;-)

Então, o código com as respectivas chamadas a scripts e folhas de estilo fica assim:





<script type="text/javascript">
$(document).ready(function(){
    SexyLightbox.initialize({color:'white', imagesdir: 'template_url') ?>/js/sexy-lightbox-2.3/jQuery/sexyimages'});
});
script>

Perceba que alguns parâmetros foram passados na inicialização do script do SexyLightbox. O grande “trunfo” é usar o parâmetro imagesdir, porque na documentação está errado!

Personalizando seu SexyLighbox

Uma coisa muito boa é que há uma pasta “PSDs” no SexyLighbox para que cada um posso personalizar a aparência como quiser. Então, você pode alterar a cor de fundo, texto, alterar os elementos (setinhas, etc) e usar da forma que você quiser. Então quando você alterar a cor de fundo para o SexyLighbox ficar com a identidade visual de seu site, você vai perceber que a parte do meio da moldura ainda permanece intacta. No caso, você deve fazer um pequeno acréscimo de CSS em seu arquivo padrão (pode ser ao final):

#SLB-Contenido {
border-color:#HEXADECIMAL !important;
}

Agora você tem galerias Sexy!

Com isso, agora você galerias de imagens automatizadas e sexy! Para tirar melhor proveito disso, estude a documentação do NextGen Gallery (além dos fóruns, os tutoriais sobre NextGen de David Potter devem ajudar) e do SexyLightbox para incrementar/customizar ainda mais as galerias de imagens de seu site para que fiquem práticas, bonitas e com excelente performance.

E capriche nas imagens! ;-)

Mastering Twitter, o manual completo sobre twitter para desenvolvedores e marketeiros

Tárcio Zemel — Mon, 12 Oct 2009 16:51:25 +0000

Meses atrás resolvi entrar no twitter. Na época, sem saber exatamente o motivo (se fosse especialistas em social media, certamente já saberia…), mas com vontade de participar do twitter em função da troca de conhecimentos (que já sabia acontecer por lá). E foi só recentemente que tive a oportunidade de conhecer “Mastering Twitter – Conceitos, Estratégias e Ferramentas“, de Martha Gabriel.

Mastering Twitter traz desde as dicas mais básicas, passando por dicas de como agir no twitter (“tweetqueta”?), até ferramentas avançadas para análise de comportamento e métricas de mídia social no twitter.

Eu dediquei algumas horas para conhecer, estudar e analisar o conteúdos desse slideshow e muitas das ferramentas que nele são apresentadas. Valeu o tempo dedicado! Você, desenvolvedor/marketeiro que mexe (ou pretende) com mídias sociais – e, óbvio, com twitter -, sinceramente, deveria fazer o mesmo e desfrutar das valiosíssimas dicas de Mastering Twitter!

Twitter – Conceitos, Estratégias e Ferramentas, por Martha Gabriel

View more documents from Martha Gabriel.

Truques de configuração do WordPress

Tárcio Zemel — Thu, 24 Sep 2009 17:54:26 +0000

Existem pequenas diretivas que você pode alterar/acrescentar no arquivo wp-config para que seu WordPress tenha um nível de personalização diferenciado e você aproveite melhor o que a plataforma tem a oferecer. Leia este artigo e aprenda incríveis truques de configuração para aumentar a performance de sua instalação e ter um WordPress refinado.

Este é um artigo traduzido do original “WordPress Configuration Tricks“, do blog Digging into Wordpress. A tradução foi feita com autorização dos autores, Chris Coyier e Jeff Starr, e sofreu pequenas adaptações.

Muitas pessoas que usam WordPress sabem que o arquivo wp-config.php é o arquivo-chave para as configurações de banco de dados. É nele que você define o nome do banco de dados, nome de usuário, senha e localização. Mas o que muitos não sabem é que o wp-config.php pode ser usado para especificar uma grande variedade de outras configurações; configurações essas que permitem melhorar as funcionalidades, desempenho e segurança do seu WordPress.

As dicas a seguir abordam o que consta sobre o assunto no WordPress Codex, bem como alguns truques que provavelmente você não viu antes. Se você souber de qualquer outra configuração, comente que eu acrescento ao artigo. ;-)

Endereço do Blog e Endereço do Site

Por padrão, essas duas constantes de configuração não estão incluídas no wp-config.php, mas eles devem ser adicionados para melhorar o desempenho. Estas duas definições foram introduzidas no WordPress 2.2 e servem para substituir os respectivos valores do banco de dados sem alterá-los, efetivamente.

A adição dessas constantes reduz o número de consultas ao banco de dados e, consequentemente, melhora o desempenho do site. Essas configurações devem coincidir com as especificadas no painel do WordPress (Configurações > Geral). Segue um exemplo (não inclua a barra no final da URL):

define('WP_HOME', 'http://digwp.com');
define('WP_SITEURL', 'http://digwp.com');

Um truque legal é definir esses valores dinamicamente usando a variável global do servidor:

define('WP_HOME', 'http://' . $_SERVER['HTTP_HOST'] . '/path/to/wordpress');
define('WP_SITEURL', 'http://' . $_SERVER['HTTP_HOST'] . '/path/to/wordpress');

“Template Path” e “Stylesheet Path”

Assim como o Endereço do Blog e Endereço do Site mostrados anteriormente, você também pode aumentar o desempenho do site eliminando as consultas ao BD para o “Template Path” e “Stylesheet Path” (que são, respectivamente, o caminho para o tema e o caminho para o estilo CSS). Aqui estão os valores padrão para essas duas definições:

define('TEMPLATEPATH', get_template_directory());
define('STYLESHEETPATH', get_stylesheet_directory());

Com isso, ainda há consultas ao banco de dados, mas é possível eliminar essas duas queries e colocar o caminho absoluto:

define('TEMPLATEPATH', '/absolute/path/to/wp-content/themes/active-theme');
define('STYLESHEETPATH', '/absolute/path/to/wp-content/themes/active-theme');

Desabilitar Cache e Expiração de Cache

Essas duas opções se aplicam a versões mais antigas do WordPress que ainda estão usando o esquema antigo de cache. A primeira permite habilitar ou desabilitar o cache, enquanto a segunda permite especificar o tempo de expiração de cache.

Habilitar o cache:

define('WP_CACHE', true); // habilita o cache
define('ENABLE_CACHE', true); // habilita o cache
define('CACHE_EXPIRATION_TIME', 3600); // em segundos

Desabilitar o cache:

define('WP_CACHE', false); // desabilita o cache
define('DISABLE_CACHE', true); // desabilita o cache

Especificar Domínio de Cookie (Cookie Domain)

Existem várias razões para especificar um domínio de cookie para o seu web site. Um exemplo comum envolve impedir que cookies sejam enviados com requisições de conteúdo estático em subdomínios. Neste caso, pode-se utilizar esta constante para dizer para o WordPress enviar cookies apenas para o seu domínio não-estático. Este poderia ser um ganho significativo de performance. Aqui estão alguns exemplos de definição de cookie domain:

define('COOKIE_DOMAIN', '.digwp.com'); // não omitir o '.'
define('COOKIEPATH', preg_replace('|https?://[^/]+|i', '', get_option('home').'/'));
define('SITECOOKIEPATH', preg_replace('|https?://[^/]+|i', '', get_option('siteurl').'/'));
define('PLUGINS_COOKIE_PATH', preg_replace('|https?://[^/]+|i', '', WP_PLUGIN_URL));
define('ADMIN_COOKIE_PATH', SITECOOKIEPATH.'wp-admin');

Substituir Permissões de Arquivo

Se as permissões do seu servidor são muito restritivas, inserir essas definições no seu arquivo de configuração do WordPress pode ajudar a resolver alguns problemas. Lembrando que não precisa colcoar aspas nos valores.

define('FS_CHMOD_FILE', 0755);
define('FS_CHMOD_DIR', 0755);

FTP/SSH

Essas constantes são para ajudar usuários a localizar e utilizar conexões FTP/SSH. Exemplos:

define('FS_METHOD', 'ftpext'); // força o método de sistema de arquivos : "direct", "ssh", "ftpext", or "ftpsockets"
define('FTP_BASE', '/path/to/wordpress/'); // caminho absoluto para a pasta raiz (de instalação)
define('FTP_CONTENT_DIR', '/path/to/wordpress/wp-content/'); // caminho absoluto para a pasta "wp-content"
define('FTP_PLUGIN_DIR ', '/path/to/wordpress/wp-content/plugins/'); // caminho absoluto para a pasta "wp-plugins"
define('FTP_PUBKEY', '/home/username/.ssh/id_rsa.pub'); // caminho absoluto para a pasta sua chave-pública SSH
define('FTP_PRIVKEY', '/home/username/.ssh/id_rsa'); // caminho absoluto para a pasta sua chave-privada SSH
define('FTP_USER', 'username'); // seu usuário de FTP ou SSH
define('FTP_PASS', 'password'); // senha do usuário especificado em FTP_USER
define('FTP_HOST', 'ftp.domain.tld:21'); // hostname (com especificação de porta) para o servidor SSH/FTP

Alterar a localização de “wp-content”

Desde a versão 2.6 do WordPress é possível alterar o local padrão da pasta wp-content. Há boas razões para fazer isso, incluindo o reforço da segurança das instalações e facilitação de atualizações via FTP. Aqui estão alguns exemplos:

// caminho completo para o diretório atual (sem a barra final)
define('WP_CONTENT_DIR', $_SERVER['DOCUMENT_ROOT'] . '/path/wp-content'); 
 
// URI completa para o diretório atual (sem a barra final)
define('WP_CONTENT_URL', 'http://domain.tld/path/wp-content');

Você também pode especificar um caminho personalizado para o wp-content. Isso pode ajudar com problemas de compatibilidade com certos plugins.

// caminho completo para o diretório atual (sem a barra final)
define('WP_PLUGIN_DIR', $_SERVER['DOCUMENT_ROOT'] . '/path/wp-content/plugins'); 
 
// URI completa para o diretório atual (sem a barra final)
define('WP_PLUGIN_URL', 'http://domain.tld/path/wp-content/plugins');

Revisões de Artigos (“Post Revisions”)

Já há algum tempo o WordPress fornecem um sistema de versões que permite aos utilizadores guardar versões diferentes de seus posts e até reverter para versões salvas anteriormente se necessário. Aqui estão algumas das definições de configurações que podem ser úteis.

Definir o número de versões salvas:

define('WP_POST_REVISIONS', 3);

Desabilitar a revisão de posts (se não for usar o recurso, utilize essa diretiva para poupar espaço no BD):

define('WP_POST_REVISIONS', false);

Tempo de Salvar Automaticamente (“Autosave”)

Assim como o controle de versões, o autosave é um recurso muito útil existente. Por padrão, o WordPress salva seu trabalho a cada 60 segundos, mas você pode modificar esta definição para o tempo que quiser. Cuidado com o que vai colocar para não “estressar” seu servidor!

define('AUTOSAVE_INTERVAL', 160); // em segundos

Debugging

Desde a versão 2.3.1 os usuários tem a opção de mostrar alguns erros e avisos para ajudar com a depuração do site. Desde a versão 2.5 do WordPress é possível elevar o nível de informação para E_ALL para ativar avisos para funções obsoletas. Por padrão (ou seja, se nenhuma definição é especificado no wp-config.php) o relatório de erros está desativado.

define('WP_DEBUG', true); // habilitar debugging mode
define('WP_DEBUG', false); // desabilitar debugging mode (padrão)

Relatório de Erros

Aqui está uma maneira fácil de habilitar um relatório básico de erros no WordPress. Crie um arquivo chamado php_error.log em uma pasta de sua escolhe e coloque permissão de escrita no arquivo (leia mais sobre permissões de arquivos). Em seguida, edite o caminho na terceira linha do código a seguir e coloque no seu “wp-config.php”:

@ini_set('log_errors','On');
@ini_set('display_errors','Off');
@ini_set('error_log','/home/path/domain/logs/php_error.log'); // complemento: http://br.php.net/getcwd

Aumentar memória do PHP

Se você estiver recebendo mensagens de erro como “Tamanho de memória permitido de X bytes esgotado”, esta dica pode ajudar a resolver o problema.

Desde o WordPress versão 2.5, a constante WP_MEMORY_LIMIT permite que você especifique a quantidade máxima de memória que pode ser usada pelo PHP. Por padrão, o WordPress irá automaticamente tentar alocar 32 MB – então você só vai precisar isso se quiser valores superiores a 32MB. Observe que alguns planos de hospedagem desativam sua capacidade de aumentar a memória do PHP; se for seu caso, você precisa pedir que eles aumente a memória pra você. Aqui estão alguns exemplos:

define('WP_MEMORY_LIMIT', '64M');
define('WP_MEMORY_LIMIT', '96M');
define('WP_MEMORY_LIMIT', '128M');

Salvar e exibir Queries do Banco de Dados para Análise

Esta técnica é perfeita para guardar as consultas de banco de dados e exibir as informações para análise posterior. O processo armazena cada consulta, sua função associada e seu tempo total de execução. Esta informação é guardada como um array e pode ser exibida em qualquer página do tema. Para fazer isso, primeiro adicione a seguinte diretiva no seu wp-config.php:

define('SAVEQUERIES', true);

Em seguida, no rodapé do tema ativo, coloque o seguinte:

if (current_user_can('level_10')) // se for administrador
{
    global $wpdb;
    print_r($wpdb->queries);
}

Controle de Acesso ao Proxy

Desde o WordPress 2.8 o arquivo de configuração pode ser usado para definir constantes envolvidas com o bloqueio, filtragem e permição de acesso a máquinas específicas de um servidor proxy. Por exemplo, se você hospedar seu site WordPress em uma intranet, você pode impedir o acesso a todos os hosts externos e só permitir visitas do localhost (usando a primeira definição abaixo).

Você também pode permitir o acesso de máquinas específicas com uma lista separada por vírgulas, uma verdadeira “lista branca” (como demonstrado na definição do terceiro abaixo). Necessariamente deve permitir o acesso de api.wordpress.org para garantir as funcionalidades de arquivos importantes e plugins.

define('WP_HTTP_BLOCK_EXTERNAL', true);  // bloqueia requisições externas
define('WP_HTTP_BLOCK_EXTERNAL', false); // permite requisições externas
define('WP_ACCESSIBLE_HOSTS', 'api.wordpress.org'); // "lista branca" de hosts

Estatísticas sobre comportamento nas mídias sociais

Tárcio Zemel — Tue, 04 Aug 2009 17:17:31 +0000

Recentemente foi liberado um relatório da Universal McCann (UM) sobre o comportamento das pessoas nas mídias sociais, oficialmente publicado como “Power to the People – Social Media Tracker Wave 4″. Sua produção se baseou em pesquisas feitas durante novembro de 2008 e março de 2009 com 22.729 pessoas (que usam internet ativamente) em 38 países.

O relatório revelou mudanças dramáticas na maneira em que as pessoas (a palavra usada oficialmente foi “consumidores”…) estão usando a internet para criar e compartilhar seus pensamentos, fotos e vídeos. O Wave 4 da UM tratou sobre os fatos por detrás do hype das mídias sociais e revela que a social media rapidamente se tornará a plataforma dominante para criar e partilhar conteúdos.

Mídias Sociais ao decorrer do tempo

De 2006 para 2009 houve aumento crescente de praticamente todas as atividades envolvendo mídias sociais. As 5 atividades que mais cresceram foram:

Assistir vídeos pela internet;
Escutar músicas/rádios online ao vivo;
Criar perfil em alguma rede social;
Criar blogs, ler e comentar em outros blogs;
Fazer upload de fotos pessoais em algum site de compartilhamento de fotos.

Usuários ativos

Atualmente existem, aproximadamente, 625 milhões de usuários de internet. O “Top 5″ é:

China;
Estados Unidos;
Alemanha;
Brasil;
Japão.

Outros países com expressivo volume de pessoas que usam internet são Corea, Reino Unido, França, Índia e Malásia.

Compartilhamento de vídeo

Como foi citado, uma das atividades que mais cresce é o compartilhamento de vídeos pessoais em “sites especializados”. Sabe qual a porcentagem dos 5 países com mais pessoas que fazem upload de vídeos?

Corea;
Filipinas;
China;
Índia;
México.

O Brasil fica em 6º lugar, com uma porcentagem de 50,06% (uma queda de mais de 18% em relação à última pesquisa feita).

A porcentagem dos 5 países que mais assistem vídeos online:

Filipinas;
China;
Espanha;
Estados Unidos;
Corea.

Neste “quesito” o Brasil não tem porcetagem expressiva…

Redes Sociais

Sabe quais os países que tem maior porcentagem de pessoas que criaram um perfil em alguma rede social?

Rússia;
Reino Unido;
Espanha e Estados Unidos;
França;
Alemanha.

“Criar é fácil; manter é que é difícil”! Os 5 países com mais pessoa que manuteniram seu perfil em redes sociais são:

China;
Estados Unidos;
Brasil;
Reino Unido;
Corea.

Perguntas e Respostas

Foram feitas algumas perguntas aos que participaram da pesquisa para quantificar determinados comportamentos. Confira algumas estatísticas baseadas nas respostas dos participantes.

“Ao escrever em seu blog, quais os principais tópicos abordados?”

Logicamente, a pergunta foi feita a pessoas que tem blog. O resultado foi:

Fotos – 70,48%;
Recomendação de sites – 43,3%;
Quais músicas tem mais escutado e mais frequentemente em sites especializados – 34,3%;
Videos – 31,9%;
Opinião sobre produtos e marcas – 31,7%;

“O que você faz com o seu perfil de rede social?”

Para aqueles que usam alguma Rede Social, as respostas a essa pergunta resultaram em:

Mensagens para amigos – 81,5%;
Upload de fotos – 76,3%;
Encontrar velhos amigos – 74,3%;
Fazer novos amigos – 56,4%;
Entrar em algum grupo/comunidade – 47,9%.

Estatísticas brasileiras

No Wave 4 é possível encontrar estatísticas direcionadas aos principais países que aparecem na pesquisa. Falando especificamente do Brasil, temos alguns dados interessantes:

Leitores de blogs: 62%;
Escritores de blogs: 51%;
Criaram perfil em alguma rede social: 69%;
Manuteniram perfil em rede social: 72%;
Visitaram página de amigo(s) em rede social: 84%;
Assistiram vídeos online: 93%.

Lembrando que estas porcentagens “apareceram” na pesquisa feita e que o resultado é dado com base nas pessoas entrevistadas. Não é para confundir e tomar isso como uma “realidade brasileira absoluta” – com o agravante que a pesquisa nem foi com o foco nacional.

O que fazer com todos esses números?

Na verdade, esse “apanhado geral” que fiz é somente para mostrar algumas informações que julguei interessantes. É altamente recomendável que você leia o relatório oficial: “Wave 4 – Power to the people“. Além de mais estatísticas interessantes, no relatório são apresentados comentários sobre vários dos números apresentados (leia-se: o que significam na prática).

A partir dessa leitura e dedicando um tempo para extrair as informações que são mais importantes para você, certamente é possível encontrar informações preciosas para definir sua estratégia de atuação para algum produto, serviço, alterar sua maneira de “aparecer” nas mídias sociais, modificar seu estilo de blogar, dentre muitas outras coisas.

E então? Você vai mudar algo que faz depois de ter visto estas estatísticas? O quê? Compartilhe com a gente! ;-)

Jetpack: explorando novas maneiras de ampliar e personalizar a web

Tárcio Zemel — Thu, 21 May 2009 18:48:37 +0000

Recentemente saiu no blog oficial da Mozilla no Brasil o anúncio do Jetpack, um projeto da Mozilla Labs para explorar novas formas de estender e personalizar a web! Há tempos quem mexe com desenvolvimento web sabe (e, recentemente, até o “usuário comum”) que os plugins para Firefox contribuíram e contribuem enormemente para o sucesso do Firefox. A Mozilla, obviamente, também sabe disso e, através do projeto Jetpack, promete estender e melhorar, e muito, o modo como os plugins são feitos e usados.

Atualmente existem mais de 12000 plugins para Firefox, feitos por mais de 8000 programadores. São extensões para o navegador que permitem de um tudo, desde funções para melhorar a usabilidade do Firefox, passando por players de música e ripadores de vídeo, até ferramentas direcionadas a nichos mais específicos, como, por exemplo, os indispensáveis Web Developer e Firebug. Mas, como consta no próprio comunicado oficial da Mozilla sobre o Jetpack, o atual sistema de plugins está apenas o começo!

Jetpack e a nova geração de plugins

Jetpack é uma plataforma para desenvolvimento de plugins para Firefox que, paradoxalmente, é uma extensão para Firefox e precisa ser instalada nos moldes “tradicionais”. Depois de instalada, o verdadeiro poder e potencialidade da nova geração de plugins está em suas mãos! Nas palavras da própria equipe Mozilla:

Especificamente, o Jetpack será uma exploração do uso das tecnologias da Web para melhorar o navegador (ex: HTML, CSS e Javascript), permitindo que qualquer um que saiba como fazer um site possa ajudar a tornar a Web um lugar melhor para trabalhar, se comunicar e se divertir.

Com Jetpack é possível desenvolver plugins sabendo somente (X)HTML, CSS e Javascript! É isso, mesmo! Utilizando somente estas tão conhecidas e usadas linguagens de desenvolvedores web, é possível criar, estender, personalizar, complementar e incrementar funções e funcionalidades!

Quer mais? Utilize javascript com o poder de jQuery! É possível escrever javascript utilizando as potencialidades do melhor e mais simples framework javascript da atualidade (e outros, também) para escrever seus plugins com o Jetpack da Mozilla! Quer ainda mais? Instale e use instantaneamente plugins feitos com JetPack sem reiniciar o Firefox!

Algumas das características do Jetpack:

“Web-based”
- HTML, Javascript e CSS são as únicas ferramentas necessárias;
- Tem o poder de AJAX e capacidades multimídia, incluindo , e ;
- Acessível através de um URL, tal como o resto da web;
- Pode ser debugado direto no navegador, sem necessidade de reiniciar, usando ferramentas como Firebug.
Robusto
- Trabalha com APIs para que você não tenha que atualizar e revalidar o seu código para cada nova versão do Firefox;
- Leve, mas com poderosos recursos, permitindo aplicações simples e complexas que aumentam a experiência da web, como os add-ons do Firefox fazem atualmente.
Seguro
- Oferece acesso apenas aos privilégios necessários, com questões de segurança sempre apresentados em termos sociais, e não termos técnicos;
- Código curto e fácil de rever, que garante que os potenciais problemas de segurança não sejam graves e tempos de revisão curtos.
Extensível
- Sua arquitetura permite a fácil inclusão de revisões (versionamento) e ferramentas de terceiros (por exemplo, jQuery, Dojo, etc) e bibliotecas API (por exemplo, Twitter, Delicious, Google Maps, etc)

Exemplo de funcionamento do Jetpack

Eu poderia realizar alguns exemplos aqui, para demonstrar toda a facilidade de uso do Jetpack. Entretanto, creio que vai ser mais “didático” eu mostrar um dos vídeos oficiais de exemplo.

Como começar com o Jetpack

Para dar os primeiros passos no Jetpack, além do básico, que é saber (X)HTML, CSS e javascript, você deve:

Acessar o site oficial e estudar os códigos dos exemplos de uso no site do Jetpack e na página com os primeiros plugins já disponíveis do Jetpack;
Passar pelo Tutorial Oficial do Jetpack (com o Jetpack instalado no navegador é possível alterar e testar os exemplos em tempo real);
Assinar o feed do desenvolvimento para web, que em breve vai trazer vários scripts para Jetpack! ;-)

Fique ligado no Jetpack

Esta é somente a primeira versão do Jetpack e, como podemos esperar da Mozilla, muita coisa boa ainda está por vir! O projeto tem tudo para dar certo e, segundo as expectativas, essa é realmente uma grande iniciativa em prol de uma web mais ampla, personalíssima e fácil de usar!

Acompanhe as novidades sobre o Jetpack:

Grupo de Discussão do Jetpack (em inglês);
Código-fonte do Jetpack;
Canal #jetpack em irc.mozilla.org, no IRC;
E, quando já estiver usando e abusando do Jetpack, reportar um bug.

Pronto para a revolução? :-D

Sobre parcerias de trabalhos em desenvolvimento web

Tárcio Zemel — Tue, 12 May 2009 14:44:00 +0000

No desenvolvimento para web o que não faltam são oportunidades para participar de projetos, quer seja individualmente, quer seja através de parcerias. Falando especificamente de trabalhos freelancers,é muito importante que se tenha uma boa rede de relacionamentos (o tão falado network) para não “deixar esfriar” a atuação no mercado “freela” de desenvolvimento web.

Entretanto – e infelizmente -, nem sempre as parcerias estabelecidas para o desenvolvimento de um projeto dão os frutos esperados, gerando desagradáveis situações entre as partes – muitas vezes causadas unilateralmente – que, de uma forma ou de outra, dão por consequência o descrédito e a não confiança na parte que não honrou com os compromissos previamente estabelecidos – pode-se falar, inclusive, em cancelamento da parceria no meio do projeto, o que, muitas vezes, culmina em cancelamento deste.

A escolha dos parceiros

Muito se diz e se escreve sobre ter uma excelente rede de relacionamentos. O que não se diz muito é como estimar que “tal” ou “qual” parceria/projeto dará certo; como saber qual pessoa dá mais indícios de que honrará com suas tarefas e demais acordos feitos.

Acredito eu que a resposta para estas perguntas pertence mais à seara da psicologia! Saber essas coisas, a meu ver, é impossível! Para quem desconhece o comportamento humano (eu, por exemplo), saber, de antemão, sem ter realizado algo com a pessoa anteriormente e/ou sem ter recebido uma indicação pessoal, é tarefa impossível! Se o “geral” já é complicado, imagine cada caso, individualmente; cada pessoa, com suas peculiaridades e jeito próprio…

Existem diversas maneiras de se escolher/trabalhar com parceiros de desenvolvimento. Cito algumas:

Indicação

Quando alguém que você já conhece/trabalha/trabalhou indica alguém para uma , um pouco da credibilidade e confiança que você nutre por esta pessoa será “transferido” para a indicação que esta fez – obviamente estou falando de pessoas sérias e compromissadas. É bem mais tranquilo conhecer e realizar projetos com uma pessoa que foi indicada por alguém que você já conhece. A própria indicação, em si, denota que quem indicou já realizou trabalhos com a pessoa e, por ter considerada a experiência positiva, fez a indicação.

Antigo colega de trabalho

É muito comum a situação de se trabalhar em uma agência, por exemplo, e, depois de ter saído daquele emprego, manter contato com alguma(s) pessoa(s) que permaneceu(ram). Neste caso, o fato de você já conhecer o estilo da pessoa, seu modus operandi, a “dinâmica”, o time, personalidade, dentre outras características – que você sabe por já ter trabalhado com a pessoa -, contribuem enormemente para que, no caso de um freela que necessita das capacidade do antigo colega de trabalho, você saber a quem recorrer.

Colega de faculdade

Outra situação comum é a pessoa ainda na faculdade conseguir freelas para fazer. Dependendo do projeto, a participação de mais pessoas é fundamental. Então, nada melhor que selecionar, dentre os colegas que levam os estudos a sério, qual(is) tem o melhor perfil para o projeto. Outra situação é, mesmo depois que a faculdade terminar, você ainda manter contato com alguns ex-colegas e, de forma semelhante, recorrer aos respectivos e-mails caso apareça algum job que necessite de pessoal extra.

Sites de projetos

Muito comuns são os sites que tem por objetivo o cadastro/divulgação de pessoas e jobs – como o excelente LimeExchange. Após realizar alguns projetos pelo site, você já começa a ficar conhecido e o volume de serviço pode aumentar. Principalmente nessa situação, onde você não conhece as pessoas com quem vai trabalhar, é preciso cuidado redobrado, preferencialmente com algum tipo de garantia que os seus serviços serão recompensados da maneira adequada e dentro do prazo combinado.

Blogs

Ter um blog é uma excelente oportunidade de, dentre outras vantagens, conseguir participar de projetos. A maioria dos meus freelas, por exemplo, foram frutos de contatos realizados pelo formulário de contato do blog por pessoas com dúvidas ou explicitamente querendo serviços em desenvolvimento web. Algumas estão comigo até hoje, seja para manutenir o que foi feito; seja para o desenvolvimento de novos projetos.

Social Medias / Redes Sociais / Sites de relacionamentos

Social medias, como diHITT e Rec6, apresentam excelentes oportunidades de conhecer pessoas e potenciais futuros colegas de freelancers – há casos de equipes inteiras terem se formado através de contatos iniciais em social medias. Então, se você tem um blog – pode ser sobre qualquer coisa, mas, no caso, estou falando sobre desenvolvimento web -, não deixe de enviar seus bons artigos para social medias.

Ter um perfil nos principais sites de relacionamentos também pode ser uma boa, já que a maioria permite que você divulgue endereços de seu site/blog, disponibilize feeds e, principalmente, que você se afilie a diversas comunidades relacionadas a sua área de atuação e faça diversos contatos relevantes, aumentando seu networking potencial.

Fóruns de discussão

Outra situação bem corriqueira é o anúncio de procura de parcerias em fóruns de discussão. Chega a ser óbvio o fato de, num ambiente em que se discute principalmente sobre um assunto, aparecerem oportunidades justamente sobre esse determinado assunto. No caso do desenvolvimento web, o que não faltam são pessoas procurando parceiros para projetos pagos, realização de boas ideias, reuniões de brainstormings, reposição de vagas em agências, etc.

Situações desagradáveis acontecem…

Mesmo tomando todos os cuidados, procurando saber coisas a respeito de seu(s) parceiro(s) na web (você faz isso, certo?), procurando pessoas que já trabalharam com “fulano”, enfim, tomando as devidas precauções para que tudo dê certo, esteja ciente: situações desagradáveis acontecem!

Não é nada pessoal, nada a ver especificamente com você; são fatos da vida! Aconteceram, acontecem e sempre acontecerão situações que fogem ao nosso controle, causadas por pessoas que não se importam muito com seus pares… É assim, mesmo, não adianta espernear nem chamar a mamãe!

Relato de uma experiência pessoal

Faço regularmente trabalhos de desenvolvimento web para uma pessoa – que também é da área – desde o início do ano, mais ou menos. A pessoa sempre pagou em dia, eu sempre entreguei os trabalhos em dia, tudo normal. Mas… Chegou o momento em que somente eu cumpri minhas obrigações.

Eu entreguei um material de qualidade (o trabalho era de desenvolvimento de temas WordPress), tudo dentro dos prazos, mas o pagamento não foi feito dentro do acordado… Pelo fato de já ter realizado diversos trabalhos com a pessoa e tudo correr bem, descuidei-me o suficiente para entregar os trabalhos antes de receber a totalidade do pagamento – coisa básica sobre “freelanceamento” quando não há contrato para regulamentar os serviços. Conclusão: trabalhei de graça…!

Conclusão sobre parcerias de trabalhos de desenvolvimento web

Não caia na mesma burrada no mesmo equívoco que eu, querido leitor! Só entregue os materiais a seu parceiro/cliente depois do pagamento total do que foi combinado! E outra: sempre que possível, faça contrato! Alguns usam o argumento de que um contrato tira a agilidade do projeto; fique atento a estes! Se a pessoa não quer fazer contrato, esteja certo de que alguma coisa tem – aprendi essas e outras lendo o Guia do Ilustrador que, apesar do nome, tem dicas para qualquer profissional freelancer.

E você, já passou por situações desagradáveis com parcerias? Gostaria de compartilhar alguma história triste? Comente!

10 diretrizes para a construção da credibilidade de um web site

Tárcio Zemel — Mon, 04 May 2009 17:00:23 +0000

Muitos desenvolvedores web desconhecem, mas existe um projeto destinado a pesquisas, estudos, publicações e recursos sobre o tema “Credibilidade na Web“: é o The Web Credibility Project (traduzido livremente como: Projeto de Credibilidade na Web), da Universidade Stanford, dos Estados Unidos.

No Projeto de Credibilidade na Web são realizadas ações como:

Efetuar pesquisas quantitativas sobre Credibilidade na Web;
Recolher informações sobre Credibilidade na Web (filtrando os conteúdos relevantes ao tema);
Facilitar a pesquisa e discussão sobre Credibilidade na Web;
Colaborar com grupos de acadêmicos e industriais de pesquisa;
Dentre outros.

Para quem se interessa por Usabilidade, Arquitetura da Informação, Design de Interfaces e assuntos correlatos, o The Web Credibility Project é de grande valia, com certeza que é! E um dos documentos mais importantes é “How can you boost your web site’s credibility?“, ou seja, “Como você pode aumentar a credibilidade do seu site?“. Este é um documento com 10 diretrizes para a construção da credibilidade de um web site; documento este baseado em 3 anos de estudo com a participação de mais de 4500 pessoas.

São essas diretrizes que apresento agora – com algumas pequenas adaptações.

Faça com que seja fácil checar a veracidade das informações em seu site

Você pode construir a credibilidade do site fornecendo apoio de terceiros (citações, referências, fonte de materiais) para informações que apresentar, especialmente se você fizer links para essas “provas”. Mesmo se as pessoas não seguirem esses links, você demonstrou que seu material é de confiança.

Mostre que há uma verdadeira organização por trás de seu site

Mostrando que seu site é de uma legítima organização irá aumentar a credibilidade do site. A maneira mais fácil de fazer isso é listar um endereço físico. Outras características também podem ajudar, como mostrar uma foto de seu escritório ou listando a filiação com a Câmara do Comércio.

Destaque a experiência da sua organização e no conteúdo e serviços que você fornece

Você tem especialistas em sua equipe? Seus colaboradores ou prestadores de serviçoss são autoridades? Certifique-se de dar as suas credenciais. Você está associada uma respeitada organização? Deixe isso bem claro. Inversamente, não faça link para sites que não são críveis. Seu site se torna menos crível pela associação.

Mostre que pessoas honestas e confiáveis estão por trás de seu site

A primeira parte desta diretriz refere-se à mostrar que existem pessoas reais por trás do site e na organização. Depois, encontrar uma maneira de transmitir a sua confiança através de imagens ou texto. Por exemplo, alguns sites apresentam biografias/currículos de trabalhadores que contam sobre suas família ou hobbies.

Faça com que seja fácil entrar em contato com você

Uma maneira simples de aumentar a credibilidade do seu site é deixar claras suas informações de contato: o número de telefone, endereço físico, endereço de email, etc.

Faça um design profissional para seu site (ou que seja apropriado para sua finalidade)

As pessoas avaliam rapidamente o design de um site de forma isolada (“à parte”). Ao desenvolver seu site, preste atenção ao layout, tipografia, imagens, consistência das coisas e muito mais. Evidentemente, nem todos os sites ganham credibilidade por parecer com IBM.com. A concepção visual do site deve coincidir com a finalidade.

Faça seu site fácil de usar – e útil (eficiente)

Essa é uma “dupla diretriz”. A pesquisa do The Web Credibility Project mostra que sites ganham pontos em credibilidade por serem ambos: fáceis de usar e úteis (a palavra “eficientes” também cabe). Alguns desenvolvedores (ou donos; ou mantenedores; ou diretores; etc) se esquecem dos usuários (pessoas) e preferem cuidar dos egos de suas próprias empresas ou tentam mostrar as deslumbrantes coisas que podem fazer usando a tecnologia web.

Atualize o conteúdo de seu site frequentemente (pelo menos mostre que foi revisto recentemente)

Pessoas atribuem maior credibilidade a sites que mostram que foram recentemente atualizados ou revistos.

Use com moderação qualquer conteúdo promocional (por exemplo, anúncios e ofertas)

Se possível, evite que seu site tenha anúncios. Se você tiver que colocar anúncios, diferencie claramente o conteúdo dos anúncios do seu. Evite anúncios pop-up, a menos que você não se import em irritar seus usuários e perder credibilidade. Tal como o estilo de escrita, tente ser claro, direto e sincero.

Evite erros de todos os tipos, não importando o quão pequenos eles pareçam

Erros de ortografia (e, principalmente, os de semântica) e links quebrados ferem a credibilidade de um site mais do que a maioria das pessoas imagina. Também é importante manter o seu site funcionando, garantindo que fique online e rodando.

8 características de User Interfaces (UI) de sucesso

Tárcio Zemel — Mon, 27 Apr 2009 15:00:49 +0000

Há bastantes informações na web sobre várias técnicas de design de interfaces e padrões que você pode usar quando elabora suas interfaces e web sites, soluções para problemas comuns e recomendações gerais sobre usabilidade. Seguir as dicas dos especialistas certamente levará você a desenvolver boas user interfaces (UI) – ou interfaces com o usuário (IU) – mas o que, exatamente, é uma boa interface? Quais são as características de uma boa user interface?

Aqui estão 8 características que uma boa UI precisa ser:

Clara;
Concisa;
Familiar;
Responsiva;
Consistente;
Atrativa;
Eficiente;
Capaz de “Desfazer”

Este é um artigo traduzido do original “8 Characteristics Of Successful User Interfaces“, do blog Usability Post, e a tradução foi feita com autorização do autor, Dmitry Fadeyev, e sofreu pequenas adaptações.

Clara

Clareza é o elemento mais importante para uma interface com o usuário. Na verdade, o propósito maior de uma user interface é permitir que as pessoas interajam com o sistema, comunicando significado e função. Se as pessoas não descobrirem como sua aplicação funciona ou onde ir em seu web site, elas ficarão confusas e frustradas.

O que isso faz? Passe o mouse sobre botões em WordPress e vai uma dica pop-up explicando as suas funções.

Concisa

Clareza em uma user interface é ótimo, entretanto você deve ter cuidado para não cair na armadilha do “excesso de clareza”. É fácil acrescentar definições e explicações, mas cada vez que você faz isso você “incha” o sistema; sua interface cresce. Incremente sua interface com muitas explicações e os usuários terão de gastar muito tempo para ler tudo.

Mantenhas as coisas claras, mas, também, mantenha as coisas concisas. Quando você conseguir explicar uma característica em uma sentença, ao invés de três, faça isso! Quando conseguir rotular um item com uma palavra, ao invés de duas, faça isso! Economize o valioso tempo de seus usuários mantendo as coisas concisas.

Manter as coisas claras e concisas ao mesmo tempo não é fácil; leva tempo e esforço para conseguir, mas as recompensas são grandes.

O controle de volume no OS X usa pequenos ícones para mostrar cada lado da escala de baixo até alto.

Familiar

Muitos designers empenham-se para deixar suas interfaces intuitivas. Mas o que “intuitivo” realmente significa? Significa algo que, natural e instintivamente, pode ser entendido e compreendido. Mas como você pode fazer algo intuitivo? Você faz isso o tornando familiar.

“Familiar” é somente isso: algo que se aparece com alguma outra coisa que você já encontrou antes. Quando você estiver familiarizado com algo, você sabe como esse “algo” se comporta; você sabe o que esperar. Identifique as coisas que são familiares para os usuários e integre em sua user interface.

Interface com abas do GoPlan. Tabs são familiares porque imitam guias de pastas. Você “descobre” que, ao clicar sobre uma aba, você vai navegar para essa seção; e que o restante dos separadores permanecem lá para mais navegação.

Responsiva

“Responsivo” significa duas coisas. Primeiro de tudo, significa respostas rápidas. A interface, se não o software que está por trás, deve trabalhar rápido. Esperar as coisas carregarem e usar interfaces pesadas e lentas é frustrante. Vendo as coisas carregarem depressa ou, pelo menos, uma interface que carrega rapidamente (mesmo se o conteúdo ainda está para aparecer) melhora a experiência do usuário.

“Responsivo” também significa a interface prover algum tipo de feedback. A interface deve comunicar ao usuário e informar o que está acontecendo. Você apertou aquele botão corretamente? Como você sabe? O botão deve ter um estado “pressionado” para dar esse feedback. Talvez o texto pudesse mudar para “Carregando…” e o botão ficar desabilitado. Será que o programa “agarrou” ou está carregando? Coloque um imagem de “Carregando” ou exiba uma barra de carregamento para manter o usuário informado.

Ao invés de carregar a página gradualmente, o Gmail mostra uma barra de progresso quando você faz login. Isto permite à toda página ser exibida instantaneamente quando tudo estiver pronto.

Consistente

Há um artigo sobre a importância do contexto (“Context Over Consistency”) e como isso deve orientar as decisões sobre o design. A adaptação a um determinado contexto é inteligente, porém existe ainda um nível de coerência que uma interface deve manter ao longo do processo.

Interfaces consistentes permitem que os utilizadores desenvolvam hábitos de uso – eles aprendem sobre os diferentes botões, abas, ícones e outros elementos da interface e os reconhecem e percebem o que eles fazem em diferentes contextos. Os utilizadores também aprendem como certas coisas funcionam e serão capazes de trabalhar a forma de operar novas funcionalidades mais rápido, com base em suas experiências anteriores.

A interface do usuário do Microsoft Office é consistente por uma razão.

Atrativa

Este pode ser um pouco controverso, mas uma boa interface deve ser atrativa. Atrativa em um sentido que torna o uso dessa interface agradável. Sim, você pode fazer a sua interface simples, fácil de usar, eficiente e ágil, e vai fazer o seu trabalho bem – mas se você pode ir para a etapa extra e torná-la mais atrativa, então você vai fazer a experiência de utilização dessa interface verdadeiramente gratificante. Quando o software é agradável de usar, os seus clientes ou funcionários não vão simplesmente usá-lo, eles ficarão ansiosos para usá-lo!

Existem, naturalmente, muitos tipos diferentes de software e web sites, todos produzidos para diferentes mercados e públicos. O que parece “bom” para qualquer audiência, em particular, varia. Isso significa que você deve projetar/desenvolver a aparência de sua interface para o seu público. Além disso, a estética deve ser utilizado com moderação e reforçar a função. Acrescentar um nível de “sofisticação” à interface é diferente de abarrotá-la com supérfluos.

Google é conhecido por suas interfaces minimalista que se concentram em função em detrimento da forma, mas, como pode ser visto no Chrome, eles também se importam com elementos como botões e ícones, como fica evidente pelos detalhes de degradê e “ajustes finos”, em geral.

Eficiente

Uma user interface é o veículo que faz você chegar aos lugares. Esses “lugares” são as diferentes funções de um software ou web site. Uma boa interface deve permitir desempenhar essas funções mais rapidamente e com menos esforço. Agora, “eficiente” soa como um atributo bastante vago – se você combinar todas as outras características de user interfaces de sucesso dessa lista, certamente que a interface vai ser eficiente? Quase, mas não é bem assim.

O que você realmente precisamos fazer para tornar uma interface eficiente é descobrir exatamente o que o usuário está tentando alcançar e, depois, deixá-lo fazer exatamente isso sem maiores complicações. Você tem que identificar o modo como a sua aplicação deve “trabalhar” – quais funcionalidades precisam existir, quais os objetivos que você está tentando alcançar? Implemente uma interface que permita que as pessoas facilmente consigam o que querem ao invés de simplesmente prover acesso uma lista de características/funções.

Apple identificou as três principais coisas que as pessoas querem fazer com fotos em seu iPhone e forneceu botões para realizar cada uma delas no Controle de Fotos.

Capaz de “Desfazer”

Ninguém é perfeito, e as pessoas estão sujeitas a cometer erros enquanto usam seu software ou web site. O quão bem você lida com esses erros é um importante indicador sobre a qualidade de seu software. Não “castigue” o usuário – construa uma interface que tenha a capacidade de desfazer os erros que possam surgir, isso é, que tenha a função “Desfazer”.

A função “Desfazer” numa interface pode salvar seus usuários de erros graves. Por exemplo, se alguém deleta uma informação importante, o quão fácil é para reaver essa informação ou desfazer a ação de deletar? Quando alguém vai para uma página quebrada ou inexistente em seu site, o que eles veem? Eles veem simplesmente um aviso de erro ou lhes é apresentada uma lista com destinos alternativos?

Enviou uma mensagem para a lixeira por engano? Gmail permite que você rapidamente desfaça a última ação.

Para concluir…

Trabalhar com essas características de uma boa user interface pode fazer com elas entrem em conflito umas com as outras. Por exemplo, ao tentar fazer uma interface limpa, você pode adicionar muitas descrições e explicações, o que acaba fazendo a coisa toda grande e volumosa. “Cortar” as coisas com o objetivo de tornar uma interface concisa pode ter o efeito oposto e tornar as coisas ambíguas. Atingir um equilíbrio perfeito exige habilidade e tempo, e cada solução dependerá de uma análise caso a caso.

Como criar sumários dinamicamente com o TOC (Table of Contents) jQuery plugin (jquery.toc)

Tárcio Zemel — Wed, 15 Apr 2009 15:00:12 +0000

Determinados tipos de sites (ou somente algumas páginas de sites) às vezes precisam de um sumário para que o conteúdo fique bem organizado e para oferecer uma visão geral sobre o conteúdo. Um sumário em páginas de web também é muito útil em relação á usabilidade, dado que facilita a experiência do visitante ter um “apanhado geral” sobre o que vai encontrar.

Agora imagine como seria bom se houvesse uma maneira de criar sumários dinamicamente para as páginas de seu site! “Seria”, não; é! É possível criar sumários de forma dinâmica através do plugin TOC (Table of Contents) jQuery plugin (jquery.toc) para jQuery!

Sobre o TOC jQuery Plugin

Na página oficial do TOC jQuery Plugin é possível encontrar informações importantes sobre o funcionamento do plugin, histórico de atualizações, exemplo de funcionamento, dentre outros. Mas, para você que está lendo este artigo diretamente no desenvolvimento para web, é possível ver em todos os artigos o plugin em ação, já que implementei a criação dinâmica de sumários oficialmente aqui no blog! Desabilite o javascript que você vai ver, ou melhor, não vai ver o Sumário! ;-)

O funcionamento do plugin é em cima das tags de títulos e subtítulos presentes nas páginas do site. Através da análise destes o plugin:

Gera um Sumário (“Table of Contents”) dinamicamente (através de tags de lista);
Adiciona automaticamente numeração ao Sumário e aos correspondentes títulos e subtítulos da página.

E, seguindo a “filosofia” do jQuery, tudo é feito de forma bastante automática e simplificada, bastando somente algumas pouquíssimas linhas de código para colocar a extensão em funcionamento!

Funcionamento do jquery.toc

A primeira coisa a se fazer, logicamente, é baixar o query.toc. Lembrando que é sempre aconselhável baixar a última versão disponível – na data de publicação deste artigo é a v1.0.2. Em relação a seu tamanho, também não há nada com o que se preocupar: sua versão “normal” tem 5.3KB e a versão compactada tem 2.4KB. Depois disso, basta fazer a “chamada” do script (abaixo da chamada ao jQuery, claro) e começar a codificar.

Lembrando que é conveniente fazer a chamada de todos javascripts e codificar na linguagem ao final do documento, preferencialmente antes de “”.

Codificando

Primeiro é importante escolher em qual lugar vai aparecer o sumário dinâmico. É bom dedicar uma DIV especialmente para isso para evitar erros/conflitos. Para facilitar, neste exemplo a DIV terá o ID “toc”.

1	<div id="toc"></div>

Uma das condições para o correto funcionamento do TOC jQuery Plugin é que cada título/subtítulo que se queira incluir no sumário tenha o atributo id para ser referenciado e que será usado nos links de âncora do Sumário criado. Falando claramente: todos seus títulos/subtítulos têm que ter id.

Logicamente que criar manualmente um id para cada título/subtítulo a fim de gerar dinamicamente o Sumário seria um trabalho extra e, diga-se de passagem, desnecessário, já que é possível fazer isso via javascript/jQuery. Vamos por partes.

O primeiro objetivo é “pegar” todos título/subtítulos da página (no trecho em que se queira incluir no Sumário dinâmico) e acrescentar um id para cada um. O id pode ser qualquer nome que seja diferente para cada título/subtítulo; afinal, trata-se de um id (mais informações a respeito, leia o artigo sobre diferenças entre IDs e Classes):

(function ($) {
    $("#content :header").each(function(){ // http://tinyurl.com/celarh
        // fazer qualquer coisa com cada título/subtítulo dentro de #content (nome-alvo fictício)
    });
})(jQuery);

No caso da geração automática de Sumário de conteúdos com o plugin TOC jQuery, nosso objetivo, como já explicado, é dar um id para cada título/subtítulo. Poderíamos criar um nome genérico e fazer um contador para marcar com números (o resultaria seria “#id1″, “#id2″, “#id3″…); mas acho mais “elegante” manter o texto do título e, para enfeitar mais um pouco, inserir “_” no lugar de cada espaço (dado que nomes de IDs não podem conter white spaces).

Vamos gerar um ID para cada título/subtítulo baseados nas seguintes premissas:

Nome será o texto do título/subtítulo;
Todos caracteres minúsculos;
Eliminação de qualquer caractere que não seja letra ou número (incluindo caracteres especiais);
Substituição de espaços por underscore (“_”).

Então, estamos assim, por enquanto:

(function ($) {
    $("#content :header").each(function(){
        var id = ($(this).text()).toLowerCase().replace(/[^a-zA-Z 0-9]+/g,'').replace(/\s/g, '_'); // http://tinyurl.com/dl9z35
        $(this).attr('id', id); //  http://tinyurl.com/68cxmw
    });
})(jQuery);

Depois disso, já temos todos os títulos e subtítulos “alvo” com um ID. Agora é o momento de mandar o jquery.toc entrar em ação:

(function ($) {
    $("#content :header").each(function(){
        var id = ($(this).text()).toLowerCase().replace(/[^a-zA-Z 0-9]+/g,'').replace(/\s/g, '_');
        $(this).attr('id', id);
    });
 
    $('#toc').toc(); // #toc é o "container" do Sumário, definido anteriormente
})(jQuery);

O “grosso” da coisa é isso! Pode fazer seus testes e ver que o Sumário foi criado automaticamente e está funcional, com todas as âncoras apontando para seus respectivos títulos/subtítulos.

“Refinando” o Sumário dinâmico

Para obter um resultado mais “fino” ainda falta codificar alguns detalhes.

Por exemplo: vamos supor que, por algum motivo, você queira que alguns títulos/subtítulos não entrem na listagem do Sumário. Consultando a documentação oficial do TOC jQuery Plugin é possível identificar que isso é possível através da opção exclude. Vamos supor que não queremos que os títulos primários e o título secundário de id “apresentacao” entrem na listagem; então o trecho ficaria:

1	$('#toc').toc({exclude: 'h1, h2#apresentacao'});

Em conversa com o desenvolvedor do plugin, fiquei sabendo que existe uma limitação quanto ao número de elementos possíveis no exclude. Então, caso tenha bastantes elementos que não gostaria que estivesse listados no Sumário, uma boa dica é criar uma classe qualquer (por exemplo “toc-exclude”) e marcar os elementos indesejáveis com ela. Então, ficaria algo como:

1	$('#toc').toc({exclude: 'h1, h2#apresentacao, .toc-exclude'});

Aproveitando que estamos querendo fazer um trabalho bem-feito e que jQuery nos permite isso com muita facilidade, não nos custa indicar ao visitante que aquela listagem é um Sumário, inserindo, via jQuery, um subtítulo antes da DIV “toc”:

1	$('#toc').toc({exclude: 'h1, h2#apresentacao, .toc-exclude'}).prepend(' Sumário '); // http://tinyurl.com/bjlr42

O script final de nosso exemplo – que serve de “base” para a implementação do jquery.toc em qualquer site – fica assim:

(function ($) {
    $("#content :header").each(function(){
        var id = ($(this).text()).toLowerCase().replace(/[^a-zA-Z 0-9]+/g,'').replace(/\s/g, '_');
        $(this).attr('id', id);
    });
 
    $('#toc').toc({exclude: 'h1, h2#apresentacao, .toc-exclude'}).prepend('Sumário
');
})(jQuery);

Conclusões sobre o Table of Contents jQuery plugin

Como foi demonstrado, criar um sumário automático-dinâmico com jQuery utilizando o plugin jquery.toc é algo bastante simples. E ele pode ser usado em qualquer tipo de site, inclusive os que utilizam CMSs, como os desenvolvidos em WordPress – vejam que este blog é WordPress e o recurso está presente.

Como “desafio”, no site em que for implementar o jquery.toc faça o seguinte: gere a DIV #toc através de jQuery ao invés de deixá-la na marcação (X)HTML. Coloque o link para o site nos comentários! ;-)

Newsletter no WordPress com o plugin Ajax Newsletter (wp-ajax-newsletter)

Tárcio Zemel — Tue, 07 Apr 2009 19:00:53 +0000

É de conhecimento dos desenvolvedores web que muitos sites precisam de um sistema de newsletter para compor sua estratégia de divulgação e fidelização de visitantes. Um bom sistema de newsletter, por vezes, pode ser fator fundamental para o sucesso de um site, seja ele temporário, ou não.

Um dos grandes “apelos” da comunidade WordPress é sobre um bom plugin gratuito para newsletter. Quando se procura por “plugins de newsletter para WordPress” nos buscadores, resultados é o que não falta, mas, infelizmente, nem todos são satisfatórios e atendem realmente ao que prometem: propiciar um gratuito, prático e fácil sistema de newsletter para WordPress.

Bateria de testes

A necessidade surgiu devido a um projeto em que estava envolvido. Na idealização do layout, havia neste um espaço reservado para newsletters. Já há algum tempo tenho usado WordPress para fazer 95% dos trabalhos web e, pensando na simplicidade e facilidades que a plataforma oferece e tendo em vista que sempre que precisei utilizar WordPress como CMS tudo correu tranquilamente, parti em busca de uma boa extensão para newsletter no WordPress.

Testei vários plugins nesse meu “apanhado” para testes. Alguns prometeram “mundos e fundos” mas, infelizmente, não cumpriram o que ofertavam. Outros que se apresentaram mais “modestos” e, aparentemente, com cara de “simples” e “fácil”, tornaram-se verdadeiros contratempos e foram de encontro à filosofia do WordPress no que diz respeito a praticidade, simplicidade e rapidez.

Depois de um tempo encontrei o que, para o projeto em questão e, certamente, para futuros projetos WordPress que necessitem da funcionalidade de newsletter, considero ser o ideal (pelo menos dentre os que eu experimentei: o plugin wp-ajax-newsletter.

Sobre o wp-ajax-newsletter

Conforme consta no site, o wp-ajax-newsletter

é um plugin WordPress que permite aos utilizadores subscreverem e receberem newsletters contendo os últimos posts do blog.

Simples assim! Do jeito que eu gosto (e que, acredito eu, é o conveniente para todos)!

Ainda segundo consta no site do plugin (e será visto mais à frente), é possível estabelecer a periodicidade de envio das newsletters, configurar os textos, ter acesso a base de cadastrados, utilizar constantes de sistema para personalizar os conteúdos, dentre outros.

Como é de se esperar, o plugin conta com sistema automático de validação de e-mails (um e-mail de confirmação é enviado e a pessoa tem que clicar em um link para confirmar).

Mexendo no wp-ajax-newsletter

Quando você instala o plugin (nessa altura do campeonato não precisa explicar isso, né?), automaticamente aparece em seu painel de controle uma nova opção no menu: Configurações > Newsletter. Acessando, todas as configurações cabíveis ao plugin de newsletter do WordPress estarão aí, divididas em 3 grandes grupos: Enviar Newsletter, Configurações e Assinantes. No front-end, a inserção do formulário AJAX para cadastro de e-mails é simplesmente um código de chamadas para uma função do plugin (veja o código de inserção do formulário para se cadastrar na newsletter).

Vou explicar o funcionamento no back-end, começando pelas Configurações.

Configurações (Configuration)

Nas Configurações é possível especificar a periodicidade que valerá para a divulgação das newsletters. Existem as opções:

Manual. Enviar newsletters manualmente, sem uma periodicidade automática.
Weekly. Enviar newsletter 1 vez a cada semana.
Monthly. Enviar newsletter 1 vez a cada mês.
Every “x” posts. Enviar newsletters a cada “x” artigos publicados – número este especificado por quem configura a extensão WordPress.

Continuando as configurações, estas estão dispostas e funcionando, respectivamente, assim:

From. E-mail que será o “enviador” de todas as newsletters; é o e-mail que aparece no campo “De:” do envio de e-mails e o que aparecerá quando alguém clicar em “Responder”.
Subject. É o assunto do e-mail. Acredito eu que não deva se estender muito e ser bem simples como “Newsletter do site X”.
Header. Caso queira algum cabeçalho para sua newsletter, este é o espaço dedicado a o colocar. Use com sabedoria. Lembre-se: o que não é necessário, não precisa estar lá.
Template. É aqui o “corpo” do conteúdo da newsletter. Este campo mostra o que as pessoas que receberem a newsletter vão visualizar em suas caixas de e-mail (incluindo excerpt, que é o resumo do artigo). O próprio plugin mostra quais as constantes de sistema podem ser usadas. Crie uma mensagem personalizada utilizando o que achar conveniente e que seja útil para quem está lendo.
Footer. Texto para o rodapé de cada newsletter, se você achar que vale a pena.

Como consta no próprio texto explicativo do plugin, todas as mensagens são enviadas em texto puro – o que, penso eu, é o aconselhável de ser feito quanto se trata de envio de newsletters.

Enviar Newsletter (Send Newsletter)

Aqui são mostradas algumas esatísticas sobre o número de artigos de seu site WordPress e quantas pessoas já se subscreveram para receber as newsletters. Também é aqui o local onde você vai escolher quantos artigos (ou resumo de artigos, se preferir) serão enviados para as pessoas que se subscreveram.

Como puderam notar, o plugin envia newsletters cujos conteúdos são os próprios artigos publicados no site/blog WordPress. Ele foi idealizado para isso e funciona muito bem, cumprindo seu papel sem complicações. Entretanto, algumas pessoas podem precisar/julgar que os assinantes da newsletter devam receber conteúdos “exclusivos”, diferentes daqueles que constam como artigos do site. Se você é uma destas pessoas, preste atenção.

O pulo do gato para quem precisa enviar newsletters com conteúdos exclusivos está neste passo-a-passo:

Especifique que o plugin deve enviar somente o último artigo (preencha com o número 1 o campo “Send only the last ‘X’ posts)”;
Nas configurações, marque a periodicidade de envio como Manual;
Escreva o conteúdo que quer enviar somente para os assinantes de newsletters e publique;
Rapidamente vá em Configurações > Newsletter e envie o conteúdo do artigo que acabou de escrever;
Apague de seu site/blog o artigo que acabou de ser despachado em forma de newsletter.

Fazendo esta “mutreta” você garante que conteúdos exclusivos serão enviados para os que dedicaram um pouco de seu tempo cadastrando seu e-mail para o recebimento de newsletters de seu site.

Minha opinião pessoal é que este recurso não é necessário para a maioria dos projetos. Genericamente falando, não vejo razões para limitar o acesso a conteúdos do site/blog a determinado grupo de pessoas. Vejo as newsletter como um incremento às possibilidades disponíveis (e cabíveis) para recebimento de atualizações de conteúdos; não faz diferença se por feeds ou por newsletters, o importante é a pessoa manter-se atualizada e saber sobre novos conteúdos.

Assinantes (Subscribers)

Nesta parte é possível obter informações sobre os assinantes da newsletter. Na tabela aparecem as informações:

E-mail. O e-mail que a pessoa usou e que vai receber as newsletters.
Username. Caso o e-mail cadastrado for de alguém com acesso ao painel administrativo do WordPress, o login vai aparecer aqui; do contrário (o que vai acontecer na maioria dos casos), aparecerá “not registered“.
Since. É o dia e a hora em que o e-mail consta no sistema como recebedor de newsletters.
Action. Quando a pessoa tiver clicado no link para confirmação de recebimento de newsletter, aqui vai constar “Active”; quando tiver recebido o e-mail, mas ainda não tiver confirmado, será um link “Activate”, dando a opção de você ativar um e-mail mesmo sem a pessoa ter confirmado (opção desnecessária, a meu ver).
Delete. Para apagar o e-mail da lista dos que recebem as newsletters do site.

Conclusões sobre o Ajax Newsletter Plugin para WordPress

Como foi possível perceber pelo artigo, a dinâmica e funcionamento do plugin são bastante tranquilos e tudo é feito de forma bastante rápida e simples.

Reforçando o que já disse, sou da opinião de que enviar conteúdos exclusivos, na grande maioria dos casos, não é uma boa prática, dado que se deve ofertar várias possibilidades de recebimento de atualizações no site e, juntamente com as atualizações através de feeds, as newsletters são uma ótima pedida!

Creio ser o wp-ajax-newsletter o mais fácil plugin (grátis) para newsletters do WordPress disponível atualmente. Depois de instalado e configutado, basta caprichar na customização das opções (e, aconselho eu, dedicar um pouco de seu tempo para traduzir as mensagens em inglês nativas, editando os arquivos originais do plugin para o caso de ser um job nacional) e, mais importante, fazer valer a pena a subscrição dos assinantes, provendo um conteúdo de excelente qualidade! ;-)

Ajax Newsletter (wp-ajax-newsletter)

Pergunte-se a si mesmo: questões para desenvolver um bom site

Tárcio Zemel — Wed, 18 Mar 2009 15:01:29 +0000

O desenvolvimento web às vezes é encarado como algo extremamente complexo, um verdadeiro “Bicho de Sete Cabeças”! Realmente não é a coisa mais simples do mundo; entretanto, pessoalmente creio que, por exemplo, operar uma pessoa ou planejar uma casa são coisas bem mais difíceis! Pode ser devido à minha afinidade com o desenvolvimento web, mas esta é minha opinião.

Na maioria das vezes fazer perguntas a si mesmo (depois de realizar um bom briefing para desenvolvimento de web sites, claro) é a melhor forma de identificar/complementar as principais necessidades de um projeto; é o meio excelente de saber o que pode ser feito, o que não pode, o que deve, o que não deve, como fazer, qual tecnologia escolher e o que mais for preciso saber, pelo menos num segundo momento (o “primeiro momento” é o briefing do site) é a coisa acertada e mais sensata a se fazer.

Perguntar-se a si mesmo (ou, quando trata-se de uma equipe, fazer perguntas mútuas) algumas questões nada complexas a respeito do projeto em vista é uma boa maneira de saber como começar e como seguir com o desenvolvimento do projeto web; e isso com a preparação e precaução necessárias para evitar um monte de surpresas que inevitavelmente ocorrem em projetos desta natureza.

Para ajudar você a elaborar suas “auto-perguntas”, segue uma série de considerações a respeito do desenvolvimento web. Pergunte-se! ;-)

Conteúdo

Sem sombra de dúvidas o conteúdo é o fator-chave de sucesso para os web sites e projetos online, em geral. Levando em consideração alguns pontos importantes, pode-se caminhar à consecução do objetivo de alcançar a qualidade deste e, consequentemente, a qualidade e satisfação para quem acessa.

Textos. Em sites/blogs “normais” os textos podem ser considerados como conteúdo de maior relevância e procura. Deve-se ter cuidado com a maneira de escrever (mais formal, mais coloquial, em terceira pessoa, em primeira pessoa, etc), a extensão dos textos, o tamanho das fontes, o espaço entre as linhas, a distância entre os parágrafos, apresentação de títulos e subtítulos, cores. Se ainda não sabe, veja como usar qualquer fonte tipográfica em blogs Wordpress e sites, em geral.
Imagens. As mensagens transmitidas através de imagens também são bastante relevantes e, igualmente, merecem atenção especial. Mais à frente a questão das imagens será abordada com mais detalhes.
Áudio. Muitos sites utilizam áudio como forma de comunicação, o que é perfeitamente possível e conveniente se o bom-sendo for usado. Por exemplo, não é nada interessante colocar para tocar uma música em um site sem que o visitante tenha solicitado; o ideal é deixar um player à vista para que ele saiba que o recurso existe. Deve-se atentar também ao tamanho dos arquivos, em si, e ao tempo de duração, seja o áudio uma “música ambiente”, palavras de responsáveis pela empresa/produto/serviço, podcast, ou o que quer que seja.
Vídeo. Excetuando-se os sites voltados especialmente aos vídeos, para os utilizar nos sites um “mix” deve ser feito e levados em consideração fatores como tamanho em pixels, tempo de duração, qualidade das imagens, controle (barra de tempo, botões pausar e continuar, volume, etc), adequação ao tema e, muito importante, decidir se os vídeos serão hospedados em sites de terceiros e anexados ao conteúdo ou se vão ficar diretamente no servidor do site e executados através de scripts de players.

Navegabilidade

A navegabilidade, sem dúvidas, é uma das coisas mais importantes de seu site. A facilidade que o visitante tem para navegar entre/nos conteúdos do site é fator determinante para o sucesso ou fracasso de seu espaço online. Perceba em conversas com amigos, colegas e mesmo observando seu próprio comportamento, que quando se entra em um site confuso, “embaraçado”, sem uma boa estrutura navegacional, que a atitude é logo de irritabilidade e a primeira frase que vem à cabeça é “Droga, que site confuso! Vou embora…”.

Menus. Os menus do site devem estar bem claros e ser bem fácil de identificar o que é menu e o que não é. É através dos menus de navegação que os visitantes exploram a grande maioria dos sites e, se não está explícito em qual lugar o(s) menu(s) está(ão), como isso poderá ser feito?
Links. O mesmo vale em relação aos links, quer dizer, se não está bem claro e evidente que determinada palavra ou frase é, na verdade, um link, é fácil não se surpreender caso ninguém clique. É muito importante que os links do site sejam evidentes e diferenciados do restante do “texto normal”. Igualmente importante é salientar, de alguma maneira, quando um link já foi visitado.
Localização. O visitante precisa saber em qual ponto do site ele se encontra. A web é ampla, muito ampla, e as pessoas facilmente se perdem nos sites. Por isso, use e abuse de elementos que sirvam para identificar em qual lugar do site o visitante está atualmente como, para citar alguns, destaque nos menus e caminhos de pão (breadcrumbs).
Busca. Especialmente sites a partir do porte médio, blogs e revistas eletrônicas necessitam de um campo de busca. O campo de busca é um dos elementos mais usados em site e, em alguns casos, é o primeiro a ser usado pelo visitante. É importante deixar o campo de busca em local de fácil acesso e que este seja bem claro e simples de ser utilizado.
Elementos Auxiliares. Além dos já elementos, utilizar elementos auxiliares de navegação e “suporte” ao visitante eleva bastante a qualidade de um site, como um todo. Alguns exemplos são as páginas Ajuda, Perguntas Frequentes e Mapa do Site.

Web Design

Que “o conteúdo é o rei” todos os desenvolvedores sabem; o que muitos ainda não sabem é dar a devida importância ao web design. A forma como os elementos visuais estão dispostos e como se apresentam influi diretamente na maneira como as pessoas percebem e intuem (do verbo “intuir”) os web sites. Conhecer alguns princípios básicos de Gestalt aplicado ao web design e dar importância a determinados elementos é de suma importância.

Identificação. Identificar qual é o site em questão é garantir que as pessoas não terão dúvidas e reforçar sua marca na mente dos visitantes. É essencial que o logotipo (com link para a página inicial) seja apresentado logo na parte superior e que não haja equívocos quanto a qual empresa o site pertence/faz parte.
Identidade visual. Estritamente ligado à Identificação, É o conjunto de elementos que identifica determinada empresa, produto, uma instituição e similares. Vejam bem, é o conjunto de elementos! Para que uma identidade visual seja formada/mantida, é preciso critério para que a consistência e a constância estejam presentes. Respeitar e “repetir” os elementos visuais (e de outros tipos) a fim de fixar o que é preciso na mente das pessoas e garantir que nenhum equívoco acontecerá.
Cores. A correta escolha de cores (de muita preferência levando em conta a Identidade Visual) deve ser feita com cuidado e seguindo critérios bem estudados/observados. É importante levar em consideração o público-alvo (idade, sexo, preferências, expectativas, e mais), o objetivo do projeto, a época em que ele é feito, dentre outros. As cores merecem estudos complementares à parte, devido à sua importância para qualquer projeto de natureza web.
Fontes tipográficas. Partindo do princípio de que o conteúdo textual é o mais importante na maioria dos web sites, a utilização de fontes tipográficas adequadas ao projeto é imprescindível. A escolha correta da família de fontes, tamanho, cores, contraste, inter-relação entre tipos, posicionamento, e outros, devem ser feitos com cautela e tendo em vista o objetivo a que se propõe o projeto.
Imagens. Dependendo de como é pensado/estruturado o site, o uso de imagens praticamente se faz desnecessário, haja vista o atual delicious. Para os casos mais “normais”, em relação às imagens deve-se levar em consideração a qualidade, o formato, o tamanho em pixels, tamanho em KB (conhecem o optiPNG?), alinhamento, a relação com os outros elementos, etc.

Outras considerações

Para finalizar, ficam considerações sobre elementos de caráter geral dos sites que, se levados em conta e bem planejados, certamente aumentam a qualidade do site.

URLs. Pode parecer que não, mas o uso correto de URLs ajuda bastante a divulgação dos sites (principalmente falando sobre os mecanismos de busca). URLs amigáveis garantem que seu site será melhor indexado nos sistemas de pesquisa e, olhando o lado humano, facilita a memorização de páginas específicas. Escolher nomes fáceis e de tamanho reduzido são diferenciais.
Idiomas. Dependendo do site é interessante que os conteúdos sejam apresentados em idiomas distintos. Existem sistemas de tradução automática que podem auxiliar um pouco, mas o ideal são traduções profissionais. Pense bem, um tradutor automático não traduz áudios e vídeos. Quando parte considerável do público-alvo for de outros países, é interessante haver, além de diferentes versões textuais do conteúdo, também diferentes versões para áudios (quando se tratar de falas, claro), vídeos (ou inserção de legandas) e, dependendo do caso, até disposição dos elementos, levando em conta o modo de leitura e costumas dos países.
Tempo de carregamento. Algumas pesquisas alegam que se algum conteúdo não for apresentado e m 5 segundos, o visitante sai do site para buscar outro. Isso é relativo, claro, mas mostra a importância que há no tempo de carregamento das páginas do site. Fique atento ao tamanho de imagens, utilização de javascripts (que devem ser inseridos antes de “” e podem ter tamanho reduzido através de um compactador de javascript) e extensão das páginas. Utilize o YSlow para Firefox como auxílio.

Tem mais algum ponto que você gostaria de citar? Tem alguma dica para complementar os tópicos do artigo? Comente!

Novo tema para o blog: dpw2009

Tárcio Zemel — Wed, 04 Mar 2009 20:27:51 +0000

Olá, pessoal! Como estão todos? Curtiram a última rodada de prêmios? ;-)

Escrevo mais este “meta artigo” para falar sobre as novidades do blog, principalmente a novidade visual, que é o novo tema para o desenvolvimento para web. Como havia comentado, este ano haverá muitas surpresas e, um tema desenvolvido especialmente para o blog, 100% exclusivo, é uma delas!

Web design

Algo que fui ver recentemente é que a versão anterior do blog ficava tenebrosa em outros navegadores que não o Firefox! É como dizem por aí: “Casa de ferreiro, espeto de pau”. Mas agora já testei na maioria dos navegadores e creio que a renderização das páginas está bastante semelhante em todos eles!

Optei por priorizar o conteúdo, que é o mais importante, mesmo. Mantive e aperfeiçoei a linha clean do site para, novamente, dar ênfase aos textos, imagens e outros elementos de informação.

O campo de busca recebeu bastante destaque e, de certa forma, eu até ousei ao passá-lo para o lado esquerdo, “desrespeitando” algumas normas de usabilidade existentes. Fiz isso para diferenciar o blog dos demais, evidenciar a “presença” do campo de pesquisa e, de certa maneira, estimular os visitantes à utilizarem – levando em conta que o blog já está bom um conteúdo considerável. Ah, e nada de botão “Enviar”, ele seria “demais” nesse caso.

Aproveitando a oportunidade, “aglomerei” os 3 tipos de feeds do blog também no mesmo espaço. Justamente em função da quantidade de conteúdos e pensando no que está por vir, certamente apresentar de forma clara como as pessoas podem subscrever ao feed é bem vindo! E, para os que tiverem dúvidas, confiram o “?” ao lado dos ícones.

Conteúdo

O espaço dedicado ao conteúdo, que é o que deve ser de mais importante no blog, foi aumentado consideravelmente. Ao invés de 510px do tema anterior, agora temos 730px! Esse aumento foi para enfatizar que os conteúdos são realmente o que importam e agora, como não poderia deixar de ser, têm seu devido espaço.

Um dos principais pedidos no artigo sobre Sugestões para 2009 foi para eu começar a fazer screencasts para disponibilizar no blog. Realmente é uma ótima pedida e eu vou acatar aos pedidos! Como não mexia com criação/edição de vídeos antes, será um tempinho até eu pegar o jeito da coisa e produzir screencasts de qualidade; de qualquer maneira, aguardem um para em breve – dicas e sugestões são bem-vindos!

Uma outra coisa muito interessante que foi pedida é para eu fazer mais tutoriais “passo-a-passo” sobre os assuntos relacionados ao desenvolvimento web. Também é algo que considero muito oportuno e, certamente, também farei isso.

Algo que retirei e que, ao final das contas, não tinha tanta utilidade assim, foram as 3 colunas no rodapé, que continham, respectivamente, “Artigos Recentes”, “Últimos Comentários” e “Mais Comentados”. Virtualmente falando, não era muito acessado e, além de tudo, com a retira o tempo de carregamento geral do site diminui, dado que algumas consultas ao banco de dados não são mais feitas.

Falando em tempo de carregamento, diversas extensões do WordPress desnecessárias foram sumariamente desativados e muitos outros excluídos da pasta de plugins. Eu tinha mais de 50 plugins (entre ativos e inativos) e isso já estava me deixando louco! Agora estou usando o estritamente necessário – embora esteja fazendo alguns testes de vez em quando. Portanto, mais rapidez e mais eficiência ao acessar o desenvolvimento para web!

Considerações últimas

Algo que me deixou bastante satisfeito foi o fato de a maioria dos visitantes utilizarem Firefox! Em relação ao Internet Explorer, a margem é ainda pequena (no momento da publicação deste artigo, 44,59% para FF e 42,93% para IE), mas só de ter ultrapassado o IEca já fico bastante feliz! Sinal de que as pessoas estão começando a perceber o que é melhor! Por falar nisso, aqueles que tentarem acessar o blog com IE6 terão uma surpresinha! ;-D

Ainda há algumas coisas para serem ajustadas no novo tema, coisas estas que só poderiam ser feitas depois que ele estivesse em atividade (inclusive, conto com a ajuda de todos para evidenciar bugs e falhas no novo tema). Infelizmente ainda estou sem internet em casa (o que me faz lembrar do bordão “Isso é um absurdo!”, dos comerciais tão divulgados nesses últimos dias pela própria prestadora de serviços que está me prejudicando), o que explica o grande hiato das minhas aparições por aqui.

Minha taxa de visitação caiu, meus feeds, idem, a credibilidade do blog, nem se fala… Mesmo com todos os contratempos, peço que tenham um pouco mais de paciência que as coisas já estão se resolvendo! Continuem ligados no desenvolvimento para web e aguardem as próximas novidades, promoções e prêmios que estão por vir!

Aproveitando o ensejo, peço novamente para que os que ainda tiverem sugestões, que as apresentem! Minha intenção é fazer o blog crescer para que aqueles que o acessam também cresçam! Se você quiser ajudar, fique à vontade e, desde já, meu “Muito obrigado“!

PS: Será que uma comunidade do desenvolvimento para web no orkut daria certo? Quem participaria? Seria algo levado a sério? O que vocês pensam a respeito?

Resultado da promoção de Ano Novo + explicações sobre sumiço

Tárcio Zemel — Mon, 09 Feb 2009 13:35:29 +0000

Olá, leitores, companheiros e amigos do desenvolvimento para web! Espero que esteja tudo muito bem com vocês!

Como todos devem ter percebido, já faz um tempo que não apareço por aqui com novos artigos e tutoriais… Até para responder aos comentários está “russo”, apesar de estar fazendo aos poucos, do jeito que é possível. Explico.

O motivo do sumiço

Estou completamente sem acesso à internet em casa! Eu tinha o serviço Oi Velox mas, infelizmente, em uma atitude unilateral e arbitrária da prestadora de serviço, meu sinal ADSL simplesmente desapareceu de um dia para o outro. Por diversas vezes entrei em contato por telefone com a prestadora de serviço, mas o que eles faziam era me passar de um departamento para outro sem que ninguém resolvesse nada… Lamentável.

Levei o caso ao órgão competente de proteção ao consumidor e uma audiência já está marcada para o início de Março. Vamos ver o que vai acontecer…

Resultado da promoção de Ano Novo

Infelizmente, infelizmente, mesmo, quase nada do que eu tinha planejado para essa premiação saiu como o esperado. Eu gostaria de ter feito um vídeo com o sorteio sendo realizado para dar mais credibilidade à iniciativa, e tudo o mais, mas, devido às atitudes lamentáveis da minha prestadora de serviço de internet, isso não foi possível…

Então, para não demorar ainda mais, fiz o sorteio “normalmente”, através de um programinha simples que fiz em PHP para o caso. Era só entrar com um total de números (o total de comentários) que ele dava um resultado aleatório. E quem ganhou foi… (que rufem os tambores)… Rúbia Gardini! O aleatório do programa foi o número 2 e, como todos podem conferir, o segundo comentário feito no artigo da promoção é o de Rúbia Gardini.

Como havia dito no citado artigo, o prêmio seria uma surpresa, inclusive para mim, mesmo. Alguns dias depois do anúncio, tive a idéia de fazer uma lista e enviar para o ganhador escolher algo de sua preferência. A lista tinha o seguinte:

MP5 4GB Touch Screen, com tela de 2.8” e câmera digital de 1.3 Mpx;
Pendrive 16GB;
Cartão de Memória 8GB;
Memoria 1GB DDR 333 PC2700;
DVD-R/+R 20x SATA Buffer 2MB;
Embalo de mídias virgem DVD-R c/ 100 (4.7GB | 1x-8x).

A ganhadora do prêmio optou pelo Pendrive 16GB que foi devidamente adquirido, embalado e enviado para o endereço da preferência dela.

Passou pela minha cabeça colocar a lista de prêmios no artigo para estimular a participação dos visitantes. Entretanto, pensei melhor e optei por receber um número mais reduzido de comentários sinceros, de pessoas realmente querendo ajudar, do que pessoas que simplesmente escreveriam qualquer coisa somente para ganhar prêmios. Segundo o resultado da promoção, creio que fiz a melhor escolha!

“Balanço” da Promoção de Ano Novo

Considero que o resultado geral foi bastante agradável! Algumas pessoas que ainda não comentavam no blog o fizeram; outras que já comentavam, também; todas com ótimas sugestões e dicas excelentes que, apesar de, neste momento, eu não poder executar todas, estão registradas com carinho!

Algo bastante pedido são screencasts (as famosas vídeo-aulas) sobre temas relacionadas ao desenvolvimento web. Realmente já estava na hora de o blog sofrer um upgrade com algo do gênero e, assim que possível, devido às condições de acesso atuais que já comentei, começo a brincadeira dos screencasts! ;-)

E por falar em novidades, fiquem ligados: uma das novidades para 2009 é um novo tema para o blog, bem mais limpo, intuitivo e focado no conteúdo! Não percam!

No mais, muitíssimo obrigado a todos os que contribuíram e contribuem, diariamente, com o blog! Certamente haverá muito mais promoções em breve e conto com a participação de todos!

Obrigado, pessoal! :-D

Sugestões para 2009 (participe e ganhe um presente surpresa)

Tárcio Zemel — Fri, 12 Dec 2008 12:39:07 +0000

Pessoal, eu não sumi, não! Estou com uns problemas e não vou poder acessar alguns dias, mas, assim que voltar, já vai ser com o resultado do sorteio e a divulgação do prêmio!

Olá, leitores, visitantes, colegas, amigos, conhecidos e desconhecidos do desenvolvimento para web! Espero que esteja tudo muito bem com todos!

Resolvi escrever este “meta-post” para humildemente pedir a ajuda de vocês em relação ao blog – ajudar além do que já fazem comentando nos artigos e enviando e-mails! Acontece que o próximo ano está bem perto e, embevecido pelo “espírito de mudança e renovação” que aparece nesta época do ano, decidi também renovar algumas coisas aqui no blog! Uma das principais mudanças já está sendo feito, que é o uso de um novo tema que estou preparando eu mesmo. Cheguei à conclusão de que vou experimentar um novo tema em 2009 e, para variar, decidi criar um tema Wordpress “do zero”; nada de adaptar temas prontos.

“Me ajude! Me ajude! Me ajude!”

Então, tendo em vista que estou disposto a mudanças/melhorias, gostaria de saber de vocês, leitores, criaturas para as quais eu dedico todos os artigos e conteúdos que aqui constam, o que sugerem?! O que gostariam de ver no desenvolvimento para web no ano que vem? Gostariam que eu abordasse mais algum tema, em especial? Parasse de tocar em determinado assunto que não gostou? O que você aprova e o que você desaprova? Será que a “linha” do blog deve continuar sendo a mesma? O que realmente acontecerá em 2012?

Enfim, peço a vocês sugestões e dicas de o quê eu poderia fazer para que este espaço virtual fique melhor e cada vez mais útil e interessante para aqueles que me prestigiam, dedicando um pouco de seu tempo diário para vir aqui e me darem o prazer de sua visita! :-)

Um presente surpresa espera por você (ou vice-versa)

O que eu coloquei no título do artigo não é mentira, não! Eu vou mesmo dar um presente surpresa para algum sortudo ou sortuda que ajudar, fazendo uma lista de todos aqueles que participaram e jogando num sistema que faz uma escolha aleatória. Quer dizer, é muito interessante que, ao comentar, você se identifique corretamente para, se acaso for o(a) contemplado(a), não fique sem seu prêmio!

E o presente é tão surpresa, mas tão surpresa, que nem eu mesmo sei qual é! ahuhuahua… Eu ainda não sei o que oferecer ao sorteado, mas fiquem tranquilos que não vai ser pendrive de 1GB nem camisa preta de rock! Para estimular a participação da maioria e para não “sair da linha”, o presente será algo bom e de qualidade (ok, esses são conceitos relativos…), assim como espero que tenha sido este blog em 2008 e, com sua ajuda, melhor ainda em 2009!

Resumindo, para concorrer ao presente surpresa, você deve:

Fazer um comentário neste artigo com uma dica, sugestão, idéia, crítica negativa, rumor, inspiração, proposta, estímulo ou o que quer que você considere que seria bom para o desenvolvimento para web caso isso fosse implementado / acontecesse;
Ao comentar, informar corretamente seu nome ou apelido e seu e-mail – do contrário você não conseguirá pegar o prêmio, pois os acertos serão feitos por e-mail;
Aguardar o dia 31 de dezembro para o fim da “promoção” e posterior resultado. Para ficar sabendo se você ganhou, assine o feed do desenvolvimento para web para receber o resultado.

Simples, não é verdade? Não se esquecendo que quanto mais comentários você fizer, maiores serão suas chances de ganhar. Fique ligado e, até dia 31 de dezembro, conto com sua ajuda! ;-)

Post Scriptum: Eu tenho cara de bobo, mas não sou! Se você está pensando em dividir sua sugestão de 50 linhas em 50 comentários de 1 linha cada para aumentar sua chance de ganhar, pode tirar seu cavalinho da chuva! Claro que se você sugerir algo e depois quiser voltar com novas idéias, não terá o mínimo problema; é a má fé na participação que não será vista com bons olhos…

Quando o cliente (pensa que) sabe mais

Tárcio Zemel — Tue, 09 Dec 2008 17:56:06 +0000

Uma das coisas que sempre me intrigou em relação a clientes é o tipo que pensa saber mais que o profissional que está contratando. E isso não acontece somente no desenvolvimento para web; é caso até corriqueiro em diversas outras áreas de atuação, como design, publicidade, propaganda, e outros.

Situações causadas pelo “sabe tudo”

Um dos cenários críticos que pode acontecer é o cliente responder “de qualquer jeito” o briefing do site, achar que não ficou bom o trabalho que foi apresentado (sem explicar os motivos), alegar que tal ou qual coisa deveria mudar de lugar, a posição do elemento “x” não está boa, que as cores não combinam, etc, e ainda alterar o escopo do projeto no meio do desenvolvimento – para, no fim, reclamar que o prazo inicial não foi cumprido…

Não deve ser frequente que tudo isso aconteça de uma vez com o profissional, mas, com certeza, não raramente pelo menos um dos “itens” já fez, faz ou fará parte da vida de todo profissional de criação, em especial freelancers (ainda mais os iniciantes) que, justamente em função de sua modalidade de trabalho, muitas vezes passam como “parte fraca” da história e suas ações e juízos não são julgados com muito crédito e/ou de forma menos considerada.

Sempre que alguém levanta este assunto na blogosfera, em geral, vem as já “tradicionais” comparações com médicos, engenheiros, arquitetos, etc. Pessoalmente, acredito serem comparações muito válidas e pertinentes (por exemplo, “O Sr. diz ao médico como deve fazer a operação? Então…”), mas, sinceramente, acredito que não propiciem tanta eficácia quanto era de se esperar. Dependendo do caso, o potencial cliente pode até ficar ofendido com o “tom” com que se fala e, aí, você pode dizer “Adeus” ao job esperado…

Não digo que não sejam situações delicadas de se tratar e se passar; entretanto, há clientes que realmente passam dos limites e pensam, inclusive, saberem mais que o próprio profissinal que contrataram ou estão prestes a contratar. “Retire esta borda”, “Aumente este espaçamento”, “Faça isso”, “Faça aquilo”… São coisas desnecessárias que, no geral, comprometem o andamento e ânimo que se tem com o trabalho em questão.

Não estou afirmando que o cliente não tem a liberdade de opinar sobre o trabalho que ele mesmo está pagando para ser realizado; o que contesto é quando ele pensa, erroneamente, que tem maiores conhecimentos que os profissionais contratados. Ora, então por que ele mesmo não fez o site? Por que contratou um terceiro para fazer por ele, já que sabe tanto o que fica melhor ou pior em cada situaçao?

Possíveis soluções

Depende de cada caso, há quanto tempo a pessoa está atuante, dentre muitas outras coisas, mas, baseado na experiência que já tive e ainda tenho, os possíveis argumentos para os casos em que o cliente pensa que entende mais que a pessoa que ele contratou, no caso, pensa que sabe mais de desenvolvimento web do que o desenvolvedor, seriam:

Peça para explicar o motivo de não ter gostado de algo ou querer alguma mudança. Na maioria dos casos a pessoa não vai saber explicar… Você vai escutar um limitado “Aaa, não sei, simplesmente não gostei”, ou algo do tipo. Isso é bem favorável para você que, como bom(boa) menino(a) que é, já preparou seus argumentos antes da reunião e terá seus pontos fortes “na ponta da língua”. Assim que você apresentar os motivos racionais para cada coisa no site, provavelmente tudo estará resolvido.
Peça para sugerir a melhoria. Quando a pessoa diz que simplesmente não gostou, peça para que ele sugira a melhoria. “Então diga, por favor, o que poderia ser feito para ficar melhor”. Nesta situação, pode haver o caso de a pessoa realmente pensar que sabe do que está falando e propor coisas absurdas. Fique calmo e explique o motivo de aquilo não ser o melhor a se fazer.
Diga que ele está errado e pronto. Esta abordagem é um pouco mais “agressiva” mas, em determinadas situações, pode ser o que falta para tudo se resolver. Alguns clientes até acham bom um comportamento mais “rígido”, e sentem que a pessoa que demonstra tais atos é totalmente confiante e sabe bem do que está falando/fazendo. Mas, muito cuidado com isso! Isso é algo para se falar somente em determinados casos específicos; infelizmente não há uma “fórmula” para dizer quais situações são essas… Vai depender da experiência de cada um e do “feeling” do projeto.

Se tudo o mais falhar…

Quando todos seus – pertinentes – argumentos não funcionam, mesmo sendo bem sensato e convincente, é uma lástima… Há clientes que cismam com determinada coisa e, por mais que saibam que estão errados, “batem o pé”; a coisa se torna algo pessoal para ele.

Os profissionais, neste caso, costumam adotar medidas diferentes, bem diferentes, podendo chegar ao extremo de dispensar o cliente em função do desgaste psicológico e emocional que já passou e “prevê” que irá passar por muito tempo. Para quem já está consolidado no mercado e/ou tem uma boa carteira de clientes, penso ser esta a medida certa a se fazer. Concordo 100%!

Para os que ainda não se encontram nesta situação, também existem coisas a serem feitas. Conversando com minha colega Rúbia Gardini, fiquei sabendo de uma maneira muito eficiente e profissional de lidar com o fato: faça exatamente tudo o que o cliente quiser e simplesmente não coloque sua “assinatura”; simplesmente não informe ao mundo que foi você quem fez aquela “peça”. Caso o cliente ache isso ruim ou estranho – sim, acontece de o cliente achar isso -, simplesmente diga que, devido as alterações impostas, o site não ficou com a mesma “linha” de seu portfolio e, por tanto, você prefere não assinar.

Direto demais? Rude demais? Não! É simplesmente a verdade.

Conclusão

Veja este vídeo que vi no Digital Paper, num artigo que trata, mais ou menos, sobre o mesmo que este post, “Quando o cliente palpita demais“, que ilustra, de forma bem humorada, o que os criadores têm que passar.

[youtube]http://www.youtube.com/watch?v=GjXXsUujpLI[/youtube]

Que fique bem claro que penso que o cliente deve, sim, ser ouvido em vários momentos do desenvolvimento do site. Afinal, é para o publico-alvo dele que tudo está sendo feito. Não raramente surgem boas propostas e sugestões sobre o próprio site e seu andamento e, justamente por ter ouvido o que o cliente tem a dizer, o resultado final fica melhor. Mas, convenhamos, não raramente falta respeito e bom senso…

Concorda? Discorda? Comente!

CushyCMS: CMS versátil, simples, rápido, fácil e gratuito

Tárcio Zemel — Fri, 05 Dec 2008 02:20:03 +0000

Existem muitos, muitos CMSs disponíveis. Desde os gratuitos, aos “meio-gratuitos”, passando pelos de código livre e chegando aos pagos, quem precisa de um sistema para gerenciamento de conteúdos para qualquer projeto, atualmente está muito bem servido. Muitos conhecem o The CMS Matrix, site dedicado a apresentar as principais características de CMSs e, além disso, fazer um comparativo entre muitos dos CMSs existentes. Pela listagem do The CMS Matrix, é possível ter uma noção da quantidade dos sistemas de gerenciamento disponíveis.

Dentre os CMSs disponíveis, fiquei, recentemente, sabendo de um CMS muito interessante e diferente dos que estamos acostumados a encontrar: é o CushyCMS. O CushyCMS tem um “conceito” diferente dos outros CMS; ao meu ver, é um conceito até inovador – pelo menos para mim.

Funcionamento do CushyCMS

Como disse, o sistema de funcionamento do CushyCMS é diferente do da maioria dos CMSs disponíveis no mercado. Inicialmente, é preciso fazer cadastro no site oficial do CushyCMS.

Depois disso, você tem acesso a um painel de controle bem interessante, no qual é possível “adicionar” os sites que você quer gerenciar. Na verdade é bem simples: basta fornecer o endereço do site, passar as informações de FTP (eu sei, pode ser arriscado fazer isso; entretanto, o CushyCMS até hoje se apresentou como um sistema bem eficiente e seguro) e configurar qual é a pasta raiz do site.

O próximo passo é estabelecer quais páginas serão editáveis a través do Cushy, selecionando-as em um painel AJAX bem interessante. É só escolher um nome que identificará aquela página e selecionar sua localização.

Então, para começar a efetivamente editar as páginas que você quer é que entra o “esquema” do CushyCMS que eu considero fantástico! Para o sistema identificar quais partes do conteúdo das páginas serão editáveis, é preciso que estas tenham elementos cuja classe seja “cushycms”. Simples assim: somente acrescentar uma classe CSS de nome cushycms a qualquer elemento da sua página (é aceitável em DIVs, também) para que estas partes “assinaladas” sejam as partes editáveis do conteúdo. Por exemplo:

Parágrafo editável através do CushyCMS!

Com isso, você conta, somente nas áreas que especificou, com a edição de imagens, parágrados, títulos e quaisquer elementos de sua página com a comodidade de um editor WYSIWYG à sua disposição!

E sabe o que é melhor? É possível liberar acesso a outras pessoas para editar somente determinadas páginas de seu site! Isso mesmo: você pode especificar quantas pessoas quiser para serem editores de seu site; então, para organizar o processo, você estabelece quais páginas cada um vai poder editar. Quer dizer, é um sistema de permissões de usuários sem saber e/ou precisar de escrever sequer 1 linha de programação!

Vale a pena utilizar o CushyCMS?

Pessoalmente, acredito que sim, vale a pena utilizar o CushyCMS. Principalmente para os que ainda não sabem programar ou não se interessam pelo assunto, mas desenvolvem sites que precisam de um conteúdo dinâmico para apresentar aos clientes, o CushyCMS é certamente uma ótima opção a ser levada em conta!

Dê uma olhada no screencast de demonstração do CushyCMS e veja de forma mais dinâmica o sistema em funcionamento.

Já usei o Cushy em algumas páginas de testes e tudo saiu conforme o esperado e prometido. E você, já conhecia este sistema para gerenciamento de conteúdo e/ou quer compartilhar suas experiências? Comente!

Acesse o site do CushyCMS

desenvolvimento para web

Rolagem com fundo transparente com CSS

Como a rolagem com fundo transparente funciona

HTML e CSS da rolagem com fundo transparente

Observações sobre rolagem com fundo transparente (e o IE6)

Artigos Relacionados

Perguntas ao cliente para antes e depois de um projeto

Perguntas ao clientes antes do projeto

Qual é o tipo de negócio da sua empresa?

Qual é a reputação de sua empresa?

Qual é seu cliente típico?

Qual é o seu público-alvo?

Você tem concorrentes? Como se diferencia deles?

Com que frequência você gostaria de atualizações?

O que é necessário para que considere o projeto finalizado?

Quais formas de pagamento você usa?

Perguntas ao cliente depois do projeto

Você está satisfeito com os resultados?

Gostou da minha postura profissional durante o projeto?

Alguma outra dúvida?

Não existem outras perguntas que se deve fazer ao cliente?

Artigos Relacionados

7 ferramentas para web designs melhores

Heat Maps

Testes de Usabilidade Online

Teste A/B

Crowdsourcing

Buscas Internas

Serviços de Monitoramento

Alertas do Google

Twitter Search

Blogs

Conclusão sobre ferramentas para melhores designs para web

Artigos Relacionados

4 elementos de design para um bom call to action

Tamanho

Forma

Cor

Posição

Conclusão sobre bons call to actions

Artigos Relacionados

User Interface em dicas rápidas

Faça botões com “cara de botões”: call to action explícito

Reduza o número de cliques

Defina um objetivo

Aumente a performance de seu site

Conclusão sobre user interfaces eficientes

Artigos Relacionados

Otimização WordPress: aumente a performance e desempenho de seu blog / site

Otimize seu código HTML dentro de seu template

Comprima seu CSS

Utilize Sprites CSS

Faça poucas requisições HTTP

Evite carregar elementos externos

Deixe o tamanho da página inicial menor que 150KB

Exiba o resumo ao invés do artigo completo

Reduza o número de plugins

Exiba no máximo 20 imagens na index

Limpe sua sidebar

Caminho absoluto para algumas template tags

Impulsione seu WordPress com .htaccess

Conclusão sobre otimização WordPress

Artigos Relacionados

6 mitos de SEO que você deve evitar

Mito de SEO 1: todas metatags tem igual importância

Mito de SEO 2: SEO é caro

Mito de SEO 3: Sites devem ser submetidos a mecanismos de busca semanal ou mensalmente

Mito de SEO 4: Fornecer conteúdo basta para ficar bem posicionado

Mito de SEO 5: Palavras-chave e termos competitivos não são recomendados

Mito de SEO 6: SEO orgânico não é tão eficaz quanto PPC

Artigos Relacionados

8 dicas para fazer códigos melhores com jQuery

Mantenha a acessibilidade através da degradação

Mover efeitos visuais para a camada de apresentação

Usar Firebug e console.log

Definir padrões sensatos e utilizar uma quantidade limitada de parâmetros

Encapsular seu próprio alias

Definir callbacks próprios

Ficar atento com as diferenças entre navegadores

Não ser excessivo e definir seu propósito