Início deste site

Retornando ao Rio de Janeiro

Falaremos hoje do início deste site, minhas motivações e minhas decisões com base no que era mais importante e viável no momento.

 

Início deste site

Após criar um Editor de Texto que desenvolvi e utilizava no meu trabalho, desejei compartilhar com meus colegas de forma segura, onde editávamos textos e extraímos textos de imagens.

O meu objetivo inicial com este site era apenas compartilhar o Editor de Texto, Relatórios Dinâmicos e KanBan com meus colegas de trabalho e organizar algumas informações do trabalho.

Este site passou por diferentes tecnologias (Flask,React,fastHTML), contudo o que você vê está neste site está em WordPress (HTML, CSS e JavaScript).

Cada etapa desse processo trouxe desafios e ao longo dos anos aprendi muito e continuo aprendendo a cada dia.

Paralelamente ainda mantenho meu laboratório fastHTML em meu computador localmente pois me permite estudo (python no back-end, módulos python, API’s, HTML, CSS e JavaScript)

Trabalhei o conceitos como design responsivo, contudo apresentar gráficos complexos no site pelo wordpress demora uns 3 segundos para carregar a pagina no usuário, após o carregamento o fedback é ótimo, também esbarro na dimensão para um celular, pois gráficos do tipo histórico são longos horizontalmente, por isso peço desculpas mas tive que desencanar um pouco para apresentar oe resultados. Alguns sites apresentam com o PowerBI mas para isso o custo mensal é muito maior.

A decisão de utilizar o WordPress foi pela facilidade de escrever as postagens sobre o que venho estudadno atualmente.

 

Quando descobri a fonte de dados GOV.BR

Mantenho o foco no estudo de análise de dados com Python , desenvolvolvo um projeto em fastHTML localmente que é meu laboratório front-end (biblioteca de componentes em python, JavaScript e CSS) + back-end (api’s + módulos python criados por mim + base de dados) e no  HostGator utilizo apenas o WordPress onde posto os resultados da minha análise de dados.

Você pode visualizar no item do menu Análise de Dados, os gráficos que desenvolvi com HTML, JavaScrip, CSS  e JSON a partir de datset’s da FONTE DE DADOS do GOV.BR , e terá acesso ao código no GitHub.

A incorporação do JSON ou XML no HTML permitiu que após o carregamento do HTML o feedbak seja imediato no gráfico dinâmico, pois os filtros são processados no cliente (front-end).

O Governo Federal disponibilizou diversos dados em formato acessível, estruturado, com layout , validado por órgão competente e sem dados sensíveis (Lei Geral de Proteção dos Dados – Lei nº 13.709/2018), permitindo que estudantes, cientistas, jornalistas e pesquisadores pudessem fazer a análise destes dados e correlacionar com outros datasets, o que me estimulou ao estudo de um Data Warehouse e BI.

Neste ecosistema venho me desenvolvendo profissionalmente pois tenho liberdade criativa para escolher a tecnologia que desejo trabalhar e ao postar o que aprendi com vocês organizo as minhas ideias .

Até aqui tenho dado preferência a tecnologias de software livre mas para analizar um DW terei que estudar o Power BI para apresentar dashborad’s a fim de navegar nas diversas dimensões dos cubos.

 

Ambiente de Trabalho

O site tem como tema ambiente urbano mas dentro deste tema quero proporcionar aos usuários um ambiente de trabalho clen.

Durante uma avalanche de trabalho nossa mesa fica desorganizada e caótica, o que nos leva nos intervalos retirar tudo que não é mais nescessário da nossa mesa e ao deixar apenas o essencial na mesa o ambiente de trabalho imediatamente melhora.

É saudável termos um ambiente organizado e limpo.

Todos nós também queremos um ambiente de trabalho que nos traga bem estar, por isso trago imagens no estilo mangá com personagens amigáveis.

Desejo proporcionar aos usuários a oportunidade de se teletransportar para um ambiente acolhedor onde possamos tomar um cafézinho enquanto ouvimos uma rádio e adimiramos a imagem da cidade do Rio de Janeiro pela janela do escritório.

Espero também que as ferramentas de trabalho que estou disponibilizando lhe poupe muito tempo em suas tarefas e possa curtir mais a sua vida e a sua família.

Lembre-se sempre que a sua saúde é o mais importante.

 

Nosso Logotipo

A programação pode ser pensada em módulos e analogamente um prédio e uma cidade é construída por tijolos.

O cubo laranja representa a construção de escritórios virtuais em todo o mundo mas todos conectados pelo bem comum.

 

Pensando nos Professores

Atualmente adicionei na Mesa de Trabalho > Google > Class Room que é uma plataforma para professores compartilharem informações com seus alunos.
Mais recentemente adicionei na Mesa de Trabalho > Ferramentas > Leitor de Cartão Resposta que usa a tecnologia OMR para ler as respostas de um cartão resposta impresso, espero ajudar os professores a diminuir seu tempo nas correções de provas utilizando uma impressora e um scaner de mesa. Garantimos a segurança dos dados pois usamos javascript que roda em sua máquina, desta forma nenhuma informação sai do seu computador. A imagem é processada no computador do usuário, o que chamamos de offline.

Trabalho em Grupo

Minhas novas ferramentas Fómulários Dinâmicos e Kanban agora podem ser salvos em Json e compartilhados com colegas de trabalho.
Os formulários geram relatórios padronizados, seria para casos em que as informações são parecidas e o contexto conhecido, neste caso o formulário deve ser montado e aprovado pelo grupo para que haja padronização e mais eficiência do grupo.
Também adicionei em Google > Google Calendário pois é uma ferramenta que pode ser pública aos colegas de trabalho.
Exemplo seria a atendente de um consultório médico agendar na agenda do google e na agenda do médico visualizar não apenas a agenda de um consultório mas a união de várias agendas, o que ajuda a evitar conflitos por falta de comunicação no grupo.

 

Conclusão

A identidade deste site vem sendo construída a cada dia, o caminho ter sido longo me trouxe novas habilidades e soluções criativas.

Hoje reconheço as tendências e os modismos o que me faz ser mais direto no meu estudo.

O propósito da Área de Trampo é te ajudar a limpar a sua mesa e deixar o seu dia mais alegre durante o processo.

Antonino Marques Jares

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: