From Labmm2

(Difference between revisions)

Jump to: navigation, search

Revision as of 15:16, 21 June 2011

1 Apresentação e contextualização do tema do projecto
2 Layout
3 Análise da concorrência
4 Estrutura XHTML implementada
5 Folhas de estilos (CSS)
6 Principais scripts desenvolvidas (JavaScript)
7 Integração com outras tecnologias
8 Soluções técnicas para problemas encontrados
9 Melhoramentos futuros
10 Conclusões
11 Referências bibliográficas
12 Anexos

Apresentação e contextualização do tema do projecto

Protecção e Segurança

Site de prevenção rodoviária, onde temos os conceitos de boa conduta e segurança de protecção. Com este site pretendemos implementar os efeitos que as substâncias interferem com a segurança rodoviária. A exposição de efeitos de alucinogénios e as suas consequências.

Objectivos gerais e específicos

Este site consiste em alertar os condutores para uma prevenção rodoviária eficiente, consiste essencialmente em informar os condutores para o efeito de drogas na condução.

Este site tem como objectivo criar um conceito cívico de protecção rodoviária.

Que procedimentos deverão tomar em caso de estar sob o efeito de substâncias alucinogénias.

Onde nos deveremos dirigir.

Como saber que estamos em condições para proceder a viagem.

Este site demonstra alguns factos verídicos de acontecimentos que tenham ocorrido, através de links redireccionados para jornais e revistas.

CONDIÇÕES DE UTILIZAÇÃO DO PRODUTO FINAL

Locais: Onde o utilizador tiver acesso à internet, seja num computador, telemóvel, pda, etc…

Duração média da consulta: A duração média da consulta dependerá do conteúdo que o utilizador estiver interessado. Caso esteja interessado em consultar todo o conteúdo será cerca de 40 minutos.

Publico-alvo

Este site tem como público-alvo os condutores em geral. Mais especificamente um público entre uma jovem e média idade.

Este site tem o conteúdo dirigido não só aos adultos como também aos jovens de ainda não tenham iniciado a sua vida como condutores para que possam desde tenra idade adquirirem uma ideia sólida de como se devem ou não comportar na via pública, e também para jovens que estejam a tirar a carta/licença de condução, jovens que tenham recentemente iniciado a exercer a condução de algum tipo de veiculo na via publica e daí para a frente ate uma idade mais adulta. Pois nunca é cedo nem tarde demais para ensinar as pessoas a ter civismo e bom senso na matéria de segurança rodoviária.

Os jovens/adultos que gostam de frequentar festas nocturnas/diurnas na qual existam bebidas alcoólicas, ou outro tipo de substâncias perigosas, que gostam de ingerir bebidas alcoólicas, etc., são um grupo de especial foco do nosso site.

Layout

No layout deste projecto o grupo optou pela utilização de um ambiente imersivo. No primeiro ecrã são dispostos vários elementos visuais (páginas de jornal) no espaço.O utilizador explora esta aplicação através do clique nestes elementos visuais.

Pagina Principal:

Pagina inicial de apresentação do web site - Protecção e Segurança Rodoviária.

Pagina - Estatísticas:

Pagina que mostra links de ficheiros de consulta de estatísticas de acidentes na estradas de Portugal.

Pagina - Drogas

Pagina que mostra os diferentes e mais usuais tipos de drogas consumidos em Portugal.

Pagina - Segurança

Esta pagina consiste em alertar os condutores de veículos motorizados a ter em atenção os pontos de segurança que nesta são referidos

Pagina - Emergências

Pagina com os procedimentos que deveremos ter ao ligar para o numero de Emergência internacional (112).

Pagina - Formulário

Pagina de contacto para esclarecimento de duvidas ou de futuras publicações sobre procedimentos a ter.

Pagina - Contactos

Pagina de contacto e comentários sobre o site.

Análise da concorrência

Analisamos websites portugueses e estrangeiros e vimos que são todos muito completos no que toca a disponibilização de conteúdos e consequentemente na sua organização, sendo toda a informação de fácil consulta.

As falhas que vimos foram mais a nível de interactividade, onde este cariz está pouco presente, tornando o próprio site de aspecto um pouco mais "aborrecido", não aproveitando todas as vertentes práticas e interactivas que um site com a vertente de segurança e protecção pode ter.

