Social Story

From Labmm2

(Difference between revisions)
Jump to: navigation, search
(→Estrutura XHTML implementada)
(→Folhas de estilos (CSS))
Line 212: Line 212:
== Folhas de estilos (CSS) ==
== Folhas de estilos (CSS) ==
 +
Por norma, as nossas páginas estão associadas a duas folhas CSS:
-
div#nav {
+
===“Untitled2.css”===
-
z-index: 1;
+
Esta Folha de Estilos é referente a todos os elementos a nível estético do site.
-
position: fixed;
+
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.
-
width: 100%;
+
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)
-
bottom: 0px;
+
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.
-
background-color: #1D4088;
+
À 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.
-
padding-left: 1em;
+
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”.
-
padding-top: 8px;
+
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)).
-
padding-right: 1em;
+
==="Style.css"===
-
 
+
-
}
+
-
 
+
-
 
+
-
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;
+
-
 
+
-
}
+
== Principais scripts desenvolvidos (JavaScript) ==
== Principais scripts desenvolvidos (JavaScript) ==

Revision as of 15:41, 21 June 2011

Social.jpg

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


Contents

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:

Layouts

Estrutura geral

Estrutura geral.jpg

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.

13.jpg

Outros layouts

Estrutura geral

Pagina de entrada

Index


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:


12.jpg 



<!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...)

Soluções técnicas para problemas encontrados

Melhoramentos futuros

Conclusões

Referências bibliográficas

Anexos

Retrieved from "http://wikis.ua.pt/labmm2/index.php?title=Social_Story"
Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox