Social Story

From Labmm2

(Difference between revisions)
Jump to: navigation, search
(→Spry Frameworks)
(→jQuery)
Line 246: Line 246:
*A secção Jogo, em que o quiz é totalmente desenvolvido em jQuizzy, outra adaptação do jQuery.
*A secção Jogo, em que o quiz é totalmente desenvolvido em jQuizzy, outra adaptação do jQuery.
 +
====jQuizzy====
 +
<pre>
 +
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('(8($){$.21.2c=8(1P){j 1z={e:1k,1J:\'I 1i {f} 2f 6 24 + 1C! 1G://25.1v\',1T:\'26\\\'s 28 27!\',1j:\'29!\',1m:\'T/14.1F\',1M:\'T/1E.1F\',A:{1w:\'22!\',1n:\'23!\',1p:\'2a!\',1o:\'2b!\',1l:\'2h!\',1r:\'2i!\',1s:\'2j!\'}};j 5=$.2g(1z,1P);c(5.e===1k){$(6).17(\'<3 4="1q-d k-d"><S 4="1g">2d 2e 2k e.</S></3>\');9}j b=$(6),h=[],1A=\' <3 4="1q-d k-d"><3 4="D-18">\'+5.1T+\'</3><a 4="E-14" K="#"><T 1K="\'+5.1m+\'" /></a></3> \',1L=\'<3 4="N-d k-d"><3 4="D-18">\'+5.1j+\'</3><3 4="C-O"></3></3><3 4="v-O" ><3 4="v"></3></3><3 4="w">1X 1Y 1Z 1W</3>\',t=\'\';b.1y(\'1V-1C-2r\');F(n=0;n<5.e.o;n++){t+=\'<3 4="k-d"><3 4="D-18">\'+(n+1)+\'/\'+5.e.o+\'</3><3 4="D">\'+5.e[n].D+\'</3><X 4="h">\';F(m=0;m<5.e[n].h.o;m++){t+=\'<l>\'+5.e[n].h[m]+\'</l>\'}t+=\'</X><3 4="E-d">\';c(n!==0){t+=\'<3 4="13"><a 4="E-2K" K="#">2H</a></3>\'}c(n<5.e.o-1){t+=\'<3 4="B"><a 4="E-B" K="#">2F</a></3>\'}r{t+=\'<3 4="B 1e"><a 4="E-12-C" K="#">2G</a></3>\'}t+=\'</3></3>\';h.16(5.e[n].1B)}b.17(1A+t+1L);j v=b.7(\'.v\'),M=b.7(\'.v-O\'),w=b.7(\'.w\'),1c=M.J(),P=[],11=5.e.o,1x=b.7(\'.k-d\');8 1R(){j 19=[],U=z;F(i=0;i<h.o;i++){c(h[i]==P[i]){U=W}r{U=z}19.16(U)}9 19}8 1I(1Q,1b){j C=G.1d(1Q*G.1S(10,1b))/G.1S(10,1b);9 C}8 1h(f){j 2E;c(f==1H)9 5.A.1w;r c(f>2D)9 5.A.1n;r c(f>2C)9 5.A.1p;r c(f>2M)9 5.A.1o;r c(f>2L)9 5.A.1l;r c(f>20)9 5.A.1r;r 9 5.A.1s}M.y();w.y();1x.y().2I().x(g);b.7(\'l\').L(8(){j H=$(6);c(H.2J(\'p\')){H.1t(\'p\')}r{H.q(\'.h\').1O(\'l\').1t(\'p\');H.1y(\'p\')}});b.7(\'.E-14\').L(8(){$(6).q(\'.k-d\').Y(g,8(){$(6).B().x(g);M.x(g)});9 z});b.7(\'.B\').L(8(){c($(6).q(\'.k-d\').7(\'l.p\').o===0){w.x(1D);9 z}w.y();$(6).q(\'.k-d\').Y(g,8(){$(6).B().x(g)});v.1f({J:v.J()+G.1d(1c/11)},g);9 z});b.7(\'.13\').L(8(){w.y();$(6).q(\'.k-d\').Y(g,8(){$(6).13().x(g)});v.1f({J:v.J()-G.1d(1c/11)},g);9 z});b.7(\'.1e\').L(8(){c($(6).q(\'.k-d\').7(\'l.p\').o===0){w.x(1D);9 z}b.7(\'l.p\').2l(8(1N){P.16($(6).q(\'.h\').1O(\'l\').1N($(6).q(\'.h\').7(\'l.p\'))+1)});M.y();j N=1R(),u=\'\',15=0,1a=\'\',f;F(j i=0,1U=N.o;i<1U;i++){c(N[i]===W){15++;2z=W}u+=\'<3 4="C-1u"> 2q #\'+(i+1)+(N[i]===W?"<3 4=\'2A\'><V>2p</V></3>":"<3 4=\'2o\'><V>2m</V></3>");u+=\'<3 4="Z-R">\'+5.e[i].D;u+="<X>";F(m=0;m<5.e[i].h.o;m++){j Q=\'\';c(5.e[i].1B==m+1){Q+=\'2n\'}c(P[i]==m+1){Q+=\' p\'}u+=\'<l 4="\'+Q+\'">\'+5.e[i].h[m]+\'</l>\'}u+="</X></3></3>"}f=1I(15/11*1H,2);1a=\'<a K="1G://2s.1v/2t?2y=\'+5.1J.2x("{f}",f)+\' " 4="1E-2w"><T 1K="\'+5.1M+\'" /></a>\';u=\'<S 4="1g">\'+1h(f)+\' 2u 1i \'+f+\'%</S>\'+1a+u;b.7(\'.C-O\').17(u).12(g);b.7(\'.Z-R\').y();b.7(\'.C-1u\').2v(8(){$(6).7(\'.Z-R\').12()},8(){$(6).7(\'.Z-R\').y()});$(6).q(\'.k-d\').Y(g,8(){$(6).B().x(g)});9 z})}})(2B);',62,173,'|||div|class|config|this|find|function|return||superContainer|if|container|questions|score|500|answers||var|slide|li|answersIteratorIndex|questionsIteratorIndex|length|selected|parents|else||contentFob|resultSet|progress|notice|fadeIn|hide|false|resultComments|next|result|question|nav|for|Math|thisLi||width|href|click|progressKeeper|results|keeper|userAnswers|classestoAdd|qhover|h2|img|flag|span|true|ul|fadeOut|resultsview||questionLength|show|prev|start|trueCount|push|html|number|resultArr|shareButton|dec|progressWidth|round|final|animate|qTitle|judgeSkills|scored|endText|null|bad|splashImage|excellent|average|good|intro|poor|worst|removeClass|row|com|perfect|slidesList|addClass|defaults|introFob|correctAnswer|quiz|300|share|png|http|100|roundReloaded|twitterStatus|src|exitFob|twitterImage|index|children|settings|num|checkAnswers|pow|startText|toLoopTill|main|resposta|Por favor|selecione|uma||fn|Perfect|Excellent|awesome|linky|Quizz|Redes Sociais|das|Resultado|Good|Acceptable|jquizzy|Failed|to|on|extend|Disappointing|Poor|Nada|parse|each|Errado|right|wrong|Correcto|Pergunta |holder|twitter|home|You|hover|button|replace|status|isCorrect|correct|jQuery|70|90|returnString|Seguinte|Acabar|Anterior|first|hasClass|previous|35|50'.split('|'),0,{}))
 +
