Social Story
From Labmm2
(→Lettering) |
(→Soluções técnicas para problemas encontrados) |
||
| Line 415: | Line 415: | ||
== Soluções técnicas para problemas encontrados == | == Soluções técnicas para problemas encontrados == | ||
| + | ===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. | ||
| + | |||
| + | |||
| + | '''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''': | ||
| + | |||
| + | ===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. | ||
== Melhoramentos futuros == | == Melhoramentos futuros == | ||
Revision as of 19:19, 21 June 2011
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
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
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.
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:
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.
