Área Convívios

Tal como já se tinha referido e em resposta a uma das críticas colocadas, era interessante haver mais interacção entre os utilizadores. Embora a área (comunidade) que pudesse trazer esse maior contacto entre indivíduos, ainda não estivesse disponibilizada na última apresentação, acreditamos que essa não é de todo suficiente e muito menos a área do fórum, que apresenta já um saturamento por parte dos utilizadores, sobretudo no contexto de uma comunidade social. De forma a resolver esta questão decidimos criar uma nova área e esquecer o fórum, isto porque, tem maior facilidade na sua execução e, ainda, tem muito mais probabilidade de aproximar pessoas do que um fórum. Com esta área responderemos a antigos objectivos que nos tinham sido propostos como é o caso de um exemplo que nos foi dado de alguém que deseja jogar basquetebol e utiliza a aplicação para divulgar o seu desejo e arranjar pessoas interessadas, no local, data e hora propostas.

Este fim-de-semana trabalhou-se esta questão, especialmente a interface da mesma, não fugindo das outras já existentes, de maneira a combater a possibilidade de inconsistência para com os utilizadores e também, devido a dificuldade de organização dos esquemas mentais dos utilizadores.

Segue a um ficheiro jpg com o layout para essa área.

layout da área dos convívios

O que é necessário mesmo fazer?

- Inserir um link no perfil para que os utilizadores possam aceder aos seus convites publicados e poder os editar ou apagar;

- Inserir um novo ícone na área da comunidade de modo a que os utilizadores possam também filtrar a informação relativa aos convívios existentes em determinada localização geográfica;

Banner definitivo

Uma vez que apresentámos no post do dia 13 de Junho várias propostas de banner e da sua iconografia, no que respeita aos links de perfil, mensagens e log out, cabe-nos agora mostrar a solução que nos pareceu mais viável e que sofreu algumas alterações relativamente aos exemplos dados.

Banner final

Algumas alterações a considerar

Com a apresentação do módulo 3, que decorreu no passado dia 6 de Junho, uma das críticas que colocaram sobre o nosso projecto foi a questão de ainda não se fazer sentir a ideia de comunidade, nomeadamente a interacção entre utilizadores.

Sobre este aspecto, temos a referir como ponto a nosso favor, a ideia de que a área que irá evidenciar isso (comunidade), não se encontra ainda implementada, tal como a ideia do fórum. Porém, com o avançar do tempo fomos percebendo que não iremos ter disponibilidade para fazer o fórum e tendo em conta, igualmente a crítica referida, pensou-se na possibilidade de criar uma área, designada de “convívios“  (em vez do fórum) e assim, poder fazer com que os utilizadores pudessem contactar com outros membros, por recurso a convites ou pequenas mensagens. A ideia basicamente consiste em os utilizadores poderem dar a conhecer determinada informação sobre algo pessoal, ou que tenham conhecimento e disponibilizar para que outras pessoas possam aderir, comentar, divulgar e dessa forma, originar pequenas comunidades. Como exemplo, temos a ideia de alguém que pretende fazer uma festa de final de curso em sua casa e que pretende chamar os seus vizinhos mais próximos. Fazendo o convite este ficaria disponível na área dos convívios e associados a eles, sistema de pesquisa ou de filtragem de informação.

Com esta ideia colmataríamos as falhas do nosso projecto e poderíamos responder positivamente às críticas apresentadas na última apresentação.

ícones do banner

Uma das principais dificuldades verificadas na segunda fase de testes de usabilidade foi o encontro do ícone das mensagens. Inicialmente, a nossa ideia era a colocação desse link em cima do banner, uma vez que se assemelhava bastante à lógica dos fóruns de discussão. Porém, como a maior parte dos nossos testers (mesmo aqueles mais experientes) teve dificuldade em encontrar esse link, decidimos colocá-lo numa área mais visível (dentro do banner) e por recurso a iconografia.

A imagem abaixo possui um conjunto de testes efectuados, estando ainda por definir qual o banner que melhor se adapta. Façam a vossa justiça também!