</pre>
 +
 +
====Lettering====
 +
 +
Hoverwords
 +
<pre>(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, // each letter will have different animation times
 +
speed : 300, // animation speed
 +
easing : 'jswing', // easing animation
 +
dir : 'leftright', // leftright - current goes left, new one goes right || rightleft - current goes right, new one goes left,
 +
overlay : false, // hover word is slided on top of the current word (just for the case when the hover word equals word)
 +
opacity : true // animate the letters opacity
 +
};
 +
 +
return this.each(function(){
 +
 +
// If options exist, lets merge them with our default settings
 +
if ( options ) {
 +
$.extend( settings, options );
 +
}
 +
 +
var $el = $(this).addClass('sl-w1'),
 +
word = $el.data('hover') || $el.html(); // if data-hover was set the hover word is the one specified, otherwise the hover word is also the word
 +
 +
if($el.data('hover')) settings.overlay = false; // the overlay option will only work for the case when the hover word equals word
 +
 +
$el.lettering(); // apply the lettering.js plugin
 +
 +
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') ) // wrap each of the words chars, and set width of each wrapper = chars width
 +
.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) // check if theres a wrapper to insert the char
 +
$wrapper.prepend( $char.addClass('sl-w2') );
 +
else { // otherwise create one
 +
$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);
 +
 +
// "hide" the char
 +
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);</pre>
 +
 +
 +
Lettering
 +
<pre>(function($){
 +
function injector(t, splitter, klass, after) {
 +
var a = t.text().split(splitter), inject = '';
 +
if (a.length) {
 +
$(a).each(function(i, item) {
 +
inject += '<span class="'+klass+(i+1)+'">'+item+'</span>'+after;
 +
});
 +
t.empty().append(inject);
 +
}
 +
}
 +
 +
var methods = {
 +
init : function() {
 +
 +
return this.each(function() {
 +
injector($(this), '', 'char', '');
 +
});
 +
 +
},
 +
 +
words : function() {
 +
 +
return this.each(function() {
 +
injector($(this), ' ', 'word', ' ');
 +
});
 +
 +
},
 +
 +
lines : function() {
 +
 +
return this.each(function() {
 +
var r = "eefec303079ad17405c889e092e105b0";
 +
// Because it's hard to split a <br/> tag consistently across browsers,
 +
// (*ahem* IE *ahem*), we replaces all <br/> instances with an md5 hash
 +
// (of the word "split").  If you're trying to use this plugin on that
 +
// md5 hash string, it will fail because you're being ridiculous.
 +
injector($(this).children("br").replaceWith(r).end(), r, 'line', '');
 +
});
 +
 +
}
 +
};
 +
 +
$.fn.lettering = function( method ) {
 +
// Method calling logic
 +
if ( method && methods[method] ) {
 +
return methods[ method ].apply( this, [].slice.call( arguments, 1 ));
 +
} else if ( method === 'letters' || ! method ) {
 +
return methods.init.apply( this, [].slice.call( arguments, 0 ) ); // always pass an array
 +
}
 +
$.error( 'Method ' +  method + ' does not exist on jQuery.lettering' );
 +
return this;
 +
};
 +
 +
})(jQuery);</pre>
===Spry Frameworks===
===Spry Frameworks===

Revision as of 18:30, 21 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.

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)).

"Style.css"

Principais scripts desenvolvidos (JavaScript)

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

A tecnologia que integrámos foi o jQuery, Lettering Javascript e Spry Frameworks.


jQuery

O jQuery 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:

