DouroAventura
From Labmm2
Contents |
Grupo
Marco Nunes - 61179
Rui Leite - 41752
Apresentação
Este website destina-se a divulgar livre e gratuitamente informações relativas a vários locais e estruturas da zona do Douro e vai permitir ao utilizador ter uma ideia global sobre o que pode fazer, visitar e degustar na região. O público–alvo é o grupo de turistas que gostam de aventura e descoberta de novos locais de interesse, sendo a faixa etária entre os 18 e os 35 anos. São disponibilizadas fotos panorâmicas de alguns locais e também Google Maps integrados na página, para melhor localização dos locais em questão.
Fluxograma
Layouts
 Home |
 Percursos Pedestres |
 Percursos Radicais |
Estrutura XHTML implementada
A estrutura base do website desenvolvido foi criada com recurso a tabelas, sendo estas complementadas com divs quando necessário. Utilizamos a tecnologia HTML5 para facilitar a integração de outras tecnologias, nomeadamente CSS3. Abrir a página no Internet Explorer causa alguns problemas devido à baixa compatibilidade com estas tecnologias. Não foi utilizado o atributi "float" em nenhuma das divs.
É de notar o uso da tag "<nav>" para a criação dos menus (superior e inferior), cuja aparência foi depois editada com recurso a CSS3.
<body>
<table width="1024" id="tabela" border="0" align="center">
<tr>
<td width="244" align="center" valign="top" id="logo"></td>
<td width="724" height="118" colspan="2" align="center" valign="middle" id="header"></td>
</tr>
<tr>
<td colspan="3" align="center" id="menu" valign="center">
<nav>
<ul class="menu">
<li><a href="index.html" class="homeIcon"></a></li>
<li><a href="pedestres.html">Percursos Pedestres</a></li>
<li><a href="radicais.html">Percursos Radicais</a></li>
<li><a href="monumentos.html">Monumentos</a></li>
<li><a href="gastronomia.html">Gastronomia</a></li>
<li><a href="galeria.html">Galeria de Fotos</a></li>
</ul>
</nav>
</td>
</tr>
<tr>
</tr>
<tr>
<td colspan="3" align="center" valign="top" id="content" bgcolor="#000000">
<!-- TemplateBeginEditable name="content" -->
<!-- TemplateEndEditable -->
</td>
</tr>
<tr>
<td colspan="3" align="center" valign="middle" id="footer">
<nav>
<ul class="footermenu">
<li><a href="faqs.html">FAQ'S</a></li>
<li><a href="mapasite.html">Mapa do Site</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="contactos.html">Contactos</a></li>
</ul>
</nav>
</tr>
</table>
</body>
Folhas de estilos
Como já foi dito, recorremos à tecnologia CSS3 para a formatação das páginas. Uma vez que há problemas de compatibilidade com o Internet Explorer 9, recorremos a um processo de decisão inserido num comentário que obriga a que o estilo usado no Internet Explorer 9 seja diferente e, por isso, compatível.
Para os botões dos menus, o tipo de letra foi importado através do servidor de fontes da Google, com o recurso a background e com cores formato rgba. Utilizando a nova tecnologia de gradientes e borders arredondadas, foi possível utilizar backgrounds feitos somente em CSS sem recurso a imagens, o que aumenta a velocidade de carregamento da página. Para criação do sombreado sobre os botões quando se passa o rato sobre eles é utilizada a instância ":after", assim dando relevo 3D aos botões.
O background foi colocado com recurso a comando "position: fixed", assim o utilizador não irá ver a imagem com aumentos que a tornem distorcida e tornando sempre agradável e criar ambiente de natureza, que é o principal objectivo a desenvolver no projecto
Para tornar o website compativel para dispositivos móveis e impressão foram atribuidas novas folhas de estilos às páginas, com a indicação correcta.
body {
background-image:url(../imagens/background.jpg);
background-size:100%;
background-attachment:fixed;
color:#FFF;
font-family:Arial, Helvetica, sans-serif;
font-style:inherit;
font-size:12px;
text-align:left;
}
p {
margin:10px;
}
h1 {
margin:10px;
}
img {
margin:10px;
}
#noticias {
padding-left: 10px;
border-left-width: 5px;
border-left-style: groove;
border-left-color: #F00;
}
a:link{
color:#fff;
font-family:Arial, Helvetica, sans-serif;
text-decoration: none;
}
a:active{
color:#fff;
font-family:Arial, Helvetica, sans-serif;
}
a:hover{
color:fff;
font-family:Arial, Helvetica, sans-serif;
text-decoration:underline;
}
a:visited{
color:#fff;
font-family:Arial, Helvetica, sans-serif;
text-decoration: none;
}
.menu{
overflow: hidden;
display: inline-block;
}
.menu li{
background-color: #f0f0f0;
background-image: -webkit-gradient(linear,left top, left bottom,from(#fefefe), color-stop(0.5,#f0f0f0), color-stop(0.51, #e6e6e6));
background-image: -moz-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
background-image: -o-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
background-image: -ms-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
background-image: linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
border-right: 1px solid rgba(9, 9, 9, 0.125);
box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
-moz-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
-webkit-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
position:relative;
float: left;
list-style: none;
}
.menu li:after{
content:'.';
text-indent:-9999px;
overflow:hidden;
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
z-index:1;
opacity:0;
background-image:-webkit-gradient(linear, left top, right top, from(rgba(168,168,168,0.5)),color-stop(0.5,rgba(168,168,168,0)), to(rgba(168,168,168,0.5)));
background-image:-moz-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
background-image:-o-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
background-image:-ms-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
background-image:linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
-moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
-webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
-moz-transition:0.25s all;
-webkit-transition:0.25s all;
-o-transition:0.25s all;
transition:0.25s all;
}
.menu li:first-child{
border-radius: 4px 0 0 4px;
}
.menu li:first-child:after,
.menu li.selected:first-child:after{
box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
-moz-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
-webkit-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
border-radius:4px 0 0 4px;
}
.menu li:last-child{
border-radius: 0 4px 4px 0;
}
.menu li:last-child:after,
.menu li.selected:last-child:after{
box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
-moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
-webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
border-radius:0 4px 4px 0;
}
.menu li:hover:after,
.menu li.selected:after,
.menu li:target:after{
opacity:1;
}
.menu:hover li.selected:after,
.menu:hover li:target:after{
opacity:0;
}
.menu li.selected:hover:after,
.menu li:target:hover:after{
opacity:1 !important;
}
.menu li a{
color: #5d5d5d;
display: inline-block;
font: 19px/1 Lobster,Arial,sans-serif;
padding: 5px 15px 7px;
position: relative;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
z-index:2;
text-decoration:none !important;
white-space:nowrap;
height: 17px;
}
.menu a.homeIcon{
display: block;
overflow: hidden;
padding-left: 12px;
padding-right: 12px;
text-indent: -9999px;
width: 16px;
background-image: url(../imagens/home.png);
background-repeat: no-repeat;
background-position: center center;
}
#tabela {
background-image:-webkit-gradient(linear, left top, right top, from(rgba(0,0,0,0.5)),color-stop(0.1,rgba(0,0,0,0.5)), to(rgba(0,0,0,0.6)));s
background-image:-moz-linear-gradient(left, rgba(0,0,0,0.5));
background-image:-o-linear-gradient(left, rgba(0,0,0,0.5));
background-image:-ms-linear-gradient(left, rgba(0,0,0,0.5));
background-image:linear-gradient(left, rgba(0,0,0,0.5));
box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
-moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
-webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
-moz-transition:0.25s all;
-webkit-transition:0.25s all;
-o-transition:0.25s all;
transition:0.25s all;
}
#logo {
background-image:url(../imagens/logo.png);
background-repeat:no-repeat;
background-position:center;
}
#header {
background-image:url(../imagens/header_douro.jpeg);
background-position:center;
background-repeat:no-repeat;
}
.footermenu{
overflow: hidden;
display: inline-block;
}
.footermenu li{
background-color: #f0f0f0;
background-image: -webkit-gradient(linear,left top, left bottom,from(#fefefe), color-stop(0.5,#f0f0f0), color-stop(0.51, #e6e6e6));
background-image: -moz-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
background-image: -o-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
background-image: -ms-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
background-image: linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
border-right: 1px solid rgba(9, 9, 9, 0.125);
box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
-moz-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
-webkit-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
position:relative;
float: left;
list-style: none;
}
.footermenu li:after{
content:'.';
text-indent:-9999px;
overflow:hidden;
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
z-index:1;
opacity:0;
background-image:-webkit-gradient(linear, left top, right top, from(rgba(168,168,168,0.5)),color-stop(0.5,rgba(168,168,168,0)), to(rgba(168,168,168,0.5)));
background-image:-moz-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
background-image:-o-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
background-image:-ms-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
background-image:linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
-moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
-webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
-moz-transition:0.25s all;
-webkit-transition:0.25s all;
-o-transition:0.25s all;
transition:0.25s all;
}
.footermenu li:first-child{
border-radius: 4px 0 0 4px;
}
.footermenu li:first-child:after,
.footermenu li.selected:first-child:after{
box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
-moz-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
-webkit-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
border-radius:4px 0 0 4px;
}
.footermenu li:last-child{
border-radius: 0 4px 4px 0;
}
.footermenu li:last-child:after,
.footermenu li.selected:last-child:after{
box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
-moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
-webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
border-radius:0 4px 4px 0;
}
.footermenu li:hover:after,
.footermenu li.selected:after,
.footermenu li:target:after{
opacity:1;
}
.footermenu:hover li.selected:after,
.footermenu:hover li:target:after{
opacity:0;
}
.footermenu li.selected:hover:after,
.footermenu li:target:hover:after{
opacity:1 !important;
}
.footermenu li a{
color: #5d5d5d;
display: inline-block;
font: 12px/1 Lobster,Arial,sans-serif;
padding: 5px 15px 4px;
position: relative;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
z-index:2;
text-decoration:none !important;
white-space:nowrap;
height: 17px;
}
#painel {
width:667px;
height:450px;
background-color:#FFFFFF;
}
#slideShowContainer{
width:540px;
height:390px;
position:relative;
margin:120px auto 50px;
}
#slideShow{
position:absolute;
height:370px;
width:520px;
background-color:#fff;
margin:10px 0 0 10px;
z-index:100;
-moz-box-shadow:0 0 10px #111;
-webkit-box-shadow:0 0 10px #111;
box-shadow:0 0 10px #111;
}
#slideShow ul{
position:absolute;
top:15px;
right:15px;
bottom:15px;
left:15px;
list-style:none;
overflow:hidden;
}
#slideShow li{
position:absolute;
top:0;
left:0;
height:370px;
width:520px;
}
#slideShowContainer > a{
border:none;
text-decoration:none;
text-indent:-99999px;
overflow:hidden;
width:36px;
height:37px;
background:url('../img/arrows.png') no-repeat;
position:absolute;
top:50%;
margin-top:-21px;
}
Principais scripts desenvolvidas
Incluimos uma galeria de imagens numa das páginas. Thumbnails das imagens são apresentadas à esquerda. Estes thumbnails são clicáveis e, quando o utlizador o faz, mostram a imagem em tamanho original à direita. Os nomes das imagens estão guardados num array que depois é concatenado num código HTML que permite a exibição da página. Este código é depois inserido numa div com recurso ao atributo "innerHTML".
<script type="text/javascript">
var imagesList = new Array;
imagesList[0] = ["01.jpg"];
imagesList[1] = ["02.jpg"];
imagesList[2] = ["03.jpg"];
imagesList[3] = ["04.jpg"];
imagesList[4] = ["05.jpg"];
imagesList[5] = ["06.jpg"];
function showImgPic(num){
imgPic = "<img src='imagens/galeria/"+imagesList[num]+"' width='650px' height='430px'/>";
document.getElementById("painel").innerHTML = imgPic;
}
</script>
O script de validação do formulário de contacto foi baseado num script encontrado online que foi modificado por nós, de forma a que ajustasse melhor aos nossos propósitos. Cada campo é validado separadamente e apenas permite a validação do formulário se todos os campos preenchidos estiverem correctos (nome composta apenas por letras, idade composta apenas por números, e-mail válido e mensagem dentro do limite máximo de caracteres). Cada campo é validado por uma função que é chamada na função principal. Quando o utilizador se foca num campo, uma dica ao preenchimento é apresentada do lado direito. Os caracteres restantes também são contados, onde possível.
<script type="text/javascript">
function formValidator(){
var nome = document.getElementById('nome');
var idade = document.getElementById('idade');
var email = document.getElementById('email');
var mensagem = document.getElementById('mensagem');
// Check each input in the order that it appears in the form!
if(isAlphabet(nome, "Campo incorrecto. Só são aceites letras.")){
if(isNumeric(idade, "Campo incorrecto. Só são aceites números.")){
if(emailValidator(email, "Campo incorrecto. Coloque um e-mail válido.")){
if(lengthRestriction(mensagem, 1, 50)){
return true;
}
}
}
}
return false;
}
function isAlphabet(elem, helperMsg){
var alphaExp = /^[a-zA-Z]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
document.getElementById('info1').innerHTML = helperMsg;
elem.focus();
return false;
}
}
function isNumeric(elem, helperMsg){
var numericExpression = /^[0-9]+$/;
if(elem.value.match(numericExpression)){
return true;
}else{
document.getElementById('info2').innerHTML = helperMsg;
elem.focus();
return false;
}
}
function lengthRestriction(elem, minimo, maximo){
var uInput = elem.value;
if(uInput.length >= minimo && uInput.length <= maximo){
return true;
}else{
document.getElementById('info4').innerHTML = "A sua mensagem deve ter entre " +minimo+ " e " +maximo+ " caracteres.";
elem.focus();
return false;
}
}
function emailValidator(elem, helperMsg){
var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
if(elem.value.match(emailExp)){
return true;
}else{
document.getElementById('info3').innerHTML = helperMsg;
elem.focus();
return false;
}
}
function ajuda(campo) {
switch (campo) {
case 1:
document.getElementById("info1").innerHTML = "coloque aqui o seu primeiro nome";
break;
case 2:
document.getElementById("info2").innerHTML = "coloque aqui a sua idade";
break;
case 3:
document.getElementById("info3").innerHTML = "coloque aqui o seu e-mail";
break;
case 4:
document.getElementById("info4").innerHTML = "coloque aqui a sua mensagem";
break;
default:
}
}
function limpaajuda() {
for (i=1;i<7;i++) document.getElementById("info"+i).innerHTML = "";
}
function contarCarac(numcaract){
switch(numcaract){
case 50:
var y=document.form1.morada.value;
document.getElementById("info4").innerHTML = "restam-lhe " + (numcaract-y.length) + " caracteres";
break;
};
};
</script>
Integração com outras tecnologias
Em algumas das páginas foram incluídos mapas do GoogleMaps. Utilizamos as ferramentas disponibilizadas pela Google para os incluir, sendo que apenas foi necessário colocar o código pré-feito na página escolhida.
Melhoramentos futuros
Era pretendido que o banner do website fosse capaz de se movimentar dentro da sua "div" de forma a que fosse possível visualizar uma imagem panorâmica no seu interior. Devido a problemas encontrados com o script, não nos foi possível concluir essa funcionalidade, sendo portanto essa uma funcionalidade que gostariamos de incluir em versões futuras.
Outra modificação a incluir em versões futuras é a criação de páginas individuais para cada monumento e estabelecimento específicos, integrando em cada um deles mapas interactivos.
Conclusões
Chegado ao fim do nosso trabalho, pensamos que ainda há muito trabalho a ser feito caso fossemos divulgar o website no nosso público-alvo. A incorporação de php e bases de dados seria uma boa forma de dinamizar o website.
Notamos que o browser que mais problemas de compatibilidade com o CSS3 foi o IE, mesmo na sua versão 9, onde claramente os efeitos de hover sobre os botões de menu não são conseguidos sem recurso a javascript, tendo sido necessário modificar alguns aspectos visuais para não comprometer em demasia o aspecto visual.
Referências bibliográficas
Validação de formulários - http://www.tizag.com/javascriptT/javascriptform.php
Criação de menus com CSS3 - http://tutorialzine.com/
