Utilize slideshows para chamar a atenção de seus visitantes.

Para divulgarmos e promovermos nossos produtos e serviços, temos de lançar mão de várias tecnologias com o intuito inicial de chamar a atenção de um navegante Web e lhe apresentar nossas propostas. Mas para isto, não basta simplesmente disponibilizar um banner ou uma imagem bonita e atrativa, temos que interagir com este navegante lhe passando a idéia de que ele não está apenas em mais um sítio, mas sim em um sítio que é ideal para lhe provê do que precisa.

Vou lhe mostrar neste artigo a apresentação de imagens em slideshow (ou galerias de imagens) que pode ser usado em lojas virtuais (e-commerce) para incrementar promoções, destacar produtos, caracterizar ou descrever funções de produtos… enfim, com esta tecnologia, você terá uma gama maior de ferramentas para apresentar os seus produtos e tentar manter a atenção de seus visitantes. Também o uso de slideshows é ideal para apresentação de portfólios. Qualquer conjunto de imagens que você queira exibir, poderá perfeitamente ser exibido em um tipo de slideshow.

Os exemplos desta página utilizam a biblioteca JQuery, mas há outros tipos de bibliotecas que executam funções semelhantes (como o Mootools).

Para não prolongar muito este artigo vou lhe mostrar primeiro 5 exemplos de utilização de slideshows. No final deste artigo vou lhe indicar onde poderá encontrar programas já prontos assim como tutoriais* para que você possa entender e modificar a apresentação destes slideshows de acordo com a sua necessidade. Todos os exemplos neste artigo tiveram seus códigos modificados para poderem caber (dimensões) nesta página, assim como foram feitas algumas alterações com relação aos seus elementos – desta forma você poderá ver que todos eles podem ser modificados de acordo com sua vontade.

Rotação de Imagens com Descrição

Como você poderá observar abaixo, este efeito possui um menu na parte direita que ao ser acessado, comuta a imagem na área principal e acrescenta uma pequena descrição à respeito da imagem apresentada.

SpaceGallery

Este exemplo foi construído utilizando o SpaceGallery. Este script trata de um conjunto de outros scripts em forma de pacote (estão todos em um arquivo compactado) que você poderá baixar em http://eyecon.ro/spacegallery/. Visite também o sítio principal em http://eyecon.ro/ onde encontrará outros pacotes com efeitos interessantes para incrementar em suas páginas.

Ótimo Efeito Hover com Thumbnails

No exemplo abaixo você tem thumbnails na parte superior que ao se passar o ponteiro do mouse, se destaca para permitir uma melhor visualização do produto (como exemplo). Este thumbnail ao ser clicado, comuta a imagem na área principal.

Slider Gallery

Aqui é apresentado um efeito Slider (de deslizamento) que captura os movimentos do mouse e consegue deslizar as imagens de acordo com o arrastamento do ponteiro do mouse na barra de rolagem. Este efeito eu achei interessante para lojas virtuais, onde se pode colocar promoções neste slideshow e utilizá-lo como header de secções.

Slick Slideshow

Outro efeito interessante para apresentar produtos ou secções de produtos. Como você pode observar abaixo, é permitido colocar uma imagem juntamente com uma descrição, onde estas imagens com suas respectivas descrições podem ser comutadas de acordo com cliques nas setas laterais (anterior e próxima).

Fontes

Como fonte inicial onde poderá encontrar estes efeitos de slideshows, vou listar aqui alguns sítios que os mantêm em forma de pacotes, onde você irá baixar o pacote, descompactá-lo, ler as instruções de uso e implementá-lo em suas páginas (os modificando se desejar).

Carousel – http://billwscott.com/carousel/
jCarousel – http://sorgalla.com/projects/jcarousel/
iCarousel – http://zendold.lojcomm.com.br/icarousel/
JQuery Cycle Plugin – http://www.malsup.com/jquery/cycle/
Slideshow 2 – http://www.electricprism.com/aeron/slideshow/

O Yahoo também mantém uma biblioteca (que é utilizada inclusive no Scribd) e que você poderá conhecê-la em http://developer.yahoo.com/yui/carousel/. O Google também possui códigos semelhantes em sua área Google Code que fica em http://code.google.com/intl/pt-BR/.

Para conhecer outros scripts visite o blog Cats Who Code que escreveu o artigo Top 10 Javascript Slideshows, carousels and slideshows que possui mais alguns modelos. Existem vários outros que você poderá encontrar em pesquisas por mecanismos de busca.

