Protecção e Segurança Rodoviária

From Labmm2

(Difference between revisions)
Jump to: navigation, search
(Folhas de estilos (CSS))
(Folhas de estilos (CSS))
Line 91: Line 91:
=Folhas de estilos (CSS)=
=Folhas de estilos (CSS)=
<div>
<div>
 +
/*
/* PRELOADER  */
/* PRELOADER  */
.QOverlay {
.QOverlay {
Line 393: Line 394:
  _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')");
  _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>
</div>

Revision as of 12:14, 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 #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)

    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

  • Personal tools
    Namespaces
    Variants
    Actions
    Navigation
    Toolbox