Blogging

Dicas e Apps para Escrever Melhor

Dicas e Aplicações para Escrever Melhor

Dicas e Aplicações para Escrever Melhor 1240 700 Bruno Brito

Se o teu trabalho exige que escrevas com frequência, certamente saberás como pode ser difícil transformar uma ideia em palavras. Escrever é realmente uma arte, especialmente se procurares ser sempre conciso nos teus pensamentos.

“I didn’t have time to write a short letter, so I wrote a long one instead.” – Mark Twain

Mas, como nem todos somos artistas, existem várias aplicações que te podem ajudar. Algumas, infelizmente, só te serão úteis se escreveres frequentemente em inglês – mas, ainda assim, é bom entender como funcionam, porque são técnicas que poderás depois aplicar em qualquer idioma.

E é precisamente por aí que pretendo começar – antes das apps que te ajudarão a escrever melhor, vamos a alguns conselhos práticos.

Algumas dicas para melhorar a escrita

Sempre que começo a escrever algo para a Web (quase sempre em Markdown), considero vários factores.

É importante ter em conta que as pessoas não lêem no portátil como lêem um livro do Harry Potter. Neste ambiente, enfrentas todo o tipo de concorrência das outras tabs e aplicações abertas, e um leitor com a atenção cada vez mais reduzida.

Outra questão pertinente é que a maior parte dos leitores scaneiam o conteúdo – mesmo que alguém goste do teu trabalho, o mais provável é que apenas leia cerca de 20–25% do teu artigo. Ouch!

O que me traz para a primeira dica, que é provavelmente a mais importante…

Facilita ao máximo a leitura

Sempre que possível, utiliza headings e sub-headings para dividir o teu conteúdo, com as tags <h1>, <h2> e <h3> (podes ir até às <h6>). Por norma só deves ter um <h1> por artigo, utilizando depois os respectivos descendentes para organizar o conteúdo.

Headings com o exemplo de Marketing Digital

Para além de uma boa prática de SEO, estarás a dar ao leitor uma ideia da secção em que se encontra, para se situar.

Outras ideias que deves ter em conta:

  • utiliza o itálico para criar um tom conversacional;
  • utiliza o negrito sempre que queiras destacar o que é importante;
  • utiliza listas (como esta) para facilitar a digestão de informação – idealmente, do ponto mais curto para o mais longo.

Pelo caminho, se conseguires acrescentar ainda algumas imagens e vídeos relevantes, melhor. E porque não emojis? ????????????

Outra coisa que gosto de fazer quando termino os meus artigos é fazer zoom out no editor de texto, para analisar a sua “forma” – confirma que os parágrafos não são muito extensos e que o texto respira, tendo em conta as dicas referidas acima.

Escreve música

Igualmente importante será alternares parágrafos longos com curtos, para criar algum ritmo.

A razão? Lê este excerto do livro 100 Ways to Improve your Writing de Gary Provost e vê lá se não concordas com o autor. ????

Gary Provost - Write Music

Escreve para crianças, não para licenciados

Ao início, procurava utilizar as palavras mais caras que conseguia – para mostrar que dominava a língua portuguesa, e porque pensava que existia uma relação entre palavreado caro e ser-se um bom escritor.

Não podia estar mais errado.

É possível que tenhas de usar termos altamente complexos se estiveres a falar de engenharia aeroespacial ou quiseres (propositadamente) filtrar (ou alienar) parte dos teus leitores.

Mas se queres falar sobre marketing, nutrição, desporto ou tecnologia, não faz qualquer sentido deixar pessoas de fora.

Em suma, quanto mais acessível for a tua linguagem, melhor.

Se uma criança de 10 anos perceber o teu texto, terás muito maior sucesso do que se restringires a tua peça aos licenciados de 25.

Existem testes de legibilidade que actuam precisamente sobre isto; avaliam o bloco de texto e, consoante a nota, determinam o grau de escolaridade recomendado para a leitura.

Talvez já tenhas ouvido falar no índice de Flesch da facilidade de leitura, ou no grau de escolaridade Flesch-Kincaid.

São 2 tipos de teste diferentes, mas acabam por ter em conta os mesmos parâmetros – o número de sílabas/palavras presente em cada frase.

Este tipo de testes é algo que praticamente todas as apps aqui referidas têm em conta.

Vamos então conhecer as apps!

Só te peço um favor:

NÃO VIVAS OBCECADO COM ESTAS MÉTRICAS! ????

Ao final do dia, é uma máquina que está a ler o teu texto! Podes e deves ter o seu feedback em consideração, mas não lhe dês a última palavra.

#1: Writefull (OSX, Windows e Linux)

Se só te pudesse recomendar uma aplicação da lista, o Writefull seria sem dúvida a eleita.

Esta é uma aplicação que dá bastante jeito ter à mão quando estás com dúvidas ou procuras sinónimos para alguma palavra.

O que se faz neste tipo de situações? Vai-se ao Google. Bom, esta app vai por ti.

O Writefull acede a 4 serviços Google para te dar resultados:

  • o famoso motor de busca;
  • o Google Books (apenas livros em Inglês);
  • o Google News (fontes de notícias, em 35 idiomas);
  • o Google Scholar (papéis académicos, em 9 línguas).

E o que podes então fazer com esta aplicação? Ora vejamos:

  • Verificar o número de ocorrências de um termo;
  • Comparar o número de resultados para 2 termos, utilizando vs (ex: variado vs diverso)
  • Encontrar palavras para completar a frase no contexto, utilizando _ (ex: dar a _ à palmatória)
  • Encontrar sinónimos no contexto, utilizando * antes e depois da palavra (ex: *beautiful*) – este modo só funciona no Google Books, logo só em inglês.

Esta é uma app gratuita e está disponível para os principais sistemas operativos – no vídeo abaixo ficarás com uma melhor ideia de como funciona.

#2: Cleartext (OSX)

Esta criação do programador Morten Just tem uma premissa muito simples: só te permite utilizar as 1000 palavras mais frequentes da língua inglesa.

O objectivo? Tornar o texto mais fácil de ler e acessível à grande maioria da população.

A aplicação (gratuita) é um simples editor de texto (que até pode ficar full-screen) que não te deixará avançar enquanto não alterares uma palavra que ele não reconhece por algo mais acessível.

Esta app não te dará jeito para textos muito técnicos (ou que não sejam em inglês), mas não deixa de ser um bom exercício para garantir que tentas ser o mais claro possível nas tuas afirmações.

Cleartext

#3: Grammarly (Browser, OSX e Windows)

Esta aplicação é das mais populares do género, mas provavelmente a que utilizo menos. A razão? Só tirarás todo o partido se pagares uma mensalidade de, no mínimo, $11 por mês (se escolheres o plano anual).

O Grammarly tem uma extensão para o Chrome e até versões específicas para o Microsoft Office, e é um corrector ortográfico muito inteligente, porque analisa o contexto da tua frase e percebe se usaste a expressão errada. Vai também avaliar a tua escolha de palavras, a densidade de palavras na frase e a pontuação utilizada.

Terás de te registar para a utilizar e cuidado porque eles são SUPER agressivos no e-mail, para te tentar persuadir a passar para o plano pago.

A aplicação tem ainda uma componente anti-plágio, comparando o texto com uma base de dados de mais de 8 biliões de páginas web.

É uma solução bastante completa para o género, mas só suporta a língua inglesa e o seu preço pode ser considerado proibitivo para muita gente – não deixa de ser uma boa opção se tudo o que precisas é de um bom corrector ortográfico de inglês na web.

#4: Hemingway Editor (Browser, OSX e Windows)

Esta é uma boa alternativa gratuita ao Grammarly, oferecendo um conjunto de sugestões bem pertinentes, como um alerta para o uso da voz passiva ou a indicação de que determinada frase é demasiado complexa para ler.

Hemingway App

Infelizmente, só poderás contar com esta aplicação para textos em inglês.

#5: Expresso (Browser)

O Expresso não é a melhor app para sugestões, mas fornece uma análise bastante detalhada a nível estatístico, como número de frases ou de sílabas e a percentagem de substantivos ou verbos.

Gosto particularmente da secção Metrics, que não só explica o que a aplicação tem em conta, como acaba por servir de guia para escrevermos melhor.

Expresso App

Conclusão

Como vês, aplicações não faltam. Têm, no entanto, funcionalidades bastante similares e estão, por agora, mais orientadas para o mercado de língua inglesa.

Se escreves noutros idiomas, fica-te pelo Writefull e faz um esforço por criares conteúdos fáceis de digerir. A malta agradece!

Como criar um certificado SSL

Como passar para HTTPS – blog WordPress com DigitalOcean (e ServerPilot)

Como passar para HTTPS – blog WordPress com DigitalOcean (e ServerPilot) 620 350 Bruno Brito

Se procuras instalar um certificado SSL (ou Secure Sockets Layer) no teu blog WordPress alojado no DigitalOcean, este tutorial é para ti.

(Se quiseres saber como instalar um blog WordPress no DigitalOcean, podes seguir este tutorial).

Os certificados SSL têm sido alvo de bastante conversa ultimamente; para além de conferirem credibilidade a um site (especialmente se se tratar de uma loja online ou de uma webapp), apresentando o habitual cadeado ao lado da barra de endereços do browser, é também (desde 2014) um sinal de ranking para o Google – o que significa que para além da segurança acrescida, até por motivos de SEO é boa ideia adquirir um.

Os obstáculos para um certificado SSL

Até há bem pouco tempo, existiam no entanto dois problemas:

  1. adquirir um certificado SSL custava dinheiro;
  2. a sua instalação era um processo relativamente complexo.

O Let’s Encrypt, um serviço criado pelo Internet Security Research Group (ISRG), veio resolver o 1º problema.

Este projecto saíu da beta este ano e é, neste momento, a melhor opção gratuita para criar certificados SSL, tendo registado enorme adopção nos primeiros meses de existência, contando já com mais de 2 milhões de certificados emitidos.

Logotipo Let’s Encrypt

Resta-nos a 2ª questão – o processo de instalação. Existem inúmeros guias pela web fora, como este, que são interessantes se quisermos entender melhor os passos necessários para a emissão de um certificado.

Não é um processo muito complicado para quem tem alguma confiança na linha de comando, mas como temos de repetir este processo de 3 em 3 meses para renovar o certificado, o melhor será mesmo recorrer a um script – felizmente, também já alguém tratou disso.

Assim, o tutorial que se segue tem em conta este excelente script criado por Rudy Affandi – não só serão menos passos como só terás que fazer isto uma vez – e sim, também funciona para vários blogs na mesma conta DigitalOcean!

Requisitos para este tutorial

Antes de começar, vamos então recordar os requisitos:

NOTA: outras versões do Ubuntu poderão funcionar, mas estas são aquelas que testei. O autor do script também já referiu que pode não ser compatível com o Ubuntu 16.04.

Logotipos ServerPilot, DigitalOcean e WordPress

Para este guia, adquiri um domínio barato para testes (testesdobrito.xyz), que servirá como exemplo daqui em diante.

Vamos começar!

#1: Acesso via SSH

O primeiro passo será aceder à máquina do DigitalOcean via SSH. Como estou num Mac, gosto de utilizar o iTerm, que é grátis. Em Windows, o Powershell não é mau mas prefiro o Git Bash, simplesmente por ter uma shell que me é mais familiar.

Seja em que programa for, deverás aceder à máquina digitando ssh [email protected] trocando os “x” pelo IP da tua máquina DigitalOcean. De seguida, deves inserir a password da conta root, que deverás ter recebido por e-mail quando criaste o droplet no DigitalOcean.

Acesso SSH DigitalOcean

Agora que o login está efectuado, estás ligado remotamente e tudo o que fizeres será nesse computador.

#2: Instalação do script

De seguida vamos descarregar o script que referi em cima e torná-lo executável. O mesmo deve ficar instalado na pasta /usr/local/bin.

Para tal, estes são os comandos a inserir:

  1. cd /usr/local/bin para navegar até essa directoria;
  2. wget https://raw.githubusercontent.com/lesaff/serverpilot-letsencrypt/master/sple.sh para descarregar o ficheiro do script directamente do Github;
  3. sudo chmod +x /usr/local/bin/sple.sh para o tornar executável.

Comandos para descarregar script do Github

#3: Emissão do Certificado Let’s Encrypt

Chegou a altura em que devemos arrancar o script para instalar o certificado Let’s Encrypt no nosso blog. Para tal, basta escrever sudo sple.sh, confirmar que o queremos instalar (digitando Y) e inserir o nome da app do nosso blog, que deverá ser o mesmo do ServerPilot.

Dados da app no ServerPilot

Por fim, inserimos o(s) domínio(s) respectivo(s). Para concluir o processo, após um par de minutos terás de inserir o teu e-mail e concordar com a licença.

Execução do script HTTPS

Passados alguns segundos, deverás ler a seguinte mensagem de sucesso:

Your Let's Encrypt SSL certificate has been installed. Please update your .htaccess to force HTTPS on your app
Cheers!

Está feito! Vamos só então forçar o HTTPS, conforme sugerido, porque neste momento estás a apresentar ambas as versões do site.

#4: Forçar o HTTPS (redireccionar de HTTP para HTTPS)

Agora que tens uma versão HTTPS do site, deverás forçar o redireccionamento, para que quem não digite https:// seja automaticamente transportado para a versão segura.

Para tal, deverás ir à raíz da tua aplicação WordPress (que será em /srv/users/serverpilot/apps/xxx/public, trocando o xxx pelo nome da tua app) e criar (ou modificar) um ficheiro intitulado .htaccess (atenção ao .) – podes realizar este passo através de um programa de FTP como o Filezilla ou através do terminal, como preferires.

