Como Criar Páginas de Captura (Squeeze Pages) Com o GIMP

Como Criar Páginas de Captura (Squeeze Pages) Com o GIMP

Embasex – Oportunidades Online

Visite o Documentário Embasex onde você irá encontrar artigos com dicas sobre Marketing Virtual e Negócios Online! Acesse agora mesmo http://documentario.embasex.net/ e não esqueça de classificar os artigos, dar a sua opinião, votar

no que você quer ler ou apenas dizer um oi! Estou lhe aguardando...

http://documentario.embasex.net/



NOTAS LEGAIS

Sobre o Autor/Publicador

O autor deste e-Book se esforçou para que toda a informação contida nesta publicação fosse precisa e verdadeira, mesmo assim, isto não garante que as informações aqui contidas sejam ainda válidas na época de leitura deste e-Book nem se responsabiliza o autor por qualquer erro, omissão, uso ou prejuízo relacionados com as informações aqui contidas. Deixa claro o autor que as informações aqui contidas são apenas informativas e cabe ao(a) leitor(a) verificá-las durante a sua leitura para certificar-se de que elas não estejam desatualizadas ou inválidas.

O conteúdo das informações aqui contidas representa o ponto de vista do autor na época de publicação desta obra e que não tem o mesmo nenhuma intenção de ofender, causar interpretações contrárias ou induzir o(a) leitor(a) à participação de nenhuma espécie de programa ou sistema ou à aquisição de bens ou serviços que sejam expostos ou divulgados aqui. Qualquer referência contra interpretações, julgamentos, divergências, etc, ou relacionada à pessoas ou organizações ou empresas são não-intencionais, a tudo o que for relacionado serve apenas para propósitos demonstrativos ou explicativos.

Na concepção de aquisição de bens ou serviços adquiridos ou contratados através desta obra, somente o(a) leitor(a) se responsabiliza por suas decisões ou atitudes. Os bens ou serviços aqui mencionados ou são frutos de divulgação pessoal ou para avaliação e/ou demostração de mercado e o autor não dará suporte nem na aquisição, nem no uso e muito menos suporte de qualquer natureza se o(a) leitor(a) os adquirir – somente o(a) leitor(a) é responsável por suas decisões ou atitudes assim como somente o vendedor ou empresa que possam ser referenciados aqui são responsáveis por seus atos.






Este e-Book não pretende ser uma fonte de pesquisa legal, comercial, financeira ou técnica. Para os leitores que precisem de consultas técnicas ou semelhantes é aconselhável que procurem serviços de profissionais da área legal, comercial, financeira ou técnica.

Toda e qualquer informação contida neste e-Book está sujeita a modificações, atualizações, reformulações, etc. O autor se reserva do direito de modificá-las ou não de acordo com sua vontade sem precisar emitir alguma espécie de aviso prévio aos leitores ou possuidores desta publicação (sob qualquer forma ou meio) como: em sítios, em seus computadores, em publicações, etc.

O autor também se reserva do direito de dar continuidade ou não à medida em que ocorrerem mudanças sobre o conteúdo que este e-book trata.

Todas as afirmações acima devem ser entendidas e estendidas para o publicador deste e-Book.

Para que você continue a leitura deste e-Book deve aceitar os termos acima. Sendo que o autor/publicador pode alterar estes “Termos Legais” incluindo mais termos à medida em que forem necessários ou para circundar alguma omissão das informações aqui contidas sem aviso prévio aos leitores ou possuidores (sob qualquer forma ou meio) desta obra ou conteúdo da mesma.

Caso não aceite ou discorde de alguma afirmação acima, por favor, ou não leia o conteúdo deste e-book e/ou apague-o de seu computador.






Este e-Book é de livre distribuição não podendo ser cobrada nenhuma taxa de qualquer natureza para a aquisição do mesmo.

