posts recentes

arquivos

tags

participar

links

Quinta-feira, 31 de Março de 2011
Entrega TP03 | Demo gráfica e demo técnica

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.
 




Quarta-feira, 30 de Março de 2011
Reunião com orientadores #6 - Afinamentos nas demos

Mais uma reunião em que o grupo tirou imenso proveito.

 

Para começar, discutimos a disposição dos elementos da demo gráfica, o que resultou numa grande remodelação a nível visual e umas quantas alterações na estrutura, nomeadamente na fusão da disposição das fotografias e dos álbuns na mesma página. Fica aqui um preview em PDF: demo_grafica_memorias-specification3.pdf

Já ao nível da demo técnica, fizemos mais alguns progressos relativamente a georreferenciar no mapa, ou seja, colocar no mapa (no local pretendido) um marcador com título e descrição inseridos pelo utilizador. Completamos também o upload em massa, a funcionar "sozinho". Agora falta só juntar tudo isto numa só demo e brevemente estaremos aptos para os retoques finais.

Até amanhã!




Aula #11 - Avanços na demo técnica: integração de demo gráfica e técnica numa só

Cá estamos em mais uma aulinha.
Desta vez estamos a trabalhar na demo técnica e na gráfica ao mesmo tempo, ou seja, estamos a tentar fundir as duas demos numa só, para facilitar todo o processo, nomeadamente o de navegação. Para isso exportamos do pidoco o projecto em HTML e estamos a fazer as alterações necessárias para implementar as funcionalidades.
Verificamos que era impossível, porque as páginas que o pidoco gera são em XHTML e o código é demasiado confuso para conseguir editar correctamente (nomeadamente ao nível da interacção com a base de dados, os campos para inserir dados não são do tipo input nem estão num formulário, apesar de os termos tentado transformar, mas sem sucesso).
Vamos então ter na mesma as duas demos em separado, sendo que a navegação na demo técnica será apenas nas páginas que terão as funcionalidades que implementamos, não será uma navegação igual à da demo gráfica, pelas páginas todas.

Agora é só continuar a trabalhar e esperar pela reunião de logo à tarde para recolhermos mais opiniões/sugestões e outras coisas acabadas em -ões.
 



publicado por brunobrandao às 10:59
editado por nelsontaleite às 13:18
link do post | comentar | ver comentários (1) | adicionar aos favoritos |

Terça-feira, 29 de Março de 2011
Mais um dia, mais actualizações

Saudações!

 

Em jeito de ponto de situação, apenas de referir que no dia de hoje o grupo já praticamente completou a demo gráfica e começou o respectivo guião. 

Quanto à demo técnica, essa também está em bom caminho, vamos apenas ver se a deixamos um bocadinho mais bonita, visto que a maior parte das funcionalidades já estão testadas, implementadas e a funcionar, ficando apenas a faltar a completa integração da API do mapa e a georreferenciação.

Portanto, temos já definido o que vai acontecer na aula de amanhã. Mãos à obra! 




Segunda-feira, 28 de Março de 2011
Aula #10 - Percurso de implementação da demo técnica e conclusões sobre a demo gráfica

Início de mais uma semana!
Ora, nesta aula chegamos então a uma conclusão sobre o modo de entrega da demo gráfica, e não será em vídeo. Tal como sugerido pelo professor Pedro Amado, será utilizando as capacidades do pidoco, ou seja, vai ser possível navegar (o que será mais fácil para perceber a plataforma, em vez de andar com o vídeo "para trás e para a frente"). Terá umas notas na lateral da página para auxiliar a navegação e para se perceber o que se pode/deve fazer em cada página. Fica aqui desde já o link para o pessoal experimentar (ainda faltam alguns pormenores, as notas de auxílio e poderá ter alguns erros): http://goo.gl/8VzLu

Quanto à demo técnica, já definimos o percurso de implementação:
Começa com o utilizador não registado. Então, o primeiro passo é o registo do utilizador (para isso teremos uma pequena base de dados). Findo o registo, prossegue-se para o login, para desbloquear mais funcionalidades. Quando o utilizador inicia sessão, será redireccionado para a homepage. Daqui será possível aceder ao mapa, ao upload de fotografias e sua respectiva catalogação, pois será o núcleo da nossa plataforma onde, se resolvermos estes aspectos, teremos quase tudo resolvido.

E pronto, mãos à obra!




Domingo, 27 de Março de 2011
Avanços na demo gráfica

