Publicado Por :

Bruno Brito

Como Converter de HEIC para JPG

Como Converter de HEIC para JPG no Finder (macOS)
Como Converter de HEIC para JPG no Finder (macOS) 1240 700 Bruno Brito

Com a chegada do iOS 11, a Apple introduziu um novo formato para gravar fotografias tiradas com os iPhones. De nome HEIF (High Efficiency Image File), estes ficheiros são capazes de gravar imagens (tanto individuais como em sequência) com a extensão .HEIC.

Apesar do suporte para este formato ser cada vez maior, ainda preciso com frequência de converter de HEIC para JPG, o formato de fotografia mais popular.

Podes utilizar uma aplicação de imagens como o Photoshop, o Lightroom ou o Pixelmator para esta ação, mas é muito mais conveniente recorrer apenas ao Finder, uma aplicação nativa de macOS, especialmente se pretenderes converter diversos ficheiros em simultâneo (ou seja, em bulk).

Vamos então aprender como podes converter de HEIC para JPG com um simples par de cliques. Para tal, vamos recorrer à ajuda do Automator.

Tal como o Finder, o Automator também é uma aplicação nativa do macOS, que podes encontrar na pasta das Aplicações. Como o nome indica, o seu objetivo passa por automatizar tarefas repetitivas.

Neste pequeno guia, vamos criar a nossa 1ª ação para ficares a conhecer este magnífico programa!

Passo #1: uma vez aberto o Automator, deves clicar em “New Document” e escolher “Quick Action”.

Automator - Quick Action

Passo #2: altera a opção em “Workflow receives current” para “image files”.

Automator - Workflow receives current

Passo #3: em “Library”, à esquerda, escolhe “Photos” e clica na ação “Change Type of Images”.

O Automator vai-te então perguntar se queres manter uma cópia do ficheiro .HEIC original, ou apagá-lo, ficando apenas o ficheiro JPG.

Se quiseres ter a cópia original, clica em “Add”; caso contrário, opta por “Don’t Add”.

Automator - Add a Copy

Por fim, indica que o novo tipo de imagem pretendido é JPG.

Automator - Change Type

Passo #4: grava a tua ação, dando-lhe um nome reconhecível (como “HEIC to JPG”), com o habitual “File > Save”. E está feito! 😎

Vamos ao teste: no Finder, clica no lado direito (ou CTRL + clique) no ficheiro .HEIC que pretendes converter, e procura “Services” no final do menu de contexto. Deverás ter uma nova opção com o nome que lhe deste!

Finder - Services

Nota que as ações que surgem dependem do contexto – se não estiveres a clicar numa imagem, não verás esta opção.

Dica Extra: podes conferir todos os serviços que tens disponíveis indo a Keyboard > Shortcuts > Services e até definir um atalho de teclado para uma ação que realizes com imensa frequência.

Keyboard - Shortcuts - Services

Como vês, o Automator pode ser muito útil para tarefas como esta!

Como instalar o WordPress com o Docker

Como instalar o WordPress com o Docker
Como instalar o WordPress com o Docker 1240 700 Bruno Brito

Esta é a minha nova forma preferida de instalar o WordPress localmente para os meus projetos.

Existem várias alternativas, como o XAMPP ou o VVV (Varying Vagrant Vagrants), mas esta solução com o Docker parece-me a mais rápida.

Vamos diretos ao assunto. O que é necessário?

  • Algum espaço em disco (cerca de 10 GB);
  • Conhecimentos de como configurar o WordPress;
  • Alguma confiança em utilizar a linha de comandos.

Vamos a isto!

#1: Descarregar o Docker

Deves começar por descarregar o Docker Desktop, disponível tanto para Windows como para macOS.

Vais precisar de criar uma conta no Docker para tal (o registo é gratuito).

Em macOS, o download é cerca de 500 mb, e uma vez instalado, ocupa cerca de 2 GB.

Após a instalação, verifica que o Docker Desktop está a correr, conforme esta imagem:

Docker Desktop is running

#2: Criar o ficheiro docker-compose.yaml

Cria a pasta onde queres instalar o teu site WordPress, e de seguida, cria o ficheiro docker-compose.yaml – responsável por definir as dependências do container.

Para além do WordPress temos que instalar o MySQL para termos uma base de dados e o phpMyAdmin para a gerirmos facilmente.

Copia e cola o código que coloco em baixo no teu editor de texto preferido (eu recomendo o VS Code ou o SublimeText).

Tem atenção à indentação, que tem que ser respeitada.

#3: Configurar tudo com um só comando

É tempo de navegar até à pasta do projeto no terminal e correr o comando docker-compose up -d.

O Docker vai de seguida fazer a sua magia, instalando na pasta a última versão do WordPress e colocando o site imediatamente disponível na máquina local.

A primeira vez demora algum tempo, porque o Docker terá que descarregar e configurar o WordPress, MySQL e phpMyAdmin. Das próximas vezes já será um processo bem mais célere.

Docker Compose

#4: Visitar o site

E já está! O site está já disponível em http://localhost:8000/ com o habitual ecrã de configuração do WordPress.

Idioma do WordPress

Podes também aceder ao phpMyAdmin para gerires as bases de dados, indo a http://localhost:8080/ – todas estas portas foram definidas no docker-compose.yaml e podes claro definir outras, se preferires.

O login/password do phpMyAdmin será wordpress/wordpress e poderás também alterar esses parâmetros no docker-compose.yaml.

#5: E como desligo a máquina?

Quando já não precisares de ter este container activo, o melhor será correres o comando docker-compose down --volumes na pasta do projecto.

Não poderás ter vários sites WordPress a correr em simultâneo sem alterares as portas – portanto cerfica-te que ou as alteras no docker-compose.yaml, ou que desligas esse contentor antes de passar para outro.

PES myClub Guide

PES myClub – a criação de um guia definitivo
PES myClub – a criação de um guia definitivo 1240 700 Bruno Brito

Nos últimos dias de 2018 decidi criar um guia para o simulador de futebol Pro Evolution Soccer, da Konami (disponível para PS4/XBOX/PC).

O que me motivou? A ausência de informação sobre o jogo, em particular sobre o myClub, um dos modos mais populares do PES 2019.

Apesar da sua popularidade, o myClub é particularmente complexo, e quando comecei senti algumas dificuldades em entender tudo o que podia fazer – o que me surpreendeu, considerando que já jogo PES há quase 2 décadas.

Assim sendo, fui procurar respostas online, mas a informação não abundava. Estava aqui uma oportunidade: compilar toda a informação disponível sobre o myClub para o PES 2019 e criar o guia definitivo do jogo.

E assim nasceu o PES myClub Guide.

Para chegar a mais gente, decidi escrevê-lo em inglês. Neste momento, o guia conta com mais de 8.000 palavras – o que significa que leva mais de 40 minutos a ser lido!

Muito do conteúdo surgiu de dúvidas minhas, mas foi também muito importante visitar os principais fóruns (como o Reddit) para entender as dúvidas mais frequentes e garantir que o guia se tornava acessível a qualquer “novato” no jogo.

Aqui, aprendi que é bastante importante facilitar a chegada de jogadores que vêm do jogo concorrente (o FIFA, mais concretamente jogadores do modo Ultimate Team) e que os leilões no PES são a componente que gera maior confusão.

Optei também por criar uma secção de dicas rápidas para jogadores que já estão familiarizados com o myClub, mas que ainda assim podem ter passado ao lado de alguns pontos.

Por motivos de SEO, optei por tornar este guia single-page, com um índice detalhado e sem qualquer imagem – para que o site carregue o mais rapidamente possível.

A performance foi na verdade uma das principais preocupações: o JavaScript foi mínimo, até porque o desafio principal estava relacionado com o design; como tornar um bloco gigante de texto convidativo ao leitor, e fácil de ler nos vários dispositivos?

Era esse o principal problema, mas fiquei satisfeito com a solução encontrada.

pesmyclubguide.com screenshot

E agora, o que se segue? A divulgação do site nas principais comunidades, para recolha de feedback e optimizações do conteúdo.

Tenho ainda 2 curiosidades que gostava de ver respondidas:

  • será que o conteúdo é demasiado longo para os leitores? Seria preferível um vídeo? Obviamente não estou à espera que cada leitor leia todo o guia, mas qual será o tempo no site que o Google Analytics me dará?
  • será que o guia sem imagens funcionará, ou terei que aumentar o peso da página?

A longo prazo não tenho qualquer ambição para este projecto, mas com os meus conhecimentos de Marketing Digital tentarei fazer o possível para que este guia chegue a todos os fãs do jogo – recorrendo sobretudo a técnicas de link building.

Mas, por agora, estou simplesmente feliz por já existir um guia para o viciante myClub do PES 2019! 🙂

Como comprimir imagens WordPress