Quanto à tutoriais, tem o artigo 25 Tutoriais e Plugins jQuery para Sliders e Galerias de Imagens, que é um artigo do blog WebGrafismo onde irá conhecer vários outros projetos.

Conclusão

Como você pode observar nos exemplos deste artigo, estes slideshows podem ser implementados em qualquer tipo de páginas Web, não importa se é em uma única página ou em todas as páginas. Observe que principalmente lojas online (e-commerce) fazem uso extensivo deste efeito para cativar a atenção de seus visitantes, assim como para lhes mostrar os vários produtos que os mesmos podem se interessar (promoções, brindes, descontos, lançamentos…).

Enfim, com a posse e domínio desta tecnologia, poderá fazer apresentação de produtos muito mais eficaz do que iria fazer se utilizasse apenas banners ou imagens estáticas. Outro ponto interessante é que dependendo das imagens que colocar, poderá fazer com que suas páginas fiquem muito mais leves (carreguem rápido) do que se utilizasse a tecnologia flashplayer – aqui a página ficou pesada pois são carregados 5 slideshows diferentes com imagens diferentes também, de vários tamanhos.

* os tutoriais estão na língua inglesa, se você conhecer tutoriais na língua portuguesa poderá indicá-los nos comentários – assim mais pessoas serão beneficiadas.

No desenvolvimento de artigos ou páginas promocionais é importante desenvolver um conteúdo rico para os mecanismos de busca e para os leitores.

Uma das questões básicas na divulgação e promoção de serviços e produtos pela Internet é a de destaque em mecanismos de busca, principalmente com relação ao Google que hoje ocupa cerca de 60% desta indústria. Disto advém, que grande parte de nossos esforços são voltados para nos destacarmos nas pesquisas feitas por usuários destes mecanismos – quando mais próximos estivermos da primeira posição mais chances temos de sucesso com os nossos objetivos.

Existem vários fatores que contribuem para um bom posicionamento nestas pesquisas tanto on-page (meta tags description, keywords.. titulos.. etc) quanto off-page (aqui a aquisição de backlinks é fundamental).

Empresas e empreendedores gastam centenas e até milhares de reais mensais na compra de anúncios, compra de backlinks, contratação de profissionais e empresas em SEO com o único objetivo de se destacar de seus concorrentes nas primeiras posições e manter seus posicionamentos.

Aqui também é imprescindível dizer que quanto mais se investe mais retorno se tem (a não ser que estes profissionais e empresas utilizem técnicas de black HAT – aí os resultados são passageiros e imprevisíveis).

Mas se não cremos que é chegado o momento de investir pesado em campanhas, ainda sim temos várias outras alternativas para competirmos com o mercado pago e ganharmos uma fatia deste “bolo”.

Neste artigo vou descrever de forma bem objetiva um conceito que está começando a ter sua devida atenção por quem se preocupa com SEO, que se chama LSI (Latent Semantic Indexing).

O que é LSI?

A explicação deste termo é de certo modo complexa (pois seria necessário entender também o termo LSA), mas resumidamente podemos entendê-lo como palavras de apoio para as palavras chaves que queremos destacar em nossas páginas. Também, estas palavras de apoio serviriam para definir de modo mais preciso sobre o que sua palavra chave está descrevendo.

Vamos assumir a palavra mercado – se você a usar como palavra chave principal em suas páginas, terá que deixar bem específico para o leitor e para o Google que tipo de mercado você está se referindo – mercado de ações, mercado varejista, mercado de Marketing… é justamente neste ponto que entra o conceito de LSI, para ajudar a definir exatamente sobre o que você está expondo.

Uso de LSI

Vamos pesquisar no KeywordToolExternal do Adwords a palavra mercado.

Resultado da pesquisa (clique nesta barra para ver a tabela) [+/-]

Como se pode observar pela tabela acima, a palavra mercado por ser uma palavra chave simples recebe um grande volume de pesquisa (7.480.000)… Neste exemplo, vou me concentrar em mercado de Marketing Virtual – apesar de ter pouca procura (relativo aos outros resultados), vai servir para o que eu quero demonstrar.

Também observe na tabela acima que foram retornados vários tipos de mercados.

Agora deixe-me fazer uma pesquisa com o termo de estudo diretamente no Google e observar como os resultados são apresentados…

Nesta pesquisa como a palavra mercado é genérica, resultados de vários tipos de mercados são mostrados.

… como você pode observar, nos resultados orgânicos, verá que foram exibidos mercados diferentes, inclusive a WikiPedia apareceu nas primeiras posições (como se o Google quisesse que você entendesse o que é mercado e se decidisse sobre qual o mercado tem interesse em pesquisar)…

