• mail@brunobrito.pt

Dicas

Como Converter Imagens para AVIF (com o Automator)

Como Converter Imagens para AVIF (com o Automator) 1240 700 Bruno Brito

O Automator, apesar de pouco popular, é uma das ferramentas mais úteis do macOS. Muitas das tarefas aborrecidas do dia-a-dia podem ser simplificadas com esta aplicação.

Exemplo disso é a conversão de imagens (por exempo, de HEIC para JPG), como tinha mencionado neste artigo. Como sou também grande fã do formato de imagem AVIF, decidi investigar se seria possível converter imagens para este formato através de uma Quick Action do Automator, ao invés de abrir o terminal.

Pelo caminho, aprendi a executar comandos da shell através do Automator e descobri que é até bastante fácil! 😎

Convertendo Imagens para AVIF no Terminal

Comecei por instalar este encoder através do Homebrew, correndo o comando brew install joedrago/repo/avifenc. Se precisares de ajuda com o Homebrew, sugiro que leias este pequeno guia.

Uma vez instalado, converter uma imagem para AVIF é bastante simples. Basta escrever avifenc -q 55 NOME-DO-FICHEIRO.JPG NOME-DO-FICHEIRO.AVIF para obter o ficheiro desejado.

De notar que o ficheiro original não tem que ser um JPG (é apenas um exemplo) e o valor “55” é a qualidade que definimos para o ficheiro final. Tenho obtido ótimos resultados com este valor.

Convertendo para AVIF através de uma Quick Action do Automator

Vamos criar uma Quick Action para que possamos converter para AVIF através do Finder, fazendo simplesmente right-click na imagem pretendida.

Para tal, abrimos o Automator e clicamos em New > Quick Action.

Queremos criar um Workflow que recebe ficheiros a partir de qualquer aplicação. Até podias ser mais específico aqui e definir que só queres ficheiros de imagem, mas no código que vamos inserir já vamos realizar essa filtragem.

De seguida, insere uma acção do tipo “Run Shell Script”. Define a tua shell (provavelmente a /bin/zsh) e altera o “Pass input” para “as arguments”. Este passo é super importante!

Finalmente, copia este código:

for f in "$@"
do
    if file --mime-type "$f" | grep -q "image"; then
        filename="${f%.*}"
        /opt/homebrew/bin/avifenc -q 55 "$f" "$filename.avif"
    else
        echo "Skipping non-image file: $f"
    fi
done

Para garantir que o código funciona, confirma onde ficou instalado o avifenc no teu sistema, escrevendo which avifenc no terminal. No meu caso, está em /opt/homebrew/bin/avifenc. Deves inserir a localização na totalidade—se só correres o comando escrevendo avifenc, não funcionará.

Sobre o Código

Como queremos a conveniência de converter vários ficheiros em simultâneo, vamos ter de encapsular tudo isto dentro de um loop. Mas como chegamos aos ficheiros? 🤔

Serão passados por parâmetros. "$@" é uma sintaxe especial em scripts de shell que representa todos os parâmetros posicionais passados para um script ou uma função.

Conjugando estes 2 conceitos, chegamos afor f in "$@": um loop que vai iterar sobre todos os ficheiros, onde a variável f assume o valor de cada arquivo em cada iteração.

Acrescentei ainda uma condição para a conversão só ocorrer se o tipo de ficheiro for uma imagem. Isso significa que podes selecionar uma pasta inteira que tenha imagens, PDFs e ficheiros de texto, e a conversão só acontecerá nos ficheiros de imagem.

Esta magia acontece com o código if file --mime-type "$f" | grep -q "image"; then que valida o tipo de imagem pelo MIME type.

Por fim, criei uma nova variável para ficar com o nome do ficheiro sem a extensão da imagem (PNG, JPG, etc): filename="${f%.*}"

Agora, a parte fácil, e que já tínhamos visto no terminal: correr a conversão propriamente dita:
/opt/homebrew/bin/avifenc -q 55 "$f" "$filename.avif"

O resultado final será este:

Testando a nossa Quick Action

Podes gravar a tua Quick Action (eu gravei como Image/Convert to AVIF) e testá-la de imediato no Finder:

Após uns segundos, o ficheiro AVIF gerado surgirá na mesma página. Está feito! ✌️

Sites e Apps de Design para não designers

Os melhores sites e apps de design (para quem não é designer)

Os melhores sites e apps de design (para quem não é designer) 1240 700 Bruno Brito

Se crias apresentações, sites ou outros conteúdos para a Web, certamente saberás como pode ser custoso encontrar a “imagem certa” ou a paleta de cores ideal para o teu projeto.

Bom design parece ser cada vez mais a norma, mas o que acontece se fores um “zero à esquerda” nesse departamento, como eu? 😰

Não te preocupes. Existem imensos sites e ferramentas que te podem ajudar, muitos deles gratuitos.

Neste artigo, vou partilhar contigo alguns dos sites que visito com frequência sempre que chega a hora de embelezar um conteúdo criado.

Pelo caminho, aproveitarei também para recomendar algumas ferramentas que poderão ser úteis para programadores web.

Índice de Categorias

Esta lista é atualizada com frequência, à medida que vou descobrindo novos sites, ou quando recebo recomendações de colegas ou alunos.

Como a lista já vai longa, aqui ficam as categorias para que mais rapidamente consigas aceder ao que procuras.

Vamos começar!

Bancos de Imagens stock

Enquanto blogger, programador Web e professor de Marketing Digital, uma das minhas maiores dificuldades é encontrar boas imagens para enriquecer os meus artigos e as minhas apresentações Powerpoint.

Imagens stock são sempre complicadas de encontrar, mas é especialmente frustrante quando encontramos a imagem certa e descobrimos que não tem resolução suficiente para o nosso slide do Powerpoint, ou que não nos dão permissão para a utilizar no nosso site sem pagar.

Relativamente à resolução, podes recorrer ao Google Image Search para procurares por outras versões da mesma imagem, conforme explico neste artigo.

Quanto ao licenciamento, o que deves procurar são imagens que estejam ao abrigo da Creative Commons CC0 – imagens consideradas de domínio público, livres de direitos, que podes utilizar e modificar sem problema (mesmo para fins comerciais), sem ter de pedir permissão ao autor.

Na lista que se segue, todos estes bancos de imagens contemplam esta licença. As imagens são todas bastante pesadas por serem de alta resolução, portanto se as fores utilizar num site, não te esqueças de as redimensionar e de as comprimir (podes conhecer algumas ferramentas que te podem ajudar nesta secção).

