Social Story
From Labmm2
(→Integração com outras tecnologias (frameworks, linguagens, etc...)) |
(→Integração com outras tecnologias (frameworks, linguagens, etc...)) |
||
| Line 237: | Line 237: | ||
A tecnologia que integrámos foi o jQuery, Lettering Javascript e Spry Frameworks. | 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. | 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. | ||
| Line 244: | 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. | ||
| + | |||
| + | ===Spry Frameworks=== | ||
Spry é um frameworks para Ajax baseado numa biblioteca JavaScript. Proporciona a possibilidade de desenvolver uma webpage e aplicativos mais ricos e interactivos. | 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. | Utilizámos esta tecnologia no rodapé, e permite que este suba nas secções que pretendemos. | ||
| + | |||
| + | <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> | ||
== Soluções técnicas para problemas encontrados == | == Soluções técnicas para problemas encontrados == | ||
Revision as of 18:26, 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.
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.
(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);