Nesse ficheiro, deves colocar o seguinte pedaço de código logo no início:

RewriteCond %{HTTP:X-Forwarded-Proto} !=https
RewriteRule .* https://%{HTTP_HOST}%{REQUEST_URI} [R=302,L]

E pronto! Agora, se digitares http://oteusite.com deverás ser automaticamente levado para https://oteusite.com.

Redireccionamento HTTPS

Está feito! Em princípio deverá ficar tudo OK. Se não for o caso, sugiro que comeces por instalar o plugin SSL Insecure Content, porque ainda podem existir alguns redireccionamentos em falta.

Se tiveres uma CDN como a Amazon Cloudfront, é possível que tenhas de realizar mais algum trabalho de investigação – este blog, por exemplo, utiliza CloudFront e ainda não consegui que funcionasse a 100% com HTTPS.

Conclusão

Como vês, criar um certificado HTTPS para um blog WordPress não tem que ser dispendioso ou complicado – e graças a este script, não terás que repetir estes passos de 3 em 3 meses!

Estes serviços estão cada vez melhores! ???? ???? ????

Como ter vários blogs Wordpress numa só conta DigitalOcean

Como ter vários blogs WordPress numa só conta DigitalOcean

Como ter vários blogs WordPress numa só conta DigitalOcean 620 350 Bruno Brito

A DigitalOcean começou em 2011 e registou um crescimento verdadeiramente astronómico nos últimos tempos – é, actualmente, uma das 3 maiores empresas de hosting do mundo!

Tal não será de admirar se experimentares o serviço – por 5 dólares por mês, tens uma VPS (Virtual Private Server) pronta a utilizar, que te garante maior liberdade e velocidade se compararmos com os alojamentos partilhados que são, para sites com muito pouco tráfego, geralmente a 1ª escolha.

As VPS sempre foram vistas como difíceis de configurar ou dispendiosas, mas como verás, a DigitalOcean veio simplificar o processo. E, com VPS a partir de 5 dólares, o alojamento acaba até por ser mais barato do que muitos serviços de alojamento partilhado.

Mas se estás a ler este artigo, provavelmente já conheces os benefícios de uma VPS e queres simplesmente saber como tirar maior partido do serviço, certo?

Vamos a isto!

DigitalOcean + ServerPilot = WIN!

Na passada semana, migrei 14 blogs WordPress para uma conta de $5 mensais da DigitalOcean. Aqui, vou-te explicar os meus passos, para beneficiares de várias instalações WordPress – não te esqueças é que se alguns dos teus sites forem populares (ie, muitos milhares de visitas diárias), uma conta de $5 poderá não chegar, mas podes esticá-la ao máximo se utilizares um plugin de caching como o W3 TotalCache e uma CDN, que podes aprender a configurar aqui.

Vamos então começar pelo DigitalOcean.

Criar um droplet no DigitalOcean

Depois de te registares no serviço, deves criar um droplet.

O DigitalOcean anuncia com orgulho que podes ter uma aplicação instalada em menos de 1 minuto recorrendo a um dos seus populares droplets. Com um par de cliques, poderás instalar um blog WordPress, Drupal ou Ghost.

Com a nova parceria DigitalOcean / Bitnami, novas apps são constantemente adicionadas, tornando o serviço ainda mais interessante.

As apps do DigitalOcean

É também aqui que escolhes as capacidades da tua máquina – tendo impacto directo no preço – e a região (tens 3 à escolha na Europa).

Configurar droplet no DigitalOcean

Aqui, o instinto seria criar um droplet WordPress, mas não é isso que vamos fazer. Vamos, isso sim, criar uma Distribution que terá de ser o Ubuntu 14.04 de 64-bit.

A razão para isto é simples: temos de integrar o ServerPilot, que só funciona nesta configuração. Se tivesses optado pela Application WordPress, só terias direito a um blog por droplet, que não é o pretendido, visto que se tivesses 3 blogs terias de pagar, no mínimo, 15 dólares mensais.

Distribuição Ubuntu no DigitalOcean

Integrando o ServerPilot

Agora, é tempo de criar uma conta no ServerPilot. O ServerPilot tem uma versão gratuita que permite criar apps sem limites, pelo que não terá qualquer custo para nós.

Ao delegarmos a instalação do WordPress para o ServerPilot, estamos basicamente a garantir que esta instalação será optimizada para a nossa VPS do DigitalOcean, criando uma instalação mais segura e mais rápida (utilizando Nginx), como podes consultar aqui.

Criada a nossa conta gratuita, devemos depois então associá-la ao nosso servidor, onde inserimos o endereço IP, a password SSH para ‘root’ (que deverás receber num e-mail enviado pela DigitalOcean) e uma palavra-passe, à tua escolha, para o utilizador SFTP que o ServerPilot criará por ti, com o nome serverpilot.

Configurar ServerPilot

Criar uma app

Criado o servidor, podemos prosseguir para a configuração da nossa appé aqui que será instalado um WordPress por nós.

Configurar WordPress no ServerPilot

Damos um nome, indicamos o domínio e decidimos se queremos uma instalação fresca do WordPress ou não. Se já tiveres uma migração do WordPress preparada, podes ignorar este campo.

Se optares por uma instalação nova, é aqui que defines o nome do teu blog e os acessos, para fazeres depois o login.

Por fim, escolhes a versão do PHP e o servidor, que será aquele que inseriste no passo anterior.

Se não colocaste o visto em WordPress, o próximo passo será criar uma base de dados, dando um nome, um username e uma password, para depois introduzires no habitual wp-config.php do WordPress (o DB_HOST será “localhost”, já agora).

Criar uma base de dados no ServerPilot

Se optaste por uma instalação nova do WordPress, o teu blog já deverá estar a funcionar!

Copiando os ficheiros para a migração

Este é um passo opcional, que assume que queres importar a informação do teu WordPress já existente – para tal, a minha recomendação é utilizares o brilhante plugin Duplicator, que cria um package que consiste num ficheiro ZIP com todos os conteúdos e um ficheiro, de nome installer.php.

Começa por instalá-lo no teu blog WordPress actual e activá-lo. Depois, cria o package, que levará alguns minutos, e descarrega-o para o teu computador.

Depois, deves aceder ao FTP da DigitalOcean (como root ou como serverpilot, cujo acesso configuraste em cima) e fazer upload dos 2 ficheiros que descarregaste.

NOTA: o caminho no teu FTP deverá ser algo do género /srv/users/serverpilot/apps/o_teu_blog/public

Para o configurar, basta depois ires ao [teudomínio.com]/installer.php e completar a instalação, dando os detalhes da base de dados que configuraste em cima.

Terminado este processo, já deverás ter o teu blog pronto a usar!

Adicionando mais blogs WordPress

O mais trabalhoso já passou. Agora é repetir estes passos para cada instalação ou migração WordPress, com umas pequenas diferenças.

No DigitalOcean

… não precisas de criar mais nenhum droplet. Tudo o que precisas é de ir à área DNS da tua conta e adicionar o domínio, escolhendo o droplet que já criaste.

DNS - DigitalOcean

No ServerPilot

… deves repetir todos os passos descritos, criando uma nova app com o domínio respectivo e, opcionalmente, a base de dados e posterior upload dos ficheiros.

Por fim, não te esqueças de actualizar os nameservers

Se já tinhas o teu site online, terás que actualizar os teus nameservers, se não os utilizadores continuarão a ser redireccionados para o site do alojamento antigo.

Se quiseres evitar o downtime, podes utilizar um serviço intermediário como o CloudFlare, que é grátis e excelente para gerires os teus DNS – basta apontares os teus nameservers para o CloudFlare e sempre que precisares de fazer alguma alteração, actualizas no CloudFlare (em vez de ser na empresa onde tens o teu domínio), que o disponibiliza instantaneamente.

Adicionar um Website no CloudFlare

Se adquiriste um domínio novo, podes claro também ligá-lo aos nameservers da CloudFlare ou directamente aos da DigitalOcean, que são:

ns1.digitalocean.com
ns2.digitalocean.com
ns3.digitalocean.com

NOTA: os nameservers da CloudFlare são variáveis, pelo que te deves registar e adicionar um site para ver quais é que te são atribuídos. Acredita que este serviço vale muito a pena!

Conclusão

O DigitalOcean é o serviço de hosting deste site desde Novembro de 2014 e estou super satisfeito até hoje.

As VPS deixaram ser um “bicho papão”, estando agora muito acessíveis e fáceis de utilizar, mesmo se o teu objectivo passa por configurar um simples blog.

E, como se viu, podes ir muito longe com apenas 5 dólares mensais – com a ajuda do ServerPilot podes criar um número ilimitado de blogs e, se alguns deles forem (ou se tornarem) populares, podes sempre configurar uma CDN como a Amazon Cloudfront para aliviar o tráfego do teu site (e torná-lo ainda mais rápido)!

Sublime Text – os melhores packages para Blogging e Web Development

Sublime Text – os melhores packages para Blogging e Web Development 620 350 Bruno Brito

O Sublime Text é um dos editores de texto mais populares da actualidade e por boa razão – é verdadeiramente fantástico!

Está disponível para os 3 principais sistemas operativos (OSX, Windows e Linux) e apesar de ser pago, a versão gratuita permite-nos utilizar o programa sem restrições (tudo o que teremos é um pequeno pop-up a surgir a cada 20 ou 30 saves para nos lembrar que a versão paga existe).

O pop-up da versão gratuita do Sublime

Um dos principais factores que contribuem para esta popularidade é o vasto conjunto de packages (extensões para o programa, ou plugins) que podemos instalar. Existem centenas de packages para este editor de texto, mas neste artigo tenciono focar-me nos 10 que utilizo com maior frequência, seja para escrever artigos ou para Web Development.

NOTA: O Sublime Text está oficialmente na versão 2, mas há já vários meses que utilizo a versão 3. Apesar de ainda estar em beta, está perfeitamente estável e é esta a versão que recomendo. Todos os packages que indico neste artigo funcionam com a versão 3, mas devem também funcionar com a versão 2, se necessário.

Como instalar packages no Sublime Text

Antes de avançar, uma nota sobre como instalar packages no Sublime. A melhor forma de o fazer é sempre através do Package Control, que é uma espécie de download manager interno do Sublime.

O mesmo pode ser instalado através da consola, indo a View-Show Console.

Lá, devemos inserir o código presente neste site, que dependerá da versão do Sublime instalada.

O código que deves colar para instalar o Package Control

Com o Package Control instalado, devemos depois executá-lo indo a Tools-Command Palette e escrever “install” – o primeiro resultado deverá ser Package Control: Install Package, que é a opção desejada.

A partir daí é muito fácil: basta escrever o nome da extensão que procuramos e o Package Control descarregará e instalará o package por nós.

O programa é super leve, portanto não tenhas medo de instalar os packages que desejares. Vamos lá então “artilhar” o nosso Sublime!

Packages para Blogging

Todos os meus artigos são escritos no Sublime Text e para este propósito só recorro a 2 extensões. Outra funcionalidade que adoro, mas que vem já de origem no Sublime, é o Distraction Free Mode (View-Distraction Free Mode) que coloca o Sublime em full-screen, exibindo apenas o que escrevemos.

Markdown Editing

Se escreves em Markdown (e se ainda não o fazes, realmente devias), ficarás contente em saber que existe um excelente package para formatar o texto.

O Markdown Editing detecta ficheiros .md e mudará o fundo do teu editor de texto para cinzento claro, aplicando depois a devida formatação (negrito, itálico, títulos, etc) para que vejas uma versão mais aproximada do resultado final do teu artigo.

Um exemplo para mostrar a formatação do Markdown Editing

Word Count

Às vezes é importante termos uma ideia de quantas palavras já escrevemos. O Sublime dá-nos bastante informação, mas só terás acesso ao número de palavras se instalares este package.

O número de palavras ficará disponível em baixo, na status bar.

Word Count para Sublime Text

Packages para Web Development

O Sublime Text é um dos editores de texto preferidos dos programadores e depois de veres o que estes packages podem fazer por ti, vais perceber o porquê.

A maior parte destas extensões valem a pena mesmo se ainda estiveres a dar os primeiros passos em HTML e CSS.

Autoprefixer

Se estiveres a utilizar algumas funcionalidades mais avançadas do CSS3, é quase inevitável que tenhas de adicionar alguns vendor prefixes para garantir o seu devido funcionamento na maioria dos browsers.

Mas é uma chatice escrever o mesmo código várias vezes, para não falar do trabalho que é ter de saber quais são os elementos que necessitam dos já mencionados vendor prefixes, certo?

É aqui que entra o Autoprefixer – depois de instalado, só tens de lançar a Command Palette (Tools-Command Palette) e escrever Autoprefix CSS, que todos os prefixos necessários serão imediatamente escritos por ti.

Vendor Prefixes para CSS

Browser Refresh

Em Web Development, é frequente teres de gravar as tuas alterações no Sublime, voltar para o browser e fazer um refresh. Uma tarefa algo monótona, se pensares no número de vezes que isso acontece por dia.

Há outras formas de contornar esse problema, mas no Sublime, o Browser Refresh faz esse trabalho por ti. Se já tiveres a tua página aberta no browser, podes configurar um atalho para o teu teclado (o chamado key binding) que fará com que esta extensão grave o teu projecto, passe para o browser e de imediato o refresque sem teres de fazer nada.

Podes ver como configurar este package no ponto 2 desta página – podes mudar o atalho do teclado (o atalho predefinido é o command/control+shift+r) e o browser (que por predefinição é o Chrome).

Color Highlighter

Se trabalhas muito com cores, vais adorar esta extensão!