Como comprimir imagens WordPress (no Ubuntu)
Como comprimir imagens WordPress (no Ubuntu) 1240 700 Bruno Brito

Sou grande fã de performance no geral, e no passado já partilhei contigo algumas dicas para aumentares a velocidade do teu site e optimizares imagens.

Recentemente visitei o PageSpeed Insights da Google para verificar se podia realizar mais optimizações a este blog WordPress. E, ao que parece, havia bastantes imagens que podiam estar mais leves.

Eu optimizo sempre as minhas imagens com o excelente ImageOptim para Mac, mas é importante ter em conta que sempre que carregas uma imagem para o WordPress, várias miniaturas de cada imagem são geradas – que são exibidas nas páginas de arquivo, por exemplo.

E essas imagens não são comprimidas – algumas miniaturas chegam até a pesar mais do que a imagem original!

Foi graças ao PageSpeed que me apercebi disso. Mas como resolver?

Plugins WordPress para comprimir imagens

Existem diversos plugins WordPress que prometem a compressão de todas as imagens do teu site, mas a maior parte tem um limite de compressões que podes realizar por mês (a não ser que pagues).

Outro problema é que alguns destes plugins são também bastante lentos – a compressão de imagens não é um processo particularmente rápido, especialmente se se tratarem de PNGs.

Se tiveres poucas imagens, ou não tiveres problemas em esperar, podes experimentar um destes plugins. O reSmush.it pareceu-me o melhor, permitindo a compressão de todas as imagens desde que sejam inferiores a 5 MB, mas deixo-te mais alternativas.

Como o meu blog está alojado no DigitalOcean (o meu serviço de alojamento favorito), decidi investigar que comandos se podem correr através do terminal.

Existe uma solução similar ao ImageOptim para Linux, o Trimage, mas que requer um interface gráfico – e eu só tenho acesso ao terminal.

Todos estes programas de compressão de imagens recorrem habitualmente ao OptiPNG e ao jpegoptim – que são open source. Como conheço alguns comandos de terminal, parti à descoberta!

Instalando o OptiPNG e o jpegoptim no Ubuntu

O primeiro passo será instalar ambos – se é que não estão já instalados na tua máquina.

Primeiro, actualizamos os repositórios: sudo apt-get update

Depois, instalamos os 2 programas:

sudo apt-get install jpegoptim optipng

Comprimindo imagens com o OptiPNG e o jpegoptim no Ubuntu

Ambos os programas têm vários parâmetros que podes precisar para definir a compressão.

Podes ver o que cada um pode fazer com o comando jpegoptim -h ou optipng -h respectivamente.

Opções do jpegoptim

No meu caso, queria aplicar esta compressão a todas as imagens da pasta em que me encontro e de forma recursiva – ou seja, se existissem sub-pastas, as imagens que lá constassem deveriam ser também elas comprimidas.

O WordPress facilita-nos a vida neste aspecto, porque todas as imagens vão estar em wp-content/uploads/, ficando depois em pastas de anos e dentro delas, os respectivos meses.

Para o OptiPNG, podes correr este comando para comprimir todos os ficheiros PNG: find -name '*.png' -print0 | xargs -0 optipng -o7

O OptiPNG tem vários níveis de compressão – podes ir de 1 a 7. A maior redução será se colocares 7, tendo o problema de demorar mais a comprimir cada imagem.

Para o jpegoptim, queres comprimir tanto JPEGs como JPGs, pelo que este deve ser o comando a utilizar: find -name '*.jp*g' | xargs jpegoptim -f --strip-all

Com a ajuda do &&, podes combinar estes 2 comandos numa só linha – quando um processo terminar, o outro começa de imediato:

find -name '*.png' -print0 | xargs -0 optipng -o7 && find -name '*.jp*g' | xargs jpegoptim -f --strip-all

Agora é deixar o processo a correr e passar para outra coisa. É bem possível que fiques admirado com o espaço em disco que recuperaste quando a tarefa estiver concluída!

7 extensões Google Chrome para Programadores

7 extensões do Chrome úteis para Programadores
7 extensões do Chrome úteis para Programadores 1240 700 Bruno Brito

Na semana passada partilhei contigo as minhas extensões preferidas de uso geral para o Chrome, e noutro artigo apresentei 7 aplicações que utilizo diariamente enquanto programo.

Hoje, faz sentido combinar os 2 tópicos: extensões para o Google Chrome que te podem ajudar em várias tarefas de programação!

Neste momento, confesso que ando muito impressionado com o Firefox Quantum: Developer Edition, mas ainda recorro ao Chrome com bastante frequência devido a extensões como aquelas que te vou apresentar de seguida.

Cada extensão torna o browser mais pesado, e ocupa um pouco mais de espaço na barra superior. Como tal, recomendo que as instales mas que as mantenhas desactivadas.

Activa-as apenas quando precisares, recorrendo a outra extensão que também já mencionei no passado – Extensity. Facilita imenso este processo de “ON/OFF”.

E se, como eu, também gostares de usar o browser Opera, não te esqueças que todas estas extensões são também compatíveis com ele.

Vamos então conhecê-las!

#1: One App

One App Webpage

Esta extensão não tem propriamente a ver com código, mas tenho-a sempre activa porque é a minha página pré-definida sempre que abro uma nova tab.

Se programas, provavelmente também visitas sites como o Hacker News, Product Hunt, Designer News ou Github, certo?

O objectivo desta extensão é trazer-te todos os tópicos quentes desses e de outros sites – um verdadeiro “All in One”. Curiosamente, todos eles já faziam parte da minha rotina, pelo que a instalei de imediato. É muito mais fácil estar em cima dos acontecimentos assim.

Podes espreitar o site sem instalar seja o que for, bastando para isso clicar aqui. Como não existe uma app móvel, no telefone e tablet tenho simplesmente esta página definida como a homepage.

#2: CSS Peeper

CSS Peeper

Esta extensão não te vai substituir as visitas às Developer Tools, mas é útil para rapidamente veres a paleta de cores de um site, ou descarregar as várias imagens que lá estão (incluindo SVGs).

Para o download de materiais dá bastante jeito, porque até te cria um ficheiro ZIP com tudo, se quiseres.

#3: FontFace Ninja

FontFace Ninja

No passado utilizava o WhatFont, mas esta extensão é muito mais completa.

Não só detecta todos os tipos de letra utilizados na página em que te encontras, como te oferece um botão para download de qualquer uma, assumindo que são gratuitas. Também as podes gravar como favoritas, se tiveres conta no FontFace Dojo.

Se passares o rato por qualquer texto da página também podes ver o tipo de letra utilizado naquele caso específico, o tamanho e line-height, e ainda a cor. Se clicares nesse mesmo texto, surge uma caixa que te permite escrever o que quiseres e alterar essas propriedades, para conferires o resultado final.

#4: Window Resizer

Window Resizer Google Chrome

É frequente ter de testar um site em várias resoluções, e apesar das Developer Tools serem essenciais para testes em mobile, para testes no desktop prefiro recorrer a esta extensão.

Podes gravar uma combinação de resoluções que queiras utilizar com frequência, ou simplesmente redimensionar o browser, que a extensão indicará o tamanho da janela e do viewport.

Também suporta atalhos de teclado, para o caso de quereres rapidamente alternar entre várias resoluções.

#5: Vimium

O Vim é popular entre programadores, e um dos motivos do seu sucesso é o facto de permitir praticamente tudo sem termos de utilizar o rato. Esta extensão é inspirada nisso mesmo, mas para navegar pela Web.

Podes recorrer a imensos comandos para manteres os dedos no teclado. Eu, habitualmente, só utilizo o J e K para fazer scroll e a possibilidade de navegar para qualquer outra página carregando numa só tecla.

Para esta última funcionalidade, só tens de carregar na tecla F: surge uma etiqueta amarela ao lado de cada link disponível, com o atalho que podes utilizar, como podes ver nesta imagem.

Vimium links

Esta é a lista de atalhos de teclado completa:

Vimium lista de comandos

#6: JSONView

Se já abriste ficheiros JSON no browser, sabes que o output não é bonito. Esta extensão resolve isso, tornando tudo bem legível, com a ajuda de cores e com a possibilidade de minimizares os objectos que não interessarem.

JSON View

Existem várias extensões disponíveis para isto, mas esta é provavelmente a mais popular.

#7: WhatRuns

Para “cuscar” a tecnologia utilizada por cada site, recorro a esta extensão, que é muito similar à Wappalyzer. O WhatRuns identifica milhares de tecnologias, parecendo trazer resultados mais fiáveis que a alternativa.

WhatRuns

Conhece um pouco de tudo: seja uma framework como Bootstrap ou Foundation, um CMS como WordPress ou Joomla, ferramentas para apresentar publicidade, métodos de pagamento, tipos de letra… se for suficientemente popular, o mais provável será detectar sem problemas.

