From Labmm2

Revision as of 12:14, 21 June 2011 (view source) Andrepereira (Talk | contribs) (→Folhas de estilos (CSS)) ← Older edit		Revision as of 12:17, 21 June 2011 (view source) Andrepereira (Talk | contribs) (→Folhas de estilos (CSS)) Newer edit →
Line 90:		Line 90:
	=Estrutura XHTML implementada=		=Estrutura XHTML implementada=
	=Folhas de estilos (CSS)=		=Folhas de estilos (CSS)=
-	<div>
-	/*
-	/* PRELOADER  */
-	.QOverlay {
-	background-color: #000000;
-	z-index: 9999;
-	}
-	.QLoader {
-	background-color: #CCCCCC;
-	height: 1px;
-	}
-	/*  /PRELOADER  */
-	/*  DIVs  */	+	Link para o Css utilizado no projecto
-	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 {	+	[[PSRcss.txt]]
-	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')");	+
-	}	+
-	*/	+
-	</div>	+
	=Principais scripts desenvolvidas (JavaScript)=		=Principais scripts desenvolvidas (JavaScript)=

---

Revision as of 12:17, 21 June 2011

Contents 1 Apresentação e contextualização do tema do projecto 1.1 Protecção e Segurança 1.2 Objectivos gerais e específicos 1.3 CONDIÇÕES DE UTILIZAÇÃO DO PRODUTO FINAL 1.4 Publico-alvo 2 Layout 2.1 Pagina Principal: 2.2 Pagina Estatísticas 2.3 Pagina Drogas 2.4 Pagina Segurança 2.5 Pagina Emergências 2.6 Pagina Formulário 2.7 Pagina Contactos 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

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

Folhas de estilos (CSS)

Link para o Css utilizado no projecto

PSRcss.txt

Principais scripts desenvolvidas (JavaScript)

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"