Cfaz Site - Novo site do cfaz.net

germanotm commented 3 years ago

Descrição

O comercial vai refazer o site do Cfaz.net. Vamos aproveitar essa oportunidade para separa o site do repositório do cfaz-max. Dessa maneira o cfaz-max vai ter apenas a parte interna do sistema e o site vai ter seu repositório próprio.

Com isso vamos facilitar as alterações no site, porque qualquer pessoa do comercial ou externo vai poder alterar sem precisar instalar o cfaz-max inteiro. Essa modificação também simplifica bem o css do cfaz-max, permitindo que o upgrade para bootstrap mais novo seja feito de forma mais simples.

Informações adicionais

O gustavo e a sheila já fizeram um modelo para o site, tem que conversar com eles para ver como ficou.

Para fazer o site vamos usar o github-pages para armazenar o site no próprio github.

Criei o projeto no github para colocar o site. https://github.com/cfaz-net/cfaz-site

TODO

[x] Criar protótipo de média fidelidade
[x] Criar protótipo de alta fidelidade
[x] Disponibilizar um site no github-pages. Fazer uma pagina só pra ver se funcionou.
[x] Ver como fazer para traduzir o texto no github-pages. Precisamos ter o site em português, espanhol e inglês.
[x] Implementar site que comercial pensou e colocar no ar.

Melhorias para fazer no site

Header

[x] Não funcionou a seleção de idioma de acordo com oa configuração do browser. no chrome em Configurações > Idiomas coloca em primeiro lugar o inglês ou espanhol e entra no site. Ver que no site antigo funciona para ter certeza que mudou.
[x] Colocar metatags para quando copiar o link em whatsapp, facebook, etc...
[x] Imagem do header ficou estranha quando a resolução era maior. ela copiou do lado mas as cores ficou parecendo bug.
[x] Ao colocar o mouse sobre o botão entrar não ficou com o cursor pointer, ficou o cursor de edição de texto.
[x] A logo cfaz,net com a nuvem não ficou boa no header porque tem um espaço para imagem retangular e a logo é quadrada. O cfaz.net ficou com fonte muito pequena. Fazer uma logo comm formato mais adequado, deixa a quadrada apenas para o celular onde o espaço vertical é melhor. Pede a shirley para fazer uma imagem retangular pra por ali, com ou sem nuvem.
[x] links para paginas internas não funcionou porque o link esta colocando o cfaz-site na url e em produção não tem. Colocar o link relativo deve resolver. talvez a nuvem do lado com o escrito cfaz do lado igual a medcloud.
[x] O favicon no site novo está maior na vertical do que o favicon no site antigo. parece que foi usada a própria logo em vez de usar o favicon. Zico achou que ficou parecendo o emoje do cocozinho.
[x] No texto "A Cfaz nasceu há 10 anos em Belo Horizonte" colocar um js para calcular esse anos automaticamente para não ficar desatualizado todo ano.
[x] Faltou um link para o blog.cfaz.net no header.

Formulário de contato

[x] Validação não funcionou, eu tentei enviar sem o telefone. Ele mostrou no console que o campo é obrigatório mas no console do chrome monstrou em network que enviou requisição. Reparei que toda vez que tem change do campo input ele faz uma requisição de envio.
[x] O X de fechar a janela não estava no canto superior direito, ele ficou no meio.

Rodapé

[x] Nos parceiros a logo do "atelie união" e "ambiental proteção" não coube no quadrado branco, ficou sobrando embaixo.
[x] O link "ir para central de atendimento" deve chamar "Ir para a documentação" para https://kb.cfaz.net/.
[x] Colocar link para abrir whatsapp web do comercial e do suporte no telefone.
[x] Link para email vendas não abriu aplicativo de email.
[x] Brasões da LGPD, HIPAA, GCP e numero do registro anvisa. No site da medcloud tem parecido.

Mobile

