E se você apagar o logo do seu site?

Assistindo a palestra da Bia no evento do Google Engage, ela fez uma pergunta muito interessante, falando sobre a personalidade de marcas, você já pensou se seu site é autentico?

Como seria seu site se você tirasse o logo e o slogam, poderia ser qualquer site ou seus clientes saberiam que estão no seu site, se comunicando com a sua marca?

Essa é uma das perguntas mais inteligentes que eu já ouvi e me deixou refletindo, me fez pensar de uma maneira nova.

Inovação na usabilidade do app Pomodoros, som de trompete para avisar o fim do ciclo

Como sempre procuramos adotar sugestões de nossos usuários, isso é uma prioridade absoluta em todos os projetos que eu participo, condição básica para melhorias de usabilidade e outros. Mas há que se atentar a um importante fato, nem tudo que os usuários querem é preciso ser feito e muito pior, como dizia Steve Jobs “eles não sabem o que querem”.

Eu diria que posso concordar com isso, afinal, os usuários muitas vezes relatam problemas de experiência e dão uma sugestão logo em seguida para a solução, por exemplo um usuário que solicita um “botão de fechar” na janela. Cabe a quem escuta entender de fato qual o problema que o usuário está querendo resolver de fato, com perspicácia e sensatez logo se percebe que ele quer na verdade mudar de tela, e talvez fosse melhor redesenhar a interface, permitir fechar com clique fora.

Do ponto de vista de um importante usuário do sistema, ivo, programador, que ao testar versões e protótipos e aplicação do mesmo em abientes de trabalho de sua fábrica de sofware e do seu próprio uso, deveria haver “um som de tic-tac 10 segundos antes do alerta final, pois o som de aviso (telefone tocando) é muito alto e estridente”.

Isso ficou na lista de tarefa por meses, afinal teria que programar um tic-tac e refazer várias linhas de código. Pensei em colocar trechos de música antes dos 10 segundos, algo como em um vídeo-game onde a música fica mais empolgante no fim do jogo.

Ao acaso, organizando meus arquivos de aúdio e efeitos sonoros encontrei muitos sons interessantes, e quando fui fazer o backup dos sons do site do Pomodoros percebi que seria muito mais simples a tarefa, não precisaria reprogramar nada, bastaria colocar o “tic-tac” no mesmo arquivo de audio, até mesmo retirar o som de telefone do final.

Escolhi alguns sons diferentes para testar, mas ao fazer isso percebi que prejudicaria a experiência de antigos usuários, eu mesmo estava habituado ao telefone por pelo menos 7 anos. Resolvi então escolher um som e anexar o som do telefone no fim, quando lancei este projeto em 2010 arquivos de sons não eram pouco usados e não recomendados pelo seu tamanho, mas com as conexões mais modernas as recomendações mudaram e em breve haverá toda uma experiência sonora “climatizando” o aplicativo com diversas possibilidades a escolha do usuário.

Integração com Mailgun completa, enviando e recebendo emails

Mais uma tarefa que levou meses, está ficando repetitivo esse tipo de aviso aqui no blog, porém estas tarefas estruturais, que são a base do serviço, via de regra consomem muito tempo pois são necessário dezenas de testes e muita, mas muita pesquisa de serviços com custos acessíveis para uma startup enxuta. Não vou citar todos os serviços que pesquisei, quase todos da primeira página de busca do Google, mas não comecei essa tarefa procurando serviços de email, mas sim instalando meu próprio servidor de email postfix + devcot, configurando no meu VPS Linode centOS estes serviços.

Tudo ia muito bem até receber aquela enxurrada de spam, tornando inviável verificar os emails diariamente, pois muito tempo era perdido para não encontrar nenhum email “de verdade”, assim o problema se tornou grande, como divulgar meu email oficial em um cartão de visita se nunca iria conseguir encontrar os contatos de pessoas interessadas em serviços neste mar de spam.

Quanto mais velho um domínio e um endereço de email mais spam ele recebe, a internet é cruel e seus robozinhos spammers vão se somando e aniquilando endereços de emails antigos, por isso muita gente vive trocando de email e quase sempre evitando divulgá-lo de forma escrita na internet para evitar spam, mas é inevitável. Como a f5sites.com existe desde 2009, são muitos lugares onde divulguei meus emails, assim a enxurrada de spam era diária a solução foi instalar o SpamAssassin.

Aí você me pergunta, ele realmente funciona e assassina os spams? Sim, muito bem, pouca coisa passa, estaria tudo bem se essa solução não tivesse gerado um problema adicional, além da dificuldade de configurar os filtros, ele esgotava os recursos do servidor, a CPU disparava para 100% e recebia muitos alertas diários, dividindo recursos com https, mysql, php-fpm o servidor de email acabava por travar todos os sites.

Teria que então abrir um novo VPS só para o email, aí surgiu a questão do custo, a frustração cresceu porque tive que desativar o meu servidor de email depois de semanas “apanhando” para configurá-lo certinho para não ser barrado quando enviado para servidores exigentes como gmail, qualquer configuração errada e o gmail jogava meus emails direto no spam. Estava tudo certo mas não havia recursos para o serviço ficar ativo, nessa hora amaldiçoei os serviços de emails corporativos, eles mesmo inundam a rede de spam para depois cobrar por serviços anti-spam, um jogo injusto para os pequenos.

Para servidor de email é necessário além do custo baixo uma boa reputação dos IPs e servidores, além da já tradicional escalabilidade, quase todas as empresas acabam assinando com o próprio Google e recebem além do serviço anti-spam de primeira qualidade, interfaces web para seus funcionários, um tipo de gmail corporativo mas com @seudominio.com, funciona muito bem e tem um preço acessível, mas tenho minhas restrições quanto a confidencialidade, além de existirem alternativas gratuitas ou muito mais baratas.

Não teria encontrado o Mailgun se não fosse em uma conversa informal com meu primo, CEO da Plape.bi, Yuri, que me indicouo serviço, pois estava tendo ótimo resultados e ao questioná-lo sobre seus concorrentes, rapidamente destacou suas vantagens. Assim que tive tempo comecei a configurar o serviço para testar, fico sempre receoso quando exigem o cartão de crédito, mas com uma cota mensal de 10 mil emails grátis, atenderia minha demanda inicial facilmente.

Assim após pesquisa sobre a empresa e o fundo que a mantinha, percebi que era uma alternativa viável as grandes corporações de TI, uma verdadeira entrante no mercado, com força para crescer e com preços competitivos. Consegui sem muita dificuldade configurar o email pelo painel do Linode DNS e assim pude começar a enviar meus emails transacionais, antes usava o serviço grátis do smtp do gmail, com muitas limitações, mas com o Mailgun atingi um novo patamar.

Foram mais semanas lendo as documentações e estudando os protocolos MX do DNS para conseguir configurar corretamente o recebimento de email, está sim uma ferramenta incrível. O Mailgun permite que você receba emails @seudominio e ainda oferece gratuitamente o serviços de filtro de spam com base no próprio SpamAssassin, além de permitir a configurações de rotas catch_all para encaminhar emails recebidos. Assim hoje com o Mailgun posso enviar e receber emails de forma gratuita, com filtro de spam e com limites bastante justos. Portanto agradeço muito ao Yuri pela dica e compartilho com vocês essa incrível ferramenta, Mailgun.

Rede de lojas virtuais F5 Sites próximas a serem lançadas

Desde o final de 2016 a F5 Sites vendo sendo reestruturada, antes era uma rede de sites independentes, mas agora se transformou em uma rede de blogs, serviços e lojas virtuais integradas. Vários dominam agora operam uma tecnologia compartilhada, foram necessários muitos meses de trabalho em pequenos projetos para a integração completa de todas as tecnologias e plugins.

Confira uma visão rápida sobre como a F5 Sites evoluiu de uma prestadora de serviços e consultoria em WordPress para uma rede de lojas virtuais e projetos integrados:

  • 2009: Início da F5 Sites, o objetivo era vender temas de WordPress no site ThemeForest, nunca alcançado. Apesar de bem remunerado a qualidade exigida do código e documentação era muito elevada para um momento inicial, portanto a F5 Sites nasceu com foco internacional e global, mas não atingiu as metas iniciais.
  • 2010: Para fazer receita rapidamente, passa a fornecer serviços de personalização e customização de sites para clientes no Brasil que utilizavam WordPress, conheci muitas pessoas e colaborei com muitos projetos.
  • 2012: Além de consultoria passa a hospedar os primeiros serviços próprios, como Itapemapa e Pomodoros, ainda dentro de uma infraestrutura de TI muito pouco estruturada e dependente de serviços de hospedagem para configurações avançadas.
  • 2013: Grandes clientes de consultoria aparecem, muito caixa entra e os investimentos em projetos atigem seu ápice, porém não tinha tempo para programá-los pois dedicava meu tempo para projetos de terceiros, na prática o resultado foi o abandono da F5 Sites seguida de uma grande injeção de recursos financeiros.
  • 2014: Interrompida definitivamente, a rede toda foi suspensa pois o fundador precisou se dedicar de forma integral ao programa de mestrado em Administração da FEA-USP.
  • 2016: retorno do fundador para dedicar-se exclusivamente ao desenvolvimento da F5 Sites e a rede de projetos, a partir de um novo paradigma, transformar a tecnologia para suportar mútiplos lançamentos em sequência. Com muitas tecnologias de 2012 e 2013 paradas, o trabalho foi enorme para relançar cada pequeno projeto dentro de um novo contexto, porém ao optar por WordPress como tecnologia principal desde o início a maior parte do trabalho de atualização foi extremamente fácil, já que basicamente os plugins e temas desenvolvidos funcionariam quase sem problemas.
  • 2018: Após 2 anos desenvolvendo novas tecnologias e preparando a rede, é prevista a abertura e lançamento para o público do primeiro serviço oficial da F5 Sites, o app Pomodoros.com.br.

