No que diz respeito à sexta entrega, referente ao Módulo 6, da Unidade Curricular de Projeto, foi-nos solicitado o desenvolvimento da Versão Beta, combinado com a exposição de resultados e conclusões dos testes de usabilidade do nosso projeto.
No seguimento deste post, apresentamos, somente, a informação referente ao desenvolvimento da implementação de funcionalidades e respectivos ecrãs, que envolvem a Versão Beta.
Assim, analisando as metas definidas à priori para esta entrega, concluímos que tivemos alguma dificuldade na sua conclusão, tal como prevíamos e pretendíamos. Dentro das “users stories” que definimos como presença importante na Versão Beta, não atingimos algumas, tal como o enunciámos anteriormente, e como ilustramos na seguinte tabela:
Durante este período de desenvolvimento para a Versão Beta, o grupo continuou a sentir, como grande obstáculo, a resolução de problemas que vão surgindo, durante o processo de implementação das novas funcionalidades. No entanto, outro entrave sentido pelo grupo, baseia-se no tempo que dedicamos à ação de pesquisa, para podermos combater os problemas que nos surgem, bem como concluir a implementação das funcionalidades, que temos vindo a desenvolver.
O grupo pretende realçar o avanço na implementação de algumas funcionalidades, que não contaríamos ver desenvolvidas para esta Versão Beta do projeto, destacando-se, ao nível do Back Office, a página de estatísticas, que apresenta já uma das categorias – Número de Visualizações por Entidade. Destacamos, igualmente neste nível de desenvolvimento, a implementação do calendário interativo, que apresenta já, a ligação com a base de dados. No que diz respeito ao nível de Front Office, salientamos a implementação do aviso, que informa que o “O telemóvel não está conectado à Internet”, aquando a inatividade da mesma.
De seguida mostram-se imagens demonstrativas das principais novidades comparativamente com a última entrega.
Calendário para escolha da data da dica
Estatísticas
Ecrã de configurações do utilizador
Página de Administração
Página de visualização de candidaturas
Alertas de eliminação de dicas/contas de utilizador
Validação Client-Side de formulários
Ecrã de Login/Registo com novo botão de registo
http://youtu.be/bORZlmyDw0s
http://www.tiexpert.net/programacao/web/j
http://net.tutsplus.com/tutorials/other/e
http://www.youtube.com/watch?v=m3eSLQww3
http://stackoverflow.com/questions/95629
http://imasters.com.br/artigo/12384/jque
https://developers.google.com/chart/inte
http://www.youtube.com/watch?v=NZtgT4jgn
http://www.9lessons.info/2009/05/draw-ch
Website: http://filgud.web.ua.pt/login.php
Conta de Administração: Admin / 123456
Conta Regular: inem / 123456
Aplicação Filgud para dispositivos Android:
Neste post de #entrega06testes, pretendemos apresentar os resultados obtidos deste processo de execução de Testes de Usabilidade e de Compatibilidade, bem como as conclusões adquiridas, após a análise dos mesmos.
No seguinte ficheiro pdf apresentamos o relatório de Testes de Usabilidade elaborado, para este ponto da #entrega06testes.
Testes de Usabilidade e Compatibilidade
O próximo vídeo ilustra o nosso ambiente de testes e o caminho percorrido pelos utilizadores de teste.
Para esta fase de testes, procedemos também à realização de Testes de Compatibilidade das nossas plataformas.
Para tal, respeitante à Aplicação Móvel, experienciámo-la em vários dispositivos móveis android, designadamente “Samsung Galaxy Gio”, “Huawei Ascend G300” e “Samsung Galaxy Tab”, para além do já habitual “Sapo a5”, como demonstramos na seguinte imagem:
Referente à Página Web procedemos ao teste de compatibilidade em diferentes browsers, nomeadamente Firefox, Google Chrome, Safari e Internet Explorer, como apresentamos na seguinte imagem:
Neste teste, verificámos que a nossa Página Web se comporta de forma adequada em todos os browsers, à exceção do Internet Explorer, onde apresenta alguns problemas relacionados com a incompatibilidade de CSS3, que estarão corrigidos aquando da entrega final de projeto.
Para a entrega06 referente à Versão Beta do projeto Filgud, o grupo pretende implementar todas as páginas/ecrãs presentes nos nossos mapas de navegação.
Front office - Aplicação Android
Back Office - Aplicação WEB
Ainda que todos os ecrãs sejam desenvolvidos, nem todas as funcionalidades estarão concretizadas. Estas funcionalidades / user stories poderão ser vistas na próxima tabela (já publicada no post anterior), onde está definida a sua importância bem como a taxa de esforço associada a cada uma delas.
Filgud - Beta
O futuro desenvolvimento estará assente na ordem definida pela importância que atribuímos a cada funcionalidade.
- A rotação do telemóvel distorce imagem em dispositivos com baixa resolução - Alta Prioridade
- Por vezes, a rotação do telemóvel faz com que imagens alojadas no servidor desapareçam do ecrã da aplicação - Alta Prioridade
No que diz respeito à quinta entrega, referente ao Módulo 5, da Unidade Curricular de Projeto, foi-nos solicitado o desenvolvimento de um protótipo de alta fidelidade.
Para este protótipo, o grupo propôs desenvolver os objetivos referidos no post de #entrega05pre, que se distribuíam pelos dois níveis de ação do nosso projeto, designadamente o backoffice e o frontoffice.
Associado ao nível de introdução, gestão de conteúdos e download da nossa aplicação - backoffice, o grupo atingiu todos os objectivos a que se propôs desenvolver, os quais estão definidos pela cor azul, no mapa de navegação abaixo ilustrado.
Alusivo ao nível de frontoffice, o desenvolvimento da aplicação esteve assente segundo objectivos, também estes definidos no post de pre entrega, e que são demonstrados no seguinte mapa de ecrãs da aplicação, também com a cor azul.
Neste nível o grupo conseguiu ir para além das metas definidas, na medida em que desenvolveu também o ecrã de “Categorias”, tornando-se fundamental para a implementação dos restantes ecrãs da nossa aplicação, que se apoiam bastante nesta estrutura de listas.
No seguinte vídeo apresentamos o nosso protótipo, que demonstra as funcionalidades implementadas até ao momento, e que exibe a conclusão dos objetivos por nós definidos para esta entrega.
Vídeo da Demo de Alta Fidelidade
Considerações Sobre o Video
Apesar de não ter ficado demonstrado no vídeo, a nossa aplicação móvel permite que o utilizador "esconda" a barra de tabs/menu inferior, de forma a ganhar mais espaço para a visualização dos conteúdos da aplicação (esta característica é de especial importância quando o telemóvel e a aplicação se encontram no formato "landscape"), para isso necessita apenas de pressionar a tecla física de menu presente no seu dispositivo Android.
Após a exibição do nosso protótipo, importa realçar alguns aspetos, que o grupo considera importante transmitir, nomeadamente a aprendizagem a que teve de se submeter, desde o início, para o desenvolvimento da aplicação móvel para dispositivos android. O grupo aprendeu imenso com a visualização dos vídeos presentes nesta playlist do youtube, uma vez que visualizámos cerca de 70% dos 200 vídeos (tutoriais) que a compõem. Assim, este processo de aprendizagem pode ter condicionado o decurso de desenvolvimento que seria esperado, no entanto, os objectivos foram atingidos, e estamos contentes com o resultado que temos até então, que espelha assim, a recompensa do esforço do grupo. Outro aspecto importante a referir relaciona-se com a questão de acesso a um servidor, para alojamento de informação, que só nos foi cedido na manhã do dia da entrega, tendo como consequência, alterações de última hora, tanto no nível de backoffice, como de frontoffice. Deste modo, a interação que temos com o servidor não é ainda a desejada, devido a este atraso, contudo.
Principais Links Visitados:
http://www.youtube.com/playlist?list=PL2
http://phpacademy.org/
https://developers.facebook.com/docs/mob
http://www.vogella.com/
http://developer.android.com/index.html
http://www.php.net/
Para o protótipo de alta fidelidade, o grupo propõe desenvolver os seguintes ecrãs/páginas:
no front office
- ecrã de loading;
- ecrã de visualização de dica do dia;
- informação;
- partilha;
No seguinte mapa de navegação, assinalamos este ecrãs com a cor azul.
no back office
- página de loading;
- página de nova dica;
- página de minhas dicas;
No seguinte mapa de navegação, assinalamos estas páginas com a cor azul.
Neste bloco de inserção e gestão de conteúdo, existirá também uma página para promoção e descarga da aplicaçao, que será igualmente desenvolvida no âmbito do protótipo de alta fidelidade.
No que diz respeito à quarta entrega, referente ao Módulo 4, da Unidade Curricular de Projeto, foi-nos solicitado o desenvolvimento da especificação gráfica e técnica do projeto. Deste modo, pretendia-se o estudo criativo de toda a componente gráfica da nossa aplicação, bem como a caracterização da implementação técnica da mesma.
Relativamente à especificação gráfica, pretendia-se o desenvolvimento de estudos gráficos alusivos à nossa imagem de marca/ logótipo, nome, tipografia, estudo cromático, estudo de interfaces e ainda de interação.
Apresentamos então, todos os componentes deste estudo.
Tendo por base o pressuposto inicial nosso projeto “ser uma plataforma influente no quotidiano da população, no que diz respeito à prevenção da saúde e bem-estar”, procurou-se escolher uma designação que assentasse nesta visão e nos valores eleitos, tais como, a sensibilização, partilha, inovação, prevenção e saúde. Deste modo, e em resposta ao pretendido, tentámos encontrar algumas soluções de naming passíveis de associação ao projeto que nos encontramos a desenvolver, e que poderiam transmitir esta cultura de disseminação de dicas preventivas de saúde. Apresentam-se, então, alguns dos exemplos resultantes deste processo:
Das propostas acima apresentadas, julgamos que filgud se adequa melhor ao que pretendemos, e ao feeling que sentimos relativamente a este projeto. Consideramos que esta tradução fonética de feel good – “sentir-se bem”, se associa à cultura e personalidade inicialmente definidas, bem como ao valor e objectivos do produto que pretendemos apresentar, ou seja, a disseminação de boas práticas e dicas preventivas de saúde, pelos indivíduos de uma população, através de dispositivos móveis.
Após nos identificarmos com a denominação filgud, preocupámo-nos em verificar a sua existência, pelo que constatámos a sua utilização numa piscina italiana, numa empresa de climatização e noutra de marketing e publicidade, pelo que consideramos não interferir, nem passível de confundir/ equivocar a nossa identidade, bem como atrapalhar o nosso posicionamento.
Neste ponto apresentamos o estudo dos elementos principais da nossa marca - logótipo, ícone e lettering de Filgud, dos seus elementos complementares – cor e versões negativas e positivas, tipografia, regras de uso de escalas, de zona de segurança e de irregularidades e ainda um pequeno imaginário ilustrativo do nosso feelling.
O estudo da grelha revelou-se de grande importância na elaboração dos ecrãs finas da aplicação móvel. Estes foram desenvolvidos com base nas dimensões 800 x 480px e este estudo de grelhas desenvolvido esteve na base da sua criação. Contudo, estas não foram vistas como restrições ao seu desenvolvimento, mas como ponto de partida.
A maioria dos nossos ecrãs dividem-se em três grandes áreas, nomeadamente, menu superior, zona de informação e menu inferior.
De seguida apresentam-se imagens ilustrativas do processo de desenvolvimento de cada ecrã único da nossa aplicação.
Grelha Base
Principais Áreas dos Ecrãs
Ecrã de Dica Diária
Ecrã de Partilha
Ecrã de Acerca
Ecrã de Pesquisa
Ecrã de Categorias
Ecrã das Dicas de uma Categoria
Ecrã de Definições
Ecrã de Registo
Exemplo dos Ecrãs em Contexto Real
Clique aqui para visualizar uma imagem com todos os ecrãs em alta resolução.
Os ícones da nossa aplicação são provenientes de duas grandes galerias, a galeria de ícones oficiais do SO Android e a galeria de ícones oficiais das diversas áreas de saúde, disponíveis nos seguintes endereços: http://developer.android.com/design/down
http://www.hablamosjuntos.org/signage/sy
Deste modo, o grupo optou por utilizar os ícones oficias do SO Android, de forma a facilitar a utilização da nossa aplicação por parte dos utilizadores nativos deste sistema. O ícone de dica do dia é o único ícone desenvolvido inteiramente pelo grupo e corresponde ao nosso logótipo, na sua versão monocromática negativa.
Apresentam-se de seguida imagens ilustrativas dos ícones e controlos da nossa aplicação.
É de salientar que, a versão ativa dos botões corresponde ao estado destes quando são pressionados pelo utilizador e na maioria das vezes, esta versão corresponde à inversão ou alteração do gradiente de fundo dos botões ou à variação da cor do texto.
Referente à especificação técnica foi-nos proposto que caracterizássemos a implementação técnica da nossa aplicação, nomeadamente, a definição de todas as linguagens e ambientes em que se fundamenta. Esta especificação consiste numa conclusão e total definição de todos os parâmetros que lhe dizem respeito, sustentando-se no estudo primordial da viabilidade técnica e na validação da mesma, através da demo anteriormente desenvolvida.
Face a este objetivo, foram desenvolvidos os seguintes elementos.
No seguinte modelo/arquitetura apresentamos os principais componentes do nosso sistema, bem como as relações existentes entre eles.
Modelo de Camadas
Arquitetura Formal
*A próxima imagem ilustra todos os serviços presentes no nosso projeto
Nas seguintes ilustrações evidenciamos os possíveis “caminhos” nos quais, os diferentes tipos de utilizador podem “navegar”, evidenciando também as diferentes áreas funcionais da nossa aplicação.
Utilizador Não Registado
Utilizador Registado
Para o desenvolvimento dos fluxogramas foram selecionados os principais requisitos funcionais da nossa aplicação, de forma a representarmos os seus processos/algorítmos que respondam devidamente às soluções que se pretendem implementar.
Deste modo, as funcionalidades escolhidas foram as seguintes:
Login
Aceder a uma Dica
Pesquisa
Avaliar uma Dica
Feita a análise de todas as funcionalidades a implementar na nossa plataforma, foram tidas em conta as que requeriam armazenamento e gestão de dados, e desse modo, procedemos ao desenvolvimento da seguinte Base de Dados que guarda, organiza, relaciona e permite a manipulação dos dados através de sql e que são persistidos do lado do servidor do nosso serviço.
De forma a concluir esta entrega, importar referir a importância deste módulo e objetivos adjacentes, na medida em que nos permitiram desenvolver pontos cruciais para evolução do nosso projeto. Foram assim definidas pormenorizações importantes, quer a nível gráfico como técnico, que nos levarão ao desenvolvimento de um futuro protótipo de alta fidelidade.
http://inspirationfeed.com/inspiration/3
http://www.smashingmagazine.com/2010/07/2
http://www.google.com/webfonts
http://www.gliffy.com/
http://coding.smashingmagazine.com/2011/0
http://www.slideshare.net/AndroidDev/and
http://en.wikipedia.org/wiki/Multitier_a
No que diz respeito à terceira entrega, referente ao Módulo 3, da Unidade Curricular de Projeto, foi-nos solicitado o desenvolvimento de protótipos de baixa fidelidade que ilustrassem o conceito do nosso projeto, tanto a nível gráfico como técnico.
Assim, o grupo preocupou-se em perceber as principais funcionalidades e características que melhor representassem a ideia que defendemos, para o desenvolvimento das demos gráfica e técnica, que de seguida apresentamos.
Na seguinte demo gráfica pretendemos demonstrar o conceito do nosso projeto. Para tal, optámos por apresentar as principais funcionalidades daquilo que consta o nosso conceito, sendo esta ilustração feita com base numa narração exemplificativa do funcionamento e dos moldes da nossa futura aplicação.
Deste modo, considerámos pertinente apresentar as seguintes funcionalidades:
Aquando da primeira utilização da aplicação:
- Abrir a aplicação através do ícone;
- Possibilidade de escolher receber, ou não, a notificação diária com a dica preventiva de saúde;
- Visualização do ecrã da dica diária;
- Possibilidade de registo na aplicação para a realização das seguintes atividades:
- avaliar dica;
- partilhar;
- Sair da aplicação.
Aquando da indicação de notificação recebida:
- Abrir a notificação;
- Visualização da dica;
- adicionar aos favoritos (após ter efectuado o registo).
A execução desta demo gráfica teve por base a utilização das seguintes tecnologias e software:
- Justinmind Prototyper 4.5.0 Pro (Prototipagem);
- Camtasia Studio (Gravação de ecrã);
- Adobe Soundbooth CS5 (Gravação de som);
- Adobe Audition CS5.5 (Edição e montagem de som);
- Adobe Premiere Pro CS5.5 (Edição e montagem de vídeo);
- Adobe Photoshop CS5.5 (Edição de imagem).
A seguinte demo técnica tem como objectivo demonstrar a viabilidade tecnológica da funcionalidade chave do nosso projeto. Assim, achámos relevante a representação de push notifications, na medida em que se mostra como um componente bastante identificativo do nosso conceito.
Para além disso, é demonstrada a comunicação entre um servidor e um dispositivo móvel, ou seja, acesso a informação remota, posteriormente visualizada no ecrã de dica diária. Para esta demo o grupo utilizou o servidor de um dos elementos do grupo.
(Capturas de ecrâ ilustrativas do desenvolvimento em Eclipse)
A execução desta demo técnica teve por base a utilização das seguintes tecnologias e softwares:
- Eclipse (Interface de desenvolvimento);
- SDK Android (Emulador);
- DreamWeaver CS5.5 (desenvolvimento de páginas php);
- MySQL Workbench (Criação e Gestão de Base de Dados);
- Java (Linguagem de programação para desenvolvimento de Android);
- php (Linguagem de programação para desenvolvimento de páginas web);
- Adobe Photoshop CS5.5 (Edição de imagem);
- Adobe Premiere Pro CS5.5 (Edição e montagem de vídeo);
Com a realização destes protótipos de baixa fidelidade, tanto a nível gráfico como técnico, conseguimos ficar com uma ideia de como se processará todo o desenvolvimento deste projeto.
Respeitante à demo gráfica, pensamos ter sido um processo bastante benéfico para o futuro desenvolvimento gráfico, uma vez que a nossa experiência de desenvolvimento de interfaces para dispositivos móveis era nula, e este processo de experiência e testes permitiu-nos ter contacto com os aspectos ergonómicos a ter em conta, para a nossa aplicação móvel.
Nesta ultima semana, ao longo do desenvolvimento da demo técnica, deparámo-nos com a dificuldade de lidar com a nova linguagem de programação, Java, no entanto consideramos importante o facto de atingirmos o objectivo desta fase inicial de exploração e testes de desenvolvimento do sistema, ao implementarmos as principais funcionalidades, acesso a dados remotos e push notifications.
http://developer.android.com/guide/topic
http://developer.android.com/reference/a
http://stackoverflow.com/questions/60140
edit: Queríamos deixar um especial agradecimento ao nosso colega Daniel Silva pela sua disponibilidade e ajuda no desenvolvimento da demo técnica.
Este post corresponde à segunda entrega da unidade curricular de Projeto. Foi-nos solicitada uma análise com base na definição do âmbito funcional e técnico do projeto. Deste modo, os objetivos inerentes a esta proposta basearam-se na listagem dos requisitos funcionais e não funcionais e no estudo da sua viabilidade técnica.
Optámos por fazer a entrega em formato pdf, pelo que disponibilizamos um widget que permite a sua visualização diretamente no browser, contudo, deixamos também um link para o download do ficheiro original uma vez que o ficheiro alojado no Scribd perde alguma qualidade de imagem.
entrega02 - Filgud Clique aqui para efetuar o download do ficheiro originalNo que diz respeito à primeira entrega, relativa ao Módulo 1, da Unidade Curricular de Projeto, foi-nos solicitado um estudo com base no enquadramento e exploração da proposta que nos foi atribuída. Deste modo, os objetivos adjacentes a esta proposta basearam-se no levantamento do estado da arte e na preparação do briefing funcional e criativo do projeto. O grupo optou por fazer a entrega diretamente no blog, contudo, também disponibilizamos aqui a informação em formato .pdf
Com base na estrutura sugerida, referente aos assuntos a abordar em cada uma das fases, constituímos o nosso estudo atendendo aos seguintes pontos:
- Pressupostos iniciais
- Estado de arte
o Enquadramento teórico
o Análise do estado da arte
- Briefing
Visão – ser uma plataforma influente no quotidiano da população, no que diz respeito à prevenção da saúde e bem-estar
Missão – pretende-se sensibilizar os indivíduos para a prevenção na saúde, a partir de mensagens curtas e simples mediadas por tecnologias de informação e comunicação.
Valores – simplicidade, sensibilização, partilha, inovação, prevenção, saúde.
Cultura, personalidade e estilo – inovação, minimalismo, usabilidade, interação, divulgação
Valor do produto, processos ou serviços – disseminar boas práticas e dicas preventivas de saúde, pelos indivíduos de uma população, através de dispositivos móveis
Público‐alvo e Stakeholders – para além do grupo, orientador e professores da unidade curricular de Projeto, o nosso produto/serviço destina-se a um conjunto de indivíduos compreendidos entre a faixa etária dos 15 e os 44 anos de idade.
As tecnologias de informação e comunicação representam, nas sociedades contemporâneas, uma importância central, tanto ao nível das transformações de carácter tecnológico, como das alterações na organização social e nas estruturas de base das sociedades.
As novas tecnologias unem o mundo e permitem a criação da chamada, por Castells, “sociedade em rede”. Estas permitem a transmissão de fluxos de imagens, sons, entre outros media. São também estas que dinamizam e estão na base dos fluxos de informação e conhecimento, provocando a emergência de um novo modelo de sociedade, onde a geração, o processamento e a transmissão de informação se tornam fontes fundamentais de produtividade e poder, que circulam com grande facilidade num espaço-tempo virtual, dando a possibilidade, a todos, de conhecer novas maneiras de fazer, de ser e viver no mundo que nos inserimos, sendo assim capaz de provocar grandes transformações nos comportamentos da nossa sociedade.
Após a análise da capacidade das novas tecnologias de informação e da comunicação, nos dias de hoje, considerou-se pertinente a abordagem da temática da Saúde. Esta representa, para a nossa sociedade, uma dimensão central na vida individual e colectiva, tal como justificam as preocupações sociais no que dizem respeito ao tipo de alimentação, cuidados com o corpo, a adopção de estilos de vida saudáveis, entre outros aspectos. Por conseguinte, é notável a crescente utilização das TIC na procura de informação sobre estas mesmas preocupações, mas também a quantidade de informação existente e que dá resposta aos cidadãos que a procuram.
A utilização de tecnologias de informação e comunicação constitui-se assim, como um elemento essencial na construção de dinamismo comunicacional desta temática, pois permite aos indivíduos compreenderem melhor a sua própria saúde, e posteriormente agirem de forma a maximizar as suas práticas de bem-estar.
Pretende-se, deste modo, utilizar as novas tecnologias da comunicação para a promoção da saúde pública, valorizando a questão preventiva da saúde como o primeiro passo a dar por parte dos indivíduos. Cada vez mais se entende que “o paciente deve ter o poder de jogar um papel mais ativo nos seus próprios cuidados de saúde” (Collste), e a utilização dos novos media permite esta mesma atenção e responsabilização por parte dos mesmos.
Assim, pretende-se explorar/experimentar um meio capaz de sensibilizar e alertar a população para esta questão da saúde, através da utilização das TIC. E assim, aliado à prevenção em saúde, pretende-se incumbir o conceito de "dica", entenda-se, mensagem curta, direta e concisa. Estudos comprovam que a informação é mais facilmente absorvida aquando da transmissão num formato compacto e minimalista. Fenómenos como o Facebook e o Twitter são exemplos práticos desta teoria de "less is more". Neste último exemplo as mensagens são limitadas a um máximo de 140 caracteres, fazendo com que os seus utilizadores apenas escrevam o essencial para que os seus leitores apreendam a informação que pretendem transmitir.
Relativamente à análise do estado da arte do projeto foram realizadas diversas pesquisas, com o objectivo de encontrar produtos e serviços semelhantes ao nosso, tanto a nível tecnológico como temático. De um grande número de resultados encontrados, optámos por analisar, ao pormenor, apenas os cinco principais, contudo, também são disponibilizadas hiperligações para os restantes exemplos nas referências bibliográficas.
A pesquisa centrou-se nos conceitos de "dicas de saúde" e “prevenção” e, apesar de explorarmos com maior interesse as aplicações móveis e web, tivémos também em atenção outras plataformas/meios.
Mas mais importante do que a pesquisa e a descrição dos exemplos encontrados é a análise comparativa dos mesmos. Foram tidos em consideração critérios como a tecnologia, o público-alvo, as funcionalidades, a relevância e a análise SWOT.