Kaboom

From Labmm2

Revision as of 05:24, 22 June 2011

Grupo:
• Bruno Barradas - 59474
• Daniel Teixeira - 50644
• Flávio Bártolo - 59949
• João Santos - 60583
• Rui Rego - 59965

Contents 1 Apresentação e contextualização do tema 2 Brainstorming 3 Logótipos 4 Limites e características da aplicação 5 Layouts 6 Primeiro Layout 7 Fluxograma 8 Estrutura Geral 9 Funções no Javascript

Apresentação e contextualização do tema

O tema ao qual o nosso grupo se propõe falar, é a banda desenhada. Vamos desenvolver um quiosque on-line, onde se podem comprar artigos relacionados com os heróis e vilões de várias histórias de banda desenhada. O objectivo deste site é dar a conhecer aos utilizadores um pouco do mundo da banda-desenhada e dar a conhecer também a loja sobre a qual estamos a fazer o site.

• Público-alvo primário:
  O público-alvo para o qual vamos fazer o site são todos os amantes e apreciadores de banda-desenhada dos 8 aos 80 anos.

• Público-alvo secundário:
  Potenciais clientes que ao visitarem o site comecem a ficar interessados nos produtos disponibilizados pela loja e pela banda desenhada, principalmente as crianças.

  Brainstorming

  Ao longo do processo de Brainstorming, várias ideias foram discutidas e apresentadas entre as quais as seguintes:
  

• Criação de um layout para portofólios;
  
• "Rede social" para artistas e empresas no ramo da fotografia;
  