Temos como tal para o nosso site o objectivo de organização de conteúdos disponibilizados e a exploração ao nível interactivo e de animação, oferecendo ao utilizador um site activo em que poderá aprender as regras de segurança de uma forma mais dinâmica. Websites concorrentes:

http://www.segurancarodoviaria.pt/noticias

http://www.brisa.pt/PresentationLayer/conteudo.aspx?menuid=8

http://www.dontriskit.info/country-roads/home/

http://think.direct.gov.uk/index.html

Estrutura XHTML implementada

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Prevenção e Segurança Rodoviária</title>
<style></style>
<link media="screen" rel="stylesheet" href="css/css.css" />
<script type="text/javascript" src="js/queryLoader.js"></script>
<script type="text/javascript" src="js/script.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
</script>
	<script src="js/jquery.colorbox.js"></script>

	<script>
		$(document).ready(function(){
			
			$(".drogas").colorbox({innerWidth:"500px", innerHeight:"500px", iframe:false});
			$(".comentarios").colorbox({innerWidth:"520px", innerHeight:"500px", iframe:false});
			$(".formulario").colorbox({innerWidth:"500px", innerHeight:"500px", iframe:false});
			$(".emergencias").colorbox({innerWidth:"500px", innerHeight:"500px", iframe:false});
			$(".segurança").colorbox({innerWidth:"500px", innerHeight:"500px", iframe:false});
			$(".estatisticas").colorbox({innerWidth:"500px", innerHeight:"300px", iframe:false});
		});
	</script>
	</head>

	<body>
<div id="wrapper">
      <div id="site"> </div>
      <div id="estatisticas"> </div>
      <div id="drogas"> </div>
      <div id="seguranca"> </div>

  <div id="emergencias"> </div>
      <div id="bloco"><img src="imagens/pixel.png" width="1024px" height="650px" usemap="#bloco" /> </div>
      <div id="maps">
    <map name="bloco" id="bloco" style="visibility:hidden">
              <area shape="poly" coords="536,650,474,470,458,415,638,371,654,378,667,402,689,399,722,483,698,492,736,611,726,623,616,647,533,646,454,417" href="quemsomos.html" alt="Quem Somos" class="comentarios cboxElement" onmouseover="opacidade('bloco',1)" onmouseout="opacidade('bloco',0)" />
      <area shape="poly" coords="284,539,-4,437,-4,307,96,96,266,157,335,443,266,464,262,479,275,508" alt="estatisticas" href="estatisticas.html" class="estatisticas cboxElemnet" onmouseover="opacidade('estatisticas',1)" onmouseout="opacidade('estatisticas',0)"/>
          <area shape="poly" coords="232,8,336,442,376,432,605,27,641,42,637,1,637,1" href="drogas.html" alt="Drogas" class="drogas cboxElement" onmouseover="opacidade('drogas',1)" onmouseout="opacidade('drogas',0)" />
          <area shape="poly" coords="802,108,606,29,375,431,496,407,456,359" alt="Segurança" href="seguranca.html" class="segurança cboxElement" onmouseover="opacidade('seguranca',1)" onmouseout="opacidade('seguranca',0)"  />

          <area shape="poly" coords="733,602,1019,390,1019,157,901,32,458,360,495,406,636,372,653,379,667,402,687,399,721,483,697,492" alt="Emergências" onmouseover="opacidade('emergencias',1)" href="emergencias.html" class="emergencias cboxElement" onmouseout="opacidade('emergencias',0)" />
        <area shape="poly" coords="533,649,455,415,268,460,264,476,323,648" alt="Formulário de Contacto" onmouseover="opacidade('bloco',1)" href="formulario.html" class="formulario cboxElement" onmouseout="opacidade('bloco',0)" />
    </map>
  </div>
    </div>
<script type="text/javascript">
	QueryLoader.init();
</script>
</body>
</html>

Folhas de estilos (CSS)


/* PRELOADER  */
.QOverlay {
	background-color: #000000;
	z-index: 9999;
}
.QLoader {
	background-color: #CCCCCC;
	height: 1px;
}
/*  /PRELOADER  */

