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)).
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
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,
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
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
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.
Melhoramentos futuros
Se tivéssemos mais tempo disponível, gostaríamos de nos ter focado:
- Na implementação do livro em Javascript como pretendido;
- Na criação de outras páginas com novos conteúdos;
- Na criação de novos episódios sobre a vida do Sr. X;
- Apesar de sabermos que é difícil, gostaríamos de conseguir implementar uma navegação mais intuitiva e original, e melhorar o site em termos de usabilidade.
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
http://slides.html5rocks.com/#landing-slide http://net.tutsplus.com/tutorials/javascript-ajax/build-a-spiffy-quiz-engine-new-premium-tutorial/ 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
- Power Points das aulas teóricas da Unidade Curricular de Laboratório Multimédia 2, leccionada pelo professor Helder Caixinha.
- Exercícios das aulas práticas da Unidade Curricular de Laboratório Multimédia 2, leccionadas pelos professores Helder Caixinha, Ana Carla Amaro e Pedro Beça.