Estas são as minhas “armas secretas” para o Google Chrome. Uma excelente companhia para um editor de texto bem artilhado, seja ele o SublimeText (estas são as minhas dicas) ou o VS Code (idem).

Tens outras extensões que utilizes e que recomendes?

Domínio e Alojamento - O que são

Domínio e Alojamento – o que são e quais as diferenças
Domínio e Alojamento – o que são e quais as diferenças 1240 700 Bruno Brito

Se quiseres criar um site, “Domínio” e “Alojamento” são 2 palavras que rapidamente encontrarás. 2 conceitos recorrentes no mundo dos sites, mas que nem sempre são claros para quem está agora a começar.

Se quiseres criar um site, provavelmente começas por ir ao Google e procuras por algo como “criar site”. Em princípio, encontrarás vários serviços que prometem tratar de tudo, como o WordPress.com ou o Wix, com dezenas de templates apelativos para utilizares, um interface intuitivo e a promessa de que podes começar sem encargos – aliás, verás que a palavra GRÁTIS está presente um pouco por todo o lado nesses sites.

Wix e a palavra GRÁTIS

No entanto, se pedires um site a um programador como eu, ou a uma agência Web, verás que tanto o Domínio como o Alojamento têm custos associados. Eu, por exemplo, nem os incluo nos meus orçamentos, porque prefiro que seja o cliente a gerir essa questão (ajudo-o, obviamente, a encontrar um bom fornecedor, quando ainda não o tem).

Então em que é que ficamos? Tenho que pagar para ter um site, ou não?

O objectivo deste artigo é precisamente explicar-te as principais diferenças entre um domínio e um serviço de alojamento (ou hosting), para além de te esclarecer sobre o quão “gratuitas” algumas soluções realmente são.

Vamos a isto!

O Domínio

Normalmente, um domínio vai andar à volta dos 13–15 euros anuais. É um custo recorrente que terás de suportar todos os anos para manter o teu site online.

Às vezes encontras promoções em que o 1º ano é mais barato, mas nos anos seguintes, o valor é praticamente sempre o mesmo. Se decidires renovar por vários anos, o desconto também é muito pouco significativo.

Este valor pressupõe que o domínio está disponível, claro. Se quiseres um domínio que já tem dono, terás de o contactar e descobrir se está disposto a vendê-lo – e aí, podes ter de pagar centenas ou mesmo milhares de euros para ficar na tua posse.

OK, então e afinal a conversa do “Grátis”?

Podes ter um domínio gratuito no WordPress.com ou no Wix se não te importares que o teu site seja algo como http://oteublog.wordpress.com ou http://omeusite.wix.com. Ou seja, só podes definir o subdomínio – o texto imediatamente antes de .wix.com.

Por questões de credibilidade ou simplesmente por facilitar a memorização, a maior parte dos negócios prefere um domínio próprio – algo como http://www.aminhaloja.com. A questão é que para isso, já terás que pagar um extra nesses serviços – o chamado “Custom Domain”.

Este extra parece insignificante, mas a realidade é que ao fim de um ano, tens de pagar 48 euros ao WordPress.com ou 54 euros no caso do Wix para usares esse domínio personalizado na plataforma.

Custom Domain no preçário do WordPress.com e do Wix

Se comparares com os tais 13–15 euros que referi anteriormente, podes ver que a diferença ainda é significativa. Em boa verdade, o valor que esses serviços apresentam também inclui alojamento, mas já vamos ver melhor essa questão mais à frente.

Top-Level Domains e tipos de domínio

O domínio deste site é brunobrito.pt – o que é que o PT te indica? Que sou de Portugal. Este é o TLD (Top-Level Domain, ou Domínio de Topo), a última parte do domínio. Outros TLDs populares são o .COM, o .ORG ou o .NET.

Existem TLDs Genéricos e os TLDs de Código de País. Na maior parte dos casos, optares por um TLD ou outro não vai impactar o preço. Em alguns negócios fará sentido adquirires um .PT, um .FR ou um .DE, enquanto que noutras circunstâncias, será melhor usares (ou terás mesmo de usar) um .COM, .GOV ou .EDU.

A lista tem vindo a crescer nos últimos anos – à data da escrita deste artigo, já podes escolher entre mais de 1500 TLDs.

Estes são todos aqueles que começam com a letra “A”:

TLDs que começam com a letra A

Podes recorrer a este site para te sugerir alguns domínios criativos, baseados no nome que inserires. Ficas logo a saber se está disponível ou não.

Onde comprar domínios

A maior parte dos serviços que oferecem alojamento também te podem registar o domínio.

Se procuras um domínio .PT, existe um serviço que NÃO posso mesmo recomendar: o DNS.PT. Basta consultares o preçário para veres que gastarás mais de 25 euros anuais, por nenhum motivo aparente. 👎

Uma rápida visita ao site da Iberweb, outra empresa portuguesa, já apresenta o valor que eu diria ser o standard: 11.90 euros + IVA (cerca de 14.60 euros).

Internacionalmente, o Name e o Namecheap são boas referências, mas podes adquirir domínios de qualquer tipo nestes sites – só tens que ter em conta algumas excepções, que estão mais relacionadas com a legislação em algumas regiões, como o Afeganistão ou a Catalunha.

É importante tirar mais uma questão do caminho:

Podes adquirir um domínio num fornecedor diferente do alojamento, da mesma forma que podes trocar de alojamento mais tarde, sem perder o domínio.

Para isso, convém adicionares uma nova palavra ao teu dicionário de Gestão de Domínios, que vem já a seguir…

Nameservers

Nem sempre se fala neste termo, até porque raramente é do interesse das empresas de alojamento divulgar esta palavra (é muito mais interessante fidelizar o cliente tanto no domínio como no alojamento). Mas a verdade é que todas as empresas disponibilizam os seus Nameservers.

O Nameserver é o responsável por “ligar” o domínio ao alojamento.

Se comprares tanto o Domínio como o Alojamento na mesma altura, no mesmo site, os Nameservers já vão estar devidamente configurados. Mas se tiveres fornecedores separados para cada um, é uma questão de procurares no site onde tens o alojamento pelos Nameservers que deves inserir.

Os Nameservers são habitualmente 2 a 4 entradas que vais ter de inserir no painel de gestão do Domínio, no site onde o registaste.

No caso da Iberweb são os seguintes:

dns1.ibername.com

dns2.ibername.com

No caso do DigitalOcean, outro serviço do qual sou fã, é muito similar:

ns1.digitalocean.com

ns2.digitalocean.com

ns3.digitalocean.com

Quando alterares estes Nameservers, vai acontecer uma coisa que é bastante chatinha: não vais saber se a alteração que fizeste foi efectuada com sucesso de imediato, porque essas alterações terão que propagar por todo o mundo – processo que leva entre 24 a 48 horas até ser realizado a 100%. Podes acompanhar o processo de propagação pelo mundo aqui.

Se ainda não arrancaste com o teu site, não é tão incomodativo. Mas se tiveres um site com bastante tráfego, que gera dinheiro, e uma caixa de e-mail associada ao domínio, por exemplo, certamente não verás com bons olhos esse downtime.

Downtime? Impede-o com o Cloudflare

Por este motivo, eu gosto de utilizar um serviço gratuito que fica no meio destes 2 mundos, chamado CloudFlare. Para além de oferecer uma camada extra de segurança ao teu site e outras vantagens, permite-te gerir a correspondência entre todos os teus domínios e todos os teus alojamentos.

Se apontares os teus Nameservers para o Cloudflare, podes depois indicar lá o teu novo serviço de alojamento, e a alteração é imediata – não esperas sequer 5 minutos, quanto mais 24 horas.

É muito fácil começar. Podes ficar com uma ideia vendo este vídeo.

O interface para gerir os domínios é também muito apelativo, e como tenho vários domínios e vários serviços de alojamento, acabo por preferir gerir tudo lá.

Pode parecer um passo adicional trabalhoso ao início, mas se um dia decidires alterar de serviço de alojamento, vais ficar grato por teres utilizado esta ferramenta.

O Alojamento

Na verdade, esta parte é facultativa. Podias pegar num computador antigo que já não uses, deixá-lo ligado todo o dia, e basicamente ser essa máquina a servir o teu site. E é o que acontece em muitas empresas, que têm aquelas salas gigantes onde está o servidor, que vês nos filmes de ficção científica.

No entanto, para um caso individual, raramente é um cenário prático. Se te faltar a luz em casa, o teu site ficará offline. Se muitas pessoas estiverem a aceder ao teu site, a tua ligação à Internet vai ser incapaz de aguentar o tráfego. E será que queres mesmo manter um computador ligado todo o ano, e configurá-lo?

É muito mais prático recorrer a um serviço de alojamento. Existem alojamentos baseados em Windows, em Linux, VPS (Virtual Private Servers), Alojamentos Dedicados… e é normal que tanta oferta te confunda.

