demo gráfica

#entrega03 - Demo gráfica/tecnica do documentário

anacouceiro — Fri, 16 Mar 2012 23:17:20 GMT

Boa noite, segue no post a entrega numero 3.

Para a terceira entrega -Demo técnica e Demo Gráfica, achamos necessário dividi-la por dois post referente aos dois pontos da entrega.

Nesta etapa o nosso objetivo foi demonstrar como será a interação do utilizador nas plataformas de difusão do documentário, como funcionará a integração entre essas plataformas, demonstrar como pretendemos visualmente o nosso documentário, quais as opções técnicas a tomar, etc. Além disso realizamos a pesquisa preliminar – recolha de mais informação sobre o tema, e a estrutura provisoria.

Demo Gráfica e Técnica – Documentário

Na demo gráfica/técnica do nosso documentário, optamos por fazer um pequeno clip de vídeo que serve estas duas componentes. O objetivo foi demonstrar a perspetiva que temos em relação aos tipos de planos que pretendemos usar, como ambicionamos as cenas visualmente, como será o tipo de edição tanto ao nível de transições, como de efeitos e contextualização dos intervenientes na ação através de infografias simples.
Para tal, criamos uma pequena narrativa contextualizando os elementos do grupo, o seu contexto académico, o tema de trabalho e o porque da realização do mesmo.
A quando da pré-produção deste clip, realizamos um pequeno guia dos planos que pretendíamos utilizar, sendo que serão semelhantes aos que usaremos no nosso produto final. Nesse mesmo guia, colocámos ainda a estrutura inicial que pensámos para sequenciar as filmagens na pós-produção.

Figura 1- Pequeno guia.

Posteriormente, passamos à fase da produção: as gravações. Utilizamos câmara, tripé, microfone externo e projetores, material fornecido pelo departamento.

Figura 2 - Projetor utilizado

Figura 3 - Câmara e tripé utilizados

As gravações foram efectuadas no formato HDV e gravadas numa cassete na camara , a captação do áudio foi realizado através do microfone interno da câmara e, em algumas situações, como gravações no exterior, utilizámos um microfone externo à camara para captar o som na direção do que estavamos a filmar. Optamos por utilizar o microfone interno da camara em grande parte das gravações pois perante as opções disponibilizadas pelo departamento e algumas das opiniões que nos foram dadas, achamos a melhor opção.

Figura 4 - Microfone externo utiliiizado

Passádas as gravações ies que chega a pós-produção. Para podermos editar o clip foi necessário converte-lo para formato digital, realizamos a conversão através do Adobe premiere para o formtao mpeg .

Figura 5 - ilustração da importação do vídeo

Após a conversão , passamos à edição , realizamos os cortes necessários para sequenciar a acção da forma que tinhamos previsto,(a nossa sequencia foi um pouco alterada pois na transição do papel para a montagem percebemos que existiam soluções melhores que aqueles que inicialmente tinhamos concebido), aplicamos efeitos de transição, e efeitos ao video .

Figura 6 - Ilustração dos cortes feitos no clip original

Figura 7 - Ilustração dos efeitos de transição utilizados.

Figura 8 - Ilustração dos efeitos aplicados no vídeo.

Para além deste itens , colocamos ainda infografias para a contextualização do clip e dos intervenientes. Optamos por colocar essas infografias no Adobe premiere pois não obtivemos bons resultados no Adobe afecter effects , não possuiamos conhecimentos soficientes neste software e não conseguimos produzir o que esperavamos , no entanto continuamos a trabalhar no programa para posteriormente ser possivel a sua utilização correcta e produtivamente .

Figura 9 - Ilustração da inserção de inforgrafias.

Relativamente ao tratamento de som utilizámos o Nuendo, programa que já havíamos referido na lista de requisitos funcionais . O primeiro passo para a edição é a importação do ficheiro para o programa.

Figura 10 - Ilustração da importação do ficheiro.

Após a importação, aplicamos o plugin denoise para retirar o ruido ao som, além disso uniformizámos.

Figura 11 - Ilustração do tratamento do som.

De seguida, aplicámos alguns efeitos no som ambiente que importámos , por exemplos: fade in, fade out .

Figura 12 - ilustração da aplicação do fade in

Figura 13 - ilustração da aplicação do fade in out