Conheça as tecnologias e plugins que foram incorporados e agora fazem parte do núcleo duro da nossa tecnologia, integrando plugins próprios com soluções de terceiros:

  • WooCommerce + Plugins
  • F5 Sites Shared Posts & Uploads Folder
  • F5 Sites MySQL Manager

Welcome Gringos: Pomodoros começa a se tornar global

Quando disse que estava planejando lançar produtos para os EUA
há um ano e meio muitos desconfiaram, os mais próximos foram até irônicos, mesmo sem perceber. Ainda tenho muito chão para chegar nos resultados que eu quero (dólares), o Pomodoros vai ser lançado e terá seus primeiros usuários gringos ainda este ano.

Antes mesmo de estar pronto, já começou a receber os primeiros visitantes dos Estados Unidos, pessoas de muitos países estão chegando no site, Rússia, Alemanha, França. A maioria são da California, EUA, por isso digo, vocês são muito bem vindos ao Pomodoros, podem surfar a vontade pelo site e assim também espero ser recebido, quando for surfar aí, em Venice Beach.

Apesar de receber visitantes de tantos países uma observação muito importante deve ser feita, eles entram e saem rapidamente do site porque a tradução está incompleta. Assim será prioridade terminar esta tradução, o que agora vai incluir itens do blog.

O Pomodoros será antes de tudo um site global em inglês, agradeço ao público brasileiro, mas por uma questão de crescimento o idioma oficial do Pomodoros já é inglês, com suporte inicialmente a português do Brasil e futuramente outros idiomas, já que o código-fonte é aberto e permite que colaboradores do mundo tudo contribuam com as traduções, de forma muito organizada.

Ainda vou escrever muitos posts em português e pessoalmente manter a tradução do Brasil.

Finalmente a Integração Entre Dispositivos com Sincronização Automática

Agora, se você alterar os dados da tarefa ou o volume do seu Pomodoros no computador, o mesmo irá atualizar automaticamente no celular. Isso é ótimo porque assim quem usa o computador como eu pode alterar as informações na tela e usar o celular apenas para cronometrar, tocando a tela para iniciar e parar somente, evitando digitar no teclado virtual do Android a cada mudança na tarefa.

Ou seja, você abre o celular para cronometrar e insere as informações da tarefa pelo computador, de forma mais confortável e as mudanças são recebidas pelo celular, que cronometra assim seu tempo.

Organização em Alto Nível, Finalização do Plugin F5 Sites Footer Bar

Fiquei meses esperando para fazer o fechamento do conteúdo dos sites, desde novembro de 2016 quando comecei o projeto da FNetwork, integrando todos os sites e serviços em um único banco de dados.

Assim, enquanto organizava o banco de dados, o conteúdo (texto e imagens que o usuário vê quando navega) estava quase sempre em estágio de “rascunho” ou “revisão pendente”, muitos textos e links jogados, pois, afinal, a rede de startups FNetwork não estava pronta, a sua tecnologia central estava sendo desenvolvida para atender uma necessidade de maior compartilhamento de códigos, informações e processos.

Está foi uma tarefa que surgiu “do nada”, com o nome fechamento, pois representava o estágio de conclusão dos esforços. Não teve definição do tipo fazer x e y, até o momento que estava escrevendo este post fiz muitas coisas pequenas relacionadas com este fechamento.

Agora, observando os resultados na navegabilidade do site e simulando usuários recém-chegados buscando informações, parece que a navegação ficou muito mais organizada principalmente pelo nosso exclusivo plugin F5 Sites Footer Bar, presente em todas as nossas startups. Com várias funcionalidades interessantes, como descriação em inglês e português de cada startup, quando o mouse passa em cima, abrindo uma janelinha.

