Social Story

From Labmm2

(Difference between revisions)

Jump to: navigation, search

Revision as of 16:13, 20 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

1 Apresentação e contextualização do tema
2 Layouts
3 Estrutura XHTML implementada
4 Folhas de estilos (CSS)
5 Principais scripts desenvolvidos (JavaScript)
6 Integração com outras tecnologias (frameworks, linguagens, etc...)
7 Soluções técnicas para problemas encontrados
8 Melhoramentos futuros
9 Conclusões
10 Referências bibliográficas

Apresentação e contextualização do tema

Após um processo de brainstorming (*) inicial, tivemos em conjunto a ideia inicial: As redes sociais. A partir daí, desenvolvemos o nosso super conceito, que vai estar presente durante a aplicação multimédia: apresentar, de uma forma diferente, a história/importância das redes sociais na actualidade e o seu impacto através da vida de uma pessoa. Assim, vivendo num mundo contemporâneo e onde a internet tem um papel cada vez mais marcante sobre as vidas das pessoas, achamos esta temática pertinente para além de interessante para a população em geral.

Desta forma, os nossos objectivos envolvem : 1 – 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.; 2 - 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. 3 - Sensibizaçã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, quando a privacidade é excedida juntamente com importância de criar um equilíbrio entre “o que é bom” e o “que é mal” na utilização destas redes. Pretendemos também incentivar o utilizador a formar a sua própria opinião e pensamento crítico. 4 – 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

(*) - Brainstorming

Da primeira reunião surgiram 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 artísta, 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.

No que toca a escolha feita, inicialmente, a nossa intenção era apenas contar uma história fictícia onde pudessemos mostrar as vantagens/desvantagens na utilização das redes sociais. No entanto, achamos que deveriamos disponibilizar uma área mais informativa, daí a inserção das curiosidades sobre cada uma das principais redes sociais.

Layouts

Estruturas 'gerais'

Estrutura geral

Pagina de entrada

Index

Layouts de cada página

Estrutura XHTML implementada

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>The Social Story</title>

</head>

<body>

<a href="#">the story </a>|</li>

<a href="#">redes sociais </a>|</li>

<a href="#">sobre </a></li> </ul>

$(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>

</body>

</html>

Folhas de estilos (CSS)

div#nav {

z-index: 1;

position: fixed;

width: 100%;

bottom: 0px;

background-color: #1D4088;

padding-left: 1em;

padding-top: 8px;

padding-right: 1em;

}

div.presentation {

position:fixed;

height:444px;

width:899px;

margin-left: 5px

margin-top: 10px;

display: block;

background-color:inherit;

/* border: 1px solid green;*/

}

.slide cover current {

background-color:#535B5E;

}

div.slides {

width: 899px;;

height: 100%;

overflow:hidden;

left: 0;

top: 0;

position: absolute;

display: block;

-webkit-transition: -webkit-transform 0.5s ease-in-out;

-moz-transition: -moz-transform 0.5s ease-in-out;

-o-transition: -o-transform 0.5s ease-in-out;

background-color:inherit;

}

.center intro{

background-color:inherit;

}

.instructions-screen {

background-color:inherit;

}

div.slide {

display: none;

position: absolute;

overflow: visible;

width: 900px;

height: 899px;

left: 50%;

top: 50%;

margin-top: -350px;

background-color: #535B5E;

background-repeat:no-repeat;

background-image:url(Fundo%20verde.png);

-webkit-transition: margin 0.25s ease-in-out;

-moz-transition: margin 0.25s ease-in-out;

-o-transition: margin 0.25s ease-in-out;

box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 4px;

-webkit-box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 4px;

-moz-box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 4px;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

border-radius: 10px;

}

.slide.far-past {

display: block;

margin-left: -2450px;

}

.slide.past {

display: block;

margin-left: -1450px;

}

.slide.current {

display: block;

margin-left: -450px;

}

.slide.future {

display: block;

margin-left: 550px;

}

.slide.far-future {

display: block;

margin-left: 1550px;

}

body.three-d div.slides {

-webkit-transform: translateX(50px) scale(0.8) rotateY(10deg);

-moz-transform: translateX(50px) scale(0.8) rotateY(10deg);

-o-transform: translateX(50px) scale(0.8) rotateY(10deg);

}

body.hide div.slides {

top: -80%;

-webkit-transition: top 0.25s ease-in-out;

}

body.show div.slides {

top: 0%;

-webkit-transition: top 0.25s ease-in-out;

}

/*Style*/

/*Type*/

@font-face {

font-family: 'TradeGothicLTStdCnBold';

src: url('../fonts/tradegothicltstd-bdcn20/tradegothicltstd-bdcn20-webfont.eot');

src: local('☺'), url('../fonts/tradegothicltstd-bdcn20/tradegothicltstd-bdcn20-webfont.woff') format('woff'),

url('../fonts/tradegothicltstd-bdcn20/tradegothicltstd-bdcn20-webfont.ttf') format('truetype'), url('../fonts/tradegothicltstd-bdcn20/tradegothicltstd-bdcn20-webfont.svg#webfontYPITXSXP') format('svg');

font-weight: normal;

font-style: normal;

}

/*Nav*/

div#nav #title {

float: left;

width: 60%;

color: #fff;

}

div#nav #title h1{

display: inline;

font-family: 'TradeGothicLTStdCnBold',Arial,sans-serif;

font-weight: normal;

text-transform: uppercase;

font-size: 24px;

}

div#nav #title h2{

font-family: 'TradeGothicLTStdRegular',Arial,sans-serif;

display: inline;

}

div#nav #title a {

color: #fff;

text-decoration: none;

}

div#nav #title a:hover {

text-decoration: underline;

}

ul.slidenav {

float: right;

width: 200px;

/*border: 1px green solid;*/

text-align: right;

padding-right: 30px;

}

ul.slidenav li {

font-family: 'TradeGothicLTStdCnBold',Arial,sans-serif;

font-weight: normal;

text-transform: uppercase;

font-size: 24px;

display: inline;

list-style-type: none;

padding-left: 10px;

}

/*Slide*/

header {

position: absolute;

left: 30px;

top: 18px;

margin-left: -44px;

padding-bottom: 14px;

background: url(../images/headerBg.png) no-repeat 0 80px;

}

h1{

size:100px;

font-family: font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;

color:#aed2cc;

}

header h1{

font-family: font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;

font-weight: normal;

font-size: 100px;

text-transform: uppercase;

color: #aed2cc;

height: 73px;

padding-top: 7px;

padding-right: 12px;

padding-left: 8px;

display: inline-block;

}

header h2{

font-family: 'TradeGothicLTStdBoldRegular',Arial,sans-serif;

font-weight: normal;

font-size: 72px;

text-transform: uppercase;

color: #fff;

height: 73px;

padding-top: 7px;

padding-right: 12px;

padding-left: 8px;

background-color: #c3bfb9;

display: inline-block;

}

subheader {

position: absolute;

left: 70px;

top: 106px;

width: 842px;

padding-bottom: 12px;

background: url(../images/subheaderBg.png) no-repeat 830px 46px;

}

subheader h3 {

font-family: 'ClarendonFSBold',Arial,sans-serif;

font-weight: normal;

font-size: 36px;

/*line-height: 36px;*/

color: #69604f;

height: 46px;

padding-left: 8px;

background-color: #CB9;

}

flag {

position: absolute;

left: 13px;

top: 106px;

-webkit-transform-origin: 0px 0px;

-webkit-transform: rotate(-90deg);

-moz-transform-origin: 0px 0px;

-moz-transform: rotate(-90deg);

transform: rotate(-90deg);

filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

margin-top: 300px;

width: 300px;

text-align: right;

}

flag h4{

font-family: 'TradeGothicLTStdBoldRegular',Arial,sans-serif;

font-weight: normal;

font-size: 36px;

text-transform: uppercase;

color: #fff;

/*background-color: #f60;*/

display: inline-block;

padding-top: 9px;

padding-left: 30px;

padding-right: 10px;

height: 41px;

background: #f60 url(../images/flagBg.png) no-repeat;

}

section {

font-family: 'TradeGothicLTStdRegular',Arial,sans-serif;

font-size: 32px;

color: #3D5998;

margin-left: 50px;

margin-right: 30px;

margin-top: 220px;

display: block;

overflow: hidden;

height: 525px;

}

div.slide section.center.intro h1{

font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;

font-size: 100px;

text-transform: uppercase;

color: #AED2CC;

margin-top:220px;

margin-left:105px;

}

div.slide section.center.intro h2{

font-family: 'ClarendonFSMediumRegular',Arial,sans-serif;

font-weight: normal;

font-size: 32px;

color: #CB9;

margin: 0;

padding: 0;

line-height: 36px;

}

div.slide section.center.intro .instructions-screen{

font-size: 15px;

margin-top: 5px;

width:899px;

}

div.slide section.center.intro .instructions-screen p{

padding: 1px 2px;

}

div.slide section.center.intro .credit{

font-size: 14px;

position: absolute;

bottom: 40px;

}

div.slide.center {

border: 1px solid red;

padding: 300px;

}

div.slide blockquote {

font-family: 'TradeGothicLTStdBoldRegular',Arial,sans-serif;

margin-top: 120px;

/*border: 1px solid red;*/

font-size: 72px;

height: 200px;

width: 100%;

}

.bqstart {

float: left;

height: 300px;

margin-top: -90px;

margin-right: 10px;

padding-top: 45px;

margin-bottom: -50px;

font-size: 300%;

color: #c3bfb9;

/*border: 1px solid red;*/

}

.bqend {

float: right;

height: 100px;

margin-top: 10px;

padding-top: 0px;

font-size: 300%;

color: #c3bfb9;

/*border: 1px solid red;*/

}

div.slide .frame {

padding: 10px;

border: 1px solid #E5E5E5;

box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 4px;

-webkit-box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 4px;

-moz-box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 4px;

display: inline-block;

}

div.slide .split .frame {

float: left;

}

/*div.slide img {

padding: 10px;

border: 1px solid #E5E5E5;

box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 4px;

-webkit-box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 4px;

-moz-box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 4px;

}*/

div.slide ul{

margin-top: 0.25em;

margin-left: 40px;

}

div.slide .split ul {

margin-left: 415px;

/*border: 1px red solid;*/

}

div.slide ul li{

margin-top: 0.25em;

padding-left: 0.5em;

background: url(../images/ulBullet.png) no-repeat 0px 10px;

/*border: 1px solid orange;*/

}

div.slide ul.imagelist {

margin: 0;

padding: 0;

height: 340px;

}

div.slide ul.imagelist li {

display: inline;

list-style-type: none;

margin: 0;

padding: 0;

}

/*div.slide ul.imagelist li img {

}*/

div.slide section h4 {

font-family: 'TradeGothicLTStdBold',Arial,sans-serif;

margin-left: 0.25em;

margin-top: 0.5em;

font-size: 32px;

/*line-height: 36px;*/

color: #CB9;

}

div.slide a {

color: #c35922;

text-decoration: none;

}

div.slide a:hover {

text-decoration: underline;

}

div.slide .social {

position: absolute;

right: 75px;

bottom: 18px;

/*border: 1px solid red;*/

}

div.slide .imagecontainer{

position: relative;

display: inline-block;

margin-bottom: 10px;

line-height: 0;

}

div.imagecontainer .overlay{

position: absolute;

right: 0px;

bottom: 0px;

}

div.imagecontainer.frame .overlay{

right: 10px;

bottom: 10px;

}

.slidenav a {

color: #fff;

text-decoration: none;

}

.slidenav a:hover {

text-decoration: underline;

}

div.slide p {

/*margin-top: 0.25em;*/

padding-top: 5px;

/*border: 1px solid red;*/

}

div.slide p.link {

padding-left: 48px;

background: url(../images/linkIconLink01_A01.png) no-repeat;

/*border: 1px solid red;*/

}

div.slide p.learn {

margin-top: 0.4em;

padding-left: 48px;

background: url(../images/linkIconLearn01_A01.png) no-repeat;

/*border: 1px solid red;*/

}

/*pre*/

pre {

text-align: left;

font-size: 16px;

font-family: Monaco, Courier;

margin-top: 0.25em;

padding: 10px 20px;

background: rgba(215, 210, 201, 0.22);

border: 1px dashed #c3bfb9;

}

pre.large {

font-size: 22px;

}

pre.css {

font-size: 22px;

background: rgba(255, 102, 0, 0.15);

border: 1px dashed #f60;

}

pre b, pre strong {

font-weight: normal;

color: #c61800;

text-shadow: #c61800 0 0 1px;

}

/*.notes { display: none; }*/

.notes {

position: absolute;

width: 780px;

bottom: 0%;

margin-bottom: 1em;

margin-left: 50px;

color: #fff;

background-color: rgba(0, 0, 0, 0.75);

padding: 10px;

font-size: 12px;

-moz-border-radius: 8px;

-webkit-border-radius: 8px;

/*text-shadow: rgba(0, 0, 0, 0.6) 0 1px 1px;*/

display: none;

}

.notes h3 {

font-weight: bold;

}

.notes ul {

margin-left: 2em !important;

padding: 0 !important;

}

.notes ul li {

list-style-type: disc ;

margin: 0px !important;

padding: 0px !important;

background: none !important;

}

div.slide .notes a {

color: #f60;

}

div.gallery {

display:none;

}

Revision as of 16:07, 20 June 2011 (view source) 172.16.13.19 (Talk) (→Principais scripts desenvolvidas (JavaScript)) ← Older edit		Revision as of 16:13, 20 June 2011 (view source) 172.16.13.19 (Talk) Newer edit →
Line 1,216:		Line 1,216:

	== Referências bibliográficas ==		== Referências bibliográficas ==
		+

Social Story

From Labmm2

Revision as of 16:13, 20 June 2011

Contents

Apresentação e contextualização do tema

Layouts

Estrutura XHTML implementada

Folhas de estilos (CSS)

Principais scripts desenvolvidos (JavaScript)

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

Soluções técnicas para problemas encontrados

Melhoramentos futuros

Conclusões

Referências bibliográficas

Personal tools

Namespaces

Variants

Views

Actions

Search

Navigation

Toolbox