Início do site

Retornando ao Rio de Janeiro

Conhecimento adquirido

Quando trabalhei no comércio da minha família como gerente aprendi a tomar decisões baseadas em informações contábeis, financeiras e relatos de clientes e funcionários, aprendi a fazer meus primeiros gráficos para argumentar minhas propostas com o meu pai e tivemos muito sucesso neste comércio, mas o excell não parecia ser viável a longo prazo.
Em minha faculdade tive experiência em Delphi (cliente/servidor), base de dados e SQL, na época a web estava se iniciando.
Quando trabalhei na UFF/Centro de Niterói adquiri experiência em PL/SQL da Oracle e cheguei a comprar na época alguns livros de data warehouse mas ainda não tinha tido a oportunidade de trabalhar em um DW.

Motivação para o Site

Fui contratado como assessor técnico de gabinete no Tribunal de Contas do Estado do Acre em 2008 e meu estudo passou a ser relativo ao setor público e analisar e tramitar processos, mas após alguns anos, com o aumento de demanda de processos no meu gabinete precisei automatizar algumas coisas, o que me fez retomar os estudos em programação, primeiramente pensei em um executável instalado em meu pc.

Opitei pela linguagem Python por sua simplicidade e por ser Softwer Livre, criei executáveis que aceleraram a elaboração de Relatório Resumido da Execução Orçamentária (RREO), Relatório de Gestão Fiscal (RGF) e Aposentadorias.
Contudo estes executáveis não poderiam ser compartilhados na rede ou em pendrive por medida de segurança conforme a orientação do setor de TI.
Utilizava meu executável em meu computador com a devida autorização da TI do TCE/AC e passei a estudar programação web o que me levou ao site Área de Trampo para então poder compartilhar as ferramentas front-end com outros assessores.

No site utilizo WordPress, HTML, JavaScript, Css e JSON, algumas informações do usuário são salvas em LocalHost (cliente).
Todas as minhas ferramentas rodam como front-End, garantindo que o processamento se dá no computador do cliente, informações digitadas nestas ferramentas não navegam pela internet, dando um ótimo nível de segurança ao cliente.
Durante o processo de desenvolvimento experimentei Flask, FastHTML, React com JavaScript e com TypeScript mas me rendi a proposta do HostGator no WordPress pelo custo benefício e após conseguir adaptar a maioria das minhas ferramentas ao WordPress, aquelas que não pude adapta-las ao site mantive em executáveis python em meu pc.

Ferramentas do site

Por dois anos trabalhei no CPD do TCE/AC e aprendi expressão regular de forma autodidata para padronização de texto no Diário Eletrônico de Contas do TCE/AC, com este novo conhecimento comecei a desenvolver o Editor de Texto e o Relatório Dinâmico.

  • O Editor de Texto me permitiu extrair texto de imagens e padronizar textos com a expressão regular.
  • O Relatório Dinâmico foi inspirado em “Partes Rápidas” do Word (Office), mas nesta ferramenta você cria e nomeia seus campos podendo inclusive organiza-los em grupos e salvar o seu relatório localmente como JSON, possibilitando compartilhamento com a equipe de trabalho.

Ferramentas complementares:

  • No Kanban você pode criar as colunas que deseja
  • O Caderno de anotações para lembrarmos onde paramos
  • O Mapa Mental para organizarmos informações de forma hierarquica
  • A Engenharia de Prompt para fazer comandos mais inteligentes e extruturados a uma IA.
  • JSTest criei baseado no PyTest, esta ferramenta valida respostas de uma função javascrip

Adicionei ao site links que me ajudaram:

  • Em Online você encontra pagina para criar fórmulas, expressão regular, python, prolog, uml e diagramas
  • Em Informação você encontra ainda os Link’s recomendados
  • Em Conversões você encontra ylovepdf

Reorganizando as postagens

Em Menu > Roteiro de Estudo criei roteiros com indice hierarquico.

Divulgando a minha analise de dados

No meu tempo livre me dediquei a fazer todos os cursos de informática que queria de forma online, o que se acentuou na época da pandemia de COVID.
Rapidamente tive nescessidade de escrever postagens sobre o que estava estudando, o meu interesse de estudo me levou a mineração de dados, analise de dados com pandas, cientista de dados e Big Data.
Analisei dados reais e apresentei em gráficos dinâmicos (JavaScript e JSON) em Menu > Analise de Dados.

Ajuste ao plano do Hostgator

Cogitei fazer um site robusto em React mas o plano do Hostgator se mostrou ser o mais viável a longo prazo e optei me adequar ao WordPress.
Mesmo no WordPress ainda crio objetos JavaScript públicos para reuso em postagens e mantenho o meu CSS personalizado.
Tenho conciência que fiz um caminho longo mas aprendi muito nestes experimentos.

Layout Fluído

layout fluído

Neste post vamos tratar uma situação real que vivi para obter um Layout Fluído

Quebra de textos longos

Esta é uma situação que vou compartilhar.

No Markdow ao usar um código (ver Markdown no Blog) ele cria as tags html pre code , todavia, quando a linha estava muito grande aumentava a largura das colunas.

Solução pronta

Você tem a opção de um CSS pronto como o Bootstrap, mas eu particularmente optei por construir meu css do zero, para ter controle total do design.

Dica sobre o uso de IA

A IA pode nos ajudar com o CSS mas não é tão simples quanto alguns pensam.
Para fazer uma pergunta adequada a IA você primeiro precisa identificar a causa do erro e posteriormente você pode solicitar a uma IA que te auxilie no css em desenvolvimento.

No meu caso eu perdi um tempão pensando que era a largura da coluna que não estava se ajustando, quando na verdade determinadas frases muito grandes não quebravam.

Para identificar a causa primeiro você deve compreender o seu css, sempre inspecione a pagina.

Então simples é mais ! Menos linhas por favor !

Subdivida este css entre os componentes na medida do possível.

Comece no global.css e depois transponha para os componentes com styled-components ou Sass.

Contudo, aprenda com aquilo que já vivenciou, anote e organize seu aprendizado, para não perder seu tempo, ser mais produtivo e efetivamente aprender. Quando temos que perguntar sempre a alguém ou a uma IA, isso nos alerta que não aprendemos durante as jornadas anteriores. A tecnologia da IA existe e deve ser utilizada, mas lembre-se, um dia pode precisar trabalhar off-line ou aquela IA que utiliza pode começar a cobrar pelo serviço.

Passando a situação a IA

Depois informei a IA que queria que a linha quebra-se em pre code, compartilhei parte do meu css e em seguida ele me deu o código abaixo como resultado.

Para quem usa WordPress

Faça o seu Css global e quando utilizar HTML no Elemenum faça um CSS mais específico.

No Global associe por tag html ou as classes, entretanto, se for algo muito específico associe pelo id e coloque no CSS local do HTML.

Neste post vimos uma situação real para criar um Layout Fluído.

Referências: