Protecção e Segurança Rodoviária

From Labmm2

(Difference between revisions)
Jump to: navigation, search
(→Principais scripts desenvolvidas (JavaScript))
(→Principais scripts desenvolvidas (JavaScript))
Line 786: Line 786:
for (i=1;i<7;i++) document.getElementById("info"+i).innerHTML = "";
for (i=1;i<7;i++) document.getElementById("info"+i).innerHTML = "";
}
}
-
 
+
</nowiki>
=Integração com outras tecnologias=
=Integração com outras tecnologias=
=Soluções técnicas para problemas encontrados=
=Soluções técnicas para problemas encontrados=

Revision as of 12:36, 21 June 2011

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;

    }

    1. wrapper {

    width:1024px;

    height:650px;

    bottom: 50%;

    right: 50%;

    position:absolute;

    }

    1. site {

    left: 50%;

    position: relative;

    top: 50%;

    width:1024px;

    height:650px;

    background-image:url(../imagens/fundo.jpg);

    }

    1. 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;

    }

    1. 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;

    }

    1. 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;

    }

    1. 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;

    }

    1. 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;

    }

    1. comentarios {

    background:#09F;

    }

    /* /DIVs */


    h1 {

    text-align:center;

    text-transform:uppercase;

    background:#999;

    color:#fff;

    }

    1. conteudo {

    width:475px;

    background-color:#fff;

    overflow:hidden;

    margin-bottom:25px;

    }

    1. conteudo img {

    margin-top:20px;

    margin-right:10px;

    float:left;

    }

    /* POPUP */

    1. colorbox, #cboxOverlay, #cboxWrapper {

    position:absolute;

    top:0;

    left:0;

    z-index:9999;

    overflow:hidden;

    }

    1. cboxOverlay {

    position:fixed;

    width:100%;

    height:100%;

    }

    1. cboxMiddleLeft, #cboxBottomLeft {

    clear:left;

    }

    1. cboxContent {

    position:relative;

    }

    1. cboxLoadedContent {


    overflow:auto;

    }

    1. cboxTitle {

    margin:0;

    }

    1. cboxLoadingOverlay, #cboxLoadingGraphic {

    position:absolute;

    top:0;

    left:0;

    width:100%;

    }

    1. 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 */

    1. cboxOverlay {

    background:#fff;

    }

    1. colorbox {

    }

    1. cboxTopLeft {

    width:25px;

    height:25px;

    background:url(../imagens/colorbox/border1.png) no-repeat 0 0;

    }

    1. cboxTopCenter {

    height:25px;

    background:url(../imagens/colorbox/border1.png) repeat-x 0 -50px;

    }

    1. cboxTopRight {

    width:25px;

    height:25px;

    background:url(../imagens/colorbox/border1.png) no-repeat -25px 0;

    }

    1. cboxBottomLeft {

    width:25px;

    height:25px;

    background:url(../imagens/colorbox/border1.png) no-repeat 0 -25px;

    }

    1. cboxBottomCenter {

    height:25px;

    background:url(../imagens/colorbox/border1.png) repeat-x 0 -75px;

    }

    1. cboxBottomRight {

    width:25px;

    height:25px;

    background:url(../imagens/colorbox/border1.png) no-repeat -25px -25px;

    }

    1. cboxMiddleLeft {


    width:25px;

    background:url(../imagens/colorbox/border2.png) repeat-y 0 0;

    }

    1. cboxMiddleRight {

    width:25px;

    background:url(../imagens/colorbox/border2.png) repeat-y -25px 0;

    }

    1. cboxContent {

    background:#fff;

    overflow:hidden;

    }

    1. cboxError {

    padding:50px;

    border:1px solid #ccc;

    }

    1. cboxLoadedContent {

    margin-bottom:20px;

    }

    1. cboxTitle {

    position:absolute;

    bottom:0px;

    left:0;

    text-align:center;

    width:100%;

    color:#999;

    }

    1. cboxCurrent {

    position:absolute;

    bottom:0px;

    left:100px;

    color:#999;

    }

    1. cboxSlideshow {

    position:absolute;

    bottom:0px;

    right:42px;

    color:#444;

    }

    1. cboxPrevious {

    position:absolute;

    bottom:0px;

    left:0;

    color:#444;

    }

    1. cboxNext {

    position:absolute;

    bottom:0px;

    left:63px;

    color:#444;

    }

    1. cboxLoadingOverlay {

    background:#fff url(../imagens/colorbox/loading.gif) no-repeat 5px 5px;

    }

    1. 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


    1. 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')");

    }

    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