Como fazer favicon, splash screen e ícones de forma fácil e rápida?

Se você está criando um aplicativo, seja ele nativo ou uma PWA, certamente você já se deparou com a missão de fazer os ícones, tela de inicio e o famigerado favicon da aplicação.

Convenhamos que é uma tarefa um pouco chata de realizar, por que são muitas resoluções e formatos

Mas felizmente, vamos aprender aqui como a gente pode agilizar esse processo de forma indolor 🙂

Pré-requisitos

Antes de tudo você precisa ter a arte do seu ícone e a sua splash screen prontinhos e para que tudo fique certinho precisamos ficar atentos á essas regras:

Ícone

  • Pode ter background transparente
  • Tamanho de 1024 x 1024 px
  • PNG

Splash screen

  • Não pode ter fundo transparente
  • Tamanho de 4096 x 4096 px
  • Centralizar as informações importantes *

    * É importante centralizar porque a ferramenta não é “bala de prata” e não consegue manter as proporções corretas para todos os dispositivos, então ela centraliza o conteúdo e preenche com um background. Para um MVP resolve, mas se você vai usar em produção, eu aconselho a editar as imagens que ficarem “estranhas”.

Gerando os arquivos

Vamos usar a ferramenta Ape Tools através do link https://apetools.webprofusion.com/

No primeiro campo (Step 1) a gente precisa inserir o ícone no formato PNG e grandão mesmo…
e no segundo campo (Step 2) a gente insere a splash screen, também grandona.

Depois de inserir os arquivos, vai aparecer um botão “Kapow!” logo abaixo, clique sem medo. Se você quiser ver a prévia das imagens marque a caixa de seleção “Show previews”.

Agora você pode ainda escolher as plataformas que você quer trabalhar. Caso seja uma PWA, tem ferramentas melhores que geram inclusive o manifest.json e uma index.html com as tags necessárias, mas se precisar só das imagens a Ape Tools vai te ajudar.

Para fazer as imagens conforme as configurações dessas plataformas, basta clicar em “Include in bundle”.

O resultado de tudo isso é um arquivo .zip com todas as imagens necessárias.

Se você está usando em uma PWA, você ainda precisa criar o arquivo manifest.json e colocar algumas tags na sua index.html.

Mas, se o seu app é nativo, basta seguir as instruções que o próprio Ape Tools informa, dependendo da versão que você vai usar.

E aí, essa informação te ajudou?

Compartilha aí com teus amigos pra ver se ajuda eles também. Se não gostou, compartilha com os inimigos hiuahuiahuiah

E comenta aí se tu conheces uma forma melhor.

Grande abraço!

Como resolver no Angular: ERROR Error: Uncaught (in promise): ReferenceError: Buffer is not defined

Se você está utilizando o Angular e trabalhando com Buffer, certamente você já se deparou com esse erro em seu console.

core.js:6014 ERROR Error: Uncaught (in promise): ReferenceError: Buffer is not defined
ReferenceError: Buffer is not defined

Esse erro significa que o seu Angular não conhece a implementação de Buffer. Mas como resolver isso?

Como resolver: Buffer is not defined?

Para solucionar esse problema, você precisa instalar o pacote do Node.js Buffer via npm ou yarn

npm install --save buffer

Depois disso, vamos configurar “adicionar” a funcionalidade no objeto window para que ele funcione no Angular da mesma forma que funciona no Node.js.

Para isso, vamos alterar o arquivo polyfills.ts:

import * as buffer from 'buffer';

(window as any).Buffer = buffer;

Pronto!

Dica:

Se você não quiser utiliza-lo como se fosse “nativo”, apenas importe normalmente no seu componente, dessa forma:

import { Buffer} from 'buffer';

Dica 2:

Isso não acontece só no Angular. Você pode usar essa dica para trabalhar com scripts em páginas da web ou em algum projeto que usa Typescript, assim como o Angular.

E aí, funcionou para você? Conta aí embaixo quais as outras formas você resolveria essa situação?

Abração e até a próxima!

Como a Amazon define um novo produto?

Caminho errado volte!

Ei, você que tem uma ideia na gaveta ou trabalha com o desenvolvimento de um novo produto na sua empresa. Como você faz para tirar isso do papel? Que framework você utiliza? Ou simplesmente lança e vê no que dá?

Há quem faça questionários com o cliente, há quem só olhe para os stakeholders do projeto e também há quem apenas acredite que teve uma ótima ideia e isso basta para garantir o sucesso do seu projeto.

Na vida real não deveria ser bem assim. Muitas vezes as empresas empregam muito tempo e dinheiro em projetos que seus clientes não precisam de fato ou que não resolvem um problema e isso não significa que seu produto é ruim ou foi mal feito, e sim que talvez o seu cliente não precisava dele.