Observe que quando você faz uma pesquisa no KeywordToolExternal pela palavra mercado, que após os resultados principais tem a tabela “Palavras-chave adicionais a serem consideradas – classificado por relevância “… é justamente nesta tabela que são apresentados os termos mais relevantes de acordo com sua palavra chave escolhida. Veja abaixo os resultados que eu obtive.

Resultado da pesquisa de palavras relevantes (clique nesta barra para ver a tabela) [+/-]

… é justamente nesta tabela que o Google nos dá uma dica importante sobre como devemos fazer para definirmos o conteúdo de nossas páginas. Como eu escolhi mercado de Marketing virtual, a técnica aqui é escolher palavras de apoio para esta frase excluindo a própria palavra mercado.

Pela tabela acima, vê-se que a palavra Marketing foi pesquisada no mês de julho cerca de 1.220.000 vezes. Então como é nela que eu tenho interesse vou fazer uma outra pesquisa com ela no KeywordToolExternal… a partir de agora somente a segunda tabela me interessará.

Resultado da pesquisa (clique nesta barra para ver a tabela) [+/-]

Também aqui eu excluí as palavras que não me interessavam (palavras contento Marketing, palavras em espanhol… em inglês … etc). A técnica é escolher estas palavras de apoio e a partir delas outras (em pesquisas consecutivas) selecionar as palavras mais relevantes para o seu propósito.

Como o meu interesse aqui seria mercado de Marketing virtual, para a pesquisa mercado eu escolhi inicialmente a palavra de apoio (semântica) Marketing. Pesquisando por esta última, selecionei outras, como o esquema abaixo.

Exemplo esquemático [+/-]

Este esquema mostra buscas consecutivas para determinar as melhores palavras para mercado de Marketing virtual.

No exemplo acima eu excluí vários elementos para não tornar a imagem ilegível.

Após múltiplas seleções consegui reunir várias frases com palavras relevantes para uma suposta página sobre mercado de Marketing Virtual. A técnica em si é escolher sempre as palavras mais relevantes que não estejam acompanhadas da palavra chave pesquisada, mas isto nem sempre é possível. Então a opção é escolher palavras de forma que possa-se formar frases ou períodos para compor o conteúdo de sua página.

Desta forma, você terá um conteúdo rico para o Google (pois terá palavras e frases de alta relevância) ao mesmo tempo em que poderá apresentar um conteúdo informativo e útil para o seu leitor, pois é ele o objetivo final.

Conclusão

Os algoritmos de LSI segundo alguns relatos foram desenvolvidos mais para a detecção de conteúdos SPAMMING, onde haviam várias páginas sendo criadas por programas focadas em anúncios PPC dentro de vários mercados (niches) – que inclusive gerava grande renda para as pessoas que utilizavam estes programas. Com a compra do Adsense pelo Google, estes algoritmos evoluíram bastante e crê-se que são bastantes utilizados para determinar vários aspectos das páginas catalogadas pelo Google atribuindo pesos para as mesmas.

Sendo assim, o uso desta técnica deve ser levada em consideração durante a composição de suas páginas (principalmente se for divulgar ou promover algo).

Quando se tem tráfego gerado através de investimentos, este tráfego só será ativo enquanto houver investimentos. Se há todo um trabalho de SEO este investimento além de não precisar ser elevado serviria apenas para ganhar posições e para concentrar tráfego em certos períodos, pois uma vez alcançada uma boa posição só seria necessário fazer sua manutenção.

Enfim, se você não tem a intenção de promover produtos ou serviços em páginas específicas e escreve naturalmente como se estivesse conversando com o seu leitor, não precisa dar tanta atenção para técnicas de LSI, mas se o objetivo principal for comercializar produtos na Internet… então a ajuda de um bom profissional de SEO (e SEM) deve ser ponderada.

Programas de geração de tráfego

Se você procurar por palavras chaves como “geração de tráfego” e semelhantes em mecanismos de busca, encontrará programas como troca de visitas, troca de banners, troca links, PTCs e AutoSurfs com relativa facilidade. Estes apesar de muitas pessoas acharem que estão saturados, na verdade são ótimos programas de geração de tráfego gratuito principalmente quando o objetivo é gerar tráfego para páginas específicas – para divulgar e/ou promover algo.

A reclamação mais comum é: “Estes programas de geração de tráfego já estão ultrapassados, perco um tempão e não consigo nada deles!”