[Sim] Este e-Book pode ser distribuído livremente.[Sim] Partes do conteúdo deste e-Book podem ser aproveitadas em outro documento (se desejável, cite a fonte).[Sim] Pode fazer parte de Brindes.[Não] Pode ter o seu conteúdo modificado.[Não] Pode ser envolvido em prática de SPAM.









http://marketing.embasex.net/SqueezePages



Prólogo

As páginas de captura (a.k.a Squeeze Pages) já foram, estão sendo e ainda serão o meio mais eficaz de coletar assinaturas para uma lista de e-mails em breves intervalos de tempo. Estas páginas são projetadas para serem de rápido carregamento as tornando ideais para apresentação em programas de Autosurfs ou ManualSurfs que temos à nossa disposição, mas nada impede que as usemos em outros locais igualmente como em programas PTCs por exemplo.

Mas a construção de uma página de captura envolve não somente a estrutura em si (aparência), são também empregadas várias técnicas psicológicas e marketing aplicado para convencer quem a está visualizando a deixar os seus dados de contato, a saber: nome e endereço de e-mail.

Neste presente e-book vou lhe mostrar de modo detalhado como construir a sua própria página de captura (design) para que possa testá-la na promoção de seus produtos, de seus programas PTCs, de seus programas MMNs... enfim se tiver algo para promover poderá usar as páginas de captura como uma ferramenta que irá lhe auxiliar na construção de sua lista de e-mails para que promova para os inscritos da mesma o seu produto!

O Autor






Programas e Materiais Necessários

1· Criatividade2· Editor Gráfico3· Coleção de Imagens4· Editor HTML WYSIWYG5· Alguns Navegadores (Web Browsers)

Como elemento principal é necessário um pouco de criatividade para compor além do layout principal, a sua página final de captura (design).

O editor gráfico que eu vou utilizar aqui será o GIMP, mas você poderá utilizar o PHOTOSHOP igualmente (ou outro semelhante que contenha as funções que eu utilizarei). A versão do GIMP que irei utilizar é a 2.6, talvez a versão que você usa tenha a posição das funções um pouco diferente, mas é só procurar, elas existem em qualquer versão!

As imagens você poderá obter de sua coleção pessoal ou procurar no Google Images ou mesmo no Bing Images (cuidado com as imagens que possuem direitos autorais – não as utilize em páginas na Web).

O Editor HTML WYSIWYG que utilizarei será o NVU, aqui também terá centenas de opções, basta procurar no Google por estes editores.

É necessário também que teste a sua página de captura final em vários navegadores pois o que verá em um pode não ser o que verá em outro (daí a necessidade de se testar pelo menos no Opera, Firefox e no IE).

Então, vamos começar a diversão!!!




http://www.google.com.br/

http://www.net2.com/nvu/

http://www.bing.com/?scope=images&nr=1

http://images.google.com/

http://www.adobe.com/br/products/photoshop/photoshop/

http://gimp.org/



Construção

Inicialmente você precisará compor o layout principal. Abaixo tem um layout que eu construí com as dimensões de 800x600 pixels (não é exatamente isto, mas pode considerar pixels como uma unidade de medida gráfica) que a partir de agora usarei apenas px (sua abreviação).

Fig.1 - O título e subtítulo estão inseridos na imagem, não são textos sobrepostos.

O próximo passo é abrir este layout em um editor gráfico para iniciar a edição do mesmo. Aqui eu utilizarei o editor gráfico GIMP. É importante que saiba que este editor não foi construído para tratamento de fotografias como muitos pensam, apesar das várias ferramentas que disponibiliza para este fim, o seu propósito foi para tratamento de imagens para a WEB!

Achei interessante dizer isto pois algumas pessoas têm a mania de dizer: “Este editor é fraco, nem tem aquela função que faz isto ou aquilo nesse editor aqui! Eu prefiro este aqui que é o melhor e mais usado no mundo!!!” O GIMP nasceu de uma concepção diferente!