Existem diversos frameworks e metodologias que resolvem esse problema com abordagens diferentes, mas hoje eu vou te mostrar uma abordagem bem legal que eu nunca usei, mas pretendo aborda-la em breve aqui na empresa. O nome dessa técnica é Working Backward e essa é a forma que a Amazon desenvolve seus produtos.

Working Backward

Essa forma de desenvolvimento de produto é totalmente integrada ao consumidor final e parte do fim para o princípio. Entenda como funciona.

Press release

O primeiro passo é você escrever um anúncio do produto final e destinado ao público-alvo que vai utilizar o produto, isso mesmo, você escreve um artigo como se o seu produto já existisse e estivesse sendo noticiado pela imprensa. Pense em todos os detalhes e realmente pense como a imprensa noticiaria o seu produto. Escreva em um papel e tire várias cópias, você vai precisar delas na próxima etapa.

Reunião

Com a notícia em mãos junte a sua galera, de preferência que tenham skills e backgrounds bem diversificados, dê à eles o seu papel com a notícia do seu novo produto e prepare-se para as “pedradas.”

Pedradas

Naturalmente as pedradas virão. Esse pode ser um momento frustrante, mas é a parte mais interessante do processo. É aqui que você vai identificar as principais oportunidades e problemas do seu novo produto. Mas não leve nada para o pessoal, esse é o trabalho que a sua galera tem que fazer. Sempre com o foco no cliente.

Resultados

Se você sobreviveu a enxurrada de feedbacks da etapa anterior, agora é a hora de extrair os resultados desse processo. Provavelmente, surgiram diversos aspectos que podem fazer com que o seu produto tenha que ser modificado para potencializar os resultados ou o impacto no cliente, normalmente algo que você não pensou, mas aquele colega que teve um caminho diferente do seu na vida, conseguiu pensar por você.

Durante esse processo, você consegue perceber com mais clareza todas as etapas do processo de desenvolvimento e já pode aproveitar para gerar pequenos pacotes de entregas (baby steps) e depois disso é mão na massa!

Como implementar na sua empresa

Uma boa abordagem é a utilização de templates para a criação dos press releases. Mas vale lembrar que o importante é ser fiel ao lançamento de um produto destinado ao publico-alvo, seja ele interno ou externo.

Começando pelo press release, basicamente, você precisa descrever a sua solução e apresenta-la par o seu público de forma clara e simples, entendível pelo público-alvo. Você pode ver como estruturar um press release nesse link https://rockcontent.com/blog/press-release/

Feito isso, chame o pessoal e deixe eles lerem o conteúdo por 15 minutos, depois é a hora dos feedbacks.

Durante o retorno dos feedbacks, tire dúvidas, ajuste features e remova features desnecessárias.

O que aprendemos com isso?

No processo de criação de um produto muitas vezes a gente acha que teve uma brilhante ideia e que ninguém nunca pensou nisso. Quantas vezes você já pensou “poots, como ninguém fez isso ainda?”. Talvez tenham feito de uma forma errada ou num tempo errado, ou talvez não tenha o fit correto com o público alvo estabelecido, enfim, são “N” fatores.

Acho que o principal aprendizado é que nós desenvolvemos produtos para os clientes não pra nós, portanto, a dica é não se apegar a solução que você criou e sim ao problema que você resolve.

O foco no cliente, além de garantir o sucesso do produto também garante que você erre menos, se frustre menos e no final das contas perca menos dinheiro com esse processo.

E você, como desenvolve os produtos da sua empresa? Em quem você pensa primeiro? Comente aí em baixo como você faz para criar coisas incríveis!

Fonte:

https://www.product-frameworks.com/Amazon-Product-Management.html

https://www.quora.com/What-is-Amazons-approach-to-product-development-and-product-management?ref=http://www.product-frameworks.com/

Easter Egg do Thanos no Google

Easter Egg do Thanos no Google

Não sei quem surpreende mais, o Google ou a Marvel. Na ocasião do lançamento do filme da Capitã Marvel, eu fiz um post sobre o site do filme que causou uma nostalgia tremenda nos programadores tiozões como eu, você pode conferir esse post aqui.

Se na vez da Capitã Marvel foi a vez da Marvel, agora é o Google quem surpreende. Vai lá, teste você mesmo! Entre no google, pesquise por thanos e clique na manopla…

Capitã Marvel causando nostalgia em desenvolvedores

E aí galerinha do café, tudo tranquilo?

O desenvolvimento web que conhecemos hoje tem um passado nebuloso… hehehe

Hoje em dia temos muita gente nova que provavelmente nem ouviu falar em MIcrosoft Frontpage (eca!), já que na época em que ele “resolvia” alguns problemas, a maioria do pessoal estava nascendo…

