WebsiteNTC

<br />
<br />
<font size="20px"> <b>NTC</b> <br /></font>
<font size="5px">Descobre o teu curso<br /></font>
<font size="3px">Novas Tecnologias da Comunicação</font>
<br />
<br />
----
<br />
<center>[[Image:Elementos grupo.jpg]]</center>

<br />
----
<br />
== 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 ==
<center>
[[Image:FluxogramaNTC.png|500px|Fluxograma]] <br />
</center>

== Layouts ==
<center>
[[Image:homentc.png|150px|Home]]    
[[Image:Galeria.png|150px|Galeria]]    
[[Image:Projectos.png|150px|Projectos]]    
[[Image:Plano.png|150px|Plano]]
[[Image:Saidas.png|150px|Saídas]]
</center>

== 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:

<pre><!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></pre>
<br>
'''div banner''' corresponde à div que tem o banner de cada página, aplicado no CSS;<br>
'''div side_menu''' corresponde à div que tem todo o conteúdo da barra lateral que contém os links todos;<br>
'''div linksmenu''' corresponde à div que tem todos os links das outras páginas;<br>
'''div socials''' corresponde à div que tem todos os links para as redes sociais e para o site da UA;<br>
'''div content''' corresponde à maior div da página que tem todo o conteúdo de cada uma das páginas.<br>

== Folhas de estilos (CSS) ==

As folhas de estilo que foram incorporadas no nosso projecto são 5 , uma para cada página.<br>
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:
<br>
<br>
<pre>
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;
}
</pre>
<br>
<br>
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.
<br>
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.
<br>

== Principais scripts desenvolvidas (JavaScript) ==

O projecto desenvolvido tem em cada página um script principal que merece destaque.
<br>

'''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:
<br>
<br>
<pre>	<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>
</pre>
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.
<br>
<br>

'''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 [http://fancybox.net/ Fancybox]. Todo o código é disponibilizado, bem como imagens, css, e foi apenas necessário incluir o seguinte código na página HTML:
<br>
<br>
<pre>	
<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 ? ' &nbsp; ' + title : '') + '</span>';
				}
			});
		});
</script>
</pre>
<br>
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.
<br>
<br>

'''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.
<br>
Fica aqui uma parte do código:
<pre>
$(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();
  });
</pre>
<br>
<br>
'''Scripts presentes em todas as páginas:'''

Em todas as páginas está presente programação no que diz respeito ao menu lateral.<br>
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.
<br>
O código é simples e é o seguinte:
<pre>
    <script type="text/javascript">
		$(document).ready(function() {
			$('li.menulink').hover(function() {
				$(this).animate({ marginLeft: '20px' }, 400);
					}, function() {
				$(this).animate({ marginLeft: 0 }, 400);
			});
		});
	</script>
</pre>

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.
<br>
O Jquery foi fundamental para poder fazer isto com um efeito deslizante e suave, em forma de animação.
<br>
<br>
'''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.
<br>
<br>
Esta programação foi retirada de exemplos pesquisados na internet, e aplicados aos nossos casos.

== Integração com outras tecnologias (frameworks, linguagens, etc...) ==

