Publicado Por :

Bruno Brito

5 Apps úteis para Ensino à Distância

5 apps para Ensino à Distância

5 apps para Ensino à Distância 1240 700 Bruno Brito

O COVID-19 obrigou muitos profissionais a procurarem novas alternativas para realizarem as suas funções do dia-a-dia.

Na minha função de professor de Marketing Digital na ESCS, adoptei (como tantos outros) o Zoom para dar aulas, e criei também uma plataforma minha para Cursos.

Pelo caminho, encontrei outras aplicações bem interessantes (algumas até foram concebidas precisamente neste período!), que podem ser úteis não só para outros professores como para qualquer pessoa que trabalha remotamente.

Vamos à lista!

#1: Krisp

A grande missão do Krisp é atenuar o ruído durante as reuniões/aulas à distância.

Se te vês obrigado a clicar no mute com frequência por estares em ambientes barulhentos, esta aplicação será uma ótima ajuda.

Ao início estava algo cético quanto à sua capacidade de atenuar o som de fundo sem alterar drasticamente as frequências da voz, mas depois de alguns testes em casa, fiquei muito impressionado com os resultados.

Apesar de ter um bom microfone e bastante silêncio à minha volta, utilizei esta aplicação em todas as minhas aulas, e recomendei-a a todos os meus alunos.

Com o COVID-19, a aplicação criou um plano gratuito com algumas limitações e ofereceu a versão Pro durante 6 meses a alunos e professores. De qualquer modo, o plano Pro não é muito dispendioso.

Instalar a aplicação é bastante fácil, e como todo o som passa por lá, fica automaticamente compatível com todos os programas (como o Zoom, Skype ou Google Meet) e funciona com qualquer microfone ou headset.

O Krisp está disponível para macOS, Windows, iOS e até como extensão para o Google Chrome.

#2: Presentify

O Presentify é uma aplicação desenvolvida por um programador (Ram Patra) que só está disponível para macOS.

Criada especificamente para ajudar alguém a expressar-se durante screencasts, a aplicação permite fazer desenhos no ecrã ou destacar o cursor.

Utilizei esta aplicação em algumas aulas, quando queria dar destaque a algo de um slide ou para facilitar o acompanhamento do meu cursor pelo computador.

Ao início, não tive muito sucesso com o Keynote em fullscreen, mas essa questão foi entretanto resolvida pelo programador após o meu alerta. Têm surgido novas funcionalidades ao longo do tempo, tornando esta aplicação cada vez mais útil.

A aplicação está disponível na App Store e, à data deste artigo, em promoção.

#3: FlexiQuiz

Na altura de avaliar os alunos, optei por uma série de questões de escolha múltipla. Agora, precisava de uma plataforma.

Procurei algo versátil, que satisfizesse uma série de requisitos, tais como:

  • definir um tempo limite;
  • apresentar 1 questão por página;
  • impedir que se volte atrás no teste;
  • apresentar a nota final ao aluno após entrega do teste;
  • sortear a ordem das opções de escolha múltipla de cada questão;
  • sortear um conjunto de questões baseado num banco de questões maior;
  • consulta para o professor da nota e das respostas a todas as questões (corretas ou incorretas) de cada aluno.

O FlexiQuiz preencheu todos estes requisitos, disponibilizando ainda muitas outras opções de customização (por exemplo, de design) que tirei partido.

Estas são algumas das opções:

FlexiQuiz

Como outras plataformas do género, o FlexiQuiz gera um link para partilhares com quem vai preencher o formulário.

As estatísticas obtidas no final de cada teste eram muito completas e fiquei muito satisfeito com a solução encontrado para as avaliações deste semestre.

Existe um plano gratuito, mas é provável que tenhas de optar pelo plano Premium, como foi o meu caso.

#4: Scrcpy

O scrcpy não tem o nome mais fácil de decorar, mas se precisares de exibir e controlar o teu telefone Android no ecrã do computador, é a melhor opção que conheço.

A sua instalação não é simples se não estiveres confortável com o terminal, mas a documentação é simples e se precisares de mostrar o teu telefone com frequência, vale bem, a pena a “aventura”.

scrcpy

No caso de macOS, utilizei o Homebrew para instalar esta aplicação e tudo correu sem problemas. Também precisarás de ter o adb (Android Debug Bridge) instalado.

Uma vez instalada, basta ligar o telefone por USB ao computador, abrir o terminal para correr o comando scrcpy e está feito!

Estas são algumas das principais funcionalidades:

  • Definir se queres que o ecrã fique sempre ligado;
  • Gravar o ecrã (exportando depois um mp4 ou mkv);
  • Mostrar os toques que deste no ecrã (útil para screencasts);
  • Sincronizar o copy/paste entre o computador e o telemóvel.

A aplicação é gratuita, open source e funciona em Windows, macOS e Linux.

#5: Meeter

Uma aplicação útil não são para professores, mas também para freelancers ou qualquer pessoa que dedica uma boa parte do seu dia a reuniões.

Se vais com frequência ao calendário para ver qual é a aplicação a utilizar e os dados de acesso para cada uma, o Meeter poderá poupar-te uns minutos todos os dias.

Meeter

Esta app precisará, naturalmente, de aceder ao teu calendário, para encontrar as várias reuniões e respetivas plataformas.

A partir daí, tudo ficará disponível na menubar, bastando fazer “Join” para a reunião seguinte!