Se estás a começar e queres um site muito simples, provavelmente até baseado em WordPress, um alojamento baseado em Linux e PHP é o que precisas. Ao contrário do que acontece habitualmente, aqui o Linux é uma escolha bem mais popular que o Windows.

Muito raramente vais precisar de um sistema Windows, a não ser que seja baseado em ASP/.NET.

Se o teu site for essencialmente para visitantes portugueses, talvez faça sentido adquirires um servidor que esteja em solo nacional – eu recorro à Iberweb nesses casos, e também já ouvi falar muito bem da PTServidor e da webHS.

No caso da Iberweb, o plano de alojamento mais barato custa menos de 15 euros por ano.

Iberweb - Preçário do Alojamento

Para sites internacionais, já usei vários serviços de alojamento – Bluehost, Media Temple ou GoDaddy, entre outros – e achei a experiência similar em todos eles.

Nenhum é particularmente intuitivo ou extra rápido, mas também estamos a falar de alguns dos serviços mais populares e baratos da Web inteira.

Como actualmente tenho muitos sites WordPress e gosto de ter algum controlo sobre o computador/software alugado que estou a usar, optei por pagar um pouco mais (5 dólares por mês) e utilizar o DigitalOcean, um serviço que adoro (este blog está lá alojado).

Não é para iniciados, mas há excelentes guias por aí. Podes ver como instalar blogs WordPress neste alojamento seguindo este meu guia.

É uma VPS, o que significa que posso aceder ao terminal da máquina e mudar o sistema operativo, instalar software adicional e mexer nas definições que bem entender.

Se não precisares de um CMS como o WordPress, apenas de um sítio para fazeres upload de ficheiros HTML/CSS/JavaScript, tens o serviço S3, da Amazon.

Não é um serviço muito intuitivo, mas é para isso que este meu guia serve – até inclui as dicas para o integrares com o Cloudflare.

Por fim, podes optar por utilizar um 2º alojamento dedicado ao armazenamento de ficheiros grandes, como vídeos ou músicas. Aí, o serviço mais barato será o BackBlaze B2, uma óptima alternativa ao S3.

O que define um bom serviço de alojamento?

Qualquer preçário que consultes vai apresentar-te vários números. O número de GBs do disco rígido reservados para ti. O número de caixas de correio ou bases de dados que podes criar. Em alguns casos, até o número de visitas ou de GBs transferidos que tens direito, por mês.

É tentador comparar o preço apresentado e o número de GBs oferecido, mas olhar só para isso até é perigoso.

Nem sempre é melhor negócio pagar 3 euros por mês por um alojamento com 20 GB de espaço em disco, em vez de 5 euros por um serviço que oferece 10 GB. Há muitos outros factores em jogo, e a performance do teu site vai depender em grande parte da tua “vizinhança”.

Como se tratam de alojamentos partilhados, quantos mais clientes usarem o mesmo computador, mais lentos os sites serão. Muitas empresas procuram encaixar o maior número de clientes possível em cada sistema, com consequências sérias na performance.

Um site armazenado no mesmo computador que o teu poderá estar a ter um enorme sucesso momentâneo, e todos os outros ficarão mais lentos por esse motivo.

Alojamento Partilhado

Às vezes, mais vale um serviço que limite o tráfego recebido – são geralmente valores bastante razoáveis, assumindo que não vais ficar viral no Facebook de repente.

É também muito importante a qualidade de suporte que recebes. Respondem a tempo e horas? Estão dispostos a ajudar com questões mais técnicas?

É bastante frustrante ter um site em baixo várias horas e parecer que ninguém quer saber. Procura sempre serviços que tenham bom feedback online e consulta o perfil no Twitter ou no Facebook para entender como tratam os clientes.

Como é que o Wix e o WordPress.com oferecem isto “de borla”?

O modelo de negócio destas empresas baseia-se em oferecer um plano decente para quem está a começar e não se importa em não ter um domínio próprio ou exibir publicidade no meio do conteúdo que publica.

Ao mesmo tempo, na maior parte dos Termos e Condições destes sites, são estas as empresas que têm os direitos do conteúdo que publicas – podendo monetizá-lo como bem entenderem. A velha máxima de “Se o preço é 0, o produto és tu” aplica-se aqui.

É o problema de construires a tua casa em “terra alugada” – ficas dependente de terceiros, e não controlas eventuais alterações que a empresa decida tomar no futuro.

Na minha experiência, as empresas preferem evitar este tipo de tradeoff. Para uma empresa, não controlar onde surge a publicidade ou promover um domínio que termina em ...wix.com ou ...wordpress.com é muitas vezes pouco prático, até por mostrar falta de profissionalismo.

Muitos blogs começam aqui, acabam por crescer e optam por fazer mais tarde um upgrade para um plano pago, acabando por ficar a pagar mais que noutras soluções, por já estarem fortemente fidelizados (ou presos) ao produto. E aí, estes serviços vêem o seu investimento recuperado.

Como verificaste neste artigo, se somares o plano mais barato da Iberweb (15 euros) com o custo de renovação anual do domínio, podes ter um site com domínio próprio por cerca de 30 euros por ano. Nem o Wix nem o WordPress.com oferecem um plano pago tão baixo.

Conclusão

Não é assim tão dispendioso ter um site – bastam 30 ou 40 euros por ano. Ficaste também a saber que, no caso de serviços como o Wix, o grátis pode acabar por não ficar assim tão grátis, mas que não deixam de ser uma boa forma de começar neste mundo da web.

Importante ainda lembrar que podes ter o domínio adquirido num site, e o alojamento noutro. São coisas independentes, que depois ligas com a ajuda dos Nameservers.

E já sabes – se precisares de ajuda a desenvolver o teu site, fala comigo! 😎

7 Apps para Mac essenciais para Programar

7 Apps para Mac essenciais para Programar
7 Apps para Mac essenciais para Programar 1240 700 Bruno Brito

Em 2015 mencionei 3 aplicações indispensáveis para programar e desde então o meu repertório de “armas secretas” tem vindo a aumentar.

Para mim, o essencial continua a ser um bom editor de texto (tens aqui a lista das minhas extensões preferidas para Sublime e para VS Code) e um terminal bem artilhado (estas são as minhas principais dicas para a linha de comando).

Mas há tanta coisa adicional que podes instalar no teu Mac – estas são 7 aplicações que uso todos os dias, enquanto programo. E a melhor parte é que são todas gratuitas.

Vamos à lista!

#1: Postman

Se trabalhas frequentemente com APIs, esta aplicação vai-te facilitar bastante a vida. Não só é a mais completa (e bonita) que encontrei, como é inteiramente grátis para uso pessoal – para equipas, o melhor será consultares o preçário.

Eu provavelmente uso 10% do que a aplicação permite – crio colecções onde posso guardar vários pedidos, cada um com um nome, para mais tarde os correr – um em cada tab, se assim o desejar.

O Postman em acção

Suporta JSON, XML e HTML, variáveis, todo o tipo de autenticação habitual e imensas definições avançadas, que ainda nem sequer precisei. Felizmente, quando chegar a altura, não deverei encontrar problemas porque a documentação é excelente.

O Postman também está disponível para Windows e Linux.

#2: Sourcetree

Trabalhar com Git é fundamental, e apesar de habitualmente utilizar a linha de comando para os obrigatórios commits, recorro com frequência ao Sourcetree (da malta do BitBucket) para aquelas alturas em que preciso de algum auxílio visual.

Por exemplo, quando quero verificar rapidamente o que alterei em cada ficheiro antes do commit, ou perceber rapidamente o que mudou após um git pull, o Sourcetree é bem mais útil do que a linha de comando. Mesmo que sejas purista do terminal, uma aplicação deste género poderá dar-te bastante jeito em algumas alturas.

O Sourcetree em acção

Naturalmente, podes realizar todos os comandos habituais do git nesta aplicação.

O Sourcetree também está disponível para Windows.

#3: Sip

O Sip é uma aplicação exclusiva para macOS e é o meu color picker preferido, muito porque fica na menubar e pode ser chamado dentro de qualquer aplicação com um simples atalho de teclado – e como eu adoro atalhos de teclado!

Esta aplicação armazena todas as cores que vais capturando ao longo do tempo, tornando-se ideal para construir paletas, e suporta todos os formatos habituais (RGB, hexadecimal, CMYK ou HSL). Também podes converter de um formato para outro, se assim entenderes.

Também existe uma versão paga da app ($9.99 ou parte do pacote mensal Setapp) se quiseres utilizar algumas das funcionalidades avançadas, como um editor de cores ou suporte para a Touchar. Eu nunca senti necessidade.

Num artigo anterior falei desta aplicação, e neste vídeo que fiz podes conhecer melhor o potencial da aplicação.

#4: PrePros