O Color Highlighter vai sublinhar o teu código com a cor respectiva, permitindo-te assim identificar com facilidade qual a cor que estás a usar. Assim, vais poder confirmar se #0099ff é realmente aquele azul em que estavas a pensar.

Mas o Color Highlighter não funciona apenas com valores hexadecimais; para além de suportar todos os formatos de cor de CSS, também suporta variáveis SASS, por exemplo, e se utilizarmos um valor RBGA com transparência, a cor apresentada já terá isso em conta.

Nesta imagem podes ver como este package é versátil!

O Color Highlighter em acção

Por fim, este plugin conta ainda com um color picker, para a eventualidade de querermos rapidamente alterar a cor. Basta colocar o cursor na cor a ser alterada e, ao clicarmos no lado direito do rato, teremos no menu de contexto a opção Choose color, que lançará o picker.

O Color Picker do Color Highlighter

Emmet

O Emmet é algo que recomendo fortemente se trabalhares muito com HTML e CSS. É daquelas ferramentes essenciais para quem gosta, como eu, de escrever depressa.

Pode levar algum tempo a decorar os comandos, mas verás grandes ganhos de produtividade se o começares a utilizar aos poucos.

Podes testemunhar o potencial do Emmet se vires o vídeo de demonstração presente no site oficial. Depois disso, a melhor forma de aprenderes a utilizar o Emmet é consultares a documentação.

Em HTML é possível que leves mais tempo a conhecer todo o seu poder, mas em CSS é praticamente imediato: assim que começares a escrever código (mesmo que com erros) ele adivinhará quase sempre o que querias escrever, facilitando-te bastante o trabalho.

O Emmet existe, enquanto plugin, para os principais editores de texto, não sendo o Sublime uma excepção.

GitGutter

Se trabalhas com Git, este é um óptimo package para verificares rapidamente quais as linhas em que houve alterações no ficheiro desde o teu último commit.

As cores nas linhas informam-te quando existiu alguma adição, edição ou remoção de conteúdo.

O GitGutter para Sublime Text em acção

HTMLBeautify

Se gostas de ver o teu código bonito e devidamente indentado, parabéns! Estás a seguir uma das maiores boas práticas da programação.

O problema é quando já tens tantas <div>s que nem sabes por onde começar. Se te sentires perdido, dá uma chance a este package do Sublime – o mais provável é ele fazer um trabalho brilhante por ti!

Basta ires a Edit-Beautify HTML e o teu código ficará perfeitamente legível, como que por magia! Repara no “antes e depois” deste exemplo, que coloquei aqui em GIF.

O HTMLBeautify indenta o código por ti

SideBarEnhancements

A barra lateral do Sublime Text é um dos pontos fracos do programa e algo que deveria ser melhorado. Felizmente, já alguém tratou disso, adicionando várias funcionalidades críticas ao menu de contexto.

O SideBarEnhancements vai-te facilitar o trabalho de criar pastas, abrir ficheiros no Finder ou outras apps e, sobretudo, ajudar-te na pesquisa.

Estas são todas as opções que o SideBarEnhancements te oferece:

Tudo o que o SideBarEnhancements te permite fazer

SublimeLinter

O syntax highlighting ajuda imenso os programadores, mas às vezes é preciso um pouco mais… não seria bom saber se o nosso programa está bem escrito sem ter de o correr e ver as mensagens de erro?

Bom, é aqui que entram os Linters!

Os Linters estão disponíveis para variadíssimas linguagens (JavaScript, Ruby, PHP, Python…) e vão-te alertar quando algo vai gerar um erro – como a ausência de um ; ou de um end no teu código.

Neste exemplo, repara naquela bola vermelha. Ela está lá porque falta uma vírgula depois de controller: 'MainCtrl' .

Um exemplo de Linting em JavaScript

Para utilizares os Linters, deves não só instalar o SublimeLinter, como o plugin da linguagem respectiva – que geralmente estará disponível aqui.

Da primeira vez poderás ter de perder algum tempo até configurar devidamente o Linter, mas acredita que é tempo bem gasto! Vais passar a programar muito menos às escuras e vai ser a extensão que mais tempo te poupará daqui por diante.

Como sincronizar os nossos packages e definições entre vários computadores

É normal que queiras ter todos os packages instalados nos teus computadores, como acontece por exemplo com as extensões do Chrome.

Para tal, o melhor será fazeres backup da pasta Packages/User, seja para um serviço como o Dropbox, ou para o Github.

Este artigo poderá ser útil para ti se tiveres dificuldades no processo.

Conclusão

E pronto, ficaste a conhecer algumas das minhas principais armas secretas do Sublime. Existem muitas mais, como podes ver aqui, para além de inúmeros temas, que dão vida ao teu editor de texto (o tema que utilizo actualmente é o Materialize, já agora)!

Escapou-me alguma? Quais são as tuas extensões preferidas do Sublime?

O novo BrunoBrito.PT

Apresentando o novo BrunoBrito.PT

Apresentando o novo BrunoBrito.PT 620 350 Bruno Brito

Se já visitaste este site antes, provavelmente terás reparado que algo mudou. Este post serve precisamente para explicar os motivos, o desafio e as lições que se retiraram da migração deste site, de Ghost para WordPress.

Caso sejas novo neste site, este era o look anterior, que utilizava a plataforma Ghost e o tema Unblock:

BrunoBrito.PT - site antigo

O problema (e a solução)

Este redesign não estava nos planos, pelo menos não para tão cedo. No entanto, o meu antigo hosting (Ghostify) acabou por acelerar o processo; no dia 30 de Outubro recebi um e-mail a informar-me que o serviço iria fechar as suas portas no final de 2014.

E-mail Ghostify

Não posso dizer que fiquei surpreendido quando recebi esse e-mail, visto que há já alguns meses que o serviço estava a piorar – os e-mails e tweets ficavam vários dias sem resposta e as actualizações à versão do Ghost demoravam a surgir. Era tempo de encontrar uma nova “casa” para o blog.

A solução mais simples passaria por exportar o conteúdo do blog actual para um novo hosting que suportasse o Ghost, mas a lenta evolução desta plataforma fez-me pensar 2 vezes em manter esta alternativa ao WordPress.

Como se tal não bastasse, o autor do tema que tinha adquirido já tinha deixado claro que não faria mais actualizações ao mesmo, pelo que ficaria sem as novas funcionalidades do Ghost quando estas surgissem.

Apesar de admirar a velocidade e simplicidade do Ghost, os serviços de hosting para esta plataforma não praticam um preço simpático, pelo menos se considerarmos que existem alternativas bem mais em conta para um simples blog pessoal.

O valor mais baixo praticado pelo hosting da equipa que desenvolve o Ghost é de $10 por mês, algo que considero demasiado dispendioso para o que é. Para além da questão do custo, estava na hora de passar para algo com maior suporte e número de funcionalidades.

Era tempo, portanto, de migrar para o WordPress.

Passar para WordPress acaba por ser um pouco o regresso à minha zona de conforto (já trabalho com o WordPress há muitos anos) mas o final do Ghostify acabou por ditar também o fim (pelo menos para já) da minha aventura com o Ghost.

Obstáculos

Os benefícios de passar para WordPress eram óbvios, mas esta migração não seria possível com um par de cliques – afinal de contas, estava também a passar de um CMS (Content Management System) para outro. Era como começar de novo – com conteúdos já criados, é certo, mas com tudo o resto por adaptar.

Após alguma pesquisa, percebi que a melhor forma de garantir que tudo funcionaria perfeitamente seria se refizesse tudo… à mão. Felizmente, tinha um site relativamente pequeno e 2 meses para preparar todo este projecto.

Outro problema seria a performance – os serviços de hosting optimizados para Ghost eram francamente rápidos, mas se passasse para um hosting partilhado, a performance ficaria bastante abaixo. O desafio estava em encontrar uma solução com um preço competitivo (similar ao do Ghost, cerca de $5 por mês) mas sem criar uma experiência frustrante para o utilizador.

Em resumo, no final desta transição, queria garantir que:

  • todos os artigos e imagens estariam neste novo site;
  • não haveria impacto no SEO e social shares;
  • os comentários existentes não seriam perdidos;
  • a performance do site permaneceria elevada.

Objectivos traçados – mãos à obra!

A Checklist

Existiam vários pontos importantes que se podem aplicar a muitas outras migrações de sites. Para garantir que nada ficava esquecido, criei esta checklist no meu programa de eleição para gerir tarefas, o Wunderlist:

Checklist no Wunderlist

Vamos então conhecer cada ponto um pouco melhor…

Performance do site

Esta era uma questão crítica, porque como referi em cima, se recorresse a um plano de hosting partilhado e lá instalasse o WordPress, poderia acabar por ficar com um site bastante lento.

Existem excelentes soluções de hosting optimizadas para WordPress (como o WP Engine) mas o preço é proibitivo para quem apenas quer um simples blog pessoal.

Depois de bastante pesquisa, acabei por optar pela solução da DigitalOcean – uma VPS (Virtual Private Server) acessível, a 5 dólares por mês, que dá direito a configurarmos o nosso servidor como bem entendermos. Lá, instalei o Ubuntu 12.04.5 x64 e sincronizei-o com o serviço ServerPilot, que é gratuito.

Criar um droplet no Digital Ocean

O ServerPilot é um projecto específico para o hosting da DigitalOcean que não só instala o WordPress por nós, como configura o Nginx para o frontend, tornando toda a estrutura mais leve e rápida.

No entanto, mesmo com o Nginx, o site não aguentaria muitos utilizadores em simultâneo se o CPU e a RAM estivessem a trabalhar constantemente. Era importante garantir que a VPS trabalharia o mínimo possível.

Para garantir uma boa gestão dos recursos da VPS, instalei posteriormente o popular plug-in W3 Total Cache e configurei uma nova CDN na Amazon Cloudfront.

Segui ainda os vários passos deste artigo para optimizar a velocidade de carregamento.

O novo BrunoBrito.PT no Pingdom

Os resultados foram bastante positivos, como este teste de velocidade do Pingdom confere. Agora sim, o site estava preparado para receber visitas!

Importar todos os artigos e imagens

O site até poderia ser o site mais rápido do mundo, mas que utilidade teria sem conteúdo? O próximo passo seria claro passar todos os artigos do blog original para o WordPress.

Existe muita documentação sobre como passar de WordPress para Ghost, mas o inverso é raro. Como este blog tem cerca de 50 artigos, optei por fazê-lo “à mão”, até porque teria de re-inserir todas as imagens manualmente, visto que estavam associadas a outra CDN e com menos informação do que aquela que o WordPress permite. Algumas imagens de destaque tiveram ainda de ser redimensionadas ou mesmo alteradas.

Não foi certamente a tarefa mais divertida ou produtiva, mas foi a melhor forma de garantir que tudo ficava conforme pretendido.

Importados os artigos, o próximo passo seria alterar a data de cada post para a data original de publicação, para ficarem todos na ordem original e com a mesma informação.

Garantir que os links eram iguais aos anteriores era crítico, não só para garantir que não surgiam broken links, como para efeitos de SEO. Esta seria ainda a única forma de preservar os social shares que cada artigo já possuía.

Os social shares foram preservados

Este passo tornou-se mais simples com esta folha de cálculo:

Folha de cálculo da migração

Migrar Disqus

O Disqus é a plataforma que geria todos os comentários do anterior blog e também aquela que pretendia utilizar neste WordPress.

Como todos os URLs ficariam iguais (como se viu no passo anterior) e como o ID do Disqus seria o mesmo, em teoria tudo funcionaria como devia.

Pelo sim, pelo não, optei por confirmar primeiro via Twitter para depois proceder à instalação do plugin para WordPress.

Disqus Help - Tweet

Dito e feito! Este passo não poderia ser mais simples.

Traduções do theme

O WordPress foi instalado na versão portuguesa, para garantir que as funcionalidades principais estariam nesse idioma, mas a instalação do tema obrigava à tradução de mais elementos.

A maior parte dos temas premium traz ficheiros .po para facilitar as traduções. Tudo o que temos de fazer é abrir o ficheiro .po com o Poedit, traduzir os campos necessários e fazer o upload do resultado por FTP.

Screenshot Poedit

Styling

O theme escolhido para este blog foi o Gonzo, um tema bastante popular para WordPress. No entanto, queria torná-lo mais parecido com o design do site anterior, pelo que utilizei os mesmos tipos de letra e código de cores e personalizei o tema WordPress com as técnicas que descrevo aqui.

Custom CSS no novo BrunoBrito.PT

Pelo caminho, criei ainda um novo logotipo, um favicon e uma nova barra lateral, como se pode ver.

Alterar nameservers

O passo final ocorreu durante o dia 23 de Dezembro e consistiu na alteração dos nameservers, para que brunobrito.pt apontasse agora para este novo site.

Em algumas horas, o novo site estava 100% disponível!

Conclusão

Uma migração não tem que ser um quebra-cabeças, desde que bem planeada.

Depois de todos os passos, esperava encontrar vários problemas – links que não funcionavam, imagens em falta, problemas em restaurar comentários – mas a verdade é que tudo correu perfeitamente à primeira, sem surpresas.

Existe ainda muito trabalho pela frente, mas o mais difícil já está. Espero que gostes!

4 razões para não utilizar títulos clickbait

4 razões para NÃO utilizares estes títulos

4 razões para NÃO utilizares estes títulos 620 350 Bruno Brito

5 rapazes estavam a caminho da praia. Nem vais acreditar no que acontece a seguir!!

Esta foi a firma que mais facturou no último trimestre…

Testámos 2 produtos – um deves comprar, o outro não. Descobre quais!

