Quando criamos conteúdos para a Web, uma das principais preocupações é garantir que temos uma página com um carregamento rápido para os nossos visitantes.

A velocidade não só é conveniente na perspectiva do utilizador, que poderá estar a aceder ao site através de uma ligação bem mais lenta que a nossa ou com o telemóvel, como importante a nível de SEO – o Google e outros motores de busca valorizam a velocidade de carregamento das páginas nos seus algoritmos.

Essa é uma das principais razões para existirem tantos serviços preocupados com a velocidade: desde o PageSpeed ou o YSlow, passando pelos serviços de alojamento com preços exorbitantes ou as Content Delivery Networks, como a Amazon CloudFront (utilizada neste blog).

Todo o tipo de conteúdos podem ser optimizados, mas aqueles que provavelmente terão maior impacto no carregamento de qualquer página serão as imagens.

E é aqui que vamos dar utilidade ao Compressor.io.

Apresentando o Compressor.io

Há imensos programas que nos podem ajudar a comprimir imagens para a web (como o Smush.it, da Yahoo) mas esta webapp, que é relativamente recente, tornou-se instantaneamente no meu serviço favorito para esta tarefa.

O Compressor.io suporta 4 formatos – JPEG, PNG, GIF e SVG – e promete reduzir o tamanho dos ficheiros até 90%. Poderemos optar por Lossless ou Lossy, este último garantindo maior compressão, com maior impacto no tamanho final do ficheiro.

Este valor poderá parecer demasiado exagerado, mas já o tenho utilizado em vários posts, para este e para outros blogs, e de facto obtive reduções entre os 50% e os 90% para a maioria das imagens que comprimi. As diferenças só serão notórias se estivermos à procura delas, sendo frequente alternar entre o ficheiro original e o novo sem constatar praticamente qualquer alteração significativa. Nada mau!

O Compressor.io permite um upload de uma imagem de até 10 MB, devolvendo depois o respectivo ficheiro para download, juntamente com um save to Dropbox e um save to Google Drive. Nos meus testes, nunca consegui gravar para Dropbox, pelo que poderá ainda não estar a funcionar a 100%.

Ainda não é possível comprimir mais do que uma imagem ao mesmo tempo, mas esse “batch processing” está previsto segundo o Twitter oficial.

A alternativa – o ImageOptim (Mac)

Para Mac, uma alternativa que vale a pena considerar é o ImageOptim, que engloba várias ferramentas de optimização, como o PNGOUT, Zopfli, Pngcrush, AdvPNG e outras.

O programa suporta PNG, JPEG e GIF e apesar de não conseguirmos um tamanho de ficheiro tão pequeno, tem uma excelente vantagem: suporta batch processing. Basta arrastar todas as imagens para o ícone do ImageOptim na doca do OSX e ele tratará da compressão de imediato, fazendo overwrite ao ficheiro original e colocando o ficheiro optimizado em seu lugar.

Este programa é uma boa escolha para quem tem muitas imagens para optimizar e não quer passar pelo trabalho de as arrastar uma-a-uma para a janela do Compressor.io, ou para quem simplesmente prefere a comodidade face ao tamanho do ficheiro final.

A escrita online evoluiu bastante nos últimos anos. Passámos de um cenário em que apenas programadores com conhecimentos de HTML conseguiam inserir texto, para um mundo em que qualquer pessoa minimamente habituada a um interface gráfico (como o do Word) consegue utilizar um Content Management System, como o super-popular WordPress.

Passámos, no fundo, de um mundo repleto de código para algo mais visual, seguindo a máxima WYSIWYG (What You See is What You Get). No entanto, sempre achei que este tipo de editores mais modernos não nos davam total controlo de como o texto ia ficar.

São excelentes para quem está a começar, sem dúvida, mas é frequente a necessidade de visitar o código para algum pequeno ajuste. Por esse motivo, há quem acabe por escrever tudo em HTML – apesar de ser uma linguagem simples, sempre senti que o HTML era desnecessariamente complexo em alguns momentos.

Pelos vistos não estava sozinho. Surge assim o Markdown.

O que é o Markdown?

O Markdown já surgiu há 10 anos, mas a sua popularidade continua a crescer. Eu diria que esta é uma linguagem muito básica, que está no meio-termo entre o WYSIWYG e o HTML.

Basicamente, é o melhor dos 2 mundos: dá-nos a sensação de controlo que o HTML nos providencia mas com uma sintaxe tão simples que praticamente não se trata de código.

Falando em sintaxe, esta cábula dá-nos basicamente tudo o que precisamos de saber:

Markdown comparado ao HTML

O Markdown suporta HTML, o que significa que podemos inserir HTML no meio do nosso documento de Markdown e será interpretado correctamente. Isso torna aquele embed tão simples de fazer quanto antes, ou alguma mudança específica, como centrar uma imagem.

Mas as acções mais frequentes, essas… são agora bem mais simples.

Eis alguns exemplos:

• escrever # ou ## substituem o <h1></h1> e o <h2></h2> respectivamente;
• o texto a negrito consegue-se com um simples ** em vez de <strong></strong> e o itálico com * em vez de <em></em>;
• ![]() dá-nos tudo o que precisamos para inserir uma imagem e respectivo alt text, ao invés do bem mais extenso <img src="" alt="">.

De recordar que todo o código HTML utilizado é também compatível – podemos escrever ## numa parte do texto e <strong></strong> na outra, que o resultado será o mesmo. E já que estamos numa de cábulas, aqui fica uma de HTML.

A conclusão é simples: é mais rápido escrever em Markdown. E eu adoro escrever depressa.

As apps

Escrevo todos os meus textos em Markdown há mais de um ano e ao longo desse período já encontrei várias aplicações bastante interessantes. Em baixo indico as mais populares.

Cada vez existe maior adesão por parte da comunidade e ainda bem – exemplos disso são o Slack ou o Airmail, 2 aplicações que utilizo diariamente.

Markdown no WordPress

Se o WordPress está em mais de 20% de sites da Internet, é seguro afirmar que só podemos encarar o Markdown como uma alternativa interessante se existirem soluções para este CMS. Felizmente, há bastantes plug-ins.

Aqui, o destaque vai para o WP-Markdown. Não só podemos passar a escrever em Markdown nos posts e nas páginas, como podemos até activá-lo para comentários (particularmente útil quando alguém quer comentar com linhas de código HTML, por exemplo num site frequentado por programadores).

Markdown no Ghost

Se leste este artigo sobre o Ghost, já saberás aquilo que vou dizer aqui: o Ghost suporta o Markdown de raíz, pelo que não será preciso fazeres nada.

Todos os posts deste blog são escritos directamente aqui, sem intermediários.

Markdown no SublimeText (Windows/Mac/Linux)

O SublimeText é o meu editor de texto preferido e uma das coisas que o torna tão especial é a fantástica comunidade que cria plug-ins para tudo e mais alguma coisa.

Se instalarmos o MarkdownEditing com o PackageControl (indo a “Preferences> Package Control” e depois “Install Package”), imediatamente ficaremos com um Sublime bem mais útil para este tipo de projectos, formatando o documento.

Em baixo podemos comparar o Sublime com e sem o MarkdownEditing.

Markdown Pad 2 (Windows)

Para Windows, o Markdown Pad 2 é uma boa aposta. A versão gratuita permite fazer a grande maioria das acções e com o seu interface a la Word, acaba por ser uma boa introdução para iniciados no Markdown. À semelhança do Ghost, tem o editor de texto à esquerda e o LivePreview à direita, para que possamos ver em tempo real o nosso texto.

Marked 2 (Mac)

Marked 2 é uma app genial para Mac criada por Brett Terpstra, uma das personalidades mais activas desta comunidade.

Esta aplicação não produz Markdown (ou seja, não é um editor de texto) mas é excelente para visualizar conteúdos finais e analisá-los, sendo muito útil tanto para escritores como para programadores.

É frequente correr esta aplicação lado a lado com o Sublime, visto que o Marked 2 refresca sempre que se faz save no documento.

Estas são algumas das minhas funcionalidades preferidas da aplicação:

• Verificação de broken links;
• Conversão rápida para HTML ou PDF;
• Expansão e minimização dos capítulos por headings;
• Análises ao texto como contagem de palavras, tempo de leitura e a densidade e testes de legibilidade Flesch-Kincaid, que permitem identificar a facilidade de leitura de um documento.

O Marked 2 também aceita a importação da stylesheet de um theme, pelo que podemos visualizar um documento como se já tivesse sido postado no nosso blog.

Conclusão

O Markdown continua a crescer e é uma excelente opção para quem quer começar a escrever para a web sem um curso de HTML. Prevejo que cada vez mais aplicações suportem esta linguagem e um dia talvez até se torne mesmo no standard do blogging.

O WordPress é uma plataforma fantástica. O projecto continua a crescer e todos os dias novos (e brilhantes) plug-ins surgem para facilitar a vida dos milhões de bloggers que utilizam este CMS (Content Management System).

O WordPress é uma escolha tão popular que estima-se que 1 em cada 5 sites utiliza esta plataforma – dada a sua flexibilidade e suporte, é geralmente a solução top-of-mind.

