From Laboratório MM 5

Latest revision as of 06:51, 20 January 2012

Introdução

Este trabalho surgiu no âmbito da unidade curricular Laboratório Multimédia 5, e tem como principal objectivo criar um website dinâmico, utilizando as linguagens aprendidas até então, tais como, linguagens server-side PHP e MySql e client-side HTML, CSS e Javascript. Foi criada uma empresa fictícia com vista a ser rentabilizada através do website, nomeada de Trailit. Esta consiste numa rede social de partilha de viagens, mais precisamente percursos/trajectos feitos pelos utilizadores e respectivas experiências.

Objectivo do documento

Este documento tem como principal objectivo, explicar todo o processo de concepção e desenvolvimento de um website server-side, dinâmico e funcional, esclarecendo a implementação técnica de todas as componentes leccionadas em Laboratório Multimédia 5. Inicialmente, definiu-se o grafismo final e desenvolveu-se o layout das páginas Web com recurso a HTML e CSS. Visto que se tratar de um website dinâmico e baseado na tecnologia web2.0, é essencial a integração da arquitectura das 3 camadas: camada de armazenamento de dados, utilizando MYSQL, camada lógica, utilizando PHP e camada de apresentação, utilizando HTML e CSS. O processo de criação e conexão à Base de Dados associada á gestão dos conteúdos do site é também um ponto importante a referir, pois sem esta o conceito web2.0 não seria possível. E finalmente, a interacção do utilizador em conteúdos específicos, nomeadamente mapas. Esta é feita com recurso ao Google Maps Api, constituindo-se uma das partes mais importantes do site, uma vez que todo este se centra na partilha de trajectos feita através de mapas. Com vista a melhorar a apresentação de diversos conteúdos foi também utilizado Jquery.

Visão geral do projecto

Trailit é uma rede social orientada para partilha de trajectos, permitindo aos utilizadores mostrar as suas experiências em viagens. A ideia surgiu quando um dos elementos do grupo teve a intenção de fazer uma viagem para um determinado local e deparou-se com o problema de não existir estação ferroviária no mesmo. Não conhecendo os arredores foi complicado deslocar-se ao tal destino. Sendo assim, através desta rede social, muitos dos problemas deste tipo serão resolvidos, visto que os utilizadores terão a possibilidade de consultar as experiências de outros utilizadores, e ter acesso a detalhes bastantes relevantes como o custo, duração e meios de transportes utilizados na viagem, e ainda a possibilidade de pedir informações sobre locais específicos. Com vista a tornar possível estes objectivos, foram implementadas as seguintes funcionalidades: • Publicação de trajecto (assinalar pontos de interesse no mapa); • Registo de utilizadores; • Upload de imagens; • Edição de dados/perfil; • Inserção de comentários aos trajectos; • Envio de mensagens privadas aos utilizadores; • Acesso aos mapas de percursos; • Procura de trajectos; • Avaliação dos trajectos; • Envio de email à administração do site;

Estudos de design gráfico

Para definir o design gráfico da aplicação web, começou-se por escolher a paleta de cores mais indicada para o tema do site, e respectivo público-alvo, apresentada na imagem seguinte. Usou-se o cinzento claro para preencher a maior parte do site, ou seja, o background; o preto foi o eleito para o header e footer, criando maior destaque dos mesmos; o verde encontra-se presente nos botões/links do menu principal; o cor-de-rosa nos sub-menus e botões que mereçam maior realce; o cinzento mais escuro tornou-se a cor predominante das letras de todo o site. Foi também escolhida uma textura que está presente no header e no footer, transmitindo mais dinamismo ao layout. Através desta selecção de cores e do contraste, pretende-se que o utilizador consiga facilmente navegar no site identificando tudo o que procura rapidamente.

Logótipo do projecto:

Experiências Logótipos

Durante a criação do logótipo tentou-se sempre representar o tema do projecto. Este passou por várias fases, desde a representação de markers, placas de direcção, lupas e até mesmo pegadas, tentando-se sempre ilustrar o nome e objectivo do projecto. Após várias experiências, optou-se pelo uso de uma fonte diferente com duas cores, criando um contraste entre as palavras “Trail” e “it”. Este logótipo dá para ser usado tanto em fundos escuros com claros, tornando-se bastante simples e funcional.

Base de dados desenvolvida