Sem mais demoras, aqui fica a lista:

  1. Gratisography
  2. Unsplash
  3. Pexels
  4. StockSnap
  5. PixaBay
  6. Travel Coffee Book
  7. Moveast
  8. Visual Hunt
  9. Stock Up
  10. rawpixel
StockSnap

O Gratisography tem as fotografias que considero mais originais, mas nem sempre encontro um bom contexto para as usar.

Por esse motivo, a minha primeira paragem é habitualmente o Unsplash, provavelmente o site mais popular da lista. Para alguma variedade, consulto também o Pexels, o StockSnap e o PixaBay.

Se procurar fotos de locais ou cidades, o Travel Coffee Book e o Moveast são apostas seguras – este último é um artista português, pelo que encontrarás bastante fotos de Portugal.

Se estiveres com dificuldades em chegar à foto que pretendes, podes também recorrer a um agregador, como o Visual Hunt ou o Stock Up.

Cores

Existem muitas ferramentas online que podes utilizar para gerar paletas de cores e gradientes, que te poderão ser úteis para implementares num site ou numa apresentação.

Estas são aquelas que utilizo com maior frequência:

  1. Coolors
  2. Adobe Color
  3. CalColor
  4. Color Hunt
  5. Colors Wall
  6. Culrs
  7. Image Color
  8. Color Leap
  9. Gradient Hunt
  10. UI Gradients
  11. Duotone
Coolors

O Coolors é das aplicações que mais utilizo no dia-a-dia – é o meu gerador de paletas de cores de eleição.

Podes carregar na barra de espaços para gerar uma paleta de 5 cores inteiramente nova, ou carregar no cadeado numa cor que tenhas gostado, para gerar apenas outras 4 cores que sejam compatíveis com essa. Também podes inserir uma fotografia, para retirar de lá as cores dominantes da foto, se preferires.

Se clicares em Explore, podes ver outras paletas populares, recomendadas por vários utilizadores.

Mais recentemente, foi adicionada uma funcionalidade que testa as tuas cores em termos de acessibilidade, simulando vários tipos de daltonismo.

Por fim, podes fazer copy/paste de cada cor ou exportar a paleta em vários formatos, como PDF, CSS ou SVG.

O Adobe Color não é muito diferente, e é uma boa alternativa. Eu simplesmente gosto mais do interface do Coolors.

O CalColor é um site com bastante personalidade e igualmente competente, que também vale a pena teres em conta pela forma única como apresenta e descreve as cores.

Se quiseres consultar mais sugestões de paletas, o Color Hunt é uma ótima fonte de inspiração, tal como o Colors Wall. Mais recentemente, surgiu o Culrs que também parece bastante promissor.

Apesar de outras ferramentas também o permitirem, podes recorrer à simplicidade do Image Color se pretenderes extrair uma paleta de cores baseadas numa fotografia.

O Color Leap é um site muito distinto dos outros: escolhes um período na História e vês algumas peças dessa era. Em cada peça, verás a paleta de cores utilizada. Um site bem original, que merece uma menção.

Para gradientes, geralmente consulto 2 sites: o Gradient Hunt e o UI Gradients. Ambos te permitem descarregar uma imagem com o gradiente, ou obter o código CSS.

Por fim, o Duotone possibilita-te alterar rapidamente as cores de uma foto, definindo 2 cores dominantes. Esta prática é útil quando queres colocar algum texto em cima da foto, por exemplo.

Este site usa o banco de imagens do Unsplash, mas também podes fazer upload de uma foto específica que queiras alterar.

Logos e branding

Se precisares de utilizar os logotipos ou cores de outras marcas, estes sites podem poupar-te bastante trabalho.

  1. LogoSearch
  2. BrandColors

Se te aborrece ir ao Google procurar o logotipo de uma marca que precisas de inserir no teu projecto, vais gostar de conhecer o LogoSearch.

Este site, apesar de recente, já conta com imensos logotipos à disposição, todos eles no formatos mais apetecível: SVG.

Se precisas de saber as cores do logotipo de uma determinada marca, o BrandColors é o site que procuras.

Aqui podes encontrar as cores web de centenas de marcas, todas em formato hexadecimal, para fazeres copy/paste no teu projecto. Podes até exportar as colecções que criaste em CSS ou até Sass.

BrandColors

Vídeo stock

O uso de vídeos na web é cada vez mais recorrente, tanto para dinamizar sites como redes sociais.

Aqui fica uma lista de entidades que, à semelhança do que acontece com os bancos de imagens, te oferecem alguns vídeos para uso gratuito. Muitos deles já eram conhecidos por também oferecerem imagens, como o Pexels ou o PixaBay.

  1. Pexels
  2. PixaBay
  3. Coverr
  4. Videezy
  5. Mixkit
  6. Life of Vids
  7. Mazwai
Mazwai

É mais complicado encontrar um vídeo que represente o que pretendemos do que uma imagem, pelo que o mais provável será precisares de descarregar vários exemplos, e depois editá-los. Consome mais tempo, mas o resultado pode justificar o trabalho acrescido.

Consulta este artigo se precisares de sugestões de aplicações gratuitas para editar vídeo.

Som stock

Às vezes precisamos de som para acompanhar uma voz ou que sirva como background de um vídeo. Eis algumas sugestões:

  1. YouTube Music Library
  2. Unminus
  3. Icons8
  4. Bensound
  5. Freesound
  6. Free Stock Music
unminus

Poderás editar o som num bom editor de vídeo, ou recorrer a uma aplicação específica para esta tarefa, como o Audacity ou o GarageBand (apenas para macOS).

Ícones

Encontramos este tipo de ícones um pouco por todo o lado nos sites que navegamos – são especialmente populares na hora de listar as redes sociais em que uma marca está presente ou para personalizar menus de navegação.

No entanto, já existem tantos ícones gratuitos de qualidade, que podemos ser bem mais ambiciosos que isso. Estes sites disponibilizam milhões de ícones gratuitos, no melhor formato para o efeito (SVG) e, no caso do Font Awesome, até como tipo de letra que podemos instalar no nosso sistema.

Vamos à lista:

  1. Font Awesome
  2. IcoMoon
  3. iconmonstr
  4. IconBros
  5. The Noun Project
  6. Flat Icon
  7. RealFaviconGenerator
IconBros

O Font Awesome é sempre a minha primeira paragem quando estou a desenvolver sites, mas quando procuro ícones mais específicos ou menos populares, recorro às restantes opções desta lista.

