definir modelo e conteúdo da página inicial - landing page, infos, dashboard

[Andrelamor]

ações prioritários independentes

• definir e aplicar modelo de landing page

ações que necessitam de definições gerenciais para aplicação dos modelos

• preparação para inclusão de tabelas
• preparação para inclusão de gráficos
• cálculo das horas produtivas economizadas (ocorrências robô - ocorrÊncias humanas sobre número de horas)
• cálculo das pessoas (horas economizadas por semana sobre 24 - horas produtivas MAP)
• cálculo salário médio servidor economizado
• subtitle (header 2) para depoimentos selecionados
• botões para visões de horas pessoas, salários economizados
• definições de métricas
• definições da landing page

@gabrielbdornas por favor me ajude a verificar a referência para esse material

As ideias de formatar a página inicial:

# Página Inicial
- nuvem de palavras com as tags dos robôs criados (i.e. pessoal, financeiro, etc)
- métricas de ganhos de eficiência
	- quantos robôs;
	- quantos e quais órgãos;
	- quantas horas produtivas economizadas;
- depoimentos de desenvolvedores 
- métricas específicas
	- recursos economizados
		- medidas por área
		- policiais na rua
		- pessoal da saúde 
		- passivo reduzido (ex.: prestação de contas)
			- processos judiciais evitados

[gabrielbdornas]

@gabrielbdornas por favor me ajude a verificar a referência para esse material

@Andrelamor o pacote mkdocs-charts-plugin parece ser ótimo para este objetivo. O repositório GitHub dele pode ser acessado aqui.

Os gráficos podem ser gerados com dados inline ou buscando arquivos .csv dentro do repositório.
Qualquer dúvida me acione.

[Andrelamor]

@gabrielbdornas por favor me ajude a verificar a referência para esse material

@Andrelamor o pacote mkdocs-charts-plugin parece ser ótimo para este objetivo. O repositório GitHub dele pode ser acessado aqui.

Os gráficos podem ser gerados com dados inline ou buscando arquivos .csv dentro do repositório. Qualquer dúvida me acione.

@gabrielbdornas trabalhando na aplicação de algumas funcionalidades:

Data tables