No entanto, para este blog, decidi experimentar algo diferente. Talvez por procurar algo minimalista, talvez por estar “farto” de utilizar a mesma ferramenta ou simplesmente por curiosidade, optei por outro caminho. Quando decidi arrancar com este projecto, não tive grandes dúvidas: ia dar uma hipótese ao Ghost.

Apresentando o Ghost

O Ghost é fruto de uma campanha Kickstarter, uma plataforma de crowd-funding que se tem relevado uma das melhores formas de projectos promissores obterem financiamentos.

Ghost fez barulho logo ao início: a missão e o interface apelativo valeram-lhe o destaque em sites de referência, como o Mashable ou a Forbes. O hype não tardou e, sem surpresa, o projecto foi financiado com sucesso em Maio de 2013, recebendo cerca de 8x o investimento pretendido.

O fundador, John O’Nolan, que é na realidade um ex-colaborador WordPress, pretende com esta plataforma trazer de novo o foque ao blogging e à criação de conteúdos – algo cada vez menos possível no WordPress, no meio de tantos plug-ins e customizações de código para que tudo simplesmente funcione.

Os primeiros passos

O Ghost ainda tem pouco tempo – lançado em Outubro de 2013, está actualmente na versão 0.4.1. Ainda assim, a adesão tem sido impressionante e esperam-se grandes novidades para os próximos meses, como as apps (o equivalente dos plug-ins WordPress) na versão 0.5 e o multi-user na 0.6.

Por agora, podemos simplesmente contar com algumas dezenas de themes (gratuitos ou premium), um editor minimalista (que coloca o nosso texto em markdown à esquerda e o preview à direita) e um pequeno ecrã de Settings onde definimos o nosso avatar, o nosso logo e o theme que pretendemos utilizar. Pode parecer pouco, mas na verdade é o suficiente para a maior parte dos blogs.

O objectivo do Ghost dificilmente será competir com o WordPress, actualmente na versão 3.8.1 e com uma enorme comunidade sempre disponível a esclarecer qualquer questão, criar plug-ins ou disponibilizar themes. Mas se considerarmos o sucesso recente de outras plataformas, como o Medium ou o Svbtle, existe de facto um interesse crescente em plataformas que se foquem mais na apresentação de conteúdos e na escrita e menos na quantidade de plug-ins e opções que disponibilizam.

A questão do hosting

Uma possível desvantagem do Ghost? Nem todos os planos de hosting o vão suportar.

O Ghost é baseado no Node.js, que apesar de ter várias vantagens, não é suportado no plano mais barato de uma empresa como a Dreamhost. A melhor alternativa é recorrer ao próprio hosting proporcionado pelo Ghost que, a cerca de $5 por mês para um pequeno projecto, tem um custo bastante razoável. Alternativamente, outras empresas como a Ghostify disponibilizam este serviço por um valor semelhante, com alguns extras como FTP (a razão pela qual escolhi este último foi precisamente essa).

Sem FTP?

É verdade. O hosting oficial não suporta FTP e após contactá-los, referiram que não está nos planos visto que todas as tarefas são alcançáveis via back-office.

Isso significa que se pretenderes fazer alterações ao theme, terás de descomprimir o ficheiro zip, editar algum ficheiro com extensão hbs, voltar a comprimi-lo e fazer o upload. Não concordo muito com tantos passos para uma tarefa simples, pelo que optei pelo Ghostify e, até agora, sem arrependimentos!

Experimentando o Ghost

O hosting pode ser pago, mas não é preciso gastar dinheiro para experimentar o Ghost. Na verdade, este corre na nossa máquina sem qualquer custo – o processo de instalação manual não é difícil, mas o melhor será recorrer ao pacote da Bitnami para este efeito. 50 MB e um par de cliques depois, o Ghost estará pronto a ser testado.

Se quisermos experimentar a plataforma na Web, tanto o hosting oficial como o Ghostify oferecem um período de trial de 2 semanas sem compromisso.

Personalizando o Ghost

Se as apps só vão estar disponíveis na versão 0.5, o que é que pode ser feito entretanto? Bem, como disse em cima, o Ghost já apresenta todas as condições para um pequeno projecto, mas será necessário mexer em algum código para instalar pequenas ferramentas indispensáveis, como o Google Analytics ou o Disqus. Quanto a themes, ainda são poucos, mas vão crescendo a bom ritmo todas as semanas – basta dar uma olhadela aqui ou no popular site ThemeForest.

Se gostaste do que viste, escolheste um theme e pretendes agora personalizar um pouco mais o teu blog, provavelmente vais querer fazer uma destas coisas:

