Antes de iniciar, preparei um brainstorm de como seria a página, tendo em mente os requistitos estabelecidos no documento guia. Busquei inspiração no site do e almejei manter a fidelidade das páginas ao estilo proposto neste brainstorm. Abaixo, seguem fotos de como foi pensado:
Com isso, teria uma página simples de eleição, contendo um menu superior, identidade visual e utilidades diversas.
Com visual limpo, cores leves e clareza em sua apresentação, as páginas montadas fazem uso extensivo das tecnologias listadas, em especial destaque ao uso de Bootstrap (casado a estilização oferecida pelo HTML 5 e CSS) para tornar a página e seus recursos responsivos, atendendo a diversos tipos de dispositivos.
Apesar de não conter nenhuma funcionalidade de backend, as duas páginas montadas estão linkadas entre si. A vista index.html exibe o botão de Voto, que abre um modal formulário; este, quando preenchido, redireciona para a vista voto.html, que é, de fato, a página de votação solicitada. Os personagens fictícios servem apenas de placeholder para uma implementação séria e comercial. Há espaço aqui de melhoria: preenchimento das tabelas de candidatos a partir de endpoints de uma API que forneça um json adequado.
O background das vistas consiste em estilização degradê em CSS, com o preenchimento repetido de uma imagem simples(sabe-se da possibilidade deste overlay ser feito via SVG, porém, não domino esta tecnolgia), porém que tira a monotonia caso fosse apenas o degradê de cores.
Tecnlogias Utilizadas:
- Bootstrap 3
- Javascript 5
- HTML 5
- CSS 3
- Photoshop CS3