Por fim, o RealFaviconGenerator é uma ferramenta bastante útil quando preciso de criar um favicon nas várias dimensões necessárias.

Padrões

Em alguns projetos, já senti a necessidade de utilizar padrões para dar alguma vida a fundos de cor sólida, tanto em slides como em sites.

Neste momento, estas parecem-me ser as melhores opções no que toca a padrões para a web.

  1. Hero Patterns
  2. The Pattern Library
  3. paaatterns
  4. Lisbon Azulejos
Lisbon Azulejos

O Hero Patterns é uma criação de Steve Schoger, um designer canadiano com ótimas dicas sobre design tanto no Twitter como no YouTube. Neste site, podes personalizar as cores e descarregar o SVG ou copiar o código.

The Pattern Library tem uma abordagem diferente – vês um padrão de cada vez, sendo possível descarregar o PNG.

O paaatterns tem excelentes padrões, disponíveis em muitos formatos (Sketch, Figma, XD, Illustrator, PNG e SVG), mas terás que dar o teu email para descarregar a colecção completa.

Lisbon Azulejos é um projeto de um designer francês que se apaixonou por Lisboa, e decidiu criar dezenas de padrões baseados nos azulejos que fotografou durante as suas caminhadas. Merci, Mathieu!

Ilustrações

Os sites estão a recorrer cada vez mais às ilustrações para apresentar produtos – especialmente em landing pages.

Há várias vantagens: os SVGs não perdem qualidade ao redimensionar, permitem ser animados com CSS e são fáceis de colorir.

Felizmente, já existem bons sites para obter ilustrações, dos quais destaco:

  1. UnDraw
  2. Blush
  3. ManyPixels
  4. DrawKit
  5. illlustrations
  6. Freepik
  7. Open Peeps
UnDraw Screenshot

Quase todos estes sites funcionam de uma forma similar – escolhemos a ilustração, alteramos a cor, e podemos descarregar a peça em SVG (ou PNG).

O UnDraw tem a minha preferência, mas o Blush é muito flexível no que toca a cores e elementos que podemos alterar na ilustração.

O Freepik é um site diferente dos restantes, visto tratar-se de um site que disponibiliza todo o tipo de materiais; como o visito maioritariamente para descarregar ilustrações, optei por o inserir especificamente nesta categoria.

Mockups e Placeholders

As Mockups são fundamentais na hora de apresentarmos o nosso logotipo numa t-shirt, boné, ou caneca. Atualmente, são também muito utilizadas para apresentar sites em dispositivos como portáteis ou tablets, por exemplo.

Os Placeholders também têm a sua utilidade, especialmente no momento de desenvolvimento de um site, em que sabemos que ali ficará uma imagem, mas não sabemos ainda qual. Quando o que está a faltar é texto, o famoso lorem ipsum é já bastante conhecido.

Mockups

  1. Smartmockups
  2. Screely
  3. Screenpeek
  4. Mockup World
  5. Facebook Design
  6. threed.io
  7. MockUPhone
  8. Graphic Burger
  9. Artboard Studio
Smartmockups BrunoBrito.PT

Alguns destes sites têm planos pagos, mas todos têm mockups que podemos utilizar gratuitamente. Alguns têm a possibilidade de inserirmos o URL do nosso site para automaticamente colocar uma fotografia da nossa página, enquanto que outros requerem que a inserção seja feita manualmente.

Apesar da maior parte permitir a edição online, exportando depois o JPG no fim, também será boa ideia ter uma aplicação como o Photoshop pronta, no caso de ser necessário “juntar as peças” individualmente.

Todos os sites desta lista são relativamente parecidos, com a excepção do threed.io que é dedicado a mockups tridimensionais.

Placeholders

  1. Lorem Ipsum
  2. Placeholder.com
  3. Random User Generator
  4. UI Faces
UI Faces

Se precisares de vários parágrafos de texto lorem ipsum, podes utilizar este gerador.

Para imagens, utilizo sempre o Placeholder.com e quando estou a desenvolver interfaces em que preciso de colocar caras de utilizadores, recorro ao Random User Generator ou ao UI Faces para ter alguma informação fictícia (ambos têm uma API).

Inspiração

Antes de começar, é sempre um bom exercício consultar alguns sites de referência, que podem servir não só para nos inspirar como para nos indicar algumas boas práticas que devemos ter em conta.

Estes são alguns dos sites que utilizo para “roubar” inspiração, seja para web development seja para Marketing:

  1. Behance
  2. Dribbble
  3. Land-Book
  4. Nicely done
  5. Awwwards
  6. Web Design Inspiration
  7. siteInspire
  8. Httpster
  9. Lapa Ninja
  10. Really Good Emails
Land-Book screenshot

O Behance e o Dribbble são as 2 maiores comunidades de designers, pelo que praticamente dispensam apresentações. Alguns dos designers mais talentosos do mundo colocam lá todos os seus trabalhos, tornando-os 2 ótimos recursos.

Se preferires sites que filtram os “bons” exemplos por ti, tens vários à disposição. Pessoalmente, dou prioridade ao Land-Book para sugestões de sites que estão a dar que falar, e consulto o Nicely done para boas inspirações para a criação de um componente web, como um dropdown, um modal ou um formulário.

Essas são as minhas preferências, mas também consulto sites como o Awwwards ou o Httpster quando quero aprofundar a minha pesquisa.

Quando é tempo de me virar para o Marketing, surgem 2 sites top of mind para necessidades mais específicas. No que toca a Landing Pages, a minha principal fonte de informação é o Lapa Ninja, e para Campanhas de Email, o Really Good Emails é a grande referência.

Ferramentas Online

Nesta secção coloco algumas ferramentas que te permitem criar ou manipular imagens sem saíres do browser. É impressionante o que podes alcançar sem instalares apps no teu desktop.

Vamos à lista:

  1. Canva
  2. Pixlr
  3. remove.bg
  4. Vectr
  5. Blobmaker
  6. Launchaco Logo Maker
  7. mydevice.io
  8. Squoosh.app
  9. SVGOMG
  10. iLoveIMG
  11. Bigjpg
Pixlr screenshot

Para criar imagens para blogs, redes sociais ou apresentações, o Canva é uma solução super popular e, na minha opinião, a ferramenta mais capaz de produzir bons resultados.

Escrevi sobre esta ferramenta há uns anos, se quiseres ler. Agora está ainda melhor!

Se precisares de algo semelhante ao Photoshop, mas no browser, a minha recomendação passa pelo Pixlr. Muito completo.