jQuizzy

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('(8($){$.21.2c=8(1P){j 1z={e:1k,1J:\'I 1i {f} 2f 6 24 + 1C! 1G://25.1v\',1T:\'26\\\'s 28 27!\',1j:\'29!\',1m:\'T/14.1F\',1M:\'T/1E.1F\',A:{1w:\'22!\',1n:\'23!\',1p:\'2a!\',1o:\'2b!\',1l:\'2h!\',1r:\'2i!\',1s:\'2j!\'}};j 5=$.2g(1z,1P);c(5.e===1k){$(6).17(\'<3 4="1q-d k-d"><S 4="1g">2d 2e 2k e.</S></3>\');9}j b=$(6),h=[],1A=\'	<3 4="1q-d k-d"><3 4="D-18">\'+5.1T+\'</3><a 4="E-14" K="#"><T 1K="\'+5.1m+\'" /></a></3>	\',1L=\'<3 4="N-d k-d"><3 4="D-18">\'+5.1j+\'</3><3 4="C-O"></3></3><3 4="v-O" ><3 4="v"></3></3><3 4="w">1X 1Y 1Z 1W</3>\',t=\'\';b.1y(\'1V-1C-2r\');F(n=0;n<5.e.o;n++){t+=\'<3 4="k-d"><3 4="D-18">\'+(n+1)+\'/\'+5.e.o+\'</3><3 4="D">\'+5.e[n].D+\'</3><X 4="h">\';F(m=0;m<5.e[n].h.o;m++){t+=\'<l>\'+5.e[n].h[m]+\'</l>\'}t+=\'</X><3 4="E-d">\';c(n!==0){t+=\'<3 4="13"><a 4="E-2K" K="#">2H</a></3>\'}c(n<5.e.o-1){t+=\'<3 4="B"><a 4="E-B" K="#">2F</a></3>\'}r{t+=\'<3 4="B 1e"><a 4="E-12-C" K="#">2G</a></3>\'}t+=\'</3></3>\';h.16(5.e[n].1B)}b.17(1A+t+1L);j v=b.7(\'.v\'),M=b.7(\'.v-O\'),w=b.7(\'.w\'),1c=M.J(),P=[],11=5.e.o,1x=b.7(\'.k-d\');8 1R(){j 19=[],U=z;F(i=0;i<h.o;i++){c(h[i]==P[i]){U=W}r{U=z}19.16(U)}9 19}8 1I(1Q,1b){j C=G.1d(1Q*G.1S(10,1b))/G.1S(10,1b);9 C}8 1h(f){j 2E;c(f==1H)9 5.A.1w;r c(f>2D)9 5.A.1n;r c(f>2C)9 5.A.1p;r c(f>2M)9 5.A.1o;r c(f>2L)9 5.A.1l;r c(f>20)9 5.A.1r;r 9 5.A.1s}M.y();w.y();1x.y().2I().x(g);b.7(\'l\').L(8(){j H=$(6);c(H.2J(\'p\')){H.1t(\'p\')}r{H.q(\'.h\').1O(\'l\').1t(\'p\');H.1y(\'p\')}});b.7(\'.E-14\').L(8(){$(6).q(\'.k-d\').Y(g,8(){$(6).B().x(g);M.x(g)});9 z});b.7(\'.B\').L(8(){c($(6).q(\'.k-d\').7(\'l.p\').o===0){w.x(1D);9 z}w.y();$(6).q(\'.k-d\').Y(g,8(){$(6).B().x(g)});v.1f({J:v.J()+G.1d(1c/11)},g);9 z});b.7(\'.13\').L(8(){w.y();$(6).q(\'.k-d\').Y(g,8(){$(6).13().x(g)});v.1f({J:v.J()-G.1d(1c/11)},g);9 z});b.7(\'.1e\').L(8(){c($(6).q(\'.k-d\').7(\'l.p\').o===0){w.x(1D);9 z}b.7(\'l.p\').2l(8(1N){P.16($(6).q(\'.h\').1O(\'l\').1N($(6).q(\'.h\').7(\'l.p\'))+1)});M.y();j N=1R(),u=\'\',15=0,1a=\'\',f;F(j i=0,1U=N.o;i<1U;i++){c(N[i]===W){15++;2z=W}u+=\'<3 4="C-1u"> 2q #\'+(i+1)+(N[i]===W?"<3 4=\'2A\'><V>2p</V></3>":"<3 4=\'2o\'><V>2m</V></3>");u+=\'<3 4="Z-R">\'+5.e[i].D;u+="<X>";F(m=0;m<5.e[i].h.o;m++){j Q=\'\';c(5.e[i].1B==m+1){Q+=\'2n\'}c(P[i]==m+1){Q+=\' p\'}u+=\'<l 4="\'+Q+\'">\'+5.e[i].h[m]+\'</l>\'}u+="</X></3></3>"}f=1I(15/11*1H,2);1a=\'<a K="1G://2s.1v/2t?2y=\'+5.1J.2x("{f}",f)+\' " 4="1E-2w"><T 1K="\'+5.1M+\'" /></a>\';u=\'<S 4="1g">\'+1h(f)+\' 2u 1i \'+f+\'%</S>\'+1a+u;b.7(\'.C-O\').17(u).12(g);b.7(\'.Z-R\').y();b.7(\'.C-1u\').2v(8(){$(6).7(\'.Z-R\').12()},8(){$(6).7(\'.Z-R\').y()});$(6).q(\'.k-d\').Y(g,8(){$(6).B().x(g)});9 z})}})(2B);',62,173,'|||div|class|config|this|find|function|return||superContainer|if|container|questions|score|500|answers||var|slide|li|answersIteratorIndex|questionsIteratorIndex|length|selected|parents|else||contentFob|resultSet|progress|notice|fadeIn|hide|false|resultComments|next|result|question|nav|for|Math|thisLi||width|href|click|progressKeeper|results|keeper|userAnswers|classestoAdd|qhover|h2|img|flag|span|true|ul|fadeOut|resultsview||questionLength|show|prev|start|trueCount|push|html|number|resultArr|shareButton|dec|progressWidth|round|final|animate|qTitle|judgeSkills|scored|endText|null|bad|splashImage|excellent|average|good|intro|poor|worst|removeClass|row|com|perfect|slidesList|addClass|defaults|introFob|correctAnswer|quiz|300|share|png|http|100|roundReloaded|twitterStatus|src|exitFob|twitterImage|index|children|settings|num|checkAnswers|pow|startText|toLoopTill|main|resposta|Por favor|selecione|uma||fn|Perfect|Excellent|awesome|linky|Quizz|Redes Sociais|das|Resultado|Good|Acceptable|jquizzy|Failed|to|on|extend|Disappointing|Poor|Nada|parse|each|Errado|right|wrong|Correcto|Pergunta |holder|twitter|home|You|hover|button|replace|status|isCorrect|correct|jQuery|70|90|returnString|Seguinte|Acabar|Anterior|first|hasClass|previous|35|50'.split('|'),0,{}))

Lettering

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,		// each letter will have different animation times
						speed		: 300,			// animation speed		
						easing		: 'jswing',		// easing animation
						dir			: 'leftright', 	// leftright - current goes left, new one goes right || rightleft - current goes right, new one goes left, 
						overlay		: false,		// hover word is slided on top of the current word (just for the case when the hover word equals word)
						opacity		: true			// animate the letters opacity
					};
					
					return this.each(function(){
						
						// If options exist, lets merge them with our default settings
						if ( options ) {
							$.extend( settings, options );
						}
						
						var $el 			= $(this).addClass('sl-w1'),
							word			= $el.data('hover') || $el.html(); 	// if data-hover was set the hover word is the one specified, otherwise the hover word is also the word
						
						if($el.data('hover')) settings.overlay = false;			// the overlay option will only work for the case when the hover word equals word
						
						$el.lettering();										// apply the lettering.js plugin
							
						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') )	// wrap each of the words chars, and set width of each wrapper = chars width
								 .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)									// check if theres a wrapper to insert the char
								$wrapper.prepend( $char.addClass('sl-w2') );
							else {												// otherwise create one		
								$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);
							
																		// "hide" the char
							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 

(function($){
	function injector(t, splitter, klass, after) {
		var a = t.text().split(splitter), inject = '';
		if (a.length) {
			$(a).each(function(i, item) {
				inject += '<span class="'+klass+(i+1)+'">'+item+'</span>'+after;
			});	
			t.empty().append(inject);
		}
	}
	
	var methods = {
		init : function() {

			return this.each(function() {
				injector($(this), '', 'char', '');
			});

		},

		words : function() {

			return this.each(function() {
				injector($(this), ' ', 'word', ' ');
			});

		},
		
		lines : function() {

			return this.each(function() {
				var r = "eefec303079ad17405c889e092e105b0";
				// Because it's hard to split a <br/> tag consistently across browsers,
				// (*ahem* IE *ahem*), we replaces all <br/> instances with an md5 hash 
				// (of the word "split").  If you're trying to use this plugin on that 
				// md5 hash string, it will fail because you're being ridiculous.
				injector($(this).children("br").replaceWith(r).end(), r, 'line', '');
			});

		}
	};

	$.fn.lettering = function( method ) {
		// Method calling logic
		if ( method && methods[method] ) {
			return methods[ method ].apply( this, [].slice.call( arguments, 1 ));
		} else if ( method === 'letters' || ! method ) {
			return methods.init.apply( this, [].slice.call( arguments, 0 ) ); // always pass an array
		}
		$.error( 'Method ' +  method + ' does not exist on jQuery.lettering' );
		return this;
	};

})(jQuery);

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.

Soluções técnicas para problemas encontrados

Melhoramentos futuros

Conclusões

Referências bibliográficas

Anexos

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