Dica: para este efeito de sombra que está na figura acima, basta construir um retângulo (menor que a imagem) dentro da imagem, e em “Filtros Sombra e Luz→ ” escolher o efeito “Sombra projetada”, desmarcar a opção “Permitir redimensionamento”, após isto basta criar uma borda






de 2 pixels por exemplo em “Seleção Criar Borda...→ ” marcar a opção “Enevoar borda” e preencher a borda com uma cor em “Editar Preencher com cor de frente/fundo→ ”. Se quiser criar um retângulo arredondado, antes de inserir o efeito de sombra, escolha a opção “Retângulo arredondado” e escolha um “Raio” de 15% ou outra porcentagem que desejar.

Fig.2 – Abertura do layout no editor de imagens GIMP (destacando a ferramenta de movimento que você irá precisar mais adiante).

Para decompor a imagem você deverá utilizar a função “Fatiar” que se encontra em “Filtros Web→ Fatiar→ ”, esta função irá decompor a imagem (recortar) e criar uma tabela para inserção em páginas

HTML sendo que o resultado final será uma tabela que conterá a mesma estrutura da imagem. Mas para isto é necessário que coloque guias na imagem para mostrar para esta ferramenta como ela deve decompor a imagem para criar a tabela que comporá a página Web final.

Para criar estas guias acesse “Imagens Guias→ ”. Para esta tarefa é importante que escolha a função “Nova Guia...” pois ela permite que se defina as distâncias de criação de guias em pixels (a partir de 0px).






Se você não criar estas guias e acessar a ferramenta “Fatiar” diretamente, não será criado nada!

Também, peço que crie a sua primeira página seguindo estritamente as instruções aqui passadas, pois garantirá que não se desanime na sua primeira tentativa (o que talvez ocorra se fizer algo de diferente). Quando tiver mais prática, crie e modifique da maneira que desejar as suas páginas de captura.

Fig.3 – Escolha da ferramenta para a criação de guias.

Você irá criar guias na horizontal e na vertical para poder decompor a imagem em uma tabela.

Guias Horizontais

Iniciando com a criação de guias na horizontal crie a primeira à 0px.






Fig.4 – Passos para a criação da primeira guia na horizontal.

Escolha o direcionamento horizontal ( 1 ) na posição de 0px ( 2 ) e confirme em OK ( 3 ). Desta forma a primeira guia será criada conforme a figura abaixo.

Fig.5 – Criação da primeira guia na posição horizontal em 0px.

Para as próximas guias na horizontal poderá criá-las com o mesmo procedimento. Mas fazendo assim todas serão criadas em 0px. Sendo que você terá que movê-las para o seu local correto utilizando a “Ferramenta de Movimento” (veja na descrição da Fig.2 ). Uma dica é criar as próximas (com exceção da última) em 100px e movimentá-las para o local correto. Veja abaixo.

Fig.6 – Criação e movimentação de guias. Utilize a “Ferramenta de Movimento” para isto.






A última guia para uma precisão maior, deve ser criada na horizontal em 600px (que é a altura da imagem). Isto fará com que ela se alinhe perfeitamente à borda do layout. Na figura abaixo todas as guias na horizontal foram criadas e já estão em suas posições corretas. Eu ressaltei as posições em pixels da primeira e da última guia para facilitar o entendimento.

Fig.7 – Conclusão de criação das guias na horizontal.

Guias Verticais

O mesmo processo deve ser utilizado para se criar as guias na vertical.

Fig.8 – Construção das guias na posição vertical.






Mas aqui é interessante que se crie as guias que serão as colunas da tabela digitando diretamente a posição em pixels que deverão assumir. Desta forma se garante uma maior precisão e também que as células das colunas irão ter as mesmas dimensões assim como as imagens que irão compor estas células terão as mesmas dimensões também.