Se precisares especificamente de remover um fundo da fotografia, o remove.bg faz magia – começou por ser 100% gratuito, mas agora já tem algumas restrições. Ainda assim, a imagem criada poderá ter resolução suficiente para o que precisas – os resultados são mesmo muito bons.

Para criar ou editar vectores, podes utilizar o Vectr, que talvez seja o mais parecido com o Illustrator. Se precisares de criar uma forma de raiz, gosto muito da simplicidade do Blobmaker (já me salvou umas quantas vezes!).

Para ficares com um logotipo em poucos segundos, podes experimentar o Launchaco Logo Maker.

Se precisares de saber o tamanho certo dos ecrãs dos dispositivos mais populares da atualidade, passa pelo mydevice.io.

Para compressão de imagens, gosto de utilizar o Squoosh.app, desenvolvido pela malta da Google, ou o SVGOMG para o caso específico de tirar informação desnecessária dos SVGs.

Por fim, para executar acções em várias imagens em simultâneo, como conversões, redimensionamentos ou inserções de marcas de água, visita o iLoveIMG. E se precisares de melhorar a resolução de uma imagem, experimenta o Bigjpg — os resultados poderão surpreender!

Tipos de Letra

Escolher um tipo de letra que incentive a leitura é fundamental, e com a chegada das Web Fonts essa tarefa ficou bastante facilitada.

Seja para textos longos, ou para destacar um botão Call to Action, estes sites vão ajudar-te a encontrar os tipos de letra certos para o teu projeto.

  1. Google Fonts
  2. FontPair
  3. DaFont
  4. Befonts
  5. FontsArena
  6. Fontfabric
FontPair screenshot

O Google Fonts dispensa apresentações, sendo uma das soluções mais convenientes para rapidamente instalar e testar vários tipos de letra no nosso projeto. O FontPair é um bom complemento, visto que te sugere combinações de tipos de letra que possas usar nos títulos e parágrafos do teu conteúdo.

Em alguns casos, vamos precisar de um tipo de letra um pouco mais específico, e é aqui que dá jeito visitar sites como o DaFont, em que podemos visualizar o tipo de letra no ecrã e descarregá-lo em vários formatos, como OTF ou TTF. Os restantes sites desta lista são similares.


São estas as minhas “armas secretas”. Esqueci-me de algum site? Aceito sugestões!

Gaming na Cloud

Gaming na Cloud com Paperspace e Parsec

Gaming na Cloud com Paperspace e Parsec 1240 700 Bruno Brito

Hoje em dia, é possível jogarmos os melhores jogos para PC sem um computador topo de gama. Isto significa que não precisas de gastar 500 euros num processador ou numa placa gráfica para experimentares os últimos lançamentos.

Como? Simples.

Algures no mundo, um super-computador trata do “trabalho pesado”. Tu só precisas de aceder remotamente para jogar o jogo, como se streaming se tratasse. As limitações passam a depender da máquina que alugas, e não do teu computador – na verdade, até com um Raspberry Pi podes jogar.

Existem já vários serviços a explorar este mercado, e haverão cada vez mais, porque muitos acreditam que o futuro do gaming passa por aqui.

Esta semana, decidi experimentar um serviço deste género para jogar um jogo para Windows. Falar de gaming na cloud, neste momento, é falar do GeForce Now, da Nvidia, ou do serviço Paperspace, que te permite alugar um computador a preços bastante convidativos (se não jogares muitas horas por semana, claro).

O GeForce Now ainda está em beta por convite, pelo que optei pelo Paperspace. Vamos conhecê-lo.

Apresentando o Paperspace

O Paperspace não serve apenas para jogar – podes alugar uma máquina para qualquer tipo de trabalho intensivo, como por exemplo edição de vídeo, ou simplesmente para ter um computador para aceder a partir de qualquer parte do mundo.

Se por algum motivo precisares de um acesso à internet super-rápido, também vais gostar de saber que estes computadores registaram resultados acima dos 350 MB/s nos meus testes de velocidade!

Speedtest na Paperspace

Após a criação de 1 conta, serás convidado a criar uma máquina, que poderá ter como sistema operativo o Windows 10 ou Linux, existindo também alguns templates como o Parsec, que foi a opção que segui para a minha máquina.

Paperspace - Choose Template

Deves também escolher a região mais próxima de ti – isto vai garantir um acesso mais rápido à máquina, que para gaming é crucial. No caso de Portugal, à data de escrita deste artigo, Amesterdão será a cidade recomendada.

Paperspace - Choose Region

O preço vai variar consoante as especificações do computador que desejes: o plano mais barato (Air) está atualmente nos $0.07 por hora, enquanto que o computador mais poderoso, o P6000, ultrapassa 1 dólar por hora.

Alguns planos terão o ícone do cadeado, mas podes facilmente desbloqueá-los preenchendo o formulário, indicando as razões pelas quais queres usar o computador (eu referi simplesmente que queria jogar jogos para Windows no meu Macbook Pro e tive o pedido aprovado em 3 horas).

Paperspace - Machine

Este é o custo variável, mas existe também um custo fixo: o do armazenamento.

50 GB de armazenamento são $5/mês, mas convém teres em conta que o Windows 10 ocupa quase 30 GB, pelo que se optares pelo plano mais barato, ficarás com pouco espaço para instalares jogos.

Por essa razão, 100–250 GB de armazenamento será uma escolha mais prudente, a $7-$10 por mês, respetivamente.

Feitas as contas, quanto custa realmente este serviço? Se jogares 5 horas por semana, prepara-te para pagar cerca de 20 ou 30 dólares por mês. Só tu saberás se vale a pena, mas se jogares poucas horas por semana, sem dúvida que compensa face à compra de um computador de topo.

Se quiseres experimentar o Paperspace, podes utilizar o código 3BNWE27 para teres 10 dólares de crédito, que já deverá dar para um computador com 100 GB de armazenamento e cerca de 6 horas de aluguer.

Alugada a máquina, a mesma ficará pronta a usar passados alguns minutos. Podes controlá-la remotamente diretamente no browser, ou através da aplicação oficial da Paperspace, disponível para macOS, PC ou Linux.

Desktop no Paperspace

No entanto, em vez da aplicação oficial, recomendo que utilizes a aplicação da Parsec – a outra peça do puzzle.

Apresentando o Parsec

A Parsec oferece uma aplicação para Windows, macOS, Linux, Android e até Raspberry Pi – é verdade, podes jogar os melhores jogos até num mini-computador.

Na minha experiência, esta aplicação apresenta melhores latências, até porque foi totalmente desenvolvida a pensar em jogos, e acrescenta um par de funcionalidades extra úteis – até a podes instalar num computador teu, se pretenderes que outros amigos se liguem à tua máquina para jogar jogos antigos que não têm um modo online, por exemplo.

Se criaste a máquina no Paperspace com o Public Template da Parsec, então já terás a aplicação instalada quando a ligares, disponível no ambiente de trabalho.

Depois de te registares também no serviço da Parsec, só precisarás de clicar em “Share”.

Paperspace com Parsec no host

A partir daí, deverás instalar a aplicação nos computadores ou outros dispositivos que queres utilizar para aceder à máquina remota.

Basta clicares em “Connect” e estás pronto para jogar!

Paperspace com Parsec no cliente

Analisando a experiência

Passado o processo de configuração, coloca-se a pergunta inevitável: como é realmente jogar?

Em termos de performance, poderás jogar os jogos mais recentes no máximo sem qualquer problema. Mas se esperas fluidez comparável a jogar em casa na tua consola ou no PC, provavelmente só se tiveres uma ótima ligação à internet.

Eu experimentei com internet de 100 MBps, por WiFi, e senti uma experiência similar à que tenho quando jogo com a aplicação da PS4 Remote Play – é jogável, especialmente se for um jogo em que o timing não é crucial (como um RPG ou RTS). Se a tua intenção é jogar Call of Duty ou FIFA de forma competitiva, não recomendo.

Poderás ver melhorias se utilizares um cabo de rede, mas infelizmente o meu Macbook Pro não tem entrada para tal, pelo que não pude testar esse cenário.

Cuidados a ter

Antes de fechar este artigo, 2 aspetos importantes que deves ter em conta:

1: No final de cada utilização da máquina, visita sempre a consola da Paperspace para fazer “Shutdown”.

Fechar a aplicação da Parsec não é suficiente, porque a máquina ficará na mesma ligada, pelo que serás cobrado pelas horas de utilização, mesmo se não a estiveres a usar!

Para resolver isto, também podes aceder às opções da tua máquina para definir um “Auto Shutdown” – assim, a máquina desligar-se-á automaticamente depois de um período em que ficou inativa ou sem ligações em aberto (1 hora, 1 dia, ou 1 semana).

2: Podes aceder à secção de “Utilization” no teu perfil para teres uma ideia de quantas horas já tiveste a máquina ligada e não apanhares uma surpresa desagradável no final do mês.

Em jeito de conclusão, saio satisfeito com a experiência, e certamente continuarei a utilizar este tipo de soluções para aquelas alturas em que preciso de um computador de elevado desempenho (seja para jogar ou para trabalhar). As velocidades de acesso continuarão a melhorar, pelo que o futuro é sem dúvida promissor.

E tu, já experimentaste este tipo de serviços? Que conclusões retiras?

Como instalar e correr o WordPress no PC (localmente)

Como instalar e correr o WordPress no PC (localmente)

Como instalar e correr o WordPress no PC (localmente) 1240 700 Bruno Brito

Qualquer programador (ou administrador de sites) já teve necessidade de instalar o WordPress no seu computador, seja para testar novas funcionalidades num site, seja para simplesmente experimentar um novo tema ou plugin.

Quando isto acontece, dizemos que precisamos de instalar o WordPress localmente.

Existem inúmeras formas de alcançar este objetivo: ao início, recorria sempre ao XAMPP, passando mais tarde para o MAMP; recentemente, partilhei contigo uma forma rápida de instalar o WordPress com o auxílio do Docker.

A solução que te vou apresentar hoje tem uma grande vantagem: exige menos conhecimentos técnicos que as alternativas que mencionei.

Esta é, facilmente, a forma mais simples e rápida que conheço de instalar o WordPress em qualquer máquina, e aquela que tenho recomendado a amigos e colegas nos últimos meses.

Vais apenas precisar de instalar um programa, o Local by Flywheel, que é grátis e está disponível para macOS, Windows e Linux.

Criando um site WordPress

Uma vez instalada a aplicação, basta clicares no botão “+” no canto inferior esquerdo para dar início ao processo de criação de um site WordPress.

No 1º ecrã, terás que dar um nome ao site. Opcionalmente, poderás também alterar o caminho e o nome da pasta onde o mesmo ficará armazenado.

Flywheel - Criar Site WordPress - ecrã 1

No 2º ecrã, o Local by Flywheel dá-te a oportunidade de alterar a versão do PHP e do MySQL, bem como optar entre Apache ou nginx.

Alterar estas configurações poderá fazer sentido se quiseres recriar o ambiente do teu serviço de alojamento. De outra forma, recomendo que avances com as opções pré-definidas.

Flywheel - Criar Site WordPress - ecrã 2

Por fim, no 3º e último ecrã, defines o utilizador, palavra-passe e e-mail a utilizar, tendo também a oportunidade de indicar se se trata de uma instalação Multisite ou não.

Flywheel - Criar Site WordPress - ecrã 3

Concluído este processo, podes clicar no botão “Start Site”, no canto superior direito, e de seguida em “Admin” ou “View Site” para o visualizar num browser. Fácil!

Também o podes partilhar na web, para mostrar a 1 colega ou a 1 amigo, clicando no botão “Live Link” – será criado de imediato um link com o serviço ngrok. Sem dúvida muito útil.

Acedendo à base de dados do site WordPress criado com o Sequel Pro

Nenhuma ferramenta estaria completa sem nos facultar o acesso à base de dados.

Se clicares na 2ª tab, de nome “Database”, verás que o Local by Flywheel te dá a escolher entre o Adminer (que menciono aqui) e o Sequel Pro para acederes à base de dados.

Flywheel-Database-tab

O Sequel Pro é uma aplicação gratuita e open source que está apenas disponível para macOS – se for o teu caso, recomendo vivamente que a instales.

Sequel Pro

Para além de ter um interface muito apelativo, permitindo acesso local ou remoto a qualquer base de dados MySQL, garante a realização de todo o tipo de alterações ou queries à BD.

Se estás habituado a trabalhar com bases de dados, recomendo que o experimentes – em poucos minutos perceberás tudo o que o programa te oferece, e a integração com o Local by Flywheel é bastante conveniente.

Como vês, são 2 aplicações bastante intuitivas e muito práticas. Esta é a minha nova forma preferida de instalar e gerir sites WordPress localmente.

De referir que o Local by Flywheel também oferece planos pagos, que poderão merecer a tua atenção se mais tarde quiseres sincronizar o teu site local com um site que está live, ou se trabalhas com mais colaboradores.