Base de Dados

Narrativa:

Pretende-se implementar uma base de dados, cujo objectivo principal está relacionado com o armazenamento de informação proveniente da criação de uma rede social orientada para partilha de percursos e experiências entre utilizadores. Esta ideia visa ajudar as pessoas a encontrar a melhor forma de chegar a determinado local, tendo assim possibilidade de procurar trajectos e pedir informações tudo numa só plataforma. Após visualizada, o utilizador poderá regista-se, sendo guardados dados como: nome, email fotografia, username, password entre outros dados opcionais, como localidade e contacto telefónico, de forma a poder visualizar mais informações sobre experiências de outros utilizadores.

Sendo uma plataforma centrada nos trajectos realizados pelos utilizadores, pretende-se armazenar todos os pontos que os compõem com respectivas localizações (coordenadas, nome, localidade, fotografia, descrição, ordem do ponto, e tipo de transporte utilizado). Pretende-se também que cada trajecto para além dos pontos contenha uma descrição associada à experiência da viagem, custo total e duração da mesma.

A cada utilizador é permitido atribuir uma classificação aos trajectos, assim como comentá-los. Visto que se trata de uma rede social, em torno de trajectos, a possibilidade dos utilizadores seguirem outros utilizadores deve ser tomada em conta. Uma vez que o site deve permitir aos utilizadores receberem notificações quando os utilizadores seguidos adicionam novos trajectos. É também permitido aos utilizadores enviarem mensagens privadas a outros utilizadores e vice-versa. Relativamente ao trajecto este deve estar associado a uma categoria (montanha, praia, rural ou urbano), e esta deverá estar relacionada com as preferências do utilizador, permitindo que lhe sejam mostrados trajectos de acordo com as suas preferências.

Implementação

Descrição das principais funcionalidades da aplicação Web

Ao entrar no website, o utilizador tem apenas acesso à página index, tendo uma noção das funcionalidades que constituem o site. Nesta página, para além de consultar de forma simplificada (sem acesso a detalhes) os últimos trajectos inseridos na plataforma, apenas pode fazer login ou registar-se.

Após fazer o registo, o utilizador tem uma conta pessoal (que pode ser Free ou Premium) na rede-social, recebe uma mensagem a informar que efectuou o registo e, a partir desse momento, tem permissões para visualizar vários tipos de informação. Ao entrar na página index com login efectuado, o utilizador pode pesquisar trajectos e consultar todos os detalhes de cada trajecto assim como do utilizador que o inseriu.

No caso de utilizador Premium, para além das permissões comuns ao Free, tem também uma página de perfil, onde pode editar os seus dados, assim como acrescentar dados extra. Para além destas permissões o que realmente o distingue é que pode inserir novos trajectos, comentar e classificar trajectos de outros utilizadores e seguir e enviar mensagens privadas.

Na lógica da Web 2.0, o utilizador tem permissões para criar e/ou alterar todos os conteúdos do site, isto é, são os utilizadores que inserem trajectos. Desta forma, permite-se que os conteúdos da rede-social cresçam de forma exponencial e que seja cada vez mais fácil encontrar o percurso ideal para o maior número de locais.

Mapa de páginas

Mapa do Site

Server Behaviours utilizados

Os server behaviours permitem manipulação de dados de diferentes páginas. Optou-se pela implementação manual do código ao invés de usufruir das funcionalidades existentes do Dreamweaver. Porem, foram usadas funcionalidades programadas que equivalem à repeat region, insert record, update record, user authentication (login user, restrict access to page, logout user) entre outras.

             <?php do{ ?>		
			var lat = <?php echo $row['latitude']?>;
			var long = <?php echo $row['longitude']?>;
			var point = new GLatLng(lat,long);
			var marker = new GMarker(point);
			map.addOverlay(marker);

	           GEvent.addListener(marker, "click", function() {
		        point = marker.getLatLng();
			marker.openInfoWindowHtml("coisas");
		   });	
			
             <?php }while($row = mysql_fetch_array($result)); ?>

Recordsets/Queries utilizados

Os recordsets são estruturas de dados armazenados num grupo de registos da base de dados através de ligações feitas em queries. Neste projecto optou-se por concretizar os recordsets manualmente sendo estes utilizados nas na execução de login, na criação de pontos e trajectos, nas pesquisas, entre outros.