Como na figura acima, a primeira guia vertical foi criada em 0px. A segunda guia poderia ser criada em 50px, a terceira em 750px e a quarta e última seria criada em 800px (lembre que esta é uma imagem com 800x600 pixels). Veja como fica a estrutura de guias seguindo este raciocínio na figura abaixo.

Fig.9 – Conclusão de criação de guias (observe as posições em pixels).

Terminado o processo de criação de guias deve-se agora utilizar a opção “Filtros Web Fatiar→ → ” para decompor a imagem e criar a tabela final.

Decomposição da Imagem e Criação da Tabela

Ao acessar esta ferramenta você terá as seguintes opções:

· Escolher o diretório de destino ( 1 ) que deve ser criado previamente

· Escolher o nome da página que será criada dentro do diretório de destino ( 2 )

· Escolher o prefixo do nome das imagens que serão criadas ( 3 )

· Escolher o formato das imagens que serão criadas ( 4 ). Eu sugiro escolher GIF ou PNG

· Escolher se quer que as imagens sejam criadas no mesmo diretório da página Web (Não) ou se quer que sejam criadas em um diretório separado (Sim) que é o mais correto ( 5 )

· Se for criar um diretório separado para imagens escolha aqui o nome dele ( 6 )






· Espaço entre os elementos da tabela ( 7 ). Deixe sempre em zero

· Animação em javascript ( 8 ). Para esta função seria necessário ter duas imagens, mas não utilize esta função agora

· Não animar os cantos da tabela ( 9 ). Deixe em “Sim” esta função

· Depois de tudo concluído pressione o botão OK para decompor a imagem e criar a tabela ( 10 )

Fig.10 – Ferramenta Fatiar (esta ferramenta irá decompor uma imagem e criar uma tabela em HTML com a mesma estrutura da imagem original).






Abrindo a Página Criada em um Navegador Web

Após ter criado a tabela, abra o arquivo criado com um navegador Web. De início vou utilizar o Opera 9.64.

Fig.11 – Visualização da tabela criada.

Em primeiro lugar, considere que o que foi criado não foi uma página HTML completa mas apenas uma tabela. Ela é visualizada normalmente nos navegadores pois eles já incluem os cabeçalhos de uma página HTML por padrão para casos como estes (também são capazes de abrir e fechar tags com o intuito de formatar da melhor maneira possível as páginas que vemos).

Mas aqui há dois problemas iniciais para serem resolvidos: 1. a tabela não ficou centralizada na página e 2. o que será o corpo da página de captura tem uma imagem de fundo (desnecessária) ao mesmo tempo que possui uma ligação (a href) apontando para a própria página.






Formatando a Página de Captura

O próximo passo é abrir o editor HTML WYSIWYG para se prosseguir com a criação e formatação da página de captura. Vou utilizar aqui o NVU para esta função conforme a figura abaixo.

Fig.12 – Editor HTML WYSIWYG (NVU).

Você deve agora transportar a tabela criada pelo GIMP para a página HTML final (que é criada quando se abre o editor HTML – a mostrada na figura acima). Primeiro clique sobre o botão “Source” ou “Fonte” do NVU para mostrar o código fonte da página, abra o arquivo criado pelo GIMP com um editor de texto comum (aqui eu usei o Kwrite), selecione a tabela (desde a primeira tag <table> até a tag de fechamento da tabela que é </table>) e a copie na área de transferência.

Obs.: Você poderia abrir diretamente o arquivo criado pelo GIMP com o editor HTML, pois o NVU e outros editores iriam inserir automaticamente os cabeçalhos na própria página aberta. Mas não são todos os editores que fazem isto e também iria depender se você alterou ou não a configuração do editor HTML para fazer isto ou não!






Fig.13 – Copiando a tabela criada pelo GIMP.

... após copiar a tabela completa, cole-a dentro do código fonte criado pelo editor HTML entre as tags <body> e </body>...






Fig.14 – Inserção do código criado pelo GIMP na página criada pelo editor HTML.