Figura 14 - ilustração da aplicação da redução do volume no som.

Após toda a edição do video , exportamo-lo em dois formatos : .avi e.flv. Um com mais qualidade logo mais pesado , e outro com um pouco menos de qualidade mas mais leve para que possamos coloca-lo nas nossas plataformas sem dificuldade , este foi exportado com p codec On2 VP6.

Figura 15 - Ilustração da exportação do vídeo no formato avi

Figura 16 - Ilustração da exportação do vídeo no formato flv

Segue o clip que elaboramos:

A quando da ultima reunião com o nosso orientador definimos uma estrutura:
•    Pesquisa preliminar
•    Estrutura provisória
•    Trabalho de campo
•    Guião Provisório

Para esta semana a meta que estabelecemos foi a construção da pesquisa preliminar e a estrutura provisória. Segue em anexo o nosso trabalho.

Pesquisa preliminar:

Durante estas duas semanas de trabalho, realizamos uma pesquisa mais aprofundada sobre o tema do nosso documentário – crianças com necessidades educativas especiais (NEE). Para tal, para além da investigação através de documentos e programas relacionados, decidimos “ir para o terreno” e falar com algumas pessoas que lidam com NEE:

• Pais;
• Professor;

Todas as conversas foram informais, pois o principal objetivo era perceber quais as dificuldades com que estas pessoas se deparam ao lidar com estas crianças, o que é diferente, quais as barreiras que a sociedade coloca, entre outros.
Os pais entrevistados têm um filho com Hiperplasia Congénita da Supra-Renal *. Embora seja uma deficiência que não é visível (pelo menos para já), mudou a vida deles e do filho logo depois do seu nascimento. A sua alimentação tem que ser altamente supervisionada, a dose de cortisona tem que ser tomada todos os dias à mesma hora e, caso isso não aconteça, traduz-se imediatamente no comportamento da criança que fica visivelmente agitada e agressiva.

A maior preocupação destes pais é quando o filho atingir a puberdade, uma vez que as crianças com esta deficiência têm um desenvolvimento precoce dos genitais externos e, nessa fase da sua vida, pode provocar-lhe um sentimento de diferença em relação aos outros rapazes da sua idade e pode também fazer com que seja motivo de gozo por parte dos colegas, o que é muito comum nessa faixa etária.

A conclusão que tiramos desta pequena conversa com estes pais é que as suas maiores preocupações assentam em como o seu filho vai aceitar o seu problema quando tiver idade para o compreender e como é que vai ser a sua passagem pela puberdade. O receio que ele seja excluído e gozado e não consiga lidar com isso, esteve presente em quase todo o diálogo. A nível cognitivo trata-se de um criança completamente normal apresentando até, um desenvolvimento acima da média. Isso só vem comprovar que o fato de ser uma criança com deficiência não significa que seja uma criança limitada a nível de aprendizagem. Além disso é uma criança extremamente divertida e sociável, que faz amizades com muita facilidade.

Conceitos-chave: integração, puberdade, exclusão, dependência.

O professor entrevistado pelo grupo trabalha com alunos do 1º e 2º ano do ensino primário e, tem na sua turma uma criança hiperativa e um autista, embora este último seja num grau pouco elevado.
Relativamente à criança hiperativa as principais dificuldades com que se depara na interação com a criança é o fato de esta estar constantemente distraída. Para conseguir mantê-la concentrada algum tempo num trabalho tem que criar uma forma diferente de realizar as tarefas para conseguir mante-la minimamente interessada. Além disso, como é uma criança muito ativa o seu comportamento em sala de aula não é o melhor, pelo que acaba por ser repreendida várias vezes.

No que diz respeito á criança autista, apesar de ser num nível baixo, isola-se bastante e tem bastantes dificuldades de aprendizagem. Quanto à interação com os colegas, enquanto a criança hiperativa faz amigos com facilidade e é bastante popular, a criança autista tem muita dificuldade em relacionar-se com os outros e muitas vezes é motivo de gozo por parte das outras crianças.

Uma das maiores “queixas” deste professor é a falta de apoio do ensino especial. Geralmente, crianças com este tipo de necessidades especiais necessitam de um acompanhamento diferente para que a sua aprendizagem seja a melhor. Contudo, naquela escola isso não se verifica pois são disponibilizado apenas duas horas por semana a este tipo de crianças. O professor em causa não concorda com essa situação pois sente que não consegue disponibilizar a estas duas crianças atenção suficiente para lhes proporcionar uma boa aprendizagem. Por outro lado, quando passa mais tempo com estes dois casos, tentando fornecer-lhes a atenção que precisam, acaba por prejudicar o resto dos seus alunos.

Conceitos-chave: exclusão, aprendizagem, falta de meios, falta de tempo.

Relativamente às pesquisas realizadas encontramos algumas referências bastante interessantes. A primeira delas foi um debate que ocorreu na TSF sobre a forma como as crianças com necessidades educativas especiais (NEE) são integradas nas escolas. Dão a sua opinião pais, professores, psicólogos, auxiliares e todos eles partilham da mesma opinião: há falta de professores especializados, psicólogos, terapeutas, etc. A questão principal que se levanta é: Em Portugal existe uma escola inclusiva? Para ouvir o debate basta clicar no seguinte link: http://www.tsf.pt/PaginaInicial/Interior.aspx?content_id=1515413;
Durante a investigação realizada, encontramos um site muito interessante, denominado REDEinclusão.

Trata-se de um projeto que “visa o desenvolvimento da inclusão educativa e social das crianças em jovens em situação de vulnerabilidade nomeadamente, os que vivem em condições de privação ou abandono, os que são portadores de deficiência ou doenças graves e prolongadas…”.1 Aqui encontramos alguns recursos que nos ajudaram a refletir e a formar a nossa opinião: um deles foi um documento sobre a promoção da educação inclusiva em Portugal (redeinclusao.web.ua.pt/files/fl_45.pdf) e outro que retrata a escola como uma instituição que não se encontra preparada para receber crianças diferentes (redeinclusao.web.ua.pt/files/fl_47.pdf).

Com esta pesquisa chegamos a várias conclusões mas, a mais importante de todas, é que o sistema de educação português ainda não está preparado para fornecer o ensino correto a crianças com necessidades educativas especiais. A verdade é que cada caso é um caso e é muito difícil responder da forma mais correta a todos eles, mas ainda existem muitas lacunas que têm que ser corrigidas. Ainda existe a ideia (errada) de que só quem sofre de uma deficiência “visível” é que tem direito a ter acesso a uma educação especial mas não é isso que se pretende.

Escolha do nome: Após uma sessão de brainstorming conseguimos chegar ao nome do nosso documentário: “Sou diferente e depois?”. Na nossa opinião, é um título que gera “discussão” e é apelativo.
No encadeamento do nome do nosso documentário, vem o pressuposto do mesmo, isto é, o seu objetivo. Com o desenvolvimento deste projeto pretendemos transmitir aos espetadores a noção de que as deficiências que algumas crianças têm, não as impedem de serem felizes e de se integrarem na sociedade. Contudo, também desejamos mostrar o lado menos feliz da questão, ou seja, as barreiras que estas crianças (bem como os seus pais e pessoas próximas) têm de ultrapassar todos os dias, tanto a nível social como a nível escolar.

Estrutura provisória:

Sinopse: Quais são as dificuldades sentidas por crianças com necessidades educativas especiais no seu dia-a-dia? Como é que os seus pais, professores e amigos acompanham a sua vida e os ajudam a ultrapassar os obstáculos com que se deparam? “Sou diferente e depois?” é um documentário que acompanha a vida destas crianças, recolhe opiniões dos intervenientes que participam na vida das mesmas e tenta encontrar um ponto em comum nas várias histórias. Mostrar que ser diferente não constitui um obstáculo para a felicidade e para o sucesso é o principal objetivo deste documentário.

Bibliografia:

redeinclusao.web.ua.pt/(consultado a 15/03/12);

#entrega03

adelaidejsousa — Fri, 16 Mar 2012 23:02:28 GMT

Para a entrega número 3, foi pedida uma demo técnica que demonstre a viabilidade das soluções técnicas escolhidas para o desenvolvimento do projecto e também uma demonstração gráfica que sintetize o conceito da aplicação web, tendo em conta o contexto em que se usa.

Parte 1 - Demo Técnica