Na última aula iniciamos a construção da demo gráfica no pidoco, como anteriormente referido. Ora no dia de hoje a demo gráfica encontra-se numa versão bastante próxima do que será a sua versão final. Estamos ainda a ponderar fazer um vídeo narrado enquanto se "navega" na demo, mas na aula de amanhã discutiremos este assunto mais avidamente.

 

Fica aqui então o PDF do estado actual da nossa demo: demo_grafica_memorias-specification.pdf




Sexta-feira, 25 de Março de 2011
Upload de ficheiros

Finalmente tiramos da gaveta algumas das ferramentas de upload que foram aparecendo durante a pesquisa e que nos irão ser úteis no desenvolvimento do projecto.

 

1.

 Ajax Upload; A file upload script with progress-bar, drag-and-drop. This plugin uses XHR for uploading multiple files with progress-bar in FF3.6+, Safari4+, Chrome and falls back to hidden iframe based upload in other browsers, providing good user experience everywhere.”

 

url: http://valums.com/ajax-upload/

 

2.

 The developers of TinyMCE brings you Plupload, a highly usable upload handler for your Content Management Systems or similar. Plupload is currently separated into a Core API and a jQuery upload queue widget this enables you to either use it out of the box or write your own custom implementation."

 

url: http://www.plupload.com/index.php

 

3.

 Uploadify is a powerful and highly-customizable file upload script. In its simplest form, Uploadify is easy to get up and running with minimal effort and little coding knowledge."

 

url: http://www.uploadify.com/demos/

 

4.

 The Multiple File Upload Plugin (jQuery.MultiFile) is a non-obstrusive plugin for the jQuery Javascript library that helps users easily select multiple files for upload quickly and easily whilst also providing some basic validation functionality to help developers idenfity simple errors, without having to submit the form (ie.: upload files)."

 

url: http://www.fyneworks.com/jquery/multiple-file-upload/#tab-Overview




Quarta-feira, 23 de Março de 2011
Reunião com orientadores #5 - Feedback + ideias em relação às demos

Cá estamos, mais uma quarta-feira, mais uma reunião. 

Hoje obtivemos importante feedback sobre como fazer e como não fazer as demos gráfica e técnica. Como documento de apoio para o desenvolvimento da demo, em especial a gráfica, fizemos um "upgrade" ao mapa do site (já desenvolvido há algum tempo), para nos podermos guiar na navegação:

Para além disto temos um esboço (auxiliado pelos orientadores e com ícones da autoria da professora Amaro) das especificidades prioritárias a implementar na demo técnica:

 

Discutimos ainda a melhor maneira de georreferenciar e fazer o upload das fotografias, e em princípio teremos dois métodos de georreferenciar manualmente: fazer o upload da fotografia e depois marcá-la no mapa e primeiro marcar no mapa e depios fazer o upload das fotos respectivas ao local marcado (com recurso a checkboxes, para seleccionar as fotos referentes ao local indicado, de entre as fotos enviadas), também com esboços:

 descrição/georreferenciação depois do upload

  

selecção de fotos através de checkbox, depois de localizadas no mapa

 

Agora é só continuar a trabalhar nas demos!




Aula #9 - Construção da demo gráfica e estudo para a demo técnica

 Ora boas!

Na última aula foram então escolhidos os métodos para fazer as respectivas demos. A demo gráfica está a ser desenvolvida numa ferramenta de mockup, o pidoco (https://pidoco.com/), que nos vai permitir ter um esboço interactivo das páginas que a nossa plataforma terá. Quanto à demo gráfica, foram feitos alguns testes quanto à implementação de leitura dos metadados EXIF de fotografias (em PHP e jQuery), com sucesso.

Portanto, a fase de leitura de metadados EXIF está ultrapassada, já conseguimos, através de PHP.

Aqui fica um laminé, em PDF, do que para já é a nossa demo gráfica (que ainda está em construção): demo_grafica_memorias.pdf




Segunda-feira, 21 de Março de 2011
Aula #8 - Inicio do estudo para as demos gráficas e técnicas

Boa tarde!

Hoje demos início a uma nova fase de vida do nosso projecto…a fase de prototipagem. Assim começamos por ouvir as indicações do professor e de seguida por escolher a forma como iríamos apresentar a nossa demo gráfica.
Para finalizar fizemos uns rascunhos dos ecrãs.
 




mais sobre mim

 

Junho 2011
Dom
Seg
Ter
Qua
Qui
Sex
Sab

1
2
3
4

5
6
7
8
9
11

12
13
14
15
16
18

19
20
21
22
23
24
25

26
27
30