F5 Sites hospeda agora meu blog sobre Interface de Usuário e Experiência dos Usuários (UI/UX)
Acessar franciscomatelli.com.br
Category: www.franciscomat.com
DBS: Database Sync, Um Script Completo Para Sincronizar Bandos WordPress
Um script mágico para sincronizar os bancos de dados remoto e local, subindo dados como posts e taxonomiais e recebendo do servidor remoto comentários e usuários.
Verifique diretamente o arquivo em tempo real:
https://github.com/franciscof5/bash-server-deployer-2020/blob/master/bsg-scripts/dbs.sh
Aparência de sites pessoais aprimorada
Um dos maiores desafios que emplaquei para uma minha rede FNetwork de projetos é criar interfaces consistentes, antes mesmo de saber o que é isso.
Comecei alguns meses criando o design guidelines, de forma bem simples, para a F5 sites, intencionava criar um guia para cada subprojeto. Porém seria muito custoso então surgiu a ideia e a oportunidade de unificar a aparência de todos os projetos.
Assim, a primeira coisa, foi adoção de uma fonte comum para todas as logomarcas, mais um padrão de cores e recomendações gerais.
Dentro do esquema do WordPress eu tenho meu site principal Francisco Mat ponto com, compartilhado na rede, mas o meu portifólio, aqui também é um site do WordPress, é uma instalação isolada. Para criar uma interface única, para usuário não perceber que estava navegando em dois sites diferentes, criei um tema único e apliquei nos dois projetos, assim, a sensação é de estar sempre no mesmo site.
Novo build do docker no Linode seguro
Infelizmente a internet continua sendo um local inóspito, servidores podem ser facilmente atacados por máquinas mal-configuradas ou scripts maliciosos, para saber o IP de um site, basta para isso uma consulta reversa pelo nome do domínio para encontrar o IP da máquina.
Com isso bote podem começar a escanear arquitetura do sistema, no caso de sistemas fechados com senha rapidamente pode ser começar o ataque brutal no painel, com um algoritmo programado para tentar milhares de usuários e senhas diferentes até obter êxito no login.
Não tenho tanta experiência com docker e teve alguma dificuldade para identificar a origem dos ataques, pois o consumo excessivo dos os recursos do sistema e dificultavam muito a execução de comandos por SSH.
Precisei aprender a visualizar o log dentro do próprio docker para assim identificar o IP, ou a faixa de IP, da máquina que estava atacando os meus belos e inocentes serviços de publicação de conteúdo e anúncios do bem, dos meus serviços que prestam com tanto amor um serviço de hospedagem para os meus projetos e clientes.
Foi então usado um simples e velho recurso de bloquear o acesso da faixa de IP por htaccess. Em relação ao painel do WordPress, como pode se verificar, nesse post sobre a segurança do meu servidor, o acesso já é bloqueado de fora da rede interna. com isso o risco de complicações é quase zero e após esse bloqueio do ataque o serviço voltou a sua normalidade.
Data do evento: 19 de maio de 2020
Atualização: Setembro de 2020, confirmado meses de estabilidade e fix com sucesso.
Plugin F5 Sites Bar Atualizado
Há alguns anos lançamos o plugin F5 Sites Bar para compartilhar em toda a rede de sites e blogs Fnetwork uma barra, no topo de cada site, todos os principais projetos da F5 Sites.
Inspirado em um sites como o UOL e ESPN, onde seus blogs, subsites e até mesmo sistema de terceiros hospedados em seus servidores, apresentam uma barra acima com o link para o portal principal e outros links para os sistemas top nível.
Assim, os visitantes conseguem entender que estão dentro de uma rede de sites, conectados e que compartilham informações. Além de aumentar o link building e destacar a marca como provedora de serviços. No caso da F5 Sites somos uma empresa de hospedagem, tratando os projetos internos como projetos de clientes.
Update: Setembro de 2020, foi removido o bootstrap (3 e 4) da barra devido a vários conflitos com temas e sistemas, é necessário um grande esforço para normalização, por isso a barra só conta com o logo da F5 Sites no topo e a localização flutuando a direita.
Maio de 2020: Agora as informações estão muito mais organizadas, pois a atualização contou com a instalação do Bootstrap 4, trazendo uma grande melhoria na aparência e principalmente responsividade, já que a barra se adapta para tos os dispositivos e o menu colapsa (encolhe) e expande, e se ajusta em qualquer tamanho de tela.
Um problema para sua implementação imediata é que alguns projetos utilizam o Bootstrap 3, então houve uma quebra destes e está sendo realizado um grande esforço para atualização de toda a nossa base de projetos.
Milestone de Abril: Organização Para Crise da Pandemia
Desde 2010 utilizo o software online RTM para gestão de notas e tarefas, ainda estou finalizando meu próprio sistema e como tenho todo esse histórico lá de 10 anos é difícil desvincular.
Então durante todo este tempo as tarefas e projetos aconteceram na vida real e por lá foi administrado, então existe um histórico que reflete diversos momentos dos meus projetos e consultorias.
Agora vivemos um momento único, pandemia de coronavírus, que sem dúvida impactou a minha vida pessoal, me trazendo para o isolamento e quarentena. A organização de todas as tarefas se tornou possível e viável, já que perdi um cliente e fiquei com bastante tempo livre.
Organização apontou uma nova direção: priorizar pelos próximos 3 anos a prestação de serviços e criar ferramentas personalizadas para aumentar o valor percebido pelo cliente e transformar estas iniciativas em possíveis produtos.
Bloqueado Painel (wp-admin) em Produção via .htaccess
Por uma questão de segurança e manutenção de sistema de backup automatizado, foi bloqueado o acesso ao painel do WordPress, de todos os nossos sites, em produção.
É uma questão de segurança pois evita o ataque do tipo força bruta ou outros, protegendo com mais uma camada as informações do nosso banco.
Em relação à manutenção de backup e do banco de dados em ambiente de produção, é para evitar a publicação de posts e mídias em produção sem o seu correspondente no ambiente de desenvolvimento e QA.
Utilizamos o nosso plugin script BSD e WPSQL para esta automação, assim recomendamos que você conheça nossas soluções de código aberto e tente de adotá-las em seus projetos para ter um maior controle da automação.
Milestone de Fevereiro: Certificação SSL Renovada Após Rebuild
Posso dizer que ainda não dominei o método de certificação SSL, continuo tendo muita dificuldade em algumas etapas, principalmente a renovação automática e a configuração de virtual hosts do Apache.
Após o rebuild do meu servidor principal (veja post com mais detalhes) obtive sucesso nas novas configurações para renovação dos certificados utilizando certbot. Assim, foi renovado os nossos certificados, e muitos usuários que haviam tido problemas em acessar todos os nossos sites, passaram a conseguir acessá-los novamente.
Um bug de configuração foi identificado no servidor antigo, pois havia mais de um diretório com configurações do Apache SSL e virtual hosts, fazendo com que o servidor não conseguisse entregar os arquivos certos para navegador e a certificadora.
Centralizamos todas as configurações do Apache e instalamos o servidor principal com docker, fizemos o rebuild e a nova instalação do certbot para poder resolver esse problema e assim permitir a navegação segura para os nossos usuários novamente. Sei que ainda terei alguns problemas pela frente, como a renovação automática, então, por hora a navegação está garantida e o esforço de rebuild e recertificação valeu a pena.
Meu site pessoal agora centraliza todos meus blogs
Como administro diversos blogs, tinha muita dificuldade em oferecer um espaço único para os leitores de diversas fontes.
Após pensar um pouco, resolvi utilizar a homepage do meu site pessoal para listar, utilizando o plugin RSSImport, os posts mais recentes de cada blog aonde eu publico.
Agora home está carregada de informações referentes aos meus trabalhos mais recentes, optei por apenas colocar o endereço do blog e listando abaixo os últimos posts, sem identificar a data da publicação ou mais detalhes.
Na home, acima dos blogs, uma foto minha. No meu site continua com meu currículo aberto e o meu portfólio detalhado, com trabalhos e estatísticas de projetos, além de um menu para contato diretamente comigo.
Novo Layout Porfólio
Foi atualizado o layout do meu portfólio de projetos, ele já era bastante moderno, intuitivo e fácil de navegar. Mas essa atualização traz mais destaque para as imagens do quê o excesso de texto que continha embaixo delas.
Ah sim agora temos uma lista de imagens usando um plugin chamado posts_grid, o que facilita para o usuário encontrar trabalhos que sejam do seu interesse assim fica o convite para visitar o meu portfólio e conhecer os meus trabalhos que estão listados desde os primeiros trabalhos de 2002 qual tem vaga lembrança muitos poucos arquivos recuperados até os trabalhos mais recentes e muito importantes para minha carreira.
Milestone de Março: Rebuild do Servidor de Produção
Foi feita a reconstrução (rebuild) do nosso servidor de produção, uma operação bastante delicada e arriscada. Após muito tempo dependendo de um esquema antigo e repleto de manutenções feitas sem planejamento, aproveitamos a janela de oportunidade para migrar totalmente nossa operação para o docker.
Assim, comecei a reconstrução com o servidor local de desenvolvimento, tarefa que levou meses, para só depois atuar em produção. Inicialmente, para não cair o serviço, havia planejado fazer um servidor em paralelo com todas as aplicações, porém, durante o processo, houve um comprometimento crucial dos serviços no servidor em produção, pela expiração dos certificados SSL.
Assim, seria um desperdício de tempo trabalhar em dois servidores em produção e abandonei o plano inicial, pois o serviço já havia caído. Então, destruí o antigo servidor em produção e todo o esquema que estava corrompido, para dar lugar ao novo esquema baseado em docker linux WordPress, Apache e MySQL.
Com a reconstrução terminei a implantação de uma nova esteira de desenvolvimento e deploy automatizado. Com isso voltei a ter mais controle sobre o processo de desenvolvimento e entrega.
Acredito em um futuro mais automatizado e mais “simples” para fazer entregas, sabemos que existem algumas dificuldades com a estrutura que foi desenvolvida, como versionamento de todos os sistemas em conjunto. Trabalhamos com um repositório principal e diversos submódulos, técnica a qual ainda não domino completamente.
O espaço em disco foi economizado e os processos de utilização de CPU e memória obtiveram ganho de desempenho. Assim em 2020 temos um novo servidor em produção baseado em Ubuntu e não mais em CentOS, mais uma dificuldade que foi superada.
Milestone de Janeiro: BSD – Bash Shell Deployer
Script que eu criei para fazer o deploy de meus projetos WordPress em ambiente local e produção. Está disponível no meu perfil do github:
Com este repositório você pode configurar rapidamente o seu docker, seus virtuais hosts do apache e fazer o deploy do seu projeto WordPress ou outros.
Verifique também este item no meu portfólio de projetos:
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.