Foi-nos pedido uma demo que demostrasse a viabilidade técnica do projecto, assim como uma das duas funcionalidades mais importantes recorrendo às tecnologias escolhidas pelo grupo. Escolhemos então demonstrar o motor de buscar recorrendo a programação em PHP, criação de uma BD, e alimentação de essa BD através de Feeds RSS.

Começámos por criar uma base de dados exclusivamente para esta demo, com um número reduzido de tabelas. Construimos, também um layout bastante simplificado, e um script para o motor de busca. Depois, analisamos uma página XML, e construímos um script que fosse capaz de alimentar a base de dados com dados provenientes da página XML; de cada vez que é feita uma pesquisa, esse script é executado e verifica se há ofertas novas no ficheiro XML - se existir, insere na base de dados. Por fim foi criado um fitro de ofertas que permite fazer uma pesquisa mais detalhada.

O seguinte video permite verificar como funciona o motor de pesquisa

Devido a alguns problemas técnicos, não foi possível alojar a demo num servidor, fica portanto, um ficheiro em zip de todos os ficheiros para quem quiser testar localmente.
Deve-se abrir o ficheiro index.php, e pesquisar por uma categoria (multimedia, por exemplo). Depois dos resultados serem apresentados na página, é possivel fazer uma filtragem geografica ou temporal desses mesmos registos.

demo_grafica.rar

Parte 2 - Demo Gráfica

Para a demo gráfica, começámos por desenhar os ecrãs num software próprio de mockups (www.balsamiq.com), para ilustrar os vários ecrãs e funcionalidades. Para tornar a demo mais dinâmica ficou decidido fazer uma pequena stop-motion que demostrasse o conceito da aplicação, pois assim também é mais fácil perceber a interação do utilizador com a aplicação.

É de referir que nesta demo não foram demonstradas todas as funcionalidades da aplicação, e apenas algumas com uma sequência lógica de interacção.

#entrega03 - Demo Gráfica

lorenzofabiano — Fri, 16 Mar 2012 21:04:31 GMT

Para esta demo utilizámos o Adobe Flash, escolhemos esta via pois tratando-se de um website o grupo achou que faria mais sentido fazer algo já interactivo e perto do resultado final (em termos de estrutura gráfica do site e não do grafismo em si)

Nesta Demo há vários percursos possíveis de serem efectuados:

A partir da página inicial é possivel:
- Clicar em Recentes
  - Clicar na 1ª obra
    - Na página de Obra:
      - Clicar em "Comentar" para abrir o separador dos comentários
      - Clicar no nome do autor
        Na página do Autor:
        Clicar na 2ª obra para visualizar a página de Obra
- Clicar em Timeline
  - Clicar na 2ª obra para visualizar a página de Obra
- Clicar no simbolo de Mobile (em cima à esquerda)
  - Clicar na obra central
    - Na página de Obra mobile:
      - Clicar no botão de voltar
  - Clicar no símbolo do computador
- Clicar no Logótipo (temporário)
  - Voltará à página inicial

Aspectos mais detalhados da demo gráfica estão explicados na própria demo!

Demo Gráfica

#entrega03

luisfbmelo — Fri, 16 Mar 2012 19:05:14 GMT

Para o desenvolvimento deste projecto, foi-nos proposto a realização de uma demo gráfica e demo técnica, enquadrado na unidade curricular de Projecto. Enquanto a primeira sintetiza o conceito da aplicação tendo em conta o seu contexto de uso, recorrendo para isso à ilustração das principais funcionalidades, a segunda demonstra a viabilidade técnica das tecnologias escolhidas.

