Com base nas telas que foram desenhadas na Fase 2 (Prototyping), você deve escolher duas e transpô-las, recriando-as utilizando HTML, CSS e Bootstrap. Você deverá criar no mínimo 2 telas.
Algumas observações:
Mantenha o HTML separado do CSS em arquivos .html e .css, respectivamente. Use e abuse do Bootstrap: deixe o CSS para personalizações que “fujam” dos padrões do framework (com ele é mais rápido!). Sugestão:
Cuide da navegação do sistema. O formulário de login deve ser redirecionado diretamente para a página do dashboard (em outra atividade futura, com uma programação intermediária, vamos processar a autenticação validando o login e a senha). A página do dashboard deve possuir um menu com links para as outras funcionalidades. Os formulários de adicionar/cadastrar informações devem redirecionar diretamente para as listagens de suas informações (por enquanto, não se cadastra nada, de fato). Formulários de alteração ou listagens devem possuir dados fictícios para termos uma ideia de como a tela vai ficar quando realmente estiver pronta. Fique à vontade para criar um layout bem atraente, utilizando fotos, imagens, ícones (mas use o bom senso).
Padrões são importantes. O sistema deve possuir uma identidade visual única (padrões de textos, bordas, tabelas, fontes etc.), de acordo com o padrão escolhido. Aproveite os recursos do Bootstrap para criar o seu layout responsivo, desde 2015 o Google prioriza em seu ranking os sites adaptados para mobile; além disso, 60% dos acessos aos sites têm origem nos smartphones!
Para desenvolver, você pode utilizar uma IDE como Sublime Text, Atom ou o VS Code, ferramentas mais leves que o Eclipse (que será essencial com a orientação a objetos e Java, mas, no momento, pode parecer “um canhão para matar uma mosca”). Fica a seu critério. Utilize a estrutura de pastas para se organizar, faça um pacote ZIP contendo todos os arquivos do seu projeto: .html, .css etc. (necessários para o Bootstrap) e nos entregue.
Mobile
Desktop
Mobile