/*  DIVs  */
body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#000;
	background-color:#000;
	padding:0px;
	text-align:justify;
	margin:0px;
}
img {
	border:none;
}
#wrapper {
	width:1024px;
	height:650px;
	bottom: 50%;
	right: 50%;
	position:absolute;
}
#site {
	left: 50%;
	position: relative;
	top: 50%;
	width:1024px;
	height:650px;
	background-image:url(../imagens/fundo.jpg);
}
#bloco {
	left: 50%;
	position: relative;
	top: 50%;
	background-image:url(../imagens/bloco.png);
	width:1024px;
	height:650px;
	position:absolute;
	opacity:0.9;
	filter:alpha(opacity=90);
	-moz-opacity: .9;
}
#drogas {
	left: 50%;
	position: relative;
	top: 50%;
	width:1024px;
	height:650px;
	background-image:url(../imagens/Drogas.png);
	position:absolute;
	opacity:0.9;
	filter:alpha(opacity=90);
	-moz-opacity: .9;
}
#emergencias {
	left: 50%;
	position: relative;
	top: 50%;
	width:1024px;
	height:650px;
	background-image:url(../imagens/emergencias.png);
	position:absolute;
	opacity:0.9;
	filter:alpha(opacity=90);
	-moz-opacity: .9;
}
#seguranca {
	left: 50%;
	position: relative;
	top: 50%;
	width:1024px;
	height:650px;
	background-image:url(../imagens/Seguranca.png);
	position:absolute;
	opacity:0.9;
	filter:alpha(opacity=90);
	-moz-opacity: .9;
}
#estatisticas {
	left: 50%;
	position: relative;
	top: 50%;
	width:1024px;
	height:650px;
	background-image:url(../imagens/estatisticas.png);
	position:absolute;
	opacity:0.9;
	filter:alpha(opacity=90);
	-moz-opacity: .9;
}
#comentarios {
	background:#09F;
}
/*  /DIVs  */