Como automatizar a instalação de aplicações em macOS

Como automatizar a instalação de aplicações em macOS

Como automatizar a instalação de aplicações em macOS 1240 700 Bruno Brito

Há muitos anos atrás, quando a minha plataforma de eleição ainda era Windows, era grande fã do Ninite – uma aplicação gratuita para Windows que permitia a escolha de vários programas populares, para que fossem depois instalados silenciosamente (leia-se, sem necessidade de estar à frente do monitor a clicar “Seguinte” vezes sem conta) num novo computador.

Essa aplicação era muito útil naquela altura em que tinha de formatar o disco, ou quando era necessário configurar o computador de um familiar, sem ficar “enfiado” num computador todo o tempo da visita.

Para macOS, tanto quanto sei, não existe propriamente uma alternativa ao Ninite, mas com a ajuda de algumas aplicações para a linha de comando, acabei por criar algo que deverá funcionar de igual forma.

Para este artigo, convém estares minimamente confortável em utilizar o terminal (ou linha de comando). Tens também algumas dicas para o terminal aqui.

O que criei foi simplesmente um script para a shell que, ao ser corrido, instala uma série de aplicações em série, sem fazer perguntas pelo meio. Felizmente, quase todas as aplicações que necessito diariamente permitem ser instaladas desta forma.

O que é necessário então para começarmos? No fundo, de 3 coisas:

#1: Homebrew

O Homebrew é a peça mais importante neste processo, e se já mexeste no terminal de macOS algumas vezes, até é possível que já o tenhas instalado.

Homebrew

O Homebrew é uma forma muito popular de instalação de aplicações open source para macOS, bastando escrever /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" para o instalar.

A partir daí, poderás instalar uma série de aplicações recorrendo ao comando brew install [app].

Desta forma, poderás de imediato instalar algumas ferramentas essenciais, como o node ou o yarn se programas em JavaScript, ou o ffmpeg e o youtube-dl para manipular vídeo (como menciono neste artigo).

#2: Homebrew Cask

O Homebrew Cask é uma extensão do Homebrew que permite que instales aplicações populares como o Google Chrome, Spotify ou Skype correndo apenas uma linha de comando, como brew cask install [app].

Podes fazer uma pesquisa pela aplicação que pretendes recorrendo ao comando brew search, mas também podes ver a lista das centenas de aplicações compatíveis visitando esta página.

Brew Cask

A aplicação será sempre instalada na sua última versão. O Homebrew Cask não se restringe a aplicações gratuitas ou open sourceapps de todo o tipo estão lá, incluindo várias que são pagas.

Este é um comando que utilizo frequentemente quando quero testar uma nova aplicação, em vez de visitar o site e descarregar o installer. Também podes facilmente desinstalar uma aplicação fazendo brew cask uninstall [app].

Por fim, de referir que podes ainda instalar Fonts (ou tipos de letra) com o homebrew-cask-fonts – como eu uso um par de fonts para programar, automatizo até isso, com um comando do género brew cask install [font].

Podes consultar a lista de fonts disponíveis, e respetivo nome, visitando esta página.

#3: Mac App Store command line interface

Neste momento já conseguimos automatizar uma boa parte da instalação das nossas aplicações para macOS, mas falta ainda uma peça importante do puzzle: as aplicações da App Store.

O mas-cli entra em ação para resolver esse problema; instalado com o Homebrew, permite-te listar todas as aplicações pertencentes à App Store que estão instaladas na tua máquina, bem como a instalação de outras.

Podes listar todas as aplicações que já tens instaladas escrevendo mas list. Repara que a aplicação é listada juntamente com um número, que é o ID da aplicação, e a versão que tens instalada.

mas list

A instalação de uma app não é tão direta quanto o Homebrew Cask, porque precisas de saber o ID da aplicação primeiro.

Se quiseres instalar por exemplo o Pixelmator, terás que primeiro escrever mas search pixelmator para encontrar o ID da app que desejas.

mas search pixelmator

Depois, mas install [ID] instalará a última versão da aplicação disponível na App Store.

O mas-cli também te permite atualizar aplicações que não estejam na última versão, correndo o comando mas upgrade.

Juntando as 3 peças…

Todos os comandos que te apresentei poderão ser corridos quando precisares de instalar uma aplicação, mas o propósito deste artigo é ensinar-te a automatizar uma instalação de aplicações “em massa”.

Como exemplo, podes pegar no meu script e alterá-lo para as aplicações que utilizes!

7 Aplicações Gratuitas para Vídeo

7 Aplicações Gratuitas para Vídeo (macOS e Windows)

7 Aplicações Gratuitas para Vídeo (macOS e Windows) 1240 700 Bruno Brito

Nos últimos dias tenho trabalhado bastante com vídeo, pelo que hoje decidi apresentar-te as minhas aplicações preferidas para visualizar, editar e converter vídeos.

Todas estas aplicações são gratuitas, tanto para macOS como para Windows. A maioria é open-source e deverá também ser compatível com Linux.

Vamos então conhecê-las…

#1: IINA

Um bom leitor de vídeo é essencial, e o IINA é o meu leitor de eleição – à semelhança do famoso VLC, consegue abrir qualquer formato de vídeo, sem qualquer esforço.

Tem todas as funcionalidades esperadas de um leitor de vídeo – desde a alteração de velocidade de reprodução, inserção de legendas, loops e playlists, modo PiP (picture in picture) ou equalizador, está cá tudo.

IINA player
IINA

Porquê o IINA e não o VLC? Na minha experiência, o IINA oferece maior fluidez na reprodução de vídeos pesados (o programa puxa menos pelo CPU e bateria) e o interface é do mais bonito que já vi num leitor de vídeo.

#2: DaVinci Resolve

Se queres algo mais avançado que uma ferramenta como o iMovie, mas o Adobe Premiere ou o Final Cut estão fora do teu orçamento, então a melhor solução será provavelmente o DaVinci Resolve.

Esta é uma aplicação utilizada por profissionais (especialmente popular para a correção de cores) e que traz todas as ferramentas essenciais no seu software de edição de vídeo: inserção de áudio e texto, transformação de vídeo, aplicação de transições e efeitos…

DaVince Resolve 16
DaVince Resolve 16

O programa está de momento na versão 16, ainda em beta. Podes descarregar a versão gratuita, tanto da beta como da versão 15, indo até ao fundo da página principal e preenchendo o formulário de registo. O download (para macOS) é de aproximadamente 2 GB.

