GrupoXXXX

Edição actual desde as 01h38min de 17 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

Estrutura e meios de navegação/interacção
O método de interacção que utilizamos na aplicação foi essencialmente botões de maneira a tornar a aplicação de fácil orientação e ainda possibilitar um acesso sequencial ao conteúdo disponível.

Integração e controlo de som
Primeiramente criamos botões para o controlo do som. De seguida utilizamos o audacity para editar e mudar a música para outro formato. Através da junção de uma variável incluímos a música de fundo. Esta música será constante ao longo de toda a aplicação, porém o utilizador dispõe de um botão para fazer “mute” à música quando bem entender.

Animação
A principal animação da nossa aplicação é o movimento das linhas. Para conseguir tal efeito teve de se recorrer a máscaras. Depois de exportar as linhas já com a a devida forma do flash converteu-se em movieclip e distribui-se as várias linhas pelas layers. Depois foi criada uma máscara, neste caso escolheu-se uma bola, e fez-se com que essa bola fizesse aparecer as linhas de uma determinada maneira que desse a sensação que eram as linhas que estavam a percorrer o stage. Através de código sempre que uma linha ia a 1/3 do seu percurso eram dadas ordens para que a linha seguinte começasse a aparecer. Para a animação inicial, em que aparece o logotipo e o nome da nossa aplicação tentamos recorrer a um efeito um pouco mais elaborado que foi o blur. Para este efeito são utilizados filtros contidos na biblioteca Flash: importflash.filters.BitmapFilter; flash.filters.ColorMatrixFilter; import.flsh.filters.BlurFilter.
Outra das animações da nossa aplicação é a animação de background. Exportaram-se a bolas do ilustrator, converteu-se cada uma delas num gráfico e distribuiu-se pelas layers de um só movieclip. Através do recurso às guias, fez-se o percurso das bolas sendo que os percursos tinham distâncias diferentes para que as bolas não andassem todas à mesma velocidade.
Um grande desafio foi também a aplicação do ‘drag’ num dos submenus. Este foi feito através de código pré-escrito em que apenas delimitamos o deslocamento das opções horizontalmente.
O principal desafio foi mesmo a implementação doo simulador. O simulador consiste em 3 imagens, uma de fundo, o parapeito de uma janela e uma bola de ping-pong em movimento. Foram feitas as barras de scroll com recurso à função drag para mexer o botão à qual acedemos à coordenada x para a aquisição de valores. Utilizamos o filtro blur da biblioteca flash.filters para o arrastamento da bola (com blur no eixo do x) para simular as longas exposições e a profundidade de campo. Inicialmente utilizávamos duas imagens, uma preta e uma branca com alpha variável na tentativa de conseguir simular a adição ou subtracção de stops de luz. Como este resultado não era perfeito utilizamos o filtro ColorMatrixFilter para criar uma matriz das imagens (em separado) aplicar o blur e a alteração do brilho (do fundo e bola e apenas brilho no parapeito) em simultâneo, dado que estes filtros não podem ser aplicados um após o outro conseguindo obter resultados bastante satisfatórios.

Soluções técnicas adoptadas para a resolução de problemas
Tivemos vários problemas ao longo da produção da nossa aplicação devido ao simples factos de utilizarmos muito código para as animações e por vezes esse código era mais complexo do que estávamos habituados e criavam problemas inesperados. O simulador, que era o nosso grande desafio nesta aplicação, também levantou vários problemas no que diz questão a códigos, formulas e cálculos.
Um dos primeiros problemas que surgiu foi no aparecimento de uma das linhas da camara fotografia. O facto de a linha ter de dar a volta impossibilitou que se utilizasse a mesma técnica utilizada anteriormente. Depois de uma pesquisa na net encontramos a solução, utilizar um movieclip como mascara. Utilizamos na mesma a bola mas desta vez tínhamos mais que uma bola a servir de mascara.

Conclusões

Reflexão crítica
Desde do início do desenvolvimento do produto soubemos que íamos ter alguns desafios e problemas visto que o nosso grande objectivo era a construção do simulador.
Toda a pesquisa para o conteúdo do projecto foi gratificante pois era um tema que interessava a todos os elementos dos grupos Relativamente à parte da programação foi um desafio diário todos os dias pois eram códigos com os quais não estávamos muito familiarizados e qualquer pormenor podia bloquear ou alterar as animações.
Sem dúvida o simulador foi um grande desafio pois todos os dias eram feitos avanços para a sua construção mas por outro lado surgiu sempre novos problemas. Todos os elementos do grupo participaram na sua construção utilizando os seus conhecimentos desde fotografia, programação e até cálculos matemáticos.
O grupo em geral trabalhou a bom ritmo mas deixou-se prender pela elaboração do simulador o que levou a um atraso nas demais animações. Todos elementos do grupo se orgulham do trabalho feito, porém reconhecem que existem muitos erros que poderiam ser corrigidos com um pouco mais de tempo.

Sugestões para o aperfeiçoamento e/ou desenvolvimento futuro do projecto
Existem vários parâmetros que podem ser melhorados futuramente como por exemplo:
- Maior cuidado com o tamanho das imagens;
- Uma fórmula do simulador mais perfeita;
- Maior cuidado nas transições de informação e conteúdo.

Ficheiro:Relatório LabMM1 GrupoXXXX.docx | Ficheiro:Relatório LabMM1 GrupoXXXX.pdf

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