Protecção e Segurança Rodoviária

From Labmm2

Revision as of 12:45, 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

    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

    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