mysql_select_db('trailit', $trailIt_db_conn);
	$query_sent_sms_id = sprintf("SELECT mensagem_id_mensagem FROM mensagem_has_utilizador WHERE utilizador_id_utilizador=".$_SESSION['id_user']."")or die("erro ao selecionar");
	$result_sent_sms_id = mysql_query ($query_sent_sms_id, $trailIt_db_conn);
	$total_sent_sms_id = mysql_num_rows ($result_sent_sms_id);
	$row_sent_sms_id = mysql_fetch_assoc($result_sent_sms_id);

Parâmetros passados entre páginas

A passagem de parâmetros é uma função muito importante para a programação web, visto que temos a possibilidade de passar valores de uma página para a outra sem precisar ter que armazenar a mesma em qualquer outro lugar. No desenvolvimento do projecto, usou-se o método POST($_POST) e GET($_GET) para a passagem de parâmetros entre páginas. O POST($_POST) é utilizado quando a informação contida pelos parâmetros é relevante em termos de segurança ou quantidade de caracteres (passa mais 255 bytes que o método GET), já o GET($_GET) é considerado menos seguro porque qualquer pessoa que visualizar a URL no Browser terá acesso aos parâmetros passados na página.

<?php
//formulario
if (isset($_POST['form_register_step1'])){
		if(($_POST['nome']=="") || ($_POST['username']=="") || ($_POST['email']=="") || ($_POST['pass']=="")){
			echo 'Tem que preencher todos os campos';
		}else{
			if(($_POST['pass']) != ($_POST['conf_password'])){
					echo "o password não é igual";
					echo $_POST['pass'];
					echo $_POST['conf_password'];
				}else{
				$_SESSION['$nome'] = $_POST['nome'];
				$_SESSION['$username'] = $_POST['username'];
				$_SESSION['$email'] = $_POST['email'];
				$_SESSION['$password'] = $_POST['pass'];
				echo 'Registo Efectuado';
				header("Location: register_step2.php");	
			}
		}
	}	
?>

Integração (e.g. Flash, AJAX Frameworks, etc)

• Slideshow
  

A tecnologia Jquery foi usada no slideshow que aparece na página inicial, de forma a dar mais dinamismo ao projecto. Neste slideshow são apresentadas as etapas principais que o utilizador deve realizar para usar o website.

• Google Maps Api
  

O Javascript foi usado para a incorporação dos mapas do Google (Google Maps Api) nas páginas do projecto. O Google disponibiliza os mapas e exemplos de código para que os utilizadores possam usufruir deste serviço. Neste projecto foram usados dois mapas. No primeiro, o utilizador ao inserir uma localização adiciona um marker no respectivo lugar, mostrando as suas coordenadas e informação sobre o sítio (endereço). Ou seja, o utilizador pode guardar vários pontos (Mapa 1). No segundo mapa são mostrados todos os pontos que foram inseridos no primeiro, formando um trajecto (Mapa 2). Uma das grandes dificuldades em realizar esta etapa, foi a junção das linguagens de programação (Javascript e PHP).

Mapa 1:

<script> 
	var marker;
	var point;
	var map;
	var geocoder;

	function initialize() {
		  if (GBrowserIsCompatible()) {
			map = new GMap2(document.getElementById("map1"));
			map.setCenter(new google.maps.LatLng(39.6236,-8.0134), 6);
			map.setMapType(G_NORMAL_MAP);
			map.setUIToDefault();
			geocoder = new GClientGeocoder();	
			
			 GEvent.addListener(map, "click", function(overlay, point) {
			  if (overlay) {
			 } else {
				var center = map.getZoom();
			  }
			});
		  }
		}
		function addAddressToMap(response) {
		  map.clearOverlays();
		  if (!response || response.Status.code != 200) {
			alert("Sorry, we were unable to geocode that address");
		  } else {
			place = response.Placemark[0];
			point = new GLatLng(place.Point.coordinates[1],
								place.Point.coordinates[0]);
			marker = new GMarker(point);
			map.addOverlay(marker);
			map.setZoom(10);
			document.getElementById("lat").value=point.lat();
			document.getElementById("lon").value=point.lng();
			
			GEvent.addListener(marker, "click", function() {
				point = marker.getLatLng();
				map.setZoom(8);
				marker.openInfoWindowHtml(place.address + '<br>' +
			  '<b>Country code:</b> ' + place.AddressDetails.Country.CountryNameCode);
			});
			marker.openInfoWindowHtml(place.address + '<br>' +
			  '<b>Country code:</b> ' + place.AddressDetails.Country.CountryNameCode);
		 
		 	GEvent.addListener(map, 'singlerightclick', function(point,src,overlay) {
				if (overlay) {
				if (overlay != marker){
				map.removeOverlay(overlay)
				document.getElementById("address").value='';
				document.getElementById("lat").value='';
				document.getElementById("lon").value='';
				} 
				}else {}
				}); 
			}
		}
		function showAddress() {
		  var addresse = document.forms[0].address.value;
		  geocoder.getLocations(addresse, addAddressToMap);
		}
		function findLocation(addresse) {
		  document.forms[0].address.value = addresse;
		  showAddress();
		}
					
	</script>