• parseamento de tabelas em .md (ex.: https://lab-mg.github.io/automatizacoes/blog/exemplo-de-aplicacao-de-tabela/)
• ordenar valores de cada cabeçalho da tabela (clicar na tabela acima)
  • OBS o sort é para ordem ALFABÈTICA! não ordena números...

Mkdocs table-reader plugin

• parseamento de tabela salva no próprio repositório (ex.:https://lab-mg.github.io/automatizacoes/blog/exemplo-de-aplicacao-de-tabela/ )
  • questões: o separador tem que ser necessariamente vírgula; cuidar para que o encoding do .csv seja utf-8

Charts-plugin - o que vc recomendou

• gráfico de barras comparativas
  • questões: o gráfico tem que ser gerado de um arquivo em formato .json, manualmente, ou modificado a partir de um .csv
• [ ]

[Andrelamor]

forma alternativa de inclusão de tabelas (como imagens na pasta assets): ver https://timvink.nl/blog/reproducible-reports-with-mkdocs/#including-tables

[Andrelamor]

sobre os gráficos:

Charts-plugin - o que vc recomendou

• gráfico de barras comparativas

embora tenha conseguido reproduzir um modelo localmente, o site não leu os dados salvos na pasta docs/assets/charts/data, como pede a documentação:

[Andrelamor]

https://vega.github.io/vega-lite/docs/spec.html#single
especificação para estudar

exemplo multiline graph: https://gist.github.com/amitkaps/fe4238e716db53930b2f1a70d3401701#file-mline-vl-json

[Andrelamor]

possível gráfico: histograma com intervalos de classes de horas no eixo das abcissas e número de robôs ou processos no eixo das ordenadas?

[gabrielbdornas]

@Andrelamor, mencionado nesta reunião iremos utilizar esta biblioteca para embedar dashboards em formato power bi.

Conforme mencionado na documentação a sintaxe a ser utilizada será:

![type:video](link-para-dashboard)

[Andrelamor]

vamos ver se conseguimos gerar URLs abertas dos dashs criados on powerBI via sharepoint (a princípio não parece ser possível):

[Andrelamor]

URL do relatório power BI publicada, mas sem refletir no site:

[gabrielbdornas]

Encontrei esta lista de free landing pages. Gostei bastante deste, em específico. Acredito que poderíamos:

• Baner: Modificar textos.
• Parte Why This Event Is Super Cool?: Colocarmos alguns gráficos mostrando o resultado que estamos fazendo.
• Meet the Speakers: Nossos perfis com fotos.
• Buy Tickets: Sem ideia (podemos tirar, inclusive).
• Event Schedule: Nosso calendário, incluindo os professores e monitores.
• Contact Form: Um formulário para recebermos perguntas... pedidos, etc...

[Andrelamor]

@gabrielbdornas como o Lucas tinha cobrado um retorno antes de ontem, pedi a ele pra dar uma olhada e um feedback, eis o que ele está sugerindo:

Eu achei que os nomes dos gráficos não deveriam ser tão técnicos, ao contrário do que seria desejável num trampo acadêmico. E deveríamos ter uma hierarquia de gráficos - acho que horas e ocorrências são as informações mais interessantes. >Sugiro sempre trocar "por nome ou breve descrição" por "por robô".
Não sei se nos números gerais nós queremos essa informação por robô. Acho que isso é um bom SEGUNDO SLIDE, mas o primeiro slide deveria ser independente de tudo: n. de robôs, n. de horas poupadas, n. de órgãos com robôs, n. de servidores poupados, estimativa de R$ poupados em salários.
Na página dos robôs, acho que seria bom evitar o autoplay do youtube. Detesto autoplays hehehehehe Acho que podem prejudicar a navegação dos usuários. Muitas vezes, alguém abre a aba, muda enquanto carrega e... algum trem começa a apitar, as pessoas fecham e nunca mais voltam.
Os nomes das páginas:
Página Inicial --> ok
Robôs --> que tal "Lista de Robôs"?
Projetos --> que tal "Projetos de imersão"?
Blog --> que tal "Dicas e boas práticas"?
(que tal essa ordem?)

[Andrelamor]

Landing page:

Acho que o painel na cara não é a melhor alternativa, pois um usuário leigo não entende do que se trata a página. Talvez um textinho curto: "Olá! Este é o portal da Automação Robótica de Processos no Estado de Minas Gerais - uma iniciativa inovadora, cujo impacto aumenta a eficiência e a eficácia das políticas públicas, economizando recursos e melhorando a vida dos servidores públicos e dos cidadãos. Quer saber mais?" --> daí mete uma setinha ou algo assim pra ensejar que o sujeito navegue pra baixo e veja os números e talz
Imediatamente depois eu colocaria um "o que é a automação robótica de processos" com um vídeo explicativo.
Depois, "casos de uso", que eu transformaria em "Como um robô pode ser útil?". Um textinho tipo "Um robô é uma espécie de colega de trabalho do servidor público, que o ajuda a desempenhar trabalhos repetitivos, para que o humano foque naquilo que exige sua atenção. Veja esses casos de uso:" --> e aí meteria a lista.
Exemplos: carrossel com vídeos de robôs
Depoimentos: prefiro carrossel com aspas e itálico à caixinha de código. Sempre nome, cargo e órgão acompanhando.
Disclaimer pode ser só o link pra página independente. Números de treinamentos talvez não pertença a essa página, pois é um contexto muito nosso. Quem sabe uma página à parte?

[Andrelamor]

Comecei a aplicar subtítulos pras seções da página inicial ficarem demarcadas.
Definições sobre nomes vc olha com o Lucas, pra mim tanto faz.
Considerações sobre as métricas exigirão reuniões e discussões à parte para dar seguimento à montagem do modelo do painel.
Aplicações de tecnologia tipo 'carrossel' na landing page dependem das possibilidades que vc está levantando de aplicação das free pages, a explorar.

[gabrielbdornas]

Comecei a aplicar subtítulos pras seções da página inicial ficarem demarcadas.
Definições sobre nomes vc olha com o Lucas, pra mim tanto faz.
Considerações sobre as métricas exigirão reuniões e discussões à parte para dar seguimento à montagem do modelo do painel.
Aplicações de tecnologia tipo 'carrossel' na landing page dependem das possibilidades que vc está levantando de aplicação das free pages, a explorar.

@Andrelamor, gostei bastante da organização que foi dada na página inicial, particularmente do subtítulo Resumo - principais números. Quando apresentei para o Lucas esta landing page ele havia gostado da ideia.

Vou conversar com ele então e mostrar a página atual e o tema sugerido e ver se ele acha interessante um merge das duas coisas, caso contrário acho que a versão atual já atende bem o que ele havia pedido.

[Andrelamor]

@Andrelamor, após algumas tentativas de adaptar esta landing encontrei como principal dificuldade a versão Bootstrap utilizado por este template. O Bootstrap utilizado é o 3 (bem antigo), e acredito que isto está inviabilizando simplesmente copiar e colar este conteúdo dentro do tema material. Basicamente vou ter que reconstruir todas as sessões da landing com html, css e bootstrap5. Um trabalho um pouco maior, mas acredito que promissor, tendo em vista os elogios da Ana para com a estrutura do template. Já consegui a adaptação no banner da página, mas deixei em um branch apenas na minha máquina para não estragar a versão que está no ar!

[gabrielbdornas]

@Andrelamor, após algumas tentativas de adaptar esta landing encontrei como principal dificuldade a versão Bootstrap utilizado por este template. O Bootstrap utilizado é o 3 (bem antigo), e acredito que isto está inviabilizando simplesmente copiar e colar este conteúdo dentro do tema material. Basicamente vou ter que reconstruir todas as sessões da landing com html, css e bootstrap5. Um trabalho um pouco maior, mas acredito que promissor, tendo em vista os elogios da Ana para com a estrutura do template. Já consegui a adaptação no banner da página, mas deixei em um branch apenas na minha máquina para não estragar a versão que está no ar!

Acredito que descobri porque a utilização de Bootstrap não funcionou. Esta resposta mostra que Material, ao contrário do que eu pensei, não utiliza Bootstrap:

Material for MkDocs is written from scratch, without the use of a CSS framework or library, except for SCSS and the Material Design color definitions. When you drop in Bootstrap, it might override some styles which might break the layout. Sadly, I don't have any experience using Bootstrap together with Material for MkDocs.

Deverei montar os componentes e o enquadramento e a divisão das páginas sem a utilização de Bootstrap.

Outro ponto de dificuldade foi tentar "copiar" a homepage da documentação material, pois ela está disponível somente para insiders.

[Andrelamor]

@gabrielbdornas podemos encerrar este issue e atualizar as referências das definições e ações de landing page para o #53? os tópicos ainda não terminados estão lá:

[gabrielbdornas]

@Andrelamor, tendo em vista o #53, acredito que podemos fechar esse issue. O que acha?

[Andrelamor]

@Andrelamor, tendo em vista o #53, acredito que podemos fechar esse issue. O que acha?

@gabrielbdornas essa pergunta foi exatamente a mesma que postei acima, há uma semana atrás, vc não tinha lido?