From Labmm2

(Difference between revisions)

Jump to: navigation, search

Latest revision as of 22:49, 21 June 2011

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

Elementos do grupo

61181 - Álvaro Sérgio Pinho Ferreira

51062 - André Ricardo De Assunção Pereira

59805 - Andreia Marisa Costa Bastos

59735 - Fábio Oliveira Rocha

44417 - Ricardo Peralta Marques

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

Protecção e Segurança

O grupo pretendeu desenvolver um Website, maioritariamente informativo, sobre prevenção rodoviária.

O objectivo é divulgar conceitos de boa conduta, segurança e protecção onde, através de um ambiente imersivo, enumerámos a grande maioria dos factores que põem em causa a vida dos cidadãos.

Este Website consiste em alertar os condutores para uma prevenção rodoviária eficiente.

O principal objectivo é, de acordo com o referido anteriormente, o desenvolvimento de uma mentalidade de cidadania, prudência e eficácia nos comportamentos a ter na estrada.

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.

Pretendemos que este seja visualizado através de forma a não comprometer o Layout em todos os browsers mais utilizados pela grande maioria dos utilizadores (IE, FireFox, Safari, Chrome …). Teremos a possibilidade de implementar diversas tecnologias, tais como, XHTML, CSS, JavaScript neste projecto e a dimensão 1000X700 será eleita para haver a possibilidade de abranger um maior número de utilizadores.

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.

Página Principal:

Página inicial de apresentação do website - Protecção e Segurança Rodoviária.

Página - Estatísticas:

Página que mostra links de ficheiros de consulta de estatísticas de acidentes na estradas de Portugal.

Página - Drogas

Página que mostra os diferentes e mais usuais tipos de drogas consumidos em Portugal.

Página - Segurança

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

Página - Emergências

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

Página - Formulário

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

Página - Contactos

Página 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

Consulta principalmente na pagina WEB w3shools

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 com o principal objectivo de informar os condutores de todos os factores que afectam uma boa conduta na estrada. Os factores abordados foram: os efeitos das drogas na condução, entre eles o álcool e alguma drogas alucinogénas.Neste Website são disponibilizadas também estaticistas relativas aos acidentes nas estradas portuguesas nos últimos anos como forma de sensibilizar os utilizadores para a importância da prevenção.

Sempre com o nosso público-alvo bem definido,os jovens que estão prestes a se tornarem condutores,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 e 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.

Referências bibliográficas

Autoridade Nacional de Segurança Rodoviaria

Protecção e Segurança Rodoviária

From Labmm2

Latest revision as of 22:49, 21 June 2011

Contents

Elementos do grupo

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

@@ Line 1: / Line 1: @@
+=Elementos do grupo=
+- Álvaro Sérgio Pinho Ferreira
+- André Ricardo De Assunção Pereira
+- Andreia Marisa Costa Bastos
+- Fábio Oliveira Rocha
+- Ricardo Peralta Marques
 =Apresentação e contextualização do tema do projecto=
 ==Protecção e Segurança==
-<font face="Arial, Helvetica, sans-serif" size="3" color="#003300"><strong>
+O grupo pretendeu desenvolver um Website, maioritariamente informativo, sobre prevenção rodoviária.
-Site  de prevenção rodoviária,</strong></font>
-<font face="Arial, Helvetica, sans-serif" size="3"> 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.</font>
+O objectivo é divulgar conceitos de boa conduta, segurança e protecção onde, através de um ambiente imersivo, enumerámos a grande maioria dos factores que põem em causa a vida dos cidadãos.
+Este Website consiste em alertar os condutores para uma prevenção rodoviária eficiente.
+O principal objectivo é, de acordo com o referido anteriormente, o desenvolvimento de uma mentalidade de cidadania, prudência e eficácia nos comportamentos a ter na estrada.
 ==Objectivos gerais e específicos==
 <ul>
-<font face="Arial, Helvetica, sans-serif" size="2"><p>
+     <li><font face="Arial, Helvetica, sans-serif" >
-     <li><font face="Arial, Helvetica, sans-serif" size="3" color="#003300"><strong>
+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.</font>
-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.</strong></font>
        <br />
-</p>
+<p><li><font face="Arial, Helvetica, sans-serif">
-<p><li><font face="Arial, Helvetica, sans-serif" size="3"><strong>
+       Este site tem como objectivo  criar um conceito cívico de protecção rodoviária.</font>
-       Este site tem como objectivo  criar um conceito cívico de protecção rodoviária.</strong></font>
        <br /></p>
-<p><li><font face="Arial, Helvetica, sans-serif" size="3" color="#003300"><strong>
+<p><li><font face="Arial, Helvetica, sans-serif"  >
-       Que  procedimentos deverão tomar em caso de estar sob o efeito de substâncias  alucinogénias.</strong></font>
+       Que  procedimentos deverão tomar em caso de estar sob o efeito de substâncias  alucinogénias.</font>
        <br /></p>