Para realização da demo gráfica recorremos, numa primeira fase, a uma ferramenta de Mockups - Balsamiq (http://www.balsamiq.com/)– para ilustrar graficamente os ecrãs da aplicação e a navegação das funcionalidades da mesma, embora de uma forma muito primitiva ainda. Numa segunda etapa, para obtermos uma demo mais dinâmica e criativa optámos, então, por usar esses mockups para o vídeo, que integra a técnica de stopmotion, pois facilita a compreensão dos métodos de navegação e a organização dos diferentes componentes da aplicação.

É importante referir que não foram ilustradas todas as funcionalidades da aplicação, sendo que nos focámos especialmente na funcionalidade-chave: a pesquisa das ofertas. Assim, desta forma os passos desta demo gráfica seguem a seguinte ordem:

Imagem 1 - Ordem dos passos da demo gráfica

A demo técnica tem o objectivo de apresentar o funcionamento da aplicação de uma forma geral, recorrendo às tecnologias escolhidas pelo grupo. Neste caso, a demo encontra-se já implementada em Adobe Flash, através da linguagem ActionScript 3.0, e ao abrigo de uma base de dados, desenvolvida em MySQL. De realçar que foi necessário utilizar um web service em PHP para comunicar com a base de dados. A transferência de dados entre o PHP e o AS3 é efectuada através de JSON, pois esta está mais direcionada para a transferência de dados, uma vez que o XML apenas se foca na criação de documentos. Com a ligação entre o PHP e o AS3 através de JSON faz com que seja possível haver um processamento do lado do servidor em que são feitos pedidos de dados ao mesmo e depois os resultados desses pedidos serem reencaminhados para o AS3. Para além disso, permite a utilização de variáveis de sessão que nos possibilitam a aquisição de informação relacionada exclusivamente com o utilizador que está na sessão, como por exemplo o seu nome ou os seus interesses, dados importantes para o bom funcionamento da aplicação.

Para o armazenamento de dados que consideramos essenciais para o bom funcionamento da aplicação, criámos uma base de dados exclusivamente para esta demo:

Imagem 2 - Base de dados utilizada

Mais uma vez, apenas demonstramos algumas das ações que o utilizador poderá realizar futuramente, e que se encontram assinaladas na demo através do fundo branco e feedback visual em azul. Para além disso, o grupo percebe que tomou a decisão correta de escolher o Adobe Flash para o desenvolvimento da aplicação, pois o facto de já ser do conhecimento dos elementos do grupo fez com que se consiga compreender melhor todo o processo de transferência e processamento de dados através da integração de várias tecnologias.

Para entender melhor qual o mapa de navegação da demo técnica, apresentamos também a seguinte imagem. É de realçar que estão representados alguns ecrãs, uma vez que só foram desenvolvidas as funcionalidades mais importantes para o funcionamento da aplicação.

Imagem 3 - Mapa de navegação da demo técnica

O seguinte vídeo permite perceber melhor como a demo técnica funciona, demonstrando quais as funcionalidades que foram implementadas e como estas funcionam. No momento inicial da utilização da aplicação é necessário efectuar o login com os seguintes dados:

- Nome de utilizador: jobfinderitv

- Pin: 1234

A aplicação encontra-se disponível em formato .swf, existindo algumas recomendações a nível de hardware e software.

Hardware:

- Computador com ecrã, rato e teclado;

- Ligação à internet;

Software:

- Adobe Flash Player;

- Recomendado o sistema operativo Windows.

Ficheiro para download: demoTecnica_jobfinderitv.rar

Notas a considerar aquando a exploração da demo técnica:

- Por medidas de segurança da Adobe, e tendo em conta que se está a fazer uma ligação a uma base de dados de um servidor online, é necessário atribuir permissões num website específico da Adobe: http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04.html. Esta ação deve ser efetuada pela pessoa que executa a demo. O respectivo tutorial explica todos os passos a seguir: http://www.gryphonmountain.net/2008/05/flashhelp-tech-tip-fixing-the-flash-player-has-stopped-a-potentially-unsafe-operation-problem/. É importante reiniciar a aplicação Flash depois de dadas as permissões.

- O grupo pretendia apresentar a demo em Fullscreen, no entanto, devido a restrições de segurança por parte da Adobe, este objectivo impossibilitaria a ação de input através de teclado como é explicado pela Adobe. (link explicativo: http://www.adobe.com/devnet/flashplayer/articles/full_screen_mode.html)

- A demo técnica, sendo executada num sistema operativo MacOSX, impossibilita a transferência de variáveis de sessão entre os ficheiros PHP. A razão desta disfunção é desconhecida por parte do grupo, sendo que se recomenda a execução num sistema operativo Windows.

#entrega03

patriciaana — Fri, 16 Mar 2012 18:07:35 GMT

No enquadramento da terceira entrega em que nos foi pedido que desenvolvessemos uma demonstração gráfica e técnica de algumas funcionalidades do produto, envia-mos agora um link (em que se encontra alojada a aplicação a desenvolver) onde estão as duas demonstrações: http://nuvens.x10.mx/

Demo gráfica

Feita com materiais simples e alguns até reciclados a demonstração gráfica pretende dar a conhecer as funcionalidades básicas do projecto visualmente. Tentando mostrar os efeitos que os smartphones hoje em dia possuem, criou-se uma disposição de conteúdos que acreditamos ser bastante organizada e intuitiva na utilização da aplicação.

Demo técnica

Tecnologias usadas...

Devido a problemas técnicos, o que inicialmente estava previsto (a utilização da linguagem e de código JAVA) teve de ficar de parte. As razões que levaram a isso foram:

- a programação em JAVA é demasiado complexa para aprender em tão pouco tempo e devido ao número de funcionalidades que o projecto exige seria muito difícil conseguir implementar tudo direito;

- os programas que eventualmente poderiam ajudar a minimizar os constrangimentos do número anterior, por alguma razão desconhecida, deram erro aquando da instalação nas máquinas dos programadores o que não foi ainda detectada a causa;

Devido a isto, optou-se por programar em PHP e um pouco de JavaScript a demo técnica da aplicação cujo link foi disponibilizado em cima.

A grande desvantagem de programar em PHP neste projecto:

Uma vez que é preciso um browser para ter-se acesso à aplicação poderá haver o constrangimento da geolocalização, assim, só há três caminhos a seguir: ou conseguimos uma ferramenta que quando instalada no dispositivo do utilizador (que suporte Android também) permita detectar e guardar os dados de latitude e longitude, ou tentamos descobrir se é possível desenvolver a aplicação no seguinte site - http://ibuildapp.com/ , ou procuramos outros programas que permitam converter uma das nossas linguagens conhecidas para JAVA (esta última solução parece a menos viável e só será considerada caso nenhuma das anteriores seja possível mesmo).

As vantagens de programar em PHP neste projecto:

É uma linguagem conhecida, simples e leve. Vai permitir uma melhor performance do desempenho da aplicação. Permite conexão directa com base de dados sem precisar de Frameworks ou instalação de plugins. Pode aliar-se a outras linguagens.

Explicação da demo técnica...

1º - O utilizador deverá escolher a opção "demo técnica" na homepage do site cujo link foi disponibilizado.

2º - O utilizador deverá inserir o seu nome na caixa de texto apresentada. Caso não o faça dá uma mensagem de aviso.

3º - Ao clicar em "Submeter" o utilizador irá ver uma mensagem a dizer que a actualização do nome foi bem sucedida (caso tenha sido) e visualizará o nome que submeteu bem como a data/hora em que o fez . Estes dados já provém da base de dados.

4º - Esta demonstração poderá ser visualizada num dispositivo móvel desde que haja conexão à Internet e um browser.

Nota: A query que vai buscar à base de dados essas informações vai buscar segundo o nome introduzido o que quer dizer que caso introduza o mesmo nome na base de dados, poderá haver um conflito na query e aí embora o nome seja lá guardado não poderá ser visualizado à posteriori. Esta opção foi tomada devido ao sistema não ter um dado absoluto pelo qual possa ir pesquisar o nome inserido, uma vez que ainda não foi implementado o sistema de login. Quando foi implementado, através de uma variável de sessão será mais fácil e precisa a busca.

Esquema modificado

joanacaetano — Fri, 01 Apr 2011 13:53:15 GMT

Como dito, abaixo o esquema modificado.

Demo Gráfica

diogompereira — Thu, 31 Mar 2011 22:57:58 GMT

Boa noite!

À uns dias atrás coloquei aqui no blog uma amostra de como estava até então a demo gráfica! Hoje sinto-me capaz de vos mostrar o produto final. Não está de todo como pretendiamos porque surgiram uns pequenos problemas na gravação de voz mas penso que se consegue compreender a sequencia que queremos implementar na versão final do projecto!

Módulo 3 - Demo Gráfica

l-filipemarques — Thu, 31 Mar 2011 22:26:09 GMT

Demo gráfica/ protótipo de baixa fidelidade.

Com a nossa demo gráfica pretendemos apresentar o conceito do projecto, ilustrando os principais módulos e funcionalidades que iremos desenvolver na plataforma. São apresentados os ecrãs que integram as principais funcionalidades da plataforma, definidas com a concordância dos Orientadores de Projecto e Coordenador da Disciplina. Essas funcionalidades incluem:

- Registo da criança;

- Registo do Pai;

- Definição do nível de acesso da criança por parte do Pai;

- Adicionar amigos;

- Upload de fotografias

- Participar em evento;

- Editar Perfil;

- Escrever mensagem no Mural;

- Personalizar Avatar.

Os vários ecrãs desenhados foram sequenciados com base numa narrativa áudio (ver transcrição mais abaixo), que sugere uma lógica de navegação/interacção centrada nos requisitos funcionais que se pretendiam ilustrar. O processo de desenvolvimento da demo gráfica teve início com o estudo e escrita de um argumento para a narrativa, seguindo-se a gravação do som e desenho dos diferentes ecrãs. Por último, a demo foi “montada”, animada e sonorizada.

Para o desenho dos ecrãs foi utilizada uma ferramenta de Mockups, o Balsamiq Mockups.

Usámos a aplicação Cubase 5 em conjunto com microfone para a captação de voz, assim como alguns Plugins e Compressores Wave (Filtro Fabfilter, ProQ). Para a edição de som, foi ainda utilizado o Audacity. Infelizmente, e ao contrário do que estava inicialmente previsto e gostaríamos de ter feito, não nos foi possível gravar uma voz infantil. Este obstáculo foi ultrapassado alterando o Pitch da voz feminina que gravámos. A montagem, animação e sonorização foi realizada no Flash.

Pensamos ter conseguido um bom resultado, com uma demográfica que julgamos ser elucidativa das principais funcionalidades da plataforma.

Narrativa da demo gráfica:

“Pai, já ouviste falar de uma rede social só para crianças? Não? Olha...os meus amigos estão todos registados, é uma rede segura e vão participar num evento muito giro! Funciona assim...eu tenho que me registar e depois disso vais receber um email, onde vais ter que autorizar a minha inscrição.

Vais ter também que te registar para confirmarem quem és. Depois podes ir definir o que posso ou não fazer por níveis. Se me deixares, posso adicionar amigos, adicionar fotos, participar em eventos, editar o meu perfil, escrever no mural e autorizar-me a comentar o que os meus amigos dizem. Assim podes controlar tudo o que faço na rede social. Tem também uma coisa muito fixe, posso participar em várias actividades onde posso ganhar pontos e troca-los por objectos para personalizar o meu avatar e assim não preciso de colocar uma fotografia minha!

Então Pai, posso registar-me?"

demo_grafica_final.swf

demo_grafica_CS4_final.exe

Mockup da demo gráfica:

Entrega TP03 | Demo gráfica e demo técnica

nelsontaleite — Thu, 31 Mar 2011 20:49:33 GMT

Para o presente projecto - Memórias de Aveiro, uma rede social para um arquivo fotográfico urbano georeferenciado -, para o módulo 3 da disciplina, foi proposto a criação de uma demo gráfica, onde se pretende apresentar o conceito do projecto, demonstrar funcionalidades e ilustrar módulos/componentes principais; e a criação de uma demo técnica, onde se pretende demonstrar a viabilidade das tecnologias estudadas e representar componentes que confiram identidade ao projecto.

Demo gráfica

A nossa demo gráfica foi construída numa ferramenta de mockup: o Pidoco (https://pidoco.com/en), sendo portanto uma demo prática, onde é possível navegar e interagir. A acompanhar esta demo disponibilizámos um guião, para auxiliar à sua exploração, onde se indica um percurso que permite passar por todas as páginas e funcionalidades que constam do mockup. Ainda para auxiliar o utilizador nessa exploração estarão presentes notas explicativas em todas as páginas. Aconselha-se vivamente a leitura dessas notas laterais, antes da exploração de cada página.
Apenas de referir que para adicionar amigos é necessário aceder ao perfil do determinado utilizador, bem como para adicionar uma foto às fotos favoritas, onde é necessário um acesso à foto em primeiro lugar e só depois se fará a referida adição.

Link: http://goo.gl/A5TAz

HTML (Caso o link não funcione): demo_grafica_memorias.zip

Guião auxiliar à exploração: Guiao_da_demo_grafica_Memorias.pdf

Demo técnica

A demo técnica ao nível visual é minimalista, dado que o foco do seu desenvolvimento se centrou como é óbvio nos aspectos técnicos.
As funcionalidades implementadas são as nucleares à plataforma e compreendem:

1. Registo

No que diz respeito ao registo, o importante era realizar a sua implementação, portanto caso o registo seja bem ou mal feito, ou seja, se houver algum erro ou registo repetido, o utilizador será sempre redireccionado para o index e verá uma mensagem de sucesso no registo (isto apenas para obter algum feedback que o processo de registo terminou).

2. Login

O login seria necessário para desbloquear todas as funcionalidades, mas nesta demo o objectivo do login é apenas validar a sua implementação com comunicação com a base de dados, porque as outras páginas estão acessíveis, com ou sem login.

3. Upload múltiplo de ficheiros

O upload permite o envio simultâneo de várias imagens, mas a única forma de perceber que está a funcionar é indo à respectiva pasta no servidor. (O caminho da imagem não é gravado na base de dados, posi já demonstramos o processo de gravação de dados, aqui o importante é mesmo o envio de várias fotos)

Ainda de salientar que toda esta funcionalidade não recorre apenas a Javascript, o que permite a selecção das várias imagens é em Flash.

4. EXIF

Nesta página encontra-se a litura dos metadados EXIF de uma imagem (pré-definida nesta demo), exclusivamente para a latitude e longitude.

5. Georreferenciação

Consiste em adicionar um marcador no mapa (guarda apenas as coordenadas na base de dados, não é necessário guardar mais informação nenhuma para a demo), clicando sobre ele e/ou arrastando.

6. API do mapa

Na página do mapa apenas aparece o mapa, em bruto, com os marcadores nas respectivas coordenadas das fotos (alimentado pela base de dados). Ao carregar em cada marcado aparece o seu balão com a informação respectiva, mas com um pequeno bug, o balão aparece sempre no mesmo sítio, tal será obviamente corrigido em fases posteriores do desenvolvimento do projecto.

Quanto aos formulários, não têm para já qualquer tipo de validação dos valores introduzidos.

NOTA: Todas as funcionalidades apenas foram testadas no Firefox 4.

Link: http://linlabmm.ca.ua.pt/photomem/index.php (é necessária a ligação por VPN)

Guião auxiliar à exploração: Guiao_da_demo_tecnica_Memorias.pdf

Reflexão crítica / Conclusões

Durante o desenvolvimento das demos gráfica e técnica, o grupo apercebeu-se que estas são etapas fulcrais para um melhor entendimento do projecto, na medida da tomada de decisões quanto a opções gráficas/organização de conteúdo e quanto à eficiência técnica das funcionalidades, tanto a nível de desenvolvimento como ao nível do utilizador.
De um modo geral, conclui-se que a demo gráfica é extremamente útil para um melhor entendimento da estrutura do projecto, de como irá ser disponibilizado e apresentado o seu conteúdo, bem como as relações entre cada uma das páginas e como se irão interligar as diversas funcionalidades. É também importante para ter em conta algumas regras de usabilidade, pois no nosso caso, foi necessário uma remodelação considerável devido à falta de eficiência em várias opções de navegação e de disposição de conteúdos (nomeadamente na redundância de informação).
No entanto, o grupo sentiu ligeiras dificuldades no arranque desta demo, pois sem qualquer estudo prévio de layout, o grupo não tinha ainda uma noção bem definida da disposição dos conteúdos.
Já a demo técnica é bastante relevante para verificar, na prática, se as opções tomadas em fases anteriores eram realmente viáveis. Perceber se seria possível conceber as funcionalidades mais complexas do projecto e perceber de certa forma até que ponto seria possível implementar o pretendido (fase do “primeiro contrato” com o cliente).
Nestas demos o grupo conseguiu cumprir as expectativas e implementar tudo ao que se propôs, sem nenhum obstáculo de maior. Estas demos serviram ainda para provar que as tecnologias analisadas no módulo anterior funcionam e cumprem a sua função.
Para concluir, o grupo pode afirmar que as demos são determinantes no desenvolvimento de qualquer projecto, pois permitem uma visão futura, alterando, removendo ou adicionando aspectos e funcionalidades necessárias, bem como reduzem a incerteza técnica. Em suma, a demo gráfica e a demo técnica deram a perceber como se apresentará e como funcionará a plataforma, e que as soluções encontradas actualmente serão as mais adequadas no desenvolvimento do projecto.