Social Story
From Labmm2
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
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:
- Apresentação das vantagens e desvantagens das redes sociais: pretendemos contar, de forma curiosa, dinâmica e engraçada os diversos episódios da vida de uma personagem fictícia de forma a mostrar o impacto das redes sociais na vida das suas pessoas, o que inclui situações positivas e situações negativas.;
- Apresentar a história destas mesmas redes através de uma componente mais informativa, onde mostraremos algumas curiosidades para além da história das principais redes sociais, mostrando ao utilizador a sua importância na história dos websites online.
- Sensibilização da 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;
- Construir um website diferente e que as pessoas possam reconhecer: Criar uma página web graficamente simples mas interessante, directa e original, utilizando diversas formas de apresentação dos conteúdos (vídeo,fotos,etc...). Implementar funcionalidades interessantes (livro,menu,vídeos,imagens), inovando os tradicionais websites informativos.
Layouts
Estrutura geral
 |
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.
 |
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:
- Uma div principal, com a ID “content”, que contém todas as outras divs e também o menu (que não está dentro de nenhuma outra div individual);
- Dentro dela, existe a div “logo”, que contém a imagem de topo do site;
- Na div “content” existe ainda a div “centro”, que contém por sua vez o conteúdo informativo ou de entretenimento de cada página, e a div “footer”, que é utilizada apenas em algumas páginas.
<!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:
- O menu do topo que foi desenvolvido em Lettering Javascript, uma adaptação do jQuery, que permite o efeito de rollover;
- A secção Jogo, em que o quiz é totalmente desenvolvido em jQuizzy, outra adaptação do jQuery.
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.