O governo sabe algo que nós não sabemos. E vais ficar chocado quando souberes o que é!

O filme __________ foi o grande vencedor dos Óscares.

10 razões para visitar Lisboa (a minha preferida é a #7)

Já todos vimos títulos deste género. E, provavelmente, até clicámos em alguns. Afinal de contas, a nossa curiosidade torna-nos vulneráveis a este tipo de links.

A fórmula deste tipo de títulos (conhecidos na web como clickbait) é simples:

  1. Despertar curiosidade;
  2. Não concluir o raciocínio.

É uma fórmula simples e que tem trazido grandes resultados nos últimos anos – o Buzzfeed ou o Upworthy que o digam.

Estes sites rapidamente se tornaram populares por nos começarem a contar histórias… sem nunca as acabar.

Estes títulos têm que despertar a nossa curiosidade, onde para sabermos a resposta, teremos de clicar no link. É quase um jogo, uma aventura. E, pela sua natureza, garantem um elevado número de cliques.

Idealmente estes títulos vão ainda incluir números, visto que somos naturalmente atraídos por listas e, quando possível, por uma mensagem que desperte um pouco de medo em nós.

Antes de avançar, quero salientar que esta não é uma crítica a este tipo de sites. Apesar de toda a polémica e dos vários movimentos contra o clickbaiting (como esta hilariante conta do Twitter), admiro estes projectos.

Mesmo seguindo esta fórmula, existem inúmeros desafios e muito trabalho pelo caminho. O Upworthy, que teve a amabilidade de partilhar a sua estratégia neste excelente SlideShare, é prova disso mesmo.

Nesse mesmo SlideShare, podemos constatar a importância que o Upworthy dá ao poder dos títulos:

Upworthy e as suas 25 headlines

Para cada notícia, o UpWorthy cria nada mais nada menos que 25 títulos. Depois de os testar, aquele que garante a maior taxa de cliques passa a título permanente do artigo. Assim, o tempo passado no site e o conteúdo consumido será, muito provavelmente, maior.

Qualquer jornalista ou blogger saberá que sem um bom título, dificilmente um conteúdo triunfará. E sendo estas headlines irresistíveis, torna-se inevitável perguntar:

Valerá a pena seguir a abordagem clickbait?

Eu penso que não. E eis o porquê:

#1: Colocas a expectativa lá no alto

Estes títulos trazem sempre algum hype com eles. Quantas vezes não ficámos desiludidos com o que lemos depois de clicar no artigo?

Como estes títulos são, por natureza, bastante vagos, dificilmente correspondem às nossas expectativas. Ao manter as pessoas “no escuro” até clicarem, cria-se uma grande separação entre o esperado e o que é entregue.

Quanto maior a promessa no teu título, maior terá de ser a qualidade do conteúdo. A fasquia está bem lá no alto e a verdade é que muitas notícias/artigos não estão, de todo, à altura do título, o que provoca uma enorme desilusão.

#2: Não é benéfico a nível de SEO

Este tipo de títulos raramente contêm as palavras-chave no título e, muitas vezes, é apenas acompanhado de um texto curto e de um vídeo. São geralmente conteúdos virais, de consumo rápido e que descuram a optimização para motores de busca.

A bounce rate é também elevada, visto que a desilusão criada no ponto #1 convida os utilizadores a sair desse site rapidamente.

Existem, claro, excepções, mas um título pouco específico (acompanhado de um artigo de qualidade abaixo da média) dificilmente te dará uma posição interessante no Google.

#3: Ficas dependente das plataformas de Social Media

Nos 10 Mandamentos de Social Media, referi a importância de “não construir a casa em terra alugada”. Se dependes exageradamente das redes sociais para obter tráfego, deves rever a tua estratégia assim que possível, especialmente se adoptaste este tipo de títulos.

O Facebook comunicou, em Agosto desde ano, que é contra o clickbait.

Nesse post, a rede de Mark Zuckerberg confirma que este tipo de links, apesar de atraírem muitos cliques, causam também bastante insatisfação nos utilizadores.

Para despromover os links clickbait, um dos critérios do Facebook é precisamente o referido no ponto #2:

If people click on an article and spend time reading it, it suggests they clicked through to something valuable. If they click through to a link and then come straight back to Facebook, it suggests that they didn’t find something that they wanted. With this update we will start taking into account whether people tend to spend time away from Facebook after clicking a link, or whether they tend to come straight back to News Feed when we rank stories with links in them.

#4: Os leitores sentem-se gozados

Ao início, é como um jogo. Clicamos no link para saber qual é o ponto preferido do autor, ou para descobrir a resposta à pergunta que o título sugere.

Com o tempo, começamos a exigir respostas logo no título (como acontecia antes!). Queremos saber se é merecedor do nosso tempo, se vale a pena abrir mais uma tab. E depois de algumas más experiências, deixamos de levar estes títulos a sério.

Mesmo se funcionar durante um tempo, nunca é boa ideia gozar com a nossa audiência.

Podes gozar com eles uma vez, duas, ou até três. Mas eles vão acabar por deixar de te visitar.

Conclusão

Podes (e deves) testar os títulos. Deves, sem dúvida, perder mais do que 5 minutos a pensar numa headline para o teu artigo épico. Mas se estás a oferecer uma pequena pausa no dia de trabalho, apresentando um vídeo divertido, não o promovas como o maior acontecimento do universo – a não ser que realmente seja.

Tem cuidado com o que prometes e ajusta-o ao nível do que entregas. Se queres utilizar títulos bombásticos… certifica-te que o teu conteúdo também o é.

Tem também atenção ao tipo de notícia que é e a entidade que representas. Por exemplo, será que aqui o clickbait era mesmo necessário?

Por fim, não te esqueças que, pelas razões acima, estes títulos estão a começar a danificar a credibilidade de alguns sites. Se procuras criar um conteúdo evergreen, algo que perdure no tempo – o melhor será pensares numa headline mais representativa do que ofereces e um artigo mais preocupado com SEO.

Como personalizar um tema Wordpress com o Firebug

Como personalizar um tema WordPress com o Firebug

Como personalizar um tema WordPress com o Firebug 620 350 Bruno Brito

Se tens um site (ou estás a pensar criar um brevemente), provavelmente já conhecerás o WordPress. Afinal de contas, 1 em cada 5 sites utiliza esta plataforma.

Não sendo o caso deste blog, que usa o Ghost, a verdade é que o WordPress ainda é o CMS (Content Management System) top-of-mind para a maioria das pessoas, muito devido à sua versatilidade, ao apoio da comunidade e ao número de plug-ins e integrações de que dispõe.

Actualmente na versão 4, o WordPress permite criar qualquer tipo de site com pouco esforço – seja ele um simples blog, um site institucional ou até uma loja.

Para muitas pessoas, o problema não é escolher a plataforma – é criar um site com um look apelativo e profissional sem gastar muito dinheiro ou contratar um designer.

O WordPress oferece milhares de temas gratuitos – com meia-dúzia de cliques conseguimos alterar o design de todo o nosso site sem perder a informação que já criámos. Mas conseguiremos melhores resultados se optarmos por um tema premium.

Avada, o tema premium mais popular para WordPress

Um tema premium trará várias vantagens face a um tema gratuito, tais como:

  • actualizações mais frequentes;
  • elevado grau de personalização;
  • grande nível de suporte, quando precisamos de ajuda;
  • inclusão de plug-ins premium, como por exemplo sliders;
  • maior qualidade no código (que se traduzirá num site mais rápido) e no design.

Não é que os temas gratuitos sejam maus – mas na minha experiência, as actualizações são menos frequentes e não podemos contar com grande apoio ao cliente.

Mesmo pagando, haverá bons e maus produtos – tudo dependerá da equipa que trabalha para o projecto. Mas, de um modo geral, poderemos contar com um melhor produto (e apoio) se investirmos 50 ou 60 dólares num tema premium.

Estes temas podem ser adquiridos em marketplaces como o ThemeForest ou o Creative Market.

Como rapidamente podemos constatar, existem milhares de temas disponíveis – geralmente, ordeno sempre pelos temas mais vendidos/populares para iniciar a minha pesquisa, porque mais vendas é habitualmente sinónimo de maior detecção de bugs por parte dos utilizadores e de actualizações mais frequentes por parte dos programadores. Se comprarmos um tema que só tem 10 ou 20 clientes, corremos o risco de encontrar programadores desleixados que demoram muito tempo a responder ou que deixam de trabalhar em actualizações para esse produto.

O que nos traz para o tema de hoje. Não é por comprarmos um tema popular que acabaremos por ficar com um site igual aos outros. Com um pouco de personalização, conseguiremos criar um site apelativo e único.

Para tal, precisamos de 3 coisas:

  • conhecimentos (mínimos) de CSS;
  • o Firebug, uma extensão disponível para Chrome e Firefox;
  • uma forma de inserir CSS personalizado, recorrendo ao custom CSS.

Conhecimentos mínimos de CSS

O código CSS (ou Cascading Style Sheets) é responsável por informar o browser da forma como o código HTML deve ser apresentado – que tipos de letra, que cores, que tamanho, etc.

Na imagem em baixo, vemos o mesmo site só com HTML e, à direita, com HTML e CSS. Sem CSS, a web não teria graça nenhuma!

O site do AirBnB com e sem CSS

Como veremos mais à frente, não é necessário ser um programador para fazer pequenos ajustes no site – basta um pouco de bom senso e tentativa e erro.

Dito isto, há 3 excelentes locais para aprofundar esta linguagem, para quem quiser levar os seus conhecimentos para um nível mais avançado:

Estes 3 sites são totalmente opcionais e ficam para os mais curiosos – o que importa é a aplicação na prática, cortesia dos 2 pontos seguintes.

O Firebug

O Firebug já foi referido aqui e a verdade é que a extensão funciona muito melhor no Firefox – é um excelente incentivo para manter este browser instalado no meu computador.

O Firebug inspecciona o código. Essa funcionalidade está presente na maior parte dos browsers modernos, mas esta extensão é muito mais completa.

Depois de clicar na extensão, ela surgirá no fundo da janela. Mas só depois de clicarmos no 2º botão (Click an element in the page to inspect) é que teremos acesso ao inspector.

Inspeccionar código no Firebug

Agora, ao passarmos o rato pelo site veremos o respectivo código CSS. Estará à direita, em Style. Aqui, seleccionei um parágrafo do artigo da semana passada: os 10 Mandamentos de Social Media.

O Firebug para Firefox

Vamos pegar neste texto do corpo do site e alterar o tamanho (font-size) e a cor (color). Também podemos facilmente alterar o tipo de letra por algo que gostemos, com a ajuda do WhatFont.

Como queremos editar o que está no parágrafo, teremos de procurar a tag <p>. Eis o que devemos localizar:

Localizar o parágrafo no Firebug

Depois, podemos ver como ficarão as alterações, editando os campos respectivos dentro do Firebug.

Editar o parágrafo no Firebug

Estas alterações, no entanto, não ficarão permanentes. Só nós as conseguimos ver e assim que clicarmos em Refresh, o browser voltará a mostrar o site como ele é.

Para as gravar, teremos de recorrer ao 3º e último passo.

Por agora, podemos fazer copy do que queremos alterar, colando depois no Notepad ou no meu programa de eleição, o SublimeText.

CSS no SublimeText

Uma forma de inserir CSS personalizado, recorrendo ao custom CSS

Podemos alterar o código CSS mexendo nos ficheiros em questão, mas é boa prática recorrermos aos campos de custom CSS para esta finalidade. Assim, sempre que há uma actualização do tema, não corremos o risco de perder as nossas modificações.

O custom CSS vai-nos permitir dizer que mudanças pretendemos e informar o browser que deve ignorar as definições originais e utilizar as nossas.

A maioria dos temas premium inclui de raíz esta caixa, dentro das opções específicas do tema, geralmente dentro do separador Apresentação.

Eis o exemplo no Hot Topix:

Custom CSS no Hot Topix

E agora no tema Clubber:

Custom CSS no Clubber

Também podemos aplicar estas alterações em temas gratuitos.

O WordPress não traz esta caixa de origem, mas podemos utilizar o plug-in Jetpack (também criado pela empresa) para activar esta funcionalidade, ou instalar algo como isto.

Eis a caixa, recorrendo ao Jetpack.

Custom CSS no Jetpack

Algumas dicas

Quando compro um tema premium, tenho geralmente uma ideia muito clara do que procuro, para minimizar o esforço de personalização.

Estas são as alterações mais frequentes, que acabo por ter de fazer com regularidade após uma nova instalação…

Alterar a cor do fundo

Podemos editar a cor do fundo de qualquer objecto. Um fundo, uma linha horizontal ou um botão. Para tal, basta adicionar a linha background-color, juntamente com a web color que pretendemos utilizar.

Eis um exemplo, alterando o fundo de um botão para branco:

.button {
background-color: #fff;
}

Alterar a cor do link, quando seleccionado

Em HTML, os links são a tag <a>, mas como queremos alterar a cor apenas quando passamos o rato por cima , temos de adicionar a condição hover.

No nosso custom CSS, ficaria desta forma:

a:hover {
color: #F7931E;
}

Alterar o tamanho dos títulos

Em HTML, os títulos (e sub-títulos) fazem parte das tags <h1>, <h2>, <h3> e por aí em diante.

Para alterar o título principal, deveremos editar uma vez mais o font-size, mas do <h1>.

h1 {
font-size:36px;
}

Colocar algo invisível

O autor do tema pode ter criado algo que queremos que simplesmente não apareça. Um rodapé ou um botão, por exemplo. Para ocultar, temos de adicionar uma linha com display:none no que queremos tapar – por exemplo, para tapar os títulos com a tag <h3> escreveríamos:

h3 {
display:none;
}

Mostrar e ocultar propriedades rapidamente

O Firebug tem um botão para cancelar uma linha de código – ideal para rapidamente observarmos como fica uma seccção do site com e sem esse parâmetro.

Para tal, basta clicar no sinal vermelho que surge automaticamente quando passamos o rato em cima de cada linha:

Ocultar uma linha no Firebug

NOTA: não confundir com o código rasurado. Se o código está assim, é porque já existe uma regra para o browser ignorar essa configuração, não apresentando o conteúdo dessa forma.

Em resumo

Personalizar um site não tem que ser dispendioso. Com algumas dezenas de dólares e com um pouco de tempo, conseguimos um site com aspecto profissional e, ainda assim, único.

Esta é também uma excelente forma de aprender CSS. À medida que os conhecimentos evoluem, maior será a nossa capacidade de tornar um site mais pessoal!

Se quiseres aprofundar este tema, não te esqueças de passar por aqui e por aqui.

Como configurar uma CDN (Amazon Cloudfront)

Como configurar uma CDN (Amazon CloudFront)

Como configurar uma CDN (Amazon CloudFront) 620 350 Bruno Brito

Como vimos há alguns artigos atrás, uma CDN (ou Content Delivery Network) é umas das melhores formas de optimizar o desempenho do nosso site.

A grande vantagem de uma CDN é simples: servir os conteúdos de uma forma rápida e fiável, seja para um visitante de Portugal ou de Singapura. Uma CDN disponibiliza os dados a partir de vários data centers espalhados pelo mundo, chegando a informação mais depressa a qualquer utilizador.

Os grandes sites colocam os seus principais conteúdos (sejam eles texto, imagens, scripts, vídeos, podcasts ou até aplicações) em CDNs não só para melhor servir o utilizador (e obter melhor ranking no Google), mas também para diminuir o tráfego e tempo de acesso ao site. Muitas vezes, tal acção também é responsável pela redução nos custos de hosting.

Ao contrário do que se possa pensar, este tipo de serviço é tremendamente barato e, na maior parte das ofertas, só se paga o que realmente se utiliza – o que significa que pequenos negócios pagam uma conta diferente das grandes empresas ao final do mês.

A Amazon CloudFront

Há imensas empresas no mercado, mas as 3 CDNs mais populares são a Amazon CloudFront, a MaxCDN e a Cloudflare.

Acredito que todas pratiquem preços e funcionalidades similares. Devido à sua popularidade (afinal de contas, até o Dropbox a utiliza!), optei pela Amazon CloudFront e posso dizer que estou muito satisfeito com a escolha.

Amazon CloudFront

Quando nos inscrevemos, não temos que começar logo a pagar. A Amazon oferece o AWS Free Usage Tier, uma espécie de promoção de 12 meses, onde podemos testar os serviços de borla se a utilização for razoável.

A AWS engloba vários serviços, mas no caso da CloudFront, temos direito a 50 GB de transferências de dados e 2,000,000 de pedidos HTTP e HTTPS por mês.

No que toca a preços, estes mudam com frequência, à medida que o custo de armazenamento baixa. Ou seja mudam… para melhor.

Como referi, a despesa mensal dependerá do tráfego e da localização onde o acesso aos conteúdos foi feito, mas estamos a falar de menos de 25 cêntimos por GB transferido (no pior cenário).

Os preços podem ser consultados aqui. O login e o pagamento pode ser feito com a nossa informação habitual da Amazon.

Como se pode ver, não há grandes razões para não experimentar. A grande barreira à entrada é, na verdade, o conhecimento técnico que é necessário ter para a configurar. Mas é para isso que estou aqui hoje a escrever este artigo!

Configurando a Amazon CloudFront

Para configurarmos a CDN, primeiro temos que utilizar o serviço Amazon S3.

O S3 é basicamente o serviço de cloud storage da Amazon, como o Dropbox ou a Meo Cloud, mas bem menos sexy e intuitivo.

Só depois de criarmos um bucket (que é um pouco como uma pasta do FTP, apesar de ter algumas diferenças) é que podemos criar uma CDN para ele.

Passo #1: Entrar na Amazon S3 e criar um bucket

Depois de fazermos login, teremos de optar pelo serviço Amazon S3, que estará dentro de Storage & Content Delivery.

Amazon S3

Aqui, será necessário criar um bucket. Já tenho aqui um criado para este blog, pelo que estou aqui vou criar um novo (até porque estou em vias de começar um podcast e a CDN será útil para o efeito).

Basta clicar no botão azul Create a Bucket, dar um nome e escolher a região mais próxima do nosso target principal – neste caso Irlanda, visto no meu caso ser predominantemente para Portugal.

Depois, podemos clicar em Create, ignorando o Set up logging.

Criar um Bucket na Amazon S3

Passo #2: Alterar as permissões

O S3 não torna os conteúdos acessíveis publicamente de origem. Teremos de mudar as permissões para que tal aconteça.

Para tal, basta seleccionarmos o bucket que acabámos de criar e, à direita, clicar em Permissions-> Edit bucket policy.

Alterar as permissões no bucket policy

Este é o código que temos de inserir – a partir daí, qualquer ficheiro transferido para dentro do bucket ficará público.

NOTA: será necessário alterar xxx123 pelo nome do nosso bucket.

{
    "Version": "2008-10-17",
    "Statement": [
        {
            "Sid": "AllowPublicRead",
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::xxx123/*"
        }
    ]
}

Depois basta clicar em Save.

Passo #3: Criar uma distribuição no CloudFront

Agora estamos em condições de passar para a CloudFront. Para tal, acedemos ao menu do topo da página e clicamos em CloudFront.

Passando para a CloudFront

Dentro do CloudFront, teremos de clicar em Create Distribution.

Aí, optaremos pela opção Web e clicamos em Get Started.

O menu seguinte é algo intimidante, mas na verdade tudo o que temos de fazer é preencher o primeiro campo: Origin Domain Name com o bucket que criámos no passo #1.

Criar uma distribuição no CloudFront

O resto será preenchido automaticamente e não precisamos de efectuar qualquer alteração. Depois, basta fazer scroll até ao final da página e clicar em Create Distribution.

NOTA: Os ficheiros que lá colocaremos ficarão num endereço do género domínio.cloudfront.net. Mas podemos criar um CNAME e utilizar o nosso próprio domínio (como no caso deste blog, onde todas as imagens estão em cdn.brunobrito.pt em vez de domínio.cloudfront.net).

Se pretendermos esta alteração, devemos colocar um visto na nossa recém-criada distribution e clicar em Distribution Settings e logo de seguida em Edit, na tab General.

Aí acrescentamos o CNAME desejado (algo do género cdn.omeudomínio.com, por exemplo) em Alternate Domain Names (CNAMEs). Depois, confirmamos a nossa alteração clicando no botão azul Yes, Edit.

Criar um CNAME CloudFront

Passo #4: Aguardar que a distribuição fique activa

Depois de completarmos os 3 passos anteriores, poderemos ter de aguardar um pouco até que tudo fique devidamente activado. Quando estiver Deployed, tudo estará OK.

No final, deveremos ter algo semelhante à imagem em baixo.

Distribuições no CloudFront

Passo #5: Adicionar o CNAME no nosso hosting (opcional)

Se no passo #3 optámos por criar um CNAME, será necessário adicioná-lo também no nosso hosting.

Cada painel de controlo é diferente e em alguns serviços será mesmo necessário entrar em contacto com a empresa para que tal aconteça.

No meu caso, recorri a um hosting partilhado que tenho na Dreamhost e pude configurá-lo sozinho.

No Dreamhost, tive de entrar no meu painel de controlo e ir a Domains-> Manage Domains. Escolhi o meu domínio e cliquei em DNS.

Depois, bastou criar o CNAME com o mesmo nome em Name e colocar o domínio da Amazon que termina em cloudfront.net em Value .

Configurando o CNAME na Dreamhost

Depois de um clique em Add Record Now! e de aguardar algum tempo, tudo ficou a funcionar devidamente.

Transferindo ficheiros para a Amazon S3

Apesar de podermos transferir ficheiros na página da Amazon S3, tal é longe de ideal. Felizmente, existem alternativas.

As 2 que utilizo são o AirFile (apenas disponível para Mac) e o S3 Fox Organizer, um plug-in para Firefox. Gosto de ambas, mas acaba por utilizar com maior frequência este último por ser compatível também com Windows e por ser mais fiável.

Ambos funcionam de forma muito similar a um programa FTP. Para configurar estes programas, vamos precisar da Access Key e da Secret Key para a nossa conta S3.

Podemos obtê-las dentro da painel de controlo da Amazon AWS se clicarmos no nosso nome, no canto superior direito, e clicarmos em Security Credentials.

Amazon Security Credentials

Aí, teremos de clicar em Access Keys e criar uma nova, se ainda não tivermos uma. Convém também guardá-la num local seguro, visto que a Amazon deixou de permitir a recuperação das Access Keys desde Abril de 2014.

Assim, podemos facilmente transferir imagens com o S3Fox para o nosso blog… como fiz para este post!

O S3fox para Firefox

NOTA: Se depois da criação da CDN surgir o erro “Error connecting! – Temporary Redirect”, teremos de esperar um pouco mais. Na maioria das vezes, este caso acontece devido á conta ser nova e ainda não estar devidamente propagada.

E está feito. Parabéns, acabaste de configurar a tua primeira CDN!

A ilusão dos números (métricas e KPIs)

A ilusão dos números (métricas e KPIs)

A ilusão dos números (métricas e KPIs) 620 350 Bruno Brito

Em 2014, ter um blog ou uma página no Facebook dificilmente impressiona alguém. A tecnologia evoluiu de tal forma que as barreiras para começar qualquer tipo de projecto online são, nos dias que correm, praticamente inexistentes.

Com este facilitismo, todos nós nos podemos tornar rapidamente content creators. E com o leque de ferramentas disponível, seja para edição de imagem, vídeo ou texto, cada vez existem menos desculpas para não seguir em frente. Tudo o que não sabemos, podemos rapidamente aprender com um par de pesquisas.

Para além das ferramentas de criação de conteúdos, surgiram aplicações de analytics que nos dão todas as estatísticas que poderíamos imaginar.

É fácil descobrir quantas pessoas estão no nosso site a qualquer momento, quais os nossos artigos mais populares, quem fez like a determinado post, quantas pessoas viram o nosso vídeo ou ouviram o nosso mais recente podcast.

E é este o problema: com tantas métricas disponíveis, começámos a prestar demasiada atenção a números que nem sempre importam.

Perdemos noção de quais são, realmente, os KPIs (Key Performance Indicators).

O nosso raciocínio estratégico não acompanhou a tecnologia. Há 2 factores que acredito que tenham contribuído para este cenário:

  • a tecnologia ilude-nos relativamente aos números que importam;
  • as pessoas teimam em não querer avaliar as métricas que realmente interessam.

Vamos entender melhor cada um destes pontos.

#1: A tecnologia ilude-nos relativamente aos números que importam

Quando a informação é muita, é inevitável: alguns números vão ter mais destaque do que outros. Por vezes, a aplicação está só a tentar facilitar-nos a vida; noutros casos, é por interesse comercial.

A aplicação está só a tentar facilitar-nos a vida

Consideremos o Google Analytics, por exemplo: sem dúvida que é uma excelente ferramenta e que, quando bem utilizada, nos dá acesso a praticamente tudo o que queremos saber sobre os visitantes do nosso site.

Numa perspectiva de usabilidade, seria pouco sexy (e útil) obter uma tabela rudimentar após o login com toda a informação despejada, certo?

Por esse motivo, acabamos por ter números com maior destaque do que outros. Exemplo disso são as visitas, um número que salta de imediato à vista depois do login.

Quererá isto dizer que é o número mais importante que podemos obter desta aplicação? Não necessariamente.

O Google Analytics
Para chegar a outros números, teremos de explorar os sub-menus. Nem todos são imediatos – nem poderiam ser para que a aplicação fosse fácil de usar.

É natural e inevitável. Felizmente, nesta e noutras aplicações podemos criar os nossos dashboards para uma análise mais personalizada.

Existe um interesse comercial

Quem tem uma página do Facebook, saberá certamente a importância que a rede de Mark Zuckerberg atribui ao reach – afinal de contas, está ali, ao pé de cada post, a pedir atenção.

O destaque dado pelo Facebook ao reach

Reach baixo? Não há problema. Podemos pagar uma quantia para o Facebook posicionar os nossos posts num ponto mais elevado da newsfeed dos utilizadores, para garantir que mais pessoas lêem a nossa importante mensagem (Boost Your Posts).

Exploraremos este ponto mais tarde, mas é inevitável que este tipo de destaque nos faça pensar que o Reach é, juntamente com o Like, Share e Comment, a métrica mais importante do Facebook.

#2: As pessoas teimam em não querer avaliar as métricas que realmente interessam

Nem sempre podemos culpar a tecnologia. Às vezes sabemos perfeitamente quais são os números que devemos avaliar… mas nem sempre são bons ou valorizados por quem toma decisões acima de nós.

Há sites com excelentes resultados em alguns indicadores que não são, no entanto, relevantes para o que se pretendia com a acção (ou para o negócio no geral). Esses números são areia para os olhos, mas podem dar a falsa sensação de que estamos no bom caminho.

Noutros casos, não fazemos sequer ideia de quais são os números pertinentes para nós. Mas não faz mal, porque é sobre isso que vamos reflectir já a seguir.

Quais são então as métricas que importam?

A resposta curta? Depende.

Depende de quais são os nossos objectivos. Queremos vender um produto online? Queremos que leiam o nosso artigo? Queremos desenvolver o melhor blog de um tópico? Queremos que vejam o nosso vídeo até ao fim? Queremos criar uma forte comunidade no Facebook? Queremos tráfego, para ganhar dinheiro com publicidade?

Para cada caso, os números relevantes são diferentes. Mas serão estes os indicadores que ditarão o sucesso ou o fracasso de uma campanha.

Todos os outros estão no nosso caminho.

Não pretendo neste artigo enumerar todos os casos, nem dar todas as respostas. O objectivo é pensar na verdadeira importância dos números e a abordar o momento de olhar para os relatórios com outros olhos.

Para o efeito, consideraremos estes cenários populares.

#1: Queremos vender um produto online

O nosso objectivo final aqui é óbvio: vender. Para vender precisamos que nos conheçam, logo teremos de obter tráfego – seja através de bom SEO, de publicidade ou de parcerias.

Mas de pouco servirá muitas visitas se não estivermos a convertê-las em vendas. Teremos de entender o que está a falhar.

  • Os visitantes não confiam no nosso produto/site?
  • Os visitantes encontram o(s) produto(s) facilmente?
  • Os visitantes estão a abandonar o processo de compra a meio?
  • Os visitantes não sentem que o produto tem utilidade/qualidade suficiente?

Aqui, é fundamental a CRO (Conversion Rate Optimization). As visitas só podem avisar-nos que algo está mal: 5 compras em 50 visitas é melhor indicador do que 5 compras em 500.

Um elevado número de visitas e um baixo número de vendas não deverá ser motivo de orgulho aqui. Apenas mostrará que há uma audiência interessada em solucionar determinado problema, mas que não o resolverá no nosso site.

#2: Queremos desenvolver o melhor blog de um tópico

Se não tencionamos monetizar o nosso site, teremos de dar valor a outro tipo de indicadores. Um deles é o tempo passado em cada página.

Se criarmos um conteúdo de 2000 palavras (que demora sensivelmente 10-12 minutos a ser lido) e tivermos um valor médio de 40 segundos, será que o nosso artigo era realmente interessante? Será que respondeu às questões do leitor?

Provavelmente não.

Melhorar este valor deverá ser uma preocupação muito maior do que aumentar o número de visitas. De pouco servirá receber muito tráfego se as pessoas não estão satisfeitas com o conteúdo criado.

#3: Queremos criar uma forte comunidade no Facebook

Quando temos uma página, a pergunta inevitável é sempre a mesma:

Quantos fãs tens?

E parece que só somos levados a sério se o número for superior a 4 dígitos.

Quem faz esta pergunta claramente não sabe como funciona o EdgeRank, o algoritmo do Facebook.

O EdgeRank do Facebook

Se o nosso objectivo é desenvolver uma forte comunidade, o que realmente importará será o engagement.

Em cada partilha, os nossos posts do Facebook só chegarão a uma parcela do número total de fãs – o algoritmo entenderá que há pessoas e páginas mais importantes do que a nossa para os utilizadores, exibindo esses conteúdos primeiro.

À medida que os utilizadores interagem com a nossa página, seja através de likes, shares ou comments, a página ficará bem posicionada para um número cada vez maior de pessoas, o que significará que maior será o reach.

Por outro lado, se criarmos conteúdos pouco interessantes e nenhum dos nossos 10 mil fãs reagir, a tendência será um reach cada vez menor, até ao ponto em que não estamos a falar com praticamente ninguém.

Em resumo, se tiver uma mensagem que pretendo que chegue ao maior número de pessoas, prefiro que a mesma seja divulgada numa página de 5.000 fãs activos, que interagem frequentemente com o que dizemos, do que com uma página “fantasma” com 50.000, que na verdade terá um reach consideravelmente inferior.

Os likes podem demonstrar popularidade ou grandeza, mas não passam de uma vanity metric – o que interessa é mesmo a força da comunidade.

#4: Queremos que vejam o nosso vídeo até ao fim?

Se o sucesso do nosso vídeo depender de quem o viu até ao fim, o que teremos que avaliar será a Audience Retention do YouTube ou utilizar uma plataforma como o Wistia, que nos fornecesse esses detalhes.

YouTube Audience Retention

Se tivermos um vídeo de 2 minutos com 100.000 plays mas que ninguém viu sequer metade, será que temos motivos para estarmos orgulhosos?

Mais importante do que o número de plays, comentários ou likes, esta métrica explicará os momentos de drop-off (desistência) do vídeo, para que o possamos melhorar mais tarde.

Há números e números, mas…

… todos acabam por, de alguma forma, ser importantes.

Interessa-nos saber quanto tempo demora a página a carregar (para sabermos se vale a pena aumentar o desempenho do nosso site). Vale a pena saber qual a resolução mais popular, o browser e o país.

O desafio passa por entender o que devemos concluir de cada um deles.

Podemos saber que uma bounce rate elevada é geralmente mau sinal, mas se só tivermos uma página, não é inevitável?

Em mobile os hábitos também são consideravelmente diferentes – a nossa bounce rate pode ser enorme se a maior parte das pessoas está a aceder ao nosso último blog post com o telemóvel, porque dificilmente pretenderão explorar um site enquanto estão no autocarro.

E falando em mobile, se 50% do tráfego é mobile, temos o site responsive?

O nosso site é lindo de morrer mas não é exibido correctamente no Internet Explorer. Quantas pessoas acedem através deste browser? Vale a pena deixar esta audiência de fora?

Tudo isto dá que pensar e as respostas estarão sempre no software. Mas para tal precisamos de olhar para os números… sem nos iludirmos.

Como aumento a velocidade do meu site?

Como aumento a velocidade do meu site?

Como aumento a velocidade do meu site? 620 350 Bruno Brito

Nos últimos tempos, tenho investigado várias formas de optimizar o desempenho dos sites onde colaboro.

A velocidade de carregamento é muito importante para um projecto online. Aqui ficam alguns motivos:

  • em sites de e-commerce, cada segundo adicional de carregamento traduz-se em vendas perdidas;
  • o algoritmo do Google tem a velocidade em conta (ou seja, um site rápido é beneficiado a nível de SEO);
  • os utilizadores acedem cada vez mais aos sites através do smartphone ou do tablet, muitas vezes com ligações relativamente lentas, como o 3G.

Na verdade, as páginas Web são cada vez mais pesadas. Em 2013, uma página de e-commerce demorava 7.7 segundos a carregar – agora demora 9.3. Uma diferença de 21%.

A Web, em geral, está mais lenta, porque os conteúdos são mais pesados. E tal não é surpresa quando vemos as resoluções dos Macbooks e dos smartphones a subirem todos os anos, vídeos a passarem de SD para Full HD e cameras em telefones de 41 mega pixéis. Os processadores e as ligações à web tentam acompanhar esta tendência, mas nem toda a gente tem condições para um upgrade de 2 em 2 anos.

Para não excluir ninguém, o melhor que temos a fazer é procurar desenvolver o site mais rápido possível.

#1: O Speedtest

Antes de nos darmos ao trabalho de investigar possíveis melhorias no site, o melhor será entender a situação actual.

Será que o site está muito lento? Será que vale a pena contratar um freelancer para optimizar a performance do meu site?

Estas respostas podem ser rapidamente respondidas com um speedtest.

Existem inúmeros serviços que fazem este tipo de testes e uma boa parte são grátis.

Alguns já foram abordados anteriormente, mas aqui vai uma pequena lista:

Estes testes demoram, na maioria, menos de 1 minuto a correr e criam o relatório de imediato. A única excepção foi o Load Impact que demorou 6 minutos a completar (o teste é mais exaustivo).

Pessoalmente, gosto bastante do Pingdom e do GT Metrix; o primeiro pelo design e pela simplicidade, o segundo por agregar a informação fornecida pelo PageSpeed e pelo YSlow e por permitir o download do relatório em PDF.

Para além de uma classificação e de alguns números (como o peso da página ou o tempo de carregamento), quase todos fornecem algum tipo de sugestão de como estes tempos podem descer – mas já lá vamos.

O que é importante referir é que estes testes são excelentes para nos darem uma ideia, mas não os podemos levar totalmente a sério.

Se corrermos o teste várias vezes seguidas, teremos provavelmente resultados bem diferentes (mesmo se utilizarmos o mesmo serviço) e nem sempre as sugestões estão correctas.

Podemos comprovar isso mesmo nas 3 imagens em baixo, que dizem respeito a uma análise a este site no Pingdom, GT Metrix e YSlow, respectivamente.

Pingdom

BrunoBrito.PT no Pingdom

GT Metrix

BrunoBrito.PT no GT Metrix

YSlow

BrunoBrito.PT no YSlow

Sobre as sugestões

Muitas destas sugestões são bastante técnicas. Minify Javascript? Use a CDN? Compress components with GZip? Algumas serão abordadas aqui, mas as boas notícias é que muitas vezes basta clicar nelas para saber mais sobre o que pode ser feito para minimizar os tempos de carregamento.

Algumas poderemos resolver sozinhos em minutos, enquanto outras necessitarão ou de muito tempo no Google ou da ajuda de alguém que perceba verdadeiramente da matéria (e de dinheiro).

Neste artigo, falarei sobretudo dos quick fixes para um site mais rápido sem grandes (ou nenhumas) despesas e pouco tempo despendido.

#2: Os princípios-chave

Antes de avançar com as optimizações, temos de falar um pouco dos alicerces – a base em que o site é construído.

Aqui, destaco 3 pontos:

  • Alojamento;
  • Tema e plug-ins do site (se utilizarmos um CMS);
  • CDN (ou Content Delivery Network).

Alojamento

Ter um site é incrivelmente barato e a maior parte das pessoas apenas precisa de pensar num domínio (algo tipo omeusite.com) e num alojamento (onde o site ficará hospedado e onde poderemos depois inserir imagens, ficheiros etc).

Na altura de comprar um domínio, poderemos optar pelo serviço mais barato, que provavelmente será o Namecheap ou o GoDaddy.

Mas para o alojamento (hosting) não podemos aplicar o mesmo raciocínio.

Se estivermos a pensar num pequeno blog para os amigos visitarem, sinceramente qualquer alojamento servirá. Podemos obter alguns bastante baratos, como o da Dreamhost, que apenas nos custará 3 ou 4 dólares por mês.

O problema é se o nosso site fica popular da noite para o dia e alguém influente o partilha no Facebook, por exemplo. Se muita gente o visitar, este tipo de shared hosting não vai aguentar o tráfego e apesar de prometerem sempre visitas e largura de banda ilimitada, fecharão temporariamente a “torneira” – o que significa que ninguém conseguirá aceder ao site no nosso momento de glória.

Aqui, é aquela velha máxima – you get what you pay for. Se pagarmos $30 por mês, o mais provável será termos melhor serviço e um site mais rápido, que aguentará muito tráfego num dia daqueles. Mas não valerá a pena gastar muito dinheiro se as tuas previsões apontam para apenas umas dezenas de visitas por dia.

A plataforma do teu site também deve ser considerada – se utilizas o WordPress (como 20% da internet), podes utilizar serviços de hosting especializados, como o Pagely, o WP Engine ou este plano da MediaTemple.

No caso deste blog, visto que estou a utilizar o Ghost, recorri ao Ghostify.

Todos estes serviços são consideravelmente mais dispendiosos, mas optimizam o seu hosting para a plataforma em questão, sendo o desempenho superior.

Tema e plug-ins do site (se utilizarmos um CMS)

Se estivermos a utilizar o WordPress, o Joomla, o Ghost ou o Drupal, por exemplo, estamos a utilizar um CMS (Content Management System).

Estes CMS são apelativos não só por nos permitirem inserir conteúdos de forma simples, mas também por terem centenas ou milhares de temas (ou themes) à disposição.

Podem ser gratuitos ou ultrapassar os 50 dólares. Mas apesar de alguns serem muito bonitos, nem todos estão bem programados – e nem todos são rápidos.

Um tema tem enorme impacto na performance do site – a maior parte dos temas disponibilizam um live site para o explorar e podemos utilizar essa página para avaliar o desempenho do theme com uma das ferramentas acima, assumindo que não estão a utilizar algum tipo de caching.

CDN (ou Content Delivery Network)

O último ponto é aquele que é claramente opcional mas que deve ser considerado. Se o nosso site é particularmente pesado em conteúdos (imagens, vídeos, etc) uma CDN poderá contribuir positivamente no desempenho.

Uma CDN é uma espécie de servidor FTP em que podemos arquivar todos os nossos ficheiros, mas com uma diferença importante: a velocidade. Os ficheiros são duplicados por vários servidores por todo o mundo, o que faz com que sejam entregues muito mais depressa consoante a localização do visitante.

Para além disso, são flexíveis – se o nosso site ficar mais popular, o tempo de acesso aos ficheiros não é prejudicado.

Os serviços de CDN mais populares são provavelmente o Cloudfront (da Amazon) e o MaxCDN.

Amazon Web Services

Pessoalmente, estou muito satisfeito com esta solução da Amazon Web Services (utilizo o Cloudfront para as imagens aqui neste blog). O preço é também bastante justo, porque só pagamos o que é gasto – se o blog tiver mais visitas, pagamos mais e a Amazon oferece um Free Tier generoso durante um ano, para vermos se vale a pena.

Nota 1: alguns serviços de hosting mais dispendiosos já trazem uma CDN integrada ou disponibilizam-na se pagarmos um extra mensal.

Nota 2: mesmo com a CDN activada, alguns speedtests podem não reconhecer a existência da mesma.

#3: As várias optimizações que podem ser feitas

Tempo agora de vermos o que pode ser feito para aumentar o desempenho do nosso site.

Como referi acima, aqui vou dar destaque aos quick fixes – aqueles pormenores que podemos resolver em poucos minutos e que baixarão de imediato os tempos de carregamento de cada página.

A maioria será para WordPress, visto que é tão popular, mas também podemos retirar a teoria e aplicá-la ao nosso próprio site ou CMS.

As imagens

Algo que muita gente subestima é o peso que as imagens têm em cada página carregada. Se colocarmos várias fotografias gigantes num blog post, rapidamente atingiremos vários MBs.

Para minimizar esta questão, podemos recorrer a uma ferramenta de compressão de imagens como o já referido Compressor.io.
82% de compressão com o Compressor.io

Antes de fazer upload das imagens para a minha CDN, passo todas as imagens por esta webapp. No meu último post, a imagem de destaque passou de 721 kb para cerca de 132 kb sem praticamente nenhuma perda de qualidade visível.

Activar o Gzip

Quando queremos diminuir o tamanho de um ficheiro, uma das soluções é comprimi-lo com uma ferramenta como o WinZip. O Gzip é igual, mas para páginas Web. E a melhor parte é que não há qualquer desvantagem em fazê-lo.

Podemos ver se o nosso site já está comprimido utilizando esta ferramenta.

BrunoBrito.PT no GZip

Se estivermos a trabalhar num site WordPress, podemos activar essa compressão recorrendo a um plug-in para o efeito ou editando o ficheiro .htaccess e adicionando o seguinte código:

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

Re-avaliar o uso de plug-ins

Uma sidebar cheia de plug-ins raramente é boa ideia. À medida que mergulhamos no universo do nosso CMS e conhecemos as centenas de plug-ins disponíveis, maior é a tentação de instalar algo que (se calhar) nem faz assim tanta falta ao nosso site.

Cada plug-in acrescenta mais uma mão-cheia de chamadas à base de dados, o que faz com que o servidor tenha de trabalhar mais. E nem todos foram feitos por excelentes programadores, o que significa que poderão exigir mais recursos do que deviam.

Para WordPress, podemos utilizar o P3 (Plugin Performance Profiler) para entender os recursos que cada plug-in consome. Depois, podemos optar por remover determinado plug-in ou ver se existe alguma alternativa mais leve.

P3 Plugin Performance Profiler

Bons exemplos são os famosos sliders para WordPress e os social buttons para partilha dos conteúdos, que podem pesar bastante no site. Algumas funcionalidades também podem ser alcançadas com a inserção de algum código, sendo por vezes preferível editar 1 ou 2 ficheiros PHP do WordPress em vez de recorrer a mais um plug-in.

Limpar a base de dados

Podemos deixar os plug-ins desactivados no WordPress sem afectar o desempenho, mas a base de dados convém ser limpa visto que, com o tempo, muita coisa deixa de fazer sentido (como manter todas as revisões dos nossos posts ou os itens que entretanto foram para o lixo).

WP-Optimize

Para resolver esta questão, instalamos o WP-Optimize e limpamos tudo o que está a mais – depois de fazer um back-up à base de dados, claro!

Minificar recursos (HTML, CSS e JavaScript)

Minificar é outro termo para comprimir os ficheiros, removendo símbolos em branco, linhas vazias e comentários. Muitos vão ainda mais longe: agrupam os vários ficheiros de HTML/CSS/Javascript num só.

À medida que o nosso site cresce e mais plug-ins são instalados, o nosso browser terá de aceder cada vez a mais ficheiros para descarregar o site por inteiro. Se concentrarmos tudo isso num só ficheiro e este for optimizado, teremos um site mais rápido.

Como acontece nos casos anteriores, podemos recorrer a várias ferramentas. Exemplo disso mesmo é o Freeformatter para Javascript e CSS, que utiliza o YUI Compressor da Yahoo.

Para WordPress, podemos utilizar o Better WordPress Minify.

Nota: Em themes mais complexos, o Minifiy pode desformatar algumas partes do site. Editar código depois da minificação é virtualmente impossível, pelo que é recomendado um back-up de tudo antes de minificar.

Activar o caching

O problema de usar um CMS e ter um site dinâmico é que a cada visita de um utilizador o servidor terá de pensar tudo outra vez.

Tal é desnecessário, sobretudo em páginas que recebem poucas ou nenhumas actualizações com o passar dos anos. Uma ferramenta de caching guardará uma versão estática da página, servindo depois essa versão aos visitantes, reduzindo a carga no servidor.

O caching é uma das técnicas mais populares: alguns serviços de hosting específico para WordPress já o fazem de raíz e não permitem a instalação de plug-ins adicionais.

Para quem está num alojamento mais barato e ainda assim quer recorrer ao caching, a melhor solução (para WordPress) será o W3 Total Cache ou o WP Super Cache.

W3 Total Cache

Estas são 2 boas soluções que para além do caching permitem a ligação a uma CDN, entre muitas outras funcionalidades (especialmente o W3 Total Cache). Ainda assim, não sou fã destes plug-ins enquanto solução all-in-one, pelo que não os posso recomendar para outras aplicações se não esta.

Nota: Estas ferramentas são bastante avançadas, o que as torna mais complicadas de configurar. O (excelente) site WPBeginner tem artigos para instalar e configurar tanto o W3 Total Cache como o WP Super Cache, pelo que recomendo a leitura antes de mandar o site abaixo!

Conclusão

Prevê-se que no prazo de 1 ou 2 anos, o acesso mobile supere o acesso tradicional via desktop. Por esse motivo, os sites terão, cada vez mais, de pensar na velocidade para entregar uma boa experiência ao utilizador.

Espero que com estas dicas o teu site possa ficar consideravelmente mais rápido! Esqueci-me de alguma importante?

12 extensões do Chrome para bloggers

12 extensões do Chrome indispensáveis para bloggers

12 extensões do Chrome indispensáveis para bloggers 620 350 Bruno Brito

Blogging. Ao início, o grande desafio é a escrita. Mas à medida que a nossa lista de artigos publicados cresce, começamos a reparar que há muitos outros factores que contribuem para o post perfeito.

Os factos certos. As imagens adequadas. A promoção ideal. Um site rápido e apelativo. Tudo isto também conta.

Um bom blogger escreve muito e bem. Mas para tal, também precisa de adquirir automatismos. Pode aprender a escrever mais depressa e dominar na perfeição o seu computador, mas certamente terá de continuar atento a tudo o que poderá fazer para melhorar a sua produtividade.

Muitos estão preocupados em comprar o software ideal para determinada tarefa ou até em mudar de sistema operativo (ou passar de WordPress para algo diferente, como o Ghost), acabando por subestimar pelo caminho uma excelente fonte de apps: as extensões do browser.

Apesar de existirem centenas de soluções também para Firefox, neste artigo vou-me focar nas extensões que utilizo no Chrome, aquele que é o meu browser de eleição desde o dia em que foi lançado.

Em baixo podemos encontrar extensões que nos ajudam em vários processos importantes:

  • a criação do artigo;
  • a divulgação nas redes sociais;
  • a análise de visitas ao site e optimização para motores de busca;
  • melhorias relativamente a performance, design e usabilidade do site.

Vamos a isto!

Extensões para criar o artigo

Criar o artigo é, para a grande maioria, a parte mais divertida do blogging.

Estas são algumas extensões que tornam o processo criativo mais rápido e eficaz.

Save to Pocket

Save to Pocket na Chrome Web Store

Quando estamos a escrever artigos de cariz informativo, é natural fazer algum trabalho de pesquisa prévio para acrescentar o máximo de valor ao nosso post.

Sem surpresa, o já anteriormente mencionado Pocket é a minha extensão de eleição para arquivar os artigos de maior interesse que encontro diariamente na Internet.

Basta clicar na extensão para guardarmos a página onde nos encontramos, para consultar com atenção mais tarde. Podemos adicionar tags para facilitar a navegação mais tarde.

Uma página guardada no Pocket

O Pocket está disponível em todas as plataformas mais populares e, apesar de ser tremendamente simples, não deixa de ser das apps mais úteis desta lista.

Evernote Web Clipper

Evernote Web Clipper na Chrome Web Store

Muitos bloggers não conseguem viver sem o Evernote, indubitavelmente uma das melhores apps já criadas.

Às vezes, arquivar uma página no Pocket não chega. Queremos adicionar de imediato alguns apontamentos, integrá-las num conjunto de notas referentes a um projecto ou, simplesmente, preferimos concentrar toda a informação no Evernote e não espalhá-la por várias apps. Nesse caso, esta extensão é de facto uma grande ajuda.

O Evernote Web Clipper

O Evernote tem vindo a melhorar a cada actualização e agora, para além de podermos gravar a página em que nos encontramos em diferentes formatos (como uma versão minimalista da página se optarmos por Simplified, algo que o Pocket também faz) podemos tirar Screenshots (afinal de contas, o Evernote comprou, em 2011, o Skitch).

Podemos depois arquivar determinada página na nossa pasta de notas do projecto ou adicionar-lhe etiquetas, tornando-se uma solução mais robusta que o Pocket para quem pesquisa intensivamente antes de começar a escrever.

Awesome Screenshot: Capture & Annotate

Awesome Screenshot na Chrome Web Store

Apesar do Skitch ser genial, a minha extensão para capturas de ecrã preferida é a Awesome Screenshot.

Já experimentei muitas e algo que sempre deixou a desejar é a captura de página inteira – em muitos sites ou não era possível ou o background repetia ao longo da página. Tal não é o caso com esta, dando-nos também a hipótese de apenas capturar o que está visível ou uma área em particular.

Awesome Screenshot

Depois de capturar o ecrã, temos a opção de adicionar algumas notas (texto, alguns símbolos ou crop) antes de gravar (online ou offline) ou imprimir.

Pessoalmente, nunca tive sucesso com a funcionalidade de copy para o clipboard, pelo que opto sempre por gravar como PNG.

Check my links

Check my links na Chrome Web Store

Depois de publicarmos o nosso artigo, convém verificar se todos os links funcionam – missão especialmente demorada se tivermos dezenas de hiperligações no artigo.

Com esta extensão, basta um clique.

Check my links extension

Depois do relatório, podemos corrigir os links errados rapidamente, visto que todos os links ficarão sublinhados a verde ou a vermelho ao longo da página.

Extensões para Social Media

O trabalho de um blogger está longe de estar terminado depois de criar e publicar o artigo. Agora é a altura de o divulgar, visto que a sua obra só será encontrada através de motores pesquisa ou redes sociais (e o 2º influencia o 1º).

Aqui ficam 2 extensões que nos facilitam a vida nesta tarefa.

Buffer

Buffer na Chrome Web Store

Esta é uma das minhas apps preferidas, se não a minha #1. Todos os dias a utilizo e a própria empresa já foi destaque no Conteúdo é Rei.

Com esta extensão, partilhar um artigo torna-se o acto mais simples do mundo. Podemos, para além de partilhar no Facebook/Twitter/LinkedIn/Google+ de imediato, agendar o nosso post ou adicioná-lo à nossa lista de artigos a partilhar mais tarde.

Um artigo partilhado no Twitter e Facebook com o Buffer

Seja para partilhar os nossos artigos ou para gerir a própria marca pessoal, o Buffer é indiscutivelmente, nos dias que correm, a aplicação #1 de Social Media.

ShareMetric

NOTA: extensão entretanto removida. Como alternativa, recomendo o SharedCount.

ShareMetric na Chrome Web Store

Há inúmeras formas de saber quantas vezes o nosso artigo foi partilhado, mas poucas são tão imediatas quanto o ShareMetric.

ShareMetric

Num clique ficamos a saber o número de interacções que ocorreram no Facebook/Twitter/LinkedIn/Google+ da página em que nos encontramos.

Extensões para Analytics / SEO

Depois de criar o artigo e promovê-lo, convém avaliar a sua prestação para entender que tipo de conteúdos são os preferidos dos visitantes e como as nossas páginas são encaradas pelos motores de busca.

É aqui que entra o Analytics e claro, o SEO.

Page Analytics (by Google)

Page Analytics na Chrome Web Store

Esta é provavelmente a extensão mais recente da lista, o que me faz pensar como é que passei tanto tempo sem ela.

O Page Analytics dá-nos a informação mais directa que teríamos acedendo ao Google Analytics, mas sob a forma de uma barra no topo do ecrã.

Podemos assim contar instantaneamente com as Pageviews, Time on Page, Bounce Rate para qualquer página onde temos direitos de Google Analytics, bastando para tal ter feito o login com a nossa conta Google.

O Page Analytics em brunobrito.pt

Esta aplicação permite ainda definir o período de tempo que queremos analisar e apresenta as visitas em tempo real. Como se tal não bastasse, ainda exibe o número de clique que cada conteúdo da mesma página recebeu, para descobrirmos num ápice quais os artigos mais visitados.

MozBar

MozBar na Chrome Web Store

Seria difícil falar em ferramentas de SEO sem referir a MozBar, a extensão de uma das marcas mais populares deste mundo: a Moz.

A MozBar

À semelhança do Page Analytics, a MozBar é uma barra que surge no topo do ecrã e que nos dá algumas informações relevantes sobre o nosso site, como o Page Authority ou o Mozrank, que nos dão uma ideia do quão valorizada a nossa página é junto aos motores de busca.

Para além desta informação, ainda podemos saber o número de partilhas nas redes sociais (de forma menos detalhada do que com o ShareMetric) e uma rápida avaliação de Meta Descriptions, Keywords e até tempo de carregamento.

Extensões para os mais técnicos

Muitos bloggers são também os próprios webmasters. São eles que têm de corrigir bugs, instalar (e editar) themes, adicionar plug-ins e garantir que a performance do site é razoável para todos.

Para os mais técnicos, eis aqui 4 boas sugestões.

Firebug Lite for Google Chrome™

Firebug Lite na Chrome Web Store

Esta extensão dispensa apresentações para quem está habituado a editar HTML e CSS. Por muito que os browsers tenham os seus inspectores (no Chrome basta premir F12), nada atinge o nível do Firebug.

A extensão para Chrome ainda não está ao nível da disponível para o Firefox, mas não deixa de ser a melhor solução que conheço para rapidamente inspeccionar o código de uma área do site.

O Firebug Lite para Chrome

A magia acontece quando clicamos em Inspect. Depois, basta seleccionar a área do site que queremos inspeccionar, por exemplo para mudar a cor da font no ficheiro CSS ou o tamanho da letra. Claro que para quem tiver conhecimentos avançados de CSS, o céu é o limite!

WhatFont

WhatFont na Chrome Web Store

Escreva-se ou não em Markdown, o produto final convém ser altamente legível, sob o risco de ninguém ler o que acabámos orgulhosamente de publicar.

O WhatFont já foi abordado antes e é uma espécie de Shazam para descobrir rapidamente o tipo de letra utilizado por qualquer site. Para além da font, também podemos contar com o tamanho de letra e a cor.

ColorZilla

Colorzilla na Chrome Web Store

À semelhança do Firebug, esta é uma extensão que devido à popularidade adquirida no Firefox, teve de ser adaptada também para o Chrome.

O ColorZilla em acção

Utilizar o Colorzilla dificilmente poderia ser mais simples – basta clicar na aplicação para instantaneamente sabermos a Web Color de qualquer objecto no ecrã. Ao clicarmos na cor que queremos guardar, ficamos com a Web Color instantaneamente copiada no clipboard para a utilizarmos de seguida (no Photoshop, por exemplo).

Outra funcionalidade interessante é o Webpage Color Analyzer, ideal para rapidamente ficarmos com o esquema de cores de um theme.

YSlow

YSlow na Chrome Web Store

Os tempos de carregamento de uma página são importantes, não só para garantir uma boa experiência a qualquer visitante (esteja ele no desktop com uma ligação por cabo de 100 MB ou no telemóvel por 3G) como por motivos de SEO – é sabido que o Google privilegia sites de carregamento veloz.

Optimizar o site é conversa para outro dia (infelizmente não chega comprimir imagens), mas o que não falta são aplicações que rapidamente avaliam os tempos de carregamento de qualquer site.

Exemplos são a MozBar (referida em cima), o serviço PageSpeed da Google, o GTmetrix ou o Pingdom.

Apesar da vasta oferta de serviços deste género, o meu voto vai para esta extensão da Yahoo: o YSlow.

BrunoBrito.PT no YSlow

Depois de um clique, o YSlow avalia o nosso site e dá não só uma nota de performance, como sugere pontos que podemos corrigir para melhorar a prestação do nosso site.

Conclusão

Nem todos os utilizadores gostam de artilhar os seus browsers com extensões, mas é inegável que muitas podem levar o nosso blogging para um nível superior ou, pelo menos, facilitar em muito a nossa vida.

Esqueci-me de alguma? Quais são as vossas extensões preferidas?

10 profissionais de Marketing Online

10 profissionais de Marketing Online que deves conhecer

10 profissionais de Marketing Online que deves conhecer 620 350 Bruno Brito

A internet está cheia de personalidades fascinantes, que diariamente criam conteúdos para consumirmos. O Marketing Online não é excepção, surgindo diariamente novos nomes para decorar, novos artigos para ler e novos gurus para seguir.

Para esta lista, pensei nos 10 bloggers que mais respeito neste espaço. Todos eles actuam em nichos, vendendo produtos diferentes – geralmente livros, cursos online ou simplesmente tráfego.

Todos têm em comum a inteligência, o espírito empreendedor, a vontade de ajudar e a capacidade de gerir com mestria a sua marca pessoal. E todos andam nisto há já algum tempo.

Muitos destes bloggers já passaram para aquela que é a nova tendência: o podcasting. Para este artigo não atribuí importância ao canal, mas sim à consistência e à qualidade de conteúdos que semanalmente publicam.

Poderia referir aqui muitos outros nomes – provavelmente bem mais populares e igualmente dignos de menção – como Seth Godin, Gary Vaynerchuk, Chris Brogan, Leo Babauta ou Brian Clark. Mas como estas pessoas já alcançaram o estatuto de pequenas “celebridades” no mundo online, optei por dar destaque aos que acompanho de perto e que pelo tipo de conteúdos, forma de escrever ou personalidade, se aproximam mais ao que procuro quando abro as minhas ferramentas para ler online.

Para se tornar mais fácil entender quem é quem, repito aqui a imagem de topo, mas desta vez com o respectivo nome e links (cortesia ThingLink) para as contas Twitter de cada um destes senhores. Basta passar o rato por cima da imagem, em cada uma das fotografias.

Vamos conhecê-los!

Corbett Barr, Chase Reeves e Caleb Wojcik

Estes 3 rapazes são conhecidos pelos seus feitos individuais, mas actualmente trabalham juntos num projecto de formação online para empreendedores de nome Fizzle. Por $35 mensais, temos acesso a todo o tipo de conteúdos que nos ensinam a triunfar num negócio online.

Dos 3, o nome mais popular é o primeiro: Corbett Barr. Barr, que durante o ano reside 6 meses em São Francisco e outros tantos no México, ficou famoso pelo seu blog ThinkTraffic, um site dedicado a ensinar utilizadores a criar uma audiência e obter tráfego nos seus projectos e pelo seu curso Start a blog that matters, um curso de referência para quem deseja começar um blog.

Nos dias que correm, o ThinkTraffic passou a ser chamado The Sparkline e é o blog oficial do projecto Fizzle, sendo o seu curso um dos principais pontos de atracção.

Chase Reeves é um webdesigner com um enorme sentido de humor, que nas horas vagas gosta de editar podcasts e pensar em produtividade.

Caleb Wojcik começou como assistente de Corbett Barr mas rapidamente criou o seu próprio legado, com o site DIY Video Guy. Vídeo é, de resto, a sua grande especialidade.

Durante 6 meses subscrevi o Fizzle e posso recomendar vivamente essa plataforma para quem quer entrar neste mundo – para além dos vídeos de blogging, podcasting, networking ou produtividade, o fórum está repleto de jovens empreendedores dispostos a ajudar e a comunidade é uma das grandes mais-valias deste produto online.

Ainda assim, o meu conteúdo favorito dos 3 C’s é o seu podcast, de nome The Fizzle Show (e totalmente gratuito). Um business podcast semanal em que se discute tudo o que é relevante para empreendedores e onde é possível testemunhar em primeira mão a sapiência de Corbett, o humor de Chase e os comentários sempre pertinentes de Caleb.

3 personalidades bem distintas, que se complementam muito bem neste projecto e que trazem um pouco de tudo à sua audiência.

Pat Flynn

Pat Flynn é um dos nomes mais sonantes deste grupo, conhecido sobretudo pelo seu site Smart Passive Income, onde documenta todas as experiências e aventuras a que se sujeita no universo Online.

Pat está nisto há muitos anos e o grande valor acrescentado que traz é o da sua enorme transparência – seja no seu trabalho, como na sua vida no geral. Pat sempre partilhou os seus resultados com a comunidade, desde rendimentos a metodologias, factor que o leva a beneficiar de grande confiança. A comunidade do SPI é das comunidades mais fiéis que já vi em todo o universo online.

Para além do site, Pat Flynn conta com 2 podcastsThe Smart Passive Income Podcast e AskPat, este último de periodicidade diária.

Neil Patel

Se só pudesse recomendar uma pessoa desta lista, essa pessoa seria Neil Patel – um jovem que figura no top 100 de empreendedores com menos de 30 anos de idade.

Para além de ter fundado 2 empresas de analytics juntamente com Hiten Shah (Crazy Egg e Kiss Metrics), Neil Patel não é tímido em partilhar toda a sua sabedoria no seu blog, Quick Sprout.

Este blog (tal como o blog da própria marca Kiss Metrics) regista mais de 100 mil visitas mensais e é uma das maiores fontes de conhecimento que podemos consultar, não só de SEO (o ponto forte de Patel) como de online marketing em geral.

Nos últimos meses, Neil tem investido consideravelmente na criação de conteúdos, onde para além dos artigos (todos eles de leitura obrigatória), destaco o seguinte:

  • a Quick Sprout University, uma série de vídeos a custo zero sobre SEO, Social Media, Link Building, Paid Advertising e Content Marketing.
  • o fórum, onde podemos esclarecer todas as dúvidas com outros membros da comunidade (com o próprio Neil Patel a participar activamente em praticamente todas as discussões).
  • os guias ilustrados (como por exemplo de SEO, de Link Building, de Growth Hacking ou de Content Marketing) que são basicamente mini-livros sobre todos os temas quentes do Marketing Online moderno.

Uma coisa é certa: sempre que este senhor dá sinal… é melhor ler (ou ouvir)!

John Lee Dumas

Falar de John Lee Dumas é falar do seu podcast: Entrepreneur on Fire. Com mais de 600 episódios e mais de 100 mil dólares por mês de rendimentos, não há nenhum motivo para fechar os olhos a este fenómeno, valendo a pena dedicar 25 minutos do dia para ouvirmos a sua (sempre inspiradora) conversa diária com outros empreendedores.

O movimento EOFire já protagonizou um Conteúdo é Rei, onde falo sobre John Lee Dumas de forma exaustiva, pelo que não me alongarei aqui.

A título de curiosidade, de referir que os seus relatórios de rendimento foram reflexo da transparência de outro senhor aqui mencionado – Pat Flynn – que por sua vez, começou o seu podcast diário AskPat após sugestão de John.

James Altucher

James Altucher é uma personalidade controversa, famoso pela sua escrita sincera e polémica – já escreveu vários livros de enorme qualidade (como Choose Yourself).

Mas o que torna este escritor tão fascinante é o facto de ter perdido, por várias vezes, milhões de dólares – e ter voltado a recuperá-los mais tarde.

O nome de Altucher surgia de forma constante no site de perguntas Quora e a sua resposta era sempre a minha preferida – foi aí que tomei conhecimento do seu trabalho.

No entanto, rapidamente me apercebi que este era muito mais do que um utilizador vulgar desta plataforma (se é que posso aplicar esta palavra no que diz respeito à comunidade do Quora).

Altucher nem sempre fala de negócios ou de Marketing Online – pode ser bem mais profundo do que isso. Mas a verdade é que domina as técnicas de Marketing como poucos, conhecendo bem a sua audiência e estando um pouco por todo o lado – seja no Quora, no Twitter, no seu site, na sua newsletter ou num dos seus 2 podcasts: o Ask Altucher ou o The James Altucher Show (com convidados de luxo).

Noah Kagan

Várias palavras podiam ser rapidamente associadas a Noah Kagan – Facebook (foi o colaborador #30), AppSumo, uma mailing list de 700 mil subscritores ou tacos (a sua comida preferida).

Mas, para mim, Kagan é sinónimo de OK Dork – o seu blog, em que fala de tudo o que é relacionado com Marketing Online e onde podemos contar com artigos escritos por convidados ilustres.

O que mais gosto do OK Dork é o facto de Kagan escrever de uma forma em que é impossível não partir à acção logo a seguir – não só é sempre muito detalhado e prático como as suas dicas envolvem frequentemente algum tipo de hacking. Um processo similar ao blog de Neil Patel.

Não poderia falar de Kagan sem referir o projecto App Sumo, uma newsletter de descontos/freebies para profissionais online que é famosa pelos seus fantásticos e-mails, com uma taxa de abertura assustadora devido à qualidade do copywriting (para tal, Noah pediu ajuda a este senhor).

Paul Jarvis

Quando não está a trabalhar no design de websites, Paul Jarvis escreve livros e faz experiências – partilhando sempre connosco os seus resultados.

A julgar pelos seus livros, este canadiano dirige-se, sobretudo, a 2 targets: artistas e empreendedores que querem ganhar a vida no mundo online, de forma honesta.

Para além dos livros (posso recomendar o Everything I Know e o The Good Creative), podemos acompanhar Jarvis no seu blog, na sua newsletter semanal ou no Twitter. O seu trabalho pode também ser lido em alguns dos sites mais populares da web, como a Forbes, a Smashing Magazine ou o FastCompany.

Jarvis brilha na sua honestidade e simplicidade de escrita, o que aliada ao seu processo criativo se tornam um must para mim.

Jon Loomer

O Facebook oferece inúmeras oportunidades de negócio, mas com tantas (e frequentes) actualizações, torna-se difícil de dominar. Para resolver este problema, podemos contar com Jon Loomer e o seu respectivo blog, com o mesmo nome.

Para além do seu site, frequentemente actualizado com todas as dicas para levar o Facebook marketing ao limite, John disponibiliza um podcast (o Social Media Pubcast) e tem ainda uma forte presença no YouTube – até porque uma forma de fazer dinheiro é através de tutoriais de vídeo.

De todos os profissionais aqui referidos, Loomer é sem dúvida aquele que optou por um nicho mais estreito, visto que não aborda mais nada dentro do Marketing Online – mas considerando que estamos a falar do gigante Facebook, seria difícil pensar que não se tratou de uma boa decisão.

Se quiser entrar em contacto comigo, pode enviar-me um e-mail para [email protected] ou preencher o formulário abaixo.

NOTA: Todos os campos são de preenchimento obrigatório.