h1 {
	text-align:center;
	text-transform:uppercase;
	background:#999;
	color:#fff;
}
#conteudo {
	width:475px;
	background-color:#fff;
	overflow:hidden;
	margin-bottom:25px;
}
#conteudo img {
	margin-top:20px;
	margin-right:10px;
	float:left;
}
/*
POPUP
*/
#colorbox, #cboxOverlay, #cboxWrapper {
	position:absolute;
	top:0;
	left:0;
	z-index:9999;
	overflow:hidden;
}
#cboxOverlay {
	position:fixed;
	width:100%;
	height:100%;
}
#cboxMiddleLeft, #cboxBottomLeft {
	clear:left;
}
#cboxContent {
	position:relative;
}
#cboxLoadedContent {
	overflow:auto;
}
#cboxTitle {
	margin:0;
}
#cboxLoadingOverlay, #cboxLoadingGraphic {
	position:absolute;
	top:0;
	left:0;
	width:100%;
}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow {
	cursor:pointer;
}
.cboxPhoto {
	float:left;
	margin:auto;
	border:0;
	display:block;
}
.cboxIframe {
	width:100%;
	height:100%;
	display:block;
	border:0;
}
/* 
CSS CONTEUDO POPUP
*/
#cboxOverlay {
	background:#fff;
}
#colorbox {
}
#cboxTopLeft {
	width:25px;
	height:25px;
	background:url(../imagens/colorbox/border1.png) no-repeat 0 0;
}
#cboxTopCenter {
	height:25px;
	background:url(../imagens/colorbox/border1.png) repeat-x 0 -50px;
}
#cboxTopRight {
	width:25px;
	height:25px;
	background:url(../imagens/colorbox/border1.png) no-repeat -25px 0;
}
#cboxBottomLeft {
	width:25px;
	height:25px;
	background:url(../imagens/colorbox/border1.png) no-repeat 0 -25px;
}
#cboxBottomCenter {
	height:25px;
	background:url(../imagens/colorbox/border1.png) repeat-x 0 -75px;
}
#cboxBottomRight {
	width:25px;
	height:25px;
	background:url(../imagens/colorbox/border1.png) no-repeat -25px -25px;
}
#cboxMiddleLeft {
	width:25px;
	background:url(../imagens/colorbox/border2.png) repeat-y 0 0;
}
#cboxMiddleRight {
	width:25px;
	background:url(../imagens/colorbox/border2.png) repeat-y -25px 0;
}
#cboxContent {
	background:#fff;
	overflow:hidden;
}
#cboxError {
	padding:50px;
	border:1px solid #ccc;
}
#cboxLoadedContent {
	margin-bottom:20px;
}
#cboxTitle {
	position:absolute;
	bottom:0px;
	left:0;
	text-align:center;
	width:100%;
	color:#999;
}
#cboxCurrent {
	position:absolute;
	bottom:0px;
	left:100px;
	color:#999;
}
#cboxSlideshow {
	position:absolute;
	bottom:0px;
	right:42px;
	color:#444;
}
#cboxPrevious {
	position:absolute;
	bottom:0px;
	left:0;
	color:#444;
}
#cboxNext {
	position:absolute;
	bottom:0px;
	left:63px;
	color:#444;
}
#cboxLoadingOverlay {
	background:#fff url(../imagens/colorbox/loading.gif) no-repeat 5px 5px;
}
#cboxClose {
	position:absolute;
	bottom:0;
	right:0;
	display:block;
	color:#444;
}
/*
FIX IE PNG
*/
.cboxIE #cboxTopLeft, .cboxIE #cboxTopCenter, .cboxIE #cboxTopRight, .cboxIE #cboxBottomLeft, .cboxIE #cboxBottomCenter, .cboxIE #cboxBottomRight, .cboxIE #cboxMiddleLeft, .cboxIE #cboxMiddleRight {
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF, endColorstr=#00FFFFFF);
}
/*
  IE6 PNG
*/
.cboxIE6 #cboxTopLeft {
	background:url(../imagens/colorbox/ie6/borderTopLeft.png);
}
.cboxIE6 #cboxTopCenter {
	background:url(../imagens/colorbox/ie6/borderTopCenter.png);
}
.cboxIE6 #cboxTopRight {
	background:url(../imagens/colorbox/ie6/borderTopRight.png);
}
.cboxIE6 #cboxBottomLeft {
	background:url(../imagens/colorbox/ie6/borderBottomLeft.png);
}
.cboxIE6 #cboxBottomCenter {
	background:url(../imagens/colorbox/ie6/borderBottomCenter.png);
}
.cboxIE6 #cboxBottomRight {
	background:url(../imagens/colorbox/ie6/borderBottomRight.png);
}
.cboxIE6 #cboxMiddleLeft {
	background:url(../imagens/colorbox/ie6/borderMiddleLeft.png);
}
.cboxIE6 #cboxMiddleRight {
	background:url(../imagens/colorbox/ie6/borderMiddleRight.png);
}
.cboxIE6 #cboxTopLeft, .cboxIE6 #cboxTopCenter, .cboxIE6 #cboxTopRight, .cboxIE6 #cboxBottomLeft, .cboxIE6 #cboxBottomCenter, .cboxIE6 #cboxBottomRight, .cboxIE6 #cboxMiddleLeft, .cboxIE6 #cboxMiddleRight {
 _behavior: expression(this.src = this.src ? this.src : this.currentStyle.backgroundImage.split('"')[1], this.style.background = "none", this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='scale')");
}


.QOverlay {
	background-color: #000000;
	z-index: 9999;
}

.QLoader {
	background-color: #CCCCCC;
	height: 1px;
}

Principais scripts desenvolvidas (JavaScript)

//opacidade mouseover
function opacidade(obj, cond){
if(cond==1){
	document.getElementById(obj).style.opacity=1
} else { 
	document.getElementById(obj).style.opacity=.9
}
}

var envio_form=0;

function validacampoobrigatorio(valor, tipovalidacao) {
// valor --> campo a ser validado
// tipovalidacao --> 0=global (sem focus no campo), 1=parcial (com focus no campo)
	if (valor.value.length == 0) {
		if (tipovalidacao == 1) valor.focus();
		valor.style.backgroundColor="#FFC";
		if (valor == form1.nome) {
			document.getElementById("info1").innerHTML = "o preenchimento do nome é obrigatório";
		} else if (valor == form1.apelido) {
			document.getElementById("info2").innerHTML = "o preenchimento do apelido é obrigatório";
		}else {
			document.getElementById("info5").innerHTML = "o preenchimento da morada é obrigatório";
		}
	} else {
		valor.style.backgroundColor="#3C0";
		if (tipovalidacao == 0) envio_form++;
	}
}