Segurança

O servidor PHP contém várias funcionalidades que podem ser usadas de forma errada por utilizadores maliciosos, logo, podem ser usados métodos básicos para garantir a sua segurança. Estes métodos fazem com que os utilizadores não consigam aceder às informações que não lhes são permitidas. Neste projecto desactivou-se algumas funções como:

disable_function=phpinfo
expose_php=off 
ServerSignature=off 
disable_functions="dir, readfile, shell_exec, exec, virtual, passthu, proc_close, proc_get_status, proc_open, proc_terminate, system")
error_reporting=E_all
display_errors=off

Desenvolvimentos Futuros

Importa referir que o projecto não incorpora todas as funcionalidades inicialmente propostas, apesar de se ter tentado implementar o máximo de funcionalidades possíveis, muitas não foram realizadas por falta de tempo. Para desenvolvimentos futuros pretende-se implementar uma forma de interacção do utilizador com o mapa, que permita de uma forma mais apelativa arrastar as markers no mapa e introduzir algumas informações relevantes do percurso, mas devido a falta de conhecimentos aprofundados sobre a programação de Google Maps Api’s e de tempo, não foram realizadas todos os objectivos deste ponto. Pretende-se criar também uma galeria de fotografias, com todas as fotografias inseridas nos pontos de cada trajecto, despertando o interesse aos outros utilizadores sobre diversos sítios e consequentemente criar novos trajectos, aumentando a rede social. Aquando a inserção de um novo trajecto, deve ser possível sugerir pontos de acordo com a localidade escolhida, os já existentes na BD, optimizando assim as tabelas da BD. Pretende também adaptar a plataforma para dispositivos móveis, permitindo assim aos utilizadores criarem percursos em tempo real.

Conclusões

A realização deste projecto representou um desafio motivador, permitindo incorporar diferentes conhecimentos adquiridos na cadeira de Laboratório Multimédia 5, bem como conteúdos leccionados em outras disciplinas, sendo um projecto que engloba diferentes componentes da formação. Para que o projecto se tornasse mais original e interessante, foi também necessário pesquisar outras linguagens e adquirir conhecimentos específicos, nomeadamente, georreferenciação. Mostrou-se bastante desafiante, a criação de soluções para problemas que iam surgindo, devido, à ambição inicial, e à falta de conhecimento da viabilidade das funcionalidades a implementar. Mesmo não conseguindo implementar todos os objectivos iniciais, o resultado final exigiu grande esforço, e foi conseguido com muita pesquisa, paciência e ajuda dos docentes de Laboratório Multimédia 5. A falta de tempo derivada de muita pesquisa foi uma das grandes dificuldades, roubando grande parte do tempo para elaboração do projecto.

Referências bibliográficas

Links php
jcrop
[1]

Links Google maps api
/apis/maps
[2]
code.google
jsfiddle
getting-lat-lng-from-google-marker
google-maps-get-the-coordinates-of-a-dragged-marker
coordinates
Draggable_Markers
signup
phpsqlajax
migracaoGoogle
developer.com/java/web
[3]
exibindo-mapas-no-seu-site-google-maps
apis/maps/documentation/javascript/basics
geonames
json-googlemaps
itouchmap
codigopostal
phpsqlajax
googlecode

Links jquery
jqUploader
pixeline
jquery/?editable
jquery-plugin-tooltip
dynamic-javascript
lightbox
jquery/lightbox
rating
Jcrop
jquery_rating