Desenvolvimento do site + tutoriais de programação usados

Criando um site WordPress “artesanal”

Neste trabalho, eu me desafiei a tentar criar um website contemporâneo porém com o mínimo de plugins ou infraestruturas externas, tentando customizar layouts e interações só usando HTML, CSS e JavaScript ‘vanilla’(ou puro). Por isso optei por criar no WordPress usando somente alguns plugins necessários, e começando a partir de um template extremamente cru e simples chamado BlankSlate (imagem abaixo). Enquanto esse processo ainda envolve muitos fatores interdependentes entre si e acaba sendo inevitável utilizar determinados plugins especialmente para resolver questões de back-end (que não eram o foco do projeto), acredito que a proposta se manteve sólida, com a maior parte do trabalho feito no site sendo customização em CSS e algumas interações mais rebuscadas em JavaScript.

Como pode-se notar, o tema BlankSlate não tem praticamente nenhuma estilização, inclusive tendo semelhanças formais com sites do estilo “Prof Dr.” ou dos primórdios da Web 1.0, em 1994 ou 1995. O processo de criação no CSS foi um tanto desordenado e aconteceu enquanto eu ainda estava criando o design do site utilizando o Figma. Desse modo, o desenvolvimento CSS acabou informando o design criado em software e vice-versa.

Design OPS: micro-plugins

De modo a facilitar o processo de inserção de conteúdo no site, eu criei alguns arquivos HTML com scripts para automatizar, por exemplo, a criação de figuras e legendas acessíveis seguindo diretrizes do W3C e também conseguir copiar os textos dos artigos que escrevi diretamente do Google Docs e transformá-los em códigos de HTML ‘limpos’. Esses arquivos estão disponíveis no meu repositório deste Trabalho no GitHub.

Vídeo ‘making of’ do desenvolvimento/design

A seguir, um vídeo mostra brevemente como se deu o desenvolvimento do site até chegarmos no resultado final.

Tutoriais: sim, designers são capazes de programar!

A seguir, compilei algumas referências que me ajudaram a chegar nesse resultado final. Enquanto elas não são um passo a passo completo de como customizar um tema ‘do zero’, acredito que o compartilhamento dessas referências tem o potencial de desmistificar a programação no campo do design:

Link para a playlist