Além de um sistema de cores, os links são brancos e ficam aceso, da cor azul, apenas o link correspondente a startup que o usuário está no momento. Quando está no Focalizador.com.br por exemplo, no rodapé o link Focalizador fica azul, indicando que o usuário está navegando numa startup F5 Sites.

De certa forma não houve um “resultado prático”, mas terminar esta tarefa significa um esforço continunado em organizar a F5 Sites, e consequentemente toda a rede FNetwork. Como dizia um professor em analogia, é como “o vento que levou a neblina da montanha e desnudou-a, trazendo definição e clareza na perspectiva”.

O objetivo sempre é o mesmo, aumentar o valor de cada pequeno projeto, para que a somas das iniciativas, na perspectiva de valuation de um novo investidor, represente uma oportunidade única e inegável de retorno, compartilhando mais rapidamente perspectivas de crescimentos rápido, para a injeção precisa de capital, com controle e objetivos claros, visando resultados que irão balizar sempre um maior crescimento, até se atingir as últimas séries de investimento.

Nova Ferramenta Para Controle de Volume Com Interface Amigável

Quando vou fazer novas ferramentas e funções de código, se preciso desenvolver uma parte nova da interface, procuro sempre por seguir minha intuição no sentido de tentar prover a melhor usabilidade possível entre dispositivos e níveis de usuários. Fazer uma interface com elementos que o usuário já é habituado a usar, como barras deslizantes, facilita o aprendizado do programa e permitindo ao usuário desfrutar de maior potencial do sistema.

Então quando a tarefa de ligar/desligar o som do sistema se tornou prioridade, não optei pelo caminho fácil de fazer um simples input do tipo checkbox, onde bastaria deixar selecionado para dar mute e des-selecionar para retornar o áudio. Não deixa de ser uma excelente e compacta solução, porém optei por utilizar uma barra deslizante, assim o usuário pode escolher qualquer valor entre 0 e 100 para o volume de forma amigável, para desligar basta posicionar a barra no 0, não é necessário checkbox. O trabalho de uma hora levaria então um dia, mas por dificuldade adicionais.

Tudo poderia ser mais fácil se eu já tivesse implementado uma barra destas anteriormente, precisei me atualizar muito sobre as tecnologias disponíveis, até mesmo seu nome em inglês eu desconhecia, range bar. Descobri também que o HTML5 possui suporte nativo para isto e achei uma biblioteca JavaScript RangeSlider.js para renderizar o elemento em navegadores antigos e sem suporte, como IE8.

E lógico que tudo poderia terminar por aqui, mas queria levar o teste ao extremo e descobri vários serviços pagos na internet para simular navegadores antigos, dispondo de orçamento zero e com algum tempo para investir, pude atualizar meu wine e winetricks, instalando a versão ubuntu/linux nativa do IE8. Porém este teste ficou para um segundo momento, já que é “impossível” debugar JavaScript neste navegador e o resultado é que o Pomodoros não funciona (ainda) em IE8, tentei instalar o debugbar mas acho que só pelo VirtualBox ou dual boot, portanto outro momento.

Além disto utilizei ícones bootstrap glyphicons e assim dispensei o uso de rótulos para som desligado e som no máximo volume, as indicações são feitas pelos ícones, que de “bater o olho” já são entendidos rapidamente pelo usuário. Com o sistema de grid do bootstrap inseri uma linha com configuração 1-10-1 para um ícone em cada ponta da barra. Assim o usuário enxerga ícone (som desligado) – barra – ícone (som ligado).

Uma dificuldade adicional era salvar o estado desta opção, cada usuário quer regular a altura do som de forma personalizada, assim (obviamente) se eu abaixar o som do meu aplicativo, isto não pode afetar a configuração dos outros usuários. A opção foi adotar rapidamente o update_user_meta() e get_user_meta(), com o current_user_id(), funções nativas do WordPress, embarcando o envio e recebimento destas informações em uma função já existente, que armazena os dados da interface no banco de dados via AJAX, a cada 15 segundos.

Por último os testes no Android 4.3 estavam me desanimando, não só não funcionou inicialmente, como quebrou o aplicativo que já estava no ar. Em um ambiente de testes isso é necessário, mas gostaria de terminar esta tarefa com tudo funcionando perfeitamente, assim precisei voltar para a prancheta e refazer vários trechos do código para não ter nenhum problema, um stress extra.

