Protecção e Segurança Rodoviária

From Labmm2

Revision as of 12:55, 21 June 2011 by Andrepereira (Talk | contribs)
Jump to: navigation, search

Contents

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

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

Layout

Pagina Principal:

PSR-P.jpg

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

Pagina Estatísticas

PSR-E.jpg

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

Pagina Drogas

PSR-D.jpg

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

Pagina Segurança

PSR-S.jpg

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

PSR-EM.jpg

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

Pagina Formulário

PSR-F.jpg

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

Pagina Contactos

PSR-C.jpg

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

    
<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

    Referências bibliográficas

    Autoridade Nacional de Segurança Rodoviaria

    Wikipedia Portugal

    Facebook Developers

    w3schools

    Anexos

    Retrieved from "http://wikis.ua.pt/labmm2/index.php?title=Protec%C3%A7%C3%A3o_e_Seguran%C3%A7a_Rodovi%C3%A1ria"
    • Personal tools
    Namespaces
    Variants
    Actions
    Navigation
    Toolbox