GrupoXXXX

Revisão das 20h26min de 15 de Janeiro de 2013

Apresentação do projeto

Área de conteúdos: Educação
Plataforma: offline
Paradigma de interação: index

O tema do nosso projeto é a fotografia. A ideia inicial era a criação de uma aplicação, em plataforma on-line, que permitisse aos utilizadores o acesso aos princípios básicos da fotografia e a uma pequena experimentação destes, porém depois de discutido o assunto decidimos mudar para uma plataforma off-line para que o utilizador pudesse ter acesso a toda a aplicação em qualquer parte. O público-alvo da nossa aplicação são todos aqueles que tenham interesse em fotografia, porem o design está mais direccionado para o público jovem e adulto.
A aplicação funcionará como uma guia de iniciação à fotografia. Pretendemos dar a conhecer aos utilizadores um pouco sobre a história da fotografia, o funcionamento das máquinas e os princípios fundamentais da fotografia. Para além de toda a informação, a aplicação contará também com um pequeno simulador no qual poderão ser testados alguns dos conceitos apresentados.
A aplicação será desenvolvida em Flash actionscript2 com recurso a outros programas tais como Adobe Ilustrador, Adobe Photoshop…
No desenvolvimento da aplicação iremos ter especial cuidado com as animações de modo a que aplicação seja de fácil utilização em dispositivos móveis como a nova geração de tablets com o windowns 8 devido à sua compatibilidade com o flash.

Diário de projecto

5 de Novembro
Reunião de grupo. Discussão de ideias para o tema do projecto a desenvolver, onde por unanimidade decidimos que o tema seria Fotografia. Para fazer um trabalho relevante e de interesse para o curso em que estamos inseridos, apesar de ser um tema muito escolhido em outros projectos, decidimos abordar a fotografia num âmbito mais pedagógico. A ideia será fazer uma manual de aprendizagem dos conceitos básicos de fotografia com exemplos práticos de alguns dos parâmetros desses conceitos e com toda a interactividade inerente.

6 de Novembro
Apresentamos a ideia do projecto à professora Ana Carla Amaro, deparando de imediato com alguns entraves na sua realização. A componente da animação seria uma das problemáticas deste trabalho pois devido a ser um tema recorrente não poderíamos repetir o que fora feito antes, ou seja, teremos que inovar quer seja pela interactividade quer pelo design das animações e da aplicação a desenvolver. A professora aconselhou-nos a fazer uma pesquisa intensiva sobre o tema de modo a resolver estes entraves. Foi-nos proposto procurar ajuda junto dos nossos docentes, nomeadamente o professor Hélder Caixinha, docente da disciplina e especialista na área. Em grupo foi decidido cada um fazer uma pesquisa sobre o tema e procurar animações para serem usadas como base para a realização do projecto.

10 de Novembro
Em reunião na aula de Lab MM1 com o professor Hélder Caixinha, apresentamos a nossa pesquisa para as animações de entrada e dos conteúdos. Definimos em conjunto a estrutura e complexidade da aplicação, assim como os temas que abordaremos na mesma. O professor Hélder Caixinha prontificou-se a auxiliar-nos na elaboração dos conteúdos. Foi-nos novamente referido a dificuldade que poderíamos encontrar em obter as animações. Na aula de IDE estivemos a discutir hipóteses para a interface da aplicação. Chegamos a uma primeira ideia para o "loading" da aplicação que servirá de base para a linguagem gráfica do projecto. Exploramos também as várias hipóteses que teremos para a construção das várias animações ao longo da aplicação. Depois de explicada a nossa ideia ao professor Vairinhos, foi-nos aconselhado a pensar apenas em 4 ou 5 cenários diferentes, não mais e a definirmos melhor os conceitos que iriamos abordar. Comprometemo-nos com o professor que quinta-feira teríamos um uma introdução, um cenário e 4 sub-cenários desenvolvidos assim como uma pesquisa visual do tema com bons exemplos. Numa primeira distribuição das tarefas ficou acordado entre os elementos do grupo que o Paulo Neves ficava responsável pela parte do design da aplicação, a Ana Silva pela parte da actualização da wiki e desenvolvimento do relatório, e o Marcelo Santos e o Luís Borges pela recolha e tratamento da informação. No entanto apesar desta divisão de tarefas todo o trabalho será realizado em conjunto num ambiente de entre-ajuda. Foi marcada uma reunião de grupo para discutir ideias e desenvolver os cenários e até lá cada elemento ficou de fazer uma pesquisa visual do tema.