Estudos efectuados no banner

Resumo do trabalho efectuado hoje

Hoje foram corrigidos alguns erros encontrados, nomeadamente de design e de funcionalidade. Foi iniciado igualmente o design da área da comunidade, bem como a conclusão da redacção do paper que posteriormente auxilia a realização do relatório. Entre as demais, as funcionalidades que foram implementadas/corrigidas no presente dia foram:

. Correcção da pesquisa dos anúncios e correcto armazenamento de alguns valores opcionais;
. Melhoramentos nas páginas de editar, nomeadamente no que toca ao feedback de erros no upload de imagens;
. Limitação do tamanho mínimo de todas as imagens em todos os uploads;
. Correcção dos espaçamentos entre os conteúdos e as barras azuis;
. Aplicação dos rollovers de cor a todos os menus;
. Correcções na estrutura das CSS, nomeadamente no que toca ao espaço entre conteúdos;
. Correcção dos comentários e introdução do tempo além da data de forma a se proceder a uma listagem mais eficaz dos comentários;
. Correcção de strings com caracteres especiais na área de anúncios;
. Implementação dos ícones melhorados nos diversos mapas;
. Implementação de uma pequena linha de ajuda em todas as páginas que contêm mapas;
. Correcção de alguns links para a área de perfil;
. Implementação da pesquisa com geocoding em todas as páginas com mapas;
. Correcção do sistema de indexação, nomeadamente na área de anúncios.

Amanha pretendemos continuar as pequenas correcções nas diversas áreas, ponderar novas funcionalidades de segurança, alterar a pesquisa de notícias por utilizador, para pesquisa de notícias por título, optimizar a formatação do perfil e alterar as label do mesmo de forma a conferir um aspecto mais de encontro ao conceito e ainda dentro deste ponto, introdução de separadores que listam os últimos conteúdos inseridos pelos utilizadores. Este processo será feito a par com a construção das CSS da comunidade, bem como da investigação e estudo de código que permita implementar as funcionalidades pensadas para esta área.

Trabalho efectuado

Este post visa provar que já foram efectuados avanços consideráveis desde a finalização do módulo posterior, nomeadamente no que se prenda aos mapas do Google.

Toda a interacção com as mapas foi optimizada. Entre as demais, as funcionalidades implementadas foram:
- Quando o utilizador navega sem ser por recurso aos botões laterais, a marker acompanha o movimento do mapa;
- A marker pode ser movida tanto por click (automáticamente se centra no meio do ecrã quando ocorre este evento) como por drag;
- O registo da latitude e longitude foi optimizado (quando ocorre um erro no registo, se o utilizador já moveu a marker, esta assume a posição anterior no mapa);
- Na homepage não registados já se pode observar o processo de clustering (agrupamento de ícones quando existe intercepção de markers);
- Funcionalidade de geocoding (inserção de um endereço, que retorna uma latitude e longitude e posteriormente a sua localização no mapa) foi optimizada. Encontra-se mais perceptível e o ícone desloca-se imediatamente para a localização pesquisada, caso o endereço seja encontrado.

Seguidamente apresentamos uma página de código javascript (uma de mais de uma dezena criada para este processo) comentada (código letra normal, comentários a negrito e itálico):

var center=new GLatLng(40.632324, -8.658042); //latitude default onde mapa deve ser centrado
var map;
var geocoder = null;
var latsgn = 1;
var lgsgn = 1;
var zm = 0;
var marker = null;
var limit=0; //declaração de todas as variáveis necessárias ao processo

function load() { //função invocada quando a página se encontra carregada
if (GBrowserIsCompatible()) { //caso o browser seja compatível com o api do google
map = new GMap(document.getElementById(“map”)); //criação do mapa
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl()); //criação dos botões de interacção
map.setCenter(new GLatLng(40.632324, -8.658042), 13); //centralização do mapa em Aveiro
map.addControl(new GOverviewMapControl()); //Mapa pequeno no canto
map.enableScrollWheelZoom(); // zoom através de scroll
geocoder = new GClientGeocoder(); //variável que permite o processo de geocoding (endereço–>latitude/longitude)
var errolat=document.getElementById(‘aplatitude’).value;
var errolng=document.getElementById(‘aplongitude’).value; //variáveis que vão armazenar os valores da latitude e longitude caso a página de registo dê erro.
if (errolat>0){ //caso esta variável já tenha uma latitude atribuida (a página de registo der erro)
marker = new GMarker(new GLatLng(errolat, errolng), {draggable: true});
map.setCenter(new GLatLng(errolat,errolng), 13); //a marker é criada e centrada na área já marcada pelo utilizador antes da página dar erro
}else{
marker = new GMarker(new GLatLng(40.632324, -8.658042), {draggable: true}); //em caso contrário a marker é centrada em Aveiro (UA)
}
map.addOverlay(marker); //coloca a marker no mapa
GEvent.addListener(map, ‘click’, function(overlay,point){
if (overlay)
{
}
else
{      //caso a marker já tenha sido criada e caso o utilizador clica no mapa
marker.setPoint(point);
if (zm == 0)
{map.setCenter(point,7); zm = 1;}
else
{map.setCenter(point);}
computepos(point); //o mapa é centrado a variável zm controla se ouve alteração no zoom e repões o zoom desejado caso tenha havido e o processo de armazenamento das coordenadas é iniciado
}
});

GEvent.addListener(marker, “dragend”, function() { //em caso de o utilizado deslocar a marker
var point = marker.getLatLng();  //a variável point assume novas coordenadas
if (zm == 0)
{map.setCenter(point,7); zm = 1;}
else
{map.setCenter(point);}
computepos(point);  //mesmo processo que o anterior descrito no evento click
});

GEvent.addListener(marker, “click”, function() {
var point = marker.getLatLng();
computepos (point); //em caso de click a variável point assume tambem as coordenadas da marker;
});

}}

function computepos (point) //processo de criação da variável, bem como de outros processos de georeferênciação ainda não aproveitados pelo grupo;
{
var latA = Math.abs(Math.round(value=point.y * 1000000.));
var lonA = Math.abs(Math.round(value=point.x * 1000000.));

if(value=point.y < 0)
{
var ls = ‘-’ + Math.floor((latA / 1000000));
}
else
{
var ls = Math.floor((latA / 1000000));
}

var lm = Math.floor(((latA/1000000) – Math.floor(latA/1000000)) * 60);
var ld = ( Math.floor(((((latA/1000000) – Math.floor(latA/1000000)) * 60) – Math.floor(((latA/1000000) – Math.floor(latA/1000000)) * 60)) * 100000) *60/100000 );

if(value=point.x < 0)
{
var lgs = ‘-’ + Math.floor((lonA / 1000000));
}
else
{
var lgs = Math.floor((lonA / 1000000));
}

var lgm = Math.floor(((lonA/1000000) – Math.floor(lonA/1000000)) * 60);
var lgd = ( Math.floor(((((lonA/1000000) – Math.floor(lonA/1000000)) * 60) – Math.floor(((lonA/1000000) – Math.floor(lonA/1000000)) * 60)) * 100000) *60/100000 );
document.getElementById(“latitude”).value=point.y;

document.getElementById(“longitude”).value=point.x; //hiddenfields no registo assumem o valor da latitude e longitude da marker, para posteriormente quando o formulário for submetido, esses valores ficarem armazenados na BD
}

function showAddress(address) { //processo de geocoding
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + ” não encontrado”);  //encontra, iguala a variável point aos valores da latitude, não encontra é gerada uma mensagem de alerta
} else {
map.setMapType(G_HYBRID_MAP);
map.setCenter(point,16); //mapa convertido em híbrido (normal+satélite), marker assume a posição das coordenadas do endereço, é efectuado um zoom máximo e a variável zm vai indicar que na próxima vez que houver uma deslocação, é efectuado um reset do zoom e que o mapa será de novo convertido para normal
zm = 1;
marker.setPoint(point);
GEvent.trigger(marker, “click”);
}
}
);
}
}

Funcionalidades implementadas no 3º módulo

Este post visa listar todas as funcionalidades realizadas, no âmbito do 3º módulo.

Registo:
. Processo de envio de e-mail já possível para mails internos da universidade, com CC para o mail da administração;
. Verificação automática em Ajax dos campos no registo;
. Nova verificação de e-mail mais eficaz;
. Nova apresentação dos campos da data.

Homepage:
. Conteúdos todos dinâmicos, exceptuando os balões na parte inferior da página, respectivos ao fórum;
. Links em todos as imagens, para a área específica respectiva.

Mensagens:
. Layout melhorado, com apenas alguns erros em IE +7;
. Rollovers e novo link para visualização da mensagem;
. Todo o processo em Ajax, exceptuando o apagar mensagens e verificação de mensagem lida ou por ler (funcionalidades implementadas neste módulo);
. Processo de envio de mensagem para os amigos (Ajax);
. Feedback de erros.

Eventos:
. Implementação do calendário;
. Indexação e navegação por entre os conteúdos;
. Nova disposição dos elementos nas barras azuis;
. Lembrar-me deste evento (agora em Ajax);
. Associar-me a este evento (em Ajax);
. Votação (em Ajax);
. Comentários (em Ajax/Com indexação);
. Local Associado (possibilidade de visualizar, adicionar e de editar nas respectivas páginas);
. Melhoramentos na disposição de conteúdos nas áreas de adicionar e editar;
. Interacção com o mapa nas áreas anteriormente mencionadas;
. Verificação dos campos no adicionar evento melhorada, e inserção da restante informação apenas após upload de fotografia;
. Apresentação dinâmica do limite de caractéres para comentários e descrição do evento;
. Correcção do focus das labels.

Anúncios/Locais/Notícias/Perfil:
. Todas as funcionalidades foram implementadas apenas neste módulo;

Mapas:
. Nova iconografia (necessita de ser melhorada);
. Testes de zoom in e zoom out nos ícones (funcionalidade não efectivamente implementada);
. Balões com informação dos respectivos ícones (ainda falta hiperligação);
. Mapa centrado em Aveiro;
. Implementação do mapa na área de Eventos, Locais e Perfil centrado na localização do respectivo item, sem os restantes elementos;
. Optimização do código e comunicação com a Base de Dados (através de variáveis de Sessão).

Código:
. Melhorias ao nível da segurança e diminuição da necessidade da passagem de parâmetros pelo URL;
. Recordsets menos fragmentados e maior utilização de consultas;
. Centralização do código javascript em páginas externas (visando maximizar segurança);
. Remodelação parcial com vista a optimizar redireccionamento após edição e/ou adicção de novos conteúdos.

Conteúdos:
. Nova regra: imagens com no mínimo 310px de largura;
. Crops em php visando dispor os conteúdos com o mesmo tamanho;
. Novos métodos de nomencleatura com vista a não duplicação de imagens ou substituição das mesmas;
. Limitação do tamanho das strings e em caso de serem maiores ao limite, encurtamento das mesmas.

Acessibilidade/Validação:
. Correcção da folha de estilos (submissão da mesma a ferramentas de validação) – Detectados 106 erros, neste momento todos corrigidos;
. Considerações ao nível da indexação (mais que um sistema, no topo e em baixo dos conteúdos);
. Correcção do focus nos formulários;
. Alts em todas as imagens.

Melhorias a serem efectuadas nas áreas já implementadas:
. Verificação do código de activação;
. Correcção dos caractéres especiais no envio de e-mail;
. Iconografia nos mapas;
. Feedback de erros e introdução de mensagens de sistema tais como: “processo correctamente concluído”;
. Loadings (gif já desenvolvido) para as áreas carregadas em Ajax;
. Alinhamentos;
. Impossibilidade de votação e associação para o utilizador responsável pela postagem dos conteúdos;
. Novas regras de validação de formulários em javascript.