• alterar o favicon
• instalar o Google Analytics
• instalar o Disqus
• editar as propriedades de OpenGraph (Facebook)
• publicar uma feed RSS

Para te poupar algum tempo nos fóruns, vamos ver cada uma delas em detalhe aqui.

Nota #1: todas estas alterações são efectuadas acedendo à pasta dentro do teu theme, que está geralmente em algo como /content/themes/xyz

Nota #2: sempre que alterares qualquer ficheiro e fizeres upload, terás depois de clicar em “Restart Blog”.

Nota #3: sempre que mudares de theme terás de repetir este processo.

Alterar o favicon

O favicon do Ghost é bonito, mas provavelmente pretenderás trocá-lo por algo alusivo ao teu blog.

Assumindo que já tens o favicon criado e o upload feito algures, terás simplesmente de abrir o ficheiro default.hbs e localizar a zona entre <head> e </head>, para depois inserires o código em baixo (substituindo o endereço do favicon pelo do respectivo upload):

<link rel="icon" type="image/png" href="/favicon.png" />

Instalar o Google Analytics

Depois de criares uma nova conta (ou adicionares um novo site) no Google Analytics, terás de adicionar o código no ficheiro default.hbs, imediatamente antes do final do </head>.

O código deve ficar algo do tipo:

{{ghost_head}}
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXX-XX', 'omeusite.com');
ga('send', 'pageview');
</script>
</head>

Instalar o Disqus

Um blog é bem mais divertido (e útil) quando tem comentários de outros utilizadores, portanto será natural que queiras utilizar o popular Disqus para esse efeito.

Depois de efectuares o registo, terás desta vez que ir até ao ficheiro post.hbs e localizar a zona entre {{/post}} e </article>.

Aí, deves colocar este código, substituindo exemplo pelo teu próprio shortname:

<div id="disqus_thread"></div>
<script type="text/javascript">
var disqus_shortname = 'exemplo'; // required: replace example with your forum shortname
var disqus_identifier = '{{post.id}}'; // make sure to use the post.id as an identifier, otherwise disqus will use the pages url per default, which might be problematic...

/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>

Editar as propriedades de OpenGraph

Alguns themes não estão devidamente personalizados como deviam no que diz respeito ao OpenGraph, o popular API do Facebook.

Ao partilhares um artigo teu, dependendo do theme poderás verificar que o título ou o conteúdo não surgem conforme pretendes. Alguns vão dar o título do teu blog, outros do teu artigo, outros darão somente a data de publicação. Poderás ver como o Facebook interpreta a tua página usando este debugger.

A solução para tal não é imediata (e supostamente será uma prioridade na próxima release), mas a melhor forma de contornar este problema por agora é a seguinte:

1. No ficheiro default.hbs, adicionar:

   {{{block "meta"}}}
   

2. No ficheiro post.hbs, acrescentar:

   {{#post}}
   {{#contentFor "meta"}}
   <meta property="og:title" content="{{title}}" />
   {{/contentFor}}
    ...
   {{/post}}
   

seguindo as propriedades meta que podemos encontrar no debugger, como og:url, og:image ou og:description. Quanto mais informação dermos, maior controlo teremos sobre o que surge na altura de partilhar um artigo.

Para este blog, foi assim que ficou:

Publicar uma feed RSS

Por muito que o Google Reader já não exista, ainda faz sentido publicar uma feed RSS para eventuais leitores que pretendam subscrever o nosso blog. Criar uma feed RSS no Ghost não será difícil para ti se realizaste os passos anteriores com sucesso.

O primeiro passo será publicar o nosso site no Feedburner. Para tal, basta fazer login com a nossa conta Google e adicionar o endereço do nosso site. Depois de clicar em “Next” um par de vezes, teremos acesso à nossa feed personalizada com algo do género

http://feeds.feedburner.com/nomedosite  

O próximo passo será abrir o (já familiar) default.hbs e localizar a seguinte linha (poderá não ser exactamente igual, mas seguramente similar):

<a class="subscribe icon-feed" href="{{blog.url}}/rss/"><span class="tooltip">Subscribe!</span></a>

Aqui, bastará substituir {{blog.url}}/rss/ pelo nosso endereço do Feedburner e está feito!

Conclusão

O Ghost terá muito a oferecer no futuro e para qualquer questão mais específica o melhor será sempre visitares a secção da documentação oficial. Se experimentaste o Ghost e sentiste que algo está a faltar, não desanimes – o mais provável é que esteja previsto para uma release futura.

Veremos o que esta plataforma tão promissora nos reserva nos próximos tempos!