Social Story

From Labmm2

(Difference between revisions)
Jump to: navigation, search
(→Menu - Lettering)
(→Slider Redes Sociais)
 
(23 intermediate revisions not shown)
Line 217: Line 217:
Esta Folha de Estilos é referente a todos os elementos a nível estético do site.
Esta Folha de Estilos é referente a todos os elementos a nível estético do site.
-
Na tag do corpo da página (body) aplicámos a cor de fundo sólida (background-color:#2f373b) e a formatação da letra (font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif) que foram escolhidas para todo o site.
+
Na tag do corpo da página (body) aplicámos a cor de fundo sólida (background-color:#2f373b) e a formatação da letra (font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif) que foram escolhidas para todo o site, e colocámos a formatação overflow:hidden, que não permite que apareça a barra de scroll nas páginas.
-
Na classe “content” foram formatados os espaçamentos dos conteúdos (padding:5px; margin-left:15%), a largura da div (width:919px), o alinhamento dos conteúdos (vertical-align:middle; text-align:center)
+
Na classe “content” foram formatados os espaçamentos dos conteúdos (padding:5px; margin-left:15%), a largura da div (width:919px), o alinhamento dos conteúdos (vertical-align:middle; text-align:center).
O logótipo também foi formatado para determinar a sua altura (height:60px), e foi-lhe colocado um float:left para permitir que o menu ficasse alinhado à sua direita.
O logótipo também foi formatado para determinar a sua altura (height:60px), e foi-lhe colocado um float:left para permitir que o menu ficasse alinhado à sua direita.
Line 233: Line 233:
===Timer===
===Timer===
-
Nas páginas Introdução, História e Redes Sociais, é utilizada um timer em JavaScript na tag <body>. Este timer faz com que, ao fim de X segundos, a página seja redireccionada para outro link diferente ou que aconteça uma animação da barra de rodapé à entrada e saída da página Redes Sociais. O código utilizado foi (exemplo):
+
Nas páginas Introdução e História e Redes Sociais, é utilizada um timer em JavaScript na tag <body>. Este timer faz com que, ao fim de X segundos, a página seja redireccionada para outro link diferente. O código utilizado foi (exemplo):
<pre>onload=setTimeout("location.href='home.html'",32000)</pre>
<pre>onload=setTimeout("location.href='home.html'",32000)</pre>
Line 250: Line 250:
====Menu - Lettering====
====Menu - Lettering====
 +
 +
Estes códigos permitem fazer os efeitos que aparecem durante o hover dos links. No <body> temos então quatro scripts para carregar os quatro pulguins do jQuery e um script para carregar a função hoverwords, com o tempo que demora a sobrepor as palavras com outra cor.
=====Hoverwords=====
=====Hoverwords=====
Line 403: Line 405:
})(jQuery);</pre>
})(jQuery);</pre>
-
===Menu - Lettering===
+
=====Lettering=====
[[File:Lettering.jpg]]
[[File:Lettering.jpg]]
 +
 +
=====Código Javascript no Body=====
 +
 +
[[File:javas.jpg]]
 +
 +
===Rodapé movível===
 +
 +
Em relação a barra em que aparecem os ícones das redes sociais, quisemos implementar uma “animação” que fizesse com que esta aparecesse apenas no ecrã respectivo ao assunto das redes sociais, desaparecendo ou escondendo-se nas restantes. Para  além disso, implementamos também um pequeno efeito que faz com que, ao ser carregada a página “redes sociais” os ícones das redes fossem progressivamente aparecendo, a nível do alfa das imagens. Ambos os efeitos foram implementados a partir da tecnologia “Spry”, uma  frameworks para Ajax baseada em uma biblioteca JavaScript. A sua inserção é muito simples, iniciando-se por embutir o link da frameworks no head do html:
 +
 +
<pre><script type="text/javascript" src="SpryEffects.js"></script></pre>
 +
 +
Para o efeito do alfa progressivo, utilizamos a seguinte sequência:
 +
 +
1) Barra “footer” passa de 0% a 100% de opacidade, onde “redes” é o id do footer, 0.05 a opacidade inicial e 1 a opacidade final (ou seja, 100%). A duração é de 800milisegundos. (efeito que foi implementado aquando do carregamento da página – ver código mais a frente)
 +
 +
<pre>var abrirEffect = new Spry.Effect.Opacity("redes", 0.05, 1, {duration: 800});</pre>
 +
 +
1) Ícones na barra “footer” passam de 100% a 0% de opacidade (aqui não se pretendia que a barra inteira desaparecesse, mas sim apenas os ícones).  “botao1””botao2”... correspondem aos IDs de cada um dos botões, 1 corresponde a opacidade inicial (100%) e 0 a opacidade final. A duração é de 800milisegundos. (efeito que foi implementado aquando da saída da página para outra.  – ver código mais a frente)
 +
 +
<pre>var fecharEffect1 = new Spry.Effect.Opacity("botao1", 1, 0, {duration: 800});
 +
var fecharEffect2 = new Spry.Effect.Opacity("botao2", 1, 0, {duration: 800});
 +
var fecharEffect3 = new Spry.Effect.Opacity("botao3", 1, 0, {duration: 800});
 +
var fecharEffect4 = new Spry.Effect.Opacity("botao4", 1, 0, {duration: 800});
 +
var fecharEffect5 = new Spry.Effect.Opacity("botao5", 1, 0, {duration: 800});
 +
var fecharEffect6 = new Spry.Effect.Opacity("botao6", 1, 0, {duration: 800});
 +
var fecharEffect7 = new Spry.Effect.Opacity("botao7", 1, 0, {duration: 800});</pre>
 +
 +
No que toca ao efeito de subida e descida da barra do footer, utilizou-se também as frameworks “Spry”, com o seguinte código:
 +
 +
1) Subida da barra e descida da página no carregamento , onde:
 +
 +
<pre>var fromPos = new Spry.Effect.Utils.Position();</pre>
 +
- Chamada da função definida non Spry Effect
 +
 +
<pre>fromPos.x = document.getElementById("redes").style.left; 
 +
fromPos.y = document.getElementById("redes").style.top;</pre>
 +
- Posição inicial da barra de footer, onde se vao buscar os valores das coordenas da mesma.
 +
 +