-<p><li><font face="Arial, Helvetica, sans-serif" size="3"><strong>
+<p><li><font face="Arial, Helvetica, sans-serif" >
-       Onde  nos deveremos dirigir.</strong></font>
+       Onde  nos deveremos dirigir.</font>
        <br /></p>
-<p><li><font face="Arial, Helvetica, sans-serif" size="3" color="#003300"><strong>
+<p><li><font face="Arial, Helvetica, sans-serif" >
-       Como  saber que estamos em condições para proceder a viagem.</strong></font>
+       Como  saber que estamos em condições para proceder a viagem.</font>
 <br /></p>
-<p><li><font face="Arial, Helvetica, sans-serif" size="3"><strong>
+<p><li><font face="Arial, Helvetica, sans-serif" >
-       Este site demonstra alguns factos  verídicos de acontecimentos que tenham ocorrido, através de links  redireccionados para jornais e revistas.</strong></font></p>
+       Este site demonstra alguns factos  verídicos de acontecimentos que tenham ocorrido, através de links  redireccionados para jornais e revistas.</font></p>
-      </font>
 </ul>
 ==CONDIÇÕES DE UTILIZAÇÃO DO PRODUTO FINAL==
-<p><font face="Arial, Helvetica, sans-serif" size="3" color="#003300"><strong>Locais:</strong></font><font face="Arial, Helvetica, sans-serif" size="3"> Onde o utilizador tiver acesso à internet, seja  num computador, telemóvel, pda, etc…</font></p>
+<p><font face="Arial, Helvetica, sans-serif" ><strong>Locais:</strong></font><font face="Arial, Helvetica, sans-serif"> Onde o utilizador tiver acesso à internet, seja  num computador, telemóvel, pda, etc…</font></p>
-<p><font face="Arial, Helvetica, sans-serif" size="3" color="#003300"><strong>Duração média da consulta:</strong></font><font face="Arial, Helvetica, sans-serif" size="3"> 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.</font></p>
+<p><font face="Arial, Helvetica, sans-serif" ><strong>Duração média da consulta:</strong></font><font face="Arial, Helvetica, sans-serif" > 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.</font></p>
+<p><font face="Arial, Helvetica, sans-serif" >Pretendemos que este seja visualizado através de forma a não comprometer o Layout em todos os browsers mais utilizados pela grande maioria dos utilizadores (IE, FireFox, Safari, Chrome …).
+Teremos a possibilidade de implementar diversas tecnologias, tais como, XHTML, CSS, JavaScript neste projecto e a dimensão 1000X700 será eleita para haver a possibilidade de abranger um maior número de utilizadores.</font></p>
 ==Publico-alvo==
 <ul>
-<font face="Arial, Helvetica, sans-serif" size="2">
+<font face="Arial, Helvetica, sans-serif" >
-     <p><li><font face="Arial, Helvetica, sans-serif" size="3" color="#003300"><strong>
+     <p><li><font face="Arial, Helvetica, sans-serif"  >
-Este site tem como público-alvo os condutores em geral. Mais especificamente um público entre uma jovem e média idade.</strong></font>
+Este site tem como público-alvo os condutores em geral. Mais especificamente um público entre uma jovem e média idade.</font>
        <br /></p>
-<p><li><font face="Arial, Helvetica, sans-serif" size="3"><strong>
+<p><li><font face="Arial, Helvetica, sans-serif">
-       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.</strong></font>
+       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.</font>
        <br /></p>
-<p><li><font face="Arial, Helvetica, sans-serif" size="3" color="#003300"><strong>
+<p><li><font face="Arial, Helvetica, sans-serif">
-       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.</strong></font>
+       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.</font>
        <br />
 </p>
@@ Line 53: / Line 69: @@
 =Layout=