A aplicação é gratuita e funciona tanto para Windows como para macOS.


Estas foram as minhas principais armas secretas neste semestre atípico de e-learning. Tens alguma que queiras recomendar?

Como sincronizar 2 pastas em macOS com o Rsync

Como sincronizar 2 pastas em macOS com o Rsync

Como sincronizar 2 pastas em macOS com o Rsync 1240 700 Bruno Brito

Como tantos outros, tenho o hábito de manter algumas pastas do meu macOS sincronizadas com um disco externo, para efeitos de backup.

Depois de vários anos a fazer o habitual drag and drop, decidi ir à procura de uma alternativa melhor… e ainda bem que o fiz!

Procurava uma aplicação que preenchesse os seguintes requisitos:

  • verificar se existem ficheiros em falta na diretoria de destino (e transferi-los);
  • verificar se existiram alterações nos ficheiros da diretoria de origem (e, se sim, atualizar esses mesmos ficheiros na diretoria de destino);
  • apagar eventuais ficheiros que já não existissem na pasta de origem (requisito bónus, visto ser uma necessidade rara no meu caso).

A solução, curiosamente, já estava instalada no meu macOS desde que o comprei. Falo do Rsync.

O Rsync é uma ferramenta para o terminal que já deverá estar instalada no teu macOS. Podes ver a versão que tens instalada escrevendo rsync --version.

Rsync no iTerm

O mais provável é que a tua versão esteja desatualizada – a Apple deixou de incluir ferramentas com a licença GPLv3 ou similar, como é o caso desta. No entanto, atualizá-la é um processo simples.

Para o fazer, vais precisar do Homebrew, que menciono em maior detalhe neste artigo, visto ser uma solução fantástica para automatizar a instalação de aplicações.

Para atualizares o Rsync (eu ainda tinha a versão 2), bastará correres o comando brew install rsync.

Agora sim, está na hora de ficares a conhecer os comandos mais populares desta poderosa ferramenta de sincronização de pastas e ficheiros.

Explorando o Rsync

Imaginando um cenário em que tens a dir1 (que é a diretoria de origem) e a dir2 (a diretoria de destino), bastará correres o seguinte comando:

rsync dir1/ dir2

Aquela / é importante que utilizes. Se só escreveres rsync dir1 dir2, ficarás com uma estrutura do tipo dir2/dir1/ficheiro em vez de dir2/ficheiro. Na maior parte das situações, não é o que se pretende.

Se quiseres que as subdiretorias dentro de dir1 também sejam sincronizadas, podes acrescentar a flag -r, mas a opção mais popular é a flag -a, que também preserva as permissões, o grupo, data de modificação e outras informações. Opto praticamente sempre pela segunda.

Podes também acrescentar -v se quiseres um relatório do que foi transferido, e -P para que tenhas uma barra de progresso para as transferências e a possibilidade de continuar transferências interrompidas.

Juntando as peças, ficarias com este comando, que diria que é o mais popular:

rsync -avP dir1/ dir2

Para testares o comando sem transferir realmente os ficheiros (a chamada dry run), podes acrescentar -n.

Este comando é particularmente importante se quiseres acrescentar --delete, que é o comando que apaga ficheiros na diretoria de destino, se os mesmos já não existirem na diretoria de origem.

Se tiveres essa necessidade, aconselho-te a simular sempre primeiro o comando, visto que existem inúmeras histórias de terror de malta que perdeu dados importantes desta forma!

Corre algo deste género primeiro:

rsync -avn --delete dir1/ dir2

E se estiver tudo OK no relatório, retira o n e volta a corrê-lo.

Não te esqueças também que podes utilizar o Rsync entrando numa máquina remota via SSHrsync -a ~/dir1 [email protected]:diretorio – ou aceder a um disco externo.

No meu caso, visto que o meu disco se chama “Elements”, escreveria algo deste género:

rsync -av dir1/ /Volumes/Elements/dir2"

Estes são os comandos mais populares, mas podes sempre consultar o manual para casos mais específicos.

Para mais comandos no terminal, passa os olhos por este artigo!

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
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. Instant Logo Search
  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 Instant Logo Search.

Este site, apesar de recente, já conta com milhares de logotipos à disposição, todos eles nos 2 formatos mais apetecíveis: SVG e PNG.

Instant Logo Search

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.

Se quiseres, 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
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. Dunnnk
  9. Graphic Burger
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
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.

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.

Digital Marketing for Artists

Uma nova Apresentação: Digital Marketing for Artists

Uma nova Apresentação: Digital Marketing for Artists 1240 700 Bruno Brito

Este fim-de-semana fui até aos Açores para falar de Marketing Digital. Desta vez, a apresentação era para artistas e em inglês, pelo que adaptei o meu conteúdo em conformidade.

Nesta workshop, decidi focar a minha conversa de 90 minutos no seguinte:

  • A mentalidade a ter nas redes sociais;
  • A importância de apostar nas plataformas que controlamos;
  • Como criar conteúdos com regularidade e ter uma estratégia de Marketing.
Bruno Brito - Digital Marketing for Artists

Como o target era essencialmente pessoas do mundo da música, optei por exibir alguns bons exemplos de artistas que acompanho, todos da música electrónica – como deadmau5, Morgan Page, Gabriel & Dresden ou Laidback Luke.

Podes ver (e descarregar) a apresentação aqui.

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

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.