<pre>var toPos = new Spry.Effect.Utils.Position();
 +
toPos.x = fromPos.x;
 +
toPos.y = fromPos.y - Number(90);</pre>
 +
- Posição final da barra do footer, onde a coordenada “x” mantém-se e apenas a coordenada “y” altera-se, subindo a barra.
 +
 +
<pre>Spry.Effect.makePositioned(document.getElementById("redes"));
 +
var move_effect = new Spry.Effect.Move("redes", fromPos, toPos, {duration: 1500, toggle: true});</pre>
 +
- Efeito final do movimento da barra – vai buscar o id “redes” que contem a barra, realizando o movimento da posição inicial definida para a posição final definida. A duração é de 1500milisegundos.
 +
 +
<pre>var fromPosit = new Spry.Effect.Utils.Position();
 +
fromPosit.x = document.getElementById("redes").style.left;
 +
fromPosit.y = fromPos.y - Number(90);
 +
var toPosit = new Spry.Effect.Utils.Position();
 +
toPosit.x = fromPos.x;
 +
toPosit.y = fromPos.y;
 +
Spry.Effect.makePositioned(document.getElementById("redes"));
 +
var move_effect_dois = new Spry.Effect.Move("redes", fromPosit, toPosit, {duration: 1500, toggle: true});</pre>
 +
 +
2) Descida e subida da barra aquando da mudança da página , onde:
 +
<pre>var fromPosit = new Spry.Effect.Utils.Position();
 +
fromPosit.x = document.getElementById("redes").style.left;
 +
fromPosit.y = fromPos.y - Number(90);
 +
var toPosit = new Spry.Effect.Utils.Position();
 +
toPosit.x = fromPos.x;
 +
toPosit.y = fromPos.y;
 +
Spry.Effect.makePositioned(document.getElementById("redes"));
 +
var move_effect_dois = new Spry.Effect.Move("redes", fromPosit, toPosit, {duration: 1500, toggle: true});</pre>
 +
 +
Partindo do raciocínio anterior, a posição da barra do footer passa da posição inicial, que neste caso é a barra subida (a posição final no código anterior) para a posição final, retornando-a para o posicionamento anterior ao carregamento da página. 
 +
 +
3) Aplicação da função ao body
 +
 +
Definidas as funcionalidades, o próximo passo foi definir a sua aplicação no body, começando por criar uma função que juntasse ambos os efeitos referidos, ordenando o seu início:
 +
 +
a. Carregamento da página
 +
<pre>function meuLoad(){
 +
abrirEffect.start();
 +
move_effect.start();
 +
}</pre>
 +
 +
b. Saída da página para outra
 +
 +
<pre>function meuUnload(){
 +
move_effect_dois.start();
 +
fecharEffect1.start();
 +
fecharEffect2.start();
 +
fecharEffect3.start();
 +
fecharEffect4.start();
 +
fecharEffect5.start();
 +
fecharEffect6.start();
 +
fecharEffect7.start();
 +
}</pre>
 +
 +
Aplicou-se, finalmente, a função ao body e a cada um dos links do menu:
 +
 +
<pre><body onLoad="meuLoad();">
 +
<a href="home.html" onclick="meuUnload();"><img src="social.jpg" /></a></pre>
 +
 +
===Redireccionamento das páginas no menu===
 +
 +
Sendo aplicada a “animação” à barra do footer, notamos que ao carregarmos num dos links do menu, este era directamente direccionado, sem “esperar”que a barra desça.  Tentando resolver este problema, tivemos que definir um intervalo de espera pela função de posicionamento da barra:
 +
 +
<pre>function mudarcoiso1(){
 +
timerID = setTimeout("window.location.href='story.html'",1500);
 +
}
 +
function mudarcoiso2(){
 +
timerID = setTimeout("window.location.href='jogo.html'",1500);
 +
}
 +
function mudarcoiso3(){
 +
timerID = setTimeout("window.location.href='sobre.html'",1500);
 +
}
 +
function mudarcoiso4(){
 +
timerID = setTimeout("window.location.href='home.html'",1500);
 +
}</pre>
 +
 +
Cada uma das funções foi aplicada a um dos links no menu, onde o tempo de redireccionamento da página é igual ao tempo da animação definida  - 1500 milisegundos.
 +
 +
A chamada final das funções é, então:
 +
 +
<pre><body onLoad="meuLoad();clearInterval(timerID);">
 +
<a href="home.html" onclick="meuUnload();mudarcoiso4()"><img src="social.jpg" /></a></pre>
 +
 +
===Rollover na página principal===
 +
 +
Na página inicial apresentamos uma fotografia do Sr.X na parte central que é alterada aquando da passagem do rato pelos links do menu. A função correspondente a esta funcionalidade é:
 +
 +
<pre>function mostragrande(valor) {
 +
document.getElementById("fotografia").innerHTML = "<img src='foto" + valor + ".png' border='0' />";
 +
}</pre>
 +
 +
A sua aplicação em cada um dos links foi feita da seguinte maneira:
 +
 +
<pre><a href="story.html" onmouseover="mostragrande(2)">the&nbsp;story&nbsp;</a>
 +
<a href="redes_sociais.html" onmouseover="mostragrande(3)">redes&nbsp;sociais&nbsp;</a>
 +
<a href="jogo.html" onmouseover="mostragrande(4)">jogo&nbsp;</a>
 +
<a href="sobre.html" onmouseover="mostragrande(5)">sobre&nbsp;</a></li></pre>
 +
 +
===Página Sobre===
 +
 +
No CSS está definida a transparência das imagens (opacidade) e quando estão em hover fica a opacidade a 100%. Foram criadas três classes referentes às fotos da coluna de baixo para formatar a distância entre elas e as de cima.
 +
 +
As colunas de imagens são organizadas no CSS. Aquando do clique das fotos é chamada a função a.poplight() que chama o ID correspondente ao sobre de cada pessoa, que aparece numa janela pop-up, que, quando aberta, chama uma função que faz o alpha do <body>.
 +
 +
Ao carregar no botão fechar ou fora do pop-up, o fade é removido, e a janela desaparece.
 +
 +
<pre><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
 +
 +
<script type="text/javascript">
 +
 +
