Social Story

From Labmm2

(Difference between revisions)
Jump to: navigation, search
(→Apresentação e contextualização do tema)
Line 18: Line 18:
== Apresentação e contextualização do tema ==
== 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.  
+
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.
-
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
+
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.
-
(*) - Brainstorming
+
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.
-
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.
+
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.
-
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.
+
 
 +
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 ==
== Layouts ==

Revision as of 15:11, 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

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">

<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'>


<title>The Social Story</title>


</head>


<body>



  • <a href="#">the story </a>|</li>
  • <a href="#">redes sociais </a>|</li>
  • <a href="#">jogo </a>| </li>
  • <a href="#">sobre </a></li> </ul>




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

    • </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;

    }

    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