12 de Dezembro
Reunião de grupo onde foram discutidos os pontos abordados pelos professores na aula de segunda-feira. Foram definidos os conceitos que seriam abordados e como seria a constituição do menu de entrada. Foram discutidas ideias quanto ao design do cenário principal e dos sub-cenários.

13 de Dezembro
Na aula de Lab MM1 foi desenvolvida a arborescência da aplicação e com a ajuda da professora definimos melhor a estrutura da aplicação que se apresentava um pouco confusa. Discutimos também com a professora ideias para a construção do simulador que seria implementado na aplicação. Ficamos de fazer uma pesquisa para encontrar soluções que possibilitassem e facilitassem a construção do simulador. Na aula de IDE apresentamos o design do cenário principal. O professor disse que estava melhor que ao anterior e que tínhamos feito uma boa escolha para a cor de fundo mas no entanto ainda podíamos fazer melhorias.

17 de Dezembro
Na aula de Lab MM1 foi discutido entre a professor e os membros do grupo soluções para o menu da aplicação e para simulador. Quando ao design do cenário a professora aconselhou ao grupo dar alguma utilidade à maquina para que não servisse apenas de enfeite. Na aula de IDE foram apresentados os cenários ao professor e discutimos também possibilidades para dar alguma utilidade à máquina. O professor sugeriu que as linhas que formam a máquina se alterassem de acordo com a opção seleccionada. Entre os membros do grupo foram discutidas opções para o nome da aplicação e ficou decidido que o nome seria "photography initiation". Até à próxima reunião de grupo distribuíram-se as tarefas da seguinte forma: o Paulo Neves fazia as devidas alterações no design dos cenário, a Ana Silva recolhia e organizava toda a informação para o relatório de IDE, o Luís Borges trabalhava no desenvolvimento do logotipo da aplicação e o Marcelo Santos fazia a grelha para os cenários.

22 de Dezembro
Conclusão do desenvolvimento dos cenários e da elaboração do relatório. Entrega do relatório do projecto aos professores de IDE.

28 de Dezembro
Reunião de grupo. Foi discutida a forma como seriam feitas algumas animações e distribuídas as tarefas da seguinte forma:
- Ana Silva: Conteúdo e animações;
- Luís Borges: Conteúdo e animações;
- Marcelo Santos: Animações;
- Paulo Neves: Simulador e códigos.

3 de Janeiro
Reunião de grupo. Falou-se uma vez mais da distribuição de tarefas e combinou-se entre todos fazer reuniões diárias a partir das 15h para desenvolvermos o trabalho em conjunto. Falou-se também em tentar terminar todas as animações da aplicação até segunda-feira, dia 7, para se começar com a parte da programação. Depois de todos os pormenores discutidos começamos a trabalhar na animação do fundo. Enviamos também um e-mail ao professor Caixinha para que nos auxiliasse na parte do conteúdo da aplicação.

5 de Janeiro
Nesta reunião foi discutido essencialmente a animação do fundo e a estrutura da aplicação no flash. A animação do fundo que tinha sido elaborada tem de ser corrigida devido aos seguintes problemas:
- Existem momentos em que existem varias bolas sobrepostas;
- As bolas têm todas a mesma velocidade e convém terem velocidades diferentes para dar uma aspecto mais fluido à animação.
O Marcelo ficou de corrigir esses pequenos problemas até amanhã à hora da reunião. Quando à estrutura da aplicação do flash ficou mais ou menos decidido o número de layers e frames a utilizar.

6 de Janeiro
Reunião de Grupo. Discussão sobre as animações e o conteúdo da aplicação. Desenvolvimento da animação.

7 de Janeiro
Reunião de grupo. Conclusão das animações de fundo.

