Ifeel
From Laboratório MM 5
| (5 intermediate revisions not shown) | |||
| Line 47: | Line 47: | ||
[[File:interface4.png | center | 400px ]] | [[File:interface4.png | center | 400px ]] | ||
[[File:Logosfinais.jpg | center | 400px ]] | [[File:Logosfinais.jpg | center | 400px ]] | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | === 3. - Base de dados === | ||
| + | |||
| + | |||
| + | [[File:Captura de ecrã - 2011-01-18, 16.54.48.png | center | 1000px]] | ||
=== 4. - Descrição das principais funcionalidade da aplicação Web === | === 4. - Descrição das principais funcionalidade da aplicação Web === | ||
| Line 71: | Line 80: | ||
=== 4.1 Mapas de páginas === | === 4.1 Mapas de páginas === | ||
| + | |||
| + | |||
| + | [[File:Captura de ecrã - 2011-01-18, 20.01.57.png | center| 1000px ]] | ||
=== 4.1.1 Server Behaviours utilizados === | === 4.1.1 Server Behaviours utilizados === | ||
| + | |||
| + | Foram usados server behaviours para inserir dados relativos à base de dados, para filtrar informação, e para restringir determinadas páginas da aplicação. | ||
| + | |||
| + | |||
| + | - Insert Record | ||
| + | |||
| + | - Update Record | ||
| + | |||
| + | - Display Record Count | ||
| + | |||
| + | - Display Total Records | ||
| + | |||
| + | - User Authentication (Login User, Restrict Access to Page, Check new user) | ||
| + | |||
| + | |||
=== 4.1.2 Recordsets/Queries utilizados === | === 4.1.2 Recordsets/Queries utilizados === | ||
| + | |||
| + | Foram usados Recordsets/Queries para os comportamentos funcionais relativos à leitura de comentários, e à alteração destes, consoante o estado de espirito actual. | ||
| + | |||
| + | A sua aplicação foi assim dividida nos seguitnes tipos de querys: | ||
| + | |||
| + | - Envio e confirmação do envio, de informação para a base de dados | ||
| + | |||
| + | - Recuperar informação da base de dados | ||
| + | |||
| + | |||
=== 4.1.3 Parâmetros passados entre páginas === | === 4.1.3 Parâmetros passados entre páginas === | ||
| + | |||
| + | Para condicionar a informação apresentada entre cada página, recorreu-se a metodos Post e Get, através de formulários, recolher informação na url (nomeadamente as variáveis $id e $estado. | ||
| + | |||
| + | De forma a manter uma sessão "aberta", existe também a passagem da variável de sessão MM_Username, de forma ao utilizador se encontrar sempre autenticado. | ||
=== 4.2 Integração e explicação de algumas funcionalidades (dinâmismo da aplicação ao nível de conteúdos)=== | === 4.2 Integração e explicação de algumas funcionalidades (dinâmismo da aplicação ao nível de conteúdos)=== | ||
Latest revision as of 20:04, 18 January 2011
1. Introdução
Este trabalho, realizado no âmbito da disciplina de laboratório multimédia 5 com auxilio das disciplinas de implementação e controlo de projectos multimédia e de gestão de empresas visa criar e consequentemente implementar uma rede social web 2.0 com base nos conhecimentos adquiridos ao longo do semestre. iFeel é uma aplicação online que tem como principal função ser um meio de expressão dos utilizadores : Nesta nova e inovadora aplicação os utilizadores relacionam-se entre si com o intuito de alterar o seu estado de espírito prevalecendo o espirito de entre-ajuda e factores externos de máxima influência.
1.1 Objectivo do documento
Este documento tem como objectivo fazer o acompanhamento escrito dos processos realizados aquando a realização da aplicação iFeel. Pretende-se explicar os procedimentos tomados, as dificuldades sentidas e os problemas ultrapassados que foram surgindo durante o projecto. Por fim serão apresentadas conclusões sobre os conhecimentos adquiridos e os caminhos que foram adoptados e uma visão futurista da aplicação apresentando características que mais tarde poderão fazer parte do iFeel.
1.2 Visão geral do projecto
A web social da actualidade tem vindo a gerar utilizadores cada vez mais exigentes com os serviços oferecidos : a satisfação já faz parte de padrões muito elevados e não somente satisfatórios, de tal modo que se assiste a uma constante evolução e actualização diária de serviços. A aplicação iFeel é sustentada por dois argumentos fundamentais: dinamismo e imprevisibilidade. É objectivo a informação apresentada nunca ser a mesma (variável), mas no entanto ser adaptável ao estado de espírito do utilizador (que é seleccionado no login).
O sistema tem como objectivo não só servir de ferramenta para uma comunicação agradável entre utilizadores para que se sintam capazes de expressarem o seu estado emocial como também de contrariar estados de espírito : pretende-se que todo o serviço seja um utensílio de ajuda emocional para quem está zangado / triste se sentir feliz, e para quem está feliz se sentir triste / zangado (se o utilizador assim o decidir, claro).
2 Estudo e soluções gráficas
2.1 Estudo da cor e interface gráfica(directamente relacionadas)
Numa aplicação standart a importância dada ao design é meramente estética. No entanto, numa aplicação como o iFeel a importância dada às cores usadas vai condicionar a maneira como o utilizador se vai sentir em cada estado, o que é bom pois podemos acentuar as nossas intenções de mudança de sentimento pelas escalas cromáticas e é mau porque cada cor tem um significado, e se se fizer um mau estudo de cor podemos inferir sentimentos contrários aqueles que realmente pretendemos. Com o estudo da cor pretendemos, portanto, garantir que os tons usados na aplicação iFeel causem uma série de sensações no utilizador que promova os nossos objectivos de alteração de emoções. As cores base do iFeel são essencialmente neutras (preto, escalas de cinzento), pois queremos que as cores sejam usadas unicamente num estado específico, e desta maneira não exercer qualquer influência logo nos primeiros menus sem submissão de estado (para efeitos académicos, consideramos apenas o estado contente e zangado). Para o estado de “contente” foi usado no header a cor azul dado que esta tonalidade significa purificação, expulsa emoções negativas para além de estimular a procura da verdade interior. Nas Draggables Accordion foi usada a cor verde, que por exemplo na cultura ocidental faz associar a esperança. No geral, são cores muito positivas e optimistas, e são invocadas por qualquer pesquisa de parâmetro “happy” (ex: Kuler)
Print do header no estado contente:
Para o estado de “triste/zangado” foi usado no header a cor vermelha que embora possa estar associada a paixão e entusiasmo também está fortemente ligada a acções agressivas. Para os contentores foi usada uma cor azul escura que acaba por complementar o header vermelho vivo:
Como já referido em cima, o fundo de toda a aplicação é constante (cor cinza /preta) que pode ser representada como uma protecção, comparada a uma capa de aço, onde aquilo que está dentro não sai e aquilo que está fora não entra. Com este significado pretende-se metaforizar que os utilizadores podem-se sentir a vontade a usar a aplicação iFeel, expressando os seus sentimentos.
2.2 Estudo do logo
Com o estudo do logo pretende-se criar um símbolo, uma identidade passível de reconhecimento por parte do nosso publico alvo. O logo teve ponderações importantes, dado que teria de ser simples e apelativo, assim como a aplicação a que se destina.
3. - Base de dados
4. - Descrição das principais funcionalidade da aplicação Web
Com uma interface totalmente inovadora os utilizadores podem dar asas à sua imaginação e modifica-la a seu gosto. Através deste sistema pretende-se que os users sintam que tem total controlo da aplicação e que tudo está previamente construído a pensar nos seus gostos. Os utilizadores logo que entrem no serviço iFeel serão convidados a fazer o seu registo para ficarem identificados. Ao entrar na aplicação o utilizador é confrontado com a questão de como se sente actualmente, onde poderá escolher o estado de como gostaria de ficar futuramente. Para finalizar este processo o user é convidado a deixar um pequeno comentário acerca do seu estado. Com este passo realizado já pode na sua pagina de profile, local “onde a magia acontece”. Nesta página os utilizadores são contemplados com uma serie de “contentores” que disponibilizam as diversas funções que caracterizam o iFeel. Aqui estão presentes os “murais de estado”, local onde podem ver os comentários gerais do utilizadores com o estado inverso ao que o próprio apresenta actualmente, ou seja, se hipoteticamente o user que está com login realizado estiver triste e pretender ficar contente, neste contentor serão apresentadas mensagens de pessoas contentes. Também está presente um contentor que apresenta vídeos carregados do site “youtube” relacionados com o seu estado (aleatoriedade de vídeos devido a uma aleatoriedade de palavras neste caso, positivas) . O utilizador também terá acesso nesta página a um pequeno menu onde poderá escolher músicas de acordo com o seu estado. Estes serviços que se encontram ao dispor do utilizador vão ao encontro do estado de espírito pretendido, sendo todos eles personalizáveis. Com isto também estará presente um contentor que contem diversos jogos com o objectivo de manter o utilizador a entregar mais do seu tempo para a aplicação iFeel. Nesta página de profile também estará disponível um chat que sustenta os nossos objectivos de os utilizadores se ajudarem mutuamente. O utilizador tem à sua disponibilidade (no header) alguns icons:
.Icone de definições : reencaminha o user para uma página externa onde pode alterar valores como a sua foto, password, etc .Icone de Lupa : uma barra de pesquisa que permite procurar por outro user, que por sua vez será levado para uma página onde são apresentados os resultados para a sua procura. Nesta o utilizador tem oportunidade de se relacionar com outro iFeeler visitando o seu perfil e visualizando as suas informações pessoais, tal como enviar um email. .Icone de HELP : É também constante no header o icon de help que reencaminha o iFeeler para uma página de ajuda, onde este pode pesquisar pelo termo que pretende ser esclarecido (help desk). .Icone do Twitter : O objectivo principal para qualquer criador de redes sociais é conseguir angariar muitos utilizadores para o seu serviço, como tal não fomos excepção à regra. Para isso o utilizador tem ao seu dispor um sistema que permite actualizar o seu “twitter”. A particularidade está no valor que a mensagem tem por defeito, que não é mais que o link do próprio iFeel (que não pode ser apagado).
.Link de alteração de estado : Localizado ao pé da fotografia do utilizador este link faz arrancar a função da FancyBox (jQuery), onde o utilizador pode facilmente mudar o seu estado.
O webmaster da aplicação iFeel tem ao seu dispor uma página de backoffice onde tem acesso à informação de todos os user´s registados podendo modificar a sua visualização na base de dados com o valor de 0, banindo assim o utilizador da aplicação.
4.1 Mapas de páginas
4.1.1 Server Behaviours utilizados
Foram usados server behaviours para inserir dados relativos à base de dados, para filtrar informação, e para restringir determinadas páginas da aplicação.
- Insert Record
- Update Record
- Display Record Count
- Display Total Records
- User Authentication (Login User, Restrict Access to Page, Check new user)
4.1.2 Recordsets/Queries utilizados
Foram usados Recordsets/Queries para os comportamentos funcionais relativos à leitura de comentários, e à alteração destes, consoante o estado de espirito actual.
A sua aplicação foi assim dividida nos seguitnes tipos de querys:
- Envio e confirmação do envio, de informação para a base de dados
- Recuperar informação da base de dados
4.1.3 Parâmetros passados entre páginas
Para condicionar a informação apresentada entre cada página, recorreu-se a metodos Post e Get, através de formulários, recolher informação na url (nomeadamente as variáveis $id e $estado.
De forma a manter uma sessão "aberta", existe também a passagem da variável de sessão MM_Username, de forma ao utilizador se encontrar sempre autenticado.
4.2 Integração e explicação de algumas funcionalidades (dinâmismo da aplicação ao nível de conteúdos)
Toda a dinâmica ao nível de conteúdos é dada pela seguinte função (versão resumida, versão total pode ser vista no header.php):
$triste = ; $contente = ; if (isset($_POST['Submit1'])) {
$selecciona = $_POST['estado']; if ($selecciona == 'triste') { $teste = $you_zangado[rand(0, 8)]; shuffle($mp3_zangado); (... $musicas .= $mp3_zangado[3] , etc ...) ?>
<?php
} else if ($selecciona == 'contente') { $teste = $you_contente[rand(0, 8)]; shuffle($mp3_contente);
(... $musicas .= $mp3_zangado[3] , etc ...) ?>
Basicamente foi a função que o grupo criou para verificar se os radio buttons do form estavam preenchidos, e o respectivo valor. A partir daí conseguiríamos personalizar todos os conteúdos consoante as escolhas.
Widget do Youtube:
O Widget fornecido pela google é um código extremamente extenso, de onde descobrimos esta linha
executeList : ["termo de pesquisa (p.e. gato fedorento) "] que tornámos em executeList : ["<?php echo $teste ?>"]
Ficámos então com uma variável que poderia assumir qualquer valor, e que executada devolveria a pesquisa. O que fizemos foi construir um array de termos de pesquisa:
$you_zangado=array("Heavy Metal","Injustice","accident","alex is on fire","metallica","slipknot","marilyn manson","fight ghetto","violence");
Ao invocar a função de verificação do Radio Button simplesmente acrescentámos a seguinte linha de código:
$teste = $you_zangado[rand(0, 8)]; que vai devolver então um valor aleatório de um qualquer tema de pesquisa, ou seja, há 9 possibilidades possíveis de vídeos no iFeel (em termos académicos optámos por poucos, numa situação de utilização pública esse array seria alargado) e o widget retorna 8 resultados de vídeos. Só aqui conseguimos uma experiência diferente cada vez que se faz um refresh à página. Existem dois arrays ($you_zangado e $you_contente) que são executados segundo o estado de espírito, o que nos permite então ter vídeos mais agressivos, violentos(...) quando o utilizador assim se quer sentir, e videos alegres, felizes (...) quando o utilizador se quer sentir bem.
MP3 Player
O processo é muito semelhante ao do youtube. O player (fornecido pela Yahoo!) faz a leitura de qualquer valor <a href= que esteja no HTML. O que precisámos de fazer foi criar um array com vários links de músicas separadas por estado de espírito (array contente e array zangado), corre-la na função de verificação do radio button e fazer o echo a $musicas no HTML. A particularidade está mais uma vez numa função um pouco diferente da Random : função php shuffle, que pega em todos os elementos do array e troca-lhes a ordem cada vez que é executada.
shuffle($mp3_zangado);
$musicas = $mp3_zangado[0] . " " ; $musicas .= $mp3_zangado[1] ; $musicas .= $mp3_zangado[2] ; $musicas .= $mp3_zangado[3] ;
Ou seja, concatenamos os links das posições 0,1,2,3 (...) na variável $musicas que são automaticamente lidas pelo player. Como temos a função a fazer shuffle ao array, a posição 0,1,2,3(...) nunca tem o mesmo link, o que nos dá então a aleatoriedade das musicas do player. Mais uma vez tudo isto é executado segundo o input do utilizador no estado de espírito, o que nos permite então ter músicas mais agressivas ($mp3_zangado) no estado de espírito negativo e musicas mais alegres ($mp3_contente) no estado de espírito positivo.
Jogos
No caso dos jogos já não havia uma necessidade de aplicar esta dualidade de critérios e restrições, pois estes são feitos para proporcionar diversão. Neste caso, tivemos apenas que construir um array com todos os links embed dos jogos, fazer um shuffle() ao array e fazer um echo a uma qualquer posição do array.
Fade In / trocas de layout
As trocas dinâmicas de layout são dadas mais uma vez pela mesma função dos radio buttons.
document.getElementById('header').style.background="url('images/header2.jpg')" $(function(){ $('#header').fadeIn(1000) }); </script>
<script>
$(function(){
$('.accordionButton').hide() $('.accordionButton').fadeIn(1000) $('.accordionButton1').hide() $('.accordionButton1').fadeIn(1000) });
$(document).ready(function(){
$(".accordionButton").css("background-image","url(images/acc3.jpg)");
$(".accordionButton1").css("background-image","url(images/acc3.jpg)");
$(".acc_txt").css("color","#191919");
Ou seja, mais uma vez, ao trocar o estado de espírito a estrutura de if corre toda a função de alteração de layout, que mais não é do que pegar em ID e classes existentes e substituir por outras. O fade in apenas faz com que tudo pareça mais “mágico”.
Cookies
Um dos principais objectivos do iFeel é dar uma ilusão de liberdade : o utilizador pode mover os contentores que estão no seu perfil para onde quiser (infelizmente não conseguimos aplicar os testes de colisão). Ou seja, se o utilizador move os contentores para onde quer, que sentido faria estes voltarem ao seu sitio inicial (pre-definido em css) depois de cada refresh de página? Precisávamos então de uma maneira de gravar as coordenadas dessas mesmas divs, para que cada vez que o utilizador iniciasse sessão estas estivessem no sitio onde ele as deixou. Depois de alguma pesquisa optámos por um sistema de cookies. Php oferece de raiz funções de criação, edição, leitura e eliminação de cookies, no entanto ao implementar obtivemos muitos erros que não conseguimos resolver, o que nos fez recorrer a jQuery (não era muito o gasto pois os ficheiros de jQuery já estavam invocados para outras funcionalidades). De acordo com o que pretendíamos desenvolvemos a seguinte função
jQuery(document).ready(function() {
var days = 1;
$(".draggable").each( function( index ){
$(this).css( "left",
$.cookie( "im_" + this.id + "_left") );
$(this).css( "top",
$.cookie( "im_" + this.id + "_top") );
});
$(".draggable").draggable({cursor: "move"});
$('.draggable').show();
$('.draggable').bind('dragstop', savePos);
function savePos( event, ui ){
$.cookie("im_" + this.id + "_left",
$(this).css("left"), { path: '/', expires: days });
$.cookie("im_" + this.id + "_top",
$(this).css("top"), { path: '/', expires: days });
}
});
Basicamente são guardadas numa cookie as posições top e left das divs de class “draggable”, e esses valores são lidos de cada vez que o utilizador entra na página.
Help
No menu de Help queríamos oferecer um sistema de pesquisa, de maneira a que o utilizador pode-se de uma maneira simples e rápida esclarecer a sua dúvida. Para não sobrecarregar o HTML usámos a função fopen() com permissão de (apenas) leitura. No fundo, a função abre um ficheiro externo, neste caso um .txt e integra-o no HTML. Para o resto (pesquisa) tivemos por base o exercício da aula mas com algumas modificações, nomeadamente o feedback acerca do numero de ocorrências detectadas para aquela pesquisa e respectivo script (feedback de sucesso, de insucesso e de falta de input).
if ($ajuda_wrd != "" && $contagem != "0") {
$mensagem = "A palavra " . $ajuda_wrd . " foi encontrada " . $contagem . " vezes" ;
} else if ( $ajuda_wrd != "" && $contagem == "0" ) {
$mensagem = "A pesquisa não deu resultados"; }
else {
$mensagem = "Tem que inserir uma palavra"; }
Para facilitar a pesquisa adicionámos a barra de search e feedback da acção a um contentor amovível que acompanha o percurso do utilizador por todo o documento. Essa implementação foi feita com recurso a jQuery.
5. Desenvolvimentos futuros
As ideias foram surgindo ao longo de todo o semestre para melhorar as qualidades da aplicação iFeel. Mediante os nossos conhecimentos e capacidades de procura conseguimos implementar mais do que eram as nossas metas iniciais. Contudo, a evolução desta nova rede social poderia tomar caminhos mais abrangentes para assim conseguir atingir mais utilizadores. Pretendíamos no futuro implementar um sistema de chat em que fosse capaz um ifeeler falar directamente com outro utilizador para que houvesse maior privacidade entre eles (relação de um para um). A intenção é também de implementar um sistema de crop para imagens postas por utilizadores para que estes possam ter liberdade de as redimensionar mesmo dentro da aplicação. Com isto o ideal seria implementar um sistema de galeria de imagens para cada user, para que estes pudessem fazer upload das suas fotografias favoritas. A aplicação iFeel foi pensada e desenvolvida com o intuito de ser uma ferramenta de inter-ajuda entre utilizadores registados. Contudo as ideias vão sendo cada vez mais inovadoras e como desenvolvimento futuro pretendia-se criar um sistema de consultas psíquicas dentro da aplicação. Seriam contratados psicólogos credenciados capazes de trabalhar num sistema de home-working. Com este sistema o utilizador seria capaz de pedir auxilio ao médico que estivesse on-line na aplicação e teria direito a uma consulta a troco de um pagamento efectuado on-line (modelo de negócio associado).
6. Conclusões
Através do desenvolvimento da aplicação iFeel conseguimos aprofundar as temáticas estudadas durante o semestre na disciplina de Laboratório multimédia 5, contando com o estudo de tecnologias cliente-servidor que nos permitiu abrir horizontes acerca do “como fazer” e do “como criar” ferramentas que possibilitem as utilizadores finais uma melhor experiência na web e na maneira de como se relacionam com os outros virtualmente.
