F5 Sites Design Guidelines

In our first attempt to uniform all our projects designs, making a similar look, like when you are in a Google, Amazon, Microsoft or Apple product you kind of know, even if you don’t really know why you know, you pretty sure that the sense and fell makes you fell like you are in “home”. That’s because they have a consistent design with some rules that guide all they products.

So F5 Sites started developing our first design guidelines, they started simple, but we think the rules will become more fit-able and better with time passes, so our first design guidelines are:

  • Top bar over all products
  • Logo font: Lobster
  • Color:
    • F5 blue: #03659c
    • F5 light blue: #549ed1
    • Ubuntu orange: #FF5919
    • Darkest gray: #3F3F3F
    • Dark gray: #888888
    • Light gray: #EEEEEE
    • Dark green: #398439
    • Light green: #449d44
    • Gold: #E2D693
  • Custom posts and products thumbnails

For now that is all, in future we are predicting paddings and margins for some elements. They will be applied whenever I can, for now they just exists and are being implemented without a deadline, but nothing new will be developed without following this strict.

F5 Sites Diretrizes de Design

Em nossa primeira tentativa de uniformizar o designs de todos nossos projetos, fazendo os terem uma aparência semelhante, como quando você está em um produto Google, Amazon, Microsoft ou Apple, você meio que sabe, mesmo que você não saiba exatamente porque você sabe, você meio que sente como se estivesse em “casa”. Isso porque eles têm um design consistente com algumas regras que orientam todos os produtos.

Então, a F5 Sites começou a desenvolver nossas primeiras diretrizes de design, elas começaram de forma simples, mas achamos que as regras se tornarão mais ajustáveis e melhores com o passar do tempo, então nossas primeiras diretrizes de design são:

  • Barra no topo de todos os produtos
  • Fonte para logo: Lobster
  • Cores:
    • F5 azul: #03659c
    • F5 azul claro: #549ed1
    • Ubuntu laranja: #FF5919
    • Cinza escuro: #3F3F3F
    • Cinza médio: #888888
    • Cinza claro: #EEEEEE
    • Verde escuro: #398439
    • Verde claro: #449d44
    • Dourado: #E2D693
  • Imagens customizadas para posts e produtos

Por enquanto isso é tudo, no futuro estamos prevendo paddings e margens para alguns elementos. Estas regras serão aplicados em produtos antigos sempre que eu puder, pois agora elas apenas existem e estão sendo implementados sem um prazo, mas nada de novo será desenvolvido sem seguir esse rigor.

Plugin Atualizado: F5 Sites Bar

Em cada site da Fnetwork você pode ver uma barra na parte inferior com links para os principais projetos, e, conforme a rede cresce, novos links são atualizados. Eu nunca tenho tempo para trabalhar com calma e com essa barra não era diferente.

A ideia chegou para dar consistência à rede e fazer com que os usuários navegassem melhor entre todos os projetos. Além disto, os links entre si também podem ajudar a obter uma melhor posição nos resultados de mecanismos de pesquisa.

Uma vantagem é que podemos saber todas as visitas à rede, verificando o número de vezes que a barra é exibida. E também, no canto direito, mostramos a localização atual do usuário.

Mas o design e a aparência não eram bons, e até a posição na parte inferior faz com que muitos usuários não a vejam. Então, eu estou quase terminando o novo design, a barra vai para o topo, o que fez o nome original mudar, agora é só o F5 Sites Bar. O design também mudou um pouco, muitas melhorias foram feitas e estamos esperando outro plugin da rede para ficar pronto, F5 Sites Smart Language Filter.

Quando esses dois plugins estiverem prontos, a Fnetwork alcançará um novo nível. Mas vai levar um tempo, muitas mudanças estão sendo feitas em segundo plano, o foco é apenas um: obter novos clientes.

Plugin Updated: F5 Sites Bar

In every Fnetwork site you can see a bar in the bottom, it has links to the main projects, and as the network grown, new links was updated. I never had comfortable time to work and with that bar was not different.

