Banners Publicitários

INTRODUÇÃO

Como se trata de uma série, é essencialmente importante que, antes de iniciar esta matéria, você tenha visto a 2ª parte.

PRÉ-REQUISITOS

• Facilidade com o manuseio do Fireworks CS3
• Entendimento básico sobre briefing (maiores informações, acesse: BRIEFING)
• Ter feito o tutorial Banners Publicitários: Parte 2

OBJETIVO

Dar continuidade a criação um banner publicitário utilizando Fireworks CS3 e obedecendo formatos padrões para web.

CONCEITO

Relembrando, o formato escolhido para este 3º tutorial da série será o com dimensões 160×600 px, chamado de Wide Skyscraper, um banner vertical porsicionado nas laterais de grandes portais. Este banner é a continuação do tutorial anterior.

CONTEÚDO

Vamos concluir a criação dos efeitos no fundo deste banner para, em seguida, podermos inserir o conteúdo.

1- Organização

No painel Layers (Camadas), insiramos uma nova pasta (Efeitos – ela deve estar acima da pasta Fundo) e subpastas como na figura abaixo:

Fig. 01: Organização dos layers

2 – Efeito Trapézio 1

Vamos criar um efeito com a figura geométrica de um trapézio (devemos selecionar a pasta Trapézio 1 antes de criarmos a figura) utilizando a ferramenta Pen tool(caneta [P] ). Como a imagem exibe abaixo, façamos a geometria com borda na cor branca e preenchimento gradiente linear #FFCC00 para #FFFFFF.

Fig. 02: Efeito trapézio 1

Fig. 03: Configuração do efeito

3 – Efeito Trapézio 2

a) Vamos criar uma cópia do trapézio anterior e colá-la na camada Trapézio 2.

b) Em seguida, posicionemos a cópia como mostra a figura a seguir, utilizando a ferramenta Subselection tool (Subseleção [A] ):

Fig. 04: Efeito trapézio 2

4 – Efeito Raios

Agora, utilizando uma mesclagem entre as ferramentas pen tool e subselection tool, vamos criar imagens que pareçam com raios. Mas antes, não esqueçamos de clicar na camada Raios.

Fig. 05: Efeito Raios

Dica: devemos variar as cores de cada raio juntamente com sua opacidade (20 a 50%). Além de aplicarmos o filtro Overlay.

Fig. 06: Aplicação de opacidade e filtro

5 – Efeito Barras

Vamos trabalha agora com efeito em barras.

a) Primeiramente, criaremos três retângulos idênticos, na cor branca, e os colocaremos na base do banner.

Fig. 07: Retângulos idênticos

b) Com os três selecionados, vamos transformá-los em um objeto apenas, unindo-os. Para isso, devemos acessar o menu Modify > Combine Paths > Union ou pelo atalho CTRL+ALT+U.

c) Agora, utilizando um gradiente linear conforme a imagem e o filtro Overlay, faremos o acabamento da figura.

Fig. 08: Acabamento do objeto

Fig. 09: Resultado

6 – Efeito Ondas

E para encerrarmos mais esta parte do tutorial, criaremos um efeito de ondas para o banner.

a) Com a camada Ondas selecionada, criaremos uma imagem curva e com as seguintes propriedades:

Fig. 10: Efeito ondas

E está aí o resultado:

Fig. 11: Resultado do tutorial

Fonte: http://www.mxstudio.com.br/fireworks/banners-publicitarios-parte-3/

Entendendo um pouco de Java Server Faces (JSF)

O que é? - Java Server Faces (JSF) é um framework para desenvolvimento Web;

Por que usar? - Se tornou um padrão; - Fácil de usar; - Open source; - Etc;

O que preciso saber para conseguir acompanhar o tutorial?

-Orientação a objetos básico;

 - Java básico;

 - Jsp básico

 - XML básico;

 Agora podemos começar com algumas definições:

1. Regras de Navegação

