Kaboom

From Labmm2

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 10 Integração com outras tecnologias 11 Soluções técnicas para problemas encontrados

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

  Integração com outras tecnologias

  jQuery - O jQuery foi essêncial na construção do nosso site, pois este tornou possível o movimento das div (quadrados principais de BD). A função a que recorremos para que tal sucedesse foi a animate, onde nos era possível definir, entre outras funcionalidades, o movimento para a esquerda/direita, e para cima/baixo através de valores de percentagem. Além disso ainda nos era possível definir a velocidade de movimento com valores predefinidos. Neste caso recorremos ao "Slow".

  Soluções técnicas para problemas encontrados

  Problema #1

  A início, apesar de termos concebido um código que realizasse o movimento (testado num ficheiro independente), este, quando aplicado, ou não funcionava, ou não arrastava os elementos necessários na totalidade. Após alguma insistência com o JavaScript, concluímos que o problema residia na CSS aplicada, pois esta tinha sido feita de maneira a que tudo se apresentasse correctamente, mas de certa forma, sem pensar no movimento que estas teriam que efectuar. A solução foi criar novamente uma CSS do zero, já a pensar no que futuramente teria que suceder.

  Problema #2

  Após termos o movimento a funcionar correctamente numa única div, começámos a problematizar sobre possíveis soluções para optimizar e encurtar o código. A solução encontrada é exemplificada a seguir:

  <button id="home" onClick="moving('+=100%','+=200%');">

  Sendo moving(); a função que possibilitava o movimento das 6 divs principais, e tendo em conta que quando havia movimento, todas tinham que se movimentar a mesma distância, optámos por passar os valores em parâmetros da função. Assim, "+=100%" seria o valor que definia o movimento esquerda/direita, e "+=200%" seria o valor do movimento cima/baixo.

  Problema #3

  A criação do botão que faz a transferência do lado bom para o lado mau criou desde início um problema. Para que a troca fosse bem sucedida, teria que existir uma variável que se mantivesse declarada mesmo após um "refresh" da página. Como não recorremos a PHP/ASP, variáveis de Sessão estavam fora de questão, e cookies pareciam de certa forma um exagero para algo tão "simples".

  Optámos então por recorrer ao window.name. O window.name é uma propriedade da janela que nos diz o nome da mesma. Como não havia utilidade para tal variável no nosso site, acabámos por lhe atribuir o valor de 1 ou 0 para tornar possível que se alternasse entre herois e vilões.