The idea arrived to get consistency to network, and make users navigate more well between all projects. Besides that, the linkage also could help get better position in search result engines.

One advantage is that we can check the whole network visits by checking the number of times that plugin bar displays. And also, in the right corner we show current user location.

But the design and appearance was not good, and even the position at the bottom make many users not saw it. So I am almost finishing the new design, the bar will go to the top, what made the original name change, now is only F5 Sites Bar. The design also changed a bit, many improvements was made and we are waiting another plugin of the network to be ready, F5 Sites Smart Language Filter.

When these twos plugins be ready, the Fnetwork will get to a new level. But it will take a time, many changes is being made in the background, the focus will be just one: get new costumers.

F5 Sites Está Procurando Novos Clientes na Cidade de São Paulo/SP

Desde o nosso plano de 2016, eu mudei o foco do F5 Sites para uma posição mais global, fazendo esforços para sair do Brasil e ir para um país como os EUA. O caminho que pensei foi simples, comecei por traduzir todo o conteúdo do site (posts, menus) para o inglês, fazer uma seção EUA no site e depois entregar conteúdo especialmente feito para esse público.

Para o banner do site eu escolhi imagens como a Califórnia, o engarrafamento chinês, tudo era mais global e estava pronto para receber clientes de qualquer lugar do mundo.

Mas a internacionalização nunca acabou, a F5 Sites acabou de ser traduzida e nunca terminou todo o processo. Não é apenas traduzir, tornar o site bonito, alterar imagens e esperar que novos clientes e leads entrem em contato. Era necessário chegar aos clientes, começar a conversa, fazer propostas de trabalho, e é aí que as coisas ficavam difíceis.

Eu pessoalmente acho que posso fazer dezenas de leads e alcançar novos clientes em uma conversa cara a cara, mesmo sabendo que é possível e usual conseguir clientes apenas via internet, é mais fácil para mim ter contato em reuniões, eventos, palestras , workshops, fazer visitas ativas e explorar minha rede pessoal para alcançar novos clientes. Então, enquanto eu ainda estou no Brasil, meu plano tem que mudar, preciso alocar esforços para conseguir novos clientes aqui.

Se você estiver em São Paulo, SP, entre em contato conosco agora mesmo para agendar uma reunião.

F5 Sites Started a Renovation to Get New Clients in Brazil

Since our 2016 plan, I changed F5 Sites focus to a more global position, making efforts to exit Brazil and go to a country like USA. The path I figured out to reach was simple, I started by translate all content of the site (posts, menus) to English, make a USA section in the site and then delivered content especially made to that target.

For site banner I choosed images like California, Chinese traffic jam, everything was more global and ready to get clients from anywhere in the World.

But the internationalization never ended-up, F5 Sites was just translated and never finished the whole process. It is not just translate, make the site beautiful, change images and wait for new lead and costumers to contact. It was necessary to get to the clients, to start conversation, make jobs proposal, and that’s when things got difficulty.

I personally think I can make dozen of leads and reach new clients in a face-to-face talk, even knowing that is possible and usual to get clients only via internet, it is easier for me to get touch in meetings, events, lectures, workshops, make active visits and explore my personal network to reach new clients. So, while I am still in Brazil, my plan has to shift, need to allocate efforts to get new clients here.

If you are in Sao Paulo, SP, contact us right now to schedule a meeting.

New Plugin in Development: F5 Sites Smart Language Filter

After tons of tests and experiences, with the most famous and updated language plugins for WordPress, I started one plugin for F5 Sites e Fnetwork. Based in a simple but efficient code I made for a project theme (Sistema Focalizador Javascript).All I had to do is to use tags in posts, like:

  • lang-en: english
  • lang-pt: portugues
  • lang-fr: french
  • lang-zn: chinese
  • And so on…

The “Smart” term in the name is because it use an algorythym based on WooCommerce Geocode and HTTP function to determine users location and provice the probably most correct language. So we will close our domains that start with br, like br.f5sites.com and br.franciscomat.com, because whenever location you are, the main domain will provide you content in your language.