Na época, mesmo com uma baita ascensão da internet, programadores web eram vistos com desdenho por programadores desktop, que era o que mais havia. A frase mais comum era “PHP não é linguagem, é tecnologia”, “ASP é gambiarra”, “HTML só formata”, “progama em C que nem gente grande”, etc…

Fato é que a gente não dava muita bola (mesmo eu já programando em C também nessa época heheh) e desenvolvíamos coisas “incríveis” para os sites da escola, da turma, do condomínio, da família e para tudo o que mais poderia haver, sempre com muitos códigos copiados e alterados de diversos tutoriais e upados com o velho FTP.

Recentemente,  iria fazer um comparativo de sites que eu fazia na época para os que rola hoje (a diferença é enorme!!!) para uma talk que fiz na trilha Inspire do TDC, mas a Marvel resolveu isso pra mim. Como o filme da Capitã Marvel rola nos anos 90, eles fizeram o site oficial bem do jeitinho – horrível – que a gente fazia na época. Isso deu uma baita nostalgia!

Confere lá: https://www.marvel.com/captainmarvel/

A web melhorou não é? hehehe

Valeu, grande abraço!

Tour nos datacenters da Google Streetview

E ai galera do café!

Se você está passando por aqui certamente você gosta de tecnologia e hoje em dia em se tratando de tecnologia não podemos deixar de falar em Google.

Estava passeando peloYoutube quando encontrei um vídeo que mostrava o interior dos datacenters do Google, ai foi fácil perder alguns minutos passeando por lá.

Se você quiser conferir, entra lá http://www.google.com/about/datacenters/inside/streetview/

Até a próxima 😉

Lorempixel – Mais um poderoso placeholder

Logo do LorenPixel

Buenas gurizada!

Apresento mais um place holder, dessa vez um poderoso mecanismo!
Para quem não sabe o que é place holder, escrevi não faz muito sobre o assunto no post do placekitten.com, confere lá…

Configurações do LorenPixel
Imagem que mostra as configurações do LorenPixel

Agora apresento outro place holder, o lorempixel, semelhante ao loremipsum, mas com imagens. Você consegue configura-las, inclusive com o tipo de imagem que vai aparecer. E cá pra nós, é melhor contextualizar o conteúdo da imagem com o conteúdo do trabalho do que apresentar um monte de gatinhos pro cliente… heheh

Para gerar as imagens, basta digitar diretamente no navegador a URL com as configurações que tu queres, por exemplo: Para gerar uma imagem de 640 pixels de largura (width), 480 de altura (heigth) e da categoria abstrata, basta digitar a seguinte URL: http://lorenpixel.com/640/480/abstract

As configurações podem ser feitas também pelo painel contido no site http://lorenpixel.com

Resultado do LorenPixel

Espero, como sempre, ter ajudado!

Abração 😉

Descobrindo SERVICE TAG da Dell por WMI

Post rápido…

Para descobrir o service tag (etiqueta de serviço) de um equipamento Dell remotamente, além do outro post que fala de um script VBS, podes executar o seguinte comando:

c:\ wmic /user:[usuario] /password:[senha] /node:[máquina] systemenclosure get serialnumber

Onde:

[usuario] = é um usuário que vai conectar no computador remoto (se omitido será solicitado em tempo de execução)
[senha] = é a senha desse usuário (se omitido será solicitado em tempo de execução)
[máquina] = Nome NETBIOS ou endereço IP do equipamento. Se o nome conter espaços coloque-o entre aspas duplas (“”).

O resultado será algo como:

SeriaNumber
J6FFD1

DICA: o equipamento pode não ser Dell e possuir um serial number de outro fabricante.

Vou voltar para a minha correria, grande abraço!

Como instalar o botão +1 do Google

Pessoal,

Para instalar o botão +1 do Google, em seu site ou blog, basta seguir esses passos:

1º) Copie e cole o código abaixo entre as tag’s head do seu código

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {lang: 'pt-BR'}
</script>

2º) Inclua esse código onde você quer que apareça o botão do [b]Google +1[/b]

<g:plusone></g:plusone>

Mais informações no site do Google

Abraço

Mark Zuckerberg, o mais seguido no Google+ (?!)

Mark Zuckerberg no Google+

Verdade!

Segundo o site Socialstatistics.com Mark Zuckerberg, sócio fundador do Facebook é seguido, hoje por 110,820 pessoas.

Mark está superando os próprios fundadores do Google Larry Page em 2º com 61678 seguidores e Sergey Brin em 3º 47,033 seguidores. O idealista do próprio Google+, Vic Gundotra, aparece na 5º posição com 32,144 seguidores.

Mas e agora, será que é ele mesmo? Dizem que sim, até mesmo pelas pessoas que estão adicionadas como amigos, todas existem!

 

 

Lista Google+
Lista Google+

Mark Zuckerberg no Google+
Mark Zuckerberg – O mais seguido no Googl+