$(document).ready(function(){
 +
 +
   
 +
 +
//When you click on a link with class of poplight and the href starts with a #
 +
 +
$('a.poplight[href^=#]').click(function() {
 +
 +
var popID = $(this).attr('rel'); //Get Popup Name
 +
 +
var popURL = $(this).attr('href'); //Get Popup href to define size
 +
 +
 +
 +
//Pull Query & Variables from href URL
 +
 +
var query= popURL.split('?');
 +
 +
var dim= query[1].split('&');
 +
 +
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
 +
 +
 +
 +
//Fade in the Popup and add close button
 +
 +
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://imgb.nxjimg.com/emp_image/orgdir/borders/myaccountwidget/BlueClose_on.png" class="btn_close" title="Close Window" alt="Close" /></a>');
 +
 +
 +
 +
//Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css
 +
 +
var popMargTop = ($('#' + popID).height() + 80) / 2;
 +
 +
var popMargLeft = ($('#' + popID).width() + 80) / 2;
 +
 +
 +
 +
//Apply Margin to Popup
 +
 +
$('#' + popID).css({
 +
 +
'margin-top' : -popMargTop,
 +
 +
'margin-left' : -popMargLeft
 +
 +
});
 +
 +
 +
 +
//Fade in Background
 +
 +
$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
 +
 +
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer
 +
 +
 +
 +
return false;
 +
 +
});
 +
 +
 +
 +
 +
 +
//Close Popups and Fade Layer
 +
 +
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
 +
 +
  $('#fade , .popup_block').fadeOut(function() {
 +
 +
$('#fade, a.close').remove(); 
 +
 +
}); //fade them both out
 +
 +
 +
 +
return false;
 +
 +
});
 +
 +
 +
 +
 +
 +
});
 +
 +
</script></pre>
 +
 +
===Slider Redes Sociais===
 +
 +
Na página das Redes Sociais obtivémos alguns problemas no que toca à implementação de código de javascript, relativamente à parte de conteúdos, pois foi necessário um árduo trabalho para adaptar o código de javascript (slider de ecrãs) aos limites impostas na formatação de CSS.
 +
 +
O funcionamento desta página web é realizada através do controlo das setas do teclado para se poder visualizar os diferentes ecrãs das redes sociais, vendo assim a informação disponibilizada.
 +
 +
<pre>var nextSlide = function() {
 +
          if ( (currentSlideNo < slides.length) && ( !Shadowbox.isOpen() )) {
 +
            currentSlideNo++;
 +
          }
 +
       
 +
          updateSlideClasses();
 +
        }
 +
   
 +
        var prevSlide = function() {
 +
          if ( (currentSlideNo > 1) && ( !Shadowbox.isOpen() )) {
 +
            currentSlideNo--;
 +
          }
 +
          updateSlideClasses();
 +
        };
 +
       
 +
 +
        var handleBodyKeyDown = function(event) {
 +
          // console.log(event.keyCode);
 +
          switch (event.keyCode) {
 +
            case 37: // left arrow
 +
              prevSlide();
 +
              break;
 +
            case 39: // right arrow
 +
            // case 32: // space
 +
              nextSlide();
 +
              break;
 +
            case 50: // 2
 +
              showNotes();         
 +
              break;
 +
            case 51: // 3
 +
              switch3D();         
 +
              break;
 +
          }
 +
        };
 +
 +
</pre>
== Integração com outras tecnologias (frameworks, linguagens, etc...) ==
== Integração com outras tecnologias (frameworks, linguagens, etc...) ==
Line 415: Line 696:
Utilizámos esta tecnologia no rodapé, e permite que este suba nas secções que pretendemos.
Utilizámos esta tecnologia no rodapé, e permite que este suba nas secções que pretendemos.
 +
 +
Exemplo:
 +
 +
[[File:Spry.jpg]]
 +
 +
===Adobe Master Collection===
 +
Foram utilizados vários programas da Adobe para editar partes do nosso site, como as fotografias e ilustrações (Adobe Photoshop e Adobe Illustrator), vídeo (Adobe Premiere e Adobe AfterEffects) e Kinectic Typography (Adobe Flash).
 +
 +
===HTML5===
 +
 +
Utilizámos o código de implementação de vídeo do HTML5 para colocar na página o vídeo do Livro de História do Sr.X.
 +
 +
A tag utilizada foi:
 +
 +
<pre><video source src="livro.mp4" width="720" height="576" autoplay="autoplay"></pre>
 +
 +
Esta tag ainda está em desenvolvimento, portanto nem todos os browsers são compatíveis com esta novo tecnologia.
== Soluções técnicas para problemas encontrados ==
== Soluções técnicas para problemas encontrados ==
Line 452: Line 750:
'''Solução''': Através da opção "Inspeccionar Elemento" do Google Chrome, procurámos qual a formatação que entrava em conflito com o botão. A seguir, colocou-se esse campo em comentário, e o botão começou a funcionar.
'''Solução''': Através da opção "Inspeccionar Elemento" do Google Chrome, procurámos qual a formatação que entrava em conflito com o botão. A seguir, colocou-se esse campo em comentário, e o botão começou a funcionar.
 +
 +
===Internet Explorer===
 +
 +
'''Problema''': Ao abrir a página no Internet Explorer, esta ficava completamente desformatada, mesmo com alterações e código específico para o browser.
 +
 +
'''Solução''': Optámos então por criar apenas uma página que sugere aos utilizadores a utilização de um browser diferente.
 +
 +
===HTML5===
 +
 +
'''Problema''': Ao implementar o vídeo com recurso à tag de vídeo do HTML5, os links do menu ficaram desformatados.
 +
 +
'''Solução''': Copiou-se todo o código do menu para a página, e este voltou a ficar uniforme.
 +
 +
 +
'''Problema''': Nem todos os browsers conseguem ler o vídeo devido ao estado de desenvolvimento do HTML5.
 +
 +
'''Solução''': Colocámos uma mensagem a avisar o utilizador que o seu browser não suporta a tag de vídeo do HTML5.
== Melhoramentos futuros ==
== Melhoramentos futuros ==
Line 478: Line 793:
== Referências bibliográficas ==
== Referências bibliográficas ==
-
http://slides.html5rocks.com/#landing-slide
+
*http://slides.html5rocks.com/#landing-slide
-
http://net.tutsplus.com/tutorials/javascript-ajax/build-a-spiffy-quiz-engine-new-premium-tutorial/
+
*http://net.tutsplus.com/tutorials/javascript-ajax/build-a-spiffy-quiz-engine-new-premium-tutorial/
-
http://tympanus.net/Development/SlidingLetters/
+
*http://tympanus.net/Development/SlidingLetters/
-
http://www.codeave.com/javascript/code.asp?u_log=7077
+
*http://www.codeave.com/javascript/code.asp?u_log=7077
-
 
+
*http://www.google.com/webfonts
-
http://www.codeave.com/javascript/code.asp?u_log=7077
+
*http://www.codeave.com/javascript/code.asp?u_log=7077
-
http://stackoverflow.com/questions/664631/disable-backspace-and-delete-key-with-javascript-in-ie
+
*http://stackoverflow.com/questions/664631/disable-backspace-and-delete-key-with-javascript-in-ie
*Power Points das aulas teóricas da Unidade Curricular de Laboratório Multimédia 2, leccionada pelo professor Helder Caixinha.
*Power Points das aulas teóricas da Unidade Curricular de Laboratório Multimédia 2, leccionada pelo professor Helder Caixinha.
Line 490: Line 805:
== Anexos ==
== Anexos ==
 +
 +
<gallery widts=600px heights=100px perrow=6>
 +
File:Ecra_index.jpg
 +
File:Ecra intro.jpg
 +
File:Ecra principal.jpg
 +
File:Ecra livro.jpg
 +
File:Ecra redes.jpg
 +
File:Ecra jogos.jpg
 +
File:Ecra sobre.jpg</gallery>
 +
 +
'''Protótipo para Guionismo'''
 +
 +
