Legal, Carlos. (Jonatas, tem uma amostra se quiser testar no final, mesmo que não seja desenvolvedor. )
Eu vejo que o Bootstrap é o da moda, e faz por merecer. Muito, muito portal está usando isso. Fica ótimo no celular. Os complementos em javascript são muito bons, também, poupam trabalho pra caramba.
Se alguém quiser testar, uma prova de conceito de alto contraste, tem que fazer o seguinte:
- No chrome:
- teclar F12
- procurar na guia que se abre, uma aba chamanda Console.
- clicar na última linha desse console e colar o código abaixo, depois dar um Enter.
Testei só em algumas páginas do SEI, está bem incompleto ainda. Mais fácil testar assim do que editar os CSS.
Fiz isso durante as falhas de um sistema que nos deram de presente pra tentar implantar para a Fiscalização :(
/*
Prova de conceito para alto contraste
@author marcelbonnet@anatel.gov.br
@date 2015-12-17
@see
http://emag.governoeletronico.gov.br/*/
$("body").css({"background-color":"#000"})
$("body *").css({"color":"#fff"})
$(".infraBarraComandos").css({"border":"0.2em solid #09f"})
$(".infraAreaDados").css({"border":"0.2em solid #09f"})
$("button").css({"background-color":"#66c"})
$("button").find("span").removeClass("infraTeclaAtalho").css({"background-color":"#66c", "color":"#fff"})
/* input */
$("input").css({"background-color":"#000", "color":"#fff"})
/* tables */
$("table tr th").removeClass("").css({"background-color":"#000", "color":"#fff", "font-weight":"bold", "text-align":"center", "border-top":"0.1em solid #09f"})
/* table bloco de assinatura */
$(".infraTh").removeClass("infraTh").css({"background-color":"#000", "color":"#fff", "font-weight":"bold", "text-align":"center"})
$(".infraTable td, .infraTable td *").css({"background-color":"#000", "color":"#fff"})
/* imagens depois por causa do comando anterior usando "*" */
$("table").find("img").css("background-color","#fff")
$(".infraTable").find(".ancoraPadraoPreta[style^='color:green']").css("color","#0f0")
$(".infraTable").find(".ancoraPadraoPreta[style^='color:red']").css("color","#f00")
Ate,
--
[cid:image001.gif@01D138E9.1A53CCD0]
Marcel Bonnet
Agência Nacional de Telecomunicações no Paraná
Fiscalização Técnica - GR03-FI2
(41) 3219-7072
Rua Vicente Machado, 720 - Batel, Curitiba/PR. CEP 80420-011
De: Carlos Eduardo Araujo Vieira [mailto:carlos.vieira@planejamento.gov.br]
Enviada em: quinta-feira, 17 de dezembro de 2015 15:46
Para: Marcel Bonnet; Jonatas Evaristo Rodrigues dos Santos; 'sei-tecnico@listas.softwarepublico.gov.br'; 'sei-negocio@listas.softwarepublico.gov.br'
Assunto: RE: Proposta para desenvolver novo layout para o SEI
O que eu usei foi o Bootstrap mesmo. Tentei com o Semantic UI mas não gostei muito não.
Carlos Vieira
________________________________
De: Marcel Bonnet
Enviado: quarta-feira, 16 de dezembro de 2015 14:47
Para: Carlos Eduardo Araujo Vieira; Jonatas Evaristo Rodrigues dos Santos; 'sei-tecnico@listas.softwarepublico.gov.br'; 'sei-negocio@listas.softwarepublico.gov.br'
Cc: sei-tecnico@listas.softwarepublico.gov.br
Assunto: RES: Proposta para desenvolver novo layout para o SEI
Carlos, estou copiando o sei-tecnico . Do pouco que olhei por cima sobre a camada de apresentação do SEI, eu imagino que mudar o layout seria praticamente um incremento de versão maior! Mas apoio completamente.
Não sei o que você usou para prototipar, mas acho que a melhor prática hoje em dia é o Bootstrap (http://getbootstrap.com/css/) :
1. Existem diversos templates, o que pode atender o alto contraste sem dificuldades
a. Com paciência é possível até editar os templates do Bootstrap, mas isso é uma tarefa e tanto, precisa fazer conversão de arquivos e tal
2. Além do Bootstrap CSS ele tem outros pacotinhos interessantes, como o Javascript Bootstrap, que anda junto com o JQuery (eu vi que alguns forms do SEI usam o jQuery, provavelmente os modificados mais recentemente)
3. Ele é mobile friendly. Com apenas UMA linha (uma tag no header) a aplicação se adapta ao smartphone ou tablet.
Sem contar inúmeros outros componentes dos quais o SEI se beneficiaria de ser fortemente acoplado ao jQuery. Por exemplo, gosto de usar o SELECT2 para substituir o do HTML: http://select2.github.io/select2/ dá uma enriquecida e tanto. E funciona 100% no mobile.
Por exemplo, fazer um ensaio de substituir os pelo SELECT2 seria uma das modificações de layout que eu listaria como de baixo custo.
Mas até lá, quem sabe a gente consegue editar um template (baseado nos existentes) para o alto contraste? Se tiver um tempo essa semana eu tento fazer, se não largo a bola – vou entrar em férias.
Ate,
--
[cid:image001.gif@01D138E9.1A53CCD0]
Marcel Bonnet
Agência Nacional de Telecomunicações no Paraná
Fiscalização Técnica - GR03-FI2
(41) 3219-7072
Rua Vicente Machado, 720 - Batel, Curitiba/PR. CEP 80420-011
De: sei-negocio [mailto:sei-negocio-bounces@listas.softwarepublico.gov.br] Em nome de Carlos Eduardo Araujo Vieira
Enviada em: terça-feira, 15 de dezembro de 2015 15:01
Para: Jonatas Evaristo Rodrigues dos Santos; 'sei-tecnico@listas.softwarepublico.gov.br'; 'sei-negocio@listas.softwarepublico.gov.br'
Assunto: Re: [sei-negocio] Proposta para desenvolver novo layout para o SEI
Obrigado pelas sugestões Jonatas,
As informações a serem mostradas na tela podem ser melhoradas e adicionadas sempre tomando cuidado para não poluir demais a tela.
A questão do alto contraste é uma necessidade informada inclusive pelo eMAG [1] e é um tema de acessibilidade, entre outros, que deve se tratado por todos sistemas do governo.
Carlos Vieira
[1] http://emag.governoeletronico.gov.br/#s4
________________________________
De: Jonatas Evaristo Rodrigues dos Santos
Enviado: terça-feira, 15 de dezembro de 2015 14:16
Para: Carlos Eduardo Araujo Vieira; 'sei-tecnico@listas.softwarepublico.gov.br'; 'sei-negocio@listas.softwarepublico.gov.br'
Assunto: RES: Proposta para desenvolver novo layout para o SEI
Olá Carlos,
Gostei da sugestão, principalmente o resumo com os quantitativos do lado esquerdo.
Aproveitando, tenho algumas sugestões para o layout:
a) Possibilidade de aproveitar mais a tela nos desktops, a maioria do monitores atuais são do tipo wide, assim pode sobrar áreas que poderiam ser mais bem aproveitadas, com a inclusão de mais informações dos processos listados na tela, como ponto de controle atual, entre outros.
b) Possibilidade de mudar a forma da listagem, por exemplo, listagem da forma antiga, da forma nova, e outras se tiver. Essa dica pode suprir a anterior.
c) Colocar um tema preto, tipo alto contraste, pois cansa menos as vista de quem trata processo o dia inteiro. Com essa tela branca do SEI cansa bastante as vistas.
Fica então essas dicas,
Segue em anexo um exemplo de como a interface atual ficaria com um tema preto.
Abraços,
Jonatas Evaristo
Agência Nacional de Telecomunicações – Anatel
GR07OR – Processo de Outorga e Recursos à Prestação – Goiás
(62) 3236-9050
De: sei-negocio [mailto:sei-negocio-bounces@listas.softwarepublico.gov.br] Em nome de Carlos Eduardo Araujo Vieira
Enviada em: terça-feira, 15 de dezembro de 2015 10:46
Para: sei-tecnico@listas.softwarepublico.gov.br; 'sei-negocio@listas.softwarepublico.gov.br'
Assunto: [sei-negocio] Proposta para desenvolver novo layout para o SEI
Pessoal,
Criei nova issue [1] para desenvolvimento de um novo layout para o SEI. Segue em anexo um exemplo para exemplificar como poderia ser. Se puderem dar sugestão na issue eu agradeço.
Atenciosamente,
Carlos Vieira
[1] https://processoeletronico.gov.br/issues/196
Marcel Bonnet