O PrePros é a alternativa barata ao relativamente famoso CodeKit, visto que tem um “Free Unlimited Trial”, sem restrições.

Estas 2 aplicações trabalham um pouco como o Gulp, o Grunt, o Browserify ou o Webpack: automatizam todo o tipo de tarefas por ti, trazendo funcionalidades como:

  • live reload do projeto a cada save;
  • optimização de imagens, sejam elas PNGs, JPGs, ou GIFs;
  • minificação de CSS/JS, para os ficheiros ficarem consideravelmente mais pequenos;
  • deploy directo por FTP ou SFTP, poupando-te o trabalho de seres tu a fazer o upload dos ficheiros.

O PrePros para Mac em acção

Muitos projetos já fazem tudo isto se simplesmente escreveres algo como npm start ou yarn start, mas se tiveres de começar do zero e preferires soluções visuais, esta aplicação será um excelente ponto de partida.

O PrePros também está disponível para Windows e Linux.

#5: Cyberduck

Comecei por experimentar o Cyberduck como alternativa ao FileZilla devido aos vários elogios que vi online, e a verdade é que rapidamente se tornou a minha aplicação favorita para transferência de ficheiros pela web.

Para além do suporte obrigatório para FTP e SFTP, o Cyberduck tem integração com vários serviços cloud, como Azure, Google Cloud, Dropbox, OneDrive e 2 serviços que utilizo frequentemente: o Amazon S3 (óptimo para alojar sites estáticos) e o BackBlaze B2 (que é ainda mais barato, tornando-o ideal para ficheiros pesados).

O Cyberduck para Mac em acção

O Cyberduck também está disponível para Windows.

#6: Clipy

O site está em japonês mas não te assustes, a aplicação está em inglês. Este é o sucessor open source do ClipMenu, que menciono aqui mas que foi descontinuado.

Se fazes copy/paste compulsivamente (há alguém que programe que não o faça?), esta ainda é a melhor aplicação que conheço para rapidamente recuperar textos antigos do clipboard. Existem imensas alternativas (Alfred com o PowerPack, Pastebot, Paste 2…) mas esta para mim ganha pela simplicidade, a rapidez e… por ser grátis!

Podes ver neste vídeo como utilizo o Clipy – na altura, quando o gravei, ainda era o ClipMenu, mas o look não mudou!

#7: ImageOptim

Comprimir imagens é importante para um site mais rápido para os visitantes (para não falar dos ganhos de SEO), e antes de qualquer upload eu arrasto todas as imagens para o ImageOptim – uma aplicação gratuita que comprime qualquer JPG/PNG/GIF o melhor que consegue, recorrendo às melhores ferramentas de optimização, como o PNGOUT, Zopfli, Pngcrush ou AdvPNG.

Os task runners que referi no ponto 4. também recorrem a estas ferramentas, mas por norma acaba sempre por arrastar os ficheiros para esta app, até para ver os fantásticos ganhos de compressão (especialmente se forem JPGs).

ImageOptim para Mac em acção

São alguns segundos de espera que se podem traduzir em vários MBs poupados, se se tratarem de muitas imagens. Obrigatório!

É esta a minha lista. Menções honrosas para:

  • o Moom, para organizar/redimensionar as janelas das diversas apps;
  • o LastPass, para gerir as dezenas de palavras-passe de cada projecto;
  • o CheatSheet, para visualizar os vários atalhos de teclado disponíveis por aplicação.

E tu, que aplicações recomendas?

Google Chrome - 5 extensões obrigatórias

5 extensões obrigatórias para o Chrome
5 extensões obrigatórias para o Chrome 1240 700 Bruno Brito

Existem cada vez mais extensões disponíveis para artilhares o teu browser com alguns super-poderes adicionais. Já mencionei algumas essenciais para blogging, e hoje destaco aquelas que considero indispensáveis para um uso mais generalizado.

Estas são, de longe, as 5 extensões que mais utilizo diariamente, com a excepção de 2 que optei por omitir por serem sobejamente conhecidas (e já divulgadas noutros artigos) – o LastPass e o Pocket.

Tenho muitas outras instaladas, mas nem todas estão activadas todo o dia. Não te esqueças de utilizar o Extensity para facilmente activar/desactivar aquelas extensões de uso esporádico.

Por ser baseado no Chromium, todas são também compatíveis com o Opera, o meu browser mais utilizado – e algumas estão disponíveis para outros browsers, como o Firefox.

Vamos então conhecê-las!

#1: Video Speed Controller

Video Speed Controller

Se só pudesse ter uma extensão instalada no meu browser, esta seria provavelmente a eleita.

Quando estou no Youtube, é raro ver os vídeos à velocidade original – como são geralmente conversas ou tutoriais, o habitual é vê-los a 1.25x ou mesmo 1.5x.

Como seria bom poder acelerar todos os outros vídeos da mesma forma! Foi precisamente isso que me fez ir à caça desta extensão.

O Video Speed Controller permite-te acelerar qualquer vídeo HTML5 – que, felizmente, são a maioria dos vídeos presentes na Web hoje em dia. E, claro, também o podes utilizar em sites como o YouTube ou o DailyMotion.

Video Speed Controller em acção

A extensão inclui ainda atalhos de teclado e a possibilidade de recuares/avançares 10 segundos no vídeo (valor esse que podes alterar).

Também é possível indicar quais os sites em que não pretendes ter esta extensão disponível (adicionando-os à blacklist).

Se nunca experimentaste, recomendo vivamente que dês uma chance a ver vídeos a uma velocidade mais elevada – é bem mais produtivo!

#2: uBlock Origin

uBlock Origin

Um bom ad blocker é essencial nos dias de hoje, e ainda não encontrei nenhum melhor que o uBlock Origin – que, atenção, nada tem a ver com o site ublock.org.

O uBlock Origin foi concebido para bloquearmos tudo o que entendemos como desnecessário, melhorando a performance do browser (e do computador) pelo caminho. Por esse motivo, acaba por ser muito mais que um mero “ad blocker”.

uBlock Origin em acção

Para além de impedir a maior parte dos anúncios e te proteger de trackers e malware sem teres que te preocupar com configurações complicadas, também inclui um modo avançado para quem sabe o que está a fazer.

Aí, podes acrescentar regras adicionais, filtros personalizados, ou até definir uma firewall para cada site.

Esta extensão é open-source e também está disponível para os restantes browsers: Firefox, Microsoft Edge e Safari.

#3: Dark Reader

Dark Reader

Sou um enorme fã de temas dark no computador, e sempre que um site apresenta essa opção, activo-a de imediato.

O Dark Reader oferece essa possibilidade para o resto da web – alterando o fundo para preto e as letras para branco.

Wikipedia no Dark Reader

Na minha experiência, funciona perfeitamente na maior parte dos sites que visito diariamente.

Um interruptor ON/OFF seria suficiente para mim, mas esta extensão vai um pouco mais longe, permitindo-te ainda definir parâmetros como o brilho e o contraste do site – ou até deixá-lo a preto e branco!

Neste vídeo podes ficar com uma melhor ideia das funcionalidades. É óptimo até para questões de acessibilidade para alguns sites.

#4: HTTPS Everywhere

HTTPS Everywhere

Uma extensão que te transforma os pedidos de HTTP em pedidos HTTPS sempre que possível, aumentando a tua segurança na web de forma automática.

Nos dias de hoje, o HTTPS ainda não é o “default” e esta extensão visa corrigir isso mesmo: é um esforço do Tor Project e da Electronic Frontier Foundation.

É uma extensão bastante invisível, mas que vale a pena ter instalada, sendo já compatível com milhares de sites.

#5: Pushbullet

Pushbullet

Demorei algum tempo a instalar esta extensão no meu browser porque pensava que não precisava assim tanto de controlar o meu telemóvel Android a partir do computador. Como estava enganado!

O Pushbullet apresenta todas as notificações que recebas no telemóvel de imediato no teu browser, e oferece-te a possibilidade de enviar SMS, ficheiros de um lado para o outro e até podes integrá-lo com outros serviços, como o Zapier.

O plano gratuito é bastante generoso, oferecendo-te o envio de ficheiros de até 25 MB, 100 SMS por mês e 2 GB de espaço de alojamento.

Pessoalmente, nunca senti necessidade de passar para o plano pago, mas se fores um utilizador mais exigente, podes fazer upgrade para o plano “Pro” por $4.99/mês.

Funciona também no Firefox, tem uma app Windows e está também disponível para iPhone.

Estas são as minhas armas secretas. Quais são as tuas? Partilha as tuas dicas nos comentários!

Benefícios do Marketing de Conteúdos

Os vários benefícios do Marketing de Conteúdos
Os vários benefícios do Marketing de Conteúdos 1240 700 Bruno Brito