Também existe uma versão paga, que inclui vários plug-ins e colaboração multi-utilizador, se mais tarde quiseres subir o teu nível de edição de vídeo.

#3: LosslessCut

Cortar vídeos é uma tarefa frequente, importante tanto para edição, como para simplesmente poupar algum espaço no computador.

O problema é que depois de definires o início e o fim do excerto que pretendes, a maior parte das aplicações voltam a correr o processo de codificação do vídeo (ou encoding, em inglês) – o que se traduz em minutos (ou até horas, consoante a duração do vídeo) à espera que o processamento termine.

Pelo caminho, também te pode alterar o formato original – resultando por vezes num ficheiro consideravelmente mais pesado que o do vídeo completo!

O LosslessCut salta o encoding, preservando também o formato (e definições) do ficheiro original.

O resultado? Um corte supersónico (menos de 1 segundo) e um ficheiro garantidamente mais pequeno.

A aplicação tem mais algumas funcionalidades, como a extração/remoção dos data streams (legendas, vídeo ou áudio) ou captura de imagens (em PNG ou JPG), mas só o utilizo mesmo para cortar vídeos – basta colocar o ponto de entrada e o ponto de saída e clicar no ícone da tesoura!

Lossless Cut
Lossless Cut

O excerto do vídeo surgirá quase de imediato na mesma pasta do vídeo original.

Em termos de suporte, os formatos mais populares não deverão oferecer qualquer problema, como MP4, MOV, WebM, MKV, OGG, WAV, MP3, AAC ou H264.

Para o instalares, vai até à secção Releases.

#4: HandBrake

Na hora de converter vídeos, o HandBrake será o teu melhor amigo. Suportando todo o tipo de codecs e definições, é praticamente garantido que conseguirás passar um vídeo para o formato com as especificações que desejas.

O HandBrake traz imensos presets que facilitarão a tua vida, especialmente se ficares intimidado com o conjunto de opções e só pretenderes um formato adequado para a Web ou para algum dispositivo específico.

HandBrake
HandBrake

Durante a conversão, como vais alterar as definições do vídeo atual, terás sempre que aguardar pelo processo de codificação de vídeo (encoding), pelo que mesmo que tenhas hardware de topo, a conversão levará sempre algum tempo.

A compressão dos vídeos também é muito útil para poupares espaço no teu disco, visto que se estiveres disposto a esperar, podes acabar com ficheiros que ocupam 10% do tamanho do ficheiro original, sem perda notória de qualidade.

#5: youtube-dl

Esta é a primeira de 3 aplicações que te apresento que terás de correr pela linha de comando (ou seja, o Terminal).

A linha de comando permite-te realizar muitas ações interessantes (estas são algumas das minhas preferidas), e se tiveres paciência para ler a documentação e tempo para experimentar, verás que te permite realizar ações com maior liberdade e, muitas vezes, mais rapidamente.

O youtube-dl é, de longe, a melhor ferramenta que podes utilizar para descarregar vídeos do YouTube.

Um comando simples como youtube-dl https://youtu.be/dQw4w9WgXcQ começará a descarregar o vídeo, na melhor qualidade possível, de imediato para o teu disco.

youtube-dl
youtube-dl

Podes optar por descarregar apenas o som de um vídeo, recorrendo a um comando como este (para obteres um MP3): youtube-dl --extract-audio --audio-format mp3 https://youtu.be/dQw4w9WgXcQ

Podes até descarregar uma série de vídeos do YouTube criando um ficheiro TXT com todos os URLs dos vídeos que pretendes obter. Este será o comando a escrever, assumindo que o teu documento de texto se chama videos.txt: youtube-dl -a videos.txt

O youtube-dl também te permite descarregar todos os vídeos de uma playlist ou formatos específicos – para saberes tudo o que permite, o melhor será mesmo consultar a documentação ou pesquisar pela ação pretendida.

#6: gifify

O gifify ainda é, para mim, a melhor forma de converter vídeos para GIFs, apesar de ser uma aplicação que já não está a receber atualizações do seu criador.

Os GIFs são um formato muito popular na Web, apesar de serem por norma ficheiros bastante pesados. Este programa cria GIFs com um tamanho inferior às alternativas, sendo um dos grandes motivos para o utilizar.

Este comando bastará para obteres um GIF com largura de 800px: gifify screencast.mkv -o screencast.gif --resize 800:-1

O programa também te permite acrescentar legendas no GIF criado, se o desejares.

Para juntares vários GIFs, acrescentar animações, rodá-los e muitas outras ações, dá uma olhadela no Gifsicle.

#7: FFmpeg

Este é um programa fantástico que uso frequentemente para converter vídeos noutros formatos, juntar vários vídeos num só, ou combinar o vídeo de 1 fonte com o áudio de outra.

Estes são os 5 comandos que mais utilizo:

  1. Podes converter um vídeo MP4 para AVI com o seguinte comando: ffmpeg -i video.mp4 video.avi

  2. Para extraíres o áudio de um vídeo MP4, basta o comando ffmpeg -i input.mp4 -vn output.mp3

  3. Para tirares o som de um vídeo, ficando só com as imagens: ffmpeg -i input.mp4 -an output.mp4

  4. Para juntares vários vídeos, podes recorrer à técnica que também menciono neste artigo. Basta criares um ficheiro TXT com todos os ficheiros listados desta forma:

    file 'movie1.mp4'
    file 'movie2.mp4'
    file 'movie3.mp4'

    E depois correr o comando concat, desta forma: ffmpeg -f concat -i videos.txt -c copy allvideos.mp4

  5. Para acrescentares um áudio (em formato WAV) diferente a um vídeo MP4, deves correr o seguinte comando: ffmpeg -i input.mp4 -i audio.wav -c:v copy -c:a aac -strict experimental -map 0:v:0 -map 1:a:0 output.mp4

São estas as minhas 7 principais armas na altura de manipular vídeos. E tu, o que costumas usar?

Como descarregar um stream para o Computador (em modo Geek! 🤓)

Como descarregar um stream para o Computador (em modo Geek! 🤓) 1240 700 Bruno Brito

Há alguns dias, ficou disponível um concerto raro de um artista que muito aprecio (Jan Blomqvist), num conhecido site televisivo internacional.

O concerto só ia estar disponível 7 dias e não existia um botão de download. Se quisesse ficar com ele no disco, tinha 2 soluções:

  1. gravar o ecrã e o áudio;
  2. encontrar uma forma de descarregar o ficheiro original do stream.