8 a 13 de Janeiro
Organização do ficheiro flash e respectiva programação. Discussão de ideias para o simulador e elaboração deste.

14 de Janeiro
Conclusão da aplicação.

Divisão de tarefas

Ana Silva
- Actualização da Wiki;
- Animações;
- Organização do conteúdo;
- Elaboração do relatório.

Luís Borges
- Pesquisa visual do tema;
- Organização do conteúdo;
´ - Animações;
- Elaboração do relatório.

Marcelo Santos
- Pesquisa visual do tema;
- Animações;
- Elaboração do relatório.

Paulo Neves
- Desenvolvimento do Layout;
- Simulador;
- Programação;
- Elaboração do relatório.

Tarefas a realizar

10/12

• Definir os conceitos a abordar.
• Desenvolver intro, cenário principal e 4 sub-cenarios.
• Fazer uma pesquisa visual do tema com bons exemplos.

13/12

• Soluções para o desenvolvimento do simulador.

17/12

• Definir o nome da aplicação.
• Escolher o tipo de interacção do menu.

3/01

• Animações do fundo.
• Organizar a informação do conteúdo.

5/01

• Correcção da animação de fundo.

Analise e Planeamento

O paradigma de interacção que decidimos usar é a índex uma vez que o nosso objectivo é a organização de informação de uma forma simples de modo a facilitar a consulta por parte dos utilizadores. A área de conteúdos da aplicação é educação uma vez que a aplicação tem como objectivo iniciar os utilizadores na fotografia.
A primeira etapa para o desenvolvimento desta aplicação foi a pesquisa sobre o tema para vermos aquilo que já se tinha feito sobre o tema e em que e que nos podíamos basear.
A maioria dos sites dedicados à explicação dos princípios fundamentais da fotografia apresentavam muito texto e poucas imagens e a nossa ideia era fazer exactamente o contrário.

Estes exemplos ilustram bem aquilo que era a nossa ideia para o layout da aplicação, um fundo simples e sem muitas distracções com a informação bem organizada num menu.

Para os submenus a ideia era fazer algo como o exemplo apresentado em cima. Como o tema é fotografia pensou-se em usar polaróide para obter um submenu parecido com o do exemplo.

Para a construção do simulador pretendemo-nos basear no exemplo a cima apresentado porque de todos os simuladores encontrados foi aquele que nos pareceu mais fácil de manusear e permite a experimentação de vários conceitos que queremos abordar na nossa aplicação.
Depois da investigação visual do tema passamos para a elaboração do layout da nossa aplicação e a estruturação da aplicação.

O genérico do programa “Curiosity” da Discovery Channel foi a base para o design da aplicação. O layout idealizado é minimalista, com uma base neutra, linhas simples mas com sentido e conteúdo, fugindo ao "típico" site sobre o tema. Pretendíamos que fosse o conteúdo que tivesse maior destaque, pois o intuito é ser uma aplicação do tipo pedagógico, e por isso mesmo pensamos em criar um ambiente que transporte o utilizador para o conteúdo e não para a parte visual. Não quer isto dizer que descuramos da parte visual, muito pelo contrário, deparamo-nos com várias dificuldades que a simplicidade tem ao tentarmos criar uma linguagem visual diferente.
O menu será composto por quatro opções, “dslr”, “exposição”, composição” e “simulador”, Dentro das três primeiras opções existirá um submenu temas relativos a cada opção. Na opção do “simulador” estará disponível um simulador que permitirá aos utilizadores experimentar vários conceitos tais como o iso, tempo de exposição…

Desenvolvimento do projecto

A nossa aplicação contará com um menu principal e três submenus. No menu principal estarão disponíveis as opções: ‘dslr’, ‘exposição’, ‘composição’, ’simulador’ e ‘créditos’. Dentro das primeiras três opções haverá um submenu com várias opções relacionadas com o tema. O utilizador poderá a partir de qualquer ponto da aplicação voltar para o menu principal directamente.

Desenvolvimento do Layout

Desenho funcional