Como forma de incentivo que os administradores destes programas (AutoSurfs e PTCs principalmente) usam, normalmente é oferecer um meio de se ganhar dinheiro com eles… então outras pessoas dizem: “Eu nunca ganhei um centavo de programas como estes. É balela!”

Mas você deve entender que estes programas são para gerar tráfego, este é o objetivo básico!

Neste artigo vou lhe mostrar o meio no qual utilizo estes programas para gerar tráfego para páginas específicas, onde estas páginas podem ser uma página de apresentação de um produto (MMN, produtos digitais, produtos físicos…) ou uma para levar visitantes para uma página de um sítio ou blog.

Nota: nunca apresente as páginas de seus sítios ou blogs diretamente em programas de geração de tráfego, prefira utilizar páginas de captura – veja o artigo Técnicas para Atrair Leitores para o seu Blog (Parte IV) em que eu as trato como páginas falsas.

Descrição dos serviços utilizados [+/-]

Usos dos programas de geração de tráfego

Aqui não vou me ater a outras características destes programas, mas apenas descreverei o esquema em si ressaltando alguns pontos que julgo importantes. Vou lhe indicar apenas alguns programas mas os que eu lhe mostrarei não são os melhores e nem os que lhe trarão mais benefícios, você deve saber pesquisar e escolher outros que julgar apropriados. Também você participa deles se tiver interesse, eu não me responsabilizo por nenhum dano ou prejuízo que você (ou o seu sistema operacional) venha a sofrer. Como os desenvolvedores de softwares opensource dizem: Use por sua própria conta e risco!

Doravante quando me referir à página(s), estarei me referindo à páginas de captura. Também aqui é suposto que você criará uma página específica para apresentar algo.

Utizando AutoSurfs com troca de banners e troca de links

Uma vez composta sua página de divulgação e incluída em programas de AutoSurfs, a cada duas páginas visitadas por você em um programa deste tipo, estará garantindo que sua página será exibida 1 (uma) vez para outro membro dentro do mesmo programa de AutoSurf. Como os programas de troca de banners e troca de links normalmente têm uma taxa de 1:1, você deverá colocar os códigos destes programas em sua página. Desta forma, quando sua página for exibida em um programa de AutoSurf, estará ganhando um crédito para exibir um banner e/ou links de texto em seus programas correspondentes nas páginas dos outros membros.

Exemplo de ganhos de créditos

Se utilizou 500 créditos em um programa de AutoSurf, estará garantindo 500 exibições de seus banners e de seus links de texto além da página em si! Veja a página Como Criar Páginas de Captura (Squeeze Pages) Com o GIMP que lhe mostra como eu utilizei programas de troca de banners e troca de links.

Se você estiver utilizando estas unidades de anúncios em programas de AutoSurfs, já estará garantindo créditos para exibir os seus banners ou links de texto. Então, como URL deste banner ou links de texto você deverá colocar o endereço da página que deseja divulgar. Desta forma, quando o seu anúncio (banner ou links de texto) for exibido na página de outro membro, ao receber uma visita nesta página (URL cadastrada), estará gerando créditos para os outros programas (que estão na página exibida).

Utilizando programas de troca de visitas (home exchange)

Aqui a cada visita que fizer na página de um membro ganhará uma visita para a sua página cadastrada. Desta forma, utilizando páginas de captura, poderá colocar na mesma banners e links de texto garantindo que a cada vez que sua página seja vista, gere créditos para estes últimos programas também.

Nota: algumas pessoas utilizam a URL de troca de visitas em programas de AutoSurfs – não faça isto, terá sua conta cancelada!

Também nas páginas apresentadas neste tipo de programa você poderá dispor banners de outros programas em que tenha cadastro (AutoSurfs, PTCs, MMNs…). Assim ao mesmo tempo em que estará ganhando créditos para outros programas poderá ganhar afiliados para os seus programas.

Utilizando programas PTCs

Nos programs PTCs (ou PTRs) há um valor (em dinheiro) mínimo para que você possa receber os seus ganhos (não é fácil conseguir, dependendo do programa ou do número de afiliados em sua rede ). Mas o objetivo aqui não é “ganhar dinheiro”, pelo contrário, é gerar tráfego para uma página. Nesta concepção, você deverá escolher os programas em que seja mais fácil acumular ganhos para poder trocar por publicidade.

Mas para divulgar nestes programas você deve observar o que as outras pessoas já estão divulgando para poder definir que tipo de mercado seria interessante (e que valeria) divulgar. Mas você poderá divulgar algo (mesmo que aparentemente não seria óbvio) e observar se teve retorno.