function validanumero(valor, tipovalidacao) {
// valor --> campo a ser validado
// tipovalidacao --> 0=global (sem focus no campo), 1=parcial (com focus no campo)
	if (isNaN(valor.value) || valor.value < 18) {
		if (tipovalidacao == 1) {
			valor.focus();
			valor.select();
		}
		valor.style.backgroundColor="#FFC";
		document.getElementById("info3").innerHTML = "apenas para maiores de 18 anos";
	} else {
		valor.style.backgroundColor="#3C0";
		if (tipovalidacao == 0) envio_form++;
	}

}

function validaemail(valor, tipovalidacao) {
// valor --> campo a ser validado
// tipovalidacao --> 0=global (sem focus no campo), 1=parcial (com focus no campo)
	if (valor.value.indexOf("@")==-1 || valor.value.length == 0) {
		if (tipovalidacao == 1) {
			valor.focus();
			valor.select();
		}
		valor.style.backgroundColor="#FFC";  
		document.getElementById("info4").innerHTML = "email inválido";
	} else {
		valor.style.backgroundColor="#3C0";
		if (tipovalidacao == 0) envio_form++;
	}
}

function contacaract(numcaract, campovalor, idvalor) {
	var y=campovalor.value;
	document.getElementById(idvalor).innerHTML = (numcaract-y.length) + "/" + numcaract;
}

function validacaoglobal() {
	validacampoobrigatorio(form1.primeironome, 0);
	validacampoobrigatorio(form1.apelido, 0);
	validacampoobrigatorio(form1.morada, 0);
	validanumero(form1.idade, 0);
	validaemail(form1.email, 0);
	if (!(document.getElementById("tecnologias_0").checked || document.getElementById("tecnologias_1").checked || document.getElementById("tecnologias_2").checked || document.getElementById("tecnologias_3").checked)) {
		document.getElementById("info6").innerHTML = "preencha uma das opções";
	} else {
		if (tipovalidacao == 0) envio_form++;
	}
	
	if (envio_form == 6) {
		envio_form = true;
	} else {
		envio_form = false;
	}
	return envio_form;
}

function ajuda(campo) {
	switch (campo) {
		case 1:
			document.getElementById("info1").innerHTML = "coloque aqui o seu nome";
			break;
		case 2:
			document.getElementById("info4").innerHTML = "coloque aqui o seu e-mail";
			break;
		case 3:
			document.getElementById("info5").innerHTML = "coloque aqui a sua mensagem";
			break;
	
		default:
	}
}

function limpaajuda() {
	for (i=1;i<7;i++) document.getElementById("info"+i).innerHTML = "";
}

Integração com outras tecnologias