- É a central de informações da aplicação Web, elas respondem a pergunta: "ei, para qual página vamos agora?";

 - São definidas no arquivo faces-config.xml; 

- Quando um botão ou um link é clicado, passamos por um método que retornará uma String, ou podemos enviar essa String diretamente; 

- Uma String null ou "", faz a aplicação retornar para a mesma página; 

Vejamos abaixo um exemplo:

1.   
2.     /welcomeJSF.jsp    
3.     case>   
4.         sucesso   
5.         /main.jsp   
6.           
7.      case>  
8.     case>   
9.         falha   
10.         /erro.jsp   
11.           
12.      case>  
13.  

 Observações:

1. /welcomeJSF.jsp  

- Essa linha garante que a String só será analisada se vier de welcomeJSF.jsp
(opcional)
- Muda o endereço da página no navegador; 
- Mais lento, pois são feitas duas requisições;
- Objetos colocados no escopo do request são perdidos durante a segunda requisição;

2. BackingBeans
- São classes simples com variáveis e os famosos setters e getters;
- Armazenarão os dados que serão mostrados no browser;
- Precisam ser configurados no faces-config.xml;

Escopo dos BackingBeans
- request – começa quando uma requisição HTTP é submetida e termina quando a resposta é enviada de volta aocliente;
- session – persiste durante toda a sessão;
- application – persiste por toda a duração da aplicação web. É compartilhado por todas as requisições e por todas as sessões; 

Exemplo:

1. package beans;  
2. public class ExemploBean {  
3.    private String usuario;  
4.    public void setUsuario (String usuario) {  
5.         this.usuario = usuario;       
6.    }  
7.    public String getUsuario() {  
8.         return usuario;  
9.    }       
10. } 

Agora, configurando no faces-config.xml:

1.   
2.     b   
3.     class>beans.ExemploBeanclass>          
4.     session  
5.  

Um exemplo mais completo:

- Se em nossa welcomeJSF.jsp temos:

1. ...  
2.   
3. <%--acessa a variável " usuario" do bean chamado de "b"--%>  
4.   
5.   
6. <%--chama o método "ok" do bean "b"--%>  
7. ...  

- E tivessemos um método chamado "ok" na nossa classe ExemploBean:

1. public String ok() {         
2.     if (usuario.equals(“João Sávio”)   
3.         return “sucesso”;       //Lembram da String? Olha ela aqui!!!!  
4.     else  
5.         return “falha”;  
6. }  

 Quando o botão "OK" for pressionado, ele chamará o método "ok" do bean "b";
- Esse método retornará uma String que será analisada pelas regras de navegação;

Agora vamos ver uma utilização mais apropriada dos Backing Beans:
- Criaremos uma classe chamada ControleBean em um pacote diferenciado;
- Essa classe conterá uma variável que referenciará ExemploBean;
- Mudaremos o bean "b" na regra de navegação;

1. package controller;  
2. import beans.ExemploBean;  
3. public  class ControleBean{  
4.     private ExemploBean exBean;  
5.     public ControleBean() {  
6.         exBean  = new ExemploBean(); //não esquecer de instanciar  
7.     }  
8.     public String ok() {  
9.         if (usuario.equals(“João Sávio”)  
10.             return “sucesso”;  
11.         else  
12.             return “falha”;  
13.     }                
14.     //respectivos sets e gets de ExemploBean(obrigatório)  
15. }  

E no faces-config.xml:

1.   
2.     b  
3.     class>controller.ControleBeanclass>          
4.     session  
5.  

E como acessaremos a variável "usuario" de ExemploBean?
- Simples, basta fazer isso: "#{b.exBean.usuario}";

Quais as vantagens dessa abordagem?
- Não teremos uma classe bagunçada, ou seja, cheia de sets, gets e métodos controladores;
- Estaremos implementando o padrão MVC (Model-View-Controller) mais eficientemente, separando o Model (ExemploBean.java), o Controller (ControleBean.java) e a View (welcomeJSF.jsp);

Retirado do site JavaFree