Requisitos funcionais
A aplicação inicia como o aparecimento do logotipo da aplicação que serve para dar informações ao utilizador sobre a aplicação que está a utilizar. Passa-se de seguida para um loading da aplicação em que ocorre a entrada de uma linhas que darão forma a uma máquina fotográfica enquanto a aplicação carrega. No fim do loading a aplicação passa automaticamente para o menu principal em que o utilizador tem à escolha quatro opções.
A primeira opção é o dslr e dentro dessa opção o utilizador poderá escolher entre dois submenus: a história e o funcionamento. No submenu da história estará disponível um pequeno vídeo explicativo sobre o desenvolvimento da fotografia e no submenu do funcionamento o utilizador encontrará um pequeno texto explicativo sobre as várias funções das máquinas fotográficas.
A segunda opção do menu principal é a exposição em que o utilizador poderá escolher entre as seguintes opções: iso, abertura e tempo de exposição, e em qualquer uma delas encontrará um texto explicativo sobre o tema ilustrado com imagens. A terceira opção disponível no submenu é a composição e aqui o utilizador terá disponível um extenso submenu em que as opções são os princípios fundamentais da fotografia devidamente explicados e ilustrados.
A última opção disponível no menu é a opção do simulador em que estará disponível o dito simulador que permitirá ao utilizador experimentar vários conceitos relativos à captura de imagens.
Sempre que o utilizador seleccione uma das opções do menu ocorrerá uma animação feita com linhas que ganham forma consoante a opção escolhida. Ao longo de toda a aplicação haverá música de fundo, a qual o utilizador poderá silenciar a qualquer altura da utilização da aplicação.

Desenho de interacção e usabilidade
No desenho de interacção e usabilidade tivemos em atenção o nosso público- alvo. O desenho do layout da aplicação foi feito de modo a não sobrecarregar visualmente o utilizador para que este não perdesse o foco daquilo que é mais importante na aplicação, que são os exemplos fotográficos.
As cores e as animações utilizadas foram bem pensadas de modo a manterem-se consistente ao longo de toda a aplicação para que esta não perdesse coerência e foram adequadas ao público para o qual a aplicação era dirigida.
O menu foi organizado de uma forma lógica (começando pela história da fotografia e terminando no simulador). Os ícones utilizados (som e o sobre) mantiveram-se na metáfora gráfica da aplicação e foram feitos de maneira a facilitar o reconhecimento de informação.
Para além disso tivemos em atenção outros indicadores como a facilidade de aprendizagem, introduzindo meios de navegação facilmente reconhecidos pelo utilizador, mecanismos que permitem ao utilizador saber sempre onde se encontra e como pode voltar para trás.

Desenho técnico

Na parte do desenho técnico recorremos a vários programas como Adobe Flash CS6, Adobe Ilustrator CS6, Adobe Photoshop CS6 e o Audacity. Para a criação dos cenários e dos botões utilizamos o Adobe Ilustrator CS6.


Para o tratamento das imagens utilizadas ao longo da aplicação foi utilizado o Adobe Photoshop CS6.



A implementação da aplicação foi feita em Adobe Flash utilizando actionscript2.0.
Para o tratamento da música de fundo utilizamos o Audacity.

Produção do projecto

Sites consultados

Layout

• http://www.youtube.com/watch?v=gPqnbtqkSv8

Fotografia

• http://www.photography.com/
• http://digital-photography-school.com/digital-photography-tips-for-beginners
• http://photo.tutsplus.com/
• http://www.photoforbeginners.com/
• http://www.fotografia-dg.com/

História da Fotografia

• http://wwwbr.kodak.com/BR/pt/consumer/fotografia_digital_classica/para_uma_boa_foto/historia_fotografia/historia_da_fotografia.shtml?primeiro=1
• http://achfoto.com.sapo.pt/
• http://pt.wikipedia.org/wiki/Hist%C3%B3ria_da_fotografia
• http://en.wikipedia.org/wiki/History_of_photography
• http://inventors.about.com/od/pstartinventions/a/stilphotography.htm

Simulador

• http://camerasim.com/camera-simulator/

Ideias para menus

• http://codepen.io/aardrian/pen/Cvjik