[http://wikis.ua.pt/labmm2/images/7/7c/Social_story.swf Protótipo Social Story]
 +
 +
'''Pasta Zip com os protótipos desenvolvidos pelos discentes em JavaScript'''
 +
 +
[http://ftp.ua.pt/incoming/pimkie/ Protótipos em JavaScript]

Latest revision as of 03:30, 22 June 2011

Social.jpg

Espaço destinado a inserção do Relatório do projecto "Social Story" desenvolvido pelos alunos:


Alexandre Pereira - 49994

Ana Sofia Paiva - 49997

Júlia Farias - 60123

António Alves - 60352

Tiago Vieira - 50765


Contents

Apresentação e contextualização do tema

Foi proposto, no âmbito da Unidade Curricular de Laboratório Multimédia 2, a construção de um website de tema livre com recurso às linguagens de programação que foram leccionadas durante o semestre.

Durante a primeira discussão surgiram as diversas ideias que passamos a citar: um site sobre futebol, sobre uma festa; (algo relacionado com cerveja); sobre turismo; viagens; o desenvolvimento de uma página Web sobre fotografia; a criação de um portfólio virtual (do trabalho de um artista, construtor,...); o desenvolvimento de uma magazine online; uma magazine online de fotografias; o desenvolvimento de uma história, contando-a interactivamente; a criação de um livro; um site sobre redes sociais; a criação de um livro que contasse uma história relacionada com as redes sociais de forma interactiva. Como podemos constatar, o processo de brainstorming passou desde ideias menos boas até pequenas ideias que combinadas resultaram no super-conceito final.

O principal objectivo, além de falar sobre as diferentes redes sociais, é focar os lados positivos e negativos que a internet transmite para a vida real e sensibilizar a população para algumas questões mais polémicas relacionadas com as redes sociais e a vida social online: mostrar que a criação de uma rede online pode ser positiva, quando utilizada da maneira certa ou negativa, quando a privacidade é excedida juntamente com importância de criar um equilíbrio entre “o que é bom” e o “que é mau” na utilização destas redes. Pretendemos também incentivar o utilizador a formar a sua própria opinião e pensamento crítico.

O público-alvo deste website são maioritariamente adolescentes e jovens-adultos, que estão mais próximos das novas tecnologias e se interessam pelo que elas podem oferecer. Visto que não podemos ignorar a restante população, temos um público-alvo secundário, que abrange tanto utilizadores com idades acima e abaixo da faixa etária principal.


Desta forma, os nossos objectivos envolvem:

Layouts

Estrutura geral

Estrutura geral.jpg

Estrutura do layout

O layout é composto por quarto partes fundamentais: o cabeçalho, que está dividido em logótipo e menu; a área editável de conteúdos; e o rodapé que é utilizado como sub-menu em algumas páginas do site.

13.jpg

Outros layouts

Estrutura geral

Pagina de entrada


Estrutura XHTML implementada

Passamos agora à apresentação da organização da estrutura XHTML implementada.

A nossa página está estruturada através de divs, que estão organizadas da seguinte maneira:


12.jpg 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link rel="stylesheet" type="text/css" href="Untitled-2.css" />

<link rel="stylesheet" type="text/css" href="style.css" />

<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'>

<link href='http://fonts.googleapis.com/css?family=Bevan' rel='stylesheet' type='text/css'>

<link href='http://fonts.googleapis.com/css?family=Bigshot+One' rel='stylesheet' type='text/css'>

<link href='http://fonts.googleapis.com/css?family=Aclonica' rel='stylesheet' type='text/css'>


<!--[if IE]>


<link rel="stylesheet" type="text/css" href="ie.css" />

<link rel="stylesheet" type="text/css" href="style.css" />

<link rel="stylesheet" type="text/css" href="style.css" />

<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'>

<link href='http://fonts.googleapis.com/css?family=Bevan' rel='stylesheet' type='text/css'>

<link href='http://fonts.googleapis.com/css?family=Bigshot+One' rel='stylesheet' type='text/css'>

<link href='http://fonts.googleapis.com/css?family=Aclonica' rel='stylesheet' type='text/css'>
       

<![endif]-->

<title>The Social Story</title>


</head>


<body>


<div class="content">

<div class="logo"><img src="social.jpg" /></div>


<ul id="sl_menu" class="sl_menu">
        
<div class="div1">
			
<li>
			
        
<a href="#">the story </a>|</li>
			
<li>
			

<a href="#">redes sociais </a>|</li>
			

<li>
				

<a href="#">jogo </a>| </li>
          

<li>
				

<a href="#">sobre </a></li>
		

</ul>
		

<div class="centro"></div>


<div class="footer"></div>



		
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
		
<script type="text/javascript" src="jquery.lettering.js"></script>
		
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
		
<script type="text/javascript" src="jquery.hoverwords.js"></script>
		
		
<script type="text/javascript">
			
$(window).load(function(){
			
	$('#sl_menu').find('li:not(:last) > a')
						
	 .hoverwords({ overlay:true })
						
	 .end()
						
	 .find('li:last > a')
						
	 .hoverwords({ overlay:true , dir:'rightleft' });
				
				
$('#example1').hoverwords({ delay:50 });
				
$('#example2').hoverwords();
				
$('#example3').hoverwords();
				
$('#example4').hoverwords({ overlay:true});
				
$('#example5').hoverwords({ delay:60 });			
			
});
		
</script>

</div>

</body>

</html>

Folhas de estilos (CSS)

Por norma, as nossas páginas estão associadas a duas folhas CSS:

“Untitled2.css”

Esta Folha de Estilos é referente a todos os elementos a nível estético do site.

Na tag do corpo da página (body) aplicámos a cor de fundo sólida (background-color:#2f373b) e a formatação da letra (font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif) que foram escolhidas para todo o site, e colocámos a formatação overflow:hidden, que não permite que apareça a barra de scroll nas páginas.

Na classe “content” foram formatados os espaçamentos dos conteúdos (padding:5px; margin-left:15%), a largura da div (width:919px), o alinhamento dos conteúdos (vertical-align:middle; text-align:center).

O logótipo também foi formatado para determinar a sua altura (height:60px), e foi-lhe colocado um float:left para permitir que o menu ficasse alinhado à sua direita.

À div “menu” colocou-se a cor de fundo (color:#a8e00f), alinhou-se o conteúdo (vertical-align=bottom; text-align:left), as margens e espaçamento (margin-top:40px; padding-left:30px) e adicionou-se ainda um float:left para que todos os conteúdos lhe ficassem alinhados à direita.

Na div centro foi formatada a altura e largura (height:444px; width:899px), a margem (margin-top:70px), a cor de fundo (#FFF), e os cantos arredondados da div, com recurso à formatação “border-radius”, “-moz-border-radius” e “-webkit-border-radius”.

Na div “footer” formatou-se a altura e largura (height:72px; width:899px), a cor de fundo (background-color:# 2f5d72), a margem do topo (margin-top:95px), ), os cantos arredondados da div, com recurso à formatação “border-radius”, “-moz-border-radius” e “-webkit-border-radius”, e a opacidade (opacity:0.80; -moz-opacity: 0.80; filter: alpha(opacity=80)).

Principais scripts desenvolvidos (JavaScript)

Timer

Nas páginas Introdução e História e Redes Sociais, é utilizada um timer em JavaScript na tag <body>. Este timer faz com que, ao fim de X segundos, a página seja redireccionada para outro link diferente. O código utilizado foi (exemplo): 

onload=setTimeout("location.href='home.html'",32000)

jQuery

O jQuery é um código JavaScript que pretende tornar mais simples a navegação dos documentos HTML, a selecção de elementos DOM, criar animações, manipular eventos e desenvolver aplicações AJAX.

A utilização que demos a esta tecnologia foi:

Jogo - jQuizzy

Jquizzy.jpg

Menu - Lettering

Estes códigos permitem fazer os efeitos que aparecem durante o hover dos links. No <body> temos então quatro scripts para carregar os quatro pulguins do jQuery e um script para carregar a função hoverwords, com o tempo que demora a sobrepor as palavras com outra cor.

Hoverwords
(function($) {
	
	var aux		= {
			toggleChars	: function($el, settings) {
				var $wrappers	= $el.find('.sl-wrapper'),
					total		= $wrappers.length,
					c1			= $el.hasClass('sl-w1') ? 'sl-w2' : 'sl-w1',
					c2			= $el.hasClass('sl-w1') ? 'sl-w1' : 'sl-w2';		
				
				$el.addClass(c1).removeClass(c2);
				
				$wrappers.each(function(i) {
					var $wrapper 			= $(this),
						interval;
					
					switch(settings.dir) {
						case 'leftright' : interval = i * settings.delay; break;
						case 'rightleft' : interval = (total - 1 - i) * settings.delay; break;
					};
					
					if(settings.delay) {
						setTimeout(function() {
							aux.switchChar($wrapper, $el, settings, c1, c2);
						}, interval);
					}	
					else
						aux.switchChar($wrapper, $el, settings, c1, c2);
				});
			},
			switchChar	: function($wrapper, $el, settings, c1, c2) {
				var $newChar			= $wrapper.find('span.' + c1),
					$currentChar		= $wrapper.find('span.' + c2),
					nextWrapperW		= $currentChar.width();
					
				if($newChar.length)
					nextWrapperW		= $newChar.width();
				
				//new slides in
				if($newChar.length)	{
					var param	= {left	: '0px'};
					if(!$.browser.msie && settings.opacity)
						param.opacity 	= 1;
					
					$newChar.stop().animate(param, settings.speed, settings.easing);
					
					//animate the wrappers width
					$wrapper.stop().animate({
						width	: nextWrapperW + 'px'
					}, settings.speed);
				}
				
				//current slides out
				if(!settings.overlay || c1 === 'sl-w1') {
					if(settings.dir === 'leftright')
						var param	= {left	: -$currentChar.width() + 'px'};
					else
						var param	= {left	: nextWrapperW + 'px'};
						
					if(!$.browser.msie && settings.opacity)
						param.opacity 	= 0;
					$currentChar.stop().animate(param, settings.speed, settings.easing);
				}
			}
		},
		methods = {
			init 	: function(options) {
				
				if(this.length){
					
					var settings = {
						delay		: false,		
						speed		: 300,					
						easing		: 'jswing',		
						dir			: 'leftright', 	
						overlay		: false,		
						opacity		: true			
					};
					
					return this.each(function(){
						
						
						if ( options ) {
							$.extend( settings, options );
						}
						
						var $el 			= $(this).addClass('sl-w1'),
							word			= $el.data('hover') || $el.html(); 	
						
						if($el.data('hover')) settings.overlay = false;			
						
						$el.lettering();										
							
						var	$chars			= $el.children('span').addClass('sl-w1'),
							$tmp 			= $('<span>' + word + '</span>').lettering();
						
						$chars.each(function(i) {
							var $char		= $(this);
							
							$char.wrap( $('<span/>').addClass('sl-wrapper') )	
								 .parent().css({
									width : $char.width() + 'px'
								  });
						});
						
						$tmp.children('span').each(function(i) {
							var $char		= $(this),
								$wrapper 	= $el.children('.sl-wrapper').eq(i);
							
							if($wrapper.length)									
								$wrapper.prepend( $char.addClass('sl-w2') );
							else {													
								$el.append(
									$('<span class="sl-wrapper"></span>').prepend( $char.addClass('sl-w2') )
								);
								
								$char.parent().css({
									width : $char.width() + 'px'
								});
							}
							
							if(!$.browser.msie && settings.opacity)
									$char.css('opacity', 0);
							
																		
							if(settings.dir === 'leftright')							
								$char.css('left', - $char.width() + 'px');
							else
								$char.css('left', $char.parent().width() + 'px');		
						});
						
						// mouseenter / mouseleave events - swicth to the other word
						$el.bind('mouseenter.hoverwords mouseleave.hoverwords', function(e) {
							aux.toggleChars($el, settings);
						});

					});
				}
			}
		};
	
	$.fn.hoverwords = function(method) {
		if ( methods[method] ) {
			return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
		} else if ( typeof method === 'object' || ! method ) {
			return methods.init.apply( this, arguments );
		} else {
			$.error( 'Method ' +  method + ' does not exist on jQuery.hoverwords' );
		}
	};
})(jQuery);
Lettering

Lettering.jpg

Código Javascript no Body

Javas.jpg

Rodapé movível

Em relação a barra em que aparecem os ícones das redes sociais, quisemos implementar uma “animação” que fizesse com que esta aparecesse apenas no ecrã respectivo ao assunto das redes sociais, desaparecendo ou escondendo-se nas restantes. Para além disso, implementamos também um pequeno efeito que faz com que, ao ser carregada a página “redes sociais” os ícones das redes fossem progressivamente aparecendo, a nível do alfa das imagens. Ambos os efeitos foram implementados a partir da tecnologia “Spry”, uma frameworks para Ajax baseada em uma biblioteca JavaScript. A sua inserção é muito simples, iniciando-se por embutir o link da frameworks no head do html: 

<script type="text/javascript" src="SpryEffects.js"></script>

Para o efeito do alfa progressivo, utilizamos a seguinte sequência:

1) Barra “footer” passa de 0% a 100% de opacidade, onde “redes” é o id do footer, 0.05 a opacidade inicial e 1 a opacidade final (ou seja, 100%). A duração é de 800milisegundos. (efeito que foi implementado aquando do carregamento da página – ver código mais a frente) 

var abrirEffect = new Spry.Effect.Opacity("redes", 0.05, 1, {duration: 800});

1) Ícones na barra “footer” passam de 100% a 0% de opacidade (aqui não se pretendia que a barra inteira desaparecesse, mas sim apenas os ícones). “botao1””botao2”... correspondem aos IDs de cada um dos botões, 1 corresponde a opacidade inicial (100%) e 0 a opacidade final. A duração é de 800milisegundos. (efeito que foi implementado aquando da saída da página para outra. – ver código mais a frente) 

var fecharEffect1 = new Spry.Effect.Opacity("botao1", 1, 0, {duration: 800});
var fecharEffect2 = new Spry.Effect.Opacity("botao2", 1, 0, {duration: 800});
var fecharEffect3 = new Spry.Effect.Opacity("botao3", 1, 0, {duration: 800});
var fecharEffect4 = new Spry.Effect.Opacity("botao4", 1, 0, {duration: 800});
var fecharEffect5 = new Spry.Effect.Opacity("botao5", 1, 0, {duration: 800});
var fecharEffect6 = new Spry.Effect.Opacity("botao6", 1, 0, {duration: 800});
var fecharEffect7 = new Spry.Effect.Opacity("botao7", 1, 0, {duration: 800});

No que toca ao efeito de subida e descida da barra do footer, utilizou-se também as frameworks “Spry”, com o seguinte código:

1) Subida da barra e descida da página no carregamento , onde: 

var fromPos = new Spry.Effect.Utils.Position();

- Chamada da função definida non Spry Effect 

fromPos.x = document.getElementById("redes").style.left;  
fromPos.y = document.getElementById("redes").style.top;

- Posição inicial da barra de footer, onde se vao buscar os valores das coordenas da mesma. 

var toPos = new Spry.Effect.Utils.Position();
toPos.x = fromPos.x;
toPos.y = fromPos.y - Number(90);

- Posição final da barra do footer, onde a coordenada “x” mantém-se e apenas a coordenada “y” altera-se, subindo a barra. 

Spry.Effect.makePositioned(document.getElementById("redes"));
var move_effect = new Spry.Effect.Move("redes", fromPos, toPos, {duration: 1500, toggle: true});

- Efeito final do movimento da barra – vai buscar o id “redes” que contem a barra, realizando o movimento da posição inicial definida para a posição final definida. A duração é de 1500milisegundos. 

var fromPosit = new Spry.Effect.Utils.Position();
fromPosit.x = document.getElementById("redes").style.left;
fromPosit.y = fromPos.y - Number(90);
var toPosit = new Spry.Effect.Utils.Position();
toPosit.x = fromPos.x;
toPosit.y = fromPos.y;
Spry.Effect.makePositioned(document.getElementById("redes"));
var move_effect_dois = new Spry.Effect.Move("redes", fromPosit, toPosit, {duration: 1500, toggle: true});

2) Descida e subida da barra aquando da mudança da página , onde: 

var fromPosit = new Spry.Effect.Utils.Position();
fromPosit.x = document.getElementById("redes").style.left;
fromPosit.y = fromPos.y - Number(90);
var toPosit = new Spry.Effect.Utils.Position();
toPosit.x = fromPos.x;
toPosit.y = fromPos.y;
Spry.Effect.makePositioned(document.getElementById("redes"));
var move_effect_dois = new Spry.Effect.Move("redes", fromPosit, toPosit, {duration: 1500, toggle: true});

Partindo do raciocínio anterior, a posição da barra do footer passa da posição inicial, que neste caso é a barra subida (a posição final no código anterior) para a posição final, retornando-a para o posicionamento anterior ao carregamento da página.

3) Aplicação da função ao body

Definidas as funcionalidades, o próximo passo foi definir a sua aplicação no body, começando por criar uma função que juntasse ambos os efeitos referidos, ordenando o seu início:

a. Carregamento da página 

function meuLoad(){
abrirEffect.start();
move_effect.start();
}

b. Saída da página para outra 

function meuUnload(){
move_effect_dois.start();
fecharEffect1.start();
fecharEffect2.start();
fecharEffect3.start();
fecharEffect4.start();
fecharEffect5.start();
fecharEffect6.start();
fecharEffect7.start();
}

Aplicou-se, finalmente, a função ao body e a cada um dos links do menu: 

<body onLoad="meuLoad();">
<a href="home.html" onclick="meuUnload();"><img src="social.jpg" /></a>

Redireccionamento das páginas no menu

Sendo aplicada a “animação” à barra do footer, notamos que ao carregarmos num dos links do menu, este era directamente direccionado, sem “esperar”que a barra desça. Tentando resolver este problema, tivemos que definir um intervalo de espera pela função de posicionamento da barra: 

function mudarcoiso1(){
timerID = setTimeout("window.location.href='story.html'",1500);
}
function mudarcoiso2(){
timerID = setTimeout("window.location.href='jogo.html'",1500);
}
function mudarcoiso3(){
timerID = setTimeout("window.location.href='sobre.html'",1500);
}
function mudarcoiso4(){
timerID = setTimeout("window.location.href='home.html'",1500);
}

Cada uma das funções foi aplicada a um dos links no menu, onde o tempo de redireccionamento da página é igual ao tempo da animação definida - 1500 milisegundos.

A chamada final das funções é, então: 

<body onLoad="meuLoad();clearInterval(timerID);">
<a href="home.html" onclick="meuUnload();mudarcoiso4()"><img src="social.jpg" /></a>

Rollover na página principal

Na página inicial apresentamos uma fotografia do Sr.X na parte central que é alterada aquando da passagem do rato pelos links do menu. A função correspondente a esta funcionalidade é: 

function mostragrande(valor) {
document.getElementById("fotografia").innerHTML = "<img src='foto" + valor + ".png' border='0' />";
}

A sua aplicação em cada um dos links foi feita da seguinte maneira: 

<a href="story.html" onmouseover="mostragrande(2)">the story </a>
<a href="redes_sociais.html" onmouseover="mostragrande(3)">redes sociais </a>
<a href="jogo.html" onmouseover="mostragrande(4)">jogo </a>
<a href="sobre.html" onmouseover="mostragrande(5)">sobre </a></li>

Página Sobre

No CSS está definida a transparência das imagens (opacidade) e quando estão em hover fica a opacidade a 100%. Foram criadas três classes referentes às fotos da coluna de baixo para formatar a distância entre elas e as de cima.

As colunas de imagens são organizadas no CSS. Aquando do clique das fotos é chamada a função a.poplight() que chama o ID correspondente ao sobre de cada pessoa, que aparece numa janela pop-up, que, quando aberta, chama uma função que faz o alpha do <body>.

Ao carregar no botão fechar ou fora do pop-up, o fade é removido, e a janela desaparece. 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

						   		   

	//When you click on a link with class of poplight and the href starts with a # 

	$('a.poplight[href^=#]').click(function() {

		var popID = $(this).attr('rel'); //Get Popup Name

		var popURL = $(this).attr('href'); //Get Popup href to define size

				

		//Pull Query & Variables from href URL

		var query= popURL.split('?');

		var dim= query[1].split('&');

		var popWidth = dim[0].split('=')[1]; //Gets the first query string value



		//Fade in the Popup and add close button

		$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://imgb.nxjimg.com/emp_image/orgdir/borders/myaccountwidget/BlueClose_on.png" class="btn_close" title="Close Window" alt="Close" /></a>');

		

		//Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css

		var popMargTop = ($('#' + popID).height() + 80) / 2;

		var popMargLeft = ($('#' + popID).width() + 80) / 2;

		

		//Apply Margin to Popup

		$('#' + popID).css({ 

			'margin-top' : -popMargTop,

			'margin-left' : -popMargLeft

		});

		

		//Fade in Background

		$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.

		$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer 

		

		return false;

	});

	

	

	//Close Popups and Fade Layer

	$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...

	  	$('#fade , .popup_block').fadeOut(function() {

			$('#fade, a.close').remove();  

	}); //fade them both out

		

		return false;

	});



	

});