• Site para troca de favores entre utilizadores;
  

  Logótipos

  
  
  
  
  
  

  

  
  
  
  Decidimos usar 2 logótipos diferentes pois para o site vamos recorrer a dois layouts diferentes, um layout para os heróis com um logótipo com fundo azul e um layout para vilões, com logótipo com fundo vermelho.

  
  

  Limites e características da aplicação

  Para este site vamos possibilitar o acesso a todos os utilizadores que queiram visitar o site, o acesso será livre a todos os menus, mas para que sejam efectuadas as compras dos produtos disponíveis será necessário criar uma conta de utilizador.

  
  

  Layouts

  
  Para este site irão ser realizados dois layouts com temas diferentes, um como o tema de heróis, e outro com vilões. O plano de fundo será dividido numa imagem, dividida em quadradinhos de banda desenhada que representam os diversos menus, cada um desses quadrados terá um herói/vilão. Para se alterar entre os temas, em cada menu, irá haver um butão que irá permitir essa alteração entre os temas. Os menus em cada um dos temas terão os mesmos conteúdos e tudo estará posicionado da mesma maneira, as únicas alterações que serão apresentadas será a personagem e a imagem de fundo no quadrado.
  
  

  Primeiro Layout

  Layout herói:
  
  
  Layout vilões:
  
  
  

  Fluxograma

  
  
  

  Estrutura Geral

  Para a realização deste site, recorremos à utilização de divs e classes para dividir a informação presente em cada um dos menus (logótipo do site, menu, conteúdos, etc..)
  
  A classe menu:

  <div class="menu">
  
  
          <img src="imgs/menu/home_active.png" />
          	<button id="about" onClick="moving('-=100%','null');"><img src="imgs/menu/about.png" /></button>
          	<button id="reg" onClick="moving('null','-=100%');" ><img src="imgs/menu/reg.png" /></button><br />
          	<button id="sto" onClick="moving('-=100%','-=100%');"><img src="imgs/menu/store.png" /></button>
          	<button id="sug" onClick="moving('null','-=200%');"><img src="imgs/menu/sug.png" /></button>
          	<button id="cont" onClick="moving('-=100%','-=200%');" ><img src="imgs/menu/cont.png" /></button>
          </div>
  

  A class "menu" activa o menu que permite o acesso às diversas páginas. Quando o utilizador se encontra num determinado menu, o botão referente a esse menu é substituído por uma imagem, desactivando assim o botão. Neste exemplo está presente a class "menu" dentro da página "home".
  
  A class "logo":
  

  .logo {
  	position: absolute;
  	width: 400px;
  	height: 200px;
  }
  

  
  A class "logo" é a class que gera o logótipo do site, consoante o utilizador se encontre no "Lado Herói" ou no "Lado Vilão", esta class também alberga o código Javascript que faz com que alteração dos logótipos seja possível.
  
  A class "Spider":
  

  .spider {
  	top: 25%;
  	position: relative;
  	text-align:right;
  

  
  A class "Spider", é a class que gera a personagem presente em cada uma das páginas. É esta a class que contém o script necessário para que a alteração da personagem, consoante o "Lado" em que se está, seja possível.
  
  A Class "Conteudo":
  

  position: absolute;
  	top: 27%;
  	left: 5%;
  	width: 65%;
  	height: 65%;
  	background-image: url(imgs/bub/bg.png);
  	border: 2px solid #000;
  	font-family: Arial, Helvetica, sans-serif;
  	font-size: 12px;
  	padding: 10px;
  	text-align: left;
  	overflow: auto;
  

  
  A Class "Conteudo" contém a informação presente em cada uma das páginas. Esta class também impõe regras em relação às tags "h1" e "img". Dentro desta class é frequente a existência das class's "div_cont" e "texto_cont", a class "div_cont"..........., e a class "texto_cont", que formata os textos presentes dentro da class para um modo de dispaly inline .

  Funções no Javascript

  Função Moving:

  function moving(x,y) {
  	$(".container").animate({"left": x}, "slow");
  	$(".container1").animate({"left": x}, "slow");
  	$(".container2").animate({"left": x}, "slow");
  	$(".container3").animate({"left": x}, "slow");
  	$(".container4").animate({"left": x}, "slow");
  	$(".container5").animate({"left": x}, "slow");
  	$(".container").animate({"top": y}, "slow");
  	$(".container1").animate({"top": y}, "slow");
  	$(".container2").animate({"top": y}, "slow");
  	$(".container3").animate({"top": y}, "slow");
  	$(".container4").animate({"top": y}, "slow");
  	$(".container5").animate({"top": y}, "slow");
  };
  

  
  A função moving permite a transição entre os menus (divs).
  
  Função Mudar:

  function mudar() {
  	hero=window.name;
  	if(hero==0){
  		hero=1;
  		window.name=1;
  	}
  	else {
  		hero=0;
  		window.name=0;
  	}
  	window.location.reload(true);
  }
  

  A função mudar permite a alteração do ambiente gráfico de herói para vilão ou vice-versa, de acordo com o valor da variável "hero" (0 ou 1). O valor guardado na variável "hero" está guardado na própria página, o que permite que não haja quaisquer alterações quando o utilizador fizer refresh na página.
  
  

  Atribuição da personagem de acordo o "Lado Herói" e o "Lado Vilão":

  <div class="spider">
      <script>
  	if(hero==1){
      	document.write("<img class='pers' src='imgs/personas/herois/superman.png' />");
      }
  	else {
      	document.write("<img class='pers' src='imgs/personas/viloes/sup.png' />");
  	}
  	</script>
      </div>
  

  Esta instrução, permite alterar a personagem que aparece na imagem de fundo que se encontra dentro da class "spider" (neste exemplo está presente a class "spider" do menu dos contactos).
  
  Alteração dos logos

  <div class="logo">
      <script>
  		if(hero==1){
      		document.write("<img class='pers' src='imgs/logos/logog.png' />");
      	}
  		else {
  		    document.write("<img class='pers' src='imgs/logos/logob.png' />");
  		}
  	</script>
  

  Este script permite alterar o logótipo do site quando se alterna entre o "Lado Bom" e o "Lado Mau", de acordo com o valor presente na variável "hero".