Março 2011 - florinhas
Entrega TP3
A documentação relativa à terceira entrega de Projecto segue nas linhas seguintes.
O que vamos apresentar de seguida é a demostração gráfica do trabalho que estamos a desenvolver, onde pretendemos exibir o conceito do projecto "Florinhas do Vouga" e as suas principais funcionalidades. Pretendemos também que seja uma promoção do que será o produto final e, portanto, tivemos todo o cuidado em sequencializar de forma complexa os passos considerados de primordial importância.
A demo gráfica foi realizada em stop motion a partir de 351 fotografias e posteriormente sonorizada e narrada para dar mais dinamismo ao vídeo.
Se pretenderem seguir todos os passos do vídeo demonstrado também poderão fazê-lo através do documento Guiao_da_Demo_Grafica.pdf.
Quanto à demostração técnica, o que pretendíamos era mostar uma perspectiva do utilizador não registado e do administrador em que o utilizador não registado pode apenas visualizar os destaques, notícias e eventos. Já o administrador pode gerir o site ao inserir, modificar ou apagar conteúdos.
Neste momento não existem diferenças entre notícias e eventos uma vez que só nos interessava prototipar a inserção de dois tipos de conteúdos provenientes de áreas diferentes numa mesma página de destaques que irá corresponder à página inicial das "Florinhas do Vouga". O guião da demo ténica poderá ser consultado a partir do documento Guiao_demo_tecnica.pdf.
Podem aceder à demo técnica através do link linlabmm.ca.ua.pt/florinhas/index.php.
Os dados de acesso à demo técnica serão enviados para o email dos professores.
Com esta entrega pudemos ter uma visão mais ampla do projecto porque nos obrigou a fazer uma espécie de mapeamento daquilo que será o futuro site e desenhar os principais passos. Na dimensão mais técnica, tivémos de exercitar a mente no sentido de nos colocarmos do lado do administrador e pensar na forma mais prática de editar conteúdos, mesmo que as nossas ideias ainda não tenham sido implementadas à risca comparativamente àquilo que pretendemos para o produto final.
publicado por cristina-rocha às 23:09
Aula de 30 de Março & Reunião com a Prof. Margarida
Na aula de hoje demos continuidade ao desenvolvimento da demo técnica e gráfica, melhorando alguns pontos que achamos relevantes e que os Professores/Orientadores nos indicaram.
Quanto à demo técnica, a parte do administrador sofreu algumas alterações de modo a que quando este entre no site com a sua conta tenha a possibilidade imediata de editar todos os conteúdos directamente, evitando entrar necessariamente numa área de edição de conteúdos.
Relativamente à demo gráfica, começamos por fotografar e desenhar novamente as imagens, devido ao facto de numa fase inicial termos desenhado e fotografado na vertical, o que impossibilitou o aproveitamento do espaço disponível. Deste modo, optámos por aproveitar o melhor espaço possível colocando as páginas na horizontal. Entre outras alteraçõe, relativamente ao que se pensou inicialmente de fotografarmos um "dedo" para indicar o que estávamos a mostrar, substituimos essa indicação por um cursor, por se tratar de uma opção mais viável e não esconder a informação da página. Para dar mais realismo optamos por sonorizar o clique do rato sempre que o utilizador selecciona o botão.
A montagem fotográfica será feita depois da edição de todas as imagens, bem como a narração que pretendemos realizar para dar mais dinamismo ao vídeo promocional da demonstração gráfica do site.
Da parte da tarde, na reunião com a Professora Margarida fizemos o ponto de situação do trabalho que estamos a realizar neste momento e daquilo que é pretendido para a entrega TP4.
Por enquanto continuamos a desenvolver a demo técnica e gráfica para mostrarmos aos nossos orientadores.
publicado por diana-condeco às 19:29
Hoje reunimo-nos mais uma vez com os orientadores.
Começámos por mostrar a parte do protótipo de baixa fidelidade técnico que já está feita.
Neste momento, já está implementado na demo técnica o sistema de gestão de conteúdos dos destaques. O Administrador tem de se registar para poder inserir, apagar e editar notícias ou eventos nas respectivas páginas e nos destaques. Já existe a possibilidade de serem carregadas imagens nos conteúdos inseridos. Ao inserir uma notícia que seja destaque, a mensagem pode ser visualizada tanto na página de destaques, como na página de notícias. Se a notícia não for destaque, apenas aparece na página de notícias – o mesmo se sucede com os eventos com a diferença que estes, ficam disponíveis na página dos eventos.
As restrições estão já implementadas. O utilizador não registado pode apenas ver as páginas de destaques, notícias e eventos. Além disso pode registar-se – apesar de nesta fase da demo não existirem diferenças nos acessos às páginas entre um utilizador registado ou não registado, decidimos implementar já esta funcionalidade para enriquecer o protótipo de baixa funcionalidade e também para adiantar trabalho, dado que o código vai ser reutilizado para o trabalho final.
Implementámos também um sistema que pesquisa no título, corpo e introdução tanto dos eventos como das notícias.
A partir de agora, temos de corrigir alguns erros que ainda existam, bem como acrescentar alguns elementos que possam complementar o trabalho feito até agora, como por exemplo a transformação das imagens inseridas em thumbnail, a oportunidade de se manter a mesma imagem sem ser necessário voltar a carrega-la quando administrador edita uma notícia, etc.
Quanto ao protótipo de baixa fidelidade gráfico, mostrámos as fotografias que tirámos até ao momento que correspondem quase à totalidade daquilo que vamos prototipar. Estas fotografias mostradas de forma sequencial, correspondem a uma visita guiada ao site do ponto de vista do administrador, dos utilizadores voluntários e dos utilizadores não registados.
Após terem visualizado as imagens os orientadores deram-nos algumas indicações que se prendem com a organização de como o chat vai ser demonstrado graficamente, bem como algumas dicas que vão optimizar o resultado final do protótipo.
publicado por alff às 17:44
Aula dia 28 de Março
Antes da hora de almoço juntámo-nos para reunir as ideias e começar a fotografar os materiais que servirão de suporte à construção da demo gráfica, desenvolvida em Stop Motion. Durante a aula, e depois de termos conversado com o professor Pedro Amado, ficámos com uma visão diferente do trabalho que podemos desenvolver e reiniciámos todo o processo fotográfico. Desenhamos as áreas principais do novo site das "Florinhas do Vouga" e ilustramos com recortes dos próprios desenhos os passos mais importantes que o utilizador pode fazer aquando da navegação. A partir destes registos, falta passar à edição das imagens e fazer a montagem pretendida .
Quanto à demo técnia, optámos por prototipar nesta fase inicial as principais acções que o administrador terá a seu cargo, uma vez que uma das principais preocupações do grupo assenta essencialmente na gestão de conteúdos do site por parte da administração da instituição. Desta forma, a demonstração técnica será composta pela página de destaques (Home). Os destaques podem ser notícias ou eventos, que diferem na sua estrutura principlamente no que respeita ao período de publicação (notícias=data actual; eventos=data de início e data de fim do acontecimento). Para diferenciar a estrutura, o administrador ao inserir um destaque terá a opção de TIPO (evento ou notícia). Só são destaque as notícias que o administrador quer que sejam. Ao inserir uma notícia, o administrador pode escolher se quer apenas que ela esteja nas NOTÍCIAS ou também nos DESTAQUES (através de uma checkbox). O mesmo acontece com os eventos.
publicado por cristina-rocha às 22:41
Aula dia 23 de Março
Na aula de ontem continuámos a planificação do protótipo gráfico e iniciámos a concepção do protótipo técnico. Decidimos que vamos prototipar um gestor de conteúdos em que é necessário o admnistrador fazer login e que este poderá adicionar, editar, apagar ou carregar fotografias nas notícias.
Quanto ao protótipo gráfico desenhámos os ecrãs e as acções que vão ser representadas em stop motion.
publicado por cavaco-joana às 11:39
editado por cristina-rocha em 29/03/2011 às 20:001
Na reunião de ontem com os orientadores tivemos a defenir a melhor forma de como vamos prototipar a demo gráfica e a demo técnica. A questão incidiu essencialmente no que faria mais sentido desenvolver para a demonstração técnica, o que seria ou não suficiente e nesse seguimento começamos por fazer um esboço daquilo que pretendemos.
Na aula de hoje vamos dar seguimento ao desenvolvimento da demo gráfica e técnica.
publicado por diana-condeco às 09:27
Aula 21 de Março
No primeiro dia de primavera viemos para a aula de projecto cheias de energia e vontade de iniciar a fase de prototipagem. Durante a aula começamos por desenhar um mapa de navegação para perceber da melhor forma a extensão do novo site das "Florinhas do Vouga". Nos próximos dias, as tarefas que nos esperam consistem no desenho da demo gráfica que deverá servir para materializar visualmente o que é minimamente execuível. Já a demo técnica deverá integrar as funcionalidades do projecto e demonstrar a viabilidade tecnológica estudada.
publicado por cristina-rocha às 16:04
A documentação relativa à segunda entrega de Projecto segue nas linhas seguintes. Fizeram-se dois documentos, um com a listagem de requisitos funcionais e outro para a viabilidade técnica.
A lista dos requisitos funcionais corresponde às funcionalidades que o futuro site das "Florinhas do Vouga" terá para a satisfação das necessidades da instituição (fundo azul,) juntamente com as funcionalidades que serão apenas necessárias para a conclusão da disciplina de Projecto (a fundo verde). Foi agrupada por quatro áreas lógicas onde foram também definidas prioridades de implementação. A Área Informativa corresponde à informação básica referente à instituição e pode ser acedida por todos utilizadores. Já a Área de Administração diz respeito às funcionalidades que apenas o administrador pode utilizar para a gestão do site. Convém referir que ao administrar o site, o administrador não precisará de ter quaisquer conhecimentos de programação para o fazer, uma vez que a plataforma vai estar preparada para que qualquer pessoa possa fazer a sua gestão. Quanto à Área de Rede Social, esta só poderá ser acedida por utilizadores registados previamente, sendo que estes serão apenas os voluntários da instituição. Ao acederem a esta área, os voluntários poderão visualizar os mapas das ceias com calor; utilizar um fórum e um chat; e ter acesso a conteúdos que não serão visíveis para utilizadores comuns. Relativamente à Área de Ajuda, à semelhança da informativa, esta também estará disponível para todos os utilizadores e contemplará um suporte à utilização do site e à navegação dos utilizadores.
Ver Requisitos Funcionais
O documento da viabilidade técnica apresenta uma análise às soluções técnicas disponíveis para o desenvolvimento das funcionalidades do novo site as "florinhas do Vouga" e indica, de entre estas soluções, quais as que serão utilizadas no Projecto.
Optou-se por uma organização que distingue entre server-side, client-side, frameworks, funcionalidades específicas, software, API's, hardware e editor de conteúdos. Para cada uma destas categorias realizou-se uma pequena descrição da sua função, uma identificação das suas forças e fraquezas, uma listagem das fontes de recolha de informação, uma identificação dos requisitos funcionais onde serão aplicadas e uma justificação da escolha após comparação das diferentes soluções.
Na coluna "onde aplicar", utiliza-se como notação os números que identificam as funcionalidades no documento dos requisitos funcionais.
Importa ainda realçar que, inicialmente e por sugestão dos docentes, se equacionou a hipótese de utilizar CMS para o desenvolvimento do site, sendo que as suas funcionalidades parecem adequar-se na perfeição a este tipo de estrutura. No entanto, o grupo considerou que, apesar de ser uma solução eficaz, não seria tão enriquecedora do ponto de vista de aquisição de novos conhecimentos. Pensou-se que programar de raiz se viria a tornar uma mais-valia no futuro, apesar da total consciência do enorme trabalho que o site implica.
Ver Viabilidade Técnica
No documento da viabilidade técnica dedicou-se uma coluna para a justificação das escolhas técnicas adoptadas tendo como pontos de referência as comparações entre tecnologias similares. De qualquer forma referem-se aqui os pontos mais importantes:
Escolheu-se a linguagem de programação PHP uma vez que o grupo tem mais experiência nesta linguagem, de haver uma enormidade de exemplos e tutoriais na web e de ser uma tecnologia gratuita tendo em conta também as condições monetárias da instituição.
Optou-se pelo servidor das "Florinhas de Vouga" uma vez que este já existe para alojar o actual site.
Por ser estável e gratuito e pelo facto do grupo ter trabalhado em lab5, escolheu-se o MySQL . Para além disso, evita-se despender tempo a aprender novos conceitos com uma tecnologia que o grupo ainda não tenha experiência.
Dado que o HTML 5 não é suportado por todos os browsers e atendendo ao público-alvo em questão, que possivelmente usará versões mais antigas, optou-se por usar o HTML 4.0.1 por ser uma garantia de tecnologia comprovada.
O grupo considera que a solução mais indicada para a formatação de estilos passa pela utilização da versão CSS 2.1 dado que a versão CSS 3 é muito recente e pode não ser muito viável. Para além disso, o público-alvo em consideração possivelmente poderá não ter as últimas versões dos browsers.
A linguagem de programação que vai ser utilizada para a realização do projecto é JavaScript, uma vez que não vão ser necessárias muitas aplicações interactivas e tendo em conta que importa criar uma aplicação que seja leve, devido ao publico-alvo do site.
Optou-se por escolher JQueries e Spry uma vez que estas bibliotecas já estão familiarizadas no grupo pelo facto de terem sido utilizadas em Lab4 e LAb5. Para além disso, há imensos recursos disponíveis para complementar os conhecimentos de jQuery.
Por ser mais completo do que o lightbox, achou-se opor bem que a galeria de imagens do site das "florinhas do Vouga" fosse feita a partir do Shadowbox;
Será utilizada a tecnologia Quick Time VR uma vez que permite associar as imagens ao movimento e interactividade, no domínio da Realidade Virtual. Desta forma, será conseguido o resultado pretendido pelo grupo.
Optou-se por escolher o Adobe Photoshop visto que é um software que o grupo está habituado a utilizar e tem conhecimentos elevados com este programa. Além disso, trata-se de um programa profissional.
A escolha do programa de edição de imagem vectorial recaiu sobre o Adobe Illustrator uma vez que é neste que o grupo tem mais competências;
Optou-se por utilizar o DreamWeaver, uma vez que foi o software leccionado nas aulas. Por isso, o grupo tem mais experiência e mais à vontade para trabalhar com este programa.
A escolha recaiu sobre a utilização do MySQL Workbench tendo em consideração de utilização do MySQL e da experiência do grupo, que evita a adaptação a um novo software.
O grupo escolheu o Flyspeed dado que foi o que trabalhou no contexto de aulas.
Devido ao facto de o CKEditor ser pago, a escolha recaiu sobre o TinyMCE, ainda que este não seja tão completo como o seu concorrente.
Será usado a API da Google por haver mais materiais disponíveis e maior facilidade de documentação.
Sendo o Facebook a única rede social a que a instituição "Florinhas do Vouga" se pretende associar, a escolha por um API próprio é a única que faz sentido.
Quanto ao hardware, nós vamos utilizar o computador e a máquina fotográfica uma vez que são instrumentos indispensáveis.
Após a realização destes dois documentos, ficou-se com uma ideia mais ampla das funcionalidades necessárias para integrar no site, bem como as soluções técnicas mais adequadas para as implementar
publicado por alff às 22:28
Aula dia 16 de Março
Durante a aula de hoje continuámos a desenvolver o documento da viabilidade técnica.
Nesta aula aproveitámos para passar os esquemas que tínhamos inicialmente em papel para um ficheiro excel.
Começámos também a fazer pesquisas para encontrar tecnologias alternativas para comparar com as que nos ocorreram inicialmente. A partir daí, escolhemos quais as que mais se adequam às funcionalidades do projecto das "Florinhas do Vouga".
publicado por alff às 11:21
Durante a reunião de hoje discutimos quais as soluções técnicas mais adequadas ao nosso projecto, dando especial atenção à poossibilidade de usar ou não a tecnologia CMS. Além disso, analisámos alguns pontos fortes e fracos que poderemos vir a utilizar.