Já referi por várias vezes neste blog a importância de criar bons conteúdos. No passado, criei conteúdos tanto para as empresas por onde passei, como para alguns projectos pessoais, como este blog ou este projecto de Wrestling. Neste momento, continuo a escrever artigos com alguma frequência, sobretudo enquanto ghost writer.

Sempre existiu procura por produtores de (bons) conteúdos. Em Portugal, vejo cada vez mais marcas a apostar nesta prática.

Mas porquê? Vale a pena investir em Marketing de Conteúdos?

A minha resposta? Claro que sim! Vamos ver se ao longo deste artigo te convenço do mesmo. 😎

Comecemos pelas definições…

Marketing de Conteúdos – O que é?

Podemos definir Marketing de Conteúdos como uma estratégia de uma marca que recai na produção de conteúdos (artigos, vídeos, imagens, podcasts…) com o intuito de entreter, inspirar ou educar o seu público-alvo, habitualmente nas plataformas onde essas pessoas se encontram – como blogs, fóruns ou redes sociais.

Recorrendo a esta prática, que é geralmente pouco intrusiva, as marcas conseguem algum tempo de antena da parte dos seus potenciais clientes, que tiram alguns minutos dos seus dias atribulados para consumir o conteúdo que a marca criou.

Ao fazermos isto, estamos a aumentar o tempo de interacção com a nossa marca – basta pensar na atenção que um vídeo de 5 minutos do YouTube pode receber, face a um simples outdoor no meio da auto-estrada, que é rapidamente esquecido.

Este é um argumento muito importante, mas não é o único ponto positivo.

Aqui ficam mais benefícios desta estratégia!

Constrói Credibilidade, Autoridade e Confiança

#1: Constrói Credibilidade, Autoridade e Confiança

A meu ver, este é o ponto mais importante. Ao produzir conteúdos sobre um tópico, estamos a demonstrar que queremos contribuir para essa indústria – seja através de ideias, reflexões, partilha de conhecimento, conselhos ou dicas.

Em praticamente qualquer indústria já existem várias marcas disponíveis para o consumidor. Aquelas que produzem conteúdos poderão posicionar-se como líderes de autoridade; ao demonstrarem que estudam o tema, que procuram conhecer as boas práticas e ao partilharem os esforços que estão a desenvolver para que a indústria melhore e avance.

Ao mesmo tempo, estão também a mostrar que são merecedores da nossa confiança. Porque se tens um problema que queres ver resolvido, certamente ficarás mais descansado em entregar o assunto a quem mostra que domina o assunto.

Ajuda as Pessoas

#2: Ajuda as pessoas

Enquanto consumidores, todos procuramos tornar-nos uma versão melhor de nós próprios – mais produtivos, mais inteligentes, mais atléticos, etc. No entanto, o nosso tempo é limitado para alcançar esses objectivos… e é aí que uma marca deve intervir, pois é sua responsabilidade criar as melhores soluções para lá chegarmos, com o tempo/esforço que conseguimos alocar para tal.

A distância que separa as pessoas das marcas é cada vez menor – a marca deve ter a iniciativa de liderar o caminho, mas procurar acima de tudo ajudar as pessoas pela viagem.

Com Marketing de Conteúdos, é possível partilhar os esforços que estão a ser desenvolvidos pela marca para ajudar a comunidade – assim, não só os consumidores poderão acompanhar o que está a ser feito (que poderá ser uma boa forma de uma marca criar hype à volta de algo que pretendem lançar), como até terão a chance de dar feedback durante o processo.

Muitos bloggers aproveitam este espaço para partilhar dicas ou descobertas – como eu, no Marketing Digital ou na Programação. São óptimas formas de ajudar pessoas interessadas nos mesmos tópicos.

#3: Ensina a Utilizar (e apresenta novas formas de utilizar os produtos)

A Adobe, responsável por aplicações marcantes como Photoshop, Illustrator ou Premiere, tem um espaço dedicado à formação, com todo o tipo de tutoriais: o Adobe TV.

Um dos objectivos? Fidelizar os utilizadores às aplicações. Se ficarmos mais confiantes e confortáveis em usar estas ferramentas, se decorarmos os atalhos de teclado, se conhecermos todo o potencial destas apps, dificilmente vamos querer passar para uma alternativa… e aprender tudo outra vez!

Noutros casos, o que precisamos é de dar a conhecer novas formas de utilizar os produtos – uma forma de fidelização. A Brisa, conhecida pelas Auto Estradas de Portugal e pela Via Verde, cria com frequência sugestões de escapadinhas de fim-de-semana, em parceria com hotéis, residências, ou organizadores de eventos – tudo para as pessoas utilizarem mais as suas auto-estradas.

Enaltece a comunidade

#4: Coloca a Comunidade em destaque

Algumas marcas têm fãs extremamente dedicados – como os adeptos de Star Wars ou da Apple.

Um blog ou um canal do YouTube poderá ser uma óptima forma de criar um “cantinho” para a comunidade – onde se entrevistam os maiores fãs de uma marca, ou se exibe alguma da fan art criada.

Para além de serem conteúdos relativamente fáceis de criar (porque grande parte do esforço fica do lado dos convidados), são uma óptima oportunidade para dar alegrias aos fãs, e criar um sentimento de pertença maior.

Pelo caminho, ganhamos embaixadores… e mostramos que não nos esquecemos de quem nos ajuda.

#5: Explica os processos… atraindo profissionais de topo

Empresas como a BaseCamp ou a Buffer (curiosamente 2 empresas em que se trabalha remotamente) estão continuamente a explicar os seus processos de decisão no blog.

A Buffer é uma das minhas marcas digitais preferidas, e um exemplo de transparência a seguir. Neste blog, podes ficar a conhecer um pouco de tudo – como contratam, como correu o mês, que alterações de gestão foram efectuadas e até os salários.

A BaseCamp, de Jason Fried e David Heinemeier Hansson, é conhecida não só pelo seu excelente produto, mas também pelas suas opiniões fortes e pelo seu contributo para o mundo open source. No seu blog é frequente encontrarmos partilhas de conhecimento interno, como formas de aumentar a produtividade dos colaboradores, decisões sobre implementação de novas funcionalidades, e até livros a ler.

Um dos grandes objectivos? Tornarem-se empresas apetecíveis para trabalhar.

Ao contribuirem para o Design, para a Programação ou para o Marketing, revelando como trabalham internamente, estão a aliciar outros profissionais a enviar o CV e a juntarem-se “à causa”.

Grande arma de SEO

#6: É uma excelente táctica de SEO

Sabes como é que os motores de busca funcionam? Então saberás que criando vários artigos com conteúdos semelhantes, com um conjunto de palavras-chave similar, estarás a facilitar a vida do Google, que entenderá perfeitamente do que é que o teu site se trata.

Isso será também importante para a angariação de links externos – o mítico PageRank – um factor super importante para subir umas posições nos resultados dos motores de pesquisa. Assim, o Google não ficará com dúvidas: este site é uma referência naquela indústria, porque outros sites também o estão a recomendar.

Pelo caminho, registarás também ganhos de notoriedade/visibilidade – afinal de contas, muitos potenciais clientes serão pela primeira vez expostos ao teu site/marca graças às pesquisas efectuadas.

Faz Dinheiro

#7: Faz dinheiro

Nem sempre é fácil medir o impacto do Marketing de Conteúdos nas vendas que consegue gerar, mas ainda assim, é relativamente seguro afirmar que contribui positivamente para a receita ao final do mês.

Por 2 motivos:

  1. Reduz o custo de aquisição de clientes;
  2. Muitos visitantes sentem alguma pré-disposição em contribuir monetariamente, como agradecimento dos vários conteúdos criados.

Olhando para o primeiro, é inegável que a produção de um artigo para um blog será uma acção bem mais económica que uma campanha de Facebook Ads ou Google AdWords – e, ao contrário destas últimas, não corre apenas enquanto há dinheiro, pois perdura no tempo. É, assim, mais interessante a longo prazo.

Por outro lado, podemos olhar para vários exemplos de criadores de conteúdos que, com o tempo, cresceram a sua comunidade e lançaram produtos (físicos ou digitais), muitas vezes seguindo o feedback dado pelos fãs.

Produtos pagos (t-shirts, livros, ou vídeos são escolhas populares) que, depois de tantos conteúdos gratuitos, muitos fãs não têm qualquer problema em adquirir, quase como agradecimento de todo o trabalho que ocorreu até lá.

Resumindo e concluindo…

O Marketing de Conteúdos é uma óptima forma de uma marca se dar a conhecer, seja a potenciais clientes, colaboradores, ou parceiros. Um esforço geralmente pouco dispendioso e que gera resultados a longo prazo, com vários benefícios pelo caminho.

Encontras mais vantagens? Tens alguma história para partilhar? Manifesta-te nos comentários!

Backblaze logo featured