Nas páginas divulgadas nestes programas (ou sistemas) você poderá incluir banners ou links de texto de programas de AutoSurfs, anúncios troca de links ou de banners, de outros programas PTCs, de programas MMNs, programas de afiliados…

Layouts para páginas de captura

Você deve compor suas páginas de modo que anúncios não ofusquem o conteúdo da mesma. Uma página de captura tem a função de atrair a atenção de um espectador para convencê-lo a executar uma ação, se você dipõe banners por todas as partes de modo não pensado ou desordenado é provável que eles tirem a atenção do visitante do conteúdo principal de suas páginas (fazendo com que o mesmo não haja como deve agir).

Se observar os layouts dos exemplos abaixo, eu disponibilizei todos os anúncios na parte inferior (onde eles receberão menos atenção). Isto se justifica pois o que interessa aqui é o acumulo de créditos nestes programas para exibir os meus banners e links de texto nos sítios dos outros membros e não a divulgação destes serviços.

Exemplo de layouts [+/-]

Primeiro exemplo de layout para páginas de captura

Segundo exemplo de layout para páginas de captura

Terceiro exemplo de layout para páginas de captura

Quarto exemplo de layout para páginas de captura

Conclusão

Como você pode observar não importa que tipo de programa é, se você entender sua função poderá ter os resultados para os quais este ou aquele programa foi projetado. Há até um ditado que é muito popular: “Os sistemas são perfeitos, as pessoas é que são falhas!“

Em programas de troca de links e de banners, é interessante notar que estas unidades de anúncios circulam pelas mais variadas partes da Internet, em sítios e blogs que tratam dos mais variados assuntos… assim, ao divulgar nestes programas estará garantindo que sua mensagem percorra lugares que você jamais iria visitar. O mesmo não ocorre em programas PTCs e de AutoSurfs (Troca de Visitas também), pois nestes programas há um grupo de pessoas em um círculo fechado, mas valem à pena pois a cada dia chegam novas pessoas neles, garantindo que aos poucos uma mensagem possa ser apresentada para um público novo.

Abaixo tem mais algumas dicas com relação aos programas aqui apresentados.

Programas de Autosurfs [+/-]

Programas de troca de visitas [+/-]

Programas PTCs [+/-]

Exibição de anúncios [+/-]

Programas de geração de tráfego [+/-]

Crie as suas próprias páginas de captura

O objetivo deste artigo é de divulgar o e-book “Como Criar Páginas de Captura (Squeeze Pages) Com o GIMP” e lhe mostrar os elementos básicos de uma página de captura.

As páginas de captura são muito usadas para a coleta de nomes e endereços de e-mails para comporem uma lista de e-mails, onde você poderá manter um contato frequente com os inscritos. Este contato é necessário pois é através dele que poderá promover os seus produtos ou serviços, assim como é possível também promover programas PTCs, MMNs, programas de afiliados, seus sítios, seus blogs… Se você ainda não leu, veja o artigo Lista de E-mails e também visite o e-curso Embasex Minha Lista de E-mails para um visão mais generalizada do que é e como poderá utilizar uma lista de e-mails para o fim de divulgação e promoção.

Seria interessante que fizesse uma leitura prévia online no e-book “Como Criar Páginas de Captura (Squeeze Pages) Com o Gimp” antes de prosseguir com a leitura deste artigo. Mas este e-book apenas lhe mostrará como construir o design de sua página de captura, ou seja, apenas a página em si mas não os elementos que a comporão. Sendo assim, este artigo vai ser uma extensão do mesmo, lhe dando dicas de como irá compor os vários elementos como títulos, subtítulos e caixas de destaque.

Também é interessante lembrar que você precisará de um programa (online ou em sua hospedagem) de auto resposta – mas conhecido como autoresponder para que possa construir a sua lista de e-mails através destas páginas de captura.

Elementos de uma Página de Captura

O Título de uma página de captura é o primeiro elemento que será visto e lido, se ele não for direto e convincente há uma grande chance de que quem vê sua página de captura não tenha interesse pelo resto do conteúdo.

Como esta é uma página exclusiva para coletar inscrições para uma lista de e-mails e a sua apresentação é feita de forma direta (em programas de geração de tráfego por exemplo), o tempo que uma pessoa tem para ler o título é muito curto, e é justamente neste breve intervalo de tempo que você precisa capturar a atenção do mesmo.