var QueryLoader = {
	/*
	 * QueryLoader		Preload your site before displaying it!
	 * Author:			Gaya Kessler
	 * Date:			23-09-09
	 * URL:				http://www.gayadesign.com
	 * Version:			1.0
	 * 
	 * A simple jQuery powered preloader to load every image on the page and in the CSS
	 * before displaying the page to the user.
	 */
	
	overlay: "",
	loadBar: "",
	preloader: "",
	items: new Array(),
	doneStatus: 0,
	doneNow: 0,
	selectorPreload: "body",
	ieLoadFixTime: 2000,
	ieTimeout: "",
		
	init: function() {
		if (navigator.userAgent.match(/MSIE (\d+(?:\.\d+)+(?:b\d*)?)/) == "MSIE 6.0,6.0") {
			//break if IE6			
			return false;
		}
		if (QueryLoader.selectorPreload == "body") {
			QueryLoader.spawnLoader();
			QueryLoader.getImages(QueryLoader.selectorPreload);
			QueryLoader.createPreloading();
		} else {
			$(document).ready(function() {
				QueryLoader.spawnLoader();
				QueryLoader.getImages(QueryLoader.selectorPreload);
				QueryLoader.createPreloading();
			});
		}
		
		//help IE drown if it is trying to die :)
		QueryLoader.ieTimeout = setTimeout("QueryLoader.ieLoadFix()", QueryLoader.ieLoadFixTime);
	},
	
	ieLoadFix: function() {
		var ie = navigator.userAgent.match(/MSIE (\d+(?:\.\d+)+(?:b\d*)?)/);
		if (ie[0].match("MSIE")) {
			while ((100 / QueryLoader.doneStatus) * QueryLoader.doneNow < 100) {
				QueryLoader.imgCallback();
			}
		}
	},
	
	imgCallback: function() {
		QueryLoader.doneNow ++;
		QueryLoader.animateLoader();
	},
	
	getImages: function(selector) {
		var everything = $(selector).find("*:not(script)").each(function() {
			var url = "";
			
			if ($(this).css("background-image") != "none") {
				var url = $(this).css("background-image");
			} else if (typeof($(this).attr("src")) != "undefined" && $(this).attr("tagName").toLowerCase() == "img") {
				var url = $(this).attr("src");
			}
			
			url = url.replace("url(\"", "");
			url = url.replace("url(", "");
			url = url.replace("\")", "");
			url = url.replace(")", "");
			
			if (url.length > 0) {
				QueryLoader.items.push(url);
			}
		});
	},
	
	createPreloading: function() {
		QueryLoader.preloader = $("<div></div>").appendTo(QueryLoader.selectorPreload);
		$(QueryLoader.preloader).css({
			height: 	"0px",
			width:		"0px",
			overflow:	"hidden"
		});
		
		var length = QueryLoader.items.length; 
		QueryLoader.doneStatus = length;
		
		for (var i = 0; i < length; i++) {
			var imgLoad = $("<img></img>");
			$(imgLoad).attr("src", QueryLoader.items[i]);
			$(imgLoad).unbind("load");
			$(imgLoad).bind("load", function() {
				QueryLoader.imgCallback();
			});
			$(imgLoad).appendTo($(QueryLoader.preloader));
		}
	},

	spawnLoader: function() {
		if (QueryLoader.selectorPreload == "body") {
			var height = $(window).height();
			var width = $(window).width();
			var position = "fixed";
		} else {
			var height = $(QueryLoader.selectorPreload).outerHeight();
			var width = $(QueryLoader.selectorPreload).outerWidth();
			var position = "absolute";
		}
		var left = $(QueryLoader.selectorPreload).offset()['left'];
		var top = $(QueryLoader.selectorPreload).offset()['top'];
		
		QueryLoader.overlay = $("<div></div>").appendTo($(QueryLoader.selectorPreload));
		$(QueryLoader.overlay).addClass("QOverlay");
		$(QueryLoader.overlay).css({
			position: position,
			top: top,
			left: left,
			width: width + "px",
			height: height + "px"
		});
		
		QueryLoader.loadBar = $("<div></div>").appendTo($(QueryLoader.overlay));
		$(QueryLoader.loadBar).addClass("QLoader");
		
		$(QueryLoader.loadBar).css({
			position: "relative",
			top: "50%",
			width: "0%"
		});
	},
	
	animateLoader: function() {
		var perc = (100 / QueryLoader.doneStatus) * QueryLoader.doneNow;
		if (perc > 99) {
			$(QueryLoader.loadBar).stop().animate({
				width: perc + "%"
			}, 500, "linear", function() { 
				QueryLoader.doneLoad();
			});
		} else {
			$(QueryLoader.loadBar).stop().animate({
				width: perc + "%"
			}, 500, "linear", function() { });
		}
	},
	
	doneLoad: function() {
		//prevent IE from calling the fix
		clearTimeout(QueryLoader.ieTimeout);
		
		//determine the height of the preloader for the effect
		if (QueryLoader.selectorPreload == "body") {
			var height = $(window).height();
		} else {
			var height = $(QueryLoader.selectorPreload).outerHeight();
		}
		
		//The end animation, adjust to your likings
		$(QueryLoader.loadBar).animate({
			height: height + "px",
			top: 0
		}, 500, "linear", function() {
			$(QueryLoader.overlay).fadeOut(800);
			$(QueryLoader.preloader).remove();
		});
	}
}

Soluções técnicas para problemas encontrados

Melhoramentos futuros

Futuramente pretendemos melhor este site, ligando a uma base de dados mySQL / PHP, gerindo noticias de uma forma mais eficaz e mais eficiente.

Conclusões

Para o nosso projecto de protecção e segurança rodoviária realizado no âmbito da disciplina de Laboratório Multimédia 2, criamos um site de prevenção rodoviária, com o principal objectivo de transmitir vários conceitos de protecção e segurança rodoviária. Mas para uma prevenção rodoviária eficiente, o nosso site informa também os condutores para o efeito de drogas na condução e mostra as estatísticas dos acidentes nas estradas de Portugal como uma forma de sensibilizar quem está a consultar o site.

