WebsiteNTC
From Labmm2
NTC
Descobre o teu curso
Novas Tecnologias da Comunicação
Apresentação e contextualização do tema
Website que fornece informações e algumas curiosidades sobre o curso de ensino superior no qual estudamos: Novas Tecnologias da Comunicação da Universidade de Aveiro.
Fluxograma
Layouts
Estrutura XHTML implementada
A estrutura implementada foi uma estrutura muito básica e simples de maneira a facilitar a navegação do utilizador, com uma div onde tem o banner, outra onde tem o menu lateral, e outra onde tem todo o conteúdo de cada página:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="Website sobre o curso de Novas Tecnologias da Comunicação na Universidade de Aveiro" />
<meta name="keywords" content="NTC, Novas, Tecnologias, Comunicação, Novas Tecnologias da Comunicação, Universidade, Aveiro... />
<meta name="author" content="Gil Millasseau, Luís Almeida, Tiago Andrade, Ivan Fernandes" />
<title>NTC | UA</title>
</head>
<body>
<div id="banner">
</div>
<div id="side_menu">
<h1>NTC | UA</h1>
<div id="linksmenu">
<ul>
<li class="menulink"><a href="index.html">Home</a></li>
<li class="menulink"><a href="plano.html">Plano Curricular</a></li>
<li class="menulink"><a href="saidas.html">Saídas Profissionais</a></li>
<li class="menulink"><a href="projectos.html">Projectos Anteriores</a></li>
</ul>
</div>
<hr>
<div class="socials">
<ul class="reset">
<li><a href="http://www.ntc-ua.com/" target="_blank"><img src="imgs/simbolos/blog_hover-01.png" /></a></li>
<li><a href="http://www.facebook.com/ntcua" target="_blank"><img src="imgs/simbolos/facebook_hover-01.png" /></a></li>
<li><a href="http://www.twitter.com/#!/fainaNTC" target="_blank"><img src="imgs/simbolos/twitter_hover-01.png" /></a></li>
<li><a href="http://www.ua.pt/" target="_blank"><img src="imgs/simbolos/ua_hover-01.png" /></a></li>
</ul>
</div>
</div>
<div id="content">
Conteúdo de cada página
</div>
</body>
</html>
div banner corresponde à div que tem o banner de cada página, aplicado no CSS;
div side_menu corresponde à div que tem todo o conteúdo da barra lateral que contém os links todos;
div linksmenu corresponde à div que tem todos os links das outras páginas;
div socials corresponde à div que tem todos os links para as redes sociais e para o site da UA;
div content corresponde à maior div da página que tem todo o conteúdo de cada uma das páginas.
Folhas de estilos (CSS)
As folhas de estilo que foram incorporadas no nosso projecto são 5 , uma para cada página.
Cada uma dessas folhas de estilo têm apenas o estilo do layout que assegura a coerência entre as várias estruturas em comum:
body {
color: #FFF;
background: #000;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
}
#banner {
margin-left:auto;
margin-right:auto;
height:100px;
width:1340px;
margin-bottom:20px;
background-image:url(../imgs/banners/plano_curricular_banner-01.png);
background-repeat:no-repeat;
}
#side_menu {
float:left;
width:170px;
padding-right:25px;
padding-top:40px;
padding-bottom:40px;
margin-left:100px;
border-right:1px solid #999;
position:fixed;
}
#linksmenu ul {
list-style:none
}
#side_menu h1 {
padding:5px;
font-size:20px;
font-weight:bold;
text-align:right;
font-style:italic;
}
#linksmenu a:link, a:visited {
color:#FFF;
text-decoration:none;
margin-left:4px;
}
#linksmenu a:hover, a:active {
color:#FFF;
text-decoration:none;
margin-left:4px;
}
#linksmenu li {
border:1px;
border-radius: 7px;
-moz-border-radius: 7px; /*Mozilla Firefox */
-webkit-border-radius: 7px; /* Safari & Chrome */
-o-border-radius: 7px; /* Opera */
background:#666;
width:120px;
padding:3px;
margin:3px;
}
#linksmenu li:hover {
border:1px;
border-radius: 7px;
-moz-border-radius: 7px; /*Mozilla Firefox */
-webkit-border-radius: 7px; /* Safari & Chrome */
-o-border-radius: 7px; /* Opera */
background-color:#CCC;
color:#000;
padding:3px;
margin:3px;
}
.socials {
display:block;
width:32px;
height:32px;
background:url(../imgs/simbolos/links.png) no-repeat;
cursor:pointer;
position:relative;
margin:0 auto;
margin-top:50px;
margin-bottom:20px;
}
ul.reset,
ul.reset li {
display:block;
list-style:none;
padding-left:6px;
padding-top:6px;
margin:0;
border:none;
}
ul.reset li {
position:absolute;
}
ul.reset li a {
outline:none;
}
#content {
width:650px;
height:750px;
margin-right:auto;
margin-left:auto;
background:#1A1A1A;
border:#1A1A1A;
-moz-border-radius:10px;
-o-border-radius:10px;
-webkit-border-radius:10px;
}
Este código estabelece as propriedades necessárias a cada uma das divs que permanecem iguais em todas as páginas, desde a cor do background, tipo de letra, cantos arredondados, posições, tamanhos, entre outros.
Optamos por ter 4 ficheiros CSS, um para cada página HTML, porque assim é possível apenas colocar código útil para essa certa página, e não ficaria um ficheiro com bastante classes que são aplicadas noutras páginas mas não na página pretendida, ficando assim um ficheiro maior e mais desorganizado.
Principais scripts desenvolvidas (JavaScript)
O projecto desenvolvido tem em cada página um script principal que merece destaque.
Home
Desenvolveu-se um script que detecta a resolução e aplica diferentes classes a cada uma das divs que estão na página, esse script é o seguinte:
<script type="text/javascript">
function mudarclasse() {
if ((window.innerWidth<=1366) && (window.innerHeight<=768)) {
document.getElementById("proj_ant").className = "projectos_anteriores2";
document.getElementById("plan_cur").className = "plano_curricular2";
document.getElementById("galeria").className = "galeria2";
document.getElementById("said_prof").className = "saidas_profissionais2";
} else {
document.getElementById("proj_ant").className = "projectos_anteriores";
document.getElementById("plan_cur").className = "plano_curricular";
document.getElementById("galeria").className = "galeria";
document.getElementById("said_prof").className = "saidas_profissionais";
}
}
</script>
Desta maneira, se o utilizador tiver um ecrã com largura menor ou igual a 1366, e altura menor ou igual a 768, a cada uma das divs vai ser aplicada uma certa classe, que é em tudo igual à que está de origem, só mudando as coordenadas top e right para que estejam bem localizadas no layout.
Galeria
Nesta página foi necessário programar imagens de maneira que ao clique abrissem em maior tamanho, como se fosse um pop-up, para isso utilizou-se um plugin da jquery, o Fancybox. Todo o código é disponibilizado, bem como imagens, css, e foi apenas necessário incluir o seguinte código na página HTML:
<script type="text/javascript">
$(document).ready(function() {
$("a#example5").fancybox();
$("a[rel=example_group]").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>';
}
});
});
</script>
Para além disso, foi necessário também linkar os ficheiros Js que vinham do plugin à página HTML, junto com o jquery library.
Projectos Anteriores
Nesta página foi utilizado um script importante que permite a alteração de conteúdo de divs ao clique noutras imagens. Esse script torna conteúdos invisíveis e visíveis ao clique em determinadas imagens, de maneira que ao clique numa determinada imagem, torne visível apenas o conteúdo desejado, tornando invisível todo o outro que poderia anteriormente estar aberto.
Fica aqui uma parte do código:
$(document).ready(function(){
//Esconde as div's ou id's que preciso para depois fazelas aparecer ao click
$('#nota1').hide();
$('#nota2').hide();
$('#nota3').hide();
$('#nota4').hide();
$('#nota5').hide();
$('#projecto1').hide();
$('#projecto2').hide();
$('#projecto3').hide();
$('#projecto4').hide();
$('#projecto5').hide();
$('#descricao2').hide();
$('#detalhe_projecto').hide();
$('#detalhe_projecto').fadeIn(2000);
$('#notas_projecto').hide();
$('#notas_projecto').fadeIn(3000);
//Ao click na img com o id foto1 esconde todos os outros divs e o counteudo e mostra apenas a que faço para tornar 'show' com efeito fadeIn
$('#foto1').click(function(){
$('#projecto2').hide();
$('#projecto3').hide();
$('#projecto4').hide();
$('#projecto5').hide();
$('#nota2').hide();
$('#nota3').hide();
$('#nota4').hide();
$('#nota5').hide();
document.getElementById("projecto2").innerHTML=""
document.getElementById("projecto3").innerHTML=""
$('#nota1').fadeIn(3000);
$('#nota1').show();
$('#projecto1').fadeIn(2000);
$('#projecto1').show();
});
Scripts presentes em todas as páginas:
Em todas as páginas está presente programação no que diz respeito ao menu lateral.
Neste menu lateral foi desenvolvida um script que permitisse que no evento hover, os links dos menus e os seus respectivos backgrounds, deslizassem para a direita, voltando para a sua posição inicial, tornando o menu mais atractivo.
O código é simples e é o seguinte:
<script type="text/javascript">
$(document).ready(function() {
$('li.menulink').hover(function() {
$(this).animate({ marginLeft: '20px' }, 400);
}, function() {
$(this).animate({ marginLeft: 0 }, 400);
});
});
</script>
O que o código faz, basicamente, é que em cada elemento da lista criada no html, aumenta à margin já estipulada no CSS, um valor de 20 para o lado esquerdo, para que assim faça o deslizamento para a direita.
O Jquery foi fundamental para poder fazer isto com um efeito deslizante e suave, em forma de animação.
Outros scripts
Estão presentes nas páginas das saídas profissionais, projectos anteriores, plano curricular, e também no menu lateral em todas as páginas, scripts que permitem uma certa interactividade diferente. Por exemplo, na página das saídas, está presente uma espécie de acordeão para demonstrar as principais actividades e empresas que um licenciado em NTC pode ter quando acabar o curso, e também um "slider" com várias paragens para mostrar comentários de pessoas que já saíram de NTC, na página dos projectos anteriores, está presente, em estilo dock da mac, um menu que permite clicar em diversas imagens, muito intuitivo também, e na página do plano curricular, está presente um script que permite navegar em forma de acordeão também. Por último, o script presente nos Links para o utilizador poder navegar para outras páginas relacionadas.
Esta programação foi retirada de exemplos pesquisados na internet, e aplicados aos nossos casos.
Integração com outras tecnologias (frameworks, linguagens, etc...)
Soluções técnicas para problemas encontrados
Melhoramentos futuros
Conclusões
Referências bibliográficas
ACORDEÃO - Plano Curricular
MENU
[ACORDEÃO - Saídas Profissionais]
[SLIDER - Saídas Profissionais]
THUMBNAILS ELÁSTICAS - Projectos Anteriores
BOTÃO LINK
[BOLAS]