... já aproveitando a oportunidade, elimine a imagem de fundo e a ligação que existe na tabela. Ela vai estar na segunda linha da tabela na segunda coluna, conforme destacado acima. Você deve apagar completamente as tags a e a tag responsável pela imagem que é a img...

Fig.15 – Códigos que serão removidos.

Fig.16 – Aqui as alterações já foram feitas restando apenas as tags td.

... ficando somente as tags <td> e </td> (o espaço na figura abaixo é somente para comparação), e por precaução, já defina a largura desta célula em 700 pixels dentro da tag <td>, resultando em <td width=”700”> ou <td style=”width: 700px”>...

...também apague todas as tags a do documento (<a href=#> e </a>), após isto, procure a tag <table> e insira nela o parâmetro align=”center” resultando em <table align=”center” ... >. Salve o documento aberto pelo NVU após estas modificações sobrescrevendo o arquivo que o GIMP criou. Como você observará, este documento terá a aparência como abaixo (se o seu editor HTML não recarregar o documento após salvá-lo, basta fechar o documento e abrir novamente o arquivo que foi






sobrescrito).

Fig.17 – Tabela alinhada no centro e sem a imagem no corpo.

Mais ainda há um pequeno problema... quando você começar a editar esta página, à medida em que a célula central se expande (e as das laterais também), as imagens que compõem as células das laterais não seguirão esta expansão o que irá fazer com que ...

Fig.18 – Distorções causadas pela expansão das células.






... apareçam as distorções mostradas na figura acima.

Para resolver este problema identifique as células em que as figuras das laterais estão, então basta apagar a tag img completa e adicionar o parâmetro background na célula correspondente (tag <td>).

Analise as figuras abaixo.

Clique com o botão esquerdo do mouse sobre a célula correspondente ( 1 ) para selecionar a mesma...

Fig.19 – Seleção da coluna correspondente à célula que possui a imagem da esquerda.

... clique sobre a tag <td> ( 2 ) para selecionar a mesma no código fonte e finalmente sobre o botão “Source” ou “Fonte” ( 3 ) para abrir o código fonte para edição, apagando completamente a tag img (que está selecionada na figura abaixo)...

Fig.20 – Deve-se apagar a tag img completamente...

... inserindo na tag <td> o parâmetro background=”images/slice_1_0.png” (nota: você deve verificar o caminho e o nome da imagem antes de apagar a tag img), ficando o código como abaixo...

Fig.21 - ... e inserir o parâmetro background na tag <td> com o caminho da imagem.

... o mesmo procedimento deve ser executado para a célula que comporta a imagem da direita. Se tiver executado esta tarefa corretamente a sua página poderá ser expandida o tanto que for necessária e as imagens não mais apresentarão problemas.






Este efeito de expansão ocorrerá pois a imagem agora ficará como imagem de fundo, fazendo com que durante esta expansão a imagem seja duplicada, triplicada... e assim sucessivamente o que não ocorre quando a imagem está no plano superior da coluna (em cima)!

Fig.22 – As imagens de fundo se expandem de acordo com as células das colunas.

Antes de começar a edição própria de sua nova página de captura, é bom que faça alguns testes em vários navegadores para saber se não há nenhuma incompatibilidade.






Testes para Verificar a Compatibilidade de Formatação

Sistema Operacional Gnu/Linux (LFS6.3/BLFS6.2)

Opera 9.64

Fig.23 – Página de captura aberta no Opera.

Flock 2.0.3

Fig.24 – Página de captura aberta no Flock.






Konqueror 4.1.0

Fig.25 – Página de captura aberta no Konqueror.

Firefox 2.0.0.14

Fig.26 – Página de captura aberta no Firefox.






Sistema Operacional Windows (XP)

Internet Explorer 8.0

Fig.27 – Página de captura aberta no Internet Explorer.

Chrome 1.0.154.65

Fig.28 – Página de captura aberta no Chrome.






Firefox 2.0.0.3

Fig.29 – Página de captura aberta no Firefox.

Como a página de captura recém criada foi testada em vários navegadores e não apresentou nenhum problema, posso concluir que a sua criação foi um sucesso! É importante que teste suas páginas de captura pelo menos nos navegadores que eu lhe indiquei no início deste e-book, pois principalmente as laterais podem ficar deformadas em um ou em outro.

O principal motivo de deformação através da criação destas páginas é com relação às imagens laterais (mesmo sendo de fundo), principalmente na tag <td> responsável pela célula de conteúdo (segunda linha – segunda coluna) com relação à sua dimensão – daí o motivo de se incluir o parâmetro width com o valor de 700 pixels. No mais, só ocorrerão problemas se você alterar as dimensões das células!

Dica: Esta foi a criação apenas de uma página de captura simples, mas estes são os princípios básicos para a construção das mais complexas. Se você visita regularmente o mercado do exterior, já deve ter visto páginas de capturas que possuem um plano de fundo.

Para construir estas páginas também não tem mistério, o GIMP faz tudo!

Veja abaixo o tipo de página a que eu estou me referindo.






Nela eu já coloquei as guias, mas esta imagem é apenas uma imagem de 1024x768 pixels que compõe o fundo. Em cima deste fundo é colocada outra camada que é justamente a página que foi criada aqui. Se você não souber trabalhar com camadas, basta compor todo o fundo, acrescentar (copiar) a página de captura que quiser em cima dela e salvá-la (aconselho a salvar como GIF ou PNG). Abra-a novamente e adicione as guias!

Eu coloquei apenas um gradiente por traz para destacar a página da frente (a página criada aqui), mas você poderá compor com qualquer tipo de imagem (inclusive transparência), e após estar tudo pronto, basta inserir as guias, fatiar e fazer os ajustes finais como foram feitos na página de captura que acabara de ser construída.






ConclusãoA partir do momento em que você tem este design pronto, e testado, você poderá incluir à vontade os outros elementos desde que você não altere as dimensões da tabela (principalmente das colunas). Se for trabalhar com tabelas dentro de sua página de captura, lembre que ela é uma tabela também. Para não modificar suas dimensões, crie (insira) uma nova tabela no corpo do documento ( dentro da célula de conteúdo da página de captura).

Maaasss... durante a edição você terá que formatar os vários parágrafos, os títulos, os subtítulos... inserir caixas, formulários... se você utilizar HTML puro para formatar estes vários elementos, não terá como controlar como eles vão aparecer nos diversos navegadores.

Então, qual a solução? Esta solução se chama CSS! Você não sabe como fazer ou não sabe o que é isto!!!

Sem problemas, acesse o Documentário Embasex onde eu escrevi o artigo Elementos Básicos de Páginas de Captura (Squeeze Pages) onde eu lhe explicarei mais alguns detalhes.

Bom, espero que tenha gostado das instruções deste pequeno e-book.

Desejando-lhe Sucesso em seus Empreendimentos,

Júlio Araújo

AG Embasex




http://documentario.embasex.net/divulgacao/elementos-basicos-de-paginas-de-captura-squeeze-pages

http://documentario.embasex.net/divulgacao/elementos-basicos-de-paginas-de-captura-squeeze-pages




Procurando por uma Hospedagem Web?

Conheça a Lypha! Além de ter dezenas de servidores Web constituindo a empresa para disponibilizar hospedagens de suas páginas, possui suporte técnico 24h por dia, oferece na conta básica 150GB de espaço em disco e 1,5TB de transferência mensal, tem suporte à PHP4/5, MySQL, perl5 (com diretório cgi-bin para cada domínio e subdomínio), tem um excelente desempenho... enfim, é tanta coisa que prefiro lhe mostrar abaixo (confira os planos quando acessar a Lypha).




http://marketing.embasex.net/Lypha



























Documents

Como Criar Páginas de Captura (Squeeze Pages) Com o GIMP