</script>

Slider Redes Sociais

Na página das Redes Sociais obtivémos alguns problemas no que toca à implementação de código de javascript, relativamente à parte de conteúdos, pois foi necessário um árduo trabalho para adaptar o código de javascript (slider de ecrãs) aos limites impostas na formatação de CSS.

O funcionamento desta página web é realizada através do controlo das setas do teclado para se poder visualizar os diferentes ecrãs das redes sociais, vendo assim a informação disponibilizada. 

var nextSlide = function() {
          if ( (currentSlideNo < slides.length) && ( !Shadowbox.isOpen() )) {
            currentSlideNo++;
          }
         
          updateSlideClasses();
        } 
		     
        var prevSlide = function() {
          if ( (currentSlideNo > 1) && ( !Shadowbox.isOpen() )) {
            currentSlideNo--;
          }
          updateSlideClasses();
        };
        

        var handleBodyKeyDown = function(event) {
          // console.log(event.keyCode);
          switch (event.keyCode) {
            case 37: // left arrow
              prevSlide();
              break;
            case 39: // right arrow
            // case 32: // space
              nextSlide();
              break;
            case 50: // 2
              showNotes();          
              break;
            case 51: // 3
              switch3D();          
              break;
          }
        };

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

A tecnologia que integrámos foi o Spry Frameworks.