[x] Site ficou com um scroll lateral, ao descer até a parte que mostra os números o scroll lateral some, pode estar relacionado ao valor inicial nele.
[x] O menu no celular o entrar ficou com espaçamento diferente dos outros links no menu. Ficou mais colado no imediatamente superior. Ao abrir o entrar também reparei que a parte de baixo parece que ficou cortada.
[x] Modal do formulário de contato não coube no celular. os inputs ficaram sobrando na direita da tela.
[x] Ver as observações do google page speed https://developers.google.com/speed/pagespeed/insights/?hl=pt-br&url=site.cfaz.net&tab=mobile

Informações adicionais

Card do comercial com informaçẽos sobre o site: https://trello.com/c/ynTMHiCh/524-okr-q1-atualiza%C3%A7%C3%A3o-site

Manual da marca: https://drive.google.com/drive/u/0/folders/0B_mEorRNkCPoWXFiX0ZoNXlDZ1U

scheillaartifon commented 3 years ago

Outros ajustes encontrados:

[x] Quando clicar em qualquer link externo, abrir nova página (target)
[x] Arrumar espaçamentos e quebras de linhas no header (em todas as linguagens)
[x] Deixar padding maior nas soluções
[x] Diminuir a qualidade das imagens
[x] Implementar Hotjar

germanotm commented 3 years ago

Conversei com o @gcgustavo e os brasões da LGPD e da GCP vamos colocar de uma vez no rodapé, os outros que vai ficar pra depois.

germanotm commented 3 years ago

Conversa com Gustavo:

Site pagina inicial

[x] Fonte, qual fonte estamos usando e porque? porque não suar a open sans como no site antigo?
[x] O botão entrar no menu superior ficou estranho o estranho, a borda deixou o espaçamento aparentemente menor. Tentar ver um espaçamento diferente para ver se melhora. Quando desce o scroll a borda se perde e fica um menu com branco igual ao que foi selecionado.
[x] O sobre nós vai sair porque o vídeo vai demorar, vamos colocar depois.
[x] Depois de enviar um fomulário de contato mudar mensagem para incluir um de nossos consultores entrará em contato em breve.
- [x] Mudar "Suporte nativo aos protocolos Worklist e PACS" para "Suporte nativo a Worklist e PACS".
[x] Mudar "Tecnologia desenvolvida pelo nosso time de Engenharia" para "Inteligência Artificial e Tecnologias desenvolvidas por nossos engenheiros". Nessa parte a imagem parece que está deslocada para esquerda.
[x] Mudar o texto de tomografia de: "Armazenamento e distribuição de tomografias 100% online, além de visualizador com reconstrução volumétrica MPR (Multiplanar Reconstruction)."

para:

""" Armazenamento e distribuição de tomografias 100% online. Com o Cfaz.net o solicitante pode visualizar as tomografias diretamente na plataforma online, sem a necessidade de instalação de nenhum software ou de baixar o arquivo na própria maquina.

O DicomViewer desenvolvido pela nossa equipe de engenharia permite visualizar a reconstrução volumétrica MPR (Multiplanar Reconstruction) da tomografia. Oferece também ferramentas para manipulação do volume, permitindo mudar os eixos de visualização dos cortes, além de aplicar filtros e realizar medidas. """

essa seção tem repetido nas áreas internas.
[x] Na parte do programa de benefícios o espaçamento do presente está colado na parte inferior. deveria ter um espaçamento compatível com o espaçamento das outras seções da página.
[x] Nos números o temporizador está muito rápido, colocar para rodas mais devagar.
[x] Não gostamos do fundo branco nos brasões do google e da lgpd. Só as logos acredito que vai ficar melhor.

[x] Ao entrar nas páginas internas do site o espaçamento nas seções que tem botão "QUERO FALAR COM UM CONSULTOR" está incompatível com o espaçamento das outras seções. O padding inferior e superior está bem diferente.

cfaz-net / cfaz-site