Evite utilizar verbos como “Quer…”, o motivo disto é que este verbo “querer” incita uma condição, induz que uma pessoa pense que você vai querer algo em troca, e a primeira coisa que vem à mente é dinheiro! Prefira usar os verbos aprender, saber, ir, ganhar… e também use estes verbos na forma imperativa (traz mais resultados positivos).

O Subtítulo não fica atrás em importância, pois é ele que vai ser decisivo para convencer o leitor a continuar a leitura do resto de sua página. Normalmente o subtítulo é uma síntese superficial do conteúdo que será exposto mas que seja tão convincente quanto o título e que incite o leitor a continuar a leitura.

O conteúdo do Corpo de sua página de captura vai ser crucial para convencer o leitor a deixar o seu nome e o seu endereço de e-mail. Uma das técnicas usadas para convencer um leitor é expor os pontos principais dos benefícios que terá em forma de lista – listas em geral como são resumos de fatos, passam a sensação de leitura rápida não causando rejeição à primeira vista.

É importante que deixe bem claro no corpo de sua página o que um recém inscrito irá receber. Se o leitor não tiver sido esclarecido sobre o que irá receber ou o que poderá esperar de sua assinatura em sua lista de e-mails, dificilmente deixará os seus dados de contato.

Um Brinde é a melhor forma incentivar uma inscrição. Mas não cometa o erro de exaltar o brinde em demasia e entregar um que não represente o que você prometeu. Mesmo sendo gratuito, qualquer pessoa exige que seja uma coisa que tenha valor efetivo. Se um recém inscrito receber “inutilidades”, abandonará rapidamente sua lista de e-mails e não voltará mais.

O Formulário de inscrição é que vai ser responsável por coletar os dados dos inscritos e enviá-los para um banco de dados através de um programa autoresponder.

Composição de sua Página de Captura

Após seguir as instruções do e-book mencionado no início deste artigo, sua página vai estar pronta para começar a ser editada, mas se você utilizar apenas códigos em HTML raramente verá a sua página de captura formatada da mesma maneira, tendo a mesma aparência principalmente nas fontes, nos vários navegadores de Internet (Web browsers) que existem à disposição. Isto se deve ao fato de que cada navegador de Internet vê as várias tags de acordo com o que é programado em seu engine (o núcleo, como se fosse o cérebro do navegador).

Aqui eu vou utilizar códigos CSS para garantir que em qualquer navegador que a sua página seja vista, apresente sempre a mesma formatação (mas em um ou outro sempre ocorrem pequenas alterações). Com estes códigos, vou lhe mostrar alguns elementos que poderá usar em suas páginas de captura criadas.

Para que este código mostrado aqui seja obedecido por todas as suas páginas, você deve de início criar um arquivo de texto simples com o nome styles.css e salvá-la no mesmo diretório em que estará a sua página de captura.

Para inserir este arquivo CSS em sua página de captura, você deve colocar entre as tags <head> e </head> o código abaixo (supondo que você tenha criado uma página HTML):

<html>
<head><title>Algum título</title>
…

<style type=”text/css” src=”styles.css”>

…
</head>

Nota: Os códigos descritos abaixo devem ser colocados dentro de seu arquivo styles.css.

Títulos

Se você observar os títulos nas várias páginas de captura que existem, ele é sempre composto com letras grandes (normalmente H1) e têm as cores vermelha e azul, às vezes têm partes sublinhadas ou em caixa alta…

Saiba Agora Mesmo Como Eu Consegui Ganhar MAIS de R$ 1.000,00 em um ÚNICO Mês… Vou Lhe Revelar este Segredo no eBook “Ganhe R$ 1.000,00 em um Mês” – Se Eu Consegui,Você Também CONSEGUIRÁ.

Sendo este título em tag H1 os vários navegadores irão escolher suas fontes “padrão” assim como o tamanho das fontes diferentemente. Para garantir que esta diferença será mínima, basta ter o código abaixo dentro de seu arquivo styles.css…

h1 {
font-family: Arial, Serif, Times;
font-size: 36px;
line-height: 38px;
font-weight: bold;
margin: 10;
padding: 10;
color: #DD0000;
}

…assim, toda vez que você usar as tags H1, elas terão sempre o mesmo formato. Da mesma maneira você poderá fazer com os cabeçalhos H2, H3, H4… Se dois ou mais tipos de cabeçalhos vão ter a mesma formatação, basta separá-los com vírgula (H1, H2, H3…).

Nota: para colorir o texto basta usar os meios habituais ou criar classes ou ids como o próximo exemplo, sendo que deve-se utilizar tags <span>…</span> para que as palavras fiquem na mesma linha.