Spry Frameworks

Spry é um frameworks para Ajax baseado numa biblioteca JavaScript. Proporciona a possibilidade de desenvolver uma webpage e aplicativos mais ricos e interactivos.

Utilizámos esta tecnologia no rodapé, e permite que este suba nas secções que pretendemos.

Exemplo:

Spry.jpg

Adobe Master Collection

Foram utilizados vários programas da Adobe para editar partes do nosso site, como as fotografias e ilustrações (Adobe Photoshop e Adobe Illustrator), vídeo (Adobe Premiere e Adobe AfterEffects) e Kinectic Typography (Adobe Flash).

HTML5

Utilizámos o código de implementação de vídeo do HTML5 para colocar na página o vídeo do Livro de História do Sr.X.

A tag utilizada foi: 

<video source src="livro.mp4" width="720" height="576" autoplay="autoplay">

Esta tag ainda está em desenvolvimento, portanto nem todos os browsers são compatíveis com esta novo tecnologia.

Soluções técnicas para problemas encontrados

Template

Problema: As páginas tinham características diferentes, e a utilização de um template dificultava a formatação dos diferentes conteúdos.

Solução: Re-fez-se as páginas sem utilização de Template.

Slider Redes sociais

Problema: O Slider foi, num primeiro momento, programado como protótipo. Decidimos utilizar esse protótipo no site final, e ao implementarmos o slider, este ficou desformatado em relação à página.