Pretendo fazer um vídeo ensinando a debugar JavaScript no Chrome do Android, para isto precisa-se conectar por adb (talvez seja necessário root), um emulador de terminal no celular e configurar o serviço para conexão remota. No computador, após instar o abd (apt-get install adb), conecta-se de forma remota e abre o Chrome, tanto no celular quanto no computador, em ferramentas de desenvolvedor você poderã abrir a aba do celular no computador e sua vida vai ficar muito mais fácil (após tanta dificuldade rs).

Este momento de testes ficou registrado como a imagem de miniatura deste post, momento onde consegui enfim terminar os testes e lançar no ar esta nova ferramenta de configuração do volume, muitas dificuldades para a biblioteca Artyom.js, já que ainda não 100% suportada e tanto no Firefox, quanto no Chrome apresenta comportamentos diferentes, algumas coisas funcionando melhor no segundo, mas por incrível que pareça o melhor desempenho para fala e audição é o Android.

Não sei se para o público no geral era prioritário configurar o volume, mas para mim, desenvolvedor, precisava urgente de uma forma de testar rapidamente o sistema sem as constantes falas e sons, que, se repetidos a exaustão podem ser mais torturantes do que uma torneira pingando gotas na cabeça de um refém.

Mais um Pequeno Bug Corrigido do Sistema Pomodoros/Focalizador

Um pequeno bug vinha me incomodando desde o lançamento do Pomodoros, que era em alguns casos o sistema continuava funcionando mesmo “quebrado”, em termos técnicos, quando o cookie que mantém o usuário logado no site era deletado o sistema não redirecionava para o usuário refazer o login.

Uma situação típica era do usuário que entrava no sistema, mas por algum motivo perdia a conexão, seja pela validade do cookie, seja por questões de segurança, entre outras situações que podem exigir que o usuário refaça o login, e o mesmo “bugava”, o usuário não percebia mas estava perdendo seu progresso, pois não estava pronto para este tipo de situação.

Assim, se o usuário continuasse usando o sistema “quebrado”, pomodoros sem nomes e autores continuavam sendo publicado, em alguns casos resultavam em vários pomodoros “perdidos”. Como sou administrador do sistema podia entrar pelo back-end e corrigir, mas os usuários via de regra perdiam parte do progresso, viam seus suados pomodoros atribuídos a ninguém, como se algum usuário sem conta tivesse feito.

Então, após muitos anos, tive tempo para corrigir esse bug, já que agora, após alguns meses no ar, além de mim, tenho uma outra usuária retornando a utilizar fortemente o pomodoros, assim preciso garantir desde já um uso suave e sem problemas. Agora, se o usuário perder o cookie, via AJAX o sistema recebe uma mensagem e então redireciona o usuário para que o mesmo possa logar de novo.

Login Com Facebook e Google: Rede Fnetwork Conectada

Em 2016 iniciei o projeto da FNetwork, foi um retrocesso em muitos termos, o primeiro passo foi unificar todos os usuários de vários projetos num banco de dados único. Para isso todos os sites foram desativados por meses, após conseguir essa unificação tinha disponível somente o formulário padrão de registro do wordpress em cada projeto.

Os usuários do Pomodoros já utilizam de forma “pesada” a integração com o Facebook, sempre soube da importância de se deixar pronto esta integração novamente, mas de que adiantaria apenas um site conectado com o Facebook? Um usuário que logar com o Facebook no Pomodoros terá acesso a todos os nossos serviços, atuais e futuros.

Parte Técnica: Plugin wp-social-login (fork)

Fazemos aqui uma indicação deste excelente plugin para fazer login com redes sociais, nós avaliamos como 5 estrelas no diretório do WordPress. Existe serviços de terceiros que são oferecidos para isso, integração de  sites com redes sociais, com altos custos, basta você pesquisar no Google para perceber que este é um novo filão.

Mas os criadores deste plugin se mantiveram “raíz”, permitindo aos próprios usuários configurarem seus domínios para se conectarem diretamente com os servidores das redes sociais. Ao final, quando tudo corretamente configurado, o usuário clica em um botão e se torna um membro registrado do site.

Como utilizamos uma configuração especial com uso intenso da pasta mu-plugins, já que plugins que são colocados nesta pasta são automaticamente ativados/desativados pelo WordPress. Assim não precisamos entrar no painel, porém, a maioria dos plugins exige uma configuração inicial mínima, por isso fazemos forks de vários plugins, adicionando scripts que se auto-configuram para cada domínio.

Graças a API do Google e Facebook ficou muito fácil configurar vários domínios, já que o mesmo aplicativo permite diversas URLs de retorno. Assim agora temos configurado para nossos domínios o login do Facebook e Google. Com isto esperamos aumentar (e muito) (e muito rápido) nossa base de usuários.