Foi integrado como sendo uma tecnologia não leccionada em aula e que ajuda bastante no ambiente gráfico e interactivo do website, o Jquery.<br>
Com o jequery foi possível fazer todas as animações pretendidas para criar um ambiente mais intuitivo e suave, com a ajuda do Javascript.<br>
Para tal foi necessário o download de toda a biblioteca e linkar a todas as páginas esse ficheiro com a biblioteca.<br>
A aplicação do jquery pode ser visível em quase todos os sítios do nosso website, como o menu lateral, a galeria de fotos, os acordeões, e a "dock" da página dos projectos.
<br>
<br>
Foi possível também o download de um plugin, o Fancybox, que trabalha essencialmente com Jquery, para a construção da galeria de imagens.
<br>
[http://jquery.com/ Jquery]

== Soluções técnicas para problemas encontrados ==

No decorrer da construção do website foram aparecendo alguns problemas que necessitaram de algum tempo e atenção redobrada para serem resolvidos.<br>

Problema na detecção da resolução do ecrã: Neste website, na página index.html, apenas foram estudadas 2 resoluções de ecrã, as mais utilizadas. Essas resoluções são a 1336x768 e a 1440x900.<br>

No desenvolvimento do script que iria analisar a resolução e aplicar as classes certas às divs consoante elas, foi um pouco problemático.<br>
<br>
Relembramos aqui o script:
<pre>
	<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>
</pre>
<br>
<br>
E também o html:
<pre>
<body onLoad="mudarclasse();">
	<div id="bg_img">
		<div id="proj_ant" class="projectos_anteriores"><a href="projectos.html">PROJECTOS ANTERIORES</a></div>
		<div id="plan_cur" class="plano_curricular"><a href="plano.html">PLANO CURRICULAR</a></div>
		<div id="galeria" class="galeria"><a href="galeria.html">GALERIA</a></div>
		<div id="said_prof" class="saidas_profissionais"><a href="saidas.html">SAIDAS PROFISSIONAIS</a></div>
	</div>
</body>
</pre>
<br>

Basicamente, cada div tem já uma classe associada. Esta classe atribui valores de posições x e y que ficam adequados no ecrã de maior resolução. Contudo, é necessário que essa classe mude para outra que tenha coordenadas x e y adequadas para o ecrã de menor resolução, quando esta site é aberto num ecrã de 1336 por 768. Assim, o evento onLoad é o indicado, e não o onResize como era o que estava a ser utilizado no momento inicial, pois é pretendido que a função seja accionada logo que o utilizador abra o website.
<br>
A estrutura de ifs foi utilizada porque era a que melhor se adequava ao pretendido.
<br>
<br>


Problema no hover dos botões do menu lateral: Este problema surgiu na construção do menu lateral e a sua animação em jquery.<br>
Aqui está o código:
<br>
<pre>
    <script type="text/javascript">
		$(document).ready(function() {
			$('li.menulink').hover(function() {
				$(this).animate({ marginLeft: '20px' }, 400);
					}, function() {
				$(this).animate({ marginLeft: 0 }, 400);
			});
		});
	</script>
</pre>
<br>
<br>
E o html:
<br>
<pre>
    	<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>
</pre>
<br>
<br>
No CSS, cada elemento da lista <ul> está com um background color aplicado, e um border radius. Era pretendido que no hover esse background se movesse para a direita, num movimento deslize. 
<br>
O primeiro código javascript que implementamos foi com este evento:
<pre>
$(document).ready(function() {
			$('a.menulink').hover(function() {
</pre>
<br>
Assim o código não funcionava da maneira que era pretendido, e apenas os links (palavras) dentro da "caixa" se moviam, e era pretendido que tudo se movesse.<br>
Assim, aplicamos um $('li.menulink'), para o código obter tudo e não apenas o link.<br>
<br>
Depois, surgiu outro problema, a caixa não estava a deslizar para a direita mas sim a encolher para a direita, pois o código inicial tinha:
<br>
<pre>
$(this).animate({ paddingLeft: '20px' }, 400);
					}, function() {
				$(this).animate({ paddingLeft: 0 }, 400);
</pre>

Desta feita, foi necessário alterar o padding para margin, para que a caixa ganha-se uma margem entre a border e o espaço à esquerda desta, e não entre a border e o espaço à direita (interior).<br>
<br>
<br>

== Melhoramentos futuros ==

Como melhoramento futuro, o website teria sem dúvida uma maneira do utilizador comunicar diretamente com os criadores do website, quer seja com um chat do estilo facebook, ou entre outros, bem como uma base de dados que desse para fazer contas de utilizador, onde cada um teria uma conta num fórum de discussões sobre a matéria, entre outros. Seria muito bom para a comunidade, iria atrair muitas mais visitas e esclarecer muito melhor os que se interessam por esta matéria.
<br>
Também seria melhorado sem dúvida o layout de cada página e a interactividade, que deixou um pouco a desejar em algumas partes do site.<br>

== Conclusões ==

Com este projecto ficamos com uma noção do que é construir um website de raiz, uma vez que nenhum dos elementos o tinha feito um anteriormente.
<br />Para além disso melhoramos as nossas capacidades de trabalho em grupo, uma vez que cada elemento do grupo trabalhou uma página diferente, contudo interagíamos sempre em grupo para tentar resolver os problemas que iam aparecendo a cada elemento.
<br />Ao realizarmos este projecto obtivemos bastantes conhecimentos, sendo que estes foram obtidos através das pesquisas efectuadas (através delas chegamos a vários tutorias e demos, sendo que após fazermos uma selecção apenas utilizamos os abaixo referenciados nas Referências bibliográficas).

== Referências bibliográficas ==
<br />
[http://bassistance.de/jquery-plugins/jquery-plugin-accordion/ ACORDEÃO - Plano Curricular] 
<br />
[http://davidwalsh.name/jquery-link-nudging MENU]
<br />
[ACORDEÃO - Saídas Profissionais]
<br />
[SLIDER - Saídas Profissionais]
<br />
[http://buildinternet.com/2009/09/sproing-make-an-elastic-thumbnail-menu/ THUMBNAILS ELÁSTICAS - Projectos Anteriores] 
<br />
[http://playground.mobily.pl/jquery/mobily-blocks.html BOTÃO LINK]
<br />
[http://api.jquery.com/fadeIn/ FADES - Projectos Anteriores]
<br />
[http://stackoverflow.com/questions/5936512/how-to-replace-one-div-with-another-when-clicking-the-html-hyperlinkTROCAR DE EVENTOS - Projectos Anteriores]