Backblaze B2 – a alternativa barata ao Amazon S3
Backblaze B2 – a alternativa barata ao Amazon S3 1240 700 Bruno Brito

Se precisas de alojar ficheiros na web com frequência, certamente conhecerás o serviço S3, da Amazon Web Services (AWS). Aqui, só pagas o que colocas online (upload), e o que os teus visitantes descarregam (download).

Muitos serviços de alojamento colocam limites de tráfego (ou reduzem a largura de banda) nos planos, pelo que sites que alojam muitos ficheiros pesados, como vídeos, recorrem a este tipo de serviços.

O Amazon S3 é uma solução relativamente barata, e todas as alternativas mais populares praticam um preçário similar; como o Microsoft Azure ou o Google Cloud.

Mas e se te dissesse que existe um serviço igualmente competitivo, a 1⁄4 do preço? É isso mesmo que te vou apresentar hoje: o Backblaze B2.

O Backblaze B2 já era mais barato que a concorrência há algum tempo, mas em Março deste ano a empresa decidiu baixar o preço dos downloads para metade (!) – já tinham feito uma surpreendente redução similar em 2017.

À data de escrita deste artigo, este é o preçário comparativo (em dólares):

Preçário Backblaze B2 Amazon S3 Microsoft Azure Google Cloud
Primeiro Terabyte $0.01 $0.09 $0.09 $0.12
Próximos 9 TB $0.01 $0.09 $0.09 $0.11
Próximos 40 TB $0.01 $0.085 $0.09 $0.08
Próximos 100 TB $0.01 $0.07 $0.07 $0.08
Próximos 350 TB+ $0.01 $0.05 $0.05 $0.08

Podes sempre recorrer à calculadora que fornecem para simulares o teu caso – e comparar o resultado com a competição.

Backblaze B2 - Calculadora

Um plano gratuito generoso

O Backblaze B2 também tem um plano de boas-vindas bastante interessante – os primeiros 10 GB de alojamento mensal são gratuitos, e o primeiro GB de downloads por dia também.

Se não estiveres à espera de um enorme fluxo de downloads, podes utilizar este serviço e não pagar um tostão! 😎

Mas é só barato, ou é mesmo bom?

Assumindo que não queres alojar um site estático aqui, o Backblaze B2 vai certamente estar à altura do que pretendes:

  • podes criar alertas por e-mail/sms quando chega a um determinado número de downloads, ou definir máximos de utilização;
  • podes ver relatórios de ficheiros armazenados, carregados e descarregados, por mês;
  • podes fazer backups (chamadas snapshots) de todos os teus buckets e definir regras de lifecycle;
  • tem integração com a linha de comando e disponibiliza uma API.

Em termos de velocidade de download, nos meus testes sempre foi superior ao Amazon S3. Impressionante!

E porque é que não o recomendo para sites estáticos? Porque, infelizmente, não podes definir o index.html como o root file – ou seja, as pessoas não conseguiriam aceder ao teu site escrevendo oteudominio.com, apenas oteudominio.com/index.html.

Se procuras alojar um site, o Amazon S3 ainda será a solução que recomendo – até podes ler o meu guia para isso (ou como configurá-lo com a CDN CloudFront).

Como funciona o Backblaze B2

À semelhança do Amazon S3 ou de outros serviços do género, depois de te registares começas por criar um bucket – onde vais alojar um conjunto de ficheiros. Podes criar 100 buckets distintos.

Backblaze - Criar um Bucket

A partir daí, o upload é simples – podes utilizar o browser, ou uma das várias integrações disponíveis, como o Panic ou o Cyberduck.

Backblaze - Upload

Facilmente obténs o URL de cada ficheiro carregado, carregando no ícone de mais informação, à direita, e copiando o “Friendly URL” apresentado.

Backblaze - friendly URL

Como vês, o interface é muito intuitivo – eu diria até mais user-friendly que o principal concorrente.

O que dizes? Vais experimentar?

CSS Grid - 5 Dicas para Dominares

5 dicas para dominares CSS Grid
5 dicas para dominares CSS Grid 1240 700 Bruno Brito

CSS Grid (também conhecido por Grid Layout) é uma fantástica nova forma de resolver problemas complexos de CSS – especialmente quando combinado com Flexbox!

É uma novidade relativamente recente no mundo do CSS (o Firefox foi o primeiro a implementar este módulo, em Março de 2017), mas já conta com excelente suporte em termos de browsers – à data deste artigo, já quase 90% dos utilizadores, a nível mundial, utlizam browsers compatíveis com esta tecnologia! ✌️

CSS Grid no Can I Use

Enquanto programador web, faz todo o sentido aprenderes a dominar esta nova forma de criação de layouts. Aqui ficam as minhas dicas, que certamente te facilitarão na aprendizagem pelo caminho.

#1: Começa por consultar alguns cursos online (gratuitos) de CSS Grid

Se gostas de aprender a ver vídeos, o melhor será provavelmente consultares um destes 2 cursos:

CSS Grid - o curso de Wes Bos

O Wes Bos é o meu formador favorito de programação e este é mais um excelente curso da sua autoria. O Wes é excelente a simplificar qualquer questão aparentemente mais complexa, e fornece sempre bons exemplos para rapidamentes veres a aplicação de um conceito na prática. Frequentei este curso e recomendo a 100%.

O 2º curso nunca consultei (visto que entretanto comecei a sentir-me confortável com CSS Grid), mas é da autoria de um senhor que acompanho com frequência no Medium, e que é o co-fundador da plataforma de formação online Scrimba (óptima para programadores). Certamente terá um conteúdo similar.

Ambos os cursos são gratuitos, portanto não tens nada a perder.

Se preferires aprender de uma maneira um pouco mais divertida, podes experimentar o Grid Garden, que é parecido com o Flexbox Froggy. Poderá ser uma forma um pouco mais suave de começar, com conteúdos mais interactivos – um bocado ao jeito do Codecademy.

CSS Grid Garden

#2: Consulta a melhor documentação que anda por aí

Quando já tiveres uma ideia do que permite, o mais provável será recorreres ao Google para refrescar a memória ou resolver problemas pontuais. E vais reparar que os resultados sugeridos serão sempre os mesmos.

Estes 3 links vão-te ajudar com muita frequência:

  • MDN Web Docs: a “bíblia” para tudo o que esteja relacionado com CSS, da malta da Mozilla.
  • CSS Tricks: um dos blogs mais importantes de front-end web development, fundado por Chris Coyier.
  • Grid by Example: um site de Rachel Andrew, programadora que trabalha com a especificação desde os primórdios, e que até já publicou um livro sobre assunto.

#3: Utiliza o browser certo para debugging de CSS Grid

O Chrome costuma ser a minha escolha enquanto browser para programar, mas ainda não está tão desenvolvido para resolver problemas relacionados com este módulo.

O melhor, por agora, é mesmo recorreres à versão do Firefox para programadores, que tem um conjunto de ferramentas específicas para isto – o Firefox Developer Edition.

CSS Grid no Firefox Developer Edition

Este é, de resto, um óptimo browser, com várias ferramentas bem úteis para programadores, como a ferramenta para screenshots (capturas de ecrã) e um responsive design mode mais poderoso.

#4: Precisas de mais ajuda? Recorre a ferramentas WYSIWYG de CSS Grid

As ferramentas WYSIWYG (What You See Is What You Get) têm como objectivo facilitar a vida dos programadores: clicas nos botões de um interface gráfico e o código é escrito por ti. O problema? Raramente geram código HTML/CSS legível e correcto.

Estas 2, felizmente, geram markup muito similar à de um humano – o que significa que também poderá ser uma óptima forma de aprenderes, ou até de resolveres um problema particularmente complicado.

Griddy

#5: Constrói algo divertido para praticar!

Para interiorizar os conceitos de CSS Grid, nada como praticares ao máximo nos teus projectos, sejam eles pessoais ou profissionais. Se não sabes o que criar, podes sempre visitar um site como o CodePen para inspiração.

Podes por exemplo tentar criar uma calculadora – este é um óptimo exemplo – ou uma grelha Masonry (ao estilo do Pinterest) como este poster da Marvel.

See the Pen MARVEL POSTER [CSS GRID] by Dannie Vinther (@dannievinther) on CodePen.

Se seguires estas dicas, estou certo que dominarás CSS Grid sem qualquer problema. Tens algum conselho que não consta neste artigo? Manifesta-te nos comentários!

VS Code - Dicas, Extensões e Temas

As melhores dicas, temas e extensões para o VS Code
As melhores dicas, temas e extensões para o VS Code 1240 700 Bruno Brito

Se trabalhas com código com alguma frequência, provavelmente ja terás ouvido falar do Visual Studio Code – um editor de texto gratuito da Microsoft que surgiu há pouco tempo no mercado, mas que rapidamente se tornou numa aplicação indispensável para muitos programadores.