A primeira opção é válida, mas não só ficaria com o computador indisponível durante os 65 minutos do concerto, como não sabia a resolução nativa do vídeo para ficar com a gravação no formato ideal.

A segunda ideia era bastante mais geek e provavelmente mais morosa, mas produziria um ficheiro “perfeito”. O desafio era bem mais interessante, portanto foi este o caminho escolhido.

Ao todo foram 4 passos, que em princípio poderás replicar noutros sites quando quiseres descarregar um stream para o teu computador. Dependendo da forma como o site apresenta os streams, talvez também tenhas sorte!

Vou tentar ser o mais descritivo possível, mas convém estares minimamente confortável com o terminal e com o inspetor de um browser (como as DevTools do Google Chrome) para acompanhares este artigo.

Passo #1: Usar o painel Network das Chrome DevTools para encontrar os fragmentos do stream

Um stream raramente é um ficheiro único, com o vídeo completo; o conteúdo está habitualmente dividido num conjunto de fragmentos.

Isto é conveniente para quem está a assistir ao stream, porque não tem que esperar que o ficheiro completa seja descarregado se só quiser assistir a umas partes específicas do vídeo. Para quem aloja o vídeo, isto também significa que pode poupar um pouco na conta do hosting no final do mês.

As 2 partes ganham – mas no nosso caso, vamos precisar de encontrar todos esses fragmentos.

No Google Chrome, se abrires as Chrome Dev Tools (basta carregar no botão direito do rato e fazer “Inspect” algures na página que tem o vídeo que pretendes), terás uma tab de nome “Network”. Tudo o que naquela página está a ser descarregado pelo teu browser é apresentado ali.

Podes filtrar por tipos de ficheiro, como JS, CSS ou Imagens. Para streams, é boa ideia filtrar por “XHR”.

A aba Network nas Chrome DevTools
A aba Network nas Chrome DevTools

No caso deste concerto, podes ver que os ficheiros cumprem um padrão: segmentxx_1.av.ts, onde xx é o número do fragmento. Habitualmente, é assim que estão repartidos.

Avançando até ao final do vídeo no leitor, vejo que no caso do meu vídeo, o último segmento tem o número 392.

Temos então 392 fragmentos para descarregar. Para encontrares o URL, basta clicares num segmento com o botão direito do rato e escolher “Copy > Copy Link Address”.

Copy Link Address na aba Network das Chrome DevTools
Copy Link Address na aba Network das Chrome DevTools

Passo #2: Criar uma lista com todos os segmentos

O URL vai ser igual para os 392 fragmentos, mas o número do ficheiro vai mudar. Precisamos então de criar uma lista.

Há várias maneiras de chegar a este documento. No fundo, apenas precisamos de algo que repita o URL mas que acrescente +1 ao número do segmento.

Isto pode ser conseguido com Excel, com um editor de texto como o SublimeText com um plugin como o Text Pastry, ou por exemplo com JavaScript.

Para este caso, foi precisamente esta última opção que usei. Com um bom e velho loop, problema resolvido.

Assim sendo, nas DevTools podemos passar da aba “Network” para “Console” e colocar um código JS deste género:

// O número total de fragmentos fica nesta variável - no meu caso, 392
const length = 392;
// O URL que obtiveste com o "Copy Link Address" vai para esta variável, em forma de string - deves remover o nome do ficheiro, ou seja, o segmentxx_1.av.ts
const baseUrl = 'https://ositedoconcerto.com/pasta/outrapasta/'
// Criamos uma função com um loop para acrescentar o número ao segmento
function getURL() {
for (let index = 1; index < length; index++) {
const url = baseUrl + segment${index}_1_av.ts
console.log(url);
}
}
// Corremos a função, para que nos apresente a lista completa
getURL();

Passo #3: Descarregar todos os segmentos

Agora que temos a lista com o URL de todos os segmentos, podemos usar algum tipo de download manager para descarregar cada um, ou usar o terminal.

Sou grande fã do terminal para ações deste tipo e optei por recorrer ao wget para descarregar todos os ficheiros. Também poderás optar pelo curl (que podes utilizar em qualquer terminal), se preferires.

Para o caso do wget, basta editar a função que usámos no passo anterior, para o seguinte (a alteração é só dentro do console.log()):

// Criamos uma função com um loop para acrescentar o número ao segmento
function getURL() {
for (let index = 1; index < length; index++) {
const url = baseUrl + segment${index}_1_av.ts
console.log("wget " + url);
}
}

Voltamos a correr o código completo nas DevTools e abrimos o terminal para colar a nova lista obtida de ficheiros a descarregar, já com o comando wget inserido por nós para as 392 ocasiões.

Passo #4: Juntar todos os segmentos

Agora que temos o nosso computador com todos os segmentos descarregados, está na altura de os juntar todos num só vídeo.

Para isso, vamos voltar a usar o terminal, e o poderoso FFmpeg. Esta é uma solução incrível para manipular vídeo e até áudio, e é claramente mais rápida que um programa como o Adobe Premiere ou o Final Cut.

Com o concat do FFmpeg, é fácil juntar uma enorme quantidade de vídeos.

O comando mágico a utilizar é o seguinte: ffmpeg -f concat -i segmentlist.txt -c copy all.ts

Como podes ver, o concat recebe uma lista de ficheiros, vinda de um TXT que dei o nome de segmentlist.txt.

O ficheiro TXT terá que ter o seguinte aspecto:

file 'segment1_1_av.ts'
file 'segment2_1_av.ts'
file 'segment3_1_av.ts'
file 'segment4_1_av.ts'
file 'segment5_1_av.ts'

E assim sucessivamente. Novamente, podes utilizar várias soluções para gerar esta lista, da mesma forma que no passo #2.

Vamos voltar então a recorrer ao JavaScript e inserir o seguinte na consola:

const length = 392;

function getFileList() {
  for (let index = 1; index < length; index++) {
    const fileName = `segment${index}_1_av.ts`
    console.log(`file '${fileName}'`)
  }
}

getFileList();

Agora, copiamos o resultado para um ficheiro de nome segmentlist.txt.

Corremos finalmente o comando do FFmpeg com o concat e o nosso vídeo estará pronto com o nome all.ts, visto que, neste caso, a extensão dos fragmentos era TS.

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 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!

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!

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çárioBackblaze B2Amazon S3Microsoft AzureGoogle 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 calculadoraeste é 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!

    Se quiser entrar em contacto comigo, pode enviar-me um e-mail para mail@brunobrito.pt ou preencher o formulário abaixo.

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