Subtítulos

“Quero Compartilhar com VOCÊ estes Segredos para que Desfrute dos Mesmos BENEFÍCIOS que EU Estou Agora Desfrutando. E o Melhor, vou entregar este eBook Imediatamente para Você Através de seu E-mail GRATUITAMENTE!!!

É comum se colocar um, dois (ou até mais) subtítulos numa página de captura. Para garantir que terão a mesma formatação, basta criar uma classe ou uma identificação (ID) para esta formatação e escolher se quer ela em uma tag div ou p. Veja o exemplo abaixo.

Classes em parágrafos:

p.subtitulo {
font-family: Sans-serif;
font-weight: bold;
font-size: 18px;
line-height: 24px;
font-style: italic;
}

div.subtitulo {
font-family: Sans-serif;
font-weight: bold;
font-size: 18px;
line-height: 24px;
font-style: italic;
}

… para utilizar estas classes acima, ao se criar um parágrafo por exemplo, basta incluir class=”subtitulo” no mesmo, resultando em: <p class=”subtitulo” … >…</p>. Da mesma forma ocorre com a tag div: <div class=”subtitulo” …>…</div>.

Para generalizar as classes basta fazer como abaixo (observe o ponto inicial)…

.subtitulo {
font-family: Sans-serif;
font-weight: bold;
font-size: 18px;
line-height: 24px;
font-style: italic;
}

… assim poderá chamar a classe “subtitulo” igualmente em tags como p e div.

Também é perfeitamente possível utilizar identificações (IDs) para esta finalidade. Observe a tralha no início da função.

#subtitulo {
font-family: Sans-serif;
font-weight: bold;
font-size: 18px;
line-height: 24px;
font-style: italic;
}

… para utilizá-la em qualquer tag para construir subtítulos, basta inserí-la com o parâmetro ID: <p id=”subtitulo”… >…</p>; <div id=”subtitulo” …>…</div>;

Ainda no campo dos títulos e subtítulos, devido às várias maneiras como os vários navegadores formatam fontes, cores… uma técnica atual é usar os mesmos como imagens. Desta forma se criam títulos e subtítulos como imagens e as inserem na página de captura. Assim garante-se que estes elementos sejam vistos sempre da mesma forma.

Título em forma de imagem

Subtítulo em forma de imagem

Corpo da Página

No corpo da página além do texto comum, é empregado listas (ordenadas ou não), imagens, tabelas, caixas de destaque…

Você poderá utilizar a formatação comum de HTML ou CSS para construir o corpo do documento, seguindo às idéias anteriores relativas à parágrafos.

Como elementos adicionais, você poderá incluir caixas de destaque. O que são elas? Veja na figura abaixo ao que estou me referindo.

Como pode observar nas figuras acima, há linhas com traços ( pode ser também pontilhadas) ao redor das áreas. Para fazer esta formatação basta inserir diretamente onde a quer (supondo que está fazendo isto na célula de uma tabela) o parâmetro style=”border Xpx dashed”, como abaixo:

<table border=”0”>
<tr>…
<td style=”border: 3px dashed;”>… </td>
</tr>
</table>

Há outras definições para este parâmetro como: solid, dotted, groove, double, ridge, inset e outset. Se desejar, poderá testar estes valores substituindo a palavra dashed no exemplo acima. Também é mais comum utilizar blocos (div) ao invés de colunas (table), mas há alguns problemas em alinhamentos centralizados.

Para concluir, veja abaixo uma página montada com os elementos ressaltados aqui neste artigo.

Página de captura com seus elementos básicos

Conclusão

Vale lembrar que páginas de captura não são vistas com bons olhos por mecanismos de busca – daí ser quase que exclusivamente usada para apresentação direta em programas de geração de tráfego. Mas isto não quer dizer que você sofrerá “sanções”, apenas não espere ter uma página de captura sendo mostrada nas primeiras posições em mecanismos de busca!

Na imagem final da página de captura apresentada, no campo do formulário não está o que é de costume, algum parágrafo que garante para o inscrito que os seus dados pessoais não serão compartilhados ou vendidos com terceiros (… eu esqueci de colocar, então, não cometa o mesmo erro que eu…), isto é importante pois gera mais confiança em quem estiver vendo a sua página.

Leitura Recomendada
CSS Guia de Consulta Rápida