Quem me conhece, sabe que sou um enorme fã do SublimeText – um editor de texto apreciado não só pela sua velocidade, como pela quantidade de fantásticos atalhos de teclado e plugins disponíveis tanto para programação como para a escrita de artigos.

No entanto, tenho dado por mim a passar cada vez mais tempo no VS Code – tem alguns plugins (ou, como a Microsoft lhe chama, extensões) verdadeiramente indispensáveis, e uma enorme comunidade empenhada em transformar este editor de texto na melhor solução disponível.

Nesta viagem, tenho aprendido bastante sobre como personalizar e tirar o maior partido deste editor. É precisamente isso que vou partilhar hoje.

Vamos a isto!

Para quem vem do Sublime…

Se, como eu, estás demasiado habituado aos atalhos e ao look do SublimeText, sugiro que comeces por instalar o Sublime Keymap, uma extensão criada pela própria Microsoft que coloca os atalhos de teclado do VS Code idênticos aos do Sublime (estes são os meus atalhos preferidos, já agora).

Outros 2 bons companheiros que farão sentido instalar de imediato serão o Auto Close Tag e o Auto Rename Tag, porque de origem o VS Code não fecha as tags HTML que crias.

Se fores às definições do Code, vais encontrar uma coluna à direita onde podes inserir as tuas alterações às definições originais.

Aqui, recomendo fortemente que adiciones "editor.dragAndDrop": true para que possas seleccionar texto e depois movê-lo livremente com o rato e editor.multiCursorModifier": "ctrlCmd" para usares o mesmo atalho que o Sublime para inserir o cursor em várias posições diferentes e alterar tudo ao mesmo tempo.

Por fim, podes inserir "window.title": "${dirty} ${activeEditorMedium}${separator}${rootName}" para ficares com o caminho completo do ficheiro na barra superior do programa.

Definições do VS Code

Extensões

Como trabalho sobretudo com frameworks JavaScript (como React), serão maioritariamente essas extensões que receberão destaque. Vamos conhecê-las!

#1: Live Server

Muito útil para rapidamente “disparares” um servidor que automaticamente refresca a página após cada save. Uma espécie de BrowserSync sem configurações complicadas, que podes activar a qualquer momento clicando no botão do rodapé do editor.

Live Server para VS Code

#2: Quokka

O Quokka é uma das melhores ferramentas para aprenderes (ou ensinares) JavaScript, porque para além de trazer um linter, corre o teu código à medida que o escreves, apresentando os resultados de imediato no editor.

Quokka para VS Code

A “Community edition” é gratuita e dá-te acesso às funcionalidades mais importantes. Se quiseres, podes adquirir a “Pro edition”, que instala packages de JavaScript por ti e importa outros ficheiros do teu projecto, entre outras funcionalidades.

A Pro Edition custa $100, mas podes experimentá-la sem restrições durante o tempo que quiseres – o único problema é que o teu editor terá ocasionalmente de ser reiniciado.

#3: Prettier

Disponível para praticamente qualquer editor (para além de VS Code, existe para Atom, Sublime, WebStorm, vim e Emacs), o Prettier formata o teu código, para assegurar consistência no estilo – de momento, já oferece suporte para JavaScript (incluindo JSON, JSX, TypeScript e FLow), CSS, GraphQL e até Markdown.

Prettier logo

Poderás ter de passar algum tempo a configurar as definições, mas a partir daí, não terás de pensar mais em formatação – o Prettier pode até actuar após cada save, melhorando a legibilidade do teu código de imediato!

#4: Bracket Pair Colorizer

Uma extensão muito útil se programas em linguagems com muitos parêntesis, como por exemplo JavaScript.

Com esta extensão instalada, cada parêntesis terá uma cor, o que facilita a tua vida na altura de perceber se está tudo devidamente fechado. Poupa algum tempo no despiste de problemas, acredita!

Aqui fica um exemplo meu, com código React.

Exemplo Bracket Pair Colorizer

E falando em React… vamos ao próximo!

#5: Reactjs code snippets

Se programas em React, saberás que é sempre preciso criar algum código repetitivo quando criamos um novo componente, por exemplo.

Este conjunto de snippets foi feito precisamente para te ajudar a ser mais produtivo. Existem vários plugins deste género, mas este foi o primeiro que usei, pelo que já me habituei aos seus triggers.

Por exemplo, ao escreveres rsc seguido da tecla TAB, eis o que acontece:

Independentemente da linguagem, deves sempre procurar um bom plugin de snippets para acelerar o teu workflow, ou criar tu próprio os teus.

#6: Import Cost

Uma extensão que te indica o custo de um import ou require em JavaScript. Assim, poderás reduzir o peso do teu bundle.

Import Cost para VS Code

O autor, que trabalha na Wix, explica as razões que o levaram a criar esta extensão neste artigo.

#7: Debugger for Chrome

Esta é uma das extensões mais populares, e por um bom motivo – quando devidamente configurado, poupa-te muitas refrescadelas no Chrome, visto que consegues ver toda a informação necessária no debugger presente no VS Code.

Chrome Debugger para VS Code

Se estiveres com dificuldades em configurar esta extensão, este tutorial poderá ajudar-te!

#8: Color Info

Esta extensão analisa as cores dos teus ficheiros CSS (ou Sass, ou LESS) e apresenta-te as cores nos seus vários formatos – seja hexadecimal, RGB, HSL ou CMYK. Bastante útil naquelas alturas em que tens de passar uma cor hexadecimal para RGB.

Color Info para VS Code

#9: Markdown All in One e Word Count

Para artigos, é uma óptima ideia aprender a escrever em Markdown. Com o Markdown All in One, fica ainda mais fácil formatares texto, graças a atalhos como CMD + B para colocar o texto a Negrito ou CMD + I para itálico.

A extensão oferece-te também a possibilidade de exportar ficheiros Markdown em HTML ou PDF, Live Preview para visualizares de imediato o aspecto final, e um formatador de tabelas.

Markdown All in One para VS Code

No campo do blogging, outra extensão que te dará jeito será o Word Count, que como o nome indica, conta o número de palavras do teu artigo.

#10: Text Pastry

Esta extensão é muito útil quando queres acrescentar um número crescente em cada linha seleccionada de uma multi-selecção.

Pode parecer trivial, mas é algo que utilizo todos os dias, na hora de enumerar algo durante o processo de escrita de um artigo. Podes até optar entre começar a lista no 0 ou no 1.

Aqui fica um exemplo:

#11: Polacode

O objetivo desta extensão é tirar fotos atrativas ao teu código, para que depois o possas partilhar (nas redes sociais, por exemplo).

Depois de correr o Polacode com o habitual comando CMD + SHIFT + P, podes seleccionar o texto que pretendes que fique na foto, redimensionar a imagem e finalmente gravar como PNG.

Este é um exemplo de resultado final:

Exemplo Polacode

Temas e Tipos de Letra

Se passas muito tempo no teu editor de texto, escolher um bom tema é fundamental. Vai ficar tudo muito mais agradável à vista, o que se pode traduzir em maior produtividade junto ao computador! 🤓

Os meus Temas preferidos VS Code

Vario o tema consoante a ocasião, mas sou fiel a estes 3. Vê lá se algum é do teu agrado:

  • Firewatch: o meu tema habitual, visto que adoro tons de laranja!
  • Nova: um tema mais suave, com tons pastel, que é bem “levezinho” para a vista.
  • Material Theme: provavelmente, o tema mais popular da actualidade. Aqui, utilizo sobretudo a variação de cor “Light” nas alturas em que preciso que o editor tenha o fundo branco (por estar, por exemplo, ligado ao projector). A variação “Palenight” também é bem apelativa!

Firewatch para VS Code

Os Tipos de Letra que utilizo

Há já vários meses que uso a font Victor Mono em todos os meus projetos. É gratuita, open-source, suporta ligaduras tipográficas (úteis para quem programa em JavaScript) e tem vários pesos disponíveis.

Antes de optar por este tipo de letra, utilizava outras que ainda hoje gosto bastante, como a CamingoCode e a Fira Code – ambas merecem a tua consideração.

Se quiseres utilizar esta última, para além de inserires "editor.fontFamily": "‘Fira Code’" nas definições, deves adicionar ainda outra linha: "editor.fontLigatures": true.

Fira Code em JavaScript

Conclusão

O VS Code ainda é jovem, mas já apresenta um enorme leque de possibilidades para programadores. Seja pela enorme oferta de extensões/temas ou por suportar tipos de letra com ligaduras, é já um editor robusto que merece forte consideração da tua parte.

Com o passar do tempo, a previsão é que fique um editor ainda mais completo – pelo caminho surgirão, certamente, ainda mais extensões e truques para conhecer.

Se entretanto tiveres alguma dica a acrescentar, manifesta-te nos comentários! 👍

© 2014-2020 BrunoBrito.PT

O que procuras?

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.