tarefa_3.1

Programação Web Avançada | Tarefa 3.1 inclusão das duas novas entidades sponsors e experts na plataforma através da realização dos conceitos de prototipagem: wireframes, mockups e protótipos

b) Cada aluno deve planear a inclusão das duas novas entidades sponsors e experts na plataforma através da realização dos conceitos de prototipagem: wireframes, mockups e protótipos. A informação relativa a cada uma das entidades faz parte do planeamento a ser realizado, ficando a decisão da informação necessária e suficiente no aluno. Os ficheiros produzidos devem ser colocados na área individual do Git num projeto chamado tarefa 3.1. A aplicação dos conceitos wireframe e mockup deve ter uma representação para browser e para mobile (para o desenho dos conceitos pode utilizar a aplicação web disponível em draw.io). O ficheiro protótipo de cada nova entidade já deve ser incluído na Página de Administração utilizando uma estrutura de documento baseada em HTML5. O funcionamento da componente de Back-office deve ser testado, com a navegação e visualização das novas entidades devidamente integradas nos vários blocos da aplicação web.

Notas

As wireframes e Mockups foram criadas com Adobe XR

Notas Resolução

Relativamente à tarefa, dividi do seguinte modo, em conformidade com os enunciados:

1. Reflexão : Wireframe, Protótipo e Mockup: Diferenças? Que contributos da semântica do HTML5 dá à prototipagem? com base nas referencias bibliograficas, exceção para o manual Capitulo 3 do livro dos mesmos autores "Introdução ao desenvolvimento moderno para a Web", mas completei com artigos do Google Académico. Note que este estudo e reflexão foram importantes para os conceitos a aplicar na fase seguinte.

2. Desenhar Wireframes

3. Desenhar Mockup (aqui necessária alguma atenção na investigação, pois o processo é desenhar antes do passo seguinte, dado que fora do Google Académico, vais encontrar quem utilize este processo para apresentar com base no prototipo, o que na minha opinião não é o pretendido (https://mockupbro.com/mockups/devices)

4. Implementar em HTML5 um protótipo dos desenhos anteriores, mantendo como base o CSS original da aplicação em estudo.

Protótipos (HTML5)

Podem ser consultados em ambiente real aqui.