Sempre com o nosso público-alvo bem definido, alertar os condutores, os jovens que estão prestes a se tornarem condutores, e também os jovens/adultos que gostam de frequentar festas nocturnas/diurnas na qual existam bebidas alcoólicas, ou outro tipo de substâncias perigosas, finalizamos o nosso projecto aplicando os nossos conhecimentos de XHTML, CSS e JAVASCRIPT obtidos nas aulas práticas e teóricas, como também, aplicando outros conhecimentos obtidos através de pesquisas em prol do sucesso do nosso projecto. Aumentando assim os conhecimentos de todo o grupo envolvido neste projecto.

Estamos todos muito contentes com o trabalho que fizemos, pois tanto conseguimos aplicar os nossos conhecimentos como também desenvolve-los ainda mais.

Referências bibliográficas

Autoridade Nacional de Segurança Rodoviaria

Wikipedia Portugal

Facebook Developers

w3schools

@@ Line 53: / Line 53: @@
 =Layout=
-==Pagina Principal:==
+No layout deste projecto o grupo optou pela utilização de um ambiente imersivo.
+No primeiro ecrã são dispostos vários elementos visuais (páginas de jornal) no espaço.O utilizador explora esta aplicação através do clique nestes elementos visuais.
+'''Pagina Principal:'''
 [[File:PSR-P.jpg]]<p></p><p><font face="Arial, Helvetica, sans-serif" size="3" color="#003300"><strong> Pagina inicial de apresentação do web site - Protecção e Segurança Rodoviária.</strong></font></p>
-==Pagina Estatísticas==
+'''Pagina - Estatísticas:'''
 [[File:PSR-E.jpg]]<p></p><p><font face="Arial, Helvetica, sans-serif" size="3"><strong> Pagina que mostra links de ficheiros de consulta de estatísticas de acidentes na estradas de Portugal.</strong></font></p>
-==Pagina Drogas==
+'''Pagina - Drogas'''
 [[File:PSR-D.jpg]]<p></p><p><font face="Arial, Helvetica, sans-serif" size="3" color="#003300"><strong> Pagina que mostra os diferentes e mais usuais tipos de drogas consumidos em Portugal.</strong></font></p>
-==Pagina Segurança==
+'''Pagina - Segurança'''
 [[File:PSR-S.jpg]]<p></p><p><font face="Arial, Helvetica, sans-serif" size="3"><strong> Esta pagina consiste em alertar os condutores de veículos motorizados a ter em atenção os pontos de segurança que nesta são referidos</strong></font></p>
-==Pagina Emergências==
+'''Pagina - Emergências'''
 [[File:PSR-EM.jpg]]<p></p><p><font face="Arial, Helvetica, sans-serif" size="3" color="#003300"><strong> Pagina com os procedimentos que deveremos ter ao ligar para o numero de Emergência internacional (112).</strong></font></p>
-==Pagina Formulário==
+'''Pagina - Formulário'''
 [[File:PSR-F.jpg]]<p></p><p><font face="Arial, Helvetica, sans-serif" size="3"><strong> Pagina de contacto para esclarecimento de duvidas ou de futuras publicações sobre procedimentos a ter.</strong></font></p>
-==Pagina Contactos==
+'''Pagina - Contactos'''
 [[File:PSR-C.jpg]]<p></p><p><font face="Arial, Helvetica, sans-serif" size="3" color="#003300"><strong> Pagina de contacto e comentários sobre o site.</strong></font></p>

Protecção e Segurança Rodoviária

From Labmm2

Revision as of 15:16, 21 June 2011

Contents

Apresentação e contextualização do tema do projecto

Protecção e Segurança

Objectivos gerais e específicos

CONDIÇÕES DE UTILIZAÇÃO DO PRODUTO FINAL

Publico-alvo

Layout

Análise da concorrência

Estrutura XHTML implementada

Folhas de estilos (CSS)

Principais scripts desenvolvidas (JavaScript)

Integração com outras tecnologias

Soluções técnicas para problemas encontrados

Melhoramentos futuros

Conclusões

Referências bibliográficas

Anexos

Personal tools

Namespaces

Variants

Views

Actions

Search

Navigation

Toolbox