Social Story
From Labmm2
(→Layouts) |
(→Estrutura XHTML implementada) |
||
| Line 59: | Line 59: | ||
== Estrutura XHTML implementada == | == Estrutura XHTML implementada == | ||
| - | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | + | 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. | ||
| + | |||
| + | |||
| + | [[File:12.jpg]] | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | <pre><!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"> | <html xmlns="http://www.w3.org/1999/xhtml"> | ||
| Line 194: | Line 208: | ||
</body> | </body> | ||
| - | </html> | + | </html></pre> |
| - | + | ||
| - | + | ||
== Folhas de estilos (CSS) == | == Folhas de estilos (CSS) == | ||
Revision as of 15:20, 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 |
 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:
- 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)
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;
}
