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 11.1 Problema #1 11.2 Problema #2 11.3 Problema #3 12 Melhoramentos Futuros 13 Conclusão

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>
  

  Dentro da div de classe "menu" temos variados botões que nos permitem aceder aos diversos menús do site. Aqui, ao clicar num dos menús, é invocada uma função, moving(); com dois parâmetros. Esta função, detalhada abaixo, permite então que haja movimento nas div de conteúdo (denominadas "container,container1,container2,...). Os parâmetros que são lá enviados, variam conforme o botão clicado, para que o movimento nos leve sempre ao menú onde clicamos. Tomando de exemplo o botão de id "cont", a função irá receber um valor para X e um valor para Y, respectivamente. Estes valores são de seguida aplicados dentro da função, tornando então o movimento possível, com recorrência ao animate do jQuery o movimento vertical e horizontal.
  
  A class "logo":
  

  CSS:

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

  
  HTML/JavaScript:

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

  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");
  };
  

  
  Como explicado acima, esta é a função que permite o movimento das divs "container". Para obter os movimentos separados, isto é, primeiro realizar o movimento horizontal, e de seguida o vertical, optamos por invocar a função duas vezes para cada elemento. Ainda foi ponderado o movimento diagonal, que implicaria a simples mudança exemplificada em baixo, mas a nível estético, e tendo em conta o conteúdo do site, concluímos que esta sera a melhor concepção.

  $(".container").animate({"left":x,"top":y}, "slow");

  
  
  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 variável window.name, que é uma variável que se mantém declarada enquanto a janela do browser estiver aberta. Assim sendo, com simples trocas entre 0 e 1, é possível que o ambiente seja alternado sem recorrer a cookies nem variáveis de sessão.
  
  

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

  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.

  Melhoramentos Futuros

  Devido á nossa falta de tempo e organização ficaram alguns objectivos a cumprir que gostaríamos de ver implementados, entre eles:

  
  Conteúdo do site em balões estilo banda desenhada;

  Criação de uma zona de registo/login com base de dados para a compra online dos nossos produtos;

  Zona de comentários;

  Criação de um sistema do género “carrinho de compras” para a possível venda dos nossos produtos;

  Conclusão

  Um dos principais objectivos do nosso projecto era a navegabilidade alternativa que este propõe aos utilizadores. Apesar dos problemas todos que nos surgiram para a aplicar e do tempo dispendido.

  Pretendiamos um site com um aspecto familiar aos amantes da Banda Desenhada e, em suma, podemos dizer que o conseguimos mesmo que não tenha sido como planeado.

  Com este projecto podemos concluir que apesar dos prazos impostos e de todas as adversidades encontradas na sua realização ficámos satisfeitos com o resultado final mas sempre com o sentimento de que poderíamos ter feito melhor.