Outro fator importante (…que também esqueci), é pedir para a pessoa que coloque nos contatos de sua conta de e-mail (a que usará ao preencher o formulário) o seu endereço de e-mail : o mesmo endereço que usará em seu autoresponder. Isto é crucial para garantir que as sua primeiras mensagens cheguem na caixa de entrada do recém inscrito, principalmente em servidores como o Yahoo, Hotmail, BOL, e tantos outros que possuem filtros anti spam bem rígidos. O Gmail não é tão rígido assim nas primeiras mensagens.

Também, crê-se que o formulário de inscrição deva permanecer visível e que seja colocado no campo de visão do visitante (em inglês é usado o termo above the fold que se refere à parte da página que fica visível quando alguém acessa o seu sítio e não movimenta a página para baixo).

Então, faça agora mesmo a sua página de captura, divulgue-a, construa a sua lista de e-mails e promova os seus produtos!

Bônus Surpresa [+/-]

Ilustração de Funcionamento do PageEar

Durante a criação de uma campanha ou mesmo a divulgação em si de produtos ou serviços temos que nos valer do que está ao nosso alcance para obtermos os resultados  planejados. Quanto mais variados forem os meios, melhores dados obteremos para analisar no que devemos investir, o que deve ser melhorado, o que deixar em segundo plano, no que concentrar os esforços. Atualmente no mundo do Marketin Virtual há diversas tecnologias desenvolvidas para atrair a atenção de um visitante em uma página.

Banners, pop ups, pop unders, ads flying, pop overs e vários outros meios foram criados como forma de divulgar produtos e/ou serviços no mundo virtual. Atualmente, resistindo ao tempo ainda os vemos a todo momento (se nossos navegadores não conseguirem bloquá-los) mas o simples fato de os vermos já desperta em nosso cérebro: “É propaganda!!!”

Pensando nisto, várias outras tecnologias estão sendo criadas e testadas, levando em consideração o nosso senso antipropagandas.

Neste artigo vou descrever os que atualmente são chamados de “Pagepeel“. Este é um ótimo meio de divulgação de produtos e serviços que você poderá utilizar como um dos meios de divulgação em suas campanhas de Marketing Virtual.

Os pagepeels são imagens (duas para ser mais exato) inseridas em objetos flash através de um código em javascript e que cujo objeto em flash está localizado em uma extremidade superior de páginas de sítios e mesmo blogs. Quando passamos ou repousamos o cursor do mouse sobre uma imagem animada (objeto em flash), esta imagem “se expande” revelando uma outra previamente configurada. Mas não é apenas isto, este objeto é animado simulando a abertura e fechamento de uma dobra de página, e é justamente este efeito que é encarregado de chamar inicialmente a atenção de um visitante – com o intuito de fazê-lo passar o cursor de seu mouse sobre o objeto em flash.

Veja o funcionamento desta ferramenta de divulgação na animação abaixo.

Este tipo de ferramenta por um bom tempo era disponibilizada apenas comercialmente e até hoje muitas pessoas e empresas cobram certa quantia por ela, mas um programador chamado Christian Harz decidiu disponibilizar esta ferramenta gratuitamente! Sem pagadinhas e nem anúncios patrocinados! Para utilizar esta ferramenta, você deve possuir uma hospedagem própria, com suporte à Flash.

Para acessar o sítio deste programador, vá para http://www.webpicasso.de/blog/. O blog possui tradução em Inglês (o idioma original é Alemão). No blog, há todas as instruções necessárias para que você baixe, instale e configure o PageEar – que é o nome do programa. Além do programa em si, há também módulos para WordPress, Joomla, Drupal e extensões Typo3.

Caso não consiga ler instruções em inglês, não tem problema. Use o tradudor do Google ou outro tradudor online como o BabelFish para traduzir a página do PageEar.

Leia abaixo a tradução direta que eu fiz das instruções que estão na página principal do PageEar (caso o texto esteja pequeno, basta pressionar o símbolo “+” para aumentar o tamanho da fonte do documento).

É bom lembrar que o programa PageEar é baseado em javascript e flashplayer – dependendo da versão e o tipo de navegador de Internet que usar poderá não ter sempre os mesmos resultados (incompatibilidade, bugs, etc).

Então não perca tempo, baixe, instale, configure e comece a divulgar os seus produtos, programas de afiliados, blogs, sítios, faça chamadas para uma lista de e-mails, para um e-curso ou o que quiser com esta ferramenta que irá logo à primeira vista chamar a atenção de um visitante em suas páginas e não irá amolá-lo e nem passar a má impressão que aquilo ali é uma propaganda!

Se já utiliza ou vai usar este programa, deixe o seu comentário aqui, dê a sua opinião à respeito do PageEar.