The plugin will be present in all network, it will be attached to another plugin we use F5 Sites Footer Bar, so all sites will have translate options. The users will also have the option to change language anytime, and if it come in a link that does not have the language users spoke, a warn will be attached to change language anytime.

The plugin is under development and has no deadline to be finished, it is an effort I making to achieve best results in marketing and getting new clients.

Novo Plugin em Desenvolvimento: F5 Sites Smart Language Filter

Depois de toneladas de testes e experiências, com os plugins de idiomas mais famosos e atualizados para o WordPress, eu iniciei um plugin para F5 Sites e Fnetwork. Baseado em um código simples mas eficiente que fiz para um tema de projeto (Sistema Focalizador Javascript). Tudo o que eu tive que fazer é usar tags em posts, como:

  • lang-en: portugues
  • lang-pt: portugues
  • lang-fr: francês
  • lang-zn: chinês
  • E assim por diante…

O termo “inteligente” no nome é porque ele usa um algoritmo baseado no WooCommerce Geocode e na função HTTP para determinar a localização dos usuários e fornecer a linguagem provavelmente mais correta. Então, vamos fechar nossos domínios que começam com br, como br.f5sites.com e br.franciscomat.com, porque sempre que você estiver em uma localização, o domínio principal fornecerá conteúdo para você em seu idioma.

O plugin estará presente em toda a rede, ele será anexado a outro plugin que usamos F5 Sites Footer Bar, então todos os sites terão opções de tradução. Os usuários também terão a opção de alterar o idioma a qualquer momento, e se ele aparecer em um link que não tenha o idioma que os usuários falaram, um aviso será anexado para alterar o idioma a qualquer momento.

O plugin está em desenvolvimento e não tem prazo para ser finalizado, é um esforço que faço para alcançar melhores resultados em marketing e conquistar novos clientes.

Docker: Estamos migrando nossos serviços para o novo paradigma de DevOps

Na fronteira das mudanças tecnológicas atuais, vimos o Docker como um novo paradigma de otimização. Por que esperamos tanto tempo para adotá-lo? A resposta é simples, só precisamos disso agora, estávamos em um processo de desenvolvimento muito longo e estável, sem a necessidade de migrar o servidor ou alterar o processo de desenvolvimento.

Mas recentemente chegamos a um ponto para fazer um servidor intermediário, um tipo de homolog / backup de produção, então vimos que a tarefa seria muito demorada, faria toda configuração, clone de git repos, instalação de serviços como Apache, MySQL, WordPress. Então, eu tinha duas opções, ir pasta a pasta e verificar se tudo estava bem, ou formatar e instalar o docker em um ambiente fresco linux / docker.

Eu escolhi a segunda e mais desafiadora opção, então agora estou trabalhando na migração completa de todos os nossos projetos, sites e operações para a tecnologia Docker. Depois disso, poderíamos instanciar nosso servidor homolog executando simplesmente um comando docker para configurar tudo e rodar.

Docker não é difícil de entender, mas você precisa ser muito experiente para entender todo seu poder, e não é a melhor solução para todos os cenários, mas depois que você começar a usá-lo será muito difícil voltar atrás.

Docker: We Are Migration Our Services to New DevOps Paradigm

In the upfront of currently technological changes we saw Docker as a new optimization paradigm. Why we waited so long to adopt it? The answer is simple, we only need it now, we were in a very long stable development process, without needing to migrate server or change process development.

But recently we reached a point to make an intermediate server, a kind of homolog/backup of production, then we saw that task would be huge time consuming, make all configuration, clone of git repos, installation of services like apache, myql, wordpress, etc. So I had two options, go folder to folder and make sure everything was alright, or format and install docker in a fresh linux /docker environment.

I choosed the second and most challenge option, so now I am working in the complete migration of all our projects, sites and operations to Docker technology. After that, we could instantiate our homolog server by simple running a docker command to set everything up and running.

Docker is not hard to understand, but you need to be very experienced to understand all its power, and it is not the best solution for all scenarios, but after you start using it, will be very difficulty to step back.