-==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==
-[[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==
+No layout deste projecto o grupo optou pela utilização de um ambiente imersivo.
-[[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>
+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 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==
+'''Página Principal:'''
-[[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==
+Página inicial de apresentação do website - Protecção e Segurança Rodoviária.
-[[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==
+[[File:PSR-P.jpg]]
-[[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>
+'''Página - Estatísticas:'''
+Página que mostra links de ficheiros de consulta de estatísticas de acidentes na estradas de Portugal.
+[[File:PSR-E.jpg]]
+'''Página - Drogas'''
+Página que mostra os diferentes e mais usuais tipos de drogas consumidos em Portugal.
+[[File:PSR-D.jpg]]
+'''Página - Segurança'''
+Esta página consiste em alertar os condutores de veículos motorizados a ter em atenção os pontos de segurança que nesta são referidos.
+[[File:PSR-S.jpg]]
+'''Página - Emergências'''
+Página com os procedimentos que deveremos ter ao ligar para o numero de Emergência internacional (112).
+[[File:PSR-EM.jpg]]
+'''Página - Formulário'''
+Página de contacto para esclarecimento de duvidas ou de futuras publicações sobre procedimentos a ter.
+[[File:PSR-F.jpg]]
+'''Página - Contactos'''
+Página de contacto e comentários sobre o site.
+[[File:PSR-C.jpg]]
 =Análise da concorrência=
 <p>
-<li><font face="Arial, Helvetica, sans-serif" size="2" color="#003300"><strong>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.</strong></font></p>
+<li><font face="Arial, Helvetica, sans-serif" size="2" >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.</font></p>
-<p><li><font face="Arial, Helvetica, sans-serif" size="2"><strong>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.</strong></font></p>
+<p><li><font face="Arial, Helvetica, sans-serif" size="2">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.</font></p>
-<p><li><font face="Arial, Helvetica, sans-serif" size="2" color="#003300"><strong>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.
+<p><li><font face="Arial, Helvetica, sans-serif" size="2" >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:</strong></font></p>
+Websites concorrentes:</font></p>
 <p><font face="Arial, Helvetica, sans-serif" size="1">[http://www.segurancarodoviaria.pt/noticias http://www.segurancarodoviaria.pt/noticias]</font></p>
@@ Line 89: / Line 139: @@
 =Estrutura XHTML implementada=
+<pre>
+<!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">&nbsp;</div>
+      <div id="estatisticas">&nbsp;</div>
+      <div id="drogas">&nbsp;</div>
+      <div id="seguranca">&nbsp;</div>
+  <div id="emergencias">&nbsp;</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>
+</pre>
 =Folhas de estilos (CSS)=
+<pre>
 /* 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')");
+}
+</pre>
+<pre>
+.QOverlay {
+	background-color: #000000;
+	z-index: 9999;
+}
+.QLoader {
+	background-color: #CCCCCC;
+	height: 1px;
+}
+</pre>
 =Principais scripts desenvolvidas (JavaScript)=
+<pre>
+//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;
+</pre>
+<pre>
+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++;
+	}
+}
+</pre>
+<pre>
+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++;
+	}
+}
+</pre>
+<pre>
+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++;
+	}
+}
+</pre>
+<pre>
+function contacaract(numcaract, campovalor, idvalor) {
+	var y=campovalor.value;
+	document.getElementById(idvalor).innerHTML = (numcaract-y.length) + "/" + numcaract;
+}
+</pre>
+<pre>
+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;
+}
+</pre>
+<pre>
+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:
+	}
+}
+</pre>
+<pre>
+function limpaajuda() {
+	for (i=1;i<7;i++) document.getElementById("info"+i).innerHTML = "";
+}
+</pre>
 =Integração com outras tecnologias=
+<pre>
+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();
+		});
+	}
+}
+</pre>
 =Soluções técnicas para problemas encontrados=
+Consulta principalmente na pagina WEB [http://www.w3schools.com/ w3shools]
 =Melhoramentos futuros=
@@ Line 135: / Line 824: @@
 =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 com o principal objectivo de informar os condutores de todos os factores que afectam uma boa conduta na estrada. Os factores abordados foram: os efeitos das drogas na condução, entre eles o álcool e alguma drogas alucinogénas.Neste Website são disponibilizadas também estaticistas relativas aos acidentes nas estradas portuguesas nos últimos anos como forma de sensibilizar os utilizadores para a importância da prevenção.
+Sempre com o nosso público-alvo bem definido,os jovens que estão prestes a se tornarem condutores,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 e 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.
 =Referências bibliográficas=
-<p><font face="Arial, Helvetica, sans-serif" size="1">[http://www.ansr.pt/ Autoridade Nacional de Segurança Rodoviaria]</font></p>
-<hr />
+[http://www.ansr.pt/ Autoridade Nacional de Segurança Rodoviaria]
-<p><font face="Arial, Helvetica, sans-serif" size="1">[http://pt.wikipedia.org/ Wikipedia Portugal]</font></p>
+<hr>
-<hr />
+[http://pt.wikipedia.org/ Wikipedia Portugal]
-<p><font face="Arial, Helvetica, sans-serif" size="1">[http://developers.facebook.com/?ref=pf Facebook Developers]</font></p>
+<hr>
-<hr />
+[http://developers.facebook.com/?ref=pf Facebook Developers]
-<p><font face="Arial, Helvetica, sans-serif" size="1">[http://www.w3schools.com w3schools]</font></p>
+<hr>
+[http://www.w3schools.com w3schools]
+<hr>
+[http://www.gayadesign.com/topic/diy/ Gaya Design]
+<hr>
+[http://www.noupe.com/tutorial/51-best-of-jquery-tutorials-and-examples.html Noupe.com]
+<hr>
+[http://codesnippets.joyent.com/ Code Snippets]
+<hr>
+[http://choosedaily.com/1178/15-jquery-popup-modal-dialog-plugins-tutorials/ choosedaily.com]
 =Anexos=