Solução: Este problema foi resolvido através de tentativa e erro, testando diferentes valores nas classes na folha de estilos CSS, com a ajuda da opção "Inspeccionar Elemento" do Google Chrome.


Problema: No slider das Redes Sociais, a navegação é feita através das setas do teclado. No entanto, queríamos também que os botões que aparecem no rodapé pudessem levar-nos ao slider específico.

Solução: Não conseguimos implementar esta funcionalidade.

Página História

Problema: Num primeiro momento pretendíamos utilizar um livro programado em JavaScript na secção História, onde os utilizadores poderiam navegar, controlando o virar das páginas. No entanto, o código disponível apresentava um design bastante rudimentar que iria entrar em conflito com o resto do site.

Solução: Optámos por não utilizar o livro em JavaScript e implementámos um vídeo de um livro desenvolvido no programa Adobe AfterEffects.

Página Sobre

Problema: Como o Slider, a página Sobre foi programada num primeiro momento - quando ainda não tinhamos o design do site completamente definido. Ao implementarmos o código, a parte dos conteúdos ficou desformatada, principalmente a linha inferior de imagens, que era em número ímpar.

Solução: Depois de tentativas e erros, optou-se por adicionar uma nova imagem - de grupo -, que iria resolver a questão da desformatação das imagens inferiores. Em relação à restante formatação, foram mudadas as cores de fundo, e modificaram-se as margens.

Página Questionário

Problema: Uma formatação em CSS estava a entrar em conflito com o formulário, e bloqueava o botão "Enviar".

Solução: Através da opção "Inspeccionar Elemento" do Google Chrome, procurámos qual a formatação que entrava em conflito com o botão. A seguir, colocou-se esse campo em comentário, e o botão começou a funcionar.

Internet Explorer

Problema: Ao abrir a página no Internet Explorer, esta ficava completamente desformatada, mesmo com alterações e código específico para o browser.

Solução: Optámos então por criar apenas uma página que sugere aos utilizadores a utilização de um browser diferente.

HTML5

Problema: Ao implementar o vídeo com recurso à tag de vídeo do HTML5, os links do menu ficaram desformatados.

Solução: Copiou-se todo o código do menu para a página, e este voltou a ficar uniforme.


Problema: Nem todos os browsers conseguem ler o vídeo devido ao estado de desenvolvimento do HTML5.

Solução: Colocámos uma mensagem a avisar o utilizador que o seu browser não suporta a tag de vídeo do HTML5.

Melhoramentos futuros

Se tivéssemos mais tempo disponível, gostaríamos de nos ter focado:

Conclusões

A web é, nos dias que correm, uma plataforma que permite a qualquer pessoa investigar, aprender, realizar e produzir conteúdos. A sua existência é já, essencial e inerente a uma sociedade globalizada como nos dias de hoje.

A sua produção, ou seja, de páginas e aplicações web, pode ser um trabalho infortúnio devido à quantidade de oferta e procura. As influências podem ser inúmeras e as semelhanças com outras criações são mais que normais quando pretendemos criar um website. Desta maneira, aquando do seu início podemos encontrar adversidades que serão difíceis de ultrapassar com distinção.

Durante este trabalho esse foi um sentimento recorrente, mas no entanto, tentámos focar-nos apenas nos nossos objectivos pessoas e profissionais, para que conseguíssemos realizar algo que nos agradasse, quer pessoal, quer profissionalmente.

O tema das redes sociais possibilitou-nos não só aprender mais sobre uma plataforma que utilizamos diariamente e de forma recorrente, mas também, reflectindo sobre aspectos que são menos considerados. O “Sr.X” é uma personagem fictícia que “deu a cara” a um projecto realizado no âmbito da apresentação do mundo das redes sociais e as consequências da sua interacção com o mundo real, ou a sua falta.

“The Social Story” foi um projecto que considerámos como ambicioso, e que por sua vez, nos trouxe muitas dificuldades na resolução dos objectivos pretendidos. Porém, todas estas dificuldades resultaram num empenho acrescido no trabalho, numa consolidação do que foi aprendido nas aulas e na aprendizagem de respectivos conteúdos que não foram leccionados.

Em súmula, tudo isto contribuiu para nos preparar-mos para um mercado de trabalho em estado de ebulição constante, onde sejamos capazes de reflectir, criar e produzir conteúdos que sejam o mais originais e próprios possíveis, mesmo que estejamos conscientes da dificuldade em atingir essas metas.

Referências bibliográficas

Anexos

Ecra index.jpg
Ecra intro.jpg
Ecra principal.jpg
Ecra livro.jpg
Ecra redes.jpg
Ecra jogos.jpg
Ecra sobre.jpg

Protótipo para Guionismo

Protótipo Social Story

Pasta Zip com os protótipos desenvolvidos pelos discentes em JavaScript

Protótipos em JavaScript

Retrieved from "http://wikis.ua.pt/labmm2/index.php?title=Social_Story"
Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox