Social Story
From Labmm2
(→Folhas de estilos (CSS)) |
(→Folhas de estilos (CSS)) |
||
| Line 685: | Line 685: | ||
| - | + | .bqend { | |
float: right; | float: right; | ||
Revision as of 14:44, 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
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
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;
}
